@charset "UTF-8";

/* ============================================================
   SOSEBI - CUSTOM CSS FOR OJS 3.3
   Jurnal Penelitian Mahasiswa Ilmu Sosial, Ekonomi,
   dan Bisnis Islam (SOSEBI)

   Desain:
   - Identitas visual berbeda dari Ar Rehla
   - Nuansa emerald, teal, gold, ivory
   - Cocok untuk jurnal sosial, ekonomi, dan bisnis Islam
   - Siap diunggah sebagai Journal style sheet OJS
   ============================================================ */


/* ============================================================
   1. FONT
   ============================================================ */

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800|Lora:400,400i,700|Noto+Serif:400,400i,700,700i&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css");


/* ============================================================
   2. VARIABEL WARNA SOSEBI
   ============================================================ */

:root {
    --sb-ink: #052f3b;
    --sb-navy: #06384a;
    --sb-teal-dark: #07545c;
    --sb-teal: #08777c;
    --sb-emerald: #0a6854;
    --sb-emerald-soft: #12846b;
    --sb-gold: #c7952b;
    --sb-gold-light: #f0c66a;
    --sb-bronze: #b97927;
    --sb-ivory: #fbf7ed;
    --sb-cream: #f5efe0;
    --sb-mist: #edf5f2;
    --sb-bg: #f2f4ef;
    --sb-white: #ffffff;
    --sb-text: #17343a;
    --sb-muted: #6d7d7f;
    --sb-border: #e4decd;
    --sb-border-soft: rgba(5, 47, 59, 0.12);
    --sb-shadow: 0 10px 30px rgba(5, 47, 59, 0.13);
    --sb-shadow-soft: 0 5px 18px rgba(5, 47, 59, 0.08);
    --sb-radius: 14px;
    --sb-radius-small: 9px;
}


/* ============================================================
   3. DASAR HALAMAN
   ============================================================ */

html {
    scroll-behavior: smooth;
    background: var(--sb-bg);
}

body {
    margin: 0;
    color: var(--sb-text);
    background:
        radial-gradient(circle at 8% 0%, rgba(240, 198, 106, .20), transparent 34rem),
        radial-gradient(circle at 96% 8%, rgba(8, 119, 124, .14), transparent 30rem),
        linear-gradient(180deg, #eaf3f0 0%, var(--sb-bg) 42%, #ffffff 100%);
    font-family: "Montserrat", "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

a {
    color: var(--sb-teal-dark);
    text-decoration: none;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

a:hover,
a:focus {
    color: var(--sb-gold);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.pkp_structure_page {
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
}

.pkp_screen_reader {
    border: 0;
}


/* ============================================================
   4. HEADER DAN LOGO
   ============================================================ */

.pkp_structure_head {
    position: relative;
    overflow: visible;
    background-color: var(--sb-ink) !important;
    background-image:
        linear-gradient(120deg, rgba(5, 47, 59, .97), rgba(8, 119, 124, .88)),
        url("https://ejournal.uinsatu.ac.id/public/journals/22/homepageImage_en_US.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
    border-bottom: 5px solid var(--sb-gold);
    box-shadow: 0 12px 34px rgba(5, 47, 59, .25);
}

.pkp_structure_head::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 14%, rgba(240, 198, 106, .22), transparent 25rem),
        radial-gradient(circle at 80% 12%, rgba(255, 255, 255, .12), transparent 24rem),
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28));
    pointer-events: none;
}

.pkp_structure_head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: rgba(255,255,255,.22);
    pointer-events: none;
}

.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
    position: relative;
    z-index: 2;
    padding-top: 0;
}

.pkp_site_name_wrapper {
    width: 100%;
    max-width: 1280px;
    min-height: 220px;
    margin: 0 auto;
    padding: 34px 24px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pkp_site_name {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    text-align: center;
    white-space: normal;
}

.pkp_site_name .is_img {
    display: inline-block;
    padding: 0;
    max-width: 980px;
}

.pkp_site_name .is_img img {
    display: block;
    width: auto;
    max-width: min(980px, 94vw);
    max-height: 178px;
    margin: 0 auto;
    filter:
        drop-shadow(0 12px 16px rgba(0,0,0,.36))
        drop-shadow(0 0 1px rgba(255,255,255,.42));
}

.pkp_site_name .is_text {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: .035em;
    text-transform: uppercase;
    text-shadow: 0 8px 20px rgba(0,0,0,.28);
}


/* Tombol menu mobile */
.pkp_site_nav_toggle {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 30;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.pkp_site_nav_toggle > span,
.pkp_site_nav_toggle > span::before,
.pkp_site_nav_toggle > span::after,
.pkp_site_nav_toggle > span:before,
.pkp_site_nav_toggle > span:after {
    background: #ffffff;
    border-color: #ffffff;
}


/* ============================================================
   5. USER NAVIGATION
   ============================================================ */

.pkp_navigation_user_wrapper {
    position: absolute;
    top: 10px;
    right: 24px;
    z-index: 25;
}

.pkp_navigation_user > li > a,
.pkp_navigation_user_wrapper a {
    color: rgba(255,255,255,.94) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.pkp_navigation_user ul {
    background: var(--sb-white);
    border: 1px solid rgba(199,149,43,.28);
    border-top: 3px solid var(--sb-gold);
    border-radius: 0 0 10px 10px;
    box-shadow: var(--sb-shadow);
}

.pkp_navigation_user ul a {
    color: var(--sb-ink) !important;
}

.pkp_navigation_user ul a:hover,
.pkp_navigation_user ul a:focus {
    color: var(--sb-teal) !important;
    background: var(--sb-ivory);
}

.pkp_navigation_user .task_count {
    min-width: 20px;
    padding: 2px 6px;
    color: var(--sb-ink);
    background: var(--sb-gold-light);
    border-radius: 999px;
    font-weight: 800;
}


/* ============================================================
   6. NAVIGASI UTAMA
   ============================================================ */

.pkp_site_nav_menu {
    position: relative;
    z-index: 20;
    background: transparent;
}

.pkp_navigation_primary_row {
    position: relative !important;
    z-index: 60 !important;
    width: min(1100px, calc(100% - 92px));
    margin: 0 auto;
    overflow: visible !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,247,237,.96));
    border: 1px solid rgba(199,149,43,.36);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -3px 24px rgba(5, 47, 59, .14);
}

.pkp_navigation_primary_wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: auto;
    max-width: none;
    min-height: 62px;
    padding: 0 26px !important;
}

#navigationPrimary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    margin: 0;
    padding: 0;
    text-align: center;
}

#navigationPrimary li {
    position: relative;
}

#navigationPrimary > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 10px 13px;
    color: var(--sb-ink);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .085em;
    text-transform: uppercase;
}

