/* ═══ GöcekExpress — mobil UI katmanı ═══
 * Tüm sipariş sayfalarına gx-dark.css'ten sonra eklenir. Masaüstü görünümü
 * değişmez; kurallar yalnızca mobil/tablet breakpoint'lerinde devreye girer.
 *   ≤640px  : kompakt header, ölçekli hero tipografisi, alt sayfa çerez kutusu
 *   <1024px : alt sekme çubuğu (_nav.php) ve ona göre kaydırılan sabit öğeler
 */
:root {
  --gx-nav-h: 64px;
  --gx-safe-b: env(safe-area-inset-bottom, 0px);
  --gx-chip: rgba(15, 23, 42, .05);
  --gx-chip-hover: rgba(15, 23, 42, .09);
  --gx-nav-bg: rgba(255, 255, 255, .92);
  --gx-nav-border: rgba(15, 23, 42, .08);
  --gx-nav-fg: #64748b;
}
html.dark {
  --gx-chip: rgba(255, 255, 255, .06);
  --gx-chip-hover: rgba(255, 255, 255, .11);
  --gx-nav-bg: rgba(15, 15, 24, .92);
  --gx-nav-border: rgba(255, 255, 255, .08);
  --gx-nav-fg: #8d93a9;
}

/* Çerez kutusu: koyu temada zemin açık kalıp başlık kayboluyordu */
html.dark .bg-white\/95 { background-color: rgba(21, 21, 31, .96) !important; }

