/**
 * OJS Modern Sinta Style Override v1.17
 * Approach: Utility-first adaptation for OJS monolithic architecture
 * Updated: Left Alignment Fix & Search/Nav Active Black Background Removal
 */

/* =========================================
   1. GLOBAL VARIABLES & RESET
   ========================================= */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

:root {
    --primary: #1e3a8a;       /* Deep Navy Blue (Profesional & Akademik) */
    --primary-hover: #172554;
    --accent: #450ba3;        /* Amber/Gold Accent (Menciptakan kontras elegan) */
    --text-main: #334155;     /* Slate 700 - Lebih tajam untuk dibaca */
    --text-muted: #64748b;    
    --bg-main: #f1f5f9;       /* Latar belakang luar yang sangat subtle */
    --bg-card: #ffffff;       
    --border: #cbd5e1;        /* Border sedikit lebih tegas */
    --radius: 6px;            /* Radius ditajamkan sedikit agar lebih formal */
    
    /* Shadow dengan sentuhan warna biru gelap, bukan sekadar abu-abu kotor */
    --shadow-sm: 0 2px 4px rgba(30, 58, 138, 0.06);
    --shadow-md: 0 8px 20px -4px rgba(30, 58, 138, 0.1); 
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: var(--text-main) !important;
    background-color: var(--bg-main) !important; 
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_page {
    background-color: var(--bg-card) !important;
    max-width: 100% !important;  
    margin: 0 !important;        
    box-shadow: none !important; 
    border-radius: 0 !important; 
    /* overflow-x: hidden telah dihapus agar position: sticky pada header berfungsi */
    width: 100% !important;
}

/* =========================================
   2. HEADER & NAVIGATION OVERRIDE (MAX SPECIFICITY & LAYER FIX)
   ========================================= */

/* 1. Target ID Utama: Base Background Biru DIKEMBALIKAN */
#headerNavigationContainer {
    /* background: #1e3a8a !important; 
    background-color: #1e3a8a !important; */
    
    position: -webkit-sticky !important; 
    position: sticky !important;
    top: -160px !important; 
    z-index: 9999 !important;
    
    border: none !important;
    /* border-bottom: 2px solid #000000 !important;  */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    transition: top 0.3s ease;
}

/* 2. Layer Pattern Kaca (Pseudo-element) */
#headerNavigationContainer::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    
    z-index: 0 !important; 
    opacity: 0.05 !important; 
    
    /* Ganti baris ini: */
    background-image: url('/ojs/public/assets/circuit-board.webp') !important;  
    background-position: center !important;
    background-size: 250px !important;
    background-repeat: repeat !important;
    
    pointer-events: none !important; 
}

/* 3. KUNCI MUTLAK: Penghancuran Background & Perbaikan Posisi (User Nav) */

/* A. Angkat wrapper terluar agar semua elemen di dalamnya otomatis berada di atas layer pattern */
html body #headerNavigationContainer .pkp_head_wrapper {
    position: relative !important;
    z-index: 10 !important; 
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* B. Hancurkan background di baris menu TANPA merusak koordinat 'position' bawaan */
html body .pkp_structure_head .pkp_site_name_wrapper,
html body #headerNavigationContainer .pkp_navigation_primary_wrapper,
html body .pkp_site_nav_menu,
html body .pkp_navigation_primary_row { 
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    
    box-shadow: none !important;
    border: none !important;
}

/* --- LOGO & SITE NAME --- */
#headerNavigationContainer .pkp_site_name_wrapper a {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important; 
    text-decoration: none !important;
}

#headerNavigationContainer .pkp_site_name_wrapper img {
    max-height: 115px !important;
    width: auto !important;
    display: block;
    margin: 5px 0 !important;
}

#headerNavigationContainer .pkp_site_name_wrapper a::after {
    /* Menyuntikkan \a untuk memaksa teks turun ke baris baru */
    content: "Indonesian Economics and Finance Insights \a (IEFI)" !important;
    font-size: 1.5rem !important; 
    font-weight: 800 !important;
    
    /* Wajib diaktifkan agar browser merender \a sebagai line-break yang sah */
    white-space: pre-wrap !important; 
    
    /* Menengahkan posisi (IEFI) persis di bawah teks utama */
    text-align: center !important; 
    
    /* Merapatkan jarak antar baris agar judul dan singkatan tidak terlalu renggang */
    line-height: 1.3 !important; 
}

