/* takidepom.com — toptan yuzey stili
 * ---------------------------------------------------------------------------
 * YON: "KURUMSAL AILE" (26 Eylul, feyz; marka yonu §9).
 *   Suslupuslu'nun iskeleti (Figtree, punto olcegi, izgara paylari, tam satir
 *   kurali) + TEK kurumsal renk: derin lacivert yalniz YAPISAL yuzeyde (ust
 *   serit, deger bandi, altbilgi, etiket). Kina YALNIZ birincil eylemde.
 *   Gokkusagi, pastel zemin, renkli ikon dairesi YOK. Kose olcegi Suslupuslu'
 *   nunkinden bir kademe ciddi (8/12/16 vs 10/14/20).
 *   Tek cumle gerekce: ayni firmanin kurumsal kolu -- musteri iki siteyi ayni
 *   aile olarak tanir, ama toptan tarafi sus degil guven ve duzen konusur.
 *
 * TEK KAYNAK: token degerleri marka yonu belgesinden gelir
 * (docs/superpowers/specs/2026-08-19-takidepom-marka-yonu.md §8 + §9).
 *
 * SUSLUPUSLU ILE CSS PAYLASILMAZ (doktrin §4). Aile benzerligi token AYNASI
 * ile olculur (araclar/test_takidepom_tasarim_ayna.py) -- paylasimla degil.
 *
 * KONTRAST KURALI (kapi K12): metin rengi yazan her kural, uzerinde durdugu
 * zemini de yazar. Tum ciftler olculdu (marka yonu §9.3); en dusugu 5,68:1.
 *
 * ACIK TEMA: koyu mod BILEREK yok -- urun fotograflarinin bir kismi
 * tedarikciden ve BEYAZ ZEMINLI (spec R4).
 */

/* --- self-host font (CDN YASAK) ------------------------------------------ */
/* DEGISKEN FONT: dosya wght 300-900 tasiyor (fontTools ile olculdu). Once
   400-600 bildiriliyordu, yani 700'luk basliklar TARAYICI TARAFINDAN
   kalinlastiriliyordu (sahte bold). Aralik dosyanin gercek araligina acildi. */
@font-face {
  font-family: Figtree;
  src: url("font/figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Figtree;
  src: url("font/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- token blogu ---------------------------------------------------------- */
:root {
  /* --- AYNA BLOGU: Suslupuslu'den BIREBIR (marka yonu §8.4.1) -----------
   * Biri degisip oteki kalirsa araclar/test_takidepom_tasarim_ayna.py
   * kirmizi yanar. */
  --kagit:       #ffffff;   /* sp --kagit      */
  --yuzey:       #ffffff;   /* sp --yuzey      */
  --yuzey-2:     #f7f6f4;   /* sp --fildisi-2  */
  --murekkep:    #24170f;   /* sp --murekkep   */
  --murekkep-2:  #63503f;   /* sp --murekkep-2 */
  --cizgi:       #e6e3df;   /* sp --kenar      */
  --eylem:       #8e2f4a;   /* sp --kina       */
  --eylem-koyu:  #6f2239;   /* sp --kina-koyu  */

  /* --- TAKI DEPOM'A OZGU: islev renkleri (§8.4.2) ----------------------- */
  --cizgi-koyu:  #c4bcb1;
  --onay:        #14602f;
  --uyari:       #7d5300;
  --hata:        #9b1c23;
  /* Durum rozetinin ZEMINI -- metin rengiyle olculdu: 6,67 / 6,02 / 6,94. */
  --onay-zemin:  #e7f2eb;
  --uyari-zemin: #fbf1dc;
  --hata-zemin:  #fbe9ea;

  /* --- KURUMSAL AILE (marka yonu §9, 26 Eylul) --------------------------
   * Lacivert YAPIDIR (serit/bant/altbilgi/etiket), eylem DEGIL. Olculen
   * ciftler: beyaz/lacivert 14,18 · lacivert-yazi/lacivert 12,06 ·
   * lacivert-ikincil/lacivert 6,92 · lacivert-yazi/lacivert-2 9,91 ·
   * lacivert-ikincil/lacivert-2 5,68 · ikincil-soguk/zemin-soguk 5,80. */
  --lacivert:          #1c2b45;
  --lacivert-2:        #26385c;   /* lacivert uzerinde bir kademe acik kutu */
  --lacivert-yazi:     #e8edf5;
  --lacivert-ikincil:  #aab6c9;
  --zemin-soguk:       #f3f5f8;
  --ikincil-soguk:     #52607a;
  --eylem-zemin:       #f6e9ed;   /* eylem-koyu metin 9,06:1 */

  /* KOSE OLCEGI: Suslupuslu 10/14/20; burada BILEREK bir kademe ciddi. */
  --k-kucuk: 8px;    /* dugme, alan, rozet disi kucuk kutu */
  --k-orta:  12px;   /* urun karti, karo, tablo kabi */
  --k-buyuk: 16px;   /* bant, form karti, ozet karti */

  /* IZGARA PAYLARI aynadan (§8.4.1). */
  --dis-pay: 50px;
  --ic-pay:  20px;

  --yazi: Figtree, system-ui, sans-serif;

  /* PUNTO OLCEGI = suslupuslu'nun tabani (§8.4.4). Govde 1rem bir KISIT:
   * iOS Safari 16px altindaki alana dokununca sayfayi yakinlastirir. */
  --ol-kucuk:  0.875rem;
  --ol-govde:  1rem;
  --ol-orta:   clamp(1.15rem, 2vw, 1.4rem);
  --ol-baslik: clamp(1.75rem, 3.5vw, 2.5rem);

  --dokunma: 44px;

  --bosluk-1: 0.25rem;
  --bosluk-2: 0.5rem;
  --bosluk-3: 0.75rem;
  --bosluk-4: 1rem;
  --bosluk-6: 1.5rem;
  --bosluk-8: 2rem;
  --bosluk-12: 3rem;

  --gecis:     160ms ease-out;
  --gecis-yay: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (max-width: 64rem)      { :root { --dis-pay: 20px; --ic-pay: 20px; } }
@media (max-width: 46.8125rem) { :root { --dis-pay: 10px; --ic-pay: 10px; } }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--kagit);
  color: var(--murekkep);
  font-family: var(--yazi);
  font-size: var(--ol-govde);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.fiyat, .adet, .stok, .toplam, table, input[type="number"] {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0 0 var(--bosluk-3); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: var(--ol-baslik); }
h2 { font-size: var(--ol-orta); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 var(--bosluk-3); }

a { color: var(--eylem); background-color: var(--kagit); }
a:hover { color: var(--eylem-koyu); background-color: var(--kagit); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--eylem);
  outline-offset: 2px;
}

/* Yatay kaydiricilar odak halkasini kirpar; halka ICERI alinir (11 Eylul). */
.gezinme a:focus-visible,
.karo:focus-visible,
.tablo-kap :focus-visible { outline-offset: -2px; }

/* ICERIGE ATLA -- odaklanana kadar ekran disinda. */
.atla {
  position: absolute;
  left: var(--bosluk-2);
  top: -100px;
  z-index: 100;
  padding: var(--bosluk-2) var(--bosluk-4);
  border-radius: var(--k-kucuk);
  color: var(--lacivert);
  background-color: var(--kagit);
  font-weight: 700;
}
.atla:focus { top: var(--bosluk-2); }

.gorsel-gizli {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ikincil { color: var(--murekkep-2); background-color: var(--kagit); }

/* --- kabuk ---------------------------------------------------------------- */
.kabuk {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--dis-pay);
}

/* --- UST SERIT (lacivert) ------------------------------------------------- */
.ust {
  color: var(--lacivert-yazi);
  background-color: var(--lacivert);
}
.ust-ic {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  min-height: 64px;
}
.marka {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--dokunma);
  /* ZEMIN ACIKCA LACIVERT (26 Eylul, CANLIDA GORULDU): genel `a` kurali
     K12 icin `background-color: var(--kagit)` yaziyor; logo baglantisi onu
     miras alip lacivert seritte BEYAZ KUTU olarak ciziliyordu -- beyaz logo
     beyaz zeminde kayboldu, yalniz TOPTAN etiketi gorundu. */
  background-color: var(--lacivert);
}
/* LOGO YUKSEKLIGI AKISKAN: 320px'te 20px (142px genislik) -- dar telefonda
   logo + uc ikon dugmesi TEK satira sigmali (olculdu: 24px'te 320px'te
   8px tasiyordu). Genis ekranda 30px. */
.marka-logo { height: clamp(20px, 6vw, 30px); width: auto; }

.ust-arama {
  display: none;
  flex: 1 1 auto;
  max-width: 30rem;
  margin-inline: auto;
  align-items: center;
  border-radius: var(--k-kucuk);
  background-color: var(--kagit);
}
.ust-arama input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: var(--k-kucuk) 0 0 var(--k-kucuk);
  color: var(--murekkep);
  background-color: var(--kagit);
}
.ust-arama button {
  display: grid;
  place-items: center;
  width: var(--dokunma);
  min-height: var(--dokunma);
  border: 0;
  border-radius: 0 var(--k-kucuk) var(--k-kucuk) 0;
  color: var(--lacivert);
  background-color: var(--kagit);
  cursor: pointer;
}
.ust-arama svg, .ust-ikon svg { width: 1.2rem; height: 1.2rem; }

