/* ============================================================
   MANDALİNA TASARIM DİLİ
   Katman 1: token'lar   Katman 2: düzen ilkelleri

   Kural: bu dosyada marka rengi YOK. Palet `[data-palet]`
   kapsamından gelir, dilin kendisi renkten bağımsızdır.
   Tek palet: carsi (2026-10-29). Eski paletler (turuncu, harita,
   defter) yalnız git geçmişinde.
   ============================================================ */

/* ---------- ölçekler: paletten bağımsız ---------- */
:root{
  /* tip — 24 ayrı boydan 9 basamağa indirildi */
  --t1: 10px;    /* rozet, kurdele, sayaç        (9 · 9.5 · 10 · 10.5) */
  --t2: 11px;    /* mikro etiket                                      */
  --t3: 12px;    /* ikincil metin, yardımcı satır (11.5 · 12)         */
  --t4: 13px;    /* kart metni, menü satırı       (12.5 · 13)         */
  --t5: 14px;    /* gövde — kök boy               (13.5 · 14)         */
  --t6: 16px;    /* vurgu, fiyat                  (15 · 16 · 16.5 · 17) */
  --t7: 20px;    /* bölüm başlığı                 (18 · 19 · 20 · 21) */
  --t8: 25px;    /* sayfa başlığı                 (23 · 24 · 25)      */
  --t9: clamp(30px, 6vw, 38px);   /* banner, kahraman */

  /* kalınlık — projede 400/500 neredeyse hiç kullanılmıyor, üç basamak yeter */
  --k-orta: 600;
  --k-kalin: 700;
  --k-agir: 800;

  /* boşluk — 36 ayrı değerden 12 basamağa.
     4px tabanı bu yoğunluktaki pazaryeri arayüzü için fazla kaba;
     2px tabanı mevcut kullanımın büyük kısmını kaydırmadan karşılıyor. */
  --u1: 2px;   --u2: 4px;   --u3: 6px;   --u4: 8px;
  --u5: 10px;  --u6: 12px;  --u7: 16px;  --u8: 20px;
  --u9: 24px;  --u10: 32px; --u11: 40px; --u12: 56px;

  /* yarıçap — zaten disiplinliydi, korunuyor */
  --r:  6px;
  --r2: 10px;
  --r3: 16px;
  --r-tam: 999px;   /* çip/rozet — 20px, 50% ve 11px hep bunu kastediyordu */

  /* hareket */
  --hiz: 160ms;
  --hiz-yavas: 320ms;
  --egri: cubic-bezier(.2,.7,.3,1);

  /* nötr yüzeyler — palete göre değişmez */
  --zemin:  #FFFFFF;
  --sayfa:  #F3F3F6;
  --panel:  #F8F8FA;
  --hat:    #E7E7EC;
  --hat2:   #D4D4DC;

  --metin:  #17171A;
  --metin2: #56565F;
  --metin3: #8A8A94;

  /* rol token'ları — 29 ham #fff ve 18 ham rgba() bunun yokluğundandı */
  --uzeri:  #FFFFFF;                  /* marka yüzeyi üstündeki metin */
  --perde:  rgba(23,23,26,.42);
  --perde-koyu: rgba(23,23,26,.55);

  /* durum renkleri — palete bağlı DEĞİL, bilerek.
     Maviye çekmek indirim ile kargoyu renkten ayırt edilemez yapar. */
  --kirmizi:      #E81C24;   --kirmizi-acik: #FDECEC;
  --yesil:        #17803D;   --yesil-acik:   #E9F6ED;
  --sari:         #FFC100;   /* Trendyol yildiz tonu */
  --uyari:        #8A5B00;   --uyari-acik:   #FFF4DB;

  /* FİYAT ROLLERİ — marka rengi fiyata GİRMEZ. Fiyatı markadan ayırmak
     indirim/marka karışmasını kökünden çözüyor. Harita paleti bu
     değerleri kendi bloğunda ezer (mürekkep / mercan koyusu). */
  --fiyat:     #333333;      /* normal fiyat */
  --fiyat-ind: #BB0000;      /* indirimli fiyat + indirim rozeti zemini */
  --kupon:     #D6336C;      /* kupon damgası zemini — beyaz metinle 4.6:1 */

  --golge:   0 1px 2px rgba(20,20,30,.06);
  --golge-2: 0 4px 16px rgba(20,20,30,.10);

  /* KABUK — ust bar + kategori navi. Varsayilan beyaz; koyu kabuk
     isteyen palet bu satirlari kendi blogunda ezer. */
  --kabuk:        var(--zemin);
  --kabuk-2:      var(--zemin);
  --kabuk-hat:    var(--hat);
  --kabuk-metin:  var(--metin);
  --kabuk-metin-2:var(--metin2);
  --cta-hover:    var(--mnd-koyu);
}

/* ============================================================
   PALETLER
   Marka rengi yalnızca burada yaşar. Yeni sürüm = yeni blok.
   ============================================================ */