/* --- TOP USER NAV (Register / Login) --- */
#headerNavigationContainer .pkp_navigation_user {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 10px 0 !important; 
}

#headerNavigationContainer .pkp_navigation_user > li > a {
    /* color: #ffffff !important;  */
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
}

#headerNavigationContainer .pkp_navigation_user > li > a:hover,
#headerNavigationContainer .pkp_navigation_user > li > a:focus {
    color: #000000 !important;
    text-decoration: none !important;
    background: transparent !important; 
}

#headerNavigationContainer .pkp_navigation_user .badge {
    background-color: #ef4444 !important; 
    color: #000000 !important;
    font-weight: bold !important;
    margin-left: 5px !important;
}

#headerNavigationContainer .pkp_navigation_user ul {
    /* background: #ffffff !important; */
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 20px -4px rgba(30, 58, 138, 0.1) !important;
    border-radius: 6px;
    padding: 5px 0 !important;
}

#headerNavigationContainer .pkp_navigation_user ul li a {
    color: #334155 !important; 
    text-shadow: none !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
}

#headerNavigationContainer .pkp_navigation_user ul li a:hover {
    color: #1e3a8a !important;
    /* background-color: #f1f5f9 !important;  */
}

/* --- PRIMARY NAVIGATION (Menu Utama) --- */
#headerNavigationContainer .pkp_navigation_primary {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#headerNavigationContainer .pkp_navigation_primary > li > a {
    color: #000000 !important; 
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 10px 16px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    text-shadow: none !important; 
}

#headerNavigationContainer .pkp_navigation_primary > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; 
    color: #000000 !important; 
}

/* --- ICONS INJECTIONS --- */
#headerNavigationContainer .pkp_navigation_primary > li > a::before,
#headerNavigationContainer .pkp_navigation_primary ul li a::before,
#headerNavigationContainer .pkp_navigation_user > li > a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
    font-size: 1.05em;
    /* color: #ffffff !important;  */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#headerNavigationContainer .pkp_navigation_primary > li > a:hover::before,
#headerNavigationContainer .pkp_navigation_primary ul li a:hover::before,
#headerNavigationContainer .pkp_navigation_user > li > a:hover::before,
#headerNavigationContainer .pkp_navigation_primary > li > a:focus::before {
    color: #000000 !important;
}

#headerNavigationContainer .pkp_navigation_primary > li:nth-child(1) > a::before { content: "\f015"; } 
#headerNavigationContainer .pkp_navigation_primary > li:nth-child(2) > a::before { content: "\f518"; } 
#headerNavigationContainer .pkp_navigation_primary > li:nth-child(3) > a::before { content: "\f187"; } 
#headerNavigationContainer .pkp_navigation_primary > li:nth-child(4) > a::before { content: "\f05a"; } 

#headerNavigationContainer .pkp_navigation_primary ul li:nth-child(1) a::before { content: "\f007"; } 
#headerNavigationContainer .pkp_navigation_primary ul li:nth-child(2) a::before { content: "\f0c0"; } 
#headerNavigationContainer .pkp_navigation_primary ul li:nth-child(3) a::before { content: "\f15c"; } 
#headerNavigationContainer .pkp_navigation_primary ul li:nth-child(4) a::before { content: "\f2b5"; } 

#headerNavigationContainer .pkp_navigation_user a[href*="register"]::before { content: "\f234"; } 
#headerNavigationContainer .pkp_navigation_user a[href*="login"]::before { content: "\f2f6"; } 
#headerNavigationContainer .pkp_navigation_user a[href*="dashboard"]::before { content: "\f3fd"; } 
#headerNavigationContainer .pkp_navigation_user a[href*="profile"]::before { content: "\f2bd"; } 
#headerNavigationContainer .pkp_navigation_user a[href*="logout"]::before { content: "\f2f5"; } 
#headerNavigationContainer .pkp_navigation_primary > li > a[href*="announcements"]::before { content: "\f0a1"; } 

