/* Süslüpüslü — ortak stil
 * ---------------------------------------------------------------------------
 * TEK KAYNAK: token değerleri marka yönü belgesinden gelir
 * (docs/superpowers/specs/2026-08-11-suslupuslu-marka-yonu.md §4).
 * Burada değer uydurulmaz; belge değişirse burası güncellenir.
 *
 * Yön: "tören davetiyesi" — sıcak fildişi kâğıt, koyu mürekkep, tek törensel
 * vurgu, ince tığ çizgileri. Süs üründe, arayüzde değil.
 *
 * AÇIK TEMA KARARI: ürün görsellerinin bir kısmı tedarikçiden ve beyaz zeminli
 * (spec R4). Koyu zeminde beyaz zeminli fotoğraf beyaz kutu olarak durur.
 * Koyu mod BİLEREK YOK — yarım bir koyu tema, hiç olmamasından kötüdür.
 */

/* --- self-host font (CDN YASAK) ------------------------------------------ */
@font-face {
  font-family: Fraunces;
  src: url("font/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 300 500;
  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: Fraunces;
  src: url("font/fraunces-latin.woff2") format("woff2");
  font-weight: 300 500;
  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;
}
@font-face {
  font-family: Figtree;
  src: url("font/figtree-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  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: 400 600;
  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 bloğu ---------------------------------------------------------- */
/* --- REFERANSIN SISTEMINE GECIS (27 Agustos, feyz karari) ----------------
 * Yeni logo cok renkli, yuvarlak geometrik bir sans. Onceki palet (krem
 * zemin + sarap/altin + Fraunces serif) o logoyla yan yana IKI AYRI MARKA
 * gibi duruyordu. Referansin formulu ise net: BEYAZ sayfa, notr krom,
 * rengi LOGO ve URUN FOTOGRAFLARI tasir.
 *
 * DEGISEN UC SEY:
 *   1. `--kagit` krem -> BEYAZ. Sayfa ve kart artik TEK yuzey; izgaranin
 *      son satirindaki bos hucreler de gorunmez olur (25 Agu'da kart
 *      zeminine esitlenmislerdi, simdi zaten ayni renk).
 *   2. `--kenar` sicak bejden NOTR griye. Bej cizgi beyaz zeminde sariya
 *      calar ve sayfayi eskitir.
 *   3. Bolum bantlari (`--pudra`, `--fildisi-2`) neredeyse beyaza cekildi.
 *      Referansta renkli bolum bandi YOK; ritmi fotograflar kurar.
 *
 * KINA VE GECE KALDI: kina vurgu (dugme, rozet) ve gece kahraman paneli
 * icin hala gerekli -- silinmeleri kontrasti olculebilir tutan zeminleri
 * yok ederdi. Ama artik ZEMIN degil VURGU'durlar.
 */
:root {
  --kagit:      #ffffff;
  --yuzey:      #ffffff;
  --murekkep:   #24170f;
  --murekkep-2: #63503f;
  --kina:       #8e2f4a;
  --kina-koyu:  #6f2239;
  --tig:        #b08d4f;  /* SADECE çizgi ve süs — metin için yasak (WCAG) */
  --kenar:      #e6e3df;  /* notr hairline (eski sicak bej: #e7ddcd) */
  --uyari:      #8a4b00;
  /* Ust duyuru seridi (27 Agu): referansta acik gri-mavi bir bant ve
     KOYU metin var; bizde koyu sarap zemin + beyaz metin vardi. Beyaz
     sayfada sarap bant sayfanin en gurultulu ogesi oluyordu -- oysa
     kargo esigi bir DIPNOTTUR, kahraman degil. */
  --serit:      #efece7;

  /* YUZEY YARICAPI (27 Agu). Dugmeler dikdortgene cevrilince cipler,
     sekmeler, rozetler ve arama alanlari HAP olarak kaldi -- ayni sayfada
     iki bicim dili (sepet sayfasinda gorunur haliyle yakalandi).
     Bu token yalniz YUZEY ogeleri icindir. GERCEKTEN dairesel olanlar
     (ikon dugmeleri, sayaclar) 999px/50% kalir: onlar bicim degil,
     dokunma hedefi geometrisidir. */
  /* --- BOLUM BANT RENKLERI (3 Eylul) ------------------------------------
     Marka yonu §13'un secilmis yonu "Renk Bloklari": "her kategori kendi renk
     alanini sahiplenir ... sayfa cok renkli olacak". O yon uygulanamamisti
     cunku bant icin dusunulen token'lar sonraki bir turda BEYAZA CEKILMISTI --
     kendi yorumlari kaydediyor: `--pudra` "bant rengi neredeyse beyaz
     (eski: #f7e9ec)", `--fildisi-2` "(eski krem: #f4ebdd)". Beyaza yakin bir
     bant, bant degildir.
     MEVCUT TOKEN'LARA DOKUNULMADI: `--pudra`/`--fildisi-2` baska yerlerde
     BILEREK neredeyse-beyaz yuzey olarak kullaniliyor (kart, panel). Bant
     icin AYRI token'lar tanimlandi; boylece iki ihtiyac birbirini ezmiyor.
     Degerler eski, kayitli tonlardir -- yeni renk UYDURULMADI.
     Kontrast: `--murekkep` (#24170f) bu uc acik zeminde de WCAG AA ustu;
     kapi K12 dogruluyor. */
  --bant-blush: #f7e9ec;   /* eski --pudra */
  --bant-krem:  #f4ebdd;   /* eski --fildisi-2 */
  --bant-lila:  #ece1ea;   /* --pudra-2'nin doygun karsiligi */

  /* --- VITRIN BOSLUK SISTEMI = REFERANSIN SISTEMI (7 Eylul) ---------------
   * feyz: "mobilde de TAM OLARAK ayni olmali."
   * Referansin kendi tasarim token'lari OKUNDU (theme.css + sayfa degiskenleri),
   * goz karariyla yaklasilmadi:
   *     --LAYOUT-OUTER: 50px  / --LAYOUT-GUTTER: 20px          (>= 1025px)
   *     --LAYOUT-OUTER-MEDIUM: 20px / --GUTTER-MEDIUM: 20px    (750-1024px)
   *     --LAYOUT-OUTER-SMALL: 10px  / --GUTTER-SMALL: 10px     (<= 749px)
   * Kirilma noktalari da referansin: 750px ve 1025px.
   *
   * NEDEN `--kenar-payi` KULLANILMADI: o token sayfanin HER yerinde (baslik,
   * kahraman ic dolgusu, yasal sayfalar) kullaniliyor ve akiskan bir clamp;
   * 1440px'te 43px veriyordu (referans 50), 390px'te 16px (referans 10).
   * Vitrin izgarasini referansla birebir hizalamak icin AYRI iki token
   * tanimlandi -- boylece oteki yuzeylerin olcusu kazara degismiyor.
   *
   * DEGERLER SABIT PIKSEL, bilerek: referansin kendisi de sabit piksel
   * kullaniyor ve "tam olarak ayni" istegi akiskan bir egriyle karsilanamaz. */
  --dis-pay: 50px;   /* sayfa kenari  — referans --LAYOUT-OUTER */
  --ic-pay:  20px;   /* kartlar arasi — referans --LAYOUT-GUTTER */

  --yaricap: 2px;

  /* --- RENK GENİŞLEMESİ (16 Ağu, feyz kararı: "çok daha renkli") ----------
   * Marka yönü belgesi (11 Ağu) açık temayı ZORUNLU kılıyordu; gerekçesi
   * "ürün görselleri tedarikçiden ve BEYAZ ZEMİNLİ, koyu zeminde beyaz kutu
   * gibi durur" idi. O gerekçe ARTIK GEÇERSİZ — 16 Ağustos'ta içeri alınan
   * 97 fotoğrafın tamamı yaşam tarzı/model çekimi (siyah elbise, teal
   * kadife, koyu zeminler). Yani koyu bloklar artık fotoğrafı BOZMUYOR,
   * tam tersine taşı parlatıyor. Bu satırlar o ölçüme dayanır.
   *
   * Yeni renkler PALETİ TERK ETMEZ: hepsi mevcut kına/tığ ekseninden
   * türetildi — daha koyu, daha açık ve daha parlak uçlar eklendi. */
  --gece:        #1d0f16;  /* derin erik-siyah — kahraman ve alt bilgi blokları */
  --gece-2:      #2e1a24;  /* aynı ailenin bir tık açığı, katman ayrımı için */
  --kina-parlak: #b8395c;  /* rozet/kampanya vurgusu — kına'nın canlı ucu */
  --pudra:       #faf7f7;  /* bant rengi neredeyse beyaz (eski: #f7e9ec) */  /* çok açık gül zemini — bölüm bandı */
  --pudra-2:     #f2eced;  /* pudra'nın koyusu, kenar/ayrım için */
  --tig-parlak:  #d8b871;  /* koyu zemin ÜZERİNDE altın — orada kontrast yeter */
  --fildisi-2:   #f7f6f4;  /* bant ayrimi, notr (eski krem: #f4ebdd) */  /* kağıt'ın bir tık koyusu — bant ayrımı */

  /* §4b ile DARALTILDI: daha az boşluk, daha çok ürün */
  --bosluk-1: clamp(.45rem, .9vw, .7rem);
  --bosluk-2: clamp(.85rem, 1.8vw, 1.25rem);
  --bosluk-3: clamp(1.25rem, 2.5vw, 2rem);
  --bosluk-4: clamp(2rem, 5vw, 3.5rem);
  --bosluk-5: clamp(3rem, 7vw, 5rem);

  /* dokunma hedefi — ui-ux-pro-max: min 44px, aralarında min 8px (High) */
  --dokunma: 44px;

  /* KENAR PAYI (21 Agu, tam genislik kararı): kabuk artik ucdan uca.
     Nefes payini kabugun max-width'i degil, ICERIK kendi dolgusuyla verir.
     Medya bloklari (izgara, kahraman, banner) bu dolguyu HIC almaz. */
  --kenar-payi: clamp(1rem, 3vw, 3rem);

  --yaricap-dis:  18px;
  --kabuk-payi:   6px;
  --tig-kalinlik: 1px;

  --gecis-yay:  cubic-bezier(.32,.72,0,1);
  --gecis-sure: .45s;

  /* BASLIK ARTIK SANS (27 Agu): logo yuvarlak geometrik bir sans ve
     Fraunces'in yuksek kontrastli serif dili onunla catisiyordu.
     Figtree ZATEN self-host -- yeni font dosyasi gerekmedi. */
  --baslik: Figtree, system-ui, sans-serif;
  --govde:  Figtree, system-ui, sans-serif;
}

/* Referansin iki ara esigi. `max-width` yazildi cunku taban deger GENIS
   ekranin degeridir (yukarida `:root`) ve asagi dogru daralir -- referansta
   da sira boyle. */
@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; }

body {
  margin: 0;
  background-color: var(--kagit);
  color: var(--murekkep);
  font-family: var(--govde);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* iOS SAFARI YATAY CEVIRMEDE METNI SISIRIR (10 Eylul). Telefon yan
     cevrildiginde WebKit bazi bloklarin puntosunu KENDILIGINDEN buyutur
     ("text autosizing") ve sayfa ritmi kullanici hicbir sey yapmadan bozulur.
     `100%` bunu kapatir, YAKINLASTIRMAYI ENGELLEMEZ -- `none` yazsaydik
     erisilebilirligi kirardik ve kapi K2 zaten yakinlastirma kisitini
     yasakliyor. */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--baslik);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
  /* Güvenlik ağı: sığmayan TEK bir uzun kelime bile belgeyi viewport'tan
     geniş yapar ve TÜM sayfa yatay kayar (mobilde ölçüldü, 17 Ağu).
     Başlıklar kırılabilir olmalı — taşma sessizce yayılmasın. */
  overflow-wrap: anywhere;
}

/* Optik ölçek disiplini: Fraunces 300–500 aralığında değişken bir font ve
 * `font-optical-sizing: auto` zaten kurulu, ama TÜM başlıklar 400'de
 * duruyordu — bu, büyük boyda ağır/kalın, küçük boyda cılız görünür.
 * Büyük başlık İNCELİR (300) ve harf aralığı sıkışır: davetiye
 * tipografisinin ta kendisi. Küçük başlık KALINLAŞIR (500) ki gövde
 * metninden ayrışsın. Boyutlar değişmedi — yalnız ağırlık/aralık. */
/* ÖLÇÜLDÜ (17 Ağu, 390px ekran görüntüsü): alt sınır 2.5rem = 40px'ti.
   390px'te kabuk 350px, kahraman içi ~310px kalıyor; "Özel gününüz için"
   40px Fraunces ile oraya SIĞMIYOR ve belgeyi viewport'tan geniş yapıyordu
   -> TÜM SAYFA yatay kayıyordu (başlık, çipler, kartlar, düğmeler kesik).
   clamp'in orta terimi (6vw) 390px'te zaten 23px istiyordu; sorunu yaratan
   yalnızca ZEMİN değeriydi. Üst sınır ve masaüstü görünümü DEĞİŞMEDİ. */
h1 {
  font-size: clamp(1.9rem, 6vw, 4.25rem);
  font-weight: 300;
  letter-spacing: -.025em;
}
h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 350;
  letter-spacing: -.018em;
}
h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -.005em;
}

