/* STREAMING_CHUNK:Global background styling /
/ ========================================================= /
/ 1. GLOBAL & BACKGROUND                                    /
/ ========================================================= */
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
background-color: #f4f5f7 !important;
background-image: url('https://ojs.wiekabiasa.com/cubes.png') !important;
background-repeat: repeat !important;
}

body .pkp_structure_page {
background-color: #ffffff !important;
max-width: 1200px !important;
margin: 0 auto !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* STREAMING_CHUNK:Header banner configuration /
/ ========================================================= /
/ 2. HEADER BANNER & PENGHAPUSAN BACKGROUND PUTIH BOOTSTRAP /
/ ========================================================= /
/ Target super spesifik untuk membunuh aturan bawaan tema */
body header.pkp_structure_head,
body .pkp_structure_page .pkp_structure_head {
position: relative !important;
width: 100vw !important;
left: 50% !important; right: 50% !important;
margin-left: -50vw !important; margin-right: -50vw !important;

/* BANNER */
background-image: url('https://ojs.wiekabiasa.com/ojs_wieka2.png') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: #0b3d63 !important; 

border-bottom: 4px solid #f1c40f !important;
min-height: 150px !important;
display: block !important;


}

/* Membunuh background putih dari div bawaan OJS yang menutupi banner */
body header.pkp_structure_head > div,
body .pkp_structure_head .pkp_site_name_wrapper,
body .pkp_structure_head > .container,
body .pkp_structure_head > .pkp_container,
body .pkp_structure_head .row,
body .pkp_structure_head .col-md-12 {
background: transparent !important;
background-color: transparent !important;
}

/* STREAMING_CHUNK:Flexbox layout for header /
/ ========================================================= /
/ 3. FLEXBOX TATA LETAK HEADER (LOGO KIRI, TOMBOL KANAN)    /
/ ========================================================= /
body .pkp_structure_head > .pkp_container,
body .pkp_structure_head > .container {
display: flex !important;
justify-content: space-between !important; / Logo kiri, Tombol Kanan */
align-items: center !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 30px !important;
min-height: 150px !important;
position: relative !important;
z-index: 10 !important;
}

/* PENTING: Membunuh Pseudo-element Bootstrap perusak flexbox */
body .pkp_structure_head > .container::before,
body .pkp_structure_head > .container::after {
display: none !important;
content: none !important;
}

/* STREAMING_CHUNK:Logo styling and hover effects /
/ ========================================================= /
/ 4. PENYESUAIAN LOGO                                       /
/ ========================================================= */
body .pkp_site_name { padding: 1rem 0 !important; }
body .pkp_site_name h1 { display: none !important; }
body .pkp_site_name .is_img img {
max-height: 85px !important;
width: auto !important;
filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.4)) !important;
transition: transform 0.3s ease !important;
}
body .pkp_site_name .is_img img:hover { transform: scale(1.03) !important; }

/* STREAMING_CHUNK:Glassmorphism styling for auth buttons /
/ ========================================================= /
/ 5. BADGE REGISTER/LOGIN (GLASSMORPHISM MODERN)            /
/ ========================================================= */
.custom-badge-wrapper, .custom-badge-wrapper ul, .pkp_navigation_user {
display: flex !important;
align-items: center !important;
gap: 15px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}

.custom-badge-wrapper ul > li > a, .pkp_navigation_user > li > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 12px 24px !important;
border-radius: 50px !important; /* Kapsul */
font-size: 13.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
color: #ffffff !important;

/* Efek Kaca (Glassmorphism) */
background: rgba(0, 0, 0, 0.45) !important; 
border: 1px solid rgba(255, 255, 255, 0.25) !important;
backdrop-filter: blur(8px) !important; 
-webkit-backdrop-filter: blur(8px) !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; 
transition: all 0.3s ease !important;
white-space: nowrap !important;


}

.custom-badge-wrapper ul > li > a:hover, .pkp_navigation_user > li > a:hover {
background-color: #f1c40f !important;
color: #111111 !important;
border-color: #f1c40f !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 15px rgba(241, 196, 15, 0.4) !important;
}

