/* #navbar wrapper harus sticky — bukan .sp-navbar langsung,
   karena position:sticky hanya bekerja selama masih di dalam
   bounds parent. Jika parent = tinggi navbar itu sendiri, sticky gagal. */
#navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.sp-navbar{
background:var(--primary-900);
padding:12px 0;
/* glass effect */

/* background:rgba(5,20,40,0.25); */

backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

/* subtle border */

border-bottom:1px solid rgba(255,255,255,0.05);
}

.sp-brand{
display:flex;
align-items:center;
gap:10px;
font-family:var(--font-heading);
font-size:18px;
}

/* Logo image — menggantikan logo-box teks "S" (diganti logo SVG resmi Apr 2026) */
.sp-logo{
height:38px;
width:auto;
display:block;
}

.sp-logo--footer{
height:32px;
opacity:0.9;
}

/* Logo box lama — dipertahankan sebagai fallback jika logo SVG tidak load */
.logo-box{
width:36px;
height:36px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--accent-500),var(--primary-500));
color:white;
font-weight:bold;
}

.nav-link{
color:rgba(255,255,255,0.65);
font-size:14px;
}

.nav-link.active{
color:white;
font-weight:600;
}

.sp-lang{
margin-left:10px;
}

.sp-lang a{
color:white;
font-size:13px;
font-weight:600;
}

.dropdown-menu{
border-radius:10px;
}

/* navbar when page scrolled */

.nav-scrolled{

background:rgba(5,20,40,0.9);

box-shadow:0 6px 24px rgba(0,0,0,0.3);

}