/* ==========================================================================
   GOREEL — MOBİL KATMAN
   ==========================================================================
   Yalnızca telefon/tablette veya WebView içinde yüklenir.
   Masaüstü bu dosyayı hiç indirmez — bkz. goreel_theme.php

   Token'lar burada TANIMLANMAZ; hepsi goreel.css'te. Bu dosya yalnızca
   mobile özgü davranış ve chrome içerir.

   Katman sözleşmesi:
     html.phone / html.tablet  → mobil web + uygulama (ORTAK TEMEL)
     html.in-app               → yalnızca uygulama içi (UYGULAMAYA ÖZEL CHROME)
   ========================================================================== */


/* ==========================================================================
   ORTAK TEMEL — mobil web + uygulama
   ========================================================================== */

html.phone,
html.tablet {
  /* iOS'ta yatay çevirince metnin kendiliğinden büyümesini engelle */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Dokunulan her şeydeki gri kutu parıltısı — en belirgin
     "bu bir web sayfası" sinyallerinden biri */
  -webkit-tap-highlight-color: transparent;
}

/* Mobilde bölüm aralıkları masaüstü kadar cömert olamaz:
   dikey alan pahalı. Ölçeği tek yerden daraltıyoruz. */
@media (max-width: 767px) {
  :root {
    --s-16: 40px;
    --s-20: 48px;
  }

  .b-container { padding-inline: var(--s-4); }

  .b-h1 { font-size: var(--t-2xl); }
  .b-h2 { font-size: var(--t-xl); }
  .b-h3 { font-size: var(--t-lg); }

  .b-section        { padding-block: var(--s-10); }
  .b-section--tight { padding-block: var(--s-8); }

  .b-section-head {
    /* Başlık ve "tümünü gör" bağlantısı dar ekranda yan yana sıkışmasın */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
  }

  /* Raylar kenardan kenara kaysın ama içerik hizada kalsın:
     kaydırma alanı taşar, ilk kart yine de container'la hizalıdır. */
  .bh-rail {
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
  }
}


/* ==========================================================================
   UYGULAMAYA ÖZEL CHROME — yalnızca WebView
   ========================================================================== */

/* Aşırı kaydırmada beyaz zıplama (rubber-band) WebView'de anında
   "gömülü tarayıcı" hissi verir. Uygulama içinde kapatılır; mobil
   tarayıcıda dokunulmaz, çünkü orada beklenen davranış budur. */
html.in-app,
html.in-app body {
  overscroll-behavior-y: none;
}

/* Uygulama içinde metin seçimi yalnızca gerçek içerikte anlamlı.
   Chrome elemanlarında uzun basınca çıkan seçim tutamaçları
   native hissi bozar. */
html.in-app {
  -webkit-user-select: none;
  user-select: none;
}

html.in-app p,
html.in-app li,
html.in-app h1,
html.in-app h2,
html.in-app h3,
html.in-app td,
html.in-app input,
html.in-app textarea,
html.in-app [data-goreel-selectable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Uzun basınca çıkan iOS bağlam menüsü (görseli kaydet / linki aç) */
html.in-app img,
html.in-app a {
  -webkit-touch-callout: none;
}


/* ==========================================================================
   Alt sekme çubuğu — telefon (mobil web) + uygulama
   --------------------------------------------------------------------------
   html.has-tabbar sunucuda basılıyor (goreel_theme). Mobil tarayıcıda da
   gösteriliyor: kullanıcıların çoğu siteyi telefondan geziyor ve alt
   gezinme, alışveriş uygulamalarının ortak dili. Güvenli alan payı
   (safe-area) iOS Safari'nin alt çubuğuyla çakışmayı önlüyor.
   ========================================================================== */

:root { --tabbar-h: 56px; }

/* Çubuğun kaplayacağı alanı JS gelmeden ÖNCE ayır, yoksa çubuk
   enjekte edilince sayfa zıplar. */
html.has-tabbar body {
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
}

.goreel-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  display: flex;
  align-items: stretch;

  background: var(--c-surface);
  border-top: 1px solid var(--c-line);

  /* Home indicator'ın altına taşmasın + yatay çentik */
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);

  font-family: var(--f-body);
}

.goreel-tab {
  flex: 1 1 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  height: var(--tabbar-h);
  padding: 0 2px;

  color: var(--c-ink-muted);
  text-decoration: none;

  background: none;
  border: 0;
  cursor: pointer;

  /* Basılınca anında geri bildirim — gecikme native hissi bozar */
  transition: color var(--d-fast) var(--e-out),
              transform .1s var(--e-out);
  -webkit-tap-highlight-color: transparent;
}

.goreel-tab:hover,
.goreel-tab:focus { color: var(--c-ink-muted); text-decoration: none; }

.goreel-tab:active { transform: scale(.92); }

