/* =========================================================================
   TAM Randevu — sections.css · bölüm yerleşimleri (mobile-first)
   ========================================================================= */

/* ============================ NAV ============================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--pad);
  background: transparent;
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.nav.scrolled {
  background: var(--bg-overlay);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--hair-soft);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; }

/* ── Marka kilidi · "tam randevu." kelime logosu ────────────────────────
   Logo bir GÖRSEL DEĞİL, maskedir: harfler `currentColor` ile boyanır, o
   yüzden açık/koyu temada ayrı dosya tutmaya gerek yok ve nav kaydırılıp
   metin rengi değiştiğinde logo da onunla gelir. Nokta ayrı katmandır ve
   --accent'i kullanır: sitenin geri kalanındaki maviyle AYNI mavi olsun
   diye (logo kaynağındaki #0071e3 ile aradaki fark gözle seçilmez, ama
   yandaki birincil düğmenin mavisiyle çakışırdı).

   Maske ::before'a verilir, elemanın kendisine DEĞİL: maske elemanın
   pseudo çocuklarını da kırpar, nokta harflerin dışında kaldığı için
   eleman maskelenseydi görünmezdi (2026-08-27 render ölçümü).

   Yükseklik tek ayar noktasıdır; genişlik aspect-ratio'dan gelir.
   Oran = logo-mask.svg viewBox'ı (1454.16 / 198.2), elle değiştirilmez. */
.brand .logo-slot {
  position: relative; flex: none; display: block;
  height: 20px; aspect-ratio: 1454.16 / 198.2;
}
.brand .logo-slot::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: url(/icons/logo-mask.svg) 0 0 / 100% 100% no-repeat;
          mask: url(/icons/logo-mask.svg) 0 0 / 100% 100% no-repeat;
}
/* Noktanın yüzdeleri logo-mask.svg geometrisinden TÜRETİLMİŞTİR
   (merkez 1428.5,172.5 · r 25.65 · viewBox 1454.16x198.2). SVG değişirse
   bu dört sayı da yeniden hesaplanır. */
.brand .logo-slot::after {
  content: ""; position: absolute;
  left: 96.472%; top: 74.117%; width: 3.528%; height: 25.883%;
  border-radius: 50%; background: var(--accent);
}
/* Kelime logosu markanın adını ZATEN yazıyor; metin tekrarı olurdu.
   Silinmez, ekran okuyucuya bırakılır: footer'daki .brand'in aria-label'ı
   yok, erişilebilir adını bu metinden alıyor. */
.brand .name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Maske desteklenmiyorsa (çok eski tarayıcı) logo boş bir dikdörtgen
   olurdu; o durumda kelime logosu hiç çizilmez, yazı geri gelir. */
@supports not ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) {
  .brand .logo-slot { display: none; }
  .brand .name { position: static; width: auto; height: auto; margin: 0; clip: auto; font-size: 17px; }
}
.brand .name b { font-weight: 800; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-links { display: none; gap: 4px; }
/* Etiket ASLA iki satıra sarmaz. Sarınca bar 68px'ten 89px'e büyüyor ve
   marka ile aksiyonlar dikey olarak kayıyordu (2026-08-19 ölçümü). */
.nav-links a { padding: 8px 12px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--text); background: var(--surface-2); }

/* ── Sektörler açılır menüsü (üst bar) ──────────────────────────────────
   TASARIM: bu menü bir AYAR LİSTESİ DEĞİL, bir İÇİNDEKİLER sayfasıdır.
   İlk sürümü panelin satır dilini ödünç almıştı (yumuşak-vurgulu kare ikon
   kutusu + başlık + gri alt satır) ve tanıtım sayfasına panelden kesilip
   yapıştırılmış gibi duruyordu — 2026-08-27 kullanıcı geri bildirimi.
   Yerine landing'in kendi dili: sıra numarası, kenardan kenara kesen
   saç teli çizgiler, tam-genişlik hover şeridi ve yalnız hoverda beliren
   ok. Yeni renk/gölge/radius üretilmez; kutu hâlâ --bg-elev + --r-card
   ailesindendir (LANDING-DESIGN.md §0.6).
   Kapalıyken [hidden] ile display:none (base.css sözleşmesi) → tıklamaları
   yutan görünmez katman DOĞMAZ. Açılış transform+opacity ile yapılır. */
.nav-drop { position: relative; display: flex; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 10px 8px 12px; border: none; background: transparent;
  border-radius: var(--r-pill); font-size: 15px; font-weight: 500;
  font-family: inherit; letter-spacing: var(--ls);
  color: var(--text-2); white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
.nd-chev { width: 15px; height: 15px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.nav-drop-btn[aria-expanded="true"] .nd-chev { transform: rotate(180deg); }

/* Kenar çizgisi INSET GÖLGE DEĞİL, gerçek border: satırların tam-genişlik
   hover şeridi `overflow:hidden` ile PADDING kutusunda kesilir, böylece
   çizginin üstünü boyayamaz. Inset gölgeyle iki yanda hairline yenirdi. */
.nd-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 120;
  width: 344px; overflow: hidden;
  border: 1px solid var(--hair); border-radius: var(--r-card);
  background: var(--bg-elev); box-shadow: var(--sh-lg);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .24s cubic-bezier(.2,.7,.2,1);
}
.nd-panel.open { opacity: 1; transform: none; }

/* Başlık satırı: menüye "bu bir içindekiler" diyen künye. BÜYÜK HARFE
   ÇEVİRME YOK — text-transform:uppercase Türkçede "i"yi noktasız "I"ya
   çevirir; harf aralığı zaten künye hissini veriyor. */
.nd-head {
  margin: 0; padding: 13px 18px 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .045em;
  color: var(--text-3);
}
.nd-item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: 0 13px;
  padding: 12px 18px 13px;
  border-top: 1px solid var(--hair-soft);
  white-space: normal;                     /* .nav-links a kuralını ez */
  transition: background .18s ease;
}
.nd-item:hover { background: var(--surface-2); }
/* Sıra numarası: tabular figürlerle hizalı, satırın başlığıyla aynı temel
   çizgide. Hoverda tek vurgu rengine döner — menünün tek renk olayı. */
.nd-no {
  padding-top: 1px;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; color: var(--text-3);
  transition: color .18s ease;
}
.nd-item:hover .nd-no { color: var(--accent); }
.nd-txt { display: block; min-width: 0; }
.nd-txt b { display: block; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.nd-txt i { display: block; font-style: normal; font-size: 12.5px; color: var(--text-3); line-height: 1.4; margin-top: 3px; }
/* Ok yalnız hoverda/odakta belirir: kapalı hâlde menü sade bir liste kalır. */
.nd-go {
  width: 15px; height: 15px; margin-top: 3px; color: var(--text-3);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);
}
.nd-item:hover .nd-go, .nd-item:focus-visible .nd-go { opacity: 1; transform: none; }
/* Son satır aynı ailedendir, yalnız numarasızdır: "ve diğerleri". */
.nd-all {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--hair);
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  white-space: normal; transition: color .18s ease, background .18s ease;
}
.nd-all svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.nd-all:hover { color: var(--text); background: var(--surface-2); }
/* Aktif sayfa: hem satırın kendisi hem de tetikleyici işaretlenir, yoksa
   sektör sayfasındayken üst barda hiçbir şey "buradasın" demiyor. */
.nd-item[aria-current="page"] { background: var(--surface-2); }
.nd-item[aria-current="page"] .nd-no { color: var(--accent); }
.nav-drop-btn[data-current="1"] { color: var(--text); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) {
  .nd-panel { transition: opacity .12s ease; transform: none; }
  .nd-chev { transition: none; }
  .nd-go { transition: opacity .12s ease; transform: none; }
}

.theme-toggle {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--hair);
  display: grid; place-items: center; color: var(--text);
  transition: background .25s, transform .25s;
}
/* Mobilde tema değiştirici üst bardan çıkar (sheet'e taşındı) */
@media (max-width: 899px) { .theme-toggle { display: none; } }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle svg { width: 20px; height: 20px; }
.nav .btn { padding: 10px 18px; min-height: 44px; font-size: 15px; }
.nav-cta-text-long { display: none; }
@media (min-width: 600px) { .nav-cta-text-long { display: inline; } .nav-cta-text-short { display: none; } }
/* ── Satır içi bağlantılar: 1000px ve üstü ────────────────────────────
   Eşik ÖLÇÜLEREK konur, tahminle değil (bar sarınca 68px'ten 89px'e çıkar
   ve marka ile aksiyonlar dikey kayar). Tarihçe: 900 → 1200 (beş bağlantı)
   → 1000 (üst bar sayfa gezinmesine indi, üç bağlantı) → 1100 (Sektörler
   açılır menüsü eklendi). Gerçek Chrome ölçümü (2026-08-23, Sektörler'li):
     TR: marka 152 + bağlantı 392 + aksiyon 395 + kenar 80 = 1019
     EN: marka 152 + bağlantı 388 + aksiyon 351 + kenar 80 =  971
   (aksiyon = hamburger yokken; eşik üstünde hamburger gizlenir)

   ⚠️ 2026-08-28: EŞİK 1100 → 1160. "Ürünler" açılır menüsü eklenince
   bar 1100-1127 arasında SARDI (yükseklik 68 → 89px; marka ile
   aksiyonlar dikey kayıyor). Bu sefer sayı hesapla DEĞİL ÖLÇÜMLE
   konuldu — gerçek Chrome'da ikili arama:

     1126px → 89px (sarıyor) · 1128px → 68px (sığıyor)

   Yani gerçek sınır 1127. Eşik 1160 seçildi (~33px pay): dolar/kesirli
   piksel oranlarında sınıra oturmuş bir eşik, bazı cihazlarda sarar.
   Aynı turda üst bardaki TEKRARLANAN "TAM AI" bağlantısı da kaldırıldı
   (/tam-ai zaten Ürünler menüsünün 01 satırı) — o tek başına 74px'di ve
   onsuz gereksinim 1204'ten 1127'ye indi.

   Altında hamburger + sheet devralır; hiçbir bağlantı kaybolmaz.
   Nöbetçi: tests/landing-nav-sheet.test.mjs (gerçek Chrome, sarma
   yüksekliğini ÖLÇER — bu sınıfı jsdom göremez). */
@media (min-width: 1160px) { .nav-links { display: flex; } }

