/* ======================
   🔥 PREMIUM HEADER
====================== */
.header{
    position:fixed;

    top:15px;
    left:50%;

    transform:translateX(-50%);

    width:90%;
    max-width:900px;

    padding:15px 20px;

    background:rgba(255,255,255,0.92);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,0.3);

    border-radius:24px;

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

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.4);

    z-index:999;
}

/* ======================
   🔥 LEFT AREA
====================== */
.header-left{
    display:flex;
    align-items:center;
}

/* ======================
   🔥 LOGO
====================== */
.logo{
    width:52px;
    height:52px;

    object-fit:contain;

    filter:drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}

/* ======================
   🔥 TITLE
====================== */
.title{
    position:absolute;

    left:50%;
    transform:translateX(-50%);

    font-size:26px;
    font-weight:800;

    color:#111827;

    letter-spacing:0.4px;
}

/* ======================
   🔥 MENU BUTTON
====================== */
.menu-btn{
    width:46px;
    height:46px;

    border-radius:14px;

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

    background:linear-gradient(135deg,#667eea,#764ba2);

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:0.3s;

    box-shadow:0 8px 18px rgba(102,126,234,0.35);
}

/* HOVER */
.menu-btn:hover{
    transform:scale(1.06);
}

/* CLICK */
.menu-btn:active{
    transform:scale(0.95);
}

/* ======================
   🔥 SIDEBAR MENU
====================== */
.menu{
    position:fixed;

    top:0;
    right:-320px;

    width:270px;
    height:100vh;

    background:linear-gradient(180deg,#111827,#1e293b);

    padding:90px 22px 25px;

    box-shadow:-10px 0 30px rgba(0,0,0,0.25);

    transition:0.35s ease;

    z-index:1000;

    display:flex;
    flex-direction:column;

    gap:12px;
}

/* SHOW SIDEBAR */
.menu.show{
    right:0;
}

/* ======================
   🔥 MENU LINKS
====================== */
.menu a{
    display:flex;
    align-items:center;

    gap:12px;

    padding:16px 18px;

    text-decoration:none;

    color:#e5e7eb;

    font-size:16px;
    font-weight:500;

    border-radius:16px;

    transition:0.3s;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.04);
}

/* HOVER */
.menu a:hover{
    background:linear-gradient(135deg,#667eea,#764ba2);

    transform:translateX(5px);

    color:#fff;

    box-shadow:0 8px 20px rgba(102,126,234,0.25);
}

/* ======================
   🔥 OVERLAY
====================== */
.overlay{
    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(3px);

    opacity:0;
    visibility:hidden;

    transition:0.3s;

    z-index:998;
}

/* SHOW OVERLAY */
.overlay.show{
    opacity:1;
    visibility:visible;
}

/* ======================
   🔥 MOBILE
====================== */
@media(max-width:480px){

    .header{
        width:92%;
        padding:14px 16px;
    }

    .logo{
        width:45px;
        height:45px;
    }

    .title{
        font-size:22px;
    }

    .menu{
        width:240px;
    }

}