.ust-eylem {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  margin-left: auto;
}
.ust-firma {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ol-kucuk);
  color: var(--lacivert-ikincil);
  background-color: var(--lacivert);
}
.ust-bag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--dokunma);
  padding: 0 var(--bosluk-3);
  border-radius: var(--k-kucuk);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: var(--lacivert-yazi);
  background-color: var(--lacivert);
}
.ust-bag:hover { color: var(--kagit); background-color: var(--lacivert-2); }
.ust-bag:focus-visible { outline-color: var(--lacivert-yazi); }
.sepet-sayi {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--lacivert);
  background-color: var(--lacivert-yazi);
}
/* Ikon dugmesi: mobilde yazi GIZLENIR (ekran okuyucu okur), hedef 44px. */
.ust-ikon { position: relative; justify-content: center; min-width: var(--dokunma); padding: 0 .5rem; }
/* SEPET ROZETI TELEFONDA IKONUN KOSESINDE (26 Eylul, OLCULDU): akista
   duruyorken 320px'te ust seridi tasiriyordu (suclu nav.ust-eylem). Kosede
   yer kaplamaz; masaustunde yaziyla yan yana akisa doner. */
@media (max-width: 61.99rem) {
  .ust-ikon .sepet-sayi { position: absolute; top: 2px; right: 0; min-width: 1.15rem; height: 1.15rem; font-size: .68rem; }
  .ust-eylem { gap: 0; }
  .ust-ic { gap: var(--bosluk-2); }
}
/* OZGULLUK BILEREK YUKSEK: `.dugme` asagida `display: inline-flex` yaziyor ve
   ayni ozgullukte SONRA geldigi icin dar ekranda gizlemeyi eziyordu -- ilk
   render'da "Bayi basvurusu" dugmesi 390px'te ust seridi tasiriyordu. */
.ust-eylem .ust-yazi { display: none; }

@media (min-width: 62rem) {
  .ust-arama { display: flex; }
  .ust-eylem .ust-yazi { display: inline; }
  .ust-eylem .dugme.ust-yazi, .ust-eylem .ust-bag.ust-yazi { display: inline-flex; }
  .ust-ikon-arama { display: none; }
  .ust-eylem { margin-left: 0; }
}

