/* app/static/magaza/components.css
 * eticaret_magaza vitrin bileşenleri -- magaza_base.html'in eski inline
 * <style> bloğundan MEKANİK olarak (değer/seçici değişmeden) çıkarıldı.
 * Kaynak: app/templates/eticaret_magaza/magaza_base.html (Faz 1 öncesi hali,
 * git geçmişinde). Tek istisna: .m-foot-yukari / .ile-whatsapp bloğu -- bu
 * dosya artık Jinja render edilmediği için {% if whatsapp_no %} koşulu
 * class tabanlı bir değiştiriciye çevrildi (aşağıdaki not).
 * bkz. app/modules/eticaret_magaza/DESIGN.md,
 *      ETICARET_MAGAZA_STIL_MODULU_Yol_Haritasi.md Faz 1.
 */
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.55; }
  a{ color:inherit; }
  img{ max-width:100%; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

  /* ── Header (kullanıcı isteği, hamdidede.com anasayfa yeniden tasarımı,
     2026-08-31): eskiden düz metin linkli sade bir şeritti (Favorilerim/
     Hesabım/Sepetim yazılı) — artık sol: hamburger (kategori çekmecesi) +
     arama ikonu, orta: büyük mağaza adı, sağ: rozetli ikonlar. `vitrin.html`/
     `urun_detay.html` KENDİ `.v-headrow`'unu kullanmaya devam ediyor (o
     sayfaların hirdavat istisnası, DEĞİŞMEDİ) — bu yalnızca paylaşılan
     `.m-nav`, yani diğer TÜM sayfalarda (anasayfa dahil) görünen header. ── */
  .m-nav{ display:flex; align-items:center; gap:10px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line); }
  .m-nav-ikon-btn{
    flex:0 0 auto; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border:none; background:none; color:var(--ink); cursor:pointer; padding:0; border-radius:8px;
  }
  .m-nav-ikon-btn:hover{ background:var(--surface-2); }
  .m-logo{ font-family:var(--font-display); font-weight:700; font-size:19px; text-transform:uppercase; text-decoration:none; }
  .m-logo span{ color:var(--accent); }
  .m-logo-buyuk{ margin:0 auto; font-size:24px; letter-spacing:.01em; white-space:nowrap; }
  .m-nav-sag{ margin-left:auto; display:flex; align-items:center; gap:6px; }
  .m-icon-link{
    position:relative; flex:0 0 auto; width:38px; height:38px; display:flex; align-items:center;
    justify-content:center; color:var(--ink-soft); text-decoration:none; border-radius:8px;
  }
  .m-icon-link:hover{ color:var(--accent); background:var(--surface-2); }
  .m-icon-etiket{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .m-icon-rozet, .js-favori-rozet{
    display:none; position:absolute; top:1px; right:1px; background:var(--accent); color:var(--accent-ink);
    font-size:9.5px; font-weight:700; border-radius:100px; min-width:15px; height:15px;
    align-items:center; justify-content:center; padding:0 3px; line-height:1;
  }
  .m-icon-rozet.show, .js-favori-rozet.show{ display:flex; }
  .m-nav-arama{ display:none; background:var(--surface); border-bottom:1px solid var(--line); }
  .m-nav-arama.acik{ display:block; }
  .m-nav-arama form{ padding:10px 20px; }
  @media (max-width:600px){ .m-logo-buyuk{ font-size:16px; } }

  /* ── Hamburger'ın açtığı kategori çekmecesi — #siparisTakipModal/
     #vFiltreSheet ile AYNI perde+panel deseni (madde 9 DRY), soldan açılır. ── */
  .m-kat-drawer{ position:fixed; inset:0; z-index:1200; display:none; }
  .m-kat-drawer.acik{ display:block; }
  .m-kat-drawer .perde{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
  .m-kat-drawer .panel{
    position:absolute; top:0; left:0; bottom:0; width:290px; max-width:84vw; overflow-y:auto;
    background:var(--surface); box-shadow:3px 0 24px rgba(0,0,0,.22); padding:18px;
  }
  .m-kat-drawer .panel-baslik{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .m-kat-drawer .panel-baslik h3{ font-family:var(--font-display); font-size:16px; margin:0; text-transform:uppercase; }
  .m-kat-drawer .panel-baslik button{ background:none; border:none; font-size:22px; line-height:1; color:var(--ink-faint); cursor:pointer; }
  .m-kat-liste{ list-style:none; margin:0; padding:0; }
  .m-kat-liste li{ border-bottom:1px solid var(--line); }
  .m-kat-liste a{ display:block; padding:11px 2px; font-size:13.5px; font-weight:600; color:var(--ink-soft); text-decoration:none; }
  .m-kat-liste a:hover{ color:var(--accent); }

  .m-layout{ display:grid; grid-template-columns:220px 1fr; gap:0; max-width:1180px; margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line); align-items:start; }
  .m-side{ padding:20px 16px; border-right:1px solid var(--line); background:var(--surface-2); }
  .m-side-title{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
  .m-breadcrumb{ font-size:11.5px; color:var(--ink-faint); margin-bottom:14px; line-height:1.7; }
  .m-breadcrumb a{ color:var(--ink-faint); text-decoration:none; }
  .m-breadcrumb a.on{ color:var(--ink); font-weight:700; }
  .m-breadcrumb a:hover{ color:var(--accent); }
  .m-breadcrumb .sep{ margin:0 4px; color:var(--line-strong); }

  .m-cat-tree{ list-style:none; margin:0; padding:0; }
  .m-cat-tree li{ margin-bottom:2px; }
  .m-cat-link{ display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:13px; color:var(--ink-soft); text-decoration:none; padding:7px 8px; border-radius:6px; border-left:2px solid transparent; }
  .m-cat-link:hover{ background:var(--surface); }
  .m-cat-link.on{ color:var(--ink); font-weight:700; border-left-color:var(--accent); background:var(--surface); }
  .m-cat-link .chev{ flex:0 0 auto; opacity:.5; }

  .m-content{ display:flex; flex-direction:column; min-width:0; }

  .m-filterbar{ display:flex; flex-direction:column; gap:10px; background:var(--surface); border-bottom:1px solid var(--line); padding:14px 20px; }
  .m-filterbar-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .m-input, .m-select{ font-family:var(--font-body); font-size:12.5px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; }
  .m-input:focus, .m-select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .m-search{ flex:1 1 220px; min-width:160px; }
  .m-price-range{ display:flex; align-items:center; gap:6px; }
  .m-price-range .m-input{ width:88px; font-family:var(--font-mono); }
  .m-price-range .sep{ color:var(--ink-faint); }
  .m-check{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
  .m-check input{ accent-color:var(--accent); width:15px; height:15px; }
  .m-filter-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
  .m-clear-link{ font-size:11.5px; color:var(--ink-faint); text-decoration:underline; white-space:nowrap; }
  .m-clear-link:hover{ color:var(--accent); }
  .m-view-toggle{ display:flex; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; margin-left:auto; }
  .m-view-toggle button{ border:none; background:var(--surface-2); color:var(--ink-soft); padding:7px 9px; cursor:pointer; display:flex; }
  .m-view-toggle button.on{ background:var(--accent); color:var(--accent-ink); }

  .m-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px; padding:20px; align-content:start; align-items:start; }
  .m-grid.list-view{ grid-template-columns:1fr; }
  .m-grid.list-view .m-card{ flex-direction:row; }
  .m-grid.list-view .m-card .accent-bar{ width:4px; height:auto; }
  .m-grid.list-view .m-sw{ width:140px; aspect-ratio:1; flex:0 0 auto; }
  .m-grid.list-view .m-cb{ flex-direction:row; align-items:center; flex-wrap:wrap; }
  .m-grid.list-view .m-name{ min-height:0; flex:1 1 220px; }
  .m-grid.list-view .m-pr-row{ margin-top:0; }
  .m-grid.list-view form.inline{ flex:0 0 auto; }
  .m-grid.list-view .btn-block{ width:auto; }
  .m-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(0,0,0,.04); }
  .m-card .accent-bar{ height:4px; background:var(--accent); }
  /* ── Favori (kalp) butonu — ürün kartının sağ üstünde, görsel alanının
     (.m-sw) ÜZERİNDE ama ayrı bir <a> içinde olmadığı için tıklaması
     "Sepete Ekle" butonuyla aynı satırda görsele giden linkle çakışmaz.
     Dolu/boş durumu sunucu tarafında render edilir (favori_ids, madde: sayfa
     başına tek sorgu) — JS yalnızca toggle sonrası sınıfı değiştirir. ── */
  .m-fav-btn{
    position:absolute; top:8px; right:8px; z-index:2; width:28px; height:28px;
    border-radius:50%; border:1px solid var(--line); background:var(--surface);
    color:var(--ink-faint); display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0;
  }
  .m-fav-btn.on{ color:var(--accent); border-color:var(--accent); }
  .m-fav-btn[disabled]{ opacity:.6; cursor:default; }
  /* padding + object-fit:contain (kartlardaki <img> inline style'ı) BİLEREK
     DESIGN.md'nin eski "object-fit:cover" kararının yerini alıyor — gerçek
     ürün fotoğrafları çok farklı çerçeveleme/boşluk oranlarıyla yüklenmiş,
     cover kırpması ürünleri kartlar arası tutarsız büyüklükte gösteriyordu
     (kullanıcı bulgusu, 2026-08-27). contain + dolgu, kaynak fotoğraf ne
     olursa olsun kartı tek tip gösterir. */
  .m-sw{ aspect-ratio:4/3; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--line-strong); position:relative; padding:12px; text-decoration:none; }
  .m-sw::before{ content:""; width:34px; height:34px; border-radius:8px; border:2px solid var(--line-strong); }
  .m-sw span{ position:absolute; bottom:8px; font-size:10.5px; color:var(--ink-faint); }
  .m-cb{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .m-sku{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
  .m-name{ font-size:13.5px; font-weight:600; line-height:1.35; min-height:2.6em; }
  .m-name a{ text-decoration:none; color:inherit; }
  .m-pr-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; }
  .m-price{ font-family:var(--font-mono); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; }
  .m-old-price{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); text-decoration:line-through; margin-right:6px; }
  .m-stock{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--good); }
  .m-stock::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--good); }
  .m-stock.yok{ color:var(--ink-faint); }
  .m-stock.yok::before{ background:var(--ink-faint); }

  .btn{ font-family:var(--font-body); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.02em;
        border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
        padding:9px 14px; cursor:pointer; text-align:center; }
  .btn-accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .btn-block{ width:100%; }
  form.inline{ display:inline; }

  .m-flash{ background:var(--good-bg); color:var(--good); border:1px solid var(--good); border-radius:8px; padding:10px 14px; margin:14px 20px 0; font-size:13px; }

  footer.m-foot{ background:var(--surface-2); border-top:1px solid var(--line); margin-top:30px; }
  .m-foot-cols{
    max-width:1180px; margin:0 auto; padding:34px 20px 26px;
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:26px;
  }
  .m-foot-col h4{
    font-family:var(--font-display); font-weight:600; font-size:11.5px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px;
  }
  .m-foot-col a, .m-foot-col span.satir{
    display:block; font-size:12.5px; color:var(--ink-soft); text-decoration:none; margin-bottom:8px;
  }
  .m-foot-col a:hover{ color:var(--accent); }
  .m-foot-sosyal{ display:flex; gap:8px; margin-top:6px; }
  .m-foot-sosyal a{
    width:32px; height:32px; border:1px solid var(--line); border-radius:8px; display:flex;
    align-items:center; justify-content:center; color:var(--ink-soft);
  }
  .m-foot-sosyal a:hover{ color:var(--accent); border-color:var(--accent); }
  .m-foot-bulten-metin{ font-size:12.5px; color:var(--ink-soft); margin:0 0 10px; }
  .m-foot-bulten-form{ display:flex; gap:6px; }
  .m-foot-bulten-form input{ flex:1; min-width:0; }
  .m-foot-bulten-gonder{
    flex:0 0 auto; width:38px; height:38px; border-radius:8px; border:1px solid var(--accent);
    background:var(--accent); color:var(--accent-ink); display:flex; align-items:center;
    justify-content:center; cursor:pointer;
  }
  .m-foot-alt{
    border-top:1px solid var(--line); padding:14px 20px; text-align:center;
    color:var(--ink-faint); font-size:11.5px;
  }
  /* ── Yüzen WhatsApp butonu (kullanıcı isteği, 2026-08-31) — yalnızca
     `whatsapp_no` gerçekten çözülebildiyse render edilir (bkz. routes.py::
     `_whatsapp_no_cozumle`). "Yukarı çık" butonu, varsa WhatsApp'ın
     ÜZERİNDE kalacak şekilde konumu Jinja ile koşullu kayar. ── */
  .m-whatsapp-fab{
    position:fixed; right:30px; bottom:30px; z-index:950; width:52px; height:52px;
    border-radius:50%; background:#25d366; color:#fff; display:flex; align-items:center;
    justify-content:center; text-decoration:none; box-shadow:0 3px 14px rgba(0,0,0,.25);
  }
  .m-whatsapp-fab:hover{ background:#1ebe5b; }
  @media (max-width:760px){ .m-whatsapp-fab{ right:16px; bottom:92px; } }
  .m-foot-yukari{
    position:fixed; right:16px; bottom:16px; z-index:900; width:40px; height:40px;
    border-radius:50%; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12); opacity:0; pointer-events:none;
    transition:opacity .2s;
  }
  .m-foot-yukari.gorunur{ opacity:1; pointer-events:auto; }
  /* whatsapp_no varsa/yoksa iki farklı konum -- eskiden Jinja {% if %} ile
     koşullu CSS üretiliyordu (bu dosya artık statik olduğu için mümkün
     değil); .ile-whatsapp değiştirici sınıfı (magaza_base.html'de
     `{{ ' ile-whatsapp' if whatsapp_no else '' }}` ile eklenir) AYNI sonucu
     üretir -- iki sınıflı seçici tek sınıflıdan daha özgül olduğu için
     kaynak sırasından bağımsız kazanır (ETICARET_MAGAZA_STIL_MODULU_
     Yol_Haritasi.md Faz 1; davranış eşdeğerliği elle doğrulandı). */
  @media (max-width:760px){ .m-foot-yukari{ bottom:78px; } }
  .m-foot-yukari.ile-whatsapp{ right:30px; bottom:96px; }
  @media (max-width:760px){ .m-foot-yukari.ile-whatsapp{ right:16px; bottom:158px; } }

  @media (max-width:760px){
    .m-layout{ grid-template-columns:1fr; }
    .m-side{ border-right:none; border-bottom:1px solid var(--line); }
    .m-grid{ grid-template-columns:1fr 1fr; gap:10px; padding:10px; padding-bottom:86px; }
    .m-cb{ padding:9px 10px 10px; gap:4px; }
    .m-name{ font-size:12.5px; min-height:2.3em; }
    .m-price{ font-size:14px; }
    /* Arama kutusu kalır — yalnızca marka/fiyat/sıra/checkbox satırı
       FAB+bottom-sheet ile değişir; JS başarısız olursa hiç gizlenmez
       (progressive enhancement, madde 0). Pozisyonel :nth-child yerine
       açık sınıf — gizli kategori input'u DOM'a şartlı girip pozisyonu
       kaydırabiliyordu. */
    body.js-filtre-aktif .m-filterbar-row--detay{ display:none; }
  }

  /* ── Alt navigasyon çubuğu (mobil, ≤760px) — mobile/base_mobile.html::.bottom-nav
     ile aynı desen (ikon+etiket sekmeler). Önceki koşullu "sepette N ürün var"
     bandının (#magazaSepetBar) yerini alır: sepet adedi artık bu çubuğun Sepetim
     sekmesindeki rozette gösteriliyor, aynı magazaSepetGuncelle() JS fonksiyonu
     (vitrin.html'in sepete-ekle AJAX'ı da bunu çağırıyor, imza korunmalı) besliyor. ── */
  .m-bottomnav{ display:none; }
  @media (max-width:760px){
    body{ padding-bottom:64px; }
    .m-bottomnav{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1000;
      background:var(--surface); border-top:1px solid var(--line);
      box-shadow:0 -2px 10px rgba(0,0,0,.08);
    }
    .m-bottomnav a{
      flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
      padding:8px 4px 7px; color:var(--ink-faint); text-decoration:none;
      font-size:10.5px; font-weight:600; position:relative;
    }
    .m-bottomnav a.on{ color:var(--accent); }
    .m-bottomnav a svg{ width:21px; height:21px; }
    .m-bottomnav .rozet{
      position:absolute; top:3px; right:calc(50% - 20px);
      background:var(--accent); color:var(--accent-ink);
      font-size:9.5px; font-weight:700; line-height:1; border-radius:100px;
      min-width:15px; height:15px; display:none; align-items:center; justify-content:center;
      padding:0 3px;
    }
    .m-bottomnav .rozet.show{ display:flex; }
  }
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* ── Sipariş Takibi modalı — site geneli (hirdavat üst şeridindeki
     "Sipariş Takibi" tetikleyicisi, kullanıcı isteği 2026-08-27/31: misafir
     dahil oturumsuz takip, "sayfada modal açılır"). vitrin.html'in kendi
     #vFiltreSheet'iyle AYNI perde/panel deseni — burada global çünkü
     tetikleyici birden fazla sayfada (vitrin/urun_detay) kullanılıyor. ── */
  #siparisTakipModal{ position:fixed; inset:0; z-index:1200; display:none; }
  #siparisTakipModal.acik{ display:block; }
  #siparisTakipModal .perde{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
  #siparisTakipModal .panel{
    position:relative; max-width:420px; margin:8vh auto 0; background:var(--surface);
    border-radius:14px; padding:22px 22px 24px; box-shadow:0 12px 40px rgba(0,0,0,.25);
  }
  #siparisTakipModal .panel-baslik{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
  #siparisTakipModal .panel-baslik h3{ font-family:var(--font-display); font-size:16px; margin:0; }
  #siparisTakipModal .panel-baslik button{ background:none; border:none; font-size:22px; line-height:1; color:var(--ink-faint); cursor:pointer; }
  #siparisTakipModal p.aciklama{ font-size:12.5px; color:var(--ink-faint); margin:0 0 16px; }
  #siparisTakipModal label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:5px; }
  #siparisTakipModal .alan{ margin-bottom:12px; }
  #siparisTakipModal input[type="text"]{
    width:100%; font-family:var(--font-body); font-size:13.5px; color:var(--ink);
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px; padding:10px;
  }
  #siparisTakipModal .hata{ display:none; color:#c0392b; font-size:12.5px; margin:2px 0 10px; }
  #siparisTakipModal .hata.show{ display:block; }
  #siparisTakipModal .sonuc{ display:none; border-top:1px dashed var(--line); margin-top:16px; padding-top:14px; }
  #siparisTakipModal .sonuc.show{ display:block; }
  #siparisTakipModal .sonuc .satir{ display:flex; justify-content:space-between; font-size:13px; padding:5px 0; gap:12px; }
  #siparisTakipModal .sonuc .satir b{ color:var(--ink); text-align:right; }
  #siparisTakipModal .st-durum{
    display:inline-block; background:var(--surface-2); color:var(--ink-soft); font-size:11.5px;
    font-weight:700; border-radius:100px; padding:3px 10px;
  }

  /* ── Karşılama modalı ("Şimdi Üye Ol / kampanyalardan haberdar ol") --
     Faz 4c (2026-09-02, kullanıcı isteği: hamdidede.com'daki eşdeğer modal
     referans alınarak). #siparisTakipModal ile AYNI perde/panel açma-kapama
     deseni (madde 9 DRY); tek fark iki sütunlu (görsel + form) düzen. ── */
  #bultenModal{ position:fixed; inset:0; z-index:1300; display:none; }
  #bultenModal.acik{ display:block; }
  #bultenModal .perde{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
  #bultenModal .panel{
    position:relative; max-width:640px; margin:6vh auto 0; background:var(--surface);
    border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3);
    display:flex; min-height:340px;
  }
  #bultenModal .panel.resimsiz{ max-width:420px; min-height:0; }
  #bultenModal .bm-kapat{
    /* 44x44 -- SEO/UX denetimi 2026-09-08 (High bulgu): eski 30x30 dokunma
       hedefi WCAG/mobil dokunma hedefi asgarisinin (44px) altındaydı. */
    position:absolute; top:6px; right:8px; z-index:2; background:rgba(0,0,0,.06);
    border:none; width:44px; height:44px; border-radius:100px; font-size:20px; line-height:1;
    color:var(--ink); cursor:pointer;
  }
  #bultenModal .bm-gorsel{ flex:1 1 45%; min-width:0; }
  #bultenModal .bm-gorsel img{ width:100%; height:100%; object-fit:cover; display:block; }
  #bultenModal .bm-icerik{
    flex:1 1 55%; padding:36px 30px; display:flex; flex-direction:column; justify-content:center; gap:12px;
  }
  #bultenModal .panel.resimsiz .bm-icerik{ flex:1 1 100%; }
  #bultenModal .bm-icerik h3{
    font-family:var(--font-display); font-size:23px; font-weight:800; margin:0; text-align:center;
  }
  #bultenModal .bm-aciklama{ font-size:13px; color:var(--ink-soft); text-align:center; margin:0 0 6px; }
  #bultenModal form{ display:flex; flex-direction:column; gap:10px; }
  #bultenModal .m-input{ width:100%; padding:11px 12px; font-size:13.5px; }
  #bultenModal .bm-tel{ display:flex; align-items:center; gap:8px; }
  #bultenModal .bm-tel-on-ek{
    flex:0 0 auto; font-size:13.5px; font-weight:700; color:var(--ink-soft);
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px; padding:11px 10px;
  }
  #bultenModal .btn{ font-size:13px; padding:12px; }
  #bultenModal .bm-onay-metni{ font-size:10.5px; color:var(--ink-faint); text-align:center; margin:4px 0 0; }
  #bultenModal .bm-onay-metni a{ color:var(--ink-soft); text-decoration:underline; }
  @media (max-width:640px){
    #bultenModal .panel{ flex-direction:column; max-width:92vw; margin:4vh auto 0; min-height:0; }
    #bultenModal .bm-gorsel{ flex:0 0 150px; }
    #bultenModal .bm-icerik{ padding:24px 20px 28px; }
  }

  /* ── Kategori şeridi (.v-catnav) -- Faz 3a (2026-09-02), ETICARET_MAGAZA_
     STIL_MODULU_Yol_Haritasi.md. Vitrin.html VE urun_detay.html'de kelimesi
     kelimesine AYNI kurallar olarak tekrarlanıyordu (iki dosyadan buraya
     taşındı, madde 9 DRY); artık magaza_base.html'in paylaşılan sitewide
     şeridi de (menu_stili_kodu == 'genis_kategori_seridi') AYNI kuralları
     kullanıyor. ── */
  .v-catnav{ background:var(--surface); border-bottom:1px solid var(--line); }
  .v-catnav-inner{
    max-width:1600px; margin:0 auto; padding:0 20px; display:flex; align-items:center;
    gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .v-catnav-inner::-webkit-scrollbar{ display:none; }
  .v-catnav-link{
    flex:0 0 auto; padding:11px 14px; font-family:var(--font-body); font-weight:600;
    font-size:12.5px; color:var(--ink-soft); text-decoration:none; white-space:nowrap;
    border-bottom:2px solid transparent;
  }
  .v-catnav-link:hover{ color:var(--ink); }
  .v-catnav-link.on{ color:var(--accent); border-bottom-color:var(--accent); }

  /* ── Layout shell -- Faz 3b (2026-09-02), ETICARET_MAGAZA_STIL_MODULU_
     Yol_Haritasi.md §3 madde 5. magaza_layout_taban.html + layout_tek_sutun/
     layout_sidebar/layout_tam_genislik.html icin paylasilan siniflar.
     Bugun HICBIR mevcut sayfa bu siniflari kullanmiyor (bkz. o dosyalarin
     kendi docstring'i) -- yalnizca ileride yazilacak yeni sayfalar icin. ── */
  .lay-tek-sutun{ margin:0 auto; padding:24px 20px 40px; }
  .lay-tam-genislik{ width:100%; }
  .lay-sidebar{
    display:grid; grid-template-columns:240px 1fr; gap:28px;
    max-width:1400px; margin:0 auto; padding:24px 20px 40px; align-items:start;
  }
  .lay-sidebar--sag{ grid-template-columns:1fr 240px; }
  .lay-sidebar--sag .lay-sidebar-panel{ order:2; }
  .lay-sidebar-panel{
    background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px;
  }
  @media (max-width:760px){
    .lay-sidebar{ grid-template-columns:1fr; }
    .lay-sidebar--sag .lay-sidebar-panel{ order:0; }
  }

  /* ── Mega Menü (.v-catnav--mega) -- Faz 3d (2026-09-02), ETICARET_MAGAZA_
     STIL_MODULU_Yol_Haritasi.md, kullanıcı onayıyla. `.v-cat-mega-item`
     yalnızca `k.cocuk_var` olan kategoriler için `components/KategoriSeridi.
     jinja`'de üretilir -- alt kategorisi olmayan bir başlık asla hover
     paneli almaz (bkz. o bileşenin docstring'i). Panel içeriği başlangıçta
     boş; `app/static/magaza/mega_menu.js` `api_kategori_seviyesi` uç
     noktasından TEMBEL doldurur. DESIGN.md "Elevation" bölümü bu ana kadar
     "Modal/dropdown: bu modülde henüz yok (Faz 2+)" diyordu -- ilk gerçek
     dropdown gölgesi burada tanımlandı, DESIGN.md güncellenecek. ── */
  .v-cat-mega-item{ position:relative; }
  /* KIRPMA HATASI (bulundu+düzeltildi 2026-09-02): `.v-catnav-inner`in
     `overflow-x:auto`'su, CSS spesifikasyonu gereği `overflow-y`yi de
     örtük olarak `auto`ya çeviriyor (overflow-x görünür-olmayan bir
     değer alıp overflow-y `visible` bırakılırsa tarayıcı ikisini
     birlikte "auto"laştırır -- tek eksene overflow-y:visible EKLEMEK
     yeterli DEĞİL, tarayıcı yine ikisini birlikte auto'ya döndürüyor).
     Sonuç: `position:absolute` panel `.v-cat-mega-item`e göre doğru
     konumlanıyor ama üstündeki bu overflow:auto kutusunun kırpma
     alanının DIŞINA taşamıyordu -- panel DOM'da/JS'te doğruydu, sadece
     üstten 1-2px görünüyordu. Çözüm: `position:fixed` (fixed, ne
     `.v-cat-mega-item`in ne `.v-catnav-inner`in overflow'undan etkilenir
     -- `.v-catnav`/`.v-catnav-inner` zincirinde transform/filter/
     will-change YOK, doğrulandı, aksi halde fixed de aynı şekilde
     kırpılırdı). `top`/`left` artık CSS'te sabit değil -- viewport
     koordinatı gerektirdiği için `mega_menu.js::paneliKonumla()`
     tarafından her hover/focus'ta `getBoundingClientRect()`'e göre JS ile
     yazılıyor; buradaki `-9999px` yalnızca JS çalışmadan önceki (veya
     .js dosyası hiç yüklenemezse) görünmez güvenli varsayılan. */
  .v-cat-mega-panel{
    display:none; position:fixed; top:-9999px; left:-9999px; z-index:20;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    padding:14px; min-width:260px; max-width:520px;
    grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:2px 18px;
  }
  .v-cat-mega-item:hover .v-cat-mega-panel,
  .v-cat-mega-item:focus-within .v-cat-mega-panel,
  .v-cat-mega-panel.acik{ display:grid; }
  .v-cat-mega-panel a{
    display:block; padding:6px 8px; font-size:13px; color:var(--ink-soft); text-decoration:none;
    border-radius:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .v-cat-mega-panel a:hover, .v-cat-mega-panel a:focus{ color:var(--accent); background:var(--surface-2); }
  .v-cat-mega-panel .mm-durum{ color:var(--ink-faint); font-size:12.5px; padding:6px 8px; grid-column:1/-1; }
  @media (max-width:760px){
    /* Mobilde mega panel ASLA açılmaz -- mevcut hamburger + .m-cat-tree
       drill-down (standart preset'te de zaten var olan davranış) korunur
       (roadmap §2b: "mega panel yalnızca masaüstünde anlamlı"). */
    .v-cat-mega-panel{ display:none !important; }
  }

  /* ── Esnek anasayfa bölüm sistemi -- Faz 4b (2026-09-02), ETICARET_MAGAZA_
     STIL_MODULU_Yol_Haritasi.md §3 madde 10, kullanıcı onayıyla. Yalnızca
     `anasayfa_esnek.html` (anasayfa_duzeni_kodu == 'esnek') kullanır --
     `anasayfa_liman.html`in KENDİ `.lm-*` sınıfları görsel olarak benzer
     ama BİLİNÇLİ OLARAK ayrı tutuldu (o sayfanın inline CSS'i Faz 1'de
     ertelenen "hirdavat istisnası" gibi henüz buraya taşınmadı -- bkz.
     DESIGN.md); iki sistemi tek bir paylaşılan sınıfa zorlamak o sayfayı
     kırma riski taşır. ── */
  .esnek-bolum{ max-width:1180px; margin:0 auto; padding:34px 20px; }
  .esnek-bolum-baslik{
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    margin-bottom:18px; border-bottom:3px solid var(--accent); padding-bottom:10px;
  }
  .esnek-bolum-baslik h2{
    font-family:var(--font-display); font-size:22px; font-weight:800;
    text-transform:uppercase; letter-spacing:.02em; margin:0;
  }
  .esnek-bolum-baslik a{ font-size:12px; font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; }
  .esnek-bolum-baslik a:hover{ text-decoration:underline; }

  .esnek-markalar{ display:flex; flex-wrap:wrap; gap:10px; max-width:1180px; margin:0 auto; padding:0 20px 34px; }
  .esnek-marka-chip{
    border:2px solid var(--ink); border-radius:100px; padding:8px 18px; font-family:var(--font-display);
    font-weight:700; font-size:12.5px; text-transform:uppercase; color:var(--ink); text-decoration:none;
  }
  .esnek-marka-chip:hover{ background:var(--ink); color:var(--bg); }
  .esnek-marka-chip .adet{ opacity:.55; font-weight:500; margin-left:4px; }
  .esnek-marka-logo{
    border:1px solid var(--line); border-radius:10px; padding:14px 20px; background:var(--surface);
    display:flex; align-items:center; justify-content:center;
  }
  .esnek-marka-logo img{ max-height:34px; max-width:120px; object-fit:contain; }

  .esnek-hero{ padding:20px 20px 0; }
  .esnek-hero-serit{
    display:flex; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; max-width:1180px; margin:0 auto;
  }
  .esnek-hero-serit::-webkit-scrollbar{ display:none; }
  .esnek-hero-slayt{
    flex:0 0 min(85vw, 560px); height:280px; border-radius:12px; background-size:cover;
    background-position:center; position:relative; display:flex; align-items:flex-end; overflow:hidden;
  }
  .esnek-hero-slayt-ic{
    padding:20px; color:#fff; width:100%;
    background:linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 70%);
  }
  .esnek-hero-slayt-ic h2{ font-family:var(--font-display); font-size:20px; margin:0 0 6px; text-transform:uppercase; }
  .esnek-hero-slayt-ic p{ font-size:13px; margin:0 0 12px; opacity:.9; }
  @media (max-width:760px){
    .esnek-hero-slayt{ height:220px; }
  }