/* =========================================================
   CUSTOM CSS HEADER BULDES (DESKTOP & MOBILE RESPONSIVE)
   ========================================================= */

/* --- 1. TAMPILAN DESKTOP --- */
.pkp_structure_head {
    padding: 0 !important;
    background-color: #073B27 !important;
    border-bottom: none !important;
}

.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name_wrapper .is_img {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.pkp_site_name_wrapper .is_img img {
    max-height: none !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.pkp_navigation_primary_wrapper {
    margin-top: 0 !important;
}

/* --- 2. PERBAIKAN TAMPILAN MOBILE & TABLET (< 992px) --- */
@media (max-width: 991px) {
    /* Membuka kuncian tinggi 45px bawaan OJS di mobile */
    .pkp_head_wrapper,
    .pkp_site_name_wrapper {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
    }

    /* Mengubah posisi absolut menjadi relatif agar background hijau ikut memanjang */
    .pkp_site_name {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        width: 100% !important;
        /* Memberi ruang 45px di atas untuk tombol hamburger (☰) agar tidak menutupi logo banner */
        padding-top: 45px !important; 
        padding-left: 0 !important;
    }

    /* Mematikan efek pudar samping di layar kecil agar logo & gambar terlihat jelas */
    .pkp_site_name_wrapper .is_img img {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    /* Merapikan posisi tombol menu garis tiga (☰) di pojok kiri atas */
    .pkp_site_nav_toggle {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 45px !important;
        z-index: 10 !important;
    }
}