/* =========================================================
   FINAL CSS OJS 3.4.0.10
   Tema: Biru Metalik + Gold
   Fungsi:
   1. Header pas dan rapi pada zoom 100%
   2. Background tetap biru metalik kombinasi gold, bukan putih
   3. Menu, admin, search, konten, card, sidebar, footer dirapikan
   4. Siap upload di:
      Website > Appearance/Tampilan > Advanced > Journal style sheet

   Catatan:
   - Pakai file ini sebagai CSS final.
   - Setelah upload: Save/Simpan, lalu tekan Ctrl + F5.
   ========================================================= */


/* =========================================================
   0. VARIABEL WARNA
   ========================================================= */

:root {
    --arcika-navy-dark: #03101f;
    --arcika-navy: #06172c;
    --arcika-blue: #0a2d4f;
    --arcika-blue-light: #0f4f7a;
    --arcika-gold: #d4af37;
    --arcika-gold-light: #ffdf73;
    --arcika-text: #f4f7fb;
    --arcika-muted: #dbe7f4;
}


/* =========================================================
   1. BACKGROUND UTAMA FULL BIRU METALIK GOLD
   ========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    color: var(--arcika-text) !important;
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 215, 90, 0.14), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(255, 215, 90, 0.08), transparent 24%),
        linear-gradient(135deg, #06172c 0%, #0a2d4f 38%, #0f4f7a 72%, #06172c 100%) !important;
}

/* Paksa semua wrapper bawaan OJS tidak kembali putih */
.pkp_structure_page,
.pkp_structure_body,
.pkp_structure_content,
.pkp_page_index,
.page_index_journal,
.page_index_site,
.page,
.cmp_wrapper,
.container {
    background:
        radial-gradient(circle at top left, rgba(255, 215, 90, 0.10), transparent 26%),
        linear-gradient(135deg, #06172c 0%, #0a2d4f 42%, #0f4f7a 75%, #06172c 100%) !important;
}

/* Hilangkan garis/ruang putih bawaan */
.pkp_structure_page,
.pkp_structure_body,
.pkp_structure_content {
    border-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   2. HEADER FULL, PAS, DAN SMOOTH
   ========================================================= */

.pkp_structure_head {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: var(--arcika-navy-dark) !important;
    border-bottom: 0 !important;
}

/* Wrapper header tidak dibatasi container tengah */
.pkp_structure_head .pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    background: var(--arcika-navy-dark) !important;
}

/* Area gambar header */
.pkp_site_name > a,
.pkp_site_name .is_img {
    display: block !important;
    width: 100% !important;
    height: clamp(135px, 12vw, 165px) !important;
    max-height: 165px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--arcika-navy-dark) !important;
}

/* Gambar header mengikuti lebar layar dan tetap rapi */
.pkp_site_name img,
.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(135px, 12vw, 165px) !important;
    max-height: 165px !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* =========================================================
   3. ADMIN / LOGIN DI KANAN ATAS
   ========================================================= */

.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 10px !important;
    right: 28px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 9999 !important;
    text-align: right !important;
}

.pkp_navigation_user {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user > li {
    background: transparent !important;
    border: 0 !important;
    margin: 0 0 0 12px !important;
    padding: 0 !important;
}

.pkp_navigation_user > li > a,
.pkp_navigation_user_wrapper a {
    color: var(--arcika-gold-light) !important;
    background: rgba(3, 16, 31, 0.48) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 5px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user_wrapper a:hover {
    color: #ffffff !important;
    background: rgba(212, 175, 55, 0.20) !important;
}


/* =========================================================
   4. MENU NAVIGASI UTAMA
   ========================================================= */

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    position: relative !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(90deg, #03101f 0%, #061f35 45%, #03101f 100%) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-bottom: 6px solid var(--arcika-gold) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
    overflow: visible !important;
    z-index: 1000 !important;
}

/* Menu kiri tidak terpotong dan tidak menutupi header */
.pkp_navigation_primary {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 32px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 220px 0 70px !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    float: none !important;
    transform: none !important;
    left: auto !important;
}

/* Item menu */
.pkp_navigation_primary > li {
    position: relative !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    background: transparent !important;
}

.pkp_navigation_primary > li > a {
    display: block !important;
    padding: 17px 0 !important;
    margin: 0 !important;
    color: var(--arcika-gold-light) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.22s ease-in-out !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 223, 115, 0.55) !important;
}

/* Dropdown menu */
.pkp_navigation_primary ul {
    background: #061f35 !important;
    border: 1px solid var(--arcika-gold) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32) !important;
}

