/* ParkPing kurumsal web — TASK 8.5.8H (PO reddi sonrası yeniden tasarım)
 *
 * PARKPING_WEB_CONTRACT.md §5 + ADR-006/ADR-075 bağlayıcıdır:
 *   * Üç baskın renk: mat lacivert, mat açık mavi, açık/beyaz nötr.
 *   * Degrade, parlaklık, cam efekti, metalik, neon YOKTUR.
 *   * Yüzen etiket YOKTUR; devre dışı kontrol koyu zeminde beyaz olamaz.
 *   * Gövde metni ≥4.5:1, ikon/kontrol ve odak halkası ≥3:1.
 *   * Paralel bir renk sistemi kurulmaz; değerler paylaşılan tasarım
 *     sisteminin birebir kopyasıdır.
 */

/* ---------------------------------------------------------------- token */
:root {
  --navy: #0a1f44;
  --navy-deep: #071634;      /* aynı laciverdin koyu tonu, yeni renk değil */
  --navy-raise: #12294f;
  --blue: #4da8da;
  --blue-soft: #e6f1f9;      /* mavinin açık zemindeki nötr karşılığı */
  --canvas: #f7f9fc;
  --white: #ffffff;

  --ink: #0a1f44;
  --ink-muted: #4a5568;
  --hairline: #e2e6ee;
  --hairline-strong: #cbd3e1;

  --on-navy: #ffffff;
  --on-navy-muted: #c7d5e6;
  --navy-hairline: rgba(255, 255, 255, 0.16);

  --disabled-surface: #22314c;
  --disabled-ink: #a8c6e0;

  --band: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --measure: 60ch;
  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 56px);

  --t--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --t-0: clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
  --t-1: clamp(1.08rem, 1.02rem + 0.35vw, 1.3rem);
  --t-2: clamp(1.3rem, 1.18rem + 0.6vw, 1.7rem);
  --t-3: clamp(1.7rem, 1.42rem + 1.35vw, 2.7rem);
  --t-4: clamp(2.3rem, 1.7rem + 2.9vw, 4.1rem);
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.ttf') format('truetype-variations'),
       url('../fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-0);
  line-height: 1.62;
  font-synthesis-weight: none;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, p, ul, ol, figure, figcaption, dl, dd, dt { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-navy :focus-visible,
.s--navy :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.nav-panel :focus-visible { outline-color: var(--blue); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--on-navy);
  padding: 14px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------- layout */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.s { padding-block: clamp(56px, 7.5vw, 112px); }
.s--tight { padding-block: clamp(36px, 5vw, 72px); }
.s--navy { background: var(--navy); color: var(--on-navy); }
.s--deep { background: var(--navy-deep); color: var(--on-navy); }
.s--white { background: var(--white); }
.measure { max-width: var(--measure); }
.flow > * + * { margin-top: var(--flow, 20px); }
.flow > .eyebrow + * { margin-top: 0; }
.flow--lg { --flow: 30px; }

/* IZGARA İÇİNDE AKIŞ BOŞLUĞU OLMAZ — TASK 5.3 görsel cilası.
   ÖLÇÜLEN KUSUR: kart listeleri hem `.cards` (ızgara) hem `.flow` sınıfını
   taşıyor. `.flow`un "kardeşine üst boşluk ver" kuralı ızgaranın İKİNCİ
   hücresine de uygulanıyor, o hücre 30 px aşağıdan başlıyor ve 30 px kısa
   kalıyordu (1440 px'te ölçüldü: kart 1 top 1259/h 626, kart 2 top 1289/h
   596; ekosistemde aynı kusur 20 px). Hücreler arası boşluğu `gap` zaten
   verir; buradaki margin yalnızca hizayı bozuyordu. */
.cards.flow > * + *, .facts.flow > * + * { margin-top: 0; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t--1); font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 30px; height: var(--band); background: var(--navy); flex: none; }
.s--navy .eyebrow, .s--deep .eyebrow { color: var(--on-navy-muted); }
.s--navy .eyebrow::before, .s--deep .eyebrow::before { background: var(--blue); }

h1, h2, h3 { line-height: 1.06; letter-spacing: -0.025em; font-weight: 800; }
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); letter-spacing: -0.012em; line-height: 1.25; }
.lede { font-size: var(--t-1); line-height: 1.55; color: var(--ink-muted); }
.s--navy .lede, .s--deep .lede { color: var(--on-navy-muted); }
.muted { color: var(--ink-muted); }
.s--navy .muted, .s--deep .muted, .site-footer .muted { color: var(--on-navy-muted); }

/* -------------------------------------------------------------- header */
.site-header {
  background: var(--navy); color: var(--on-navy);
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--navy-hairline);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 84px;
}
/* Logo kilidi YALNIZCA lacivert zeminde: varlığın "Park" bölümü beyaza
   yakındır (#F7F7F9) ve açık zeminde okunmaz. Yükseklik boyalı piksel
   sınırlarına göre seçilir; şeffaf tuval payı teslim varlığında kırpılmıştır. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 46px; width: auto; }
@media (max-width: 900px) { .site-header__bar { min-height: 72px; } .brand img { height: 38px; } }
@media (max-width: 400px) { .brand img { height: 34px; } }

.nav-desktop__list { display: flex; align-items: center; gap: 2px; }
.nav-desktop__link {
  display: inline-block; padding: 10px 14px;
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.01em;
  color: var(--on-navy-muted); text-decoration: none; border-radius: var(--r-sm);
  transition: color 120ms ease, background-color 120ms ease;
}
.nav-desktop__link:hover { color: var(--on-navy); background: rgba(255, 255, 255, 0.08); }
.nav-desktop__link[aria-current='page'] { color: var(--on-navy); box-shadow: inset 0 -3px 0 var(--blue); }

.nav-toggle {
  display: none; align-items: center; gap: 10px;
  min-height: 48px; min-width: 48px; padding: 12px 16px;
  background: transparent; color: var(--on-navy);
  border: 1px solid var(--navy-hairline); border-radius: var(--r-sm);
  font: inherit; font-size: var(--t--1); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; }
.nav-toggle__bars i { display: block; width: 18px; height: 2px; background: currentColor; }

/* Mobil çekmece: kontrollü panel + arka plan perdesi + odak hapsi.
   Bağlantılar başlığın içine dağılmaz. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(7, 22, 52, 0.6);
  opacity: 0; pointer-events: none; transition: opacity 160ms ease;
}
.nav-scrim[data-open='true'] { opacity: 1; pointer-events: auto; }
.nav-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(88vw, 380px);
  background: var(--navy-deep); color: var(--on-navy);
  border-left: 1px solid var(--navy-hairline);
  transform: translateX(100%);
  transition: transform 200ms ease, visibility 200ms;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-panel[data-open='false'] { visibility: hidden; }
.nav-panel[data-open='true'] { transform: translateX(0); visibility: visible; }
.nav-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px var(--gutter);
  border-bottom: 1px solid var(--navy-hairline);
}
.nav-panel__head img { height: 34px; width: auto; }
.nav-close {
  min-height: 48px; min-width: 48px; padding: 12px 16px;
  background: transparent; color: var(--on-navy);
  border: 1px solid var(--navy-hairline); border-radius: var(--r-sm);
  font: inherit; font-weight: 700; cursor: pointer;
}
.nav-panel__list { padding: 12px var(--gutter) 28px; }
.nav-panel__link {
  display: flex; align-items: center; min-height: 56px;
  padding: 14px 0; font-size: var(--t-1); font-weight: 600;
  color: var(--on-navy-muted); text-decoration: none;
  border-bottom: 1px solid var(--navy-hairline);
}
/* GEZİNME KALEMİ İKİ SATIRA BÖLÜNMEZ.
   ÖLÇÜLEN KUSUR (2026-09-22): dar masaüstü bandında `Nasıl çalışır` sıkışıp
   iki satıra düşüyor, kalem diğerlerinden 12 px yukarı kayıyordu. Eşik o
   bandı zaten çekmeceye veriyor; bu kural ikinci bir güvence olarak durur —
   ileride bir kalem eklenirse kusur sessizce geri gelmesin. */
.nav-desktop__link, .nav-group__toggle { white-space: nowrap; }
.nav-panel__link[aria-current='page'] { color: var(--on-navy); box-shadow: inset 3px 0 0 var(--blue); padding-left: 14px; }
.nav-panel__link:hover { color: var(--on-navy); }

/* MASAÜSTÜ / ÇEKMECE EŞİĞİ 1080 px.
   ÖLÇÜLEN KUSUR (1): eşik 901 px iken, başlık çubuğunun içeriği 865 px yer
   istiyordu ve 901–959 bandında kabuk iç genişliği buna yetmiyordu; yardımcı
   düğmeler çubuğun dışına taşıyordu (942 px @ 901 px ekran). Eşik 960'a
   alındı.
   ÖLÇÜLEN KUSUR (2), 2026-09-22 sabah: gezinmeye `Kurumsal` grubu eklendi,
   çubuğun içeriği 1065 px'e çıktı ve 960–1079 bandında yardımcı düğmeler
   yine dışarı taştı; eşik geçici olarak 1080'e alındı.
   2026-09-22 öğleden sonra (PO kararı): `Kurumsal` üst düzey grubu
   kaldırıldı, hedefleri `Destek` grubuna taşındı ve çubuğun gerektirdiği
   genişlik 1065 px'ten 983 px'e düştü.
   EŞİK YİNE DE 959'A İNDİRİLEMEDİ — ÖLÇÜLDÜ: 960 ve 1024 px'te sayfa yatay
   KAYMIYOR ama `Nasıl çalışır` iki satıra bölünüyor ve kalemin üst kenarı
   diğerlerinden 12 px yukarı kaçıyordu (960 px'te genişliği 110 → 69 px).
   "Taşma yok" ölçüsü bu kusuru GÖRMEZ; hizayı ölçen dedektör gördü.
   Satır 1060 px'ten itibaren bütünleşiyor, bu yüzden eşik 1080'dir.
   O bandın ALTINDA çekmece açılır ve `Giriş Yap` / `Sipariş Et` onun en
   üstünde durur — hiçbir eylem kaybolmaz. */
@media (max-width: 1079px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 1080px) {
  .nav-scrim, .nav-panel { display: none; }
}

/* ---------------------------------------------------------------- hero */
.hero { background: var(--navy); color: var(--on-navy); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}
/* ÜÇ EYLEM TEK SATIRDA KALIR. 1024 px'te hero metin kolonu 431 px, üç düğme
   ise 442 px istiyordu (ölçüldü) ve üçüncüsü alt satıra düşüyordu. Bu dar
   bantta yatay dolgu bir adım küçülür; yükseklik, renk, tipografi ve bileşen
   AYNI kalır. */
@media (min-width: 980px) and (max-width: 1120px) {
  .hero .actions .btn { padding-left: 20px; padding-right: 20px; }
}
.hero h1 { max-width: 15ch; }
.hero__sub { font-size: var(--t-1); color: var(--on-navy-muted); max-width: 46ch; }

/* Sahne: ön cam köşesi + gerçek Smart Tag varlığı + gerçek uygulama ekranı.
   Ürünün yaşadığı yer burasıdır; seri numarası kutusu ürün DEĞİLDİR. */
.scene { position: relative; aspect-ratio: 4 / 3.05; width: 100%; }
/* Cam sahnesi TEK bir SVG'dir: cam, silecek, NFC dalgaları ve ONAYLI ürün
   varlığı aynı koordinat sisteminde durur, bu yüzden hiçbir genişlikte
   birbirinden kaymaz. Telefon sağda, camı örtmeyecek biçimde durur. */
.scene__svg { position: absolute; left: 0; top: 0; width: 80%; height: 100%; }
/* Hero fotoğrafı, cam illüstrasyonuyla AYNI kutuyu kullanır. `contain`,
   SVG'nin varsayılan `preserveAspectRatio="xMidYMid meet"` davranışının
   birebir karşılığıdır: fotoğraf kutuya sığar, KIRPILMAZ ve ESNEMEZ.
   Fotoğrafın oranı yuvanın 640x520 oranıyla aynı olduğu için çizilen
   dikdörtgen de aynıdır. `.scene__svg` kuralı geri dönüş için DURUYOR. */