p { margin: 0; }
a { color: var(--kina); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--kina); outline-offset: 3px; }

/* --- KABUK: TAM GENISLIK (21 Agustos, feyz karari) ------------------------
 * ONCE: `min(100% - 2.5rem, 74rem)` -- 1440px ekranda icerik 1184px kutuya
 * sikisiyor ve IKI YANDA 128'ER PIKSEL olu kenar kaliyordu (olculdu: ekranin
 * %18'i). Referans yuzey (baublebar.com) ucdan uca: olculdu, sayfasinda
 * `100vw` 852 kez geciyor ve icerik icin genel bir max-width kabugu YOK.
 *
 * `calc(50% - 50vw)` HILESI KULLANILMADI ve kullanilmayacak: o hile kaydirma
 * cubugunu hesaba katmaz ve govdeyi yatay kaydirir (depo kurali: govde yatay
 * KAYMAZ). Gerek de yok -- sayfanin TAMAMI zaten tek bir .kabuk icinde, o
 * yuzden kabugun kendisini tam genislik yapmak yetti. Tasma riski sifir.
 *
 * Nefes payi artik ICERIGIN kendi dolgusunda: metin ve gezinme `--kenar-payi`
 * alir, medya bloklari (urun izgarasi, kahraman, banner) HIC almaz.
 */
.kabuk { width: 100%; margin-inline: 0; }

/* ICERIK GENISLIGI — varsayilan DAR, tam genislik OPT-IN.
 * Listeleme yuzeyleri (ana sayfa, kategori) `icerik-tam` alir ve medya
 * ucdan uca akar. Detay/islem sayfalari (urun, sepet, adres, yasal)
 * varsayilanda kalir: 1440px genisliginde bir 'Sepete ekle' dugmesi ya da
 * tek satirlik bir kunye metni kullanilabilir degildir (olculdu). */
.icerik { width: min(100% - 2 * var(--kenar-payi), 74rem); margin-inline: auto; }
.icerik-tam { width: 100%; margin-inline: 0; }

/* GORSEL OLARAK GIZLI, EKRAN OKUYUCUYA ACIK.
 * `display: none` OLMAZ: o zaman ekran okuyucu da gormez ve etiketsiz bir
 * form alani kalir. `.atla` ile ayni disiplin -- gizlemek degil, EKRAN
 * DISINA almak. */
.gorsel-gizli {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Uzun metin okunabilirlik icin DAR kalir: 1440px genisliginde tek satirlik
 * bir paragraf 180 karaktere ular ve okunmaz. Tam genislik MEDYA icindir. */
.kabuk-metin {
  width: min(100% - 2 * var(--kenar-payi), 46rem);
  margin-inline: auto;
}

/* Gezinme, cip seridi ve bolum basliklari ekran kenarina yapismaz. */
.marka-serit,
.cipler,
.bolum-basi { padding-inline: var(--kenar-payi); }

/* --- içeriğe atla ---------------------------------------------------------
 * GİZLİ DEĞİL, EKRAN DIŞINDA: `display: none` olsaydı klavye de odaklayamaz,
 * yani bağlantı hiç çalışmazdı. Odaklanınca görünür yere gelir.
 */
.atla {
  position: absolute;
  left: var(--bosluk-2);
  /* KONUM SABIT, HAREKET `transform`LA: `top`u animasyonlamak yerlesim
     tetikler ve tasarim kapisinin K7'si onu yakalar (haklı olarak --
     depo kurali "yalniz transform ve opacity"). */
  top: var(--bosluk-2);
  transform: translateY(-250%);
  z-index: 80;
  padding: .6em 1.2em;
  border: 1px solid var(--kina);
  border-radius: var(--yaricap);
  font-weight: 600;
  text-decoration: none;
  color: var(--yuzey);
  background-color: var(--kina);
  transition: transform var(--gecis-sure) var(--gecis-yay);
}
.atla:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--murekkep);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .atla { transition: none; } }

/* göz-üstü etiket — davetiyenin künye satırı tonunda */
.etiket {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}

/* --- tığ çizgisi: markanın süs birimi ------------------------------------- */
.tig {
  border: 0;
  height: var(--tig-kalinlik);
  background-color: var(--tig);
  opacity: .55;
  margin: 0;
}

/* --- düğmeler -------------------------------------------------------------
 * Dokunma hedefi min 44px (ui-ux-pro-max High). Mobilde küçültme.
 */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-1);
  min-height: var(--dokunma);
  padding: .7em 1.4em;
  border: 1px solid var(--kina);
  /* HAP -> DIKDORTGEN (27 Agu). Referansin butun dugmeleri keskin
     koseli; hap bicimi sayfaya yumusak/oyuncak bir ton katiyordu.
     2px tam keskin degil: dokunma hedefinin kenarini yumusatir ama
     bicimi dikdortgen birakir. */
  border-radius: 2px;
  font-family: var(--govde);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  color: var(--yuzey);
  background-color: var(--kina);
  transition: transform var(--gecis-sure) var(--gecis-yay),
              opacity var(--gecis-sure) var(--gecis-yay);
}
.dugme:hover { transform: translateY(-2px); }
.dugme:active { transform: translateY(0); opacity: .9; }

.dugme-ikincil {
  color: var(--kina);
  background-color: var(--yuzey);
}

.dugme-tam { width: 100%; }

/* --- kargo eşiği şeridi: en üstte, kalıcı -------------------------------- */
.esik-serit {
  padding: var(--bosluk-1) var(--bosluk-2);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  color: var(--murekkep);
  background-color: var(--serit);
}

/* --- oluş çipleri: kullanıcının kendi dili, basılabilir ------------------ */
.cipler {
  display: flex;
  gap: var(--bosluk-1);
  overflow-x: auto;
  /* Kisayol `padding`, ustteki ortak `padding-inline` kuralini EZER.
     Kenar payi burada TEKRAR yazilmali (olculdu: cip x=0'a yapisti). */
  padding: var(--bosluk-2) var(--kenar-payi);
  scrollbar-width: none;
}
.cipler::-webkit-scrollbar { display: none; }
.cip {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0 1.1em;
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap);
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--murekkep);
  background-color: var(--yuzey);
}
.cip[aria-current="page"] {
  color: var(--yuzey);
  background-color: var(--kina);
  border-color: var(--kina);
}

/* --- ürün kartı: fiyat çıpa, künye satırı, doğrudan sepete --------------- */
/* IZGARA MOZAIGI (21 Agu): kartlar arasindaki bosluk 2px'lik bir DIKISE
 * indi. Referansta bosluk HIC yok, ama bizim fotograflarimizin cogu BEYAZ
 * ZEMINLI -- 17 Agustos'ta urun seridinde tam bu olculdu: komsu fotograflar
 * birbirine karisiyordu ve kaydirilabilirlik sinyali 25 urunun 11'inde
 * gorunmuyordu. Cozum orada da buydu: sac teli kalinliginda bir dikis.
 * Dikis `--kenar` (notr), `--tig` DEGIL: bes kolonluk bir izgarada altin
 * cizgiler urunun onune gecerdi. */
/* IZGARA NEFES ALIYOR (7 Eylul, ferah turu — feyz karari).
 * 21 Agustos'ta bosluk 2px'lik bir DIKISE inmisti; 25 Agustos'ta izgara
 * zemini kart zeminine esitlenmisti. Sonuc CANLIDA olculdu (1440px):
 * urun satirinda 1440 piksel boyunca TEK BIR zemin sutunu gorunmuyordu --
 * yani sayfada hic bosluk yoktu ve fotograflarin cogu koyu oldugu icin
 * sayfa kesintisiz koyu bir duvar gibi okunuyordu.
 * REFERANSTAN OLCULEN DEGERLER: sayfa kenarinda 50px, kartlar arasinda
 * 20px. `--bosluk-2` genis ekranda 20px verir ve mobilde kendiliginden
 * daralir; sabit piksel YAZILMADI.
 * Bos hucre sorunu geri GELMEZ: izgara zemini hala kart zeminiyle ayni
 * (asagidaki `background-color`) ve tur bolumlerinde kolon sayisi urun
 * sayisina kisiliyor. */
.urun-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ic-pay);
  /* IZGARANIN YUZEYI KARTLARINKIYLE AYNI (25 Agu, feyz: "bosluk olmasin").
   * Son satirda bos hucre kalmasi KACINILMAZ: urun sayisi kolon sayisina
   * bolunmedigi surece her katalogda olur ve kolon sayisi genislikle
   * degisir. Olculdu (CANLI 25 urun): 1440px'te 5 kolon -> bos hucre YOK,
   * ama 1024px'te 4 kolon -> 3 bos hucre, 768px'te 2, 390px'te 1.
   * Kacinilmaz olan boslugun VARLIGI; kacinilabilir olan RENGI. Kart zemini
   * `--yuzey` (beyaz), sayfa zemini `--kagit` (bej) oldugu icin bos alan
   * 1024px'te 768x510px'lik bej bir dikdortgen olarak okunuyordu -- yani
   * "eksik kart" gibi. Izgara zemini kart zeminine esitlenince bosluk
   * rafin devami olur; kart sayisindan BAGIMSIZ calisir, bu yuzden
   * katalog degistiginde bozulmaz. */
  background-color: var(--yuzey);
}
/* DIKIS KARTIN KENDISINDE, IZGARANIN ARKA PLANINDA DEGIL.
 * Ilk denemede izgaraya `background-color` + `gap: 2px` verdim. OLCULDU
 * (1440px ekran goruntusu): son satirda BOS kalan iki sutun, izgaranin
 * arka planini KOCA BIR BEJ DIKDORTGEN olarak gosterdi.
 * Yanlis olan `background-color` DEGIL, `gap: 2px` ile birlikte kullanilmasi
 * ve zeminin bej olmasiydi: bosluklar da o rengi gosteriyordu. Dikis simdi
 * kartin ic golgesinde (yalniz VAR OLAN kartlarin sag ve alt kenarinda bir
 * sac teli), izgara zemini ise kart zeminiyle ayni -- ikisi cakismaz.
 * DUZELTME (25 Agu): bu yorumun eski son cumlesi "bos hucre yok" diyordu;
 * OLCUM aksini gosterdi (bkz. `.urun-izgara` icindeki not). */
