/* =========================================================
   RESPONSIVE.CSS
   YAYASAN HUJJATUL ISLAM
   FINAL - TABLET & MOBILE
   DESKTOP TIDAK DISENTUH
   ========================================================= */


/* =========================================================
   DESKTOP
   1101px KE ATAS
   ========================================================= */

@media screen and (min-width: 1101px) {

    .premium-header .main-navigation {
        display: flex !important;
    }

    .premium-header .mobile-menu-button {
        display: none !important;
    }

    .premium-header .mobile-navigation {
        display: none !important;
    }

}


/* =========================================================
   TABLET + MOBILE
   1100px KE BAWAH
   ========================================================= */

@media screen and (max-width: 1100px) {

    /* =====================================================
       HEADER
       ===================================================== */

    .premium-header {
        position: relative !important;
        width: 100% !important;
        z-index: 99999 !important;
        background: #ffffff !important;
    }


    .premium-header .header-container {
        position: relative !important;
        width: 100% !important;
        z-index: 100000 !important;
    }


    /* =====================================================
       DESKTOP NAVIGATION
       ===================================================== */

    .premium-header .main-navigation {
        display: none !important;
    }


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

    .premium-header .mobile-menu-button {
        display: flex !important;

        width: 46px !important;
        height: 46px !important;

        position: relative !important;
        z-index: 100001 !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        flex-direction: column !important;
        gap: 5px !important;

        border: 0 !important;
        border-radius: 12px !important;

        background: #eefaf6 !important;

        cursor: pointer !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    .premium-header .mobile-menu-button span {
        display: block !important;

        width: 23px !important;
        height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #087f5b !important;

        border-radius: 3px !important;

        transition:
            transform .25s ease,
            opacity .25s ease !important;
    }


    /* =====================================================
       HAMBURGER -> X
       ===================================================== */

    .premium-header
    .mobile-menu-button.active
    span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg) !important;
    }


    .premium-header
    .mobile-menu-button.active
    span:nth-child(2) {
        opacity: 0 !important;
    }


    .premium-header
    .mobile-menu-button.active
    span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg) !important;
    }


    /* =====================================================
       MOBILE NAVIGATION
       DEFAULT = TERTUTUP
       ===================================================== */

    .premium-header .mobile-navigation {

        display: block !important;

        position: absolute !important;

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

        width: 100% !important;

        box-sizing: border-box !important;

        max-height: calc(100vh - 80px) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        padding: 12px 16px 20px !important;

        background: #ffffff !important;

        border-top: 1px solid #e5eeee !important;

        box-shadow:
            0 15px 35px rgba(0,0,0,.15) !important;

        z-index: 100000 !important;

        /* CLOSED */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

        transform: translateY(-10px) !important;

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease !important;
    }


    /* =====================================================
       MOBILE NAVIGATION
       ACTIVE = TERBUKA
       ===================================================== */

    .premium-header
    .mobile-navigation.active {

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        transform: translateY(0) !important;
    }


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

    .premium-header
    .mobile-navigation > a {

        display: flex !important;

        width: 100% !important;
        min-height: 48px !important;

        box-sizing: border-box !important;

        align-items: center !important;
        justify-content: flex-start !important;

        padding: 12px 14px !important;
        margin: 0 !important;

        border: 0 !important;
        border-bottom: 1px solid #edf2f0 !important;

        background: #ffffff !important;

        color: #263238 !important;

        font-family:
            'Poppins',
            sans-serif !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        line-height: 1.4 !important;

        text-decoration: none !important;
    }


    .premium-header
    .mobile-navigation > a:hover {

        background: #eefaf6 !important;
        color: #087f5b !important;
    }


    /* =====================================================
       ICON LINK
       ===================================================== */

    .premium-header
    .mobile-navigation > a > i {

        width: 22px !important;

        margin-right: 8px !important;

        color: #087f5b !important;

        font-size: 15px !important;
    }


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

    .premium-header
    .mobile-navigation
    .mobile-dropdown {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom:
            1px solid #edf2f0 !important;

        background: #ffffff !important;
    }


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

    .premium-header
    .mobile-navigation
    .mobile-dropdown-button {

        display: flex !important;

        width: 100% !important;
        min-height: 48px !important;

        box-sizing: border-box !important;

        align-items: center !important;
        justify-content: space-between !important;

        margin: 0 !important;
        padding: 12px 14px !important;

        border: 0 !important;
        border-radius: 0 !important;

        outline: none !important;

        background: #ffffff !important;

        color: #263238 !important;

        font-family:
            'Poppins',
            sans-serif !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        line-height: 1.4 !important;

        text-align: left !important;

        cursor: pointer !important;
    }


    .premium-header
    .mobile-navigation
    .mobile-dropdown-button:hover {

        background: #eefaf6 !important;
        color: #087f5b !important;
    }


    /* =====================================================
       BAGIAN KIRI BUTTON
       ===================================================== */

    .premium-header
    .mobile-dropdown-button > span {

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;
    }


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

    .premium-header
    .mobile-dropdown-button i {

        margin: 0 !important;

        color: #087f5b !important;
    }


    /* =====================================================
       PANAH
       ===================================================== */

    .premium-header
    .mobile-dropdown-button
    .bi-chevron-down {

        margin-left: auto !important;

        font-size: 13px !important;

        transition:
            transform .25s ease !important;
    }


    /* =====================================================
       PANAH SAAT AKTIF
       ===================================================== */

    .premium-header
    .mobile-dropdown.active
    .mobile-dropdown-button
    .bi-chevron-down {

        transform: rotate(180deg) !important;
    }


    /* =====================================================
       SUBMENU
       
       DEFAULT WAJIB TERTUTUP
       ===================================================== */

    .premium-header
    .mobile-navigation
    .mobile-dropdown
    .mobile-submenu {

        display: none !important;

        width: 100% !important;

        box-sizing: border-box !important;

        height: 0 !important;
        max-height: 0 !important;

        overflow: hidden !important;

        visibility: hidden !important;
        opacity: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #f6faf8 !important;
    }


    /* =====================================================
       SUBMENU AKTIF
       ===================================================== */

    .premium-header
    .mobile-navigation
    .mobile-dropdown.active
    .mobile-submenu {

        display: block !important;

        height: auto !important;
        max-height: 1000px !important;

        overflow: visible !important;

        visibility: visible !important;
        opacity: 1 !important;

        padding: 4px 0 8px !important;
    }


    /* =====================================================
       LINK SUBMENU
       ===================================================== */

    .premium-header
    .mobile-navigation
    .mobile-submenu a {

        display: block !important;

        width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding:
            11px 14px 11px 28px !important;

        border: 0 !important;

        border-bottom:
            1px solid #e5eeeb !important;

        border-left:
            2px solid #d4ebe3 !important;

        background: transparent !important;

        color: #596663 !important;

        font-family:
            'Poppins',
            sans-serif !important;

        font-size: 13px !important;

        font-weight: 400 !important;

        line-height: 1.4 !important;

        text-decoration: none !important;
    }


    .premium-header
    .mobile-navigation
    .mobile-submenu a:hover {

        background: #eefaf6 !important;

        color: #087f5b !important;
    }


    /* =====================================================
       LOGIN
       ===================================================== */

    .premium-header
    .mobile-navigation
    .mobile-login {

        display: flex !important;

        width: 100% !important;

        min-height: 48px !important;

        box-sizing: border-box !important;

        align-items: center !important;
        justify-content: center !important;

        margin:
            12px 0 0 !important;

        padding:
            12px 14px !important;

        border: 0 !important;
        border-radius: 10px !important;

        background: #087f5b !important;

        color: #ffffff !important;

        font-family:
            'Poppins',
            sans-serif !important;

        font-size: 14px !important;

        font-weight: 600 !important;

        text-decoration: none !important;
    }


    .premium-header
    .mobile-navigation
    .mobile-login i {

        margin-right: 8px !important;

        color: #ffffff !important;
    }

}