.scene__photo {
  position: absolute; left: 0; width: 80%;
  /* Kutu, BOYANAN fotoğrafın kendisiyle aynı olmalıdır. `height: 100%` +
     `contain` bırakılsaydı kutu fotoğraftan daha uzun kalır, köşe yuvarlaması
     ve gölge fotoğrafın kenarına değil BOŞLUĞA uygulanırdı. `aspect-ratio`
     kutuyu fotoğrafa oturtur; dikey ortalama `top: 50%` ile korunur.
     ÖLÇÜLDÜ: boyanan dikdörtgen ve konumu bu değişiklikten ETKİLENMEZ. */
  top: 50%; transform: translateY(-50%);
  height: auto; aspect-ratio: 2000 / 1625;
  object-fit: contain; object-position: left center;
  /* Köşe yuvarlaması, `border-radius`ın değiştirilmiş içeriği kırpması
     sayesinde taşmayı kendiliğinden engeller; ek bir sarmalayıcı veya
     `overflow` katmanı GEREKMEZ. */
  border-radius: 18px;
  /* Lacivert zemine oturan yumuşak yükseklik gölgesi. Saf siyah değil,
     zeminin kendi lacivertinin koyu tonudur; parlama (glow), neon veya
     çerçeve YOKTUR. İki katman: geniş ve çok yumuşak ana gölge + kenarı
     zeminden ayıran çok dar temas gölgesi. */
  box-shadow: 0 18px 44px rgba(4, 12, 30, 0.34),
              0 2px 6px rgba(4, 12, 30, 0.20);
}
.scene__phone {
  position: absolute; right: 0; bottom: 2%; width: 33%;
  border-radius: 22px; border: 3px solid var(--navy-deep);
  background: var(--navy-deep); padding: 5px;
  overflow: hidden;
}
.scene__phone img { border-radius: 16px; width: 100%; }
@media (max-width: 620px) {
  .scene { aspect-ratio: 4 / 3.3; }
  .scene__svg { width: 78%; }
  .scene__photo { width: 78%; }
  .scene__phone { width: 36%; }
}

/* ------------------------------------------------------------- actions */
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Alt bilgideki uygulama edinme çağrıları: aynı düğme bileşeni, daha dar
   boşluk. Yeni renk, yeni bileşen veya yeni tasarım dili YOKTUR. */
.actions--tight { gap: 10px; margin-top: 16px; }

/* ------------------------------------ mağaza rozetleri + sosyal ikonlar */
/*
   PO'NUN TESLİM ETTİĞİ GERÇEK GÖRSELLER. Ölçü CSS ile verilir; görselin
   kendisine dokunulmaz. `object-fit: contain` esnemeyi ve kırpılmayı
   ENGELLER — rozetin 3.5:1 oranı her genişlikte korunur.

   Bağlantının TAMAMI tıklanabilir: görsel `display:block` ve bağlantı kutusu
   görselin kendisidir; çevresinde ölü boşluk kalmaz.
*/
.store-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.store-row li + li { margin-top: 0 !important; }
/* AKIŞ RİTMİ GERİ VERİLİR. `.store-row`un `margin: 0` kuralı, `.flow > * + *`
   ile AYNI özgüllükte ve dosyada DAHA SONRA olduğu için onu eziyordu; bölüm
   içindeki rozet satırı bir önceki eylemden 0 px uzakta kalıyordu. Değer
   akışın kendi değişkenidir — yeni ölçü tanımlanmaz. */
.flow > .store-row { margin-top: var(--flow, 20px); }
/* ROZETLERİN GÖRSEL YÜKSEKLİĞİ EŞİTLENİR — LOGO YENİDEN ÇİZİLMEZ.

   ÖLÇÜLEN KUSUR: iki resmî rozet aynı tuvalde (2625x750) gelir ama tuvali
   aynı oranda doldurmaz — `google-play` %87,7, `app-store` %98,1. Aynı CSS
   kutusuna konunca App Store rozeti ~%12 daha uzun görünüyor ve alt kenarlar
   3 px kayıyordu.

   ÇÖZÜM: `badge_style()` her yapıda PNG'nin alfa kanalını ölçer ve saydam
   kenar boşluğunu `--badge-fx/fy/fw/fh` olarak satır içi verir. Kutu, ÇİZİMİN
   kendisidir: yüksekliği `--badge-h`, genişliği çizimin KENDİ oranından gelir.
   Görsel tek ölçekle büyütülüp konumlanır — esneme, kırpma ve oran bozulması
   YOKTUR. İki kutu eşit yükseklikte olduğu için (`align-items: center`) alt
   kenarlar da aynı hizadadır. */
.store-cta {
  --badge-h: 44px;
  display: block; position: relative; overflow: hidden; flex: none;
  border-radius: var(--r-sm); text-decoration: none;
  height: var(--badge-h);
  width: calc(var(--badge-h) * var(--badge-ar) * var(--badge-fw) / var(--badge-fh));
}
.store-cta img {
  display: block; position: absolute; max-width: none;
  width: calc(var(--badge-h) * var(--badge-ar) / var(--badge-fh));
  height: calc(var(--badge-h) / var(--badge-fh));
  left: calc(-1 * var(--badge-h) * var(--badge-ar) * var(--badge-fx) / var(--badge-fh));
  top: calc(-1 * var(--badge-h) * var(--badge-fy) / var(--badge-fh));
}
/* ROZET BAŞINA ÖLÇÜ — PNG'NİN ALFA KANALINDAN ÖLÇÜLDÜ.
   Değerler elle uydurulmaz ve sessizce eskiyemez: `assert_badge_metrics()`
   her yapıda PNG'yi yeniden ölçer ve sapma varsa YAPIYI DURDURUR.
   SATIR İÇİ `style=` KULLANILMAZ — site `style-src 'self'` ile yayımlanır ve
   satır içi stil ENGELLENİR (ölçüldü: rozet kutusu 0 px'e düşüp kayboluyordu).
*/
/* google-play — tuval 3.50000:1, cizim tuvalin %87.7'ini doldurur. */
.store-cta--google-play {
  --badge-ar: 3.50000; --badge-fx: 0.07429; --badge-fy: 0.06133;
  --badge-fw: 0.84419; --badge-fh: 0.87733;
}
/* app-store — tuval 3.50000:1, cizim tuvalin %98.1'ini doldurur. */
.store-cta--app-store {
  --badge-ar: 3.50000; --badge-fx: 0.08267; --badge-fy: 0.01200;
  --badge-fw: 0.83733; --badge-fh: 0.98133;
}

.store-cta:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Alt bilgi — daha kompakt, AYNI hizalama matematiği. */
.store-cta--compact { --badge-h: 34px; }
/* `margin-top: 4px` YALNIZCA ALT BİLGİ İÇİNDİR: orada rozetler kendi
   başlığının hemen altında durur. Uygulama/Web bölümünde aynı sınıf,
   `Web'den Kullan` düğmesini rozetlere 4 px mesafede bırakıyor ve grup
   sıkışık görünüyordu (ölçüldü). Bölüm içinde rozet satırı artık akışın
   kendi ritmini (30 px) alır. */
.store-row--footer { gap: 10px; }
.site-footer .store-row--footer { margin-top: 4px; }

/* TASK 5.3 — BAŞLIK YARDIMCI EYLEMLERİ.
   Gezinme listesinin DIŞINDA, çubuğun sağında dururlar. Yeni buton dili
   üretilmez: mevcut `.btn` bileşeninin küçük boy varyantıdır. */
.nav-utility { display: none; gap: 8px; align-items: center; margin-left: 12px; }
/* Dar masaüstü bandında etiket SARMAZ: sarınca düğme iki satıra çıkıp
   43 px yerine 63 px oluyordu ve iki düğme birbiriyle hizasını kaybediyordu
   (901–1024 px arasında ölçüldü). */
.nav-utility .btn { white-space: nowrap; }
/* ÖLÇÜLEN BOŞLUK: masaüstü gezinme 901 px'te açılıyordu ama yardımcı eylemler
   1060 px'te. Aradaki bantta (901–1059, PO'nun hedef ölçüsü 1024 dâhil)
   başlıkta NE `Giriş Yap` NE `Sipariş Et` görünüyordu; çekmece düğmesi de
   gizliydi. İki eşik aynı noktaya çekildi. */
@media (min-width: 1080px) { .nav-utility { display: flex; } }
@media (min-width: 1080px) and (max-width: 1240px) {
  /* Dar masaüstü bandında çubuk sıkışmasın: boşluklar daralır, düğme
     dolgusu küçülür. Bileşen ve renk AYNI kalır. */
  .site-header__bar { gap: 14px; }
  .nav-utility { margin-left: 6px; gap: 6px; }
  .nav-utility .btn--sm { padding: 8px 10px; }
}

/* Çekmecede aynı iki eylem en üstte ve AYRIŞIR. */
.nav-panel__link--action { font-weight: 700; }
.nav-panel__link--action + .nav-panel__link:not(.nav-panel__link--action) {
  margin-top: 10px; border-top: 1px solid var(--hairline, rgba(255,255,255,0.14));
  padding-top: 14px;
}

/* TASK 5.1 — DÜRÜST "YAKINDA" DURUMU.
   Mağaza rozetinin adresi Admin'de (`web_social_links`) henüz yoksa rozet
   ÇİZİLİR ama tıklanamaz. Görünür `Yakında` etiketi PO kararıyla KALDIRILDI
   (TASK 5.3 görsel cilası); durum `aria-disabled` ile bildirilir. */
.store-item { display: flex; align-items: center; gap: 8px; }
@media (max-width: 420px) { .store-item { gap: 6px; } }

/* Dar ekran: rozetler YAN YANA kalır, yalnız çizim yüksekliği düşer. Genişlik
   `--badge-h`den türediği için oran ve hizalama kendiliğinden korunur; sığmazsa
   `.store-row` zaten sarar. Eski kural rozeti `width: 100%` ile kaba
   yayıyordu ve iki rozet farklı genişlikte kutulara oturuyordu. */
@media (max-width: 620px) { .store-cta { --badge-h: 38px; } }

/* UYGULAMAYI İNDİR — rozet satırının başlığı.
   Yeni bir düğme ailesi DEĞİLDİR: mevcut bölüm etiketi diliyle yazılır ve
   altındaki İKİ GERÇEK mağaza bağlantısını adlandırır. */
.store-lead {
  font-size: var(--t--1); font-weight: 700; letter-spacing: 0.06em;
  margin: 0; color: inherit;
}
.flow > .store-lead + .store-row { margin-top: 10px; }

/*
   SOSYAL İKONLAR. Her biri AYRI tıklanabilir öğedir; dördü tek görselde
   birleştirilmez. Facebook, onaylı asset gelene kadar HİÇ çizilmez.
*/
.social-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 10px 0 0; padding: 0; list-style: none;
}
/* Alt bilgi listelerinin dikey aralığı BU SIRAYA UYGULANMAZ: yatay bir
   sıradır, liste değil. Uygulanınca ilk ikon 10px yukarıda kalıyordu. */
.social-row li + li { margin-top: 0 !important; }
.social-row li { display: flex; }
.social-icon {
  /* DIŞ KUTU DÖRT İKONDA DA AYNI: dokunma alanı 44x44 SABİT kalır ve
     aşağıdaki optik ölçek bunu DEĞİŞTİRMEZ.
     TASK 5.4.6: görünen SİMGE küçüldü (%20), dokunma hedefi KÜÇÜLMEDİ —
     erişilebilirlik ölçüsü bir görsel tercihe feda edilmez. */
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm); text-decoration: none;
}
.social-icon img {
  /* §14 — TEK ÖLÇÜ, İSTİSNASIZ.
     PO kararı: görünen her sosyal simge, mevcut Instagram simgesiyle AYNI
     genişlik/yükseklikte olacak. Instagram bugüne kadar 26 px kutu × 1.06
     optik ölçek ile 28 px çiziliyordu; referans ölçü budur ve dördü de
     ona sabitlenir.
     ÖNCEKİ YAKLAŞIM: her PNG'nin iç dolgusu farklı olduğu için platform
     başına optik ölçek veriliyordu (0.96–1.06). Optik olarak daha dengeliydi
     ama ÖLÇÜLEN kutular eşit değildi; PO eşit KUTU istedi ve bu karar
     optik ince ayarın önüne geçer. */
  display: block; width: 28px; height: 28px; object-fit: contain;
  transform: translateY(var(--icon-nudge, 0));
}
.social-icon:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ADRESİ OLMAYAN veya PASİF marka görseli.
   Yerleşim ETKİN hâlle BİREBİR aynıdır — geometri zaten `.store-cta` ve
   `.social-icon` sınıflarındadır. Değişen tek şey İŞLEVDİR: öğe `<span>`
   olarak çizilir, dolayısıyla bağlantı değildir, klavye odağı almaz ve
   imleç tıklanabilirlik vaat etmez. Sahte hedef (`#`, boş `href`,
   `javascript:void(0)`) ÜRETİLMEZ. */