/* DIKIS YERINI BOSLUGA BIRAKTI, AMA INCE CERCEVE KALDI (7 Eylul).
 * Dikisin isi komsu fotograflari ayirmakti; bunu artik bosluk yapiyor.
 * Fotografin KENDI cercevesi yine de gerekli: 17 Agustos'ta olculdu ki
 * beyaz zeminli urun fotograflari zeminden ayirt edilemiyor -- bosluk da
 * beyaz oldugu icin o kusur bosluga GECERDI. Cerceve `outline` ile
 * yaziliyor: `box-shadow: inset` bir <img> uzerinde gorunmez kalabilir,
 * `outline-offset: -1px` ise cerceveyi ICERI alir, yani yerlesime
 * dokunmaz ve boslugu yemez. */
.kart-foto,
.gorsel-yer {
  outline: 1px solid var(--kenar);
  outline-offset: -1px;
}

/* IZGARA TAŞMA KİLİDİ (ölçüldü 17 Ağu, 390px ekran görüntüsü)
 * Grid ve flex çocuklarının varsayılanı `min-width: auto`dur: çocuk kendi
 * MIN-CONTENT genişliğinin altına İNMEZ. Sığmayan tek bir kart (uzun ürün
 * adı, geniş düğme) sütunu şişirir; sütun kabuğu, kabuk gövdeyi genişletir
 * ve SAYFANIN TAMAMI yatay kayar — başlık, çipler, kartlar, düğmeler kesik
 * görünür. Belirti sayfanın her yerindeyken sebep tek bir çocuktadır.
 * `min-width: 0` çocuğun küçülmesine izin verir; taşma sessizce yayılmaz. */
.urun-izgara > *,
.karo-izgara > *,
.banner-izgara > *,
.guven > * { min-width: 0; }
/* SAYFA KENAR PAYI — YALNIZ UCTAN UCA YUZEYLERDE. `.icerik-tam` bayragini
   almayan detay sayfalari zaten dar bir kapta duruyor; oraya ikinci bir
   dolgu koymak icerigi iki kez iceri iterdi. */
.icerik-tam .urun-izgara { padding-inline: var(--dis-pay); }
@media (min-width: 48rem) { .urun-izgara { grid-template-columns: repeat(3, 1fr); } }
/* 68rem -> 62rem: 1024px (yaygin dizustu genisligi) 68rem esiginin ALTINDA
   kaliyordu ve orada yalniz 3 kolon vardi -- olculdu. */
@media (min-width: 62rem) { .urun-izgara { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 86rem) { .urun-izgara { grid-template-columns: repeat(5, 1fr); } }

/* KART CERCEVESI KALKTI (21 Agu, feyz karari: 'referansa benzesin').
 * ONCE: beyaz kutu + 1px kenarlik + 18px yuvarlak kose + hover golgesi.
 * SIMDI: fotograf dogrudan sayfada durur, yazilar altinda duz akar --
 * referansin dili bu. Kart yine de bir NESNE: onu ayiran sey artik cerceve
 * degil, izgaranin 2px dikisi ve fotografin kendi kenari.
 * `overflow: hidden` KALDI: hover'daki olcek fotografi kirpmali. */
.kart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--yuzey);
}
/* KART-UST: rozetlerin ve eylem çipinin konumlandırma bağlamı. Kutusu
 * fotoğrafın kutusudur (yüksekliği `aspect-ratio: 4/5` belirler), bu yüzden
 * çip `bottom` ile fotoğrafın alt kenarına oturur — sabit bir px değeri
 * gerekmez, oran değişse de çip yerinde kalır.
 * `overflow` BURADA YOK: hover'daki `scale(1.04)` kırpması `.kart-gorsel`in
 * işi; çip kırpılmamalı. */
.kart-ust { position: relative; }
.kart-gorsel { display: block; overflow: hidden; }

/* --- kartta HOVER'DA İKİNCİ FOTOĞRAF -------------------------------------
 * 12 Ağustos kararı: BaubleBar'dan YAPI alınır, deri korunur. Onlarda olup
 * bizde olmayan desenlerden biri buydu (ölçüldü: `hover-image`). Takıda
 * karar fotoğrafla verilir; ikinci açıyı görmek için ürün sayfasına gitmek
 * gerekiyordu.
 *
 * URL YALNIZ `:hover` KURALINDA. Temel kuralda tanımlansaydı tarayıcı onu
 * kural eşleşir eşleşmez İNDİRİRDİ — `opacity: 0` indirmeyi ENGELLEMEZ — ve
 * ana sayfada ölçülen 690 KB'lik görsel yükü 31 kart için İKİYE KATLANIRDI.
 * Böylece fotoğraf ancak üzerine gelindiğinde iniyor.
 *
 * `hover: hover` KAPISI: dokunmatikte hover diye bir şey yok; kural orada
 * hiç uygulanmaz, yani mobil kullanıcı tek bayt fazla indirmez.
 *
 * `:focus-within` de tetikler — kart bir bağlantı, klavyeyle gezen kullanıcı
 * aynı bilgiyi görmeli.
 */
@media (hover: hover) {
  .kart-gorsel { position: relative; }
  .kart-gorsel::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;   /* çip düğmesi altta kalmasın */
    transition: opacity var(--gecis-sure) var(--gecis-yay);
  }
  .kart:hover .kart-gorsel::after,
  .kart:focus-within .kart-gorsel::after {
    background-image: var(--kart-ikinci);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kart-gorsel::after { transition: none; }
}

/* --- kartın hareketi ------------------------------------------------------
 * Vitrinin en önemli öğesi karttı ve HİÇ hover davranışı yoktu (düğme ve
 * menü vardı) — ürün ızgarası ölü duruyordu. Hareket ÖLÇÜLÜ: fotoğraf çok
 * hafif yaklaşır, kart bir tık yükselir ve kenar tığ altınına döner.
 * Altın YALNIZ çizgide — metinde kullanımı WCAG gerekçesiyle yasak
 * (marka yönü token bloğunun kendi notu).
 * Süs ürünün kendisinde kalsın diye ölçek 1.04'te tutuldu; daha fazlası
 * fotoğrafı kırpar ve takının detayını kaçırır. */
/* HAREKET DE SADELESTI: cerceve kalkinca kenar rengi ve golge gecisinin
 * dayanagi kalmadi -- olmayan bir kenarligi renklendiremeyiz. Geriye
 * fotografin cok hafif yaklasmasi kaldi (olcek 1.04, degismedi). */
.kart { transition: none; }
.kart-foto {
  transition: transform var(--gecis-sure) var(--gecis-yay);
}
@media (hover: hover) {
  .kart:hover .kart-foto { transform: scale(1.04); }
}
/* Klavye kullanıcısı da aynı geri bildirimi görür (hover'a bağlı kalmaz).
 * Cerceve kalktigi icin isaret artik ANAHAT: `outline` yerlesim tetiklemez
 * ve odak gorunurlugu kapisinin (K6) aradigi seydir. */
.kart:focus-within {
  outline: 2px solid var(--kina);
  outline-offset: -2px;
}
/* GOVDE DOLGUSU: referansta yazi fotografin sol kenariyla HIZALI ve kutu
 * yok. Bizde yazi daha uzun (ad + kunye + fiyat), o yuzden yatayda kucuk
 * bir dolgu kaliyor -- iki komsu kartin yazilari 2px dikisle yan yana
 * gelmesin diye. Dikey dolgu asagida daha genis: kartlar arasindaki
 * ayrimi artik cerceve degil BOSLUK veriyor. */
.kart-govde {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-1);
  padding: var(--bosluk-2) var(--bosluk-1) var(--bosluk-3);
  flex: 1;
}
/* AD — EN FAZLA 2 SATIR, ama yeri HER ZAMAN 2 satır.
 * Ölçüldü (17 Ağu, 390px): uzun ürün adları 3 satıra sarıyordu (60px) ve
 * ızgarada kart yükseklikleri 455/480 arasında zıplıyordu — alt kenar
 * tırtıklı. `line-clamp` üst sınırı, `min-height` alt sınırı koyar; ikisi
 * birlikte TÜM kartları aynı yükseklikte tutar. Yalnız clamp koymak
 * tırtıklılığı ÇÖZMEZ (1 satırlık ad hâlâ kısa kart üretir).
 * Ürün adının tamamı kesilirse kaybolmaz: `.kart-gorsel` ve ad, ikisi de
 * ürün sayfasına bağlantı. */
.kart-ad {
  font-size: .92rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--murekkep);
  background-color: var(--yuzey);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}
/* FİYAT ÇIPASI — büyük ve koyu. Soluk gri fiyat yasak (§4b-2). */
.kart-fiyat {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--murekkep);
  background-color: var(--yuzey);
}
/* Kartta kısa künye — künye artık satış argümanı (§4b-7)
 *
 * KIRPILMAZ — bu kural CANLI VERİYLE ÖLÇÜLEREK yazıldı, iki adımda.
 *
 * 1. adım (yanlıştı): "en fazla 2 satır" kilidi kondu. Gerekçe doğruydu
 *    (tek satırlık kırpma "925 gümüş…" bırakıp markanın R1 riskinin TERSİ
 *    bir iddia üretebilir) ama DOĞRULAMA YEREL TOHUMLA yapıldı ve tohumdaki
 *    künye kısaydı: 2 satır yetiyor görünüyordu.
 * 2. adım (düzeltme): canlı katalogda künye ürüne ÖZGÜ ve DAHA UZUN — 12
 *    farklı metin, hepsi "925 gümüş değildir" ile bitiyor, en uzunu 63
 *    karakter. 390px'te ölçüldü: **39 künyeden 21'i kırpılıyordu ve 21'inin
 *    hepsinde "değildir" GÖRÜNMÜYORDU** (bir kısmı harfi harfine "— 925" ile
 *    bitiyordu). 1440px'te kırpılma 0 — yani hata YALNIZ mobildeydi ve yerel
 *    ölçüm onu göremezdi.
 *
 * Bu yüzden kırpma TAMAMEN kaldırıldı, 3 satıra çıkarılmadı: kırpma VARSA
 * gelecekte daha uzun bir künye aynı riski yeniden üretir. Eşit kart
 * yüksekliğini `min-height` sağlıyor (3 satır = bugünkü en uzun canlı
 * metnin en dar kartta kapladığı yer). Daha uzun bir künye girilirse kart
 * UZAR (kozmetik tırtık) ama metin KESİLMEZ — hukuki riski kozmetik riske
 * çevirmek doğru takas.
 *
 * Kapı bunu bekçiliyor: `test_suslupuslu_olcum.py` tohuma canlının en uzun
 * künyesini yazıp HİÇBİR künyenin kırpılmadığını ölçüyor.
 *
 * Kartta künyenin TEKRARI ayrı bir sorun ve AÇIK: doğru çözüm panelden
 * girilen ayrı bir KISA künye alanı (`urun.kunye_kisa`); o alan yok,
 * uydurmak da yasak (bkz. denetleyiciler/vitrin.php `vitrin_kart_verisi()`).
 * TAM künye ürün sayfasında açık blok olarak duruyor (marka yönü §"Ürün"
 * adım 4) — R1 orada karşılanıyor. */