/* ── Mobil menü butonu (yalnız <900px) ── */
.menu-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none; border: none;
  background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--hair);
  display: grid; place-items: center; color: var(--text);
  transition: background .25s, transform .25s;
}
.menu-btn:active { transform: scale(.92); }
.menu-lines { display: grid; gap: 5px; width: 18px; }
.menu-lines i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s; }
.menu-btn[aria-expanded="true"] .menu-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
/* Hamburger, satır içi bağlantılar açılana kadar durur (1160px).
   .nav-links ile AYNI eşik olmak zorunda: ikisi ayrışırsa aradaki
   aralıkta ne bağlantı ne menü kalır ve gezinme tamamen kaybolur. */
@media (min-width: 1160px) { .menu-btn { display: none; } }

/* ── iOS bottom sheet ── */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,.32); opacity: 0;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity .35s ease;
}
.sheet-scrim.open { opacity: 1; }
:root[data-theme="dark"] .sheet-scrim { background: rgba(0,0,0,.55); }

.nav-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; flex-direction: column;
  /* YÜKSEKLİK TAVANI + İÇ KAYDIRMA — bkz. .sheet-scroll.
     Yaşanan hata (ölçüm: headless Chrome, 2026-08-23): sheet'in içeriği
     671px sabitti ve hiçbir tavanı yoktu. 375×667'de sheet'in tepesi -3px,
     360×640'ta -30px, 320×568'de -102px'e taşıyordu → ekranda dokunulacak
     TEK PİKSEL scrim kalmıyor, içerik de kaydırılamıyordu. Menü butonunun
     (X) durduğu noktada artık bir `.sheet-link` oluyordu: kapatmaya çalışan
     kullanıcı sayfa değiştiriyordu. "Kapatamıyoruz" tam olarak buydu.
     dvh: mobil tarayıcı çubuğu açılıp kapandığında GERÇEK yüksekliği verir
     (vh, çubuk açıkken viewport'tan büyük ölçer). Eski tarayıcılar ilk
     satırda kalır. 56px pay: üstte her zaman scrim'e dokunulacak şerit. */
  max-height: 86vh;
  max-height: min(86dvh, calc(100dvh - 56px));
  background: var(--bg-elev);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: 0 -8px 40px rgba(15,15,20,.18), 0 0 0 .5px var(--hair);
  padding: 6px clamp(16px, 5vw, 24px) max(22px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.32,.72,0,1);
  will-change: transform;
}
/* `hidden` TUZAĞI: yukarıdaki `display:flex`, tarayıcının UA kuralı olan
   [hidden]{display:none} kuralını EZER (aynı sınıf hatası `.demo-pop`ta
   yaşandı: görünmez tam-ekran katman altındaki her tıklamayı yutuyordu).
   Nöbetçi: tests/landing-overlay-hit.test.mjs. */
.nav-sheet[hidden] { display: none; }
.nav-sheet.open { transform: none; }
/* Parmak sürüklerken: geçiş kapalı, sheet parmağı BİREBİR takip eder. */
.nav-sheet.dragging, .sheet-scrim.dragging { transition: none; }
/* Kapanış animasyonu penceresi (.open kalktı, `hidden` transitionend'de konur —
   ~0.42s): katman hâlâ ekranda ama ARTIK TIKLAMA YUTMAMALI. */
.nav-sheet:not(.open), .sheet-scrim:not(.open) { pointer-events: none; }
:root[data-theme="dark"] .nav-sheet { box-shadow: 0 -8px 48px rgba(0,0,0,.6), 0 0 0 .5px var(--hair); }
@media (prefers-reduced-motion: reduce) {
  .nav-sheet { transition: transform .2s ease; }
  .sheet-scrim { transition: opacity .2s ease; }
}

/* Tutamak: görsel olarak ince ama dokunma hedefi 22px — sürükleyerek
   kapatma jestinin başladığı yer burası, parmakla yakalanabilmeli.
   touch-action:none → tarayıcı bu alanda kendi kaydırmasını denemez. */
.sheet-grab {
  flex: none; height: 22px; margin: 0 auto 6px; width: 76px;
  display: grid; place-items: center; cursor: grab;
  touch-action: none;
}
.sheet-grab::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 999px; background: var(--surface-3); transition: background .2s, width .2s; }
.nav-sheet.dragging .sheet-grab::before { background: var(--text-3); width: 46px; }

/* Kaydırılabilir gövde: tavana dayanınca İÇERİDE kaydırılır, sayfa değil
   (overscroll-behavior:contain → kaydırma zinciri arkadaki sayfaya geçmez).
   touch-action:pan-y: dikey kaydırma tarayıcıda kalır; tepedeyken aşağı
   çekilirse app.js jesti devralıp sheet'i kapatır. */
.sheet-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
}
.sheet-scroll::-webkit-scrollbar { width: 0; height: 0; }
/* "Devamı var" ipucu — yalnızca gerçekten taşıyorsa (JS `.scrolls` koyar),
   sona gelince söner. Alt güvenli alan payının ÜSTÜNDE durur. */
.nav-sheet.scrolls::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: max(22px, env(safe-area-inset-bottom)); height: 26px;
  background: linear-gradient(to top, var(--bg-elev) 30%, rgba(0,0,0,0));
  pointer-events: none; opacity: 1; transition: opacity .2s ease;
}
.nav-sheet.scrolls.at-end::after { opacity: 0; }

.sheet-links { display: flex; flex-direction: column; }
.sheet-link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 4px 6px; font-size: 18px; font-weight: 600;
  letter-spacing: var(--ls); border-bottom: 1px solid var(--hair-soft);
  transition: color .2s;
}
.sheet-link:last-of-type { border-bottom: none; }
.sheet-link svg { width: 19px; height: 19px; color: var(--text-3); }
.sheet-link:active { color: var(--accent); }
.sheet-link:active svg { color: var(--accent); }
/* Sheet grup başlığı — AKORDİYON tetikleyicisi (eskiden düz bir <p> idi).
   Artık <button>: tıklanan şey klavyeyle de erişilebilir olmalı ve ekran
   okuyucuya açık/kapalı durumunu söylemeli (aria-expanded). */
.sheet-group {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin: 0; padding: 4px 6px;
  min-height: 56px;
  background: none; border: 0; border-bottom: 1px solid var(--hair-soft);
  color: var(--text); font: inherit;
  font-size: 18px; font-weight: 600; letter-spacing: var(--ls);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .2s;
}
.sheet-group:active { color: var(--accent); }
.sheet-group .sg-chev {
  width: 19px; height: 19px; flex: none; color: var(--text-3);
  transition: transform .24s cubic-bezier(.2,.7,.2,1), color .2s;
}
.sheet-group[aria-expanded="true"] .sg-chev { transform: rotate(180deg); color: var(--accent); }
.sheet-group:active .sg-chev { color: var(--accent); }

/* Açılan gövde. Yükseklik ÖLÇÜLEN piksele animasyonlanır (js/app.js);
   `auto`ya geçiş yapılamaz. Kapalıyken `hidden` → gerçekten yok. */
.sheet-sub-wrap {
  overflow: hidden;
  transition: height .26s cubic-bezier(.2,.7,.2,1);
}
.sheet-sub-wrap[hidden] { display: none; }
.sheet-sub-wrap .sheet-link:last-child { border-bottom: 1px solid var(--hair-soft); }
.sheet-link.sheet-sub { padding-left: 18px; }
.sheet-link.sheet-sub span { font-size: 16px; }
/* Grubun bittiği yeri ayrı bir ayraçla işaretleme kuralı KALKTI: alt
   satırlar artık kendi kabında (.sheet-sub-wrap) yaşıyor ve kap kapalıyken
   hiç yok. "Gruptan sonraki ilk düz satır hâlâ sektörler mi?" sorusu
   akordiyonla birlikte ortadan kalktı. */
.sheet-cta { width: 100%; margin-top: 16px; min-height: 52px; }
/* Kısa telefonlarda (SE, dar Android) satırları sıkılaştır: kaydırma yine
   var ama CTA katlanmanın altına düşmüyor. 50px hâlâ 44px dokunma
   hedefinin üstünde — erişilebilirlik pazarlık konusu değil. */
@media (max-height: 700px) {
  .sheet-link { min-height: 50px; font-size: 17px; }
  .sheet-theme { margin-top: 14px; }
  .sheet-note { margin-top: 10px; }
}
.sheet-note { text-align: center; font-size: 13px; color: var(--text-3); margin: 12px 0 0; }

/* sheet içi tema satırı + segment kontrolü */
.sheet-theme { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 0 2px; }
.sheet-theme-label { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: var(--ls); }
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); }
.seg button { border: none; background: transparent; padding: 9px 18px; min-height: 40px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 600; color: var(--text-2); letter-spacing: var(--ls); transition: color .25s ease; }
.seg button.on { color: var(--text); background: var(--bg-elev); box-shadow: var(--sh-sm); }
/* Dil seçici (i18n) — .seg ailesinden kompakt varyant. Nav'daki (.nav-lang)
   <900px gizlenir (theme-toggle gibi); mobilde sheet içindeki .lang-seg yaşar. */
.lang-seg button { padding: 7px 13px; min-height: 36px; font-size: 13px; letter-spacing: 0; }
@media (max-width: 899px) { .lang-seg.nav-lang { display: none; } }
body.sheet-open { overflow: hidden; }

/* ── Sheet'in yaşadığı aralık: <1160px ──────────────────────────────
   Bu eşik `.menu-btn` ile AYNI SAYI olmak zorunda. Bir kez ayrıştı ve
   pahalıya patladı: nav bağlantıları 1200'e taşınırken sheet 900'de
   kalınca 900–1199 arasında hamburger GÖRÜNÜYOR ama sheet `display:none`
   oluyordu → düğme ölü, satır içi bağlantılar da kapalı: o aralıkta
   gezinme TAMAMEN yoktu (ölçüm 2026-08-23).
   ≥640px'te sheet tam genişliğe yayılmaz, ortada 460px'lik bir kart
   olur. Ortalama `margin-inline:auto` ile yapılır, transform'la DEĞİL:
   sürükleme jesti transform'u inline yazıyor, orayı işgal edersek
   parmağı takip eden hareket yatay olarak kayar. */
@media (min-width: 640px) { .nav-sheet { max-width: 460px; margin-inline: auto; } }
/* 900+ : tema ve dil zaten nav barında görünür → sheet'te tekrar etme. */
@media (min-width: 900px) { .nav-sheet .sheet-theme { display: none; } }
@media (min-width: 1160px) { .nav-sheet, .sheet-scrim { display: none !important; } }

