/* =========================
BOTTOM NAV PREMIUM
========================= */

.bottom-nav{
position:fixed;
bottom:0;
left:0;
width:100%;
height:70px;
background:rgba(255,255,255,0.9);
backdrop-filter: blur(10px);
display:flex;
justify-content:space-around;
align-items:center;
box-shadow:0 -5px 20px rgba(0,0,0,0.1);
z-index:9999;
border-top-left-radius:20px;
border-top-right-radius:20px;
}

/* ITEM */
.nav-item{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-decoration:none;
color:#444;
font-size:11px;
gap:4px;
transition:0.3s;
}

.nav-item svg{
width:22px;
height:22px;
fill:#666;
transition:0.3s;
}

/* HOVER / ACTIVE */
.nav-item:active{
transform:scale(0.9);
}

.nav-item:hover svg{
fill:#007bff;
}

/* =========================
WHATSAPP BUTTON (CENTER)
========================= */

.nav-item.wa{
position:relative;
top:-25px;
}

.wa-btn{
width:65px;
height:65px;
background:linear-gradient(135deg,#25D366,#128C7E);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 25px rgba(37,211,102,0.5);
animation:waPulse 2s infinite;
}

.wa-btn svg{
width:30px;
height:30px;
fill:#fff;
}

/* ANIMASI PULSE */
@keyframes waPulse{
0%{
box-shadow:0 0 0 0 rgba(37,211,102,0.6);
}
70%{
box-shadow:0 0 0 15px rgba(37,211,102,0);
}
100%{
box-shadow:0 0 0 0 rgba(37,211,102,0);
}
}

/* =========================
HIDE DI DESKTOP
========================= */

@media(min-width:1024px){
.bottom-nav{
display:none;
}
}