.kart-kunye {
  font-size: .76rem;
  color: var(--murekkep-2);
  background-color: var(--yuzey);
  /* `line-height` BURADA AÇIKÇA yazılır, miras ALINMAZ: `min-height` onunla
     aynı sayıyı kullanıyor ve iki değer AYNI yerde durmazsa kilit kayar.
     Ölçüldü (17 Ağu): min-height `1.5em` iken satır yüksekliği body'den
     1.65 geliyordu — 2 satırlık künye 40px, 1 satırlık künye 36,5px'e
     kilitleniyordu ve AYNI genişlikteki iki kart 391/394 px çıkıyordu.
     Belirti "kartlar tırtıklı", sebep iki farklı satır yüksekliği. */
  line-height: 1.5;
  min-height: calc(3 * 1.5em);
}

/* FİYAT SATIRI — fiyat solda (çıpa), renk noktaları sağda. */
.kart-alt {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-1);
}
/* Fiyat kısalmasın diye küçülmez; noktalar gerekirse küçülür. */
.kart-alt .kart-fiyat { flex: 0 0 auto; }
.kart-alt .kart-noktalar { flex: 0 1 auto; min-width: 0; }

/* EYLEM ÇİPİ — fotoğrafın alt-sağ köşesinde 44×44 ikon düğme.
 *
 * ZEMİN OPAK OLMAK ZORUNDA. Çip fotoğrafın üzerinde durur; yarım saydam bir
 * zeminde ikonun kontrastı ALTTAKİ FOTOĞRAFA GÖRE değişir ve ÖLÇÜLEMEZ —
 * depo bu kuralı bu sayfada üç kez uyguladı (metin fotoğraf üstünde
 * durmaz). Opak `--yuzey` ile kontrast ikon-vs-çip olarak sabitlenir ve
 * tasarım kapısının K12'si onu ölçebilir. `rgba()`/`opacity` YASAK, testi
 * var (test_suslupuslu_urun_kart.py).
 *
 * 44×44 spec §7'nin "değişmez" dokunma hedefi. `min-width`/`min-height`
 * kullanılır, sabit `width` DEĞİL: ikon ya da yazı tipi ölçeği büyürse çip
 * büyüyebilsin, ama 44'ün ALTINA hiç inmesin. */
.cip-dugme {
  position: absolute;
  right: var(--bosluk-1);
  bottom: var(--bosluk-1);
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kenar);
  border-radius: 999px;
  background-color: var(--yuzey);
  color: var(--murekkep);
  text-decoration: none;
  cursor: pointer;
  /* AYIRICI GÖLGE — süs değil, okunabilirlik. Çipin kendi zemini beyaz
     (`--yuzey`); R4 gereği katalogda tedarikçiden gelmiş BEYAZ ZEMİNLİ
     fotoğraflar da olabilir (bugünkü 97 fotoğrafın hepsi koyu zeminli ama
     bu bir veri durumu, garanti değil). Beyaz fotoğraf üzerinde çip yalnız
     `--kenar` ile ayrılırdı, o da açık bir ton. Gölge zemini yarım saydam
     YAPMAZ — kontrast hâlâ ikon-vs-çip olarak ölçülebilir (kapı K12). */
  box-shadow: 0 1px 6px -2px rgba(36, 23, 15, .3);
  transition: border-color var(--gecis-sure) var(--gecis-yay),
              box-shadow var(--gecis-sure) var(--gecis-yay);
}
.cip-dugme svg { width: 1.25rem; height: 1.25rem; }
/* Form, çipin konumlandırılmasına karışmasın: konumlandırılan eleman çipin
   KENDİSİ (`position: absolute`), formun kutusu hiç çizilmez. */
.kart-eylem { display: contents; }
@media (hover: hover) {
  .cip-dugme:hover { border-color: var(--tig); box-shadow: 0 2px 10px -4px rgba(36, 23, 15, .35); }
}

/* --- kart rozetleri (spec §7) — yalniz gercek veri; metin murekkep/uyari, AA gecer --- */
.kart-rozetler {
  position: absolute; top: var(--bosluk-1); left: var(--bosluk-1);
  display: flex; gap: .35rem;
}
.rozet {
  padding: .2em .6em; font-size: .72rem; font-weight: 600;
  border-radius: var(--yaricap); background-color: var(--yuzey);
  border: 1px solid var(--kenar); color: var(--murekkep);
}
.rozet-son { color: var(--uyari); border-color: var(--uyari); }

/* varyant renk noktalari — SUS ogesi (metin degil), --tig burada serbest */
.kart-noktalar { display: flex; gap: .4rem; align-items: center; }
.nokta {
  width: .8rem; height: .8rem; border-radius: 50%;
  border: 1px solid var(--kenar); display: inline-block;
}
.nokta-gold  { background-color: var(--tig); }
.nokta-gumus { background-color: #c9c9ce; } /* varyant nokta rengi — süs, metin değil */
.nokta-notr  { background-color: var(--kagit); }

/* --- çıkış yolları: "burada aradığın yok" durumları ----------------------
 * İKİ yüzey basıyor (404 + boş sepet), bu yüzden görünümün `<style>`
 * bloğunda DEĞİL burada: ortak stil iki+ yüzeyin kuralıdır (§29a). Parça:
 * `gorunumler/parca/cikis_yollari.php`.
 * Ölçüldü (17 Ağu): boş sepetin tek çıkışı "/" idi — aynı gün yazılan 404
 * sayfası boş sepetten daha yardımcıydı. */
/* HİZAYI PARÇA KENDİ TAŞIR. Boş sepet kabı `text-align: center` (sepet.php)
 * — parça onu miras alınca grup etiketi ("KATEGORİLER") ortalanıp çipler
 * sola yatıyordu, yani etiket kendi çiplerinin üstünde DURMUYORDU (ölçüldü
 * 17 Ağu, ekran görüntüsü). `.cikis-cipler` bir flex kabı ve sola yaslar;
 * etiket de sola yaslanır ki ikisi aynı eksende olsun. Kabın ortalı girişi
 * (H1 + tek satır) etkilenmez. */
.cikis-yollari { display: block; text-align: left; }
.cikis-grup { margin-bottom: var(--bosluk-3); }
.cikis-baslik {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  margin-bottom: var(--bosluk-1);
}
.cikis-cipler { display: flex; flex-wrap: wrap; gap: var(--bosluk-1); }
/* TELEFONDA SERIT (26 Eylul): yedi cip 390px'te 4/2/1 sariyordu -- son
   satirda tek basina bir cip (olculdu, canli 404 + bos sepet). Kategori
   sayfalarindaki `.cipler` ile AYNI desen: tek satir, yana kayar. */
@media (max-width: 47.99rem) {
  .cikis-cipler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
  .cikis-cipler::-webkit-scrollbar { display: none; }
  .cikis-cipler > * { flex: none; }
}

/* --- güven şeridi: hepsi gerçek, rozet uydurulmaz ------------------------ */
/* GÜVEN ŞERİDİ — ölçüldü (17 Ağu ekran görüntüsü): iki saç çizgi arasında
   dört sütun ufak GRİ metindi, yani sayfanın en zayıf vurgulu bloğuydu ve
   güven öğesi gibi değil KÜNYE gibi okunuyordu. Oysa taşıdığı bilgi
   (tarihli kargo, 3D Secure, 14 gün cayma, takip) sitenin en güçlü
   argümanı ve hepsi DOĞRULANABİLİR — uydurma rozet değil.
   Renk alanına alındı, her maddeye satır içi SVG işaret verildi (emoji
   YASAK — kapı K14). METİN DEĞİŞMEDİ, yalnız görünürlüğü. */
/* GUVEN BANDI — UCTAN UCA BANT (24 Agustos tutarlilik turu).
 * Yuvarlak kose ve kutu kalkti: ana sayfa duzlestikten sonra bu bant tek
 * basina eski dili tasiyordu ve sayfalar arasinda ayrisma yaratiyordu
 * (kategori sayfasi ekran goruntusunde goruldu). Yatay dolgu artik
 * `--kenar-payi` -- bant ucdan uca, icerik kenara yapismiyor. */
.guven {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bosluk-2) var(--bosluk-3);
  padding: clamp(1.25rem, 3.5vw, 1.9rem) var(--kenar-payi);
  background-color: var(--fildisi-2);
}
@media (min-width: 62rem) { .guven { grid-template-columns: repeat(4, 1fr); } }
.guven > div { display: flex; gap: var(--bosluk-1); align-items: flex-start; }
.guven-simge {
  flex: none;
  width: 1.4rem; height: 1.4rem;
  color: var(--kina);
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.guven-ad { font-size: .92rem; font-weight: 600; color: var(--murekkep); background-color: var(--fildisi-2); }
.guven-not { margin-top: .15em; font-size: .84rem; line-height: 1.5; color: var(--murekkep-2); background-color: var(--fildisi-2); }
.guven-not strong { color: var(--murekkep); background-color: var(--fildisi-2); }

/* --- yasal sayfalar: sözleşme/aydınlatma metinleri + "hazırlanıyor" durumu
   (Görev 3/faz1b, ayar-beslemeli yasal metinler) — altı rota (mesafeli-satis/
   on-bilgilendirme/cayma-ve-iade/kvkk/cerez/teslimat) ve ortak
   gorunumler/yasal/parca/hazirlaniyor.php BU sınıfları paylaşır; altı ayrı
   <style> bloğuna kopyalanmadı (§29a — .guven/.kart ile aynı gerekçe: 2+
   şablonun paylaştığı düzen merkezi stile taşınır). */
.yasal-bolum { padding: var(--bosluk-2) 0 var(--bosluk-4); max-width: 42rem; }
.yasal-bolum h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--murekkep); background-color: var(--kagit); }
.yasal-surum { margin: 0 0 var(--bosluk-3); font-size: .82rem; color: var(--murekkep-2); background-color: var(--kagit); }
.yasal-bolum h2 { margin: var(--bosluk-3) 0 .4em; font-size: 1.08rem; color: var(--murekkep); background-color: var(--kagit); }
.yasal-bolum p, .yasal-bolum li { font-size: .94rem; line-height: 1.7; color: var(--murekkep); background-color: var(--kagit); }
.yasal-bolum ul, .yasal-bolum ol { margin: 0 0 var(--bosluk-1); padding-left: 1.3em; }
/* --- YASAL SAYFA OKUMA RITMI (3 Eylul) -----------------------------------
 * Global `p { margin: 0 }` yuzunden ardisik paragraflar BIRBIRINE YAPISIK
 * cikiyordu; sekiz sayfanin hepsi tek blok gibi okunuyordu (gozle goruldu,
 * /mesafeli-satis 470px). Bir sozlesme metninde paragraf sinirlari
 * ANLAMLIDIR -- madde icindeki ayri hukumler ayri gorunmeli.
 * Ayni duzeltme 1 Eylul'de `.hakkimizda`ya yapilmisti; artik yasal
 * sayfalarda da geerli (o gun "ayri bir karardir" diye kapsam disi
 * birakilmisti, karar simdi verildi). */