.goreel-tab svg {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.goreel-tab-label {
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .01em;

  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goreel-tab.is-active { color: var(--c-brand); }
.goreel-tab.is-active .goreel-tab-label { font-weight: 600; }

/* Sepet rozeti */
.goreel-tab-icon { position: relative; display: block; }

.goreel-tab-badge {
  position: absolute;
  top: -5px;
  left: 13px;

  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;

  background: var(--c-brand);
  color: #fff;
  border-radius: var(--r-full);

  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;

  display: none;   /* sıfırken hiç görünmesin */
}

.goreel-tab-badge.is-visible { display: block; }


/* ==========================================================================
   MOBİL SEPET — TAM EKRAN
   ==========================================================================
   Masaüstünde mini sepet bir açılır menü. Mobilde aynı DOM, aynı JS, farklı
   SUNUM: tam ekran bir sayfa.

   NEDEN AÇILIR MENÜ DEĞİL
   375px'lik ekranda 340px genişliğinde bir açılır panel zaten ekranın
   tamamını kaplıyor ama köşede duran, gölgeli, kaydırması belirsiz bir
   kutu gibi görünüyordu. Uygulamalarda sepet bir EKRAN — başlığı, kapatma
   düğmesi ve sabit bir eylem ayağı olan. Aynı işi yapıyor ama nerede
   olduğun belli.

   DOM'a dokunulmadı: .bh-mc hâlâ <ul>, panelin içi hâlâ tek bir <li>.
   common.js mini sepeti `$('#cart > ul').load(... ul li)` ile yeniliyor;
   yapıyı değiştirmek o sözleşmeyi kırardı.
   ========================================================================== */

@media (max-width: 767px) {

  /* Panel açıkken arka plan kaymasın. <html> üzerinde, çünkü iOS Safari
     body'deki overflow:hidden'ı yok sayıyor. */
  html.bh-cart-open,
  html.bh-cart-open body {
    overflow: hidden;
    /* Konum sabitleme yok: position:fixed body kaydırma konumunu
       sıfırlıyor ve panel kapanınca kullanıcı sayfanın başına düşüyor. */
  }

  .bh-mc {
    position: fixed;
    inset: 0;
    z-index: 1000;

    width: auto;
    max-width: none;
    max-height: none;
    min-width: 0;

    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    display: flex;
    flex-direction: column;

    /* Aşağıdan yukarı: kullanıcının parmağının olduğu yerden geliyor. */
    transform: translateY(100%);
    opacity: 1;
    transition: transform var(--d-base) var(--e-out);
  }

  .bh-mc.is-open { transform: translateY(0); }

  /* Panelin içi tek bir <li>; onu da esnek kolona çeviriyoruz ki
     başlık ve ayak sabit, orta kısım kaydırılabilir olsun. */
  .bh-mc > li {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
  }

  .bh-mc-head {
    flex: none;
    align-items: center;
    padding: calc(var(--s-4) + var(--safe-top)) var(--s-4) var(--s-4);
    border-bottom: 1px solid var(--c-line);
  }

  .bh-mc-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: var(--s-2);
    border: 0;
    border-radius: var(--r-full);
    background: var(--c-surface-warm);
    color: var(--c-ink);
    cursor: pointer;
  }

  .bh-mc-close svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /* Ürünler kaydırılabilir orta bölge */
  .bh-mc-items {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-4);
  }

  /* Toplam + eylemler sabit ayak: kullanıcı listeyi kaydırırken
     "Kasaya Git" ekrandan çıkmasın. */
  .bh-mc-totals,
  .bh-mc-actions {
    flex: none;
    padding-inline: var(--s-4);
  }

  .bh-mc-totals { padding-top: var(--s-4); border-top: 1px solid var(--c-line); }

  .bh-mc-actions {
    padding-bottom: calc(var(--s-4) + var(--safe-bottom));
    padding-top: var(--s-3);
  }

  .bh-mc-actions .b-btn { width: 100%; }

  .bh-mc-empty {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: var(--s-8) var(--s-4);
  }
}

/* Masaüstünde kapatma düğmesi gürültü: panel dışına tıklamak kapatıyor. */
@media (min-width: 768px) {
  .bh-mc-close { display: none; }
}


/* ==========================================================================
   MOBİL MENÜ (ÇEKMECE) — uygulama hissi
   ==========================================================================
   Eski hâli tek bir kategori listesiydi. Yeni kurgu: üstte kimlik, sonra
   bölümlere ayrılmış gezinme, altta sabit telefon. Native uygulamalarda
   yerleşik kalıp — kullanıcı nerede olduğunu ve nereye gidebileceğini tek
   ekranda görüyor.
   ========================================================================== */

.bh-drawer-logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bh-drawer-logo img {
  width: auto;
  height: 30px;
  display: block;
}

/* ── Kimlik satırı ── */
.bh-drawer-me {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);

  margin: var(--s-3) var(--s-3) 0;
  padding: var(--s-3) var(--s-4);

  border-radius: var(--r-md);
  background: var(--c-brand-a08);
  color: var(--c-ink);
  text-decoration: none;
}

.bh-drawer-me-ava {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--c-brand);
  color: #fff;
}

.bh-drawer-me-ava svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-drawer-me-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.bh-drawer-me-text strong {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--c-ink);
}

.bh-drawer-me-text span {
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
}

.bh-drawer-me-go {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--c-brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Kaydırılabilir gövde ── */
.bh-drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-4);
}

.bh-drawer-label {
  margin: var(--s-5) var(--s-5) var(--s-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.bh-drawer-nav { display: flex; flex-direction: column; }

.bh-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);

  /* Dokunma hedefi 48px: 44px asgari, listede rahat kaydırma için biraz
     üstünde. */
  min-height: 48px;
  padding: var(--s-2) var(--s-5);

  color: var(--c-ink-body);
  font-size: var(--t-base);
  font-weight: 600;
  text-decoration: none;

  transition: background var(--d-fast) var(--e-out);
}

.bh-drawer-link:active { background: var(--c-brand-a08); }

.bh-drawer-link.is-muted { color: var(--c-ink-muted); font-weight: 500; }

.bh-drawer-link svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--c-ink-faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Telefon ayağı ── */
.bh-drawer-call {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);

  min-height: 52px;
  padding-inline: var(--s-4);
  border-top: 1px solid var(--c-line);

  background: var(--c-surface-warm);
  color: var(--c-brand-deep);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
}

.bh-drawer-call svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   MOBİL HEADER
   ==========================================================================
   Tek satır: menü / logo / arama / sepet. Bilgi şeridi ve kategori çubuğu
   mobilde gizli (ikisi de çekmeceye taşındı).

   SABİT (sticky): uygulamalarda üst bar hep orada. Kaydırınca içeriğin
   altına gölge düşüyor — nerede olduğunu söyleyen tek şey bu.
   ========================================================================== */

