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

/* Default: sembunyikan */
.mobile-bottom-nav{
    display:none;
}


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

    /* Beri ruang agar konten halaman tidak tertutup bottom nav */
    body{
        padding-bottom:90px;
    }


    /* =====================================
       CONTAINER NAVIGATION
    ===================================== */
    .mobile-bottom-nav{
        position:fixed;

        left:0;
        right:0;
        bottom:0;

        height:82px;

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

        background:#ffffff;

        border-top:1px solid rgba(0,0,0,.08);

        box-shadow:
            0 -5px 20px rgba(0,0,0,.08);

        z-index:9999;
    }


    /* =====================================
       ITEM
    ===================================== */
    .bottom-nav-item{
        position:relative;

        flex:1;
        height:100%;

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

        gap:5px;

        color:#202938;

        text-decoration:none;

        transition:.25s ease;
    }


    /* ICON */
    .bottom-nav-item > i{
        font-size:25px;
        line-height:1;
    }


    /* LABEL */
    .bottom-nav-item span{
        font-size:12px;
        font-weight:600;
        line-height:1;
    }


    /* ACTIVE */
    .bottom-nav-item.active{
        color:#1f4b99;
    }


    /* =====================================
       IGD CENTER
    ===================================== */
    .bottom-nav-igd{
        align-self:flex-start;

        justify-content:flex-start;

        height:82px;
    }


    .igd-circle{
        position:absolute;

        top:-25px;

        width:80px;
        height:80px;

        border-radius:50%;

        background:
            linear-gradient(
                135deg,
                #d90012,
                #ef1b24
            );

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

        color:#ffffff;

        border:4px solid #ffffff;

        box-shadow:
            0 8px 20px rgba(210,0,18,.28);

        transition:.25s ease;
    }


    /* ICON IGD */
    .igd-circle i{
        font-size:24px;
        margin-bottom:4px;
    }


    /* TEXT IGD */
    .igd-circle strong{
        font-size:18px;
        line-height:1;
        font-weight:700;
    }


    .igd-circle small{
        margin-top:2px;

        font-size:11px;
        line-height:1;
        font-weight:700;
    }


    /* =====================================
       HOVER
    ===================================== */
    .bottom-nav-item:hover{
        text-decoration:none;
    }


    .bottom-nav-item:not(.bottom-nav-igd):hover{
        color:#e60012;
    }


    .bottom-nav-igd:hover .igd-circle{
        transform:translateY(-4px);
    }

}