.yasal-bolum p { margin-bottom: .8em; }
.yasal-bolum p:last-child { margin-bottom: 0; }
.yasal-bolum h2 + p { margin-top: 0; }
/* Baslik ustundeki bosluk artti: madde gecisleri gozle taranabilsin. */
.yasal-bolum h2 { margin-top: var(--bosluk-4); }
.yasal-bolum h2:first-of-type { margin-top: var(--bosluk-3); }

/* --- YASAL SAYFALAR ARASI GEZINME ---------------------------------------
 * Sekiz belge birbirinden habersizdi: birinden otekine gecmek icin sayfanin
 * DIBINE inip altbilgiden tiklamak gerekiyordu. Serit icerigin ustunde.
 * YATAY KAYAR: sekiz etiket 390px'e sigmaz; sarmalamak yerine kaydirma --
 * `.cipler` ile AYNI desen, kullanici iki farkli davranis ogrenmesin.
 * Kacis `calc(50% - 50vw)` ILE DEGIL negatif kenar payi ile (depo kurali:
 * govde yatay KAYMAZ) -- serit ekranin ucundan baslar, ilk etiket ise
 * metinle HIZALI kalir. */
.yasal-gezinme {
  display: flex;
  gap: var(--bosluk-1);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--kenar-payi));
  padding-inline: var(--kenar-payi);
  padding-block: var(--bosluk-2) var(--bosluk-3);
  border-bottom: 1px solid var(--kenar);
  margin-bottom: var(--bosluk-2);
}
.yasal-gezinme::-webkit-scrollbar { display: none; }
.yasal-gezinme-oge {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0 .7rem;
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap);
  font-size: .82rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--murekkep-2);
  background-color: var(--kagit);
}
.yasal-gezinme-oge:hover,
.yasal-gezinme-oge:focus-visible { color: var(--kina); border-color: var(--kina); }
.yasal-gezinme-aktif {
  color: var(--kagit);
  background-color: var(--murekkep);
  border-color: var(--murekkep);
  font-weight: 600;
}

.yasal-kutu { margin: var(--bosluk-2) 0; }
.yasal-kutu p { margin: 0 0 .5em; font-size: .92rem; line-height: 1.6; color: var(--murekkep); background-color: var(--yuzey); }
.yasal-kutu p:last-child { margin-bottom: 0; }

.yasal-hazirlaniyor { padding: var(--bosluk-4) 0; max-width: 38rem; margin-inline: auto; text-align: center; }
.yasal-hazirlaniyor h1 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); color: var(--murekkep); background-color: var(--kagit); }
.yasal-hazirlaniyor p { color: var(--murekkep-2); background-color: var(--kagit); }
.yasal-eksik-kutu { margin: var(--bosluk-3) auto 0; max-width: 26rem; text-align: left; }
.yasal-eksik-kutu h2 { margin: 0 0 var(--bosluk-1); font-size: .9rem; color: var(--murekkep); background-color: var(--yuzey); }
.yasal-eksik-kutu ul { margin: 0; padding-left: 1.2em; font-size: .85rem; color: var(--murekkep); background-color: var(--yuzey); }

/* --- SATICI KUNYESI (1 Eylul, /iletisim) -----------------------------------
 * Etiket/deger cifti bir <dl>. Genis ekranda iki kolon (etiket sabit
 * genislikte, deger kalani alir), dar ekranda alt alta -- bir kunye TABLO
 * gibi taranir, paragraf gibi degil.
 *
 * `minmax(0, 1fr)`: uzun bir adres kirilmadan tasarsa izgara kolonu buyur ve
 * govde YATAY KAYARDI (deponun yazili kurali: govde yatay KAYMAZ). 0 taban
 * kolonun kucule bilmesine izin verir, `overflow-wrap` da kelimeyi kirar. */
.kunye-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .15rem var(--bosluk-2);
  margin: 0 0 var(--bosluk-3);
}
.kunye-liste dt {
  font-size: .8rem;
  color: var(--murekkep-2);
  background-color: var(--kagit);
}
.kunye-liste dd {
  margin: 0 0 .6rem;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--murekkep);
  background-color: var(--kagit);
  overflow-wrap: anywhere;
}
@media (min-width: 34rem) {
  .kunye-liste { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; }
  .kunye-liste dd { margin-bottom: .35rem; }
}

/* --- HAKKIMIZDA (1 Eylul) -----------------------------------------------
 * Global `p { margin: 0 }` yasal sayfalarda sorun degil (orada her paragrafi
 * bir h2 ayiriyor) ama BU sayfada ardisik paragraflar birbirine YAPISIK
 * cikiyordu -- gozle goruldu, tek blok gibi okunuyordu. Kural BILEREK yalniz
 * `.hakkimizda`ya kapsandi: `.yasal-bolum p`ye vermek alti sozlesme
 * sayfasinin dikey ritmini de degistirirdi ve o ayri bir karardir. */
.hakkimizda p { margin-bottom: .85em; }
.hakkimizda p:last-child { margin-bottom: 0; }
.hakkimizda-giris { margin-top: .5em; }
.hakkimizda-toptan { margin-top: var(--bosluk-3); font-size: .9rem; color: var(--murekkep-2); background-color: var(--kagit); }

/* ALT BILGI STILI BURADA DEGIL: `duzen.php`'nin satir ici <style> blogunda
 * ZATEN var ve o blok bu dosyadan SONRA geldigi icin kazanir. 1 Eylul'de
 * buraya ikinci bir `footer` kurali yazildi ve SESSIZCE ezildi -- yatay
 * dolgu uygulanmadi, hesaplanmis stil `32px 0px 56px` olarak olculdu.
 * Kural tek yerde yasar (§29a); duzeltme duzen.php'de yapildi. */

/* --- alta yapışık sepet çubuğu (mobil, ürün sayfası) -------------------- */
.yapisik {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2);
  border-top: 1px solid var(--kenar);
  background-color: var(--yuzey);
}
.yapisik .dugme { flex: 1; }

/* --- kart: iç içe kabuk (eşmerkezli eğri) --------------------------------- */
/* ES MERKEZLI KABUK — 24 Agustos'ta DUZLESTI.
 * Ic ice iki yuvarlak kabuk (dis --yaricap-dis, ic o eksi kabuk payi)
 * tasarim katmani belgesinin 'double-bezel' desenidir ve GECERLI bir
 * desendir; ama 24 Agustos'ta vitrin ucdan uca ve DUZ dile gecti.
 * Ayni sitenin iki sayfasinin iki ayri dil konusmasi, deseni korumaktan
 * daha buyuk bir kusur. Kabuk KALDI (fotografi cerceveliyor), kosesi
 * gitti -- yaricap 0 olunca ic/dis hesabi da gereksizlesti. */
.kabuk-dis {
  padding: var(--kabuk-payi);
  border: 1px solid var(--kenar);
  background-color: var(--kagit);
}
.kabuk-ic {
  background-color: var(--yuzey);
  overflow: hidden;
}

/* --- ürün görseli yer tutucu ---------------------------------------------
 * SAHTE GÖRSEL YOK (marka yönü §9): gerçek fotoğraf yerine ölçüsü doğru,
 * kaynağı belli bir çerçeve. Faz 1b'de <img srcset> ile değişecek.
 */
.gorsel-yer {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background-color: var(--kagit);
  color: var(--murekkep-2);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --- gerçek ürün fotoğrafları (görsel hattı) -------------------------------
 * `.gorsel-yer` ile AYNI en-boy oranı: fotoğrafı olan ve olmayan ürün yan
 * yana durduğunda ızgara zıplamaz. `width`/`height` HTML'de ayrıca yazılı —
 * tasarım kapısının K4'ü (CLS) ölçü zorunluluğunu denetliyor, `aspect-ratio`
 * onun yerine GEÇMEZ, üstüne gelir. */
.kart-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: var(--kagit);
}
.urun-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: var(--kagit);
}
/* --- ürün fotoğraf şeridi (JS YOK) ----------------------------------------
 * ESKİ HÂL `.urun-galeri` idi: ek fotoğraflar 4,5rem = 72px kare, tıklanamaz,
 * büyütülemez. Ölçüldü (17 Ağustos akşamı): küçük fotoğraf, ana fotoğrafın
 * 390px'te %3,7'si / 1440px'te %1,4'ü; masaüstünde 873px derinlikte, yani
 * katlamanın ALTINDA. Canlıda 97 fotoğrafın 72'si (%74) oradaydı.
 *
 * YERİNE: kapak dahil bütün fotoğraflar tek yatay yapışmalı şeritte, hepsi
 * ana fotoğraf boyutunda. Kaydırma ve yapışma tarayıcının işi — bir satır
 * bile JS yok, JS kapalıyken de aynen çalışır.
 *
 * NEDEN %90, %100 DEĞİL: JS'siz bir konum göstergesi (nokta dizisi)
 * YAPILAMAZ — kaydırma konumunu izleyecek bir şey yok. "Devamı var"
 * sinyalini komşu slaytın kırpılmış kenarı taşır. Ölçülen pay: 390px'te
 * slayt ~302px, görünen komşu ~27px; 1440px'te slayt ~495px, komşu ~44px.
 * Bedeli kabul edilmiştir: ana fotoğraf %10 küçülür (336 -> ~302px), karşılığı
 * diğer üç fotoğrafın ÖLÜ olmaktan çıkmasıdır.
 */
.urun-serit {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /* Farede kaydırma jesti doğal değil; kaydırma çubuğu, platformun sunduğu
     tek yerleşik SÜRÜKLEME tutamacıdır. `thin` onu inceltir, gizlemez —
     gizlemek masaüstü kullanıcısını tutamaçsız bırakırdı. Platform üstü
     kaplama çubuk kullanıyorsa (mobil) zaten yer kaplamaz. */
  scrollbar-width: thin;
  /* TIĞ DİKİŞİ — kırpma sinyali FOTOĞRAFIN İÇERİĞİNE BAĞLI OLAMAZ.
   * Ölçüldü (CANLI, 25 ürünün ikinci fotoğrafının sol kenar şeridi, kâğıt
   * zemine karşı WCAG kontrastı): 11 üründe 1,5:1'in ALTINDA — üçü tam
   * beyaz (255,255,255 → 1,08:1). Yani ürünlerin %44'ünde kırpılan komşu
   * zeminle aynı renkte ve "devamı var" sinyali HİÇ YOK. Tek bir ürüne
   * bakıp karar vermek (ilk denediğim `su-damlasi-sik-kupe` 9,67:1) tam
   * olarak 17 Ağustos'un 1. dersiydi.
   *
   * Şeridin zemini tığ rengi olunca slaytlar arasındaki boşluk HER ZAMAN
   * görünür bir çizgi olur — bembeyaz bir fotoğrafta da (tığ/yüzey 3,10:1).
   * `--tig` metin için yasak ama bu bir ÇİZGİ: markanın kendi süs birimi
   * (`.tig` kuralı da tam bunun için var). Boşluk `--bosluk-1` DEĞİL 2px:
   * 7-11px'lik altın bir bant süs olur, 2px çizgi kalır. */
  gap: 2px;
  background-color: var(--tig);
}
/* GALERI MOBILDE UCTAN UCA (27 Agustos).
 * OLCULDU (390px): ana sayfa uctan ucayken urun sayfasinin galerisi
 * kenar bosluklu bir kart icinde duruyordu -- ayni sitede iki yerlesim
 * dili. Referansin urun sayfasinda da fotograf mobilde tam genistir.
 *
 * KURAL `.urun-serit` TANIMININ ARDINDA DURMALI: ilk yazimda onun ONUNE
 * koydum ve HICBIR SEY degismedi -- taban kuraldaki `margin: 0` DAHA
 * SONRA geldigi icin eziyordu. Medya sorgusu ozgullugu artirmaz; esit
 * ozgullukte kaynak sirasi kazanir. Olculdu: serit 344px'te kaldi.
 *
 * KACIS `calc(50% - 50vw)` ILE DEGIL, negatif kenar payi ile: vw tabanli
 * hile kaydirma cubugunu saymaz ve govdeyi yatay kaydirir (deponun
 * yazili kurali). `.icerik` zaten `100% - 2*--kenar-payi` genisliginde
 * oldugu icin bu kacis ogeyi TAM OLARAK %100 yapar -- tasma 0'da kalir. */
