/* ============================================================
   CUSTOM STYLESHEET — OJS / PKP THEME (JOCESI)
   Font: Lexend
   Revisi:
   - Search sejajar dengan menu lain
   - "Articles" full-width di BAWAH deskripsi (bukan di sampingnya)
   - Cover image dibesarkan lagi (jangan terlalu kecil)
   - Gap atas & gap kiri-kanan halaman dirapatkan (tidak mentok penuh)
   ============================================================ */

/* --- 1. IMPORT FONT --------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap');

/* --- 2. DESIGN TOKENS --------------------------------------- */
:root {
    --font-main: 'Lexend', 'Segoe UI', Arial, sans-serif;

    --color-primary: #003B68;
    --color-primary-dark: #002949;
    --color-text: #22262b;
    --color-text-muted: #6b7280;
    --color-bg: #ffffff;
    --color-bg-soft: #f7f7f8;
    --color-border: #e6e6e9;

    --radius-sm: 6px;
    --radius-md: 12px;

    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;

    /* Halaman dibuat hampir penuh, hanya sisakan sedikit napas
       di kiri-kanan (bukan mentok 0px, tapi juga bukan 1140px
       yang membuat gutter abu-abu besar seperti sebelumnya) */
    --page-gutter: 0px;

    --shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.06);
}

/* --- 3. RESET & TIPOGRAFI DASAR ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-main) !important;
    color: var(--color-text);
    line-height: 1.65;
    background-color: var(--color-bg-soft);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main) !important;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin: 0 0 var(--space-sm) 0;
}

h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.3px; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 var(--space-md) 0; font-weight: 300; }

a { color: var(--color-primary); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus { color: var(--color-primary-dark); text-decoration: underline; }

/* --- 4. HEADER / LOGO ------------------------------------------- */
.pkp_structure_head {
    background-color: var(--color-primary);
}

.pkp_site_name_wrapper {
    width: 100%;
    margin: 0;
    padding: var(--space-sm) var(--page-gutter) !important;
    display: flex;
    align-items: center;
}

.pkp_site_name_wrapper img,
.pkp_site_name .is_img img {
    max-height: none !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: initial !important;
}

.pkp_site_name,
.pkp_site_name a {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* --- 5. NAVIGASI (struktur asli: pkp_navigation_primary_row > 
   pkp_navigation_primary_wrapper + pkp_navigation_search_wrapper) --- */

.pkp_site_nav_menu {
    width: 100% !important;
}

.pkp_navigation_primary_row {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 var(--page-gutter) !important; /* sejajar dengan card di bawahnya */
    display: flex !important;
    flex-wrap: nowrap !important;           /* jangan sampai search jatuh ke baris baru */
    align-items: center !important;
    justify-content: space-between !important; /* menu di kiri, search di kanan */
}

.pkp_navigation_primary_wrapper {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
}

.pkp_navigation_search_wrapper {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin-left: var(--space-lg) !important; /* jarak aman ke menu kiri */
}

.pkp_navigation_primary.pkp_nav_list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary.pkp_nav_list > li {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    float: none !important;
    position: relative;
}

.pkp_navigation_primary.pkp_nav_list > li > a {
    display: inline-flex !important;
    align-items: center;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--color-text);
    padding: var(--space-sm) !important;
    white-space: nowrap;
}

.pkp_navigation_primary.pkp_nav_list > li > a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.pkp_search.pkp_search_desktop {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--color-primary) !important;
    padding: var(--space-sm) 0 !important;
    white-space: nowrap;
}

/* --- 5b. DROPDOWN submenu (mis. ABOUT): sembunyikan default, 
   muncul ke bawah hanya saat li-nya di-hover --- */
.pkp_search.pkp_search_desktop {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-family: var(--font-main) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    padding: var(--space-sm) 0 !important;
    white-space: nowrap;
}