@media (max-width: 991px) {

  .bh-head {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--c-surface);
  }

  /* Bilgi şeridi mobilde gizli: aynı bilgiler çekmecenin altında ve
     iletişim sayfasında. Üç satırlık iletişim metni 375px'de iki satıra
     kırılıp header'ı 100px'e çıkarıyordu. */
  .bh-strip { display: none; }

  /*
    ÜÇ BÖLGELİ IZGARA — logo GERÇEKTEN ortada.

    Eskiden flex + `margin-inline: auto` vardı: logo, menü düğmesiyle
    eylemler arasındaki ARTIK ALANIN ortasına oturuyordu, ekranın ortasına
    değil. Ölçüm: bar 356px, logo merkezi 106, ekran merkezi 186 —
    80px'lik gözle görülür bir kayma.

    1fr | auto | 1fr yan bölgelere eşit genişlik veriyor; logo hangi
    tarafta kaç ikon olursa olsun tam ortada kalıyor.
  */
  .bh-bar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-2);
    min-height: 58px;
    padding-top: var(--safe-top);
  }

  .bh-menu-btn { justify-self: start; }

  .bh-logo {
    justify-self: center;
    margin-inline: 0;
  }

  /* 36px: 32px logo 58px'lik barda cılız duruyordu. Marka header'ın tek
     görsel çıpası. */
  .bh-logo img { height: 36px; width: auto; }

  .bh-actions {
    justify-self: end;
    gap: 2px;
  }

  /*
    DOKUNMA GERİ BİLDİRİMİ.
    Uygulama hissinin en ucuz ve en etkili parçası: dokunulan şey tepki
    veriyor. Tarayıcının gri parıltısı kapatıldığı için
    (-webkit-tap-highlight-color: transparent) yerine bir şey koymak
    zorunlu, yoksa dokunuş hiç geri dönüş vermiyor.
  */
  .bh-icon-btn,
  .bh-cart-btn {
    transition: background var(--d-fast) var(--e-out),
                transform var(--d-fast) var(--e-out);
  }

  .bh-icon-btn:active,
  .bh-cart-btn:active {
    background: var(--c-brand-a16);
    transform: scale(.92);
  }

  /* Arama alanı mobilde varsayılan olarak KAPALI, ikonla açılıyor.
     Açıkken barın tamamını kaplıyor — 375px'de logo + arama + iki ikon
     aynı satıra sığmıyor. */
  .bh-search-slot {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 10;

    padding: var(--s-3) var(--s-4);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--sh-md);

    display: none;
  }

  /* SINIF .bh-head ÜZERİNDE, .bh-bar değil: goreel.js arama düğmesine
     basınca `is-searching`'i #bh-head'e yazıyor. Yanlış öğeyi hedefleyen
     bir seçici sessizce hiçbir şey yapmaz. */
  .bh-head.is-searching .bh-search-slot { display: block; }

  .bh-bar { position: relative; }

  /* Hesap ve favori mobilde header'da DEĞİL: ikisi de çekmecede.
     56px'lik barda beş hedef, her biri 44px'in altına düşerdi. */
  .bh-actions-account,
  .bh-actions-wishlist { display: none; }

  .bh-cart-btn { padding: var(--s-1) var(--s-2); }

  /* Sepette yazı yok, yalnızca ikon + rozet: yer dar ve tutar zaten
     sepet ekranında. */
  .bh-cart-text { display: none; }
}

/* Kaydırma gölgesi — goreel-mobile.js .is-stuck ekliyor */
@media (max-width: 991px) {
  .bh-head.is-stuck { box-shadow: var(--sh-md); }
}


/* ==========================================================================
   MOBİL ARAMA — TAM EKRAN
   ==========================================================================
   Arama alanı header'ın altına açılan bir satırdı: 40px yüksekliğinde bir
   kutu, arkasında sayfa görünüyor, klavye açıldığında kutu ekranın
   ortasında kalıyordu. Uygulamalarda arama bir EKRAN.

   AYNI DOM. İkinci bir #search basılmıyor — common.js aramayı
   `header #search input[name="search"]` ile okuyor ve ikinci bir kopya o
   seçiciyi belirsiz hâle getirirdi. Yalnızca sunum değişiyor.
   ========================================================================== */

@media (max-width: 991px) {

  .bh-search-slot {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: none;
    flex-direction: column;
    gap: var(--s-4);

    padding: calc(var(--s-4) + var(--safe-top)) var(--s-4) var(--s-4);
    background: var(--c-surface);
    border-bottom: 0;
    box-shadow: none;
  }

  .bh-head.is-searching .bh-search-slot { display: flex; }

  /* Arama açıkken arka plan kaymasın: kullanıcı klavyeyle uğraşırken
     altındaki liste kayıyordu. */
  .bh-head.is-searching { position: static; }

  /* Kapatma satırı: başlık + "İptal". Şablona dokunmadan ::before ile
     yapılamaz (metin gerekiyor), o yüzden arama formunun içindeki
     düğmeyi kullanıyoruz — bkz. goreel.js initSearchToggle. */
  .bh-search-slot #search {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
  }

  .bh-search-slot #search input[name="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    /* 16px altına inmez: iOS daha küçük yazıda odaklanınca yakınlaştırıyor. */
    font-size: 16px;
  }

  /* Tam ekranda gönder düğmesi geri geliyor: klavyedeki "ara" tuşu her
     klavyede aynı yerde değil, görünür bir çıkış yolu gerekiyor. */
  .bh-head.is-searching .bh-search-submit {
    display: inline-flex;
    flex: 0 0 auto;
  }
}


/* ==========================================================================
   DOKUNMA GERİ BİLDİRİMİ — kartlar ve satırlar
   ==========================================================================
   Uygulama hissinin en belirgin parçası: dokunulan şey tepki veriyor.
   Tarayıcının gri parıltısı kapatıldığı için (goreel-mobile.css başı) yerine
   bir şey koymak zorunlu — yoksa dokunuş sessiz kalıyor ve arayüz "ölü"
   hissediliyor.

   transform kullanılıyor, box-shadow/background DEĞİL: transform ana
   iş parçacığını bloklamıyor, düşük cihazda da 60fps kalıyor.
   ========================================================================== */

@media (hover: none) {

  .bh-p,
  .bh-acc-card,
  .bh-row--link,
  .bh-foot-act,
  .bh-brand,
  .bh-tiny,
  .b-chip {
    transition: transform var(--d-fast) var(--e-out);
  }

  .bh-p:active,
  .bh-acc-card:active,
  .bh-row--link:active,
  .bh-foot-act:active,
  .bh-brand:active,
  .bh-tiny:active,
  .b-chip:active {
    transform: scale(.975);
  }

  /* Kart içindeki düğme kendi tepkisini veriyor; kart da küçülürse iki kat
     hareket oluyor ve sıçrama gibi duruyor. */
  .bh-p .b-btn:active { transform: scale(.95); }

  /* Ürün ızgarasında dokunma hedefi: kartın tamamı bağlantı gibi
     davranıyor ama asıl bağlantı ad ve görsel. İkisi de 44px üstünde. */
  .bh-p-name a { display: block; padding-block: 2px; }
}


/* ==========================================================================
   KATEGORİ ŞERİDİ — liste sayfalarında hızlı geçiş
   ==========================================================================
   19 kategori var ve mobilde hepsi çekmecenin içinde. Bir kategoriye bakan
   kullanıcının komşusuna geçmesi için: çekmeceyi aç → kaydır → seç.
   Şerit bunu tek dokunuşa indiriyor.

   Yatay kaydırma + scroll-snap: kartlar arasında duran bir kaydırma,
   serbest kaydırmadan daha kontrollü hissediliyor.
   ========================================================================== */

