/* ==========================================================
   MOBILE BOTTOM NAVIGATION
========================================================== */

.mobile-bottom-nav,
.mobile-menu-overlay,
.mobile-menu-sheet{
    display:none;
}

/* ==========================
   MOBILE ONLY
========================== */

@media (max-width:768px){

.mobile-bottom-nav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:72px;

    background:#fff;

    display:flex;

    justify-content:space-around;

    align-items:center;

    z-index:9999;

    box-shadow:0 -6px 25px rgba(0,0,0,.08);

    border-top:1px solid #edf2f7;

    padding-bottom:env(safe-area-inset-bottom);

}

.mobile-nav-item{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#64748b;

    border:none;

    background:none;

}

.mobile-nav-item i{

    font-size:22px;

    margin-bottom:4px;

    transition:.3s;

}

.mobile-nav-item span{

    font-size:11px;

    font-weight:600;

}

.mobile-nav-item:hover{

    text-decoration:none;

    color:#0B4F8A;

}

.mobile-nav-item:hover i{

    transform:translateY(-2px);

}

/* supaya footer tidak ketutup */

footer{

    padding-bottom:85px;

}

}

/* ==========================
   OVERLAY
========================== */

.mobile-menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.mobile-menu-overlay.active{

    opacity:1;

    visibility:visible;

}

/* ==========================
   BOTTOM SHEET
========================== */

.mobile-menu-sheet{

    position:fixed;

    left:0;

    right:0;

    bottom:-100%;

    background:#fff;

    border-radius:28px 28px 0 0;

    padding:25px;

    transition:.35s;

    z-index:9999;

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

}

.mobile-menu-sheet.active{

    bottom:0;

}

.sheet-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.sheet-header h4{

    font-weight:700;

    color:#0B4F8A;

}

.close-sheet{

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:#edf2f7;

}

.sheet-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}

.sheet-grid a{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    color:#334155;

}

.sheet-grid img{

    width:42px;

    height:42px;

    object-fit:contain;

    margin-bottom:8px;

}

.sheet-grid span{

    font-size:12px;

    text-align:center;

    font-weight:600;

}

.sheet-grid a:hover{

    color:#0B4F8A;

    text-decoration:none;

}