/* ── Mobil bölüm dock'u (yüzen iOS tab bar) — index varyantı ── */
.dock {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 90;
  transform: translate(-50%, 160%);
  display: flex; align-items: stretch; gap: 2px;
  padding: 6px;
  background: var(--bg-overlay);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg), inset 0 0 0 .5px var(--hair);
  transition: transform .5s cubic-bezier(.32,.72,0,1), opacity .4s ease;
  opacity: 0;
}
.dock.show { transform: translate(-50%, 0); opacity: 1; }
.dock-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 60px; padding: 9px 6px 7px; border-radius: var(--r-pill);
  color: var(--text-2); transition: color .25s ease, background-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.dock-item svg { width: 21px; height: 21px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.dock-item span { font-size: 10.5px; font-weight: 600; letter-spacing: 0; line-height: 1; }
.dock-item:active svg { transform: scale(.86); }
.dock-item.active { color: var(--accent); background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
  .dock { transition: opacity .3s ease; }
  .dock:not(.show) { transform: translate(-50%, 0); }
}
@media (max-width: 360px) { .dock-item { min-width: 54px; } .dock-item span { font-size: 9.5px; } }
@media (min-width: 900px) { .dock { display: none !important; } }

/* Sabit nav için bölüm çapa ofseti */
section[id], header[id] { scroll-margin-top: 76px; }

/* ── Canlı randevu bildirimi (sosyal kanıt toast, iOS bildirim şablonu) ── */
.live-toast {
  position: fixed; left: clamp(12px, 4vw, 24px); bottom: clamp(12px, 4vw, 24px); z-index: 80;
  width: min(338px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px 11px 13px;
  background: var(--bg-overlay);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-radius: 18px;
  box-shadow: var(--sh-lg), inset 0 0 0 .5px var(--hair);
  transform: translateY(18px) scale(.985); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
  will-change: transform, opacity;
}
.live-toast.show { transform: none; opacity: 1; pointer-events: auto; }
/* sheet açıkken gizle */
body.sheet-open .live-toast { opacity: 0 !important; pointer-events: none !important; transform: translateY(18px) scale(.985) !important; }

.lt-icon {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.lt-icon svg { width: 22px; height: 22px; }
.lt-live { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2.5px var(--bg-elev); }
.lt-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: ltPulse 2s ease-out infinite; }
@keyframes ltPulse { 0% { transform: scale(1); opacity: .7; } 70%,100% { transform: scale(2.4); opacity: 0; } }

.lt-body { flex: 1 1 auto; min-width: 0; }
.lt-title { font-size: 14px; font-weight: 600; letter-spacing: var(--ls); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-sub { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.lt-time { flex: none; align-self: flex-start; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.lt-close {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; align-self: center;
  background: var(--surface-2); color: var(--text-2); display: grid; place-items: center;
  opacity: 0; transition: opacity .2s, background .2s, color .2s;
}
.lt-close svg { width: 13px; height: 13px; }
.live-toast:hover .lt-close, .lt-close:focus-visible { opacity: 1; }
.lt-close:hover { background: var(--surface-3); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .live-toast { transition: opacity .3s ease; transform: none; }
  .live-toast.show { transform: none; }
  body.sheet-open .live-toast { transform: none !important; }
  .lt-live::after { animation: none; }
  .lt-close { opacity: 1; }
}
/* davet açıkken sosyal-kanıt toast'ı susar (iki bildirim üst üste binmesin) */
body.pop-open .live-toast { opacity: 0 !important; pointer-events: none !important; }
/* aria-modal="true" ile tutarlı: arkadaki sayfa davet açıkken kaymaz */
body.pop-open { overflow: hidden; }

/* ── Örnek işletme daveti (15 sn) ──────────────────────────────────────────
   Mobilde alttan gelen iOS sheet'i, ≥560px'te ortalanmış diyalog. Sheet
   ailesinin token'larını kullanır (--r-sheet, --bg-elev, --sh-lg); yeni
   renk/gölge üretmez. Görünürlüğü app.js verir (hidden + .open). */
.pop-scrim {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(0,0,0,.32); opacity: 0;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity .35s ease;
}
.pop-scrim.open { opacity: 1; }
:root[data-theme="dark"] .pop-scrim { background: rgba(0,0,0,.55); }

.demo-pop {
  position: fixed; z-index: 140;
  left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(22px, 6vw, 30px) clamp(20px, 5vw, 30px) max(24px, env(safe-area-inset-bottom));
  background: var(--bg-elev);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: 0 -8px 40px rgba(15,15,20,.18), 0 0 0 .5px var(--hair);
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.32,.72,0,1), opacity .3s ease;
}
.demo-pop.open { transform: none; }
/* Kapanış animasyonu penceresi — bkz. .nav-sheet. Ayrıca `display:flex`
   taşıdığı için `hidden` tek başına yetmez (base.css [hidden] sözleşmesi). */
.demo-pop:not(.open), .pop-scrim:not(.open) { pointer-events: none; }
/* Diyalog kabı yalnız odak HEDEFİDİR (tabindex="-1"); halkasını gizle.
   Gerçek odak halkaları içerideki buton ve linkte durur. */
.demo-pop:focus { outline: none; }
:root[data-theme="dark"] .demo-pop { box-shadow: 0 -8px 48px rgba(0,0,0,.6), 0 0 0 .5px var(--hair); }

.dp-ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 16px;
}
.dp-ic svg { width: 23px; height: 23px; }
.dp-title { margin: 0; font-size: clamp(20px, 5vw, 24px); font-weight: 700; letter-spacing: -0.018em; text-wrap: balance; }
.dp-body { margin: 9px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--text-2); max-width: 46ch; }
.dp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; width: 100%; }
.dp-cta { flex: 1 1 auto; }
.dp-dismiss {
  flex: none; border: none; background: transparent; color: var(--text-2);
  min-height: 48px; padding: 0 16px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; letter-spacing: var(--ls);
  transition: color .2s ease, background-color .2s ease;
}
.dp-dismiss:hover { color: var(--text); background: var(--surface-2); }
.dp-dismiss:active { transform: scale(.97); }
.dp-note { margin: 12px 0 0; font-size: 13px; color: var(--text-3); }
/* Çarpı butonu YOK (bilinçli): tek kapanma yolu "Şimdi değil". Kaydırırken
   kazayla kapatılan davet, ürünü gösterme şansını harcıyordu. */

@media (min-width: 560px) {
  .demo-pop {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(460px, calc(100vw - 40px));
    border-radius: var(--r-sheet);
    box-shadow: var(--sh-lg), inset 0 0 0 .5px var(--hair);
    transform: translate(-50%, -46%) scale(.97); opacity: 0;
    transition: transform .42s cubic-bezier(.2,.7,.2,1), opacity .28s ease;
  }
  .demo-pop.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  :root[data-theme="dark"] .demo-pop { box-shadow: var(--sh-lg), inset 0 0 0 .5px var(--hair); }
}

@media (prefers-reduced-motion: reduce) {
  .pop-scrim { transition: opacity .2s ease; }
  .demo-pop { transition: opacity .2s ease; transform: none; opacity: 0; }
  .demo-pop.open { transform: none; opacity: 1; }
  .dp-dismiss:active { transform: none; }
  @media (min-width: 560px) {
    .demo-pop { transform: translate(-50%, -50%); }
    .demo-pop.open { transform: translate(-50%, -50%); }
  }
}

/* ============================ HERO ============================ */
.hero { padding-top: clamp(110px, 22vw, 160px); padding-bottom: clamp(40px, 8vw, 80px); text-align: center; overflow: hidden; }
.hero .eyebrow { margin-bottom: 18px; }
.hero .display { margin: 0 auto; max-width: 16ch; }
.hero .lead { margin: 22px auto 0; max-width: 32ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.hero-note { margin-top: 14px; font-size: 13.5px; color: var(--text-3); display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hero-note b { color: var(--text-2); font-weight: 600; }

/* ── Hero sahnesi (3B dönen telefon) ───────────────────────────────────────
   Tek telefon, iki panel ekranı arasında 3B dönerek geçiş yapar. TÜM ölçüler
   --hs-w'den türer → tek değişkenle ölçeklenir. Mobilde de görünür (eski sahne
   760px altında display:none idi, telefonla gelen ziyaretçi üründen hiçbir şey
   görmüyordu). İçerik stilleri + zaman çizelgesi: mockups.css. */
.hero-stage {
  --hs-w:    clamp(196px, 58vw, 324px);   /* telefon genişliği (tek kaynak) */
  --hs-beat: 18s;                          /* tek zaman çizelgesi           */
  /* Randevu darbesinin yolu (tarayıcıya ölçtürüldü). 3B yolda yüz B'nin
     kendi rotateY(180)'i ebeveynin 180°'siyle sadeleşir; 2B yolda ikisi de
     yok. Her iki durumda kart AYNI ekran koordinatında → tek değer yeter. */
  --hs-dx: calc(var(--hs-w) * 0.349);
  --hs-lx: calc(var(--hs-w) * 0.739);
  position: relative;
  margin-top: clamp(40px, 8vw, 76px);
  display: flex; justify-content: center;
}
@media (min-width: 560px) { .hero-stage { --hs-w: clamp(240px, 38vw, 324px); } }
@media (min-width: 900px) { .hero-stage { --hs-w: clamp(272px, 27vw, 324px); } }

/* Dokunmatikte hikâye DAHA KISA anlatılır. Masaüstündeki 18sn'nin büyük
   kısmı 2.97sn'lik 3B dönüşe ve onun nefesine ayrılmıştı; mobilde dönüş yok
   (mockups.css: sheet düşer) ve aynı beat ödülü ~6.7sn'ye itiyordu. Mobil
   hero'da bakış süresi saniyelerle ölçülür → 11sn'de kart ~3.6sn'de düşer,
   ardından ~5sn okuma duruşu kalır. Ölçüt genişlik DEĞİL pointer:coarse de:
   tablet masaüstü genişliğinde ama aynı 2B yolu çalıştırır. */
@media (max-width: 899px), (pointer: coarse) { .hero-stage { --hs-beat: 11s; } }

.hs-col {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: var(--hs-w);
}

/* arka plan: yumuşak ışık yıkaması + hairline halkalar (sahne merkezine oturur) */
.hs-wash {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(940px, 118vw); aspect-ratio: 1;
  border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--surface-2) 0%, transparent 70%);
  opacity: .8;
}
:root[data-theme="dark"] .hs-wash { opacity: .28; }
.hs-rings {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  display: grid; place-items: center; z-index: 0; pointer-events: none;
}
.hs-rings span { position: absolute; border-radius: 50%; border: 1px solid var(--hair-soft); }
.hs-rings span:nth-child(1) { width: min(500px, 76vw);  aspect-ratio: 1; }
.hs-rings span:nth-child(2) { width: min(820px, 118vw); aspect-ratio: 1; }

/* güven şeridi (hero altı) — tek cümle; yalnız tablet/desktop'ta görünür.
   Sahte logo kutucukları kaldırıldı: doğrulanmamış marka isimleri göstermek
   yerine cümlenin kendisi konuşuyor (bkz. UI gerçeklik denetimi). */
.trust { display: none; padding-block: clamp(28px, 6vw, 44px); }
.trust p { text-align: center; font-size: 13px; color: var(--text-3); margin: 0; }
@media (min-width: 760px) { .trust { display: block; } }

/* ============================ GENEL BÖLÜM BAŞLIĞI ============================ */
.sec-head { max-width: 30ch; margin-bottom: clamp(36px, 7vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; }
/* Kicker→başlık mesafesi, showcase kopya sütunlarındakiyle AYNI olmalı.
   Orada kicker satır-içi bir <span>, başlık ise margin-top:14px alıyor.
   Burada kicker inline-BLOCK'tu: kendi satır kutusunun payı + 14px margin
   üst üste binince mesafe iki katına çıkıyordu (ölçüm: 35px'e karşı 17px).
   Aynı yapıyı kurmak tek çözüm — margin'i kickerdan alıp başlığa verdik.
   Ölçüm (1280px, reveal'lar açık): #why 17.0px · #showcase 17.5px. */
.sec-head .kicker { display: inline; }
.sec-head .kicker + .h2 { margin-top: 14px; }
.sec-head .lead { margin-top: 18px; }

/* ============================ NELER VAR (yetenek kartı) ============================
   Tek kart, içinde ürünün tamamı. Liste mobilde tek, ≥760px'te iki sütun akar;
   maddeler arası ince ayraç "envanter" hissi verir (uzunluk = argüman). */
.power-card {
  border-radius: var(--r-card); padding: clamp(24px, 4vw, 40px);
  background: var(--bg-elev); box-shadow: var(--sh-sm);
}
.power-head { margin-bottom: clamp(22px, 3vw, 30px); }
.power-head h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.power-head .big { font-size: clamp(22px,4vw,28px); font-weight: 700; letter-spacing: -0.02em; margin: 0; max-width: 22ch; }
.power-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
@media (min-width: 760px) { .power-list { grid-template-columns: 1fr 1fr; gap: 26px 34px; } }
.power-list li { display: flex; gap: 14px; align-items: flex-start; }
.power-list .ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.power-list .ic svg { width: 20px; height: 20px; }
.power-list h4 { margin: 0 0 3px; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.power-list p { margin: 0; font-size: 15px; color: var(--text-2); line-height: 1.45; }
/* Kart altı: güven cümlesi + /ozellikler kapısı. Ayraç kartın TAMAMINI
   kesmeli → max-width sarmalayıcıya değil içerideki metne uygulanır; buton
   ≥760px'te sağa geçer (metnin eskiden padding ile boş bıraktığı alan). */
.power-foot {
  margin: clamp(24px, 3.5vw, 34px) 0 0; padding-top: clamp(18px, 2.5vw, 24px);
  border-top: 1px solid var(--hair-soft);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(16px, 2.2vw, 22px);
}
.power-foot p { margin: 0; font-size: 14.5px; color: var(--text-3); line-height: 1.5; }
.power-foot .btn { flex: none; }
@media (min-width: 760px) {
  .power-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 34px; }
  .power-foot p { max-width: 58ch; }
}
/* Henüz yayında olmayan özellik rozeti (Instagram otomasyonu). Metnin akışı
   içinde kalsın diye inline: satır sonuna yapışır, ayrı sütun açmaz. */
.soon-tag {
  display: inline-block; vertical-align: 1px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-3);
}

/* ============================ SHOWCASE (portal + panel) ============================ */
.showcase { display: grid; gap: clamp(32px, 6vw, 56px); align-items: center; }
@media (min-width: 880px) { .showcase { grid-template-columns: 1fr 1fr; } .showcase.flip .showcase-media { order: 2; } }
.showcase-media { display: flex; justify-content: center; position: relative; }
.showcase-media .phone { --phone-w: clamp(256px, 60vw, 312px); }
.showcase-copy .feature-mini { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 18px; }
.feature-mini li { display: flex; gap: 14px; align-items: flex-start; }
.feature-mini .ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.feature-mini .ic svg { width: 20px; height: 20px; }
.feature-mini h4 { margin: 0 0 2px; font-size: 16.5px; font-weight: 600; }
.feature-mini p { margin: 0; font-size: 15px; color: var(--text-2); line-height: 1.4; }

/* ============================ ÖZELLİKLER (bento) ============================ */
/* Kart yüksekliği TEK ölçü: `grid-auto-rows: 1fr` bütün satırları eşitler,
   böylece kartlar metin uzunluğuna göre birbirinden ayrı boylara düşmez
   (eskiden `align-items: start` her kartı kendi içeriği kadar yapıyordu →
   testere ağzı bir ızgara). Tek kolonlu mobilde AÇIK DEĞİL: orada eşitleme
   kısa kartların altında kocaman boşluk bırakırdı. Kartların metni de bu
   yüzden 145-200 karakter bandında tutulur (js/i18n/tr.js landing.features);
   bir kart bandı aşarsa TÜM ızgara uzar. */
.bento { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } }
@media (min-width: 980px) { .bento { grid-template-columns: repeat(3,1fr); } }
/* Geçiş listesi hem GİRİŞİ hem HOVER'ı taşır. Eskiden burada yalnız
   `transform, box-shadow` yazıyordu; sections.css base.css'ten SONRA
   yüklendiği için bu kısayol `.reveal`'ın opacity geçişini ve
   `[data-stagger] > *`'ın gecikmesini birlikte siliyordu → kartlar
   yumuşacık belirmek yerine opaklıkta küt açılıyor, sıralı akış (--d) hiç
   çalışmıyordu. Şimdi: giriş YALNIZ opacity üstünde (transform hover'ın işi,
   metinde AA-snap bırakmasın), gecikme de yalnız opacity'ye verilir; hover
   kalkışı gecikmesiz kalsın. Ölçerek doğrula (getComputedStyle/getAnimations),
   "CSS'te yazıyor" kanıt değil. */
.bcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg-elev); border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 28px); box-shadow: var(--sh-sm);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  transition-delay: var(--d, 0ms), 0s, 0s;
}
.js .bcard.reveal { transform: none; }
.js .bcard.reveal:hover, .bcard:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.bcard .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }
.bcard .ic svg { width: 23px; height: 23px; }
/* "Yakında" rozeti kartın SAĞ ÜST köşesine MUTLAK konur: akışta kalsaydı
   ikon ile başlık arasına bir satır açar, `grid-auto-rows: 1fr` yüzünden
   ızgaradaki 26 kartın hepsini birden uzatırdı. Konumu kartın kendi
   dolgusuyla aynı ölçüden gelir, yoksa köşede kayık durur. */
.bcard .soon-tag { position: absolute; top: clamp(22px, 3vw, 28px); right: clamp(22px, 3vw, 28px); }
.bcard h4 { margin: 0 0 7px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.bcard p { margin: 0; font-size: 15px; color: var(--text-2); line-height: 1.45; }
.bcard.wide { grid-column: 1 / -1; }
@media (min-width: 980px) { .bcard.span2 { grid-column: span 2; } }
/* ── TAM AI · geniş bento kartı (/ozellikler) ─────────────────────────
   Sınıf öneki `aif-`: kısa/jenerik adlar (.ai, .chat, .card) paylaşılan
   landing stilinde başka öğeleri yakalar. Kart tek sütunda dikey, geniş
   ekranda 1.05fr / 1fr iki sütun. Sağdaki sohbet DEKORATİFTİR
   (aria-hidden) ama metni i18n'e bağlı: EN sayfada Türkçe kalmaz. */
.bcard.aif { display: grid; gap: clamp(20px, 3vw, 34px); align-items: center; }
@media (min-width: 900px) { .bcard.aif { grid-template-columns: 1.05fr 1fr; } }
.aif-l { min-width: 0; }
.bcard.aif h4 { font-size: clamp(20px, 2.4vw, 25px); }
.bcard.aif > .aif-l > p { font-size: clamp(15px, 1.5vw, 16.5px); }
.aif-pts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.aif-pts li { display: flex; gap: 11px; align-items: flex-start; }
.aif-pts .d {
  flex: none; width: 21px; height: 21px; border-radius: 50%; margin-top: 2px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.aif-pts .d svg { width: 12px; height: 12px; }
.aif-pts b { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -0.008em; color: var(--text); }
.aif-pts i { display: block; font-style: normal; font-size: 13.5px; color: var(--text-2); line-height: 1.42; margin-top: 2px; }
.aif-cta { margin-top: 20px; }

/* Sağ sütun: tek tur sohbet + onay kartı. Telefon çerçevesi YOK — bu bir
   ürün turu değil, kartın içinde duran bir alıntı. */
.aif-r { min-width: 0; }
.aif-chat {
  display: grid; gap: 10px;
  background: var(--surface-2);
  border-radius: 20px; padding: clamp(14px, 2vw, 20px);
}
.aif-me {
  justify-self: end; max-width: 88%;
  background: var(--accent); color: #fff;
  border-radius: 16px 16px 5px 16px;
  padding: 10px 13px; font-size: 14px; font-weight: 550; line-height: 1.35;
}
.aif-ai { display: flex; gap: 9px; align-items: flex-start; max-width: 95%; }
.aif-ai .av {
  flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 3px;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
}
.aif-ai .av svg { width: 14px; height: 14px; }
.aif-ai .tx {
  background: var(--bg-elev); color: var(--text);
  border-radius: 16px 16px 16px 5px;
  padding: 10px 13px; font-size: 14px; font-weight: 500; line-height: 1.4;
}
.aif-card {
  margin-left: 33px;
  background: var(--bg-elev); border-radius: 16px; padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.aif-card .hd { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-bottom: 9px; }
.aif-card .r { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; color: var(--text-2); font-weight: 500; }
.aif-card .r span:first-child { color: var(--text); font-weight: 600; }
.aif-card .ax { display: flex; gap: 8px; margin-top: 11px; }
.aif-card .ax span { flex: 1; text-align: center; border-radius: 11px; padding: 8px 0; font-size: 13px; font-weight: 650; }
.aif-card .ax .no { background: var(--surface-2); color: var(--text-2); }
.aif-card .ax .ok { background: var(--accent); color: #fff; }

/* QR mini demo */
.qr-demo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.qr {
  width: 92px; height: 92px; border-radius: 14px; background: var(--bg); padding: 9px;
  box-shadow: inset 0 0 0 1px var(--hair); display: grid;
  grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(7,1fr); gap: 2px;
}
.qr i { background: var(--text); border-radius: 1.5px; }
.qr i.off { background: transparent; }

/* PWA mini demo */
.pwa-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.chip-soft { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); }

/* availability bars */
.avail { display: flex; gap: 5px; margin-top: 18px; align-items: flex-end; height: 46px; }
.avail i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--accent-soft); }
.avail i.full { background: var(--accent); }
.avail i.block { background: repeating-linear-gradient(45deg, var(--surface-3) 0 4px, var(--surface-2) 4px 8px); }

/* ============================ NASIL ÇALIŞIR ============================ */
.steps { display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4,1fr); } }
.step { position: relative; padding: 26px 22px; border-radius: var(--r-card); background: var(--bg-elev); box-shadow: var(--sh-sm); }
.step .num { font-size: 14px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.step h4 { margin: 14px 0 6px; font-size: 18px; font-weight: 700; }
.step p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.45; }
.step .line { position: absolute; top: 38px; right: -8px; width: 16px; height: 2px; background: var(--hair); display: none; }
@media (min-width: 760px) { .step:not(:last-child) .line { display: block; } }