#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus {
    color: var(--sb-ink);
    background:
        linear-gradient(135deg, rgba(240,198,106,.30), rgba(255,255,255,.92));
    border-color: rgba(199,149,43,.42);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

#navigationPrimary > li:first-child > a,
#navigationPrimary > li > a[aria-current="page"] {
    color: #ffffff;
    background:
        linear-gradient(135deg, var(--sb-teal), var(--sb-emerald));
    border-color: rgba(255,255,255,.72);
    box-shadow: 0 5px 13px rgba(8,119,124,.18);
}

#navigationPrimary > li:first-child > a:hover,
#navigationPrimary > li > a[aria-current="page"]:hover {
    color: #ffffff;
    background:
        linear-gradient(135deg, var(--sb-emerald), var(--sb-teal-dark));
}

#navigationPrimary [aria-haspopup]::after,
#navigationPrimary [aria-haspopup]:after,
.pkp_nav_list [aria-haspopup]::after,
.pkp_nav_list [aria-haspopup]:after {
    margin-left: .35em;
    transform: scale(.78);
    border-top-color: currentColor;
}


/* Dropdown */
#navigationPrimary ul {
    min-width: 210px !important;
    padding: 8px 0 !important;
    background: var(--sb-white);
    border: 1px solid rgba(199,149,43,.28);
    border-top: 3px solid var(--sb-gold);
    border-radius: 0 0 13px 13px;
    box-shadow: var(--sb-shadow);
}

#navigationPrimary ul a {
    display: block;
    padding: 9px 14px !important;
    color: var(--sb-ink);
    border-left: 4px solid transparent;
    font-family: "Montserrat", sans-serif;
    font-size: 11.5px !important;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: .015em;
    text-align: left;
    text-transform: none;
}

#navigationPrimary ul a:hover,
#navigationPrimary ul a:focus {
    color: var(--sb-ink);
    background: var(--sb-ivory);
    border-left-color: var(--sb-gold);
}


/* Search pada menu */
.pkp_navigation_search_wrapper {
    position: static !important;
    flex: 0 0 auto;
    margin: 0 !important;
    transform: none !important;
}

.pkp_navigation_search_wrapper .pkp_search,
.pkp_search_desktop {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 9px 13px !important;
    color: var(--sb-ink) !important;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(199,149,43,.30);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(5,47,59,.06);
    font-family: "Montserrat", sans-serif;
    font-size: 10.8px !important;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.pkp_navigation_search_wrapper .pkp_search .fa,
.pkp_search_desktop .fa {
    margin-right: 5px;
    font-size: 11px;
}

.pkp_navigation_search_wrapper .pkp_search:hover,
.pkp_search_desktop:hover {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--sb-gold), var(--sb-bronze));
    border-color: rgba(255,255,255,.50);
    box-shadow: 0 5px 14px rgba(199,149,43,.22);
}


/* Pastikan menu bisa diklik */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
#navigationPrimary,
#navigationPrimary > li,
#navigationPrimary > li > a,
.pkp_navigation_search_wrapper,
.pkp_navigation_search_wrapper .pkp_search {
    pointer-events: auto !important;
}


/* ============================================================
   7. STRUKTUR KONTEN
   ============================================================ */

.pkp_structure_content {
    width: min(1160px, calc(100% - 72px));
    margin: 0 auto 36px;
    padding-top: 0;
    overflow: hidden;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-top: none;
    box-shadow: var(--sb-shadow-soft);
}

.pkp_structure_main {
    min-height: 420px;
    padding: 36px 38px 58px;
    background: var(--sb-white);
}

@media (min-width: 992px) {
    .pkp_structure_content.has_sidebar {
        display: flex;
        align-items: stretch;
    }

    .pkp_structure_content.has_sidebar .pkp_structure_main {
        float: none;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding: 38px 42px 64px;
    }

    .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
        float: none;
        flex: 0 0 300px;
        width: 300px;
        min-height: 360px;
        background:
            linear-gradient(180deg, #fbfaf5 0%, #f6f2e7 100%);
        border-left: 1px solid var(--sb-border);
    }
}

/* Saat sidebar belum aktif */
.pkp_structure_main:first-child:last-child {
    float: none !important;
    width: 100% !important;
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}

