/* ============================================================
   12-mobil.css — Mobil: hamburger + off-canvas "drawer" + mobil grid
   BISSO × Sephora.com.tr 1:1 — Flatsome child REFERANS (canlı temaya DOKUNMAZ)

   Flatsome'in GERÇEK mobil sınıfları hedeflenir:
     a.icon-menu / .nav-icon                 → hamburger tetikleyici
     .mfp-bg / .off-canvas-overlay           → karartma (scrim / overlay)
     #main-menu / .off-canvas .mfp-content   → soldan kayan panel (drawer)
     ul.nav-sidebar.nav-vertical             → dikey menü listesi
     .nav-sidebar > li > a                   → 1. seviye satır
     .nav-sidebar li li a / .nav-dropdown a  → alt menü (drill-down) satır
     .nav-sidebar .nav-dropdown-toggle       → akordeon ok (alt menü aç/kapa)
     #main-menu .mfp-close                   → kapat (X)
     yardımcı: .bks-mobile-section / .bks-mobile-group-title /
               .bks-mobile-featured / .bks-mobile-featured-link / li.bks-highlight

   >>> 2026-06-01 13:18  TAM YENİDEN YAZILDI.
       Önceki dosya YARIM/KESİKTİ — son satır ".nav-sidebar.nav-ver" selektörüyle
       bitiyor, kural gövdesi YOKtu (bir önceki çalıştırma yazma sırasında kesilmiş;
       _ilerleme tablosunda 12. satır da bu yüzden YOKtu) → tüm bölüm baştan üretildi.

   GERÇEK ÖLÇÜ: CANLI sephora.com.tr mobil "drawer" DOM'u (nav.fixed.inset-y-0.left-0),
   Chrome computed-style. Pencere innerWidth 1920'de takılı kaldı → drawer her zaman
   DOM'da render olan mobil bileşendir (kapalıyken translateX(-487)); tipografi/renk/
   boşluk viewport'tan bağımsız okundu. URL'ler çıktıdan ayıklandı (güvenlik filtresi).

   --- ÖLÇÜLEN (drawer) ---
   • Panel  : 487px GENİŞ · BEYAZ #fff · radius 0 · GÖLGE YOK · z-index 51 · iç-pad 0 ·
              h tam (911). Soldan kayar. Telefonda ~tam (scrim arkayı karartır).
   • LİSTE KAPSAYICISI: bg #f2f2f2 + row-gap 4px → satırlar BEYAZ KART, ARALARINDA
              4px GRİ boşluk (gap-0.25 = "ayraç"; gerçek border = 0, dividerEls=0).
              >>> EN ÖNEMLİ DÜZELTME: drawer "tek-renk beyaz" DEĞİL → BEYAZ kartlar
              GRİ #f2f2f2 zemin üstünde (önceki "hep beyaz" kaydı YANLIŞ idi).
   • Bölüm başlığı satırı ("Hesabım"/"Kategoriler"): ŞEFFAF (gri görünür) · pad 16px ·
              16/500 / lh24 / ls.4 / #000.
   • 1. SEVİYE satır (hesap + ana kategori) GÖRÜNEN metin (leaf <span>): 16/500 / lh24 /
              ls.4 / #000 / tt-none · satır BEYAZ · pad 8px · hesap h48 / kategori h40.
              >>> DÜZELTME: eski "16/400" YANLIŞ idi (o yalnız <a> sarmalayıcı fontu);
              leaf metin 500 (footer/mega-menü ile aynı anchor↔leaf düzeltmesi).
   • ALT MENÜ (drill-down) linki: 14/500 / lh20 / ls.35 / #000 — drawer baskın stili
              (leaf histogram n=324).
   • KALIN grup başlığı ("Makyaj"): 14/700 / lh20 / ls.35 / #000 (n=40).
   • ÖNE ÇIKAN başlık ("Sephora Collection"): 20/700 / lh32 / ls.5 / #000 (n=8).
   • VURGU link ("Özel Setler" / "SEPHORA COLLECTION"): Sephora PEMBE rgb(217,34,130)
              → Bisso KIRMIZI #c8102e.
   • Kapat (X): 32×32 glif · #000 · sağ-üst. AYRAÇ (border) YOK.
   • flex-col gap = 4px · listPad 0 · closeBtn 32×32 · logo svg ~119×16.

   BİSSO UYARLAMASI: panel beyaz; liste gri zemin + beyaz kart satır; hover/aktif
   Bisso kırmızı #c8102e; Sephora pembe → Bisso kırmızı; dokunma hedefi 44-48px.

   >>> 2026-06-01 RE-DOĞRULAMA ("en-eski bölüm" rotasyonu; CANLI anasayfa drawer DOM,
       Chrome computed-style; viewport 1920'de DONDU → drawer translateX(-487) KAPALI
       halde ölçüldü; URL'ler ayıklandı). ÖLÇÜLEN & DÜZELTİLEN:
       • Satır yatay iç-boşluğu (drawer inset) = p-1 = 16px (eski 20px → 16px DÜZELTİLDİ).
         NOT: 1920'de "desktop:px-0 desktop:py-0.5" responsive override aktifti (px→0/py→8);
         GERÇEK mobil taban p-1=16px alındı (desktop override artefaktı yok sayıldı).
       • Kapat X = 32×32 #000 (ölçülen buton + glif svg 32×32; eski 44 → 32 DÜZELTİLDİ, 1:1)
         · top/right 16px (üst bar p-1=16; eski 12 → 16).
       • Drill-down chevron = 24×24 #000 (ölçülen) → akordeon toggle glifi 24px.
       • Bölüm başlığı <p> ("Hesabım"/"Kategoriler") = 16/500 lh24 ls.4 #000 · pad 16px ·
         h56 · ŞEFFAF (birebir doğrulandı; eski pad "16px 20px" → 16px).
       DOĞRULANAN (değişmedi): panel 487 #fff r0 GÖLGE-YOK z51 pad0; gri liste #f2f2f2
       gap 4px + BEYAZ kart satırlar; L1 leaf 16/500 lh24 ls.4; drill 14/500 lh20 ls.35;
       grup 14/700; öne-çıkan 20/700 lh32 ls.5; vurgu rgb(217,34,130)→Bisso kırmızı;
       hesap satırı h48 / kategori satırı h40 (justify space-between); logo svg 119×16;
       scrim rgba(10,10,10,.5). (histogram: a16/400 n339 sarmalayıcı · p14/500 n288 drill ·
       span14/700 n40 grup · span16/500 n25 L1 · p20/700 n8 öne-çıkan · a16/400 pembe n2.)
   ============================================================ */


