/**
 * Responsive chrome — mobil / tablet / masaüstü
 * Mobil:     0 – 767px
 * Tablet:    768px – 1024px
 * Masaüstü:  1025px+
 */

/* Alt sabit nav yüksekliği — footer / body boşluğu ile senkron */
@media (max-width: 1024px) {
    :root {
        --mnav-pad-top: 9px;
        --mnav-icon-slot: 41px;
        --mnav-icon-size: 22px;
        --mnav-label-gap: 3px;
        --mnav-font-size: 11px;
        --mnav-label-lh: 1.12;
        --mnav-label-offset: 0px;
        --mnav-pad-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
        --mnav-top-radius: 10px;
        --mnav-cart-ref-lift: -5px;
        --mnav-cart-box-size: 44px;
        --mnav-muted: #a8b0bc;
        --mnav-active: #4a9eff;
        --mnav-bar-bg: #121216;
        --mnav-cart-bg: #f5a300;
        --mnav-cart-bg-hover: #e69900;
        --mnav-cart-shadow: 0 3px 12px rgba(245, 163, 0, 0.45), 0 1px 5px rgba(230, 153, 0, 0.38);
        --mnav-cart-shadow-hover: 0 4px 14px rgba(245, 163, 0, 0.52), 0 2px 6px rgba(230, 153, 0, 0.42);
        --mobile-bottom-nav-clearance: max(
            62px,
            calc(
                var(--mnav-pad-top) + var(--mnav-icon-slot) + var(--mnav-label-gap)
                + calc(var(--mnav-font-size) * var(--mnav-label-lh)) + var(--mnav-pad-bottom)
            )
        );
    }

    body:not(.dashboard-page):not(.mobile-drawer-open):not(.mobile-account-menu-open) {
        padding-bottom: var(--mobile-bottom-nav-clearance) !important;
    }

    .mobile-bottom-nav {
        --mnav-icon-slot: 41px;
        --mnav-icon-size: 22px;
        --mnav-label-gap: 3px;
        --mnav-top-radius: 10px;
        --mnav-cart-ref-lift: -5px;
        --mnav-cart-box-size: 44px;
        min-height: var(--mobile-bottom-nav-clearance) !important;
        height: auto !important;
        padding-top: var(--mnav-pad-top) !important;
        padding-bottom: var(--mnav-pad-bottom) !important;
        align-items: flex-start !important;
        background: var(--mnav-bar-bg) !important;
        background-color: var(--mnav-bar-bg) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: var(--mnav-top-radius) var(--mnav-top-radius) 0 0 !important;
        -webkit-border-radius: var(--mnav-top-radius) var(--mnav-top-radius) 0 0 !important;
        overflow: hidden;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
    }

    body.light-mode .mobile-bottom-nav {
        --mnav-bar-bg: #ffffff;
        --mnav-muted: #6b7280;
        --mnav-active: #2563eb;
        background: var(--mnav-bar-bg) !important;
        background-color: var(--mnav-bar-bg) !important;
        border-top-color: var(--header-strip-border, rgba(74, 158, 255, 0.15)) !important;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    }

    .mobile-bottom-nav .mobile-bottom-nav__item {
        color: var(--mnav-muted) !important;
        transition: color 0.18s ease;
    }

    body.dark-mode .mobile-bottom-nav a.mobile-bottom-nav__item:not(.is-active),
    body.dark-mode .mobile-bottom-nav button.mobile-bottom-nav__item:not(.is-active),
    body.light-mode .mobile-bottom-nav a.mobile-bottom-nav__item:not(.is-active),
    body.light-mode .mobile-bottom-nav button.mobile-bottom-nav__item:not(.is-active) {
        color: var(--mnav-muted) !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item > i,
    .mobile-bottom-nav .mobile-bottom-nav__item > span {
        color: inherit !important;
        transition: color 0.18s ease;
    }

    /* Seçili — sabit konum, açık mavi; kalınlık değişmez */
    .mobile-bottom-nav .mobile-bottom-nav__item.is-active > span,
    body.dark-mode .mobile-bottom-nav a.mobile-bottom-nav__item.is-active,
    body.dark-mode .mobile-bottom-nav button.mobile-bottom-nav__item.is-active,
    body.light-mode .mobile-bottom-nav a.mobile-bottom-nav__item.is-active,
    body.light-mode .mobile-bottom-nav button.mobile-bottom-nav__item.is-active {
        color: var(--mnav-active) !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item.is-active:not(.mobile-bottom-nav__item--cart) > i,
    .mobile-bottom-nav .mobile-bottom-nav__item.is-active:not(.mobile-bottom-nav__item--cart) > .mnav-home-icon {
        color: var(--mnav-active) !important;
        font-size: var(--mnav-icon-size) !important;
        font-weight: 400 !important;
        transform: none !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item,
    .mobile-bottom-nav .mobile-bottom-nav__item > span {
        font-weight: 700 !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item.is-active > span {
        font-weight: 700 !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item:not(.is-active) > span {
        font-weight: 700 !important;
    }

    /* Sepet yazısı — resimde gri (aktif sekme değilse) */
    .mobile-bottom-nav .mobile-bottom-nav__item--cart:not(.is-active) > span {
        color: var(--mnav-muted) !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item--cart.is-active > span {
        color: var(--mnav-active) !important;
        font-weight: 700 !important;
    }
}

/* ─── Alt navigasyon: tam genişlik, alta yapışık (kenarlarda site görünmesin) ─── */
.mobile-bottom-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: var(--mnav-pad-top, 2px) 8px var(--mnav-pad-bottom, 5px) !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    border: none !important;
    border-top: 1px solid var(--header-strip-border, #404040) !important;
    background: var(--header-strip-bg, #2a2a2a) !important;
    background-color: var(--header-strip-bg, #2a2a2a) !important;
}

body.light-mode .mobile-bottom-nav {
    background: var(--header-strip-bg, #ffffff) !important;
    background-color: var(--header-strip-bg, #ffffff) !important;
    border-top-color: var(--header-strip-border, rgba(74, 158, 255, 0.15)) !important;
}

.mobile-bottom-nav__item {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: var(--mnav-icon-slot, 41px) auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    justify-items: center !important;
    row-gap: var(--mnav-label-gap, 3px) !important;
    column-gap: 0 !important;
    height: auto !important;
    min-height: calc(
        var(--mnav-icon-slot, 41px) + var(--mnav-label-gap, 3px)
        + calc(var(--mnav-font-size, 11px) * var(--mnav-label-lh, 1.12))
    ) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-self: start !important;
}

/* Diğer logolar — Sepet’e göre hizalı (Sepet sabit referans); yazılara dokunma */
.mobile-bottom-nav .mobile-bottom-nav__item:not(.mobile-bottom-nav__item--cart) > i,
.mobile-bottom-nav .mobile-bottom-nav__item > .mnav-home-icon {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: start !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: calc(
        (var(--mnav-cart-box-size, 44px) - var(--mnav-icon-size, 22px)) / 2
        + var(--mnav-cart-ref-lift, -5px)
    ) 0 0 !important;
    padding: 0 !important;
    font-size: var(--mnav-icon-size, 22px) !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    transform: none !important;
    transition: color 0.18s ease;
    -webkit-font-smoothing: antialiased;
}

.mobile-bottom-nav .mobile-bottom-nav__item > .mnav-home-icon {
    width: var(--mnav-icon-size, 22px) !important;
    height: var(--mnav-icon-size, 22px) !important;
    flex-shrink: 0 !important;
}

/* Yazılar — ikonun altında, sekme bazında (logolarla zorunlu hizalama yok) */
.mobile-bottom-nav .mobile-bottom-nav__item > span,
.mobile-bottom-nav .mobile-bottom-nav__item > .mobile-bottom-nav__label {
    grid-row: 2 !important;
    grid-column: 1 !important;
    align-self: start !important;
    justify-self: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--mnav-font-size, 10px) !important;
    font-weight: 700 !important;
    line-height: var(--mnav-label-lh, 1.15) !important;
    min-height: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    transition: color 0.18s ease;
}

/* Sepet — turuncu kutu (aynı 42px slot içinde) */
.mobile-bottom-nav .mobile-bottom-nav__item--cart {
    color: var(--mnav-muted, #9aa3b2) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.mobile-bottom-nav .mobile-bottom-nav__item--cart > span {
    color: inherit !important;
}

/* Sepet — referans konum (sabit); yazılara dokunma */
.mobile-bottom-nav .mobile-bottom-nav__item--cart > i {
    width: var(--mnav-cart-box-size, 44px) !important;
    height: var(--mnav-cart-box-size, 44px) !important;
    min-width: var(--mnav-cart-box-size, 44px) !important;
    min-height: var(--mnav-cart-box-size, 44px) !important;
    max-width: var(--mnav-cart-box-size, 44px) !important;
    max-height: var(--mnav-cart-box-size, 44px) !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: start !important;
    justify-self: center !important;
    margin: 0 !important;
    transform: translateY(var(--mnav-cart-ref-lift, -5px)) !important;
    border-radius: 12px !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    background: var(--mnav-cart-bg, #f5a300) !important;
    box-shadow: var(--mnav-cart-shadow) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.mobile-bottom-nav .mobile-bottom-nav__item--cart > span,
.mobile-bottom-nav .mobile-bottom-nav__item--cart > .mobile-bottom-nav__label {
    align-self: start !important;
}

.mobile-bottom-nav .mobile-bottom-nav__item--cart.is-active > i {
    color: #ffffff !important;
}

.mobile-bottom-nav .mobile-bottom-nav__item--cart.is-active > span {
    color: var(--mnav-active, #4a9eff) !important;
}

.mobile-bottom-nav .mobile-bottom-nav__item--cart:hover > i,
.mobile-bottom-nav .mobile-bottom-nav__item--cart:focus-visible > i {
    color: #ffffff !important;
    background: var(--mnav-cart-bg-hover, #e69900) !important;
    box-shadow: var(--mnav-cart-shadow-hover) !important;
    opacity: 0.96;
    filter: none !important;
    transform: translateY(var(--mnav-cart-ref-lift, -5px)) !important;
}

.mobile-bottom-nav .mobile-bottom-nav__item--cart:active > i {
    transform: translateY(var(--mnav-cart-ref-lift, -5px)) !important;
    box-shadow: var(--mnav-cart-shadow) !important;
    opacity: 0.9;
    filter: none !important;
}

body.dark-mode .mobile-bottom-nav button.mobile-bottom-nav__item--cart,
body.dark-mode .mobile-bottom-nav button.mobile-bottom-nav__item--cart:hover,
body.light-mode .mobile-bottom-nav button.mobile-bottom-nav__item--cart,
body.light-mode .mobile-bottom-nav button.mobile-bottom-nav__item--cart:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--mnav-muted, #9aa3b2) !important;
}

body.light-mode .mobile-bottom-nav .mobile-bottom-nav__item--cart > i {
    box-shadow: var(--mnav-cart-shadow) !important;
}

body.light-mode .mobile-bottom-nav .mobile-bottom-nav__item--cart:hover > i,
body.light-mode .mobile-bottom-nav .mobile-bottom-nav__item--cart:focus-visible > i {
    box-shadow: var(--mnav-cart-shadow-hover) !important;
}

/* Tablet: yatay tam sığsın, okunaklı, aralıklı */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --mnav-pad-top: 9px;
        --mnav-icon-slot: 41px;
        --mnav-icon-size: 22px;
        --mnav-label-gap: 3px;
        --mnav-font-size: 11px;
        --mnav-label-lh: 1.12;
        --mnav-label-offset: 0px;
        --mnav-pad-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
        --mnav-cart-ref-lift: -5px;
        --mnav-cart-box-size: 44px;
    }

    .mobile-bottom-nav {
        --mnav-icon-slot: 41px;
        --mnav-icon-size: 22px;
        --mnav-label-gap: 3px;
        --mnav-top-radius: 10px;
        --mnav-cart-ref-lift: -5px;
        --mnav-cart-box-size: 44px;
        padding-top: var(--mnav-pad-top) !important;
        padding-bottom: var(--mnav-pad-bottom) !important;
        border-radius: var(--mnav-top-radius) var(--mnav-top-radius) 0 0 !important;
        -webkit-border-radius: var(--mnav-top-radius) var(--mnav-top-radius) 0 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-height: var(--mobile-bottom-nav-clearance) !important;
        height: auto !important;
        padding: var(--mnav-pad-top) 14px var(--mnav-pad-bottom) !important;
        gap: 5px !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item:not(.mobile-bottom-nav__item--cart) > i {
        font-size: var(--mnav-icon-size) !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item > .mnav-home-icon {
        width: var(--mnav-icon-size) !important;
        height: var(--mnav-icon-size) !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item > span,
    .mobile-bottom-nav .mobile-bottom-nav__item > .mobile-bottom-nav__label {
        font-size: 11px !important;
    }

    .mobile-bottom-nav .mobile-bottom-nav__item--cart > i {
        width: var(--mnav-cart-box-size, 44px) !important;
        height: var(--mnav-cart-box-size, 44px) !important;
        min-width: var(--mnav-cart-box-size, 44px) !important;
        min-height: var(--mnav-cart-box-size, 44px) !important;
        max-width: var(--mnav-cart-box-size, 44px) !important;
        max-height: var(--mnav-cart-box-size, 44px) !important;
        font-size: 20px !important;
        border-radius: 12px !important;
    }

    body:not(.dashboard-page):not(.mobile-drawer-open):not(.mobile-account-menu-open) {
        padding-bottom: var(--mobile-bottom-nav-clearance) !important;
    }
}

/* ─── Tablet header: mobil ile aynı ölçek (küçülmesin) ─── */
@media (min-width: 768px) and (max-width: 1024px) {
    header .header-container {
        padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)) !important;
    }

    header .header-container > .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    header .header-container > .mobile-header-cart-wrap,
    header .header-container > .mobile-header-cart-wrap .header-cart-link {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    header .header-container > .mobile-logo-cluster > .logo-container .site-logo-wrap {
        overflow: visible !important;
        z-index: 20 !important;
    }

    header .header-container > .mobile-logo-cluster > .logo-container .site-logo-wrap img.site-logo {
        width: min(180px, 72vw) !important;
        max-height: 46px !important;
        transform: none !important;
    }

    .mobile-hdr-pill {
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        gap: 7px !important;
    }

    header .header-container > .mobile-header-actions--guest .auth-buttons button.login-btn,
    header .header-container > .mobile-header-actions--guest .auth-buttons button.register-btn {
        height: 36px !important;
        padding: 0 16px 0 12px !important;
        font-size: 13px !important;
    }

    header .header-container > .mobile-header-actions .auth-buttons .mobile-auth-btn__ico {
        width: 18px !important;
        height: 18px !important;
        font-size: 11px !important;
    }
}

/* ─── Hesabım çekmecesi: tablette tam boy ─── */
@media (min-width: 768px) and (max-width: 1024px) {
    #userMenuContainer.user-menu-container,
    #userMenuContainer.user-menu-container.show {
        width: min(440px, 94vw) !important;
        max-width: 94vw !important;
    }

    #userMenuContainer .user-menu-topbar .user-menu-hero__toolbar {
        padding: 14px 16px 12px !important;
        min-height: 48px !important;
    }

    #userMenuContainer .user-menu-hero__name,
    #userMenuContainer .user-menu-hero__balance {
        font-size: 15px !important;
    }
}

/* ─── Giriş: tablette form üstü logo gizle ─── */
@media (min-width: 768px) and (max-width: 1024px) {
    body.auth-page .auth-panel .auth-brand-nm,
    body.auth-page .auth-brand-nm {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.auth-page .auth-panel .auth-title-nm {
        margin-top: 0 !important;
    }
}