/* Misafir birincil eylemi: kina. Lacivert uzerinde kina 2,0:1 civari -- ama
   dugme METNI beyaz/kina (7,91) olculur, zemin farki yalniz sekil. */
/* 44px (27 Eylul, canli denetim): 40px'ti; dokunma hedefi kurali her
   dugmede 44. Serit yuksekligi (64px) buna yetiyor. */
.ust .dugme { min-height: var(--dokunma); }

/* --- KATEGORI SERIDI -------------------------------------------------------- */
.gezinme {
  border-bottom: 1px solid var(--cizgi);
  background-color: var(--kagit);
}
.gezinme ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--bosluk-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.gezinme ul::-webkit-scrollbar { display: none; }
.gezinme li { flex: 0 0 auto; }
.gezinme a {
  display: flex;
  align-items: center;
  min-height: var(--dokunma);
  white-space: nowrap;
  padding: 0 var(--bosluk-3);
  font-size: .95rem;
  font-weight: 500;
  color: var(--murekkep);
  background-color: var(--kagit);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.gezinme a:hover { color: var(--lacivert); background-color: var(--kagit); border-bottom-color: var(--cizgi-koyu); }
.gezinme a[aria-current="page"] { color: var(--lacivert); background-color: var(--kagit); border-bottom-color: var(--lacivert); font-weight: 700; }

/* --- ICERIK --------------------------------------------------------------- */
/* VARSAYILAN DAR (Suslupuslu 21 Agu dersi): detay/yasal/form sayfalari
   okunakli kalir; listeleme yuzeyleri `.icerik-tam` ile genisler. */
.icerik {
  max-width: 64rem;
  margin-inline: auto;
  padding: var(--bosluk-6) var(--dis-pay) var(--bosluk-12);
}
.icerik-tam { max-width: none; }
/* Sepet gibi iki sutunlu IS ekranlari: dar metin kolonu (64rem) tabloyu
   sikistiriyordu -- 1280px'te urun adi kelime kelime kiriliyordu (olculdu). */
.icerik-genis { max-width: 82rem; }
.icerik > p, .icerik > ul, .icerik > ol { max-width: 72ch; }

/* Kirinti (kategori/urun). */
.kirinti {
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  margin: 0 0 var(--bosluk-3);
  padding: 0;
  list-style: none;
  font-size: var(--ol-kucuk);
  color: var(--ikincil-soguk);
  background-color: var(--kagit);
}
/* SON HALKA TEK SATIR (27 Eylul): uzun urun adi telefonda kirintiyi uc
   satira yayiyordu ve satir basinda "/" kaliyordu. Ad zaten h1'de tam. */
.kirinti li { flex: none; white-space: nowrap; }
.kirinti li:last-child { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.kirinti li + li::before { content: "/"; margin-right: .35rem; color: var(--cizgi-koyu); }
.kirinti a { color: var(--ikincil-soguk); background-color: var(--kagit); text-decoration: none; }
.kirinti a:hover { color: var(--lacivert); background-color: var(--kagit); text-decoration: underline; }

.sayfa-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-2) var(--bosluk-4);
  margin-bottom: var(--bosluk-4);
}
.sayfa-bas h1 { margin: 0; }
.sayfa-bas .ikincil { margin: 0; }

.bolum { margin-top: var(--bosluk-12); }
.bolum:first-child { margin-top: 0; }
.bolum-bas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-4);
  margin-bottom: var(--bosluk-4);
}
.bolum-basligi {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}
.bolum-basligi .ikincil { font-weight: 500; color: var(--ikincil-soguk); background-color: var(--kagit); }
.bolum-bag { font-weight: 600; font-size: .95rem; white-space: nowrap; }

/* --- DEGER BANDI (ana sayfa) ------------------------------------------------
 * Kahramanin yerine gecti (Kurumsal Aile). Bayi fotograf degil KOSUL arar:
 * asgari siparis, urun basina taban, fiyatin kime acik oldugu. Her rakam
 * AYARDAN gelir; ayarda 0 olan madde HIC basilmaz (anasayfa.php). */
.deger-bandi {
  margin: calc(var(--bosluk-6) * -1) calc(var(--dis-pay) * -1) 0;
  padding: clamp(1.75rem, 5vw, 3.5rem) var(--dis-pay);
  color: var(--lacivert-yazi);
  background-color: var(--lacivert);
}
.deger-ic {
  display: grid;
  gap: var(--bosluk-6);
  align-items: center;
}
@media (min-width: 62rem) {
  .deger-ic { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--bosluk-12); }
}
.deger-ust {
  margin: 0 0 var(--bosluk-2);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lacivert-ikincil);
  background-color: var(--lacivert);
}
.deger-bandi h1 {
  margin: 0 0 var(--bosluk-3);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.12;
  color: var(--kagit);
  background-color: var(--lacivert);
}
.deger-metin {
  max-width: 38rem;
  margin: 0 0 var(--bosluk-6);
  color: var(--lacivert-yazi);
  background-color: var(--lacivert);
}
.deger-metin strong { color: var(--kagit); background-color: var(--lacivert); }
.deger-eylem { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.deger-olgular {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bosluk-2);
}
.deger-olgular li {
  padding: var(--bosluk-3) var(--bosluk-4);
  border-radius: var(--k-orta);
  color: var(--lacivert-ikincil);
  background-color: var(--lacivert-2);
  font-size: var(--ol-kucuk);
  line-height: 1.45;
}
.deger-olgular strong {
  display: block;
  margin-bottom: .15rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.25;
  color: var(--kagit);
  background-color: var(--lacivert-2);
  font-variant-numeric: tabular-nums;
}
/* Tek madde kalirsa (ayarlarin coğu kapaliyken) tam genislik -- yetim kutu yok. */
.deger-olgular li:only-child,
.deger-olgular li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* --- DUGMELER ------------------------------------------------------------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-height: var(--dokunma);
  padding: 0 var(--bosluk-4);
  border: 1px solid var(--eylem);
  border-radius: var(--k-kucuk);
  color: var(--kagit);
  background-color: var(--eylem);
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}
.dugme:hover { color: var(--kagit); background-color: var(--eylem-koyu); border-color: var(--eylem-koyu); }
.dugme[disabled] { opacity: .6; cursor: progress; }