/* ============================ KİMLER İÇİN ============================ */
.sectors { display: flex; flex-wrap: wrap; gap: 8px; }
.sector-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 14px; font-weight: 500;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, color .3s;
}
.sector-chip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--accent), var(--sh-sm); }
.sector-chip .dot { width: 7px; height: 7px; border-radius: 50%; }

/* ============================ SOSYAL KANIT ============================ */
.quotes { display: grid; gap: 16px; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3,1fr); } }
.quote { background: var(--bg-elev); border-radius: var(--r-card); padding: clamp(24px,3vw,30px); box-shadow: var(--sh-sm); display: flex; flex-direction: column; }
.quote .stars { color: var(--amber); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.quote blockquote { margin: 0 0 20px; font-size: 17px; line-height: 1.5; font-weight: 500; flex: 1; text-wrap: pretty; }
.quote .who { display: flex; align-items: center; gap: 11px; }
.quote .av { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); flex: none; box-shadow: inset 0 0 0 1px var(--hair); }
.quote .who b { display: block; font-size: 14.5px; font-weight: 600; }
.quote .who small { font-size: 13px; color: var(--text-2); }
.placeholder-tag { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-3); margin-top: 16px; }

/* ============================ FİYATLANDIRMA ============================ */
.trial-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: var(--accent-soft); color: var(--accent);
  padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px;
  width: fit-content; margin: 0 auto 28px;
}
.bill-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); margin: 0 auto 40px; }
.bill-toggle button { border: none; background: transparent; padding: 9px 20px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 600; color: var(--text-2); transition: color .25s; position: relative; }
.bill-toggle button.on { color: var(--text); background: var(--bg-elev); box-shadow: var(--sh-sm); }
.bill-toggle .save { font-size: 11px; color: var(--green); font-weight: 700; margin-left: 6px; }

.plans { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(3,1fr); } }
.plan { display: flex; flex-direction: column; background: var(--bg-elev); border-radius: var(--r-card); padding: clamp(24px,3vw,32px); box-shadow: var(--sh-sm); position: relative; }
.plan.featured { box-shadow: inset 0 0 0 2px var(--accent), var(--sh-md); }
.plan .pop { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: var(--r-pill); white-space: nowrap; }
.plan .pname { font-size: 19px; font-weight: 700; }
.plan .pdesc { font-size: 14px; color: var(--text-2); margin: 4px 0 20px; min-height: 38px; }
.plan .price { display: flex; align-items: baseline; gap: 4px; }
.plan .price .amt { font-size: clamp(40px,7vw,48px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan .price .per { font-size: 14px; color: var(--text-2); }
.plan .price-note { font-size: 12.5px; color: var(--text-3); margin-top: 6px; min-height: 18px; }
.plan .btn { margin-top: 22px; width: 100%; }
.plan ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.plan li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text); line-height: 1.35; }
.plan li.muted { color: var(--text-3); }
.plan li .ck { width: 19px; height: 19px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-top: 1px; }
.plan li.muted .ck { background: var(--surface-2); color: var(--text-3); }
.plan li .ck svg { width: 11px; height: 11px; }
.price-foot { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 26px; }
/* Ödeme güvencesi — fiyatın hemen altı, "nasıl öderim / güvenli mi"
   sorusunun sorulduğu yer. Footer'daki şeritle AYNI görsel, farklı iş:
   orası mevzuat işareti, burası satın alma anındaki cevap. Şerit burada
   ORTALI (footer'da sola dayalı) — object-position bu yüzden ezilir. */
.pay-assure { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 18px; }
.pay-assure .pay-band { height: 19px; object-position: center; }
.pay-assure p { margin: 0; max-width: 46ch; text-align: center; font-size: 12px; line-height: 1.5; color: var(--text-3); }

/* ============================ SSS ============================ */
.faq { max-width: 760px; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--hair); }
.qa button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; padding: 22px 4px; text-align: left; font-size: clamp(16px,3.6vw,19px); font-weight: 600; color: var(--text); letter-spacing: var(--ls); }
.qa .pm { width: 24px; height: 24px; flex: none; position: relative; }
.qa .pm::before, .qa .pm::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--text-2); transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.qa .pm::before { width: 15px; height: 2px; }
.qa .pm::after { width: 2px; height: 15px; }
.qa[aria-expanded="true"] .pm::after { transform: rotate(90deg); opacity: 0; }
.qa .ans { overflow: hidden; height: 0; transition: height .4s cubic-bezier(.2,.7,.2,1); }
.qa .ans-inner { padding: 0 4px 24px; font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 64ch; }