.store-cta--inert,
.social-icon--inert { cursor: default; }

/* ---------------------------------------------------------- yapay zekâ özeti
   TASK 5.4.6. YENİ GÖRSEL DİL ÜRETİLMEZ: `.btn--ghost` ile aynı matte
   yüzey, aynı yarıçap, aynı hairline. Dört eylem eşit ağırlıktadır —
   hiçbiri öne çıkarılmaz çünkü ParkPing hiçbirini önermiyor. */
/* DÖRT EŞİT KART — IZGARA, SATIR DEĞİL.
   ÖLÇÜLEN KUSUR (TASK 5.4.8): `flex-wrap` ile kartlar İÇERİK genişliğinde
   duruyordu; Gemini'nin etiketi uzun olduğu için 180 px'e çıkıp diğerlerinin
   (88/59/96) iki katı oluyor ve 390 px'te Perplexity'yi tek başına alt
   satıra itiyordu. Izgara tracks EŞİT olduğu için etiket uzunluğu artık
   genişliği BELİRLEYEMEZ. */
.ai {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.ai li + li { margin-top: 0 !important; }
/* DÖRT KART HER ZAMAN 2×2'DİR — TASK 5.4.8 DÜZELTMESİ.
   ÖLÇÜLDÜ: alt bilgi iki dengeli kolona bölününce yapay zekâ bloğu 524 px'lik
   bir kolona yerleşti. Görüntü genişliğine bakan eski `min-width: 1040px`
   kuralı orada da dört kolon açıyordu; her kart 125 px'e düşüyor ve
   "Perplexity" iki satıra sarıyordu (o kart 65 px, diğerleri 44 px). §4/§5
   dört kartın AYNI ölçüde olmasını şart koşar; 524 px'lik kapta buna YER
   YOKTUR, bu yüzden sözleşmenin kendi yedeği olan 2×2 uygulanır: her kart
   258 px, dördü de 44 px. */
.ai__btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--navy-hairline); border-radius: var(--r-sm);
  background: var(--navy-raise); color: var(--on-navy);
  font-size: var(--t--1); font-weight: 600; text-decoration: none;
  text-align: left;
}
.ai__btn:hover { border-color: var(--blue); }
.ai__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* NÖTR SAĞLAYICI İŞARETİ — sahte logo DEĞİL (§3).
   Depoda onaylı bir sağlayıcı markası yok; marka yeniden çizilmez. Dört
   işaret AYNI kutuda, AYNI ölçüde durur. */
.ai__mark {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--navy); border: 1px solid var(--navy-hairline);
  color: var(--blue-soft); font-weight: 700; font-size: 13px; line-height: 1;
}
.ai__name { min-width: 0; overflow-wrap: anywhere; }
/* İstem kopyalama AYRI eylemdir; sağlayıcı etiketine GİRMEZ. */
.ai__copywrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.ai__copy {
  min-height: 36px; padding: 7px 12px;
  border: 1px solid var(--navy-hairline); border-radius: var(--r-sm);
  background: transparent; color: var(--on-navy);
  font: inherit; font-size: var(--t--1); font-weight: 600; cursor: pointer;
}
.ai__copy:hover { border-color: var(--blue); }
.ai__copy:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ai__copy[data-state="done"] { border-color: var(--blue); color: var(--blue-soft); }
.ai__hint { font-weight: 400; color: var(--on-navy-muted); font-size: 0.85em; }
.ai__note, .ai__prompt {
  color: var(--on-navy-muted); font-size: var(--t--1);
  margin: 6px 0 10px; max-width: 52ch;
}
/* İstem KOPYALANABİLİR olmalı: seçilebilir, sarmalanan düz metin. */
.ai__prompt {
  margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--navy-hairline); border-radius: var(--r-sm);
  user-select: all; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- WhatsApp
   SABİT İLETİŞİM EYLEMİ. Sağ altta durur ama İÇERİĞİ KAPATMAZ:
   `bottom` değeri çerez panelinin üstünde kalacak kadar yüksektir ve panel
   açıkken sayfa zaten kaydırılabilir. Mobil tarayıcı çubuğu için
   `env(safe-area-inset-bottom)` eklenir. */
.wa {
  position: fixed; right: 16px; z-index: 40;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--navy-hairline); border-radius: 999px;
  background: var(--navy); color: var(--on-navy);
  font-size: var(--t--1); font-weight: 600; text-decoration: none;
  box-shadow: 0 2px 10px rgba(10, 31, 68, 0.22);
}
.wa:hover { border-color: var(--blue); }
.wa:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wa__glyph { width: 20px; height: 20px; flex: none; }
/* Dar telefonda etiket düşer, dokunma hedefi 44 px KALIR. */
@media (max-width: 420px) {
  .wa { padding: 12px; gap: 0; }
  .wa__label { position: absolute; width: 1px; height: 1px; overflow: hidden;
               clip-path: inset(50%); white-space: nowrap; }
}
/* ÇEREZ PANELİYLE ÇAKIŞMAZ — SİHİRLİ SAYI KULLANILMAZ.
   `consent.js` panelin GERÇEK yüksekliğini `--consent-space` olarak yazar
   (sayfa zaten o kadar `padding-bottom` alıyor). WhatsApp aynı değeri
   kullanır, böylece panel büyüse de çakışma doğmaz. */
body.has-consent .wa {
  bottom: calc(16px + var(--consent-space, 0px) + env(safe-area-inset-bottom, 0px));
}

/* Alt bilgi içi ikincil başlık — mevcut sütun başlıklarıyla aynı dil. */
.footer-sub {
  font-size: var(--t--1); font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--on-navy-muted);
  margin: 22px 0 10px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-raise); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--hairline-strong); }
.btn--ghost:hover { border-color: var(--navy); }
.s--navy .btn--primary, .s--deep .btn--primary, .hero .btn--primary { background: var(--blue); color: var(--navy); }
.s--navy .btn--primary:hover, .hero .btn--primary:hover { background: #63b6e3; }
.s--navy .btn--ghost, .s--deep .btn--ghost, .hero .btn--ghost { color: var(--on-navy); border-color: var(--navy-hairline); }
.s--navy .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--on-navy); }

/* BAŞLIK DA LACİVERT BİR YÜZEYDİR — TASK 5.3 görsel cilası.
   ÖLÇÜLEN KUSUR: `.btn--ghost` açık zemin için `--navy` metin rengi taşır.
   Başlık çubuğunun zemini de `--navy` olduğu için "Giriş Yap" yazısı zemine
   karışıyordu ve düğme BOŞ BİR ÇERÇEVE olarak görünüyordu (1440 px'te
   ölçüldü: color rgb(10,31,68), bar background rgb(10,31,68)). Birincil düğme
   de çubukla aynı laciverttti; hiyerarşi görünmüyordu.
   Yeni bir düğme ailesi TANIMLANMAZ: başlık, lacivert yüzeylerin ZATEN
   kullandığı kuralın kapsamına alınır. */
.site-header .btn--primary { background: var(--blue); color: var(--navy); }
.site-header .btn--primary:hover { background: #63b6e3; }
.site-header .btn--ghost { color: var(--on-navy); border-color: var(--navy-hairline); }
.site-header .btn--ghost:hover { border-color: var(--on-navy); }

/* KÜÇÜK BOY — `.btn`den SONRA gelmelidir.
   ÖLÇÜLEN KUSUR: bu kural dosyada `.btn`den ÖNCE duruyordu; aynı özgüllükte
   (0,1,0) olduğu için `.btn` onu tamamen eziyordu ve "küçük" düğme 58 px
   yüksekliğinde, 17.28 px yazıyla çiziliyordu. Değer değişmedi, YERİ
   değişti. */
.btn--sm { padding: 9px 14px; font-size: var(--t--1); min-height: 40px; }
.btn[disabled], .btn[aria-disabled='true'] {
  background: var(--disabled-surface); color: var(--disabled-ink);
  border-color: transparent; cursor: not-allowed; pointer-events: none;
}
@media (max-width: 520px) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
}

/* ---------------------------------------------------------- flow rayı */
/* Numaralandırma MEŞRUDUR: C2 gerçekten sıralı bir süreçtir. Adımlar bir
   RAY üzerinde bağlanır — üç boş kart değil. */
.rail { display: grid; gap: 0; counter-reset: step; }
@media (min-width: 900px) { .rail { grid-template-columns: repeat(3, 1fr); } }
.rail__item { position: relative; padding: 0 0 40px 0; }
@media (min-width: 900px) { .rail__item { padding: 0 32px 0 0; } }
.rail__mark {
  counter-increment: step;
  position: relative; display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.rail__mark::before {
  content: counter(step, decimal-leading-zero);
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-size: var(--t--1); font-weight: 800; letter-spacing: 0.08em;
}
.rail__mark::after {
  content: ''; flex: 1; height: 2px; background: var(--hairline-strong);
}
.rail__item:last-child .rail__mark::after { background: transparent; }
.rail__art {
  width: 100%; aspect-ratio: 5 / 3; margin-bottom: 20px;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--white); overflow: hidden;
}
/* Çizim kutuyu DOLDURUR: içsel 300x180 boyutunda kalırsa kutunun sağında ve
   altında ölü alan bırakır. */
.rail__art img { width: 100%; height: 100%; object-fit: cover; }
/* GERÇEK FOTOĞRAF taşıyan adımlar (01 ve 02) — hero'da onaylanan görsel dil.
   Yalnız bu iki adıma uygulanır: ADIM 03 `rail__art--device` modifikatörünü
   taşır ve BU KURALDAN ETKİLENMEZ.

   Kutu geometrisi (`aspect-ratio: 5/3`, genişlik, `object-fit: cover`,
   `overflow: hidden`) DEĞİŞMEZ; yalnız kenar sunumu değişir. İnce çizgi
   kaldırılır: o çizgi beyaz zeminli ÇİZİMİN kenarını tanımlamak içindi;
   fotoğraf kendi kenarını taşır ve gölgeyle birlikte çift kenar oluştururdu.
   Yeni panel/fon, parlama (glow), neon veya çerçeve YOKTUR. Gölge hero ile
   AYNI lacivert tondadır; beyaz zeminde durduğu için opaklığı daha düşüktür
   (lacivert hero'da 0.34 / 0.20, beyaz bölümde 0.16 / 0.10). */
.rail__art--photo {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(4, 12, 30, 0.16),
              0 2px 6px rgba(4, 12, 30, 0.10);
}
.rail__item h3 { margin-bottom: 8px; }
.rail__item p { color: var(--ink-muted); }

