/*==================================================
    HEADER v5.2.1
    Foundation
==================================================*/

:root{

    --header-height:90px;
    --header-height-scroll:74px;

    --topbar-height:42px;

    --header-transition:.35s ease;

    --header-radius:20px;

    --header-blur:18px;

    --header-shadow:
        0 15px 40px rgba(0,0,0,.08);

}
/*==================================================
    HEADER
==================================================*/

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:all var(--header-transition);

}
/*==================================================
    TOP BAR
==================================================*/

.top-bar{

    height:var(--topbar-height);

    display:flex;

    align-items:center;

    background:rgba(8,26,50,.96);

    border-bottom:1px solid rgba(255,255,255,.05);

    color:rgba(255,255,255,.82);

    font-size:.87rem;

    transition:all var(--header-transition);

}

.top-bar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:100%;

}

.top-bar-left,
.top-bar-right{

    display:flex;

    align-items:center;

    gap:1.4rem;

}

.top-bar a{

    color:inherit;

    text-decoration:none;

    transition:.25s;

}

.top-bar a:hover{

    color:var(--gold);

}
/*==================================================
    MAIN HEADER
==================================================*/

.main-header{

    height:var(--header-height);

    display:flex;

    align-items:center;

    transition:all var(--header-transition);

}

.main-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    height:100%;

}
/*==================================================
    GLASS HEADER
==================================================*/

.site-header.scrolled{

    backdrop-filter:blur(var(--header-blur));

    -webkit-backdrop-filter:blur(var(--header-blur));

    background:rgba(8,26,50,.82);

    box-shadow:var(--header-shadow);

    border-bottom:1px solid rgba(255,255,255,.06);

}
/*==================================================
    SCROLL
==================================================*/

.site-header.scrolled .top-bar{

    height:0;

    overflow:hidden;

    opacity:0;

    border:none;

}

.site-header.scrolled .main-header{

    height:var(--header-height-scroll);

}
/*==================================================
    HEADER CONTAINER
==================================================*/

.site-header .container{

    width:min(1320px,92%);

    margin-inline:auto;

}
/*==================================================
    TRANSITIONS
==================================================*/

.site-header *,
.site-header *::before,
.site-header *::after{

    transition:

        color .25s ease,

        background .35s ease,

        border-color .35s ease,

        transform .35s ease,

        opacity .35s ease;

}
/*==================================================
    HEADER v5.2.2
    LOGO
==================================================*/

.site-logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

    z-index:20;

}

.site-logo a{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.site-logo img{

    display:block;

    height:72px;

    width:auto;

    transition:transform .35s ease;

}

.site-logo:hover img{

    transform:scale(1.03);

}

/*==================================================
    DESKTOP NAVIGATION
==================================================*/

.main-navigation{

    display:flex;

    align-items:center;

    margin-left:auto;

}

.main-navigation ul{

    display:flex;

    align-items:center;

    gap:2.4rem;

    margin:0;

    padding:0;

    list-style:none;

}

.main-navigation li{

    position:relative;

}

.main-navigation > ul > li{

    height:var(--header-height);

    display:flex;

    align-items:center;

}

.site-header.scrolled .main-navigation > ul > li{

    height:var(--header-height-scroll);

}

.main-navigation a{

    position:relative;

    display:flex;

    align-items:center;

    color:var(--white);

    text-decoration:none;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.4px;

    padding:.35rem 0;

}

/*==================================================
    HOVER EFFECT
==================================================*/

.main-navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:width .35s ease;

}

.main-navigation li:hover>a{

    color:var(--gold);

}

.main-navigation li:hover>a::after{

    width:100%;

}

/*==================================================
    ACTIVE MENU
==================================================*/

.main-navigation .current-menu-item>a,
.main-navigation .current-menu-ancestor>a,
.main-navigation .current_page_item>a{

    color:var(--gold);

}

.main-navigation .current-menu-item>a::after,
.main-navigation .current-menu-ancestor>a::after,
.main-navigation .current_page_item>a::after{

    width:100%;

}

/*==================================================
    KEYBOARD ACCESSIBILITY
==================================================*/

.main-navigation a:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:6px;

    border-radius:4px;

}
/*==================================================
    HEADER v5.2.3
    HEADER ACTIONS
==================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-left:2rem;

    flex-shrink:0;

}

/*==================================================
    CTA BUTTON
==================================================*/

.header-cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:48px;

    padding:.85rem 1.8rem;

    border-radius:999px;

    background:var(--gold);

    color:var(--primary);

    font-size:.95rem;

    font-weight:600;

    text-decoration:none;

    white-space:nowrap;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

    box-shadow:0 10px 25px rgba(200,154,71,.28);

}

.header-cta:hover{

    background:var(--gold-hover);

    transform:translateY(-2px);

    box-shadow:0 16px 34px rgba(200,154,71,.38);

}

.header-cta:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:4px;

}

