/* ===================================================================
   YEDEKPARÇA — Mağaza Vitrini
   Palet: "Amber Forge" · yönetim paneliyle aynı token sistemi

   ERİŞİLEBİLİRLİK: Amber dolgu üzerine ASLA beyaz metin (2.03:1).
   Amber üzerine daima --ink-900 → 7.70:1 (AAA).
   =================================================================== */

:root {
  /* ══ PALET — "Turuncu Forge" (14.08.2026) ══════════════════════════
     Vurgu amberden TURUNCUYA kaydırıldı *(kullanıcı kararı: tasarim-2
     tonları)*. Ölçek adları `--amber-*` olarak KORUNDU: 1.800 satırlık
     mevcut CSS ve 100+ satır içi stil bu adları kullanıyor; yeniden
     adlandırmak yüzlerce dokunuş demekti ve biri unutulurdu.

     WCAG ölçüldü (§8.4 disiplini):
       #f97316  beyaz 2.80:1 · ink-900 6.37:1 · siyah zemin 6.93:1
       #ea580c  beyaz 3.56:1 · ink-900 5.02:1 · siyah zemin 5.46:1
       #c2410c  beyaz 5.18:1  ← BEYAZ metin YALNIZCA burada serbest

     §8.4'ün kuralı geçerliliğini koruyor: --amber-500 dolgusu üzerine
     beyaz metin YAZILMAZ (2.80:1), `ink-900` kullanılır. Beyaz metinli
     dolgu gerekiyorsa `--vurgu-koyu` (#c2410c). */
  --amber-50:#fff7ed; --amber-100:#ffedd5; --amber-200:#fed7aa; --amber-300:#fdba74;
  --amber-400:#fb923c; --amber-500:#f97316; --amber-600:#ea580c; --amber-700:#c2410c;
  --amber-800:#9a3412; --amber-900:#7c2d12;

  /* Anlamsal takma adlar — yeni kodda bunlar kullanılır. */
  --vurgu:#ea580c; --vurgu-acik:#f97316; --vurgu-koyu:#c2410c;
  --vurgu-50:#fff7ed; --vurgu-100:#ffedd5;

  /* Koyu bantlar (hero, marka bandı, alt bilgi) — tasarim-2'nin siyahı. */
  --siyah:#0b0d12; --siyah-2:#14171f; --siyah-3:#1e222c;
  --siyah-metin:#f8fafc; --siyah-metin-alt:#9aa4b2;

  --ink-50:#f8fafc; --ink-100:#f1f5f9; --ink-200:#e2e8f0; --ink-300:#cbd5e1;
  --ink-400:#94a3b8; --ink-500:#64748b; --ink-600:#475569; --ink-700:#334155;
  --ink-800:#1e293b; --ink-900:#0f172a;

  --basari-50:#ecfdf5; --basari-600:#059669; --basari-700:#047857;
  --hata-50:#fef2f2;   --hata-600:#dc2626;   --hata-700:#b91c1c;

  --yuzey:#fff; --yuzey-alt:var(--ink-50); --zemin:#fff;
  --cizgi:var(--ink-200); --metin:var(--ink-900); --metin-alt:var(--ink-500);

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-tam:999px;
  --g-1:0 1px 2px rgb(15 23 42/.06);
  --g-2:0 1px 3px rgb(15 23 42/.08),0 1px 2px rgb(15 23 42/.04);
  --g-3:0 6px 18px rgb(15 23 42/.09),0 2px 6px rgb(15 23 42/.05);
  --g-4:0 16px 40px rgb(15 23 42/.13);
  --gecis:170ms cubic-bezier(.4,0,.2,1);
  --kap:1280px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --yuzey:#1e293b; --yuzey-alt:#172032; --zemin:#0f172a;
    --cizgi:#334155; --metin:#f1f5f9; --metin-alt:#94a3b8;
    --basari-50:#052e24; --hata-50:#2d1214;
  }
}
:root[data-tema="koyu"] {
  --yuzey:#1e293b; --yuzey-alt:#172032; --zemin:#0f172a;
  --cizgi:#334155; --metin:#f1f5f9; --metin-alt:#94a3b8;
  --basari-50:#052e24; --hata-50:#2d1214;
}

*,*::before,*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums slashed-zero;   /* fiyat/kod hizası */
  font-feature-settings: "tnum" 1;   /* fiyatlar hizalı kalsın */
  background: var(--zemin); color: var(--metin);
  line-height: 1.6; -webkit-font-smoothing: antialiased;

  /* ── Yapışkan alt bilgi ──
     İçerik kısa olan sayfalarda (arama sonucu yok, 404, teşekkür ekranı)
     alt bilgi sayfanın ortasına çıkıyor ve altında beyaz boşluk kalıyordu.
     Gövde en az ekran yüksekliğinde bir sütun; <main> boşluğu yiyor. */
  min-height: 100vh;
  min-height: 100svh;   /* mobil tarayıcı çubuğu yüksekliği değiştirmesin */
  display: flex;
  flex-direction: column;
}

/* Ana bölüm kalan boşluğu doldurur; alt bilgi böylece hep en altta kalır.
   `min-width: 0` şart: flex öğesi varsayılan olarak içeriğinden küçülemez
   ve geniş tablolar sayfayı yatay kaydırtır. */
