/* =====================================
   MAN 1 PONOROGO
   CUSTOM GLOBAL NAVBAR
===================================== */


*{
    box-sizing:border-box;
}



.main-navbar{

    width:100%;

    height:90px;

    background:#ffffff;

    position:sticky;

    top:0;

    z-index:1000;

}



.navbar-container{

    max-width:1400px;

    height:100%;

    margin:auto;

    padding:0 45px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}





/* =====================
   LOGO
===================== */


.navbar-logo{

    display:flex;

    align-items:center;

}


.navbar-logo img{

    width:280px;

    height:auto;

    display:block;

}






/* =====================
   MENU
===================== */


.navbar-menu{

    display:flex;

    align-items:center;

    gap:35px;

}



.navbar-link,
.dropdown-button{

    position:relative;

    border:none;

    background:none;

    cursor:pointer;


    font-family:"Montserrat",sans-serif;

    font-size:16px;

    font-weight:500;

    color:#222;

    text-decoration:none;


    padding:18px 0;

}



.navbar-link:hover,
.dropdown-button:hover{

    color:#f5a800;

}





/* garis hover */


.navbar-link::after,
.dropdown-button::after{


    content:"";

    position:absolute;

    bottom:8px;

    left:50%;


    width:0;

    height:2px;


    background:#f5a800;


    transform:translateX(-50%);

    transition:.25s ease;


}



.navbar-link:hover::after,
.dropdown-button:hover::after{

    width:100%;

}


/* =====================
   DROPDOWN
===================== */


.navbar-dropdown{

    position:relative;

}



.dropdown-button{

    cursor:pointer;

}



.dropdown-menu{


    position:absolute;


    top:100%;

    left:0;


    min-width:300px;


    background:white;


    padding:8px 0;


    border-radius:8px;


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


    opacity:0;

    visibility:hidden;


    transform:translateY(10px);


    transition:.3s ease;


    z-index:9999;


}



/* =====================
   DROPDOWN ITEM
===================== */


.dropdown-menu a{


    display:block;


    position:relative;


    padding:10px 24px;


    font-family:"Montserrat",sans-serif;


    font-size:15px;


    color:#222;


    text-decoration:none;


    white-space:nowrap;


    transition:.25s ease;


}



/* hover */

.dropdown-menu a:hover{


    color:#f5a800;


    background:white;


}



/* underline orange */

.dropdown-menu a::after{


    content:"";


    position:absolute;


    left:24px;


    bottom:6px;


    width:0;


    height:3px;


    background:#f5a800;


    transition:.3s ease;


}



.dropdown-menu a:hover::after{


    width:calc(100% - 48px);


}



@media(min-width:992px){


.navbar-dropdown:hover 
.dropdown-menu{


    opacity:1;

    visibility:visible;


    transform:translateY(0);


}


.navbar-toggle{

    display:none;

}


}




/* desktop hover */


@media(min-width:992px){


.navbar-dropdown:hover 
.dropdown-menu{


    opacity:1;

    visibility:visible;

    transform:translateY(0);


}

.navbar-toggle{

    display:none;

}

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

@media(max-width:991px){

    /* =========================
       CONTAINER
    ========================= */

    .navbar-container{
        position:relative;
        width:100%;
        min-height:70px;
        box-sizing:border-box;
    }


    /* =========================
       LOGO
    ========================= */

    .navbar-logo{
        display:flex;
        align-items:center;
        height:70px;
    }

    .navbar-logo img{
        display:block;
        width:auto;
        height:42px;
        max-width:180px;
        object-fit:contain;
    }


    /* =========================
       HAMBURGER
    ========================= */

    .navbar-toggle{

        width:40px;
        height:40px;

        display:flex !important;

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

        gap:5px;

        background:none;
        border:none;

        cursor:pointer;
        padding:0;

        position:absolute;

        right:15px;
        top:15px;

        z-index:9999;
    }


    .navbar-toggle span{

        display:block;

        width:24px;
        height:2px;

        background:#222;

        transition:.3s;
    }


    /* =========================
       MENU MOBILE
    ========================= */

    .navbar-menu{

        display:none;

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        background:#fff;

        flex-direction:column;
        align-items:flex-start;

        padding:10px 20px 20px;

        gap:0;

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

        z-index:9998;

        box-sizing:border-box;
    }


    /* MENU AKTIF */

    .navbar-menu.active{
        display:flex;
    }


    /* =========================
       MENU UTAMA
    ========================= */

    .navbar-menu .navbar-link,
    .navbar-menu .dropdown-button{

        width:100%;

        text-align:left;

        padding:7px 0;

        font-family:"Montserrat", sans-serif;

        font-size:16px;

        line-height:1.3;

        color:#222;

        box-sizing:border-box;
    }


    /* =========================
       DROPDOWN CONTAINER
    ========================= */

    .navbar-dropdown{

        width:100%;
    }


    /* =========================
       DROPDOWN MOBILE
    ========================= */

    .dropdown-menu{

        position:static;

        display:none;

        width:100%;

        padding:0 0 5px;

        margin:0;

        box-shadow:none;

        opacity:1;

        visibility:visible;

        transform:none;

        background:transparent;

        box-sizing:border-box;
    }


    /* DROPDOWN AKTIF */

    .navbar-dropdown.active .dropdown-menu{

        display:block;
    }


    /* =========================
       ITEM DROPDOWN
    ========================= */

    .dropdown-menu a{

        display:block;

        width:100%;

        padding:10px 0 10px 20px;

        font-family:"Montserrat", sans-serif;

        font-size:15px;

        line-height:1.4;

        color:#222;

        text-decoration:none;

        white-space:normal;

        box-sizing:border-box;
    }

}
}