.bh-catbar {
  display: none;
}

@media (max-width: 991px) {

  .bh-catbar {
    display: flex;
    gap: var(--s-2);

    /* Kenardan kenara kayıyor ama ilk çip container'la hizalı: negatif
       margin + eşit padding. */
    margin-inline: calc(var(--s-4) * -1);
    padding: var(--s-3) var(--s-4);

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .bh-catbar::-webkit-scrollbar { display: none; }

  .bh-catbar-item {
    flex: 0 0 auto;
    scroll-snap-align: start;

    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    background: var(--c-surface);

    color: var(--c-ink-body);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;

    transition: transform var(--d-fast) var(--e-out);
  }

  .bh-catbar-item:active { transform: scale(.95); }

  .bh-catbar-item.is-active {
    border-color: var(--c-brand);
    background: var(--c-brand);
    color: #fff;
  }
}


/* ==========================================================================
   SEPET SAYFASI — YAPIŞKAN ÖZET
   ==========================================================================
   Toptan siparişte sepette 90'a kadar satır olabiliyor (bu mağazada en
   büyük kayıtlı sepet 97 satır). "Siparişi Tamamla" düğmesi o listenin
   altında kalıyor ve kullanıcı toplamı görmek için de sonuna kaydırmak
   zorunda kalıyordu.

   Yapışkan ayak: toplam ve tek eylem her zaman ekranda.
   ========================================================================== */

@media (max-width: 900px) {

  .bh-sum {
    position: sticky;
    /* Alt sekme çubuğu varsa (uygulama içi) onun üstünde durmalı. */
    bottom: 0;
    z-index: 40;

    margin-inline: calc(var(--s-4) * -1);
    padding: var(--s-4);
    padding-bottom: calc(var(--s-4) + var(--safe-bottom));

    border: 0;
    border-top: 1px solid var(--c-line);
    border-radius: 0;
    background: var(--c-surface);
    box-shadow: 0 -6px 20px rgba(var(--c-shadow-rgb), .1);
  }

  html.in-app .bh-sum {
    bottom: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--s-4);
  }

  /*
    YAPIŞKAN AYAKTA YALNIZCA GEREKLİ OLAN KALIYOR.

    Ayak ekranın altını kaplıyor; her satır oradan yer çalıyor. Ölçüm:
    kupon akordeonu, "Alışverişe devam et" ve bilgi satırları ile ayak
    ~320px oluyordu — 812px'lik ekranın %40'ı.

    KALANLAR: toplam, minimum sipariş uyarısı, tek eylem.
    Minimum uyarısı KALIYOR çünkü düğmenin neden pasif olduğunu o
    açıklıyor; onu gizlemek düğmeyi sebepsiz bozuk gösterirdi.

    ÇIKANLAR: kupon (firma kupon kullanmıyor, sessiz bir özellik),
    "Alışverişe devam et" (geri tuşu ve kategori şeridi bir dokunuş
    uzakta), bilgi satırları (aynı bilgiler ödeme sayfasında).
  */
  .bh-sum .bh-sum-notes,
  .bh-sum .bh-sum-back,
  .bh-sum .bh-sum-coupon,
  .bh-sum > .bh-sum-eyebrow { display: none; }

  /* Kupon akordeonunun başlığı ayrı bir öğe; o da gitsin. */
  .bh-sum details { display: none; }

  /* Toplam satırı ayakta tek başına kaldığı için daha güçlü. */
  .bh-sum .bh-sum-row.is-grand {
    padding-top: 0;
    border-top: 0;
  }
}


/* ── Tam ekran aramanın kapatma düğmesi ──
     Düğme JS ile ekleniyor (goreel.js initSearchToggle): arama formu
     common/search.twig'te ve o dosya masaüstünde de kullanılıyor; orada
     gereksiz bir düğme basmamak için şablona değil koda konuldu. */

.bh-search-close { display: none; }

@media (max-width: 991px) {

  /* Arama açıkken gövde kilidi */
  html.bh-search-open,
  html.bh-search-open body { overflow: hidden; }

  .bh-head.is-searching .bh-search-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: var(--touch-min);
    height: var(--touch-min);
    border: 0;
    border-radius: var(--r-full);
    background: var(--c-surface-warm);
    color: var(--c-ink);
    cursor: pointer;
  }

  .bh-search-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
}


/* ==========================================================================
   LİSTE ARAÇ ÇUBUĞU — MOBİLDE ÇİP
   ==========================================================================
   Sıralama ve sayfa boyutu native <select>. NATIVE KALIYOR ve bu bilinçli:
   dokunmatikte <select> sistemin kendi seçicisini açıyor — gerçekten
   uygulama gibi olan şey bu. Kendi alt sayfamızı yazmak daha az native bir
   sonuç verirdi.

   Değişen yalnızca TETİKLEYİCİNİN GÖRÜNÜMÜ: web formu kutusu değil, çip.
   ========================================================================== */

@media (max-width: 767px) {

  .bh-toolbar {
    /* Sonuç sayacı mobilde gizli: aynı bilgi sayfalamanın altında var ve
       araç çubuğunun tek satırda kalması daha değerli. */
    gap: var(--s-2);
    /* goreel-catalog.css araç çubuğunu kenardan kenara açıyor (negatif
       margin); iç boşluk sıfırlanınca kutular ekran kenarına yapışıyordu */
    padding: var(--s-2) var(--s-4);
    border: 0;
    border-bottom: 1px solid var(--c-line);
    /* Yapışkan: altından geçen ürünler okunmasın */
    background: rgba(245, 248, 249, .92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
            backdrop-filter: saturate(1.4) blur(10px);
  }

  .bh-toolbar-left { display: none; }

  .bh-toolbar-right {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-2);
    width: 100%;
  }

  .bh-sort,
  .bh-limit {
    position: relative;
    min-width: 0;
    margin: 0;
  }

  /* Etiket ("Sırala" / "Göster") çipin İÇİNDE, üstte küçük. Yanında
     dururken iki satırlık bir alan harcıyordu. */
  .bh-sort-label {
    position: absolute;
    top: 6px;
    left: var(--s-4);
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-ink-faint);
    pointer-events: none;
  }

  .bh-sort-select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px var(--s-8) 6px var(--s-4);

    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    background-color: var(--c-surface);

    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-ink);
  }

  .bh-sort-select:active { transform: scale(.98); }

  .bh-limit .bh-sort-select { min-width: 0; }
}