/* ============================ KAPANIŞ CTA ============================ */
.closing { text-align: center; }
.closing-card {
  position: relative; overflow: hidden;
  background: var(--text); color: var(--bg);
  border-radius: var(--r-sheet); padding: clamp(44px, 8vw, 90px) var(--pad);
}
:root[data-theme="dark"] .closing-card { background: var(--bg-elev); color: var(--text); box-shadow: inset 0 0 0 1px var(--hair); }
.closing-card .h2 { color: inherit; max-width: 18ch; margin: 0 auto; }
.closing-card .lead { color: inherit; opacity: .7; margin: 20px auto 0; max-width: 40ch; }
.closing-card .hero-cta { margin-top: 32px; }
.closing-card .btn-primary { background: var(--accent); color: #fff; }
.closing-card .btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.closing-rings span { position: absolute; border-radius: 50%; border: 1px solid currentColor; opacity: .12; pointer-events: none; }

/* ============================ FOOTER ============================ */
.footer { padding-block: clamp(44px, 7vw, 72px) 40px; border-top: 1px solid var(--hair); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer .brand { margin-bottom: 14px; }
.footer p.tag { font-size: 14px; color: var(--text-2); max-width: 28ch; line-height: 1.5; }
.footer h5 { font-size: 13px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { font-size: 15px; color: var(--text-2); transition: color .2s; }
.footer a:hover { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hair-soft); font-size: 13px; color: var(--text-3); }

/* ─── iyzico ödeme yöntemleri şeridi ────────────────────────────────────
   Sanal POS başvurusunun ŞART koştuğu işaret: kabul edilen ödeme
   yöntemleri sitenin footer'ında görünür olmak zorunda. Kurallar ve
   varyant haritası: docs/IYZICO-MARKA-KULLANIMI.md.

   ORAN BOZULMASI = başvuru reddi. Koruma iki katmanlı: yükseklik sabit +
   genişlik auto; dar ekranda max-width devreye girdiğinde object-fit
   kutuyu doldurmak yerine görseli küçültür. İki varyantın doğal genişliği
   FARKLI (renkli 429×32, beyaz 456×32) — bu yüzden ortak bir width
   verilemez, verilirse biri esner. Nöbetçi: tests/iyzico-brand.test.mjs */
/* TON: bu bir güven işareti, bir duyuru değil. Sayfanın en sessiz
   satırında, telif satırının hemen üstünde durur; boyutu ve etiketi
   footer link metninin ALTINDA kalır ki göz onu aramadan bulsun ama
   ona takılmasın. 32px'ten 20px'e indirildi (2026-08-25). */
.footer-pay { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 34px; }
.footer-pay .fp-label { font-size: 11px; font-weight: 500; letter-spacing: .03em; color: var(--text-3); }
/* max-width + object-fit:contain İKİSİ BİRDEN gerekli. Yalnız max-width
   olsaydı kutu daralır, görsel kutuyu doldurmak için EZİLİRDİ; yalnız
   contain olsaydı kutu doğal genişlikte kalır ve taşardı. Sabit
   genişlikli iframe'de ölçüldü (320/360/414/768/1280): oran her
   genişlikte 13.4:1, yatay taşma hiçbirinde yok. */
.pay-band { display: block; height: 20px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
/* Tema takası CSS'te, JS'te değil: bu blok footer chrome senkronuyla 24
   sayfaya kopyalanıyor ve hiçbirine ek script eklenmiyor. İki <img> de
   markup'ta durur, pasif olan display:none.
   Bedeli ÖLÇÜLDÜ: display:none olan varyant yine de indiriliyor (lazy
   olması değiştirmiyor), yani ~13KB gzip boşa gidiyor. Kabul edildi —
   katlamanın çok altında, /icons/* bir saat cache'li, ve alternatifi
   (background-image) <img> semantiğini ve baskıyı kaybettiriyor. */
.pay-band-dark { display: none; }
:root[data-theme="dark"] .pay-band-light { display: none; }
:root[data-theme="dark"] .pay-band-dark  { display: block; }
/* Şerit kendi ayırıcısını çizmez; altındaki .footer-bottom'ın hairline'ı
   zaten oradadır. Çizseydi 22px arayla iki çizgi olurdu. */
.footer-pay + .footer-bottom { margin-top: 22px; }

/* ─── "Kendi sitenize gömün" geniş bento kartı (#features) ─── */
.embed-bcard { display: grid; gap: clamp(20px, 3vw, 34px); align-items: center; }
@media (min-width: 760px) { .embed-bcard { grid-template-columns: 1.05fr 1fr; } }
.embed-bcard .eb-copy { min-width: 0; }
.eb-code {
  background: var(--surface-2); border-radius: var(--r-tile);
  padding: clamp(16px, 2.4vw, 22px);
  font-size: 13px; line-height: 1.8; color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
  overflow-x: auto;
}
.eb-code .eb-row { display: block; white-space: nowrap; }
.eb-code .eb-tag { color: var(--text-3); }
.eb-code .eb-at  { color: var(--accent); }
.eb-code .eb-str { color: var(--text); }

/* =========================================================================
   ÇOK SAYFA KATMANI  ·  docs/SITE-MIMARISI-PLANI.md
   -------------------------------------------------------------------------
   Landing artık dört sayfa: / · /ozellikler · /fiyatlar · /giris.
   Buradaki her bileşen MEVCUT token'lardan kurulur (yeni renk / gölge /
   radius üretilmedi, DESIGN.md §0). Hepsi mobile-first: temel hâl dar
   ekran, genişleme min-width ile.
   ========================================================================= */

/* ── Nav "Giriş yap" ──────────────────────────────────────────────────────
   Geri dönen kullanıcının kapısı. <900px'te üst bardan çıkar (yer yok);
   orada sheet içindeki "Giriş yap" satırında yaşar. Tema dairesi ve dil
   seçici de aynı eşikte gizleniyor, desen tutarlı. */
.nav-login { display: none; }
@media (min-width: 900px) { .nav-login { display: inline-flex; } }

/* Aktif sayfa vurgusu — app.js location.pathname'e bakıp koyar.
   Markup'ta durmaz; nav bloğu dört sayfada birebir aynı kalmak zorunda. */
.nav-links a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

/* ── Alt sayfa başlığı (/ozellikler, /fiyatlar) ───────────────────────────
   Ana sayfanın hero'su değildir: sahne yok, tek CTA yok. Görevi sayfanın
   ne olduğunu bir bakışta söylemek ve nav'ın altından nefes aldırmak. */
.page-hero {
  padding-top: clamp(104px, 20vw, 150px);
  padding-bottom: clamp(28px, 5vw, 48px);
  text-align: center;
}
.page-hero .kicker { display: inline-block; margin-bottom: 14px; }
.page-hero .h2 { margin: 0 auto; max-width: 18ch; }
.page-hero .lead { margin: 20px auto 0; max-width: 46ch; }
/* Sayfa başlığı zaten nefes verdi; ilk bölüm üstten TEKRAR boşluk açmasın.
   İkisi toplanınca ~90px'lik boş bant oluşuyordu (ölçüldü). Aradaki mesafeyi
   tek yer belirlesin: .page-hero'nun padding-bottom'ı.
   (Başlık tekrarı markup'ta çözüldü: ilk bölümün .sec-head'i silindi.) */
.page-hero + .section-pad { padding-top: 0; }

/* ── Yatay kapı şeridi (ana sayfa: müşteri kapısı + fiyat özeti) ──────────
   Bölüm değil "kavşak": okuyucuyu sayfanın dışına, doğru yere gönderir.
   Bu yüzden .section-pad değil daha dar bir ritmi var. */
/* Boşluğu TEK yer belirler: şeridin kendi padding'i. Şerit iki .section-pad
   bölümün arasında duruyor ve eskiden ikisinin de boşluğu şeridinkiyle
   TOPLANIYORDU: 140px (üst bölümün alt nefesi) + 90px (şerit) = 230px boş
   bant, kartın kendisi ise ~140px. Kart, çevresindeki boşluğun yarısı kadar
   kalınca ortada kaybolmuş görünüyordu. Şimdi bitişik kenarlar sıfırlanıyor;
   şerit "kavşak" olduğu için bölüm ritminden (140px) bilerek daha dar bir
   nefes alıyor.
   :has desteklenmeyen tarayıcıda kural düşer, sayfa yalnızca eski haliyle
   (daha ferah) görünür — bozulma olmaz. */
.cust-gate, .price-teaser { padding-block: clamp(56px, 8vw, 88px); }
@supports selector(:has(*)) {
  .section-pad:has(+ .cust-gate), .section-pad:has(+ .price-teaser) { padding-bottom: 0; }
  .cust-gate + .section-pad, .price-teaser + .section-pad { padding-top: 0; }
  .cust-gate:has(+ .price-teaser) { padding-bottom: 0; }
}
/* Ana sayfada müşteri kapısı şu an kapalı; geri gelirse arka arkaya iki şerit
   arasında tam nefes değil yalnız ayırıcı boşluk kalsın. */
.cust-gate + .price-teaser { padding-top: clamp(14px, 2.5vw, 22px); }

/* Kart beyaz zemin üstünde beyaz: yalnız --sh-sm ile kenarı belli olmuyordu.
   Sayfadaki kanonik kart hattı (--hair inset) + bir kademe yukarı gölge
   (--sh-md) ile çerçeve netleşiyor. İkisi de mevcut token; yeni renk yok. */
.gate-strip {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(16px, 2.4vw, 22px);
  background: var(--bg-elev); border-radius: var(--r-card);
  padding: clamp(24px, 3.4vw, 34px);
  box-shadow: inset 0 0 0 1px var(--hair), var(--sh-md);
}
.gate-strip .ic {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.gate-strip .ic svg { width: 23px; height: 23px; }
.gate-strip-body { min-width: 0; }
.gate-strip-body .h3 { margin: 0 0 8px; }
.gate-strip-body p { margin: 0; font-size: 15.5px; color: var(--text-2); line-height: 1.5; max-width: 58ch; }
/* Buton kartla AYNI zeminde (--bg-elev) duruyor; 1px hat burada eriyor.
   Kart içinde bir kademe kalın hat + hafif zemin farkıyla ayrılıyor. */
.gate-strip .btn { flex: none; }
.gate-strip .btn-ghost {
  background: var(--bg-elev);
  box-shadow: inset 0 0 0 1.5px var(--hair), var(--sh-sm);
}
.gate-strip .btn-ghost:hover {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--accent), var(--sh-sm);
  color: var(--accent);
}
/* İki kapı, tek hiyerarşi: düğme birincil eylem, altındaki sessiz bağlantı
   ikincil. İkisini de düğme yapmak "hangisi asıl" sorusunu doğururdu.
   Bağlantının dili SSS altındakiyle aynı (.faq-foot a) — yeni bir link
   biçimi icat edilmedi. */
.gate-strip-cta {
  flex: none; display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px;
}
.gate-strip-more {
  font-size: 14.5px; font-weight: 600; color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.gate-strip-more:hover { border-bottom-color: var(--accent); }
@media (min-width: 760px) {
  .gate-strip { flex-direction: row; align-items: center; gap: clamp(20px, 2.6vw, 28px); }
  .gate-strip-body { flex: 1; }
  .gate-strip-cta { align-items: center; }
  /* İkon üç satırlık metnin ortasında değil BAŞLIK satırında dursun; ortalanınca
     metinden kopuk duruyor. 3px optik hizalama (44px kutu ↔ h3 satır yüksekliği). */
  .gate-strip .ic { align-self: flex-start; margin-top: 3px; }
}

/* ── /giris — giriş kapısı ────────────────────────────────────────────────
   Sayfanın tek işi var: kullanıcıyı doğru uygulamaya göndermek. İki kapı
   BİLİNÇLİDİR: işletme e-posta + şifre, müşteri telefon + SMS kodu ile
   girer; tek forma birleştirilemez (docs/SITE-MIMARISI-ARASTIRMA.md §4).
   Kartlar eşit ağırlıkta durur; birini öne çıkarmak yanlış kapıyı
   tıklatır. */
.gate-page { padding-top: clamp(104px, 20vw, 150px); padding-bottom: clamp(56px, 10vw, 96px); }
.gate-head { text-align: center; margin-bottom: clamp(32px, 5vw, 52px); }
.gate-head .kicker { display: inline-block; margin-bottom: 14px; }
.gate-head .h2 { margin: 0 auto; max-width: 16ch; }
.gate-head .lead { margin: 18px auto 0; max-width: 42ch; }

.gate-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .gate-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }

.gate-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--bg-elev); border-radius: var(--r-card);
  padding: clamp(26px, 3.4vw, 36px);
  box-shadow: var(--sh-sm); color: inherit;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.gate-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.gate-card:active { transform: scale(.99); }
.gate-card .ic {
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--accent-soft); color: var(--accent);
}
.gate-card .ic svg { width: 25px; height: 25px; }
.gate-card .h3 { margin: 0 0 8px; }
.gate-card p { margin: 0; font-size: 15.5px; color: var(--text-2); line-height: 1.5; }
/* Kimlik türü satırı: "hangi bilgiyle gireceğim" sorusunu tıklamadan
   cevaplar. Yanlış kapıya girip geri dönmeyi burası engelliyor. */
.gate-meta {
  margin-top: 16px; font-size: 13px; font-weight: 600;
  color: var(--text-3); letter-spacing: .01em;
}
.gate-go {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 600; color: var(--accent);
}
.gate-go svg { width: 19px; height: 19px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.gate-card:hover .gate-go svg { transform: translateX(4px); }

.gate-help {
  margin-top: clamp(28px, 4.5vw, 44px); text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
.gate-help p { margin: 0; font-size: 14.5px; color: var(--text-3); line-height: 1.55; max-width: 56ch; margin-inline: auto; }
.gate-help a { color: var(--accent); font-weight: 600; }

/* /giris kısa bir sayfa: footer'ın ekranın ortasına tırmanmaması için
   gövde en az görüntü yüksekliği kadar. */
body.page-gate { display: flex; flex-direction: column; min-height: 100vh; }
body.page-gate .gate-page { flex: 1; }
/* Nav'daki "Giriş yap" bu sayfada kendini gösterir → gizle. Markup dört
   sayfada aynı kalmak zorunda (chrome senkronu), ayrım CSS'te yapılır. */
body.page-gate .nav-login { display: none; }

/* ── Footer: "Müşteriler için" sütunu eklendi (4 → 5 link sütunu) ──────── */
@media (min-width: 680px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr .95fr .95fr .95fr .95fr 1.15fr; gap: 24px; } }

/* ═══════════════════════════════════════════════════════════════════════
   /basvuru — "Sizi arayalım"
   Kontrat: docs/BASVURU-FORMU.md

   Landing'in İLK gerçek form yüzeyi. Bu yüzden burada bir form bileşen
   ailesi (.f-*) tanımlanıyor; ileride başka bir sayfaya form gelirse
   yeni bir dil değil BU aile kullanılır.

   Üç karar:
   1) Alanlar DOLGULU (--surface-2), çerçeveli değil. iOS sistem
      formlarının dili bu; kart zemini (--bg-elev) üstünde dolgu, ince
      çizgiden daha net bir "buraya yazılır" sinyali verir ve koyu temada
      hairline'ın kaybolma sorunu yaşanmaz.
   2) Tek dokunuşluk sorular çip (radio) olarak sorulur, açılır liste
      olarak DEĞİL. Açılır liste mobilde tam ekran bir katman açar; sekiz
      sektörü görmek için üç dokunuş gerekir. Çipler tek ekranda durur.
   3) Gönder butonu bilinçli olarak .btn ailesinden DEĞİL (.frm-send):
      landing'de her .btn bir <a> olmak zorunda (ölü-buton nöbetçisi,
      tests/landing-cta.test.mjs) ve bu gerçek bir <button type="submit">.
   ═══════════════════════════════════════════════════════════════════════ */

.call-page { padding-top: clamp(104px, 20vw, 150px); padding-bottom: clamp(56px, 10vw, 96px); }
.call-head { text-align: center; margin-bottom: clamp(30px, 5vw, 48px); }
.call-head .kicker { display: inline-block; margin-bottom: 14px; }
.call-head .h2 { margin: 0 auto; max-width: 14ch; }
.call-head .lead { margin: 18px auto 0; max-width: 50ch; }

/* Kısa sayfa: footer ekranın ortasına tırmanmasın (page-gate ile aynı). */
body.page-call { display: flex; flex-direction: column; min-height: 100vh; }
body.page-call .call-page { flex: 1; }

.call-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) {
  .call-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }
  /* Yan sütun formla birlikte kaymaz: uzun formda "ne olacak" cevabı
     ekranda kalmalı. */
  .call-aside { position: sticky; top: 88px; }
}