/* ------------------------------------------------------------
   ÇARŞI (2026-10-29, Ahmet seçti — taslak A).
   Tanıdık pazaryeri düzeni, kendi kimliği: turuncu YALNIZ üst bant ve
   vurgu (CTA, seçili sekme); indirim kırmızı, kampanya/kargo/"sepette"
   yaprak yeşili. Figtree, yumuşak köşe, büyük harf yok. Yapısal
   kurallar css/carsi.css'te; renk/ölçü yalnız burada.
   Kontrast (beyaz zemin): metin 17:1, metin2 7:1, metin3 5,3:1,
   turuncu-koyu 5,3:1, indirim 5,7:1, yaprak 8,6:1, logo 3,6:1 (büyük yazı).
   ------------------------------------------------------------ */
[data-palet="carsi"]{
  --turuncu:      #F9934A;   /* süs: seçim, daire halkası, hover çizgisi — metin rengi değil (beyazda 2,3:1) */
  --logo:         #E35D0B;   /* beyaz üst bantta logo (26 px kalın, 3,6:1); 29 Eki Ahmet: turuncu bant yerine beyaz bant + turuncu logo */
  --turuncu-koyu: #B8470A;   /* beyazda CTA / bağlantı / seçili çizgi */
  --yaprak:       #1F5631;   /* fırsat bandı, kargo bedava, sepette fiyat */
  --yaprak-acik:  #E6F0E8;
  --mandalina:    var(--turuncu-koyu);
  --karbon:       var(--yaprak);
  --karbon-acik:  var(--yaprak-acik);
  --karbon-cizgi: rgba(31,86,49,.28);

  --mnd:       #1B1B1B;      /* krom: ikon, seçili durum — mürekkep */
  --mnd-metin: #1B1B1B;
  --mnd-koyu:  #000000;
  --mnd-acik:  #FFF4EC;
  --vurgu:     var(--turuncu-koyu);
  --bilgi:     #1B1B1B;  --bilgi-koyu:#000000;  --bilgi-acik:#F4F4F1;
  --mavi:      var(--bilgi);
  --cta-zemin: var(--turuncu-koyu);  --cta-metin: #FFFFFF;
  --cta-hover: #963A08;
  --serit-1: var(--yaprak); --serit-2: var(--yaprak); --serit-3: var(--yaprak);

  --zemin:  #FFFFFF;
  --sayfa:  #F4F4F1;
  --panel:  #F1EEE9;
  --hat:    #E2E2DD;
  --hat2:   #BDBDB6;
  --metin:  #1B1B1B;
  --metin2: #55575C;
  --metin3: #66686D;
  --uzeri:  #FFFFFF;
  --perde:  rgba(27,27,27,.45);
  --perde-koyu: rgba(27,27,27,.6);

  --fiyat:     #1B1B1B;
  --fiyat-ind: #C0311A;
  --kupon:     #FFFFFF;
  --kirmizi:   #B42318;   --kirmizi-acik: #FCEBEA;
  --yesil:     var(--yaprak);  --yesil-acik: var(--yaprak-acik);
  --onay:      var(--yaprak);
  --sari:      #E39B00;
  --uyari:     #8A5B00;   --uyari-acik: #FFF4DB;

  --r:  6px;
  --r2: 10px;
  --r3: 10px;
  --r-tam: 999px;
  --cizgi: 1px;
  --delik: 0px;

  --golge:   0 1px 3px rgba(0,0,0,.08);
  --golge-2: 0 8px 24px rgba(0,0,0,.14);
  --hiz:     160ms;
  --egri:    cubic-bezier(.2,.7,.3,1);

  --yazi:     'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --yazi-dar: var(--yazi);
  --buyuk-harf: none;
  --dar-aralik: 0;
  --cerceve:  var(--hat);       /* kap çerçevesi: defterde mürekkep, çarşıda açık gri */
  --cerceve-kesik: var(--hat2);
  --odak:     #0B57D0;   /* odak halkası: turuncu bant ve beyaz zeminde ≥3:1 */

  --ok-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 12h14M12 6l6 6-6 6'/%3E%3C/svg%3E");
  --yirtik: linear-gradient(var(--hat), var(--hat));

  --sl-teknoloji:#7C7E84; --sl-ev:#8A7F72; --sl-ayakkabi:#66686D; --sl-kadin:#8F8580;
  --sl-erkek:#6E7177; --sl-ahsap:#8A7A62; --sl-arac:#7A7A6E;
}

/* ============================================================
   KATMAN 2 — DÜZEN İLKELLERİ

   Amaç: min-width:0 / flex-basis / kırpma kurallarını TEK yerde
   tutmak. Projede bu kalıp 49 ayrı sınıfta 17 farklı gap değeriyle
   tekrarlanıyordu ve her unutulan `min-width:0` bir kırık üretti.

   Global `*{min-width:0}` bilerek KULLANILMIYOR: denendi, PDP'de
   320px'te sayfayı 4px yatay kaydırdı (scrollX 0 → 4).
   ============================================================ */