/* ── Tam ekran aramanın içeriği ──
     Arama tam ekran açıldığında altı bomboş kalıyordu. Kategoriler bu
     boşluğu dolduruyor ve ne yazacağını bilmeyen kullanıcıya bir yol
     veriyor. Masaüstünde gizli: orada arama bir satır, altında sayfa var. */

.bh-search-quick { display: none; }

@media (max-width: 991px) {

  .bh-head.is-searching .bh-search-quick {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bh-search-quick-title {
    margin: 0 0 var(--s-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-ink-faint);
  }

  /* Çipler SARILIYOR, kaydırılmıyor: burada yer bol ve hepsini birden
     görmek taramayı hızlandırıyor. Kategori şeridindeki tek satırlık
     kaydırma orada yer dar olduğu için. */
  .bh-search-quick-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .bh-search-quick-list .bh-catbar-item { scroll-snap-align: none; }
}


/* ==========================================================================
   MOBİL UYGULAMA DİLİ — v2
   ==========================================================================
   Telefonda (mobil web) ve WebView'de ortak; uygulamaya özel olanlar
   html.in-app ile işaretli. Hedef: "mobil site" değil "alışveriş
   uygulaması" hissi — ilk ekranda arama + ürün, üst bar bağlamı söyler,
   kırıntı ve web footer'ı yer kaplamaz.
   ========================================================================== */

/* ── Üst bar: uygulama içi iç sayfalarda "geri + başlık" ─────────────── */

.bh-back-btn,
.bh-apptitle { display: none; }

@media (max-width: 991px) {
  html.in-app.is-inner .bh-bar-inner {
    grid-template-columns: 80px minmax(0, 1fr) 80px;
    gap: 0;
  }

  html.in-app.is-inner .bh-menu-btn,
  html.in-app.is-inner .bh-logo { display: none; }

  html.in-app.is-inner .bh-back-btn {
    display: inline-flex;
    justify-self: start;
    margin-left: -8px;   /* ikonun optik hizası: ok kenara yakın dursun */
  }

  html.in-app.is-inner .bh-apptitle {
    display: block;
    justify-self: stretch;
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--c-ink);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Üst bar hafif buzlu: içerik altından akarken bağlam kaybolmuyor.
     DİKKAT: backdrop-filter .bh-head'in KENDİSİNE verilmiyor — bir öğeye
     filter/backdrop-filter verildiğinde içindeki position:fixed çocuklar
     (tam ekran sepet, tam ekran arama) ekrana değil o öğeye göre
     konumlanıyor: sepet paneli header boyunda, şeffaf kalıyordu. Efekt
     ayrı bir katmanda (::before). */
  .bh-head {
    background: transparent;
    border-bottom: 1px solid var(--c-line);
  }

  .bh-head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
            backdrop-filter: saturate(1.6) blur(14px);
    pointer-events: none;
  }
}

/* ── Telefonda kırıntı yok (üst bar + geri yeterli), uygulamada footer yok ─ */

@media (max-width: 767px) {
  .bh-crumbs { display: none; }
}

html.in-app .bh-foot { display: none; }

/* Uygulamada footer olmayınca yasal bağlantılar hesap sayfasında ve
   çekmecede; içerik sekme çubuğuna yapışmasın diye nefes payı */
html.in-app main { padding-bottom: var(--s-6); }


/* ── Form alanları: 16px (iOS odaklanınca yakınlaştırmasın), 48px hedef ─ */

@media (max-width: 767px) {
  .b-scope input[type="text"],
  .b-scope input[type="email"],
  .b-scope input[type="tel"],
  .b-scope input[type="password"],
  .b-scope input[type="search"],
  .b-scope input[type="number"],
  .b-scope select,
  .b-scope textarea,
  .bh-input,
  .b-input,
  .b-textarea {
    font-size: 16px;
  }

  .bh-input,
  .b-input,
  .b-scope select {
    min-height: 48px;
    border-radius: var(--r-md);
  }

  .b-btn--lg { min-height: 52px; border-radius: var(--r-md); }
}


/* ── ANA SAYFA ──────────────────────────────────────────────────────── */

/* Arama çubuğu — yalnızca telefonda, ana sayfanın en üstünde.
   Gerçek bir input değil: dokununca header'ın tam ekran araması açılıyor
   (tek arama formu kuralı, bkz. header.twig). */
.bh-hsearch { display: none; }

