/** Shopify CDN: Minification failed

Line 717:1 Unexpected "/"

**/
/* ---------- Font Vars ---------- */
:root {
  --bb-font-nav: "Inter", system-ui, sans-serif;
  --bb-font-body: "Playfair Display", Georgia, "Times New Roman", serif;
  --bb-tracking-tight: .02em;
  --bb-tracking-nav: .08em;
}

/* ---------- Header iskeleti ---------- */
.bb-m-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .2s ease;
  border-bottom: 1px solid transparent;
  overflow: visible;
}

/* Index başlangıç: tamamen transparan */
body.index { margin-top:0 !important; padding-top:0 !important; }
body.index .bb-m-header {
  background: transparent;
  border-bottom-color: transparent;
}

/* Index’te scroll sonrası beyaz */
body.index.scrolled .bb-m-header {
  background-color:#fff !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
  color:#303030 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
body.index.scrolled .bb-m-header .bb-m-topbar{
  color:#000 !important; background:#fff !important;
}

.bb-m-topbar{
  height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  letter-spacing:.08em; 
  color:#2f2f2f;
  background:#fff;
  font-family: var(--bb-font-nav);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: underline;   /* ← eklenen kısım */
}


/* Header iç satır */
.bb-m-row{
  height:70px;
  display:grid; grid-template-columns:48px 1fr auto;
  align-items:center;
  padding-left: 4vh;
  padding-right: 4vh;
}

/* Logo */
.bb-m-logo{ justify-self:center; text-decoration:none; color:#303030; padding-left: 3vh; }
.bb-m-logo .bb-m-logo-img,
.bb-panel__logo .bb-m-logo-img{
  max-height: 22px !important;   
  height: auto !important;
  width: auto !important;
  display: inline-block;
}

@media (max-width: 989px){
  .bb-m-logo .bb-m-logo-img,
  .bb-panel__logo .bb-m-logo-img{
    max-height: 20px !important;
  }
}

/* Sağ aksiyonlar */
.bb-m-actions{ display:flex; align-items:center; justify-self:end; padding-right: 10px;}

/* Sepet rozeti */
.bb-m-cart-badge{
  position:absolute; transform: translate(10px,-8px);
  min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:#111; color:#fff; font-size:11px; line-height:16px; text-align:center;
}

/* Mobil sticky offset */
@media (max-width:989px){
  :root{ --bb-m-header-h:88px; } /* 32 + 56 */
  body{ padding-top:88px; }
}

/* ---------- Drawer (<details>) ---------- */
.bb-m-menu{ position:relative; display:block; padding-left: 15px; }
.bb-m-menu::before{
  content:""; position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  z-index:1999; opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.bb-m-menu[open]::before{ opacity:1; pointer-events:auto; }

.bb-menu-toggle{ position:relative; z-index:2001; pointer-events:auto; }

.bb-drawer{ position:fixed; inset:0; z-index:2000; pointer-events:none; }
.bb-panel{
  position:absolute; left:0; top:0; bottom:0; width:100vw;
  background:#fff; transform: translateX(-100%); transition: transform .28s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 12px 30px rgba(0,0,0,.18);
  display:flex; flex-direction:column; pointer-events:auto; z-index:2002;
  font-family: var(--bb-font-body);
}
.bb-m-menu[open] .bb-panel{ transform: translateX(0); }

.bb-panel__bar{
  position:relative; height:56px;
  display:grid; grid-template-columns:48px 1fr auto;
  align-items:center; padding:0 15px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.bb-close-x{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:#303030; margin-left:-2px; }
.bb-panel__icons{ display:flex; align-items:center; justify-self:end; gap:0; margin-right:-4px; }

.bb-panel__logo{
  position:absolute; left:50%; transform:translateX(-50%);
  text-decoration:none !important; color:#303030;
  font-family: var(--bb-font-nav); font-weight:800; letter-spacing:.08em;
  font-size:20px; line-height:1; white-space:nowrap;
}
.bb-panel__logo .bb-m-logo-img{ display:block; margin:0 auto; }

/* Drawer liste */
.bb-list{ padding:10px 0 0; margin:0; list-style:none; flex:1; overflow:auto; -webkit-overflow-scrolling:touch; }
.bb-rowlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  text-decoration: none;
  color: #303030; /* örnekteki renk */
  border-bottom: 1px solid rgba(0,0,0,.20);

  /* Tipografi: örnekteki stil */
  font-family: var(--font-body-family, 'Milligram') !important;
  font-size: 20px;
  line-height: 29px;
  font-weight: 500;
  letter-spacing: 0; /* condensed/spacing kalktı */
  text-transform: none; /* uppercase kapatıldı */
  text-align: left;
  gap: .8rem; /* ikon boşluğu */
}

.bb-rowlink:hover {
  color: #000; /* hover daha koyu */
}

.bb-rowlink__text{ font-weight:400; }
.bb-rowlink__text.strong{ font-weight:900; }
.bb-rowlink .chev{ margin-left:10px; }
@supports(selector(:has(*))){ .bb-rowlink:not(:has(.strong)) .chev{ display:none; } }

.bb-badge{ display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; letter-spacing:.06em; padding:2px 6px; border-radius:10px; font-family: var(--bb-font-nav); text-transform:uppercase; }
.bb-badge--new{ color:#fff; background:#333; }
.bb-chip{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:999px; background:#ff7aa8; color:#fff; }

.bb-panel__promo{ padding:18px; border-top:1px solid rgba(0,0,0,.08); }
.bb-panel__promo img{ width:100%; height:auto; display:block; border-radius:8px; }

/* Drawer footer */
.bb-panel__footer{
  margin-top:auto; background:#fff; border-top:1px solid rgba(0,0,0,.15);
  display:flex; flex-direction:column; width:100%; box-sizing:border-box;
}
.bb-footer-row{
  border-bottom:1px solid rgba(0,0,0,.25);
  padding:10px 0; display:flex; flex-direction:column;
  font-size:13px; letter-spacing:.03em; color:#111; position:relative;
}
.bb-footer-input{
  border:none; outline:none; background:transparent; padding:6px 0;
  font-size:13px; color:#111; text-transform:uppercase; letter-spacing:.04em;
  font-family: var(--bb-font-body);
}
.bb-footer-input::placeholder{ color:#666; }
.bb-footer-link{ text-decoration:none; color:#111; font-weight:600; font-size:13px; letter-spacing:.05em; }
.bb-search-results{
  margin-top:8px; background:#fff; border:1px solid rgba(0,0,0,.15); border-radius:6px;
  max-height:250px; overflow-y:auto; display:none; position:absolute; z-index:2003;
  font-family: var(--bb-font-body);
}
.bb-search-results a{ display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px; color:#111; text-decoration:none; }
.bb-search-results a:hover{ background:#f6f6f6; }
.bb-search-results img{ width:36px; height:36px; object-fit:cover; border-radius:4px; }


/* ---------- Transparan -> Beyaz durumları ---------- */
.bb-m-header.is-over-hero.is-transparent{
  background:transparent !important; border-bottom-color:transparent !important; color:#fff !important; box-shadow:none !important;
  backdrop-filter: saturate(1.1) blur(2px);
}
.bb-m-header.is-over-hero.is-transparent .bb-m-topbar{
  background:transparent !important; border-bottom-color:transparent !important; color:#fff !important;
}
.bb-m-header.is-solid,
.bb-m-header:not(.is-over-hero){
  background:#fff !important; border-bottom-color: rgba(0,0,0,.08) !important; color:#303030 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.06) !important;
}

/* Drawer açıkken ikon/Logo kesin siyah */
.bb-m-menu[open] ~ .bb-m-logo,
.bb-m-menu[open] ~ .bb-m-actions{ color:#303030 !important; }

.bb-m-menu[open] .bb-drawer{ pointer-events:auto !important; z-index:9999 !important; }
.bb-m-menu[open] .bb-panel{ transform: translateX(0) !important; height:100vh; display:flex; flex-direction:column; }
.bb-m-menu::before{ z-index:9998 !important; }

/* ---------- Desktop görünüm ---------- */
@media (min-width:990px){
  .bb-m-header{ display:block !important; }
  .bb-m-row{
    height:70px; display:grid; grid-template-columns: 1fr auto 1fr;
    align-items:center; gap:16px;
  }
  .bb-m-menu{ display:none !important; }             /* hamburger gizli */
  .bb-m-logo{ justify-self:center; margin-left:0; }  /* logo ortada */
  .bb-m-actions{ justify-self:end;}

  /* Desktop nav görünür */
  .bb-d-nav{ display:block; }
  .bb-d-nav__list{
    display:flex; align-items:center; gap:18px; /* daha kompakt */
    list-style:none; margin:0; padding:0; white-space:nowrap;
  }

  /* NAV linkleri — “ince” görünüm */
  .bb-d-nav__list a{
    font-family: var(--bb-font-nav) !important;
    text-transform: uppercase;
    font-weight: 400;     
    font-size: 12px;   
    letter-spacing: .07em;   
    padding:6px 0;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    opacity:.95;
  }
  .bb-d-nav__list a:hover{ opacity:1; }

  /* NEW rozeti */
  .bb-badge{ padding:2px 6px; border-radius:10px; font-size:10px; font-weight:800; letter-spacing:.04em; line-height:1; }
  .bb-badge--new{ background:#c4b899; color:#111; }

  /* Hero üzerindeyken beyaz; scroll sonrası koyu */
  .bb-m-header.is-over-hero.is-transparent{ color:#fff; }
  .bb-m-header.is-over-hero.is-transparent .bb-d-nav__list a,
  .bb-m-header.is-over-hero.is-transparent .bb-m-icon-btn{ color:#fff; }
  body.scrolled .bb-m-header.is-over-hero.is-transparent{
    background:#fff !important; border-bottom-color: rgba(0,0,0,.08) !important; color:#303030 !important;
    box-shadow:0 2px 12px rgba(0,0,0,.06) !important;
  }
  body.scrolled .bb-m-header.is-over-hero.is-transparent .bb-d-nav__list a,
  body.scrolled .bb-m-header.is-over-hero.is-transparent .bb-m-icon-btn{ color:#303030 !important; }
  .bb-m-header:not(.is-over-hero) .bb-d-nav__list a,
  .bb-m-header:not(.is-over-hero) .bb-m-icon-btn{ color:#303030; }
}

/* Mobilde desktop-nav kapalı */
@media (max-width:989px){ .bb-d-nav{ display:none; } }
/* ===== Header yazıları: underline kapat + text-shadow ekle ===== */

/* Altı çizili olmasın (tüm durumlar) */
.bb-m-header a,
.bb-m-header a:hover,
.bb-m-header a:focus,
.bb-panel a,
.bb-panel a:hover,
.bb-panel a:focus{
  text-decoration: none !important;
}


/* Varsayılan (solid/scrolled) gölge – koyu yazı için hafif */
.bb-m-header .bb-m-topbar,
.bb-m-header .bb-d-nav__list a,
.bb-m-header .bb-m-logo-text,
.bb-m-header .bb-m-icon-btn,
.bb-panel .bb-rowlink,
.bb-panel .bb-footer-link{
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

/* Hero üzerinde beyaz yazılar için daha belirgin gölge */
.bb-m-header.is-over-hero.is-transparent .bb-m-topbar,
.bb-m-header.is-over-hero.is-transparent .bb-d-nav__list a,
.bb-m-header.is-over-hero.is-transparent .bb-m-logo-text,
.bb-m-header.is-over-hero.is-transparent .bb-m-icon-btn{
  text-shadow: 0 1.5px 3px rgba(0,0,0,.35);
}

/* Scroll sonrası tekrar ince gölgeye dön */
body.scrolled .bb-m-header.is-over-hero.is-transparent .bb-m-topbar,
body.scrolled .bb-m-header.is-over-hero.is-transparent .bb-d-nav__list a,
body.scrolled .bb-m-header.is-over-hero.is-transparent .bb-m-logo-text,
body.scrolled .bb-m-header.is-over-hero.is-transparent .bb-m-icon-btn{
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

/* (İsteğe bağlı) drawer satırları hover’da biraz parlasın */
.bb-panel .bb-rowlink:hover,
.bb-panel .bb-footer-link:hover{
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* Mobile (<= 768px) */
@media (max-width: 767.98px){
  .bb-m-row{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .bb-m-logo{
    padding-left: 9vh !important;
  }
}
.bb-m-icon-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bb-m-icon-btn svg {
  display: block;
}
:root { --bb-m-header-h: 88px; } /* senin header mobil yüksekliğin; gerekirse ayarla */

/* Drawer kök */
.bb-search[hidden]{ display:none !important; }
.bb-search{
  position:fixed; inset:0; z-index: 1100;  /* header(1000)’ın üstünde */
}

/* Karanlık arka plan */
.bb-search__overlay{
  position:fixed; inset:0);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}

/* Panel (soldan içeri) */
.bb-search__panel{
  position:fixed; top:var(--bb-m-header-h); /* header ALTINDAN başlat */
  left:0; bottom:0; width:100vw; max-width:520px;
  background:#fff; transform: translateX(-100%);
  transition: transform .28s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  display:flex; flex-direction:column;
   height: calc(100vh - var(--bb-m-header-h, 88px));
  min-height: 0; /* 🔑 iç çocukların taşmadan küçülebilmesi için */
}

/* Açık durum */
.bb-search.is-open .bb-search__overlay{ opacity:1; pointer-events:auto; }
.bb-search.is-open .bb-search__panel{ transform: translateX(0); }

/* Üst arama barı */
.bb-search__bar{
  display:grid; grid-template-columns:48px 1fr 36px;
  align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.bb-search__back,
.bb-search__submit{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0;
  color:#303030; /* ikon rengi buradan gelir */
  cursor:pointer;
}
.bb-search__form{ display:flex; align-items:center; gap:8px; }
.bb-search__input{
  width:100%; height:36px; border:0; outline:none;
  font: 600 14px/1 var(--font-body-family, system-ui);
  letter-spacing:.02em;
}

/* Öneriler */
.bb-search__suggestions {
  padding: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.bb-search__suggestions h5 {
  margin: 0 0 8px;
  font: 700 12px/1 "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #303030;
}

.bb-search__suggestions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bb-search__suggestions a {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  font-size: 12px;
  font-family: "Inter", system-ui, sans-serif;
  color: #303030;
  text-decoration: none;
}

.bb-search__suggestions a:hover {
  background: #fafafa;
}


/* Sonuçlar */
.bb-search__results{
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:8px 8px 80px;
}
.bb-search__item{
  display:grid; grid-template-columns:64px 1fr auto; gap:10px;
  padding:8px; border-bottom:1px solid rgba(0,0,0,.06);
  text-decoration:none; color:#303030;
}
.bb-search__item:hover{ background:#fafafa; }
.bb-search__thumb{ width:64px; height:64px; object-fit:cover; border-radius:6px; border:1px solid rgba(0,0,0,.08); background:#f2f2f2; }
.bb-search__title{font-family: "Inter", system-ui, sans-serif;font-weight:600; font-size:14px; line-height:1.3; }
.bb-search__price{ font-weight:700; font-size:13px; }

/* “See all” */
.bb-search__seeall{
  position:sticky; bottom:0; background:#fff; border-top:1px solid rgba(0,0,0,.08);
  padding:10px; display:flex; justify-content:center;
}
.bb-search__seeall-btn{ display:inline-flex; gap:6px; align-items:center; padding:10px 14px; border:1px solid #303030; text-decoration:none; color:#303030; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }


/* Drawer açıkken header'ı kesin beyaz yap (her şeyi bastır) */
.is-search-open .bb-m-header{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.06) !important;
  color:#111 !important;
}

/* Transparan / over-hero varyantlarını da bastır */
.is-search-open .bb-m-header.is-transparent,
.is-search-open .bb-m-header.is-over-hero{
  background:#fff !important;
}

/* Header içindeki link/ikon/metin renkleri */
.is-search-open .bb-m-header a,
.is-search-open .bb-m-header .bb-m-icon-btn,
.is-search-open .bb-m-header .bb-m-link{
  color:#111 !important;
  opacity:1 !important;
}

/* ===== Desktop: Search Drawer tam genişlik (header'a yapışık, 50vh yükseklik) ===== */
@media (min-width: 1024px){
  /* Overlay: header'ın altından tüm genişlik */
  #bb-search-drawer .bb-search__overlay{
    position: fixed !important;
    top: var(--bb-header-h, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,.4) !important;
    z-index: 998 !important;
  }

  /* Panel: tam genişlik (container'dan bağımsız), header'a yapışık, 50vh */
  #bb-search-drawer.is-open .bb-search__panel,
  #bb-search-drawer.is-open .bb-search{
    position: fixed !important;
    top: var(--bb-header-h, 64px) !important;
    left: 0 !important;
    right: 0 !important;          /* ← tam genişlik için yeterli */
    inset-inline: 0 !important;   /* RTL de tam genişlik */
    width: auto !important;       /* 100vw yerine auto + left/right:0 kullan */
    max-width: none !important;   /* container kısıtlarını kır */
    margin: 0 !important;
    border-radius: 0 !important;

    height: 35vh !important;
    max-height: calc(100vh - var(--bb-header-h, 64px)) !important;

    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.12) !important;
    z-index: 999 !important;
    overflow: auto !important;

    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform .22s ease, opacity .22s ease !important;
  }

  /* Açılmadan önceki durum (animasyon için) */
  #bb-search-drawer:not(.is-open) .bb-search__panel,
  #bb-search-drawer:not(.is-open) .bb-search{
    transform: translateY(-10px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Sonuç alanı kaydırma yüksekliği */
  #bb-search-results{
    max-height: calc(50vh - 90px) !important; /* input yüksekliğinize göre ayarlayın */
    overflow: auto !important;
  }
}

/* Desktop: Suggested Searches = dikey sade metin listesi */
@media (min-width: 1024px){
  .bb-search__suggestions{
    padding: 20px 28px 12px !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
  }
  .bb-search__suggestions h5{
    margin: 0 0 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .02em !important;
    text-transform: none !important; /* görseldeki gibi küçük puntoda */
    color: #6b7280 !important;       /* gri başlık */
  }
  .bb-search__suggestions ul{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;       /* satır satır */
  }
  .bb-search__suggestions li{
    margin: 10px 0 !important;       /* satırlar arası boşluk */
  }
  .bb-search__suggestions a{
    display: inline-block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #111 !important;
    text-decoration: none !important;
  }
  .bb-search__suggestions a:hover{
    text-decoration: underline !important; /* metin hover'ı */
    background: transparent !important;
  }
}
/* Suggested Searches — mobil & desktop aynı dikey metin listesi */
.bb-search__suggestions{
  padding: 20px 28px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.bb-search__suggestions h5{
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: none;   /* “Suggested Searches” küçük ve gri */
  color: #6b7280;
}
.bb-search__suggestions ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;         /* satır satır */
}
.bb-search__suggestions li{
  margin: 10px 0;         /* satırlar arası boşluk */
}
.bb-search__suggestions a{
  display: inline-block;
  padding: 0;             /* chip stili yok */
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
  text-decoration: none;
}
.bb-search__suggestions a:hover{
  text-decoration: underline;
}

/* ok ikonuna hafif hareket */
.bb-search__submit .bb-ic-arrow{
  display:block;
  transition: transform .15s ease;
}
.bb-search__submit:hover .bb-ic-arrow{ transform: translateX(2px); }

/* klavye erişilebilirliği */
.bb-search__submit:focus-visible{
  outline:2px solid #111;
  outline-offset:2px;
  border-radius:6px;
}
/* Ürün sonuçları: grid */
.bb-search__results{
  padding: 16px 24px 8px;
}

.bb-search__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobil: 2 sütun */
  gap: 16px;
}

@media (min-width: 1024px){
  .bb-search__grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* desktop: 4 sütun */
    gap: 28px;
  }
}

/* Kart */
.bb-search__product{
  display: block;
  text-decoration: none;
  color: #303030;
  max-height: 340px;
  max-width: 300px;
}

.bb-search__figure{
  aspect-ratio: 3 / 4;                 /* görsellerin oranını koru */
  background: #f8f6f4;                 /* örnekten açık bej hissi */
  border-radius: 6px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.06);
}

.bb-search__figure img{
  width: 100%; height: 100%; object-fit: contain;
  display: block;
}

.bb-search__ph{ width: 60%; height: 60%; background:#e9e9e9; border-radius:8px; }

/* Başlık ve yıldızlar */
.bb-search__title{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}

/* Hover */
@media (hover:hover){
  .bb-search__product:hover .bb-search__figure{
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
    transform: translateY(-1px);
    transition: .18s ease;
  }
}

/* ===== Desktop panel yüksekliği: ürün yokken 35vh, ürün varken 62vh ===== */
@media (min-width: 1024px){
  /* mevcut açık durum – height animasyonu eklendi */
  #bb-search-drawer.is-open .bb-search__panel{
    height: 35vh !important;
    max-height: calc(100vh - var(--bb-header-h, 64px)) !important;
    transition: height .22s ease, transform .22s ease, opacity .22s ease !important;
  }

  /* ürün gelince paneli büyüt */
  #bb-search-drawer.has-results.is-open .bb-search__panel{
    height: 62vh !important; /* istersen 60–70vh arası oynatabilirsin */
  }
}
/* Logo stacking ve cross-fade */
.bb-m-logo{
  display: grid;               /* iki resmi aynı hücrede üst üste koy */
  place-items: center;
}

.bb-m-logo .bb-m-logo-img--scrolled{ opacity: 0; }
body.scrolled .bb-m-logo .bb-m-logo-img--scrolled{ opacity: 1; }
body.scrolled .bb-m-logo .bb-m-logo-img--default{  opacity: 0; }

*/
.bb-m-header:not(.is-over-hero) .bb-m-logo .bb-m-logo-img--scrolled{ opacity: 1; }
.bb-m-header:not(.is-over-hero) .bb-m-logo .bb-m-logo-img--default{  opacity: 0; }

/* === FIX: Logo stack (görünmeyen yer kaplamasın) === */
.bb-m-logo {                /* merkezdeki <a> */
  display: inline-block;    /* genişlik görünür logodan gelsin */
}

/* <span class="bb-m-logo-stack"> iki görselin wrap’i */
.bb-m-logo .bb-m-logo-stack{
  position: relative;
  display: inline-block;
  line-height: 0;           /* olası satır yüksekliği boşluklarını yok et */
}

/* Başlangıç: default görünür, scrolled görünmez ve yer kaplamaz */
.bb-m-logo .bb-m-logo-img--default{  position: static;   opacity: 1; visibility: visible; pointer-events: auto; }
.bb-m-logo .bb-m-logo-img--scrolled{ position: absolute; inset: 0;  opacity: 0; visibility: hidden; pointer-events: none; }

/* Scroll olunca roller değişir */
body.scrolled .bb-m-logo .bb-m-logo-img--default{  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
body.scrolled .bb-m-logo .bb-m-logo-img--scrolled{ position: static;   opacity: 1; visibility: visible; pointer-events: auto; }

/* Hero üzerinde değilken de scrolled olanı kullan (senin mevcut mantığın) */
.bb-m-header:not(.is-over-hero) .bb-m-logo .bb-m-logo-img--default{  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.bb-m-header:not(.is-over-hero) .bb-m-logo .bb-m-logo-img--scrolled{ position: static;   opacity: 1; visibility: visible; pointer-events: auto; }

/* === BONUS: küçük typo düzeltmesi (fazla parantez) === */
.bb-search__overlay{
  position: fixed;
  inset: 0;                 /* <— burası daha önce inset:0) idi */
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
/* Search açıldığında scrolled logoyu göster (stack varsa) */
.is-search-open .bb-m-logo .bb-m-logo-stack .bb-m-logo-img--default{
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.is-search-open .bb-m-logo .bb-m-logo-stack .bb-m-logo-img--scrolled{
  position: static;
  opacity: 1; visibility: visible; pointer-events: auto;
}
/* Logo’yu JS ile tam merkezlerken padding bozmasın */
.bb-m-logo{ padding-left: 0 !important; }
@media (max-width: 767.98px){
  .bb-m-logo{ padding-left: 0 !important; }
}
/* Tek tip logo kutusu yüksekliği */
:root{
  --bb-logo-h: 28px;          /* desktop yükseklik */
}

@media (max-width: 989px){
  :root{ --bb-logo-h: 18px; } /* mobilde biraz küçük istersen */
}

/* Stack: sabit yükseklikli kutu; genişliği JS ayarlayacak */
.bb-m-logo .bb-m-logo-stack{
  position: relative;
  display: inline-block;
  height: var(--bb-logo-h);
  width: auto;                /* JS ile piksel verilecek */
  line-height: 0;
}

/* IMG’ler kutuyu doldursun; oranı korusun */
.bb-m-logo .bb-m-logo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .25s ease;
}

/* Görünür/görünmez state (aynı kalabilir) */
.bb-m-logo .bb-m-logo-img--default{  position: static;  opacity: 1;  visibility: visible; pointer-events: auto; }
.bb-m-logo .bb-m-logo-img--scrolled{ position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
body.scrolled .bb-m-logo .bb-m-logo-img--default{  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
body.scrolled .bb-m-logo .bb-m-logo-img--scrolled{ position: static;  opacity: 1;  visibility: visible; pointer-events: auto; }

/* Search açıkken de scrolled versiyonu göster */
.is-search-open .bb-m-logo .bb-m-logo-stack .bb-m-logo-img--default{
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
}
.is-search-open .bb-m-logo .bb-m-logo-stack .bb-m-logo-img--scrolled{
  position: static; opacity: 1; visibility: visible; pointer-events: auto;
}

  .is-search-open .bb-m-header.is-over-hero.is-transparent .bb-m-icon-btn{ color:#303030 !important; }
/* === Mobile + Desktop: hero üzerindeyken ikonlar BEYAZ, scrolled sonrası SİYAH === */

/* İlk yükleme: header hero üzerinde ve transparanken → beyaz ikonlar/menü */
.bb-m-header.is-over-hero.is-transparent .bb-m-icon-btn,
.bb-m-header.is-over-hero.is-transparent .bb-m-logo-text,
.bb-m-header.is-over-hero.is-transparent .bb-menu-toggle {  /* hamburger <summary> */
  color: #fff !important;
}

/* Scroll edildiğinde (body.scrolled) tekrar koyu renk */
body.scrolled .bb-m-header.is-over-hero.is-transparent .bb-m-icon-btn,
body.scrolled .bb-m-header.is-over-hero.is-transparent .bb-m-logo-text,
body.scrolled .bb-m-header.is-over-hero.is-transparent .bb-menu-toggle {
  color: #303030 !important;
}

/* Over-hero DEĞİLSE (örn. diğer sayfalar) zaten koyu kalsın */
.bb-m-header:not(.is-over-hero) .bb-m-icon-btn,
.bb-m-header:not(.is-over-hero) .bb-menu-toggle {
  color: #303030 !important;
}

html.is-search-open .bb-m-header.is-over-hero.is-transparent .bb-m-topbar{
  color: #000 !important;
  background: #fff !important;
  text-shadow: none !important;
}

/* Panel logo stack */
.bb-panel__logo{
  position:absolute; left:50%; transform:translateX(-50%);
  text-decoration:none !important; color:#303030;
  height: var(--bb-logo-h, 56px); display:inline-grid; place-items:center;
}
.bb-panel-logo-stack{
  position: relative; display:inline-block; height: var(--bb-logo-h,56px); line-height:0;
}
.bb-panel-logo-img{
  display:block; width:auto; height:100%; max-height: var(--bb-logo-h,56px);
  transition: opacity .25s ease;
}

/* Başlangıçta default görünür, scrolled saklı */
.bb-panel__logo .bb-panel-logo-img--default{  position: static;   opacity:1;  visibility:visible; pointer-events:auto; }
.bb-panel__logo .bb-panel-logo-img--scrolled{ position: absolute; inset:0;   opacity:0;  visibility:hidden; pointer-events:none; }

/* Drawer AÇIKKEN scrolled’ı göster – search ile aynı davranış */
.bb-m-menu[open] .bb-panel__logo .bb-panel-logo-img--default{  position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; }
.bb-m-menu[open] .bb-panel__logo .bb-panel-logo-img--scrolled{ position:static;   opacity:1; visibility:visible; pointer-events:auto; }

/* Drawer AÇIKKEN – merkez LOGO için scrolled’ı göster (panel ile aynı mantık) */
.bb-m-menu[open] ~ .bb-m-logo .bb-m-logo-img--scrolled{
  position: static;
  opacity: 1; visibility: visible; pointer-events: auto;
}
/* bb-rowlink zaten flex + space-between ise bu yeterli */
.bb-rowlink__arrow{
  flex:0 0 auto;
  width:13px; height:16px;
  margin-left:12px;
  opacity:.95;
  transition:transform .14s ease;
}
.bb-rowlink:hover .bb-rowlink__arrow{ transform: translateX(2px); }
/* ===== Drawer font görünümü: BaliBody tarzı ===== */
.bb-panel,
.bb-panel * {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow: none !important; /* drawer içinde gölge yok */
  letter-spacing: 0;            /* temel */
  color: #303030;
}

/* ÜST sabit menü (Shop by … / Self Tan / Skincare / Suncare…) */
.bb-panel > .bb-rowlink {
  /* tipografi */
  font-weight: 600;           /* medium */
  font-size: 20px;            /* görselle aynı yoğunluk */
  line-height: 28px;
  text-transform: none;       /* Title Case */
  letter-spacing: 0;

  /* arayüz */
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb; /* ince gri çizgi */
}

/* ok ikonunun hizası */
.bb-panel > .bb-rowlink .bb-rowlink__arrow{
  width: 16px; height: 16px;
  margin-left: 12px;
  flex: 0 0 auto;
  transform: translateY(1px); /* optik hizalama */
  opacity: .95;
}

/* ALT dinamik liste (BUNDLE & SAVE, TAN FINDER, GUIDES & TIPS…) */
.bb-list .bb-rowlink{
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: .08em;   
  color: #303030;

  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

/* hover’lar sade kalsın */
.bb-panel .bb-rowlink:hover { color:#303030; background: transparent; }
.bb-panel .bb-rowlink:hover .bb-rowlink__arrow { transform: translate(3px,1px); }

/* panel tepe başlığı ve footer için de aynı aileyi koru */
.bb-panel__bar,
.bb-panel__footer { font-family: inherit !important; }
/* ===== Drawer ayırıcı çizgiler: daha koyu + daha kalın ===== */
:root{
  --bb-divider-color: #303030;   /* #e5e7eb yerine biraz daha koyu */
  --bb-divider-weight: 1px;      /* 1px → 2px */
}

/* Üst sabit menü + alt dinamik liste + footer satırları */
.bb-panel > .bb-rowlink,
.bb-list .bb-rowlink,
.bb-panel__footer .bb-footer-row {
  border-bottom-color: var(--bb-divider-color) !important;
  border-bottom-width: var(--bb-divider-weight) !important;
  border-bottom-style: solid !important;
}

/* Hover’da çizgi kaybolmasın, arka planı boş bırak */
.bb-panel .bb-rowlink:hover{
  background: transparent;
}
/* ==== Drawer ayırıcı çizgileri: kısaltılmış (inset'li) ==== */
:root{
  --bb-divider-color: #303030;  /* çizgi rengi */
  --bb-divider-weight: 0.5px;     /* kalınlık */
  --bb-divider-inset: 20px;     /* ←→ her iki yandan boşluk (uzunluğu buradan kısalt) */
}

/* Mevcut border'ı kaldır, yerine pseudo-çizgi kullan */
.bb-panel > .bb-rowlink,
.bb-list .bb-rowlink,
.bb-panel__footer .bb-footer-row{
  position: relative;
  border-bottom: 0 !important;
}

/* Alt çizgi */
.bb-panel > .bb-rowlink::after,
.bb-list .bb-rowlink::after,
.bb-panel__footer .bb-footer-row::after{
  content: "";
  position: absolute;
  left: var(--bb-divider-inset);
  right: var(--bb-divider-inset);
  bottom: 0;
  height: var(--bb-divider-weight);
  background: var(--bb-divider-color);
}

/* Küçük ekranlarda biraz daha kısa çizgi */
@media (max-width: 360px){
  :root{ --bb-divider-inset: 14px; }
}

.bb-footer-input {
  padding: 14px 18px;
}
.bb-footer-link {
    padding: 14px 18px;
}
/* iOS zoom fix: dokununca da 16px üstü kalsın */
html.is-search-open input,
html.is-search-open textarea,
html.is-search-open select,
.bb-search__input,
#drawer-search {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

/* iOS'a özel 17px: bazı cihazlarda 16px yuvarlanıp yine zoom tetiklenebiliyor */
@supports (-webkit-touch-callout: none) {
  html.is-search-open input,
  html.is-search-open textarea,
  html.is-search-open select,
  .bb-search__input,
  #drawer-search {
    font-size: 17px !important;
  }
}
/* Topbar yüksekliği değişkeni */
:root{
  --bb-topbar-h: 32px;                 /* sizin topbar yüksekliğiniz */
}

/* iOS notch güvenli alanı (opsiyonel ama iyi durur) */
@supports(padding-top: env(safe-area-inset-top)){
  :root{ --bb-safe-top: env(safe-area-inset-top); }
}

/* Drawer AÇIKKEN: Topbar'ı sabitle ve en üste al */
.is-drawer-open .bb-m-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10050;                     /* overlay/panel üstünde */
  background: #fff;                   /* transparan header durumunda da okunur kalsın */
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-top: var(--bb-safe-top, 0);
}

/* Drawer AÇIKKEN: Panel topbar'ın altından başlasın */
.is-drawer-open .bb-panel{
  top: calc(var(--bb-topbar-h) + var(--bb-safe-top, 0)) !important;
  height: calc(100vh - (var(--bb-topbar-h) + var(--bb-safe-top, 0))) !important;
}

/* Drawer AÇIKKEN: arka plan overlay'i de topbar'ı kapatmasın */
.is-drawer-open .bb-m-menu::before{
  top: calc(var(--bb-topbar-h) + var(--bb-safe-top, 0));
}

/* Transparan/over-hero iken topbar yazıları drawer açıkken daima koyu kalsın */
.is-drawer-open .bb-m-header.is-over-hero.is-transparent .bb-m-topbar{
  color:#000 !important;
  background:#fff !important;
  text-shadow:none !important;
}
/* Varsayılan: mobilde görünsün */
.bb-search__menu{ display:flex; }

/* Desktop (>=1024px): gizle */
@media (min-width:1024px){
  .bb-search__menu,
  .bb-only-mobile{
    display:none !important;
  }
}
/* Search panel üstünde "Menu" satırı */
.bb-search__menu{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 0;
  border-top: 1px solid rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(0,0,0,.12);
  cursor: pointer;
  text-align: left;
}

.bb-search__menu-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: #111;
}

.bb-search__menu:hover{ background:#fafafa; }
.bb-search__menu:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: 6px;
}
/* Menu satırını panel içinde en üste taşı */
.bb-search__panel{ display:flex; flex-direction:column; }
.bb-search__menu{ order: -1; }           /* ← input’un üstüne */
@media (min-width:1024px){
  .bb-search__menu{ display:none !important; }  /* sadece mobil */
}
.bb-search__menu.bb-only-mobile {
  padding-left: 25px;
  padding-right: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.bb-search__menu.bb-only-mobile .bb-search__menu-text {
  padding-left: 20px;
  font-size: 20px;
}
/* Mobile: back ikonu görünmesin AMA yeri kalsın; submit oku daha sağda dursun */
@media (max-width: 1023.98px){
  /* 1) Back ikonunu görünmez yap (layout korunsun) */
  .bb-search__back{
    visibility: hidden !important;   /* display:none DEĞİL */
    pointer-events: none !important;
  }

  /* 2) Grid kolonlarını eski halindeki gibi tut (sol boşluk korunur) */
  .bb-search__bar{
    position: relative;
    grid-template-columns: 48px 1fr 44px !important;  /* sol 48px spacer + input + submit */
    gap: 8px !important;
    padding: 10px 12px !important;                    /* solda 12px iç boşluk */
  }

  /* 3) Gönder (ok) butonunu sağ kenara çek */
  .bb-search__submit{
    justify-self: end !important;
    width: 44px; height: 44px;
    margin-right: -12px !important;    /* daha da sağa: -14/-16 deneyebilirsin */
  }
  .bb-search__submit svg{ pointer-events:none; }
}
/* Desktop: okları gizle, input tek başına kalsın */
@media (min-width: 1024px){
  .bb-search__back,
  .bb-search__submit{
    display: none !important;
  }
  .bb-search__bar{
    grid-template-columns: 1fr !important; /* sadece input */
    gap: 0 !important;
    padding: 10px 20px !important;         /* istersen ayarla */
  }
  .bb-search__form{ width: 100% !important; }
}
/* 1) Varsayılan: index DIŞINDA header kadar üst boşluk ayır */
body:not(.index){
  padding-top: var(--bb-header-h, 88px);
}

/* 2) Anasayfa: hero üstünde transparan; boşluk verme */
body.index{
  padding-top: 0 !important;
}

/* 3) Drawer/Search açıkken padding-top'u değiştirmeye gerek yok; sadece görsel stil değişiyor. */
html.is-search-open, body.is-search-open { overflow: hidden; }

 
  /* .bb-panel-logo-stack{
    height: calc(48px * 3.6) !important;
    transform: translateY(calc(-1 * ((48px * 3.6 - 48px) / 2)));
  }

  .bb-panel-logo-img{
    max-height: calc(48px * 3.6) !important;
    height: auto !important;  
    width: auto;
    image-rendering: auto;
    -webkit-transform: translateZ(0);
  } */

/* ===========================================
   DESKTOP NAV — PURE WITH (BaliBody style)
   =========================================== */

/* ≥990px: tek satır item, aradaki gap sabit; solda boşluk YOK */
@media (min-width: 990px){
  /* Kapsayıcı(lar) */
  .header__inline-menu, .bb-d-nav{
    display: flex;
    align-items: center;
  }
  .bb-d-nav{ flex: 1 1 auto; }

  /* UL */
  .bb-d-nav__list{
    display: flex;
    flex-wrap: nowrap;                       /* item sarma yok */
    justify-content: flex-start;             /* S O L A  H İ Z A */
    align-items: flex-start;
    column-gap: clamp(25px, 1.2vw, 20px);    /* gap korunur */
    list-style: none;

    /* soldaki fazladan boşlukları sıfırla */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* LI */
  .bb-d-nav__list li{
    flex: 0 0 auto;                          /* genişliği içerik belirlesin */
    min-width: 0;
  }
  .bb-d-nav__list li:first-child{ margin-left: 0 !important; }

  /* A (link) */
  .bb-d-nav__list a{
  
    /* optik tampon (gap’i etkilemez) */
    padding-inline: 2px;

    /* erken kırılma + 2 satır sınırı */
    max-width: 13ch;                         /* temel kırılma genişliği */
    white-space: normal;                     /* kelime bazlı kırılma */
    word-break: keep-all;                    /* kelime ortasında kırma */
    overflow-wrap: break-word;               /* çok uzun kelimede güvenlik ağı */
    text-wrap: balance;                      /* destekliyse iki satırı dengeler */

    display: -webkit-box;                    /* 2 satırda sınırla */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* 990–1280px: daha erken kırılma */
@media (min-width: 990px) and (max-width: 1280px){
  .bb-d-nav__list a{ max-width: 11.5ch; }
}

/* 990–1120px: daha da erken kırılma */
@media (min-width: 990px) and (max-width: 1120px){
  .bb-d-nav__list a{ max-width: 10.5ch; }
}


/* === MEGA MENU — Desktop (≥990px) === */
@media (min-width: 990px){
  /* Header’ı biraz kısa tutalım */
  .bb-m-row{ height: 60px; }
  .bb-m-logo .bb-m-logo-img{ max-height: 48px; }

  .bb-mega{
    position: fixed;
    left: 0; right: 0;
    top: var(--bb-header-h, 60px);
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.01);
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    z-index: 1200;
    display: none; opacity: 0; transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  html.megamenu-open .bb-mega{ display:block; opacity:1; transform:none; pointer-events:auto; }

  /* Sol kolonlar + sağ sabit promo alanı */
.bb-mega__inner{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 25px 25px;      /* sol 60px, sağ 60px */
  display: grid;
  grid-template-columns: 1fr auto; /* sol menü + sağ promo */
  gap: 28px;
  box-sizing: border-box;  /* padding dahil */
}

  /* Sol kolon 5 sütun */
  .bb-mega__cols{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
    min-height: 300px;
  }

  .bb-mega__col {
  border-right: 1px solid rgba(0, 0, 0, 0.75); /* sağa ince çizgi */
  }

  .bb-mega__hd{
    font: 700 13px/1 var(--bb-font-nav, Inter, system-ui, sans-serif);
    letter-spacing:.04em; color:#303030;
    margin: 8px 0 12px;
  }
  .bb-mega__list{ list-style:none; margin:0; padding:0; }
  .bb-mega__list li{ margin:6px 0; }
  .bb-mega__list a{ font:300 13px/1.6 var(--bb-font-nav,Inter, system-ui, sans-serif); color:#303030; text-decoration:none; }
  .bb-mega__list a:hover{ text-decoration:underline; }

  /* Sağ promosyon: tam sabit genişlik (2×445 + 30 gap = 920 + 30? Biz gap’i 30 tutacağız) */
.bb-mega__promo{
  display: flex;
  gap: 15px;
  width: calc(445px * 2 + 30px);
  justify-self: start;     /* end yerine start kullan */
  align-items: flex-start;
}
  .bb-mega__card{
    width: 445px;
    height: 330px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 2px;
    overflow: hidden;
    flex: 0 0 auto;
    background:#f6f6f6;
  }
  /* .bb-mega__card img{
    display:block; width:100%; height:100%;
    object-fit: cover;          
    object-position: center;   
  } */
  .bb-mega__card img {
  width: 100%;
  height: 100%;
  object-fit: fill;    /* oranı korumaz, tamamen kutuya yayar */
  object-position: center;
}
}

/* Mobil/tablet’te mega panel kapalı (zaten drawer var) */
@media (max-width: 989.98px){
  .bb-mega{ display:none !important; }
}

.bb-mega-toggle::after {
   content: "\25BC";
  font-size: 8px;            /* boyut */
  margin-left: 6px;           /* yazı ile ok arası boşluk */
  display: inline-block;
  transform: translateY(-1px); /* dikey hizalama */
  opacity: 1;              /* biraz daha soft */
}
/* ===== MEGAMENU AÇIKKEN: header'ı search gibi bembeyaz yap ===== */
html.megamenu-open .bb-m-header{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.06) !important;
  color:#111 !important;
}

/* Transparan/over-hero varyantlarını da bastır */
html.megamenu-open .bb-m-header.is-transparent,
html.megamenu-open .bb-m-header.is-over-hero{
  background:#fff !important;
}

/* Header içindeki link/ikon/metin renkleri siyaha dönsün */
html.megamenu-open .bb-m-header a,
html.megamenu-open .bb-m-header .bb-m-icon-btn,
html.megamenu-open .bb-m-header .bb-m-link{
  color:#111 !important;
  opacity:1 !important;
  text-shadow:none !important;
}

/* Topbar da beyaz zemin + koyu metin olsun */
html.megamenu-open .bb-m-header .bb-m-topbar{
  color:#000 !important;
  background:#fff !important;
  text-shadow:none !important;
}

/* Logo stack: megamenu açıkken scrolled versiyonu göster */
html.megamenu-open .bb-m-logo .bb-m-logo-stack .bb-m-logo-img--default{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
}
html.megamenu-open .bb-m-logo .bb-m-logo-stack .bb-m-logo-img--scrolled{
  position:static;
  opacity:1; visibility:visible; pointer-events:auto;
}
/* === MEGAMENU AÇIKKEN: sağ ikonlar & hamburger kesin SİYAH === */
html.megamenu-open .bb-m-header .bb-m-icon-btn,
html.megamenu-open .bb-m-header .bb-menu-toggle{
  color:#303030 !important; /* currentColor kullanan ikonlar */
}

/* SVG içindeki stroke/fill'i de zorla siyaha çek */
html.megamenu-open .bb-m-header .bb-m-icon-btn svg [stroke]{
  stroke:#303030 !important;
}
html.megamenu-open .bb-m-header .bb-m-icon-btn svg [fill]:not([fill="none"]){
  fill:#303030 !important;
}

/* Hamburger çizgileri */
html.megamenu-open .bb-m-header .bb-ic-ham line{
  stroke:#303030 !important;
}

/* (opsiyonel) sepet rozeti siyah zemin + beyaz metin kalsın */
html.megamenu-open .bb-m-header .bb-m-cart-badge{
  background:#303030 !important; color:#fff !important;
}

/* MEGA AÇIKKEN: topbar metni siyah, zemin beyaz */
html.megamenu-open body .bb-m-header .bb-m-topbar{
  color:#000 !important;
  background:#fff !important;
  text-shadow:none !important;
}

/* Transparan/hero varyantını da bastır */
html.megamenu-open body.index .bb-m-header.is-over-hero.is-transparent .bb-m-topbar{
  color:#000 !important;
  background:#fff !important;
  text-shadow:none !important;
}
/* MEGA AÇIKKEN: header alt çizgisi belirgin */
html.megamenu-open .bb-m-header{
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: none !important; /* gölge çizgiyi yutmasın */
}

/* Mega panel üst çizgisi de belirgin olsun */
@media (min-width:990px){
  .bb-mega{
    border-top: 1px solid rgba(0,0,0,.12) !important;
  }
}

/* TÜMÜNÜ GÖR KÖTÜ DURDUĞU İÇİN PATCH */
/* @media (min-width: 990px){
  .bb-d-nav__list{
    column-gap: clamp(20px, 0.9vw, 20px);
  }

  .bb-d-nav__list .bb-has-mega > a.bb-mega-toggle{
    max-width: 9ch;            
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.15;
    letter-spacing: .05em;        
    display: -webkit-box;         
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .bb-d-nav__list .bb-has-mega{ margin-right: 6px; }


  .bb-mega-toggle::after{
    font-size: 7px;
    margin-left: 4px;
    opacity: .9;
  }
}
*/ 

@media (min-width: 990px){
  /* Nav listedeki son item (Rehber & Tavsiyeler) alanını genişlet */
  .bb-d-nav__list li:last-child {
    flex: 0 0 auto;          /* esnemesin, sabit genişlik alsın */
    min-width: 170px;        /* ihtiyaca göre 160–200px arası oynatabilirsin */
    text-align: center;      /* ortalanmış dursun */
  }

  /* İç link */
  .bb-d-nav__list li:last-child > a {
    white-space: nowrap;     /* tek satırda kalsın */
    display: block;
  }
}

@media (min-width: 1280px){  /* geniş ekranlar için */
  .bb-d-nav__list li:last-child > a{

    overflow: visible;          /* gizleme / kesme yok */

  }
}
/* === Mobile (≤ 989px): actions ikonlarını küçült === */
@media (max-width: 989px){            

  /* Buton boyutu (dokunma alanı küçülsün istersen 28–32px arası oynat) */
  .bb-m-actions .bb-m-icon-btn{
    width: 30px;
    height: 30px;
  }

  /* İkon görsel boyutu */
  .bb-m-actions .bb-m-icon-btn svg{
    width: 23px;
    height: 23px;
  }

  /* Sepet rozeti: yeni buton boyutuna göre hizalama */
  .bb-m-cart-badge{
    transform: translate(8px, -6px);
    min-width: 14px;
    height: 14px;
    line-height: 14px; 
    font-size: 10px;
  }
}



/* =========================================
   ULTRA NARROW FIX (SE, S8, 12 Pro, vb.)
   - Logo absolute ortalanır
   - Sol/sağ butonlar için rezerv alan
   - İkonlar arası boşluk yok (gap = 0)
   - Dar ekranlarda logo biraz daha büyük
   ========================================= */
@media (max-width: 400px){
  :root{
    --bb-icon-btn: 28px;   /* hamburger & action buton kutusu */
    --bb-logo-h: 16px;     /* logo stack yüksekliği (biraz büyütüldü) */
  }

  /* Sağdaki ikon sayısı: varsayılan 3; HTML'de data-icons="4/5" ile override edebilirsin */
  .bb-m-actions{ --bb-icon-count: 3; }
  .bb-m-actions[data-icons="4"]{ --bb-icon-count: 4; }
  .bb-m-actions[data-icons="5"]{ --bb-icon-count: 5; }

  /* Satır iskeleti */
  .bb-m-row{
    position: relative;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    column-gap: 8px;
    padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
    min-width: 0;
    z-index: 1;
  }

  /* Sol: hamburger */
  .bb-m-menu,
  .bb-menu-toggle{
    width: var(--bb-icon-btn);
    height: var(--bb-icon-btn);
    z-index: 2;
  }

  /* Sağ: ikonlar (gap = 0) */
  .bb-m-actions{
    display: flex;
    align-items: center;
    gap: 0 !important;
    min-width: calc(var(--bb-icon-btn) * var(--bb-icon-count));
    flex: 0 0 auto;
    z-index: 2;
  }
  .bb-m-actions .bb-m-icon-btn{
    width: var(--bb-icon-btn);
    height: var(--bb-icon-btn);
    flex: 0 0 auto;
    margin: 0 !important;
  }
  .bb-m-actions .bb-m-icon-btn svg{
    width: calc(var(--bb-icon-btn) - 8px);
    height: calc(var(--bb-icon-btn) - 8px);
    display: block;
  }

  /* === LOGO: Mutlak ortalama === */
  .bb-m-logo{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    line-height: 0;
    z-index: 1;

    max-width: calc(
      100vw
      - max(8px, env(safe-area-inset-left))
      - max(8px, env(safe-area-inset-right))
      - var(--bb-icon-btn)
      - (var(--bb-icon-btn) * var(--bb-icon-count))
      - 8px
    );
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }
  .bb-m-logo .bb-m-logo-stack{ height: var(--bb-logo-h); }
  .bb-m-logo .bb-m-logo-img{
    width: 100%; height: 100%;
    object-fit: contain; display: block;
  }

  /* Rozet küçültülmüş */
  .bb-m-cart-badge{
    transform: translate(6px, -6px);
    min-width: 12px; height: 12px; line-height: 12px; font-size: 9px;
  }
}

/* 360px ↓ (SE, S8 gibi daha dar ekranlar) */
@media (max-width: 360px){
  :root{
    --bb-icon-btn: 26px;
    --bb-logo-h: 14px;  /* 12px yerine biraz büyütüldü */
  }
  .bb-m-actions .bb-m-icon-btn{ width: var(--bb-icon-btn); height: var(--bb-icon-btn); }
  .bb-m-actions .bb-m-icon-btn svg{
    width: calc(var(--bb-icon-btn) - 8px);
    height: calc(var(--bb-icon-btn) - 8px);
  }
  .bb-m-logo .bb-m-logo-stack{ height: var(--bb-logo-h); }
}

/* Çakışmaları bastır */
@media (max-width: 400px){
  .bb-m-logo .bb-m-logo-img,
  .bb-m-logo .bb-m-logo-img--default,
  .bb-m-logo .bb-m-logo-img--scrolled{
    height: 100% !important; width: auto !important;
  }
}
/* =========================================
   DAR EKRAN LOGO YUKARI KAYDIRMA
   ========================================= */
@media (max-width: 400px){
  .bb-m-logo{
    transform: translate(-50%, -60%) !important; /* -50% yerine -60% → biraz yukarı */
  }
}

/* 360px ↓ daha dar ekranlarda biraz daha yukarı */
@media (max-width: 360px){
  .bb-m-logo{
    transform: translate(-50%, -62%) !important;
  }
}
/* =========================================
   DAR EKRAN: Logo ile actions arasında tampon
   - İkonlar arası gap = 0 (değişmiyor)
   - Actions sola margin, logo max-width hesabına yansıt
   ========================================= */
@media (max-width: 400px){
  :root{
    --bb-actions-gap-to-logo: 8px;  /* logo ile actions arası min boşluk */
  }

  /* Actions grubu: ikonlar bitişik, grubu biraz sağa it */
  .bb-m-actions{
    gap: 0 !important;              /* ikonlar arasında boşluk yok */
    margin-left: var(--bb-actions-gap-to-logo) !important;  /* logo ile tampon */
  }

  /* Logo: kalan alana sığarken bu tamponu da hesaba kat */
  .bb-m-logo{
    max-width: calc(
      100vw
      - max(8px, env(safe-area-inset-left))
      - max(8px, env(safe-area-inset-right))
      - var(--bb-icon-btn)                               /* sol hamburger */
      - (var(--bb-icon-btn) * var(--bb-icon-count))      /* sağ ikonlar */
      - var(--bb-actions-gap-to-logo)                    /* ← yeni tampon */
      - 8px
    ) !important;
  }
}

/* Ultra dar: tamponu 10px yap (istersen 6–12px arası oynat) */
@media (max-width: 360px){
  :root{
    --bb-actions-gap-to-logo: 10px;
  }
}