/* --- SEARCH BUTTON FIX --- */
#headerNavigationContainer .pkp_search,
#headerNavigationContainer .pkp_search a,
#headerNavigationContainer .pkp_search button,
#headerNavigationContainer .pkp_navigation_primary > li.pkp_navigation_search > a {
    background: transparent !important;
    background-color: transparent !important;
    /* color: #ffffff !important; */
    box-shadow: none !important;
    border: none !important;
}

#headerNavigationContainer .pkp_search a:hover,
#headerNavigationContainer .pkp_search a:focus,
#headerNavigationContainer .pkp_search a.is_active,
#headerNavigationContainer .pkp_navigation_primary > li.pkp_navigation_search > a:hover,
#headerNavigationContainer .pkp_navigation_primary > li.pkp_navigation_search > a:focus,
#headerNavigationContainer .pkp_navigation_primary > li.pkp_navigation_search > a.is_active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #000000 !important;
    outline: none !important;
}
/* =========================================
   3. MAIN CONTENT & LAYOUT STRUCTURE
   ========================================= */
.pkp_structure_main {
    padding-top: 0 !important; 
    padding-bottom: 40px !important;
    padding-left: 40px !important; 
    padding-right: 40px !important;
    gap: 40px;
    position: relative; /* Memastikan pseudo-element tetap dalam kontrol jika sistem memaksa */
}

/* KUNCI MUTLAK: Membunuh garis vertikal bawaan sistem OJS */
.pkp_structure_main::before,
.pkp_structure_main::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    width: 0 !important;
}

/* Mengunci konten utama (kiri) */
.pkp_structure_content {
    border-right: none !important; /* Lapisan keamanan ganda untuk mematikan border */
    
    /* FIX GAP: Memangkas jarak antara garis horizontal header dan konten/slider (Turun dari 40px ke 15px) */
    padding-top: 15px !important; 
}

/* Memastikan sidebar (kanan) tidak memiliki halangan untuk naik ke atas */
.pkp_structure_sidebar {
    padding-top: 0 !important;
    /* border-left: none !important; */
}

.cmp_breadcrumbs {
    margin-bottom: 25px !important;
}

.obj_issue_toc .heading,
.obj_article_summary, 
.obj_article_details {
    background: #ffffff !important; 
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition);
}

.obj_article_summary:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--primary) !important;
    transform: translateY(-2px); 
}

.obj_article_summary .title,
.obj_article_details .title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}
.obj_article_summary .title a {
    color: var(--primary) !important;
    text-decoration: none !important;
    transition: var(--transition);
}
.obj_article_summary .title a:hover {
    color: var(--accent) !important; 
}

.obj_article_summary .authors,
.obj_article_details .authors {
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    margin-bottom: 15px !important;
}
/* =========================================
   4. BUTTONS & GALLEY LINKS
   ========================================= */
.obj_galley_link {
    background: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: var(--radius) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
    box-shadow: var(--shadow-sm);
}
.obj_galley_link:hover,
.obj_galley_link:focus {
    background: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: #ffffff !important;
    outline: none !important;
}
.obj_galley_link.pdf {
    background: #dc2626 !important; 
}
.obj_galley_link.pdf:hover,
.obj_galley_link.pdf:focus {
    background: #b91c1c !important;
}

/* =========================================
   5. SIDEBAR WIDGET CORE
   ========================================= */
.pkp_structure_sidebar {
    background: transparent !important;
    padding-top: 0 !important;
}

/* KUNCI MUTLAK: Membunuh garis vertikal (pseudo-element) bawaan Core Theme OJS */
.pkp_structure_sidebar::before,
.pkp_structure_sidebar:before {
    display: none !important;
    content: none !important;
    border-left: none !important;
    width: 0 !important;
    background: transparent !important;
}

.pkp_block {
    background: var(--bg-card) !important; 
    border: 1px solid var(--border) !important;
    
    /* Garis tegas di atas box untuk kesan premium */
    border-top: 4px solid var(--primary) !important; 
    
    border-radius: var(--radius) !important;
    padding: 24px !important;
    margin-bottom: 25px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition);
}

.pkp_block:hover {
    box-shadow: var(--shadow-md) !important;
}