/* ===== 1) HAMBURGER TETİKLEYİCİ + MOBİL HEADER (≤849px) ===== */
@media (max-width:849px){
  /* hamburger ikon — siyah, ~24px (Sephora mobil header sol glif) */
  .header-main a.icon-menu,
  .header-main .nav-icon > a,
  .mobile-nav a.icon-menu{
    color:var(--bks-black) !important;
  }
  .header-main a.icon-menu .icon-menu:before,
  .header-main .nav-icon .icon-menu:before,
  .nav-icon .icon-menu:before{
    font-size:24px !important;
    line-height:1 !important;
  }
  /* mobil logo — wordmark, ~24px yükseklik */
  .header-main #logo img,
  .header-main #logo svg{
    max-height:24px !important;
    width:auto !important;
  }
  /* mobil arama — pill, KENARLIKSIZ #f2f2f2 (01-header dili ile aynı) */
  .header form.ux-search-box,
  .header .ux-search-box.relative,
  .mobile-search .searchform{
    background:#f2f2f2 !important;
    border:0 !important;
    border-radius:var(--bks-r-pill) !important;
    box-shadow:none !important;
  }
  .header .ux-search-box input.search-field,
  .mobile-search input.search-field{
    background:transparent !important;
    border:0 !important;
    font-size:16px !important;
    letter-spacing:.4px !important;
  }
  /* sağ ikonlar siyah + sepet rozeti Bisso kırmızı */
  .header-main .header-button .icon,
  .header-main li.cart-item a.icon{
    color:var(--bks-black) !important;
  }
  .header-main li.cart-item .cart-icon strong,
  .header-main .cart-item .cart-count{
    background:var(--bks-red) !important;
    color:#fff !important;
  }
}