body > main { flex: 1 0 auto; min-width: 0; }
body > footer { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.kap { max-width: var(--kap); margin: 0 auto; padding: 0 1.25rem; }

/* ══════════════ ÜST BAR ══════════════ */
.ust-serit {
  background: var(--ink-900); color: var(--ink-300);
  font-size: .8125rem; padding: .5rem 0;
}
.ust-serit .kap { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.ust-serit a:hover { color: #fff; }

/* ── Garaj araç seçici *(11.08.2026)* ──
   Koyu şeridin içinde duruyor; kutu kendi zeminini alıyor ki metinle
   karışmasın. Misafirde ve garajı boş üyede hiç basılmıyor. */
.garaj-secici { display: flex; align-items: center; gap: .5rem; margin: 0; }

.garaj-secici-etiket {
  font-weight: 650; color: var(--ink-200, #e2e8f0); white-space: nowrap;
}

.garaj-secim {
  background: var(--ink-800, #1e293b); color: #fff;
  border: 1px solid var(--ink-700, #334155); border-radius: var(--r-sm, .375rem);
  padding: .25rem 1.75rem .25rem .5rem; font-size: .8125rem;
  max-width: 20rem; text-overflow: ellipsis;
}
.garaj-secim:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 1px; }

/* Dar ekranda slogan düşer — seçici ve bağlantılar daha önemli. */
@media (max-width: 720px) { .ust-serit-slogan { display: none; } }
@media (max-width: 460px) { .garaj-secim { max-width: 11rem; } }

.baslik {
  background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 40;
}
.baslik .kap { display: flex; align-items: center; gap: 1.25rem; padding-block: .875rem; }

.logo { display: flex; align-items: center; gap: .625rem; font-weight: 750; font-size: 1.125rem; letter-spacing: -.02em; }
.logo-im {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
  display: grid; place-items: center;
  color: var(--ink-900);          /* amber üzerine koyu — 7.70:1 */
  font-weight: 800; font-size: .9375rem;
}

/* Arama */
.arama { flex: 1; max-width: 34rem; position: relative; }
.arama input {
  width: 100%; padding: .6875rem 2.75rem .6875rem 1rem;
  border: 1px solid var(--cizgi); border-radius: var(--r-tam);
  background: var(--yuzey-alt); color: var(--metin);
  font: inherit; font-size: .9375rem;
  transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.arama input:focus {
  outline: none; background: var(--yuzey);
  border-color: var(--amber-500); box-shadow: 0 0 0 3px rgb(245 158 11/.18);
}
.arama button {
  position: absolute; right: .3125rem; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: var(--r-tam);
  background: var(--amber-500); color: var(--ink-900);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--gecis);
}
.arama button:hover { background: var(--amber-400); }
.arama button svg { width: 17px; height: 17px; }

.baslik-islem { display: flex; gap: .375rem; align-items: center; margin-left: auto; }
.ikon-dugme {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: var(--r-md); border: 0;
  background: none; color: var(--metin); font: inherit; font-size: .875rem;
  font-weight: 550; cursor: pointer; position: relative;
  transition: background var(--gecis);
}
.ikon-dugme:hover { background: var(--yuzey-alt); }
.ikon-dugme svg { width: 20px; height: 20px; }
.ikon-dugme .sayac {
  position: absolute; top: .125rem; right: .25rem;
  background: var(--amber-500); color: var(--ink-900);
  font-size: .6875rem; font-weight: 700; min-width: 17px; height: 17px;
  border-radius: var(--r-tam); display: grid; place-items: center; padding: 0 .25rem;
}

/* Ana gezinme */
.gezinme { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }

/* `> .kap` ile sınırlı: açılır panelin içindeki .kap ve bağlantılar bu
   kuralları almasın, yoksa model kartları tek satıra dizilip bozulur. */
.gezinme > .kap {
  display: flex; gap: .25rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;      /* iOS'ta ivmeli kaydırma */
  overscroll-behavior-x: contain;         /* menü kaydırırken sayfa geri gitmesin */
}
.gezinme > .kap::-webkit-scrollbar { display: none; }
.gezinme > .kap > a {
  /* flex-shrink: 0 şart — varsayılan 1 ile bağlantılar taşmak yerine
     birbirine yapışıyor ve yatay kaydırma hiç oluşmuyor. */
  flex: 0 0 auto;
  padding: .8125rem .875rem; font-size: .9063rem; font-weight: 550;
  color: var(--metin-alt); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--gecis), border-color var(--gecis);
}
.gezinme > .kap > a:hover { color: var(--metin); }
.gezinme > .kap > a.aktif { color: var(--amber-700); border-bottom-color: var(--amber-500); font-weight: 650; }

/* ══════════════ ÜRÜN KARTI ══════════════ */
.urun-izgara {
  display: grid; gap: 1.125rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.urun-kart {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.urun-kart:hover { border-color: var(--amber-300); transform: translateY(-3px); box-shadow: var(--g-3); }
/* Kartın herhangi bir yerine odaklanınca tüm kart belli olsun */
.urun-kart:has(a:focus-visible) { outline: 2px solid var(--amber-600); outline-offset: 2px; }

.urun-gorsel { position: relative; aspect-ratio: 1; background: var(--yuzey-alt); overflow: hidden; }
.urun-gorsel img { width: 100%; height: 100%; object-fit: contain; padding: .75rem;
                   transition: transform var(--gecis); }
.urun-kart:hover .urun-gorsel img { transform: scale(1.05); }
/* ── Görseli olmayan ürün ──
   İkon tek başına "boş kart" gibi duruyordu; yazı eksikliğin geçici
   olduğunu söylüyor. Metin `ink-500` — `ink-400` metin olarak yasak
   (2,56:1, CLAUDE.md §8.4). */
.urun-gorsel-yok {
  display: grid; place-items: center; align-content: center; gap: .5rem;
  height: 100%; color: var(--ink-400);
  background: linear-gradient(160deg, var(--ink-50) 0%, var(--ink-100) 100%);
}
.urun-gorsel-yok svg { width: 44px; height: 44px; }
.urun-gorsel-yok span {
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-500); text-align: center; padding: 0 .5rem;
}
.urun-gorsel-yok-buyuk { min-height: 20rem; border-radius: var(--r-md, .5rem); }
.urun-gorsel-yok-buyuk svg { width: 72px; height: 72px; }
.urun-gorsel-yok-buyuk span { font-size: .875rem; }

.urun-rozetler { position: absolute; top: .625rem; left: .625rem; display: flex; flex-direction: column; gap: .3125rem; }
.rozet {
  display: inline-flex; align-items: center; padding: .1875rem .5rem;
  border-radius: var(--r-tam); font-size: .6875rem; font-weight: 700; letter-spacing: .01em;
}
.rozet-indirim { background: var(--hata-600); color: #fff; }
.rozet-kargo   { background: var(--basari-600); color: #fff; }
.rozet-tukendi { background: var(--ink-600); color: #fff; }
.rozet-amber   { background: var(--amber-500); color: var(--ink-900); }

.urun-govde { padding: .875rem; display: flex; flex-direction: column; flex: 1; gap: .375rem; }
.urun-marka { font-size: .75rem; font-weight: 650; color: var(--amber-700); text-transform: uppercase; letter-spacing: .04em; }
.urun-ad {
  font-size: .9063rem; font-weight: 550; line-height: 1.4; color: var(--metin);
  /* 2 satırda kes — kartlar aynı yükseklikte kalsın */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.55em;
}
.urun-kart:hover .urun-ad { color: var(--amber-700); }
.urun-kod { font-size: .75rem; color: var(--metin-alt); font-family: ui-monospace, monospace; }

.urun-fiyat { margin-top: auto; padding-top: .5rem; }
.fiyat-eski { font-size: .8125rem; color: var(--metin-alt); text-decoration: line-through; }
.fiyat-yeni { font-size: 1.1875rem; font-weight: 750; letter-spacing: -.02em; }
.fiyat-kdv  { font-size: .75rem; color: var(--metin-alt); }

.sepet-dugme {
  width: 100%; margin-top: .625rem; padding: .5625rem;
  border: 0; border-radius: var(--r-md);
  background: var(--amber-500); color: var(--ink-900);   /* 7.70:1 */
  font: inherit; font-size: .875rem; font-weight: 650; cursor: pointer;
  transition: background var(--gecis);
}
.sepet-dugme:hover { background: var(--amber-400); }
.sepet-dugme:disabled { background: var(--ink-200); color: var(--ink-500); cursor: not-allowed; }
.sepet-dugme:focus-visible { outline: 2px solid var(--amber-700); outline-offset: 2px; }

/* ══════════════ BÖLÜM BAŞLIĞI ══════════════ */
.bolum { padding: 2.5rem 0; }
.bolum-bas { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.375rem; flex-wrap: wrap; }
.bolum-bas h1,
.bolum-bas h2 { font-size: 1.5rem; font-weight: 720; letter-spacing: -.025em; margin: 0; }
.bolum-bas p { color: var(--metin-alt); margin: 0; font-size: .9375rem; }
.bolum-bas .tumu { margin-left: auto; font-size: .9063rem; font-weight: 600; color: var(--amber-700); }
.bolum-bas .tumu:hover { text-decoration: underline; }

/* ══════════════ BANNER IZGARASI ══════════════ */
.banner-izgara { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.banner {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 11rem; display: block; background: var(--yuzey-alt);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.banner:hover { transform: translateY(-3px); box-shadow: var(--g-3); }
.banner img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.banner-metin {
  position: relative; z-index: 1; padding: 1.25rem;
  /* Metin okunabilirliği: görsel ne olursa olsun koyu kaplama */
  background: linear-gradient(to top, rgb(15 23 42/.85), rgb(15 23 42/.15) 60%, transparent);
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
}
.banner-metin strong { font-size: 1.0625rem; font-weight: 700; display: block; }
.banner-metin span { font-size: .875rem; opacity: .9; }
.banner[data-genislik="2"] { grid-column: span 2; }
@media (max-width: 900px) { .banner-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .banner-izgara { grid-template-columns: 1fr; }
  .banner[data-genislik="2"] { grid-column: span 1; }
}

/* ══════════════ LİSTELEME + FİLTRE ══════════════ */
.liste-duzen { display: grid; gap: 1.5rem; grid-template-columns: 16rem 1fr; align-items: start; padding: 1.5rem 0 3rem; }
@media (max-width: 900px) { .liste-duzen { grid-template-columns: 1fr; } }

.suzgec-panel {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); position: sticky; top: 5rem;
}
.suzgec-grup { padding: 1rem 1.125rem; border-bottom: 1px solid var(--cizgi); }
.suzgec-grup:last-child { border-bottom: 0; }
.suzgec-grup h3 { font-size: .8125rem; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .05em; color: var(--metin-alt); margin: 0 0 .75rem; }
.suzgec-oge { display: flex; align-items: center; gap: .5rem; padding: .3125rem 0; font-size: .9063rem; cursor: pointer; }
.suzgec-oge input { width: 16px; height: 16px; accent-color: var(--amber-600); cursor: pointer; }
.suzgec-oge .adet { margin-left: auto; font-size: .8125rem; color: var(--metin-alt); }
.suzgec-oge:hover { color: var(--amber-700); }

.liste-bas { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.125rem; flex-wrap: wrap; }
.liste-bas .adet-bilgi { color: var(--metin-alt); font-size: .9063rem; }
.siralama { margin-left: auto; }
.siralama select {
  padding: .5rem .75rem; border: 1px solid var(--cizgi); border-radius: var(--r-md);
  background: var(--yuzey); color: var(--metin); font: inherit; font-size: .875rem;
}

.kirilim { font-size: .8438rem; color: var(--metin-alt); padding: 1rem 0 0; }
.kirilim a:hover { color: var(--amber-700); text-decoration: underline; }
.kirilim .ayrac { margin: 0 .375rem; color: var(--ink-300); }

/* ══════════════ ÜRÜN DETAY ══════════════ */
.detay { display: grid; gap: 2rem; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 20rem; padding: 1.5rem 0 3rem; }
@media (max-width: 1100px) { .detay { grid-template-columns: 1fr 1fr; } .detay .satin-al { grid-column: span 2; } }
@media (max-width: 700px)  { .detay { grid-template-columns: 1fr; } .detay .satin-al { grid-column: span 1; } }

.galeri-ana {
  aspect-ratio: 1; background: var(--yuzey-alt); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center;
}
.galeri-ana img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.galeri-kucuk { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.galeri-kucuk button {
  width: 62px; height: 62px; border: 2px solid var(--cizgi); border-radius: var(--r-md);
  background: var(--yuzey-alt); padding: .25rem; cursor: pointer; overflow: hidden;
  transition: border-color var(--gecis);
}
.galeri-kucuk button[aria-current="true"] { border-color: var(--amber-500); }
.galeri-kucuk img { width: 100%; height: 100%; object-fit: contain; }

.satin-al {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); padding: 1.375rem; align-self: start;
  position: sticky; top: 5rem; box-shadow: var(--g-2);
}
.marka-serit {
  display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem;
  margin-bottom: 1rem; border-bottom: 1px solid var(--cizgi);
}
.marka-serit img { height: 34px; width: auto; object-fit: contain; }
.marka-serit .ad { font-weight: 700; font-size: 1rem; }
.marka-serit .kalite { font-size: .75rem; color: var(--metin-alt);
                       margin-left: auto; flex: none; }
.marka-serit:hover img { opacity: .8; }
.marka-serit:focus-visible { outline: 2px solid var(--amber-600); outline-offset: 3px; }

/* Ekran okuyucuya ve arama motoruna görünür, göze görünmez.
   Marka adı kelime-logonun içinde zaten yazıyor; iki kez basmamak için
   metin buraya alınır ama sayfadan da silinmez. */
.gizli-metin {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.detay-fiyat .eski { font-size: .9375rem; color: var(--metin-alt); text-decoration: line-through; }
.detay-fiyat .yeni { font-size: 2rem; font-weight: 780; letter-spacing: -.03em; line-height: 1.15; }
.detay-fiyat .kdv { font-size: .8125rem; color: var(--metin-alt); }

.stok-durum { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; font-size: .9063rem; font-weight: 600; }
.stok-nokta { width: 9px; height: 9px; border-radius: var(--r-tam); }
.stok-var .stok-nokta { background: var(--basari-600); }
.stok-yok .stok-nokta { background: var(--hata-600); }
.stok-var { color: var(--basari-700); }
.stok-yok { color: var(--hata-700); }

.buyuk-dugme {
  width: 100%; padding: .8125rem; border: 0; border-radius: var(--r-md);
  background: var(--amber-500); color: var(--ink-900);
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background var(--gecis), box-shadow var(--gecis);
}
.buyuk-dugme:hover { background: var(--amber-400); box-shadow: var(--g-3); }
.buyuk-dugme:disabled { background: var(--ink-200); color: var(--ink-500); cursor: not-allowed; box-shadow: none; }
.buyuk-dugme:focus-visible { outline: 2px solid var(--amber-700); outline-offset: 2px; }

/* Sekmeler */
.detay-sekmeler { border-top: 1px solid var(--cizgi); padding-top: 2rem; margin-top: 1rem; }
.sekme-basliklar { display: flex; gap: .25rem; border-bottom: 1px solid var(--cizgi); overflow-x: auto; }
.sekme-bas {
  padding: .8125rem 1.125rem; border: 0; background: none; font: inherit;
  font-size: .9375rem; font-weight: 600; color: var(--metin-alt); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.sekme-bas[aria-selected="true"] { color: var(--amber-700); border-bottom-color: var(--amber-500); }
.sekme-icerik { padding: 1.5rem 0; }
.sekme-icerik[hidden] { display: none; }

/* Teknik özellik tablosu */
.ozellik-tablo { width: 100%; border-collapse: collapse; font-size: .9375rem; max-width: 44rem; }
.ozellik-tablo tr { border-bottom: 1px solid var(--cizgi); }
.ozellik-tablo tr:last-child { border-bottom: 0; }
.ozellik-tablo th { text-align: left; padding: .6875rem 1rem .6875rem 0; font-weight: 550;
                    color: var(--metin-alt); width: 42%; }
.ozellik-tablo td { padding: .6875rem 0; font-weight: 600; }

/* Uyumlu araç tablosu */
.arac-tablo { width: 100%; border-collapse: collapse; font-size: .9063rem; }
.arac-tablo th { text-align: left; padding: .625rem 1rem; background: var(--yuzey-alt);
                 font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--metin-alt); }
.arac-tablo td { padding: .6875rem 1rem; border-bottom: 1px solid var(--cizgi); }
.arac-tablo tr:hover td { background: var(--yuzey-alt); }

/* Uyumlu araç listesi — model açılır, altında motor varyantları
   ────────────────────────────────────────────────────────────────
   Motorlar gömülü değil açılır listede: bir ürün 385 araca uyabiliyor
   ve hepsi birden basılırsa sayfa şişer (CLAUDE.md §8.7, mega menü hatası).
   <details> seçildi — JavaScript'siz çalışır, klavye ve ekran okuyucu
   desteği tarayıcıdan gelir. */
/* ── Uyumlu araçlarda arama ──
   Bir ürün 385 modele uyabiliyor; müşteri kendi aracını gözle arıyordu.
   Süzme istemcide, sunucuya istek yok. Kutu betik çalışınca görünür
   (`hidden` kaldırılır) — JS kapalıyken çalışmayan kutu gösterilmez. */
.arac-ara {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .75rem;
}
.arac-ara[hidden] { display: none; }
.arac-ara input {
  flex: 1; min-width: 0;
  padding: .5rem .75rem;
  border: 1px solid var(--ink-300); border-radius: var(--r-md);
  background: var(--yuzey); color: var(--ink-900);
  font: inherit; font-size: .9375rem;
}
.arac-ara input:focus {
  outline: none;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px var(--amber-100);
}
.arac-ara-sonuc {
  flex: none;
  font-size: .8125rem; color: var(--metin-alt);
  font-variant-numeric: tabular-nums;
}
.arac-bulunamadi {
  margin: .75rem 0 0; padding: .75rem 1rem;
  background: var(--ink-50); border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: .875rem; color: var(--ink-800);
}
.arac-bulunamadi[hidden] { display: none; }
.arac-bulunamadi a { color: var(--amber-700); font-weight: 600; }

.arac-liste { display: grid; gap: .5rem; }
.arac-liste .arac-model[hidden] { display: none; }

.arac-model { border: 1px solid var(--cizgi); border-radius: var(--r-md);
              background: var(--yuzey); overflow: hidden; }
.arac-model[open] { border-color: var(--amber-400); }

.arac-model > summary { display: flex; align-items: center; gap: .75rem;
              padding: .75rem 1rem; cursor: pointer; list-style: none;
              font-size: .9375rem; user-select: none; }
.arac-model > summary::-webkit-details-marker { display: none; }
.arac-model > summary::after { content: '▾'; margin-left: auto; flex: none;
              color: var(--metin-alt); transition: transform .15s; }
.arac-model[open] > summary::after { transform: rotate(180deg); }
.arac-model > summary:hover { background: var(--yuzey-alt); }
.arac-model > summary:focus-visible { outline: 2px solid var(--amber-500);
              outline-offset: -2px; }

.am-ad strong { font-weight: 700; margin-right: .375rem; }
.am-montaj { font-size: .75rem; padding: .125rem .5rem; border-radius: 999px;
             background: var(--yuzey-alt); color: var(--metin-alt); flex: none; }
/* Amber dolgu üzerine ink-900 — beyaz metin WCAG ihlali (CLAUDE.md §8.4). */
.am-adet { font-size: .75rem; padding: .125rem .5rem; border-radius: 999px;
           background: var(--amber-100); color: var(--ink-900); flex: none;
           font-variant-numeric: tabular-nums; }

.am-govde { padding: 0 1rem 1rem; border-top: 1px solid var(--cizgi); }

.motor-tablo { width: 100%; border-collapse: collapse; font-size: .875rem;
               font-variant-numeric: tabular-nums slashed-zero; }
.motor-tablo th { text-align: left; padding: .5rem .625rem; white-space: nowrap;
                  font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
                  color: var(--metin-alt); border-bottom: 1px solid var(--cizgi); }
.motor-tablo td { padding: .5rem .625rem; border-bottom: 1px solid var(--cizgi); }
.motor-tablo tr:last-child td { border-bottom: 0; }
.motor-tablo tr:hover td { background: var(--yuzey-alt); }
.motor-tablo .sayi { white-space: nowrap; }
.motor-tablo .kod  { font-family: var(--yazi-kod, ui-monospace, monospace);
                     font-size: .8125rem; color: var(--metin-alt); }
.motor-tablo .kw   { color: var(--metin-alt); font-size: .8125rem; }

.am-git { display: inline-block; margin-top: .75rem; font-size: .875rem;
          font-weight: 600; color: var(--amber-700); }

@media (max-width: 640px) {
  .arac-model > summary { flex-wrap: wrap; gap: .375rem .5rem; }
  .am-ad { flex: 1 1 100%; }
}

/* Kod listesi */
.kod-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.kod-etiket {
  padding: .375rem .75rem; background: var(--yuzey-alt); border: 1px solid var(--cizgi);
  border-radius: var(--r-sm); font-family: ui-monospace, monospace; font-size: .8438rem;
}
.kod-etiket small { color: var(--metin-alt); font-family: Inter, sans-serif; margin-right: .375rem; }

/* ══════════════ ALT BİLGİ ══════════════ */
.alt-bilgi { background: var(--ink-900); color: var(--ink-300); padding: 2.5rem 0 1.5rem; margin-top: 3rem; }
.alt-izgara { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.alt-bilgi h4 { color: #fff; font-size: .9375rem; font-weight: 650; margin: 0 0 .875rem; }
.alt-bilgi ul { list-style: none; margin: 0; padding: 0; }
.alt-bilgi li { margin-bottom: .5rem; font-size: .875rem; }
.alt-bilgi a:hover { color: var(--amber-400); }
.alt-serit { border-top: 1px solid rgb(255 255 255/.1); margin-top: 2rem; padding-top: 1.25rem;
             font-size: .8125rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* ══════════════ BOŞ DURUM ══════════════ */
.bos { padding: 4rem 1.5rem; text-align: center; }
.bos svg { width: 52px; height: 52px; color: var(--ink-300); margin-bottom: 1rem; }
.bos h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
.bos p { color: var(--metin-alt); margin: 0 0 1.5rem; }

.dugme-ana {
  display: inline-block; padding: .6875rem 1.375rem; border-radius: var(--r-md);
  background: var(--amber-500); color: var(--ink-900); font-weight: 650;
}
.dugme-ana:hover { background: var(--amber-400); }

/* `[hidden]` kuralı ZORUNLU (bkz. satır 977 açıklaması): yazar stilindeki
   `display:inline-flex`, tarayıcının `hidden` için uyguladığı `display:none`'ı
   ezer. Ölçüldü — arama sonuçlarındaki "Tekrar Dene" düğmesi sorgu daha
   başlamadan görünüyor, müşteri henüz denemediği şeyi "tekrar" deniyordu. */
.dugme-ana[hidden] { display: none; }

/* Kart sağlayıcı seçimi — aynı tuzak. Satır içi `display:grid` yüzünden
   müşteri kartla ödemeyi seçmeden iyzico/PayTR radyoları görünüyordu. */
.kart-saglayici-kutu { margin-left: 2rem; display: grid; gap: .5rem; }
.kart-saglayici-kutu[hidden] { display: none; }

.sayfalama { display: flex; gap: .375rem; justify-content: center; padding: 2rem 0; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  padding: .5rem .875rem; border: 1px solid var(--cizgi); border-radius: var(--r-md);
  font-size: .9063rem; font-weight: 550;
}
.sayfalama a:hover { border-color: var(--amber-400); color: var(--amber-700); }
.sayfalama .simdiki { background: var(--amber-500); color: var(--ink-900); border-color: var(--amber-500); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .urun-kart:hover { transform: none; }
}

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

/* ══════════════ HESAP ALANI ══════════════ */
.hesap-duzen { display: grid; gap: 1.5rem; grid-template-columns: 15rem 1fr; align-items: start; padding: 1.5rem 0 3rem; }
@media (max-width: 860px) { .hesap-duzen { grid-template-columns: 1fr; } }

.hesap-menu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: .5rem; }
.hesap-menu a {
  display: flex; align-items: center; gap: .6875rem; padding: .625rem .75rem;
  border-radius: var(--r-md); font-size: .9063rem; font-weight: 550; color: var(--metin-alt);
  transition: background var(--gecis), color var(--gecis);
}
.hesap-menu a svg { width: 18px; height: 18px; flex-shrink: 0; }
.hesap-menu a:hover { background: var(--yuzey-alt); color: var(--metin); }
.hesap-menu a.aktif { background: var(--amber-500); color: var(--ink-900); font-weight: 650; }
.hesap-menu a:focus-visible { outline: 2px solid var(--amber-600); outline-offset: -2px; }
.cikis-dugme {
  width: 100%; padding: .625rem .75rem; border: 0; border-radius: var(--r-md);
  background: none; color: var(--hata-600); font: inherit; font-size: .9063rem;
  font-weight: 600; text-align: left; cursor: pointer;
}
.cikis-dugme:hover { background: var(--hata-50); }

.kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg); }
.kutu-bas { padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--cizgi); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kutu-bas h1, .kutu-bas h2 { font-size: 1.125rem; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.kutu-bas p { margin: .125rem 0 0; font-size: .875rem; color: var(--metin-alt); }
.kutu-govde { padding: 1.375rem; }

.alan { margin-bottom: 1.125rem; }
.etiket { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 600; }
.zorunlu { color: var(--hata-600); }
.girdi, .secim, .metin-alan {
  width: 100%; padding: .625rem .8125rem; border: 1px solid var(--cizgi);
  border-radius: var(--r-md); background: var(--yuzey); color: var(--metin);
  font: inherit; font-size: .9375rem;
}
.girdi:focus, .secim:focus, .metin-alan:focus {
  outline: none; border-color: var(--amber-500); box-shadow: 0 0 0 3px rgb(245 158 11/.18);
}
.alan-hata { margin-top: .375rem; font-size: .8125rem; color: var(--hata-600); font-weight: 500; }
.ipucu { margin-top: .375rem; font-size: .8125rem; color: var(--metin-alt); }
.izgara-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.dugme2 {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.125rem; border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: .9063rem; font-weight: 650; cursor: pointer;
}
.dugme2-ana { background: var(--amber-500); color: var(--ink-900); }
.dugme2-ana:hover { background: var(--amber-400); }
.dugme2-yan { background: var(--yuzey); color: var(--metin); border-color: var(--cizgi); }
.dugme2-yan:hover { background: var(--yuzey-alt); }
.dugme2-sil { background: none; color: var(--hata-600); }
.dugme2-sil:hover { background: var(--hata-50); }

/* Sepet */
.sepet-satir { display: grid; gap: 1rem; grid-template-columns: 84px 1fr auto auto auto;
               align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--cizgi); }
.sepet-satir:last-child { border-bottom: 0; }
.sepet-gorsel { width: 84px; height: 84px; border-radius: var(--r-md); object-fit: contain;
                background: var(--yuzey-alt); border: 1px solid var(--cizgi); padding: .25rem; }
.adet-kutu { display: flex; align-items: center; border: 1px solid var(--cizgi); border-radius: var(--r-md); overflow: hidden; }
.adet-kutu button { width: 32px; height: 34px; border: 0; background: var(--yuzey-alt); color: var(--metin);
                    font: inherit; font-size: 1.0625rem; cursor: pointer; }
.adet-kutu button:hover { background: var(--cizgi); }
.adet-kutu input { width: 44px; height: 34px; border: 0; text-align: center; background: var(--yuzey);
                   color: var(--metin); font: inherit; font-weight: 600; }
@media (max-width: 700px) {
  .sepet-satir { grid-template-columns: 68px 1fr; gap: .75rem; }
  .sepet-satir > *:nth-child(n+3) { grid-column: 2; }
}
.ozet-satir { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .9375rem; }
.ozet-satir.toplam { border-top: 1px solid var(--cizgi); margin-top: .5rem; padding-top: .875rem;
                     font-size: 1.125rem; font-weight: 750; }

/* Garaj kartı */
.garaj-kart { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.125rem;
              border: 1px solid var(--cizgi); border-radius: var(--r-lg); margin-bottom: .875rem; background: var(--yuzey); }
.garaj-kart img { height: 36px; width: auto; object-fit: contain; }
.garaj-bilgi { flex: 1; min-width: 0; }
.garaj-bilgi strong { display: block; font-size: 1rem; }
.garaj-bilgi span { font-size: .875rem; color: var(--metin-alt); }
.plaka {
  display: inline-block; padding: .1875rem .5rem; border: 2px solid var(--ink-700);
  border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700;
  font-size: .8125rem; letter-spacing: .05em;
}

/* ══════════════ ÇEREZ PANELİ (KVKK) ══════════════ */
.cerez-paneli {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--yuzey); border-top: 1px solid var(--cizgi);
  box-shadow: 0 -8px 32px rgb(15 23 42 / .14);
  padding: 1.125rem 1.25rem; animation: cerezGir .28s ease-out;
}
@keyframes cerezGir { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cerez-paneli { animation: none; } }

.cerez-ic { max-width: var(--kap); margin: 0 auto; display: flex; gap: 1.5rem;
            align-items: center; flex-wrap: wrap; }
.cerez-metin { flex: 1; min-width: 17rem; }
.cerez-metin strong { display: block; font-size: 1rem; margin-bottom: .1875rem; }
.cerez-metin p { margin: 0; font-size: .875rem; color: var(--metin-alt); line-height: 1.6; }
.cerez-metin a { color: var(--amber-700); text-decoration: underline; }

.cerez-dugmeler { display: flex; gap: .5rem; flex-wrap: wrap; }
.cerez-dugme {
  padding: .625rem 1.125rem; border-radius: var(--r-md); border: 1px solid transparent;
  font: inherit; font-size: .9063rem; font-weight: 650; cursor: pointer; white-space: nowrap;
}
/* Reddet ve Kabul Et aynı boyut ve belirginlikte — KVKK gereği */
.cerez-red    { background: var(--yuzey); color: var(--metin); border-color: var(--cizgi); }
.cerez-red:hover { background: var(--yuzey-alt); }
.cerez-ozel   { background: none; color: var(--metin-alt); }
.cerez-ozel:hover { background: var(--yuzey-alt); color: var(--metin); }
.cerez-kabul  { background: var(--amber-500); color: var(--ink-900); }
.cerez-kabul:hover { background: var(--amber-400); }
.cerez-dugme:focus-visible { outline: 2px solid var(--amber-700); outline-offset: 2px; }

.cerez-detay { max-width: var(--kap); margin: 1rem auto 0; padding-top: 1rem;
               border-top: 1px solid var(--cizgi); }
.cerez-satir { display: flex; gap: .75rem; align-items: flex-start; padding: .625rem 0; cursor: pointer; }
.cerez-satir input { width: 17px; height: 17px; margin-top: .1875rem; accent-color: var(--amber-600); }
.cerez-satir strong { display: block; font-size: .9063rem; }
.cerez-satir em { font-style: normal; font-size: .8125rem; color: var(--metin-alt); }

/* ══════════════ ÜYELİK DUVARI ══════════════ */
.uyelik-duvari {
  text-align: center; padding: 2.5rem 1.5rem; max-width: 30rem; margin: 0 auto;
  background: var(--yuzey-alt); border: 1px dashed var(--cizgi); border-radius: var(--r-lg);
}
.uyelik-ikon {
  width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: var(--r-tam);
  background: var(--amber-100); color: var(--amber-700); display: grid; place-items: center;
}
.uyelik-ikon svg { width: 26px; height: 26px; }
.uyelik-duvari h3 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .375rem; }
.uyelik-duvari p { color: var(--metin-alt); font-size: .9063rem; margin: 0 0 1.25rem; line-height: 1.6; }
.uyelik-dugmeler { display: flex; gap: .625rem; justify-content: center; flex-wrap: wrap; }
.uyelik-not { font-size: .8125rem !important; margin: 1rem 0 0 !important; }

/* Kilitli sekme ikonu — metinle aynı hizada, ölçüsü satır yüksekliğine bağlı */
.kilit-im {
  width: 13px; height: 13px; margin-left: .3125rem;
  vertical-align: -1px; opacity: .65; flex-shrink: 0;
}
.sekme-bas[aria-selected="true"] .kilit-im { opacity: .85; }

/* Form güvenlik alanı — dikkat çeksin ama rahatsız etmesin */
.guvenlik-alani {
  background: var(--yuzey-alt); border: 1px solid var(--cizgi);
  border-radius: var(--r-md); padding: .875rem 1rem;
}
.guvenlik-alani .etiket { margin-bottom: .5rem; }
.guvenlik-alani strong { color: var(--amber-700); font-family: ui-monospace, monospace; font-size: 1rem; }

/* ══════════════ SÖZLEŞME KATMANI ══════════════ */
.sozlesme-katman {
  position: fixed; inset: 0; z-index: 100; padding: 1.5rem;
  background: rgb(15 23 42 / .6); backdrop-filter: blur(3px);
  display: grid; place-items: center;
}
/* `display: grid` tarayıcının `hidden` davranışını ezer; kural olmazsa
   pencere sayfa açılır açılmaz görünür ve formu kapatır. */
.sozlesme-katman[hidden] { display: none; }
.sozlesme-kutu {
  background: var(--yuzey); border-radius: var(--r-lg); box-shadow: var(--g-4);
  width: 100%; max-width: 44rem; max-height: 85vh; display: flex; flex-direction: column;
}
.sozlesme-bas {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--cizgi);
}
.sozlesme-bas h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; flex: 1; }
.sozlesme-kapat {
  width: 32px; height: 32px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--metin-alt); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.sozlesme-kapat:hover { background: var(--yuzey-alt); color: var(--metin); }
.sozlesme-govde {
  padding: 1.375rem; overflow-y: auto; flex: 1;
  font-size: .9063rem; line-height: 1.75;
}
.sozlesme-govde:focus-visible { outline: 2px solid var(--amber-600); outline-offset: -2px; }
.sozlesme-alt {
  display: flex; gap: .625rem; justify-content: flex-end;
  padding: 1rem 1.375rem; border-top: 1px solid var(--cizgi); background: var(--yuzey-alt);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
@media (max-width: 640px) {
  .sozlesme-katman { padding: 0; }
  .sozlesme-kutu { max-height: 100vh; border-radius: 0; }
  .sozlesme-alt { flex-direction: column-reverse; }
  .sozlesme-alt .dugme2 { width: 100%; }
}

/* Müşteri tipi seçici */
.tip-secici { display: grid; gap: .625rem; grid-template-columns: 1fr 1fr; margin-bottom: 1.125rem; }
.tip-secici label {
  display: flex; gap: .625rem; align-items: flex-start; padding: .875rem 1rem;
  border: 2px solid var(--cizgi); border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis);
}
.tip-secici label:has(input:checked) { border-color: var(--amber-500); background: var(--amber-50); }
.tip-secici input { margin-top: .1875rem; accent-color: var(--amber-600); }
.tip-secici strong { display: block; font-size: .9375rem; }
.tip-secici span { font-size: .8125rem; color: var(--metin-alt); }
@media (max-width: 520px) { .tip-secici { grid-template-columns: 1fr; } }

/* ===================================================================
   ARAÇ EKSENİ — marka / model / kasa / motor gezinme kutuları
   =================================================================== */

.arac-izgara {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.arac-kutu {
  display: flex; flex-direction: column; gap: .1875rem;
  padding: .875rem 1rem; text-decoration: none;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-md); transition: border-color var(--gecis), box-shadow var(--gecis);
}
.arac-kutu:hover { border-color: var(--amber-400); box-shadow: var(--g-2); }
.arac-kutu:focus-visible { outline: 2px solid var(--amber-700); outline-offset: 2px; }

.arac-kutu-ad  { font-weight: 650; font-size: .9375rem; color: var(--metin); }

/* Araç kartı görselleri.
   Kaynak model görselleri 120px genişliğinde ve oranları değişken
   (120×39 ile 120×90 arası). Sabit ölçü verilirse eziliyor, büyütülürse
   bulanıklaşıyor: sabit yükseklikli kutu + doğal boyutu aşmama. */
.arac-kutu-resim {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 58px; margin-bottom: .375rem;
}
.arac-kutu-resim img {
  max-width: 120px; max-height: 58px;
  width: auto; height: auto; object-fit: contain;
}
.arac-kutu-resim-bos img { max-width: 46px; max-height: 46px; opacity: .55; }

/* Marka logoları 250–600px; küçültülürken oranı korunur. */
.arac-logo { object-fit: contain; width: auto; height: auto; }
.arac-kutu-alt { font-size: .8125rem; color: var(--metin-alt); line-height: 1.4; }

.kirilim span[aria-hidden] { margin: 0 .375rem; color: var(--ink-300); }

.bos-durum {
  padding: 3rem 1.5rem; text-align: center;
  background: var(--yuzey-alt); border: 1px dashed var(--cizgi);
  border-radius: var(--r-lg);
}
.bos-durum p { margin: 0 0 1rem; color: var(--metin-alt); }

/* Araç arama — üç kademe + düğme. Dar ekranda alt alta. */
.arac-arama-bolumu { background: var(--yuzey-alt); padding-top: 2rem; }

.arac-secici {
  display: grid; gap: .75rem;
  grid-template-columns: 1fr 1.4fr 1.2fr auto;
  padding: 1.25rem; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  box-shadow: var(--g-2);
}
@media (max-width: 900px) { .arac-secici { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .arac-secici { grid-template-columns: 1fr; } }

.arac-secici-ipucu {
  margin: .75rem .25rem 0; font-size: .8438rem; color: var(--metin-alt);
  line-height: 1.5; min-height: 2.5em;
}
.arac-secici .secim:disabled { background: var(--yuzey-alt); color: var(--metin-alt); cursor: not-allowed; }
.arac-secici .dugme2:disabled { opacity: .5; cursor: not-allowed; }

/* Yorumlar */
.yildiz { color: var(--amber-500); letter-spacing: .08em; font-size: 1rem; }

.rozet-dogrulanmis {
  font-size: .75rem; font-weight: 650; padding: .1875rem .5rem;
  border-radius: var(--r-tam); background: var(--basari-50); color: var(--basari-700);
}

/* Yıldız seçimi — radyolar ters sırada basılır, böylece "sonraki kardeş"
   seçiciyle soldan sağa dolum yapılabilir (CSS'te önceki kardeş seçici yok). */
.puan-secim { display: inline-flex; flex-direction: row-reverse; gap: .125rem; }
.puan-secim input { position: absolute; opacity: 0; width: 0; height: 0; }
.puan-secim label {
  font-size: 1.75rem; line-height: 1; color: var(--ink-300);
  cursor: pointer; transition: color var(--gecis);
}
.puan-secim input:checked ~ label,
.puan-secim label:hover,
.puan-secim label:hover ~ label { color: var(--amber-500); }
.puan-secim input:focus-visible + label { outline: 2px solid var(--amber-700); outline-offset: 2px; }

/* Cari ekstre tablosu */
.ekstre-tablo { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ekstre-tablo th, .ekstre-tablo td { padding: .75rem 1rem; text-align: left; vertical-align: top; }
.ekstre-tablo thead th {
  background: var(--yuzey-alt); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--metin-alt);
  border-bottom: 1px solid var(--cizgi); white-space: nowrap;
}
.ekstre-tablo tbody td { border-bottom: 1px solid var(--cizgi); }
.ekstre-tablo tbody tr:hover { background: var(--yuzey-alt); }
.ekstre-tablo tfoot th { border-top: 2px solid var(--ink-800); font-weight: 750; }
.ekstre-tablo .sag { text-align: right; white-space: nowrap; }

/* Süzgeç etiketleri */
.suzgec-etiket {
  padding: .3125rem .75rem; border-radius: var(--r-tam); font-size: .8125rem;
  font-weight: 600; text-decoration: none; color: var(--metin-alt);
  background: var(--yuzey-alt); border: 1px solid var(--cizgi);
  transition: all var(--gecis);
}
.suzgec-etiket:hover { border-color: var(--amber-400); color: var(--metin); }
.suzgec-etiket.aktif { background: var(--amber-500); color: var(--ink-900); border-color: var(--amber-500); }

/* ===================================================================
   ÜST MENÜ — araç markaları + model paneli
   Panel içeriği ilk üstüne gelindiğinde JS ile doldurulur; HTML'e
   gömülmez (referans sitenin 477 KB'lık hatası tekrarlanmasın).
   =================================================================== */

.gezinme { position: relative; }

.gezinme-ic { gap: .125rem; }

.menu-marka, .menu-tumu {
  flex: 0 0 auto;
  padding: .8125rem .9375rem; font-size: .9063rem; font-weight: 600;
  color: var(--metin); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color var(--gecis), border-color var(--gecis);
}
.menu-marka:hover, .menu-marka[aria-expanded="true"],
.menu-tumu:hover, .menu-tumu.aktif {
  color: var(--amber-700); border-bottom-color: var(--amber-500);
}
.menu-marka:focus-visible, .menu-tumu:focus-visible {
  outline: 2px solid var(--amber-700); outline-offset: -2px;
}
/* `margin-left:auto` KULLANILMAZ: taşan bir kaydırma kabında boş alan
   olmadığı için öğeyi ekranın dışına itiyor ve kaydırma bozuk hissettiriyor.
   Ayırmak için soluna ince bir çizgi konur. */
.menu-tumu {
  color: var(--metin-alt);
  border-left: 1px solid var(--cizgi); margin-left: .375rem; padding-left: 1rem;
}

/* Dar ekranda menü daha sıkı dursun, daha çok marka görünsün. */
@media (max-width: 640px) {
  .gezinme > .kap { padding-left: .875rem; padding-right: .875rem; }
  .menu-marka, .menu-tumu { padding: .75rem .625rem; font-size: .875rem; }
}

/* Açılır panel */
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--yuzey); border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi); box-shadow: var(--g-4);
  padding: 1.25rem 0 1.5rem;
}
.menu-panel[hidden] { display: none; }

.menu-model-izgara {
  display: grid; gap: .25rem;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  max-height: 24rem; overflow-y: auto;
}

/* Kart yatay: solda görsel, sağda ad. Görseller çok geniş oranlı
   (120×39 … 120×90) olduğu için dikey dizilimde altlarında büyük boşluk
   kalıyor ve adlar dar kartta üç satıra bölünüyordu. */
.menu-model {
  display: flex; align-items: center; gap: .625rem;
  padding: .4375rem .5rem; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-md);
  transition: border-color var(--gecis), background var(--gecis);
}
.menu-model:hover { border-color: var(--amber-300); background: var(--yuzey-alt); }

/* Kaynak görseller 120px genişliğinde ve orijinali bu — daha büyüğü yok.
   Büyütülürse bulanıklaşır, o yüzden doğal boyutu AŞILMAZ. */
.menu-model-resim {
  flex: 0 0 62px;
  display: flex; align-items: center; justify-content: center;
  height: 38px;
}
.menu-model-resim img {
  max-width: 62px; max-height: 38px;
  width: auto; height: auto; object-fit: contain;
}

.menu-model-resim-bos {
  width: 40px; height: 26px; border-radius: var(--r-sm);
  background: var(--yuzey-alt); display: block;
}

.menu-model-ad {
  font-size: .8125rem; font-weight: 600; color: var(--metin);
  line-height: 1.35; min-width: 0;
}

.menu-tum-model {
  display: inline-block; margin-top: 1rem; font-size: .875rem;
  font-weight: 650; color: var(--amber-700); text-decoration: none;
}
.menu-tum-model:hover { text-decoration: underline; }

.menu-bos { margin: 0; padding: 1.5rem 0; color: var(--metin-alt); font-size: .9375rem; }

/* Dar ekranda panel tam genişlik, kartlar küçülür */
@media (max-width: 700px) {
  .menu-model-izgara { grid-template-columns: 1fr 1fr; }
}

/* Başlıklar Manrope (CLAUDE.md §8.4) — gövde Inter kalır. */
h1, h2, h3, .bolum-bas h2, .urun-baslik {
  font-family: Manrope, Inter, system-ui, sans-serif;
  letter-spacing: -.02em;
}

/* ── Ana sayfa: iki yollu arama (marka-model | şase) ── */
.arama-ikili {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.arama-kutu {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); padding: 1.25rem;
}
/* Şase kutusu hafifçe ayrışsın — aynı öneme sahip ama farklı bir yol. */
.arama-kutu-sase { background: var(--ink-50, #f8fafc); }
.arama-kutu-bas {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .875rem; font-size: 1rem; font-weight: 700;
}
.arama-kutu-no {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--amber-500);
  /* Amber dolgu üzerine ASLA beyaz yazılmaz (CLAUDE.md §8.4) */
  color: var(--ink-900); font-size: .8125rem; font-weight: 800;
}
.sasi-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.sasi-form .girdi { flex: 1 1 14rem; }

/* ── Ana sayfa araç seçici — tek geniş kutu *(11.08.2026)* ──
   Şase kutusu kaldırıldı (§8.52); seçici tüm genişliği alıyor ve
   kademeler yan yana sığıyor. Kuşak ve motor kutuları gerektiğinde
   belirdiği için sütun sayısı sabit değil — `auto-fit` kullanılıyor,
   aksi hâlde gizli iki kutunun yeri boş kalırdı. */
.arama-kutu-genis { padding: 1.25rem 1.25rem 1rem; }

.arac-secici-genis {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  padding: 0; border: 0; box-shadow: none; background: transparent;
}
@media (max-width: 900px) { .arac-secici-genis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .arac-secici-genis { grid-template-columns: 1fr; } }

/* Etiket şart: beş kutu yan yanayken hangisinin ne olduğu
   yalnızca yer tutucudan anlaşılmıyor, seçim yapıldıktan sonra
   yer tutucu da kayboluyor. */
.as-alan { display: flex; flex-direction: column; gap: .3125rem; min-width: 0; }
.as-alan[hidden] { display: none; }

.as-etiket {
  font-size: .75rem; font-weight: 650; letter-spacing: .01em;
  color: var(--metin-alt); padding-left: .125rem;
}

/* Düğme etiketsiz olduğu için diğer kutularla aynı hizada durmalı;
   `align-items: end` bunu sağlıyor, ayrıca dar ekranda tam satır. */
.as-git { white-space: nowrap; }
@media (max-width: 560px) { .as-git { width: 100%; } }

/* ── Şase sonuç listesi ── */
.sasi-liste { display: grid; gap: .5rem; }
.sasi-kart {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .875rem 1rem; border: 1px solid var(--cizgi);
  border-radius: var(--r-md); background: var(--yuzey);
  text-decoration: none; color: inherit;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.sasi-kart:hover { border-color: var(--amber-500); box-shadow: var(--g-2); }
.sasi-kart-ad { font-weight: 600; }

/* ══ Canlı parça tedariki — bekleme penceresi ══
   Müşteri bulunamayan bir parça numarası arayınca tedarikçi kataloğuna
   canlı sorgu atılır; 10-20 saniye sürer. Bu süre boyunca ekranın boş
   kalması müşteriyi kaybettirir.
   `[hidden]` kuralı ZORUNLU: yazar stilindeki display, tarayıcının
   hidden varsayılanını ezer (CLAUDE.md §8.15.7'de üyelik formunu
   kilitleyen hata tam buydu). */
.tedarik-katman { position: fixed; inset: 0; z-index: 90;
                  display: grid; place-items: center; padding: 1rem;
                  background: rgb(15 23 42 / .55); backdrop-filter: blur(2px); }
.tedarik-katman[hidden] { display: none; }

.tedarik-kutu { background: var(--yuzey); border-radius: var(--r-lg);
                padding: 2rem 1.75rem 1.5rem; max-width: 26rem; width: 100%;
                text-align: center; box-shadow: 0 18px 48px rgb(15 23 42 / .28); }
.tedarik-kutu h2 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .375rem; }
.tedarik-alt { margin: 0 0 1.25rem; font-size: .875rem; color: var(--metin-alt); }

.tedarik-donen { width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; }
.tedarik-donen svg { width: 100%; height: 100%; animation: td-don 1.4s linear infinite; }
.tedarik-donen .td-iz  { stroke: var(--cizgi); }
.tedarik-donen .td-yay { stroke: var(--amber-500); stroke-dasharray: 90 126; }
@keyframes td-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tedarik-donen svg { animation-duration: 4s; } }

.tedarik-adimlar { list-style: none; margin: 0; padding: 0; text-align: left;
                   display: grid; gap: .5rem; }
.tedarik-adimlar li { display: flex; align-items: center; gap: .625rem;
                      font-size: .875rem; color: var(--metin-alt);
                      transition: color .2s; }
.tedarik-adimlar .td-im { flex: none; width: .875rem; height: .875rem;
                          border-radius: 50%; border: 2px solid var(--cizgi); }
.tedarik-adimlar .td-simdi { color: var(--metin); font-weight: 600; }
.tedarik-adimlar .td-simdi .td-im { border-color: var(--amber-500);
                          box-shadow: 0 0 0 3px rgb(245 158 11 / .18); }
.tedarik-adimlar .td-bitti { color: var(--metin); }
.tedarik-adimlar .td-bitti .td-im { border-color: var(--basari-600, #16a34a);
                          background: var(--basari-600, #16a34a); }

.tedarik-sonuc { margin-top: 1.25rem; padding-top: 1rem;
                 border-top: 1px solid var(--cizgi);
                 display: flex; flex-direction: column; gap: .625rem; align-items: stretch; }
.tedarik-sonuc[hidden] { display: none; }
.tedarik-sonuc .td-mesaj { margin: 0 0 .25rem; font-size: .9063rem; color: var(--metin); }
.tedarik-sonuc .td-basarili { color: var(--basari-700, #15803d); font-weight: 600; }

/* ── Fiyatı henüz gelmemiş ürün ──
   TecDoc kataloğundan gelen parçaların fiyatı tedarikçi listelerinden
   doldurulacak (§8.17). O gelene kadar "0,00 ₺" yazmak müşteriyi yanıltır. */
.fiyat-yok { color: var(--metin-alt); font-weight: 650; }

.fiyat-teklif { padding: 1rem 1.125rem; margin-bottom: 1rem;
                background: var(--amber-50); border: 1px solid var(--amber-200);
                border-radius: var(--r-md); }
.fiyat-teklif strong { display: block; font-size: .9375rem; margin-bottom: .25rem;
                       color: var(--ink-900); }
.fiyat-teklif p { margin: 0 0 .875rem; font-size: .875rem; line-height: 1.55;
                  color: var(--ink-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .fiyat-teklif { background: #2a2110; border-color: #5c4410; }
  :root:not([data-tema="acik"]) .fiyat-teklif strong { color: var(--amber-200); }
  :root:not([data-tema="acik"]) .fiyat-teklif p { color: var(--ink-300); }
}
:root[data-tema="koyu"] .fiyat-teklif { background: #2a2110; border-color: #5c4410; }
:root[data-tema="koyu"] .fiyat-teklif strong { color: var(--amber-200); }
:root[data-tema="koyu"] .fiyat-teklif p { color: var(--ink-300); }

/* ── Şase sorgusu doğrulama adımı ──
   Yeni bir şase 1 API isteği demek; bot koruması burada devreye girer.
   Önbellekteki şaselerde bu blok hiç basılmaz. */
.sasi-dogrula { margin-top: 1.25rem; padding: 1.125rem 1.25rem;
                background: var(--yuzey-alt); border: 1px solid var(--cizgi);
                border-radius: var(--r-md); }
.sasi-dogrula .sd-baslik { margin: 0 0 .25rem; font-size: .9375rem; }
.sasi-dogrula .sd-alt { margin: 0 0 .875rem; font-size: .875rem; color: var(--metin-alt); }
.sasi-dogrula .sd-satir { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.sasi-dogrula .sd-satir label { font-weight: 700; font-size: 1.0625rem;
                                font-variant-numeric: tabular-nums; }

/* ══ Yatay ürün şeridi ══
   Ana sayfada bölüm başına 20 ürün gösterilir; ızgara olarak basılsa
   ekranın yarısını kaplar ve altındaki bölümler görünmez olurdu.
   Kaydırmayı tarayıcı yapar — JS yalnızca okları yönetir (CLAUDE.md §8.1). */
.kaydirak { position: relative; }

.kaydirak-serit {
  display: flex; gap: 1.125rem;
  overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Kartın gölgesi ve hover'daki 3px yükselme kırpılmasın */
  padding: .25rem .25rem 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* şerit biterken sayfa geri gitmesin */
}
.kaydirak-serit::-webkit-scrollbar { display: none; }
.kaydirak-serit:focus-visible { outline: 2px solid var(--amber-600); outline-offset: 2px; }

.kaydirak-oge {
  flex: 0 0 15rem;          /* ızgaradaki minmax(15rem) ile aynı genişlik */
  scroll-snap-align: start;
}
.kaydirak-oge > .urun-kart { height: 100%; }

/* Kategori şeridi: kartlar üründen dar — 16 kategori tek bakışta daha
   çoğu görünsün. Kart yüksekliği eşitlenir, ad iki satıra taşabiliyor. */
.kaydirak-kategori .kaydirak-oge { flex: 0 0 12rem; }
.kaydirak-kategori .kategori-kart { height: 100%; }

/* ── Metin bloğu artan boşlukta ORTALANIR ──
   Kartlar şeritte eşit yüksekliğe çekiliyor; ürün sayısı olmayan ya da
   adı tek satırlık kategorilerde artan boşluk **altta toplanıyor** ve
   kartlar hizasız görünüyordu (ölçüldü). `margin: auto` çifti metni
   kalan alanın ortasına yerleştirir; fotoğraf üstte sabit kalır. */
.kaydirak-kategori .kategori-kart .kategori-ad { margin-top: auto; }
.kaydirak-kategori .kategori-kart > :last-child { margin-bottom: auto; }

.kaydirak-ok {
  position: absolute; top: calc(50% - 1rem); transform: translateY(-50%);
  z-index: 2; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--cizgi); background: var(--yuzey);
  color: var(--metin); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--g-3);
  transition: background var(--gecis), border-color var(--gecis), opacity var(--gecis);
}
.kaydirak-ok[hidden] { display: none; }
.kaydirak-ok:hover { background: var(--amber-500); border-color: var(--amber-500);
                     color: var(--ink-900); }   /* amber üzerine koyu — §8.4 */
.kaydirak-ok:focus-visible { outline: 2px solid var(--amber-600); outline-offset: 2px; }
.kaydirak-ok svg { width: 20px; height: 20px; }
.kaydirak-sol { left: -1.375rem; }
.kaydirak-sag { right: -1.375rem; }

/* Dar ekranda oklar kabın dışına taşamaz; içeri alınır. */
@media (max-width: 1360px) {
  .kaydirak-sol { left: .25rem; }
  .kaydirak-sag { right: .25rem; }
}

/* Dokunmatikte oklar gereksiz — parmakla kaydırılıyor, yeri de kapatıyorlar. */
@media (hover: none) {
  .kaydirak-ok { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .kaydirak-serit { scroll-behavior: auto; }
}

/* ── Grup seçtirme ──
   Aracı tanıdık, parça kelimesini tanımadık. "Bulunamadı" demek yerine
   o aracın gerçekten parçası olan gruplarını gösteririz (CLAUDE.md §8.20).
   Liste uzun olabiliyor (34 grup, bazı gruplarda 100+ parça), bu yüzden
   kendi içinde kaydırılır — pencere ekrandan taşmasın. */
.tedarik-secim { margin-top: 1rem; text-align: left; }
.tedarik-secim[hidden] { display: none; }
.tedarik-secim .ts-baslik { margin: 0 0 .625rem; font-size: .9375rem; font-weight: 650; }
.tedarik-secim .ts-geri {
  border: 0; background: none; padding: 0 0 .5rem; cursor: pointer;
  font: inherit; font-size: .8125rem; color: var(--amber-700); font-weight: 600;
}
.tedarik-secim .ts-geri[hidden] { display: none; }

.ts-liste { display: grid; gap: .3125rem; max-height: 46vh; overflow-y: auto;
            padding-right: .25rem; }
.ts-oge {
  text-align: left; width: 100%; padding: .5625rem .75rem; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: var(--r-md);
  background: var(--yuzey); color: var(--metin); font: inherit; font-size: .875rem;
  transition: background var(--gecis), border-color var(--gecis);
}
.ts-oge:hover { background: var(--amber-50); border-color: var(--amber-300); }
.ts-oge:focus-visible { outline: 2px solid var(--amber-600); outline-offset: -2px; }

/* Aday listesinin sonundaki "tüm gruplar" kaçış yolu — seçenek değil,
   ağaca dönüş. Ayırt edilsin diye soluk ve italik. */
.ts-oge-tumu {
  font-style: italic;
  color: var(--ink-500);
  border-style: dashed;
}
.ts-oge-tumu:hover { background: var(--ink-50); border-color: var(--ink-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .ts-oge:hover { background: #2a2110; border-color: #5c4410; }
}
:root[data-tema="koyu"] .ts-oge:hover { background: #2a2110; border-color: #5c4410; }

/* ── Bekleme penceresi: kapatma ve kod kısayolu ── */
.tedarik-kutu { position: relative; }

/* Her durumda erişilebilir kapatma. Seçim ekranında müşteri vazgeçemiyordu. */
.tedarik-x {
  position: absolute; top: .5rem; right: .5rem;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: none; color: var(--metin-alt); font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--gecis), color var(--gecis);
}
.tedarik-x:hover { background: var(--yuzey-alt); color: var(--metin); }
.tedarik-x:focus-visible { outline: 2px solid var(--amber-600); outline-offset: 2px; }

/* Kodu bilen müşteri gruplarda gezinmesin — en kısa yol. */
.ts-kod { margin-bottom: .875rem; }
.ts-kod label { display: block; font-size: .8125rem; color: var(--metin-alt);
                margin-bottom: .375rem; }
.ts-kod-satir { display: flex; gap: .5rem; }
.ts-kod-satir .girdi { flex: 1; min-width: 0; }
.ts-kod-satir .dugme2 { flex: none; }

/* ── ŞASE ADIMI — pencerenin ilk ve tek sorusu *(kullanıcı kararı)* ──
   Parça numarası alanı kaldırıldı; ekranda tek bir soru var, o yüzden
   ortalanmış ve nefes alan bir düzen. */
.ts-sase-adim { text-align: center; padding: .5rem 0 1rem; }
.ts-sase-adim[hidden] { display: none; }
.ts-sase-baslik { margin: 0 0 .375rem; font-size: 1.0625rem; font-weight: 700; }
.ts-sase-alt {
  margin: 0 auto .875rem; max-width: 30rem; font-size: .8438rem;
  color: var(--metin-alt); line-height: 1.5;
}
.ts-sase-girdi {
  max-width: 22rem; margin: 0 auto; text-align: center;
  text-transform: uppercase; letter-spacing: .06em;
  font-family: ui-monospace, monospace;
}
.ts-sase-dugmeler {
  display: flex; gap: .625rem; justify-content: center; margin-top: .875rem;
}
/* "Geç" göz ardı edilebilir görünmemeli: bilmeyen müşterinin tek yolu o. */
.ts-sase-dugmeler .dugme2 { min-width: 7rem; }

/* ── Şase alanı *(§10.5 — %100 eşleşme)* ──
   Kod alanıyla aynı düzen; ayırt edici olan yalnızca ipucu satırı ve
   hata mesajı. VIN büyük harflidir, `text-transform` girdinin üstünde. */
.ts-sasi .girdi { letter-spacing: .04em; font-family: ui-monospace, monospace; }
.ts-ipucu { margin: .375rem 0 0; font-size: .75rem; color: var(--metin-alt); line-height: 1.45; }
.ts-hata  { margin: .375rem 0 0; font-size: .8125rem; color: var(--hata-700);
            font-weight: 600; line-height: 1.45; }
.ts-hata[hidden] { display: none; }

.ts-ayrac { display: flex; align-items: center; gap: .625rem;
            margin: .875rem 0; color: var(--metin-alt); font-size: .8125rem; }
.ts-ayrac::before, .ts-ayrac::after {
  content: ''; flex: 1; height: 1px; background: var(--cizgi);
}

.ts-vazgec { width: 100%; margin-top: .75rem; }


/* ===================================================================
   ARAÇ SAYFASI — solda parça grupları, sağda ürünler
   33 grup önce kart olarak sayfanın altına diziliyordu; müşteri ürünleri
   geçip aşağı inmek zorunda kalıyordu. Panel `<details>` ile çalışır,
   JavaScript yoktur.
   =================================================================== */

.arac-duzen {
  display: grid; gap: 1.5rem; align-items: start;
  grid-template-columns: 17rem minmax(0, 1fr);
}

/* Dar ekranda panel üste alınır ve kapalı başlar — ürünler öne çıksın. */
@media (max-width: 60rem) {
  .arac-duzen { grid-template-columns: 1fr; }
  .arac-gruplar { max-height: 22rem; overflow-y: auto; }
}

.arac-gruplar {
  border: 1px solid var(--cizgi); border-radius: var(--r-md);
  background: var(--yuzey); overflow: hidden;
  position: sticky; top: 1rem;          /* uzun listede panel ekranda kalsın */
  max-height: calc(100vh - 2rem); overflow-y: auto;
}

.arac-gruplar-bas {
  display: flex; align-items: center; gap: .5rem;
  padding: .8125rem 1rem; background: var(--yuzey-alt);
  border-bottom: 1px solid var(--cizgi); font-size: .9375rem;
}
.arac-gruplar-bas span {
  margin-left: auto; font-size: .75rem; font-weight: 700;
  color: var(--metin-alt); background: var(--zemin);
  padding: .0625rem .4375rem; border-radius: 999px;
}

.arac-grup { border-bottom: 1px solid var(--cizgi); }
.arac-grup:last-child { border-bottom: 0; }

.arac-grup > summary {
  cursor: pointer; padding: .625rem 1rem; font-size: .875rem; font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: .5rem;
  transition: background var(--gecis);
}
.arac-grup > summary::-webkit-details-marker { display: none; }

/* Ok işareti: açıkken döner. Simge kütüphanesi yüklenmez. */
.arac-grup > summary::after {
  content: ""; margin-left: auto; width: .4375rem; height: .4375rem;
  border-right: 2px solid var(--metin-alt); border-bottom: 2px solid var(--metin-alt);
  transform: rotate(-45deg); transition: transform var(--gecis); flex: none;
}
.arac-grup[open] > summary::after { transform: rotate(45deg); }
.arac-grup > summary:hover { background: var(--yuzey-alt); }
.arac-grup[open] > summary { background: var(--yuzey-alt); }

.arac-grup ul { list-style: none; margin: 0; padding: .25rem 0 .5rem; }
.arac-grup li a {
  display: block; padding: .3125rem 1rem .3125rem 1.5rem;
  font-size: .8438rem; line-height: 1.45; color: var(--metin-alt);
}
.arac-grup li a:hover { color: var(--amber-700); background: var(--uyari-50); }

/* ── Tüm kategoriler aynı görünür ──
   Önce listelenmiş olanlar yeşil noktayla işaretleniyordu; müşteri için
   anlamsız bir ayrım (kataloğun iç durumu) ve liste alacalı görünüyordu.
   Açık olan kategori vurgulanır, gerisi tek tip. */
.arac-grup li a[aria-current="page"] {
  color: var(--amber-700); font-weight: 650; background: var(--uyari-50);
}

/* ── Tedarik penceresi: araç kuşağı ve motor seçimi ──
   Kuşak kartları görselli ızgara, motor satırları tek sütun. Müşteri
   "bmw 520" yazdığında 12 kuşak çıkıyor; kart görünümü tek ekranda
   taranabilir kılıyor, motor listesi ise metin ağırlıklı olduğu için
   satır satır daha okunaklı. */
.ts-liste.ts-kart {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .5rem;
  max-height: 60vh;
}

/* ── Kart görünümünde pencere genişler ──
   26rem'lik dar pencerede yan yana ancak 2 kart sığıyordu; "bmw 520"
   12 kuşak döndürüyor ve liste altı sıra sürüyordu. Geniş hâlde sıra
   başına 4 kart düşer, liste tek ekranda taranır *(kullanıcı isteği)*.

   Genişlik yalnızca bu adımda: ilerleme ekranı tek sütun metin, orada
   geniş kutu ortada boşluk bırakırdı.

   `min()` ile dar ekranda taşma olmaz — telefonda yine tek/iki sütun. */
.tedarik-kutu-genis { max-width: min(52rem, 100%); }
.tedarik-kutu-genis .ts-liste.ts-kart {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.ts-oge.ts-arac {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .625rem .5rem; text-align: center;
}
.ts-oge.ts-arac img { max-width: 100%; height: 3.25rem; object-fit: contain; }
.ts-arac-ad  { font-weight: 650; font-size: .8125rem; line-height: 1.25; }
.ts-arac-yil { font-size: .75rem; color: var(--metin-alt); }

.ts-oge.ts-motor {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3125rem;
  padding: .625rem .75rem;
}
.ts-oge.ts-motor strong,
/* Şase ekranındaki motor adı — kuşak ekranındaki `strong` ile aynı
   biçim; orada başlık `strong`, burada `span` (kaynak farklı). */
.ts-motor-ad { font-size: .9375rem; line-height: 1.2; font-weight: 650; }

/* ── Motor rozetleri ──
   Güç asıl seçim ölçütü: aynı rozette 136/163/184/190/205/211 HP
   olabiliyor (F10 520d, ölçüldü). Tek satırda noktayla ayrılmış metin
   içinde kayboluyordu; ayrı rozet olarak basılıp güç renklendirildi. */
.ts-motor-rozet { display: flex; flex-wrap: wrap; gap: .3125rem; align-items: center; }

.tm-guc {
  padding: .0625rem .4375rem;
  background: var(--amber-100); border: 1px solid var(--amber-300);
  border-radius: var(--r-sm); color: var(--ink-900);
  font-size: .8125rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tm-etiket {
  padding: .0625rem .4375rem;
  background: var(--ink-100); border: 1px solid var(--ink-200);
  border-radius: var(--r-sm); color: var(--ink-800);
  font-size: .75rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tm-yakit { text-transform: none; }

/* ── Şase onay kipi ──
   Tek araç bulunduğunda kart bir seçenek değil bir SORU: "bu mu?".
   Amber çerçeve onu listeden ayırır; alttaki "bu değil" satırı ise
   sıradan bir bağlantı gibi durur, yanlışlıkla basılmasın. */
.ts-onay .ts-oge:not(.ts-onay-hayir) {
  border-color: var(--amber-500); background: var(--amber-50);
}
.ts-onay-eylem { font-size: .8125rem; font-weight: 650; color: var(--amber-700); }
.ts-onay-hayir {
  border-style: dashed; font-size: .8125rem; color: var(--metin-alt);
  justify-content: center; text-align: center;
}
/* Motoru belirtilmemiş garaj kaydı — süzgeç olarak kullanılamıyor.
   Uyarı tonunda ama alarm değil: araç yine de listeleniyor. */
.garaj-eksik {
  display: block; margin-top: .375rem; font-size: .8125rem;
  color: var(--uyari-700, #b45309); line-height: 1.4;
}

.ts-motor-alt { font-size: .75rem; color: var(--metin-alt);
                font-variant-numeric: tabular-nums; }

/* Geniş pencerede motorlar İKİ SÜTUN — 19 motorlu bir kuşakta
   (F10 520) tek sütun uzun kaydırma demekti *(kullanıcı isteği)*. */
.tedarik-kutu-genis .ts-liste:not(.ts-kart) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .375rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tm-guc { background: #3a2c0d; border-color: #5c4410; color: var(--ink-100); }
  :root:not([data-tema="acik"]) .tm-etiket { background: #1f2937; border-color: #374151; color: var(--ink-200); }
}
:root[data-tema="koyu"] .tm-guc { background: #3a2c0d; border-color: #5c4410; color: var(--ink-100); }
:root[data-tema="koyu"] .tm-etiket { background: #1f2937; border-color: #374151; color: var(--ink-200); }

/* ── Araç belirsiz uyarısı ──
   Sonuç çıksa bile kuşak sorulur; şerit hem sebebi söyler hem seçim
   düğmesini taşır. Pencere kendiliğinden açılıyor, şerit kapatılırsa
   müşteri buradan tekrar açabilsin. */
.arac-uyari {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .75rem 1rem;
  background: var(--amber-50); border: 1px solid var(--amber-300);
  border-radius: var(--r-md); color: var(--ink-900);
  font-size: .9375rem;
}
.arac-uyari strong { font-weight: 700; }

/* Bilgi şeridi — "sonuçlar şu araca göre süzüldü".
   Uyarı şeridinden AYRI renkte: uyarı bir eylem istiyor (aracını seç),
   bilgi yalnızca ne yaptığımızı söylüyor. İkisi aynı amber olsaydı
   müşteri hangisine tepki vereceğini ayırt edemezdi. */
.arac-uyari-bilgi {
  background: var(--ink-50); border-color: var(--ink-200); color: var(--ink-800);
}

/* ── Onay penceresi (SweetAlert görünümü, dış kütüphane YOK) ──────────
   Tarayıcının confirm() kutusu yerine. Gerekçe `assets/js/onay.js`
   başında; kısaca: görünümü tarayıcıya göre değişiyor, uzun metinde
   okunaksız ve tarayıcı "bu site daha fazla iletişim kutusu göstermesin"
   seçeneği sunuyor — işaretlenirse onay adımı tamamen kayboluyor. */
.onay-katman {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgb(15 23 42 / .55);
  animation: onay-gir .16s ease-out;
}
.onay-kutu {
  width: 100%; max-width: 26rem;
  background: var(--yuzey); color: var(--metin);
  border-radius: 1rem; padding: 1.75rem 1.5rem 1.25rem;
  box-shadow: 0 24px 64px rgb(15 23 42 / .28);
  text-align: center;
  animation: onay-kutu-gir .2s cubic-bezier(.2, .9, .3, 1.2);
}
.onay-ikon {
  width: 4rem; height: 4rem; margin: 0 auto .875rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.onay-ikon svg { width: 2.125rem; height: 2.125rem; }

/* Amber dolgu üstüne ink-900 — beyaz metin yasak (§8.4). */
.onay-tehlike .onay-ikon { background: var(--hata-50);   color: var(--hata-700); }
.onay-soru    .onay-ikon { background: var(--amber-100); color: var(--ink-900); }
.onay-bilgi   .onay-ikon { background: var(--zemin-alt); color: var(--metin); }

.onay-baslik { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.onay-metin  { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--metin-alt); }

.onay-dugmeler {
  display: flex; gap: .625rem; justify-content: center;
  margin-top: 1.5rem; flex-wrap: wrap;
}
.onay-dugmeler .dugme, .onay-dugmeler .dugme2 { min-width: 8rem; justify-content: center; }

.onay-kapaniyor { animation: onay-cik .14s ease-in forwards; }

@keyframes onay-gir      { from { opacity: 0 } to { opacity: 1 } }
@keyframes onay-cik      { to   { opacity: 0 } }
@keyframes onay-kutu-gir { from { transform: translateY(.75rem) scale(.96); opacity: 0 } }

/* Hareket azaltma tercihi olan kullanıcıda animasyon yok. */
@media (prefers-reduced-motion: reduce) {
  .onay-katman, .onay-kutu, .onay-kapaniyor { animation: none; }
}

/* ── Onay penceresi düğmeleri ────────────────────────────────────────
   `onay.js` yönetim tarafındaki `dugme` ailesini üretiyor; mağaza
   CSS'inde bu adlar tanımlı değildi (burada `.dugme-ana` ve `.dugme2*`
   var). Sonuç: sepeti boşalt, adres sil ve garajdan araç sil
   pencerelerinde yıkıcı "Sil" ile "Vazgeç" tarayıcı varsayılanıyla
   birbirinin aynı görünüyordu — onay kutusunun var olma sebebi tam da
   bu ikisini ayırmak. */
.onay-dugmeler .dugme {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .375rem; padding: .625rem 1.125rem;
  border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: .9375rem; font-weight: 650;
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
/* Amber dolgu üstüne ink-900 — beyaz metin yasak (§8.4). */
.onay-dugmeler .dugme-birincil { background: var(--amber-500); color: var(--ink-900); }
.onay-dugmeler .dugme-birincil:hover { background: var(--amber-600); }
.onay-dugmeler .dugme-tehlike  { background: var(--hata-600); color: #fff; }
.onay-dugmeler .dugme-tehlike:hover { background: var(--hata-700); }
.onay-dugmeler .dugme-sade {
  background: transparent; color: var(--metin); border-color: var(--cizgi);
}
.onay-dugmeler .dugme-sade:hover { background: var(--yuzey-alt, var(--zemin)); }
.onay-dugmeler .dugme:focus-visible { outline: 2px solid var(--amber-700); outline-offset: 2px; }

/* ── "İçeriğe atla" bağlantısı odaklanınca görünmeli (WCAG 2.4.7) ──
   `.gizli-erisim` 1×1 px'e kırpıyordu ve `:focus` karşılığı yoktu;
   klavye kullanıcısı ilk Tab'da hiçbir şey görmüyor, atlama bağlantısı
   fiilen işlevsiz kalıyordu. */
.gizli-erisim:focus, .gizli-erisim:focus-visible {
  position: fixed; top: .75rem; left: .75rem; z-index: 9500;
  width: auto; height: auto; clip: auto; clip-path: none;
  padding: .625rem 1rem; overflow: visible; white-space: nowrap;
  background: var(--amber-500); color: var(--ink-900);
  border-radius: var(--r-md); font-weight: 650;
  outline: 2px solid var(--ink-900); outline-offset: 2px;
}

/* ── Sayfa ızgarası: içerik + yan sütun ──────────────────────────────
   Bu düzen dört ekranda satır içi `style` ile yazılıydı
   (ödeme · sepet · iletişim · garaj). Satır içi stil medya sorgusuyla
   ezilemez; 360 px'te içerik ~190 px taşıyor ve "Siparişi Tamamla"
   düğmesi ekran dışında kalıyordu. `magaza.css`'te `overflow-x:hidden`
   de yok, yani taşma maskelenmiyordu.

   İronik olan: sepet SATIRI 700 px'te doğru şekilde tek sütuna
   düşüyordu — satır uyumlu, onu saran sayfa değil. */
.sayfa-izgara {
  display: grid; gap: 1.5rem; align-items: start;
  grid-template-columns: 1fr 21rem;
}
.sayfa-izgara-dar { grid-template-columns: 1fr 20rem; }

@media (max-width: 900px) {
  .sayfa-izgara, .sayfa-izgara-dar { grid-template-columns: 1fr; }
}

/* Garaj araç seçici — üç açılır kutu + düğme. */
.arac-secici-satir {
  display: grid; gap: .625rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
}

/* ── Favori düğmesi ──────────────────────────────────────────────────
   Rota ve "Favorilerim" sayfası vardı, ekleme düğmesi hiçbir yerde
   yoktu — liste hiçbir zaman dolamıyordu. */
.favori-dugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; flex: none;
  background: var(--yuzey); color: var(--metin-alt);
  border: 1px solid var(--cizgi); border-radius: var(--r-md);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.favori-dugme svg { width: 1.375rem; height: 1.375rem; fill: none; }
.favori-dugme:hover { color: var(--hata-600); border-color: var(--hata-600); }
/* Ekliyken içi dolu kalp — renk tek başına ayırt edici değil (a11y). */
.favori-dugme.ekli { color: var(--hata-600); border-color: var(--hata-600); }
.favori-dugme.ekli svg { fill: currentColor; }
.favori-dugme:focus-visible { outline: 2px solid var(--amber-700); outline-offset: 2px; }

/* ── B2B teslim seçenekleri *(kullanıcı kararı)* ──
   "Yarın kargoda 420 ₺ · 3 gün sonra 395 ₺" — müşteri fiyatı ve teslim
   süresini birlikte görüp seçiyor. Tek seçenek varsa radyo basılmıyor. */
.teslim-secenek {
  margin: 0 0 1rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  overflow: hidden;
}
.teslim-baslik {
  margin: 0;
  padding: .5rem .75rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--metin-alt);
  background: var(--yuzey-2);
  border-bottom: 1px solid var(--cizgi);
}
.teslim-satir {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--cizgi);
}
.teslim-satir:last-child { border-bottom: 0; }
.teslim-satir:hover { background: var(--yuzey-2); }
.teslim-satir.secili { background: var(--amber-50, #fffbeb); }
:root:not([data-theme="light"]) .teslim-satir.secili,
:root[data-theme="dark"] .teslim-satir.secili { background: rgba(251,191,36,.10); }
.teslim-bilgi { display: flex; flex-direction: column; gap: .125rem; flex: 1; min-width: 0; }
.teslim-bilgi strong { font-size: .9375rem; }
.teslim-alt { font-size: .8125rem; color: var(--metin-alt); }
.teslim-fiyat {
  font-weight: 800;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Metin içinde geçen düğme — "…için değiştirin" gibi. Bağlantı gibi
   görünür ama <a> değil: gidilecek bir adres yok, JS eylemi var.
   <a href="#"> yazmak adres çubuğunu kirletir ve geri düğmesini bozar. */
.ts-bag-dugme {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--amber-700); text-decoration: underline;
}
.ts-bag-dugme:hover { color: var(--amber-800, var(--ink-900)); }

/* ── Garajım: araç ekleme kartları *(11.08.2026)* ──
   Şaseden ekleme ile marka/modelden ekleme AYRI kartlar (kullanıcı
   kararı). Önce tek kutunun içinde "ya da elle seçin" ayracıyla alt
   alta duruyorlardı ve karışık görünüyordu.

   Not: `.garaj-kart` araç LİSTESİ kartlarına ait (flex satır); bu
   kartlar `.garaj-ek` — aynı sınıfı paylaşsalardı liste düzeni bozulurdu. */
.garaj-ekle-izgara {
  display: grid; gap: 1.25rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
}

.garaj-ek { margin: 0; }
.garaj-ek-sase { background: var(--ink-50, #f8fafc); }

/* Seçim kartı dikkat çekmeli: müşteri şase girdi, cevabı burada. */
.garaj-ek-secim { border-color: var(--amber-500); }

.garaj-ek-bas { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .875rem; }
.garaj-ek-bas > div { flex: 1; min-width: 0; }

.garaj-ek-baslik {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; font-size: 1rem; font-weight: 700;
}

.garaj-ek-no {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%; background: var(--amber-500);
  /* Amber dolgu üzerine ASLA beyaz yazılmaz (CLAUDE.md §8.4) */
  color: var(--ink-900); font-size: .8125rem; font-weight: 800;
}

/* Vazgeç düğmesi — adaylar oturumda duruyor, çıkış açık bir eylem olmalı. */
.garaj-kapat {
  background: none; border: 0; cursor: pointer; flex: none;
  font-size: 1.5rem; line-height: 1; padding: 0 .25rem;
  color: var(--metin-alt);
}
.garaj-kapat:hover { color: var(--ink-900); }

/* Alanlar tek sütun: kart dar ve etiketli kutular yan yana sıkışıyor. */
.garaj-form { display: grid; gap: .75rem; }
.garaj-form .as-git { justify-self: start; }

/* Garaj kartında şase ekleme — kapalı başlar, yer kaplamasın. */
.garaj-sasi { margin-top: .5rem; }
.garaj-sasi > summary {
  cursor: pointer; font-size: .8125rem; color: var(--metin-alt);
  list-style: none; display: inline-flex; align-items: center; gap: .25rem;
}
.garaj-sasi > summary::before { content: "＋"; font-weight: 700; }
.garaj-sasi[open] > summary::before { content: "−"; }
.garaj-sasi > summary:hover { color: var(--ink-900); }
.garaj-sasi code { font-family: ui-monospace, monospace; font-size: .8125rem; }
.garaj-sasi-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.garaj-sasi-form .girdi { flex: 1 1 15rem; min-width: 0; }

/* ── Konum seçtirme *(defter A8)* ────────────────────────────────
   Aynı araç + kategoride hem ön hem arka parça varsa hangisi
   isteniyor sorulur. ÇOKLU seçim: müşteri "ön + sağ + sol"
   diyebilir. "Farketmez" bilerek yok — keyfi seçim olmaz. */
.ts-konum            { margin: .5rem 0 1rem; }
.ts-konum-grup       { margin-bottom: 1rem; }
.ts-konum-soru       { font-weight: 600; color: var(--ink-800); margin: 0 0 .5rem; }
.ts-konum-secenekler { display: flex; flex-wrap: wrap; gap: .5rem; }

.ts-konum-oge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--ink-200); border-radius: .5rem;
  background: #fff; cursor: pointer;
  font-size: .9375rem; color: var(--ink-800);
  transition: border-color .12s, background .12s;
}
.ts-konum-oge:hover        { border-color: var(--amber-400); }
/* Amber dolgu üstüne ink-900 — beyaz metin yasak (§8.4). */
.ts-konum-oge:has(:checked) {
  border-color: var(--amber-500); background: var(--amber-50); color: var(--ink-900);
  font-weight: 600;
}
.ts-konum-oge input { accent-color: var(--amber-500); width: 1.05rem; height: 1.05rem; }

/* `[hidden]` kuralı ZORUNLU: yazar stilindeki `display` tarayıcının
   varsayılanını ezer ve blok hep açık kalır (§8.15.7). */
.ts-konum[hidden] { display: none; }

/* ── Donanım kısıtı uyarısı ─────────────────────────────────────
   Soru değil uyarı: müşteri "M Sport freniniz var mı?" sorusunu
   cevaplayamaz ama parçanın hangi donanım için olduğunu görmeli.
   Amber dolgu üstüne ink-900 — beyaz metin yasak (§8.4). */
.uyum-uyari {
  margin: 1rem 0 0;
  padding: .875rem 1rem;
  background: var(--amber-50);
  border: 1px solid var(--amber-300);
  border-left: 3px solid var(--amber-500);
  border-radius: .5rem;
  color: var(--ink-900);
  font-size: .9375rem;
}
.uyum-uyari-baslik { font-weight: 700; margin: 0 0 .5rem; }
.uyum-uyari ul     { margin: 0 0 .5rem; padding-left: 1.125rem; }
.uyum-uyari li     { margin-bottom: .25rem; }
.uyum-uyari-alt    { margin: 0; color: var(--ink-700); font-size: .875rem; }


/* ── /parcalar — parça tipleri ── */
.pt-izgara {
  display: grid;
  gap: 1.125rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* Ürünü olmayan gruplar: aynı ızgara, daha küçük kart — katalogun
   kapsamı görünsün ama dolu gruplarla aynı ağırlıkta durmasın. */
.pt-izgara-sade { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

.pt-kart {
  display: flex; flex-direction: column;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.pt-kart:hover { border-color: var(--vurgu); box-shadow: var(--g-3); transform: translateY(-3px); }
.pt-dolu { border-color: var(--amber-300); }

.pt-bas {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}

/* ── Fotoğraf tam genişlikte kare ──
   48 px'lik satır ikonuydu; kategori fotoğrafları (§8.70) o boyutta
   okunmuyordu. Ana sayfa şeridiyle aynı dil kullanılıyor. */
.pt-gorsel-kutu {
  position: relative;
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--yuzey-alt);
}
.pt-gorsel { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-gorsel-kutu svg { width: 44px; height: 44px; color: var(--metin-alt); }
.pt-izgara-sade .pt-gorsel-kutu svg { width: 34px; height: 34px; }

/* Ürün sayısı fotoğrafın üstünde rozet — kartın metin alanını yemesin.
   Amber dolgu üstüne ink-900 (§8.4: amber üzerine beyaz metin yasak). */
.pt-rozet {
  position: absolute; left: .5rem; bottom: .5rem;
  font-size: .6875rem; font-weight: 700;
  color: var(--ink-900); background: var(--amber-400);
  padding: .1875rem .4375rem; border-radius: 999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / .35);
}

.pt-ad {
  padding: .75rem .875rem;
  font-weight: 700; font-size: .875rem; line-height: 1.35;
}
.pt-izgara-sade .pt-ad { font-size: .8125rem; padding: .625rem .75rem; }

.pt-alt {
  margin: 0; padding: 0 .875rem .875rem;
  list-style: none; display: grid; gap: .25rem;
}
.pt-alt a {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; color: var(--metin-alt);
  text-decoration: none; padding: .3125rem 0;
  border-top: 1px solid var(--cizgi);
}
.pt-alt-ad { flex: 1 1 auto; }
.pt-alt-gorsel {
  width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: 50%; overflow: hidden; background: var(--yuzey-alt);
}
.pt-alt-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-alt li:first-child a { border-top: 0; }
.pt-alt a:hover { color: var(--vurgu-koyu); }
.pt-alt-adet { color: var(--metin-alt); font-variant-numeric: tabular-nums; flex: none; }

/* İki liste arasındaki ayraç */
.pt-ayrac { margin: 2.5rem 0 1rem; }
.pt-ayrac h2 { font-size: 1.125rem; margin: 0 0 .25rem; }
.pt-ayrac p { margin: 0; font-size: .875rem; color: var(--metin-alt); }

.bolum-baslik { font-size: 1.5rem; margin: 0; }
.bolum-alt { margin: .375rem 0 0; font-size: .9375rem; color: var(--metin-alt); }
.bolum-alt a { color: var(--vurgu-koyu); font-weight: 600; }

/* ── MARKALAR SAYFASI ─────────────────────────────────────────────── */
.mk-izgara {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}
.mk-kart {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .25rem; padding: 1rem .875rem;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.mk-kart:hover { border-color: var(--vurgu); box-shadow: var(--g-3); transform: translateY(-3px); }
.mk-dolu { border-color: var(--amber-300); }

/* Logo alanı SABİT yükseklikte: logolu ve logosuz kartlar aynı hizada
   dursun. Değişken yükseklik ızgarayı basamaklı gösteriyordu. */
/* ── Logo karosu HER TEMADA AÇIK zeminde ──
   Ölçüldü: 292 logonun **112'si** (%38) koyu metinli saydam PNG —
   karanlık temada kartın koyu zemininde tamamen kayboluyorlardı
   (ART · ASAHI · BMW · AP · AYFAR · BERU …). Marka logoları beyaz
   zemin için tasarlanır; karoya sabit açık zemin vermek standart
   çözüm ve ana sayfadaki `.marka-kutu` da bunu zaten yapıyor. */
.mk-logo {
  display: grid; place-items: center;
  width: 100%; height: 3.25rem; margin-bottom: .5rem;
  background: #fff; border-radius: var(--r-sm, 6px); padding: .375rem;
}
.mk-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Yer tutucu harf açık zeminde: kart zemininden bağımsız okunur kalsın. */
.mk-logo .mk-harf { background: transparent; border: 0; color: #6b7280; }

/* Logosuz marka: baş harfler. Uydurma simge yerine tipografi —
   markanın kendi adından geliyor, her zaman doğru (§8.71). */
.mk-harf {
  font-family: var(--yazi-baslik, inherit);
  font-size: 1.375rem; font-weight: 800; letter-spacing: .06em;
  color: var(--metin-alt);
  background: var(--yuzey-alt); border: 1px dashed var(--cizgi);
  border-radius: var(--r-md, 8px);
  padding: .375rem .75rem; line-height: 1;
}
.mk-ad { font-weight: 650; font-size: .875rem; line-height: 1.3; }
.mk-kalite { font-size: .75rem; color: var(--vurgu-koyu); font-weight: 600; }
.mk-adet { font-size: .8125rem; color: var(--metin-alt); }

/* ── KATEGORİ SAYFASI: alt kategori şeridi ───────────────────────── */
.alt-kat-serit {
  display: flex; gap: .625rem; margin: 1rem 0 0;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: .25rem;
}
.alt-kat-serit::-webkit-scrollbar { display: none; }
.alt-kat {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: .5rem;
  padding: .375rem .75rem .375rem .375rem;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: 999px; text-decoration: none; color: inherit;
  font-size: .8125rem; font-weight: 650; white-space: nowrap;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alt-kat:hover { border-color: var(--vurgu); box-shadow: var(--g-2, var(--g-3)); }
.alt-kat-gorsel {
  width: 2rem; height: 2rem; flex: none;
  border-radius: 50%; overflow: hidden; background: var(--yuzey-alt);
  display: grid; place-items: center;
}
.alt-kat-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alt-kat-adet {
  font-size: .6875rem; font-weight: 700; color: var(--metin-alt);
  background: var(--yuzey-alt); border-radius: 999px; padding: .0625rem .375rem;
}


/* ═══════════════════════════════════════════════════════════════════
   TASARIM KATMANI — 14.08.2026 *(kullanıcı kararı: tasarim-2 tonları)*

   Ayrı dosya AÇILMADI: her ek dosya bir istek daha demek ve §8.15.3'te
   "sayfa yüklenirken dış bağımlılık SIFIR" kararı var; aynı gerekçeyle
   istek sayısı da düşük tutuluyor. Bu katman yukarıdaki kuralları
   EZER — sıra önemli, dosyanın sonunda durmalı.

   Kütüphane yok. Kaydırma tarayıcının kendi işi (`scroll-snap`),
   JavaScript yalnızca ok/nokta yönetiyor (§8.1 · §8.21).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. ÜST ŞERİT ────────────────────────────────────────────────── */
.ust-serit {
  background: var(--siyah); color: var(--siyah-metin-alt);
  font-size: .8125rem; border: 0;
}
.ust-serit .kap {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 38px; flex-wrap: wrap;
}
.ust-serit a { color: var(--siyah-metin-alt); text-decoration: none; }
.ust-serit a:hover { color: var(--vurgu-acik); }
.ust-guven { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ust-guven span { display: inline-flex; align-items: center; gap: .375rem; }
.ust-guven svg { width: 14px; height: 14px; color: var(--vurgu-acik); flex: 0 0 auto; }
.ust-serit-slogan { display: none; }          /* yerini güven listesi aldı */
@media (max-width: 820px) { .ust-guven span:nth-child(n+3) { display: none; } }

/* ── 2. BAŞLIK ───────────────────────────────────────────────────── */
.baslik { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.baslik .kap { min-height: 84px; gap: 1.5rem; }
.logo-im {
  background: linear-gradient(135deg, var(--vurgu-acik), var(--vurgu-koyu));
  color: #fff; font-weight: 800;
}
.baslik .arama { max-width: 620px; }
.baslik .arama input { height: 46px; border-radius: var(--r-sm); }
.baslik .arama button {
  background: var(--vurgu-koyu); color: #fff;     /* 5.18:1 — beyaz serbest */
  border-radius: var(--r-sm); width: 54px;
}
.baslik .arama button:hover { background: var(--vurgu); }

/* Hesap / sepet — ikon + etiket (tasarim-2'deki gibi) */
.baslik-islem { display: flex; align-items: center; gap: .25rem; }
.hesap-blok {
  display: flex; align-items: center; gap: .5rem; padding: .375rem .625rem;
  border-radius: var(--r-sm); color: inherit; text-decoration: none;
}
.hesap-blok:hover { background: var(--yuzey-alt); }
.hesap-blok svg { width: 26px; height: 26px; stroke-width: 1.5; color: var(--metin-alt); }
.hesap-yazi { display: flex; flex-direction: column; line-height: 1.2; }
.hesap-yazi b { font-size: .8125rem; font-weight: 700; }
.hesap-yazi span { font-size: .75rem; color: var(--metin-alt); }
@media (max-width: 900px) { .hesap-yazi { display: none; } }

/* ── 3. ARAÇ MARKASI MENÜSÜ — koyu bant ──────────────────────────── */
.gezinme { background: var(--siyah-2); border: 0; position: relative; z-index: 30; }

/* ── Taşan menüde SAĞ KENARDA solma ──
   Dar ekranda 14 öğe sığmıyor ve şerit kaydırılabilir; ama kesilen son
   öğe "bozuk" gibi okunuyordu (ölçüldü: sağ kenar 1415, kap 1360).
   Solma hem kırpmayı yumuşatıyor hem "devamı var" diyor.
   Sınıfı `magaza.js` yalnızca gerçekten taşarken ekliyor — sığan
   ekranda gereksiz bir gölge durmasın. */
.gezinme.tasiyor::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 3rem; pointer-events: none; z-index: 2;
  background: linear-gradient(to right, transparent, var(--siyah-2));
}
.gezinme-ic { display: flex; align-items: stretch; gap: 0; overflow-x: auto;
              scrollbar-width: none; }
.gezinme-ic::-webkit-scrollbar { display: none; }
.gezinme > .kap > a,
.gezinme .menu-marka, .gezinme .menu-tumu {
  color: #d7dce3; font-size: .8125rem; font-weight: 650; letter-spacing: .02em;
  /* Yatay dolgu 1rem → .8125rem: 14 öğe × 2 kenar = 28 kenar, öğe başına
     3 px kısmak 84 px kazandırıyor. Ölçüldü — 1440 px ekranda menü
     1415 px yer kaplıyordu ve kap 1360 px; "Tüm Araçlar" kesiliyordu. */
  padding: .875rem .8125rem; white-space: nowrap; text-decoration: none;
  border-bottom: 3px solid transparent; transition: color var(--gecis),
                background var(--gecis), border-color var(--gecis);
}
.gezinme .menu-marka:hover, .gezinme .menu-tumu:hover,
.gezinme .menu-marka[aria-expanded="true"] {
  color: #fff; background: rgb(255 255 255/.06); border-bottom-color: var(--vurgu);
}
.gezinme .menu-tumu {
  margin-left: auto; color: var(--vurgu-acik); font-weight: 700;
}
.gezinme .menu-tumu.aktif { color: #fff; background: var(--vurgu-koyu); }

/* ── 4. HERO — koyu bant, seçici üstüne binmiş ───────────────────── */
.hero {
  position: relative; background: var(--siyah); color: var(--siyah-metin);
  overflow: hidden;
}
.hero-kaydirak { position: relative; }
.hero-serit {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.hero-serit::-webkit-scrollbar { display: none; }
.hero-slayt {
  flex: 0 0 100%; scroll-snap-align: start; position: relative;
  min-height: 420px; display: grid; align-items: center;
}
.hero-gorsel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5;
}
/* Görselin üstüne okunabilirlik perdesi — metin her fotoğrafta okunmalı,
   fotoğrafın açık ya da koyu olmasına bırakılamaz. */
.hero-slayt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(11 13 18/.94) 0%, rgb(11 13 18/.80) 45%,
                                     rgb(11 13 18/.35) 100%);
}
.hero-ic { position: relative; z-index: 2; padding: 3rem 0; }
.hero-ic h1, .hero-ic .hero-baslik {
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 .875rem; color: #fff; font-weight: 800;
}
.hero-ic .vurgulu { color: var(--vurgu-acik); display: block; }
.hero-ic p { margin: 0 0 1.75rem; max-width: 46ch; font-size: 1.0313rem;
             line-height: 1.65; color: #c8cfd8; }
.hero-dugme {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--vurgu-koyu); color: #fff; font-weight: 700;
  padding: .8125rem 1.5rem; border-radius: var(--r-sm); text-decoration: none;
}
.hero-dugme:hover { background: var(--vurgu); }

/* Slayt okları ve noktaları — JS kapalıysa hiç basılmaz. */
.hero-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 42px; height: 42px; border-radius: var(--r-tam); border: 0;
  background: rgb(255 255 255/.12); color: #fff; cursor: pointer;
  display: none; place-items: center; backdrop-filter: blur(4px);
}
.hero-ok:hover { background: var(--vurgu-koyu); }
.hero-ok[data-yon="geri"] { left: 1rem; }  .hero-ok[data-yon="ileri"] { right: 1rem; }
.hero-ok.gorunur { display: grid; }
@media (hover: none) { .hero-ok { display: none !important; } }
.hero-nokta {
  position: absolute; left: 0; right: 0; bottom: .875rem; z-index: 4;
  display: flex; justify-content: center; gap: .4375rem;
}
.hero-nokta button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-tam);
  background: rgb(255 255 255/.35); cursor: pointer; transition: all var(--gecis);
}
.hero-nokta button[aria-current="true"] { background: var(--vurgu-acik); width: 22px; }

/* Hero içindeki araç seçici — açık kart, koyu zeminin üstünde */
.hero-secici {
  background: rgb(255 255 255/.97); border-radius: var(--r-lg);
  padding: 1rem; box-shadow: var(--g-4); max-width: 100%;
}
:root[data-tema="koyu"] .hero-secici { background: rgb(30 41 59/.97); }
.hero-secici .as-etiket { color: var(--metin-alt); }

/* ── 5. GÜVEN SATIRI ─────────────────────────────────────────────── */
.guven-serit { background: var(--siyah-2); }
.guven-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: rgb(255 255 255/.08);
}
.guven-oge {
  display: flex; align-items: center; gap: .875rem;
  padding: 1.375rem 1.25rem; background: var(--siyah-2);
}
.guven-oge svg { width: 30px; height: 30px; color: var(--vurgu-acik); flex: 0 0 auto; }
.guven-oge b { display: block; font-size: .9375rem; color: #fff; margin-bottom: .1rem; }
.guven-oge span { font-size: .8125rem; color: var(--siyah-metin-alt); line-height: 1.45; }

/* ── 6. POPÜLER KATEGORİLER ──────────────────────────────────────── */
.kategori-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}
.kategori-kart {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .625rem; padding: 1.25rem 1rem; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  text-decoration: none; color: inherit; transition: all var(--gecis);
}

.kategori-kart:hover {
  border-color: var(--vurgu); box-shadow: var(--g-3); transform: translateY(-3px);
}
.kategori-gorsel {
  width: 88px; height: 88px; object-fit: contain;
  display: grid; place-items: center;
}
.kategori-gorsel svg { width: 52px; height: 52px; color: var(--metin-alt); }
.kategori-kart:hover .kategori-gorsel svg { color: var(--vurgu); }
.kategori-ad { font-weight: 700; font-size: .875rem; line-height: 1.3; }
.kategori-adet { font-size: .75rem; color: var(--vurgu-koyu); font-weight: 650; }

/* ── Fotoğraflı kategori: kart bir FOTOĞRAF KAROSU ──
   Görsel alanı 88×88 ikon kutusuydu; kategori fotoğrafları o boyutta
   okunmuyordu (ölçüldü — 88px'te ayrıntı kayboluyor). Kendi görseli olan
   kategoride kart tam genişlikte kare karoya dönüşür, ad ve sayı altında
   kalır.

   ⚠ SIRA ÖNEMLİ: `.kategori-gorsel` ile aynı özgüllükte (0,1,0) olduğu
   için bu blok ONDAN SONRA gelmek zorunda. Önce yazıldığında 88px'lik
   kural kazanıyor ve fotoğraf küçük kalıyordu — ölçüldü (§8.69'daki
   menü hover kuralının aynı tuzağı). */
.kategori-kart:has(.kategori-gorsel-tam) {
  padding: 0; gap: 0; overflow: hidden;
}
.kategori-gorsel-tam {
  width: 100%; height: auto; aspect-ratio: 1 / 1; display: block;
}
.kategori-gorsel-tam img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.kategori-kart:has(.kategori-gorsel-tam) .kategori-ad { padding: .75rem 1rem .125rem; }
.kategori-kart:has(.kategori-gorsel-tam) .kategori-adet { padding: 0 1rem 1rem; }
.kategori-kart::after {
  content: ''; width: 26px; height: 2px; background: var(--vurgu);
  opacity: 0; transition: opacity var(--gecis);
}
.kategori-kart:hover::after { opacity: 1; }

/* ── 7. MARKA BANDI ──────────────────────────────────────────────── */
.marka-bant { background: var(--siyah); padding: 2.25rem 0; }
.marka-bant .bolum-bas h2 { color: #fff; }
.marka-bant .bolum-bas p { color: var(--siyah-metin-alt); }
.marka-serit {
  display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: .25rem;
}
.marka-serit::-webkit-scrollbar { display: none; }
.marka-kutu {
  flex: 0 0 auto; scroll-snap-align: start;
  width: 132px; height: 62px; display: grid; place-items: center;
  background: #fff; border-radius: var(--r-sm); padding: .625rem;
  transition: transform var(--gecis); text-decoration: none;
}
.marka-kutu:hover { transform: translateY(-3px); }
.marka-kutu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.marka-kutu span { font-size: .8125rem; font-weight: 700; color: var(--ink-800); }

/* ── 8. ALT BİLGİ ────────────────────────────────────────────────── */
.alt-bilgi { background: var(--siyah); color: var(--siyah-metin-alt); }
.alt-bilgi h4 { color: #fff; font-size: .9375rem; letter-spacing: .02em; }
.alt-bilgi a { color: var(--siyah-metin-alt); }
.alt-bilgi a:hover { color: var(--vurgu-acik); }
.alt-serit { border-top: 1px solid rgb(255 255 255/.09); color: var(--siyah-metin-alt); }
.alt-logo { display: flex; align-items: center; gap: .625rem; margin-bottom: .875rem; }
.alt-logo .logo-im { width: 34px; height: 34px; display: grid; place-items: center;
                     border-radius: var(--r-sm); font-size: .8125rem; }
.alt-logo b { color: #fff; font-size: 1.0625rem; }
.alt-iletisim { display: grid; gap: .625rem; font-size: .875rem; }
.alt-iletisim li { display: flex; align-items: flex-start; gap: .5rem; }
.alt-iletisim svg { width: 16px; height: 16px; color: var(--vurgu-acik);
                    flex: 0 0 auto; margin-top: .15rem; }
.odeme-logolar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
                 margin-left: auto; }
.odeme-logolar span {
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  padding: .25rem .5rem; border: 1px solid rgb(255 255 255/.18);
  border-radius: 4px; color: #cbd5e1;
}

/* ── 9. BÖLÜM BAŞLIĞI — tasarim-2 düzeni ─────────────────────────── */
.bolum-bas { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.bolum-bas h1, .bolum-bas h2 { letter-spacing: -.015em; }
.bolum-bas .tumu-bag {
  margin-left: auto; font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
  color: var(--vurgu-koyu); text-decoration: none;
  display: inline-flex; align-items: center; gap: .25rem;
}
.bolum-bas .tumu-bag:hover { color: var(--vurgu); }

/* ── 10. VARSAYILAN HERO — slayt yokken ──────────────────────────── */
.hero-varsayilan {
  background:
    radial-gradient(120% 90% at 88% 12%, rgb(234 88 12/.32) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgb(249 115 22/.14) 0%, transparent 60%),
    var(--siyah);
}
.hero-varsayilan::after { display: none; }   /* perde gerekmez, görsel yok */

/* ── 11. ARAÇ SEÇİCİ BANDI — hero'nun alt kenarına biner ─────────── */
.secici-bant { position: relative; z-index: 5; margin-top: -2.75rem; }
.secici-bant .kap { padding-top: 0; padding-bottom: 0; }
@media (max-width: 720px) { .secici-bant { margin-top: -1.5rem; } }

.secici-bas {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem;
  padding-bottom: .875rem; border-bottom: 1px solid var(--cizgi);
}
.secici-bas svg { width: 30px; height: 30px; color: var(--vurgu); flex: 0 0 auto; }
.secici-bas strong { display: block; font-size: 1.0625rem; letter-spacing: -.01em; }
.secici-bas span { font-size: .8438rem; color: var(--metin-alt); }
@media (max-width: 600px) { .secici-bas span { display: none; } }

.hero-secici .arac-secici-ipucu { margin: .875rem 0 0; }

/* ── 12. "Tüm Araçlar" kırpılmasın ───────────────────────────────── */
/* `margin-left:auto` kaydırılabilir bir flex kabında öğeyi taşırıyordu;
   ölçüldü — etiket "Tüm A" diye kesiliyordu. Ayraçla sabitlendi. */
.gezinme .menu-tumu {
  margin-left: 0; border-left: 1px solid rgb(255 255 255/.12);
}

/* ── 13. Bölüm aralıkları — maketteki ritim ──────────────────────── */
.bolum { padding: 2.75rem 0; }
.bolum-bas { margin-bottom: 1.5rem; }
@media (max-width: 720px) { .bolum { padding: 2rem 0; } }

/* ── 14. Hero metni sola hizalı ──────────────────────────────────── */
/* `.hero-slayt` bir grid; içindeki `.kap` grid ÖĞESİ olduğu için
   içeriği kadar daralıyor ve `justify-content` ile ortalanıyordu.
   Ölçüldü: başlık kabın sol kenarında değil, %33'ünde başlıyordu. */
.hero-slayt > .hero-ic { width: 100%; justify-self: stretch; }

/* ── 15. Menü hover rengi — özgüllük çakışması *(kullanıcı bulgusu)* ──
   > *"Menüdeki araç markaların üstüne gelince araç isimleri okunmuyor."*

   Ölçüldü (tarayıcının eşleşen kural listesinden): `background` ve
   `border-bottom` benim kuralımdan geliyordu ama `color` gelmiyordu.
   Sebep satır 204'teki eski kural:

       .gezinme > .kap > a:hover { color: var(--metin); }   → (0,3,1)
       .gezinme .menu-marka:hover                           → (0,3,0)

   Eski kural bir SEVİYE daha özgül. Açık temada `--metin` koyu lacivert;
   koyu menü zemininde 1,3:1 — okunmuyor. Aynı özgüllükte karşı kural. */
.gezinme > .kap > a:hover,
.gezinme > .kap > a.menu-marka[aria-expanded="true"],
.gezinme > .kap > a.menu-tumu:hover { color: #fff; }
.gezinme > .kap > a.menu-tumu { color: var(--vurgu-acik); }
.gezinme > .kap > a.menu-tumu.aktif { color: #fff; }

/* ── 16. Koyu bant ile alt bilgi arasındaki BEYAZ ŞERİT ──────────────
   > *"Markaların altında büyük bir beyaz şerit var, o ne işe yarıyor?"*

   Ölçüldü: 48px ve arada HİÇBİR öğe yok — kaynağı `.alt-bilgi`'nin
   `margin-top: 3rem` değeri. Açık zeminli sayfalarda alt bilgiyi
   içerikten ayırmak için konmuş ve orada işe yarıyor; ama marka bandı
   koyu olduğu için iki koyu bant arasında beyaz bir boşluk kalıyordu.

   Genel kural KALDIRILMADI (diğer sayfalarda gerekli); yalnızca koyu
   bir bandın hemen ardından geldiğinde sıfırlanıyor. */
/* ⚠ İlk yazımda `+` (kardeş) seçici kullanıldı ve TUTMADI: bantlar
   `<main>` içinde, `.alt-bilgi` ise `<main>`'in kardeşi — aralarında
   kardeşlik yok. Ölçüldü, boşluk 48px olarak kaldı. Doğrusu ana
   öğenin SON çocuğuna bakmak.
   `:has()` desteklenmeyen bir tarayıcıda kural düşer ve eski 48px
   boşluk geri gelir — kozmetik bir gerileme, kırılma değil. */
/* `+` DEĞİL `~`: `<main>` ile `<footer>` arasında çerez paneli var,
   yani ikisi bitişik kardeş değil. Ölçüldü — `+` ile boşluk 48px kaldı. */
main:has(> .bulten-bant:last-child) ~ .alt-bilgi,
main:has(> .marka-bant:last-child) ~ .alt-bilgi,
main:has(> .guven-serit:last-child) ~ .alt-bilgi { margin-top: 0; }

/* Marka bandının altındaki ince beyaz çizgi de kaldırıldı — iki koyu
   bant arasında ayraç gerekmiyor, tonları zaten farklı. */
.marka-bant { border-bottom: 0; }

/* ── 17. Otomatik kayan şeritler ─────────────────────────────────────
   Kaydırma yine tarayıcının işi; JS yalnızca `scrollLeft`'i ilerletiyor
   (§8.1 — kütüphane yok). Fare üstündeyken, odak içerideyken, sekme
   arkadayken ve `prefers-reduced-motion` açıkken durur. */
.marka-serit { scroll-behavior: smooth; }
.kaydirak-serit { scroll-behavior: smooth; }

/* ── 18. KAMPANYA / BÜLTEN BANDI ─────────────────────────────────── */
.bulten-bant {
  background: linear-gradient(100deg, var(--vurgu-koyu) 0%, var(--vurgu) 55%, #f97316 100%);
  color: #fff; padding: 2rem 0;
}
.bulten-ic {
  display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap;
}
.bulten-simge {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: var(--r-md);
  background: rgb(255 255 255/.16); display: grid; place-items: center;
}
.bulten-simge svg { width: 28px; height: 28px; color: #fff; }
.bulten-metin { min-width: 15rem; flex: 1 1 20rem; }
.bulten-metin strong {
  display: block; font-family: Manrope, Inter, sans-serif; font-weight: 800;
  font-size: clamp(1.05rem, 2.2vw, 1.375rem); line-height: 1.25; letter-spacing: -.01em;
}
.bulten-metin span { font-size: .875rem; color: rgb(255 255 255/.88); }
.bulten-form { display: flex; gap: .5rem; flex: 1 1 22rem; flex-wrap: wrap; }
.bulten-form input {
  flex: 1 1 14rem; min-width: 0; height: 46px; padding: 0 .875rem;
  border: 0; border-radius: var(--r-sm); font: inherit; font-size: .9375rem;
  color: var(--ink-900); background: #fff;
}
.bulten-form input::placeholder { color: var(--ink-500); }
.bulten-form button {
  height: 46px; padding: 0 1.5rem; border: 0; border-radius: var(--r-sm);
  background: var(--siyah); color: #fff; font: inherit; font-weight: 700;
  letter-spacing: .02em; cursor: pointer; transition: background var(--gecis);
}
.bulten-form button:hover { background: var(--siyah-2); }
.bulten-form button:disabled { opacity: .6; cursor: default; }
.bulten-sonuc {
  flex: 1 1 100%; font-size: .875rem; font-weight: 600; margin: 0;
  color: #fff;
}
/* ── Bal küpü — bot doldurur, insan görmez (§8.12) ──
   İlk yazımda seçici `.bulten-form .tuzak` idi; oysa alan `.bulten-form`
   DEĞİL formun (`.bulten-ic`) doğrudan çocuğu. Seçici tutmayınca kutu
   flex düzeninde görünür bir beyaz dikdörtgen olarak basılıyordu —
   ekran görüntüsünde yakalandı. */
.bulten-ic .tuzak, .tuzak {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
  pointer-events: none;
}
.bulten-ic { position: relative; }

/* ── 19. Yazısı görselde olan banner ─────────────────────────────────
   Maketten alınan promo panellerinde başlık, alt başlık ve buton
   görselin içinde basılı (göç 082). Normal banner `object-fit: cover`
   ve sabit `min-height` kullanıyor — bu görsellerde kenarları kırpar ve
   basılı yazı kesilir. Yazısı görselde olanda oran korunur, yükseklik
   görselin kendisinden gelir. */
.banner.banner-gorsel-yazili {
  min-height: 0; background: transparent;
}
.banner.banner-gorsel-yazili img {
  position: static; width: 100%; height: auto; object-fit: contain;
  display: block;
}

/* ── 20. Yazısı görselde olan HERO slaytı ────────────────────────────
   Görsel kendi başlığını taşıyorsa okunabilirlik perdesi ONU da
   karartıyor ve görsel çamurlu görünüyordu. Perde hafifletilir, görsel
   tam parlaklıkta basılır; buton yine üstte durur. */
/* ── Perde TAMAMEN kalkar *(kullanıcı bulgusu: "resim soluklaşıyor")* ──
   Perde, üzerine BİZİM metnimizi bindirdiğimiz slaytlar için var:
   fotoğrafın açık ya da koyu olmasına bakmaksızın yazı okunsun diye.
   Yazı görselin içindeyse perdenin işlevi kalmıyor, yalnızca görseli
   soluklaştırıyor. Ölçüldü: sol %55'te %25 karartma — tam başlığın
   durduğu yer. */
.hero-slayt.hero-yazili-gorsel .hero-gorsel { opacity: 1; }
.hero-slayt.hero-yazili-gorsel::after { display: none; }
.hero-slayt.hero-yazili-gorsel .hero-ic { padding: 2rem 0; }
.hero-slayt.hero-yazili-gorsel .hero-ic:empty { display: none; }
/* Yazısı görselde olan slayt: bindirilen içerik gizli, slaydın tamamı
   tıklanabilir (hedef verilmişse). Gizli `h1` erişilebilirlik için kalır. */
.hero-slayt.hero-yazili-gorsel .hero-ic > *:not(.gizli-erisim) { display: none; }
.hero-slayt.hero-yazili-gorsel .hero-ic { padding: 0; }
.hero-ortu { position: absolute; inset: 0; z-index: 3; }

/* ── 21. Yazısı görselde olan slaytta KIRPMA YOK ─────────────────────
   Ölçüldü: yüklenen slayt 1600×854 (1,87:1); sabit 420px yükseklikte
   `cover` görselin %45'ini kırpıyor ve kırpılan şey görselin KENDİ
   metni oluyordu (üstte başlık, altta buton).

   Oran görselden geliyor (`--oran`). `max-height` yine var: 1,87:1 bir
   görsel 1440px genişlikte 769px yükseklik ister ve o kadar uzun bir
   hero sayfanın geri kalanını ekranın dışına iter. Sınıra takılırsa
   kırpma ortadan yapılır — yine de bugünkünün üçte biri kadar. */
.hero-slayt.hero-yazili-gorsel {
  aspect-ratio: var(--oran, 16 / 7);
  min-height: 0;
  /* Tavan piksel DEĞİL görüntü alanına bağlı. Ölçüldü: 1600×854 görsel
     1440px genişlikte 769px ister; 540px tavan %30'unu kırpıyor ve
     kırpılan şey görselin kendi metni oluyor. 88vh ile tipik ekranlarda
     kırpma SIFIR; yalnızca çok geniş ve kısa ekranlarda devreye girer,
     orada da hero'nun ekranı tamamen doldurmasını engeller. */
  max-height: 88vh;
}
.hero-slayt.hero-yazili-gorsel .hero-gorsel { object-position: center; }

/* Seçici kartı bu slaytların üstüne BİNMEZ: görselin kendi çağrı
   butonu altta duruyor ve kart onu örtüyordu. */
main:has(.hero-yazili-gorsel) .secici-bant { margin-top: 1.25rem; }

/* ══════════════════════════════════════════════════════════════════
   İADE VE DEĞİŞİM SAYFASI  (§8.77, 18.08.2026)
   Renkler token'lardan; amber dolgu üstüne ASLA beyaz metin (§8.4).
   ══════════════════════════════════════════════════════════════════ */
/* Kap menü/altbilgiyle AYNI genişlikte (--kap) — daraltılırsa kenarlar
   logoyla hizalanmaz ve sayfa kopuk görünür (kullanıcı bulgusu).
   Okunabilirlik metin bloklarında korunuyor: uzun satır yorucu, o yüzden
   paragraflar ölçülü genişlikte ve SOLA yaslı — ortalanırsa yine hizasız
   olurdu. Kartlar ve ızgaralar tam genişliği kullanır. */
.iade-kap { padding-block: 1.5rem 3rem; }
/* Metin blokları da kabın TAMAMINI kullanır *(kullanıcı kararı)*.
   Önce okunabilirlik için 62rem'de kırpılıyordu; giriş paragrafı erken
   alt satıra iniyor ve sayfa hizasız görünüyordu. Kap zaten menüyle aynı
   genişlikte, metnin de aynı hizada bitmesi isteniyor. */

.iade-bas { margin: 1rem 0 2rem; }
.iade-bas h1 {
  font-size: 2rem; font-weight: 750; letter-spacing: -.025em; margin: 0 0 .625rem;
}
.iade-bas p { color: var(--metin-alt); line-height: 1.7; margin: 0; }

/* ── Üç özet kart ── */
.iade-ozet {
  display: grid; gap: 1rem; margin-bottom: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.iade-ozet-kart {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); padding: 1.25rem;
}
.iade-ozet-ust {
  display: block; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--metin-alt); margin-bottom: .375rem;
}
.iade-ozet-deger {
  display: block; font-size: 1.5rem; font-weight: 750;
  color: var(--vurgu); margin-bottom: .5rem;
}
.iade-ozet-kart p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--metin-alt); }

/* ── Bölümler ── */
.iade-bolum { margin-bottom: 2.5rem; }
.iade-bolum > h2 {
  font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--cizgi);
}
/* Sayfadaki tüm gövde metni .9375rem — bölüm paragrafları boyut
   belirtmediği için gövdeden 1rem miras alıyor ve diğerlerinden büyük
   görünüyordu (kullanıcı bulgusu). Bilinçli bir vurgu değildi. */
.iade-bolum > p { line-height: 1.75; margin: 0 0 .75rem; font-size: .9375rem; }

/* ── Numaralı adımlar ── */
.iade-adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.iade-adimlar > li { display: flex; gap: .875rem; align-items: flex-start; }
.iade-adim-no {
  flex: 0 0 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .9375rem;
  /* Amber dolgu üstüne ink-900 — beyaz metin yasak (§8.4) */
  background: var(--vurgu); color: #fff;
}
/* Yalnızca adım BAŞLIĞI blok olur. Torun seçici (`.iade-adimlar strong`)
   kullanılırsa paragraf içindeki <strong>'lar da bloğa dönüşüp metni
   satır satır kırıyor — bu hata bu sayfada ÜÇ kez tekrarlandı
   (kargo kartı, koşul listesi, adımlar). Ders: `display: block` bir
   torun seçiciye asla verilmez. */
.iade-adimlar > li > div > strong { display: block; margin-bottom: .1875rem; }
.iade-adimlar p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--metin-alt); }

/* ── Koşul listesi ── */
.iade-liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .625rem; }
.iade-liste > li {
  display: flex; gap: .625rem; align-items: flex-start;
  line-height: 1.65; font-size: .9375rem;
}
/* Metin <span> ile sarılı: sarılmasaydı flex, li'nin HER doğrudan
   çocuğunu (metin düğümleri ve <strong> dâhil) ayrı sütun yapardı —
   ölçüldü, "kendi ambalajı korunmalıdır" kendi başına sütun oluyordu. */
.iade-liste > li > span:last-child { flex: 1 1 auto; min-width: 0; }
.iade-tik, .iade-carpi { flex: 0 0 1.25rem; font-weight: 700; line-height: 1.5; }
.iade-tik   { color: var(--basari-700); }
.iade-carpi { color: var(--hata-700); }

.iade-not {
  font-size: .875rem; line-height: 1.65; color: var(--metin-alt);
  background: var(--yuzey-alt);
  border-left: 3px solid var(--cizgi);
  padding: .75rem .875rem; border-radius: var(--r-sm); margin: 0;
}

/* ── Kargo ücreti ── */
.iade-ucret {
  display: grid; gap: 1rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.iade-ucret-kart {
  border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 1rem 1.125rem;
  background: var(--yuzey);
}
.iade-ucret-kart > strong { display: block; margin-bottom: .375rem; font-size: 1rem; }
.iade-ucret-kart p { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--metin-alt); }
.iade-ucret-biz { border-color: var(--basari-700); }
.iade-ucret-biz > strong { color: var(--basari-700); }

/* ── Kargo firmaları ── */
.iade-kargo {
  display: grid; gap: 1rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.iade-kargo-kart {
  border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  padding: 1rem 1.125rem; background: var(--yuzey);
}
.iade-kargo-kart > strong { display: block; font-size: 1rem; margin-bottom: .5rem; }
.iade-kargo-kart p { margin: .5rem 0 0; font-size: .8125rem; line-height: 1.6; color: var(--metin-alt); }
.iade-kargo-etiket {
  display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--metin-alt); margin-bottom: .25rem;
}
.iade-kargo-kod {
  display: block; font-size: 1.125rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
  background: var(--vurgu); color: #fff;
  padding: .5rem .75rem; border-radius: var(--r-sm); text-align: center;
}

/* ── Yöneticinin girdiği metin ── */
.iade-metin { line-height: 1.8; font-size: .9375rem; }
.iade-metin h2, .iade-metin h3 { font-size: 1.0625rem; margin: 1.25rem 0 .5rem; }
.iade-metin ul, .iade-metin ol { padding-left: 1.25rem; }
.iade-metin li { margin-bottom: .375rem; }

/* ── Bayi uyarısı ── */
.iade-bayi {
  border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  padding: 1.125rem 1.25rem; background: var(--yuzey-alt);
}
.iade-bayi > h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: .5rem; font-size: 1.0625rem; }
.iade-bayi p { margin: 0; font-size: .9375rem; line-height: 1.7; }

.iade-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.iade-guncelleme {
  font-size: .8125rem; color: var(--metin-alt); text-align: right; margin: 0;
}

/* ── Düz metin içerik sayfaları (sözleşmeler) ──
   Kap menüyle aynı genişlikte; okunabilirlik için metin kutusu ölçülü
   ve SOLA yaslı — ortalanınca sol kenarı logoyla hizalanmıyordu. */
.sayfa-kap { padding-block: 1.5rem 3rem; }
.sayfa-baslik {
  font-size: 1.75rem; font-weight: 750; letter-spacing: -.025em; margin: 1rem 0 1.5rem;
}
.sayfa-kutu { max-width: none; }
.sayfa-kutu .kutu-govde { line-height: 1.8; font-size: .9688rem; }
.sayfa-guncelleme {
  font-size: .8125rem; color: var(--metin-alt);
  margin-top: 1rem; text-align: right;
}

/* ── İkincil düğme ──
   `.dugme-sade` şablonlarda kullanılıyordu ama TANIMLI DEĞİLDİ; düz metin
   gibi görünüyordu (kullanıcı bulgusu). `.dugme-ana` gibi kendi kendine
   yeten bir kural — bu dosyada `.dugme` temel sınıfı yok. */
.dugme-sade {
  display: inline-block; padding: .625rem 1.25rem; border-radius: var(--r-md);
  background: transparent; color: var(--metin);
  border: 1px solid var(--cizgi); font-weight: 600;
  transition: background var(--gecis), border-color var(--gecis);
}
.dugme-sade:hover { background: var(--yuzey-alt); border-color: var(--ink-400); }

/* ── Dar telefonlarda üst bar taşıyordu ──
   Ölçüldü (360px): logo 101 + arama 62 + işlemler 144 + 2×20 boşluk,
   kap iç genişliği 320 → 16 px yatay taşma. 390 px ve üstünde sorun yok.
   Boşluklar ve ikon dolgusu daraltılıyor; arama kutusu da esneyebilsin. */
@media (max-width: 400px) {
  .baslik .kap { gap: .625rem; padding-inline: .875rem; }
  .baslik .arama { min-width: 0; }
  .baslik-islem { gap: .125rem; }
  .baslik-islem .ikon-dugme { padding: .5rem .375rem; }
}