/* ─────────────── Kompakt header (telefon) ─────────────── */
@media (max-width: 640px) {
  header.glass > div {
    padding: 8px 12px !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }
  /* İkon butonları: 40px dokunma alanı, çerçevesiz, düz yüzey */
  header.glass :is(a, button).h-11,
  header.glass :is(a, button).h-10 { height: 40px !important; }
  header.glass :is(a, button).w-11,
  header.glass :is(a, button).w-10 { width: 40px !important; }
  header.glass :is(a, button).rounded-2xl { border-radius: 12px !important; box-shadow: none !important; }
  header.glass :is(a, button).rounded-2xl:not(.brand-gradient):not(.bg-navy-950):not(.bg-brand-50) {
    background-color: var(--gx-chip) !important;
    border-color: transparent !important;
  }
  header.glass :is(a, button).rounded-2xl:not(.brand-gradient):not(.bg-navy-950):active { background-color: var(--gx-chip-hover) !important; }
  header.glass .text-xl { font-size: 1.2rem !important; line-height: 1 !important; }
  header.glass :is(a, button).px-3\.5, header.glass :is(a, button).px-4 { padding-left: 11px !important; padding-right: 11px !important; }

  /* Logo */
  header.glass img.h-10, header.glass span.h-10.w-10 {
    height: 36px !important; width: 36px !important;
    border-radius: 10px !important; box-shadow: none !important;
  }

  /* İşletme adı / sayfa başlığı mobilde de görünsün (ayraç çizgisi gizli kalır) */
  header.glass .hidden.min-w-0.md\:block { display: block !important; flex: 1 1 0; min-width: 0 !important; overflow: hidden; }
  header.glass .hidden.min-w-0.md\:block + .ml-auto { margin-left: 0 !important; }
  header.glass .hidden.min-w-0.md\:block > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Menü başlığındaki "şube · Açık · saat" satırı: tek satır, taşan kısım kırpılır */
  header.glass .hidden.min-w-0.md\:block > div.flex { flex-wrap: nowrap; -webkit-mask-image: linear-gradient(90deg,#000 88%,transparent); mask-image: linear-gradient(90deg,#000 88%,transparent); }
  header.glass .hidden.min-w-0.md\:block > div.flex > * { flex-shrink: 0; }

  /* Arama kutusu */
  header.glass div.h-11.rounded-2xl {
    height: 40px !important; border-radius: 12px !important;
    background-color: var(--gx-chip) !important; box-shadow: none !important;
  }
  header.glass div.h-11.rounded-2xl:not(.ring-2) { border-color: transparent !important; }

  /* Dil seçici: yalnız kod (TR/EN), ok ikonu yok */
  #gxDilBtn .ph-caret-down { display: none; }
  #gxDilBtn { gap: 4px !important; padding-left: 10px !important; padding-right: 10px !important; }

}
/* Dar ekran (≤380px): dil butonu yalnız ikon */
@media (max-width: 380px) {
  #gxDilCur { display: none; }
  #gxDilBtn { width: 40px; justify-content: center; padding: 0 !important; }
  /* Açık/Kapalı rozeti yalnız renkli nokta */
  header.glass .hidden.min-w-0.md\:block > div.flex > .rounded-full.px-2 { font-size: 0; padding: 4px !important; }
}
@media (max-width: 640px) {
  /* Sipariş durum çipi — küçülen header'a göre */
  .fixed.top-\[128px\] { top: 112px !important; }
}

/* ─────────────── Hero tipografisi (telefon) ─────────────── */
@media (max-width: 640px) {
  h1.text-\[36px\], h1.text-\[38px\], h1.text-\[42px\], h2.text-4xl {
    font-size: clamp(24px, 7vw, 28px) !important;
    line-height: 1.12 !important;
    letter-spacing: -1px !important;
  }
  h1.text-\[28px\] { font-size: clamp(24px, 6.8vw, 28px) !important; letter-spacing: -.8px !important; }
  .hero-surface > .relative.z-20 { padding-top: 22px !important; padding-bottom: 40px !important; }
  .hero-surface .mb-4.inline-flex.rounded-full { margin-bottom: 12px !important; padding: 6px 12px !important; font-size: 10px !important; }
  .hero-surface form.mt-6 { margin-top: 16px !important; border-radius: 16px !important; padding: 6px !important; }
  .hero-surface form.mt-6 button.h-11 { height: 42px !important; }
}

/* ─────────────── Çerez kutusu → alt sayfa (telefon) ─────────────── */
@media (max-width: 640px) {
  #gxCerez {
    left: 12px !important; right: 12px !important; bottom: calc(12px + var(--gx-safe-b)) !important;
    width: auto !important; max-width: none !important;
    border-radius: 20px !important; padding: 14px !important;
  }
  #gxCerez .h-10.w-10 { height: 36px !important; width: 36px !important; border-radius: 12px !important; }
  #gxCerez button { padding-top: 10px !important; padding-bottom: 10px !important; font-size: 12px !important; }
}

/* ─────────────── Alt sekme çubuğu (telefon + tablet) ─────────────── */
.gx-nav { display: none; }
@media (max-width: 1023px) {
  .gx-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: calc(var(--gx-nav-h) + var(--gx-safe-b));
    padding-bottom: var(--gx-safe-b);
    background: var(--gx-nav-bg);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--gx-nav-border);
    box-shadow: 0 -6px 24px rgba(7, 20, 38, .06);
  }
  .gx-nav a {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 48px; color: var(--gx-nav-fg);
    font-size: 10.5px; font-weight: 700; letter-spacing: -.1px; text-decoration: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .gx-nav a .ph, .gx-nav a .ph-fill { font-size: 23px; line-height: 1; transition: transform .15s ease; }
  .gx-nav a:active .ph, .gx-nav a:active .ph-fill { transform: scale(.9); }
  .gx-nav a.is-on { color: #ff174f; }
  .gx-nav a.is-on::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 24px; height: 3px;
    transform: translateX(-50%); border-radius: 0 0 3px 3px; background: #ff174f;
  }
  .gx-nav .gx-badge {
    position: absolute; top: 5px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #ff174f; color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--gx-nav-bg);
  }
  .gx-nav .gx-badge[hidden] { display: none; }

  /* İçerik alt çubuğun arkasında kalmasın */
  body.gx-has-nav { padding-bottom: calc(var(--gx-nav-h) + var(--gx-safe-b)); }

  /* Header'daki hesap/sepet düğmeleri alt çubukta — mobilde gizle */
  body.gx-has-nav .gx-navhide { display: none !important; }

  /* Sabit öğeleri alt çubuğun üstüne kaydır */
  body.gx-has-nav .fixed.bottom-4  { bottom: calc(var(--gx-nav-h) + var(--gx-safe-b) + 12px) !important; }
  body.gx-has-nav .fixed.bottom-6  { bottom: calc(var(--gx-nav-h) + var(--gx-safe-b) + 16px) !important; }
  body.gx-has-nav .fixed.bottom-20 { bottom: calc(var(--gx-nav-h) + var(--gx-safe-b) + 76px) !important; }
  body.gx-has-nav .fixed.bottom-24 { bottom: calc(var(--gx-nav-h) + var(--gx-safe-b) + 76px) !important; }
  body.gx-has-nav #gxCerez { bottom: calc(var(--gx-nav-h) + var(--gx-safe-b) + 10px) !important; }
}