/* ===== 2) KARARTMA (scrim / overlay) — yarı saydam siyah ~.5 ===== */
.mfp-bg,
.mfp-bg.mfp-ready,
.off-canvas-overlay,
.off-canvas .mfp-bg{
  background:rgba(10,10,10,.5) !important;
}


/* ===== 3) KAYAN PANEL (drawer) — BEYAZ, 487px, radius 0, GÖLGE YOK ===== */
#main-menu,
#main-menu.mobile-sidebar,
.off-canvas .mfp-content,
.mfp-content #main-menu{
  background:var(--bks-bg) !important;      /* panel tabanı beyaz (üst alan) */
  width:487px !important;
  max-width:88vw !important;                /* telefonda scrim için sliver bırak */
  height:100% !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  font-family:var(--bks-font);
  overscroll-behavior:contain;
}
/* yumuşak kayma (Sephora duration-slow1 / ease-sideMenu ~.4s) */
.off-canvas .mfp-content,
.mfp-content #main-menu{
  transition:transform .4s cubic-bezier(.22,.61,.36,1) !important;
}
#main-menu .sidebar-menu,
#main-menu > .container,
.mobile-sidebar .sidebar-menu{
  padding:0 !important;
}


/* ===== 4) KAPAT (X) — sağ üst, 32×32 (ÖLÇÜLEN buton+glif), siyah, hover kırmızı ===== */
#main-menu .mfp-close,
.off-canvas .mfp-close{
  width:32px !important;
  height:32px !important;
  line-height:32px !important;
  font-size:28px !important;
  color:var(--bks-black) !important;
  opacity:1 !important;
  top:16px !important;     /* üst bar p-1 = 16px */
  right:16px !important;
}
#main-menu .mfp-close:hover,
.off-canvas .mfp-close:hover{
  color:var(--bks-red) !important;
}


/* ===== 5) MENÜ LİSTESİ — GRİ #f2f2f2 zemin, BEYAZ kart satır, 4px gri gap ===== */
/* EN ÖNEMLİ: drawer "hep beyaz" DEĞİL → beyaz kartlar gri zemin üstünde (ölçülen). */
#main-menu ul.nav-sidebar,
ul.nav-sidebar.nav-vertical{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:#f2f2f2 !important;            /* gri backing → satır araları gri görünür */
  list-style:none !important;
}
/* AYRAÇ (border) YOK — ayrım 4px gri gap ile; her li = BEYAZ kart */
.nav-sidebar.nav-vertical li,
#main-menu .nav-sidebar > li,
#main-menu .nav-sidebar li{
  border:0 !important;
  background:#fff !important;
  margin:0 0 4px !important;                /* gap-0.25 = 4px gri boşluk */
}
#main-menu .nav-sidebar > li:last-child{
  margin-bottom:0 !important;
}

/* 1. SEVİYE satır — leaf 16/500 / lh24 / ls.4 / #000 · pad 8px 20px · min-h48 */
#main-menu .nav-sidebar > li > a,
ul.nav-sidebar.nav-vertical > li > a{
  display:flex !important;
  align-items:center !important;
  min-height:48px !important;
  padding:8px 16px !important;              /* drawer inset = p-1 = 16px (ölçülen) */
  font-size:16px !important;
  font-weight:500 !important;
  line-height:24px !important;
  letter-spacing:.4px !important;
  color:var(--bks-black) !important;
  text-transform:none !important;
}
#main-menu .nav-sidebar > li > a:hover,
#main-menu .nav-sidebar > li.active > a,
ul.nav-sidebar.nav-vertical > li > a:hover{
  color:var(--bks-red) !important;
  background:#fff !important;
}