.pkp_block .title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
    color: var(--primary) !important;
    border-bottom: 1px dashed var(--border) !important; 
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
}
/* =========================================
   6. SINTA CUSTOM WIDGET COMPONENTS
   ========================================= */
.sinta-widget {
    background: #f8fafc !important;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.sinta-widget-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    border-bottom: 2px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sinta-cta-widget {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.sinta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius);
    text-decoration: none !important;
    transition: var(--transition);
    text-align: center;
    box-sizing: border-box;
}
.sinta-btn-primary {
    background: var(--primary);
    color: #ffffff !important;
    box-shadow: var(--shadow-sm);
}
.sinta-btn-primary:hover,
.sinta-btn-primary:focus {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    outline: none !important;
}
.sinta-btn-outline {
    background: transparent;
    color: var(--primary) !important;
    border: 2px solid var(--primary);
}
.sinta-btn-outline:hover,
.sinta-btn-outline:focus {
    background: var(--bg-card); 
    color: var(--primary-hover) !important;
    outline: none !important;
}

.sinta-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Update: Flexbox untuk Icon Alignment & Icon Styling */
.sinta-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sinta-nav-list li {
    border-bottom: 1px dashed var(--border);
}
.sinta-nav-list li:last-child {
    border-bottom: none;
}
.sinta-nav-list a {
    display: flex;             /* Ubah ke flex untuk menyejajarkan icon */
    align-items: center;       /* Center secara vertikal */
    padding: 10px 0;
    color: var(--text-main) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: var(--transition);
}
/* Styling khusus untuk Icon FontAwesome di dalam list */
.sinta-nav-list a i {
    color: #FF8C00 !important; 
    font-size: 16px !important;
    width: 25px !important;
    text-align: center !important;
    margin-right: 12px !important;
    transition: var(--transition);
}

.sinta-nav-list a:hover,
.sinta-nav-list a:focus {
    color: var(--primary) !important;
    padding-left: 5px; 
    outline: none !important;
}
.sinta-nav-list a:hover i {
    color: var(--primary) !important; /* Icon ikut berubah warna saat di-hover */
}

.sinta-info-item {
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
}
.sinta-info-item strong {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
}
.sinta-info-item span, .sinta-info-item a {
    color: var(--text-main);
    font-weight: 500;
}

.sinta-index-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px;
}
.sinta-index-grid img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--border);
    transition: var(--transition);
    filter: grayscale(20%); 
}
.sinta-index-grid img:hover {
    filter: grayscale(0%);
    border-color: var(--primary);
}

/* =========================================
   7. FOOTER OVERRIDE
   ========================================= */

/* Memaksa wrapper utama footer membentang penuh tanpa gap */
.pkp_structure_footer_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.pkp_structure_footer {
    background: #0f172a !important; 
    
    /* EKSEKUSI REDUKSI EKSTREM 40% (Tahap 2): 
       Padding atas ditekan dari 30px ke 15px. Padding bawah dari 15px ke 8px. */
    padding: 15px 40px 8px 40px !important;
    
    border-top: none !important;
    
    /* Font size diturunkan sedikit agar proporsional dengan ruang yang sangat tipis */
    font-size: 0.8rem !important; 
    
    /* Ekspansi absolut ke ujung layar */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Membunuh margin bawah pada elemen terakhir agar tidak ada gap putih di dasar layar */
.pkp_structure_footer p:last-child,
.pkp_structure_footer .cmp_brand:last-child {
    margin-bottom: 0 !important;
}

.pkp_structure_footer,
.pkp_structure_footer p,
.pkp_structure_footer span,
.pkp_structure_footer a {
    color: #e2e8f0 !important; 
    /* Line height dirapatkan agar teks paragraf tidak memakan tinggi container */
    line-height: 1.3 !important; 
}

.pkp_structure_footer a {
    text-decoration: underline;
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus {
    color: var(--accent) !important;
    outline: none !important;
}

.pkp_structure_footer img,
.cmp_brand img {
    filter: brightness(0) invert(1) !important; 
    opacity: 0.7 !important;
    transition: var(--transition) !important;
    
    /* Kunci Mutlak: Memaksa logo footer mengecil agar tidak mendobrak padding yang sudah dirapatkan */
    max-height: 35px !important; 
    width: auto !important;
}

.pkp_structure_footer img:hover,
.cmp_brand img:hover {
    opacity: 1 !important;
}

/* =========================================
   8. SPECIFIC PAGE OVERRIDES (CONTACT ALIGNMENT)
   ========================================= */
.page_contact .contact_section,
.page_contact .contact_details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: flex-start !important;
    margin-top: 20px !important;
}

.page_contact .contact_section > div,
.page_contact .contact_primary, 
.page_contact .contact_support {
    flex: 1 1 300px !important; 
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    background: var(--bg-main) !important;
    padding: 24px !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.page_contact h3 {
    margin-top: 0 !important;
    color: var(--primary) !important;
    border-bottom: 2px solid var(--border) !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
}

/* =========================================
   9. HOMEPAGE PURE CSS SLIDER (INFINITE LOOP & CROP)
   ========================================= */
.ojs-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius); 
    box-shadow: var(--shadow-md);
    background: var(--bg-card);
    margin-bottom: 30px;
}

