/* ============================================================
   NATURA — OJS REPAIR CSS
   Fix khusus berdasarkan tampilan aktual:
   - Hilangkan ruang kosong besar atas/bawah header
   - Banner full width, proporsional, tidak crop
   - Register/Login dapat overlay di atas header
   - Navigasi utama tetap rapi di bawah banner
   - Additional Menu: tombol biru + teks putih
   - Article list menjadi card elegan
   ============================================================ */

:root {
    --natura-dark: #07141b;
    --natura-dark-2: #0b2f3d;
    --natura-blue: #267da7;
    --natura-cyan: #00a4dc;
    --natura-yellow: #f6de23;
    --natura-yellow-dark: #d4bc09;
    --natura-white: #ffffff;
    --natura-text: #243542;
    --natura-muted: #667886;
    --natura-soft: #f4f9fb;
    --natura-border: #d7e7ee;
}

/* ============================================================
   1. JANGAN BIARKAN HALAMAN MELEBAR / SHIFT
   ============================================================ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================================
   2. HEADER — HAPUS RUANG KOSONG BAWAAN TEMA
   ============================================================ */

.pkp_structure_head {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.pkp_structure_head .pkp_head_wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Paksa wrapper logo/header tidak memberi ruang vertikal */
.pkp_structure_head .pkp_site_name_wrapper {
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* Paksa site name tidak memakai tinggi/padding bawaan */
.pkp_structure_head .pkp_site_name {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
}

/* Link pembungkus banner */
.pkp_structure_head .pkp_site_name > a,
.pkp_structure_head .pkp_site_name a.is_img,
.pkp_structure_head .pkp_site_name_wrapper > a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* Banner NATURA */
.pkp_structure_head .pkp_site_name img,
.pkp_structure_head .pkp_site_name .is_img img,
.pkp_structure_head .pkp_site_name_wrapper img,
img.pkp_site_name_logo,
.headerImage img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Hilangkan pseudo-element / clear bawaan yang kadang menambah tinggi */
.pkp_structure_head .pkp_head_wrapper::before,
.pkp_structure_head .pkp_head_wrapper::after,
.pkp_structure_head .pkp_site_name_wrapper::before,
.pkp_structure_head .pkp_site_name_wrapper::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   3. REGISTER / LOGIN / e-ISSN — OVERLAY DI ATAS BANNER
   sehingga tidak membuat ruang kosong tambahan
   ============================================================ */

.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 8px !important;
    right: 18px !important;
    z-index: 100 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.pkp_navigation_user,
#navigationUser {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user > li > a,
#navigationUser > li > a {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.65);
}

.pkp_navigation_user > li > a:hover,
#navigationUser > li > a:hover {
    color: var(--natura-yellow) !important;
}

/* ============================================================
   4. NAVIGASI UTAMA — TETAP DI BAWAH HEADER
   ============================================================ */

.pkp_navigation_primary_wrapper {
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 7% !important;
    background: #f2f2f2 !important;
    border-bottom: 3px solid var(--natura-cyan) !important;
}

.pkp_navigation_primary,
#navigationPrimary {
    margin: 0 !important;
}

#navigationPrimary > li > a,
.pkp_navigation_primary > li > a {
    color: #07141b !important;
    font-weight: 600 !important;
}

#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: var(--natura-blue) !important;
}

/* ============================================================
   5. ADDITIONAL MENU / SIDEBAR
   Semua tombol biru, semua teks PUTIH
   ============================================================ */