/* ALT MENÜ (drill-down) linki — 14/500 / lh20 / ls.35 / #000 · hafif girinti */
#main-menu .nav-sidebar li li a,
#main-menu .nav-sidebar .nav-dropdown a,
ul.nav-sidebar.nav-vertical li li a{
  display:flex !important;
  align-items:center !important;
  min-height:36px !important;
  padding:8px 16px 8px 32px !important;     /* sağ inset 16px; sol girinti 32px korunur */
  font-size:14px !important;
  font-weight:500 !important;
  line-height:20px !important;
  letter-spacing:.35px !important;
  color:var(--bks-black) !important;
  text-transform:none !important;
}
#main-menu .nav-sidebar li li a:hover{
  color:var(--bks-red) !important;
}
/* alt menü kapsayıcı — gri zemin görünsün (kendi zemini/gölgesi YOK) */
#main-menu .nav-sidebar .nav-dropdown,
ul.nav-sidebar.nav-vertical ul.nav-dropdown{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  border:0 !important;
}


/* ===== 6) AKORDEON OK (alt menü aç/kapa) — 32×32 kutu, siyah, hover kırmızı ===== */
#main-menu .nav-sidebar .nav-dropdown-toggle,
ul.nav-sidebar.nav-vertical .nav-dropdown-toggle{
  width:32px !important;          /* 32px dokunma kutusu */
  height:32px !important;
  line-height:32px !important;
  font-size:24px !important;      /* chevron glifi 24×24 (ÖLÇÜLEN) */
  color:var(--bks-black) !important;
}
#main-menu .nav-sidebar .nav-dropdown-toggle:hover{
  color:var(--bks-red) !important;
}


/* ===== 7) YARDIMCI BAŞLIKLAR (Sephora drawer hiyerarşisi) ===== */
/* Bölüm başlığı satırı — ŞEFFAF (gri görünür) · 16/500 / lh24 / ls.4 · pad 16px */
.bks-mobile-section,
#main-menu .nav-sidebar li.bks-section,
#main-menu .nav-sidebar li.bks-section > span{
  display:block !important;
  background:transparent !important;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:24px !important;
  letter-spacing:.4px !important;
  color:var(--bks-black) !important;
  text-transform:none !important;
  padding:16px !important;                  /* ölçülen: pad 16px (h56) */
  margin:0 0 4px !important;
}
/* Kalın grup/kategori başlığı — 14/700 / lh20 / ls.35 */
.bks-mobile-group-title,
#main-menu .nav-sidebar li.bks-group > span,
#main-menu .nav-sidebar li.menu-item-has-children.bks-bold > a{
  display:block !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:20px !important;
  letter-spacing:.35px !important;
  color:var(--bks-black) !important;
  text-transform:none !important;
  padding:8px 16px 4px !important;
}
/* Öne çıkan başlık — 20/700 / lh32 / ls.5 (Sephora mobileTitle4) */
.bks-mobile-featured,
#main-menu .widget-title,
#main-menu .off-canvas-title{
  display:block !important;
  font-size:20px !important;
  font-weight:700 !important;
  line-height:32px !important;
  letter-spacing:.5px !important;
  color:var(--bks-black) !important;
  text-transform:none !important;
  padding:16px 16px 8px !important;
  margin:0 !important;
}


/* ===== 8) VURGU / ÖZEL LİNK — Sephora pembe rgb(217,34,130) → Bisso kırmızı ===== */
.bks-mobile-featured-link,
#main-menu li.bks-highlight > a,
#main-menu .nav-sidebar a.bks-accent{
  color:var(--bks-red) !important;
  font-weight:500 !important;
}
.bks-mobile-featured-link:hover,
#main-menu li.bks-highlight > a:hover{
  color:var(--bks-red-dark) !important;
}


/* ===== 9) MOBİL ÜRÜN GRID — 2 sütun (Sephora mobil) + sıkı boşluk ===== */
@media (max-width:549px){
  .products .product-small.col,
  ul.products li.product,
  .shop-container .row > .product-small{
    width:50% !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .products .box-text,
  .product-small .box-text{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* mobil kart CTA tam genişlik (03-urun-karti ile uyumlu) */
  .product-small .add-to-cart-button,
  .product-small .button.bks-card-cta{
    width:100% !important;
  }
}


/* ===== 10) MOBİL DÜZEN — hafif kenar/köşe uyumu ===== */
@media (max-width:849px){
  /* hero/promo köşe (04-anasayfa ile uyumlu) */
  .bks-hero,
  .bks-promo{
    border-radius:var(--bks-r-marketing) !important;
  }
}