.dugme-ikincil {
  color: var(--lacivert);
  background-color: var(--kagit);
  border-color: var(--cizgi-koyu);
}
.dugme-ikincil:hover { color: var(--lacivert); background-color: var(--zemin-soguk); border-color: var(--lacivert); }

/* Lacivert zemin uzerindeki ikincil eylem. */
.dugme-acik {
  color: var(--lacivert-yazi);
  background-color: var(--lacivert);
  border-color: var(--lacivert-ikincil);
}
.dugme-acik:hover { color: var(--kagit); background-color: var(--lacivert-2); border-color: var(--kagit); }
.dugme-acik:focus-visible { outline-color: var(--lacivert-yazi); }

.dugme-genis { width: 100%; }

.baglanti-dugme {
  min-height: var(--dokunma);
  min-width: var(--dokunma);
  text-align: left;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: var(--ol-kucuk);
  color: var(--eylem);
  background-color: var(--kagit);
  text-decoration: underline;
  cursor: pointer;
}
.baglanti-dugme:hover { color: var(--eylem-koyu); background-color: var(--kagit); }

/* --- ROZETLER (renk YALNIZ islev) ------------------------------------------ */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.rozet-koli { color: var(--ikincil-soguk); background-color: var(--zemin-soguk); }
.rozet-var  { color: var(--onay);  background-color: var(--onay-zemin); }
.rozet-az   { color: var(--uyari); background-color: var(--uyari-zemin); }
.rozet-yok  { color: var(--hata);  background-color: var(--hata-zemin); }
.rozet-var::before, .rozet-az::before, .rozet-yok::before {
  content: "";
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* --- KATEGORI KAROLARI ----------------------------------------------------
 * TEK SATIR SERIT (marka yonu §8.5): mobilde de serit -- yedi kategori iki
 * kolonda dort satir tutuyor ve katalogu 1967px'e gomuyordu (olculdu).
 * Serit tek satir oldugu icin "yetim karo" yapisal olarak OLUSAMAZ. */
.karo-izgara {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--bosluk-2);
  display: grid;
  gap: var(--ic-pay);
  grid-auto-flow: column;
  grid-auto-columns: minmax(7.5rem, 1fr);
  justify-content: start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.karo-izgara::-webkit-scrollbar { display: none; }
.karo-izgara > li { scroll-snap-align: start; }
/* UST SINIR 15rem: katalogda az kategori varken karo devlesmesin (iki
   kategoride 1440px'te 588px'lik kareler olculdu); cok kategoride izler
   bos alani paylasir ve serit yine satiri doldurur. */
@media (min-width: 640px) { .karo-izgara { grid-auto-columns: minmax(8.5rem, 15rem); } }

.karo {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--cizgi);
  border-radius: var(--k-orta);
  overflow: hidden;
  color: var(--murekkep);
  background-color: var(--kagit);
  text-decoration: none;
  transition: border-color var(--gecis);
}
.karo:hover { color: var(--murekkep); background-color: var(--kagit); border-color: var(--lacivert); }
.karo-gorsel,
.karo-yer {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--zemin-soguk);
}
@media (min-width: 1024px) { .karo-gorsel, .karo-yer { max-height: 16rem; } }
.karo-yer {
  display: grid;
  place-items: center;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--ikincil-soguk);
  background-color: var(--zemin-soguk);
}
.karo-ad {
  display: block;
  padding: var(--bosluk-2) var(--bosluk-3) 0;
  font-weight: 700;
  color: var(--murekkep);
  background-color: var(--kagit);
}
.karo-adet {
  display: block;
  padding: 0 var(--bosluk-3) var(--bosluk-2);
  font-size: var(--ol-kucuk);
  color: var(--ikincil-soguk);
  background-color: var(--kagit);
  font-variant-numeric: tabular-nums;
}

/* --- URUN IZGARASI (marka yonu §5 sozlesmesi: 2/3/4/5) --------------------- */
.izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ic-pay);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px)  { .izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.gezinme-cip {
  list-style: none;
  margin: 0 0 var(--bosluk-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
}

/* --- URUN KARTI ------------------------------------------------------------
 * KURUMSAL KART: ince cerceve + orta kose. Suslupuslu'de kart cercevesizdir
 * (fotograf sayfada durur); toptan tarafta kart bir KAYIT -- ad, stok, fiyat,
 * adet ayni kutuda okunur. Ayni satirdaki kartlar esit yukseklikte (grid
 * stretch + flex kolon; kapi 1280px'te olcer). */
.kart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--cizgi);
  border-radius: var(--k-orta);
  overflow: hidden;
  background-color: var(--kagit);
  transition: border-color var(--gecis);
}
.kart:hover { border-color: var(--cizgi-koyu); }
.kart-foto-bag { display: block; }
.kart-foto {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  background-color: var(--zemin-soguk);
}
.kart-foto-yok {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bosluk-2);
  text-align: center;
  font-size: var(--ol-kucuk);
  text-decoration: none;
  color: var(--ikincil-soguk);
  background-color: var(--zemin-soguk);
}
.kart-govde {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
  flex: 1;
  padding: var(--bosluk-3);
  border-top: 1px solid var(--cizgi);
}
.kart-ad {
  /* DOKUNMA HEDEFI (27 Eylul, canlida olculdu): tek satirlik ad 21px
     yuksekligindeydi -- parmakla isabet zor. Iki satirlik yer AYRILIR:
     hem hedef ~44px olur, hem de ayni satirdaki kartlarda rozetler ayni
     hizada baslar. */
  min-height: calc(2 * 1.35em + .3rem);
  padding-block: .15rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--murekkep);
  background-color: var(--kagit);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kart-ad:hover { color: var(--lacivert); background-color: var(--kagit); text-decoration: underline; }