@media (max-width: 47.99rem) {
  /* KACIS SERITTE DEGIL KABUKTA. Olculdu (ata zinciri, 390px): galeri
     CIFT CERCEVELI bir kabugun icinde -- `.kabuk-dis` (1px kenarlik +
     6px dolgu) > `.kabuk-ic` > `ul.urun-serit`. Negatif kenar payini
     seride verince serit 376px'e cikti ama iki yanda 7px kaldi: o 7px
     kabugun kenarligi ve dolgusuydu. Kacis en DIS kabuga tasindi ve
     kenarlik/dolgu mobilde kaldirildi; serit kendi kacisini birakir.
     Kural `.urun-ust` ile SINIRLI: `.kabuk-dis` sepet, adres ve
     tesekkurler sayfalarinda da kullaniliyor ve orada cerceve
     KASITLI (bir kutuyu isaret ediyor, tam genislik bir medya degil). */
  .urun-ust .kabuk-dis {
    margin-inline: calc(-1 * var(--kenar-payi));
    border-inline: 0;
    padding-inline: 0;
    border-radius: 0;
  }
  .urun-serit { margin-inline: 0; }
}

.urun-serit li {
  flex: 0 0 90%;
  min-width: 0;
  scroll-snap-align: start;
}
/* Tek fotoğraflı üründe kırpılacak komşu YOK — kırpma payı da olmamalı. */
.urun-serit-tek li { flex-basis: 100%; }
/* Kaydırma kabı `tabindex="0"` ile klavyeye açık; odak halkası GÖRÜNÜR
   olmalı. `-2px` içe kaydırma: kabuk `overflow: hidden` olduğu için dışa
   taşan halka kırpılırdı. */
.urun-serit:focus-visible {
  outline: 2px solid var(--kina);
  outline-offset: -2px;
}
/* Fotoğrafın üzerindeki sayaç çipi — gerekçesi urun.php'deki notta (ölçüm:
 * kırpılan komşu ürünlerin %44'ünde zeminden ayırt edilemiyor; çip şeridin
 * ALTINA satır olarak konduğunda kolon dengesi bütçesi aşılıyordu).
 * `.serit-kutu` yalnız konumlandırma bağlamı: `.kabuk-ic` kart bileşeninde de
 * kullanılıyor, ona genel bir `position` vermek başka yüzeyleri etkilerdi.
 * Çipin zemini OPAK — fotoğrafın üzerinde okunabilirlik ancak böyle ölçülebilir
 * (yarı saydam zeminde kontrast fotoğrafa göre değişir, yani ölçülemez). */
.serit-kutu { position: relative; }
.serit-sayac {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  padding: .3em .8em;
  border: 1px solid var(--kenar);
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--murekkep);
  background-color: var(--yuzey);
}

/* --- künye: markanın imzası ------------------------------------------------
 * Ne olduğu VE ne olmadığı açıkça yazılır (spec R1). Katlanır kutu değil —
 * gizlenirse işlevini yitirir.
 */
.kunye {
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap-dis);
  padding: var(--bosluk-2);
  background-color: var(--yuzey);
}
.kunye dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem var(--bosluk-2);
  margin: var(--bosluk-1) 0 0;
  font-size: .9rem;
}
.kunye dt { color: var(--murekkep-2); background-color: var(--yuzey); }
.kunye dd { margin: 0; color: var(--murekkep); background-color: var(--yuzey); }
.kunye-degil {
  margin-top: var(--bosluk-2);
  padding-top: var(--bosluk-1);
  border-top: 1px solid var(--kenar);
  font-size: .85rem;
  color: var(--murekkep-2);
  background-color: var(--yuzey);
}

/* --- giriş animasyonu (hareket bütçesi: 2 tür) ----------------------------- */
.gir { opacity: 0; transform: translateY(14px); }
.gir.gorundu {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s var(--gecis-yay), transform .7s var(--gecis-yay);
}

/* --- ust menu (spec §4): mobil cekmece + masaustu mega panel. ANIMASYONSUZ. --- */
.ana-nav { display: flex; align-items: center; }
.masa-menu { display: none; }

.mobil-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--dokunma); min-height: var(--dokunma);
}
.mobil-menu > summary::-webkit-details-marker { display: none; }
.mobil-menu > summary svg { width: 1.4rem; height: 1.4rem; fill: none; }
.mobil-cekmece {
  position: fixed; inset: 0; z-index: 40; overflow: auto;
  padding: calc(var(--dokunma) + var(--bosluk-2)) var(--bosluk-3) var(--bosluk-3);
  background-color: var(--kagit);
  display: grid; gap: var(--bosluk-1); align-content: start;
}
/* IZGARA TASMA KILIDI — urun izgarasindakiyle AYNI kural, ayni sebep.
 * 24 Agustos'ta cekmeceye arama formu eklendi; form bir izgara cocugu ve
 * varsayilani `min-width: auto`, yani <input type=search>'un ic genisligi
 * (varsayilan ~20 karakter) TABAN kabul edildi ve sabit konumlu cekmeceyi
 * ekrandan tasirdi. OLCULDU (esitlik kapisi, 390px): scrollWidth 529,
 * gorunum 390 -- 139px tasma. Cekmece KAPALIYKEN gorunmuyordu ama acan
 * kullanici icin gercekti. */
.mobil-cekmece > * { min-width: 0; }

.mobil-cekmece a, .mobil-cekmece summary {
  display: flex; align-items: center; min-height: var(--dokunma);
  color: var(--murekkep); text-decoration: none; cursor: pointer;
  border-bottom: var(--tig-kalinlik) solid var(--kenar);
}
.mobil-cekmece details a { padding-left: var(--bosluk-2); }
/* akordeon satiri ile duz baglanti ayirt edilsin — acilir gosterge (JS'siz) */
.mobil-cekmece summary::after { content: "⌄"; margin-left: auto; color: var(--murekkep-2); }
.mobil-cekmece details[open] > summary::after { content: "⌃"; }
/* Cekmece arama satiri: alan + dugme yan yana, dokunma hedefi tam.
   Cekmecenin genel `a, summary` kurali alt kenarlik veriyor; form ogeleri
   o kurala girmez ve kendi bicimlerini tasir. */
.cekmece-arama {
  display: flex;
  gap: var(--bosluk-1);
  margin-bottom: var(--bosluk-2);
}
.cekmece-arama-alan {
  flex: 1;
  min-width: 0;
  min-height: var(--dokunma);
  padding: 0 .9em;
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap);
  background-color: var(--yuzey);
  color: var(--murekkep);
  font: inherit;
}
.cekmece-arama .dugme { flex: none; }

.cekmece-baslik {
  margin-top: var(--bosluk-2); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep-2);
}

/* MASAUSTU MENU ESIGI 48rem -> 62rem (24 Agustos).
 * OLCULDU (kategori agaci buyumus haliyle, 768px): logo + YEDI kategori +
 * koleksiyonlar + arama + sepet yan yana sigmiyor ve ust serit 24px
 * TASIYORDU. Kapi yakaladi ve suclu olarak `a.sepet-bag`i gosterdi.
 *
 * Cozum menuyu kaydirilabilir yapmak DEGIL: mega panel `position:
 * absolute` ve bir kaydirma kabuguna girerse KIRPILIR. Cozum esigi
 * yukseltmek -- 768-991 arasi cekmeceyi kullanir.
 *
 * Bu bir YAMA DEGIL, dayanikli bir karar: 24 Agustos'ta 82 yeni raf
 * acildi ve icleri doldukca ust menudeki ana kategori sayisi ARTACAK.
 * Sabit bir bosluk ayari bir sonraki kategoride yeniden kirmizi yanardi. */
@media (min-width: 62rem) {
  .mobil-menu { display: none; }
  .masa-menu {
    display: flex; gap: var(--bosluk-2);
    list-style: none; margin: 0; padding: 0;
  }
  .masa-menu > li { position: relative; }
  .masa-menu > li > a {
    display: inline-flex; align-items: center; min-height: var(--dokunma);
    color: var(--murekkep); text-decoration: none; font-size: .92rem;
  }
  .masa-menu > li > a:hover { color: var(--kina); }
  .mega {
    display: none; position: absolute; left: 0; top: 100%; z-index: 40;
    min-width: 26rem; padding: var(--bosluk-3);
    background-color: var(--yuzey); border: 1px solid var(--kenar);
    border-radius: var(--yaricap-dis);
    grid-template-columns: 1fr 1fr; gap: var(--bosluk-2);
  }
  .masa-menu > li:hover .mega,
  .masa-menu > li:focus-within .mega { display: grid; }
  .mega-altlar { list-style: none; margin: 0; padding: 0; }
  .mega a {
    display: flex; align-items: center; min-height: var(--dokunma);
    color: var(--murekkep); text-decoration: none;
  }
  .mega a:hover { color: var(--kina); }
  .mega-olus { border-left: var(--tig-kalinlik) solid var(--tig); padding-left: var(--bosluk-2); }
  .mega-olus .cekmece-baslik { margin-top: 0; }
  /* ust-duzey "Koleksiyonlar" ogesinin paneli: tek sutun, alt kategori sutunu yok */
  .mega-koleksiyonlar { min-width: 14rem; grid-template-columns: 1fr; }
  .mega-koleksiyonlar .mega-olus { border-left: none; padding-left: 0; }
}

/* acikken summary cekmecenin USTUNDE sabitlenir — kapatma dokunusla mumkun (JS'siz) */
.mobil-menu[open] > summary {
  position: fixed; top: var(--bosluk-2); right: var(--bosluk-2); z-index: 41;
  background-color: var(--yuzey); border: 1px solid var(--kenar); border-radius: 999px;
}
.mobil-menu > summary .ikon-kapat { display: none; }
.mobil-menu[open] > summary .ikon-ac { display: none; }
.mobil-menu[open] > summary .ikon-kapat { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .dugme, .gir.gorundu { transition: none; }
  .dugme:hover, .dugme:active { transform: none; }
  /* Kart hareketi de susar — RENK/kenar geri bildirimi KALIR (hareketi
     kısıtlamak, odak göstergesini kaldırmak demek değildir). */
  .kart, .kart-foto { transition: none; }
  .kart:hover { transform: none; }
  .kart:hover .kart-foto { transform: none; }
  /* Eylem çipi de susar; kenar rengi geri bildirimi KALIR. */
  .cip-dugme { transition: none; }
  .gir { opacity: 1; transform: none; }
}