/* --- Dropdown submenu: perbaikan supaya tidak hilang saat cursor turun --- */
.pkp_navigation_primary.pkp_nav_list > li ul {
    display: block !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;      /* nempel pas di bawah link, TANPA celah */
    left: 0 !important;
    background-color: var(--color-primary) !important;
    min-width: 220px !important;
    z-index: 999 !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    list-style: none;

    /* sembunyikan pakai opacity, BUKAN display:none,
       supaya area hover-nya tetap "hidup" saat transisi */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility 0s linear .2s;
}

/* Submenu tetap terbuka selama cursor ada di ABOUT ATAU di dalam submenunya
   sendiri (submenu adalah anak dari <li>, jadi ini otomatis kebaca) */
.pkp_navigation_primary.pkp_nav_list > li:hover > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .15s ease;
}

.pkp_navigation_primary.pkp_nav_list > li ul li { width: 100% !important; }

.pkp_navigation_primary.pkp_nav_list > li ul a {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    color: #fff !important;
    padding: 10px 18px !important;
    text-transform: none !important;
    font-size: 0.85rem !important;
}

.pkp_navigation_primary.pkp_nav_list > li ul a:hover {
    background-color: var(--color-primary-dark) !important;
}
/* --- 6. WRAPPER KONTEN UTAMA: GAP KIRI-KANAN DIRAPATKAN ----------
   Bukan lagi container sempit 1140px yang ditengahkan (itu yang
   bikin area abu-abu besar di kiri-kanan). Sekarang lebar penuh
   dengan sedikit padding saja di tepi kiri-kanan halaman. */
.pkp_structure_content {
    width: 100%;
    margin: 0 !important;
    padding: 0 var(--page-gutter);
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}

.pkp_structure_main {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: var(--space-lg) !important;
}

.pkp_structure_main {
    padding-top: calc(var(--space-lg) + 10px) !important; /* tambahan khusus atas */
}

.pkp_structure_main .cmp_breadcrumbs,
.pkp_structure_main *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.pkp_structure_sidebar {
    flex: 0 0 230px;
}

.pkp_structure_sidebar:empty { display: none; }