/* STREAMING_CHUNK:Primary navigation styling /
/ ========================================================= /
/ 6. PRIMARY NAVIGATION (PITA BIRU KUNING)                  /
/ ========================================================= */
body .pkp_navigation_primary_wrapper {
background-color: #005c97 !important;
border-bottom: 3px solid #f1c40f !important;
width: 100vw !important; position: relative !important;
left: 50% !important; right: 50% !important;
margin-left: -50vw !important; margin-right: -50vw !important;
padding: 0 !important; z-index: 99 !important;
}
body .pkp_navigation_primary_wrapper .pkp_navigation_primary {
max-width: 1200px !important; margin: 0 auto !important;
display: flex !important; flex-wrap: wrap !important;
padding: 0 20px !important;
}
body .pkp_navigation_primary_wrapper .pkp_navigation_primary > li {
border-right: 1px solid rgba(255,255,255,0.1) !important; display: flex !important;
}
body .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a {
color: #ffffff !important; font-weight: 600 !important; padding: 18px 25px !important;
text-transform: uppercase !important; font-size: 13.5px !important; transition: background 0.2s ease !important;
}
body .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a:hover {
background-color: #00426d !important; color: #f1c40f !important;
}

/* STREAMING_CHUNK:Custom footer layout /
/ ========================================================= /
/ 7. PEMBERSIHAN LOGO PKP & PERBAIKAN FOOTER MENGHILANG     /
/ ========================================================= /
/ Menyembunyikan Logo PKP bawaan */
body .pkp_brand_footer, body .cmp_brand, body .pkp_structure_footer p { display: none !important; }

/* Mengembalikan warna hitam dan struktur grid footer Anda */
body .pkp_structure_footer_wrapper, body .pkp_structure_footer {
width: 100vw !important; position: relative !important;
left: 50% !important; right: 50% !important;
margin-left: -50vw !important; margin-right: -50vw !important;
padding: 0 !important; background: transparent !important; border: none !important;
}
.custom-black-box {
background-color: #111111 !important; border-top: 4px solid #f1c40f !important;
width: 100vw !important; margin: 0 !important; padding: 0 !important; display: block !important;
}
.custom-footer-container {
max-width: 1200px; margin: 0 auto; padding: 50px 20px 20px 20px; font-family: 'Inter', sans-serif;
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 30px; }
.footer-col { flex: 1; min-width: 250px; }
.footer-col h3 { color: #f1c40f !important; font-size: 16px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1.5px; }
.footer-col p { font-size: 14px; line-height: 1.8; color: #d1d5db !important; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: #d1d5db !important; text-decoration: none; transition: color 0.3s ease; font-size: 14px; display: flex; align-items: center; }
.footer-col ul li a:hover { color: #f1c40f !important; padding-left: 5px; }
.footer-col i { margin-right: 12px; color: #f1c40f !important; width: 16px; text-align: center; }

/* STREAMING_CHUNK:Mobile responsiveness /
/ ========================================================= /
/ 8. MOBILE RESPONSIVE (SMARTPHONE & TABLET)                /
/ ========================================================= */
@media (max-width: 768px) {
body .pkp_structure_page { box-shadow: none !important; border-radius: 0 !important; }

body .pkp_structure_head > .pkp_container, 
body .pkp_structure_head > .container { 
    flex-direction: column !important; 
    justify-content: center !important; 
    padding: 25px 15px !important; 
    gap: 20px !important;
}

body .pkp_site_name_wrapper { 
    width: 100% !important; display: flex !important; justify-content: center !important; 
}
body .pkp_site_name .is_img img { max-height: 65px !important; }

.custom-badge-wrapper ul { 
    justify-content: center !important; flex-wrap: wrap !important; width: 100% !important;
}
.custom-badge-wrapper ul > li > a { 
    padding: 10px 18px !important; font-size: 12px !important; 
}

body button.pkp_nav_primary_toggle { 
    margin: 15px auto 0 auto !important; 
    display: block !important; 
    background: rgba(0,0,0,0.5) !important;
    color: white !important;
}

/* Footer Responsive */
.footer-grid { gap: 25px; flex-direction: column; }
.footer-col { flex: 0 0 100%; min-width: 100%; text-align: center; }
.footer-col ul li a { justify-content: center; }


}