/* --- .sat : sabit baş · esnek orta · sabit son ---
   .ara-sat, .ara-urun, .sp-kalem, .hs-sat, .sk, .magaza — altısı da bu. */
.sat{
  display:flex; align-items:center; gap:var(--sat-aralik, var(--u5));
  min-width:0;
}
.sat > *{ min-width:0; }
.sat > .sat-bas,
.sat > .sat-son{ flex:0 0 auto; }
.sat > .sat-orta{ flex:1 1 auto; min-width:0; }
.sat-s{ --sat-aralik: var(--u3); }
.sat-l{ --sat-aralik: var(--u7); }
/* üste hizalı varyant — çok satırlı gövdelerde ikon yukarıda kalsın */
.sat-ust{ align-items:flex-start; }

/* --- .yig : dikey akış --- */
.yig{ display:flex; flex-direction:column; gap:var(--yig-aralik, var(--u4)); min-width:0; }
.yig > *{ min-width:0; }
.yig-s{ --yig-aralik: var(--u1); }
.yig-l{ --yig-aralik: var(--u7); }

/* --- .kume : sarmalı yatay --- */
.kume{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--kume-aralik, var(--u3)); min-width:0; }
.kume > *{ min-width:0; }
.kume-s{ --kume-aralik: var(--u1); }
.kume-l{ --kume-aralik: var(--u5); }
/* iki ucu ayıran başlık satırı */
.kume-ayir{ justify-content:space-between; flex-wrap:nowrap; }

/* --- .izgara : auto-fill ızgara ---
   `.guven` ve `.banner-kutu` kaymaları hücre min-width:auto'sundandı. */
.izgara{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--izgara-min, 150px), 1fr));
  gap:var(--izgara-aralik, var(--u4));
}
.izgara > *{ min-width:0; }
.izgara-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.izgara-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

/* --- .ray : yatay kaydırıcı ---
   Çubuk gizli, zincirleme kaydırma kapalı, parmakla kaydırma kilitli. */
.ray{
  display:flex; gap:var(--ray-aralik, var(--u3));
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ray::-webkit-scrollbar{ display:none; }
.ray > *{ flex:0 0 auto; }

/* --- kırpma --- */
.kirp{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kirp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* uzun kod/SKU/e-posta satırları kabı patlatmasın */
.sar{ overflow-wrap:anywhere; }

/* --- görsel kutusu: oran genişlikten gelsin ---
   `aspect-ratio`'yu açık width+height ezdiği için oran hiç uygulanmıyordu. */
.oran{ width:100%; aspect-ratio:var(--oran, 3/4); overflow:hidden; background:var(--panel); }
.oran > img{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- yapışkan kolon ---
   sticky ızgara kolonunun KENDİSİNE verilirse align-items:start
   yüzünden satır sınırını aşıyor. Sarmalayıcıya verilir. */
.yapiskan-kolon{ align-self:stretch; }
.yapiskan-kolon > .yapiskan{ position:sticky; top:var(--yapiskan-ust, var(--u7)); }

/* --- .kupon-yirt : yırtma çizgisi + iki yanda çentik ---
   Kuponun iki parçası arasındaki sınır. Çentik zemin renginde yarım
   daire, çizgiyi taşıyan kabın kenarına oturur. */
.kupon-yirt{ position:relative; height:var(--cizgi, 1.5px); margin:0; border:0; background:var(--yirtik); overflow:visible; }
/* çentik kabın İÇİNDE yarım daire: dışa taşan kutu sayfayı yatay kaydırıyordu */
.kupon-yirt::before, .kupon-yirt::after{
  content:""; position:absolute; top:50%; width:var(--delik); height:calc(var(--delik) * 2);
  background:var(--sayfa); box-shadow:inset 0 0 0 1px var(--hat);
  transform:translateY(-50%);
}
.kupon-yirt::before{ left:0; border-radius:0 var(--delik) var(--delik) 0; }
.kupon-yirt::after{ right:0; border-radius:var(--delik) 0 0 var(--delik); }

/* --- .damga : durum mühürü, bir kez basılır --- */
.damga{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 4px; border:2px solid currentColor; border-radius:var(--r);
  font-family:var(--yazi-dar); font-size:var(--t5); font-weight:700; line-height:1;
  letter-spacing:var(--dar-aralik, .08em); text-transform:var(--buyuk-harf, uppercase); color:var(--mandalina);
  transform:rotate(-3deg);
}
.damga-bas{ animation:damgaBas 260ms var(--egri) both; }
@keyframes damgaBas{ from{ opacity:0; transform:rotate(-3deg) scale(1.45); } }

/* --- erişilebilir dokunma hedefi ---
   Denetimde 40px altı 55 eleman bulunmuştu. Görsel boyutu büyütmeden
   tıklama alanını büyütür. */
.hedef{ position:relative; }
.hedef::after{
  content:""; position:absolute; top:50%; left:50%;
  width:max(100%, 44px); height:max(100%, 44px);
  transform:translate(-50%,-50%);
}

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