/* =========================================================
   1. UTAMA: CONTAINER HEADER & AREA BANNER
   ========================================================= */
header.pkp_structure_head,
.pkp_structure_head {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
    position: relative !important;
}

/* Pembungkus Banner Utama (header.webp) */
.pkp_head_wrapper {
    background-color: #0073b7 !important;
    background-image: url("https://ojs.jasadigital.shop/public/journals/1/header.webp") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
}

/* =========================================================
   2. PEMBERSIHAN ELEMEN TEKS BAWAAN DI DALAM BANNER
   ========================================================= */
.pkp_site_name_wrapper,
.pkp_site_name {
    display: none !important;
}

.pkp_head_wrapper::after {
    display: none !important;
    content: "" !important;
}

/* =========================================================
   3. TOMBOL REGISTER & LOGIN (POJOK KANAN ATAS BANNER)
   ========================================================= */
.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 10px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 99999 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}

.pkp_navigation_user {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pkp_navigation_user > li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.pkp_navigation_user > li > a {
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    background-color: #0081c9 !important;
    border-radius: 2px !important;
    display: inline-block !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

.pkp_navigation_user > li > a:hover {
    background-color: #00568c !important;
}

/* =========================================================
   4. NAVIGASI UTAMA & SUBMENU DESKTOP (Layar > 768px)
   ========================================================= */
@media (min-width: 769px) {
    .pkp_head_wrapper {
        height: 180px !important;
    }

    .pkp_navigation_primary_wrapper {
        position: absolute !important;
        top: 180px !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        background-color: #0081c9 !important;
        border-top: 1px solid #ffffff !important;
        border-bottom: 1px solid #005d93 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        z-index: 999 !important;
        overflow: visible !important;
    }

    .pkp_structure_content {
        margin-top: 40px !important;
    }

    .pkp_navigation_primary {
        max-width: 100% !important;
        height: 38px !important;
        margin: 0 !important;
        padding-left: 20px !important;
        display: flex !important;
        align-items: center !important;
        list-style: none !important;
        position: relative !important;
    }

    .pkp_navigation_primary > li {
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary > li > a {
        color: #ffffff !important;
        font-weight: bold !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        padding: 0 16px !important;
        height: 38px !important;
        line-height: 38px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .pkp_navigation_primary > li > a:hover {
        background-color: #00568c !important;
        color: #ffffff !important;
    }

    .pkp_navigation_primary > li:last-child > a {
        border-right: none !important;
    }

    /* Submenu Dropdown Desktop */
    .pkp_navigation_primary li ul,
    .pkp_navigation_primary ul,
    .pkp_navigation_primary_wrapper ul ul {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background-color: #0081c9 !important;
        min-width: 220px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        z-index: 100000 !important;
        border-top: 2px solid #00568c !important;
        transform: none !important;
    }

    /* Invisible Hover Bridge */
    .pkp_navigation_primary li ul::before {
        content: "" !important;
        position: absolute !important;
        top: -8px !important;
        left: 0 !important;
        width: 100% !important;
        height: 8px !important;
        background: transparent !important;
        display: block !important;
    }

    .pkp_navigation_primary li:hover > ul,
    .pkp_navigation_primary li.focus > ul,
    .pkp_navigation_primary li:focus-within > ul,
    .pkp_navigation_primary ul:hover {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pkp_navigation_primary ul li {
        width: 100% !important;
        height: auto !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .pkp_navigation_primary ul li a {
        color: #ffffff !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
        font-weight: normal !important;
        text-transform: none !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-right: none !important;
        line-height: 1.3 !important;
        height: auto !important;
        background-color: #0081c9 !important;
    }

    .pkp_navigation_primary ul li a:hover {
        background-color: #00568c !important;
        color: #ffffff !important;
    }

    .pkp_site_nav_toggle,
    .pkp_navigation_primary_wrapper button {
        display: none !important;
    }
}

/* =========================================================
   5. PERBAIKAN MUTLAK MOBILE: CREATING CSS-ONLY TOGGLE BAR
   ========================================================= */
@media (max-width: 768px) {
    .pkp_head_wrapper {
        height: 0 !important;
        padding-bottom: 30% !important;
        background-size: 100% auto !important;
    }

    .pkp_navigation_user_wrapper {
        top: 6px !important;
        right: 8px !important;
    }

    .pkp_navigation_user {
        padding: 0 !important;
        gap: 4px !important;
    }

    .pkp_navigation_user > li > a {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* Pembungkus Navigasi Utama Mobile */
    .pkp_navigation_primary_wrapper {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        background-color: #0081c9 !important;
        border-top: 1px solid #ffffff !important;
        border-bottom: 1px solid #005d93 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
        cursor: pointer !important;
    }

    /* MENGHASILKAN BAR TOGGLE "MENU ☰" SECARA MURNI VIA CSS */
    .pkp_navigation_primary_wrapper::before {
        content: "MENU  ☰" !important;
        display: block !important;
        width: 100% !important;
        padding: 12px 15px !important;
        background-color: #0081c9 !important;
        color: #ffffff !important;
        font-weight: bold !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        box-sizing: border-box !important;
        text-align: right !important;
        border-bottom: 1px solid #005d93 !important;
    }

    /* SEMBUNYIKAN MENU SEBELUM DI-TAP / HOVER */
    .pkp_navigation_primary {
        display: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background-color: #006b9e !important;
        height: auto !important;
    }

    /* BUKA DROPDOWN MENU KETIKA BAR NAVIGASI MOBILE DI-TAP / DI-HOVER */
    .pkp_navigation_primary_wrapper:hover .pkp_navigation_primary,
    .pkp_navigation_primary_wrapper:active .pkp_navigation_primary,
    .pkp_navigation_primary_wrapper:focus-within .pkp_navigation_primary {
        display: block !important;
    }

    .pkp_navigation_primary > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    .pkp_navigation_primary > li > a {
        display: block !important;
        color: #ffffff !important;
        font-weight: bold !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        padding: 12px 15px !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
        height: auto !important;
        border-right: none !important;
    }

    .pkp_navigation_primary > li > a:hover {
        background-color: #005178 !important;
    }

    /* Submenu (About, dll) Bersarang di Mobile */
    .pkp_navigation_primary ul,
    .pkp_navigation_primary li ul {
        display: block !important;
        position: static !important;
        background-color: #005178 !important;
        padding-left: 15px !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-top: none !important;
        min-width: 100% !important;
    }

    .pkp_navigation_primary ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .pkp_navigation_primary ul li a {
        background-color: #005178 !important;
        padding: 10px 15px !important;
        font-size: 11px !important;
        font-weight: normal !important;
    }

    .pkp_navigation_primary ul li a:hover {
        background-color: #003e5c !important;
    }

    .pkp_structure_content {
        margin-top: 15px !important;
    }
}

/* Mematikan form search bawaan jika merusak bar */
.pkp_navigation_primary_wrapper .pkp_search_mobile,
.pkp_navigation_primary_wrapper form {
    display: none !important;
}

/* =========================================================
   6. STYLING SIDEBAR BLOK USER (FORM LOGIN SIDEBAR)
   ========================================================= */
.pkp_block.block_user .title,
.block_custom#customblock-user_login .title {
    background-color: #0081c9 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
    border-radius: 0 !important;
    letter-spacing: 0.5px !important;
}

.pkp_block.block_user input[type="text"],
.pkp_block.block_user input[type="password"] {
    border: 1px solid #b5b5b5 !important;
    background-color: #f9f9f9 !important;
    padding: 4px !important;
}

.pkp_block.block_user button[type="submit"] {
    background: #e1e1e1 !important;
    border: 1px solid #adadad !important;
    padding: 3px 12px !important;
    color: #333 !important;
    cursor: pointer !important;
}

/* =========================================================
   7. MEMBERSIHKAN AREA HOMEPAGE IMAGE
   ========================================================= */
.page_index_journal .homepage-image {
    display: none !important;
}

/* =========================================================
   8. STYLING BLOK SIDEBAR CERTIFICATE
   ========================================================= */
.block_custom#customblock-certificate .title,
#sidebar .block_custom#customblock-certificate .title,
.pkp_block.block_custom_certificate .title,
div[id*="certificate"] .title {
    display: block !important;
    background-color: #0081c9 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 15px !important;
    text-transform: capitalize !important;
    padding: 8px 12px !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    box-shadow: none !important;
}

/* =========================================================
   9. STYLING BLOK SIDEBAR JOURNAL CONTENT
   ========================================================= */
.block_custom#customblock-journal_content .title,
div[id*="journal_content"] .title {
    display: block !important;
    background-color: #0081c9 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    letter-spacing: 0.5px !important;
}

.block_custom#customblock-journal_content {
    margin-bottom: 25px !important;
}

.block_journal_content .browse-section a:hover {
    text-decoration: underline !important;
    color: #00568c !important;
}

/* =========================================================
   10. OVERRIDE TOTAL: MERAPATKAN SIDEBAR EKSTREM
   ========================================================= */
aside.pkp_structure_sidebar,
.pkp_structure_sidebar {
    display: block !important;
    gap: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block_custom,
.pkp_structure_sidebar div[id*="customblock-"],
aside.pkp_structure_sidebar > div {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    clear: both !important;
}

.pkp_block .title,
.block_custom .title,
div[id*="customblock-"] .title {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.pkp_structure_sidebar form,
.pkp_structure_sidebar p,
.pkp_structure_sidebar ul,
.pkp_structure_sidebar .content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* =========================================================
   11. STYLING BLOK SIDEBAR RECOMMENDED TOOLS
   ========================================================= */
.block_custom[id*="recommended"] .title,
div[id*="recommended"] .title,
.block_custom#customblock-recommended_tools .title,
div[class*="recommended"] .title {
    display: block !important;
    background-color: #0081c9 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-transform: capitalize !important;
    padding: 8px 12px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 0 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
}

.block_recommended_tools .tool-item:hover {
    border-color: #0081c9 !important;
    box-shadow: 0 2px 6px rgba(0, 129, 201, 0.2) !important;
    transition: all 0.2s ease-in-out;
}