/*==================================================
GREEN ASIST | 02-header.css | CLEAN FINAL
==================================================*/

.header{
    position:relative;
    z-index:1000;

    height:var(--header-height);
    background:var(--color-siyah);
    display:flex;
    color:var(--color-beyaz);
}

.header-grid{
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:space-between;
}

/* ==============================
LEFT - LOGO
============================== */

.header-left{
    display:flex;
    align-items:center;
    height:100%;
}

.logo-link{
    display:flex;
    align-items:center;
    height:100%;
    text-decoration:none;
}

.logo-img{
    height:var(--header-height);
    width:auto;
    object-fit:contain;
    display:block;
}

/* ==============================
CENTER - MENU
============================== */

.header-bottom{
    display:flex;
    flex:1;
    justify-content:center;
    align-items:center;
    height:100%;
}

.menu{
    display:flex;
    align-items:center;
    gap:36px;
}

/* ==============================
RIGHT SIDE
============================== */

.header-right-side{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
    height:100%;
    padding-right:24px;
}

/* ==============================
HEADER STATUS NOTE
============================== */

.header-status-note{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:24px;
    padding:0 10px;

    border-radius:999px;
    border:1px solid rgba(155,199,165,.22);

    background:rgba(155,199,165,.055);
    color:rgba(238,243,239,.68);

    font-size:11px;
    font-weight:560;
    line-height:1;
    letter-spacing:.025em;
    white-space:nowrap;

    pointer-events:none;
}

/* ==============================
LANGUAGE LINKS
============================== */

.lang{
    display:flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
}

.lang a{
    color:inherit;
    text-decoration:none;
}

.lang a:hover{
    color:inherit;
}

.lang span{
    color:inherit;
}

.lang a.active{
    color:var(--color-yesil-1);
    pointer-events:none;
}

/* ==============================
BURGER - DESKTOP HIDDEN
============================== */

.burger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:32px;
    height:32px;
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
}

.burger span{
    width:22px;
    height:2px;
    background:var(--color-beyaz);
    border-radius:2px;
    transition:
        transform .22s ease,
        opacity .22s ease;
}

.burger.open span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}

.burger.open span:nth-child(2){
    opacity:0;
}

.burger.open span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}

/* ==============================
RESPONSIVE SAFETY
============================== */

@media(max-width:1180px){

    .menu{
        gap:26px;
    }

    .header-right-side{
        gap:16px;
    }

    .header-status-note{
        display:none;
    }

}

/* ==============================
TABLET / MOBILE MENU
============================== */

@media(max-width:980px){

    .header{
        z-index:2000;
    }

    .burger{
        display:flex;
    }

    .header-bottom{
        position:fixed;
        left:0;
        right:0;
        top:var(--header-height);

        height:auto;
        min-height:auto;

        display:flex;
        align-items:flex-start;
        justify-content:center;

        padding:16px 20px 22px;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.98),
                rgba(0,0,0,.94)
            );

        border-top:1px solid rgba(255,255,255,.08);
        border-bottom:1px solid rgba(0,133,66,.24);

        box-shadow:
            0 24px 52px rgba(0,0,0,.32),
            inset 0 1px 0 rgba(255,255,255,.05);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transform:translateY(-8px);

        transition:
            opacity .24s ease,
            visibility .24s ease,
            transform .24s ease;

        z-index:1999;
    }

    .header-bottom.open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;

        transform:translateY(0);
    }

    .menu{
        width:min(420px, 100%);

        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;

        gap:0;

        padding:8px;

        border-radius:18px;
        border:1px solid rgba(255,255,255,.10);

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.055),
                rgba(255,255,255,.025)
            );
    }

    .menu a{
        min-height:44px;

        display:flex;
        align-items:center;
        justify-content:center;

        border-radius:12px;
    }

    .menu a:hover,
    .menu a.active{
        background:rgba(0,133,66,.16);
    }

}

@media(max-width:620px){

    .header-right-side{
        gap:12px;
        padding-right:14px;
    }

    .lang{
        font-size:13px;
    }

}

@media(max-width:460px){

    .logo-img{
        max-width:170px;
        height:auto;
    }

    .header-right-side{
        gap:10px;
    }

}

/*==================================================
HEADER COMPONENT LOAD STABILITY
Header yüklenene kadar alanın çökmesini engeller.
==================================================*/

#siteHeader{
    min-height:90px;
    background:#050505;
}