/* --------------------------------------------------------- app ekranı */
.devices { display: grid; gap: clamp(24px, 4vw, 44px); align-items: center; }
@media (min-width: 900px) { .devices { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.device-row {
  display: flex; gap: clamp(16px, 3vw, 32px);
  align-items: flex-start;      /* eşit yüksekliğe zorlamaz */
  justify-content: center;
  flex-wrap: wrap;
}
/* Cihaz çerçevesi telefonun kendisinde BİTER: `align-self: flex-start` ve
   satır-içi boşluk bırakmayan blok görsel sayesinde çerçevenin altında
   ölü lacivert alan kalmaz. Alt yazı taşıyan satırlar bu davranışı korur;
   alt yazısız üç telefonlu grupta çerçeve doğrudan ekranda biter. */
.device {
  flex: 1 1 0; min-width: 0;
  align-self: flex-start;
  border-radius: 26px; border: 3px solid var(--navy);
  background: var(--navy); padding: 6px;
  box-shadow: none;
}
.device img {
  border-radius: 19px;
  display: block;
  width: 100%;
  height: auto;                 /* içsel 1170x2532 oranı korunur */
  aspect-ratio: 1170 / 2532;    /* yükleme öncesinde de oran sabit */
  object-fit: contain;          /* hiçbir koşulda esnetilmez */
}
/* Ekran grubunun altındaki kaynak notu: grubun kendisiyle aynı hizada,
   ortalanmış ve küçük. Ayrı bir blok gibi durmaz. */
.device-note { text-align: center; font-size: var(--t--1); margin-top: 14px; }

.device figcaption {
  color: var(--on-navy-muted); font-size: var(--t--1);
  padding: 10px 6px 4px; text-align: center;
}

/* ------------------------------------------------------------- kartlar */
.cards { display: grid; gap: 18px; }
@media (min-width: 760px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
}
.s--navy .card, .s--deep .card {
  background: var(--navy-raise); border-color: var(--navy-hairline); color: var(--on-navy);
}
.s--navy .card p, .s--deep .card p { color: var(--on-navy-muted); }
.card p { color: var(--ink-muted); }
.card h3 { font-size: var(--t-1); }
/* KART İÇİ SON ÖĞE ALTA SABİTLENİR — TASK 5.3 görsel cilası.
   ÖLÇÜLEN KUSUR: bir satırdaki kartlar aynı yükseklikte olsa bile, gövde
   metni kısa olan kartın eylem satırı yukarıda kalıyordu (1440 px'te ürün
   kartları: CTA 1794'e karşı 1766; 768 px'te ekosistem: 6615'e karşı 6587).
   Kart zaten dikey bir flex kutudur; son öğeye `margin-top: auto` vermek,
   bir SET olarak sunulan kartların eylem taban çizgisini eşitler. Yeni
   bileşen veya yeni ölçü YOKTUR. */
.card > .actions:last-child,
.card > p:last-child:has(> .link) { margin-top: auto; padding-top: 4px; }
.card__mark { width: 34px; height: 34px; color: var(--blue); }
/* ADIM NUMARASI — `.card__mark` İKON kutusudur, sayı için kullanılmaz
   (34x34 sabit ölçü metni taşırdı). Sıralı kartların numarası burada. */
.card__step {
  margin: 0 0 4px; font-size: var(--t--2); font-weight: 700;
  letter-spacing: .1em; color: var(--blue);
}
.s--white .card__step, .s--canvas .card__step { color: var(--navy); }
.s--white .card__mark, .s--canvas .card__mark { color: var(--navy); }

/* --------------------------------------------------------- karşılaştırma */
/* TASK 5.3: SESSİZ KIRPMA BİTTİ. Eski kural `overflow: hidden` idi; 320 px'te
   tablonun doğal genişliği (ölçüldü: 287 px) kutuyu (278 px) 9 px aşıyor ve
   "Premium" sütununun sağ kenarı hiçbir uyarı olmadan kesiliyordu. `auto` ile
   kesilme yerine kaydırma olur; dar ekranda iç boşluk da daraltıldığı için
   pratikte kaydırma çubuğu hiç çıkmaz (ölçüm: 320 px'te 269 px < 278 px).
   Kaydırılabilir bölge klavyeyle de gezilebilsin diye şablon `tabindex="0"`
   verir; odak halkası mevcut mavi belirteçten gelir, YENİ RENK YOKTUR. */
.compare { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: auto; background: var(--white); }
.compare:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; font-size: var(--t-0); }
.compare thead th { background: var(--navy); color: var(--on-navy); font-weight: 700; }
.compare thead th:first-child { width: 42%; }
.compare tbody tr + tr { border-top: 1px solid var(--hairline); }
/* TASK 2 (ADR-107): nihai matris dört mantıksal kümede sunulur. Küme
   başlığı satırı, tabloyu düz bir dökümden ayırır; renk paleti KİLİTLİ
   marka tokenlarından gelir, yeni renk tanımlanmaz. */
.compare tbody + tbody { border-top: 1px solid var(--hairline); }
.compare__group th { background: var(--canvas); color: var(--ink); font-weight: 700;
  letter-spacing: .01em; }
.compare td:not(:first-child) { color: var(--ink-muted); }
.compare .yes { color: var(--navy); font-weight: 700; }
@media (max-width: 720px) {
  .compare th, .compare td { padding: 12px 12px; font-size: var(--t--1); }
  .compare thead th:first-child { width: 40%; }
}
@media (max-width: 420px) {
  .compare th, .compare td { padding: 12px 9px; }
}

/* --------------------------------------------------------------- notlar */
.notice {
  display: flex; gap: 16px; padding: 20px 22px;
  background: var(--white); border: 1px solid var(--hairline);
  border-left: var(--band) solid var(--navy); border-radius: var(--r-md);
  color: var(--ink-muted);
}
.s--navy .notice, .s--deep .notice {
  background: rgba(255, 255, 255, 0.06); border-color: var(--navy-hairline);
  border-left-color: var(--blue); color: var(--on-navy-muted);
}
.notice strong { color: var(--ink); }
.s--navy .notice strong, .s--deep .notice strong { color: var(--on-navy); }

.facts { display: grid; gap: 18px; }
@media (min-width: 760px) { .facts--2 { grid-template-columns: 1fr 1fr; } }
.fact strong { display: block; font-weight: 700; margin-bottom: 4px; }
.fact span { color: var(--ink-muted); }
.s--navy .fact span, .s--deep .fact span { color: var(--on-navy-muted); }

/* ÜÇ İLETİŞİM YOLU — TASK 5.4.5.
   YENİ GÖRSEL DİL ÜRETİLMEZ: sitenin zaten kullandığı `.facts` desenidir.
   Eklenen tek şey ÜÇ SÜTUNLU varyant ve iki yardımcı satır (vaat + senaryo).
   Üç öğe GÖRSEL OLARAK EŞİTTİR — sıralı bir tırmanma olmadıkları için
   hiçbiri diğerinden baskın çizilmez. */
@media (min-width: 760px) { .facts--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .facts--3 { grid-template-columns: repeat(3, 1fr); } }
.comm__item {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 24px);
}
.s--navy .comm__item, .s--deep .comm__item {
  border-color: var(--navy-hairline);
  background: var(--navy-raise);
}
.comm__promise {
  display: block;
  color: var(--blue);
  font-weight: 600;
  font-size: var(--t--1);
  margin-bottom: 8px;
}
/* `.fact span` kuralı lacivert zeminde rengi ezmesin diye vaat satırı
   kendi rengini AÇIKÇA korur. */
.s--navy .comm__item .comm__promise,
.s--deep .comm__item .comm__promise { color: var(--blue-soft, var(--blue)); }
.comm__when {
  display: block;
  margin-top: 10px;
  font-size: var(--t--1);
  color: var(--ink-muted);
}
.s--navy .comm__item .comm__when,
.s--deep .comm__item .comm__when { color: var(--on-navy-muted); }