.kart-satir { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.kart-alt { margin-top: auto; display: flex; flex-direction: column; gap: var(--bosluk-2); }

.fiyat { font-size: 1.15rem; font-weight: 800; color: var(--murekkep); background-color: var(--kagit); }
.fiyat-birim { font-size: var(--ol-kucuk); color: var(--ikincil-soguk); background-color: var(--kagit); }

/* Fiyat yerine misafire basilan cagri. Fiyat HIC render edilmez (spec §6). */
.fiyat-kapali {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: var(--ol-kucuk);
  color: var(--ikincil-soguk);
  background-color: var(--kagit);
}
.fiyat-kapali svg { width: .95rem; height: .95rem; flex: none; }

/* --- ADET KUTUSU (kartin ICINDE -- marka yonu §5) ------------------------- */
.adet-kutu { display: flex; align-items: stretch; min-width: 0; }
.adet-kutu input[type="number"] {
  width: 100%;
  min-width: 0;
  min-height: var(--dokunma);
  padding: 0 var(--bosluk-2);
  border: 1px solid var(--cizgi-koyu);
  border-right: 0;
  border-radius: var(--k-kucuk) 0 0 var(--k-kucuk);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--murekkep);
  background-color: var(--kagit);
}
.adet-kutu .dugme { flex: none; border-radius: 0 var(--k-kucuk) var(--k-kucuk) 0; padding: 0 var(--bosluk-3); }

.koli-not { margin: 0; font-size: .8rem; color: var(--ikincil-soguk); background-color: var(--kagit); }

/* --- TAM SATIR IZGARA (26 Eylul) -------------------------------------------
 * Suslupuslu'nun kurali (stil.css "TAM SATIR IZGARA"): hicbir genislikte
 * EKSIK son satir birakilmaz; o satir gizlenir, "Diger N urunu gor" belirir.
 * Gizleme `html.js` kosullu -- JS yoksa her sey gorunur. Seciciler URETILDI:
 * python araclar/tam_satir_css_uret.py takidepom. Kapi:
 * araclar/test_takidepom_tam_satir.py. */
.tam-satir-dugme {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: min(100%, 20rem);
  min-height: var(--dokunma);
  margin: var(--bosluk-4) auto 0;
  padding: 0 var(--bosluk-4);
  border: 1px solid var(--lacivert);
  border-radius: var(--k-kucuk);
  font-family: var(--yazi);
  font-size: .95rem;
  font-weight: 700;
  color: var(--lacivert);
  background-color: var(--kagit);
  cursor: pointer;
  transition: background-color var(--gecis), color var(--gecis);
}
.tam-satir-dugme::after {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 300ms var(--gecis-yay);
}
.tam-satir-dugme[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.tam-satir-dugme:hover,
.tam-satir-dugme:focus-visible { color: var(--kagit); background-color: var(--lacivert); }
@keyframes tam-satir-belir { from { opacity: 0; transform: translateY(.75rem); } }
.ts-yeni { animation: tam-satir-belir .4s var(--gecis-yay) both; }

/* takidepom: yalniz EKSIK SON SATIR (uretildi: araclar/tam_satir_css_uret.py takidepom) */
@media (max-width: 767.98px) {
  html.js .tam-satir:not(.acik) > .izgara > :nth-child(2n+3):nth-last-child(-n+1),
  html.js .tam-satir:not(.acik) > .izgara > :nth-child(2n+3):nth-last-child(-n+1) ~ * { display: none; }
  html.js .tam-satir:has(> .izgara > :nth-child(2n+3):nth-last-child(-n+1)) > .tam-satir-dugme { display: flex; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  html.js .tam-satir:not(.acik) > .izgara > :nth-child(3n+4):nth-last-child(-n+2),
  html.js .tam-satir:not(.acik) > .izgara > :nth-child(3n+4):nth-last-child(-n+2) ~ * { display: none; }
  html.js .tam-satir:has(> .izgara > :nth-child(3n+4):nth-last-child(-n+2)) > .tam-satir-dugme { display: flex; }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  html.js .tam-satir:not(.acik) > .izgara > :nth-child(4n+5):nth-last-child(-n+3),
  html.js .tam-satir:not(.acik) > .izgara > :nth-child(4n+5):nth-last-child(-n+3) ~ * { display: none; }
  html.js .tam-satir:has(> .izgara > :nth-child(4n+5):nth-last-child(-n+3)) > .tam-satir-dugme { display: flex; }
}

@media (min-width: 1280px) {
  html.js .tam-satir:not(.acik) > .izgara > :nth-child(5n+6):nth-last-child(-n+4),
  html.js .tam-satir:not(.acik) > .izgara > :nth-child(5n+6):nth-last-child(-n+4) ~ * { display: none; }
  html.js .tam-satir:has(> .izgara > :nth-child(5n+6):nth-last-child(-n+4)) > .tam-satir-dugme { display: flex; }
}

/* --- NASIL BAYI OLUNUR (misafir) ------------------------------------------- */
.adimlar-bant {
  margin: var(--bosluk-12) calc(var(--dis-pay) * -1) calc(var(--bosluk-12) * -1);
  padding: clamp(2rem, 5vw, 3.5rem) var(--dis-pay);
  background-color: var(--zemin-soguk);
}
.adimlar {
  list-style: none;
  counter-reset: adim;
  margin: 0 0 var(--bosluk-6);
  padding: 0;
  display: grid;
  gap: var(--ic-pay);
}
@media (min-width: 768px)  { .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .adimlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adimlar li {
  counter-increment: adim;
  padding: var(--bosluk-3) var(--bosluk-4);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-orta);
  color: var(--murekkep-2);
  background-color: var(--kagit);
  font-size: .95rem;
}
.adimlar li::before {
  content: counter(adim, decimal-leading-zero);
  display: block;
  margin-bottom: .1rem;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--lacivert);
  background-color: var(--kagit);
}
.adimlar strong { display: block; margin-bottom: .2rem; font-size: 1.05rem; color: var(--murekkep); background-color: var(--kagit); }

/* --- BILDIRIM -------------------------------------------------------------- */
.bildirim {
  margin: var(--bosluk-4) 0;
  padding: var(--bosluk-3) var(--bosluk-4);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--lacivert);
  border-radius: var(--k-kucuk);
  color: var(--murekkep);
  background-color: var(--kagit);
}
.bildirim > :last-child { margin-bottom: 0; }
.bildirim-uyari { border-left-color: var(--uyari); background-color: var(--uyari-zemin); }
.bildirim-hata  { border-left-color: var(--hata);  background-color: var(--hata-zemin); }
.bildirim-onay  { border-left-color: var(--onay);  background-color: var(--onay-zemin); }

