/* ================= FONT ================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ================= GLOBAL ================= */
html,
body,
button,
input,
select,
textarea{
    font-family:'Poppins',sans-serif;
}

/* ================= NAVBAR ================= */

.navbar-custom{
    background:linear-gradient(180deg,rgba(0,0,0,.90),rgba(0,0,0,.60));
    padding:12px 0;
    transition:all .3s ease;
    z-index:1050;
}

.navbar-custom .container{
    display:flex;
    align-items:center;
}

/* Logo */

.logo-navbar{
    height:55px;
    width:auto;
    display:block;
}

/* Collapse */

.navbar-custom .navbar-collapse{
    flex:1;
    display:flex;
    justify-content:center;   /* menu di tengah */
}

/* Menu */

.navbar-custom .navbar-nav{
    display:flex;
    align-items:center;

    gap:20px;          /* atur jarak menu */

    margin:0 auto;     /* center */

    width:auto;
    max-width:none;
}

.navbar-custom .nav-item{
    list-style:none;
}

.navbar-custom .nav-link{

    color:#ddd !important;

    font-size:16px;
    font-weight:500;

    padding:10px 0;

    position:relative;

    transition:.3s;
}

.navbar-custom .nav-link:hover{
    color:#ffc107 !important;
}

.navbar-custom .nav-link.active{
    color:#ffc107 !important;
}

.navbar-custom .nav-link.active::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:100%;
    height:2px;

    background:#ffc107;

    border-radius:5px;
}

/* Toggle */

.navbar-custom .navbar-toggler{
    border:none;
    box-shadow:none !important;
}

.navbar-custom .navbar-toggler:focus{
    box-shadow:none;
}

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

    .navbar-custom .container{
        position:relative;
    }

    .navbar-custom .navbar-collapse{
        position:absolute;
        top:100%;
        right:15px;

        width:250px;

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

        border-radius:20px;

        padding:10px 20px;

        z-index:99999;
    }

    /* Bootstrap kontrol buka tutup */
    .navbar-custom .navbar-collapse:not(.show){
        display:none !important;
    }

    .navbar-custom .navbar-collapse.show{
        display:block !important;
    }

    .navbar-custom .navbar-nav{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        width:100%;
        margin:0;
    }

    .navbar-custom .nav-item{
        width:100%;
    }

    .navbar-custom .nav-link{
        width:100%;
        display:block;
        padding:14px 0;
        color:#fff !important;
        font-size:17px;
    }

    .navbar-custom .nav-link.active{
        color:#ffc107 !important;
    }

    .navbar-custom .nav-link.active::after{
        display:none;
    }

    .navbar-custom .navbar-toggler{
        border:2px solid rgba(255,255,255,.6);
        border-radius:15px;
        padding:10px 14px;
    }
}