/* --------------------------------------------------------------- görsel */
.figure { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--white); overflow: hidden; }
.s--navy .figure, .s--deep .figure { border-color: var(--navy-hairline); background: var(--navy-raise); }
.figure svg, .figure img { width: 100%; height: auto; }
.split { display: grid; gap: clamp(28px, 4.5vw, 60px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split--wide-art { }
/* ALTI TEMA VİTRİNİ — İKİ AYRI DÜZEN, TEK MARKUP.
   ÖNCEKİ DÜZEN NİÇİN BIRAKILDI: altı kutu her genişlikte yan yana
   diziliyordu. Telefonda 3+3 ızgara her karta ~110 px bırakıyor, geniş
   ekranda tek satır ~190 px bırakıyordu; iki durumda da kart okunmuyor,
   yalnız rengi görünüyordu — yani "renk örneği". Artık telefonda tek
   elle kaydırılan bir RAY, tablet ve üstünde okunur boyda bir IZGARA
   vardır. Kartlar her iki düzende de kendi oranında durur; gerilme ve
   kırpma yoktur.
   ÜSTTEKİ METİNDEN AYRILIR: ızgara, başlık ve açıklamayla aynı nefes
   aralığında durmaz (`.flow > .theme-showcase`). */
.theme-showcase { position: relative; }
.flow > .theme-showcase { margin-top: clamp(44px, 5vw, 76px); }

/* TELEFON: RAY. Altı kart yan yana sıkıştırılmaz; tek elle kaydırılan bir
   şeride dizilir. Kart ekranın %80'ini kaplar, yanındaki kartın bir kısmı
   görünür — kaydırılabilir olduğunu söyleyen şey budur. Yakalama noktası
   (`scroll-snap`) her kartı ortalar, böylece ray yarı yolda durmaz. */
.theme-grid {
  list-style: none; margin: 0; padding: 0 0 4px;
  display: flex; gap: clamp(12px, 3vw, 20px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.theme-grid::-webkit-scrollbar { display: none; }
.theme-card { margin: 0; flex: 0 0 80%; scroll-snap-align: center; }

/* TABLET VE ÜSTÜ: ray biter, ızgara başlar. Altı tema İKİ satırda ÜÇ
   sütun olarak durur — kart kendi oranında ve OKUNUR boyda çizilir.
   Tek satırda altı kart, 1200 px'lik kabukta her birine ~190 px bırakır;
   o boyda kart yine "renk örneği" olurdu. */
@media (min-width: 720px) {
  .theme-grid {
    display: grid; overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 0;
  }
  .theme-card { flex: none; }
}
@media (min-width: 1000px) {
  .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* NOKTALAR — yalnızca ray modunda ve yalnızca betik kurabildiyse. */
.theme-dots {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 18px; padding: 0;
}
.theme-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid currentColor; background: transparent;
  color: inherit; opacity: 0.45; cursor: pointer;
}
.theme-dots button[aria-current="true"] { background: currentColor; opacity: 1; }
@media (min-width: 720px) { .theme-dots { display: none; } }

.theme-card img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid rgba(10, 31, 68, 0.14);
}
.s--navy .theme-card img { border-color: rgba(255, 255, 255, 0.16); }
.theme-card__name {
  margin-top: 10px; font-size: var(--t--1); font-weight: 600;
}

/* ------------------------------------------------------------- SERVİS TEZGÂHI
   Servis Partner sayfasının hero'su. Beş bloğun beş ayrı hero'su vardır;
   bu, GARAJIN MÜŞTERİYE VERDİĞİ ÜÇ ÇIKTIYI yan yana koyan bir tezgâhtır:
   araca bağlı kalıcı QR, müşterinin açtığı dijital defter ve A4 servis
   raporu. Üçü de ürünün kendi ekranları/belgesidir. */
.bench {
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end;
}
@media (min-width: 900px) { .bench { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bench figure {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--navy-hairline); background: var(--navy-raise);
}
.bench img { display: block; width: 100%; height: auto; }
/* Ortadaki çıktı öne çıkar: müşterinin eline geçen şey odur. */
@media (min-width: 900px) { .bench figure:nth-child(2) { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .bench figure:nth-child(2) { transform: none; } }

/* ------------------------------------------------------ MÜŞTERİ DÖNGÜSÜ
   Blok 2'nin yolculuk şeridi DEĞİLDİR: orada tek yönlü bir akış vardır,
   burada KAPANAN bir döngü — müşteri aynı kayıtla geri döner. Aralardaki
   işaret bunu söyler; son adımdan sonra ok yoktur, çünkü başa dönülür. */
.cycle { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cycle { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cycle__item {
  position: relative; padding: 14px 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  font-size: var(--t--1); font-weight: 600;
}
.s--navy .cycle__item, .s--deep .cycle__item {
  border-color: var(--navy-hairline); background: var(--navy-raise);
}
.cycle__item span { display: block; margin-top: 4px; font-weight: 400; color: var(--ink-muted); }
.s--navy .cycle__item span, .s--deep .cycle__item span { color: var(--on-navy-muted); }

/* ------------------------------------------------- ÇIKTI TEMASI ŞERİDİ
   Tema, panelin değil MÜŞTERİYE GİDEN ÇIKTININ başlığını değiştirir.
   Bu yüzden altı görselin hepsi o başlık bandının ta kendisidir — aynı
   kadraj, altı tema. Tam sayfa altı kez gösterilmez; değişen şey neyse o
   gösterilir. */
.outthemes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .outthemes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .outthemes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.outthemes figure { margin: 0; }
.outthemes img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md); border: 1px solid var(--navy-hairline);
}
/* Tema adı, kabul edilmiş tema galerileriyle aynı kalıpta: alt yazı
   (`figcaption`) DEĞİL, görselin altındaki ad satırı. Sayfa genelinde
   "maketin altında alt yazı yok" kuralı tek biçimde korunur. */
.outthemes__name {
  margin: 8px 0 0; font-size: var(--t--1); font-weight: 600;
}

/* ------------------------------------------------ ŞEKİLLENEN DÖRT ŞEY
   Blok 6'nın (Premium) hero şeridi. Önceki beş bloğun beş ayrı hero'su
   vardır: metin+telefon, tek kart bandı, üç kartlı pano, üst üste iki
   kart ve iki telefonlu tezgâh. Altıncısı DÖRT KÜÇÜK KARE'dir, çünkü
   Premium tek bir ekran değildir — "aracınıza göre şekillenen" dört ayrı
   şeydir. Dördü de ürünün kendi yüzeyinden gelir.

   KADRAJ BURADADIR, satır içi stilde DEĞİL: kurumsal vitrin
   `style-src 'self'` ile korunur, satır içi stil engellenir ve öğe
   0 px'e düşerdi (ölçüldü). Dört görselin oranları farklıdır
   (1.31 / 1.22 / 2.20 / 0.51), bu yüzden her birinin kapakta GÖRÜNECEK
   yeri ayrı verilir. */
.shapes {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* DÖRT SÜTUNA 700 px'DE GEÇİLİR, 900'DE DEĞİL: ölçüldü — 768 px'te iki
   sütun kaldığında her kare 340x148 oluyor ve geniş/kısa kadraj araç
   kartının kilometresini, park kartının "Aracımı Bul" satırını kesiyordu.
   Dört sütunda kareler telefondaki oranına döner ve içerik okunur kalır. */
@media (min-width: 700px) {
  .shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
/* AKIŞ RİTMİ GERİ VERİLİR. `.shapes`in `margin: 0` kuralı `.flow > * + *`
   kuralını eziyordu: ÖLÇÜLDÜ — çağrı düğmeleriyle kareler arasındaki
   boşluk altı kırılımın HEPSİNDE 0 px'ti, kareler düğmelere yapışıyordu.
   Aynı kusur daha önce `.store-row`da yaşandı ve aynı desenle çözüldü. */
.flow > .shapes { margin-top: clamp(34px, 4.4vw, 60px); }
.shape { margin: 0; }
.shape img {
  display: block; width: 100%; height: clamp(148px, 19vw, 200px);
  object-fit: cover; object-position: center center;
  border-radius: var(--r-md); border: 1px solid var(--navy-hairline);
  background: var(--navy);
}
/* 1 — araç kartı: oran kutuya yakın, tam kart görünür.
   2 — park kartı: üst banttaki plaka ve süre okunur kalsın.
   3 — Sıradaki İş: GENİŞ kart, metin SOLDA; merkez kadraj metni keserdi.
   4 — dijital kart: DİKEY kart; kapak bandı ve kimlik satırı gösterilir. */
/* 1 — SOLDAN hizalanır: ölçüldü, merkez kadrajda 768 px'te plakanın ilk
   hanesi ("34 KPN 926" → "4 KPN 926") kırpılıyordu. */
.shape[data-shape="1"] img { object-position: left 34%; }
.shape[data-shape="2"] img { object-position: center 28%; }
.shape[data-shape="3"] img { object-position: left center; }
.shape[data-shape="4"] img { object-position: center 14%; }
.shape__name { margin: 8px 0 0; font-size: var(--t--1); font-weight: 600; }
.s--navy .shape__name, .s--deep .shape__name { color: var(--on-navy); }

/* -------------------------------------------------------- KART YIĞINI
   Dijital Kart sayfasının hero'su. Dört bloğun dört ayrı hero'su vardır:
   Blok 1 metin+telefon, Blok 2 tek kart bandı, Blok 3 üç kartlı pano,
   Blok 4 ise ÜST ÜSTE BİNEN İKİ KART. İkisi de gerçek kartın kendisidir
   (kamusal adresten alınmış iki tema); telefon çerçevesi yoktur, çünkü
   satılan şey telefon değil KARTIN KENDİSİDİR. */
.cardstack { position: relative; padding-bottom: 8%; }
.cardstack figure {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--hairline); background: var(--white);
  box-shadow: 0 26px 60px -34px rgba(10, 31, 68, .5);
}
.s--navy .cardstack figure, .s--deep .cardstack figure { border-color: var(--navy-hairline); }
.cardstack img { display: block; width: 100%; height: auto; }
.cardstack__back {
  position: absolute; right: 0; top: 7%; width: 52%;
  opacity: .92; transform: rotate(2.5deg);
}
.cardstack__front { position: relative; width: 62%; z-index: 1; }
@media (max-width: 719px) {
  .cardstack__back { width: 48%; top: 5%; }
  .cardstack__front { width: 66%; }
}
@media (prefers-reduced-motion: reduce) { .cardstack__back { transform: none; } }

/* ------------------------------------------------------------ BAĞLANTI ÇİPLERİ
   Kartın taşıyabileceği bağlantı türleri. Liste DEĞİL küme olarak durur:
   ziyaretçi "benimki de var mı" sorusunu tek bakışta cevaplar. Yalnızca
   ÜRÜNÜN GERÇEKTEN desteklediği türler yazılır. */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 8px 14px; font-size: var(--t--1); font-weight: 600;
}
.s--navy .chips li, .s--deep .chips li {
  border-color: var(--navy-hairline); background: var(--navy-raise);
}

/* ----------------------------------------------------- ARAÇ KONTROL ODASI
   Araç Asistanı sayfasının hero'su. Blok 1 metin+telefon çerçevesi, Blok 2
   tek bir kart bandıdır; burası ÜÇ GERÇEK KARTIN yan yana durduğu asimetrik
   bir panodur. Kartların hepsi V2 ekranının KENDİ pikselleridir (kadraj);
   hiçbir arayüz yeniden çizilmemiştir. */
.dash { display: grid; gap: clamp(12px, 1.6vw, 18px); }
@media (min-width: 900px) {
  .dash { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .dash__main { grid-row: span 2; }
}
.dash__tile {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--navy-hairline); background: var(--navy-raise);
}
.dash__tile img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------- SERVİS ZAMAN ÇİZGİSİ
   Servis geçmişi bir liste değil, bir ZAMAN ÇİZGİSİDİR: her ziyaret kendi
   tarihi, göstergesi ve kimin yaptığıyla durur. Blok 2'nin yatay yolculuk
   şeridiyle karıştırılmaz — o bir AKIŞ, bu bir GEÇMİŞTİR. */
.tline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.tline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--hairline);
}
.s--navy .tline::before, .s--deep .tline::before { background: var(--navy-hairline); }
.tline__item { position: relative; padding: 0 0 22px; }
.tline__item:last-child { padding-bottom: 0; }
.tline__item::before {
  content: ""; position: absolute; left: -26px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--blue); background: var(--white);
}
.s--navy .tline__item::before, .s--deep .tline__item::before { background: var(--navy); }
.tline__when {
  display: block; font-size: var(--t--2); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.s--navy .tline__when, .s--deep .tline__when { color: var(--on-navy-muted); }
.tline__item h3 { margin: 4px 0 4px; font-size: var(--t-0); }
.tline__item p { margin: 0; font-size: var(--t--1); color: var(--ink-muted); }
.s--navy .tline__item p, .s--deep .tline__item p { color: var(--on-navy-muted); }

/* ------------------------------------------------------- PARK YOLCULUĞU
   Park Asistanı sayfasının kendi bileşeni. BLOK 1'İN DÜZENİ DEĞİLDİR:
   orada metin/telefon dönüşümlü bölümler var; burada park etmekten araca
   dönmeye kadar giden NUMARALI bir şerit var. Numara burada süslemedir
   değil, BİLGİDİR: adımların sırası gerçekten önemlidir. */
.journey {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(18px, 2.4vw, 26px);
  counter-reset: durak;
}
@media (min-width: 720px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .journey { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.journey__item { position: relative; padding-top: 34px; }
.journey__item::before {
  counter-increment: durak; content: counter(durak, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: var(--t--1); font-weight: 700; letter-spacing: .1em;
  color: var(--blue);
}
/* Durakları birbirine bağlayan ince çizgi — yalnız geniş ekranda, son
   durakta yok. Süsleme değil: bunun bir SIRA olduğunu söyler. */
@media (min-width: 1000px) {
  .journey__item::after {
    content: ""; position: absolute; top: 9px; left: 34px; right: -12px;
    height: 1px; background: var(--hairline);
  }
  .s--navy .journey__item::after, .s--deep .journey__item::after {
    background: var(--navy-hairline);
  }
  .journey__item:last-child::after { display: none; }
}
.journey__item h3 { margin: 0 0 6px; font-size: var(--t-0); }
.journey__item p { margin: 0; font-size: var(--t--1); color: var(--ink-muted); }
.s--navy .journey__item p, .s--deep .journey__item p { color: var(--on-navy-muted); }

/* PARK KARTI — hero'nun görseli.
   Blok 1'in hero'su metin + TAM TELEFON çerçevesidir; bu sayfa o
   kompozisyonu tekrarlamaz. Burada gerçek ekranın AKTİF PARK KARTI kendi
   oranında durur: telefon çerçevesi yok, kırpma yok, esnetme yok.

   ÖLÇÜLEN KUSUR (ilk deneme): aynı görsel tam genişlikte bir banda
   `cover` ile konmuştu. 1170x2532'lik bir telefon ekranı 1200x320'lik
   kutuya sığdırılınca dev harflere çıkıyor ve alttaki satır ortadan
   kesiliyordu. Çözüm kadrajı kartın kendisine daraltmak ve görseli KENDİ
   oranında göstermektir. */
.park-band {
  margin: 0; max-width: 560px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--hairline); background: var(--white);
  box-shadow: 0 18px 40px -28px rgba(10, 31, 68, .45);
}
.s--navy .park-band, .s--deep .park-band {
  border-color: var(--navy-hairline); background: var(--navy-raise);
}
.park-band img { display: block; width: 100%; height: auto; }

/* BLOK ÖNİZLEME RAYI VE OKLARI KALDIRILDI (PO kararı, 2026-09-22).
   Ana sayfadaki altı kartlık ray, altı bağımsız ürün sayfasına giden
   gezinmenin ikinci bir kopyasıydı. Ray gidince `.block-rail*`,
   `.block-card*`, `[data-cover="N"]` kadrajları ve `.rail-arrow`
   kuralları da KULLANILMAYAN kod hâline geldi ve silindi. Tema vitrini
   (`.theme-showcase`) ok KULLANMAZ; noktaları `themerail.js` ekler. */

/* BELGE GÖRSELİ — A4 rapor. Telefon çerçevesi değildir: kendi oranında
   durur, gerilmez, kırpılmaz ve mat ParkPing yüzeyinde yumuşak köşeyle
   çizilir. */
.doc-shot { margin: 0; max-width: 420px; }
.doc-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid rgba(10, 31, 68, 0.12);
  background: #fff;
}

/* Sayfa ritmi: ardışık bölümlerde görsel bir sağda, bir solda durur.
   Yalnız masaüstünde; telefonda tek sütun sırası KORUNUR, böylece metin
   her zaman görselinden önce okunur. */
@media (min-width: 900px) { .split--reverse > :first-child { order: 2; } }
@media (min-width: 900px) { .split--wide-art { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }

.product-shot { display: grid; place-items: center; padding: clamp(20px, 4vw, 48px); }
.product-shot img { width: min(100%, 420px); border-radius: 4%; }

/* -------------------------------------------------------------- footer */
.site-footer {
  background: var(--navy); color: var(--on-navy-muted);
  padding-block: clamp(44px, 5.5vw, 72px);
  border-top: 1px solid var(--navy-hairline);
}
.site-footer__grid { display: grid; gap: 34px; }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); } }
.site-footer h2 {
  font-size: var(--t--1); font-weight: 800; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--on-navy); margin-bottom: 14px;
}
.site-footer a { color: var(--on-navy-muted); text-decoration: none; }
.site-footer a:hover { color: var(--on-navy); text-decoration: underline; }
.site-footer li + li { margin-top: 10px; }
.site-footer .brand img { height: 44px; margin-bottom: 16px; }
.site-footer__legal {
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid var(--navy-hairline); font-size: var(--t--1);
}

/* ------------------------------------------------- sayfa yolu (breadcrumb) */
.crumbs { background: var(--navy-deep); color: var(--on-navy-muted); padding-block: 12px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t--1); }
.crumbs li + li::before { content: '/'; margin-right: 8px; opacity: 0.55; }
.crumbs a { color: var(--on-navy-muted); text-decoration: none; }
.crumbs a:hover { color: var(--on-navy); text-decoration: underline; }
.crumbs [aria-current='page'] { color: var(--on-navy); }