.pkp_navigation_primary ul a {
    color: var(--arcika-gold-light) !important;
    background: #061f35 !important;
    padding: 10px 16px !important;
}

.pkp_navigation_primary ul a:hover {
    color: #ffffff !important;
    background: #0a2d4f !important;
}


/* =========================================================
   5. SEARCH DI KANAN, TIDAK MEPET
   ========================================================= */

.pkp_navigation_search_wrapper {
    position: absolute !important;
    right: 55px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 1100 !important;
}

.pkp_navigation_search_wrapper a {
    color: var(--arcika-gold-light) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.pkp_navigation_search_wrapper a:hover {
    color: #ffffff !important;
}


/* =========================================================
   6. KONTEN UTAMA DAN SIDEBAR
   ========================================================= */

.pkp_structure_content {
    clear: both !important;
    margin-top: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 32px !important;
}

.pkp_structure_content .pkp_structure_main {
    background:
        linear-gradient(145deg, rgba(5, 18, 35, 0.96), rgba(10, 48, 82, 0.96)) !important;
    color: var(--arcika-text) !important;
    border: 1px solid rgba(212, 175, 55, 0.36) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
    padding-top: 24px !important;
}

.pkp_structure_sidebar {
    background: transparent !important;
}


/* =========================================================
   7. CARD / BLOK / LIST JURNAL
   ========================================================= */

.pkp_page_index .journals > ul > li,
.obj_issue_summary,
.obj_article_summary,
.cmp_article_list > li,
.cmp_announcements > li,
.cmp_notification,
.pkp_block {
    background:
        linear-gradient(145deg, rgba(7, 30, 57, 0.98), rgba(12, 59, 98, 0.98)) !important;
    border: 1px solid rgba(212, 175, 55, 0.58) !important;
    border-radius: 10px !important;
    padding: 22px !important;
    margin-bottom: 22px !important;
    color: var(--arcika-text) !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar block */
.pkp_structure_sidebar .pkp_block {
    background:
        linear-gradient(145deg, rgba(4, 17, 33, 0.98), rgba(9, 45, 78, 0.98)) !important;
    border: 1px solid rgba(212, 175, 55, 0.60) !important;
}

.pkp_block .title {
    color: var(--arcika-gold-light) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.50) !important;
    padding-bottom: 8px !important;
}


/* =========================================================
   8. TEKS, JUDUL, LINK
   ========================================================= */

.pkp_structure_main,
.pkp_structure_main p,
.pkp_structure_main li,
.pkp_structure_main div,
.pkp_structure_sidebar,
.pkp_structure_sidebar p,
.pkp_structure_sidebar li,
p, li, td, th, label {
    color: var(--arcika-text) !important;
}

h1, h2, h3, h4, h5, h6,
.page_title,
.obj_issue_toc .heading,
.pkp_page_index .journals h3,
.pkp_page_index .journals h2 {
    color: var(--arcika-gold-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

a,
.pkp_structure_main a,
.pkp_structure_sidebar a,
.pkp_page_index a {
    color: #ffd866 !important;
    font-weight: 600 !important;
    transition: color 0.22s ease-in-out !important;
}

a:hover,
.pkp_structure_main a:hover,
.pkp_structure_sidebar a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

hr,
.separator {
    border-color: rgba(212, 175, 55, 0.45) !important;
}


/* =========================================================
   9. TOMBOL DAN FORM
   ========================================================= */

button,
input[type="submit"],
.cmp_button,
.cmp_form .buttons button,
.pkp_button,
a.cmp_button {
    background: linear-gradient(135deg, var(--arcika-gold), var(--arcika-gold-light), #b88918) !important;
    color: #06172c !important;
    border: 1px solid #fff1a8 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important;
}

button:hover,
input[type="submit"]:hover,
.cmp_button:hover,
.pkp_button:hover,
a.cmp_button:hover {
    background: linear-gradient(135deg, var(--arcika-gold-light), var(--arcika-gold), #9f7411) !important;
    color: #000000 !important;
}

input,
textarea,
select {
    background-color: #f8fbff !important;
    color: #06172c !important;
    border: 1px solid var(--arcika-gold) !important;
    border-radius: 5px !important;
}

fieldset {
    border-color: rgba(212, 175, 55, 0.50) !important;
}


/* =========================================================
   10. TABLE
   ========================================================= */

table {
    border-color: rgba(212, 175, 55, 0.45) !important;
}

th {
    background: rgba(212, 175, 55, 0.18) !important;
    color: var(--arcika-gold-light) !important;
}

td {
    border-color: rgba(212, 175, 55, 0.25) !important;
}


/* =========================================================
   11. FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper,
.pkp_structure_footer {
    background: linear-gradient(90deg, #03101f, #0b335a, #03101f) !important;
    color: var(--arcika-text) !important;
    border-top: 3px solid var(--arcika-gold) !important;
}

.pkp_structure_footer a {
    color: #ffd866 !important;
}


/* =========================================================
   12. HOMEPAGE DAN JOURNAL PAGE KONSISTEN
   ========================================================= */

.page_index_site .pkp_site_name > a,
.page_index_site .pkp_site_name .is_img,
.page_index_journal .pkp_site_name > a,
.page_index_journal .pkp_site_name .is_img {
    height: clamp(135px, 12vw, 165px) !important;
    max-height: 165px !important;
    overflow: hidden !important;
}

.page_index_site .pkp_site_name img,
.page_index_site .pkp_site_name .is_img img,
.page_index_journal .pkp_site_name img,
.page_index_journal .pkp_site_name .is_img img {
    height: clamp(135px, 12vw, 165px) !important;
    max-height: 165px !important;
    object-fit: cover !important;
    object-position: center center !important;
}


/* =========================================================
   13. RESPONSIVE TABLET DAN HP
   ========================================================= */

@media screen and (max-width: 992px) {
    .pkp_navigation_primary {
        gap: 22px !important;
        padding: 0 170px 0 36px !important;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_search_wrapper a {
        font-size: 17px !important;
    }

    .pkp_navigation_search_wrapper {
        right: 32px !important;
    }
}

@media screen and (max-width: 768px) {
    .pkp_site_name > a,
    .pkp_site_name .is_img,
    .pkp_site_name img,
    .pkp_site_name .is_img img,
    .page_index_site .pkp_site_name > a,
    .page_index_site .pkp_site_name .is_img,
    .page_index_site .pkp_site_name img,
    .page_index_site .pkp_site_name .is_img img,
    .page_index_journal .pkp_site_name > a,
    .page_index_journal .pkp_site_name .is_img,
    .page_index_journal .pkp_site_name img,
    .page_index_journal .pkp_site_name .is_img img {
        height: 105px !important;
        max-height: 105px !important;
    }

    .pkp_navigation_user_wrapper {
        top: 7px !important;
        right: 10px !important;
    }

    .pkp_navigation_user > li > a,
    .pkp_navigation_user_wrapper a {
        font-size: 12px !important;
        padding: 4px 7px !important;
    }

    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        min-height: auto !important;
    }

    .pkp_navigation_primary {
        display: block !important;
        padding: 8px 18px !important;
        min-height: auto !important;
    }

    .pkp_navigation_primary > li > a {
        font-size: 16px !important;
        padding: 9px 0 !important;
    }

    .pkp_navigation_search_wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        padding: 10px 18px 14px 18px !important;
    }

    .pkp_page_index .journals > ul > li,
    .obj_article_summary,
    .obj_issue_summary,
    .pkp_block {
        padding: 16px !important;
    }

    .pkp_structure_content {
        padding-top: 16px !important;
    }
}