/* =============================================================================
   Parça Gönder — MOBİL BİLEŞEN KÜTÜPHANESİ (mobile.css)
   =============================================================================

   KAPSAM: Bu dosyadaki HER kural `@media (max-width: 991.98px)` içindedir.
   Masaüstü (>= 992px) bu dosyadan HİÇ etkilenmez. Buraya media query DIŞINA
   kural yazma — masaüstü sözleşmesini bozar.

   Yüklenme sırası (layouts/storefront.html):
     bootstrap.min.css -> bootstrap-icons -> custom.css -> chatbot.css -> mobile.css
   En sonda olduğu için eşit özgüllükte chatbot.css/custom.css'i ezebilir.

   TEMA: Sabit renk YAZMA. var(--bs-body-bg) / var(--bs-border-color) /
   var(--bs-secondary-bg) / var(--bs-body-color) / var(--bs-secondary-color)
   veya --pg-brand kullan. Her kural açık + koyu temada çalışmalı.

   -----------------------------------------------------------------------------
   Z-INDEX MERDİVENİ (Bootstrap 5.3 ile birlikte — çakışma yok)
   -----------------------------------------------------------------------------
     1020  header .sticky-top (.pg-m-appbar)          [Bootstrap $zindex-sticky]
     1025  .pg-m-actionbar   (yapışkan alt aksiyon çubuğu — tab bar'ın ÜSTÜNDE
                              durur; fiziksel olarak üstte, z olarak altında)
     1030  .pg-m-bottomnav   (alt tab bar)            [Bootstrap $zindex-fixed]
     1035  .pg-chat-toggle   (sohbet balonu — mobilde 1045'ten indirildi)
     1040  #pgCookieBar + .offcanvas-backdrop         [Bootstrap $zindex-offcanvas-backdrop]
     1045  .offcanvas / .pg-m-sheet                   [Bootstrap $zindex-offcanvas]
     1046  .pg-chat-panel    (açık sohbet paneli — offcanvas'ın hemen üstü)
     1050  .modal-backdrop                            [Bootstrap]
     1055  .modal                                     [Bootstrap]
     1090  #toastContainer                            [Bootstrap $zindex-toast]

   Sonuçlar (bilinçli kararlar):
     * Tab bar (1030) offcanvas backdrop'un (1040) ALTINDA → menü/sheet/modal
       açılınca tab bar üste taşmaz, backdrop'un arkasında kalır. İSTENEN BU.
     * Çerez bandı (1040) sohbet balonunun (1035) ÜSTÜNDE → eski "bant balonu
       39px örtüyor" karmaşası yerine net katman. Ayrıca bant görünürken
       balon `body.pg-cookiebar-on` ile bandın üstüne ötelenir (çakışma sıfır).
     * Toast (1090) her şeyin üstünde ve top:0'da → alt bölgeyle ilgisi yok.

   -----------------------------------------------------------------------------
   BİLEŞEN KÜTÜPHANESİ — SAYFA AJANLARI İÇİN SÖZLEŞME
   -----------------------------------------------------------------------------
   Sayfa şablonları YALNIZ bu sınıfları kullanır, CSS YAZMAZ. Tümü mobilde
   etkindir; masaüstünde no-op olduğu için `d-lg-none` gerekmeyen (aynı DOM'u
   iki modda kullanan) yerlerde de güvenle eklenebilir.

   1) .pg-m-chips — yatay kaydırmalı çip şeridi (scrollbar gizli, momentum,
      kenarlarda taşma yok). Çocuk: .pg-m-chip (+ .is-active).
      <div class="pg-m-chips">
        <a class="pg-m-chip is-active" href="/urunler">Tümü</a>
        <a class="pg-m-chip" href="/urunler?kategori=fren">Fren Sistemi</a>
      </div>
      NOT: .pg-m-chip `white-space:nowrap` DEĞİL — uzun kategori adı taşırmaz;
      şerit kaydırılır. Bootstrap `.badge` yerine BUNU kullan (badge nowrap'tır
      ve kategori sayfasında 91px yatay taşma yapıyordu).

   2) .pg-m-sheet — alttan açılan bottom-sheet. Bootstrap `offcanvas
      offcanvas-bottom` ÜZERİNE eklenir (JS'i Bootstrap'ın, görünümü bizim:
      yuvarlak köşe, tutamaç, max %90 yükseklik, gövde kaydırmalı).
      <div class="offcanvas offcanvas-bottom pg-m-sheet" id="ornekSheet" tabindex="-1">
        <div class="pg-m-sheet__handle"></div>
        <div class="offcanvas-header"><h5 class="offcanvas-title">Sırala</h5>
          <button class="btn-close" data-bs-dismiss="offcanvas"></button></div>
        <div class="offcanvas-body">…</div>
        <div class="pg-m-sheet__footer"><button class="btn btn-brand w-100">Uygula</button></div>
      </div>
      Açtırma: <button data-bs-toggle="offcanvas" data-bs-target="#ornekSheet">
      .pg-m-sheet--full → tam ekran (%100) sheet.

   3) .pg-m-grid2 — 2 sütun ürün gridi. Mevcut Bootstrap `row row-cols-*`
      satırının ÜZERİNE eklenir; mobilde CSS grid'e döner, masaüstünde
      dokunulmamış Bootstrap row kalır.
      <div class="row row-cols-2 row-cols-md-3 row-cols-xl-4 g-3 pg-m-grid2">
        <div class="col">…kart…</div>
      </div>

   4) .pg-m-card — kompakt mobil ürün kartı (kare görsel, çerçeve, gölge yok).
      .pg-m-card__img (1:1 görsel sarmalı) · .pg-m-card__body ·
      .pg-m-card__price / .pg-m-card__oldprice · .pg-m-clamp2 (2 satır kırpma).
      Favori kalbi için kütüphane sınıfı YOK — Bootstrap dolgulu daire +
      .pg-m-tap kalıbı kullanılır (görselin üstünde okunaklı; 44x44 hedef).
      <div class="card pg-m-card h-100">
        <a class="pg-m-card__img" href="/urun/x"><img src="…" alt="…"></a>
        <button class="fav-btn pg-m-tap btn btn-light btn-sm rounded-circle
                       position-absolute top-0 end-0 m-2 z-2" data-fav-id="12">
          <i class="bi bi-heart"></i></button>
        <div class="card-body pg-m-card__body">
          <a class="product-title pg-m-clamp2" href="/urun/x">Ürün adı</a>
          <div class="pg-m-card__price">1.234,56 ₺</div>
        </div>
      </div>

   5) .pg-m-clamp2 / .pg-m-clamp1 — çok satırlı metni 2/1 satıra kırpar.

   6) .pg-m-actionbar — yapışkan alt aksiyon çubuğu (ürün detay "Sepete Ekle",
      sepet "Ödemeye Geç"). Tab bar'ın ÜSTÜNE oturur, safe-area hesaplı.
      Sayfaya AYRICA .pg-m-has-actionbar ekle ki içerik çubuğun altında kalmasın.
      <div class="pg-m-actionbar d-lg-none">
        <div class="pg-m-actionbar__info"><span class="pg-m-actionbar__price">1.234,56 ₺</span></div>
        <button class="btn btn-brand pg-m-actionbar__cta" data-add-cart …>Sepete Ekle</button>
      </div>

   7) .pg-m-stepper — adet artır/azalt (her düğme 44x44).
      <div class="pg-m-stepper">
        <button type="button" class="pg-m-stepper__btn" data-step="-1">−</button>
        <input class="pg-m-stepper__input" type="number" value="1" inputmode="numeric">
        <button type="button" class="pg-m-stepper__btn" data-step="1">+</button>
      </div>
      (JS'i sayfa ajanı yazar — kütüphane yalnız görünüm verir.)

   8) .pg-m-gallery — kaydırmalı (scroll-snap) galeri + nokta göstergesi.
      <div class="pg-m-gallery">
        <div class="pg-m-gallery__track">
          <div class="pg-m-gallery__slide"><img src="…" alt="…"></div>
        </div>
        <div class="pg-m-gallery__dots"><span class="is-active"></span><span></span></div>
      </div>

   9) .pg-m-rail — yatay ürün rafı (yarım kart görünür = kaydırma sinyali).
      <div class="pg-m-rail">
        <div class="pg-m-rail__item">…kart…</div>
      </div>
      .pg-m-rail--sm → dar öğe (ör. son görüntülenenler).

  10) .pg-m-section — açılır-kapanır bölüm (Bootstrap collapse ÜZERİNE).
      <div class="pg-m-section">
        <button class="pg-m-section__head collapsed" data-bs-toggle="collapse"
                data-bs-target="#s1" aria-expanded="false">Ürün Açıklaması</button>
        <div class="collapse" id="s1"><div class="pg-m-section__body">…</div></div>
      </div>

  11) .pg-m-tap — herhangi bir küçük tıklanabilir öğeye 44x44 dokunma alanı
      kazandırır (görsel boyutu değişmez, hit alanı büyür).
      UYARI: kabında `overflow:hidden` varsa ::after hit alanı KIRPILIR
      (bkz. .pg-m-chip--tap gerekçesi). Böyle yerlerde öğeye doğrudan
      min-height:44px ver.

  12) Yardımcılar: .pg-m-hide (mobilde gizle) · .pg-m-noscrollbar (kaydırma
      çubuğunu gizle) · .sfauth (kimlik formları — bölüm 15).
      "YALNIZ mobilde göster" için Bootstrap'ın `d-lg-none`'unu kullan.
      (Burada bir `.pg-m-only` BELGELENMİŞTİ ama hiç TANIMLANMAMIŞTI ve bu
      dosyada tanımlanamaz da: her kural mobil media query'sinin içinde
      olduğundan masaüstünde gizleyecek kural yazılamaz. Kullanan olsaydı
      sessizce hiçbir şey yapmayacaktı — kaldırıldı.)

   -----------------------------------------------------------------------------
   İSKELET (bu ajan kurdu, sayfa ajanı DOKUNMAZ)
   -----------------------------------------------------------------------------
   .pg-m-appbar (header) · .pg-m-bottomnav (partials/storefront_bottomnav.html)
   · main.storefront-main alt boşluğu · chatbot/çerez bandı ötelemesi.
   ========================================================================== */