/* ----------------------------------------------------- özellik açılır menü */
/* Masaüstü başlık kalabalıklaşmasın diye özellik rotaları tek bir erişilebilir
   grupta toplanır. Grup klavyeyle çalışır: Escape kapatır, odak dışarı
   çıktığında kapanır. */
.nav-group { position: relative; }
.nav-group__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; cursor: pointer; font: inherit;
  font-size: var(--t--1); font-weight: 600;
}
.nav-group__toggle[data-section='true'] { color: var(--on-navy); }
.nav-group__chevron {
  width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
}
.nav-group__toggle[aria-expanded='true'] .nav-group__chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.nav-group__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 70;
  min-width: 268px; padding: 8px;
  background: var(--navy-deep); border: 1px solid var(--navy-hairline);
  border-radius: var(--r-md);
  display: none;
}
.nav-group__menu[data-open='true'] { display: block; }
.nav-group__link {
  display: block; padding: 11px 12px; border-radius: var(--r-sm);
  font-size: var(--t--1); font-weight: 600; color: var(--on-navy-muted);
  text-decoration: none;
}
.nav-group__link:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-navy); }
.nav-group__link[aria-current='page'] { color: var(--on-navy); box-shadow: inset 3px 0 0 var(--blue); }

.nav-panel__group {
  padding: 22px 0 6px; font-size: var(--t--1); font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-navy-muted);
}
.nav-panel__link--sub { padding-left: 14px; font-size: var(--t-0); }

/* ------------------------------------------------------- metin içi bağlantı */
.link { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.s--navy .link, .s--deep .link, .hero .link { color: var(--blue); }
.card h3 .link { text-decoration: none; }
.card h3 .link:hover { text-decoration: underline; }

/* ------------------------------------------------------------- kart yüzleri */
/* Onaylı Smart Tag'in ön ve arka yüzü BİRLİKTE gösterilir (sözleşme §3 C4). */
.card-faces { display: grid; gap: clamp(18px, 3vw, 30px); }
@media (min-width: 900px) { .card-faces { grid-template-columns: 1fr 1fr; } }
.card-face {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden;
}
.s--navy .card-face, .s--deep .card-face {
  background: var(--navy-raise); border-color: var(--navy-hairline);
}
.card-face img { width: 100%; height: auto; display: block; }

/* EŞİT YÜKSEKLİK — TASK 5.3 ürün karşılaştırması.
   Smart Sticker görseli dikey (yaklaşık 1:1.3), Smart Tag yüzü ise yatay
   (yaklaşık 2:1). İkisi doğal oranlarıyla yan yana konunca kartlar dengesiz
   çıkıyordu: sticker görseli 560 px, tag görseli 300 px yüksekti ve iki kartın
   eylem düğmeleri aynı hizaya GELMİYORDU (1440 px'te ölçüldü). Ortak bir oran
   kutusu bunu çözer. `contain` olduğu için hiçbir görsel KIRPILMAZ ve oranı
   BOZULMAZ; yalnızca ortalanır. */
.card-face--even { padding: clamp(10px, 1.6vw, 18px); }
/* Oran KUTUNUN kendisinde değil GÖRSELDE tanımlanır. Kutuya verildiğinde
   ızgara satırı içeriğe göre büyüyor ve oran sessizce yok sayılıyordu
   (ölçüldü: 435x543, beklenen 435x326). Görselde `width: 100%` + oran, kesin
   bir yükseklik üretir; `contain` da kırpmadan ortalar. */
.card-face--even img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
}
.card-face figcaption {
  padding: 16px 20px 20px; color: var(--ink-muted); font-size: var(--t--1);
}
.card-face figcaption strong { color: var(--ink); }
.s--navy .card-face figcaption, .s--deep .card-face figcaption { color: var(--on-navy-muted); }
.s--navy .card-face figcaption strong, .s--deep .card-face figcaption strong { color: var(--on-navy); }

/* --------------------------------------------------------------------- SSS */
.faq { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--white); }
.s--navy .faq, .s--deep .faq { background: var(--navy-raise); border-color: var(--navy-hairline); }
.faq__item + .faq__item { border-top: 1px solid var(--hairline); }
.s--navy .faq__item + .faq__item, .s--deep .faq__item + .faq__item { border-top-color: var(--navy-hairline); }
.faq__item > summary {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px; cursor: pointer; list-style: none; min-height: 48px;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: ''; flex: none; margin-left: auto; margin-top: 7px;
  width: 9px; height: 9px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform 140ms ease;
}
.faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq__q { font-size: var(--t-1); font-weight: 700; margin: 0; }
.faq__a { padding: 0 22px 20px; }
.faq__a p { color: var(--ink-muted); max-width: var(--measure); }
.s--navy .faq__a p, .s--deep .faq__a p { color: var(--on-navy-muted); }

/* ------------------------------------------------------- cihaz düzenlemeleri */
.device-row--single { max-width: 320px; }
.rail__art--device {
  display: grid; place-items: center; padding: 14px;
  background: var(--canvas); aspect-ratio: 5 / 3; overflow: hidden;
}
.rail__art--device img {
  width: auto; height: 100%; object-fit: contain;
  border-radius: 10px; border: 2px solid var(--navy);
}

/* ---------------------------------------------------------------- mağaza */
.price { font-size: var(--t-3); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.price strong { font-weight: 800; color: var(--navy); }
.s--navy .price strong, .s--deep .price strong { color: var(--blue); }

/* ==========================================================================
   TASK 8.5.8M — hukuki metin sayfaları, alt bilgi ve rıza arayüzü.

   TASARIM KARARI: hukuki sayfalar ONAYLI 1200 px kabuğu kullanır — başlık ve
   alt bilgiyle aynı hizada. Genişlik METNİ GERMEK için değil, GEZİNME YARATMAK
   için kullanılır: solda yapışkan bir bölüm dizini, sağda ~70–85 karakterlik
   okunabilir bir makale kolonu.

   Numaralandırma (01, 02, …) burada süs değildir: hukuki metinlerin bölümleri
   sıralıdır ve insanlar onlara numarayla atıf yapar.

   Yalnızca mevcut token'lar kullanılır. Yeni renk, degrade, parlaklık veya
   gölge üretilmez.
   ========================================================================== */

.section--legal { padding-block: clamp(40px, 6vw, 72px); }

/* --- Sayfa başlığı ------------------------------------------------------- */
.legal-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 44px); }
.legal-head h1 {
  font-size: var(--t-3);
  line-height: 1.1;
  margin: 6px 0 14px;
}
.legal-head__meta {
  margin: 0;
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* --- İki kolon ----------------------------------------------------------- */
.legal-layout {
  display: grid;
  /* `minmax(0, 1fr)` ŞART: düz `1fr` min-content'e saygı duyar ve geniş bir
     tablo kolonu ITIP taşmaya yol açar. Sıfır minimum, tabloyu KENDİ
     kaydırma kabına hapseder. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 980px) {
  .legal-layout {
    /* Ray sabit; makale kolonu okunabilirlik sınırına kadar büyür ve
       kalan boşluk KENARDA kalır — metin asla ekran boyu uzamaz. */
    grid-template-columns: 232px minmax(0, 1fr);
    justify-content: start;
  }
  .legal-layout > * { min-width: 0; }
  /* Dizini olmayan sayfa TEK kolondur: makale, ray sütununa sıkışmaz. */
  .legal-layout--solo { grid-template-columns: minmax(0, 1fr); }
}

