/* =============================================================================
   HİZMET GENİŞ — zeeframes.com/services/… grameri, FEELS diliyle
   (SİTENİN ANA HİZMET GRAMERİ — on yedi sayfa; ilki seo-geo-hizmetleri.html)

   ÖNCE hizmet-ortak.css yüklenir; bu dosya yalnız BU GRAMERE özgü bölümleri
   tanımlar. Sekiz hizmet sayfasının ortak parçaları (fontlar, düğme, ölçü
   çizgisi, logo şeridi, açılış hareketi) orada duruyor.

   Kaynak sayfa öncekilerden bambaşka bir tür: salo.uk sessiz ve seyrek bir
   portfolyo dili konuşuyordu, bu ise SATIŞ ODAKLI, uzun ve bilgi yoğun bir
   hizmet sayfası. On üç hamlesi var:

     1) AÇILIŞ        kırıntı yolu + başlık + özet + güven rozetleri; sağda
                      "görüşme ayarla" kartı, zeminde vurgu renginden ışık
     2) BÖLÜM MENÜSÜ  yapışkan hap şeridi; kaydırdıkça o anki bölüm doluyor
     3) KİMLER İÇİN   başlık ikiye bölünmüş (solda beyan, sağda açıklama) +
                      dört kitle kartı; üçüncüsü beyaz zeminde
     4) BELİRTİLER    AÇIK panel: solda görsel, sağda işaretli liste
     5) NE YAPIYORUZ  yedi hizmet kartı + iki kolon kaplayan bir CTA kartı
     6) SÜREÇ         AÇIK bölüm: aralarında ince çizgi olan dört kolon;
                      sonuncusu koyu bir CTA kartı
     7) ARAÇLAR       solda sekme listesi, sağda açık panelde araç kutucukları;
                      yedi küme, sekizer araç — sekmeler çalışıyor
     8) KULLANIM      AÇIK bölüm: tek çerçeve içinde dokuz hücre
        ALANLARI
     9) NEDEN FEELS   altı kart
    10) VURGU BANDI   baştan başa vurgu renginde CTA paneli
    11) SSS           AÇIK bölüm: akordeon
    12) ALT BİLGİ     paylaşılan bileşen

   Kaynak sayfada SSS'nin ardından bir de vurgu renginde tam genişlik kapanış
   çağrısı vardı; bu sayfadan çıkarıldı. Sayfanın çağrısı zaten üç yerde
   duruyor (açılış kartı, Çözümlerimiz'in beyaz hücresi, Sürecimiz kartı) ve
   dördüncüsü macentayı gramerin taşıyabileceğinden fazla büyütüyordu.
   Yapışkan menüdeki S.S.S. hapı da kaldırıldı — bölümün kendisi duruyor.

   AÇIK/KOYU RİTMİ bu tasarımın belkemiği; kaynak sayfa bölümleri sırayla
   koyudan beyaza çeviriyor. FEELS'e taşırken YENİ RENK EKLENMEDİ: açık bölüm
   markanın kendi paletinin TERSİ — zemin #f0f0f0, mürekkep #0c0c0c. Bunu
   `.zx-light` yapıyor; içeride yalnız üç belirteç (`color`, `--sv-dim`,
   `--sv-line`) dönüyor, bileşen kuralları iki temada da aynı kalıyor.

   VURGU RENGİ ise sayfa başına (`--sv-ac`, sayfanın helmet <style>'ında).
   Açık bölümde vurgu METİN olarak kullanılmıyor — çoğu ton #f0f0f0 üstünde
   3:1'in altında kalıyor. Orada vurgu yalnız DOLGU: ikon kutusu, madde imi,
   yapışkan menüdeki aktif hap. Metin rengi her açık bölümde mürekkep.
   ============================================================================= */

/* Hap şeridinin yüksekliği: dolgu (2 × 1cqw) + hap (2 × 0.5cqw dolgu +
   ~1.1cqw satır) + 1px alt çizgi. Açılışın yüksekliği bundan çıkarılıyor,
   böylece açılış + şerit birlikte tam olarak ilk ekranı dolduruyor. */