.pkp_structure_sidebar .pkp_block {
    background: #ffffff !important;
    border: 1px solid var(--natura-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(7,47,61,.06) !important;
    padding: 14px !important;
    margin-bottom: 18px !important;
}

.pkp_structure_sidebar .pkp_block .title {
    color: var(--natura-dark) !important;
    font-weight: 700 !important;
}

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

.pkp_structure_sidebar .pkp_block .content ul li {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

/* Selector dibuat lebih kuat agar tidak kalah dari tema */
.pkp_structure_sidebar .pkp_block .content ul li > a,
.pkp_structure_sidebar .pkp_block .content li a,
.pkp_structure_sidebar .pkp_block ul li a {
    display: block !important;
    background: linear-gradient(180deg,#267da7 0%,#176787 100%) !important;
    color: #ffffff !important;
    border: 1px solid #176787 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all .2s ease !important;
}

.pkp_structure_sidebar .pkp_block .content ul li > a:visited,
.pkp_structure_sidebar .pkp_block .content li a:visited,
.pkp_structure_sidebar .pkp_block ul li a:visited {
    color: #ffffff !important;
}

.pkp_structure_sidebar .pkp_block .content ul li > a:hover,
.pkp_structure_sidebar .pkp_block .content ul li > a:focus,
.pkp_structure_sidebar .pkp_block .content li a:hover,
.pkp_structure_sidebar .pkp_block ul li a:hover {
    background: var(--natura-yellow) !important;
    border-color: var(--natura-yellow-dark) !important;
    color: var(--natura-dark) !important;
    transform: translateX(2px);
}

/* ============================================================
   6. DAFTAR ARTIKEL = CARD
   ============================================================ */

.obj_article_summary,
.cmp_article_list .obj_article_summary,
.page_issue .obj_article_summary,
.page_index_journal .obj_article_summary,
.issue_toc .obj_article_summary,
.sections .obj_article_summary {
    background: #ffffff !important;
    border: 1px solid var(--natura-border) !important;
    border-left: 4px solid var(--natura-blue) !important;
    border-radius: 10px !important;
    padding: 18px 20px !important;
    margin: 0 0 18px 0 !important;
    box-shadow: 0 5px 18px rgba(7,47,61,.09) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.obj_article_summary:hover,
.cmp_article_list .obj_article_summary:hover,
.page_issue .obj_article_summary:hover,
.page_index_journal .obj_article_summary:hover,
.issue_toc .obj_article_summary:hover {
    transform: translateY(-2px);
    border-left-color: var(--natura-yellow) !important;
    box-shadow: 0 10px 26px rgba(7,47,61,.15) !important;
}

/* Judul artikel */
.obj_article_summary .title,
.obj_article_summary .title a,
.cmp_article_list .title a {
    color: var(--natura-dark) !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
    text-decoration: none !important;
}

.obj_article_summary .title a:hover,
.cmp_article_list .title a:hover {
    color: var(--natura-blue) !important;
}

/* Meta artikel */
.obj_article_summary .authors,
.obj_article_summary .meta,
.obj_article_summary .pages,
.obj_article_summary .subtitle,
.obj_article_summary .published,
.obj_article_summary .summary {
    color: var(--natura-muted) !important;
    line-height: 1.55 !important;
}

/* ============================================================
   7. TOMBOL PDF
   ============================================================ */

.obj_article_summary .obj_galley_link,
.obj_article_summary .galleys_links a,
.obj_article_summary .galleys a,
.cmp_article_list .obj_galley_link,
.cmp_article_list .galleys_links a {
    display: inline-block !important;
    background: var(--natura-blue) !important;
    color: #ffffff !important;
    border: 1px solid var(--natura-blue) !important;
    border-radius: 8px !important;
    padding: 7px 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(38,125,167,.16) !important;
    transition: all .2s ease !important;
}

.obj_article_summary .obj_galley_link:visited,
.obj_article_summary .galleys_links a:visited,
.obj_article_summary .galleys a:visited {
    color: #ffffff !important;
}

.obj_article_summary .obj_galley_link:hover,
.obj_article_summary .galleys_links a:hover,
.obj_article_summary .galleys a:hover,
.cmp_article_list .obj_galley_link:hover,
.cmp_article_list .galleys_links a:hover {
    background: var(--natura-yellow) !important;
    border-color: var(--natura-yellow-dark) !important;
    color: var(--natura-dark) !important;
    transform: translateY(-1px);
}

/* ============================================================
   8. RESPONSIVE TABLET
   ============================================================ */

@media (max-width: 991px) {
    .pkp_navigation_primary_wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .obj_article_summary,
    .cmp_article_list .obj_article_summary,
    .page_issue .obj_article_summary {
        padding: 16px !important;
    }
}

/* ============================================================
   9. RESPONSIVE HP
   ============================================================ */

@media (max-width: 640px) {
    .pkp_structure_head,
    .pkp_structure_head .pkp_head_wrapper,
    .pkp_structure_head .pkp_site_name_wrapper,
    .pkp_structure_head .pkp_site_name {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

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

    /* Agar register/login tidak menumpuk di HP */
    .pkp_navigation_user_wrapper {
        position: static !important;
        width: 100% !important;
        padding: 6px 10px !important;
        background: var(--natura-dark) !important;
        text-align: right !important;
    }

    .pkp_navigation_primary_wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .obj_article_summary,
    .cmp_article_list .obj_article_summary,
    .page_issue .obj_article_summary {
        padding: 13px 14px !important;
        margin-bottom: 14px !important;
        border-radius: 8px !important;
        border-left-width: 3px !important;
    }
}
/* ============================================================
   10. FIX JARAK BESAR ANTARA NAVIGASI DAN ISI HALAMAN
   Berdasarkan tampilan aktual NATURA
   ============================================================ */

/* Hilangkan ruang vertikal besar bawaan theme */
.pkp_structure_content,
.pkp_structure_content.has_sidebar {
    margin-top: 0 !important;
    padding-top: 22px !important;
}

/* Main dan sidebar dimulai pada posisi yang sama */
.pkp_structure_main,
.pkp_structure_sidebar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Homepage tidak diberi jarak atas tambahan */
.page_index_journal,
.page_index_journal .journal_description,
.page_index_journal .additional_content,
.page_index_journal .current_issue,
.page_index_journal .cmp_announcements {
    margin-top: 0 !important;
}

/* Jika tema memberi padding tambahan pada halaman */
.page_index_journal,
.page_issue,
.page_article,
.page_search,
.page_login,
.page_register {
    padding-top: 0 !important;
}

/* Sidebar sejajar dengan konten utama */
.pkp_structure_sidebar {
    align-self: flex-start !important;
}

/* Desktop: jarak ringkas sesudah menu */
@media (min-width: 992px) {
    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        padding-top: 22px !important;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        padding-top: 18px !important;
    }
}

/* HP */
@media (max-width: 640px) {
    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        padding-top: 14px !important;
    }
}

/* ============================================================
   11. TOP USER INFO — KOTAK PER ITEM DI POJOK KANAN
   Register / Login / e-ISSN dibuat kotak masing-masing,
   bukan satu kotak besar.
   ============================================================ */

@media (min-width: 641px) {

    .pkp_navigation_user_wrapper {
        position: absolute !important;

        top: 8px !important;
        right: 18px !important;
        left: auto !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 150 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .pkp_navigation_user,
    #navigationUser {
        display: flex !important;

        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;

        gap: 8px !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    /* Masing-masing item menjadi kotak kecil sendiri */
    .pkp_navigation_user > li,
    #navigationUser > li {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 6px 10px !important;

        background: rgba(7, 20, 27, 0.58) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 8px !important;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;

        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;

        white-space: nowrap !important;

        transition:
            background .20s ease,
            border-color .20s ease,
            transform .20s ease;
    }

    .pkp_navigation_user > li > a,
    #navigationUser > li > a,
    .pkp_navigation_user > li *,
    #navigationUser > li * {
        color: #ffffff !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        text-shadow: none !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_user > li:hover,
    #navigationUser > li:hover {
        background: rgba(38, 125, 167, 0.96) !important;
        border-color: rgba(0, 164, 220, 0.96) !important;
        transform: translateY(-1px);
    }

    .pkp_navigation_user > li > a:hover,
    #navigationUser > li > a:hover {
        color: var(--natura-yellow) !important;
    }
}


/* ============================================================
   12. DESKTOP LAYOUT — GESER SIDEBAR LEBIH KE KANAN
   Mengurangi ruang kosong di sisi kanan halaman.
   ============================================================ */

@media (min-width: 992px) {

    /* Perlebar area konten keseluruhan */
    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        width: calc(100% - 50px) !important;
        max-width: 1280px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Kolom utama fleksibel */
    .pkp_structure_main {
        width: calc(100% - 330px) !important;
        max-width: none !important;
    }

    /* Geser seluruh sidebar sedikit ke kanan */
    .pkp_structure_sidebar {
        width: 300px !important;
        max-width: 300px !important;

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

        transform: translateX(12px);
        align-self: flex-start !important;
    }

    /* Semua block mengikuti lebar sidebar */
    .pkp_structure_sidebar .pkp_block {
        width: 100% !important;
        max-width: 100% !important;

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


/* ============================================================
   13. LAPTOP / LAYAR SEDANG
   ============================================================ */

@media (min-width: 992px) and (max-width: 1200px) {

    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        width: calc(100% - 30px) !important;
    }

    .pkp_structure_sidebar {
        width: 285px !important;
        max-width: 285px !important;

        margin-left: 22px !important;
        transform: translateX(5px);
    }

    .pkp_structure_main {
        width: calc(100% - 307px) !important;
    }
}


/* ============================================================
   14. TABLET & HP — KEMBALI NORMAL AGAR TIDAK KELUAR LAYAR
   ============================================================ */

@media (max-width: 991px) {

    .pkp_structure_content,
    .pkp_structure_content.has_sidebar,
    .pkp_structure_main,
    .pkp_structure_sidebar {
        width: 100% !important;
        max-width: 100% !important;

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

        transform: none !important;
    }
}


/* ============================================================
   15. MOBILE USER INFO
   Tetap rapi di sisi kanan, box per item tetap dipertahankan.
   ============================================================ */

@media (max-width: 640px) {

    .pkp_navigation_user_wrapper {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        left: auto !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 6px 10px !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        text-align: right !important;
    }

    .pkp_navigation_user,
    #navigationUser {
        display: flex !important;

        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        gap: 6px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_user > li,
    #navigationUser > li {
        display: inline-flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 5px 9px !important;

        background: rgba(7, 20, 27, 0.88) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 7px !important;

        color: #ffffff !important;
        font-weight: 700 !important;
    }

    .pkp_navigation_user > li > a,
    #navigationUser > li > a,
    .pkp_navigation_user > li *,
    #navigationUser > li * {
        color: #ffffff !important;
    }
}