.ojs-slider-track {
    display: flex;
    /* Karena sekarang ada 4 elemen (3 asli + 1 clone), lebar total harus 400% */
    width: 400%; 
    /* Total waktu animasi 9 detik agar transisi per slide pas */
    animation: infiniteSliderRightToLeft 9s infinite;
}

.slide-item {
    /* Lebar setiap item adalah 100% dibagi 4 = 25% */
    width: 25%; 
    flex-shrink: 0;
}

.slide-item img {
    width: 100%;
    /* Mengurangi tinggi ~30% menggunakan rasio pipih (panoramic). 
       Ubah angka 21 / 7 ini jika masih kurang pendek (misal: 25 / 7) */
    aspect-ratio: 14 / 7; 
    
    /* object-fit: cover adalah instruksi mutlak agar gambar yang terlalu 
       tinggi di-crop secara otomatis di bagian tengah tanpa terdistorsi */
    object-fit: cover; 
    object-position: center;
    display: block;
}

/* 
   Logika Keyframes Infinite Loop:
   Membagi 100% durasi ke dalam 3 transisi gambar.
*/
@keyframes infiniteSliderRightToLeft {
    0%, 20% { 
        transform: translateX(0); /* Hold Slide 1 */
    }
    33.33%, 53.33% { 
        transform: translateX(-25%); /* Geser ke kiri, Hold Slide 2 */
    }
    66.66%, 86.66% { 
        transform: translateX(-50%); /* Geser ke kiri, Hold Slide 3 */
    }
    100% { 
        /* Tiba di Slide 1 Clone, browser akan instan mereset ke 0% 
           tanpa animasi, menciptakan ilusi visual tanpa ujung. */
        transform: translateX(-75%); 
    }
}

/* =========================================
   10. HOMEPAGE DOM REORDERING (FLEXBOX)
   ========================================= */
/* Mengubah container utama homepage menjadi flexbox */
.page_index_journal {
    display: flex;
    flex-direction: column;
}

/* Memaksa Additional Content (Slider) naik ke urutan paling atas (-1) */
.page_index_journal .additional_content {
    order: -1;
    margin-bottom: 30px; /* Memberi jarak antara slider dan teks About */
    width: 100%;
}

/* Memastikan elemen lain tetap pada urutan normal di bawahnya */
.page_index_journal .journal_description {
    order: 1;
}

.page_index_journal .issue_toc {
    order: 2;
}

/* =========================================
   11. HEADER NAVIGATION ICONS (CSS PSEUDO-ELEMENTS)
   ========================================= */

/* Base styling untuk Pseudo-element FontAwesome di Navbar */
.pkp_navigation_primary > li > a::before,
.pkp_navigation_primary ul li a::before,
.pkp_navigation_user > li > a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
    font-size: 1.05em;
    /* Saya set warnanya senada dengan oranye di Sidebar Anda sebelumnya */
    color: #10131f; 
    transition: var(--transition);
}

/* Interaksi hover: Icon berubah mengikuti warna biru primary saat di-hover */
.pkp_navigation_primary > li > a:hover::before,
.pkp_navigation_primary ul li a:hover::before,
.pkp_navigation_user > li > a:hover::before,
.pkp_navigation_primary > li > a:focus::before {
    color: var(--primary);
}

