/* ==========================================
   CYBERPANEL V2 - HEADER.CSS
========================================== */

/* HEADER */

.header{

    position:fixed;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:min(1200px,calc(100% - 24px));

    height:74px;

    padding:0 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

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

    backdrop-filter:blur(18px);

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

    border-radius:18px;

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

    z-index:9999;

}

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

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    font-family:'Orbitron',sans-serif;

    font-size:30px;

    font-weight:700;

    color:#fff;

    letter-spacing:1px;

    white-space:nowrap;

    user-select:none;

}

.logo-dot{

    width:18px;

    height:18px;

    border-radius:50%;

    background:#00ff9d;

    box-shadow:
    0 0 15px #00ff9d,
    0 0 35px rgba(0,255,157,.5);

}

/* ========================================== */
/* NAVBAR DESKTOP */
/* ========================================== */

#navbar{

    display:flex;

    align-items:center;

    gap:28px;

}

#navbar a{

    text-decoration:none;

    color:#d4d4d4;

    font-size:15px;

    font-weight:600;

    position:relative;

    transition:.25s;

}

#navbar a:hover{

    color:#00ff9d;

}

#navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#00ff9d;

    transition:.25s;

}

#navbar a:hover::after{

    width:100%;

}

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

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:transparent;

    color:#fff;

    font-size:26px;

    cursor:pointer;

    transition:.25s;

}

.menu-toggle:hover{

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

}

/* ========================================== */
/* TABLET */
/* ========================================== */

@media(max-width:992px){

.logo{

    font-size:26px;

}

#navbar{

    gap:22px;

}

}

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

@media(max-width:768px){

.header{

    width:calc(100% - 20px);

    height:68px;

    padding:0 18px;

}

.logo{

    font-size:22px;

}

.logo-dot{

    width:16px;

    height:16px;

}

/* tampilkan hamburger */

.menu-toggle{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* sembunyikan menu */

#navbar{

    position:absolute;

    top:82px;

    left:0;

    right:0;

    width:100%;

    display:none;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    padding:12px;

    background:#111;

    border-radius:18px;

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

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

    overflow:hidden;

}

/* ketika tombol diklik */

#navbar.active{

    display:flex;

    animation:menuFade .25s ease;

}

#navbar a{

    padding:16px 20px;

    border-radius:10px;

}

#navbar a:hover{

    background:#181818;

}

#navbar a::after{

    display:none;

}

}

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

@media(min-width:769px){

.menu-toggle{

    display:none !important;

}

#navbar{

    display:flex !important;

    position:static;

    background:none;

    border:none;

    box-shadow:none;

    padding:0;

    flex-direction:row;

}

}

/* ========================================== */

@keyframes menuFade{

from{

    opacity:0;

    transform:translateY(-10px);

}

to{

    opacity:1;

    transform:translateY(0);

}

  }