/* ekareklam.tr — ortak ön yüz stili. Anasayfanın onaylı tasarım diliyle
   (navbar/footer/animasyon) BİREBİR aynı — tüm site tek bir görsel dil
   kullanır, sayfalar arası gezinirken header/footer değişmez. */

/* Inter fontu artık Google Fonts'tan değil kendi sunucumuzdan sunuluyor —
   fonts.googleapis.com/fonts.gstatic.com'a ekstra DNS/SSL turu gerekmiyor.
   Değişken (variable) font dosyaları: tek dosya 400-700 arası tüm ağırlıkları kapsar. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  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;
}

.eka-copy-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:100px;border:1px solid #fde68a;background:#fffbeb;color:#a16207;cursor:pointer;transition:background .15s,border-color .15s}
.eka-copy-btn:hover{background:#fef3c7;border-color:#fcd34d}
.eka-copy-btn i{font-size:.95rem}

:root{
  --bg-dark:#050507; --bg-light:#fbfbfd; --text-dark:#0b0d12; --text-muted:#6b7280;
  --white:#fff;
  --border-light:rgba(0,0,0,.07); --ease:cubic-bezier(.16,1,.3,1);

  --eka2-ink:#1c2126; --eka2-muted:#6b7280; --eka2-line:#e7e9ec;
  --eka2-orange:#f2600c; --eka2-orange-2:#ff7a1f; --eka2-blue:#1f4fd8;

  /* 2026-09-26 — site genelinde eski mavi/mor vurgu (--accent/--accent-2/--accent-3)
     kaldırıldı, tüm sayfalar taşındığı için artık kurumsal turuncu paletle
     eşleniyor. Bu üç token'ı hâlâ kullanan onlarca kural (ikon buton hover,
     linkler, form odak halkası, üst gradyan çizgisi vb.) markup değişmeden
     otomatik yeni renge geçsin diye tokenlar SİLİNMEDİ, sadece değerleri
     değiştirildi. */
  --accent:var(--eka2-orange); --accent-2:var(--eka2-orange-2); --accent-3:#ffb43a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg-light);color:var(--text-dark);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
table{max-width:100%}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 4vw}

/* iOS'ta 16px altı font-size'lı input'a odaklanınca sayfa otomatik zoom yapıyor —
   site genelinde TÜM form elemanlarında bunu engelle (viewport genişliğinden bağımsız). */
input,textarea,select{font-size:16px}

/* ---------- Üst duyuru şeridi (premium/sade — koyu zemin, renk sadece ikon/nokta vurgusu) ---------- */
.announce-bar{position:relative;text-align:center;padding:9px 16px;font-size:.8rem;font-weight:500;
  letter-spacing:-.005em;min-height:36px;overflow:hidden;background:#0b0d12;color:rgba(255,255,255,.92)}
.announce-item{display:none;align-items:center;justify-content:center;gap:8px;animation:announceIn .4s ease}
.announce-item.is-active{display:flex}
.announce-item i{font-size:.95rem;color:var(--ann-c,#fff)}
.announce-item a,.announce-item span{color:inherit}
.announce-item a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32);
  padding-bottom:1px;transition:border-color .2s}
.announce-item a:hover{border-color:rgba(255,255,255,.85)}
.ann-dark{--ann-c:#fff}
.ann-accent{--ann-c:#60a5fa}
.ann-purple{--ann-c:#c4b5fd}
.ann-green{--ann-c:#4ade80}
.ann-orange{--ann-c:#fbbf24}
@keyframes announceIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Scrollbar (site geneli, tarayıcı varsayılanı yerine ince/marka uyumlu) ---------- */
html{scrollbar-width:thin;scrollbar-color:rgba(11,13,18,.22) transparent;scrollbar-gutter:stable}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(11,13,18,.18);border-radius:99px;border:2px solid var(--bg-light);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(11,13,18,.32);background-clip:padding-box}

/* ---------- Scroll progress (site geneli) ---------- */
.progress-bar{position:fixed;top:0;left:0;height:2px;width:0%;z-index:2000;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  box-shadow:0 0 12px rgba(242,96,12,.7)}

/* ---------- Navbar ---------- */
/* Üst yardımcı şerit — duyuru şeridi ile ana header arasında ince gri bant */
.utilbar{background:#f7f8fa;border-bottom:1px solid var(--eka2-line);font-size:.82rem}
.utilbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.utilbar-links{display:flex;gap:22px;flex-wrap:wrap}
.utilbar a{color:var(--eka2-ink);transition:color .2s}
.utilbar a:hover{color:var(--eka2-orange)}
.utilbar-contact{display:flex;gap:18px;align-items:center;color:var(--eka2-muted)}
.utilbar-contact a{display:flex;align-items:center;gap:7px;color:var(--eka2-ink)}
.utilbar-contact i{font-size:1rem;color:var(--eka2-muted)}
@media (max-width:768px){
  .utilbar{display:none}
}

/* NOT (2026-09-25, Faz H3): navbar artık İKİ SATIR içeriyor (üst sıra:
   logo/arama/aksiyonlar, alt sıra: kategori çipleri). Bu yüzden .navbar'ın
   kendisi flex/sabit-yükseklik DEĞİL — yükseklik ve dikey ortalama üst
   sıranın (.nav-inner) kendi üzerinde. */
.navbar{position:sticky;top:0;left:0;width:100%;z-index:1000;display:block;
  background:rgba(255,255,255,.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,.07);
  transition:background .4s ease,box-shadow .4s ease}
.navbar.scrolled{background:rgba(255,255,255,.96);box-shadow:0 6px 24px rgba(11,13,18,.06)}
/* gap, justify-content:space-between ile birlikte bir ALT SINIR (minimum
   boşluk) olarak çalışır — konteyner ne kadar dar olursa olsun (farklı
   Windows ekran çözünürlükleri/ölçeklendirme gibi) logo/arama/ikonlar asla
   birbirine bu değerden daha yakın olamaz; dar kaldığında arama kutusu
   kendi flex-shrink'i ile daralır (2026-09-27). */
.nav-inner{display:flex;justify-content:space-between;align-items:center;width:100%;gap:24px;
  height:82px;transition:height .4s var(--ease)}
.navbar.scrolled .nav-inner{height:68px}
.logo{font-size:1.28rem;font-weight:700;letter-spacing:-.03em;display:flex;align-items:center;gap:9px;color:var(--text-dark);white-space:nowrap;flex:none}
.logo-img{height:34px;width:auto;display:block}
.logo-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);position:relative}
.logo-dot::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:rgba(242,96,12,.55);animation:ekaPing 2.4s infinite;will-change:transform,opacity}
@keyframes ekaPing{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(3.6);opacity:0}
  100%{transform:scale(3.6);opacity:0}
}
.nav-actions{display:flex;gap:26px;align-items:center}
.icon-btn{background:none;border:none;font-size:1.2rem;color:var(--text-dark);cursor:pointer;position:relative;
  text-decoration:none;display:inline-flex;transition:transform .3s var(--ease),color .25s;outline:none}
.icon-btn:hover{color:var(--accent);transform:translateY(-2px) scale(1.1)}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:50%}
button{outline:none}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.badge{position:absolute;top:-5px;right:-7px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:700;
  width:17px;height:17px;display:flex;align-items:center;justify-content:center;border-radius:50%}

/* ---------- Mobil arama — sadece büyüteç ikonu, tıklayınca arka planı
   bulanıklaştıran (blur) tam genişlik bir arama çubuğu açılır (2026-09-27).
   Aynı #ekaHeaderSearch/#ekaSearchInput/#ekaSearchResults öğeleri kullanılır,
   markup/JS arama sonucu mantığı DEĞİŞMEDİ — sadece açık/kapalı durum. ---------- */
.mobile-search-btn{display:none;padding:10px;border-radius:50%;align-items:center;justify-content:center}
.header-search-close{display:none}
.mobile-search-backdrop{display:none;position:fixed;inset:0;z-index:999;
  background:rgba(11,13,18,.4);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.mobile-search-backdrop.open{display:block}

/* ---------- Mobil menü (992px altında devreye girer) ---------- */
.menu-toggle{display:none;background:none;border:none;font-size:1.35rem;color:var(--text-dark);cursor:pointer;
  line-height:1;font-family:inherit;outline:none}
.menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:50%}
.mobile-menu{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1200;background:rgba(255,255,255,.98);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  transform:translateX(100%);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .5s var(--ease),opacity .35s ease,visibility .5s;
  display:flex;flex-direction:column;overflow-y:auto}
.mobile-menu.open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;
  padding:20px 6vw;border-bottom:1px solid var(--border-light);flex:none}
.mobile-menu-header .logo{font-size:1.15rem}
.mobile-menu-header .logo-img{height:28px}
.mobile-menu-close{width:38px;height:38px;border-radius:50%;background:#f1f3f7;border:none;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--text-dark);
  cursor:pointer;transition:background .2s,transform .2s;outline:none}
.mobile-menu-close:hover{background:#e5e7eb;transform:rotate(90deg)}
.mobile-menu-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mobile-menu-links{padding:14px 6vw 24px;flex:1}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;padding:16px 6px;font-size:1.05rem;
  font-weight:500;border-bottom:1px solid var(--border-light);color:var(--text-dark);
  transition:padding-left .3s var(--ease),color .25s}
.mobile-menu a i{font-size:1rem;color:rgba(11,13,18,.25);transition:transform .3s var(--ease),color .25s}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a.mobile-menu-child{padding-left:24px;font-size:.92rem;color:var(--eka2-muted)}
.mobile-menu a.mobile-menu-child:hover{padding-left:32px;color:var(--eka2-orange)}
.mobile-menu a:hover{padding-left:12px;color:var(--accent)}
.mobile-menu a:hover i{transform:translateX(4px);color:var(--accent)}
/* Hesap kutusu — `.mobile-menu a` (0-1-1) bu seçiciden (0-1-0) daha güçlü
   olduğu için justify-content/padding gibi kuralları ezemiyordu; seçiciyi
   `.mobile-menu a.mobile-menu-account` (0-2-1) yaparak sıralamayı düzeltiyoruz.
   Yatay margin de kaldırıldı: ebeveyn .mobile-menu-links zaten 6vw padding
   veriyor, ikisi üst üste binince kutu diğer linklerden içeri kayıyordu. */
.mobile-menu a.mobile-menu-account{justify-content:flex-start;margin:6px 0 22px;padding:15px 16px;
  border-radius:16px;background:#f4f6fb;gap:12px;font-size:.95rem;font-weight:600;
  color:var(--text-dark);border-bottom:none}
