/**
 * Mobil üst navbar — turkuaz çizgili, yüksek bar (masaüstü dokunulmaz)
 */
@media (max-width: 991px) {
    :root {
        --mobile-nav-h: 76px;
        --mt-turquoise: #01b1af;
        --mt-turquoise-bright: #00f2ff;
        --mt-turquoise-line: rgba(1, 177, 175, 0.28);
        --mt-turquoise-glow: rgba(1, 177, 175, 0.12);
    }

    /* ---- Üst bar ---- */
    .top-nav {
        min-height: var(--mobile-nav-h);
        padding: calc(10px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px));
        background: linear-gradient(
            165deg,
            rgba(6, 14, 24, 0.97) 0%,
            rgba(10, 20, 32, 0.94) 48%,
            rgba(8, 16, 26, 0.96) 100%
        );
        border-bottom: none;
        box-shadow:
            0 10px 36px rgba(0, 0, 0, 0.45),
            inset 0 -1px 0 rgba(1, 177, 175, 0.12);
        overflow: visible;
        z-index: 9600 !important;
    }

    body.nav-menu-open .top-nav,
    body:has(#menu-toggle:checked) .top-nav {
        z-index: 9650 !important;
    }

    /* Üst — ince, belirsiz turkuaz çizgi */
    .top-nav::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            var(--mt-turquoise-line) 20%,
            rgba(0, 242, 255, 0.22) 50%,
            var(--mt-turquoise-line) 80%,
            transparent 100%
        );
        box-shadow: 0 0 6px var(--mt-turquoise-glow);
        pointer-events: none;
        z-index: 1;
    }

    /* Alt — ince çizgi */
    .top-nav::after {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: 0;
        height: 1px;
        border-radius: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            var(--mt-turquoise-line) 25%,
            rgba(0, 242, 255, 0.2) 50%,
            var(--mt-turquoise-line) 75%,
            transparent
        );
        box-shadow: 0 0 8px var(--mt-turquoise-glow);
        pointer-events: none;
        z-index: 1;
    }

    /* Yan — 1px, düşük opaklık */
    .top-nav {
        background-image:
            linear-gradient(
                180deg,
                transparent 12%,
                rgba(1, 177, 175, 0.14) 50%,
                transparent 88%
            ),
            linear-gradient(
                180deg,
                transparent 12%,
                rgba(1, 177, 175, 0.14) 50%,
                transparent 88%
            ),
            linear-gradient(
                165deg,
                rgba(6, 14, 24, 0.97) 0%,
                rgba(10, 20, 32, 0.94) 48%,
                rgba(8, 16, 26, 0.96) 100%
            );
        background-size: 1px 65%, 1px 65%, 100% 100%;
        background-position: left 12px center, right 12px center, 0 0;
        background-repeat: no-repeat;
    }

    .top-nav.scrolled {
        background-image:
            linear-gradient(
                180deg,
                transparent 12%,
                rgba(1, 177, 175, 0.18) 50%,
                transparent 88%
            ),
            linear-gradient(
                180deg,
                transparent 12%,
                rgba(1, 177, 175, 0.18) 50%,
                transparent 88%
            ),
            linear-gradient(180deg, rgba(6, 12, 20, 0.98) 0%, rgba(8, 16, 26, 0.97) 100%);
        background-size: 1px 65%, 1px 65%, 100% 100%;
        background-position: left 12px center, right 12px center, 0 0;
        background-repeat: no-repeat;
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.5),
            0 0 12px rgba(1, 177, 175, 0.06);
    }

    body.light-mode .top-nav {
        background: transparent !important;
        background-image: none !important;
        border-radius: 0;
    }

    /* Hamburger — ince turkuaz çizgiler */
    .menu-button,
    .menu-button::before,
    .menu-button::after {
        background-color: rgba(0, 242, 255, 0.75) !important;
        box-shadow: none;
    }

    #menu-toggle:checked + .menu-button-container .menu-button::before,
    #menu-toggle:checked + .menu-button-container .menu-button::after {
        background-color: #fff !important;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
    }

    .menu-button-container {
        min-width: 52px;
        min-height: 52px;
        border-radius: 14px;
        border: 1px solid rgba(1, 177, 175, 0.18);
        background: rgba(1, 177, 175, 0.05);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    /* Tam ekran menü — body altında (mobile.css) */
    body.nav-menu-open > .menu,
    body.nav-menu-open #topNavMenu {
        padding-top: calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-top, 0px));
        box-shadow: inset 0 1px 0 rgba(1, 177, 175, 0.2);
    }

    .menu-button-container {
        z-index: 9625 !important;
        pointer-events: auto !important;
    }

    #menu-toggle ~ .menu li,
    #menu-toggle:checked ~ .menu li {
        border-bottom-color: rgba(1, 177, 175, 0.18) !important;
    }

    .menu > li a:hover,
    .menu > li a:focus-visible {
        color: var(--mt-turquoise-bright) !important;
        background: rgba(1, 177, 175, 0.1);
        border-radius: 10px;
    }

    .top-nav > a[href*="basket"] {
        margin-right: 54px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(1, 177, 175, 0.16);
        background: rgba(1, 177, 175, 0.05);
    }

    /* Logo: mobile-topnav.css (.top-nav__brand) */

    /* İçerik — navbar yüksekliği kadar üst boşluk */
    .page-content:not(:has(.hero-slider)) {
        padding-top: calc(
            var(--mobile-nav-h) + 12px + env(safe-area-inset-top, 0px)
        ) !important;
    }

    .page-content:has(.hero-slider),
    .page-content:has(.mh),
    .page-content:has(.mobile-home-hero) {
        padding-top: 0 !important;
    }

    .products-page {
        padding-top: calc(
            var(--mobile-nav-h) + 8px + env(safe-area-inset-top, 0px)
        ) !important;
    }

    /* ---- Hero slayt noktaları (yalnızca masaüstü slayt görünürken) ---- */
    .hero-slider--desktop .hero-slider__dots,
    .hero-slider__dots {
        bottom: calc(22px + env(safe-area-inset-bottom, 0px));
        padding: 6px 12px;
        gap: 8px;
        background: rgba(6, 12, 20, 0.55);
        border: 1px solid rgba(1, 177, 175, 0.45);
        box-shadow:
            0 6px 20px rgba(0, 0, 0, 0.35),
            0 0 16px rgba(1, 177, 175, 0.2);
    }

    .hero-slider__dot {
        width: 7px;
        height: 7px;
        background: rgba(255, 255, 255, 0.28);
        box-shadow: 0 0 0 1.5px rgba(1, 177, 175, 0.35);
    }

    .hero-slider__dot.is-active {
        width: 8px;
        height: 8px;
        transform: scale(1.1);
        background: var(--mt-turquoise);
        box-shadow:
            0 0 0 2px rgba(0, 242, 255, 0.45),
            0 0 12px rgba(1, 177, 175, 0.7);
    }
}

@media (max-width: 576px) {
    :root {
        --mobile-nav-h: 72px;
    }

    .hero-slider__dots {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        padding: 5px 10px;
        gap: 7px;
    }

    .hero-slider__dot {
        width: 6px;
        height: 6px;
    }

    .hero-slider__dot.is-active {
        width: 7px;
        height: 7px;
    }
}