/* --- İçindekiler rayı ---------------------------------------------------- */
.legal-toc { position: sticky; top: 24px; }
.legal-toc__title {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.legal-toc__list { list-style: none; margin: 0; padding: 0; }
.legal-toc__list li { margin: 0; }
.legal-toc__list a {
  display: grid;
  grid-template-columns: 2.1em 1fr;
  gap: 4px;
  align-items: baseline;
  padding: 7px 0;
  font-size: var(--t--1);
  line-height: 1.45;
  color: var(--ink-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -12px;
}
.legal-toc__list a:hover {
  color: var(--navy);
  border-left-color: var(--blue);
}
.legal-toc__n {
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
  color: var(--hairline-strong);
}
.legal-toc__list a:hover .legal-toc__n { color: var(--blue); }

@media (max-width: 979.98px) {
  /* Mobilde ray, makalenin ÜSTÜNDE katlanabilir bir dizin olarak kalır;
     yapışkanlık kapatılır. */
  .legal-toc {
    position: static;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 16px 18px;
    background: var(--canvas);
  }
  .legal-toc__title { border-bottom: 0; padding-bottom: 0; }
}

/* --- Makale -------------------------------------------------------------- */
/* SATIR UZUNLUĞU KAPISI: `ch` birimi ELEMANIN kendi yazı boyutuna göre
   çözülür, bu yüzden sınır kolona değil MAKALEYE konur ve makalenin yazı
   boyutu burada sabitlenir. Ölçülen sonuç ~72–80 karakter. */
.legal {
  color: var(--ink);
  font-size: var(--t-0);
  max-width: 72ch;
}
.legal > :first-child { margin-top: 0; }
.legal h2 {
  font-size: var(--t-1);
  line-height: 1.28;
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 24px;
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal p, .legal li { font-size: var(--t-0); line-height: 1.7; }
.legal p { margin: 0 0 14px; }
.legal ul { padding-left: 1.15em; margin: 0 0 16px; }
.legal li { margin: 7px 0; }
.legal a {
  /* Kanon dışı renk ÜRETİLMEZ: bağlantı, mevcut lacivert token'ı ve altı
     çizgiyle ayırt edilir. */
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal code {
  background: var(--blue-soft);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.92em;
}

/* Kimlik/iletişim bloğu — etiket ve değer aynı ritimde. */
.legal-dl {
  margin: 0 0 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 18px 20px;
  background: var(--canvas);
}
.legal-dl dt {
  font-weight: 600;
  font-size: var(--t--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 16px;
}
.legal-dl dt:first-child { margin-top: 0; }
.legal-dl dd { margin: 4px 0 0; font-size: var(--t-0); line-height: 1.55; }

.legal-callout {
  border: 1px solid var(--hairline-strong);
  border-left: var(--band) solid var(--blue);
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  padding: 16px 18px;
  margin: 22px 0;
}
.legal-callout p { margin: 0; }

.legal-quote {
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-left: var(--band) solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--canvas);
  font-size: var(--t-0);
  line-height: 1.7;
}

/* Geniş tablolar taşmaz, KENDİ İÇİNDE kaydırılır. */
.legal-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 18px 0;
  /* Kaydırılabilir bölge klavyeyle de gezilebilir olmalı. */
  scrollbar-width: thin;
}
.legal-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.legal-table th, .legal-table td {
  border: 1px solid var(--hairline);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  font-size: var(--t--1);
  line-height: 1.55;
}
.legal-table th { background: var(--canvas); font-weight: 600; }

/* --- Alt bilgi: marka satırı + BEŞ anlamlı kolon (TASK 5.3 §17) ---------
   Marka, mağaza rozetleri ve sosyal işaretler artık gezinme kolonlarıyla AYNI
   ızgarada yarışmıyor; kendi satırında durup altına ince bir çizgi bırakıyor.
   Böylece bağlantı kolonları eşit genişlikte kalır ve "Hukuki" kolonu dar
   ekranda öksüz bir satıra düşmez. YENİ RENK VEYA GÖLGE YOKTUR. */
/* FAZ 3: `.site-footer__brand` ve iki kolonlu yerleşimi KALDIRILDI. Alt
   bilgi artık iki BÖLGEDİR (`__main` + `__extra`); kurallar dosyanın
   sonundaki "kompakt alt bilgi" bölümündedir. Ölü kural bırakılmaz. */
/* Üç blok da AYNI dikey ritmi kullanır. */
.site-footer__intro, .site-footer__social, .site-footer__seller {
  display: grid; gap: 14px; align-content: start;
}
.site-footer__social:empty { display: none; }
.site-footer__seller:empty { display: none; }
/* Marka bağlantısı KENDİ genişliğinde kalır. Izgara öğesi olarak esnerse
   dokunma hedefi sessizce satırın tamamına yayılırdı (ölçüldü: 150 → 280 px). */
.site-footer__intro .brand { justify-self: start; }
/* Rozet ve simge satırları alt bilginin SOL eksenini izler — başlıklarla,
   AI ızgarasıyla ve istem kutusuyla aynı hizada. */
.site-footer__intro .store-row,
.site-footer__social .social-row { justify-content: flex-start; }

.site-footer__grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  /* Kolon sayısı ölçüye göre KENDİLİĞİNDEN düşer: 320 px'te bir, tablette
     dört, masaüstünde beş. Sabit kırılma noktası tanımlamak, grup sayısı
     değiştiğinde sessizce bozulurdu. */
  grid-template-columns: 1fr;
  align-items: start;
}
/* DAR EKRANDA TEK SÜTUN. `auto-fit` 360–412 px arasında iki sütun üretiyordu;
   gruplar sırayla sola ve sağa düştüğü için alt bilgi zikzak görünüyordu.
   Tek sütunda her grup AYNI sol eksenden başlar. */
@media (min-width: 620px) {
  .site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
/* Uzun grup geniş ekranda iki sütuna akar ve ızgarada iki hücre kaplar;
   böylece beş grup dengeli bir blok olur. Dar ekranda tek sütuna döner. */
@media (min-width: 1200px) {
  /* BEŞ EŞİT HÜCRE — HER GRUBA BİR KOLON.
     ÖLÇÜLEN KUSUR (TASK 5.4.8, PO bildirimi): "Kullanım" grubu iki hücre
     kaplıyor ve `columns: 2` ile listesi İKİ GÖRSEL SÜTUNA bölünüyordu
     (1440 px'te genişlik 336 px, `column-count: 2`). Sonuç, bağlantıların
     komşu kolona göç etmiş gibi okunmasıydı — başlığı olmayan öksüz bir
     sütun. Grup artık TEK kolondur; dokuz kalem alt alta durur ve her
     başlık kendi bağlantılarının üstünde kalır. */
  .site-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.site-footer__grid > div { min-width: 0; }
.site-footer__grid ul { list-style: none; margin: 0; padding: 0; }
.site-footer__grid li { margin: 0 0 8px; }
/* Alt bilgi metin bağlantıları. Bileşen bağlantıları (mağaza çağrısı ve
   sosyal işaret) BU KURALIN DIŞINDADIR: ikisi de kendi düzenini kurar. */
.site-footer__grid a:not(.store-cta):not(.social-icon) {
  display: inline-block; padding: 2px 0;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--navy-hairline);
}
.site-footer__legal { margin: 0; font-size: var(--t--1); color: var(--on-navy-muted); }
/* SATICI KÜNYESİ — alt bilgi SOL KOLONU.
   Banka/POS incelemesi ve mesafeli satış mevzuatı satıcının unvanını, açık
   adresini ve iletişimini SİTENİN HER SAYFASINDA arar.

   KONUM DEĞİŞTİ (PO, 2026-09-26): künye en alt şeritten sol kolona alındı.
   Alt şeritte tek uzun paragraf olarak duruyor, telif satırını eziyor ve
   taranamıyordu. Burada etiket/değer çiftleri hâlinde, satır satır durur.

   `dt` dar ve sabit değildir: `minmax(auto, 148px)` uzun etiketin kırpılmasını
   önler, dar ekranda ise sütun tek sütuna iner. */
.footer-seller {
  display: grid;
  grid-template-columns: minmax(auto, 148px) minmax(0, 1fr);
  gap: 4px 14px;
  margin: 10px 0 0;
  font-size: var(--t--1);
  line-height: 1.5;
}
.footer-seller dt { color: var(--on-navy-muted); font-weight: 500; }
.footer-seller dd { margin: 0; color: var(--on-navy); }
.footer-seller a { color: var(--on-navy); text-decoration: underline; }

@media (max-width: 560px) {
  /* Dar ekranda iki sütun adresi kırpıyordu: etiket ve değer alt alta düşer
     ve uzun adres doğal yerlerinden kırılır. */
  .footer-seller { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .footer-seller dt { margin-top: 8px; }
}
.site-footer__pref { margin: 0; font-size: var(--t--1); }
.site-footer__pref a { color: var(--on-navy); text-decoration: underline; }
.site-footer a { color: var(--on-navy-muted); }

/* --- Rıza kartı ---------------------------------------------------------
   Tam genişlikte bir şerit DEĞİL: ortalanmış, kompakt bir kart. Alt bilgiyi
   ezmez, kırpmaz ve rıza DUVARI değildir — arkadaki içerik okunabilir kalır. */
/* Kart açıkken sayfanın SONUNA, kart yüksekliği kadar boşluk eklenir; böylece
   alt bilgi kartın altında kalmaz ve kaydırılarak TAMAMEN okunabilir.
   Yükseklik `consent.js` tarafından ölçülüp yazılır. */
body.has-consent { padding-bottom: var(--consent-space, 0px); }

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  padding: clamp(12px, 2vw, 20px);
  pointer-events: none;          /* yalnızca kartın kendisi tıklanabilir */
}
.consent__box {
  pointer-events: auto;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  gap: 10px;
  background: var(--navy);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--r-md);
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 24px);
  color: var(--on-navy);
}
.consent__title { font-size: var(--t-1); margin: 0; line-height: 1.25; }
.consent__desc {
  margin: 0;
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--on-navy-muted);
}
.consent__current { display: block; margin-top: 6px; color: var(--on-navy); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* İKİ DÜĞME BİREBİR AYNI: aynı boyut, aynı zemin, aynı kenar, aynı ağırlık.
   Reddetmek kabul etmek kadar kolaydır; görsel hiyerarşiyle yönlendirme
   YAPILMAZ. */
.consent__btn {
  /* `1 1 0` ŞART: `auto` temeli, düğmeleri METİN UZUNLUĞUNA göre farklı
     genişliklerde bırakıyordu ("Kabul et" 374 px, "Reddet" 366 px). Eşit
     temel, iki seçeneği BİREBİR aynı boyutta tutar — yönlendirme yapan bir
     görsel hiyerarşi oluşmaz. */
  flex: 1 1 0;
  min-height: 44px;
  min-width: 150px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--white);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  font-size: var(--t--1);
  cursor: pointer;
}
.consent__btn:hover { background: var(--blue-soft); }
.consent__links { margin: 0; font-size: var(--t--1); color: var(--on-navy-muted); }
.consent__links a { color: var(--on-navy); }

/* Görünür klavye odağı. */
.consent__btn:focus-visible,
.consent__links a:focus-visible,
.site-footer__pref a:focus-visible,
.legal-toc__list a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .consent, .consent__btn { transition: none !important; animation: none !important; }
  .legal-toc { scroll-behavior: auto; }
}

/* --- Rehberler ve video (TASK 8.5.8N) -------------------------------------
 * YENİ RENK, DEGRADE VEYA GÖLGE YOKTUR. Tümü mevcut belirteçlerden türetilir;
 * kart, başlık ve boşluk ritmi sitenin geri kalanıyla AYNIDIR.
 */

/* Rehber gövdesi. Ölçü sınırı okunabilirlik içindir: uzun metin satırı
 * ekran genişliğine yayılmaz. */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li { margin-bottom: 0.4em; }

/* `note` bloğu: gövde içinde vurgulanan kısa uyarı. Kenar çizgisi mevcut
 * mavi belirtecidir; arka plan mavinin açık zemindeki nötr karşılığıdır. */
.prose .note {
  background: var(--blue-soft);
  border-left: var(--band) solid var(--blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 18px;
  margin: 1.2em 0;
}

/* Video kartı. `minmax(0, 1fr)` zorunludur: varsayılan `1fr` min-content'e
 * saygı duyar ve gömülü çerçeve dar ekranlarda ızgarayı TAŞIRIR (bu hata
 * TASK 8.5.8M'de gerçek tarayıcıda görüldü). */
@media (min-width: 760px) {
  .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.video-card { min-width: 0; }

/* Yükleme öncesi yüzey. Üçüncü taraf görsel YOKTUR; bu yüzden alan,
 * videonun en boy oranıyla ayrılır ve buton dikey olarak ortalanır.
 * Böylece video yüklendiğinde sayfa ZIPLAMAZ (layout shift yok). */
.video-frame {
  margin-top: 4px;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 18px;
  background: var(--canvas);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-sm);
}
.s--navy .video-frame, .s--deep .video-frame {
  background: var(--navy-deep); border-color: var(--navy-hairline);
}
.video-frame.is-loaded {
  padding: 0; border-style: solid; border-color: var(--hairline);
  background: var(--navy-deep); overflow: hidden;
}
.video-note {
  font-size: var(--t--1); color: var(--ink-muted); margin: 0; max-width: 40ch;
}
.s--navy .video-note, .s--deep .video-note { color: var(--on-navy-muted); }
.video-frame.is-loaded .video-note { display: none; }

/* Gömülü çerçeve ayrılan alanı TAM doldurur. */
.video-embed { width: 100%; height: 100%; border: 0; display: block; }

/* Tek ogeli video izgarasi: kart okunabilir bir genislikte durur, satirin
 * yarisini bos birakmaz ve tam genislige de gerilmez. */
.cards--1 { max-width: 640px; }

/* TASK 5.5 — SATIŞ NOKTALARI.
 *
 * Satır içi stil KULLANILAMAZ: site `style-src 'self'` taşır ve üretilen
 * ölçüler buraya yazılmazsa öğe sessizce 0 px'e düşer (daha önce ölçüldü).
 * Yeni bir tasarım dili kurulmaz; var olan `card`/`cards` düzenine yalnız
 * süzgeç satırı ve adres tipografisi eklenir. */
.sp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 8px;
}
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* DAR EKRANDA TAM GENİŞLİK: 320 px'te üç kutuyu yan yana sıkıştırmak
   * süzgeci kullanılamaz hâle getirirdi. */
  flex: 1 1 220px;
  min-width: 0;
}
.sp-field > span {
  font-size: 0.85rem;
  font-weight: 600;
}
.sp-field select,
.sp-field input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(10, 31, 68, 0.18);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: #0A1F44;
}
.sp-card .sp-address {
  /* UZUN ADRES TAŞMAZ, SARAR. */
  overflow-wrap: anywhere;
  margin: 0;
}
.sp-card[hidden] { display: none; }
.sp-none { max-width: 42rem; }

/* --- FAZ 3: ana sayfa videosu, açılır bloklar, üçlü kart ızgarası ------- */

/* TABLET: üç kartlı ızgara 2 + 1 olur. `.cards--3` yalnız 900 px'ten sonra
   üç kolona geçiyordu; arada tek kolona düşüyor ve tablet boşa gidiyordu. */