@media (max-width: 991.98px) {

  /* ==========================================================================
     0) TOKENLAR
     ========================================================================== */
  :root {
    /* iOS çentik/gesture bar payı — desteklemeyen tarayıcıda 0px'e düşer */
    --pg-safe-b: env(safe-area-inset-bottom, 0px);

    --pg-bottomnav-h: 58px;   /* alt tab bar yüksekliği (safe-area HARİÇ) */
    --pg-header-h: 56px;      /* mobil appbar'ın kayan durumdaki yüksekliği */
    --pg-actionbar-h: 64px;   /* yapışkan alt aksiyon çubuğu */
    --pg-cookiebar-h: 0px;    /* çerez bandı yüksekliği — footer JS ölçer */

    /* Ritim (HB analizinden uyarlanan skala) */
    --pg-m-gap: 8px;
    --pg-m-pad: 12px;
    --pg-m-radius: 12px;

    /* Z-index merdiveni (yukarıdaki tabloya bak) */
    --pg-z-actionbar: 1025;
    --pg-z-bottomnav: 1030;
    --pg-z-chattoggle: 1035;
    --pg-z-cookiebar: 1040;

    /* ---- ALT BÖLGE İSTİFİ (tek doğruluk kaynağı) --------------------------
       Alt katmanlar birbirinin ÜSTÜNE oturur. Her katman "altımda ne kadar
       yer kaplı?" sorusunu bu tokenlardan hesaplar — böylece iki ayrı gövde
       sınıfı (pg-m-has-actionbar + pg-cookiebar-on) AYNI ANDA aktifken bile
       kimse kimseyi örtmez.

       ÖNEMLİ: Bunlar aşağıda `body.<sınıf>` ile GÜNCELLENİR; kuralları eşit
       özgüllükte yarıştırmak yerine (kaynak sırasına göre biri diğerini
       eziyordu — çakışma buradan çıkıyordu) değeri tek yerde toplarız.

         --pg-actionbar-cur : yapışkan aksiyon çubuğu varsa yüksekliği, yoksa 0
         --pg-cookiebar-h   : çerez bandı görünürse yüksekliği (footer JS ölçer)

       DİKKAT — kümülatif toplamı BURADA (:root'ta) bir tokena önceden
       hesaplatma. Özel özelliklerin içindeki var() referansları, tokenın
       BİLDİRİLDİĞİ elemanda çözülür: :root'ta hesaplanan bir toplam,
       --pg-actionbar-cur'un :root değerini (0px) kalıcı olarak gömer ve
       body'deki güncellemeye ASLA tepki vermez. Bu yüzden toplamı her katman
       KULLANIM ANINDA kendi calc()'unda yapar (aşağıda, bölüm 14). */
    --pg-actionbar-cur: 0px;
    --pg-cookiebar-h: 0px;
  }

  /* Aksiyon çubuğu olan sayfalar tokenı açar (sınıf body'de: product_detail.html
     ve checkout.js ekliyor). `main`'de de destekleniyor — geriye uyumluluk. */
  body.pg-m-has-actionbar,
  main.storefront-main.pg-m-has-actionbar {
    --pg-actionbar-cur: var(--pg-actionbar-h);
  }

  /* Yatay taşma emniyet kemeri: hiçbir sayfa body'yi yana kaydıramaz.
     DİKKAT — `overflow-x: hidden` KULLANMA: overflow-y'yi örtük olarak `auto`
     yapar, böylece html/body bir KAYDIRMA KABI olur ve içindeki
     `position: sticky` (header.sticky-top, .pg-m-appbar arama satırı) ÇALIŞMAZ
     — header yukarı kayıp gider. `clip` kaydırma kabı OLUŞTURMAZ; sticky yaşar.
     Chrome 90+ / Firefox 81+ / Safari 16+. Desteklemeyen tarayıcıda kural
     yok sayılır (taşma olsa da sticky çalışmaya devam eder). */
  html { overflow-x: clip; }

  /* ==========================================================================
     1) İSKELET — main alt boşluğu (içerik tab bar'ın arkasında kalmasın)
     ========================================================================== */
  /* Aksiyon çubuğu varsa --pg-actionbar-cur onun yüksekliğine döner (bölüm 0),
     yoksa 0px → tek kural her iki durumu da karşılar. Çerez bandı GEÇİCİ bir
     kaplama olduğu için içerik boşluğuna katılmaz (kapatılınca zıplama olmaz). */
  main.storefront-main {
    padding-bottom: calc(var(--pg-bottomnav-h) + var(--pg-actionbar-cur)
                         + var(--pg-safe-b));
  }

  /* ==========================================================================
     2) .pg-m-appbar — yapışkan mobil header
     Satır 1: hamburger + logo + tema  |  Satır 2: arama  |  Satır 3: çipler
     Kaydırma davranışı: aşağı kaydırınca satır 1 + satır 3 katlanır, ARAMA
     yapışkan kalır (erişilebilirlik şartı). Yukarı kaydırınca geri açılır.
     ========================================================================== */
  .pg-m-appbar__row1,
  .pg-m-appbar__chips {
    overflow: hidden;
    transition: max-height 0.22s ease, opacity 0.18s ease;
    max-height: 4rem;
    opacity: 1;
  }
  .pg-m-appbar__chips { max-height: 3.25rem; }

  /* Aşağı kaydırılıyor → yalnız arama satırı kalsın */
  .pg-m-appbar.pg-m-appbar--slim .pg-m-appbar__row1,
  .pg-m-appbar.pg-m-appbar--slim .pg-m-appbar__chips {
    max-height: 0;
    opacity: 0;
  }
  /* Offcanvas/sheet/modal açıkken katlama dursun (arka planda zıplamasın) */
  body.offcanvas-open .pg-m-appbar.pg-m-appbar--slim .pg-m-appbar__row1,
  body.modal-open .pg-m-appbar.pg-m-appbar--slim .pg-m-appbar__row1 {
    max-height: 4rem;
    opacity: 1;
  }

  .pg-m-appbar__search .form-control {
    /* 16px = iOS'ta odaklanınca otomatik zoom YOK */
    font-size: 16px;
    height: 44px;
  }
  .pg-m-appbar__search .btn { min-width: 46px; }

  /* Hamburger menüsü (#mobileNav offcanvas) — header'ın parçası, bu yüzden
     iskelet burada sahipleniyor. `.storefront-main` DIŞINDA olduğu için
     bölüm 16'daki form tabanı buraya ULAŞMIYORDU (arama alanı 38px kalmıştı;
     ölçüldü). Alt tab bar'ın "Kategoriler" sekmesi de bu paneli açar. */
  #mobileNav .form-control {
    min-height: 44px;
    font-size: 16px;
  }
  #mobileNav .btn { min-height: 44px; }
  #mobileNav .list-group-item,
  #mobileNav .nav-link { min-height: 44px; display: flex; align-items: center; }
  #mobileNav { padding-bottom: var(--pg-safe-b); }

  @media (prefers-reduced-motion: reduce) {
    .pg-m-appbar__row1,
    .pg-m-appbar__chips { transition: none; }
  }

  /* ==========================================================================
     3) .pg-m-bottomnav — alt tab bar (5 sekme)
     ========================================================================== */
  .pg-m-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--pg-z-bottomnav);
    display: flex;
    align-items: stretch;
    height: calc(var(--pg-bottomnav-h) + var(--pg-safe-b));
    padding-bottom: var(--pg-safe-b);
    background: var(--bs-body-bg);
    /* Gölge yerine ince ayırıcı — iki temada da temiz durur */
    box-shadow: 0 -1px 0 var(--bs-border-color);
  }
  .pg-m-bottomnav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: 10px;
    line-height: 1.1;
    /* 5 sekme x 375px = 75px/sekme, yükseklik 58px → 44px hedefin üstünde */
    min-height: var(--pg-bottomnav-h);
    -webkit-tap-highlight-color: transparent;
  }
  .pg-m-bottomnav__icon {
    position: relative;
    font-size: 20px;
    line-height: 1;
    display: block;
  }
  .pg-m-bottomnav__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pg-m-bottomnav__item.is-active,
  .pg-m-bottomnav__item:active { color: var(--pg-brand); }
  .pg-m-bottomnav__item.is-active .pg-m-bottomnav__label { font-weight: 600; }
  .pg-m-bottomnav__item:focus-visible {
    outline: 2px solid var(--pg-brand);
    outline-offset: -2px;
    border-radius: 6px;
  }
  /* İkon üstündeki sayaç rozeti (sepet/favori) */
  .pg-m-bottomnav__badge {
    position: absolute;
    top: -4px;
    left: 60%;
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
    border-radius: 999px;
    background: var(--pg-brand);
    color: #fff;
  }

  /* ==========================================================================
     4) .pg-m-actionbar — yapışkan alt aksiyon çubuğu (tab bar'ın ÜSTÜNDE)
     ========================================================================== */
  .pg-m-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--pg-bottomnav-h) + var(--pg-safe-b));
    z-index: var(--pg-z-actionbar);
    display: flex;
    align-items: center;
    gap: var(--pg-m-gap);
    padding: 8px var(--pg-m-pad);
    min-height: var(--pg-actionbar-h);
    background: var(--bs-body-bg);
    box-shadow: 0 -1px 0 var(--bs-border-color);
  }
  .pg-m-actionbar__info {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .pg-m-actionbar__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--pg-brand);
    white-space: nowrap;
  }
  .pg-m-actionbar__note {
    font-size: 11px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pg-m-actionbar__cta {
    flex: 1 1 auto;
    min-height: 48px;
    font-weight: 600;
  }

  /* ==========================================================================
     5) .pg-m-chips — yatay kaydırmalı çip şeridi
     ========================================================================== */
  .pg-m-chips {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 6px var(--pg-m-pad);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pg-m-chips::-webkit-scrollbar { display: none; }
  .pg-m-chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
    /* Bootstrap .badge'in aksine: taşma değil, kaydırma. Metin tek satır. */
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* 44px = bağlayıcı dokunma hedefi. DÜZELTME: burada 34px yazıyordu ve
       "şeridin dikey padding'i hedefi 46px'e çıkarır" notu düşülmüştü — bu
       YANLIŞ: KABIN padding'i ÇOCUĞUN hit alanını büyütmez. elementFromPoint
       ile ölçtüm: gerçek tıklanabilir yükseklik 34px'ti. .pg-m-tap ::after
       hilesi de burada işe yaramaz (aşağıdaki overflow:hidden onu kırpar). */
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
  }
  .pg-m-chip.is-active {
    background: var(--pg-brand);
    border-color: var(--pg-brand);
    color: #fff;
    font-weight: 600;
  }
  /* .pg-m-chip--tap — TIKLANABİLİR (ör. ürün detaydaki kopyalanabilir OEM
     çipi). Yükseklik artık tabandan 44px geldiği için burada yalnız imleç
     kalıyor; sınıf, "bu çip bir düğmedir" niyetini belgelemek için duruyor. */
  .pg-m-chip--tap { cursor: pointer; }

  /* ==========================================================================
     6) .pg-m-sheet — alttan açılan bottom-sheet (Bootstrap offcanvas-bottom)
     ========================================================================== */
  .offcanvas.pg-m-sheet {
    height: auto;
    max-height: 90vh;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    border-radius: var(--pg-m-radius) var(--pg-m-radius) 0 0;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--pg-safe-b);
  }
  .offcanvas.pg-m-sheet.pg-m-sheet--full { height: 100%; max-height: 100%; }

  /* `offcanvas-lg` varyantı: mobilde sheet, masaüstünde STATİK kenar çubuğu
     (ürün listesi filtre paneli). Bootstrap'ta `.offcanvas-lg` ayrı bir sınıf
     olduğundan yukarıdaki `.offcanvas` seçicisi ONA UYMAZ — kabuk kuralı bu
     yüzden tekrarlanıyor. __handle/__footer/offcanvas-body kuralları sınıf
     bazlı olduğu için ikisinde de çalışır. */
  .offcanvas-lg.pg-m-sheet {
    height: auto;
    max-height: 90vh;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    border-radius: var(--pg-m-radius) var(--pg-m-radius) 0 0;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--pg-safe-b);
  }
  .pg-m-sheet__handle {
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--bs-border-color);
  }
  .pg-m-sheet .offcanvas-header { flex: 0 0 auto; padding: 8px var(--pg-m-pad); }
  .pg-m-sheet .offcanvas-header .btn-close { padding: 12px; margin: -12px -6px -12px auto; }
  .pg-m-sheet .offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--pg-m-pad);
  }
  .pg-m-sheet__footer {
    flex: 0 0 auto;
    padding: var(--pg-m-pad);
    background: var(--bs-body-bg);
    box-shadow: 0 -1px 0 var(--bs-border-color);
  }
  .pg-m-sheet__footer .btn { min-height: 48px; }
  /* Sheet içindeki form alanları: Bootstrap tabanı 38px — dokunma hedefinin
     altında (ürün listesi filtre sheet'indeki marka/model/yıl select'lerinde
     ölçüldü). 16px yazı = iOS'ta odakta otomatik yakınlaştırma yok. */
  .pg-m-sheet .form-select,
  .pg-m-sheet .form-control {
    min-height: 44px;
    font-size: 16px;
  }

  /* ==========================================================================
     7) .pg-m-grid2 — 2 sütun ürün gridi (Bootstrap row üzerine eklenir)
     ========================================================================== */
  .pg-m-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pg-m-gap);
    /* Bootstrap .row'un negatif kenar boşluklarını ve gutter'larını sıfırla */
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  .pg-m-grid2 > * {
    /* row-cols-2'nin width:50% + col'un flex-basis'i grid'i bozmasın */
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
  }
  .pg-m-grid2--1 { grid-template-columns: minmax(0, 1fr); }

  /* TABLET (>=600px, hâlâ mobil sisteminin içinde): 375px'te doğru olan 2 sütun,
     768px'te 357px'lik dev kartlara dönüyordu. 3 sütun tablette daha okunaklı.
     Masaüstü (>=992px) bu media query'nin DIŞINDA — etkilenmez. */
  @media (min-width: 600px) {
    .pg-m-grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pg-m-grid2--1 { grid-template-columns: minmax(0, 1fr); }
    /* Raf öğesi de orantılı daralsın (2.2 kart yerine ~3.2 kart görünür) */
    .pg-m-rail__item { flex: 0 0 30%; }
    .pg-m-rail--sm .pg-m-rail__item { flex: 0 0 45%; }
  }

  /* ==========================================================================
     8) .pg-m-card — kompakt ürün kartı
     ========================================================================== */
  .pg-m-card {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--pg-m-radius);
    background: var(--bs-body-bg);
    box-shadow: none; /* ayrım gölgeyle değil boşlukla */
    overflow: hidden;
  }
  .pg-m-card__img {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
  }
  .pg-m-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  /* NOT: Burada bir `.pg-m-card__fav` kuralı vardı — HİÇBİR yerde
     kullanılmadığı için kaldırıldı (ölü CSS). Favori kalbi
     partials/product_card.html içinde `fav-btn pg-m-tap btn btn-light
     rounded-circle` ile kuruluyor: dolgulu daire, ürün görselinin üstünde
     saydam bir düğmeden çok daha okunaklı; 44x44 hedefi .pg-m-tap veriyor.
     Kalp için kütüphane sınıfı ARAMA — product_card.html'deki kalıbı kullan. */
  .pg-m-card__body { padding: 8px; }
  .pg-m-card__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--pg-brand);
  }
  .pg-m-card__oldprice {
    font-size: 12px;
    color: var(--bs-secondary-color);
    text-decoration: line-through;
  }
  /* Kart içi aksiyon butonu ("Sepete Ekle"/"Stokta Yok") — btn-sm 31px'tir.
     `.card-body` ile SINIRLI: favori kalbi kartın DOĞRUDAN çocuğu ve o da
     `.btn` taşıyor; kapsama alınırsa 32x44 elips olur (hedefi .pg-m-tap verir).
     KÜTÜPHANEDE, çünkü product_card.html üç yerde render ediliyor (products +
     home rafları + product_detail rafı); products.html'in <style>'ında durduğu
     sürece raflardaki kartlar bu kuralı ALMIYORDU. */
  .pg-m-card .card-body .btn { min-height: 44px; }

  /* Çok satır kırpma */
  .pg-m-clamp1,
  .pg-m-clamp2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }
  .pg-m-clamp1 { -webkit-line-clamp: 1; }
  .pg-m-clamp2 { -webkit-line-clamp: 2; font-size: 13px; line-height: 1.35; }

  /* ==========================================================================
     9) .pg-m-stepper — adet artır/azalt
     ========================================================================== */
  .pg-m-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bs-body-bg);
  }
  .pg-m-stepper__btn {
    width: 44px;
    min-height: 44px;
    border: 0;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pg-m-stepper__btn:disabled { opacity: 0.45; }
  .pg-m-stepper__input {
    width: 52px;
    min-height: 44px;
    border: 0;
    border-left: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: center;
    font-size: 16px; /* iOS zoom yok */
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .pg-m-stepper__input::-webkit-outer-spin-button,
  .pg-m-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* ==========================================================================
     10) .pg-m-gallery — kaydırmalı galeri + nokta göstergesi
     ========================================================================== */
  .pg-m-gallery { position: relative; }
  .pg-m-gallery__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pg-m-gallery__track::-webkit-scrollbar { display: none; }
  .pg-m-gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 1 / 1;
    background: var(--bs-tertiary-bg);
  }
  .pg-m-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .pg-m-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
  }
  .pg-m-gallery__dots > span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--bs-border-color);
    transition: width 0.15s ease, background-color 0.15s ease;
  }
  .pg-m-gallery__dots > span.is-active {
    width: 18px;
    background: var(--pg-brand);
  }

  /* ==========================================================================
     11) .pg-m-rail — yatay ürün rafı
     ========================================================================== */
  .pg-m-rail {
    display: flex;
    gap: var(--pg-m-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 2px var(--pg-m-pad);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pg-m-rail::-webkit-scrollbar { display: none; }
  .pg-m-rail__item {
    /* 2.2 kart görünür → yarım kart "kaydırılabilir" sinyali */
    flex: 0 0 44%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .pg-m-rail--sm .pg-m-rail__item { flex: 0 0 66%; }

  /* .pg-m-rail MEVCUT bir Bootstrap `.row`'a giydirildiğinde (ana sayfa
     rafları aynı DOM'u masaüstünde grid, mobilde raf olarak kullanıyor):
     row'un `flex-wrap:wrap` + gutter'ları rafı kırıyor. .pg-m-grid2'deki
     nötrleme kalıbının raf karşılığı — KÜTÜPHANEDE, çünkü bu "row üzerine
     bindir" deseni sözleşmenin parçası (bkz. başlık, madde 9). */
  .row.pg-m-rail {
    flex-wrap: nowrap;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    /* scroll-snap rafın padding'ini yutup ilk kartı x=0'a yapıştırıyordu. */
    scroll-padding-inline: var(--pg-m-pad);
  }
  .row.pg-m-rail > .pg-m-rail__item { width: auto; }
  /* Rafın kabın yatay padding'ini taşıp kenara kadar akması (kenarda kesilen
     kart = "kaydır" sinyali). `.container-xl.px-3` (1rem) varsayar; farklı
     padding'li bir kapta kullanılırsa sayfa bu değeri ezmeli. */
  .pg-m-rail--bleed { margin-inline: -1rem; }

  /* ==========================================================================
     12) .pg-m-section — açılır-kapanır bölüm
     ========================================================================== */
  .pg-m-section { border-bottom: 1px solid var(--bs-border-color); }
  .pg-m-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px var(--pg-m-pad);
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
  }
  .pg-m-section__head::after {
    content: "\F282"; /* bootstrap-icons: chevron-down */
    font-family: "bootstrap-icons";
    font-size: 14px;
    font-weight: 400;
    color: var(--bs-secondary-color);
    transition: transform 0.2s ease;
  }
  .pg-m-section__head:not(.collapsed)::after { transform: rotate(180deg); }
  .pg-m-section__body { padding: 0 var(--pg-m-pad) var(--pg-m-pad); }

  /* ==========================================================================
     13) Yardımcılar
     ========================================================================== */
  .pg-m-hide { display: none !important; }
  .pg-m-noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }
  .pg-m-noscrollbar::-webkit-scrollbar { display: none; }
  /* Görsel boyutu değiştirmeden 44x44 dokunma alanı */
  .pg-m-tap { position: relative; }
  .pg-m-tap::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* ==========================================================================
     14) ALT BÖLGE STACKING — chatbot + çerez bandı ötelemesi
     Not: chatbot.css'teki masaüstü değerlerine DOKUNULMADI; burada yalnız
     mobil katman yeniden konumlanır (mobile.css chatbot.css'ten SONRA yüklenir).
     ========================================================================== */

  /* Sohbet balonu: istifin EN ÜSTÜNDE — tab bar + aksiyon çubuğu + çerez
     bandı, hangisi varsa hepsinin üstüne çıkar. TEK kural: eskiden
     `body.pg-cookiebar-on` ve `body.pg-m-has-actionbar` ayrı ayrı yazılıydı,
     ikisi de (0,2,0) özgüllüğünde olduğu için AYNI ANDA aktifken kaynak
     sırasındaki son kural (actionbar) kazanıyor, çerez bandı yüksekliği
     düşüyor ve balon bandın İÇİNDE kalıyordu. Token toplamı bunu kökten
     çözer — yok olan katkı 0px'e düşer. */
  .pg-chat-toggle {
    z-index: var(--pg-z-chattoggle);
    bottom: calc(var(--pg-bottomnav-h) + var(--pg-actionbar-cur)
                 + var(--pg-cookiebar-h) + var(--pg-safe-b) + 12px);
    /* 3.5rem = 56px > 44px dokunma hedefi (chatbot.css'ten gelir) */
  }

  /* Sohbet paneli: mobilde tam ekran (HB kalıbı). WhatsApp görünümü ve KVKK
     rıza ekranı aynı DOM içinde olduğundan bozulmaz — yalnız kap büyür. */
  .pg-chat-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding-bottom: var(--pg-safe-b);
    /* z-index chatbot.css'ten 1046 olarak gelir — offcanvas'ın (1045) üstü */
  }
  .pg-chat-inputbar .form-control {
    font-size: 16px; /* iOS'ta odakta otomatik zoom YOK (eski: 14px) */
  }

  /* Çerez bandı: tab bar'ın ÜSTÜNDE, z merdiveninde 1040.
     GA4 rıza mantığına (pgLoadGA4 / pgClearGA4Cookies / pg_cookie_ok)
     DOKUNULMADI — yalnızca konumlandırma. Inline style:z-index:1080 olduğu
     için ezmek üzere !important şart. */
  #pgCookieBar {
    z-index: var(--pg-z-cookiebar) !important;
    /* Aksiyon çubuğu VARSA onun da üstüne — yoksa --pg-actionbar-cur 0px'tir,
       kural tek kalır. (Eskiden yalnız tab bar payı vardı; ürün detay/sepet
       gibi yapışkan çubuklu sayfalarda bant çubuğu tamamen örtüyordu.) */
    bottom: calc(var(--pg-bottomnav-h) + var(--pg-actionbar-cur)
                 + var(--pg-safe-b)) !important;
    max-height: 60vh;
    overflow-y: auto;
  }
  #pgCookieBar .btn { min-height: 44px; }

  /* Toast: top:0 + z1090 — alt bölgeyle ilgisi yok, header'ın altına in ki
     yapışkan appbar'ı örtmesin. */
  #toastContainer { top: calc(var(--pg-header-h) - 8px) !important; }

  /* ==========================================================================
     15) .sfauth — kimlik formları (giriş / kayıt / şifre unuttum / sıfırla)
     Bu 4 sayfa AYNI <style> bloğunu kopyalamıştı (4x tekrar). Tek yerde
     toplandı; sayfalar yalnız kabına .sfauth verir, CSS yazmaz.
     ========================================================================== */
  /* 44px/16px tabanı bölüm 16'dan gelir; kimlik formları bilinçli olarak
     daha ferah (48px) — tabanı ezer. */
  .sfauth .form-control { min-height: 48px; }
  .sfauth .btn { min-height: 48px; }
  .sfauth .form-check-input {
    width: 1.35em;
    height: 1.35em;
    margin-top: 0.15em;
  }
  .sfauth .form-check-label { padding-left: 0.25rem; }
  .sfauth .card-body { padding: 1.25rem !important; }

  /* ==========================================================================
     16) GENEL DOKUNMA HEDEFİ TABANI (denetimdeki "<44px" bulguları)
     Yalnız vitrin ana bölgesinde — panel/masaüstü etkilenmez.
     ========================================================================== */
  .storefront-main .pagination .page-link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .storefront-footer a { display: inline-block; padding: 2px 0; }

  /* FORM ALANI TABANI — Bootstrap'ın 38px'i dokunma hedefinin altında.
     Sayfa ajanları bunu AYRI AYRI dört yerde (account/checkout/order_track/
     sfauth) tekrarlamıştı; hiçbirinin kapsamadığı sayfalar (ör. /iletisim
     formu: ölçüldü, 38px) açıkta kalıyordu. Taban burada, tek yerde.

     `.btn` BİLEREK dışarıda: favori kalbi (.pg-m-card içinde btn-sm
     rounded-circle) 32x24 görünmeli, hedefi .pg-m-tap'tan geliyor; blanket
     bir buton kuralı onu 44px'lik elipse çevirip kartı bozardı.
     Daha büyük hedef isteyen sayfalar (sfauth 48px) bu tabanı ezmeye
     devam eder — 48 > 44, çakışma yok. */
  .storefront-main .form-control,
  .storefront-main .form-select {
    min-height: 44px;
    font-size: 16px; /* iOS'ta odakta otomatik yakınlaştırma YOK */
  }
  /* Onay kutuları/radyolar parmakla seçilebilir olsun */
  .storefront-main .form-check-input {
    width: 1.25em;
    height: 1.25em;
  }

  /* Kapat (×) düğmesi: Bootstrap tabanı 32x32 — hedefin altında. Görsel boyut
     korunur, padding hit alanını 44px'e çıkarır (negatif margin düzeni
     kaydırmasın diye). .pg-m-sheet zaten bunu yapıyordu; hamburger menüsü ve
     vitrin modalları açıkta kalmıştı. */
  /* 16px ikon + 2x14px padding = 44px tam. */
  #mobileNav .btn-close,
  .storefront-main .modal .btn-close,
  .pg-chat-panel .btn-close {
    padding: 14px;
    margin: -14px -8px -14px auto;
  }
}