/* Jika browser mendukung :has, layout akan tetap ideal saat belum ada sidebar */
@supports selector(:has(*)) {
    .pkp_structure_content.has_sidebar:not(:has(.pkp_structure_sidebar)) {
        display: block;
    }

    .pkp_structure_content.has_sidebar:not(:has(.pkp_structure_sidebar)) .pkp_structure_main {
        width: 100% !important;
        max-width: 1020px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ============================================================
   8. BREADCRUMB
   ============================================================ */

.cmp_breadcrumbs {
    display: block;
    margin-bottom: 28px;
    padding: 0 0 24px;
    color: var(--sb-muted);
    border-bottom: 1px solid var(--sb-border);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.cmp_breadcrumbs ol {
    margin: 0;
    padding: 0;
}

.cmp_breadcrumbs a {
    color: var(--sb-teal-dark);
}

.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus {
    color: var(--sb-gold);
}

.cmp_breadcrumbs .separator {
    padding: 0 10px;
    color: var(--sb-gold);
}

.cmp_breadcrumbs .current {
    color: var(--sb-muted);
}


/* ============================================================
   9. TYPOGRAPHY KONTEN
   ============================================================ */

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 {
    font-family: "Montserrat", sans-serif;
    color: var(--sb-ink);
}

.pkp_structure_main h1,
.obj_article_details > .page_title {
    margin: 0 0 20px;
    padding-bottom: 14px;
    color: var(--sb-ink);
    border-bottom: 3px solid var(--sb-gold);
    font-size: clamp(24px, 2.35vw, 34px);
    line-height: 1.24;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pkp_structure_main h2 {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
}

.pkp_structure_main h3 {
    font-size: 17px;
    line-height: 1.28;
    font-weight: 800;
}

.pkp_structure_main p {
    margin: 10px 0;
    line-height: 1.58;
}

.pkp_structure_main ul,
.pkp_structure_main ol {
    line-height: 1.56;
}


/* ============================================================
   10. HALAMAN DEPAN: HOMEPAGE IMAGE
   ============================================================ */

.page_index_journal .homepage_image {
    position: relative;
    margin: 0 0 28px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(8,119,124,.10), rgba(240,198,106,.18));
    border: 1px solid rgba(199,149,43,.32);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(5,47,59,.10);
}

.page_index_journal .homepage_image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background:
        linear-gradient(90deg, var(--sb-teal), var(--sb-gold), var(--sb-emerald));
}

.page_index_journal .homepage_image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}


/* ============================================================
   11. HALAMAN DEPAN: ABOUT / ADDITIONAL CONTENT
   ============================================================ */

.page_index_journal .homepage_about,
.page_index_journal .additional_content {
    margin: 0 0 32px;
    padding: 24px 26px;
    background:
        radial-gradient(circle at 0% 0%, rgba(240,198,106,.30), transparent 30%),
        linear-gradient(135deg, rgba(8,119,124,.10), rgba(251,247,237,.96));
    border: 1px solid rgba(199,149,43,.38);
    border-left: 5px solid var(--sb-gold);
    border-radius: var(--sb-radius);
    box-shadow: 0 7px 22px rgba(5,47,59,.08);
}

.page_index_journal .homepage_about h2,
.page_index_journal .additional_content h2,
.pkp_page_index .current_issue h2 {
    display: inline-block;
    margin: 0 0 18px;
    padding-bottom: 8px;
    color: var(--sb-ink);
    border-bottom: 3px solid var(--sb-gold);
    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.homepage_about table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12.8px !important;
    line-height: 1.38 !important;
}

.homepage_about table td {
    padding: 7px 8px !important;
    vertical-align: top !important;
    border-bottom: 1px dashed rgba(5,47,59,.13) !important;
}

.homepage_about table tr:last-child td {
    border-bottom: none !important;
}

.homepage_about table td:first-child {
    width: 132px !important;
    color: var(--sb-ink) !important;
    font-weight: 800 !important;
}

.homepage_about table td:nth-child(2) {
    width: 16px !important;
    color: var(--sb-gold) !important;
    font-weight: 800 !important;
    text-align: center !important;
}

.homepage_about table td:nth-child(3) {
    color: var(--sb-text) !important;
    font-weight: 500 !important;
}

.homepage_about table img,
.page_index_journal .additional_content img {
    max-height: 28px;
    width: auto;
    margin: 2px 5px 5px 0;
    padding: 3px 5px;
    vertical-align: middle;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(228,222,205,.88);
    border-radius: 7px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(5,47,59,.04);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.homepage_about table a:hover img,
.page_index_journal .additional_content a:hover img {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 5px 13px rgba(5,47,59,.10);
}

/* Gambar SINTA besar dalam additional content */
.page_index_journal .additional_content p:first-child img {
    display: block;
    width: auto;
    max-width: 360px;
    max-height: none;
    margin: 0 auto 12px;
    padding: 8px;
    border-radius: 12px;
}

/* Area additional content dibuat ringkas */
.page_index_journal .additional_content center {
    display: block;
    text-align: center;
}

.page_index_journal .additional_content p {
    margin: 8px 0;
}


/* ============================================================
   12. HALAMAN DEPAN: CURRENT ISSUE
   ============================================================ */

.pkp_page_index .current_issue {
    margin-top: 26px;
    padding-bottom: 8px;
}

.pkp_page_index .current_issue h2 {
    margin-bottom: 18px;
}

/* Badge judul volume */
.pkp_page_index .current_issue .current_issue_title {
    display: inline-block;
    margin: 0 0 20px;
    padding: 8px 14px;
    color: var(--sb-ink);
    background:
        linear-gradient(135deg, rgba(240,198,106,.26), rgba(255,255,255,.96));
    border: 1px solid rgba(199,149,43,.40);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(5,47,59,.05);
    font-family: "Montserrat", sans-serif;
    font-size: 12.8px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .035em;
}

.obj_issue_toc .heading {
    margin-bottom: 20px;
}

.pkp_page_index .obj_issue_toc .heading {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
    margin: 0 0 18px;
    padding: 0;
    min-height: 0;
}

.pkp_page_index .obj_issue_toc .heading .cover {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
    padding: 0;
}

.obj_issue_toc .cover img,
.pkp_page_index .obj_issue_toc .heading .cover img {
    display: block;
    width: 200px;
    max-width: 200px;
    margin: 0;
    background: #ffffff;
    border: 1px solid rgba(228,222,205,.92);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(5,47,59,.12);
}

.obj_issue_toc .heading .published,
.obj_issue_toc .heading .pub_id {
    grid-column: 2;
    display: block;
    margin: 0 0 10px;
    color: var(--sb-muted);
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

.obj_issue_toc .heading .published .label,
.obj_issue_toc .heading .pub_id .type {
    color: var(--sb-ink);
    font-weight: 800;
    text-transform: uppercase;
}

.pkp_page_index .obj_issue_toc .sections {
    clear: both;
    margin-top: 6px;
    padding-top: 0;
}

.pkp_page_index .obj_issue_toc .section {
    margin-top: 0;
    padding-top: 0;
}

.obj_issue_toc .section h2,
.obj_issue_toc .section h3,
.pkp_page_index .obj_issue_toc .section h3 {
    display: inline-block;
    margin: 10px 0 16px;
    padding: 8px 15px;
    color: #ffffff;
    background:
        linear-gradient(135deg, var(--sb-teal-dark), var(--sb-emerald));
    border-left: 5px solid var(--sb-gold);
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(5,47,59,.10);
    font-family: "Montserrat", sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cmp_article_list,
.obj_issue_toc .articles {
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_issue_toc .articles {
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(251,247,237,.42));
    border: 1px solid var(--sb-border);
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(5,47,59,.07);
}

.cmp_article_list > li {
    margin: 0;
    padding: 0;
    border-bottom: 1px dashed rgba(5,47,59,.17);
}

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

.obj_article_summary {
    position: relative;
    padding: 19px 22px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: background-color .18s ease;
}

.obj_article_summary:hover {
    background: rgba(245,239,224,.62);
}

.obj_article_summary > .title {
    margin: 0 0 9px;
    color: var(--sb-ink);
    font-family: "Montserrat", sans-serif;
    font-size: 15.8px;
    font-weight: 800;
    line-height: 1.36;
    letter-spacing: .012em;
}

.obj_article_summary > .title a {
    color: var(--sb-ink);
}

.obj_article_summary > .title a:hover,
.obj_article_summary > .title a:focus {
    color: var(--sb-teal);
}

.obj_article_summary .subtitle {
    display: block;
    margin-top: 5px;
    color: var(--sb-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
}

.obj_article_summary .meta {
    margin-top: 7px;
    padding-top: 7px;
    color: var(--sb-muted);
    border-top: 1px dashed rgba(5,47,59,.15);
    font-size: 13px;
    line-height: 1.43;
}

.obj_article_summary .authors {
    color: var(--sb-muted);
    font-weight: 600;
}

.obj_article_summary .pages {
    margin-top: 3px;
    color: var(--sb-teal-dark);
    font-weight: 800;
}

.obj_article_summary .item.doi {
    margin-top: 8px;
    color: var(--sb-muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.obj_article_summary .galleys_links,
.obj_issue_toc .galleys_links {
    margin-top: 11px;
}

.obj_article_summary .galleys_links li,
.obj_issue_toc .galleys_links li {
    display: inline-block;
    margin: 0 9px 9px 0;
}

.pkp_page_index .current_issue .read_more,
.obj_announcement_summary .read_more {
    display: inline-block;
    margin-top: 18px;
    padding: 0;
    color: var(--sb-teal-dark);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: "Montserrat", sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.pkp_page_index .current_issue .read_more::after,
.obj_announcement_summary .read_more::after {
    content: " →";
    color: var(--sb-gold);
    font-weight: 900;
}

.pkp_page_index .current_issue .read_more:hover,
.obj_announcement_summary .read_more:hover {
    color: var(--sb-gold);
    background: transparent;
}


/* ============================================================
   13. TOMBOL DOWNLOAD / SUBMIT
   ============================================================ */

.cmp_manuscript_button,
.block_make_submission a,
.obj_galley_link,
.obj_galley_link.pdf {
    display: inline-block;
    width: auto;
    min-width: 168px;
    padding: 10px 16px;
    color: var(--sb-ink) !important;
    background:
        linear-gradient(135deg, var(--sb-gold-light), var(--sb-gold));
    border: none;
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(199,149,43,.25);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

.obj_galley_link::before,
.obj_galley_link:before,
.obj_galley_link.pdf::before,
.obj_galley_link.pdf:before {
    margin-right: 7px;
    color: var(--sb-ink);
}

.cmp_manuscript_button:hover,
.block_make_submission a:hover,
.obj_galley_link:hover,
.obj_galley_link.pdf:hover,
.cmp_manuscript_button:focus,
.block_make_submission a:focus,
.obj_galley_link:focus,
.obj_galley_link.pdf:focus {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--sb-teal), var(--sb-ink));
    box-shadow: 0 8px 22px rgba(5,47,59,.24);
    text-decoration: none;
    transform: translateY(-1px);
}


/* ============================================================
   14. HALAMAN ARTIKEL
   ============================================================ */

.page_article .obj_article_details,
.pkp_page_article .obj_article_details {
    margin-top: 0;
}

.pkp_page_article .obj_article_details > .page_title,
.pkp_page_article .pkp_structure_main h1.page_title,
.obj_article_details > .page_title {
    max-width: 100%;
    margin-bottom: 18px !important;
    padding-bottom: 15px !important;
    border-bottom: 3px solid var(--sb-gold);
    font-size: clamp(22px, 1.95vw, 30px) !important;
    line-height: 1.20 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase;
}

.obj_article_details .row {
    margin-top: 20px;
    border: none;
}

.obj_article_details .main_entry {
    border: none;
}

@media (min-width: 900px) {
    .pkp_page_article .obj_article_details > .row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 26px !important;
        width: 100% !important;
        margin-top: 18px !important;
    }

    .pkp_page_article .obj_article_details .main_entry {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: calc(100% - 326px) !important;
        min-width: 0 !important;
        float: none !important;
        clear: none !important;
    }

    .pkp_page_article .obj_article_details .entry_details {
        flex: 0 0 300px !important;
        width: 300px !important;
        max-width: 300px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
    }
}

.obj_article_details .item {
    margin-bottom: 14px;
    padding: 18px 22px;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(5,47,59,.055);
}

.pkp_page_article .obj_article_details .main_entry > .item.authors {
    margin-bottom: 12px !important;
    padding: 15px 18px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(245,239,224,.32)) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(5,47,59,.045) !important;
}

.obj_article_details .authors ul,
.obj_article_details .authors {
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_article_details .authors li,
.pkp_page_article .obj_article_details .authors li {
    margin: 0 !important;
    padding: 9px 0 !important;
    border-bottom: 1px dashed rgba(5,47,59,.13) !important;
}

.obj_article_details .authors li:first-child {
    padding-top: 0 !important;
}

.obj_article_details .authors li:last-child {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.obj_article_details .authors .name {
    display: block !important;
    margin: 0 0 2px !important;
    color: var(--sb-ink) !important;
    font-size: 14px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
}

.obj_article_details .authors .affiliation {
    display: block !important;
    margin: 0 !important;
    color: var(--sb-muted) !important;
    font-size: 12.5px !important;
    line-height: 1.30 !important;
}

.obj_article_details .authors svg {
    max-width: 24px;
    max-height: 18px;
    vertical-align: middle;
}

.obj_article_details .item.doi,
.obj_article_details .item.keywords,
.pkp_page_article .obj_article_details .main_entry > .item.doi,
.pkp_page_article .obj_article_details .main_entry > .item.keywords {
    margin: 0 0 10px !important;
    padding: 10px 14px !important;
    background:
        linear-gradient(90deg, rgba(245,239,224,.85), rgba(255,255,255,.96)) !important;
    border: 1px solid rgba(228,222,205,.95) !important;
    border-left: 4px solid rgba(199,149,43,.85) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    color: var(--sb-text);
    font-size: 12.5px !important;
    line-height: 1.38 !important;
}

.obj_article_details .main_entry .item .label,
.obj_article_details .main_entry .label,
.obj_article_details .entry_details .label {
    display: inline-block;
    margin: 0 0 14px;
    padding: 0 0 7px;
    color: var(--sb-ink);
    border-bottom: 3px solid var(--sb-gold);
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.obj_article_details .item.doi .label,
.obj_article_details .item.keywords .label,
.pkp_page_article .obj_article_details .main_entry > .item.doi .label,
.pkp_page_article .obj_article_details .main_entry > .item.keywords .label {
    display: inline !important;
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
    color: var(--sb-ink) !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
}

.obj_article_details .doi a,
.obj_article_details .references a,
.obj_article_summary .doi a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.obj_article_details .abstract,
.obj_article_details .references,
.pkp_page_article .obj_article_details .item.abstract,
.pkp_page_article .obj_article_details .item.references {
    margin-top: 14px !important;
    padding: 18px 22px !important;
}

.obj_article_details .abstract {
    background:
        linear-gradient(180deg, rgba(251,247,237,.50), rgba(255,255,255,1));
}

.obj_article_details .abstract p,
.obj_article_details .references p {
    font-family: "Noto Serif", Georgia, serif;
    line-height: 1.58 !important;
}

.obj_article_details .references .value p {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(5,47,59,.14);
    word-break: break-word;
}

.obj_article_details .references .value p:last-child {
    border-bottom: none;
}


/* Panel kanan artikel */
.obj_article_details .entry_details {
    margin-left: 0;
    margin-right: 0;
    border: none;
}

.obj_article_details .entry_details .item,
.pkp_page_article .obj_article_details .entry_details .item {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--sb-white) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 18px rgba(5,47,59,.08) !important;
}

.obj_article_details .entry_details .item > .label,
.obj_article_details .entry_details .sub_item > .label,
.obj_article_details .entry_details .item.copyright > .label,
.obj_article_details .entry_details .citation_display > .label {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--sb-teal-dark), var(--sb-ink)) !important;
    border: none !important;
    border-bottom: 3px solid var(--sb-gold) !important;
    border-radius: 0 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 12px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

.obj_article_details .entry_details .item > .value,
.obj_article_details .entry_details .sub_item > .value,
.obj_article_details .entry_details .citation_display > .value,
.obj_article_details .entry_details .item.copyright p {
    display: block !important;
    margin: 0 !important;
    padding: 14px 15px !important;
    color: var(--sb-text) !important;
    font-size: 13px !important;
    line-height: 1.43 !important;
}

.obj_article_details .entry_details .cover_image {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.obj_article_details .entry_details .cover_image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(5,47,59,.14) !important;
}

.obj_article_details .entry_details .galleys_links {
    margin: 0 !important;
    padding: 16px !important;
}

.obj_article_details .entry_details .galleys_links > li {
    display: block !important;
    margin: 0 0 10px !important;
}

.obj_article_details .entry_details .galleys_links > li:last-child {
    margin-bottom: 0 !important;
}

.obj_article_details .entry_details .galleys_links > li a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.obj_article_details .entry_details .item.issue .sub_item {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--sb-border) !important;
}

.obj_article_details .entry_details .item.issue .sub_item:last-child {
    border-bottom: none !important;
}

.obj_article_details .citation_display .citation_formats {
    margin: 0 15px 15px !important;
    overflow: hidden;
    border: 1px solid var(--sb-border);
    border-radius: 8px;
}

.obj_article_details .citation_display .citation_formats_button {
    color: var(--sb-ink);
    background: var(--sb-ivory);
    font-weight: 800;
}

.obj_article_details .citation_display .citation_formats_styles a {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sb-border);
}

.obj_article_details .citation_display .citation_formats_styles a:hover,
.obj_article_details .citation_display .citation_formats_styles a:focus {
    color: var(--sb-ink);
    background: var(--sb-ivory);
}


/* ============================================================
   15. HALAMAN ISSUE / ARCHIVE / SEARCH / ANNOUNCEMENT
   ============================================================ */

.page_issue_archive .issues_archive,
.page_search .search_results,
.page_announcements .cmp_announcements {
    margin: 0;
    padding: 0;
    list-style: none;
}

.obj_issue_summary,
.obj_announcement_summary,
.page_search .obj_article_summary {
    margin-bottom: 16px;
    padding: 18px 20px;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-gold);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(5,47,59,.055);
}

.obj_issue_summary h2,
.obj_issue_summary h3,
.obj_announcement_summary h2,
.obj_announcement_summary h3 {
    margin-top: 0;
    font-size: 17px;
}

.obj_issue_summary .cover img {
    border-radius: 10px;
    box-shadow: var(--sb-shadow-soft);
}


/* ============================================================
   16. SIDEBAR UMUM
   ============================================================ */

.pkp_structure_sidebar .pkp_block {
    padding: 24px 20px !important;
    border-bottom: 1px solid var(--sb-border);
}

.pkp_structure_sidebar .pkp_block .title,
.pkp_block .title,
#customblock-sidebar .title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 0 12px !important;
    padding: 7px 12px !important;
    color: var(--sb-ink) !important;
    background:
        linear-gradient(135deg, rgba(240,198,106,.18), rgba(255,255,255,.86)) !important;
    border: 1px solid rgba(199,149,43,.34) !important;
    border-radius: 999px !important;
    box-shadow: 0 3px 9px rgba(5,47,59,.045) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.pkp_structure_sidebar .pkp_block .title::before,
.pkp_block .title::before,
#customblock-sidebar .title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--sb-gold);
    box-shadow: 0 0 0 3px rgba(199,149,43,.16);
}

.pkp_block .content {
    color: var(--sb-muted);
    font-size: 13px;
    line-height: 1.5;
}

.pkp_block .content ul,
.pkp_block .content p {
    margin-top: 0;
}

.pkp_block a {
    color: var(--sb-teal-dark);
    font-weight: 700;
}

.pkp_block a:hover {
    color: var(--sb-gold);
}

/* Blok custom sidebar SOSEBI yang akan dibuat setelah CSS ini */
.sosebi-sidebar-clean {
    font-family: "Montserrat", Arial, sans-serif !important;
    color: var(--sb-text) !important;
}

.sosebi-sidebar-clean a:hover {
    transform: translateY(-1px);
}

/* Menyamarkan sidebar kosong */
#customblock-sidebar .content:empty {
    display: none;
}


/* ============================================================
   17. FOOTER UMUM
   ============================================================ */

.pkp_structure_footer_wrapper {
    margin-top: 0;
    background: var(--sb-ink);
    border-top: 5px solid var(--sb-gold);
}

.pkp_structure_footer {
    width: min(1160px, calc(100% - 72px));
    margin: 0 auto;
    color: rgba(255,255,255,.86);
    background:
        linear-gradient(135deg, rgba(5,47,59,.98), rgba(7,84,92,.98));
    border: none;
    box-shadow: none;
}

.pkp_footer_content {
    padding: 34px 28px;
    text-align: left;
}

.pkp_footer_content h3,
.site-footer-content h3 {
    color: var(--sb-gold-light);
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.pkp_footer_content p,
.site-footer-content p {
    color: rgba(255,255,255,.84);
    font-size: 13px;
    line-height: 1.58;
}

.pkp_footer_content a,
.site-footer-content a {
    color: #ffffff;
    font-weight: 700;
}

.pkp_footer_content a:hover,
.site-footer-content a:hover {
    color: var(--sb-gold-light);
}

.pkp_footer_content img,
.site-footer-content img {
    max-width: 100%;
}

.pkp_brand_footer {
    width: min(1160px, calc(100% - 72px));
    margin: 0 auto;
    padding: 12px 28px 22px;
    background: var(--sb-ink);
    text-align: center;
}

.pkp_brand_footer a {
    float: none !important;
    display: inline-block !important;
    max-width: 140px;
    margin: 0 auto !important;
    opacity: .78;
}

.pkp_brand_footer a:hover {
    opacity: 1;
}

.pkp_brand_footer img {
    display: block;
    max-width: 135px;
    height: auto;
    margin: 0 auto;
}

/* Footer custom SOSEBI yang akan dipasang pada Page Footer */
.sosebi-footer {
    font-family: "Montserrat", Arial, sans-serif !important;
}


/* ============================================================
   18. FORM, SEARCH, PAGINATION
   ============================================================ */

.cmp_button,
.cmp_form .buttons button,
.pkp_search button[type="submit"],
.page_search .submit button,
button.submit,
input[type="submit"] {
    color: var(--sb-ink);
    background:
        linear-gradient(135deg, var(--sb-gold-light), var(--sb-gold));
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(199,149,43,.18);
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
}

.cmp_button:hover,
.cmp_form .buttons button:hover,
.pkp_search button[type="submit"]:hover,
.page_search .submit button:hover,
button.submit:hover,
input[type="submit"]:hover {
    color: #ffffff;
    background:
        linear-gradient(135deg, var(--sb-teal), var(--sb-ink));
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
select,
textarea,
.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form select,
.cmp_form textarea,
.pkp_search input[type="text"] {
    border: 1px solid var(--sb-border);
    border-radius: 8px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--sb-gold);
    box-shadow: 0 0 0 3px rgba(199,149,43,.18);
}

.cmp_pagination {
    font-family: "Montserrat", sans-serif;
}

.cmp_pagination a {
    color: var(--sb-teal-dark);
    font-weight: 800;
}

.cmp_pagination a:hover {
    color: var(--sb-gold);
}

.cmp_notification {
    border-radius: 10px;
}


/* ============================================================
   19. PERBAIKAN KHUSUS OJS
   ============================================================ */

/* Link panjang DOI/referensi tidak merusak layout */
.obj_article_details .doi a,
.obj_article_details .references a,
.obj_article_summary .doi a,
.pkp_structure_main a {
    overflow-wrap: anywhere;
}

/* Icon ROR/SVG author tidak terlalu besar */
.obj_article_details .affiliation a svg,
.obj_article_details .authors a svg {
    width: 24px !important;
    height: auto !important;
    margin-left: 4px;
}

/* Lisensi Creative Commons di halaman artikel */
.obj_article_details .copyright img {
    margin: 10px 16px 0;
}

/* Gambar terlalu besar pada konten/footer dikontrol */
.site-footer-content center img,
.pkp_footer_content center img {
    max-height: 52px;
    width: auto;
}

/* Admin bar dan elemen OJS tertentu */
.cmp_skip_to_content a:focus {
    z-index: 99999;
    color: var(--sb-ink);
    background: var(--sb-gold-light);
}


/* ============================================================
   20. RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .pkp_navigation_primary_row {
        width: min(1080px, calc(100% - 44px));
    }

    .pkp_navigation_primary_wrapper {
        gap: 10px !important;
        padding: 0 18px !important;
    }

    #navigationPrimary > li > a {
        padding: 9px 10px;
        font-size: 10.5px;
    }
}

@media (max-width: 991px) {
    .pkp_site_name_wrapper {
        min-height: 170px;
        padding-top: 58px;
    }

    .pkp_site_name .is_img img {
        max-height: 118px;
    }

    .pkp_site_nav_menu {
        display: none;
        position: absolute;
        left: 16px;
        right: 16px;
        top: 100%;
        z-index: 120;
        padding: 16px;
        background:
            linear-gradient(135deg, rgba(5,47,59,.98), rgba(7,84,92,.98));
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 14px;
        box-shadow: var(--sb-shadow);
    }

    .pkp_site_nav_menu--isOpen {
        display: block;
    }

    .pkp_navigation_primary_row {
        width: 100% !important;
        margin: 0;
        background: transparent;
        border: none;
        border-radius: 12px;
        box-shadow: none;
    }

    .pkp_navigation_primary_wrapper {
        display: block !important;
        padding: 0 !important;
        min-height: 0;
    }

    #navigationPrimary {
        display: block;
        text-align: left;
    }

    #navigationPrimary li {
        display: block;
    }

    #navigationPrimary > li > a,
    #navigationPrimary > li:first-child > a,
    #navigationPrimary > li > a[aria-current="page"] {
        display: block;
        min-height: 0;
        padding: 11px 10px;
        color: #ffffff !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 7px !important;
        box-shadow: none !important;
    }

    #navigationPrimary > li > a:hover,
    #navigationPrimary > li:first-child > a:hover,
    #navigationPrimary > li > a[aria-current="page"]:hover {
        color: var(--sb-gold-light) !important;
        background: rgba(255,255,255,.08) !important;
    }

    #navigationPrimary ul {
        position: static;
        display: block;
        width: auto;
        min-width: 0 !important;
        margin: 0 0 8px 14px;
        padding: 6px 0 !important;
        background: rgba(255,255,255,.08);
        border: none;
        border-left: 3px solid var(--sb-gold);
        border-radius: 8px;
        box-shadow: none;
    }

    #navigationPrimary ul a {
        color: rgba(255,255,255,.92);
        border-left: none;
    }

    #navigationPrimary ul a:hover {
        color: var(--sb-gold-light);
        background: rgba(255,255,255,.08);
    }

    .pkp_navigation_search_wrapper {
        margin-top: 10px !important;
    }

    .pkp_navigation_search_wrapper .pkp_search,
    .pkp_search_desktop {
        color: #ffffff !important;
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.18);
    }

    .pkp_navigation_search_wrapper .pkp_search:hover,
    .pkp_search_desktop:hover {
        color: var(--sb-gold-light) !important;
        background: rgba(255,255,255,.12);
    }

    .pkp_structure_content {
        width: calc(100% - 28px);
    }

    .pkp_structure_content.has_sidebar {
        display: block;
    }

    .pkp_structure_main,
    .pkp_structure_content.has_sidebar .pkp_structure_main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 26px 22px 42px;
    }

    .pkp_structure_sidebar,
    .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
        width: 100%;
        border-top: 1px solid var(--sb-border);
        border-left: none;
    }

    .obj_article_details .entry_details {
        margin-top: 26px;
    }

    .pkp_navigation_user_wrapper {
        top: 14px;
        right: 18px;
    }

    .pkp_page_index .obj_issue_toc .heading {
        grid-template-columns: 180px minmax(0, 1fr);
        column-gap: 22px;
    }

    .obj_issue_toc .cover img,
    .pkp_page_index .obj_issue_toc .heading .cover img {
        width: 170px;
        max-width: 170px;
    }
}

@media (max-width: 720px) {
    .pkp_page_index .obj_issue_toc .heading {
        display: block;
    }

    .obj_issue_toc .cover img,
    .pkp_page_index .obj_issue_toc .heading .cover img {
        width: 170px;
        max-width: 170px;
        margin: 0 0 14px;
    }

    .obj_issue_toc .heading .published,
    .obj_issue_toc .heading .pub_id {
        margin-bottom: 10px;
    }

    .obj_article_summary .galleys_links li,
    .obj_issue_toc .galleys_links li {
        display: block;
        margin-right: 0;
    }

    .obj_galley_link,
    .obj_galley_link.pdf {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 13px;
    }

    .pkp_site_name_wrapper {
        min-height: 136px;
        padding: 56px 14px 20px;
    }

    .pkp_site_name .is_img img {
        max-height: 86px;
    }

    .pkp_structure_content,
    .pkp_structure_footer,
    .pkp_brand_footer {
        width: calc(100% - 18px);
    }

    .pkp_structure_main,
    .pkp_structure_content.has_sidebar .pkp_structure_main {
        padding: 22px 16px 34px;
    }

    .page_index_journal .homepage_image,
    .page_index_journal .homepage_about,
    .page_index_journal .additional_content,
    .obj_article_summary,
    .obj_article_details .item,
    .obj_issue_toc .articles {
        border-radius: 10px;
    }

    .page_index_journal .homepage_about,
    .page_index_journal .additional_content,
    .obj_article_summary,
    .obj_article_details .item {
        padding: 18px 16px;
    }

    .pkp_structure_main h1,
    .obj_article_details > .page_title {
        font-size: 22px;
    }

    .homepage_about table,
    .homepage_about table tbody,
    .homepage_about table tr,
    .homepage_about table td {
        display: block;
        width: 100% !important;
    }

    .homepage_about table tr {
        padding: 8px 0;
        border-bottom: 1px dashed rgba(5,47,59,.14);
    }

    .homepage_about table tr:last-child {
        border-bottom: none;
    }

    .homepage_about table td {
        padding: 3px 0 !important;
        border-bottom: none !important;
    }

    .homepage_about table td:nth-child(2) {
        display: none;
    }

    .page_index_journal .additional_content img {
        max-height: 25px;
        margin: 2px 3px 4px 0;
        padding: 2px 4px;
    }

    .page_index_journal .additional_content p:first-child img {
        max-width: 100%;
    }

    .pkp_footer_content {
        padding: 26px 18px;
    }
}

@media (max-width: 420px) {
    .pkp_site_name .is_img img {
        max-height: 72px;
    }

    .pkp_navigation_user_wrapper {
        right: 12px;
    }

    .pkp_navigation_user > li > a,
    .pkp_navigation_user_wrapper a {
        font-size: 11px;
    }
}


/* ============================================================
   21. PRINT
   ============================================================ */

@media print {
    .pkp_structure_head,
    .pkp_structure_sidebar,
    .pkp_structure_footer_wrapper,
    .pkp_navigation_user_wrapper,
    .pkp_site_nav_toggle,
    .pkp_site_nav_menu {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .pkp_structure_content,
    .pkp_structure_main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
}


/* ============================================================
   REVISI 1 - MENGHILANGKAN GARIS VERTIKAL KIRI/KANAN KONTEN
   Catatan:
   Pada tampilan SOSEBI muncul garis lurus vertikal dari atas ke bawah
   karena border bawaan area .pkp_structure_content. Bagian ini
   menghapus garis tersebut tanpa merusak layout utama.
   ============================================================ */

.pkp_structure_content {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: 0 8px 24px rgba(5, 47, 59, 0.06) !important;
}

/* Menghapus garis pemisah bawaan yang kadang tetap muncul pada layout OJS */
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after {
    border: none !important;
    box-shadow: none !important;
}

/* Jika sidebar belum dipasang, jangan tampilkan garis area sidebar kosong */
.pkp_structure_content.has_sidebar .pkp_structure_main {
    border-left: none !important;
    border-right: none !important;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    border-left: none !important;
}

/* Area konten dibuat menyatu lebih halus dengan background */
.pkp_structure_main {
    border-left: none !important;
    border-right: none !important;
}

/* Responsive tetap tanpa garis vertikal */
@media (max-width: 991px) {
    .pkp_structure_content,
    .pkp_structure_main,
    .pkp_structure_sidebar {
        border-left: none !important;
        border-right: none !important;
    }
}


/* ============================================================
   REVISI 2 FINAL - VOLUME TEPAT DI ATAS PUBLISHED
   Tujuan:
   - "Vol. 5 No. 1 (2025)" berada di kanan cover.
   - "Published: 2025-06-27" tepat di bawahnya.
   - Posisi dibuat berdekatan seperti tampilan Ar Rehla.
   - Revisi ini dibuat dari CSS Revisi 1 agar tidak bentrok dengan
     revisi posisi sebelumnya.
   ============================================================ */

.pkp_page_index .current_issue {
    position: relative !important;
}

.pkp_page_index .current_issue h2 {
    display: block !important;
    width: fit-content !important;
    margin: 0 0 34px !important;
}

/* Layout cover dan informasi issue dibuat seperti Ar Rehla */
.pkp_page_index .obj_issue_toc .heading {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    column-gap: 20px !important;
    align-items: start !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.pkp_page_index .obj_issue_toc .heading .cover {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_page_index .obj_issue_toc .heading .cover img {
    width: 260px !important;
    max-width: 260px !important;
    margin: 0 !important;
}

/* Badge volume: sejajar dengan Published dan berada tepat di atasnya */
.pkp_page_index .current_issue .current_issue_title {
    position: absolute !important;
    left: 320px !important;
    top: 88px !important;
    z-index: 6 !important;
    display: inline-block !important;
    width: fit-content !important;
    margin: 0 !important;
    padding: 8px 15px !important;
    color: var(--sb-ink) !important;
    background: linear-gradient(135deg, rgba(240,198,106,.24), rgba(255,255,255,.96)) !important;
    border: 1px solid rgba(199,149,43,.40) !important;
    border-radius: 999px !important;
    box-shadow: 0 3px 10px rgba(5,47,59,.05) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 12.8px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .035em !important;
}

/* Published: dikembalikan ke grid, tepat di bawah badge volume */
.pkp_page_index .obj_issue_toc .heading .published {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    display: block !important;
    width: fit-content !important;
    margin: 66px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* Layar sedang */
@media (max-width: 991px) and (min-width: 721px) {
    .pkp_page_index .obj_issue_toc .heading {
        grid-template-columns: 220px minmax(0, 1fr) !important;
        column-gap: 18px !important;
    }

    .pkp_page_index .obj_issue_toc .heading .cover img {
        width: 190px !important;
        max-width: 190px !important;
    }

    .pkp_page_index .current_issue .current_issue_title {
        left: 238px !important;
        top: 86px !important;
    }

    .pkp_page_index .obj_issue_toc .heading .published {
        margin-top: 64px !important;
    }
}

/* Mobile: dikembalikan normal agar tidak bertumpuk */
@media (max-width: 720px) {
    .pkp_page_index .current_issue h2 {
        margin-bottom: 14px !important;
    }

    .pkp_page_index .obj_issue_toc .heading {
        display: block !important;
    }

    .pkp_page_index .obj_issue_toc .heading .cover img {
        width: 170px !important;
        max-width: 170px !important;
        margin: 0 0 14px !important;
    }

    .pkp_page_index .current_issue .current_issue_title {
        position: static !important;
        display: inline-block !important;
        margin: 0 0 12px !important;
    }

    .pkp_page_index .obj_issue_toc .heading .published {
        position: static !important;
        display: block !important;
        margin: 0 0 12px !important;
    }
}


/* ============================================================
   REVISI FINAL - POSISI MENU USER ADMIN
   Tujuan:
   Menu user seperti "adm_sosebi", "Dasbor", "Tampilkan profil",
   dan "Keluar" dipindahkan ke pojok kanan atas header jurnal,
   menyatu dengan desain, dan tidak lagi muncul terpisah di sisi
   kanan halaman utama.
   ============================================================ */

@media (min-width: 992px) {
    .pkp_head_wrapper {
        position: relative !important;
        overflow: visible !important;
    }

    /* Nav utama dibuat tidak menjadi patokan posisi menu user */
    .pkp_site_nav_menu {
        position: static !important;
        overflow: visible !important;
    }

    /* Posisi menu user admin di pojok kanan atas area header jurnal */
    .pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 18px !important;
        right: max(24px, calc((100% - 1160px) / 2 + 24px)) !important;
        left: auto !important;
        z-index: 9999 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        text-align: right !important;
    }

    .pkp_navigation_user {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .pkp_navigation_user > li {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_user > li > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        min-height: 32px !important;
        padding: 7px 12px !important;
        color: #ffffff !important;
        background: rgba(5, 47, 59, .38) !important;
        border: 1px solid rgba(240, 198, 106, .38) !important;
        border-radius: 999px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
        backdrop-filter: blur(4px) !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        letter-spacing: .025em !important;
        text-decoration: none !important;
        text-shadow: 0 1px 5px rgba(0, 0, 0, .22) !important;
    }

    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        color: #052f3b !important;
        background: linear-gradient(135deg, #f0c66a, #c7952b) !important;
        border-color: rgba(255, 255, 255, .56) !important;
        text-shadow: none !important;
    }

    .pkp_navigation_user .task_count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 22px !important;
        height: 22px !important;
        margin-left: 2px !important;
        padding: 0 6px !important;
        color: #052f3b !important;
        background: #f0c66a !important;
        border-radius: 999px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.16) !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    /* Dropdown Dasbor/Profile/Keluar dibuat rapi dan menempel ke tombol user */
    .pkp_navigation_user > li > ul {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        min-width: 190px !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid rgba(199,149,43,.38) !important;
        border-top: 3px solid #c7952b !important;
        border-radius: 0 0 12px 12px !important;
        box-shadow: 0 10px 26px rgba(5, 47, 59, .20) !important;
        text-align: left !important;
    }

    .pkp_navigation_user > li > ul::before {
        content: "" !important;
        position: absolute !important;
        top: -8px !important;
        right: 22px !important;
        width: 12px !important;
        height: 12px !important;
        background: #c7952b !important;
        transform: rotate(45deg) !important;
        z-index: -1 !important;
    }

    .pkp_navigation_user > li > ul > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_user > li > ul > li > a {
        display: block !important;
        padding: 10px 14px !important;
        color: #052f3b !important;
        background: #ffffff !important;
        border-left: 4px solid transparent !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 12.5px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        text-shadow: none !important;
    }

    .pkp_navigation_user > li > ul > li > a:hover,
    .pkp_navigation_user > li > ul > li > a:focus {
        color: #052f3b !important;
        background: #fbf7ed !important;
        border-left-color: #c7952b !important;
    }
}

/* Tampilan mobile: menu user tetap aman dan tidak mengganggu navigasi */
@media (max-width: 991px) {
    .pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 14px !important;
        right: 16px !important;
        left: auto !important;
        z-index: 9999 !important;
        text-align: right !important;
    }

    .pkp_navigation_user > li > a {
        padding: 6px 10px !important;
        color: #ffffff !important;
        background: rgba(5, 47, 59, .42) !important;
        border: 1px solid rgba(240, 198, 106, .32) !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    .pkp_navigation_user > li > ul {
        right: 0 !important;
        left: auto !important;
        min-width: 180px !important;
        background: #ffffff !important;
        border-top: 3px solid #c7952b !important;
        border-radius: 0 0 12px 12px !important;
        box-shadow: 0 10px 26px rgba(5, 47, 59, .20) !important;
    }

    .pkp_navigation_user > li > ul a {
        color: #052f3b !important;
        background: #ffffff !important;
        font-weight: 800 !important;
    }
}


/* ============================================================
   REVISI FINAL 2 - DROPDOWN MENU ADMIN TIDAK HILANG SAAT DIKLIK
   Masalah:
   Dropdown "Dasbor / Tampilkan profil / Keluar" hilang ketika kursor
   bergerak dari tombol "adm_sosebi" ke menu di bawahnya.
   Penyebab utama biasanya ada jarak kosong antara tombol user dan
   dropdown. Revisi ini menghilangkan gap dan memaksa dropdown tetap
   tampil saat area user menu sedang di-hover atau focus.
   ============================================================ */

@media (min-width: 992px) {

    .pkp_navigation_user_wrapper,
    .pkp_navigation_user,
    .pkp_navigation_user > li {
        overflow: visible !important;
    }

    .pkp_navigation_user > li {
        position: relative !important;
        padding-bottom: 0 !important;
    }

    /* Dropdown ditempel langsung ke tombol agar kursor tidak melewati area kosong */
    .pkp_navigation_user > li > ul {
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        margin-top: 0 !important;
        padding-top: 8px !important;
        z-index: 10000 !important;
    }

    /* Paksa dropdown tetap terlihat saat parent/menu sedang disentuh kursor */
    .pkp_navigation_user > li:hover > ul,
    .pkp_navigation_user > li:focus-within > ul,
    .pkp_navigation_user > li > ul:hover,
    .pkp_navigation_user > li > ul:focus-within {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Area transparan kecil sebagai jembatan hover antara tombol dan dropdown */
    .pkp_navigation_user > li::after {
        content: "" !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 190px !important;
        height: 10px !important;
        background: transparent !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
    }

    /* Segitiga dekoratif tidak boleh menghalangi klik */
    .pkp_navigation_user > li > ul::before {
        pointer-events: none !important;
    }

    .pkp_navigation_user > li > ul > li > a {
        position: relative !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 991px) {
    .pkp_navigation_user_wrapper,
    .pkp_navigation_user,
    .pkp_navigation_user > li {
        overflow: visible !important;
    }

    .pkp_navigation_user > li > ul {
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        margin-top: 0 !important;
        padding-top: 8px !important;
        z-index: 10000 !important;
    }

    .pkp_navigation_user > li:hover > ul,
    .pkp_navigation_user > li:focus-within > ul,
    .pkp_navigation_user > li > ul:hover,
    .pkp_navigation_user > li > ul:focus-within {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}