/* --- FORMLAR ---------------------------------------------------------------
 * Kural OGEYE baglidir, `.alan` kabina degil (11 Eylul). Punto ACIKCA 1rem:
 * iOS odak yakinlastirmasi (kapi hesaplanmis puntoyu tarayicida okur). */
.alan { display: block; margin-bottom: var(--bosluk-4); }
.alan > span:first-child { display: block; margin-bottom: var(--bosluk-1); font-weight: 600; font-size: .95rem; }
.alan > .ikincil { display: block; margin-top: var(--bosluk-1); font-size: .85rem; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
  width: 100%;
  min-height: var(--dokunma);
  padding: var(--bosluk-2) var(--bosluk-3);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--k-kucuk);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--murekkep);
  background-color: var(--kagit);
  transition: border-color var(--gecis);
}
input:hover, select:hover, textarea:hover { border-color: var(--ikincil-soguk); }
input[type="checkbox"],
input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--eylem); }

.alan-hata { margin-top: var(--bosluk-1); font-size: var(--ol-kucuk); color: var(--hata); background-color: var(--kagit); }
.onay-satiri { display: flex; gap: var(--bosluk-2); align-items: flex-start; margin-bottom: var(--bosluk-4); }
.onay-satiri input { margin-top: .3rem; flex: none; }

/* FORM KARTI: bayi giris/basvuru/sifre, tesekkurler, 404. */
.orta-blok {
  max-width: 36rem;
  margin: var(--bosluk-4) auto;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-buyuk);
  background-color: var(--kagit);
}
.orta-blok-genis { max-width: 46rem; }
.form-ikili { display: grid; gap: 0 var(--bosluk-4); }
@media (min-width: 40rem) { .form-ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-grup {
  margin: 0 0 var(--bosluk-4);
  padding: 0;
  border: 0;
}
.form-grup legend {
  margin-bottom: var(--bosluk-3);
  padding: 0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ikincil-soguk);
  background-color: var(--kagit);
}

/* --- TABLOLAR ---------------------------------------------------------------
 * Govde ASLA yatay kaymaz; tablo KENDI kabinda kayar (19 Agu olcumu).
 * `position: relative` -- gorsel-gizli ogeler kabin disina tasip belgeyi
 * uzatmasin (11 Eylul olcumu). */
.tablo-kap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--bosluk-6);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-orta);
  background-color: var(--kagit);
}
.tablo-kap > .varyant-tablo { margin-bottom: 0; border: 0; }
.varyant-tablo {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--bosluk-6);
  background-color: var(--kagit);
}
.varyant-tablo th, .varyant-tablo td {
  padding: var(--bosluk-3);
  border-bottom: 1px solid var(--cizgi);
  text-align: left;
  vertical-align: middle;
}
.varyant-tablo thead th {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ikincil-soguk);
  background-color: var(--zemin-soguk);
}
.varyant-tablo tbody tr:last-child td { border-bottom: 0; }
.varyant-tablo tfoot th, .varyant-tablo tfoot td { border-bottom: 0; border-top: 1px solid var(--cizgi); }
.varyant-tablo .adet-kutu { min-width: 9rem; }
.varyant-tablo .fiyat, .varyant-tablo .toplam, .varyant-tablo .ikincil { white-space: nowrap; }
.sepet-tablo td:first-child { min-width: 12rem; }

/* --- URUN SAYFASI ---------------------------------------------------------- */
.urun-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bosluk-8);
  margin-bottom: var(--bosluk-8);
}
.urun-duzen > * { min-width: 0; }
@media (min-width: 900px) {
  .urun-duzen { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); align-items: start; gap: var(--bosluk-12); }
}
.urun-gorsel .kart-foto,
.urun-gorsel .kart-foto-yok { border-radius: var(--k-orta); border: 1px solid var(--cizgi); }
.urun-bilgi h1 { font-size: clamp(1.4rem, 2.8vw, 2rem); }
.serit {
  list-style: none;
  margin: var(--bosluk-2) 0 0;
  padding: 0 0 var(--bosluk-2);
  display: flex;
  gap: var(--bosluk-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.serit li { flex: 0 0 23%; scroll-snap-align: start; }
.serit-bag { display: block; border-radius: var(--k-kucuk); background-color: var(--kagit); }
.serit-bag[aria-current="true"] .serit-foto { border-color: var(--lacivert); box-shadow: 0 0 0 1px var(--lacivert); }
.serit-foto {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--cizgi);
  border-radius: var(--k-kucuk);
  background-color: var(--zemin-soguk);
}
.kilit-kutu {
  margin: var(--bosluk-4) 0;
  padding: var(--bosluk-4);
  border-radius: var(--k-orta);
  color: var(--lacivert-yazi);
  background-color: var(--lacivert);
}
.kilit-kutu p { margin-bottom: var(--bosluk-3); }
.kilit-kutu strong { color: var(--kagit); background-color: var(--lacivert); }
.kilit-kutu .deger-eylem { margin-top: var(--bosluk-3); }
.urun-aciklama { margin: var(--bosluk-6) 0 0; max-width: 60ch; color: var(--murekkep-2); background-color: var(--kagit); }
.kunye-kart {
  margin-top: var(--bosluk-6);
  padding: var(--bosluk-4);
  border-radius: var(--k-orta);
  color: var(--murekkep);
  background-color: var(--zemin-soguk);
}
.kunye-kart h2 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ikincil-soguk); background-color: var(--zemin-soguk); }
.kunye-kart p:last-child { margin-bottom: 0; }