/* ── Form kabuğu ───────────────────────────────────────────────────── */
.call-form-wrap {
  background: var(--bg-elev);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  padding: clamp(22px, 3.4vw, 34px);
}
.call-noscript {
  margin: 0 0 18px; padding: 14px 16px;
  border-radius: var(--r-tile); background: var(--surface-2);
  font-size: 14.5px; color: var(--text-2); line-height: 1.55;
}

/* Tuzak alanı: display:none KULLANILMAZ (bazı botlar onu atlar).
   Ekran dışına alınır; klavye ve ekran okuyucudan markup'ta gizlenir. */
.call-trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
  pointer-events: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Alan grupları ─────────────────────────────────────────────────── */
.f-set { border: 0; margin: 0; padding: 0; }
.f-set + .f-set { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--hair-soft); }
.f-legend {
  padding: 0; margin: 0 0 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}

.f-field { margin-bottom: 18px; }
.f-field:last-child { margin-bottom: 0; }
.f-group { border: 0; padding: 0; }

.f-lbl {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 0;
  font-size: 14.5px; font-weight: 600; color: var(--text);
}
.f-opt { font-size: 12.5px; font-weight: 500; color: var(--text-3); }

.f-in {
  display: block; width: 100%;
  min-height: 52px; padding: 14px 16px;
  font-family: inherit; font-size: 16px; font-weight: 500;
  letter-spacing: var(--ls); line-height: 1.4;
  color: var(--text); background: var(--surface-2);
  border: 0; border-radius: var(--r-tile);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .22s cubic-bezier(.2,.7,.2,1), background-color .22s ease;
  -webkit-appearance: none; appearance: none;
}
.f-in::placeholder { color: var(--text-3); font-weight: 450; }
.f-in:hover { background: var(--surface-3); }
.f-in:focus { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--accent); }
.f-in.bad { box-shadow: inset 0 0 0 1.5px var(--red); }
.f-area { min-height: 116px; resize: vertical; line-height: 1.5; }

.f-hint { margin: 7px 0 0; font-size: 13px; color: var(--text-3); line-height: 1.5; }
.f-err  { margin: 7px 0 0; font-size: 13px; color: var(--red); font-weight: 550; line-height: 1.5; }
.f-count { margin: 6px 0 0; font-size: 12px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Çipler (tek dokunuşluk sorular) ───────────────────────────────── */
.f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-chip { position: relative; display: inline-flex; }
.f-chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.f-chip span {
  /* 44px: dokunma hedefi tavsiyesinin altına inilmez (iOS HIG). */
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2);
  font-size: 14.5px; font-weight: 600; letter-spacing: var(--ls);
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.7,.2,1);
}
.f-chip:hover span { background: var(--surface-3); color: var(--text); }
.f-chip input:checked + span {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.f-chip input:active + span { transform: scale(.97); }
.f-chip input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 3px; }

/* ── Onay kutusu ───────────────────────────────────────────────────── */
.f-consent { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair-soft); }
.f-check {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; color: var(--text); line-height: 1.5; cursor: pointer;
}
.f-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.f-box {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 7px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--hair);
  transition: background-color .2s ease, box-shadow .2s ease;
  position: relative;
}
.f-box::after {
  content: ''; position: absolute; inset: 0;
  background: no-repeat center/12px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.4L4.3 8.7 11 1.6'/%3E%3C/svg%3E");
  opacity: 0; transform: scale(.7);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.7,.2,1);
}
.f-check input:checked ~ .f-box { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.f-check input:checked ~ .f-box::after { opacity: 1; transform: none; }
.f-check input:focus-visible ~ .f-box { outline: 2.5px solid var(--accent); outline-offset: 3px; }

.f-note { margin: 14px 0 0; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.f-note a { color: var(--accent); font-weight: 600; }

.f-turnstile:not(:empty) { margin-top: 20px; }

/* ── Gönder ────────────────────────────────────────────────────────── */
.f-submit { margin-top: 24px; }
.frm-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 54px; padding: 15px 26px;
  font-size: 16.5px; font-weight: 650; letter-spacing: var(--ls);
  color: var(--text-on-accent); background: var(--accent);
  border: 0; border-radius: var(--r-pill); box-shadow: var(--sh-sm);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, opacity .25s ease;
}
.frm-send svg { width: 19px; height: 19px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.frm-send:hover { box-shadow: 0 6px 18px rgba(10,132,255,.28); }
.frm-send:hover svg { transform: translateX(4px); }
.frm-send:active { transform: scale(.98); }
.frm-send[disabled] { opacity: .55; box-shadow: none; cursor: default; transform: none; }
.frm-send[disabled] svg { transform: none; }
@media (min-width: 560px) { .frm-send { width: auto; min-width: 240px; } }

/* Gönderim sırasında ok yerine dönen halka: butonun genişliği
   değişmesin diye ikon yuvası aynı boyutta kalır. */
.frm-send.is-busy svg { display: none; }
.frm-send.is-busy::after {
  content: ''; width: 17px; height: 17px; flex: none;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  border-top-color: var(--text-on-accent);
  animation: frmSpin .7s linear infinite;
}
@keyframes frmSpin { to { transform: rotate(360deg); } }

.f-alert {
  margin: 18px 0 0; padding: 14px 16px;
  border-radius: var(--r-tile); background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--red);
  color: var(--red); font-size: 14.5px; font-weight: 550; line-height: 1.5;
}

/* ── Başarı ekranı ─────────────────────────────────────────────────── */
.call-done { text-align: center; padding: clamp(8px, 2vw, 20px) 0; }
.call-done .ic {
  width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 20px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.call-done .ic svg { width: 30px; height: 30px; }
.call-done .h3 { margin: 0 0 12px; }
.call-done-body { margin: 0 auto; max-width: 44ch; font-size: 15.5px; color: var(--text-2); line-height: 1.55; }
.call-ref {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 20px 0; padding: 11px 18px;
  border-radius: var(--r-pill); background: var(--surface-2);
  font-size: 14px; color: var(--text-2);
}
.call-ref b { font-size: 15.5px; font-weight: 700; color: var(--text); letter-spacing: .04em; }
.call-done .btn { margin-top: 20px; }

/* ── Yan sütun ─────────────────────────────────────────────────────── */
.call-aside { display: flex; flex-direction: column; gap: 14px; }
.call-card {
  background: var(--bg-elev); border-radius: var(--r-card);
  box-shadow: var(--sh-sm); padding: clamp(20px, 2.6vw, 26px);
}
.call-card-soft { background: var(--surface-2); box-shadow: none; }
.call-card-t { margin: 0 0 16px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.call-card-b { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.call-card-soft .btn { margin: 16px 0 12px; }

.call-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.call-steps li { display: flex; gap: 12px; align-items: flex-start; }
.call-step-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.call-steps b { display: block; font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
.call-steps p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }

.call-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.call-contact li { display: flex; gap: 12px; align-items: center; }
.call-contact .ic {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.call-contact .ic svg { width: 19px; height: 19px; }
.call-contact-b { display: flex; flex-direction: column; min-width: 0; }
.call-contact-b b { font-size: 12.5px; font-weight: 600; color: var(--text-3); letter-spacing: .01em; }
.call-contact-b a { font-size: 15px; font-weight: 600; color: var(--accent); word-break: break-word; }
.call-contact-b span { font-size: 15px; font-weight: 600; color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .f-in, .f-chip span, .frm-send, .f-box, .f-box::after { transition: none !important; }
  .frm-send.is-busy::after { animation-duration: 1.6s; }
}

/* ══════════════════════════════════════════════════════════════════════
   KARŞILAŞTIRMA TABLOSU  ·  /fiyatlar  ·  #compare
   ─────────────────────────────────────────────────────────────────────
   MOBİL (varsayılan): tek plan seçici. Üstte yapışkan çubuk (segment +
   seçili planın fiyatı + CTA), altında iOS "Ayarlar" tarzı satır listesi —
   etiket solda, o planın değeri sağda. Yatay kaydırma YOK, küçültülmüş
   yazı YOK.
   MASAÜSTÜ (≥900px): AYNI işaretleme 4 sütunlu matrise açılır; başlık
   satırı nav'ın altına yapışır, "Orta" sütunu .plan.featured ile aynı
   dili konuşan yükseltilmiş yüzey olur.
   Markup ELLE YAZILMAZ: build.mjs data/plan-katalogu.json'dan üretir
   (scripts/compare-markup.mjs). Yeni renk/gölge/radius yok — hepsi token.
   ══════════════════════════════════════════════════════════════════════ */

.cmp { max-width: 940px; margin: 0 auto; }

/* ── Yapışkan plan çubuğu (yalnız mobil) ──────────────────────────────
   backdrop-filter KULLANILMAZ: blur'lu yüzey Chrome'da yüksek z-index'li
   scrim'in ÜSTÜNDE boyanıyor — nav sheet açıkken bu çubuk karartmanın
   üstünde kalırdı (.live-toast'ta yaşanan sınıfın aynısı). Opak yüzey
   sorunu kökten kapatır. */
.cmp-bar {
  position: sticky; top: calc(var(--nav-h) + 8px); z-index: 40;
  display: flex; flex-direction: column; gap: 9px;
  padding: 6px 6px 8px; margin-bottom: 8px;
  background: var(--bg-elev); border-radius: var(--r-card);
  box-shadow: var(--sh-md), inset 0 0 0 1px var(--hair-soft);
}
.cmp-seg {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface-2); border-radius: var(--r-pill); padding: 4px;
}
.cmp-seg-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / 3);
  background: var(--bg-elev); border-radius: var(--r-pill); box-shadow: var(--sh-sm);
  transform: translateX(calc(var(--i, 1) * 100%));
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) { .cmp-seg-pill { transition: none; } }
.cmp-seg button {
  position: relative; z-index: 1; border: 0; background: transparent;
  min-height: 40px; padding: 0 4px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 14.5px; font-weight: 600; color: var(--text-2);
  transition: color .25s;
}
.cmp-seg button[aria-pressed="true"] { color: var(--text); }
.cmp-seg .pop-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

.cmp-bar-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px 0 12px; }
.cmp-bar-price { min-width: 0; }
.cmp-bar-price .cbp-amt { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-bar-price .cbp-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-bar-price i { font-style: normal; }
.cmp-bar .btn { min-height: 38px; padding: 0 15px; font-size: 14px; flex: none; }

/* ── Tablo ───────────────────────────────────────────────────────────
   border-collapse: separate ŞART — collapse, yapışkan başlıkta kenarlığı
   ve köşe yuvarlamayı düşürür.
   Mobilde table-layout AUTO: fixed yerleşim, display:none olan sütunları
   da hesaba katıp etiket sütununu %25'e sıkıştırıyor ve etiketler dört
   satıra sarıyordu. */
.cmp-card { background: var(--bg-elev); border-radius: var(--r-card); box-shadow: var(--sh-sm); padding: 2px 16px 12px; }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; }
.cmp-table thead { display: none; }

.cmp-grp th {
  text-align: left; padding: 22px 0 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-2);
}
.cmp-grp td { padding: 0; border: 0; }
.cmp-row th {
  text-align: left; font-weight: 500; font-size: 15px; line-height: 1.3;
  color: var(--text); padding: 13px 12px 13px 0; border-top: 1px solid var(--hair-soft);
}
.cmp-row td { width: 62px; text-align: right; padding: 13px 0; border-top: 1px solid var(--hair-soft); }
.cmp-grp + .cmp-row th, .cmp-grp + .cmp-row td { border-top: 0; }