/* --- SLAYT ŞERİDİ (7 Eylül) ----------------------------------------------
 * Panelden yönetilen tanıtım alanı: ana sayfada kahraman, kategori ve
 * koleksiyon sayfalarında reklam bandı.
 *
 * JS'SİZ TABAN: şerit `scroll-snap`, noktalar gerçek bağlantı. Otomatik
 * kayma `vitrin.js`ten gelir ve YOKSA da şerit tam çalışır (`.urun-serit`
 * ile aynı desen).
 *
 * ⚠️ PLANDAN BİLEREK AYRILDI. Uygulama planı 3 Eylül'de yazıldı ve slayt
 * metnini ALTTAN YUKARI KARARTAN bir gradyan perdenin üzerine, beyaz
 * renkte koyuyordu. O tam olarak 7 Eylül ferah turunda KALDIRILAN şeydir:
 * yarı saydam perdede kontrast alttaki fotoğrafa göre değişir, kapı K12
 * çözemez ve "denetlenmedi" der. feyz bu turda slider biçimi için
 * "bugünkü kahramanın aynısı"nı seçti — yani OPAK AÇIK PANEL.
 * Panelin konumu ve ölçüleri `.kahraman-fotografli`den birebir alındı ki
 * slayt varken ve yokken sayfa aynı görünsün.
 *
 * ORAN SUNUM ÖZNİTELİĞİYLE EZİLMEZ: `<img>` width/height taşıyor ve
 * `height:auto` verilmezse `aspect-ratio` HİÇ çalışmaz. Aynı tuzak bu
 * depoda dört kez yaşandı (kahraman 18 Ağu, kategori karosu, banner 24 Ağu).
 */
:root {
  /* V1 — bugünkü kahramanın oranı (feyz seçimi, 7 Eylül).
     UC KADEME, cunku bugunku kahraman da uc kademeli: mobil 1/1,
     >=48rem 24/9, >=86rem 32/9. Ilk yazimda genis ekran kademesi
     ATLANMISTI ve olcum kapisi yakaladi: 1440px'te serit 540px oluyordu
     (kahraman 405), ilk urun karti 1170px derinlige dusuyordu ve butceyi
     asiyordu. "Bugunku kahramanin aynisi" demek ucuncu kademeyi de almak
     demek. */
  --slayt-oran-mobil: 1 / 1;
  --slayt-oran-masaustu: 24 / 9;
  --slayt-oran-genis: 32 / 9;
}
.slayt { position: relative; }
.slayt-serit {
  display: flex;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slayt-serit::-webkit-scrollbar { display: none; }
.slayt-tek {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
}
.slayt-tek > * { grid-area: 1 / 1; }

/* ORAN KAPTA DEGIL FOTOGRAFTA, VE `height: auto` ZORUNLU (7 Eylul, OLCULDU).
 * Ilk yazimda oran `.slayt-tek` uzerindeydi ve `<img>` `height: 100%`
 * aliyordu. Kapi 1440px'te seridi 620px yerine 1800px olctu: kap bir flex
 * ogesi ve `min-height: auto` tasiyor, yani ICERIGIN asgari boyu
 * `aspect-ratio`yu EZIYOR -- 1440 genisliginde 1:1 bir fotograf 1440px
 * yukseklik istiyor ve kap ona uyuyor. Calisan kurgu zaten depodaydi:
 * `.kahraman-foto` orani KENDI uzerinde tasiyor ve `height: auto` veriyor
 * (o dosyada da "`100%` DEGIL" diye yazili, 4:5 varyantinda olculmus).
 * Ayni desene gecildi. */
.slayt-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--slayt-oran-mobil);
  object-fit: cover;
}
@media (min-width: 48rem) {
  .slayt-foto { aspect-ratio: var(--slayt-oran-masaustu); }
}
@media (min-width: 86rem) {
  .slayt-foto { aspect-ratio: var(--slayt-oran-genis); }
}

/* PANEL OPAK: perde YOK. Mobilde fotoğrafın alt kenarına oturur, masaüstünde
   ortalanır -- `.kahraman-fotografli` ile aynı kurgu. */
.slayt-yazi {
  position: relative; z-index: 1;
  align-self: end;
  justify-self: stretch;
  background-color: var(--kagit);
  color: var(--murekkep);
  padding: var(--bosluk-2) var(--dis-pay);
  text-align: left;
}
@media (min-width: 48rem) {
  .slayt-yazi {
    align-self: center;
    justify-self: center;
    width: min(44rem, calc(100% - 2 * var(--dis-pay)));
    text-align: center;
    padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.5vw, 2rem);
  }
}
.slayt-baslik {
  font-family: var(--baslik); font-weight: 400;
  text-transform: uppercase; letter-spacing: .07em;
  font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.3;
  margin: 0 0 var(--bosluk-1);
  color: var(--murekkep); background-color: var(--kagit);
}
.slayt-etiket {
  display: block; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kina); background-color: var(--kagit);
  margin-bottom: var(--bosluk-1);
}
.slayt-alt {
  margin: 0 0 var(--bosluk-2);
  color: var(--murekkep-2); background-color: var(--kagit);
}
/* MOBİLDE alt metin ve etiket GİZLENİR (silinmez -- ekran okuyucu okur):
   390px'te bir fotoğrafın üzerine dört öğeli blok bindirmek fotoğrafı yer.
   Aynı kural `.kahraman-fotografli`de de var. */
@media (max-width: 47.99rem) {
  .slayt-etiket, .slayt-alt { display: none; }
}

/* NOKTALAR OPAK BİR HAPTA: fotoğrafın üzerinde çıplak nokta, kontrastı
   ölçülemeyen bir öğedir (perdeyle aynı gerekçe). */
.slayt-noktalar {
  position: absolute; inset-inline: 0; bottom: var(--bosluk-2);
  display: flex; justify-content: center;
  pointer-events: none;
}
.slayt-noktalar a {
  width: var(--dokunma); height: var(--dokunma);
  display: grid; place-items: center;
  pointer-events: auto;
}
.slayt-noktalar a::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background-color: var(--kagit);
  box-shadow: 0 0 0 1px var(--murekkep-2);
}
.slayt-noktalar a:hover::before,
.slayt-noktalar a:focus-visible::before { background-color: var(--murekkep); }
/* MOBILDE NOKTALAR PANELIN ALTINA INER (7 Eylul, CANLIDA GORULDU).
   Masaustunde panel ortada duruyor ve noktalar fotografin alt kenarinda
   rahatca gorunuyor. MOBILDE panel fotografin ALT kenarina oturuyor, yani
   mutlak konumlu noktalar OPAK PANELIN ARKASINDA kaliyor: uc slayt vardi ve
   ekranda kaydirilabildigine dair HICBIR ISARET yoktu.
   Cozum akisa donmek: noktalar seridin ALTINDA, beyaz zeminde durur.
   Gizlemek secenek degildi -- "kaydirilabilir" sinyali 17 Agustos'ta urun
   seridinde tam bu sebeple eklenmisti. */
@media (max-width: 47.99rem) {
  .slayt-noktalar {
    position: static;
    padding-block: var(--bosluk-1);
    background-color: var(--kagit);
  }
  /* Beyaz zeminde beyaz nokta gorunmez: mobilde dolgu notr kenar rengi. */
  .slayt-noktalar a::before { background-color: var(--kenar); }
  .slayt-noktalar a:hover::before,
  .slayt-noktalar a:focus-visible::before { background-color: var(--murekkep); }
}
.slayt-serit:focus-visible { outline: 2px solid var(--kina); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .slayt-serit { scroll-behavior: auto; }
}

/* Bant (kategori/koleksiyon) kahramandan BİR KADEME alçaktır: sayfanın
   başlığı zaten yukarıda, bant ürün ızgarasını aşağı itmemeli. */
.slayt-bant {
  --slayt-oran-mobil: 3 / 2;
  --slayt-oran-masaustu: 32 / 9;
  --slayt-oran-genis: 40 / 9;
}

/* --- ödeme yöntemleri bandı (7 Eylül, iyzico kriteri) ---------------------
 * Bant 429x32 sabit ölçüde bir SVG. Dar ekranda taşmasın diye `max-width`
 * ile küçülür ve `height: auto` oranı korur — sunum özniteliği tuzağı
 * (`width`/`height` HTML'de yazılı, CLS için gerekli) tam burada ısırırdı. */
.dip-odeme {
  padding: var(--bosluk-2) 0 0;
  border-top: 1px solid var(--kenar);
  margin-top: var(--bosluk-2);
}
.dip-odeme-bant {
  display: block;
  width: 429px;
  max-width: 100%;
  height: auto;
}


/* =========================================================================
   TAM SATIR IZGARA (26 Eylul, feyz: "masaustunde de mobilde de hicbir alan
   tekli olarak kalmamali -- 5 urun varsa 4'u gorunsun, 5. icin kucuk bir
   'diger cesitleri gor' butonu olsun, tiklaninca asagi dogru acilsin").
   -------------------------------------------------------------------------
   OLCULDU (canli, 26 Eylul): 390px'te her tek sayili kategoride en altta
   TEK BASINA bir urun (Kolye 5 -> 2/2/1, Set 9 -> 2/2/2/2/1, Abiye 15 ->
   .../1), kategori karolari 3/3/1 ("Kemer" tek basina); 1440px'te Set
   5/4, urun sayfasinda benzerler 5/5/4.

   NASIL: kolon sayisi her genislikte BELLI (2/3/4/5, bkz. `.urun-izgara`).
   Eksik son satirin ilk ogesi SAF CSS ile bulunur:
       :nth-child(Cn + C+1):nth-last-child(-n + C-1)
   ("C'nin katindan sonraki ilk oge VE son C-1 oge icinde" = yalniz son
   satir EKSIKSE eslesir; son satir tamsa -n+C-1 onu disarida birakir;
   tek ve eksik bir satirda C+1'den baslamasi hepsini gizlemesini onler).
   O oge ve ardindakiler gizlenir, `.tam-satir-dugme` gorunur olur (`:has`).
   Ilk boyamada kayma YOK -- karar sunucuda ya da JS'te degil CSS'te.

   JS'SIZ ICERIK KAYBOLMAZ: gizleme `html.js` kosuluna bagli. `js` sinifini
   <head>'deki tek satirlik betik koyar; betik calismazsa her sey gorunur
   kalir (dugme de gizli kalir, cunku onu da ayni kosul acar).

   Secici bloklari araclar'daki bir ureticiyle yazildi (elle yazilan 60
   secicide tek bir sayi hatasi bir urunu sessizce yok ederdi); kapi:
   test_suslupuslu_tam_satir.py.
   ========================================================================= */
.tam-satir-dugme {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: min(100% - 2 * var(--kenar-payi), 20rem);
  min-height: var(--dokunma);
  margin: var(--bosluk-3) auto 0;
  padding: 0 var(--bosluk-3);
  border: 1px solid var(--murekkep);
  border-radius: var(--yaricap);
  font-family: var(--govde);
  font-size: .95rem;
  font-weight: 600;
  color: var(--murekkep);
  background-color: var(--yuzey);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.tam-satir-dugme::after {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--gecis-sure) 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(--yuzey); background-color: var(--murekkep); }
.tam-satir-dugme:focus-visible { outline: 2px solid var(--kina); outline-offset: 2px; }
/* Acilan kartlar yumusakca belirir -- yalniz opacity + transform (doktrin §3). */
@keyframes tam-satir-belir { from { opacity: 0; transform: translateY(.75rem); } }
.ts-yeni { animation: tam-satir-belir .4s var(--gecis-yay) both; }
@media (prefers-reduced-motion: reduce) {
  .ts-yeni { animation: none; }
  .tam-satir-dugme, .tam-satir-dugme::after { transition: none; }
}