/* --- 7. BREADCRUMB ------------------------------------------------ */
.cmp_breadcrumbs,
.breadcrumb {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.cmp_breadcrumbs a,
.breadcrumb a {
    color: var(--color-primary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* --- 8. HALAMAN ISSUE: COVER + DESKRIPSI --------------------------
   PENTING: pakai FLOAT (bukan flex pada wrapper besar), supaya
   konten sesudahnya (daftar "Articles") tetap jadi blok penuh di
   BAWAH, bukan ikut sejajar/menyempit ke samping seperti kemarin. */
.page_issue .cover_image,
.page_issue .cover,
.issue_cover {
    float: left;
    margin: 0 var(--space-lg) var(--space-md) 0;
    width: 260px;      /* dibesarkan lagi, sebelumnya kekecilan di 200px */
    max-width: 40%;
}

.page_issue .cover_image img,
.issue_cover img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
}

/* overflow:hidden membuat teks deskripsi otomatis mengalir rapi
   di sebelah gambar tanpa "meloncat" ke bawah gambar */
.page_issue .description,
.issue_identification + .description {
    overflow: hidden;
}

.page_issue .item.doi,
.page_issue .item.published {
    font-size: 0.85rem;
    margin-top: var(--space-sm);
    clear: none;
}

.page_issue .label,
.item .label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-right: 4px;
}

/* Clearfix: pastikan blok setelah cover+deskripsi (mis. daftar
   Articles) SELALU dimulai di bawah, full width, tidak nyempil
   ke samping gambar/teks. */
.page_issue::after {
    content: "";
    display: table;
    clear: both;
}

/* --- 9. JUDUL SEKSI "ARTICLES" -------------------------------------
   Dipaksa full width & clear supaya benar-benar berada di BAWAH
   blok deskripsi+cover, bukan menempel di sampingnya. */
.section .title,
h2.tocSectionTitle,
.tocSectionTitle,
.page_issue .sections,
.page_issue .obj_article_summary,
.page_issue .tocArticle {
    clear: both;
    width: 100%;
}

.section .title,
h2.tocSectionTitle,
.tocSectionTitle {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.5px;
    padding-bottom: var(--space-xs);
    margin: var(--space-lg) 0 var(--space-md) 0;
    border-bottom: 2px solid var(--color-primary);
    display: block; /* full width, bukan inline-block lagi */
}

/* --- 10. DAFTAR ARTIKEL ------------------------------------------- */
.obj_article_summary,
.tocArticle {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

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

.obj_article_summary .title,
.tocTitle {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
    clear: none;
    width: auto;
    display: block;
}

.obj_article_summary .authors,
.tocAuthors {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 400;
}

/* --- 11. SIDEBAR KANAN --------------------------------------------- */
.pkp_block { margin-bottom: 0px !important; }

.pkp_block .title,
.pkp_block h2,
.pkp_block h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0px;
    padding-bottom: 0px;
    margin-bottom: var(--space-sm) !important;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.pkp_block ul { list-style: none; margin: 0 !important; padding: 0 !important; }

.pkp_block ul li { margin: 0 !important; padding: 0px 0 !important; line-height: 1.4; }

.pkp_block ul li a { font-size: 0.88rem; color: var(--color-primary); }
.pkp_block ul li a:hover { color: var(--color-primary-dark); }

/* --- 12. TOMBOL / BUTTON ------------------------------------------- */
.pkp_button,
button,
input[type="submit"] {
    font-family: var(--font-main) !important;
    font-weight: 500;
    font-size: 0.9rem;
    color: #fff;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    cursor: pointer;
    transition: background-color .2s ease, transform .1s ease;
}

.pkp_button:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* --- 13. FOOTER ------------------------------------------------------ */
.pkp_structure_footer {
    background-color: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
    padding: var(--space-lg) var(--page-gutter);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

/* ============================================================
   14. MOBILE FRIENDLY
   ============================================================ */
@media (max-width: 900px) {
    .pkp_structure_content {
        flex-direction: column;
    }

    .pkp_structure_sidebar {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 640px) {
    :root { --page-gutter: 14px; }

    .pkp_navigation_primary a {
        font-size: 0.78rem;
        padding: var(--space-xs) 6px !important;
    }

    .pkp_structure_main {
        padding: var(--space-md);
        border-radius: 0;
    }

    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.15rem; }

    .page_issue .cover_image,
    .page_issue .cover,
    .issue_cover {
        float: none;
        width: 160px;
        max-width: 60%;
        margin: 0 auto var(--space-md) auto;
        display: block;
    }

    .obj_article_summary .title,
    .tocTitle { font-size: 0.95rem; }
}


/* ============================================================
   15. TRUE FULL-WIDTH OJS PAGE
   IMPORTANT:
   The gray space at the far left/right is caused by the outer
   OJS/PKP page wrapper. Do NOT paint that space; make the wrapper
   itself span the entire viewport.
   ============================================================ */

html,
body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_page,
.pkp_structure_page {
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header, navigation and footer must follow the full-width wrapper. */
.pkp_structure_head,
.pkp_structure_nav,
.pkp_structure_content,
.pkp_structure_footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* No artificial top/bottom gap around the page. */
.pkp_structure_head,
.pkp_structure_nav,
.pkp_structure_content,
.pkp_structure_footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Keep the inside of the header/nav readable; this is internal
   spacing, NOT an outer page gutter. */
.pkp_site_name_wrapper {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

.pkp_navigation_primary_row {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

/* Main content: no outer page gutter, only the existing internal
   content spacing is retained. */
.pkp_structure_content {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

/* Footer reaches the viewport edges as well. */
.pkp_structure_footer {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

/* Prevent a horizontal scrollbar caused by 100vw. */
html,
body {
    overflow-x: hidden !important;
}

/* Mobile */
@media (max-width: 640px) {
    .pkp_site_name_wrapper,
    .pkp_navigation_primary_row,
    .pkp_structure_content,
    .pkp_structure_footer {
        padding-left: var(--space-sm) !important;
        padding-right: var(--space-sm) !important;
    }
}



/* ============================================================
   16. HEADER EDGE + SINGLE-LINE NAVIGATION
   - Header maroon reaches the viewport edges with one uniform color.
   - Navigation items (Home, Current, Archives, Announcements, About)
     stay on one horizontal line.
   - Search is aligned on the same row at the right.
   ============================================================ */

/* Make the header itself full-bleed and prevent the outer page
   background from showing as side strips. */
.pkp_structure_head {
    width: 100vw !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: var(--color-primary) !important;
}

/* Remove any visual side strip created by a constrained inner wrapper. */
.pkp_structure_head::before,
.pkp_structure_head::after {
    display: none !important;
}

/* Keep the logo/header contents centered inside the full-width header. */
.pkp_site_name_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

/* Navigation: one row only. */
.pkp_navigation_primary_row {
    width: 100% !important;
    max-width: none !important;
    min-height: 58px;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 var(--space-md) !important;
    overflow: visible !important;
}

/* Primary menu occupies the available horizontal space. */
.pkp_navigation_primary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* Search becomes a fixed flex item on the same line. */
.pkp_navigation_search {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 18px !important;
    white-space: nowrap !important;
}

.pkp_navigation_search a,
.pkp_search_link,
a.pkp_search_link {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* Ensure all nav links have consistent vertical alignment. */
.pkp_navigation_primary a,
.pkp_navigation_search a,
.pkp_search_link,
a.pkp_search_link {
    display: inline-flex !important;
    align-items: center !important;
    height: 58px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}

/* About's dropdown arrow should remain vertically centered. */
.pkp_navigation_primary li > a,
.pkp_navigation_primary li > button {
    align-items: center !important;
}

/* Mobile: allow the navigation to wrap/scroll rather than forcing
   desktop spacing into a narrow screen. */
@media (max-width: 640px) {
    .pkp_navigation_primary_row {
        min-height: 48px;
        overflow-x: auto !important;
        justify-content: flex-start !important;
    }

    .pkp_navigation_primary {
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
    }

    .pkp_navigation_primary ul {
        justify-content: flex-start !important;
    }

    .pkp_navigation_search {
        margin-left: 8px !important;
    }

    .pkp_navigation_primary a,
    .pkp_navigation_search a,
    .pkp_search_link,
    a.pkp_search_link {
        height: 48px;
    }
}


/* ============================================================
   FINAL OVERRIDE — FULL BLEED + CONTENT GAP
   ============================================================ */

/* ---------- HILANGKAN GAP HEADER KIRI & KANAN ---------- */

html,
body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

.pkp_page,
.pkp_structure_page,
.pkp_structure {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header benar-benar full ke viewport */
.pkp_structure_head {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: 0 !important;
    margin-right: 0 !important

    padding-left: 0 !important;
    padding-right: 0 !important;

    background-color: var(--color-primary) !important;
    border: 0 !important;
}

/* Isi header tetap mempunyai sedikit ruang internal */
.pkp_site_name_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding-left: 20px !important;
    padding-right: 20px !important;
}


/* ---------- NAVIGASI ---------- */

.pkp_structure_nav {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}


/* ---------- AREA KONTEN ---------- */

.pkp_structure_content {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    /* GAP ATAS */
    padding-top: 14px !important;

    /* GAP KIRI-KANAN */
    padding-left: 0px !important;
    padding-right: 0px !important;

    display: flex !important;
    gap: 36px !important;
    align-items: flex-start !important;
}


/* ---------- MAIN CONTENT ---------- */

.pkp_structure_main {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
}


/* ---------- SIDEBAR ---------- */

.pkp_structure_sidebar {
    flex: 0 0 260px !important;
    margin: 0 !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {
    .pkp_structure_content {
        flex-direction: column !important;
        gap: 20px !important;
        padding-top: 10px !important;
    }

    .pkp_structure_sidebar {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .pkp_site_name_wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .pkp_structure_content {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 10px !important;
    }
}

/* Wrapper asli header JOCESI — hilangkan batas lebarnya */
.pkp_head_wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wrapper menu navigasi (site nav) — samakan juga */
.pkp_site_nav_menu {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Reset jarak atas khusus untuk section "Current Issue" di halaman Home */
.pkp_structure_main .current_issue,
.pkp_structure_main .obj_issue_summary {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.pkp_structure_main .current_issue .title,
.pkp_structure_main .current_issue h2,
.pkp_structure_main .obj_issue_summary .title,
.pkp_structure_main .obj_issue_summary h2 {
    margin-top: 0 !important;
}

/* Jaring pengaman: reset margin-top elemen pertama sampai 2 level ke dalam */
.pkp_structure_main > *:first-child > *:first-child {
    margin-top: 0 !important;
}

/* Rapatkan jarak antar artikel */
.obj_article_summary,
.tocArticle {
    padding: 0px 0 !important; /* dari 20px jadi 10px */
}

/* Tombol PDF sering punya margin bawaan sendiri yang bikin
   jaraknya makin lebar — kita rapatkan juga */
.obj_article_summary .obj_galley_link,
.obj_article_summary .galleys_links,
.tocArticle .galleys_links {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

/* Tombol PDF sering punya margin bawaan sendiri yang bikin
   jaraknya makin lebar — kita rapatkan juga */
.obj_article_summary .obj_galley_link,
.obj_article_summary .galleys_links,
.tocArticle .galleys_links {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   17. BIRU PENUH SAMPAI BAWAH LOGO (HEADER)
   Masalah: .pkp_site_name_wrapper (wadah yang membungkus logo
   besar JODIGBI) punya background sendiri dari tema bawaan OJS,
   jadi menutupi warna biru dari .pkp_structure_head. Akibatnya
   di mobile terlihat ada area putih/abu-abu di bawah logo.
   Solusi: paksa semua wadah header pakai warna biru yang sama,
   dan pastikan tidak ada tinggi yang membatasi/memotong logo.
   ============================================================ */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name.is_img,
.pkp_site_name a {
    background-color: var(--color-primary) !important;
}

.pkp_structure_head {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.pkp_site_name_wrapper {
    height: auto !important;
    overflow: visible !important;
}

@media (max-width: 640px) {
    .pkp_structure_head,
    .pkp_head_wrapper,
    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name.is_img {
        background-color: var(--color-primary) !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* ============================================================
   18. FIX KHUSUS MOBILE SAJA — TIDAK MENGUBAH TAMPILAN DESKTOP
   - Logo tidak kepotong di atas
   - Logo diposisikan center
   - Kotak hamburger full tinggi header (tanpa mengubah buka/tutup menu)
   ============================================================ */
@media (max-width: 640px) {

    /* --- Logo: kasih ruang supaya tidak kepotong di atas --- */
    .pkp_structure_head,
    .pkp_head_wrapper,
    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name a {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .pkp_site_name_wrapper img,
    .pkp_site_name img {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    /* --- Logo: posisikan benar-benar di tengah header --- */
    .pkp_head_wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .pkp_site_name_wrapper {
        margin: 0 auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* --- Hamburger: HANYA gaya tombolnya saja.
       Sengaja TIDAK menyentuh display/visibility dari
       .pkp_site_nav_menu supaya buka-tutup menu tetap normal. --- */
    .pkp_site_nav_menu > button,
    .pkp_site_nav_menu button {
        background-color: var(--color-primary) !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}