/* =========================================================
   TABLET
   768px - 1100px
   ========================================================= */

@media screen
and (min-width: 768px)
and (max-width: 1100px) {

    .premium-header
    .mobile-navigation {

        padding:
            15px 25px 25px !important;

        max-height:
            calc(100vh - 80px) !important;
    }


    .premium-header
    .mobile-navigation > a,

    .premium-header
    .mobile-navigation
    .mobile-dropdown-button {

        min-height: 52px !important;

        padding:
            14px 18px !important;

        font-size: 15px !important;
    }


    .premium-header
    .mobile-navigation
    .mobile-submenu a {

        padding:
            12px 18px 12px 30px !important;

        font-size: 14px !important;
    }

}


/* =========================================================
   MOBILE
   767px KE BAWAH
   ========================================================= */

@media screen and (max-width: 767px) {

    .premium-header
    .mobile-navigation {

        padding:
            10px 12px 18px !important;

        max-height:
            calc(100vh - 70px) !important;
    }


    .premium-header
    .mobile-navigation > a,

    .premium-header
    .mobile-navigation
    .mobile-dropdown-button {

        min-height:
            46px !important;

        padding:
            11px 12px !important;

        font-size:
            14px !important;
    }


    .premium-header
    .mobile-navigation
    .mobile-submenu a {

        padding:
            10px 12px 10px 26px !important;

        font-size:
            13px !important;
    }

}