/* --- SEPET ----------------------------------------------------------------- */
.sepet-duzen { display: grid; gap: var(--bosluk-6); }
@media (min-width: 62rem) {
  .sepet-duzen { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .ozet-kart { position: sticky; top: var(--bosluk-4); }
}
.ozet-kart {
  padding: var(--bosluk-4);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-buyuk);
  background-color: var(--kagit);
}
.ozet-kart h2 { font-size: 1.05rem; }
.ozet-satir {
  display: flex;
  justify-content: space-between;
  gap: var(--bosluk-3);
  margin: 0;
  padding: var(--bosluk-2) 0;
  border-bottom: 1px solid var(--cizgi);
  font-variant-numeric: tabular-nums;
}
.ozet-toplam { border-bottom: 0; font-size: 1.15rem; font-weight: 800; }
.ozet-kart .dugme { width: 100%; margin-top: var(--bosluk-3); }
.ozet-not { margin: var(--bosluk-3) 0 0; font-size: .85rem; color: var(--ikincil-soguk); background-color: var(--kagit); }

/* BAREM CUBUGU -- doluluk hedefe DAHA YAKIN acik kuralin yuzdesi (spec §3). */
.barem { margin: var(--bosluk-3) 0; }
.barem-bas { display: flex; justify-content: space-between; gap: var(--bosluk-2); margin-bottom: .35rem; font-size: .9rem; font-weight: 700; }
.barem-cubuk {
  height: .6rem;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--zemin-soguk);
}
.barem-dolu {
  display: block;
  height: 100%;
  width: var(--doluluk, 0%);
  border-radius: 999px;
  background-color: var(--lacivert);
}
.barem-tamam .barem-dolu { background-color: var(--onay); }
.barem-metin { margin: .4rem 0 0; font-size: .85rem; color: var(--ikincil-soguk); background-color: var(--kagit); }

/* SEPET TABLOSU TELEFONDA SATIR KARTINA DONER: bes sutunlu tablo 390px'te
   kaydirilarak okunuyordu; bayi siparisi cogunlukla telefondan veriyor. */
@media (max-width: 47.99rem) {
  .sepet-tablo thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sepet-tablo, .sepet-tablo tbody, .sepet-tablo tr, .sepet-tablo td { display: block; width: 100%; }
  .sepet-tablo tbody tr { padding: var(--bosluk-3); border-bottom: 1px solid var(--cizgi); }
  .sepet-tablo tbody tr:last-child { border-bottom: 0; }
  .sepet-tablo td { padding: .2rem 0; border: 0; }
  .sepet-tablo td[data-etiket]::before {
    content: attr(data-etiket) ": ";
    font-size: .8rem;
    font-weight: 700;
    color: var(--ikincil-soguk);
    background-color: var(--kagit);
  }
  .sepet-tablo .adet-kutu { max-width: 16rem; margin-top: .3rem; }
}

/* Genel "telefonda satir karti" tablosu (Siparislerim). */
@media (max-width: 47.99rem) {
  .kart-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kart-tablo, .kart-tablo tbody, .kart-tablo tr, .kart-tablo td { display: block; width: 100%; }
  .kart-tablo tbody tr { padding: var(--bosluk-3); border-bottom: 1px solid var(--cizgi); }
  .kart-tablo tbody tr:last-child { border-bottom: 0; }
  .kart-tablo td { padding: .15rem 0; border: 0; }
  .kart-tablo td[data-etiket]::before {
    content: attr(data-etiket) ": ";
    font-size: .8rem; font-weight: 700;
    color: var(--ikincil-soguk); background-color: var(--kagit);
  }
}

/* URUN SECENEK TABLOSU TELEFONDA KART (27 Eylul, OLCULDU): bes sutun
   390px'te sigmiyordu; fiyat ve "Ekle" dugmesi tablonun kaydirma kabinda
   SAGDA, ekran disinda kaliyordu -- bayi siparis vermek icin tabloyu yana
   kaydirmak zorundaydi. Sayfa tasmadigi icin tasma kapisi bunu GORMEDI
   (ayni ders Suslupuslu panelinde "gorunmeyen para" olarak yazili). */
@media (max-width: 47.99rem) {
  .urun-varyant-tablo thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .urun-varyant-tablo, .urun-varyant-tablo tbody, .urun-varyant-tablo tr { display: block; width: 100%; }
  .urun-varyant-tablo tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem .75rem;
    padding: var(--bosluk-3);
    border-bottom: 1px solid var(--cizgi);
  }
  .urun-varyant-tablo tbody tr:last-child { border-bottom: 0; }
  .urun-varyant-tablo td { display: block; min-width: 0; padding: 0; border: 0; }
  .urun-varyant-tablo .varyant-ad { grid-column: 1; font-weight: 700; }
  .urun-varyant-tablo td[data-etiket="Kod"] { grid-column: 2; justify-self: end; font-size: .85rem; }
  .urun-varyant-tablo .fiyat { grid-column: 1; white-space: nowrap; }
  .urun-varyant-tablo .stok { grid-column: 2; justify-self: end; }
  .urun-varyant-tablo .varyant-eylem { grid-column: 1 / -1; }
  .urun-varyant-tablo td[data-etiket]::before {
    content: attr(data-etiket) ": ";
    font-size: .8rem;
    font-weight: 700;
    color: var(--ikincil-soguk);
    background-color: var(--kagit);
  }
  .urun-varyant-tablo .adet-kutu { max-width: none; }
}