@media (max-width: 767px) {
  .bh-hsearch {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: calc(100% - var(--s-8));
    margin: var(--s-3) var(--s-4) 0;
    padding: 0 var(--s-4);
    min-height: 46px;
    font: inherit;
    font-size: 15px;
    color: var(--c-ink-faint);
    text-align: left;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    box-shadow: var(--sh-sm);
  }

  .bh-hsearch svg {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--c-ink-muted);
    stroke-width: 2;
    stroke-linecap: round;
  }

  .bh-hsearch:active { transform: scale(.99); background: var(--c-surface-sunken); }

  /* Vitrin → kampanya kartı. Masaüstündeki tam genişlik bölüm telefonda
     ilk ekranın tamamını kaplıyordu; şimdi kenarlı, renkli bir kart. */
  .bh-show {
    margin: var(--s-3) var(--s-4) 0;
    border: 0;
    border-radius: var(--r-xl);
    background:
      radial-gradient(260px 200px at 100% 0%, rgba(88, 216, 232, .55), transparent 70%),
      linear-gradient(140deg, var(--c-brand) 0%, var(--c-brand-deep) 55%, var(--c-ink-strong) 100%);
    box-shadow: var(--sh-md);
  }

  .bh-show-deco { display: block; right: -120px; top: -140px; width: 300px; height: 300px; border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 40px rgba(255,255,255,.05); }

  .bh-show-inner {
    gap: var(--s-4);
    padding: var(--s-5) var(--s-5) var(--s-5);
  }

  .bh-show-eyebrow {
    margin-bottom: var(--s-3);
    padding: 4px 10px 4px 8px;
    font-size: 11px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: none;
  }

  .bh-show-title { font-size: 26px; line-height: 1.12; color: #fff; }

  .bh-show-sub {
    margin-top: var(--s-2);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .bh-show-actions { margin-top: var(--s-4); gap: var(--s-2); flex-wrap: nowrap; }

  .bh-show-actions .b-btn {
    flex: 0 1 auto;
    min-height: 42px;
    padding-inline: var(--s-4);
    font-size: 14px;
    border-radius: var(--r-full);
  }

  .bh-show-actions .b-btn--primary,
  .bh-show-actions .b-btn--primary:visited {
    color: var(--c-ink-strong);
    background: #fff;
    border-color: #fff;
  }

  .bh-show-cta2,
  .bh-show-cta2:visited {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: none;
  }

  .bh-show-cta2 svg { color: #7CF0A6; }

  /* Rakamlar ve kolaj telefonda yer kaplıyor; ürünler hemen aşağıda */
  .bh-show-stats,
  .bh-show-art { display: none; }

  /* Avantaj şeridi: kartın altında hafif, yatay kayan çipler */
  .bh-usp { background: transparent; border: 0; }

  .bh-usp-item,
  .bh-usp-item + .bh-usp-item {
    margin-right: var(--s-2);
    padding: var(--s-3);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
  }

  .bh-usp-list { padding-block: var(--s-3); scroll-padding-inline: var(--s-4); }

  /* KATEGORİLER — yatay, iki satırlı kısayollar (hikâye çemberi dili).
     27 kategori dikeyde 9 satır tutuyordu; şimdi tek kaydırma alanı. */
  .bh-cats:not(.bh-cats--baked) {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 80px;
    grid-template-columns: none;
    gap: var(--s-3) var(--s-2);
    overflow-x: auto;
    margin-inline: calc(var(--s-4) * -1);
    padding: 2px var(--s-4) var(--s-2);
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--s-4);
    scrollbar-width: none;
  }

  .bh-cats:not(.bh-cats--baked)::-webkit-scrollbar { display: none; }

  .bh-cats:not(.bh-cats--baked) .bh-cat {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    scroll-snap-align: start;
  }

  /* Görsel çerçeveyi tamamen dolduruyor (pay yok); yuvarlatılmış kare,
     çember gibi köşeleri kırpmadığı için sahnenin tamamı görünüyor. */
  .bh-cats:not(.bh-cats--baked) .bh-cat-media {
    width: 76px;
    height: 76px;
    aspect-ratio: auto;
    padding: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 18px;
    overflow: hidden;
  }

  .bh-cats:not(.bh-cats--baked) .bh-cat-media img { object-fit: cover; }

  .bh-cats:not(.bh-cats--baked) .bh-cat:active .bh-cat-media { transform: scale(.94); border-color: var(--c-brand); }

  .bh-cats:not(.bh-cats--baked) .bh-cat-body {
    justify-content: center;
    padding: 6px 0 0;
    border: 0;
  }

  .bh-cats:not(.bh-cats--baked) .bh-cat-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
  }

  /* Ana sayfa bölüm başlıkları: uygulama ölçeği */
  .bh-home .b-section { padding-block: var(--s-6); }
  .bh-home .b-section-head { margin-bottom: var(--s-3); }
  .bh-home .b-section-head .b-h2 { font-size: 19px; letter-spacing: -.015em; }
  .bh-home .b-section-head .b-lead { display: none; }
  .bh-home .b-section-head .b-eyebrow { display: none; }

  /* Raylar: ilk kart container hizasında başlasın (snap 0'a çekiyordu) */
  .bh-pgrid { scroll-padding-inline: var(--s-4); }

  .bh-product { width: 42vw; max-width: 172px; }

  /* Çağrı bandı: kart dili */
  .bh-cta-title { font-size: 19px; }
  .bh-cta-sub { font-size: 14px; }
}


/* ── LİSTE SAYFALARI (kategori, arama) ──────────────────────────────── */

@media (max-width: 767px) {
  /* Başlık alanı sıkı: ürünler ilk ekranda görünsün */
  .route-product-category .b-h1,
  .route-product-search .b-h1,
  .route-product-special .b-h1 { font-size: 22px; letter-spacing: -.02em; margin-bottom: var(--s-2); }

  /* "Göster: 15" seçimi telefonda anlamsız — sayfalama zaten var */
  .bh-limit { display: none; }

  .bh-toolbar-right { display: flex; }

  .bh-sort { flex: 1 1 auto; }

  /* Kart: sıkı gövde, kompakt düğme */
  .bh-p-body { padding: var(--s-3) var(--s-3) var(--s-3); }

  .bh-p-price .b-price { font-size: 16px; }

  .bh-p-add,
  .bh-p-gate {
    min-height: 38px;
    font-size: 13px;
    border-radius: var(--r-md);
  }
}


/* ── BOŞ DURUMLAR ───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .bh-cartp-empty {
    padding: var(--s-12) var(--s-4) var(--s-8);
    text-align: center;
  }

  .bh-cartp-empty .b-btn { width: 100%; max-width: 320px; }
}

@media (max-width: 767px) {
  /* Kampanya kartında WhatsApp düğmesi yalnızca ikon: iki metinli düğme
     375px'te sığmıyordu. Erişilebilir ad aria-label'da. */
  .bh-show-cta2.is-wa {
    flex: none;
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .bh-show-cta2.is-wa .bh-show-cta2-text { display: none; }

  .bh-show-cta2.is-wa svg { width: 20px; height: 20px; }
}

/* Uygulama içi: başlık üst barda; liste ve sepet ekranlarında aynı başlığı
   ikinci kez büyük H1 olarak basmak native dilde yok. DOM'da kalıyor
   (erişilebilirlik ve üst bar başlığının kaynağı), yalnızca görsel gizli. */
html.in-app.route-product-category main h1,
html.in-app.route-product-search main h1,
html.in-app.route-product-special main h1,
html.in-app.route-product-manufacturer-info main h1,
html.in-app.route-checkout-cart main h1,
html.in-app.route-checkout-checkout main h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ── ÜRÜN SAYFASI — native ürün ekranı ───────────────────────────────── */