/* --- INJEKSI ICON PRIMARY MENU (Berdasarkan urutan visual dari kiri ke kanan) --- */
/* 1. Home */
.pkp_navigation_primary > li:nth-child(1) > a::before { content: "\f015"; } 

/* 2. Current */
.pkp_navigation_primary > li:nth-child(2) > a::before { content: "\f518"; } /* fa-book-open */

/* 3. Archives */
.pkp_navigation_primary > li:nth-child(3) > a::before { content: "\f187"; } /* fa-archive */

/* 4. About */
.pkp_navigation_primary > li:nth-child(4) > a::before { content: "\f05a"; } /* fa-info-circle */

/* --- INJEKSI ICON SUB-MENU (Dropdown "About") --- */
/* Kita targetkan 4 sub-menu pertama (Anda bisa ubah unicode-nya sesuai fungsi spesifik menu Anda) */
.pkp_navigation_primary ul li:nth-child(1) a::before { content: "\f007"; } /* fa-user (Misal: About Journal) */
.pkp_navigation_primary ul li:nth-child(2) a::before { content: "\f0c0"; } /* fa-users (Misal: Editorial Team) */
.pkp_navigation_primary ul li:nth-child(3) a::before { content: "\f15c"; } /* fa-file-alt (Misal: Submissions) */
.pkp_navigation_primary ul li:nth-child(4) a::before { content: "\f2b5"; } /* fa-handshake (Misal: Privacy Statement) */

/* --- INJEKSI ICON USER NAV (Register & Login) --- */
/* Kita gunakan [href*=""] agar targeting tetap presisi karena saat User berhasil login, struktur menu ini akan berubah menjadi "Dashboard", "View Profile", dll */
.pkp_navigation_user a[href*="register"]::before { content: "\f234"; } /* fa-user-plus */
.pkp_navigation_user a[href*="login"]::before { content: "\f2f6"; } /* fa-sign-in-alt */

/* Target tambahan untuk menu setelah user Login (opsional tapi best practice) */
.pkp_navigation_user a[href*="dashboard"]::before { content: "\f3fd"; } /* fa-tachometer-alt */
.pkp_navigation_user a[href*="profile"]::before { content: "\f2bd"; } /* fa-user-circle */
.pkp_navigation_user a[href*="logout"]::before { content: "\f2f5"; } /* fa-sign-out-alt */

/* Menggunakan selector href agar kebal terhadap pergeseran drag-and-drop di backend */
.pkp_navigation_primary > li > a[href*="announcements"]::before { 
    content: "\f0a1"; /* Unicode untuk icon fa-bullhorn (Toa/Megaphone) */ 
}

/* =========================================
   12. CURRENT ISSUE CARD OVERRIDE (OPSI B)
   ========================================= */

/* Menambahkan label "LATEST ISSUE" di atas blok agar terlihat seperti widget khusus */
.page_index_journal .issue_toc::before {
    content: "LATEST ISSUE" !important;
    display: block !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    border-bottom: 2px solid var(--primary) !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    width: 100% !important;
}

/* Memisahkan header issue (kover & deskripsi) dari daftar artikel */
.obj_issue_toc > .heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 30px !important;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    
    /* Aksen garis tebal di sebelah kiri khas UI akademik modern */
    border-left: 5px solid var(--primary) !important; 
    border-radius: var(--radius) !important;
    padding: 30px !important;
    margin-bottom: 35px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition) !important;
}

.obj_issue_toc > .heading:hover {
    box-shadow: var(--shadow-md) !important;
}

/* Mengunci dimensi kover agar tidak mendominasi layar (proporsional) */
.obj_issue_toc > .heading .cover {
    flex: 0 0 200px !important; 
    margin: 0 !important;
}

.obj_issue_toc > .heading .cover img {
    width: 100% !important;
    height: auto !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: 1px solid #e2e8f0 !important;
}

/* Menata area teks deskripsi di sebelah kover */
.obj_issue_toc > .heading .description {
    flex: 1 !important;
}