.mobile-menu a.mobile-menu-account:hover{padding-left:16px;background:#eaeef7;color:var(--text-dark)}
.mobile-menu a.mobile-menu-account i{font-size:1.3rem;color:var(--accent)}
.mobile-menu a.mobile-menu-account:hover i{transform:none;color:var(--accent)}
body.menu-open{overflow:hidden}

/* ---------- Header içi görünür arama çubuğu (2026-09-25, Faz H1 — eski
   modal/panel arama kaldırıldı, mockup'taki gibi header'ın kendi içinde
   sabit bir arama kutusu + altında açılan sonuç listesi) ---------- */
.header-search{position:relative;flex:0 1 560px;margin:0 auto;min-width:0}
.header-search-form{display:flex;align-items:center;background:#f6f7f9;border:1.5px solid var(--eka2-line);
  border-radius:12px;padding:0 6px 0 18px;transition:border-color .25s,background .25s}
.header-search-form:focus-within{border-color:var(--eka2-orange);background:#fff}
.header-search-form input{flex:1;min-width:0;border:none;outline:none;font-family:inherit;font-size:.94rem;
  font-weight:500;letter-spacing:-.01em;background:none;color:var(--text-dark);padding:13px 0}
.header-search-form input::placeholder{color:rgba(11,13,18,.42);font-weight:400}
.header-search-form button{background:none;border:none;color:var(--eka2-muted);width:40px;height:40px;
  flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;transition:color .2s}
.header-search-form button:hover{color:var(--eka2-orange)}
.header-search-results{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;
  border-radius:18px;box-shadow:0 24px 50px rgba(11,13,18,.18);border:1px solid var(--border-light);
  padding:10px;display:none;max-height:min(60vh,460px);overflow-y:auto;z-index:1150}
.header-search-results.open{display:block}

/* ---------- Faz H2 — Hesap/Favori/Sepet "pill" butonlar (ikon + görünür
   metin), mockup'taki cam-pill görünümüyle aynı dil. .icon-btn sınıfı ve
   aria-label değerleri JS'in sepet rozetini bulduğu seçici olduğu için
   AYNEN korundu (bkz. site_footer.php quick-add-btn tıklama işleyicisi). */
.nav-pill{display:inline-flex;align-items:center;gap:9px;padding:6px 2px;background:none;border:none;
  font-size:.94rem;font-weight:500;color:var(--eka2-ink);position:relative;white-space:nowrap}
.nav-pill:hover{color:var(--eka2-orange);transform:none}
.nav-pill i{font-size:1.35rem;font-weight:400}
.nav-pill-icon{position:relative;display:inline-flex}
.nav-pill-icon .badge{top:-6px;right:-9px}

/* ---------- Faz H3 — Kategori satırı (navbar'ın altında ayrı bir sıra) +
   "Tüm Kategoriler" açılır mega menü. Kategori verisi/döngüsü DEĞİŞMEDİ
   (aynı $eka_categories), sadece navbar içinden bu ayrı sıraya taşındı —
   .nav-links sınıfı ve onun çip stili (Faz 1) aynen korunuyor, sadece yeni
   bir kapsayıcının (.catrow-links) içinde. ---------- */
.catrow{border-top:1px solid var(--eka2-line);border-bottom:1px solid var(--eka2-line);background:#fff}
.catrow-inner{display:flex;align-items:center;gap:11px;padding-top:12px;padding-bottom:12px}
.catrow-all{display:flex;align-items:center;gap:10px;flex:none;background:var(--eka2-orange);color:#fff;
  border:none;border-radius:10px;padding:12px 24px;font-size:.9rem;font-weight:700;cursor:pointer;
  font-family:inherit;transition:background .2s}
.catrow-all:hover{background:var(--eka2-orange-2)}
.catrow-all i{font-size:1.05rem}
.catrow-links{display:flex;flex-wrap:wrap;gap:11px}
.catrow-links::-webkit-scrollbar{display:none}
.catrow-links a{display:flex;align-items:center;gap:9px;padding:12px 20px;border-radius:10px;
  border:1px solid #e9ebef;font-size:.9rem;font-weight:500;color:var(--eka2-ink);white-space:nowrap;
  transition:border-color .2s,color .2s}
.catrow-links a i{font-size:1.05rem;color:var(--eka2-muted)}
.catrow-links a:hover{border-color:var(--eka2-orange);color:var(--eka2-orange);background:#fff}
.catrow-links a:hover i{color:var(--eka2-orange)}
.catrow-links a.catrow-highlight{background:#fff5ee;border-color:#ffd9c2;color:var(--eka2-orange);font-weight:600}
.catrow-links a.catrow-highlight i{color:var(--eka2-orange)}

.catmega-backdrop{position:fixed;inset:0;z-index:1140;background:rgba(11,13,18,.32);
  backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .35s;pointer-events:none}
.catmega-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.catmega{position:fixed;top:0;left:0;right:0;z-index:1150;background:#fff;
  box-shadow:0 30px 60px rgba(11,13,18,.2);transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform .3s var(--ease),opacity .25s ease,visibility .3s;max-height:80vh;overflow-y:auto}
.catmega.open{transform:translateY(0);opacity:1;visibility:visible}
.catmega-inner{padding-top:0;padding-bottom:0}

/* ---- Faz H5.2 — iki sütunlu mega menü: sol ana kategoriler, sağda
   (hover/tık ile) o kategorinin alt kategorileri. Alt kategorisi olmayan
   ana kategoriler için sağda sade bir "tümünü gör" bağlantısı. ---- */
.catmega-cols{display:flex;min-height:320px}
.catmega-left{flex:0 0 280px;border-right:1px solid var(--eka2-line);padding:14px 0}
.catmega-parent{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 22px;font-size:.9rem;font-weight:600;color:var(--eka2-ink);border-left:3px solid transparent;
  transition:background .15s,color .15s,border-color .15s}
.catmega-parent i:first-child{display:none}
.catmega-parent span{display:flex;align-items:center;gap:10px}
.catmega-parent span i{font-size:1.05rem;color:var(--eka2-muted)}
.catmega-parent-arrow{font-size:1.1rem;color:var(--eka2-muted)}
.catmega-parent:hover,.catmega-parent.active{background:#fff5ee;color:var(--eka2-orange);border-left-color:var(--eka2-orange)}
.catmega-parent:hover span i,.catmega-parent.active span i{color:var(--eka2-orange)}
.catmega-parent:hover .catmega-parent-arrow,.catmega-parent.active .catmega-parent-arrow{color:var(--eka2-orange)}
.catmega-right{flex:1;padding:26px 30px;min-width:0}
.catmega-panel{display:none}
.catmega-panel.active{display:block;animation:pdTabIn .25s ease}
.catmega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.catmega-item{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:12px;
  border:1px solid var(--eka2-line);font-size:.88rem;font-weight:500;color:var(--eka2-ink);transition:all .2s}
.catmega-item:hover{background:#fff5ee;border-color:var(--eka2-orange);color:var(--eka2-orange)}
.catmega-item-all{grid-column:1 / -1;background:#f7f8fa;font-weight:700;border-style:dashed}
.catmega-empty{display:flex;align-items:center;height:100%}
body.catmega-open{overflow:hidden}
@media (max-width:900px){
  .catmega-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .catmega{display:none}
}
.search-result-row{display:flex;align-items:center;gap:14px;padding:10px;border-radius:16px;transition:background .2s}
.search-result-row:hover{background:#f4f6fb}
.search-result-row img,.search-result-row .no-image{width:52px;height:52px;border-radius:14px;object-fit:cover;flex:none;
  background:linear-gradient(160deg,#f7f8fa,#eef0f5);border:1px solid rgba(0,0,0,.04)}
.search-result-row .no-image{display:flex;align-items:center;justify-content:center}
.search-result-row .no-image-badge{width:30px;height:30px;font-size:.9rem;box-shadow:none}
.search-result-name{font-size:.9rem;font-weight:600;letter-spacing:-.01em}
.search-result-price{font-size:.83rem;color:var(--text-muted);margin-top:2px}
.search-panel-empty,.search-panel-hint{color:var(--text-muted);font-size:.88rem;padding:14px 10px;text-align:center}

/* ---------- Sözleşme/pop-up modalı (ödeme adımı + footer'daki yasal linkler) ---------- */
.legal-modal-backdrop{position:fixed;inset:0;z-index:2200;background:rgba(11,13,18,.4);
  backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .35s;pointer-events:none}
.legal-modal-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.legal-modal{position:fixed;top:6vh;left:50%;z-index:2210;width:min(680px,92vw);height:min(88vh,860px);
  background:#fff;border-radius:22px;box-shadow:0 30px 70px rgba(11,13,18,.3);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translate(-50%,-12px);opacity:0;visibility:hidden;
  transition:transform .3s var(--ease),opacity .25s ease,visibility .3s}
.legal-modal.open{transform:translate(-50%,0);opacity:1;visibility:visible}
.legal-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border-light);flex:none}
.legal-modal-head span{font-weight:700;font-size:.95rem}
.legal-modal-close{width:32px;height:32px;flex:none;border-radius:50%;background:#f1f3f7;border:none;
  font-size:1.3rem;line-height:1;color:var(--text-dark);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .25s,transform .25s var(--ease)}
.legal-modal-close:hover{background:#e5e7eb;transform:rotate(90deg)}
.legal-modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.legal-modal-frame,.legal-modal iframe{flex:1;width:100%;border:none}
.search-panel-viewall{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:13px;
  border-radius:100px;background:var(--text-dark);font-size:.86rem;font-weight:600;color:#fff;transition:background .25s}
.search-panel-viewall:hover{background:var(--accent)}
body.legal-modal-open{overflow:hidden}

/* ---------- Reveal-on-scroll (site geneli, sade) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .logo-dot{animation:none}
}

/* ==========================================================================
   Faz 1 (2026-09-25) — Header/Navigasyon yeni tasarım diline (turuncu/
   kurumsal) taşındı. Markup DEĞİŞMEDİ, hiçbir JS hook/id/class kaldırılmadı —
   sadece bu bölümdeki renkler eskisi (--accent, mavi) yerine yeni
   --eka2-orange kullanıyor. Header dışındaki --accent kullanımları (butonlar,
   diğer sayfalar) bu fazda KASITLI olarak değiştirilmedi, sıradaki fazlarda
   ele alınacak. ========================================================== */
.logo-dot{background:var(--eka2-orange)}
.logo-dot::after{background:rgba(242,96,12,.5)}
.icon-btn:hover{color:var(--eka2-orange)}
.icon-btn:focus-visible{outline-color:var(--eka2-orange)}
.badge{background:var(--eka2-orange)}
.menu-toggle:focus-visible{outline-color:var(--eka2-orange)}
.mobile-menu a:hover{color:var(--eka2-orange)}
.mobile-menu a:hover i{color:var(--eka2-orange)}
.mobile-menu a.mobile-menu-account i{color:var(--eka2-orange)}
.mobile-menu a.mobile-menu-account:hover i{color:var(--eka2-orange)}
.search-panel-viewall:hover{background:var(--eka2-orange)}

/* Kategori linkleri artık dolgun, kurumsal "çip" görünümünde (mockup'taki
   kategori satırı ile aynı dil) — markup/veri kaynağı aynı, sadece stil. */

/* Üst duyuru şeridi artık dolu turuncu zemin (mockup'taki "1.000 TL üzeri
   kargo ücretsiz" şeridiyle aynı dil) — veri/admin akışı (announcements
   tablosu) DEĞİŞMEDİ, sadece renk. */
.announce-bar{background:var(--eka2-orange);color:#fff}
.announce-item i{color:#fff}
.announce-item a{border-bottom-color:rgba(255,255,255,.5)}
.announce-item a:hover{border-color:#fff}

/* ==========================================================================
   Faz 3 (2026-09-25) — Ürün kartı (site genelinde ortak bileşen: ana sayfa,
   kategori, arama sonuçları) hover/aksiyon rengi turuncuya taşındı. Markup/
   JS (sepete ekle, favori) hiç değişmedi. ========================================================================== */
.quick-add-btn:hover{background:var(--eka2-orange);border-color:var(--eka2-orange)}

/* ==========================================================================
   Faz 4 (2026-09-25) — Ürün detay sayfası + site genelindeki ana "Sepete
   Ekle"/CTA butonu turuncu vurguya taşındı. Markup/JS (varyant seçimi,
   galeri, sepete ekleme, sekmeler) HİÇ değişmedi. .btn-primary global bir
   bileşen olduğu için bu değişiklik ürün/sepet/ödeme/iletişim gibi tüm
   sayfalarda aynı anda tutarlı hale geliyor (Faz 1-3'te header/footer/ana
   sayfada zaten uygulanan aynı turuncu ile eşleşiyor). ========================================================================== */
.btn-primary:hover{background:var(--eka2-orange);border-color:var(--eka2-orange)}
.pd-cat{color:var(--eka2-orange)}
.pd-tab-text a,.pd-intro a{color:var(--eka2-orange)}
.variant-pill.selected{border-color:var(--eka2-ink);background:var(--eka2-ink)}
.pd-thumb.active{border-color:var(--eka2-orange)}
.pd-tab-btn.active::after{background:var(--eka2-orange)}
.pd-tab-btn.active{color:var(--eka2-ink)}

/* ==========================================================================
   Faz 5 (2026-09-25) — Kategori/koleksiyon/arama sayfaları büyük ölçüde
   Faz 3'te (ürün kartı) ve Faz 1'de (page-head/eyebrow zaten .eyebrow ortak
   sınıf) yapılan değişiklikleri otomatik miras alıyor. Burada sadece
   .eyebrow (site genelinde ortak etiket) ve trust-badge "accent" rengi
   (kategori/sepet/ödeme sayfalarındaki yüzen rozetlerin admin'den seçilen
   "accent" varyantı) turuncuya taşındı. Markup/sorgu HİÇ değişmedi.
   ========================================================================== */
.eyebrow{color:var(--eka2-orange)}
.trust-badge.tb-accent .trust-badge-icon{background:var(--eka2-orange)}

/* ==========================================================================
   Faz 6 (2026-09-25) — Sepet + ödeme akışı. Markup/JS (miktar güncelleme,
   kupon, form doğrulama, ödeme yöntemi seçimi, checkout submit) HİÇ
   değişmedi — sadece form odak rengi ve "şeffaf fiyatlandırma" ikonu
   turuncuya taşındı. input focus kuralı site genelinde ortak olduğu için
   iletişim/hesap formlarında da aynı tutarlılığı sağlıyor.
   ========================================================================== */
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--eka2-orange);box-shadow:0 0 0 3px rgba(242,96,12,.12)}
.price-transparency-box i{color:var(--eka2-orange)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--eka2-orange)}

/* ==========================================================================
   Faz 7 (2026-09-25) — Üyelik (giriş/kayıt/hesabım) sayfaları. Markup/JS
   (form doğrulama, AJAX sekme geçişi, sipariş detay toggle) hiç değişmedi —
   sadece birkaç izole ikon/link rengi turuncuya taşındı.
   ========================================================================== */
.auth-side-icon{color:var(--eka2-orange)}
.order-review-toggle summary{color:var(--eka2-orange)}
.eka-upload-zone:hover,.eka-upload-zone.is-dragover{border-color:var(--eka2-orange);background:rgba(242,96,12,.05)}

/* ---------- Genel bölüm / mini banner ---------- */
/* NOT: Burada `overflow:hidden` KULLANILMAZ ve dekoratif katmanlar 100vw'ye
   genişletilip ortalanır. .page-head aynı zamanda .container (max-width:1200px)
   olduğu için, container sınırında biten bir zemin masaüstünde ekranın
   ortasında sert kenarlı bir dikdörtgen olarak görünüyordu. Tam genişlik
   katman + body{overflow-x:hidden} ile kesim ekran kenarına (görünmez) taşınır.
   padding-top küçük: navbar artık position:sticky, yani akışta yer kaplıyor —
   eski 160px, navbar fixed iken gerekiyordu, şimdi fazladan boşluk olurdu. */
.page-head{position:relative;padding-top:56px;padding-bottom:56px}

/* Tam genişlik zemin: yumuşak degrade + aurora ışık lekeleri */
.page-head::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle 540px at 80% 12%, rgba(242,96,12,.14), transparent 62%),
    radial-gradient(circle 460px at 8% 95%, rgba(255,180,58,.14), transparent 62%),
    linear-gradient(180deg,#ffffff 0%,#eef2fb 55%,var(--bg-light) 100%)}

/* İnce ızgara deseni — hero'daki dille aynı, kenarlara doğru maskeyle söner */
.page-head::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(11,13,18,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,13,18,.045) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 65% 85% at 50% 35%,#000 15%,transparent 80%);
  mask-image:radial-gradient(ellipse 65% 85% at 50% 35%,#000 15%,transparent 80%)}
/* Mobilde (Android Chrome) 100vw'lik bu dekoratif katmanlar, viewport'un
   gerçek genişliğiyle tam örtüşmeyip sayfayı sağa doğru genişletebiliyor
   (yatay kaydırılabilir hale geliyor) — bu sadece header'ı DEĞİL, tüm
   body{overflow-x:hidden}'i bypass eden nadir bir tarayıcı davranışı.
   Masaüstünde tam-genişlik zemin gerekli olduğu için orada dokunulmuyor,
   sadece dar ekranlarda katmanlar kendi kutusuna (.page-head) sabitlenir
   (2026-09-28). */
@media (max-width:768px){
  .page-head{overflow-x:hidden}
}
/* Sayfa gövdesi — üst/alt boşluk EŞİT ve responsive. Daha önce her sayfa
   kendi inline `padding-bottom:80px`ini yazıyordu, üst boşluk ise hiç yoktu;
   içerik başlık bandına yapışıp altta kocaman boşluk kalıyordu. */
.page-body{padding-top:56px;padding-bottom:56px}
.eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-weight:600;margin-bottom:12px;display:block}
.breadcrumb{font-size:.82rem;color:var(--text-muted);margin-bottom:14px}
.breadcrumb a{color:var(--text-muted);transition:color .2s}
.breadcrumb a:hover{color:var(--text-dark)}
.page-head h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:600;letter-spacing:-.035em}
.page-head p{color:var(--text-muted);margin-top:10px;max-width:560px;line-height:1.6}

/* ---------- Güven rozetleri (başlık bandının sağı) ----------
   Yerleşim flexbox ile: position:absolute kullanılsaydı `right:0` container'ın
   4vw yan padding'ini yok sayıp rozetleri metinden daha kenara taşırdı.
   Flex item olarak da .trust-badges'in transform'u serbest kalır — yüzme
   animasyonu konumlandırmayla çakışmaz. */
.page-head.has-badges{display:flex;align-items:center;justify-content:space-between;gap:44px}
.page-head.has-badges .page-head-copy{flex:1;min-width:0}
.trust-badges{display:flex;flex-direction:column;gap:10px;flex:none;pointer-events:none;
  animation:trustFloat 6s ease-in-out infinite}
.trust-badge{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);border-radius:100px;padding:10px 22px 10px 10px;
  box-shadow:0 10px 30px rgba(11,13,18,.08);white-space:nowrap;
  opacity:0;animation:trustIn .7s var(--ease) forwards}
.trust-badge-icon{width:38px;height:38px;border-radius:50%;background:var(--text-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none}
/* Renk admin panelden seçilir */
.trust-badge.tb-dark   .trust-badge-icon{background:var(--text-dark)}
.trust-badge.tb-accent .trust-badge-icon{background:var(--accent)}
.trust-badge.tb-purple .trust-badge-icon{background:var(--accent-2)}
.trust-badge.tb-green  .trust-badge-icon{background:#16a34a}
.trust-badge.tb-orange .trust-badge-icon{background:#ea580c}
.trust-badge-text{display:flex;flex-direction:column;line-height:1.3}
.trust-badge-text strong{font-size:.86rem;font-weight:600;letter-spacing:-.01em}
.trust-badge-text small{font-size:.74rem;color:var(--text-muted)}
@keyframes trustIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes trustFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){
  .trust-badges{animation:none}
  .trust-badge{opacity:1;animation:none}
}

.legal-doc-link{font-weight:700;color:var(--eka2-orange);text-decoration:underline;text-underline-offset:2px}
.legal-doc-link:hover{color:var(--eka2-orange-2)}

/* ---------- Butonlar (anasayfadaki dile göre — sweep hover efektli) ---------- */
/* Sitenin ana marka rengi turuncu olduğu için birincil butonlar artık
   varsayılan olarak da turuncu (2026-09-27) — eskiden siyah zeminle
   başlayıp sadece hover'da turuncuya dönüyordu, bu da hero/kategori
   satırlarındaki turuncu butonlarla tutarsız görünüyordu. */
.btn-primary{background:var(--eka2-orange);color:#fff;padding:15px 28px;border:1px solid var(--eka2-orange);
  border-radius:10px;font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:9px;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
  cursor:pointer;font-family:inherit}
.btn-primary:hover{background:var(--eka2-orange-2);border-color:var(--eka2-orange-2);color:#fff;
  box-shadow:0 14px 32px rgba(242,96,12,.22);transform:translateY(-2px)}
.btn-primary i{transition:transform .4s var(--ease)}
.btn-primary:hover i{transform:translateX(5px)}
.btn-primary:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{padding:15px 26px;border-radius:10px;font-weight:500;font-size:.92rem;border:1px solid rgba(11,13,18,.16);
  color:var(--text-dark);background:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:9px;transition:all .35s var(--ease);cursor:pointer;font-family:inherit}
.btn-ghost:hover{background:#fff;border-color:rgba(11,13,18,.32);transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,13,18,.07)}

/* ---------- Form bileşenleri (kart/label/input — inline style yerine) ---------- */
.form-card{background:#fff;border:1px solid var(--border-light);border-radius:20px;padding:28px;margin-bottom:20px}
.form-card h3{margin-bottom:18px;font-size:1.05rem;font-weight:600}
.narrow-card{max-width:520px;margin-left:auto;margin-right:auto}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=password],
.field input[type=search],.field input[type=number],.field textarea,.field select{
  width:100%;padding:12px 14px;border:1px solid var(--border-light);border-radius:10px;
  font-family:inherit;font-size:16px;background:#fff;color:var(--text-dark);transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,96,12,.1)}
.field textarea{min-height:90px;resize:vertical}
.field-error{display:none;color:#dc2626;font-size:.78rem;margin-top:6px;font-weight:500}
.field-error.show{display:block}
.field input.field-invalid,.field textarea.field-invalid{border-color:#dc2626}

.eka-upload-zone{position:relative;border:1.5px dashed var(--border-light);border-radius:16px;
  padding:28px 20px;text-align:center;cursor:pointer;background:#fafafb;transition:border-color .2s,background .2s}
.eka-upload-zone:hover,.eka-upload-zone.is-dragover{border-color:var(--accent);background:rgba(242,96,12,.04)}
.eka-upload-zone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.eka-upload-zone-icon{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--accent);font-size:1.3rem}
.eka-upload-zone-title{font-size:.9rem;font-weight:600;color:var(--text-dark)}
.eka-upload-zone-title strong{color:var(--accent)}
.eka-upload-zone-hint{font-size:.78rem;color:var(--text-muted);margin-top:4px}
.eka-upload-previews{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.eka-upload-preview{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border-light);background:#f1f3f7}
.eka-upload-preview img{width:100%;height:100%;object-fit:cover}
.eka-upload-preview-remove{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  background:rgba(11,13,18,.72);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;border:none;cursor:pointer;line-height:1}
.eka-upload-preview-remove:hover{background:#0b0d12}
.checkbox-row + .field-error{margin-top:6px;margin-bottom:10px}
.review-textarea{height:110px;resize:none}

/* ---------- Özel select (tarayıcı varsayılanı yerine, tema uyumlu) ---------- */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
  padding-right:38px !important;cursor:pointer;
}
select::-ms-expand{display:none}
.field-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.checkbox-row{display:flex;align-items:center;gap:10px;font-size:.85rem;margin-top:14px;line-height:1.4}
.checkbox-row input{width:auto;flex:none}

/* ---------- Özel checkbox (tarayıcı varsayılanı yerine, tema uyumlu) ---------- */
input[type=checkbox]{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:20px;height:20px;min-width:20px;border-radius:6px;border:1.5px solid rgba(11,13,18,.22);
  background:#fff;cursor:pointer;position:relative;flex:none;margin:0;vertical-align:middle;
  transition:background .2s ease,border-color .2s ease;
}
input[type=checkbox]:hover{border-color:rgba(11,13,18,.4)}
input[type=checkbox]:checked{background:var(--text-dark);border-color:var(--text-dark)}
input[type=checkbox]:checked::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
.alert{padding:12px 18px;border-radius:10px;margin-bottom:16px;font-size:.9rem}
.alert-error{background:#fee2e2;color:#991b1b}
.alert-success{background:#dcfce7;color:#166534}
.star-rating{color:#f59e0b;font-size:.9rem;display:inline-flex;align-items:center;gap:2px}

/* ---------- Kategori alt-sekmeleri (AJAX filtre) ---------- */
.cat-subtabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.cat-subtab{background:#fff;border:1px solid var(--eka2-line);color:var(--text-dark);font-weight:600;
  font-size:.84rem;padding:10px 18px;border-radius:100px;cursor:pointer;font-family:inherit;
  transition:background .2s,border-color .2s,color .2s}
.cat-subtab:hover{border-color:var(--eka2-orange)}
.cat-subtab.active{background:var(--eka2-orange);border-color:var(--eka2-orange);color:#fff}
#catProductGrid{transition:opacity .2s}

/* ---------- Ürün ızgarası ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.product-card{cursor:pointer;position:relative}
.product-image-box{background:linear-gradient(160deg,#f7f8fa,#eef0f5);border-radius:22px;height:280px;margin-bottom:18px;
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(0,0,0,.04);
  transition:box-shadow .5s var(--ease)}
.product-card:hover .product-image-box{box-shadow:0 24px 48px rgba(11,13,18,.1)}
.product-image-box img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.product-card:hover .product-image-box img{transform:scale(1.05)}

/* ---------- Görsel yer tutucu (ürün fotoğrafı henüz yüklenmemişse) ---------- */
.no-image{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background-image:radial-gradient(rgba(242,96,12,.08) 1.5px,transparent 1.5px);background-size:16px 16px}
.no-image-badge{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:var(--accent);box-shadow:0 8px 20px rgba(11,13,18,.07);border:1px solid rgba(0,0,0,.04)}
.no-image-label{font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--text-muted);text-transform:uppercase}
.pd-image .no-image-badge{width:64px;height:64px;font-size:1.7rem}
.cart-line-image-placeholder .no-image-badge,
.cart-line-image-placeholder .no-image{gap:0}
.cart-line-image-placeholder .no-image-badge{width:34px;height:34px;font-size:1rem;box-shadow:none}
.tag{position:absolute;top:16px;left:16px;z-index:3;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:6px 11px;border-radius:100px;background:rgba(11,13,18,.86);color:#fff}
.product-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
/* Fiyat bloğu her koşulda (satır ya da alt-alta/column modunda, her
   ekran genişliğinde) kartın sağ kenarına yaslı dursun diye margin-left:auto
   ile de garanti altına alınıyor — sadece space-between'e (ya da
   align-self'e) güvenmek yerine tek, kırılmaz bir kural (2026-09-28,
   site geneli standart). */
.product-meta>.product-price-wrap{margin-left:auto}
.product-title{font-size:1.05rem;font-weight:600;margin-bottom:3px}
.product-category{font-size:.82rem;color:var(--text-muted)}
.product-price{font-size:1.05rem;font-weight:700;white-space:nowrap}
.quick-add-btn{margin-top:12px;width:100%;padding:12px;background:var(--text-dark);border:1px solid var(--text-dark);
  border-radius:100px;font-size:.84rem;font-weight:600;color:#fff;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:7px;transition:background .3s,color .3s,border-color .3s}
.quick-add-btn:hover{background:var(--accent);border-color:var(--accent)}
/* Sadece "Tükendi" gibi kalıcı olarak devre dışı bırakılmış butonlar için
   gri görünüm; sepete eklerken JS'in AJAX isteği süresince kısa bir an
   disabled=true yapması (bkz. site_footer.php) artık rengi griye/beyaza
   çevirmiyor, sadece hafif soluklaştırıyor (2026-09-27). */
.quick-add-btn:disabled{opacity:.7;cursor:not-allowed}
.quick-add-btn.is-added{background:#16a34a;border-color:#16a34a;color:#fff}

/* ---------- Favori butonu ---------- */
/* Kalp ikonu köşeye "Ücretsiz Kargo" etiketiyle aynı hizada ama daha
   yalın (sadece ikon, pill/yazı yok) olduğu için aynı 10px değeri
   gözle çok daha köşeye yapışık görünüyordu — üstten/sağdan boşluk
   etiketle aynı HİSSİ verecek şekilde artırıldı (2026-09-28, site
   genelinde standart: tüm ürün kartı ızgaralarında geçerli). */
.fav-btn{position:absolute;top:14px;right:14px;z-index:4;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--text-dark);
  cursor:pointer;transition:transform .25s var(--ease),color .25s,background .25s;box-shadow:0 4px 14px rgba(11,13,18,.08)}
.fav-btn:hover{transform:scale(1.1)}
.fav-btn.is-fav{color:#e11d48}
.fav-btn.pulse{animation:favPulse .4s ease}
@keyframes favPulse{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.pd-fav-btn{position:absolute;top:16px;right:16px;width:auto;height:auto;border-radius:10px;
  padding:10px 16px 10px 14px;gap:7px;font-size:.85rem;font-weight:600;color:var(--text-dark)}
.pd-fav-btn i{font-size:1.05rem}
.pd-fav-btn.is-fav{color:#e11d48}
.pd-fav-btn .fav-btn-text{white-space:nowrap}

.pd-shipping-badge{position:absolute;top:16px;left:16px;z-index:4;display:flex;align-items:center;gap:7px;
  border-radius:100px;padding:10px 16px 10px 14px;color:#fff;box-shadow:0 4px 14px rgba(11,13,18,.16);
  font-size:.85rem;font-weight:600;white-space:nowrap}
.pd-shipping-badge i{font-size:1.05rem}
.pd-backview-badge{position:absolute;bottom:16px;left:16px;z-index:4;display:flex;align-items:center;gap:7px;
  border-radius:100px;padding:10px 16px 10px 14px;color:#fff;background:rgba(11,13,18,.82);
  box-shadow:0 4px 14px rgba(11,13,18,.16);font-size:.85rem;font-weight:600;white-space:nowrap}
.pd-backview-badge i{font-size:1.05rem}
.pd-variant-name-badge{display:inline-flex;align-items:center;margin-top:10px;max-width:100%;
  border-radius:100px;padding:9px 16px;color:#fff;background:rgba(11,13,18,.88);
  box-shadow:0 4px 14px rgba(11,13,18,.12);font-size:.83rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Ürün kartlarında (anasayfa/kategori) rozet fotoğrafın üstünde, ama
   fotoğrafla ÇAKIŞMADAN durabilmesi için kutu (.has-ship-badge) rozetin
   kendi yüksekliği kadar YUKARI doğru büyütülür — fotoğrafın görünen
   boyutu (img'e verilen sabit yükseklik) hiç küçülmez, sadece üstte
   rozet için ayrı bir şerit açılır. */
.product-image-box.has-ship-badge{height:318px;align-items:flex-end}
.product-image-box.has-ship-badge img{height:280px}
.card-shipping-badge{position:absolute;top:10px;left:10px;z-index:4;display:flex;align-items:center;gap:4px;
  border-radius:100px;padding:6px 11px 6px 9px;color:#fff;box-shadow:0 4px 14px rgba(11,13,18,.16);
  font-size:.68rem;font-weight:700;white-space:nowrap;line-height:1}
.card-shipping-badge i{font-size:.85rem}

/* ---------- Ürün kartı — deneme.php'deki bordürlü/kompakt pcard stiline
   uyarlama (2026-09-26). Markup/veri değişmedi, sadece görünüm. ---------- */
.product-grid{row-gap:36px;column-gap:18px}
.product-card{border:1px solid var(--eka2-line);border-radius:12px;padding:10px 10px 14px;background:#fff;
  transition:box-shadow .25s var(--ease),border-color .25s;
  display:flex;flex-direction:column;height:100%}
/* <a> kartın kalan tüm yüksekliğini doldurur, böylece içindeki
   .product-category (margin-top:auto ile) her zaman butonun hemen
   üstüne yaslanır — satır uzunluğu ne olursa olsun aynı satırdaki tüm
   kartlarda açıklama+buton aynı hizada durur (2026-09-27). */
.product-card>a{display:flex;flex-direction:column;flex:1}
/* .product-card>a çift görev yapıyor: kartın asıl İçerik linkinde (görsel+
   başlık+fiyat) dikey istifleme istiyoruz, ama BİRDEN FAZLA varyantlı
   ürünlerde "Sepete Ekle" yerine geçen <a class="quick-add-btn"> de aynı
   div'in doğrudan çocuğu olduğu için bu seçiciye yakalanıp icon+yazıyı alt
   alta düşürüyordu (buton her zaman <button> olsaydı bu seçici hiç
   eşleşmezdi — sorun sadece tek varyantsız/quick-add ürünlerde gizli
   kalıyordu). Aynı satırda kalması için burada özellik-eşitliğini class+tag
   ile bilerek yükseltip satır yönünü geri kazandırıyoruz (2026-09-28). */
.product-card>a.quick-add-btn{display:flex;flex-direction:row;flex:0 0 auto}
.product-category{margin-top:auto;padding-top:6px;margin-bottom:10px}
.quick-add-btn{margin-top:0}
.product-card:hover{box-shadow:0 16px 32px rgba(17,20,23,.08);border-color:#d8dbe0}
.product-card:hover .product-image-box{box-shadow:none}
.product-image-box{border-radius:8px;height:auto;aspect-ratio:1/1;margin-bottom:10px;border:none;
  background:repeating-linear-gradient(115deg,#f1f3f5 0 2px,transparent 2px 6px),#fafbfc}
.product-image-box.has-ship-badge{height:auto;aspect-ratio:1/1;align-items:flex-end}
.product-image-box.has-ship-badge img{height:100%}
/* Mobil kırılım noktalarında (768/640/440) kutu yüksekliği görselden daha
   büyük tutulup rozet için üstte boşluk açılıyordu (bkz. .has-ship-badge
   yorumu, ~617. satır); align-items burada "stretch" olursa görsel sabit
   piksel yüksekliğinde kalıp yukarı yaslanır ve altta boş alan bırakırdı —
   "flex-end" ile eskisi gibi alta yaslanır, boşluk üstte (rozetin arkasında)
   kalır (2026-09-27). */
.product-title{font-size:.86rem;font-weight:600;line-height:1.4}
.product-category{font-size:.72rem;color:var(--text-muted)}
.product-price{font-size:.92rem}
.product-price-old{font-size:.78rem!important}
.product-card .fav-btn{width:26px;height:26px;border:1px solid var(--eka2-line);background:#fff;box-shadow:none;
  backdrop-filter:none;font-size:.85rem}
.card-shipping-badge{border-radius:6px;font-size:.62rem;padding:4px 8px 4px 7px}
.quick-add-btn{border-radius:100px;padding:9px;font-size:.78rem}

/* ---------- Kayan yazı (marquee) — home.php'deki ile aynı, ürün
   sayfasında da kullanılabilsin diye ortak site.css'e taşındı
   (2026-09-27). ---------- */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{width:100%;background:#fff;color:var(--text-dark);padding:14px 0;overflow:hidden;
  white-space:nowrap;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.marquee-content{display:inline-block;animation:marquee 24s linear infinite;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.marquee:hover .marquee-content{animation-play-state:paused}
.marquee-content span{margin:0 26px;color:var(--text-muted)}
.marquee-content i{color:var(--eka2-orange);opacity:.75}
.pd-marquee{margin-bottom:0}
.pd-marquee .marquee-content{white-space:nowrap}
/* Ürün sayfasında (kayan yazı olsun/olmasın) breadcrumb'a kadarki üst
   boşluk standart sayfa üst boşluğundan (56px) belirgin şekilde daha az
   — kayan yazı varsa daha da azaltılıyor (2026-09-27). */
.pd-page-body{padding-top:22px}
.pd-marquee + .page-body{padding-top:18px}

/* ---------- Ürün detay ---------- */
.pd-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd-image{background:linear-gradient(160deg,#f7f8fa,#eef0f5);border-radius:26px;aspect-ratio:1/1;overflow:hidden;
  border:1px solid rgba(0,0,0,.04);display:flex;align-items:center;justify-content:center}
.pd-image img{width:100%;height:100%;object-fit:cover}
.pd-cat{font-size:.78rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.pd-notice{display:flex;align-items:center;gap:8px;background:#fff7ed;color:#9a5b0a;border:1px solid #fde3c0;
  border-radius:10px;padding:9px 14px;font-size:.82rem;font-weight:600;margin-bottom:14px;max-width:fit-content}
.pd-notice i{font-size:1rem;flex:none}
.pd-title{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600;letter-spacing:-.03em}
.pd-intro{color:var(--text-muted);line-height:1.65;margin-top:10px;font-size:.96rem;max-width:520px}
.pd-custom-field{max-width:520px;margin-top:14px;margin-bottom:18px}
.pd-custom-field textarea{height:44px;min-height:44px;resize:none;padding-top:11px;padding-bottom:11px}
.pd-custom-item{margin-bottom:10px}
.pd-custom-item:last-child{margin-bottom:0}
.pd-custom-item-label{font-size:.78rem;color:var(--text-muted);margin-bottom:4px}
.pd-price-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Masaüstünde fiyatın hemen yanında (aynı satırda) ve dikeyde tam ortalı,
   dar ekranlarda fiyatın altına kayıyor (2026-09-27). */
.pd-price-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;margin-top:6px}
@media(min-width:641px){
  .pd-price-badges{width:auto;margin-top:0}
}
.pd-price-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:100px;
  background:#f2f8f4;color:#178a4c;font-size:.74rem;font-weight:600;white-space:nowrap}
.pd-price-badge i{font-size:.9rem}
.pd-price-badge.pd-price-badge-ship{background:#eef4fc;color:#1d6fc4}
.pd-price{font-size:1.7rem;font-weight:700;margin:16px 0 6px;white-space:nowrap}
.pd-price .old{font-size:1rem;color:var(--text-muted);font-weight:500;text-decoration:line-through;margin-right:8px}
.pd-desc{color:var(--text-muted);line-height:1.7;margin:18px 0 26px}
.pd-variants{margin-bottom:26px}
.pd-variants label{display:block;font-size:.82rem;font-weight:600;margin-bottom:10px}
/* Sabit üçlü ızgara: seçenek 1-2 taneyse sütun sayısı da 1-2 olacak
   şekilde satır içi style ile ayarlanıyor (bkz. #variantPills'in PHP
   çıktısı) — böylece az seçenekli varyantlar da satırı doldurur, dar bir
   sütuna sıkışmaz (2026-09-29, kompakt/standart görünüm talebi). */
.variant-pill{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:10px;border:1px solid rgba(11,13,18,.16);
  font-size:.86rem;font-weight:500;cursor:pointer;background:#fff;transition:.2s;text-align:center}
.variant-pill.selected{border-color:var(--text-dark);background:var(--text-dark);color:#fff}

/* ---------- Çapraz varyant (matris) — kart stili seçici ---------- */
.pd-matrix{display:flex;flex-direction:column;gap:20px;margin-top:20px}
.pd-attr-row{display:flex;flex-direction:column;gap:6px}
/* .pd-variants label{margin-bottom:10px} kuralı (üstte) ".pd-variants label"
   şeklinde iki parçalı olduğu için tek sınıflı ".pd-attr-label"dan daha
   yüksek özgüllüğe sahip — margin:0 burada uygulanmıyordu, etiket ile
   kutucuklar arasında istenmeyen ekstra boşluk bırakıyordu. Aynı özgüllükte
   yazıp override ediyoruz (2026-09-27). */
.pd-matrix .pd-attr-label{font-size:.86rem;font-weight:700;color:var(--text-dark);margin:0 0 2px}
/* Kart genişliği artık grup başına seçenek sayısına göre değişmiyor —
   tüm gruplarda (2'li, 3'lü, tek başına) AYNI sabit genişlik kullanılıyor
   (3'lü Selefon grubundaki boyut standart alındı: satırın 1/3'ü). Daha az
   seçeneği olan gruplar satırı doldurmuyor, soldan başlayıp boş bırakıyor
   — flex ile flex-grow:0 sayesinde (2026-09-27). */
/* Izgara sütun sayısı (1/2/3) her grup için PHP'den satır içi style ile
   geliyor — 1-2 seçenekli gruplar da satırı doldurup genişler, 3+ olanlar
   sabit üçlü ızgarada alt alta sıralanır (2026-09-29). */
.pd-attr-group{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.attr-value-pill{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:12px 26px 12px 14px;border-radius:12px;border:1.5px solid var(--eka2-line);
  background:#fafbfc;font-size:.86rem;font-weight:500;color:var(--text-dark);cursor:pointer;
  font-family:inherit;text-align:center;transition:border-color .2s,box-shadow .2s,color .2s,background .2s}
.attr-value-pill:hover{border-color:var(--eka2-orange);background:#fff}
.attr-value-pill.selected{border-color:var(--eka2-orange);box-shadow:0 0 0 1px var(--eka2-orange);color:var(--eka2-orange);font-weight:600;background:#fff8f3}
.attr-value-pill-icon{font-size:1.15rem;color:var(--text-muted);transition:color .2s}
.attr-value-pill.selected .attr-value-pill-icon{color:var(--eka2-orange)}
.attr-value-pill-check{position:absolute;top:6px;right:7px;font-size:.85rem;color:var(--eka2-orange);opacity:0;transform:scale(.6);transition:.2s}
.attr-value-pill.selected .attr-value-pill-check{opacity:1;transform:scale(1)}
.attr-value-pill:disabled{opacity:.4;cursor:not-allowed;color:var(--text-muted)}
.attr-value-pill:disabled:hover{border-color:var(--eka2-line)}
@media(max-width:480px){
  .attr-value-pill{min-height:46px;padding:9px 20px 9px 10px;font-size:.72rem;gap:5px}
  .attr-value-pill-icon{font-size:.92rem}
}

/* ---------- Adet bazlı fiyat tablosu (baskı kademesi) seçici ---------- */
.pd-qty-tiers{margin-bottom:22px}
.pd-qty-tiers-head{margin-bottom:6px}
.pd-qty-tiers-title{font-size:.86rem;font-weight:700;color:var(--text-dark)}
.pd-qty-tiers-note{font-size:.8rem;color:var(--text-muted);margin:0 0 12px;line-height:1.5}
/* Bizim "üçlü sıra" (attr-value-pill) mantığından farklı olarak burada
   her adet kendi TAM GENİŞLİK satırında — solda adet, sağda fiyat, kart
   kart alt alta diziliyor (2026-09-28). */
.pd-qty-tiers-grid{display:flex;flex-direction:column;gap:8px}
.pd-qty-tier{display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  width:100%;padding:14px 18px;border-radius:12px;border:1.5px solid var(--eka2-line);background:#fafbfc;
  cursor:pointer;font-family:inherit;text-align:left;transition:border-color .2s,box-shadow .2s,background .2s}
.pd-qty-tier:hover{border-color:var(--eka2-orange);background:#fff}
.pd-qty-tier.selected{border-color:var(--eka2-orange);box-shadow:0 0 0 1px var(--eka2-orange);background:#fff8f3}
.pd-qty-tier-qty,.pd-qty-tier-price{display:flex;flex-direction:column;gap:1px}
.pd-qty-tier-price{align-items:flex-end}
.pd-qty-tier-num{font-size:1rem;font-weight:700;color:var(--text-dark)}
.pd-qty-tier-price .pd-qty-tier-num{color:var(--eka2-orange)}
.pd-qty-tier-label{font-size:.68rem;font-weight:600;color:var(--text-muted);text-transform:uppercase}

.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.qty-row .qty-box{flex:none}
.qty-row .btn-primary{flex:1 1 160px;justify-content:center;white-space:nowrap}
/* Masaüstünde tamamen şeffaf sarmalayıcı — qty-box/Sepete Ekle butonunu
   .qty-row'un doğrudan flex öğesi gibi davranmaya devam ettirir, sadece
   mobil sticky görünümde gerçek bir grid hücresine dönüşür (bkz. 640px) */
.qty-row-top{display:contents}
/* Sticky mobil çubuktaki fiyat bloğu — masaüstünde (yukarıda zaten pd-price
   var) gösterilmez, sadece 640px altı sticky görünümde devreye girer */
.qty-row-price{display:none}
.pd-wa-btn{background:#25d366;border-color:#25d366;color:#fff}
.pd-wa-btn:hover{background:#1fb958;border-color:#1fb958;box-shadow:0 14px 32px rgba(37,211,102,.28)}

/* ---------- Ürün galerisi (küçük görsel şeridi) ---------- */
.pd-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.pd-thumb{width:64px;height:64px;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;
  cursor:pointer;background:#fff;transition:border-color .2s,opacity .2s;opacity:.7}
.pd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pd-thumb:hover{opacity:1}
.pd-thumb.active{border-color:var(--text-dark);opacity:1}
.pd-thumb-video{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:#0b0d12;color:#fff;font-size:1.6rem}
#pdVideo{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.pd-video-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--text-dark);
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s}
.pd-video-play-btn:hover{transform:translate(-50%,-50%) scale(1.08)}
.qty-box{display:inline-flex;width:fit-content;align-items:center;border:1px solid rgba(11,13,18,.16);border-radius:100px;overflow:hidden;flex:none}
.qty-box button{background:none;border:none;width:40px;height:44px;font-size:1.1rem;cursor:pointer;font-family:inherit;transition:background .2s}
.qty-box button:hover{background:#f1f3f7}
.qty-box input{width:44px;text-align:center;border:none;font-size:.95rem;font-family:inherit}

/* ---------- Ürün detay — sekmeler (açıklama / bilgilendirme / değerlendirmeler) ---------- */
.pd-section{padding-top:56px}
.pd-section-title{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;margin-bottom:22px}
/* Sekme bloğu tam genişliği kullanır; içerik satır uzunluğu okunabilirlik
   için panel seviyesinde sınırlanır (eskiden tüm blok 760px'e sıkışıp
   masaüstünde sağda kocaman boşluk bırakıyordu). */
.pd-tabs-wrap{width:100%}
.pd-tab-panel > .pd-tab-text{max-width:none}
.pd-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border-light);margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.pd-tabs::-webkit-scrollbar{display:none}
.pd-tab-btn{background:none;border:none;padding:14px 18px;font-size:.9rem;font-weight:600;color:var(--text-muted);
  cursor:pointer;font-family:inherit;white-space:nowrap;position:relative;transition:color .25s}
.pd-tab-btn::after{content:'';position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--text-dark);
  transform:scaleX(0);transition:transform .3s var(--ease)}
.pd-tab-btn:hover{color:var(--text-dark)}
.pd-tab-btn.active{color:var(--text-dark)}
.pd-tab-btn.active::after{transform:scaleX(1)}
.pd-tab-panel{display:none}
.pd-tab-panel.active{display:block;animation:pdTabIn .35s ease}
@keyframes pdTabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pd-tab-text{color:var(--text-muted);line-height:1.75;font-size:.95rem}
.pd-tab-text p,.pd-intro p{margin:0}
.pd-tab-text ul,.pd-tab-text ol,.pd-intro ul,.pd-intro ol{margin:0;padding-left:22px}
.pd-tab-text ul,.pd-intro ul{list-style:disc}
.pd-tab-text ol,.pd-intro ol{list-style:decimal}
.pd-tab-text li,.pd-intro li{margin:0}
.pd-tab-text strong,.pd-intro strong{color:var(--text-dark);font-weight:700}
.pd-tab-text a,.pd-intro a{color:var(--accent);text-decoration:underline}
.review-card{background:#fff;border:1px solid var(--border-light);border-radius:18px;padding:20px 22px;margin-bottom:14px}
.review-card .review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.review-card .review-name{font-weight:600;font-size:.95rem}
.review-card .review-comment{color:var(--text-muted);margin-top:8px;line-height:1.6;font-size:.92rem}
.review-empty{color:var(--text-muted);background:#f7f8fa;border-radius:16px;padding:26px;text-align:center;font-size:.92rem;width:100%}
.review-form-card{margin-top:24px;width:100%}
.review-visibility-toggle{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted);
  margin:-6px 0 18px;cursor:pointer}
.review-visibility-toggle input{margin:0}
.order-review-status{display:flex;align-items:center;gap:6px;color:#16a34a;font-size:.85rem;font-weight:600;
  padding:6px 0 12px}
.order-review-toggle{margin:4px 0 14px;border-top:1px dashed var(--border-light);padding-top:12px}
.order-review-toggle summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--accent);list-style:none;
  display:inline-flex;align-items:center;gap:6px}
.order-review-toggle summary::-webkit-details-marker{display:none}
.order-review-toggle summary::before{content:'▸';font-size:.85rem;transition:transform .25s}
.order-review-toggle[open] summary::before{transform:rotate(90deg)}
.order-review-form{margin-top:14px;max-width:480px}
.star-input-grid{display:flex;flex-direction:column;gap:14px;margin:6px 0 18px}
.star-input{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.star-input-label{font-size:.88rem;font-weight:600;color:var(--text-dark)}
.star-input-stars{display:flex;gap:2px}
.star-input-star{background:none;border:none;cursor:pointer;padding:4px;font-size:1.2rem;color:#d1d5db;
  transition:color .15s,transform .15s;line-height:1;outline:none}
.star-input-star:hover{transform:scale(1.12)}
.star-input-star.is-active{color:#f59e0b}
.star-input-star:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.pd-tab-panel > .review-empty,
.pd-tab-panel > .review-form-card,
.pd-tab-panel > .review-card{max-width:none}

/* ---------- Sepet ---------- */
.cart-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.cart-line{display:grid;grid-template-columns:80px 1fr auto auto;gap:16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--border-light)}
.cart-line img{width:80px;height:80px;border-radius:14px;object-fit:cover;background:#f1f3f7}
.cart-line-image-placeholder{width:80px;height:80px;border-radius:14px;background:#f1f3f7;display:flex;align-items:center;justify-content:center;color:#c9ccd4}
.cart-line-title{font-weight:600;font-size:.98rem}
.cart-line-variant{font-size:.82rem;color:var(--text-muted);margin-top:3px}
.cart-line-custom{font-size:.8rem;color:var(--text-muted);margin-top:4px;background:#f7f8fa;border-radius:8px;padding:6px 10px;max-width:fit-content}
.cart-line-custom strong{color:var(--text-dark)}
.cart-line-price{font-weight:700;white-space:nowrap}
.cart-remove{font-size:.78rem;color:var(--text-muted);margin-top:8px;cursor:pointer;background:none;border:none;font-family:inherit;padding:0}
.cart-remove:hover{color:#dc2626}
.cart-summary{background:#f1f3f7;border-radius:22px;padding:28px;position:sticky;top:100px}
.cart-summary h3{font-size:1.1rem;margin-bottom:20px;font-weight:600}
.summary-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--text-muted);margin-bottom:12px;gap:12px}
.summary-row>span:last-child{white-space:nowrap}
.summary-row.total{color:var(--text-dark);font-weight:700;font-size:1.1rem;border-top:1px solid var(--border-light);padding-top:16px;margin-top:16px}
.empty-cart{padding:80px 0;text-align:center;color:var(--text-muted)}
.coupon-row{display:flex;gap:8px}
.coupon-row input{flex:1;padding:10px 12px;border:1px solid var(--border-light);border-radius:8px;font-family:inherit}
.ship-free{color:#16a34a;font-weight:600}

/* ---------- Şeffaf fiyatlandırma kutusu (sepet üstü + ödeme özeti üstü) ---------- */
.price-transparency-box{display:flex;align-items:flex-start;gap:14px;background:#f7f8fa;
  border:1px solid var(--border-light);border-radius:18px;padding:20px 22px;margin-bottom:24px}
.price-transparency-box i{font-size:1.3rem;color:var(--accent);flex:none;margin-top:2px}
.price-transparency-box strong{display:block;font-size:.92rem;margin-bottom:3px}
.price-transparency-box span{font-size:.85rem;color:var(--text-muted);line-height:1.6}
.price-transparency-box.compact{padding:14px 16px;margin-bottom:18px;align-items:center;gap:10px}
.price-transparency-box.compact i{font-size:1.05rem;margin-top:0}
.price-transparency-box.compact span{font-size:.82rem;color:var(--text-dark);font-weight:500;line-height:1.4}

/* ---------- Sepete eklendi modalı ---------- */
.cart-modal-overlay{position:fixed;inset:0;background:rgba(11,13,18,.55);z-index:2100;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  display:flex;align-items:center;justify-content:center;padding:20px}
.cart-modal-overlay.open{opacity:1;visibility:visible}
.cart-modal{background:#fff;border-radius:24px;padding:36px 32px;max-width:400px;width:100%;text-align:center;
  transform:translateY(16px) scale(.96);transition:transform .35s var(--ease);box-shadow:0 30px 70px rgba(11,13,18,.25)}
.cart-modal-overlay.open .cart-modal{transform:none}
.cart-modal-icon{width:56px;height:56px;border-radius:50%;background:#dcfce7;color:#16a34a;font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.cart-modal h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.cart-modal p{color:var(--text-muted);font-size:.9rem;margin-bottom:24px}
.cart-modal p strong{color:var(--text-dark)}
.cart-modal-actions{display:flex;flex-direction:column;gap:10px}
.cart-modal-actions .btn-primary,.cart-modal-actions .btn-ghost{width:100%;justify-content:center}
.cart-modal-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:1.4rem;
  color:var(--text-muted);cursor:pointer;line-height:1}
.cart-modal{position:relative}

/* ---------- İletişim sayfası ---------- */
/* align-items:stretch (varsayılan) — iki sütun aynı yükseklikte kalır */
.contact-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:40px}
.contact-info{background:#fff;border:1px solid var(--border-light);border-radius:20px;padding:28px;
  display:flex;flex-direction:column}
/* Sosyal butonlar en alta yaslanır ki iki kart dengeli görünsün */
.contact-socials{margin-top:auto}
.contact-info-title{font-size:1.05rem;font-weight:600;margin-bottom:22px}
.contact-item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border-light)}
.contact-item:last-of-type{border-bottom:none}
.contact-item-icon{width:40px;height:40px;border-radius:50%;background:#f4f6fb;color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none}
.contact-item > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.contact-item strong{font-size:.82rem;font-weight:600;letter-spacing:-.01em}
.contact-item span,.contact-item a{font-size:.9rem;color:var(--text-muted);line-height:1.55;overflow-wrap:break-word}
.contact-item a:hover{color:var(--accent)}
.contact-socials{display:flex;gap:10px;flex-wrap:wrap;padding-top:22px}
.contact-socials .btn-ghost{padding:11px 18px;font-size:.85rem}
.contact-map{margin-top:32px;border-radius:20px;overflow:hidden;border:1px solid var(--border-light);
  line-height:0;background:#f1f3f7}
.contact-map iframe{width:100%;height:380px;border:0;display:block}

/* ---------- Hesabım ---------- */
.account-wrap{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.account-nav{background:#fff;border:1px solid var(--border-light);border-radius:20px;padding:14px;position:sticky;top:100px;display:flex;flex-direction:column;gap:2px}
.account-nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;font-size:.9rem;font-weight:500;color:var(--text-muted);transition:background .2s,color .2s}
.account-nav a i{font-size:1.1rem}
.account-nav a:hover{background:#f7f8fa;color:var(--text-dark)}
.account-nav a.active{background:var(--text-dark);color:#fff}
.account-nav-logout{border-top:1px solid var(--border-light);margin-top:8px;padding-top:12px !important;color:#dc2626 !important}
.account-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.account-stat-card{background:#fff;border:1px solid var(--border-light);border-radius:18px;padding:22px}
.account-stat-num{font-size:1.6rem;font-weight:700;letter-spacing:-.03em}
.account-stat-label{font-size:.8rem;color:var(--text-muted);margin-top:4px}
.account-order-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--border-light);flex-wrap:wrap}
.account-order-row:last-child{border-bottom:none}
.account-order-no{font-weight:600;font-size:.95rem}
.account-order-date{font-size:.8rem;color:var(--text-muted);margin-top:2px}
.status-pill{display:inline-block;padding:5px 13px;border-radius:100px;font-size:.72rem;font-weight:600}
.status-pill.paid,.status-pill.delivered{background:#dcfce7;color:#166534}
.status-pill.pending,.status-pill.havale_bekliyor{background:#fef9c3;color:#a16207}
.status-pill.shipped{background:#dbeafe;color:#1d4ed8}
.status-pill.failed,.status-pill.cancelled{background:#fee2e2;color:#991b1b}
.auth-wrap{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.auth-wrap .form-card{margin-bottom:0;display:flex;flex-direction:column}
.auth-side{background:#f7f8fa;border:1px solid var(--border-light);border-radius:20px;
  padding:34px 30px;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center}
.auth-side-icon{width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--border-light);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:18px}
.auth-side h3{font-size:1.15rem;font-weight:700;margin-bottom:10px;color:var(--text-dark)}
.auth-side p{font-size:.88rem;line-height:1.65;color:var(--text-muted);margin-bottom:24px}
.auth-side .btn-primary{width:100%;justify-content:center}
@media (max-width:768px){
  .auth-wrap{grid-template-columns:1fr;max-width:480px}
}
.auth-links{display:flex;justify-content:space-between;margin-top:16px;font-size:.85rem;color:var(--text-muted);flex-wrap:wrap;gap:8px}
.address-card{background:#fff;border:1px solid var(--border-light);border-radius:16px;padding:18px 20px;margin-bottom:12px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}

/* ---------- Footer — deneme.php ile birebir (koyu zemin #111417≈--eka2-ink,
   açık gri metin). ÖNEMLİ: eskiden burada background:#fff vardı ve dosyanın
   üstündeki "Faz 2 koyu tema" kuralından SONRA geldiği için (aynı özgüllük,
   sırada sonra olan kazanır) footer'ı sessizce beyaza döndürüyordu — bu
   yüzden footer bazen siyah bazen beyaz görünüyordu. Artık tek kaynak burası. ---------- */
footer{border-top:none;padding:60px 0 40px;background:var(--eka2-ink)}
footer .logo{color:#fff}
footer .logo .logo-dot{background:var(--eka2-orange)}
footer .logo-dot::after{background:rgba(242,96,12,.5)}
footer p{color:#9aa1ab}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:40px}
.footer-heading{font-size:.8rem;font-weight:700;margin-bottom:22px;text-transform:uppercase;letter-spacing:.1em;color:#fff}
.footer-links li{margin-bottom:14px}
.footer-links a{color:#9aa1ab;font-size:.88rem;transition:color .25s,padding-left .3s var(--ease);display:inline-block}
.footer-links a:hover{color:var(--eka2-orange-2);padding-left:6px}
.footer-links span.muted{font-size:.88rem;display:inline-block;color:#6b7280}
.footer-legal-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
/* ---- Faz H6 (2026-09-26) — bülten alanı artık footer kartı DEĞİL, mockup
   (deneme.php) gibi footer'ın ÜSTÜNDE tam genişlik ayrı bir bant. Aynı
   #api/newsletter.php formu/JS'i, sadece markup/konum değişti. ---- */
.newsletter-band{background:#f6f7f9;border-top:1px solid var(--eka2-line);border-bottom:1px solid var(--eka2-line);padding:34px 0}
.newsletter-band-inner{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;text-align:center}
.newsletter-band-icon{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--eka2-orange);font-size:1.35rem;
  display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 20px rgba(242,96,12,.14)}
.newsletter-band-copy{display:flex;flex-direction:column;gap:2px;text-align:left}
.newsletter-band-copy strong{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--eka2-ink)}
.newsletter-band-copy span{font-size:.85rem;color:var(--eka2-muted)}
.newsletter-band-form{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--eka2-line);
  border-radius:12px;padding:5px 5px 5px 18px;flex:0 1 380px;min-width:240px;transition:border-color .25s,box-shadow .25s}
.newsletter-band-form:focus-within{border-color:var(--eka2-orange);box-shadow:0 0 0 3px rgba(242,96,12,.12)}
.newsletter-band-form input{flex:1;border:none;padding:10px 0;font-family:inherit;font-size:.9rem;background:none;min-width:0}
.newsletter-band-form input:focus{outline:none}
.newsletter-band-form button{flex:none;border:none;background:var(--eka2-orange);color:#fff;border-radius:9px;
  padding:11px 18px;font-size:.86rem;font-weight:700;font-family:inherit;display:flex;align-items:center;gap:6px;
  cursor:pointer;transition:background .2s}
.newsletter-band-form button:hover{background:var(--eka2-orange-2)}
.footer-newsletter-msg{display:block;margin-top:10px;font-size:.8rem;text-align:center}

.paybar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:8px;margin-top:18px;border-top:1px solid #2a3038}
.paybar span{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:#9aa1ab;
  border:1px solid #2a3038;border-radius:8px;padding:6px 12px}
.paybar span i{font-size:.9rem}
.footer-nap{margin-top:36px;display:flex;gap:22px;flex-wrap:wrap;font-size:.82rem;color:var(--text-muted)}
.footer-nap span{display:flex;align-items:center;gap:7px}
.footer-nap a{color:inherit}
.footer-bottom{margin-top:26px;padding-top:26px;border-top:1px solid #2a3038;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem;color:#6b7280}
.footer-bottom-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cookie-pref-link{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}
.socials{display:flex;gap:14px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid #2a3038;color:#9aa1ab;display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease)}
.socials a:hover{background:var(--eka2-orange);border-color:var(--eka2-orange);color:#fff;transform:translateY(-3px)}

/* ============================================================
   RESPONSIVE — 1200 / 992 / 768 / 640 / 440
   ============================================================ */

/* ---------- 1200px ---------- */
@media (max-width:1200px){
  .catrow-links a{font-size:.85rem;padding:11px 16px}
  .nav-actions{gap:10px}
  .nav-pill-label{display:none}
  .nav-pill{padding:10px;border-radius:50%}
  .nav-pill i{font-size:1.2rem}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}
  .pd-wrap{gap:40px}
  .footer-grid{gap:40px}
}

/* ---------- 992px — mobil menü devreye girer ---------- */
@media (max-width:992px){
  .catrow{display:none}
  .menu-toggle{display:block;order:-1;margin-right:16px}
  .nav-actions a[aria-label="Favorilerim"]{display:none}
  .header-search{flex:1 1 auto;min-width:0}
  /* 3 öğe kaldığında (hamburger/logo/aksiyonlar) space-between logo'yu tam
     ortaya itiyordu — logo hamburgerin hemen yanına, sola yaslansın diye
     aksiyonlar grubu kendi otomatik margin'iyle sağa itiliyor. */
  .nav-inner{justify-content:flex-start}
  .nav-actions{margin-left:auto}
  .page-head{padding-top:48px;padding-bottom:48px}
  .page-body{padding-top:48px;padding-bottom:48px}
  .pd-section{padding-top:48px}
  /* Rozetler sağdaki sütundan çıkıp başlığın altında yatay şeride döner */
  .page-head.has-badges{flex-direction:column;align-items:flex-start;gap:0}
  .trust-badges{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:24px;animation:none}
  .trust-badge{padding:8px 16px 8px 8px;gap:9px;box-shadow:0 6px 18px rgba(11,13,18,.06)}
  .trust-badge-icon{width:32px;height:32px;font-size:.92rem}
  .trust-badge-text strong{font-size:.8rem}
  .trust-badge-text small{font-size:.7rem}
  .pd-wrap,.cart-wrap{grid-template-columns:1fr;gap:36px}
  .pd-image{max-width:520px}
  .cart-summary{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .contact-wrap{grid-template-columns:1fr;gap:24px}
  .contact-map iframe{height:320px}
  .account-wrap{grid-template-columns:1fr;gap:20px}
  .account-nav{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .account-nav a{flex:1 1 auto;justify-content:center}
}

/* ---------- 768px ---------- */
@media (max-width:768px){
  /* Sağa kayma düzeltmesi (2026-09-28): masaüstündeki 24px nav-inner gap'i,
     hamburger margin'i ve pill padding'leri dar ekranda toplamı container
     genişliğini aşıyordu; logo flex:none olduğu için küçülemiyor, sepet
     ikonu ekran dışına taşıyordu. Boşluklar daraltıldı, logo küçülebilir,
     aksiyon grubu hiçbir zaman sıkışıp taşmıyor. */
  .nav-inner{height:66px;gap:10px;min-width:0}
  .menu-toggle{margin-right:0;flex:none}
  .logo{font-size:1.15rem;flex:0 1 auto;min-width:0;overflow:hidden}
  .logo-img{height:28px;max-width:100%;object-fit:contain;object-position:left center}
  .nav-actions{gap:0;flex:none}
  .nav-pill,.mobile-search-btn{padding:5px}
  .icon-btn:hover{transform:none}
  .mobile-search-btn{display:inline-flex}
  .header-search{display:none}
  .header-search.mobile-open{
    display:flex;align-items:center;gap:8px;position:fixed;top:0;left:0;right:0;z-index:1100;
    background:#fff;padding:14px 16px;margin:0;max-width:none;
    box-shadow:0 12px 30px rgba(11,13,18,.14)}
  .header-search.mobile-open .header-search-form{flex:1;min-width:0}
  .header-search.mobile-open .header-search-results{position:fixed;left:16px;right:16px;top:76px;
    max-height:calc(100vh - 92px);overflow-y:auto}
  .header-search-close{flex:none;background:none;border:none;font-size:1.4rem;
    color:var(--eka2-ink);cursor:pointer;padding:6px;line-height:1}
  .header-search.mobile-open .header-search-close{display:flex}
  .page-head{padding-top:40px;padding-bottom:40px}
  .page-body{padding-top:40px;padding-bottom:40px}
  .pd-section{padding-top:40px}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px}
  .product-image-box{height:220px;border-radius:18px}
  .product-image-box.has-ship-badge{height:auto;aspect-ratio:1/1;border-radius:18px}
  .product-image-box.has-ship-badge img{height:100%}
  .pd-price{font-size:1.45rem}
  .btn-primary,.btn-ghost{padding:13px 22px;font-size:.88rem}
  .cart-summary{padding:22px;border-radius:18px}
  footer{padding:60px 0 32px}
  .footer-bottom{margin-top:44px}
  .field-grid-3{grid-template-columns:1fr 1fr}
}

/* ---------- 640px ---------- */
@media (max-width:640px){
  .container{padding:0 20px}
  .page-head{padding-top:34px;padding-bottom:34px}
  .page-body{padding-top:34px;padding-bottom:34px}
  .pd-section{padding-top:34px}
  /* Dar ekranda kapsüller yan yana sığmayıp 2+1 şeklinde düzensiz sarıyordu.
     Bunun yerine 3 eşit sütunlu, ikon üstte / etiket altta bir güven şeridi. */
  .trust-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    margin-top:20px;width:100%}
  .trust-badge{flex-direction:column;align-items:center;text-align:center;gap:8px;
    padding:14px 6px;border-radius:16px;white-space:normal}
  .trust-badge-icon{width:32px;height:32px;font-size:.95rem}
  .trust-badge-text{align-items:center}
  .trust-badge-text strong{font-size:.72rem;line-height:1.25}
  .trust-badge-text small{display:none}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .product-image-box{height:170px;border-radius:14px;margin-bottom:12px}
  .product-image-box.has-ship-badge{height:auto;aspect-ratio:1/1;border-radius:14px}
  .product-image-box.has-ship-badge img{height:100%}
  .product-title{font-size:.92rem}
  .product-price{font-size:.92rem}
  /* Bu genişlikte başlık uzun olduğunda .product-meta alt alta geçiyor —
     ama fiyat bloğu (.product-price-wrap) kendi flex-start varsayılanıyla
     sola yapışıyordu, oysa daha geniş ekranlarda (row + space-between)
     kartın SAĞ kenarına hizalı duruyordu. Tüm genişliklerde fiyat hep
     sağa yaslı görünsün diye burada da sağa itiliyor (2026-09-28). */
  .product-meta{flex-direction:column;gap:4px}
  .product-meta>.product-price-wrap{align-self:flex-end}
  .card-shipping-badge{font-size:.6rem;padding:5px 8px 5px 7px;gap:3px}
  .card-shipping-badge i{font-size:.76rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1 / -1}
  .footer-heading{margin-bottom:14px}
  .footer-links li{margin-bottom:11px}
  .cart-line{grid-template-columns:60px 1fr;grid-template-rows:auto auto}
  .cart-line img,.cart-line-image-placeholder{width:60px;height:60px}
  .cart-line-price{grid-column:2;justify-self:start}
  .btn-primary,.btn-ghost{width:100%;justify-content:center}
  /* Ürün detayında adet seçici + Sepete Ekle + WhatsApp — Trendyol/Hepsiburada
     tarzı, ekranın altına sabitlenir (sticky). Sayfanın geri kalanının bu
     çubuğun altında kalmaması için body'ye telafi edici alt boşluk eklenir
     (:has() ile sadece bu satırın olduğu sayfada — ürün detayı — devreye girer).
     Kalıcı bir arayüz elemanı olduğu için üst .reveal'dan miras kalan
     kademeli-belirme animasyonu burada iptal edilir — sayfa açılır açılmaz
     anında görünür olması gerekir, 1-2sn gecikmeli belirmemesi için. */
  /* İki satırlık grid: sağda üstte adet+Sepete Ekle, altında (aynı sol
     kenardan başlayan, tam o genişlikte) WhatsApp butonu; solda ise bu iki
     satırın kapladığı yüksekliğe göre dikey ortalanmış fiyat */
  .qty-row{display:grid;grid-template-columns:auto 1fr;column-gap:32px;row-gap:8px;
    align-items:center;flex-wrap:unset;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(11,13,18,.09);border-top:1px solid var(--border-light);
    opacity:1!important;transform:none!important;transition:none!important}
  .qty-row-top{display:flex!important;gap:8px;grid-column:2;grid-row:1}
  /* Sticky çubukta adet kutusu Sepete Ekle'ye daha fazla yer bıraksın diye
     daraltılır (masaüstündeki/normal boyut etkilenmez) */
  .qty-row-top .qty-box{flex:none}
  .qty-row-top .qty-box button{width:30px;height:40px;font-size:1rem}
  .qty-row-top .qty-box input{width:28px;font-size:.88rem}
  .qty-row-top .btn-primary{width:auto;flex:1 1 auto;padding:11px 16px;white-space:nowrap;font-size:.85rem;gap:6px;justify-content:center}
  /* Fiyat solda, doğal genişlikte ve büyükçe — Trendyol/Hepsiburada'daki gibi
     asıl vurgu fiyatta olur; iki satırın (adet/buton + WhatsApp) ortasında
     dikey ortalanır */
  .qty-row-price{display:flex;flex-direction:column;align-items:flex-start;gap:0;
    grid-column:1;grid-row:1/3;align-self:center;line-height:1.2}
  .qty-row-price-old{text-decoration:line-through;color:var(--text-muted);font-size:.72rem;white-space:nowrap}
  .qty-row-price-now{font-weight:700;font-size:1.25rem;color:var(--text-dark);white-space:nowrap}
  /* WhatsApp — adet/buton satırıyla aynı sol kenardan başlar, aynı genişlikte
     ikinci satırda, birincil aksiyonla yarışmayan daha küçük/ikincil görünüm */
  .qty-row .pd-wa-btn{grid-column:2;grid-row:2;width:100%;padding:9px 14px;font-size:.78rem;margin:0;justify-content:center}
  body:has(.qty-row){padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  /* Fiyat artık sticky çubukta göründüğü için eski (üstteki) fiyat bloğu
     mobilde tekrar gösterilmez — çift fiyat görünmesin diye */
  .pd-price-wrap{display:none}
  .variant-pill{padding:9px 15px;font-size:.82rem}
  .pd-title{font-size:1.5rem}
  .field-grid-2,.field-grid-3{grid-template-columns:1fr}
  .contact-info{padding:20px}
  .contact-map{margin-top:24px;border-radius:16px}
  .contact-map iframe{height:260px}
  .account-stats{grid-template-columns:1fr}
  .account-order-row{flex-direction:column;align-items:flex-start;gap:6px}
  .coupon-row{flex-wrap:wrap}
  .coupon-row .btn-ghost{width:100%;justify-content:center}
  .newsletter-band{padding:24px 0}
  .newsletter-band-inner{text-align:center;justify-content:center}
  .newsletter-band-copy{text-align:center}
  .newsletter-band-form{flex:1 1 100%;max-width:400px}
  .star-input{flex-direction:column;align-items:flex-start;gap:6px}
  .star-input-star{padding:4px 3px;font-size:1.35rem}
}

/* ---------- 440px ---------- */
@media (max-width:440px){
  .container{padding:0 16px}
  .nav-inner{height:60px}
  .logo{font-size:1.05rem}
  .logo-img{height:24px}
  .nav-actions{gap:0}
  .nav-pill,.mobile-search-btn{padding:4px}
  .logo-img{height:22px}
  .header-search-form{padding:3px 4px 3px 12px}
  .header-search-form input{font-size:.85rem}
  .page-head{padding-top:28px;padding-bottom:30px}
  .page-body{padding-top:28px;padding-bottom:28px}
  .pd-section{padding-top:28px}
  .page-head h1{font-size:1.5rem}
  /* Dar telefonlarda da satırda 2 ürün kalır (tek sütuna düşmez) */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-image-box{height:140px;border-radius:12px;margin-bottom:10px}
  .product-image-box.has-ship-badge{height:auto;aspect-ratio:1/1;border-radius:12px}
  .product-image-box.has-ship-badge img{height:100%}
  /* En dar kartlarda favori butonu biraz küçülüp rozetle ayni kenar
     bosluguna (12px) hizalanir — sadece ürün kartlarını hedefler
     (.product-card .fav-btn), ürün detayındaki .pd-fav-btn etkilenmez */
  .product-card .fav-btn{width:32px;height:32px;top:12px;right:12px}
  .has-ship-badge .card-shipping-badge{top:8px;left:8px;font-size:.6rem;padding:5px 8px 5px 7px;gap:3px}
  .has-ship-badge .card-shipping-badge i{font-size:.76rem}
  .product-title{font-size:.85rem}
  .product-price{font-size:.85rem}
  .quick-add-btn{padding:10px 6px;font-size:.75rem;gap:5px;border-radius:100px}
  .pd-price{font-size:1.3rem}
  .cart-summary{padding:18px}
  .cart-line{gap:12px}
  .empty-cart{padding:56px 0}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .form-card{padding:20px;border-radius:16px}
}

/* ==========================================================================
   Kart fiyat hizası (2026-09-28) — kategori / alt kategori ızgaraları.
   .product-price-wrap genişliği eski fiyatın genişliği kadar olduğu için
   güncel fiyat bloğun içinde SOLA yaslanıyor, kartlar arasında sağ kenar
   farklı yerlerde bitiyordu. Artık eski + güncel fiyat bloğun sağına yaslı:
   her kartta fiyatın sağ kenarı aynı çizgide.
   ========================================================================== */
.product-meta>.product-price-wrap{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}
.product-meta>.product-price-wrap .product-price,
.product-meta>.product-price-wrap .product-price-old{white-space:nowrap}
.product-meta>.product-price{margin-left:auto;text-align:right}