/* genel (kategori/koleksiyon/arama/yeni gelenler): yalniz EKSIK SON SATIR */
@media (max-width: 47.99rem) {
  html.js .tam-satir:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1),
  html.js .tam-satir:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1) ~ * { display: none; }
  html.js .tam-satir:has(> .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1)) > .tam-satir-dugme { display: flex; }
}

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

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

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

/* ana sayfa tur bolumleri: satir SINIRI + eksik satir */
@media (max-width: 47.99rem) {
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(n+5),
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1),
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1) ~ * { display: none; }
  html.js .tam-satir-tur:has(> .urun-izgara > :nth-child(n+5)) > .tam-satir-dugme,
  html.js .tam-satir-tur:has(> .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1)) > .tam-satir-dugme { display: flex; }
}

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

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

/* urun sayfasi benzerleri: iki satir + eksik satir */
@media (max-width: 47.99rem) {
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(n+5),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1) ~ * { display: none; }
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(n+5)) > .tam-satir-dugme,
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1)) > .tam-satir-dugme { display: flex; }
}

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

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

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

/* kategori karolari: yalniz mobilde (masaustunde tek satir serit) */
@media (max-width: 47.99rem) {
  html.js .tam-satir-karo:not(.acik) > .karo-izgara > :nth-child(3n+4):nth-last-child(-n+2),
  html.js .tam-satir-karo:not(.acik) > .karo-izgara > :nth-child(3n+4):nth-last-child(-n+2) ~ * { display: none; }
  html.js .tam-satir-karo:has(> .karo-izgara > :nth-child(3n+4):nth-last-child(-n+2)) > .tam-satir-dugme { display: flex; }
}


/* TEK VE EKSIK SATIR ORTALANIR (kategori/koleksiyon/arama): kolon
   sayisindan AZ urun varsa kartlar sola yapisik durup sagda bos hucre
   birakmaz; ayni kart genisligiyle ortaya alinir. */
@media (max-width: 47.99rem) {
  .tam-satir-orta > .urun-izgara:not(:has(> :nth-child(2))) {
    grid-template-columns: repeat(auto-fit, calc((100% - 1 * var(--ic-pay)) / 2));
    justify-content: center;
  }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .tam-satir-orta > .urun-izgara:not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(auto-fit, calc((100% - 2 * var(--ic-pay)) / 3));
    justify-content: center;
  }
}
@media (min-width: 62rem) and (max-width: 85.99rem) {
  .tam-satir-orta > .urun-izgara:not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(auto-fit, calc((100% - 3 * var(--ic-pay)) / 4));
    justify-content: center;
  }
}
@media (min-width: 86rem) {
  .tam-satir-orta > .urun-izgara:not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(auto-fit, calc((100% - 4 * var(--ic-pay)) / 5));
    justify-content: center;
  }
}

/* =========================================================================
   YUMUSAK + RENKLI TEMA (26 Eylul, feyz: "tasarim bence cok keskin. kucuk
   oranda koseleri yuvarlak hale getirelim. suslupuslu marka algisina daha
   yakisan hatlari kullanalim. biraz da renklendirelim.")
   -------------------------------------------------------------------------
   REVIZYON: SEKILLENDIR (yaricap/yuzey) + RENKLENDIR.
     DEGISEN : kose yaricaplari, vurgu rengi, pastel yuzeyler, sus renkleri.
     DEGISMEYEN: yerlesim, bosluk olcegi (referansin 10/20/50), tipografi,
                 izgara/tam satir kurallari.
   RENKLER UYDURULMADI: logonun (genel/marka/logo.png) harf renklerinden
   ornekleyerek alindi -- pembe, turuncu, sari, mor, turkuaz, lacivert.
   Metin YALNIZ koyu murekkep ya da AA kontrastli vurgu uzerinde durur;
   pastel yuzeyler metin rengi degil ZEMINDIR.
   Karar ve varyantlar: marka yonu belgesi §16.
   ========================================================================= */
:root {
  /* kose olcegi */
  --k-kucuk: 10px;   /* dugme, alan */
  --k-orta:  14px;   /* urun fotografi, karo, kucuk kutu */
  --k-buyuk: 20px;   /* banner, panel, bolum karti */

  /* logo renkleri (sus -- metin icin DEGIL) */
  --logo-pembe:    #e0115f;
  --logo-turuncu:  #f15a0c;
  --logo-sari:     #f2b10a;
  --logo-mor:      #6a1fd0;
  --logo-turkuaz:  #0891b2;
  --logo-lacivert: #1e3a9f;

  /* tema rolleri -- SECILEN VARYANT B "Kina + Gokkusagi" (feyz, 26 Eylul;
     A "Pembe Isilti" ve C "Mor Masal" gosterildi, secilmedi). Vurgu markanin
     mevcut kinasi; renk logonun gokkusagindan SUS olarak gelir. */
  --vurgu:          #8e2f4a;   /* = --kina; beyaz metin 8,9:1 */
  --vurgu-koyu:     #6f2239;
  --vurgu-yumusak:  #f6e9ed;
  --zemin-a:        #f1f7fb;   /* guven bandi -- buz mavisi */
  --zemin-b:        #f6f1fd;   /* kunye karti -- lavanta */
  --sus-1: var(--logo-turkuaz);
  --sus-2: var(--logo-sari);
  --sus-3: var(--logo-pembe);
  --sus-4: var(--logo-mor);
}

/* --- dugmeler: yumusak kose, birincil = vurgu ----------------------------- */
.dugme { border-radius: var(--k-kucuk); border-color: var(--vurgu); color: var(--yuzey); background-color: var(--vurgu); }
.dugme:hover { border-color: var(--vurgu-koyu); color: var(--yuzey); background-color: var(--vurgu-koyu); }
.dugme-ikincil { color: var(--vurgu); background-color: var(--yuzey); }
.dugme-ikincil:hover { color: var(--yuzey); background-color: var(--vurgu); }
body .dugme-altin { border-color: var(--vurgu); color: var(--yuzey); background-color: var(--vurgu); }
body .dugme-altin:hover { border-color: var(--vurgu-koyu); color: var(--yuzey); background-color: var(--vurgu-koyu); }
body .dugme-hatli { border-radius: var(--k-kucuk); border-color: var(--vurgu); color: var(--vurgu); background-color: var(--yuzey); }
.tam-satir-dugme { border-radius: 999px; border-color: var(--vurgu); color: var(--vurgu); background-color: var(--yuzey); }
.tam-satir-dugme:hover,
.tam-satir-dugme:focus-visible { color: var(--yuzey); background-color: var(--vurgu); }

/* --- cipler ve sekmeler: hap ---------------------------------------------- */
.cip { border-radius: 999px; }
.cip:hover { border-color: var(--vurgu); }
.cip[aria-current="page"] { color: var(--yuzey); background-color: var(--vurgu); border-color: var(--vurgu); }
body .sekme { border-radius: 999px; }
body .sekme[aria-selected="true"] { border-color: var(--vurgu); color: var(--vurgu); background-color: var(--vurgu-yumusak); box-shadow: none; }

/* --- alanlar -------------------------------------------------------------- */
body .ust-arama, body .ust-arama-alan, .cekmece-arama, .cekmece-arama-alan { border-radius: var(--k-kucuk); }

/* --- fotograflar ve karolar ----------------------------------------------- */
.kart-foto, .gorsel-yer, body .karo-gorsel, body .karo-yer { border-radius: var(--k-orta); }
.kart-gorsel { border-radius: var(--k-orta); }
body .banner { border-radius: var(--k-buyuk); overflow: hidden; }

/* --- slayt paneli: masaustunde yuzen yumusak kart ------------------------- */
@media (min-width: 48rem) {
  .slayt-yazi { border-radius: var(--k-buyuk); box-shadow: 0 14px 40px -18px rgba(36, 23, 15, .45); }
}
.slayt-etiket { color: var(--vurgu); background-color: var(--kagit); }

/* --- bolum basliklari: logonun renkleriyle ince bir sus cizgisi ----------- */
.bolum-basi h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 4px;
  margin-top: .45rem;
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--sus-1), var(--sus-2), var(--sus-3));
}
.bolum-basi a { color: var(--vurgu); background-color: var(--kagit); }
/* Tum bolum basliklari AYNI agirlikta: "Olusa gore" tur bolumlerinden ince kaliyordu (ayni sayfada iki baslik dili). */
body .bolum-basi h2 { font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.75rem); letter-spacing: -.015em; }

/* --- ust duyuru seridi: pastel ------------------------------------------- */
.esik-serit { color: var(--murekkep); background-color: var(--vurgu-yumusak); }

/* --- guven bandi: kenardan iceri, yuvarlak, renkli simgeler -------------- */
.guven {
  margin: var(--bosluk-3) var(--dis-pay);
  border-radius: var(--k-buyuk);
  background-color: var(--zemin-a);
}
.guven-ad, .guven-not, .guven-not strong { background-color: var(--zemin-a); }
.guven > div > .guven-simge,
.guven > div > svg:first-child {
  box-sizing: content-box;
  padding: .55rem;
  border-radius: 50%;
  background-color: var(--yuzey);
}
.guven > div:nth-child(4n+1) .guven-simge { color: var(--sus-1); }
.guven > div:nth-child(4n+2) .guven-simge { color: var(--sus-2); }
.guven > div:nth-child(4n+3) .guven-simge { color: var(--sus-3); }
.guven > div:nth-child(4n+4) .guven-simge { color: var(--sus-4); }
/* Telefonda TEK sutun: iki dar sutunda (simge dairesi + kenar payi ile) metin satir basi 3-4 kelimeye iniyordu. */
@media (max-width: 47.99rem) { .guven { grid-template-columns: 1fr; } }

/* --- kunye soz karti: pastel, yuvarlak ----------------------------------- */
body .kunye-fark {
  margin: var(--bosluk-3) var(--dis-pay);
  border-top: 0;
  border-radius: var(--k-buyuk);
  background-color: var(--zemin-b);
}
body .kunye-fark h2, body .kunye-fark p { background-color: var(--zemin-b); }
body .kunye-ornek { border: 1px dashed var(--vurgu); border-radius: 999px; color: var(--murekkep); background-color: var(--yuzey); }

/* --- alt bilgi: ustunde logonun renk seridi ------------------------------- */
body footer { border-top: 0; background-image: linear-gradient(90deg, var(--logo-pembe), var(--logo-turuncu), var(--logo-sari), var(--logo-turkuaz), var(--logo-mor), var(--logo-lacivert)); background-size: 100% 4px; background-repeat: no-repeat; }

/* --- kucuk rozetler ------------------------------------------------------- */
.rozet { border-radius: 999px; }

/* --- urun sayfasi, kategori/koleksiyon basliklari ------------------------- */
.urun-foto { border-radius: var(--k-orta); }
.urun-serit li { border-radius: var(--k-orta); overflow: hidden; }
body .banner-yazi { border-radius: var(--k-orta); }
/* Baslik gorseli ucdan uca ve keskindi; banner'larla ayni dile gecer:
   sayfa kenarindan iceri, yuvarlak. */
body .kategori-bas, body .koleksiyon-bas { margin-inline: var(--dis-pay); border-radius: var(--k-buyuk); }
body .kategori-bas:has(.kategori-foto) .kategori-bas-yazi { border-radius: var(--k-orta); }
body .seti-tamamla h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 4px;
  margin-top: .45rem;
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--sus-1), var(--sus-2), var(--sus-3));
}