.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;

background: rgba(56, 82, 180, 0.97);
backdrop-filter: blur(12px);

box-shadow: 0 2px 20px rgba(56,82,180,.25);
}


/* container navbar supaya posisi center */
.navbar-inner {
max-width: 1400px;
margin: auto;

padding: 0 60px;

height: 68px;

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


/* logo */
.nav-logo {
display: flex;
align-items: center;
gap: 10px;

text-decoration: none;

margin-left: 10px;
}


/* icon logo */
.nav-logo-icon {
width: 38px;
height: 38px;

background: linear-gradient(135deg, var(--yellow), var(--orange));

border-radius: 10px;

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

font-size: 20px;
}


/* teks logo */
.nav-logo span {
font-family: 'Playfair Display', serif;

font-size: 20px;
font-weight: 700;

color: white;

position: relative;
top: -1px;
}


/* menu navbar */
.nav-links {
display: flex;
align-items: center;

gap: 18px;

list-style: none;

margin-left: auto;
}


/* link menu */
.nav-links a {
text-decoration: none;

color: rgba(255,255,255,.85);

font-size: 14px;
font-weight: 600;

padding: 8px 16px;

border-radius: 8px;

transition: all .2s;
}


/* hover */
.nav-links a:hover,
.nav-links a.active {
color: white;
background: rgba(255,255,255,.15);
}


/* tombol register */
.nav-register {
background: linear-gradient(135deg, var(--yellow), var(--orange)) !important;

color: var(--dark) !important;

font-weight: 700 !important;

padding: 9px 20px !important;

border-radius: 25px;

box-shadow: 0 4px 14px rgba(240,141,57,.4);
}


.nav-register:hover {
transform: translateY(-1px);

box-shadow: 0 6px 20px rgba(240,141,57,.55);

background: linear-gradient(135deg, #e07d28, #d4752a) !important;
}


/* hamburger */
.hamburger {
display: none;

flex-direction: column;

gap: 5px;

cursor: pointer;

padding: 6px;
}


.hamburger span {
width: 24px;
height: 2px;

background: white;

border-radius: 2px;

transition: all .3s;
}


/* ================= MOBILE ONLY ================= */
@media (max-width:768px){

.navbar-inner{
    padding:0 15px;
    min-height:68px;
}

/* logo kecil */
.nav-logo span{
    font-size:17px;
}

.nav-logo-icon{
    width:34px;
    height:34px;
    font-size:16px;
}

/* menu tetap sejajar */
.nav-links{
    margin-left:auto;

    flex-wrap:nowrap;

    overflow-x:auto;

    gap:8px;

    scrollbar-width:none;
}

.nav-links::-webkit-scrollbar{
    display:none;
}

/* item menu */
.nav-links a{
    white-space:nowrap;

    flex-shrink:0;

    padding:7px 12px;

    font-size:13px;
}

/* tombol daftar */
.nav-register{
    padding:8px 14px !important;
}

.hamburger{
display:flex;
}

.navbar-inner{
padding:0 16px;
}

.nav-links{

display:none;

position:absolute;

top:68px;

left:0;
right:0;

background:rgba(56,82,180,.97);

padding:15px;

flex-direction:column;

gap:12px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.nav-links.active{
display:flex;
}

.nav-links a{
display:block;
text-align:center;
}

}