/* =========================================
   FINAL MOBILE NAVBAR OVERRIDE
   ========================================= */

@media (max-width: 991px) {

    /* NAVBAR */
    .main-navbar {
        position: relative;
        z-index: 9999;
    }


    /* CONTAINER */
    .navbar-container {
        position: relative;
    }


    /* HAMBURGER */
    .navbar-toggle {
        display: flex !important;

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

        gap: 5px;

        width: 42px;
        height: 42px;

        padding: 0;

        background: transparent;
        border: none;

        cursor: pointer;

        position: relative;
        z-index: 10001;
    }


    .navbar-toggle span {
        display: block;

        width: 22px;
        height: 2px;

        background: #222;

        transition: all .3s ease;
    }


    /* MENU TERTUTUP */
    .navbar-menu {
        display: none !important;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        background: #ffffff;

        padding: 15px 20px 20px;

        flex-direction: column;

        box-sizing: border-box;

        z-index: 10000;

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


    /* MENU TERBUKA */
    .navbar-menu.active {
        display: flex !important;
    }


    /* LINK */
    .navbar-menu .navbar-link {
        display: block;

        width: 100%;

        padding: 14px 5px;

        box-sizing: border-box;

        text-align: left;

        text-decoration: none;

        color: #222;

        background: transparent;

        border: none;

        font-size: 16px;

        cursor: pointer;
    }


    /* DROPDOWN MOBILE */
    .navbar-dropdown {
        width: 100%;
    }


    .navbar-dropdown .dropdown-button {
        width: 100%;

        text-align: left;
    }


    /* DROPDOWN DEFAULT TERTUTUP */
    .navbar-dropdown .dropdown-menu {
        display: none !important;

        position: static;

        width: 100%;

        min-width: 0;

        padding: 5px 0 5px 15px;

        margin: 0;

        opacity: 1;

        visibility: visible;

        transform: none;

        box-shadow: none;

        border-radius: 0;

        background: #fff;
    }


    /* DROPDOWN TERBUKA */
    .navbar-dropdown.active .dropdown-menu {
        display: block !important;
    }


    /* DROPDOWN ITEM */
    .navbar-dropdown .dropdown-menu a {
        display: block;

        padding: 11px 10px;

        font-size: 15px;

        color: #222;

        text-decoration: none;
    }


    /* HAMBURGER MENJADI X */
    .navbar-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .navbar-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .navbar-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

}

/* =====================================
   MOBILE LOGO - FINAL OVERRIDE
===================================== */

@media(max-width:991px){

    .navbar-container{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        position:relative !important;
    }

    .navbar-logo{
        width:auto !important;
        max-width:calc(100% - 75px) !important;
        flex:0 1 auto !important;
        overflow:hidden !important;
    }

    .navbar-logo img{
        width:auto !important;
        height:42px !important;
        max-width:100% !important;
        object-fit:contain !important;
    }

    .navbar-toggle{
        position:absolute !important;
        right:15px !important;
        top:50% !important;
        transform:translateY(-50%) !important;

        width:40px !important;
        height:40px !important;

        flex-shrink:0 !important;
        z-index:10000 !important;
    }

}

/* =====================================
   MOBILE MENU - COMPACT SPACING
===================================== */

@media (max-width: 991px){

    .navbar-menu .navbar-link,
    .navbar-menu .dropdown-button{
        padding-top:5px !important;
        padding-bottom:5px !important;
        line-height:1.2 !important;
    }

}

/* =========================================
   GARIS ORANYE DROPDOWN MOBILE
   FINAL - 1px
========================================= */

@media (max-width:991px){

    /* Matikan semua garis dari pseudo-element */
    .navbar-menu .navbar-dropdown > .dropdown-button::before,
    .navbar-menu .navbar-dropdown > .dropdown-button::after{
        content:none !important;
        display:none !important;
        width:0 !important;
        height:0 !important;
        background:none !important;
        border:none !important;
        box-shadow:none !important;
    }

    /* Tombol dropdown */
    .navbar-menu .navbar-dropdown > .dropdown-button{
        position:relative !important;
        display:block !important;
        width:100% !important;
        box-sizing:border-box !important;

        border-bottom:none !important;
    }

    /* Garis hanya ketika Profil aktif */
    .navbar-menu .navbar-dropdown.active > .dropdown-button{
        border-bottom:2px solid #f5a800 !important;
    }

}

/* =========================================
   FIX DROPDOWN DESKTOP - KONFLIK BOOTSTRAP
========================================= */

@media (min-width: 992px) {

    .navbar-menu .navbar-dropdown:hover > .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}

/* =========================================
   HILANGKAN BORDER KOTAK DROPDOWN
   NAVBAR BARU
========================================= */

.navbar-menu .navbar-dropdown > .dropdown-menu {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}