.obj_issue_toc > .heading .title {
    color: var(--primary) !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.obj_issue_toc > .heading .published {
    font-size: 0.9rem !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* Penyesuaian Responsif (Mobile View) */
@media (max-width: 768px) {
    .obj_issue_toc > .heading {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px !important;
    }
    
    .obj_issue_toc > .heading .cover {
        flex: 0 0 160px !important;
        margin-bottom: 20px !important;
    }
}

/* =========================================
   13. SIDEBAR WIDGET COMPRESSION
   ========================================= */
/* Memangkas ruang kosong di dalam block utama sidebar */
.pkp_structure_sidebar .pkp_block {
    padding: 15px !important; /* Reduksi dari 24px */
}

/* Memangkas padding pada inner widget (For Authors, dll) */
.pkp_structure_sidebar .sinta-widget {
    padding: 15px !important; /* Reduksi dari 24px */
    margin-bottom: 15px !important; 
}

/* Merapatkan jarak antara judul widget dan tombol */
.pkp_structure_sidebar .sinta-widget-title {
    margin-bottom: 10px !important; 
    padding-bottom: 6px !important;
}

/* Merapatkan jarak antar tombol (Submit & Template) */
.pkp_structure_sidebar .sinta-cta-widget {
    gap: 8px !important; /* Reduksi dari 12px */
}

/* Menipiskan tinggi tombol agar lebih proporsional */
.pkp_structure_sidebar .sinta-btn {
    padding: 8px 12px !important; 
    font-size: 0.9rem !important;
}

/* =========================================
   15. INTERACTIVE STATES (HOVER, FOCUS, ACTIVE) FIX
   ========================================= */

/* 1. Menambahkan transisi halus untuk teks dan ikon */
#headerNavigationContainer .pkp_navigation_primary a, 
#headerNavigationContainer .pkp_navigation_user a,
#headerNavigationContainer .pkp_navigation_primary a::before,
#headerNavigationContainer .pkp_navigation_user a::before {
    transition: color 0.3s ease-in-out !important;
}

/* 2. Membunuh background hitam bawaan OJS pada SEMUA state (Click, Focus, Active Page) */
#headerNavigationContainer .pkp_navigation_primary > li > a:hover,
#headerNavigationContainer .pkp_navigation_primary > li > a:focus,
#headerNavigationContainer .pkp_navigation_primary > li > a:active,
#headerNavigationContainer .pkp_navigation_primary > li > a.is_active,
#headerNavigationContainer .pkp_navigation_primary > li > a[aria-current="page"],
#headerNavigationContainer .pkp_navigation_primary ul li a:hover,
#headerNavigationContainer .pkp_navigation_primary ul li a:focus,
#headerNavigationContainer .pkp_navigation_user > li > a:hover,
#headerNavigationContainer .pkp_navigation_user > li > a:focus,
#headerNavigationContainer .pkp_navigation_primary .headerSearch:hover,
#headerNavigationContainer .pkp_navigation_primary .headerSearch:focus {
    color: var(--primary) !important; 
    text-decoration: none !important;
    background-color: transparent !important; 
    background: transparent !important;
    outline: none !important; /* Menghilangkan border biru bawaan browser saat di-klik */
    box-shadow: none !important;
}

/* 3. Mengubah warna IKON FontAwesome menjadi Biru (Primary) agar sinkron dengan teksnya */
#headerNavigationContainer .pkp_navigation_primary > li > a:hover::before,
#headerNavigationContainer .pkp_navigation_primary > li > a:focus::before,
#headerNavigationContainer .pkp_navigation_primary > li > a:active::before,
#headerNavigationContainer .pkp_navigation_primary > li > a.is_active::before,
#headerNavigationContainer .pkp_navigation_primary > li > a[aria-current="page"]::before,
#headerNavigationContainer .pkp_navigation_primary ul li a:hover::before,
#headerNavigationContainer .pkp_navigation_primary ul li a:focus::before,
#headerNavigationContainer .pkp_navigation_user > li > a:hover::before,
#headerNavigationContainer .pkp_navigation_user > li > a:focus::before {
    color: var(--primary) !important;
}

/* =========================================
   16. MOBILE RESPONSIVENESS PATCH (FINAL MENU & STICKY FIX)
   ========================================= */