.zx-root { color: #ffffff; --zx-subnav-h: max(4.15cqw, 52px); }

/* ── ÇAPA PAYI ────────────────────────────────────────────────────────────
   Hap şeridi yapışkan (top: 0); `#bölüm` bağlantısıyla gelinen bölümün tepesi
   şeridin ALTINDA kalıyordu. #belirtiler satır içi `padding-top: 0` taşıdığı
   için en çok o gömülüyordu (telefonda 58–67px). Tarayıcı çapaya kaydırırken
   bu payı bırakıyor; duran tasarıma dokunmuyor. */
.zx-root section[id] { scroll-margin-top: calc(var(--zx-subnav-h) + 1.5cqw); }

/* ── MASAÜSTÜ OKUNURLUK TABANLARI (901–1250px) ──────────────────────────
   900px üstünde her ölçü 1920 tuvalinin cqw'si ve altı yoktu: iPad yatayda
   (1024) gövde 9px, üst başlıklar 7px, form alanları 9.7px'e iniyordu.
   Tabanlar `max(Xcqw, Npx)`; N = X × 12.5, yani tuval 1250px'e inene kadar
   cqw değeri zaten büyük kalıyor ve kural hiçbir şey değiştirmiyor. 1280
   (kaydırma çubuğuyla 1263px tuval), 1440 ve 1920 birebir aynı. Altında yazı
   1250px'teki boyunda sabitleniyor. Kuralların kendisi aşağıda, her bileşenin
   kendi satırında. */

/* ── açık bölüm ──────────────────────────────────────────────────────────── */
.zx-light {
  background: #f0f0f0; color: #0c0c0c;
  --sv-dim: rgba(12,12,12,0.83);
  --sv-line: rgba(12,12,12,0.13);
}
.zx-light .sv-mono { color: rgba(12,12,12,0.75); }
.zx-root .zx-light a { color: #0c0c0c; }
.zx-light .sv-btn-p { background: #0c0c0c; color: #ffffff; }
.zx-root .zx-light a.sv-btn-p { color: #ffffff; }
.zx-light .sv-btn-p:hover { background: #000000; }
.zx-light .sv-btn-s { border-color: rgba(12,12,12,0.28); color: #0c0c0c; }
.zx-light .sv-btn-s:hover { background: rgba(12,12,12,0.05); }

/* ── ODAK HALKASI: açık zeminde mürekkep ─────────────────────────────────
   hizmet-ortak.css:66 odak halkasını `--sv-ac` ile çiziyor. Vurgu tonları
   yalnız KOYU zemine göre seçildiği için açık bölümlerde halka kayboluyor:
   ölçüldü, on yedi sayfanın on ikisinde #f0f0f0 üstünde 1.06–2.95 arası,
   yani WCAG'ın metin dışı 3:1 eşiğinin altında (limon 1.06, camgöbeği 1.09,
   sarı 1.31, turkuaz 1.39, yeşil 1.52, çimen 1.69 en kötüleri). Açık
   bölümlerde her sayfada on kadar odaklanabilir öge var — S.S.S.
   akordeonunun sekiz düğmesi ve iki çağrı bağlantısı — yani klavyeyle
   gezen biri nerede olduğunu göremiyordu.

   Halka mürekkebe çevriliyor: #0c0c0c / #f0f0f0 = 17.2:1. Kural yalnız
   `:focus-visible` durumunu değiştiriyor, duran tasarıma dokunmuyor.

   `.zx-card-solid` de buraya dahil: o kart KOYU ızgaradaki tek BEYAZ yüzey,
   `.zx-light` taşımıyor ama zemini açık.

   Özgüllük: taban kural (0,2,1); buradakiler `.zx-root` ekiyle (0,3,1). */
.zx-root .zx-light a:focus-visible,
.zx-root .zx-light button:focus-visible,
.zx-root .zx-card-solid a:focus-visible,
.zx-root .zx-card-solid button:focus-visible { outline-color: #0c0c0c; }

/* İSTİSNA — açık bölümün içindeki KOYU ada. Süreç çağrı kartının zemini
   #0c0c0c; yukarıdaki kural oraya da uğrardı ve halka görünmez olurdu.
   Vurgu rengi geri veriliyor. Aynı özgüllükte ama SONRA tanımlı, o yüzden
   kazanıyor. */
.zx-root .zx-proc-cta a:focus-visible,
.zx-root .zx-proc-cta button:focus-visible { outline-color: var(--sv-ac); }

/* ── tipografi (bu gramere özgü ölçek) ───────────────────────────────────
   Kaynak sayfa öncekinden belirgin biçimde KÜÇÜK yazıyor: H1 48px, bölüm
   başlığı 36px, gövde 16px. Sebebi tür farkı — bu sayfa okunmak için var,
   etkilemek için değil. Ölçek oradan alındı, FEELS tuvaline çevrildi. */
.zx-h1  { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 3cqw;   line-height: 1.06; letter-spacing: -0.03em; }
.zx-h2  { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 2.35cqw; line-height: 1.14; letter-spacing: -0.028em; }
.zx-h3  { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: max(1.35cqw, 16.5px); line-height: 1.24; letter-spacing: -0.02em; }
.zx-h4  { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: max(1.22cqw, 15px); line-height: 1.24; letter-spacing: -0.02em; }
.zx-p   { font-family: 'Jost', sans-serif; font-weight: 300; font-size: max(1cqw, 12.5px); line-height: 1.6; color: var(--sv-dim); text-wrap: pretty; }
.zx-sm  { font-family: 'Jost', sans-serif; font-weight: 300; font-size: max(0.88cqw, 11px); line-height: 1.58; color: var(--sv-dim); text-wrap: pretty; }
.zx-root .zx-h1, .zx-root .zx-h2, .zx-root .zx-h3, .zx-root .zx-h4 { margin: 0; }

/* ── bölüm başlığı: solda beyan, sağda açıklama ──────────────────────────
   Kaynak sayfada her bölüm bu ikiliyle açılıyor. Sağdaki paragraf başlığın
   ALTINA değil YANINA konuyor; böylece başlık kısalıyor ve bölümün ne
   anlattığı tek satırda okunuyor. */
.zx-head { display: grid; grid-template-columns: 50fr 42fr; column-gap: 4cqw; align-items: end; }
.zx-head-eyebrow { display: block; margin-bottom: 1.1cqw; }
.zx-head h2 { max-width: 17ch; }
.zx-head p { padding-bottom: 0.3cqw; }

/* ── kart ve ikon ────────────────────────────────────────────────────────── */
.zx-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1cqw;
  padding: 1.7cqw; border-radius: 0.62cqw;
  background: rgba(240,240,240,0.035);
  box-shadow: inset 0 0 0 1px var(--sv-line);
  transition: background .35s ease, box-shadow .35s ease;
}
.zx-card:hover { background: rgba(240,240,240,0.06); }
.zx-light .zx-card { background: rgba(12,12,12,0.025); }
.zx-light .zx-card:hover { background: rgba(12,12,12,0.045); }

/* İkon kutusu: vurgu renginin yalnızca DOLGU olarak göründüğü yer. Kutunun
   zemini vurgunun çok seyreltilmiş hâli, çizgi ikon ise tam vurgu — metin
   kontrastı kuralına takılmıyor çünkü metin değil.

   REVİZE: kutu artık NÖTR. Vurgu rengi sayfada dört bölümde birden ikon
   kutusu olarak tekrarlanınca macenta gramerin sesini bastırıyordu; şimdi
   yalnız yapışkan menüde ve vurgu bandında kalıyor. Değerler mürekkepten
   türüyor, vurgudan değil — bu yüzden koyu ve açık bölüm için iki ayrı
   takım yazmak gerekiyor (tek `color-mix` ikisini birden veremiyor). */
.zx-icon {
  width: 2.3cqw; height: 2.3cqw; min-width: 34px; min-height: 34px; flex: none;
  border-radius: 0.42cqw; display: grid; place-items: center;
  background: rgba(240,240,240,0.07);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.16);
  color: rgba(255,255,255,0.82);
}
/* Açık bölümler (Sürecimiz, Kullanım Alanları) ve koyu ızgaradaki beyaz kart. */
.zx-light .zx-icon,
.zx-card-solid .zx-icon {
  background: rgba(12,12,12,0.05);
  box-shadow: inset 0 0 0 1px rgba(12,12,12,0.14);
  color: rgba(12,12,12,0.72);
}
.zx-icon svg { width: 52%; height: 52%; min-width: 16px; min-height: 16px; display: block; }

/* "Kimler için" kartlarında ikon KUTUSU yok: tasarımdan gelen dört degrade
   işaretin kendi rengi ve hacmi var, vurgu renginde bir kareye sokmak ikisini
   de bozuyordu. Dosyalar farklı en–boy oranlarında (85×80, 96×95, 80×80,
   60×80); yükseklik sabitlenip genişlik serbest bırakılıyor ki dördü aynı
   hatta otursun. */
.zx-mark { display: block; flex: none; }
.zx-mark img { display: block; height: 3.4cqw; min-height: 48px; width: auto; }

/* ── işaretli liste ──────────────────────────────────────────────────────
   Kaynak sayfada dört uçlu bir yıldız imi var; burada aynı işaret tek bir
   SVG olarak markup'ta duruyor (madde imi metnin parçası değil, bu yüzden
   `::marker` yerine gerçek bir eleman). */
.zx-list { display: flex; flex-direction: column; gap: 0.42cqw; }
.zx-list li { display: flex; align-items: flex-start; gap: 0.75cqw; }
.zx-list svg { width: 0.85cqw; height: 0.85cqw; min-width: 12px; min-height: 12px;
  flex: none; margin-top: 0.35cqw; color: var(--sv-ac); }
/* Açık bölümde mim NÖTR. Önce vurgunun mürekkeple karıştırılmış hâliydi
   (%82) ama beyaz panelde mora dönüyordu ve altı maddenin sol kenarı mor bir
   sütun gibi okunuyordu — göz metinden önce imleri sayıyordu. Şimdi düz gri,
   gövde metninden (0.66) daha soluk: mim geride, cümle önde. */
.zx-light .zx-list svg { color: rgba(12,12,12,0.4); }

/* ===========================================================================
   1) AÇILIŞ
   =========================================================================== */
/* Açılış TAM EKRANI karşılıyor. Yükseklik ilk ekranın tamamı eksi hap
   şeridi; şerit böylece alt kenarda, katlanma çizgisinin hemen üstünde
   duruyor. `svh` mobilde adres çubuğu açıkken de doğru ölçüyor; `vh` satırı
   desteklemeyen tarayıcılar için yedek. İçerik dikeyde ortalanıyor —
   üstteki 9.5cqw dolgu mutlak konumlu başlığın altında kalmasını sağlıyor. */
.zx-hero { position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--zx-subnav-h));
  min-height: calc(100svh - var(--zx-subnav-h));
  padding-top: 9.5cqw; padding-bottom: 5cqw; overflow: hidden; }
/* Zemindeki ışık: kaynak sayfada vurgu renginden aşağı doğru sönen geniş bir
   hâle var. Tek radyal gradyan + üstüne zemine eriten ikinci bir katman. */
.zx-hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(78% 62% at 34% 88%, color-mix(in srgb, var(--sv-ac) 20%, transparent) 0%, transparent 70%),
    radial-gradient(46% 60% at 84% 8%, rgba(240,240,240,0.05) 0%, transparent 72%);
}
.zx-hero-in { position: relative; z-index: 2; }

/* KAPSAM `.sv-root`, `.zx-root` DEĞİL — bilerek. Bu iki bileşeni (kırıntı yolu
   ve yüzen çağrı kapsülü) `hizmet-genis.css`i yükleyen AMA `zx-root` TAŞIMAYAN
   altı sayfa da kullanıyor: projeler.html, dört proje detayı ve kariyer.html.
   Orada kurallar boşa düşüyordu. Sonucu: `.zx-dock-top` bir `<button>` ve
   stilsiz kalınca tarayıcının öntanımlı AÇIK zeminini alıyor; içindeki
   `width: 48%` de çözülemeyip SVG'yi 300×150'ye çıkarıyordu — alt bilgideki
   kapsülün üstüne taşan dev beyaz kutu buydu. Kırıntı yolu bağlantıları da
   kendi soluk tonu ve ölçüsü yerine `.sv-root a`nın tam beyazına düşüyordu.

   `.zx-root` buraya yalnızca `.sv-root a` (0,2,0) kuralını yenmek için
   konmuştu; `.sv-root` aynı ağırlıkta ve bu dosya sonra yüklendiği için
   kazanıyor. Dock taşıyan yirmi dört sayfanın hepsinde `sv-root` var,
   doğrulandı. */
.zx-crumb { display: flex; align-items: center; gap: 0.6cqw; margin-bottom: 2.6cqw; }
.zx-crumb span, .sv-root .zx-crumb a {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: max(0.83cqw, 10px);
  color: rgba(255,255,255,0.73); white-space: nowrap; }
.sv-root .zx-crumb a:hover { color: #ffffff; }
.zx-crumb-sep { opacity: 0.4; }
.zx-crumb-now { color: #ffffff !important; }

.zx-hero-grid { display: grid; grid-template-columns: 54fr 38fr; column-gap: 4cqw; align-items: end; }
/* Başlık tek satırda okunuyor: 14ch'lik eski sınır "S.E.O / G.E.O" ile
   "Hizmetleri" arasını bölüyordu. Sınır kalkınca genişliği ızgara kolonu
   veriyor — bu ölçekte (3cqw) başlık kolonun yarısı kadar yer tutuyor. */
.zx-hero-c h1 { max-width: none; }
.zx-hero-c p { max-width: 46ch; margin-top: 1.4cqw; }
.zx-trust { display: block; margin-top: 3cqw; letter-spacing: 0.2em; }
/* Rozetler alt bilgideki ödül şeridinin aynısı: iki defne çelengi arasında
   standart adı ve bir satır açıklama, yazılar gri gradyanla dolu. Ölçü oranı
   alt bilgiden birebir alınıp %70'ine indirildi (12.29→8.6cqw). Çelenk SVG'si
   38×78 olduğu için genişlik = yükseklik × 0.487; oran bozulursa çelenk
   eziliyor. */
/* KÜÇÜLDÜ: rozetlerin altındaki tek satırlık açıklama ("İnsan Odaklı Tasarım"
   vb.) kaldırıldı, geriye yalnız standardın adı kaldı. Yükseklik iki satırlık
   yazının gerektirdiği kadar (2.1cqw); genişlik 8.6 → 6.8cqw, yani çelenkle
   yazı arasındaki boşluk da daraldı.

   Çelenk oranı KORUNMALI: SVG 38×78, genişlik = yükseklik × 0.487. Bozulursa
   çelenk eziliyor — 2.1 × 0.487 = 1.023cqw. */
/* Masaüstü tabanları (N = X × 12.5) rozetin BÜTÜN ölçülerinde aynı oranda:
   yalnız yazıya taban verilseydi 901–1250px'te yazı çelenklerin arasından
   taşardı. Oran korunuyor — 12.75 / 26 = 0.49. */
.zx-badges { display: flex; flex-wrap: wrap; gap: max(2cqw, 25px); margin-top: 1.6cqw; }
.zx-badge { position: relative; flex: none; width: max(6.8cqw, 85px); height: max(2.1cqw, 26px); }
.zx-badge-w { position: absolute; top: 0; left: 0; width: max(1.023cqw, 12.75px); height: max(2.1cqw, 26px); }
.zx-badge-w-r { left: auto; right: 0; }
/* Gradyan metin: dolgu saydam, zemin metne kırpılıyor. `color` yedek —
   background-clip desteklenmezse yazı düz beyaz kalıyor, kaybolmuyor. */
.zx-badge b {
  position: absolute; text-align: center; color: #ffffff;
  background: linear-gradient(180deg, #f0f0f0 0%, #8a8a8a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.zx-badge b { left: max(1.023cqw, 12.75px); right: max(1.023cqw, 12.75px); top: max(0.13cqw, 1.5px);
  font-family: 'Jost', sans-serif; font-weight: 600;
  font-size: max(0.66cqw, 8.25px); line-height: max(0.92cqw, 11.5px); }

/* Sağdaki "görüşme ayarla" kartı. */
.zx-call { display: grid; grid-template-columns: 34fr 62fr; column-gap: 1.2cqw;
  align-items: center; padding: 1.1cqw; border-radius: 0.72cqw;
  background: rgba(240,240,240,0.055);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.11);
  -webkit-backdrop-filter: blur(2cqw); backdrop-filter: blur(2cqw); }
.zx-call-img { position: relative; overflow: hidden; border-radius: 0.42cqw;
  aspect-ratio: 4 / 3; background: #17171c; }
.zx-call-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zx-call-c { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6cqw; }
.zx-call-c .sv-btn { margin-top: 0.4cqw; }
/* Kart sürüklenebilir (sürücü: hizmet-ortak.js, 12. iş). Kaydırmayı JS
   `translate` özelliğiyle veriyor; `transform` açılış hareketinde kullanıldığı
   için ona dokunulmuyor — gerekçenin uzunu sürücüde. İmleç sürüklenebilirliği
   haber veriyor; sürüklerken metin seçilmesin diye seçim kapanıyor. */
.zx-call { cursor: grab; }
.zx-call.sv-dragging { cursor: grabbing; user-select: none; }
.zx-call img { user-select: none; }
/* Yerinden oynayan kart üste çıkıyor. Kartın kendi `z-index`i yetmiyor:
   `.zx-hero-in` (z-index 2) bir yığın bağlamı açıyor, içeriden dışarıdaki
   üst menüyü (z-index 60) geçmek mümkün değil. Bu yüzden bağlamı taşıyan
   kutu kaldırılıyor. Yoksa kart menünün altına kayıp orada tutulamıyordu. */
.zx-call.sv-dragging, .zx-call.sv-moved { position: relative; z-index: 1; }
.zx-hero-in:has(.zx-call.sv-dragging), .zx-hero-in:has(.zx-call.sv-moved) { z-index: 61; }

/* AMA MENÜ AÇIKKEN DEĞİL. Yukarıdaki kural kartı değil, kartı TAŞIYAN KUTUYU
   (`.zx-hero-in`) menünün üstüne çıkarıyor — başka yolu yok, çünkü o kutu bir
   yığın bağlamı açıyor. Bedeli şuydu: kart bir kez yerinden oynadıktan sonra
   hero'nun TAMAMI (başlık, paragraf, rozetler) mega menü panelinin önüne
   geçiyordu; panel açılınca başlık panelin üstünde okunuyor, açılış kartı da
   panelin üstüne biniyordu — iki yapı iç içe giriyordu.

   Menü açıkken kutu kendi katına (2) geri iniyor. Açıklık `.nav-root:hover`
   ile okunuyor: paneller `.nav-root` içinde ve panelle sekme arasındaki boşluğu
   `padding-top` köprülüyor, yani imleç panelin üstündeyken `.nav-root` da
   hover'da. `:focus-within` klavye ve dokunmatik açılışı yakalıyor.

   SÜRÜKLEME İSTİSNASI: kart o anda sürükleniyorsa kural uygulanmıyor. İmleç
   sürüklerken menünün üstünden geçebilir; kartın oradan aniden panelin arkasına
   düşmesi sürüklemeyi koparırdı. */
.zx-hero:has(.nav-root:hover) .zx-hero-in:not(:has(.zx-call.sv-dragging)),
.zx-hero:has(.nav-root:focus-within) .zx-hero-in:not(:has(.zx-call.sv-dragging)) {
  z-index: 2;
}

/* ===========================================================================
   2) BÖLÜM MENÜSÜ — yapışkan hap şeridi
   =========================================================================== */
.zx-subnav { position: sticky; top: 0; z-index: 50;
  padding-top: max(1cqw, 12.5px); padding-bottom: max(1cqw, 12.5px);
  background: rgba(12,12,12,0.82); border-bottom: 1px solid var(--sv-line);
  -webkit-backdrop-filter: blur(1.5cqw); backdrop-filter: blur(1.5cqw); }
.zx-subnav-list { display: flex; align-items: center; gap: max(2.2cqw, 27.5px);
  overflow-x: auto; scrollbar-width: none; }
.zx-subnav-list::-webkit-scrollbar { display: none; }
/* Kaydırma ipucu: sürücü (hizmet-ortak.js, 8. iş) liste TAŞIYORSA gizli hap
   olan uca `zx-kenar-sol` / `zx-kenar-sag` veriyor; o kenar saydamlaşıyor.
   Liste taşmadığı sürece sınıf yok — geniş masaüstünde hiçbir şey değişmiyor. */
.zx-subnav-list.zx-kenar-sag {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.zx-subnav-list.zx-kenar-sol {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px);
          mask-image: linear-gradient(90deg, transparent, #000 44px); }
.zx-subnav-list.zx-kenar-sol.zx-kenar-sag {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.zx-root .zx-chip { position: relative; flex: none; padding: max(0.5cqw, 6px) 0;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: max(0.88cqw, 11px);
  color: rgba(255,255,255,0.76); white-space: nowrap;
  transition: color .3s ease; }
/* Aktif işaret: anasayfadaki "Şimdi başlayalım" çizgisinin aynısı — soldan
   sağa açılan, beyazdan griye giden 1px'lik çizgi. Dolgu hap değil; vurgu
   rengi burada kullanılmıyor. Sürücü kaydırma konumuna göre `.on` veriyor. */
.zx-root .zx-chip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: linear-gradient(90deg, #ffffff 0%, #8a8a8a 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.7,.2,1); }
.zx-root .zx-chip:hover { color: #ffffff; }
.zx-root .zx-chip:hover::after { transform: scaleX(1); }
.zx-root .zx-chip.on { color: #ffffff; }
.zx-root .zx-chip.on::after { transform: scaleX(1); }

/* ===========================================================================
   3) KİMLER İÇİN
   =========================================================================== */
.zx-sec { padding-top: 5.5cqw; padding-bottom: 5.5cqw; }
.zx-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; margin-top: 3cqw; }

/* İKON ↔ BAŞLIK BOŞLUĞU — sayfanın tamamında geçerli kural.
   Kaynak sayfada ikon kartın tepesine yapışıyor, metin çok aşağıdan
   başlıyor: kartı dolduran şey yazı değil BOŞLUK. Her kart ailesine kendi
   ölçüsünü veriyor, tek bir sayı kullanmıyor:

     .audience-card       126px   → #kime      (4 kolon)
     .process-card        115px   → .zx-proc   (4 kolon)
     .service-offer-card   ~93px  → .zx-offer  (3 kolon)
     .why-card             64px   → #neden     (3 kolon)

   #kullanim-alanlari dışarıda: `.zx-case` hücrelerinin boşluğu kendi
   kuralında (`.zx-cases`), `.zx-card` ailesine ait değil
   kardeş. Oraya `gap` vermek başlığı metinden ayırırdı, ikondan değil.

   Kaynağın tuvali 1240px, buranınki 1600px'te 83.33cqw; 1cqw ≈ 16px olduğu
   için px değerleri 16'ya bölünerek cqw'ye çevrildi. #kime ölçülerek
   doğrulandı: kaynak 134px, burası 136px.

   REVİZE: kaynağın birebir ölçüsü fazla havadar bulundu. En geniş ikisi
   yaklaşık üç satır (3 × 1.39cqw) kısaltıldı, üçüncüsü de aynı bandın içine
   çekildi; alttaki ikisi zaten o banttaydı, dokunulmadı. Hepsi artık
   2.5–4cqw arasında. */
#kime .zx-card { gap: 3.9cqw; }
/* İki kolon kaplayan CTA kartı hariç: o kart yatay diziliyor, `gap`i metin
   ile düğme arasındaki mesafe — ikon boşluğu oraya uygulanamaz. */
.zx-offer .zx-card:not(.zx-offer-cta) { gap: 3.4cqw; }
#neden .zx-card { gap: 4cqw; }

/* Üçüncü kart TERS: koyu ızgaradaki tek beyaz yüzey. Sözleşme `.zx-light`
   ile birebir aynı — yalnız `background` ve `color` vermek yetmiyor, gövde
   metni `--sv-dim`den, kartın kendi hattı `--sv-line`dan besleniyor; ikisi de
   koyu tema değerinde kalırsa beyaz kartta metin de çerçeve de kayboluyor.
   Vurgu rengi (#ff24bd) #f0f0f0 üstünde 3:1'in altında kaldığı için ikon
   çizgisi mürekkeple karıştırılıyor — açık bölümlerdeki madde imiyle aynı
   oran (%82). Kutunun zemini ise dolgu olduğu için tam vurgudan seyreltilir. */
.zx-card-solid {
  background: #f0f0f0; color: #0c0c0c;
  --sv-dim: rgba(12,12,12,0.83);
  --sv-line: rgba(12,12,12,0.13);
}
.zx-root .zx-card-solid:hover { background: #ffffff; }
/* Beyaz kartın içindeki düğme de temayı çevirmek zorunda: koyu temada dolu
   düğme AÇIK, beyaz kartta açık düğme kaybolurdu. `.zx-light`in düğme
   sözleşmesinin aynısı, yalnız sınıfa bağlanmış hâli. */
.zx-card-solid .sv-btn-p { background: #0c0c0c; color: #ffffff; }
.zx-root .zx-card-solid a.sv-btn-p { color: #ffffff; }
.zx-card-solid .sv-btn-p:hover { background: #000000; }
.zx-card-solid .sv-btn-s { border-color: rgba(12,12,12,0.28); color: #0c0c0c; }
.zx-root .zx-card-solid a.sv-btn-s { color: #0c0c0c; }
.zx-card-solid .sv-btn-s:hover { background: rgba(12,12,12,0.05); }

/* ── vurgu renkli üzerine-gelme etkileri kapalı ─────────────────────────
   Paylaşılan düğme, üzerine gelinince vurgu renginde bir halka/çerçeve
   açıyordu (hizmet-ortak.css). Bu gramerde macenta yalnız DOLGU olarak
   kullanılıyor — halka koyu zeminde mor bir hâle bırakıyordu. Kural bu
   sayfayla sınırlı; diğer yedi hizmet sayfası paylaşılan hâlini koruyor. */
.zx-root .sv-btn-p:hover { box-shadow: none; }
.zx-root .sv-btn-s:hover { border-color: rgba(240,240,240,0.55); }
.zx-root .zx-card-solid .sv-btn-s:hover { border-color: rgba(12,12,12,0.45); }

/* ── ÜZERİNE GELME: VURGU IŞIĞI (opt-in `.zx-glow`) ──────────────────────
   Kaynak gramerde (zeeframes `.audience-card`) kartın üzerine gelinince alt
   kenardan yukarı doğru vurgu renginde yumuşak bir ışık doğuyor. Buradaki
   karşılığı bu blok.

   YALNIZ IŞIK: kartın hattı da vurguya dönüyordu, o kaldırıldı. İki ayrı
   vurgulu öge aynı anda kalkınca kart üzerine gelmeyi iki kez söylüyordu;
   ışık zaten yeterli. Duran hâlin nötr saç teli (`--sv-line`) `.zx-card`ın
   kendi kuralında, dokunulmadı — o bu blokla gelmedi.

   NEDEN AYRI SINIF: yukarıdaki "vurgu renkli üzerine-gelme etkileri kapalı"
   kuralı hâlâ geçerli — o karar DÜĞMELER için verildi (halka koyu zeminde
   hâle bırakıyordu) ve duruyor. Bu ise kartın İÇİNDE, kırpılmış bir dolgu;
   halka değil. Yine de gramerin tamamına yayılmasın diye `.zx-card`a değil,
   `.zx-glow` taşıyan ızgaraya bağlandı. Rulo hâlinde açmak = ızgaraya bir
   sınıf eklemek (`#kime`, `.zx-offer`, `#neden` aynı kart ailesi).

   RENK SAYFADAN GELİYOR: `--sv-ac` zaten sayfa başına tanımlı (helmet
   <style>), o yüzden burada tek bir mavi yazılmıyor — web-tasarim #0d99ff,
   e-ticaret #f24822, kurumsal-kimlik #4ce065 kendiliğinden geliyor.

   ŞİDDET AYRI BİR BELİRTEÇ (`--zx-glow`) ÇÜNKÜ TEK SAYI ON SEKİZ SAYFAYA
   YETMİYOR: gövde metni 0.88cqw (~14px), yani WCAG eşiği 4.5:1. Işığın en
   yoğun yeri kartın ALT kenarı ve metin tam orada duruyor. Işığın çekirdeği
   TAM vurgu, `--zx-glow` onun opaklığı.

   On sekiz vurgunun hepsi ölçüldü; eşiği (pay bırakmak için 4.8:1) geçen en
   yüksek basamak seçildi:

     .34  #ff4d7d 5.60 · #828cff 5.36 · #f24822 5.89 · #b0762e 5.85
          #2a8f8a 5.89 · #0d99ff 5.43 · #ff24bd 5.80 · #e850ff 5.47
          #b071ff 5.51 · #8a8a8a 5.63     (11 sayfa; #0d99ff ikisinde:
                                        web-tasarim + projeye-nasil-baslariz)
     .28  #2ee6c5 4.87 · #57d43a 5.20 · #4ce065 5.01          (3 sayfa)
     .24  #e9c6ff 5.21 · #61fdfc 4.92 · #ffcd29 5.22 · #b9ff36 4.87 (4 sayfa)

   .34 bu yedi sayfada KALIYOR (en kötüsü #b9ff36 → 3.73:1), o yüzden
   ayarlanabilir. Yeni bir sayfa/vurgu eklenirse ölçülmeden .34 bırakılmasın.

   Beyaz kart (`.zx-card-solid`) daha düşük değer alıyor: aynı yoğunluk
   #f0f0f0 üstünde ışık değil PASTEL BİR YÜZEY gibi okunuyordu.

   Yalnız `hover: hover` olan aygıtlarda: dokunmatikte tıklanan kartın üstünde
   ışık ASILI kalıyor, kart seçilmiş gibi duruyordu. */
/* Sayfa kendi değerini `--zx-glow-page` ile veriyor (helmet <style>'ında,
   `--sv-ac`in yanında). Neden ORADA ve neden ayrı bir isim: `--zx-glow`
   ızgaranın KENDİSİNDE tanımlı, bir üstteki `.sv-root`ta yazılan aynı isim
   kalıtımla gelir ve buradaki doğrudan kurala YENİLİR. Ayrı isim + `var()`
   yedeği bunu çözüyor; sayfa hiçbir şey yazmazsa .34 geçerli.
   Beyaz kart sabit .24: on sekiz vurgunun hepsinde ölçüldü, en düşüğü
   5.59:1 (#ff24bd) — sayfaya göre ayarlamayı gerektirmiyor. */
.zx-glow { --zx-glow: var(--zx-glow-page, .34); }
.zx-glow .zx-card-solid { --zx-glow: .24; }

@media (hover: hover) {
  /* Işık kartın köşe yarıçapıyla kırpılıyor (`overflow`), içerik ise
     üstünde kalıyor: konumlandırılmış `::before` normalde akış içindeki
     metnin ÜSTÜNE boyanır, o yüzden çocuklara z-index veriliyor. */
  .zx-glow .zx-card { position: relative; overflow: hidden; }
  .zx-glow .zx-card > * { position: relative; z-index: 1; }
  .zx-glow .zx-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(118% 86% at 50% 116%,
      var(--sv-ac) 0%,
      color-mix(in srgb, var(--sv-ac) 34%, transparent) 42%,
      transparent 74%);
    opacity: 0; transform: translateY(14%);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.7,.2,1);
  }
  /* Şiddet DEĞERİ opaklıkta, degradenin içinde değil: degrade tam vurguyla
     çiziliyor, `--zx-glow` onu ölçekliyor. Böylece sayfa başına ezmek için
     tek bir SAYI yetiyor — ve `color-mix()` içinde `calc()` kullanılmıyor. */
  .zx-glow .zx-card:hover::before { opacity: var(--zx-glow); transform: translateY(0); }

  /* İSTİSNA — Çözümlerimiz'in beyaz ÇAĞRI hücresi. O kart yatay diziliyor ve
     sağında dolu bir düğme var: düğmenin kendi üzerine-gelmesi zaten bir
     hareket, ışık onunla birlikte kalkınca hücre iki şey birden söylüyordu.
     Ayrıca ışığın merkezi %50'de, hücre ise iki kolon geniş — odaklı bir ışık
     değil, geniş bir degrade panel gibi okunuyordu. Hücre `zx-glow`dan ÖNCEKİ
     hâline dönüyor (yalnız zemin beyaza çıkar).
     `#kime`nin beyaz kartı DAHİL: orada dördün biri, aynı biçim ve aynı
     içerik: hoverı kapatmak ızgarada bir hücreyi ölü bırakırdı.
     Sıra önemli: `content: none` ancak `::before` tanımından SONRA gelirse
     kazanıyor (ikisi de (0,2,1)). */
  .zx-glow .zx-offer-cta { overflow: visible; }
  .zx-glow .zx-offer-cta::before { content: none; }
}

/* ===========================================================================
   4) BELİRTİLER — açık panel
   =========================================================================== */
/* Panelin kendisi de `.zx-light` taşıyor (markup'ta). Yalnız `background` ve
   `color` vermek YETMİYOR: gövde metni `--sv-dim` belirtecinden besleniyor ve
   o belirteç koyu tema değerinde kalınca beyaz panelde metin görünmez oluyordu
   (ölçüldü: liste maddelerinin yazısı hiç okunmuyordu). Açık temayı sınıfla
   vermek üç belirteci birden çeviriyor. */
/* Panelin içi BEMBEYAZ, açık bölümlerin kırık grisi (#f0f0f0) değil. Kural
   `.zx-light`ten SONRA tanımlı ve aynı ağırlıkta, o yüzden kazanıyor. Metin
   ve çizgi değerleri mürekkep türevi olduğu için beyazda da doğru çıkıyor. */
.zx-signs { display: grid; grid-template-columns: 40fr 55fr; column-gap: 3.4cqw;
  align-items: center; padding: 2.2cqw; border-radius: 0.83cqw;
  background: #ffffff; }
.zx-signs-img { position: relative; overflow: hidden; border-radius: 0.5cqw;
  aspect-ratio: 4 / 3; background: #0c0c0c; }
/* Kutu 4:3, görseller ise 3:1 menü banner'ları — `cover` genişliğin yalnız
   %44'ünü gösteriyor. Konu bu banner'larda SAĞDA duruyor (sol üçte biri düz
   siyah; menü kartında oraya koyu geçiş binip yazı okunuyor). Ortadan kırpmak
   konunun sağ yarısını kesiyordu, o yüzden her sayfa kendi `object-position`
   değerini SATIR İÇİNDE veriyor: pencere, o görselin parlak kütlesini en çok
   yakalayan yere oturtuldu (ölçüldü, %75–%93 arası). Değer oransal olduğu için
   mobilde panel tek kolona düşüp görsel genişlediğinde de aynı kadraj kalıyor. */
.zx-signs-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zx-signs-c { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1cqw; }
/* Başlık sağdaki kolonun tamamını kullanıyor. 22ch sınırı kısa başlık için
   konmuştu; yeni başlık orada üç satıra düşüp altındaki paragraftan dar
   kalıyordu. Sınır kalkınca iki satıra iniyor ve paragrafla aynı hatta
   bitiyor. */
.zx-signs-c h2 { max-width: none; }
.zx-signs-c .zx-list { margin: 0.3cqw 0; }

/* ===========================================================================
   5) NE YAPIYORUZ
   =========================================================================== */
.zx-offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-top: 3cqw; }

/* Bölüm başlıkları `.zx-head h2`'nin 17ch sınırıyla iki satıra kırılıyor;
   buradaki başlık ("SEO ve GEO kapsamında neler yapıyoruz?") o sınırda üç
   satıra düşüyor ve ilk satırda yalnız "SEO ve GEO" kalıyordu. 22ch, sağdaki
   paragrafın hizasını bozmadan iki satırlık kırılımı geri veriyor. */
#neyapiyoruz .zx-head h2 { max-width: 22ch; }
/* Aynı gerekçe: "S.E.O ve G.E.O çalışmalarınız için neden Feels?" 17ch'te üç
   satıra düşüyordu. 30ch iki satır veriyor, sağdaki paragrafın hizası bozulmuyor. */
#neden .zx-head h2 { max-width: 30ch; }
/* Sekizinci kart iki kolon kaplıyor ve ızgaranın son boşluğunu kapatıyor —
   kaynak sayfadaki `col-span-2` ile aynı iş. */
/* Zemin BURADA verilmiyor: kart `.zx-card-solid` taşıyor ve beyaz oluyor.
   Eskiden buradaki `background` satırı vardı; `.zx-card-solid`ten SONRA
   tanımlı olduğu ve aynı ağırlıkta olduğu için beyazı sessizce eziyordu —
   kart koyu kalıp yazısı okunmaz hâle geliyordu (ölçüldü). */
.zx-offer-cta { grid-column: span 2; flex-direction: row; align-items: center; gap: 1.6cqw; }
.zx-offer-cta > div { flex: 1; }
/* Çağrı hücresinin ikonu TERS: öbür kartlarda kutu soluk, glif koyu; burada
   dolu koyu kutu, açık glif. Kaynak sayfada da bu hücrenin ikonu böyle —
   beyaz yüzeyin odak noktası oluyor, ızgaranın geri kalanıyla karışmıyor.
   Alt payı kardeş kartların ikon–başlık boşluğuyla (3.4cqw) aynı; hücre
   dikeyde ortalandığı için ikon başlığın üstündeki boşluğa oturuyor. */
.zx-offer-cta .zx-icon { background: #0c0c0c; box-shadow: none; color: #ffffff;
  margin-bottom: 3.4cqw; }
.zx-offer-cta .sv-btn { flex: none; }

/* ===========================================================================
   6) SÜREÇ — açık bölüm, aralarında ince çizgi olan kolonlar
   =========================================================================== */
/* Dört EŞİT kolon değil: üç adım geniş, sağdaki çağrı dar (0.7fr). Sebep
   madde metinleri — eşit kolonda 22.5cqw'lik yazı alanına sığmayıp üç satıra
   düşüyorlardı; 0.7fr çağrıyı 253px'e indirip adım kolonlarını 361px'e
   çıkarıyor, maddeler iki satırda kalıyor. */
.zx-proc { display: grid; grid-template-columns: repeat(3, 1fr) 0.62fr; margin-top: 3cqw;
  border-radius: 0.83cqw; overflow: hidden; background: rgba(12,12,12,0.02);
  box-shadow: inset 0 0 0 1px var(--sv-line); }
.zx-proc-col { padding: 1.6cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqw;
  border-right: 1px solid var(--sv-line);
  transition: background .35s ease; }
/* Üzerine gelme: koyu bölümlerdeki kartlarda (`.zx-card:hover`) vardı, tek
   çerçeveli ızgaralarda yoktu — imlecin hangi hücrede olduğu belli olmuyordu.
   Değer açık temanın kart karşılığıyla aynı (`.zx-light .zx-card:hover`), yani
   yeni bir ton uydurulmadı. Sağdaki koyu çağrı hücresi (`.zx-proc-cta`) ayrı
   sınıf olduğu için bu kuralın dışında kalıyor. */
.zx-proc-col:hover { background: rgba(12,12,12,0.045); }
/* Maddeler İKİ SATIRDA kalmalı (istenen). Metinler uzun ve Türkçe kelimeler
   geniş; kolonu genişletmek tek başına yetmiyordu — yazı bir tık küçültülüp
   mimin payı daraltıldı. Üçü birlikte satır başına ~46 karakter veriyor. */
.zx-proc-col .zx-sm { font-size: max(0.8cqw, 10px); line-height: 1.5; }
.zx-proc-col .zx-list { gap: 0.85cqw; }
.zx-proc-col .zx-list li { gap: 0.55cqw; }
.zx-proc-col .zx-list svg { width: 0.7cqw; height: 0.7cqw; min-width: 10px; min-height: 10px; }
/* Kolonun `gap`i 1.2cqw; başlığın üst payı bunun üstüne biniyor, ikon ile
   başlık arası 1.2 + 6 = 7.2cqw ≈ 115px oluyor — kaynaktaki `.process-card`
   boşluğunun aynısı. */
/* `.zx-root .zx-h4 { margin: 0 }` seçicisi (0,2,0) daha güçlü olduğu için
   sade `.zx-proc-col h3` (0,1,1) yazıldığında bu pay hiç uygulanmıyordu —
   eski 2.4cqw de aynı sebeple sessizce düşüyormuş. Kök sınıf eklenince
   (0,2,1) öne geçiyor. */
.zx-root .zx-proc-col h3 { margin-top: 2.4cqw; }
/* Dördüncü kolon koyu bir CTA kartı: açık bölümün içinde tek koyu blok
   olduğu için göz doğrudan oraya gidiyor — kaynak sayfadaki niyet bu. */
.zx-proc-cta { border-right: 0; padding: 0; background: #0c0c0c; color: #ffffff;
  display: flex; flex-direction: column; }
.zx-proc-cta-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #17171c; }
.zx-proc-cta-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zx-proc-cta-c { padding: 1.6cqw; display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.8cqw; flex: 1; }
.zx-proc-cta-c p { color: rgba(255,255,255,0.82); }
.zx-proc-cta-c .sv-btn { margin-top: auto; }
/* Bu kartın çağrısı DOLGUSUZ: kolon dar, dolu hap neredeyse tamamını kaplayıp
   yazıyı ortalı gösteriyordu. Sayfanın hiçbir yerinde ortalanmış yazı yok.
   Hap yerine düz bağlantı — yatay dolgu sıfırlanıyor ki yazı üstündeki başlık
   ve paragrafla aynı hizadan başlasın. Yükseklik duruyor: dokunma hedefi
   küçülmesin. */
.zx-proc-cta-c .sv-btn-p { background: transparent; padding-left: 0; padding-right: 0; }
.zx-root .zx-proc-cta-c a.sv-btn-p { color: #ffffff; }
.zx-proc-cta-c .sv-btn-p:hover { background: transparent; color: #ffffff; }

/* ===========================================================================
   7) ARAÇLAR
   =========================================================================== */
.zx-tools { display: grid; grid-template-columns: 22fr 74fr; column-gap: 1.6cqw; margin-top: 3cqw; }
.zx-tools-side { padding: 0.8cqw; border-radius: 0.62cqw;
  background: rgba(240,240,240,0.04); box-shadow: inset 0 0 0 1px var(--sv-line);
  display: flex; flex-direction: column; gap: 0.2cqw; align-self: start; }
/* Sekmeler artık gerçek <button>: dolayısıyla tarayıcının kendi giydirmesi
   sıfırlanıyor. Sıra <span> iken bunlara gerek yoktu. */
.zx-tools-side button { display: block; width: 100%; text-align: left; cursor: pointer;
  appearance: none; background: none; border: 0;
  padding: 0.75cqw 1cqw;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: max(0.92cqw, 11.5px);
  color: rgba(255,255,255,0.76); position: relative;
  transition: color .3s ease; }
/* Üzerine gelme ve seçili durum, yapışkan menüdeki hapın AYNISI: yazı beyaza
   dönüyor, altından soldan sağa açılan 1px çizgi geçiyor. Önce macenta dolgu
   ve solda vurgu renginde bir çubuk vardı; sayfadan macenta temizlenince tek
   kalan oydu. */
.zx-tools-side button::after { content: ""; position: absolute; left: 1cqw; right: 1cqw;
  bottom: 0.42cqw; height: 1px;
  background: linear-gradient(90deg, #ffffff 0%, #8a8a8a 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.7,.2,1); }
.zx-tools-side button:hover { color: #ffffff; }
.zx-tools-side button:hover::after { transform: scaleX(1); }
.zx-tools-side button.on { color: #ffffff; }
.zx-tools-side button.on::after { transform: scaleX(1); }
.zx-tools-side button:focus-visible { outline: 2px solid var(--sv-ac); outline-offset: 2px; }

/* Yedi panel üst üste değil, biri açık ötekiler `hidden`. Panelleri saran kutu
   grid'in ikinci sütunu olduğu için sekme listesi uzunluk değiştirmiyor. */
.zx-tools-grid { display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 0.62cqw; overflow: hidden; background: #f0f0f0; }
/* Gizleme SINIFLA, `hidden` özniteliğiyle değil: sayfayı kuran dc-runtime
   değersiz `hidden`ı DOM'a taşımıyor (ölçüldü — yedi panel birden açık
   kalıyordu). Sınıf her koşulda geçiyor ve JS yüklenmeden önceki ilk karede
   de doğru panel açık oluyor. */
.zx-tools-grid.off { display: none; }
.zx-tool { padding: 2.4cqw 1cqw; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1cqw;
  border-right: 1px solid rgba(12,12,12,0.08); border-bottom: 1px solid rgba(12,12,12,0.08); }
.zx-tool:nth-child(4n) { border-right: 0; }
.zx-tool:nth-last-child(-n+4) { border-bottom: 0; }
/* Logolar farklı en–boy oranlarında geliyor (kimi kare, kimi dikdörtgen);
   `contain` hepsini aynı kareye oturtuyor, hiçbiri kırpılmıyor. */
.zx-tool img { width: 4cqw; height: 4cqw; min-width: 44px; min-height: 44px;
  object-fit: contain; display: block; }
.zx-tool span { font-family: 'Jost', sans-serif; font-weight: 400; font-size: max(0.85cqw, 10.5px);
  color: rgba(12,12,12,0.86); text-align: center; }

/* ===========================================================================
   8) KULLANIM ALANLARI · 9) NEDEN FEELS
   =========================================================================== */
.zx-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-top: 3cqw; }

/* Kullanım alanları: `.zx-grid3`ten farkı, hücrelerin ayrı kart olmaması.
   Kaynak sayfadaki `use-cases` düzeni gibi dokuz hücre TEK çerçevenin içinde
   duruyor, aralarını yalnız saç teli çizgi ayırıyor — süreç bölümündeki
   `.zx-proc` ile aynı gramer, orada dört kolon burada üç. */
.zx-cases { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3cqw;
  border-radius: 0.83cqw; overflow: hidden; background: rgba(12,12,12,0.02);
  box-shadow: inset 0 0 0 1px var(--sv-line); }
.zx-case { padding: 1.9cqw; display: flex; flex-direction: column; align-items: flex-start;
  gap: 2.5cqw;
  border-right: 1px solid var(--sv-line); border-bottom: 1px solid var(--sv-line);
  transition: background .35s ease; }
.zx-case:hover { background: rgba(12,12,12,0.045); }
/* Son sütun ve son sıra dışa çizgi çekmiyor; dış hat kapsayıcının kendi
   `inset` gölgesi. */
.zx-case:nth-child(3n) { border-right: 0; }
.zx-case:nth-last-child(-n+3) { border-bottom: 0; }

/* ===========================================================================
   10) VURGU BANDI
   ---------------------------------------------------------------------------
   Kaynak sayfada baştan başa parlak sarı bir panel vardı; sayfanın ortasında
   nefes aldıran tek yer orası. Bu bant o işi arolax.crowdytheme-demo.com'daki
   düzenle yapıyor: solda başlık ve altında açıklama, sağda hap + yuvarlak ok,
   zeminde sağ kenardan taşan iç içe yaylar.

   ÖNCEKİ HÂLİ mor bir ışık paneliydi (akan kurdeleler + elma videosu). Sayfadan
   macenta temizlenince bandın kendisi tek renkli ada gibi kalıyordu; yaylar
   aynı nefesi RENKSİZ veriyor. Yaylar görsel değil çizim: ölçekten bağımsız,
   ağırlıksız ve panelin tonuyla birlikte değişebiliyor.
   =========================================================================== */
.zx-band { position: relative; overflow: hidden;
  display: grid; grid-template-columns: 58fr 38fr; column-gap: 3cqw;
  align-items: center;
  padding: 3.4cqw 3cqw; border-radius: 0.83cqw; color: #ffffff;
  background: #131313;
  box-shadow: inset 0 0 0 1px var(--sv-line); }
/* Zemin katmanı ızgaranın gözü olmasın diye mutlak konumlu. */
.zx-band-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.zx-band-c, .zx-band-cta { position: relative; z-index: 1; }

/* Yaylar sağ kenara yaslı ve panelden TAŞIYOR: `slice` kadrajı doldurup
   fazlasını kırpıyor, `xMax` ise dairelerin merkezini sağda tutuyor. Böylece
   panel darken de yaylar aynı yerden çıkıyor, ortaya kayıp metnin altına
   girmiyorlar. */
.zx-band-arcs { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Başlık İKİ satır: 18ch sınırı üçe bölüyordu. Bant zaten geniş, sağdaki
   çağrıya kadar yer var. */
.zx-band-c h2 { max-width: 32ch; }
.zx-band-c p { margin-top: 1.2cqw; max-width: 44ch; color: rgba(255,255,255,0.83); }

/* Hap + yuvarlak ok tek bağlantı; ikisi arasındaki boşluk kaynaktaki gibi.
   Hap beyaz dolgu, ok da beyaz daire — ikisi de koyu mürekkeple yazıyor. */
.zx-root .zx-band-cta { justify-self: end; display: inline-flex; align-items: center;
  gap: 0.5cqw; color: #0c0c0c; text-decoration: none; }
.zx-band-cta-lbl { display: inline-flex; align-items: center;
  padding: max(0.95cqw, 11.5px) max(1.6cqw, 20px); border-radius: 999px; background: #f0f0f0;
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: max(0.92cqw, 11.5px);
  line-height: 1; white-space: nowrap; transition: background .3s ease; }
.zx-band-cta-ok { display: grid; place-items: center; flex: none;
  width: 2.9cqw; height: 2.9cqw; min-width: 40px; min-height: 40px;
  border-radius: 50%; background: #f0f0f0;
  transition: background .3s ease, transform .3s ease; }
.zx-band-cta-ok svg { width: 44%; height: 44%; min-width: 15px; min-height: 15px; display: block; }
/* Yazı rengi hover'da AÇIKÇA yeniden veriliyor. Paylaşılan `.sv-root a:hover
   { color: #ffffff }` kuralı (0,2,1) buradaki `.zx-root .zx-band-cta` (0,2,0)
   kuralından güçlü; üzerine gelince yazı beyaz hapın üstünde beyaza dönüp
   kayboluyordu (ölçüldü). `.sv-btn` bundan etkilenmiyor çünkü onun kendi
   `a.sv-btn-p` kuralı var — bu düğme `.sv-btn` değil. */
.zx-root .zx-band-cta:hover { color: #0c0c0c; }
.zx-band-cta:hover .zx-band-cta-lbl,
.zx-band-cta:hover .zx-band-cta-ok { background: #ffffff; }
.zx-band-cta:hover .zx-band-cta-ok { transform: translate(0.12cqw, -0.12cqw); }


/* ===========================================================================
   11) SSS — akordeon
   =========================================================================== */
/* S.S.S. bölümünün zemini BEMBEYAZ, açık bölümlerin kırık grisi (#f0f0f0)
   değil. Kural `.zx-light`i eziyor; kimlik seçicisi (1,0,0) sınıfı (0,1,0)
   geçiyor. İçeride ayarlanacak başka değer yok — akordeonun çizgileri
   `--sv-line`dan, yazı `--sv-dim`den besleniyor, ikisi de mürekkep türevi.

   Yalnız BU bölüm: öteki üç açık bölüm (İhtiyaçlar paneli, Sürecimiz,
   Kullanım Alanları) kırık grisini koruyor. Komşuları koyu olduğu için
   beyaz bölüm yan yana gelen iki farklı açık ton üretmiyor. */
#sss { background: #ffffff; }

.zx-faq { margin-top: 3cqw; border-top: 1px solid var(--sv-line); }
.zx-faq-item { border-bottom: 1px solid var(--sv-line); }
.zx-faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 2cqw; padding: 1.5cqw 0; background: transparent; border: 0; cursor: pointer;
  color: inherit; text-align: left; font: inherit; }
.zx-faq-sign { position: relative; width: 1.1cqw; height: 1.1cqw; min-width: 16px; min-height: 16px; flex: none; }
.zx-faq-sign::before, .zx-faq-sign::after { content: ''; position: absolute; left: 50%; top: 50%;
  background: currentColor; transform: translate(-50%, -50%);
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.zx-faq-sign::before { width: 100%; height: 1px; }
.zx-faq-sign::after { width: 1px; height: 100%; }
.zx-faq-item.open .zx-faq-sign::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
/* Açılma yüksekliği JS ile ÖLÇÜLMÜYOR: `grid-template-rows: 0fr → 1fr` geçişi
   içeriğin gerçek boyunu tarayıcıya hesaplatıyor (video-produksiyon.html'deki
   aynı kalıp). Font geç yüklense ya da pencere daralsa yeniden ölçüm gerekmiyor. */
.zx-faq-body { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.16,1,.3,1); }
.zx-faq-item.open .zx-faq-body { grid-template-rows: 1fr; }
.zx-faq-body > div { overflow: hidden; }
.zx-faq-body p { max-width: 78ch; padding-bottom: 1.6cqw; }

/* ===========================================================================
   DAR EKRAN
   Kaynak sayfa 900px altında bütün ızgaraları tek/iki kolona indiriyor,
   yapışkan menüyü yatay kaydırmalı bırakıyor. Aynısı.
   =========================================================================== */
/* ===========================================================================
   13) YÜZEN ÇAĞRI — alt kapsül
   ===========================================================================
   Kaynak: fourmeta.com. Solda dairesel düğme, sağda içinde yazı kayan beyaz
   hap; ikisi koyu, camsı bir kabuğun içinde. Kabuk YAPIŞKAN (gerekçesi
   markup'ta duruyor) ve yuvası sıfır yükseklikte, yani akışta yer kaplamıyor.

   Kayan yazı CSS animasyonu: şerit -%50'ye kadar gidiyor, içerik iki kez
   yazıldığı için dönüş dikişsiz. Fare üstündeyken duruyor. */
/* Ölçülerde masaüstü tabanları (N = X × 12.5, 1250px altında devreye
   giriyor): 1024'te düğmeler 24px'e iniyordu. Alt paya iPhone'un ev çubuğu
   alanı ekleniyor; masaüstü tarayıcıda bu değer 0. */
.zx-dock-slot { position: sticky; bottom: calc(max(1.6cqw, 20px) + env(safe-area-inset-bottom, 0px)); z-index: 80; height: 0; }
.zx-dock { position: absolute; left: 50%; bottom: 0;
  display: flex; align-items: center; gap: max(0.32cqw, 4px);
  padding: max(0.32cqw, 4px); border-radius: 999px;
  background: rgba(12,12,12,0.72);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.14), 0 0.6cqw 1.8cqw rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw);
  opacity: 0; transform: translate(-50%, 1.4cqw); pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.2,1); }
.zx-dock-slot.in .zx-dock { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* DİPTE ÇEKİLİRKEN YALNIZ SÖNÜYOR, AŞAĞI KAYMIYOR: yuva belgenin en sonunda
   ve kaydırılabilir alan, yapışkan kaymadan önceki yerinden hesaplanıyor.
   Gizli hâlin 1.4cqw aşağı kayması sayfanın dibine alt bilginin altında boş
   bir şerit ekliyordu (1440'ta 20px, 1920'de 27px; ölçüldü). Açılış ekranında
   gizlenirken yükselme efekti aynen duruyor, orada belgenin dibi uzakta. */
.zx-dock-slot.zx-dip .zx-dock { transform: translate(-50%, 0); }

.sv-root .zx-dock-top { flex: none; width: max(2.3cqw, 28.5px); height: max(2.3cqw, 28.5px); padding: 0;
  border: 0; border-radius: 999px; background: rgba(240,240,240,0.1);
  color: #ffffff; display: grid; place-items: center; cursor: pointer;
  transition: background .3s ease, color .3s ease; }
.sv-root .zx-dock-top:hover { background: #f0f0f0; color: #0c0c0c; }
.zx-dock-top svg { width: 48%; height: 48%; min-width: 14px; min-height: 14px; }

.sv-root .zx-dock-cta { flex: none; height: max(2.3cqw, 28.5px); display: flex; align-items: center;
  padding: 0 max(1.1cqw, 13.5px); border-radius: 999px; background: #f0f0f0; color: #0c0c0c;
  overflow: hidden; transition: background .3s ease; }
.sv-root .zx-dock-cta:hover { background: #ffffff; color: #0c0c0c; }
.zx-dock-mask { display: block; width: max(11cqw, 137.5px); overflow: hidden; }
.zx-dock-track { display: flex; align-items: center; width: max-content;
  animation: zxDockRun 18s linear infinite; }
.zx-dock-cta:hover .zx-dock-track { animation-play-state: paused; }
.zx-dock-item { display: inline-flex; align-items: center; gap: max(0.4cqw, 5px);
  padding-right: max(1.6cqw, 20px); white-space: nowrap;
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: max(0.88cqw, 11px);
  line-height: 1.4; letter-spacing: 0.01em; color: #0c0c0c; }
.zx-dock-item svg { width: 0.85cqw; height: 0.85cqw; min-width: 12px; min-height: 12px; flex: none; }
@keyframes zxDockRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  /* TABAN VE TAVAN — bu bloktaki bütün ölçülerin kuralı.
     Ölçüler ekran genişliğinin cqw'si ve sınırsızdı: 768px tablette ya da
     844px yatay telefonda telefon düzeni iki katına büyüyordu (başlık 66px,
     gövde 28px, açılış 1.8 ekran; yatay telefonda hap şeridi + kapsül ekranın
     %71'i). Şimdi `min(Xcqw, tavan)`; tavan = 480px genişlikteki değer
     (X × 4.8). Dikey tutulan bütün telefonlar eskisi gibi, üstünde büyüme
     duruyor. Yazıda `clamp(taban, Xcqw, tavan)`: gövde en az 14px, küçük
     etiket en az 12px, form alanı en az 16px (iOS Safari 16px'ten küçük alana
     odaklanınca sayfayı yakınlaştırıp öyle bırakıyor). Dokunma hedefleri en
     az 44px. */
  .zx-h1 { font-size: min(8.6cqw, 41px); }
  .zx-h2 { font-size: min(6.8cqw, 32.5px); }
  .zx-h3 { font-size: min(5cqw, 24px); }
  .zx-h4 { font-size: min(4.9cqw, 23.5px); }
  .zx-p  { font-size: clamp(14px, 4cqw, 19px); line-height: 1.6; }
  .zx-sm { font-size: clamp(14px, 3.7cqw, 17.5px); line-height: 1.58; }

  .zx-head { grid-template-columns: 1fr; row-gap: min(4cqw, 19px); }
  .zx-head h2 { max-width: none; }
  .zx-head-eyebrow { margin-bottom: min(3.4cqw, 16px); }
  .zx-card { padding: min(6cqw, 29px); border-radius: min(2.4cqw, 11.5px); gap: min(3.4cqw, 16px); }
  .zx-icon { width: min(11cqw, 53px); height: min(11cqw, 53px); border-radius: min(2cqw, 9.5px); }
  .zx-list { gap: min(1.5cqw, 7px); }
  .zx-list li { gap: min(2.6cqw, 12.5px); }
  .zx-list svg { width: min(3.4cqw, 16px); height: min(3.4cqw, 16px); margin-top: min(1.2cqw, 6px); }

  /* 1) Açılış
     `--zx-inset` kenar boşluğu; hap listesi kenara taşarken aynı sayıyı
     kullanıyor. Hap belirteçleri 2) Bölüm menüsü notunda. */
  .zx-root { --zx-subnav-h: min(16cqw, 77px); --zx-inset: min(6.5cqw, 31px);
    --zx-chip-fs: clamp(13px, 3.6cqw, 17px); --zx-chip-py: min(2.2cqw, 10.5px);
    --zx-chip-ek: max(0px, 22px - var(--zx-chip-fs) * 0.725 - var(--zx-chip-py)); }
  .zx-root .sv-inset { padding-left: var(--zx-inset); padding-right: var(--zx-inset); }
  .zx-hero { padding-top: min(26cqw, 125px); padding-bottom: min(12cqw, 58px); }
  .zx-crumb { margin-bottom: min(7cqw, 33.5px); }
  .zx-crumb span, .sv-root .zx-crumb a { font-size: clamp(12px, 3.2cqw, 15px); }
  /* Kırıntı bağlantısı yazı kadar alçaktı (16px). Dikey iç boşluk aynı miktar
     negatif dış boşlukla geri alınıyor: dokunma hedefi ~46px, satır yerinde. */
  .sv-root .zx-crumb a { padding-top: 14px; padding-bottom: 14px; margin-top: -14px; margin-bottom: -14px; }
  .zx-hero-grid { grid-template-columns: 1fr; row-gap: min(9cqw, 43px); }
  .zx-hero-c h1, .zx-hero-c p { max-width: none; }
  .zx-hero-c p { margin-top: min(5cqw, 24px); }
  .zx-trust { margin-top: min(9cqw, 43px); }
  /* Mobilde iki sütun: 2 × 42 + 3cqw boşluk = 87cqw, tam içerik genişliği.
     Açıklama satırı oranı bire bir korunsa 8px'e düşüyordu; okunur kalsın
     diye biraz iri bırakıldı. Tavanla birlikte tablette dördü tek satıra
     sığıyor. */
  .zx-badges { gap: min(3cqw, 14.5px); margin-top: min(6cqw, 29px); }
  .zx-badge { width: min(33cqw, 158px); height: min(10.4cqw, 50px); }
  .zx-badge-w { width: min(5.06cqw, 24.3px); height: min(10.4cqw, 50px); }
  .zx-badge b { left: min(5.06cqw, 24.3px); right: min(5.06cqw, 24.3px); top: min(0.5cqw, 2.4px);
    font-size: clamp(12px, 3.3cqw, 16px); line-height: min(4.7cqw, 22.5px); }
  /* Dar ekranda sürükleme kapalı (sürücü de kurulmuyor); imleç de normal.
     Kolonlar `auto-fit`: telefonda tek kolon (görsel üstte), yer açılınca
     (≈620px ve üstü) görsel ile metin yan yana — tablette 16:9 görsel tam
     genişlikte ekranın yarısını kaplıyordu. */
  .zx-call { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    column-gap: min(4cqw, 19px); row-gap: min(4cqw, 19px); padding: min(4.5cqw, 21.5px); border-radius: min(3cqw, 14.5px);
    cursor: auto; }
  .zx-call-img { aspect-ratio: 16 / 9; }
  .zx-call-c { gap: min(2.6cqw, 12.5px); }

  /* 13) Yüzen çağrı — düğmeler en az 44px; alt pay iPhone'un ev çubuğu
     alanını da hesaba katıyor (`viewport-fit=cover` yoksa değer 0). */
  .zx-dock-slot { bottom: calc(min(5cqw, 24px) + env(safe-area-inset-bottom, 0px)); }
  .zx-dock { gap: min(1.2cqw, 6px); padding: min(1.2cqw, 6px); }
  .sv-root .zx-dock-top { width: clamp(44px, 9cqw, 48px); height: clamp(44px, 9cqw, 48px); }
  .sv-root .zx-dock-cta { height: clamp(44px, 9cqw, 48px); padding: 0 min(4cqw, 19px); }
  .zx-dock-mask { width: min(40cqw, 192px); }
  .zx-dock-item { gap: min(1.6cqw, 7.5px); padding-right: min(6cqw, 29px); font-size: clamp(13px, 3.6cqw, 17px); }
  .zx-dock-item svg { width: min(3.4cqw, 16px); height: min(3.4cqw, 16px); }

  /* 2) Bölüm menüsü
     Hap 44px dokunma hedefi: hapın dikey iç boşluğu büyütülüyor, AYNI miktar
     şeridin iç boşluğundan düşülüyor ve alt çizgi o kadar yukarı alınıyor.
     Şeridin boyu, yazının ve çizginin yeri değişmiyor; yalnız dokunulan alan
     büyüyor. `--zx-chip-ek` o fark: yazı (1.45 satır) + iki iç boşluğun 44px'e
     eksik kalan yarısı; ≈470px'ten geniş ekranda sıfır. */
  .zx-subnav { padding-top: max(4px, min(3.4cqw, 16.5px) - var(--zx-chip-ek));
    padding-bottom: max(4px, min(3.4cqw, 16.5px) - var(--zx-chip-ek)); }
  /* Liste ekranın iki kenarına kadar uzanıyor (kenar boşluğu kadar negatif
     marj + aynı iç boşluk): haplar içerik kenarında kesilmiyor, soluklaşan
     uçtan kayıp gidiyor. Kaydırma ipucu kuralları masaüstü bölümünde. */
  .zx-subnav-list { gap: min(6cqw, 29px);
    margin-left: calc(-1 * var(--zx-inset)); margin-right: calc(-1 * var(--zx-inset));
    padding-left: var(--zx-inset); padding-right: var(--zx-inset); scroll-padding-inline: var(--zx-inset); }
  .zx-root .zx-chip { padding: calc(var(--zx-chip-py) + var(--zx-chip-ek)) 0;
    font-size: var(--zx-chip-fs); line-height: 1.45; }
  .zx-root .zx-chip::after { bottom: var(--zx-chip-ek); }

  /* 3-9) Izgaralar
     Kart ızgaraları `auto-fit`: telefonda tek kolon, en az 300px'lik iki kolon
     sığınca (tablet, yatay telefon) iki kolon. Tek çerçeveli ızgaralar
     (`.zx-cases`, `.zx-proc`) çizgi kuralları yüzünden tek kolonda kalıyor. */
  .zx-sec { padding-top: min(14cqw, 67px); padding-bottom: min(14cqw, 67px); }
  .zx-grid4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: min(4cqw, 19px); margin-top: min(8cqw, 38px); }
  /* Mobilde kaynak da boşlukları sertçe daraltıyor (126→40px, 115→20px). */
  #kime .zx-card { gap: min(4.5cqw, 21.5px); }
  .zx-offer .zx-card:not(.zx-offer-cta) { gap: min(3.5cqw, 17px); }
  .zx-mark img { height: min(13cqw, 62px); min-height: 0; }
  #neden .zx-card { gap: min(4.5cqw, 21.5px); }
  .zx-grid3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: min(4cqw, 19px); margin-top: min(8cqw, 38px); }
  .zx-cases { grid-template-columns: 1fr; margin-top: min(8cqw, 38px); border-radius: min(3cqw, 14.5px); }
  .zx-case { padding: min(7cqw, 33.5px) min(6cqw, 29px); gap: min(4.5cqw, 21.5px); border-right: 0; }
  .zx-case:nth-last-child(-n+3) { border-bottom: 1px solid var(--sv-line); }
  .zx-case:last-child { border-bottom: 0; }
  .zx-offer { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: min(4cqw, 19px); margin-top: min(8cqw, 38px); }
  .zx-offer-cta { grid-column: auto; flex-direction: column; align-items: flex-start; gap: min(4cqw, 19px); }
  .zx-offer-cta .zx-icon { margin-bottom: min(3.5cqw, 17px); }

  /* Tek kolon `minmax(0, 1fr)`: düz `1fr` en uzun TEK SATIRLIK düğmeden dar
     olamıyordu; metin kolonu beyaz panelin iç boşluğuna taşıyordu
     (dijital-reklam 360px'te +22px). Düğme yazısı da artık satır kırabiliyor.
     Görsel tablette yarım ekranı kaplamasın diye 360px'te duruyor (telefonda
     o boya hiç ulaşmıyor). */
  .zx-signs { grid-template-columns: minmax(0, 1fr); row-gap: min(7cqw, 33.5px); padding: min(6cqw, 29px); border-radius: min(3cqw, 14.5px); }
  .zx-signs-img { max-height: 360px; }
  .zx-signs-c { gap: min(4cqw, 19px); }
  .zx-signs-c h2 { max-width: none; }
  .zx-root .sv-btn { white-space: normal; text-align: left; max-width: 100%; }

  .zx-proc { grid-template-columns: 1fr; margin-top: min(8cqw, 38px); border-radius: min(3cqw, 14.5px); }
  .zx-proc-col { padding: min(7cqw, 33.5px) min(6cqw, 29px); border-right: 0; border-bottom: 1px solid var(--sv-line); gap: min(4cqw, 19px); }
  /* Masaüstünde maddeleri iki satıra sığdırmak için küçültülen ölçüler burada
     geri alınıyor. Gerekiyor: `.zx-proc-col .zx-sm` (0,2,0) sade `.zx-sm`den
     (0,1,0) güçlü, sıra ne olursa olsun onu eziyordu — mobilde yazı 0.8cqw'de
     kalıp okunmaz oluyordu (ölçüldü). */
  .zx-proc-col .zx-sm { font-size: clamp(14px, 3.7cqw, 17.5px); line-height: 1.58; }
  .zx-proc-col .zx-list { gap: min(2.6cqw, 12.5px); }
  .zx-proc-col .zx-list li { gap: min(2.6cqw, 12.5px); }
  .zx-proc-col .zx-list svg { width: min(3.4cqw, 16px); height: min(3.4cqw, 16px); min-width: 12px; min-height: 12px; }
  .zx-root .zx-proc-col h3 { margin-top: 0; }
  .zx-proc-cta { border-bottom: 0; }
  .zx-proc-cta-img { max-height: 360px; }
  .zx-proc-cta-c { padding: min(6cqw, 29px); gap: min(3.4cqw, 16px); }
  .zx-proc-cta-c .sv-btn { margin-top: min(2cqw, 9.5px); }

  /* Sekmeler yer açılınca yan yana (telefonda tek sütun): tablette ve yatay
     telefonda yedi sekme alt alta ekranı dolduruyor, seçilen sekmenin paneli
     ekranın dışında kalıyordu. */
  .zx-tools { grid-template-columns: minmax(0, 1fr); row-gap: min(5cqw, 24px); margin-top: min(8cqw, 38px); }
  .zx-tools-side { padding: min(2.6cqw, 12.5px); border-radius: min(2.4cqw, 11.5px);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  /* Dikey iç boşluğun tabanı 12px: 360px'te 3cqw 10.8px'e düşüp sekmeyi
     42px'te bırakıyordu; dokunma hedefi 44px'in altındaydı. */
  .zx-tools-side button { padding: clamp(12px, 3cqw, 14.5px) min(4cqw, 19px); font-size: clamp(14px, 3.8cqw, 18px); min-height: 44px; }
  .zx-tools-side button::after { left: min(4cqw, 19px); right: min(4cqw, 19px); bottom: min(1.6cqw, 7.5px); }
  .zx-tools-grid { grid-template-columns: repeat(2, 1fr); border-radius: min(2.4cqw, 11.5px); }
  .zx-tool { padding: min(7cqw, 33.5px) min(3cqw, 14.5px); gap: min(3cqw, 14.5px); }
  .zx-tool:nth-child(4n) { border-right: 1px solid rgba(12,12,12,0.08); }
  .zx-tool:nth-child(2n) { border-right: 0; }
  .zx-tool:nth-last-child(-n+4) { border-bottom: 1px solid rgba(12,12,12,0.08); }
  .zx-tool:nth-last-child(-n+2) { border-bottom: 0; }
  .zx-tool img { width: min(13cqw, 62px); height: min(13cqw, 62px); }
  .zx-tool span { font-size: clamp(12px, 3.4cqw, 16px); }

  /* 10-12) Bantlar ve SSS
     Bant da `minmax(0, 1fr)` ve hap yazısı satır kırabiliyor: uzun çağrı
     etiketi tek satırda panelden taşıyordu (projeye-nasil-baslariz +4–8px). */
  .zx-band { grid-template-columns: minmax(0, 1fr); row-gap: min(6cqw, 29px); padding: min(8cqw, 38px) min(6cqw, 29px); border-radius: min(3cqw, 14.5px); }
  .zx-band-c h2, .zx-band-c p { max-width: none; }
  .zx-band-c p { margin-top: min(3.4cqw, 16px); }
  /* Dar ekranda çağrı sola yaslanıyor; yaylar da daha büyük ve daha sönük. */
  .zx-root .zx-band-cta { justify-self: start; gap: min(2.2cqw, 10.5px); max-width: 100%; }
  .zx-band-cta-lbl { padding: min(3.6cqw, 17px) min(5.4cqw, 26px); font-size: clamp(14px, 3.8cqw, 18px);
    white-space: normal; line-height: 1.2; }
  .zx-band-cta-ok { width: clamp(44px, 11cqw, 52px); height: clamp(44px, 11cqw, 52px); }
  .zx-band-arcs { opacity: 0.7; }

  .zx-faq { margin-top: min(8cqw, 38px); }
  .zx-faq-btn { padding: min(5cqw, 24px) 0; gap: min(6cqw, 29px); }
  .zx-faq-sign { width: min(4.4cqw, 21px); height: min(4.4cqw, 21px); }
  .zx-faq-body p { padding-bottom: min(5cqw, 24px); }

  /* Çapa payı: dar ekranda şeridin altında bölüm başlığı nefes alsın diye
     masaüstünden biraz daha fazla. */
  .zx-root section[id] { scroll-margin-top: calc(var(--zx-subnav-h) + min(6cqw, 29px)); }
}

/* ===========================================================================
   HAREKET AZALTMA
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .zx-dock-track { animation: none; }
  .zx-faq-body { transition: none; }
  .zx-card, .zx-proc-col, .zx-case { transition: none; }
  /* Işık SÖNMEZ, yalnız yükselmeyi bırakır: opaklık ani geçer. */
  .zx-glow .zx-card::before { transition: none; transform: none; }
}

/* ===========================================================================
   12) İLETİŞİM — açık panel (kupa) + koyu panel (form)
   ===========================================================================
   Kaynak sayfadaki iletişim bölümünün düzeni: tek yuvarlatılmış çerçeve, iki
   yarım. Orada solda müşteri yorumları vardı; burada onun yerine markanın
   kendi kristal kupası dönüyor (sürücü: kupa-panel.js).

   AÇIK/KOYU TERS DÖNDÜ: kaynakta form koyu, yorum paneli açık. Burada da öyle
   — ama sebebi başka: kupa TEL KAFES çiziliyor, kenarları mürekkep. Koyu
   panelde çizgiler kaybolurdu; açık zemin onları bir eskiz gibi okutuyor. */
/* ÜÇ KOLON (canlı revize 2026-09-14; kaynak: scnsoft iletişim bloğu). Solda
   "neden bize yazmalı" ve üç güvence, ortada form, sağda doğrudan kanallar.
   Önceki hâli iki eşit kolondu: solda kristal elma videosu, sağda form.

   ZEMİN: panel yalnız form (#131313) ve ona yapışık sağ şerit (bir tık açık);
   sol kolon sayfa zemininde. Kaynaktaki beyaz form kartı + yarı saydam yan
   şeridin koyu karşılığı: form öne çıkıyor, şerit ikincil okunuyor.

   ORAN: form kolonu eski yarım genişlikte (≈42cqw) kalıyor ki alan ızgarası
   (iki kolon + tam genişlik mesaj) hiç değişmesin; kalan pay sol ve sağa.
   İçerik genişliği 83,33cqw (sv-inset), 24 + 42 + 17,33 ona eşit. */
.zx-contact { display: grid; grid-template-columns: 24fr 42fr 17.33fr; margin-top: 3cqw;
  align-items: stretch; }

/* Sol: başlık formun "Bize Ulaşın"ından bir boy küçük (2 / 2,35cqw) — iki
   kolon aynı boyda iki başlıkla yarışmasın; 14ch ile iki satıra kırılıyor.
   Üst boşluk formun iç boşluğuyla aynı: iki başlık aynı hatta başlıyor. */
.zx-contact-giris { padding: 2.4cqw 2.6cqw 2.4cqw 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 1cqw; }
.zx-root .zx-contact-giris-bas { margin: 0; max-width: 14ch; color: #ffffff;
  font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 2cqw;
  line-height: 1.14; letter-spacing: -0.028em; }
.zx-contact-artilar { margin-top: 1.2cqw; display: flex; flex-direction: column; gap: 1.5cqw; }
.zx-contact-artilar li { display: flex; align-items: flex-start; gap: 1cqw; }
.zx-contact-arti { display: flex; flex-direction: column; gap: 0.3cqw; min-width: 0; }
.zx-contact-arti-bas { font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: max(1cqw, 12.5px); line-height: 1.35; color: #ffffff; }

/* Zemin sayfanınkinden bir tık AÇIK (#131313 / #0c0c0c). Kaynak sayfada form
   paneli siyahtı ama orada sayfa krem — kontrast oradan geliyordu. Burada sayfa
   zaten koyu; aynı siyahı verince panelin sağ ve alt kenarı kaybolup blok
   yarım kalıyordu (ölçüldü). Bu ton çerçeveyi geri getiriyor. */
.zx-contact-form { padding: 2.4cqw; background: #131313; color: #ffffff;
  border-radius: 0.83cqw 0 0 0.83cqw;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9cqw; }

/* Sağ şerit: formun paneline yapışık, zemini bir tık açık. Başlıklar alt
   bilgideki kolon başlıklarıyla aynı ölçekte (Afacad, .zx-h4 boyu).
   Bağlantı rengi `.zx-root` ile yazılıyor: paylaşılan `.sv-root a` (0,1,1)
   tam beyaza çekiyordu; hover ayrıca yazılı (bkz. 744. satırdaki not). */
.zx-contact-yan { padding: 2.4cqw 2cqw; background: #181818; border-radius: 0 0.83cqw 0.83cqw 0;
  display: flex; flex-direction: column; gap: 2cqw; min-width: 0; }
.zx-yan-grup { display: flex; flex-direction: column; gap: 0.8cqw; }
.zx-root .zx-yan-bas { margin: 0; font-family: 'Afacad Flux', sans-serif; font-weight: 500;
  font-size: max(1.22cqw, 15px); line-height: 1.24; letter-spacing: -0.02em; color: #ffffff; }
.zx-yan-liste { display: flex; flex-direction: column; gap: 0.55cqw; }
.zx-root .zx-yan-liste a { display: inline-flex; align-items: center; gap: 0.65cqw;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: max(0.88cqw, 11px);
  line-height: 1.4; color: rgba(255,255,255,0.83); }
.zx-root .zx-yan-liste a:hover { color: #ffffff; }
.zx-yan-liste a span { min-width: 0; overflow-wrap: anywhere; }
.zx-yan-liste svg { flex: none; width: max(1.05cqw, 14px); height: max(1.05cqw, 14px); display: block; }
/* Dört halka tek satır: 1024'te şeridin içi 137px; 34px taban + 0,6cqw aralıkla
   dördüncü halka alta düşüyordu (ölçüldü). 30px + 0,5cqw = 135px. */
.zx-yan-sosyal { display: flex; flex-wrap: wrap; gap: 0.5cqw; }
.zx-root .zx-yan-sosyal a { width: max(2.3cqw, 30px); height: max(2.3cqw, 30px); border-radius: 50%;
  display: grid; place-items: center; color: rgba(255,255,255,0.83);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.22);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.zx-root .zx-yan-sosyal a:hover { background: #f0f0f0; color: #0c0c0c; box-shadow: inset 0 0 0 1px #f0f0f0; }
.zx-yan-sosyal svg { width: 42%; height: 42%; display: block; }
/* Üst etiket ("BİZE ULAŞIN") ve giriş paragrafı kaldırıldı; başlığın kendisi
   "Bize Ulaşın" oldu ve bir boy büyüdü (`.zx-h3` → `.zx-h2`). Tek başına duran
   küçük bir başlık, yanındaki koca görselin karşısında cılız kalıyordu. */
.zx-contact-bas { max-width: 14ch; }

/* ── form ──────────────────────────────────────────────────────────────────
   Alanlar ALTI ÇİZİLİ, kutulu değil: kaynak sayfadaki gibi. Çerçeve yerine tek
   çizgi, sayfanın geri kalanındaki saç teli hatlarla aynı dil. */
.zx-form { width: 100%; margin-top: 1.2cqw; display: flex; flex-direction: column;
  align-items: flex-start; gap: 1.6cqw; }
.zx-form-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 1.2cqw; row-gap: 1.4cqw; }
.zx-field { margin: 0; display: flex; flex-direction: column; gap: 0.35cqw; }
.zx-field-wide { grid-column: span 2; }
/* Etiket ve alan yazısında masaüstü tabanları (N = X × 12.5): 1024'te
   alanlar 9.7px yazıyordu. */
.zx-lab { font-family: 'Jost', sans-serif; font-weight: 400; font-size: max(0.85cqw, 10.5px);
  color: rgba(255,255,255,0.77); }
.zx-inp { width: 100%; appearance: none; background: transparent; color: #ffffff;
  border: 0; border-bottom: 1px solid rgba(240,240,240,0.22);
  padding: max(0.5cqw, 6px) 0; font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: max(0.95cqw, 11.5px); line-height: 1.5; border-radius: 0;
  transition: border-color .25s ease; }
.zx-inp:hover { border-bottom-color: rgba(240,240,240,0.4); }
.zx-inp:focus { outline: none; border-bottom-color: #f0f0f0; }
.zx-inp:focus-visible { outline: none; }
textarea.zx-inp { resize: vertical; min-height: 4.6cqw; }
/* Tarayıcının kendi geçersiz-alan halkası kapalı; uyarıyı sürücü veriyor
   (bkz. `.zx-inp.hata`), böylece uyarı da sayfanın diliyle konuşuyor. */
.zx-inp:invalid { box-shadow: none; }
.zx-inp.hata { border-bottom-color: #ff6b6b; }
/* ── ülke kodlu telefon ve aranabilir ülke listesi ─────────────────────────
   Kaynak sayfa bunlar için iki ayrı kitaplık yüklüyor (intl-tel-input + kendi
   arama açılırı). Burada ikisi de elde: bayrak emojisi ISO kodundan türüyor
   (bölgesel gösterge harfleri), liste sürücüde veri olarak duruyor. Dışarıdan
   tek bayt inmiyor. Açılır paneli JS kuruyor (hizmet-ortak.js, 14. iş). */
/* `position: relative` ŞART: açılır panel mutlak konumlu, buraya çapalanmazsa
   en yakın konumlu ataya (formun çok uzağına) yapışıyor. */
.zx-tel { position: relative; display: flex; align-items: flex-end; gap: 0.6cqw; width: 100%; }
.zx-tel-btn { flex: none; display: flex; align-items: center; gap: 0.3cqw;
  appearance: none; background: none; border: 0; cursor: pointer; color: #ffffff;
  border-bottom: 1px solid rgba(240,240,240,0.22); padding: max(0.5cqw, 6px) 0;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: max(0.95cqw, 11.5px);
  line-height: 1.5; transition: border-color .25s ease; }
.zx-tel-btn:hover { border-bottom-color: rgba(240,240,240,0.4); }
/* Bayrak 4:3 SVG; köşesi hafif yuvarlatılmış ve saç teli çerçeveli, yoksa
   beyaz zeminli bayraklar (Japonya, İsviçre) koyu panelde havada duruyor. */
.zx-bayrak { flex: none; width: 1.28cqw; height: 0.96cqw; min-width: 18px; min-height: 13.5px;
  object-fit: cover; border-radius: 0.12cqw; display: block;
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.18); }
.zx-tel-bayrak { align-self: center; }
.zx-tel .zx-inp { flex: 1; min-width: 0; }
.zx-pick { position: relative; display: block; width: 100%; }
.zx-pick-inp { cursor: pointer; padding-right: 1.6cqw; }
.zx-pick-ok { position: absolute; right: 0; bottom: 0.72cqw; width: 0.9cqw; height: 0.9cqw;
  min-width: 12px; min-height: 12px; pointer-events: none; color: rgba(255,255,255,0.5);
  transition: transform .25s ease; }
.zx-tel-btn .zx-pick-ok { position: static; width: 0.8cqw; height: 0.8cqw; }
.zx-tel-btn[aria-expanded="true"] .zx-pick-ok,
.zx-pick-inp[aria-expanded="true"] ~ .zx-pick-ok { transform: rotate(180deg); }

/* Açılır panel: alanın hemen altına, akışın üstüne. Kutu koyu ve çerçeveli —
   altındaki forma karışmasın. */
.zx-drop { position: absolute; z-index: 40; left: 0; top: calc(100% + 0.3cqw);
  min-width: 100%; max-width: 22cqw; border-radius: 0.42cqw; overflow: hidden;
  background: #1b1b1b; box-shadow: inset 0 0 0 1px rgba(240,240,240,0.14),
  0 1.2cqw 2.4cqw rgba(0,0,0,0.5); }
.zx-drop-ara { width: 100%; appearance: none; background: none; border: 0;
  border-bottom: 1px solid rgba(240,240,240,0.14); color: #ffffff;
  padding: 0.7cqw 0.9cqw; font-family: 'Jost', sans-serif; font-size: max(0.88cqw, 11px); }
.zx-drop-ara:focus { outline: none; }
.zx-drop-liste { list-style: none; margin: 0; padding: 0.3cqw; max-height: max(13cqw, 162px);
  overflow-y: auto; }
.zx-drop-liste li { display: flex; align-items: center; gap: 0.55cqw; cursor: pointer;
  padding: 0.42cqw 0.6cqw; border-radius: 0.3cqw;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: max(0.88cqw, 11px);
  color: rgba(255,255,255,0.87); white-space: nowrap; }
.zx-drop-liste li:hover, .zx-drop-liste li.uzerinde { background: rgba(240,240,240,0.08);
  color: #ffffff; }
.zx-drop-kod { margin-left: auto; color: rgba(255,255,255,0.67); }
.zx-drop-bos { padding: 0.6cqw; font-family: 'Jost', sans-serif; font-size: max(0.85cqw, 10.5px);
  color: rgba(255,255,255,0.67); }

/* Gizlilik sözleşmesi kutusu. Sınıflar proje çekmecesinden geliyor
   (`.zc-chk` + `.zc-box`, 14. bölüm): iki form da aynı onay kutusunu
   kullanıyor, ikinci bir görünüm dili doğmuyor. Burada yalnız satırın
   formdaki yeri ayarlanıyor. 2026-09-14'ten beri düğmenin ALTINDA (müşteri
   isteği); form boşluğuna eklenen küçük pay düğmeyle arasını açıyor. */
.zx-nda { align-self: flex-start; margin-top: 0.2cqw; }

/* Gönder düğmesi kaynaktaki gibi TAM GENİŞLİK ve çerçeveli. */
.zx-root .zx-form-gonder { width: 100%; justify-content: center; }

/* Dar ekran. Bu blok dosyanın SONUNDA, çünkü yukarıdaki 900px bloğu bu
   bölümün masaüstü kurallarından ÖNCE geliyor — aynı ağırlıkta iki kural
   çakışsaydı sonra gelen kazanır ve mobil kuralları yutulurdu. */
@media (max-width: 900px) {
  /* Tavan ve taban kuralı yukarıdaki büyük 900px bloğuyla aynı: tavan 480px
     genişlikteki değer (X × 4.8). İki ek şart:
     - FORM YAZISI EN AZ 16px. iOS Safari 16px'ten küçük alana odaklanınca
       sayfayı yakınlaştırıp öyle bırakıyor; alanlar 360px'te 14.4px, ülke
       araması 13.7px ölçülmüştü (arama kutusu açılır açılmaz odak alıyor).
     - Alanın dikey iç boşluğu en az 10px: 16px × 1.5 satır + 2 × 10 = 44px
       dokunma hedefi. Telefon düğmesi alanla aynı boşluğu alıyor, ikisi
       aynı hizada kalıyor.
     `--zx-inp-*` belirteçleri ok işaretinin yerini de hesaplıyor. */
  .zx-contact-form, .zc-panel { --zx-inp-fs: clamp(16px, 4cqw, 19px); --zx-inp-py: clamp(10px, 2cqw, 12px); }
  /* Tek kolon, DOM sırasıyla: giriş → form → doğrudan kanallar. Form ile
     şerit tek panel gibi üst üste yapışık; köşeler ona göre. */
  .zx-contact { grid-template-columns: 1fr; margin-top: min(8cqw, 38px); }
  .zx-contact-giris { padding: 0 0 min(8cqw, 38px); gap: min(3cqw, 14.5px); }
  .zx-root .zx-contact-giris-bas { max-width: none; font-size: clamp(26px, 7cqw, 34px); }
  .zx-contact-artilar { margin-top: min(3cqw, 14.5px); gap: min(5cqw, 24px); }
  .zx-contact-artilar li { gap: min(3.4cqw, 16px); }
  .zx-contact-arti { gap: min(1.2cqw, 6px); }
  .zx-contact-arti-bas { font-size: clamp(16px, 4.2cqw, 20px); }
  .zx-contact-form { border-radius: min(3cqw, 14.5px) min(3cqw, 14.5px) 0 0; }
  .zx-contact-yan { padding: min(7cqw, 33.5px) min(6cqw, 29px); gap: min(7cqw, 33.5px);
    border-radius: 0 0 min(3cqw, 14.5px) min(3cqw, 14.5px); }
  .zx-yan-grup { gap: min(2.4cqw, 11.5px); }
  .zx-root .zx-yan-bas { font-size: clamp(17px, 4.6cqw, 21px); }
  /* Satırlar ≥44px dokunma boyu; aradaki boşluğu satırın kendi boyu veriyor. */
  .zx-yan-liste { gap: 0; }
  .zx-root .zx-yan-liste a { min-height: 44px; gap: min(2.6cqw, 12.5px); font-size: clamp(15px, 3.9cqw, 18px); }
  .zx-yan-liste svg { width: min(4.6cqw, 20px); height: min(4.6cqw, 20px); }
  .zx-yan-sosyal { gap: min(3cqw, 14px); }
  .zx-root .zx-yan-sosyal a { width: 44px; height: 44px; }
  .zx-tel { gap: min(2.4cqw, 11.5px); }
  .zx-tel-btn { font-size: var(--zx-inp-fs, clamp(16px, 4cqw, 19px)); padding: var(--zx-inp-py, clamp(10px, 2cqw, 12px)) 0; gap: min(1.2cqw, 6px); }
  .zx-bayrak { width: min(5.4cqw, 26px); height: min(4cqw, 19.5px); border-radius: min(0.6cqw, 3px); }
  .zx-tel-btn .zx-pick-ok { width: min(3.4cqw, 16px); height: min(3.4cqw, 16px); }
  /* Ok, alan yazısının satır ortasında: alt iç boşluk + (satır − ok) / 2. */
  .zx-pick-ok { width: min(3.8cqw, 18px); height: min(3.8cqw, 18px);
    bottom: calc(var(--zx-inp-py) + (var(--zx-inp-fs) * 1.5 - min(3.8cqw, 18px)) / 2); }
  .zx-pick-inp { padding-right: min(6cqw, 29px); }
  .zx-drop { max-width: none; top: calc(100% + min(1.4cqw, 6.5px)); border-radius: min(1.8cqw, 8.5px); }
  .zx-drop-ara { padding: min(3cqw, 14.5px) min(3.4cqw, 16px); font-size: clamp(16px, 3.8cqw, 18px); }
  .zx-drop-liste { max-height: min(52cqw, 250px); padding: min(1.4cqw, 6.5px); }
  /* Ülke satırı parmakla seçiliyor: 12px dikey boşlukla ≈44px. */
  .zx-drop-liste li { padding: 12px min(2.6cqw, 12.5px); font-size: clamp(14px, 3.8cqw, 18px); gap: min(2.2cqw, 10.5px); }
  .zx-contact-form { padding: min(7cqw, 33.5px) min(6cqw, 29px); gap: min(3cqw, 14.5px); }
  .zx-contact-bas { max-width: none; }
  .zx-form { margin-top: min(3cqw, 14.5px); gap: min(5cqw, 24px); }
  .zx-form-grid { grid-template-columns: 1fr; row-gap: min(4.5cqw, 21.5px); }
  .zx-field-wide { grid-column: auto; }
  .zx-field { gap: min(1.4cqw, 6.5px); }
  .zx-lab { font-size: clamp(12px, 3.4cqw, 16px); }
  .zx-inp { font-size: var(--zx-inp-fs, clamp(16px, 4cqw, 19px)); padding: var(--zx-inp-py, clamp(10px, 2cqw, 12px)) 0; }
  /* Dar ekranda NDA etiketi iki satıra düşüyor; halka `center` ile satırların
     ORTASINDA kalıyordu. İlk satırla hizalanıyor: (ilk satır − halka) / 2. */
  .zx-nda { align-items: flex-start; }
  .zx-nda .zc-box { margin-top: max(0px, (1.3em - max(15px, min(4.2cqw, 20px))) / 2); }
  textarea.zx-inp { min-height: min(22cqw, 106px); }
}


/* ===========================================================================
   14) PROJE PANELİ — sağdan giren iletişim çekmecesi
   ===========================================================================
   Kaynak: lessestudio.com'un "Ready to get started?" çekmecesi. Alt kapsüldeki
   "Hadi bir proje yapalım" hapına basılınca sağdan giriyor, arkadaki sayfa
   bulanıklaşıyor. İçerik sayfanın altındaki iletişim formunun aynısı —
   ziyaretçi on iki bölüm aşağı inmeden aynı işi yapabiliyor.

   KUTU BODY'NİN ALTINDA, `.sv-root` İÇİNDE DEĞİL. Gerekçe alt kapsülün
   markup'ında uzun uzun yazılı: `.sv-root` `container-type: inline-size`
   taşıyor, bu da onu `position: fixed` kutular için kapsayıcı blok yapıyor —
   içeride duran bir çekmece sayfayla birlikte kayardı. Dışarıda duruyor ve
   sarmalayıcı KENDİ container'ını açıyor: tam ekran olduğu için 1cqw yine
   1vw, yani sayfanın geri kalanıyla birebir aynı ölçek. Sürücü sayfanın vurgu
   rengini (--sv-ac) kopyalayıp buraya yazıyor, yoksa çekmece sayfanın rengini
   bilmezdi.

   Sürücü: hizmet-ortak.js, 16. iş. Çekmece ilk tıklamada kuruluyor — kimse
   basmazsa hiç DOM üretilmiyor. */
.zc-wrap { position: fixed; inset: 0; z-index: 200; container-type: inline-size;
  --sv-ac: #0d99ff;
  visibility: hidden; transition: visibility 0s linear .62s; }
.zc-wrap.acik { visibility: visible; transition-delay: 0s; }

/* Perde: karartma + bulanıklık. Kaynakta arkadaki içerik seçiliyor ama odak
   açıkça çekmecede — karartma tek başına o ayrımı vermiyordu. */
.zc-perde { position: absolute; inset: 0; background: rgba(8,8,8,0.58);
  -webkit-backdrop-filter: blur(0.55cqw); backdrop-filter: blur(0.55cqw);
  opacity: 0; transition: opacity .5s ease; cursor: pointer; }
.zc-wrap.acik .zc-perde { opacity: 1; }

/* Çekmece. `min-width` dar masaüstlerinde formu ezdirmiyor; `max-width: 100%`
   de o taban yüzünden ekrandan taşmasını engelliyor. */
.zc-panel { position: absolute; top: 0; right: 0; height: 100%;
  width: 43cqw; min-width: 430px; max-width: 100%;
  display: flex; flex-direction: column; gap: 1.5cqw;
  padding: 2.4cqw 2.6cqw 3cqw;
  background: #0a0a0a; color: #ffffff;
  font-family: 'Jost', 'Roboto', sans-serif;
  box-shadow: inset 1px 0 0 rgba(240,240,240,0.1), -1cqw 0 3cqw rgba(0,0,0,0.55);
  /* `overscroll-behavior` kaydırmayı çekmecede tutuyor: form dibine gelince
     tekerlek arkadaki sayfayı sürüklemiyor. */
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(101%);
  transition: transform .62s cubic-bezier(.22,.7,.2,1); }
.zc-wrap.acik .zc-panel { transform: translateX(0); }
/* `.zc-panel` KENDISI de listede: dolgu genisligin icinde kalmali, yoksa
   42cqw + 2x2.6cqw dolgu dar ekranda cekmeceyi soldan tasiriyor. */
.zc-panel, .zc-panel *, .zc-panel *::before, .zc-panel *::after { box-sizing: border-box; }
.zc-panel h2, .zc-panel p { margin: 0; }
.zc-panel a { color: rgba(255,255,255,0.88); text-decoration: underline; }
.zc-panel a:hover { color: #ffffff; }
.zc-panel :focus-visible { outline: 2px solid var(--sv-ac); outline-offset: 3px;
  border-radius: 2px; }

/* Başlık satırı: solda iki tonlu başlık, sağda kapatma. Mutlak konumlu DEĞİL —
   çekmece kaydırılabilir, mutlak dursaydı çarpı yukarıda kalıp kayıp giderdi. */
.zc-ust { display: flex; align-items: flex-start; gap: 1.2cqw; }
.zc-bas { flex: 1; min-width: 0; max-width: 13ch;
  font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 2.6cqw;
  line-height: 1.04; letter-spacing: -0.032em; color: #ffffff; }
/* İkinci yarı SOLUK: kaynaktaki "Ready to / get started?" ayrımı. Cümle tek
   nefeste okunuyor ama vurgu ilk yarıda kalıyor. */
.zc-bas span { color: rgba(255,255,255,0.34); }

.zc-kapat { flex: none; width: 2.4cqw; height: 2.4cqw; min-width: 34px; min-height: 34px;
  padding: 0; border: 0; border-radius: 999px; background: rgba(240,240,240,0.08);
  color: #ffffff; display: grid; place-items: center; cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease; }
.zc-kapat:hover { background: #f0f0f0; color: #0c0c0c; transform: rotate(90deg); }
.zc-kapat svg { width: 42%; height: 42%; min-width: 12px; min-height: 12px; }

/* ── alanlar ───────────────────────────────────────────────────────────────
   Sayfanın altındaki form ALTI ÇİZİLİ; buradaki KUTULU. Fark bilinçli:
   çekmece dar ve koyu, ince çizgiler orada zemine karışıyordu (kaynak sayfa da
   çekmecesinde kutu kullanıyor). Alan sınıfı yine `.zx-inp` — mailto sürücüsü
   (13. iş) alanları toplarken o sınıfa bakıyor, ikinci bir kanca gerekmiyor. */
.zc-form { width: 100%; display: flex; flex-direction: column;
  align-items: flex-start; gap: 1.5cqw; margin-top: 0.4cqw; }
.zc-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 0.9cqw; row-gap: 0.9cqw; }
.zc-alan { min-width: 0; }
.zc-wide { grid-column: span 2; }
/* Yalnız ekran okuyucu için: kutuların içinde yer tutucu var, üstünde etiket
   yok. Etiket yine de DURUYOR — mailto gövdesindeki satır adları oradan
   okunuyor (13. iş, `label[for]`). */
.zc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.zc-panel .zx-inp { border: 1px solid rgba(240,240,240,0.14); border-radius: 0.55cqw;
  padding: 0.92cqw 1.05cqw; background: rgba(240,240,240,0.02);
  transition: border-color .25s ease, background .25s ease; }
.zc-panel .zx-inp::placeholder { color: rgba(255,255,255,0.42); }
.zc-panel .zx-inp:hover { border-color: rgba(240,240,240,0.28); }
.zc-panel .zx-inp:focus { border-color: var(--sv-ac); background: rgba(240,240,240,0.045); }
.zc-panel .zx-inp.hata { border-color: #ff6b6b; }
.zc-panel textarea.zx-inp { min-height: 8.4cqw; }

/* Telefon: ülke düğmesiyle alan TEK kutunun içinde, aralarında saç teli ayraç.
   Ortak `.zx-tel` kuralları alt çizgi varsayıyor; burada hepsi sıfırlanıp
   çerçeve DIŞ kutuya veriliyor. */
.zc-panel .zx-tel { align-items: stretch; gap: 0;
  border: 1px solid rgba(240,240,240,0.14); border-radius: 0.55cqw;
  background: rgba(240,240,240,0.02); transition: border-color .25s ease; }
.zc-panel .zx-tel:hover { border-color: rgba(240,240,240,0.28); }
.zc-panel .zx-tel:focus-within { border-color: var(--sv-ac); }
.zc-panel .zx-tel-btn { border-bottom: 0; padding: 0 0.9cqw;
  border-right: 1px solid rgba(240,240,240,0.12); }
.zc-panel .zx-tel-btn:hover { border-bottom: 0; }
.zc-panel .zx-tel .zx-inp { border: 0; border-radius: 0; background: none; }
.zc-panel .zx-tel .zx-inp:hover,
.zc-panel .zx-tel .zx-inp:focus { border: 0; background: none; }
/* Ortak kural açılır ülke listesini `.zx-tel` kadar geniş tutuyor
   (`min-width: 100%`); sayfanın formunda o kutu dar, çekmecede ise neredeyse
   panel eni kadar — liste boşuna yayılıyordu. Burada kendi ölçüsünü alıyor. */
.zc-panel .zx-drop { min-width: 0; width: 20cqw; }

/* ── hizmet seçimi ─────────────────────────────────────────────────────────
   Kaynakta yuvarlak radyo düğmeleri var ama tek seçime izin veriyor; buradaki
   ONAY KUTUSU, çünkü bir proje çoğu zaman birden fazla başlığa dokunuyor.
   Görünüm yuvarlak kalıyor: kaynağın dili bozulmuyor, davranış düzeliyor.

   Sayfa hangi hizmete aitse o kutu açık geliyor (sürücü kırıntı yolundaki
   başlığa bakıyor) — ziyaretçi zaten o sayfadan geliyor, tekrar söylemesin. */
.zc-hiz { width: 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.zc-hiz legend { padding: 0; margin-bottom: 1cqw;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400;
  font-size: max(0.68cqw, 8.5px); line-height: 1.2; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.70); }
.zc-hiz-grid { display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 1.1cqw; row-gap: 0.72cqw; }
/* Çekmece yazılarında da masaüstü tabanları (N = X × 12.5): 1024'te hizmet
   adları 9.4px, lejant 7px, dip not 8.2px'e iniyordu. 1250px üstünde değer
   değişmiyor. */
.zc-chk { display: flex; align-items: center; gap: 0.65cqw; cursor: pointer;
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: max(0.92cqw, 11.5px);
  line-height: 1.3; color: rgba(255,255,255,0.84); transition: color .25s ease; }
.zc-chk:hover { color: #ffffff; }
/* Kutunun kendisi görünmez ama ODAKLANABİLİR kalıyor (`opacity: 0`,
   `display: none` değil) — klavyeyle gezilebilsin diye. Halkayı `.zc-box`
   çiziyor, işareti onun `::after`ı. */
.zc-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.zc-box { flex: none; width: 0.95cqw; height: 0.95cqw; min-width: 15px; min-height: 15px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(240,240,240,0.32);
  display: grid; place-items: center;
  transition: box-shadow .25s ease, background .25s ease; }
.zc-box::after { content: ''; width: 44%; height: 44%; border-radius: 999px;
  background: #0a0a0a; transform: scale(0);
  transition: transform .22s cubic-bezier(.22,.7,.2,1); }
.zc-chk:hover .zc-box { box-shadow: inset 0 0 0 1px rgba(240,240,240,0.55); }
.zc-chk input:checked + .zc-box { background: var(--sv-ac);
  box-shadow: inset 0 0 0 1px var(--sv-ac); }
.zc-chk input:checked + .zc-box::after { transform: scale(1); }
.zc-chk input:focus-visible + .zc-box { outline: 2px solid var(--sv-ac); outline-offset: 3px; }

.zc-not { font-family: 'Jost', sans-serif; font-weight: 300; font-size: max(0.8cqw, 10px);
  line-height: 1.5; color: rgba(255,255,255,0.70); }

/* Çekmece açıkken sayfa kaydırılmıyor. Kaydırma çubuğu kaybolunca içerik sağa
   sıçramasın diye sürücü çubuğun genişliği kadar iç boşluk bırakıyor. */
html.zc-kilit { overflow: hidden; }

@media (max-width: 900px) {
  /* Dar ekranda çekmece TAM genişlik: 430px taban burada ekranı taşırırdı.
     TAVAN 560px: tablette ve yatay telefonda tam genişlik çekmece alanları
     700px'e yayıyordu; perde solda görünür kalıyor, çekmece bir sayfa gibi
     değil bir panel gibi okunuyor. Ölçüler yukarıdaki kuralla aynı: tavan
     480px'teki değer, form yazısı en az 16px, dokunma hedefleri en az 44px.
     Alt iç boşluğa iPhone'un ev çubuğu alanı ekleniyor. */
  .zc-panel { width: min(100%, 560px); min-width: 0;
    padding: min(7cqw, 33.5px) min(6cqw, 29px) calc(min(9cqw, 43px) + env(safe-area-inset-bottom, 0px));
    gap: min(5cqw, 24px); }
  .zc-bas { font-size: min(8cqw, 38.5px); max-width: none; }
  /* Kapatma 36px ölçülmüştü; en az 44px. */
  .zc-kapat { width: clamp(44px, 10cqw, 48px); height: clamp(44px, 10cqw, 48px); }
  .zc-perde { -webkit-backdrop-filter: blur(min(2cqw, 9.5px)); backdrop-filter: blur(min(2cqw, 9.5px)); }
  .zc-form { gap: min(5cqw, 24px); margin-top: 0; }
  .zc-grid { grid-template-columns: 1fr; row-gap: min(3.2cqw, 15.5px); }
  .zc-wide { grid-column: auto; }
  .zc-panel .zx-inp { border-radius: min(2cqw, 9.5px); padding: max(10px, min(3.2cqw, 15.5px)) min(3.6cqw, 17.5px); }
  .zc-panel textarea.zx-inp { min-height: min(28cqw, 134px); }
  .zc-panel .zx-tel { border-radius: min(2cqw, 9.5px); }
  .zc-panel .zx-tel-btn { padding: 0 min(3.2cqw, 15.5px); }
  .zc-panel .zx-drop { width: 100%; }
  .zc-hiz legend { font-size: clamp(12px, 2.9cqw, 14px); margin-bottom: min(3.4cqw, 16px); }
  /* Hizmet satırları 17px yüksekliğindeydi (aralarında 11px boşluk). Satır
     artık kendisi 44px; boşluk o yüzden sıfır — liste aynı ritimde, yalnız
     parmağa göre. */
  .zc-hiz-grid { column-gap: min(3cqw, 14.5px); row-gap: 0; }
  .zc-chk { min-height: 44px; font-size: clamp(14px, 3.6cqw, 17px); gap: min(2.4cqw, 11.5px); }
  .zc-box { width: min(4.2cqw, 20px); height: min(4.2cqw, 20px); }
  .zc-not { font-size: clamp(12px, 3.2cqw, 15px); }
}

@media (prefers-reduced-motion: reduce) {
  .zc-panel, .zc-perde, .zc-kapat, .zc-box, .zc-box::after { transition: none; }
  .zc-kapat:hover { transform: none; }
}