/* ==========================================================================
   1. RESET STRUKTUR UTAMA OJS (PAKSA MENTOK ATAS & FULL KANAN-KIRI)
   ========================================================================== */

/* Menghapus sisa margin/padding bawaan template OJS di bagian paling atas */
html, body, 
.pkp_structure_page, 
.pkp_structure_head, 
.pkp_site_name_wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* Memastikan wrapper benar-benar penuh ke kanan dan kiri tanpa sekat */
.pkp_site_name_wrapper {
    background-color: #003f63 !important; /* Warna biru pilihanmu */
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   2. PENGATURAN BANNER SLIDER (PROPORSIONAL, PAS, & NO-GAP)
   ========================================================================== */

/* Sembunyikan gambar asli bawaan OJS agar tidak merusak tata letak slider */
.pkp_site_name .is_img img {
    visibility: hidden;
    height: auto;
    width: 100%;
}

/* Kotak Slider Banner Utama */
.pkp_site_name .is_img {
    display: block;
    width: 100%;
    max-width: 100% !important;
    height: 320px; /* Tinggi ideal versi awal agar gambar pas dan proporsional */
    margin: 0 auto !important;
    padding: 0 !important;
    
    /* Menyesuaikan gambar dengan pas ke background tanpa meregang rusak/terpotong */
    background-size: 100% 100%; 
    background-position: center top; 
    background-repeat: no-repeat;
    background-color: #003f63 !important;
    
    animation: bannerSlider 15s infinite ease-in-out; 
}

/* ITERASI SLIDER BANNER JURNAL PUSDIKLAT KESOS */
@keyframes bannerSlider {
    0%, 28% {
        background-image: url('https://ejournal.kemensos.go.id/public/site/images/ejournal/banner3-dfaae9f3cb35006761fe504f01fe5be4.png');
    }
    33%, 61% {
        background-image: url('https://ejournal.kemensos.go.id/public/site/images/ejournal/banner2-7d3933a72e404b490b1d9de56932f300.png');
    }
    66%, 94% {
        background-image: url('https://ejournal.kemensos.go.id/public/site/images/ejournal/banner1.png');
    }
    100% {
        background-image: url('https://ejournal.kemensos.go.id/public/site/images/ejournal/banner2-605b7a94274afdeebd78ffffec070b80.png');
    }
}

/* ==========================================================================
   3. KOTAK MENU NAVIGASI: EFEK GELOMBANG ASIMETRIS (MIRIP GAMBAR KEDUA)
   ========================================================================== */

.pkp_navigation_primary_row {
    background-color: #003f63 !important; /* Warna selaras mengalir dari atas */
    margin-top: -2px !important; /* Menghilangkan celah mikro antar elemen */
    padding-top: 15px !important;
    
    /* Jarak bawah diperlebar agar teks di sisi kiri yang menukik tidak terpotong */
    padding-bottom: 85px !important; 
    position: relative;
    z-index: 999 !important;
    
    /* RUMUS KURVA ASIMETRIS: Menukik dalam di kiri, meliuk landai naik ke kanan */
    -webkit-clip-path: path('M 0 0 L 1440 0 L 1440 45 Q 1100 95 720 70 Q 340 45 0 95 Z') !important;
    clip-path: path('M 0 0 L 1440 0 L 1440 45 Q 1100 95 720 70 Q 340 45 0 95 Z') !important;
}

/* ==========================================================================
   4. FORMAT TEKS & IKON MENU NAVIGASI
   ========================================================================== */

#navigationPrimary > li > a,
.pkp_navigation_primary_row a,
.pkp_site_nav_menu a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #ffffff !important; /* Putih bersih kontras */
    font-weight: 600 !important;
    font-size: 14px;
}

/* Efek Hover Sorot Kuning Kemensos */
#navigationPrimary > li > a:hover,
.pkp_navigation_primary_row a:hover,
.pkp_site_nav_menu a:hover {
    color: #ffff57 !important;
    text-decoration: none;
}

/* Jarak Ikon Font Awesome Menu */
#navigationPrimary .fa,
.pkp_site_nav_menu .fa,
.pkp_navigation_search_wrapper .fa {
    margin-right: 8px !important;
}

/* ==========================================================================
   5. RESPONSIVE LAYAR GADGET (HP & TABLET)
   ========================================================================== */

@media (max-width: 992px) {
    .pkp_site_name .is_img { 
        height: 220px; 
        background-size: contain; /* Memastikan banner di tablet tidak gepeng */
    }
    .pkp_navigation_primary_row { 
        padding-bottom: 15px !important; 
        -webkit-clip-path: none !important;
        clip-path: none !important; /* Dinonaktifkan di mobile agar menu OJS tetap fungsional */
    }
}

@media (max-width: 768px) {
    .pkp_site_name .is_img { 
        height: 130px; 
        background-size: contain;
    }
    .pkp_navigation_primary_row { 
        padding-bottom: 15px !important; 
        -webkit-clip-path: none !important;
        clip-path: none !important; 
    }
}