/* "Yakında" rozeti — yol haritasındaki özellik. Aksanı TAŞIMAZ (mavi = var
   demek); nötr yüzey + ikincil metin, satırı bağırtmadan durumu söyler. */
.cmp-soon {
  display: inline-block; vertical-align: 1px; margin-left: 7px;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap;
}

/* Değer işaretleri — var / yok / sayı.
   "Yok" için kırmızı ✗ KULLANILMAZ: hata durumu gibi okunuyor. Sönük tire,
   iOS dilinde "bu satır boş" demenin doğru yolu. */
.ck-y { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.ck-y svg { width: 11px; height: 11px; }
.ck-n { display: inline-block; width: 13px; height: 2px; border-radius: 2px; background: var(--text-3); vertical-align: middle; }
.ck-t { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Mobil: yalnız seçili planın hücreleri ────────────────────────────
   Kural [data-p] taşıyan HER öğeye işler: tablo hücreleri + yapışkan
   çubuktaki fiyat ve kısa etiket. Böylece çubuk metnini JS kopyalamaz.
   JS yoksa (html.js sınıfı yok) ÜÇ sütun da görünür → içerik hiçbir
   koşulda kaybolmaz. .js varken varsayılan "orta"; data-plan sonra
   JS'ten gelir, ilk boyamada sıçrama olmaz. */
@media (max-width: 899px) {
  .js .cmp:not([data-plan]) [data-p]:not([data-p="orta"]),
  .cmp[data-plan="baslangic"] [data-p]:not([data-p="baslangic"]),
  .cmp[data-plan="orta"]      [data-p]:not([data-p="orta"]),
  .cmp[data-plan="yuksek"]    [data-p]:not([data-p="yuksek"]) { display: none; }

  html:not(.js) .cmp-bar { display: none; }
  html:not(.js) .cmp-row td { width: 56px; text-align: center; }

  /* Plan değişiminde yalnız DEĞER hücreleri çapraz geçer. Transform değil
     opacity: metinde küt AA-snap oluyor (landing dersi). */
  .cmp.swap td > * { animation: cmpFade .26s ease both; }
}
@keyframes cmpFade { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .cmp.swap td > * { animation: none; } }

/* ── Masaüstü: 4 sütunlu matris ─────────────────────────────────────── */
@media (min-width: 900px) {
  .cmp-bar { display: none; }
  .cmp-card { background: transparent; box-shadow: none; padding: 0; }
  .cmp-table { table-layout: fixed; }
  .cmp-table thead { display: table-header-group; }
  .cmp-table col.c-lbl { width: 40%; }
  .cmp-table col.c-plan { width: 20%; }

  .cmp-grp th { padding: 32px 0 11px; }
  .cmp-row th { font-size: 15.5px; padding: 15px 16px 15px 4px; }
  .cmp-row td { width: auto; padding: 15px 10px; text-align: center; }

  .cmp-table thead th {
    position: sticky; top: var(--nav-h); z-index: 5;
    background: var(--bg); vertical-align: bottom;
    padding: 20px 14px 18px; text-align: center;
  }

  /* Öne çıkan sütun — .plan.featured ile aynı dil: yükseltilmiş yüzey,
     tepesinde 2px aksan. */
  .cmp-table td[data-p="orta"], .cmp-table thead th.feat { background: var(--bg-elev); }
  .cmp-table thead th.feat { border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: inset 0 2px 0 0 var(--accent); }
  .cmp-table tbody:last-of-type tr:last-child td[data-p="orta"] { border-radius: 0 0 var(--r-card) var(--r-card); }

  .cph-pop { display: inline-block; background: var(--accent); color: var(--text-on-accent); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 10px; }
  .cph-name { display: block; font-size: 19px; font-weight: 700; }
  .cph-desc { display: block; font-size: 13px; font-weight: 400; color: var(--text-2); margin: 3px 0 12px; min-height: 34px; line-height: 1.3; }
  .cph-price { display: block; font-size: 14px; color: var(--text-2); font-weight: 500; }
  .cph-price b { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; margin-right: 2px; }
  .cph-cta { margin-top: 13px; width: 100%; min-height: 40px; font-size: 14.5px; }

  .cmp-row:hover th, .cmp-row:hover td { background: var(--surface-2); }
}

/* ═══════════════════════════════════════════════════════════════════════
   404 — markalı "sayfa yok"
   Kontrat: docs/SITE-BUYUTME-ARASTIRMA.md §5.2

   Bu sayfaya gelen ziyaretçi KAYBOLMUŞTUR: tek işi onu dört gerçek kapıdan
   birine göndermek. Yeni bileşen ailesi açılmaz — .gate-* yerleşimi ve
   .btn ailesi yeniden kullanılır, buraya yalnız aksiyon şeridi eklenir.
   ═══════════════════════════════════════════════════════════════════════ */
body.page-404 { display: flex; flex-direction: column; min-height: 100vh; }
body.page-404 .nf-page { flex: 1; }

.nf-page { padding-top: clamp(104px, 20vw, 150px); padding-bottom: clamp(56px, 10vw, 96px); text-align: center; }
.nf-code {
  display: inline-block; margin-bottom: 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--text-3);
  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
}
.nf-page .h2   { margin: 0 auto; max-width: 18ch; }
.nf-page .lead { margin: 18px auto 0; max-width: 46ch; }

.nf-actions {
  margin: clamp(30px, 5vw, 46px) auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   /musteri-paneli — müşteri paneli tanıtımı
   Kontrat: docs/MUSTERI-PANELI-SAYFASI.md

   YENİ BİLEŞEN AİLESİ AÇILMAZ. Sayfa baştan sona mevcut sözlükle kurulur:
   .page-hero · .showcase(.flip) · .phone · .screen-stack · .panel-badge-row ·
   .feature-mini · .closing-card. Buradaki tek ek, sayfa başlığındaki CTA'nın
   altına düşen açıklama satırıdır.
   ═══════════════════════════════════════════════════════════════════════ */
.page-hero .hero-cta { margin-top: 26px; }   /* .hero-cta zaten ortalar; burada yalnız aralık */
.cust-note {
  margin: 14px auto 0;
  max-width: 40ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* SSS kapanışı — listede olmayan soru için tıklanacak bir şey.
   SSS bir çıkmaz sokak olmamalı: aradığını bulamayan ziyaretçi
   sayfadan çıkmak yerine iletişime gitsin. */
.faq-foot {
  margin: 22px auto 0; text-align: center;
  font-size: 15px; color: var(--text-2);
}
.faq-foot a {
  margin-left: 6px; color: var(--accent); font-weight: 600;
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.faq-foot a:hover { border-bottom-color: var(--accent); }