@media screen and (max-width: 992px) {

    /* 1. MENGHILANGKAN STICKY HEADER DI MOBILE */
    /* Mengembalikan header ke flow normal agar ikut ter-scroll ke atas */
    #headerNavigationContainer {
        position: relative !important; 
        top: 0 !important;
        height: auto !important;
        min-height: unset !important;
    }

    .pkp_structure_head {
        height: auto !important;
        min-height: unset !important;
    }

    /* 2. RESTRUKTURISASI HEADER WRAPPER */
    .pkp_head_wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        min-height: unset !important;
        padding: 15px !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .pkp_site_name_wrapper,
    .pkp_site_name {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        text-align: center !important;
    }

    #headerNavigationContainer .pkp_site_name_wrapper a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        text-decoration: none !important;
    }

    .pkp_site_name_wrapper .is_img img {
        max-width: 110px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 5px auto !important;
        position: relative !important;
    }

    #headerNavigationContainer .pkp_site_name_wrapper a::after {
        content: "Indonesian Economics and Finance Insights \a (IEFI)" !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        white-space: pre-wrap !important;
        color: var(--primary) !important;
        margin-top: 0 !important;
    }

    .pkp_site_nav_toggle {
        position: absolute !important;
        top: 15px !important;
        left: 10px !important;
        z-index: 10000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 4px !important;
        padding: 6px !important;
        border: 1px solid var(--border) !important;
        display: block !important;
    }

    /* 3. ISOLASI & PERAPIAN DROPDOWN MENU MOBILE */
    #headerNavigationContainer .pkp_site_nav_menu {
        background-color: #ffffff !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
        border-top: 2px solid var(--primary) !important;
        padding-bottom: 20px !important;
    }

    #headerNavigationContainer .pkp_navigation_primary_wrapper,
    #headerNavigationContainer .pkp_navigation_user_wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        background: transparent !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #headerNavigationContainer .pkp_navigation_primary,
    #headerNavigationContainer .pkp_navigation_user,
    #headerNavigationContainer .pkp_navigation_primary ul {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        list-style: none !important;
    }

    /* Styling Visual Khusus Sub-menu (About) agar mudah dibedakan */
    #headerNavigationContainer .pkp_navigation_primary ul {
        background: #f8fafc !important; 
        border-top: 1px solid var(--border) !important;
        border-bottom: 1px solid var(--border) !important;
    }

    /* Flexbox untuk memastikan Teks dan Icon selalu sejajar presisi */
    #headerNavigationContainer .pkp_navigation_primary a,
    #headerNavigationContainer .pkp_navigation_user a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 12px 20px !important;
        border-bottom: 1px dashed var(--border) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
        color: var(--text-main) !important;
        font-weight: 600 !important;
    }

    /* Indentasi khusus Submenu */
    #headerNavigationContainer .pkp_navigation_primary ul a {
        padding: 10px 20px 10px 35px !important; /* Jorok ke dalam (indent) */
        font-size: 0.9rem !important;
        border-bottom: none !important;
        font-weight: 500 !important;
    }

    #headerNavigationContainer .pkp_navigation_primary > li:last-child > a,
    #headerNavigationContainer .pkp_navigation_user > li:last-child > a {
        border-bottom: none !important;
    }

    /* KUNCI ALIGNMENT: Mengunci lebar icon (pseudo-element) agar rata kiri sempurna */
    #headerNavigationContainer .pkp_navigation_primary a::before,
    #headerNavigationContainer .pkp_navigation_user a::before {
        width: 25px !important;
        text-align: center !important;
        margin-right: 12px !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }

    /* Injeksi Icon yang hilang */
    #headerNavigationContainer .pkp_navigation_primary ul a[href*="privacy"]::before { content: "\f2b5" !important; }
    #headerNavigationContainer .pkp_navigation_primary ul a[href*="contact"]::before { content: "\f095" !important; } /* Icon Telepon */

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

    .pkp_structure_sidebar {
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
}

@media screen and (max-width: 480px) {
    #headerNavigationContainer .pkp_site_name_wrapper a::after {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
    .pkp_site_name_wrapper .is_img img {
        max-width: 90px !important;
    }
    .pkp_head_wrapper {
        padding: 10px 10px 15px 10px !important;
    }
    .pkp_site_nav_toggle {
        top: 10px !important;
        padding: 4px 6px !important;
    }
}