/*==================================================
    HAMBURGER
==================================================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    padding:0;

    border:none;

    border-radius:12px;

    background:transparent;

    cursor:pointer;

    align-items:center;

    justify-content:center;

    transition:
        background .3s ease,
        transform .3s ease;

}

.menu-toggle:hover{

    background:rgba(255,255,255,.08);

}

.menu-toggle span{

    display:block;

    width:24px;

    height:2px;

    margin:5px 0;

    background:var(--white);

    border-radius:2px;

    transition:all .3s ease;

}
/*==================================================
    HEADER v5.2.4
    PREMIUM EFFECTS
==================================================*/

/* ---------- İlk Durum ---------- */

.site-header{

    background:transparent;

}

/* ---------- Scroll Durumu ---------- */

.site-header.scrolled{

    background:rgba(8,26,50,.82);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

    box-shadow:

        0 20px 50px rgba(0,0,0,.18);

}

/* ---------- Gold Line ---------- */

.site-header::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

    opacity:0;

    transition:.35s;

}

.site-header.scrolled::before{

    opacity:1;

}

/* ---------- Hover Glow ---------- */

.header-cta{

    position:relative;

    overflow:hidden;

}

.header-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.35) 50%,
        transparent 80%
    );

    transform:translateX(-160%);

    transition:.7s;

}

.header-cta:hover::before{

    transform:translateX(160%);

}

/* ---------- Logo Animation ---------- */

.site-logo img{

    transform-origin:center;

}

.site-logo:hover img{

    transform:scale(1.05);

}

/* ---------- Navigation ---------- */

.main-navigation a{

    transition:

        color .25s ease,

        transform .25s ease;

}

.main-navigation li:hover>a{

    transform:translateY(-2px);

}

/* ---------- Header Appearance ---------- */

.site-header{

    animation:headerFade .7s ease;

}

@keyframes headerFade{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==================================================
    HEADER v5.2.5
    RESPONSIVE
==================================================*/

/* ---------- Large Desktop ---------- */

@media (min-width:1400px){

    .site-header .container{

        width:min(1400px,90%);

    }

}

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .main-navigation ul{

        gap:1.8rem;

    }

    .header-actions{

        margin-left:1.2rem;

    }

}

/* ---------- Tablet ---------- */

@media (max-width:992px){

    .top-bar{

        display:none;

    }

    .main-header{

        height:80px;

    }

    .main-navigation{

        display:none;

    }

    .header-cta{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    .site-logo img{

        height:48px;

    }

    .main-header{

        height:72px;

    }

    .site-header.scrolled .main-header{

        height:68px;

    }

    .site-header .container{

        width:94%;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .site-logo img{

        height:42px;

    }

    .menu-toggle{

        width:44px;

        height:44px;

    }

}
/*==================================================
    MOBILE MENU FOUNDATION
==================================================*/

body.menu-open{

    overflow:hidden;

}

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:min(360px,90vw);

    height:100vh;

    background:var(--primary);

    z-index:10001;

    transition:right .35s ease;

    overflow-y:auto;

}

.mobile-menu.active{

    right:0;

}

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:10000;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}
/*==================================================
    HAMBURGER ANIMATION
==================================================*/

.menu-toggle{

    position:relative;

}

.menu-toggle span{

    transform-origin:center;

}

.menu-toggle.active span:nth-child(1){

    transform:
        translateY(7px)
        rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:
        translateY(-7px)
        rotate(-45deg);

}

/*==================================================
    MOBILE MENU ANIMATION
==================================================*/

.mobile-menu{

    box-shadow:

        -20px 0 60px rgba(0,0,0,.25);

}

.mobile-menu.active{

    animation:

        mobileSlide .35s ease;

}

@keyframes mobileSlide{

    from{

        transform:translateX(25px);

        opacity:.9;

    }

    to{

        transform:none;

        opacity:1;

    }

}
/*==================================================
    MOBILE SUB MENU
==================================================*/

.mobile-nav .sub-menu{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    list-style:none;

    margin:0;

    padding:0;

}

.mobile-nav .menu-item-has-children.is-open>.sub-menu{

    max-height:600px;

}

.mobile-nav .menu-item-has-children>a{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.mobile-nav .menu-item-has-children>a::after{

    content:"+";

    font-size:1.1rem;

    color:var(--gold);

    transition:transform .3s ease;

}

.mobile-nav .menu-item-has-children.is-open>a::after{

    transform:rotate(45deg);

}
/*==================================================
    ACCESSIBILITY
==================================================*/

.menu-toggle:focus-visible,
.mobile-close:focus-visible,
.mobile-nav a:focus-visible,
.header-cta:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:4px;

}

/*==================================================
    REDUCED MOTION
==================================================*/

.reduced-motion *{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}
/*==================================================
    HEADER FINAL POLISH
==================================================*/

.site-header{

    will-change:transform;

    backface-visibility:hidden;

}

.main-navigation a{

    -webkit-tap-highlight-color:transparent;

}

.header-cta{

    user-select:none;

}

.site-logo img{

    image-rendering:auto;

}

.mobile-menu{

    overscroll-behavior:contain;

}

html{

    scroll-padding-top:90px;

}

/*==================================================
    SELECTION
==================================================*/

::selection{

    background:var(--gold);

    color:var(--primary);

}