/* Hairdresser Antalya – Mobile Luxury Header V7
   Only affects mobile/tablet header area. Desktop stays unchanged. */

@media (max-width: 820px){
    html, body{
        overflow-x:hidden !important;
    }

    body .top-strip{
        display:none !important;
    }

    body .site-shell header.main-header,
    body header.main-header[data-site-header]{
        position:absolute !important;
        top:14px !important;
        left:14px !important;
        right:14px !important;
        width:auto !important;
        height:62px !important;
        min-height:62px !important;
        padding:0 !important;
        margin:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        overflow:visible !important;
        z-index:160 !important;
        pointer-events:none !important;
    }

    body .site-shell header.main-header .desktop-nav,
    body .site-shell header.main-header .appointment-btn{
        display:none !important;
    }

    body .site-shell header.main-header .brand{
        pointer-events:auto !important;
        width:62px !important;
        height:62px !important;
        min-width:62px !important;
        max-width:62px !important;
        flex:0 0 62px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:6px !important;
        margin:0 !important;
        border-radius:50% !important;
        background:rgba(255,250,245,.68) !important;
        border:1px solid rgba(255,255,255,.62) !important;
        box-shadow:
            0 14px 34px rgba(33,22,15,.18),
            inset 0 1px 0 rgba(255,255,255,.45) !important;
        backdrop-filter:blur(16px) saturate(1.16) !important;
        -webkit-backdrop-filter:blur(16px) saturate(1.16) !important;
    }

    body .site-shell header.main-header .brand img{
        width:50px !important;
        height:50px !important;
        min-width:50px !important;
        max-width:50px !important;
        max-height:50px !important;
        object-fit:contain !important;
        display:block !important;
        border-radius:50% !important;
        background:transparent !important;
        box-shadow:none !important;
        margin:0 !important;
        padding:0 !important;
    }

    body .site-shell header.main-header .brand span{
        display:none !important;
    }

    body .site-shell header.main-header .mobile-menu-toggle{
        pointer-events:auto !important;
        position:relative !important;
        width:58px !important;
        height:58px !important;
        min-width:58px !important;
        min-height:58px !important;
        max-width:58px !important;
        flex:0 0 58px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;
        gap:6px !important;
        padding:0 !important;
        margin:0 !important;
        border:1px solid rgba(255,255,255,.20) !important;
        border-radius:50% !important;
        background:
            radial-gradient(circle at 32% 24%, rgba(146,109,80,.78), rgba(44,27,19,.96) 58%, rgba(28,16,11,.98) 100%) !important;
        box-shadow:
            0 15px 32px rgba(44,27,19,.30),
            inset 0 1px 0 rgba(255,255,255,.18) !important;
        outline:0 !important;
        overflow:hidden !important;
        cursor:pointer !important;
        transform:none !important;
        z-index:170 !important;
    }

    body .site-shell header.main-header .mobile-menu-toggle span{
        display:block !important;
        width:25px !important;
        height:2px !important;
        min-height:2px !important;
        margin:0 !important;
        padding:0 !important;
        border-radius:999px !important;
        background:#fffaf5 !important;
        opacity:1 !important;
        transform:none !important;
        transition:transform .22s ease, opacity .22s ease !important;
    }

    body.mobile-menu-open .site-shell header.main-header .mobile-menu-toggle span:nth-child(1){
        transform:translateY(8px) rotate(45deg) !important;
    }
    body.mobile-menu-open .site-shell header.main-header .mobile-menu-toggle span:nth-child(2){
        opacity:0 !important;
    }
    body.mobile-menu-open .site-shell header.main-header .mobile-menu-toggle span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg) !important;
    }

    /* Hero image remains visible; header no longer creates the wide forehead-covering white pill. */
    body.page-home .hero,
    body .hero{
        padding-top:0 !important;
    }

    body.page-home .hero__image img,
    body .hero__image img{
        object-position:center top !important;
    }

    /* More elegant mobile drawer, without huge logo/menu chaos */
    body .mobile-menu{
        position:fixed !important;
        inset:0 !important;
        z-index:220 !important;
        display:none;
        background:
            radial-gradient(circle at 18% 12%, rgba(169,133,103,.18), transparent 30%),
            linear-gradient(135deg, rgba(23,17,13,.98), rgba(12,9,7,.99)) !important;
        color:#fffaf5 !important;
        padding:84px 28px 32px !important;
        overflow:auto !important;
        backdrop-filter:blur(16px) !important;
        -webkit-backdrop-filter:blur(16px) !important;
    }

    body .mobile-menu.is-open{
        display:block !important;
    }

    body .mobile-menu-backdrop{
        position:fixed !important;
        inset:0 !important;
        display:none !important;
        z-index:210 !important;
        background:rgba(0,0,0,.42) !important;
        backdrop-filter:blur(4px) !important;
        -webkit-backdrop-filter:blur(4px) !important;
    }

    body .mobile-menu-backdrop.is-open{
        display:block !important;
    }

    body .mobile-menu__close{
        position:absolute !important;
        top:18px !important;
        right:18px !important;
        width:46px !important;
        height:46px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border:1px solid rgba(255,255,255,.14) !important;
        border-radius:50% !important;
        background:rgba(255,250,245,.10) !important;
        color:#fff !important;
        font-size:34px !important;
        line-height:1 !important;
        padding:0 !important;
        box-shadow:none !important;
    }

    body .mobile-menu__logo{
        width:104px !important;
        height:104px !important;
        max-width:104px !important;
        max-height:104px !important;
        object-fit:contain !important;
        border-radius:50% !important;
        margin:0 auto 26px !important;
        background:rgba(255,250,245,.06) !important;
        box-shadow:0 14px 32px rgba(0,0,0,.22) !important;
    }

    body .mobile-menu nav{
        display:grid !important;
        gap:0 !important;
        max-width:390px !important;
        margin:0 auto !important;
    }

    body .mobile-menu nav a{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        min-height:54px !important;
        padding:0 !important;
        border-bottom:1px solid rgba(255,255,255,.12) !important;
        color:#fffaf5 !important;
        font-family:inherit !important;
        font-size:21px !important;
        line-height:1.2 !important;
        font-weight:500 !important;
        letter-spacing:.01em !important;
        text-transform:none !important;
    }

    body .mobile-menu nav a::after{
        content:"→";
        color:rgba(255,250,245,.45);
        font-size:18px;
    }

    body .mobile-menu__cta{
        margin-top:22px !important;
        min-height:50px !important;
        justify-content:center !important;
        border:1px solid rgba(255,255,255,.16) !important;
        border-radius:999px !important;
        background:#a98567 !important;
        color:#fff !important;
        font-size:13px !important;
        font-weight:800 !important;
        letter-spacing:.08em !important;
        text-transform:uppercase !important;
    }
    body .mobile-menu__cta::after{
        content:"" !important;
    }
}

@media (max-width:420px){
    body .site-shell header.main-header,
    body header.main-header[data-site-header]{
        top:12px !important;
        left:12px !important;
        right:12px !important;
        height:58px !important;
        min-height:58px !important;
    }
    body .site-shell header.main-header .brand{
        width:58px !important;
        height:58px !important;
        min-width:58px !important;
        flex-basis:58px !important;
    }
    body .site-shell header.main-header .brand img{
        width:47px !important;
        height:47px !important;
        min-width:47px !important;
        max-width:47px !important;
    }
    body .site-shell header.main-header .mobile-menu-toggle{
        width:55px !important;
        height:55px !important;
        min-width:55px !important;
        min-height:55px !important;
        flex-basis:55px !important;
    }
}