/* ============================================================
   navbar.css — DreamSky shared navbar styles
   ============================================================ */

/* Push konten agar tidak tertutup navbar */
body { padding-top: 56px; }

/* ── NAVBAR ── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:transparent;border-bottom:1px solid transparent;transition:background 0.3s ease,border-color 0.3s ease;}
.navbar.scrolled{background:linear-gradient(135deg,#2d0057 0%,#3a005c 100%);border-bottom-color:rgba(255,255,255,0.1);}

.nav-left{display:flex;align-items:center;gap:16px;}
.nav-hamburger{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:4px;}
.nav-hamburger span{display:block;width:22px;height:2px;background:#d4a8ff;border-radius:2px;transition:all 0.3s;}
.nav-hamburger:hover span{background:#fff;}
.nav-logo-img{height:22px;filter:drop-shadow(0 0 6px rgba(180,80,255,0.5));display:block;}

.nav-center{position:absolute;left:50%;transform:translateX(-50%);display:none;}
.nav-center img{height:22px;filter:drop-shadow(0 0 6px rgba(180,80,255,0.5));}

.nav-right{display:flex;align-items:center;gap:10px;}

/* Language switcher */
.nav-lang{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);border-radius:999px;padding:7px 14px;color:#f0e6ff;font-family:'Nunito',sans-serif;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:6px;letter-spacing:0.04em;}
.nav-lang:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.4);}
.nav-lang-icon{font-size:1rem;}
.nav-lang-arrow{font-size:0.65rem;opacity:0.8;transition:transform 0.2s;}
.nav-lang-wrap{position:relative;}
.nav-lang-wrap.open .nav-lang-arrow{transform:rotate(180deg);}
.nav-lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:rgba(30,0,55,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(200,150,255,0.25);border-radius:14px;list-style:none;padding:6px;min-width:150px;box-shadow:0 12px 32px rgba(0,0,0,0.4);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity 0.2s,transform 0.2s;z-index:150;}
.nav-lang-wrap.open .nav-lang-menu{opacity:1;pointer-events:all;transform:translateY(0);}
.nav-lang-menu li{list-style:none;}
.nav-lang-menu button{width:100%;text-align:left;background:none;border:none;color:#e0d0ff;font-family:'Nunito',sans-serif;font-size:0.85rem;font-weight:600;padding:9px 12px;border-radius:9px;cursor:pointer;transition:background 0.2s,color 0.2s;display:flex;align-items:center;gap:8px;}
.nav-lang-menu button:hover{background:rgba(200,150,255,0.18);color:#fff;}
@media(max-width:640px){.nav-lang-wrap{display:none;}}

/* Login button */
.nav-login{background:rgba(200,150,255,0.15);border:1px solid rgba(200,150,255,0.3);border-radius:999px;padding:7px 18px;color:#e0b8ff;font-family:'Nunito',sans-serif;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:8px;letter-spacing:0.04em;}
.nav-login:hover{background:rgba(200,150,255,0.28);color:#fff;border-color:rgba(200,150,255,0.5);}
.nav-login img{width:26px;height:26px;border-radius:50%;object-fit:cover;}
.nav-login-text{display:inline;}
.nav-login-icon{display:none;font-size:1.1rem;}

/* Mobile adjustments */
@media(max-width:640px){
  .nav-logo-img{display:none;}
  .nav-center{display:block;}
  .nav-login{padding:6px 10px;border-radius:50%;width:36px;height:36px;justify-content:center;}
  .nav-login-text{display:none;}
  .nav-login-icon{display:inline;}
}

/* ── DRAWER ── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.drawer-overlay.open{opacity:1;pointer-events:all;}

.drawer{position:fixed;top:0;left:0;bottom:0;width:260px;background:linear-gradient(180deg,#2d0057,#3a005c);z-index:201;transform:translateX(-100%);transition:transform 0.3s ease;padding:0;box-shadow:4px 0 24px rgba(0,0,0,0.4);}
.drawer.open{transform:translateX(0);}

.drawer-header{padding:20px;border-bottom:1px solid rgba(200,150,255,0.15);display:flex;align-items:center;justify-content:space-between;}
.drawer-title{font-family:'Cinzel',serif;font-size:1rem;color:#f0d9ff;letter-spacing:0.1em;}
.drawer-close{background:none;border:none;color:#d4a8ff;font-size:1.4rem;cursor:pointer;line-height:1;}

.drawer-nav{list-style:none;padding:16px 0;}
.drawer-nav li a{display:flex;align-items:center;gap:12px;padding:14px 24px;color:#d4a8ff;text-decoration:none;font-size:0.95rem;transition:background 0.2s,color 0.2s;}
.drawer-nav li a:hover{background:rgba(200,150,255,0.12);color:#fff;}
.drawer-nav li a .nav-icon{font-size:1.2rem;width:24px;text-align:center;}

/* Language in drawer */
.drawer-lang{padding:16px 24px;border-top:1px solid rgba(200,150,255,0.15);margin-top:8px;}
.drawer-lang-label{font-size:0.8rem;color:#a882d8;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px;}
.drawer-lang-options{display:flex;gap:8px;}
.drawer-lang-btn{flex:1;background:rgba(200,150,255,0.1);border:1px solid rgba(200,150,255,0.25);border-radius:10px;padding:9px 6px;color:#d4a8ff;font-family:'Nunito',sans-serif;font-size:0.8rem;font-weight:700;cursor:pointer;transition:all 0.2s;}
.drawer-lang-btn:hover{background:rgba(200,150,255,0.22);color:#fff;}
.drawer-lang-btn.active{background:rgba(200,150,255,0.35);border-color:rgba(200,150,255,0.6);color:#fff;}