/* Mobil App Shell — sadece html.app-shell + mobil */
html.app-shell {
  --app-accent: #9d1111;
  --app-ink: #0f172a;
  --app-muted: #64748b;
  --app-bar: #ffffff;
  --app-line: rgba(15, 23, 42, 0.08);
  --app-tab-h: 64px;
  --app-safe-b: env(safe-area-inset-bottom, 0px);
  --app-safe-t: env(safe-area-inset-top, 0px);
}

/* Masaüstü (≥992): app shell etkisiz — normal site */
@media (min-width: 992px) {
  html.app-shell .app-tabbar { display: none !important; }
}

@media (max-width: 991.98px) {
  html.app-shell {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
  }

  html.app-shell body {
    padding-bottom: calc(var(--app-tab-h) + var(--app-safe-b) + 8px) !important;
    padding-top: var(--app-safe-t);
  }

  /* Uygulama görünümünde hiçbir şey yatayda taşmasın */
  html.app-shell,
  html.app-shell body {
    max-width: 100%;
    overflow-x: clip;
  }

  html.app-shell img,
  html.app-shell video,
  html.app-shell iframe,
  html.app-shell table,
  html.app-shell pre {
    max-width: 100%;
  }

  /* Üst navbar: daha kompakt, app çubuğu hissi */
  html.app-shell .navbar-premium {
    padding-top: 6px;
    padding-bottom: 6px;
    box-shadow: 0 1px 0 var(--app-line);
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  /* Alt tabbar’da olan ikonları üstten gizle */
  html.app-shell .navbar-premium .d-flex.align-items-center.gap-2 > a[aria-label="Hesabım"],
  html.app-shell .navbar-premium .d-flex.align-items-center.gap-2 > button[aria-label="Sepet"] {
    display: none !important;
  }

  /* Hamburger: Keşfet tab’ı açtığı için opsiyonel gizle — kullanıcı menüyü tab’dan açar */
  html.app-shell .navbar-premium .navbar-toggler {
    display: none !important;
  }

  html.app-shell .logosite {
    max-width: 110px;
  }

  /* Footer: app’te daha sade */
  html.app-shell footer.bg-black {
    padding-top: 2rem !important;
    padding-bottom: calc(1rem + var(--app-safe-b)) !important;
  }
  html.app-shell footer .row.g-5 > .col-12:not(:first-child):not(:nth-child(2)) {
    /* keep categories + account, hide rest on very small — optional */
  }

  /* WhatsApp: tabbar üstüne */
  html.app-shell .wa-float {
    bottom: calc(var(--app-tab-h) + var(--app-safe-b) + 14px) !important;
    right: 14px !important;
    width: 52px !important;
    height: 52px !important;
  }

  /* Offcanvas: safe area */
  html.app-shell .offcanvas {
    padding-bottom: var(--app-safe-b);
  }

  /* Panel ve modallar alt menünün üstünde kalsın */
  html.app-shell .offcanvas { z-index: 1090; }
  html.app-shell .offcanvas-backdrop { z-index: 1088; }
  html.app-shell .modal { z-index: 1095; }
  html.app-shell .modal-backdrop { z-index: 1093; }

  /* Panel/modal açıkken alt menü aşağı kayıp yol açsın */
  html.app-shell .app-tabbar {
    transition: transform 0.26s ease;
  }
  html.app-shell.ov-open .app-tabbar {
    transform: translateY(115%);
  }

  /* Kart / ürün dokunuş */
  html.app-shell .p-card,
  html.app-shell .look-card,
  html.app-shell a {
    -webkit-touch-callout: none;
  }

  /* ========== ALT TAB BAR ========== */
  html.app-shell .app-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1085;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--app-tab-h) + var(--app-safe-b));
    padding: 6px 4px var(--app-safe-b);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--app-line);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.06);
  }

  html.app-shell .app-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--app-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    padding: 4px 2px;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.2s, transform 0.15s, background 0.2s;
    -webkit-user-select: none;
    user-select: none;
  }

  html.app-shell .app-tab svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  html.app-shell .app-tab:active {
    transform: scale(0.92);
  }

  html.app-shell .app-tab.is-active {
    color: var(--app-accent);
  }

  html.app-shell .app-tab.is-active span:last-child {
    font-weight: 600;
  }

  html.app-shell .app-tab-ico {
    position: relative;
    display: inline-flex;
  }

  html.app-shell .app-tab-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 20px;
    background: var(--app-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }

  html.app-shell .app-tab-badge:empty {
    display: none;
  }

  /* Sayfa geçiş hissi */
  html.app-shell body > main,
  html.app-shell .main-content-app {
    animation: appPageIn 0.28s ease;
  }

  @keyframes appPageIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.app-shell .app-tab,
  html.app-shell body > main {
    animation: none !important;
    transition: none !important;
  }
}