/* ─────────────── Menü / kategori sayfası ─────────────── */
/* Koyu tema: yarı saydam beyaz yüzeyler ve yapışkan kategori şeridi */
html.dark .bg-white\/75 { background-color: rgba(21, 21, 31, .75) !important; }
html.dark .bg-\[\#f8fafc\]\/95 { background-color: rgba(11, 11, 18, .92) !important; }
html.dark .border-navy-950.bg-navy-950 { background-color: #f1f2f8 !important; border-color: #f1f2f8 !important; color: #071426 !important; }
html.dark .gx-cathero { border-color: rgba(255, 255, 255, .06) !important; }
/* Kategori şeridi: kaydırmada kenarlar yumuşak kaybolsun */
.hide-scroll.sticky { scroll-padding-inline: 16px; }
@media (max-width: 640px) {
  /* Yapışkan kategori şeridi, küçülen header'ın hemen altına */
  .sticky.top-\[120px\] { top: 104px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .sticky.top-\[120px\] > :is(a, button) { padding: 8px 14px !important; }
  .gx-cathero h1 { font-size: 24px !important; }
}
/* Koyu tema: aktif kategori (açık zemin) üzerindeki yazılar koyu kalsın */
html.dark .cat-link.active, html.dark .cat-link.active span:not(.cnt) { color: #071426 !important; }
html.dark .border-navy-950.bg-navy-950 .ph, html.dark .border-navy-950.bg-navy-950 .ph-fill { color: #ff174f !important; }

/* Mobil ürün ızgarası (2 sütun): kart dikey — görsel üstte, ad/fiyat altta */
@media (max-width: 640px) {
  section[id^="cat-"] .grid.grid-cols-2 { gap: 10px !important; }
  section[id^="cat-"] .grid.grid-cols-2 article {
    flex-direction: column; gap: 8px !important; padding: 8px !important; border-radius: 20px !important;
  }
  section[id^="cat-"] .grid.grid-cols-2 article > .gx-imgwrap {
    width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; border-radius: 14px !important;
  }
  section[id^="cat-"] .grid.grid-cols-2 article > div.flex-col { padding: 0 4px 2px; }
  section[id^="cat-"] .grid.grid-cols-2 article h3 { font-size: 13.5px !important; line-height: 1.25 !important; min-height: 2.5em; }
  section[id^="cat-"] .grid.grid-cols-2 article strong { font-size: 14px !important; }
  section[id^="cat-"] .grid.grid-cols-2 article p.line-clamp-2 { display: none; }
  section[id^="cat-"] .grid.grid-cols-2 article > div.flex-col > .mt-auto { margin-top: -30px; pointer-events: none; }
  section[id^="cat-"] .grid.grid-cols-2 article > div.flex-col > .mt-auto > * { pointer-events: auto; }
}

/* Alt kategori çipleri (kategori sayfası) */
.gx-sub {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: #475569; background: var(--gx-chip); border: 1px solid transparent; transition: background-color .15s, color .15s;
}
.gx-sub span { font-size: 10px; font-weight: 800; opacity: .55; }
.gx-sub:hover { color: #ff174f; }
.gx-sub.is-on { color: #ff174f; background: rgba(255, 23, 79, .08); border-color: rgba(255, 23, 79, .25); }
html.dark .gx-sub { color: #aab0c2; }
html.dark .gx-sub.is-on { color: #fb718f; background: rgba(255, 23, 79, .12); }
/* Satır içi adres formu */
html.dark .gx-adresbar { border-color: rgba(255, 23, 79, .25) !important; }