/* HEADER */

/* HEADER STICKY */

.header{
position:sticky;
top:0;
width:100%;
z-index:999;
backdrop-filter:blur(20px);
background:rgba(255,255,255,.92);
border-bottom: 1px solid rgba(0,0,0,.05);
box-shadow: 0 6px 20px rgba(0,0,0,.04);
transition: all .3s ease;
}

.menu a.active{
color:#2563eb;
font-weight:600;
}

.navbar{
display:flex;
align-items:center;
justify-content:space-between;
height:75px;
transition:.3s;
}
/* LOGO */

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:20px;
font-weight:bold;
color:#000;
}

.logo img{
height:40px;
}



/* MENU */

.menu{
display:flex;
gap:30px;
}

.menu a{
color:#000;
text-decoration:none;
font-weight:500;
transition:0.2s;
}

.menu a:hover{
color:#d60000;
}



/* BUTTON */

.auth{
display:flex;
gap:10px;
}

.btn{
padding:8px 14px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

.login{
border:1px solid #000;
color:#000;
}

.login:hover{
background:#000;
color:#fff;
}

.daftar{
background:#d60000;
color:white;
}

.daftar:hover{
background:#a80000;
}



/* BURGER */

.burger{
display:none;
font-size:26px;
cursor:pointer;
color:#000;
}



/* MOBILE MENU */

.mobile-menu{
position:fixed;
top:0;
right:-100%;
width:280px;
height:100%;
background:#ffffff;
padding:20px;
transition:0.3s;
z-index:9999;
box-shadow:-3px 0 10px rgba(0,0,0,0.2);
}

.mobile-menu.active{
right:0;
}



/* CLOSE BUTTON */

.close-btn{
font-size:20px;
cursor:pointer;
margin-bottom:20px;
display:inline-block;
padding:6px 10px;
background:#d60000;
color:#fff;
border-radius:5px;
font-weight:bold;
}



/* MOBILE LINK */

.mobile-menu a{
display:block;
color:#000;
text-decoration:none;
margin:15px 0;
font-weight:500;
}

.mobile-menu a:hover{
color:#d60000;
}



/* RESPONSIVE */

@media(max-width:992px){

.menu,
.auth{
display:none;
}

.burger{
display:block;
}

}

.header-scroll{

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

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

}