/*
 * =====================================================
 * ModArt Renov Framework
 * -----------------------------------------------------
 * File        : header.css
 * Description : Header & Navigation Styles
 * Version     : 1.0.0
 * Author      : Ayhan TACAR & Atlas
 * =====================================================
 */


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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:rgba(15,15,15,.82);

    backdrop-filter:blur(18px);

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

    transition:var(--transition);

}


.site-header.scrolled{

    background:rgba(10,10,10,.95);

    box-shadow:0 10px 35px rgba(0,0,0,.35);

}


/* =====================================================
   CONTAINER
===================================================== */

.site-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

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

    gap:2rem;

}


/* =====================================================
   LOGO
===================================================== */

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}


.logo img{

    display:block;

    width:auto;

    height:64px;

}


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

.main-nav{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:flex-end;

}


.main-nav ul{

    display:flex;

    align-items:center;

    gap:34px;

    margin:0;

    padding:0;

    list-style:none;

}


.main-nav li{

    margin:0;

}


.main-nav a{

    position:relative;

    display:block;

    padding:8px 0;

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}


.main-nav a:hover{

    color:var(--color-secondary);

}


.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-secondary);

    transition:var(--transition);

}


.main-nav a:hover::after{

    width:100%;

}


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

.site-header .btn{

    margin-left:30px;

    flex-shrink:0;

    white-space:nowrap;

    padding:13px 24px;

    font-size:14px;

    letter-spacing:.3px;

}

.mobile-nav-logo img{
	width:auto;
	height:58px;
}


/* =====================================================
   MOBILE TOGGLE
===================================================== */

.mobile-menu-toggle{

    display:none;

    width:48px;

    height:48px;

    padding:0;

    border:0;

    background:transparent;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

}


.mobile-menu-toggle span{

    display:block;

    width:26px;

    height:2px;

    background:#fff;

    border-radius:999px;

    transition:var(--transition);

}


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

    background:var(--color-primary);

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

}


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

    opacity:0;

}


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

    background:var(--color-primary);

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

}


/* =====================================================
   SKIP LINK
===================================================== */

.skip-link{

    position:absolute;

    left:-9999px;

}


.skip-link:focus{

    left:20px;

    top:20px;

    z-index:9999;

    padding:12px 18px;

    background:var(--color-primary);

    color:#fff;

    border-radius:10px;

}


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

.site-header a:focus-visible,
.site-header button:focus-visible{

    outline:3px solid var(--color-secondary);

    outline-offset:4px;

}


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

.logo{

    transition:opacity var(--transition);

}


.logo:hover{

    opacity:.9;

}


/* =====================================================
   HEADER LAYER
===================================================== */

.site-header{

    isolation:isolate;

}


.site-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.02),
        transparent
    );

    pointer-events:none;

}


/* =====================================================
   Z INDEX
===================================================== */

.logo,
.main-nav,
.site-header .btn{

    position:relative;

    z-index:3;

}


.mobile-menu-toggle{

    position:relative;

    z-index:1100;

}


/* =====================================================
   MOBILE NAV PANEL — LOGO / DIVIDER / FOOTER
===================================================== */

.mobile-nav-header{

    display:none;

}

.mobile-nav-divider{

    display:none;

}

.mobile-nav-footer{

    display:none;

}

/* Masaüstünde hamburger ve mobil nav elemanlarını kesin gizle */
@media (min-width:993px){

    .mobile-menu-toggle{

        display:none !important;

    }

    .mobile-nav-header,
    .mobile-nav-divider,
    .mobile-nav-footer{

        display:none !important;

    }

}

@media (max-width:992px){

    .mobile-nav-header{

        display:flex;

        align-items:center;

        justify-content:center;

        padding-bottom:28px;

    }

    .mobile-nav-logo img{

        height:52px;

        width:auto;

    }

    /* ── Ortak iğne ucu şekli ── */
    .mobile-nav-divider{

        display:block;

        height:3px;

        border:none;

        /* Ortada tam altın, uçlarda saydam → iğne ucu renk geçişi */
        background:linear-gradient(
            90deg,
            transparent 0%,
            var(--color-primary) 25%,
            var(--color-primary) 75%,
            transparent 100%
        );

        /* Uçları gerçekten sivri yapar */
        clip-path:polygon(
            0 50%,
            0.8% 0%,
            99.2% 0%,
            100% 50%,
            99.2% 100%,
            0.8% 100%
        );

    }

    /* ── Logo altı çizgi — sabit, her zaman görünür ── */
    .mobile-nav-divider--logo{

        margin:0 0 28px;

        opacity:.85;

    }

    /* ── Menü altı çizgi — ortadan iki yana açılır ── */
    .mobile-nav-divider--menu{

        margin:0 0 28px;

        opacity:.85;

        transform:scaleX(0);

        transform-origin:center;

        transition:transform .55s cubic-bezier(.25,.46,.45,.94) .3s;

    }

    .main-nav.active .mobile-nav-divider--menu{

        transform:scaleX(1);

    }

    .mobile-nav-footer{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        padding-top:28px;

    }

    .mobile-nav-footer .btn{

        width:100%;

        justify-content:center;

        font-size:16px;

        padding:18px 32px;

    }

}