/* ============================================================
   Navbar UX overrides (Landrick #topnav üstüne)
   Görünüm korunur; hız, okunabilirlik, klavye/mobil erişilebilirlik iyileşir.
   ============================================================ */

:root {
    --yn-nav-ink: #293d75;
    --yn-nav-ink-soft: rgba(41, 61, 117, .07);
    --yn-nav-line: rgba(41, 61, 117, .10);
}

#topnav {
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
    border-bottom: 1px solid transparent;
}

#topnav.nav-sticky {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: var(--yn-nav-line);
    box-shadow: 0 8px 24px -16px rgba(41, 61, 117, .25);
}

/* Ok animasyonu: 0.5s → 0.2s */
#topnav .navigation-menu .has-submenu .menu-arrow {
    transition: transform .2s ease, border-color .2s ease;
}

/* Portal / Giriş butonu + sepet: hover kaldırma, basınca 0.96 ölçek */
#topnav .buy-button .btn-primary,
#topnav .nav-cart-wrap .btn {
    transition: translate .15s ease, scale .15s ease, box-shadow .15s ease;
}
#topnav .buy-button .btn-primary:hover {
    translate: 0 -1px;
    box-shadow: 0 6px 16px -6px rgba(41, 61, 117, .5);
}
#topnav .buy-button .btn-primary:active,
#topnav .nav-cart-wrap:active .btn {
    scale: .96;
    translate: 0 0;
}
/* Sepet sayacı: rakam değişince genişlik oynamasın */
#topnav .nav-cart-badge {
    font-variant-numeric: tabular-nums;
}
/* Hamburger çizgileri 0.5s → 0.25s */
#topnav .navbar-toggle span {
    transition: transform .25s ease;
}

/* ------------------------------------------------------------
   Desktop dropdown
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    #topnav .navigation-menu > li > a {
        position: relative;
    }
    /* Aktif üst öğe: küçük alt çizgi */
    #topnav .navigation-menu > li.active > a::after {
        content: '';
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--yn-nav-ink);
    }

    #topnav .navigation-menu > li .submenu {
        padding: 8px;
        min-width: 220px;
        border-radius: 12px;
        border: 1px solid var(--yn-nav-line);
        box-shadow: 0 18px 40px -16px rgba(41, 61, 117, .28), 0 2px 6px rgba(41, 61, 117, .06);
        translate: 0 6px;
        margin-top: 0;
        transition: opacity .18s ease, translate .18s ease, visibility .18s;
    }
    #topnav .navigation-menu > li.has-submenu:hover > .submenu,
    #topnav .navigation-menu > li.has-submenu:focus-within > .submenu {
        visibility: visible;
        opacity: 1;
        translate: 0 0;
    }
    /* Klavye: parent'a Tab ile gelince ok döner */
    #topnav .navigation-menu > li.has-submenu:focus-within > .menu-arrow {
        transform: rotate(225deg);
        top: 33px !important;
    }

    #topnav .navigation-menu > li .submenu li a {
        padding: 9px 14px;
        border-radius: 8px;
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: #212529 !important;
        transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
    }
    #topnav .navigation-menu > li .submenu li a:hover,
    #topnav .navigation-menu > li .submenu li a:focus-visible {
        background: var(--yn-nav-ink-soft);
        color: var(--yn-nav-ink) !important;
        padding-left: 18px;
        outline: none;
    }
    #topnav .navigation-menu > li .submenu li.active > a {
        color: var(--yn-nav-ink) !important;
        background: var(--yn-nav-ink-soft);
    }

    /* Megamenü sütunları */
    #topnav .navigation-menu > li .submenu.megamenu {
        padding: 8px;
        gap: 4px;
    }
    #topnav .navigation-menu > li .submenu.megamenu > li + li {
        border-left: 1px solid var(--yn-nav-line);
    }
}

/* ------------------------------------------------------------
   Mobil
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    #topnav #navigation {
        max-height: calc(100dvh - 74px);
        padding: 8px 0 16px;
        overscroll-behavior: contain;
    }
    body.yn-nav-open {
        overflow: hidden;
    }
    /* Geri bildirim widget'ı (z-index max) menünün üstüne binmesin */
    body.yn-nav-open #feedback-module-root {
        display: none;
    }

    #topnav .navigation-menu > li > a {
        font-size: 15px;
        letter-spacing: 0;
        text-transform: none;
        padding: 14px 20px;
        border-radius: 10px;
        margin: 0 8px;
    }
    #topnav .navigation-menu > li.has-submenu:has(> .submenu.open) > a,
    #topnav .navigation-menu > li.active > a {
        background: var(--yn-nav-ink-soft);
    }
    #topnav .navigation-menu .has-submenu .menu-arrow {
        right: 28px;
        top: 21px;
        pointer-events: none;
    }
    #topnav .navigation-menu > li.has-submenu:has(> .submenu.open) > .menu-arrow {
        transform: rotate(225deg);
        top: 24px;
    }

    #topnav .navigation-menu > li .submenu {
        padding: 4px 0 8px 12px;
    }
    #topnav .navigation-menu > li .submenu li a {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        padding: 11px 20px;
        border-radius: 8px;
        margin: 0 8px;
    }
    #topnav .navigation-menu > li .submenu li a:hover,
    #topnav .navigation-menu > li .submenu li.active > a {
        background: var(--yn-nav-ink-soft);
        color: var(--yn-nav-ink) !important;
    }

    #topnav .navigation-menu > li .submenu li a {
        transition: background-color .15s ease, color .15s ease;
    }

    /* Dokunma alanları ≥ 44px: görünür boyutu değiştirmeden pseudo ile genişlet */
    #topnav .navbar-toggle {
        padding: 6px;
        margin: 0 -6px 0 6px;
    }
    #topnav .navbar-toggle::before,
    #topnav .buy-button .btn-primary::before,
    #topnav .nav-cart-wrap::before {
        content: '';
        position: absolute;
        inset: -6px -2px; /* yatayda -2: komşu butonlarla (4px boşluk) çakışmasın */
    }
    #topnav .buy-button .btn-primary {
        position: relative;
    }
}

/* Klavye odağı (her iki kırılımda) */
#topnav a:focus-visible,
#topnav button:focus-visible {
    outline: 2px solid var(--yn-nav-ink);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    #topnav, #topnav * { transition: none !important; }
}

/* ------------------------------------------------------------
   Dim: menü açıkken sayfa hafif kararır (mobil menü + desktop dropdown)
   ------------------------------------------------------------ */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 998; /* #topnav 999'un hemen altı */
    background: rgba(22, 28, 45, .22);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
body.yn-nav-open::after,
body:has(#topnav .navigation-menu > li.has-submenu:hover)::after,
body:has(#topnav .navigation-menu > li.has-submenu:focus-within)::after {
    opacity: 1;
}
body.yn-nav-open::after {
    pointer-events: auto; /* mobilde dime dokunmak menüyü kapatır (header.tpl click handler) */
}
/* Dropdown açıkken header şeffaf kalmasın; dim'in üstünde beyaz yüzey olsun */
#topnav:has(.navigation-menu > li.has-submenu:hover),
#topnav:has(.navigation-menu > li.has-submenu:focus-within) {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: var(--yn-nav-line);
}