@media (max-width: 767px) {
  /* Görsel kenardan kenara, çerçevesiz: ürün ekranının kahramanı */
  .route-product-product .bh-pd { padding-top: 0; }

  .route-product-product .bh-pd > .b-container { padding-inline: 0; }

  .bh-pd-main { gap: 0; margin-bottom: var(--s-4); }

  .bh-pd-figure {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--c-surface);
    box-shadow: none;
  }

  .bh-pd-thumbs { padding-inline: var(--s-4); }

  /* Bilgi paneli: alttan yuvarlak köşeli bir "sayfa" gibi görselin
     üstüne biniyor — native ürün ekranlarının ortak dili */
  .bh-pd-buy {
    position: relative;
    z-index: 1;
    margin-top: -16px;
    padding: var(--s-5) var(--s-4) var(--s-6);
    border: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -8px 24px rgba(var(--c-shadow-rgb), .06);
  }

  .bh-pd-title { font-size: 22px; line-height: 1.2; }

  .bh-pd-price-now { font-size: 26px; }

  /* Alt bölümler (benzer ürünler vb.) kenarlardan nefes alsın */
  .route-product-product .bh-pd-side,
  .route-product-product .bh-pd-rail-block { margin-inline: var(--s-4); }
}


/* ── ÖDEME — odak modu ve katlanır özet ─────────────────────────────── */

.bh-co-sum-toggle { display: none; }

@media (max-width: 767px) {
  /* Ödeme ekranında genel gezinme yok: native ödeme akışlarındaki gibi
     kullanıcı yanlışlıkla akıştan çıkmasın. Geri düğmesi üst barda. */
  html.route-checkout-checkout .goreel-tabbar { display: none; }
  html.route-checkout-checkout.has-tabbar body { padding-bottom: var(--safe-bottom); }

  .bh-co-sum-head { display: flex; align-items: center; gap: var(--s-3); }

  .bh-co-sum-edit { margin-left: auto; }

  .bh-co-sum-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 10px;
    font: inherit;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--c-ink);
    background: var(--c-surface-sunken);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
  }

  .bh-co-sum-toggle svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--d-base) var(--e-out);
  }

  .bh-co-sum.is-open .bh-co-sum-toggle svg { transform: rotate(180deg); }

  /* Kapalıyken: ürün listesi ve ara satırlar gizli, genel toplam görünür */
  .bh-co-sum:not(.is-open) .bh-co-items,
  .bh-co-sum:not(.is-open) .bh-sum-row:not(.is-grand) { display: none; }

  .bh-co-sum:not(.is-open) .bh-sum-rows { margin-top: var(--s-2); padding-top: 0; border-top: 0; }
}


/* ── TAM EKRAN ARAMA — native arama satırı ─────────────────────────────
   [ 🔍 alan ] Vazgeç
   Hap kutusu yalnızca büyüteç + alanı sarıyor; "Ara" düğmesi yok (klavyenin
   onay tuşu "Ara", enterkeyhint=search), kapatma metin düğmesi ve kutunun
   dışında (goreel.js satırı kuruyor). */

@media (max-width: 991px) {
  .bh-search-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
  }

  .bh-search-row #search {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--c-surface-sunken);
    border: 1.5px solid var(--c-line);
    box-shadow: none;
  }

  .bh-search-row #search:focus-within {
    background: var(--c-surface);
    border-color: var(--c-brand);
    box-shadow: 0 0 0 4px var(--c-brand-a16);
  }

  /* Alanın kendi çerçevesi/halkası YOK — çerçeve yalnızca kutuda */
  .bh-search-row #search input[name="search"],
  .bh-search-row #search input[name="search"]:focus {
    min-height: 48px;
    height: 48px;
    padding-left: 44px;
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
  }

  .bh-search-row .bh-search-icon { left: 14px; }

  .bh-head.is-searching .bh-search-row .bh-search-submit { display: none; }

  .bh-head.is-searching .bh-search-close {
    width: auto;
    height: 48px;
    padding: 0 2px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-brand);
    background: none;
    border-radius: 0;
  }

  .bh-head.is-searching .bh-search-close:active { opacity: .6; }

  /* Hızlı kategoriler: başlık ve çipler arama satırıyla hizalı */
  .bh-search-quick { margin-top: var(--s-2); }
}


/* ── MENÜ ÇEKMECESİ — v2 ───────────────────────────────────────────────
   Hızlı erişim kutucukları + görselli kategori satırları. Düz metin
   listesi 27 satırda ayırt edilemiyordu; görsel, adı okumadan tanıtıyor. */

.bh-drawer { background: var(--c-surface-sunken); }

.bh-drawer-head { background: var(--c-surface); }

.bh-drawer-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  margin: var(--s-4) var(--s-4) 0;
}

.bh-dq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--s-3) 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-ink);
  text-align: center;
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: transform var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}

.bh-dq:hover,
.bh-dq:focus { color: var(--c-ink); text-decoration: none; }

.bh-dq:active { transform: scale(.95); background: var(--c-brand-a08); }

.bh-dq-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--c-brand);
  background: var(--c-brand-a08);
  border-radius: 50%;
}

.bh-dq-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-dq-ico svg.is-fill { fill: currentColor; stroke: none; }

.bh-dq--wa .bh-dq-ico { color: #1FA855; background: #EAF7EF; }

/* Kategori listesi: tek kart içinde, ayraçlı satırlar */
.bh-drawer-cats {
  display: flex;
  flex-direction: column;
  margin: 0 var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.bh-dc {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 60px;
  padding: var(--s-2) var(--s-3);
  color: var(--c-ink);
  text-decoration: none;
  border-top: 1px solid var(--c-line);
  transition: background var(--d-fast) var(--e-out);
}

.bh-dc:first-child { border-top: 0; }

.bh-dc:hover,
.bh-dc:focus { color: var(--c-ink); text-decoration: none; }

.bh-dc:active { background: var(--c-brand-a08); }

.bh-dc-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 2px;
  overflow: hidden;
  background: var(--c-surface);
  border: 1.5px solid var(--c-brand-a32);
  border-radius: 50%;
}

.bh-dc-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.bh-dc-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.bh-dc-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bh-dc-count {
  margin-top: 2px;
  font-size: 12px;
  color: var(--c-ink-muted);
}

.bh-dc-go {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--c-ink-faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kurumsal liste de kart içinde */
.bh-drawer-cats ~ .bh-drawer-nav {
  margin: 0 var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.bh-drawer-cats ~ .bh-drawer-nav .bh-drawer-link { padding-inline: var(--s-4); font-size: 14px; }
.bh-drawer-cats ~ .bh-drawer-nav .bh-drawer-link + .bh-drawer-link { border-top: 1px solid var(--c-line); }

.bh-drawer-label { margin: var(--s-6) var(--s-5) var(--s-2); }

/* Çekmece açılınca odak ilk öğeye gidiyor (erişilebilirlik); tarayıcının
   varsayılan (turuncu/mavi) halkası yerine marka halkası, yalnızca klavyede */
.bh-drawer a:focus,
.bh-drawer button:focus { outline: none; }

.bh-drawer a:focus-visible,
.bh-drawer button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-brand-a32);
  border-radius: var(--r-sm);
}

/* Tam ekran mini sepet: alt sekme çubuğu varken onun ÜSTÜNDE bitsin —
   "Sepetime Git / Kasaya Git" düğmeleri çubuğun arkasında kalıyordu.
   Çubuk görünür kalıyor (Sepet sekmesi etkin, kullanıcı nerede olduğunu
   biliyor). */
@media (max-width: 991px) {
  html.has-tabbar .bh-mc {
    bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  }

  html.has-tabbar .bh-mc-actions { padding-bottom: var(--s-4); }

  .bh-mc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
    background: var(--c-surface);
    box-shadow: 0 -6px 18px rgba(var(--c-shadow-rgb), .06);
  }
}

