/* ══════════════════════════════════════════════
   BAGIAN 1 — HOMEPAGE LAYOUT (OJS ADAPTATION)
   ══════════════════════════════════════════════ */

/* 1. Hilangkan batasan lebar bawaan OJS khusus di halaman utama agar bisa full-width */
.pkp_page_index .pkp_structure_page {
    max-width: 100% !important;
    padding: 0 !important;
}

/* 2. Sembunyikan sidebar di homepage (karena di mockup tidak ada sidebar) 
   atau atur lebarnya jika lu tetep maksa mau pakai sidebar */
.pkp_page_index .pkp_structure_sidebar {
    display: none !important; /* Matikan ini kalau lu tetep mau ada sidebar */
    /* Code lu sebelumnya: */
    /* padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box; border-right: 1px solid #e5e7eb; */
}

/* 3. Main content dibikin full 100% */
.pkp_page_index .pkp_structure_main {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    /* Code lu: border-left: 1px solid #e5e7eb; (Gua disable karena mockup borderless, nyalain kalo perlu) */
    border: none !important; 
}

/* 4. SETUP FLEXBOX UNTUK HOMEPAGE */
.page_index_journal {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

/* 5. MENGATUR URUTAN (ORDER) SESUAI MOCKUP 
   Urutan Mockup: 1. Hero -> 2. Current Issue -> 3. Info/About 
*/

/* Urutan 1: Additional Content (Gunakan ini untuk masukin HTML Hero Banner & Features Bar lu) */
.pkp_page_index .additional_content {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Code lu: */
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border: none !important; /* Timpa jadi none biar nyambung ke pinggir layar */
}

/* Urutan 2: Current Issue (Bawaan OJS) */
.page_index_journal .current_issue { 
    order: 2 !important; 
    width: 100%;
    max-width: 1200px; /* Bikin kaya container di mockup */
    margin: 40px auto !important; /* Ketengahin */
    padding: 0 20px;
    box-sizing: border-box;
    clear: both;
}

/* Urutan 3: Homepage About / Jurnal Info */
.page_index_journal .homepage_about { 
    order: 3 !important; 
    width: 100%;
    max-width: 1200px; /* Bikin kaya container di mockup */
    margin: 0 auto 40px auto !important;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Urutan Cadangan: Kalau lu pakai fitur upload gambar di settingan OJS */
.page_index_journal .homepage_image { 
    order: 4 !important; 
    margin-bottom: 0 !important;
}

/* 6. STYLE CUSTOM CLASS DARI LU */
.lb-hero-v4 {
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 480px !important;
    /* Tambahan agar isi di dalam hero ketengah otomatis */
    display: flex;
    align-items: center;
    justify-content: center;
}

#homepageAbout {
    display: flow-root;
    text-align: justify;
}

#homepageAbout::after {
    content: "";
    display: table;
    clear: both;
}

#homepageAbout h2 {
    margin-top: 0;
    text-align: left;
    /* Font style nge-refer ke mockup */
    color: #0A1931; 
    font-size: 24px;
    font-weight: 700;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
}

#homepageIssue {
    clear: both;
}

/* ══════════════════════════════════════════════
   BAGIAN 2 — GLOBAL FULL-WIDTH (SEMUA HALAMAN)
   ══════════════════════════════════════════════ */

/* 1. Hilangkan batasan lebar di SEMUA halaman (bukan cuma homepage) */
.pkp_structure_page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Bikin area konten utama melebar penuh dan hilangkan border bawaan */
.pkp_structure_main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    /* Kasih padding sedikit biar teks di halaman artikel/about nggak nabrak banget ke bezel monitor */
    padding: 0 20px !important; 
    border: none !important; 
    box-sizing: border-box;
}

/* 3. Sembunyikan sidebar secara global (Kalau lu bener-bener mau bersih full-width) */
.pkp_structure_sidebar {
    display: none !important;
}

/* 4. Pastikan wrapper konten bawaan OJS juga nyesuaiin 100% */
.pkp_structure_content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════════
   BAGIAN 3 — HEADER & NAVIGATION
   ══════════════════════════════════════════════ */
.pkp_structure_head {
    background-color: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-bottom: none !important;
}

/* Navigasi Primary (Menu Atas) */
#navigationPrimary a {
    color: #0A1931 !important;
    font-weight: 500;
    font-family: 'Inter', sans-serif; /* Pastikan font inter udah di load */
    text-transform: none; /* Biar gak uppercase otomatis kalau theme bawannya uppercase */
}

#navigationPrimary a:hover, 
#navigationPrimary a:focus {
    color: #E85D04 !important;
}

/* Kustomisasi Logo (Opsional biar rapi) */
.pkp_site_name .is_img img {
    max-height: 60px; /* Sesuaikan ukuran logo */
}

/* ══════════════════════════════════════════════
   BAGIAN 4 — CURRENT ISSUE CARD STYLE
   ══════════════════════════════════════════════ */
.current_issue {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 30px !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.03);
    border: 1px solid #e5e7eb;
}

/* Modifikasi Judul Section */
.current_issue > h2 {
    color: #0A1931;
    font-size: 24px;
    font-weight: 700;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Tampilan List Artikel */
.cmp_article_list .obj_article_summary {
    border-bottom: 1px solid #e5e7eb;
    padding: 15px 0;
}

.cmp_article_list .obj_article_summary:last-child {
    border-bottom: none;
}

.obj_article_summary .title a {
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.obj_article_summary .title a:hover {
    color: #E85D04;
}

/* Tombol PDF Galley */
.obj_galley_link {
    background: transparent !important;
    color: #E85D04 !important;
    border: 1px solid #E85D04 !important;
    border-radius: 3px !important;
    font-weight: 600;
}

.obj_galley_link:hover {
    background: #E85D04 !important;
    color: #FFF !important;
}