/* ============================================================
   16. PASTIKAN TEKS ADDITIONAL MENU TETAP PUTIH
   ============================================================ */

.pkp_structure_sidebar .pkp_block .content ul li > a,
.pkp_structure_sidebar .pkp_block .content li > a,
.pkp_structure_sidebar .pkp_block ul li > a,
.pkp_structure_sidebar .pkp_block .content ul li > a *,
.pkp_structure_sidebar .pkp_block .content li > a *,
.pkp_structure_sidebar .pkp_block ul li > a * {
    color: #ffffff !important;
}

.pkp_structure_sidebar .pkp_block .content ul li > a:visited,
.pkp_structure_sidebar .pkp_block .content li > a:visited,
.pkp_structure_sidebar .pkp_block ul li > a:visited {
    color: #ffffff !important;
}

/* Hover NATURA tetap kuning, tetapi teks dibuat gelap agar kontras */
.pkp_structure_sidebar .pkp_block .content ul li > a:hover,
.pkp_structure_sidebar .pkp_block .content ul li > a:focus,
.pkp_structure_sidebar .pkp_block .content li > a:hover,
.pkp_structure_sidebar .pkp_block ul li > a:hover {
    color: var(--natura-dark) !important;
}

.pkp_structure_sidebar .pkp_block .content ul li > a:hover *,
.pkp_structure_sidebar .pkp_block .content li > a:hover *,
.pkp_structure_sidebar .pkp_block ul li > a:hover * {
    color: var(--natura-dark) !important;
}