@media (max-width: 991px) {
  /* Başlık satırı: [Sepetiniz · 1 ürün] ................ [×] */
  .bh-mc-head { display: flex; align-items: flex-end; gap: var(--s-2); }
  .bh-mc-head .bh-mc-count { margin-bottom: 3px; }
  .bh-mc-head .bh-mc-close { margin-left: auto; align-self: center; }
}


/* ── MOBİL HEADER — v2: yatay logo solda, eylemler sağda ───────────────
   Ortalanmış dikey logo 36px'lik barda yazıyı ~11px'e düşürüyordu ve
   "web sitesi" görünümü veriyordu. Alışveriş uygulamalarının ortak dili:
   marka solda, eylemler sağda. Hamburger sekme çubuğu varken gereksiz —
   menü "Kategoriler" sekmesinde. (Uygulama içi iç sayfalardaki "geri +
   başlık" düzeni ayrı kurallarla korunuyor, yukarıda.) */

@media (max-width: 991px) {
  html.has-tabbar:not(.is-inner) .bh-bar-inner,
  html.has-tabbar:not(.in-app) .bh-bar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 60px;
  }

  html.has-tabbar:not(.in-app) .bh-menu-btn,
  html.in-app:not(.is-inner) .bh-menu-btn { display: none; }

  html.has-tabbar:not(.is-inner) .bh-logo,
  html.has-tabbar:not(.in-app) .bh-logo {
    grid-column: 1;
    justify-self: start;
  }

  .bh-logo picture { display: block; }

  /* Yatay logo: 425x120 → 32px yükseklikte ~113px genişlik, yazı ~18px */
  .bh-logo img { height: 32px; width: auto; }

  .bh-actions {
    grid-column: 3;
    gap: 0;
  }

  /* Telefonda üç eylem: arama · favoriler · sepet */
  .bh-actions-wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    width: 44px;
    height: 44px;
    border-radius: var(--r-full);
  }

  .bh-actions-wishlist .bh-act-text { display: none; }

  .bh-actions-wishlist:active { background: var(--c-brand-a16); transform: scale(.92); }

  .bh-search-btn { order: 1; }

  .bh-cart-slot { order: 3; }

  .bh-icon-btn,
  .bh-cart-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: var(--r-full); }

  .bh-icon-btn svg,
  .bh-cart-btn svg,
  .bh-actions-wishlist .bh-act-ico svg { width: 23px; height: 23px; }

  .bh-actions-wishlist .bh-act-heart { width: 21px; height: 21px; }

  /* Ana sayfa: üstteki arama çubuğu görünürken header'daki arama ikonu
     yok (iki arama yan yana). Çubuk kaydırılıp ekrandan çıkınca ikon
     kayarak geliyor — goreel-mobile.js html.hsearch-out sınıfını basıyor. */
  html.route-common-home .bh-search-btn {
    width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: width var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
  }

  html.route-common-home.hsearch-out .bh-search-btn {
    width: 44px;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Çekmece başlığında yatay logo */
.bh-drawer-logo img { height: 28px; width: auto; }

/* Uygulama içi iç sayfa: [geri] [başlık] [arama · sepet]. Üç ikon 80px'lik
   sağ sütuna sığmıyor, sepet taşıyordu; favoriler ana sayfa ve çekmecede. */
@media (max-width: 991px) {
  html.in-app.is-inner .bh-bar-inner { grid-template-columns: 88px minmax(0, 1fr) 88px; }
  html.in-app.is-inner .bh-actions-wishlist { display: none; }
}


/* ── ANLIK ÖNERİLER — tam ekran aramanın içinde ───────────────────────
   Açılır panel değil, ekranın kendisi: kenarlıksız, kaydırılabilir liste.
   Öneriler varken "Kategorilere göz atın" çipleri gizleniyor. */
@media (max-width: 991px) {
  .bh-suggest {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0 calc(var(--s-4) * -1);
    padding: 0 var(--s-2) var(--s-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .bh-search-slot.has-suggest .bh-search-quick { display: none; }

  .bh-sg-item { min-height: 64px; padding: var(--s-2) var(--s-2); }

  .bh-sg-item + .bh-sg-item,
  .bh-sg-list li + li .bh-sg-item { border-top: 1px solid var(--c-line); border-radius: 0; }

  .bh-sg-name { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .bh-sg-more { min-height: 52px; margin: var(--s-2) var(--s-2) 0; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
}

/* Çekmecede bildirim izni (yalnızca uygulamada) */
.bh-drawer-push { display: flex; align-items: center; gap: 12px; margin: var(--s-3) var(--s-4) var(--s-2); padding: 14px; border-radius: var(--r-lg); background: linear-gradient(135deg, #E3F6F8, #F2FBFC); border: 1px solid var(--c-brand-a16); }
.bh-drawer-push[hidden] { display: none; }
.bh-drawer-push > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--c-brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bh-drawer-push-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.35; color: var(--c-ink-body); }
.bh-drawer-push-text strong { font-size: 13.5px; color: var(--c-ink); }
.bh-drawer-push .bh-push-ask-denied { display: none; }
.bh-drawer-push.is-denied .bh-push-ask-sub, .bh-drawer-push.is-denied .bh-push-ask-btn { display: none; }
.bh-drawer-push.is-denied .bh-push-ask-denied { display: block; }
.bh-drawer-push .bh-push-ask-btn { flex: none; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--c-brand); color: #fff; font: inherit; font-weight: 700; font-size: 13px; }