/* LAWNESIA OJS HEADER RESPONSIVE FINAL
   Ganti seluruh CSS header lama dengan file ini.
   Jangan gabungkan dengan CSS header sebelumnya agar tidak bentrok. */

/* =====================
   DESKTOP / TABLET BESAR
   ===================== */
.pkp_structure_head {
    background: #004b7e !important;
    border: 0 !important;
}

.pkp_head_wrapper {
    max-width: 1160px !important;
    width: calc(100% - 44px) !important;
    margin: 0 auto !important;
    padding: 22px 0 0 0 !important;
    box-sizing: border-box !important;
}

.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    clip: auto !important;
    clip-path: none !important;
    width: 100% !important;
    max-width: 1160px !important;
    height: 180px !important;
    max-height: 180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.pkp_site_name .is_img img,
.pkp_site_name img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 1160px !important;
    height: 180px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
}

.pkp_navigation_primary_row {
    background: #b7d900 !important;
    max-width: 1160px !important;
    width: calc(100% - 44px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
}

.pkp_navigation_primary_wrapper {
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: 0 14px !important;
}

.pkp_navigation_primary > li > a {
    color: #003b7a !important;
    font-weight: 700 !important;
}

.pkp_navigation_search_wrapper a {
    color: #fff !important;
    font-weight: 700 !important;
}

/* =====================
   MOBILE
   ===================== */
@media screen and (max-width: 768px) {

    .pkp_structure_head {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #004b7e !important;
        border: 0 !important;
        min-height: 96px !important;
        overflow: visible !important;
    }

    .pkp_head_wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 96px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name .is_img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 96px !important;
        max-height: 96px !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 96px !important;
        max-height: none !important;
        min-height: 96px !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        z-index: 1 !important;
    }

    /* Tombol hamburger tetap terlihat di atas banner */
    .pkp_site_nav_toggle {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 20px !important;
        z-index: 9999 !important;
        background: rgba(0, 75, 126, 0.92) !important;
    }

    .pkp_navigation_user_wrapper,
    .pkp_navigation_user {
        display: none !important;
    }

    .pkp_navigation_primary_row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #b7d900 !important;
        border: 0 !important;
    }
}

/* HP sangat kecil */
@media screen and (max-width: 480px) {
    .pkp_structure_head,
    .pkp_head_wrapper,
    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name .is_img,
    .pkp_site_name .is_img img,
    .pkp_site_name img {
        height: 88px !important;
        max-height: 88px !important;
        min-height: 88px !important;
    }

    .pkp_site_nav_toggle {
        top: 16px !important;
    }
}
/* BACKGROUND HALAMAN JURNAL */
html,
body {
    background: #004b7e !important;
}

/* Background luar halaman OJS */
.pkp_structure_page {
    background: #004b7e !important;
}

/* Area isi tetap putih agar artikel mudah dibaca */
.pkp_structure_content {
    background: #ffffff !important;
}

/* Area konten utama dan sidebar tetap putih */
.pkp_structure_main,
.pkp_structure_sidebar {
    background: #ffffff !important;
}