/* ============================================
   Header Shell — Masaüstü (≥769px)
   Tüm sayfalarda aynı: yükseklik, fixed, arka plan, scroll
   ============================================ */

@media screen and (min-width: 769px) {

    :root {
        --header-top-height: 40px;
        --qm-header-gradient-light: linear-gradient(
            135deg,
            rgba(21, 104, 217, 0.15) 0%,
            rgba(134, 24, 127, 0.12) 50%,
            rgba(21, 104, 217, 0.15) 100%
        );
        --qm-header-gradient-dark: linear-gradient(
            135deg,
            rgba(21, 104, 217, 0.18) 0%,
            rgba(134, 24, 127, 0.15) 50%,
            rgba(21, 104, 217, 0.18) 100%
        );
        --qm-header-shadow-light:
            0 20px 60px rgba(0, 0, 0, 0.12),
            0 8px 24px rgba(0, 0, 0, 0.08),
            0 4px 16px rgba(0, 0, 0, 0.08),
            0 0 0 1px var(--header-border);
        --qm-header-shadow-dark:
            0 12px 30px rgba(0, 0, 0, 0.3),
            0 4px 12px rgba(0, 0, 0, 0.15);
        --qm-header-bar-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
        --qm-header-bar-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.2);
        --header-dropdown-gap: 4px;
        --header-dropdown-bridge: 6px;
        --header-dropdown-z: 10050;
    }

    /* ── Dış kabuk ── */
    .site-header {
        position: relative;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: visible;
        background: transparent;
        color: var(--header-text);
        transition: min-height 0.35s ease;
    }

    .site-header.is-fixed,
    #site-header.site-header.is-fixed,
    #masthead.site-header.is-fixed,
    header.site-header.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    .admin-bar .site-header.is-fixed,
    .admin-bar #site-header.site-header.is-fixed,
    .admin-bar #masthead.site-header.is-fixed,
    .admin-bar header.site-header.is-fixed {
        top: 32px;
    }

    /* Tam genişlik arka plan — TÜM sayfalar, scroll öncesi/sonrası aynı */
    .site-header::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: var(--qm-header-gradient-light), var(--header-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: var(--qm-header-shadow-light);
        transition: background 0.35s ease, box-shadow 0.35s ease;
    }

    [data-theme="dark"] .site-header::before {
        background: var(--qm-header-gradient-dark), var(--header-bg);
        box-shadow: var(--qm-header-shadow-dark);
    }

    /* Scroll — üst kat gizlenir, yükseklik menü çubuğuna iner */
    .site-header.scrolled {
        min-height: var(--header-bottom-height, 78px);
    }

    .site-header.scrolled .header-top {
        display: none;
    }

    .site-header.scrolled .header-top::before,
    .site-header.scrolled .header-top::after {
        display: none;
    }

    .site-header:not(.scrolled) .header-top {
        opacity: 1;
        visibility: visible;
        max-height: var(--header-top-height);
        transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease;
        pointer-events: auto;
    }

    /* Üst bar kabuk */
    .header-top {
        position: relative;
        height: var(--header-top-height);
        min-height: var(--header-top-height);
        max-height: var(--header-top-height);
        width: 100%;
        overflow: visible;
        box-sizing: border-box;
    }

    .header-top::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        background: var(--header-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 0;
        pointer-events: none;
    }

    .header-top::after {
        display: none;
    }

    .header-top > * {
        position: relative;
        z-index: 1;
    }

    /* Alt bar (menü çubuğu) kabuk */
    .header-bottom {
        position: relative;
        height: var(--header-bottom-height, 78px);
        min-height: var(--header-bottom-height, 78px);
        width: 100%;
        flex-shrink: 0;
        overflow: visible;
        box-sizing: border-box;
        border-top: none;
        background: transparent;
        z-index: 1;
    }

    .site-header.scrolled .header-bottom {
        height: var(--header-bottom-height, 78px);
        min-height: var(--header-bottom-height, 78px);
        overflow: visible;
        background: transparent;
        transform: none;
        opacity: 1;
    }

    .header-bottom,
    .header-bottom::before,
    .header-bottom::after {
        overflow: visible;
    }

    /* Menü çubuğu tam genişlik arka plan — tüm sayfalarda */
    .header-bottom::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        z-index: 0;
        pointer-events: none;
        background: var(--qm-header-gradient-light), var(--header-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: var(--qm-header-bar-shadow-light);
    }

    .header-bottom::after {
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    [data-theme="dark"] .header-bottom::before {
        background: var(--qm-header-gradient-dark), var(--header-bg);
        box-shadow: var(--qm-header-bar-shadow-dark);
    }

    .header-bottom > * {
        position: relative;
        z-index: 1;
    }

    /* Alt menü & header modalları — header çubuğunun hemen altında */
    .header-bottom .header-navigation {
        align-self: stretch;
        height: 100%;
    }

    .header-bottom .header-menu-list {
        height: 100%;
        align-items: stretch;
    }

    .header-bottom .header-menu-list > li {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .header-top .header-top-right {
        align-self: stretch;
        height: 100%;
    }

    .header-bottom-right {
        align-self: stretch;
        height: 100%;
    }

    .header-bottom .header-action-wrapper:not(.theme-toggle-mobile):not(.profile-mobile),
    .header-top .header-action-wrapper {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .header-bottom .theme-toggle-scrolled {
        display: none;
        height: 100%;
        align-items: center;
    }

    .site-header.scrolled .header-bottom .theme-toggle-scrolled {
        display: flex;
    }

    .header-bottom .theme-toggle-mobile,
    .header-bottom .profile-mobile {
        display: none !important;
    }
}