/* =========================================================================
   MOBİL/TABLET (≤991px) KATMANLI (DRILL-DOWN) MENÜ
   Masaüstü (>991px) .main-nav'a hiç dokunulmadı — bu blok sadece ≤991px'de
   devreye giriyor, kendi ayrı HTML (header.php'deki #emnavPanel bloğu) ve
   JS'i (mobile-nav.js) var. Kategori verisi aynı DB
   kaynağından (get_main_categories()/get_subcategories()) geliyor.
   ========================================================================= */

/* Masaüstünde panel/backdrop tamamen devre dışı — hiçbir layout/tıklama
   etkisi olmasın diye media query DIŞINDA display:none ile kapatılıyor. */
.emnav-backdrop, .emnav-panel, .emnav-only-icon { display: none; }

@media (max-width: 991px) {
  /* Keep the contact strip readable without squeezing the logo row below it. */
  .topbar .hide-mobile { display: none !important; }
  .topbar .container { justify-content: flex-end; gap: 16px; height: 32px; padding: 0 12px; }
  .topbar .topbar-links { gap: 16px; }
  .topbar a { white-space: nowrap; }
  /* Mobile header: natural logo aspect ratio and three aligned 44px icon targets. */
  .site-header { transition: transform 0.25s ease; }
  .site-header.header-hidden { transform: none; } /* Ignore the legacy cached header handler. */
  .site-header.emnav-header-hidden { transform: translateY(-100%); }
  .header-main {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 132px;
    align-items: center; gap: 10px 8px; padding: 10px 12px;
  }
  .header-main .menu-toggle { display: flex; grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
  .header-main .logo { grid-column: 2; grid-row: 1; min-width: 0; gap: 6px; font-size: 16px; }
  .header-main .logo img { width: auto !important; height: auto !important; max-width: 100%; max-height: 46px; object-fit: contain; border-radius: 0 !important; }
  .header-main .logo .mark { width: 32px; height: 32px; flex: 0 0 32px; }
  .header-main .logo small { display: none; }
  .header-main .header-actions { grid-column: 3; grid-row: 1; display: flex; gap: 0; margin: 0; }
  .header-main .action-btn { width: 44px; height: 44px; padding: 0; justify-content: center; flex: 0 0 44px; }
  .header-main .action-btn > svg:not(.emnav-only-icon), .header-main .action-label { display: none; }
  .header-main .action-btn > .emnav-only-icon { display: block; width: 22px; height: 22px; flex: 0 0 22px; }
  .header-main .action-badge { top: 0; right: 0; min-width: 16px; padding: 0 3px; }
  .header-main .search-bar { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; max-width: none; margin: 0; }
  .header-main .search-bar input { width: 100%; min-width: 0; font-size: 16px; }
  .header-main .search-bar button { flex: 0 0 48px; }

  /* Shortcuts remain above search and categories; lower navigation scrolls independently. */
  .emnav-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 16px 0; flex-shrink: 0; }
  .emnav-shortcuts a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 3px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-soft); font-size: 15px; font-weight: 600; color: var(--color-dark); }
  .emnav-shortcuts a:active { background: #e6f5f4; }
  .emnav-shortcuts svg { width: 22px; height: 22px; flex-shrink: 0; color: #216e6d; }
  .emnav-section-title { padding: 4px 16px 10px; margin: 0; font-size: 15px; font-weight: 700; color: var(--color-dark); }

  /* Masaüstü hover-nav'ı ≤991px'de tamamen gizli — yerini aşağıdaki panel alıyor. */
  .main-nav { display: none; }

  /* ---- Karartma (backdrop) ---- */
  .emnav-backdrop {
    touch-action: none;
    display: block; position: fixed; inset: 0; z-index: 400;
    background: rgba(15, 23, 32, 0.55);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .emnav-backdrop.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 0.25s ease;
  }

  /* ---- Panel kabuğu ---- */
  .emnav-panel {
    touch-action: pan-y;
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh;
    width: 85%; max-width: 400px; z-index: 401;
    background: #fff; overflow: hidden; overflow: clip;
    box-shadow: 10px 0 34px rgba(15, 23, 32, 0.18);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .emnav-panel.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease;
  }

  /* Açıkken arka sayfa kaymasın. */
  html.emnav-lock-scroll { overflow: hidden; overscroll-behavior: none; scroll-behavior: auto; }
  html.emnav-lock-scroll body { position: fixed; top: var(--emnav-scroll-top, 0px); left: 0; right: 0; width: 100%; overflow: hidden; }
  html.emnav-lock-scroll .site-header { transform: none !important; }

  /* ---- Ekranlar (1. seviye kök + her kategori için 2. seviye alt panel) ----
     Kök ekran panelin tabanında sabit durur; alt ekranlar sağdan translateX(100%)
     ile gizli başlar, .active olunca üzerine kayarak gelir (kök hareket etmez). */
  .emnav-screen {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    background: #fff;
  }
  .emnav-screen-root { transform: translateX(0); z-index: 1; }
  .emnav-screen-sub {
    transform: translateX(100%); z-index: 2;
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .emnav-screen-sub.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease;
  }

  /* ---- Ekran başlığı (sabit, geri/kapat butonları) ---- */
  .emnav-header {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px;
    min-height: 56px; padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--color-border);
  }
  .emnav-title { flex: 1; font-size: 16px; font-weight: 800; color: var(--color-dark); }
  .emnav-back {
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    font-size: 16px; font-weight: 700; color: var(--color-accent-dark);
    padding: 10px 6px 10px 8px; margin-left: -8px; min-height: 44px;
  }
  .emnav-close {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: none; border: none; cursor: pointer; color: var(--color-muted); border-radius: 50%;
  }
  .emnav-close:active { background: var(--color-bg-soft); }

  /* ---- Arama kutusu (kök ekranda, başlığın hemen altında) ---- */
  .emnav-search {
    flex-shrink: 0; display: flex; align-items: center; gap: 0;
    margin: 12px 16px; background: var(--color-bg-soft);
    border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  }
  .emnav-search input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; padding: 12px 14px; font-size: 16px; outline: none; }
  .emnav-search button { border: 0; background: var(--color-accent); color: #fff; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

  /* ---- Kayan liste alanı ---- */
  .emnav-scroll { flex: 1; min-height: 0; overscroll-behavior-y: contain; touch-action: pan-y; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .emnav-divider { height: 8px; background: var(--color-bg-soft); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .emnav-list { list-style: none; margin: 0; padding: 0; }

  /* ---- Satırlar: en az 48px yükseklik, 15-16px yazı, dokunma geri bildirimi ---- */
  .emnav-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    min-height: 50px; padding: 13px 16px; border-bottom: 1px solid var(--color-border);
    background: #fff; border-left: 0; border-top: 0; border-right: 0;
    font-size: 16px; font-weight: 600; color: var(--color-text); text-align: left;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease;
  }
  .emnav-row:active { background: var(--color-bg-soft); }
  .emnav-row.active { color: var(--color-accent-dark); background: color-mix(in srgb, var(--color-accent) 8%, white); font-weight: 700; }
  .emnav-row-drill { font-family: inherit; }
  .emnav-chevron { flex-shrink: 0; color: var(--color-muted); }
  .emnav-row-highlight { color: var(--color-danger); }
  .emnav-row-all { color: var(--color-accent-dark); font-weight: 700; }
  .emnav-row-phone { color: var(--color-accent-dark); }
}


/* Only mobile controls: visible keyboard focus, tap feedback and reduced motion. */
@media (max-width: 991px) {
  .emnav-panel :focus-visible, #emnavToggle:focus-visible { outline: 2px solid #216e6d; outline-offset: -3px; }
  .emnav-panel .emnav-row-all, .emnav-panel .emnav-back, .emnav-panel .emnav-row-phone { color: #216e6d; }
  .emnav-panel .emnav-row.active { color: #216e6d; }
  .emnav-back:active, .emnav-close:active, #emnavToggle:active { background: var(--color-bg-soft); }
  .emnav-title { min-width: 0; line-height: 1.35; }
  .emnav-header { padding-top: max(8px, env(safe-area-inset-top)); }
  .emnav-panel .emnav-chevron, .emnav-panel .emnav-close { color: var(--color-text); }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .emnav-panel, .emnav-panel.open, .emnav-backdrop, .emnav-backdrop.open, .emnav-screen-sub, .emnav-screen-sub.active, .emnav-row, .site-header { transition: none; }
}

@media (max-width: 991px) { .emnav-panel button, .emnav-panel a, #emnavToggle { touch-action: manipulation; } }

/* Tablet banner flex items must shrink to their columns; intrinsic image widths
   otherwise inflate the browser viewport and break header/gesture coordinates. */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-side { min-width: 0; width: 100%; }
  .hero-side .side-card { flex: 1 1 0; min-width: 0; max-width: 100%; }
}