/* --- METIN SAYFALARI (yasal, kurumsal) ------------------------------------- */
.metin h2 { margin-top: var(--bosluk-8); }
.metin li { margin-bottom: var(--bosluk-2); }
.bilgi-kart {
  margin: var(--bosluk-4) 0;
  padding: var(--bosluk-4);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-orta);
  background-color: var(--kagit);
}
.bilgi-kart h2 { font-size: 1.05rem; margin-bottom: var(--bosluk-3); }
.iletisim-duzen { display: grid; gap: var(--bosluk-6); }
@media (min-width: 62rem) { .iletisim-duzen { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
.iletisim-eylem { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.iletisim-eylem p { margin: 0 0 var(--bosluk-2); }
.ayrac { width: 100%; margin: var(--bosluk-4) 0; border: 0; border-top: 1px solid var(--cizgi); }
.bilgi-kart dl { display: grid; gap: .2rem var(--bosluk-4); margin: 0; }
@media (min-width: 40rem) { .bilgi-kart dl { grid-template-columns: 12rem minmax(0, 1fr); } }
.bilgi-kart dt { font-weight: 700; color: var(--ikincil-soguk); background-color: var(--kagit); }
.bilgi-kart dd { margin: 0 0 var(--bosluk-2); }

/* --- ARAMA SAYFASI ---------------------------------------------------------- */
.arama-kutu { display: flex; gap: var(--bosluk-2); max-width: 36rem; margin-bottom: var(--bosluk-6); }
.arama-kutu input { flex: 1; min-width: 0; }

/* --- ALT BILGI (lacivert) -------------------------------------------------- */
.alt {
  margin-top: 0;
  padding: var(--bosluk-12) 0 var(--bosluk-6);
  font-size: var(--ol-kucuk);
  color: var(--lacivert-yazi);
  background-color: var(--lacivert);
}
.alt a { color: var(--lacivert-yazi); background-color: var(--lacivert); text-decoration: none; }
.alt a:hover { color: var(--kagit); background-color: var(--lacivert); text-decoration: underline; }
.alt a:focus-visible { outline-color: var(--lacivert-yazi); }
.alt-marka { max-width: 30rem; margin-bottom: var(--bosluk-8); }
.alt-logo { height: 26px; width: auto; margin-bottom: var(--bosluk-3); }
.alt-marka p { color: var(--lacivert-ikincil); background-color: var(--lacivert); }
.alt-ic {
  display: grid;
  gap: var(--bosluk-6) var(--bosluk-4);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .alt-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .alt-ic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.alt-baslik {
  margin: 0 0 var(--bosluk-2);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kagit);
  background-color: var(--lacivert);
}
.alt-liste { list-style: none; margin: 0; padding: 0; }
/* 44px (27 Eylul, canli denetim 36px olctu): altbilgi telefonda tek
   sutun ve parmakla kullanilan bir menu -- ayni dokunma kurali. */
.alt-liste a { display: inline-flex; align-items: center; min-height: var(--dokunma); min-width: var(--dokunma); }
.alt-yasal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--bosluk-4);
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-4);
  border-top: 1px solid var(--lacivert-2);
}
.alt-yasal a { display: inline-flex; align-items: center; min-height: var(--dokunma); color: var(--lacivert-ikincil); background-color: var(--lacivert); }
.alt-odeme {
  display: inline-block;
  max-width: 100%;
  margin-top: var(--bosluk-4);
  padding: .5rem .75rem;
  border-radius: var(--k-kucuk);
  background-color: var(--kagit);
}
.alt-odeme img { height: 24px; width: auto; }
.alt-telif { margin: var(--bosluk-3) 0 0; color: var(--lacivert-ikincil); background-color: var(--lacivert); }

/* --- HAREKET ---------------------------------------------------------------
 * Butce: tam satir belirmesi + ok donusu. Kapi K8 bu blogu zorunlu tutuyor. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ts-yeni { animation: none; }
}

/* Cikis yollari (404, bos sepet, bos arama) -- ortak parca. */
.cikis-baslik { margin: var(--bosluk-6) 0 var(--bosluk-3); font-size: 1.05rem; }

/* Metin sayfalarinda (yasal, kurumsal) ara basliklar nefes alsin. */
.icerik > h2 { margin-top: var(--bosluk-8); }

/* "Cok yakinda" ekrani: yalniz yayin kapaliyken. */
.yakinda { min-height: 100dvh; display: grid; place-items: center; padding: var(--bosluk-4); background-color: var(--zemin-soguk); }
.yakinda-logo { height: 32px; width: auto; margin-bottom: var(--bosluk-6); }
.olgu-etiket {
  display: block;
  margin-bottom: .1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lacivert-ikincil);
  background-color: var(--lacivert-2);
}

/* Renkli bildirim icindeki baglanti ve ikincil metin kendi ZEMININI yazar
   (K12 ciftleri olculebilsin; genel `a` kurali beyaz zemin bildiriyor ve
   renkli kutuda metnin arkasinda beyaz serit birakirdi). */
.bildirim-uyari a, .bildirim-uyari .ikincil { background-color: var(--uyari-zemin); }
.bildirim-hata a, .bildirim-hata .ikincil   { background-color: var(--hata-zemin); }
.bildirim-onay a, .bildirim-onay .ikincil   { background-color: var(--onay-zemin); }
.adimlar-bant .ikincil, .kunye-kart .ikincil { background-color: var(--zemin-soguk); }