@media (min-width: 760px) and (max-width: 899px) {
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* VİDEO — oran kutusu SABİT (16:9, kaynak 1280x720 ölçüldü). Video
   yüklenmeden de yer ayrılır: düzen kaymaz (CLS). Taşma yoktur. */
.video {
  position: relative; width: 100%; max-width: 900px;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: var(--navy); border: 1px solid var(--hairline);
}
.video__el { display: block; width: 100%; height: 100%; object-fit: contain; }

/* AÇILIR BLOKLAR — ekosistem. `.faq` ile aynı dil; ikinci bir bileşen
   üretilmez, yalnız kapalı hâlde tek satırlık fayda taşır. */
.disc { display: grid; gap: 10px; }
.disc__item {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--r-md); overflow: hidden;
}
.disc__item > summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 18px;
  position: relative; display: grid; gap: 4px;
}
.disc__item > summary::-webkit-details-marker { display: none; }
.disc__item > summary::after {
  content: ""; position: absolute; right: 20px; top: 22px;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg);
  transition: transform .18s ease;
}
.disc__item[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.disc__q { margin: 0; font-size: var(--t-0); font-weight: 700; }
.disc__hint { color: var(--ink-muted); font-size: var(--t--1); }
.disc__a { padding: 0 18px 18px; color: var(--ink-muted); }
.disc__a p { margin: 0 0 8px; }
.disc__a p:last-child { margin-bottom: 0; }

/* --- FAZ 3: kompakt alt bilgi, açılır gruplar, ikincil AI bloğu -------- */

/* ÜST BÖLGE: solda bağlantı grupları, sağda satıcı künyesi. */
.site-footer__main { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .site-footer__main { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; }
}
.site-footer__grid { display: grid; gap: 6px; }
@media (min-width: 620px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; } }
/* Masaüstünde BEŞ grup BEŞ kolondur: her grup kendi kolonunda durur ve
   uzun bir grup (Hukuki) satır yüksekliğini diğerlerine dayatmaz —
   üç kolonlu denemede alt bilgi 2108 px'e çıkmıştı (ölçüldü). */
/* Masaüstünde ÜÇ kolon: Türkçe hukuki etiketler beş dar kolonda üç satıra
   sarıyor ve alt bilgiyi uzatıyordu (ölçüldü: 5 kolon 1892 px). Üç kolonda
   etiketler tek satıra sığar. Gruplar kendi yüksekliğine oturur. */
/* BEŞ BAŞLIK TEK SATIRDA — TASK 8.5.8AD.
   Üç kolon, grupların AÇIK olduğu döneme aitti: beş dar kolonda Türkçe hukuki
   etiketler üç satıra sarıyordu (ölçüldü). Gruplar artık varsayılan olarak
   KAPALI geldiği için kolonun taşıması gereken tek şey kısa başlıktır
   (ÜRÜNLER … HUKUKİ) ve beş eşit hücre rahatça sığar. Bir grup açıldığında
   gövdesi kendi kolonunda akar. */
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 20px; }
  .footer-col { align-self: start; }
  /* Başlıklar aynı taban çizgisinde dursun: kapalı gruplar eşit yükseklikte
     olduğundan satır hizası kendiliğinden korunur, ama açılan grup komşunun
     başlığını AŞAĞI İTMEMELİDİR. */
  .footer-col > summary { padding-right: 16px; }
}
/* Açılan grup kolonun genişliğini kullanır. */
.footer-col[open] > .footer-col__body { display: grid; }

/* BAĞLANTI GRUBU — telefonda accordion, masaüstünde her zaman açık. */
.footer-col { border-bottom: 1px solid var(--navy-hairline); }
.footer-col > summary {
  cursor: pointer; list-style: none; padding: 12px 0; position: relative;
}
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col > summary::after {
  content: ""; position: absolute; right: 2px; top: 18px;
  width: 8px; height: 8px; border-right: 2px solid var(--on-navy-muted);
  border-bottom: 2px solid var(--on-navy-muted); transform: rotate(45deg);
  transition: transform .18s ease;
}
.footer-col[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.footer-col h2 { display: inline; font-size: var(--t--1); letter-spacing: .08em;
  text-transform: uppercase; color: var(--on-navy); }
/* `display` BURADA VERİLMEZ: kapalı bir `<details>`in çocuğuna açık bir
   `display` yazmak, tarayıcının gizlemesini EZER ve accordion telefonda
   hiç kapanmaz (ölçüldü: 390 px alt bilgi 1470 px'te kaldı). Kural
   yalnız masaüstü eşiğinde uygulanır. */
.footer-col__body { margin: 0 0 14px; padding: 0; list-style: none; gap: 8px; }
@media (min-width: 900px) {
  .footer-col > summary { padding: 10px 0; }
}

/* SATICI KÜNYESİ — kompakt kart. Bilgi silinmez, yerleşir. */
.site-footer__seller {
  background: var(--navy-raise); border: 1px solid var(--navy-hairline);
  border-radius: var(--r-md); padding: 18px 20px; align-self: start;
}
/* İKİ EŞİT KART — TASK 8.5.8AD.
   TELEFONDA DEĞİŞİKLİK YOKTUR: `display: contents` ile kart sarmalayıcıları
   yerleşimden ÇIKAR, iki `<dl>` alt alta akar ve görünen sonuç bugünküyle
   aynı tek bloktur. Kart çerçevesi YALNIZ masaüstü eşiğinde doğar. */
/* TELEFONDA İKİ `<dl>` TEK LİSTE GİBİ AKAR — İKİ AYRI BOŞLUK KAYNAĞI VARDI,
   İKİSİ DE ÖLÇÜLDÜ:
     1. `.footer-seller` üst boşluğu ikinci kartta tekrarlanıyordu (+10 px).
     2. `.site-footer__seller` bir ızgaradır ve `gap: 14px` taşır; kartlar
        `display: contents` olunca iki `<dl>` onun ızgara ÖĞESİ oluyor ve
        aralarına o boşluk giriyordu (+14 px).
   Sarmalayıcı telefonda `gap: 0` olan KENDİ ızgarası olur: böylece ebeveynin
   boşluğu araya girmez ve satır aralığını yalnız `dt` üst boşluğu belirler —
   bugünküyle aynı. Ölçüm: alt bilgi 1470 px'e geri döndü. */
.footer-seller__cards { display: grid; gap: 0; }
.footer-seller__card { display: contents; }
.footer-seller__card + .footer-seller__card .footer-seller { margin-top: 0; }
/* KÜNYE MASAÜSTÜNDE TAM GENİŞLİK — ÖLÇÜLEREK KARAR VERİLDİ.
   Künye, bağlantı ızgarasının YANINDA 381 px'lik dar bir kolondaydı; ikiye
   bölününce kartlar 184 px kalıyor ve adres satırı dört satıra sarıyordu
   (ölçüldü: 184x423 px). Blok ızgaranın ALTINA, tam genişliğe alınır;
   kartlar ~540 px olur ve dengelenir. Telefonda tek kolon düzeni DEĞİŞMEZ. */
@media (min-width: 900px) {
  .site-footer__main { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Ek üst boşluk VERİLMEZ: ızgara `gap`i zaten ayırıyor. İkisi birlikte
     accordion satırı ile künye arasında boş bir şerit üretiyordu (ölçüldü). */
  .footer-seller__cards {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; align-items: stretch;   /* EŞİT YÜKSEKLİK: üst ve alt hizalı */
  }
  .footer-seller__card {
    display: block; min-width: 0;
    background: var(--navy-raise); border: 1px solid var(--navy-hairline);
    border-radius: var(--r-md); padding: 14px 16px;
  }
  /* Kartlar kendi çerçevesini taşıdığı için dış kutu çerçevesiz kalır —
     KART İÇİNDE KART görüntüsü oluşmaz. */
  .site-footer__seller { background: none; border: 0; padding: 0; }
  .footer-seller__card .footer-seller { margin: 0; }
}

/* İKİNCİL BÖLGE. */
.site-footer__extra {
  display: grid; gap: 22px; margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--navy-hairline);
}
@media (min-width: 900px) {
  .site-footer__extra { grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 3fr);
    align-items: start; }
}
/* YAPAY ZEKÂ ÖZETİ — artık açılır ve ikincil. Mekanizma silinmedi. */
.site-footer__ai > summary { cursor: pointer; list-style: none; }
.site-footer__ai > summary::-webkit-details-marker { display: none; }
.site-footer__ai > summary .footer-sub { display: inline; }
.site-footer__ai > summary::after {
  content: ""; display: inline-block; margin-left: 8px;
  width: 7px; height: 7px; border-right: 2px solid var(--on-navy-muted);
  border-bottom: 2px solid var(--on-navy-muted); transform: rotate(45deg);
}
.site-footer__ai[open] > summary::after { transform: rotate(-135deg); }
.site-footer__ai-body { margin-top: 12px; }

/* SOSYAL İKONLAR — Dijital Kart yüzeyindeki sade çip dili. Yeni ikon
   sistemi KURULMAZ: aynı admin kaynaklı varlıklar, daha temiz sunum. */
.social-icon {
  background: var(--navy-raise); border: 1px solid var(--navy-hairline);
  border-radius: 999px; transition: border-color .15s ease, background .15s ease;
}
.social-icon:hover { background: var(--navy); border-color: var(--blue); }

/* --- FAZ 4: satış noktası bulucusu ------------------------------------- */

.sp-layout { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .sp-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.sp-side { display: grid; gap: 14px; min-width: 0; }
/* MOBİLDE ÖNCE HARİTA: ziyaretçi "yakınımda var mı?" sorusunu ilk ekranda
   sorar. Masaüstünde iki kolon yan yana olduğu için sıra DEĞİŞMEZ. */
@media (max-width: 899px) { .sp-map { order: -1; } }

/* TEK ARAMA ALANI. */
.sp-search { display: grid; gap: 10px; }
.sp-search__field { display: grid; gap: 6px; }
.sp-search__label { font-size: var(--t--1); font-weight: 700; color: var(--ink-muted); }
.sp-search input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink); font: inherit;
}
.sp-search input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* HARİTA — her zaman görünür, oranı sabit. */
.sp-map { position: relative; min-width: 0; }
.sp-map__canvas {
  position: relative; background: var(--blue-soft);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 14px; color: var(--navy);
}
.sp-map__canvas svg { display: block; width: 100%; height: auto; }
.sp-map__note {
  margin-top: 12px; background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 16px;
}
.sp-map__note p { margin: 0 0 6px; }
.sp-map__note p:last-child { margin-bottom: 0; }

/* PIN — yalnız gerçek koordinatı olan nokta için üretilir. */
.sp-pin {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 999px; border: 2px solid var(--white);
  background: var(--navy); padding: 0; cursor: pointer;
}
.sp-pin:hover, .sp-pin.is-selected { background: var(--blue); transform: scale(1.15); }
.sp-pin:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* KART LİSTESİ. */
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-list li + li { margin-top: 0; }
.sp-card { cursor: pointer; }
.sp-card.is-selected { border-color: var(--blue); background: var(--blue-soft); }
.sp-card h3 { margin: 0; }
.sp-card p { margin: 0; }
.sp-address { font-weight: 600; }

/* BAYİ OLMA — kompakt şerit. */
.sp-join {
  display: grid; gap: 14px; align-items: center;
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 20px;
}
@media (min-width: 720px) { .sp-join { grid-template-columns: 1fr auto; } }
.sp-join h2 { margin: 0 0 4px; }

/* ALT SAYFA KOMPAKT BANDI — FAZ 4. */
.s[data-compact="true"] { padding-block: clamp(24px, 3vw, 44px); }


/* --------------------------------------------------- canonical product price */
/* PO 2026-10-05: fiyat mağazayla AYNI sunucu otoritesinden gelir. Rozet
   yalnız sunumdur; ikinci fiyat kaynağı veya kampanya hesabı değildir. */
.product-card-media { position: relative; }
.price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(74px, 6.5vw, 88px);
  aspect-ratio: 1;
  border-radius: 999px;
  padding: 8px;
  background: var(--blue);
  color: var(--navy-deep);
  border: 3px solid var(--white);
  box-shadow: 0 8px 22px rgba(10, 31, 68, .18);
  font-size: var(--t--1);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.product-card-media > .price-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.price-badge--hero {
  width: clamp(84px, 8vw, 104px);
  font-size: var(--t-0);
  box-shadow: none;
}
.s--navy .price-badge,
.s--deep .price-badge {
  border-color: var(--navy);
}
@media (max-width: 420px) {
  .product-card-media > .price-badge { top: 8px; right: 8px; }
  .price-badge { width: 72px; font-size: 0.82rem; }
}