/* ============================================================
   KETEG JOURNAL — CSS REDESIGN TOTAL
   Tema: Merah Maroon + Emas + Putih Bersih
   Oleh: Claude AI — 1 April 2026 (v3: fix header mobile + warna kertas putih)
   Instruksi: SEMUA PERANGKAT gunakan tampilan desktop (no mobile collapse)
   ============================================================ */

/* Font asli dipertahankan: system font stack bawaan OJS */

/* ============================================================
   VARIABEL WARNA UTAMA (PALET SELARAS HEADER)
   ============================================================ */
:root {
  --maroon-deep:   #3b0a0a;   /* Merah tua sangat gelap (header) */
  --maroon-mid:    #6b1414;   /* Merah maroon utama */
  --maroon-light:  #8c2020;   /* Merah maroon lebih cerah */
  --gold-bright:   #d4a017;   /* Emas cerah */
  --gold-mid:      #b8860b;   /* Emas tua */
  --gold-pale:     #f0d080;   /* Emas pucat / krem keemasan */
  --cream:         #ffffff;   /* Putih bersih */
  --dark-navy:     #0d0d1a;   /* Biru navy sangat gelap (sidebar) */
  --sidebar-bg:    #1a0505;   /* Background sidebar merah hitam */
  --text-light:    #f5ead0;   /* Teks terang di atas gelap */
  --text-muted:    #c9a87a;   /* Teks emas pucat */
}

/* ============================================================
   1. BODY & BACKGROUND GLOBAL
   ============================================================ */
body {
    background-image: url('https://jurnal.isi-ska.ac.id/public/site/images/admin_keteg/bg-utama-maron.png') !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.pkp_structure_page {
    background-color: transparent !important;
}

/* ============================================================
   2. HEADER — AREA BANNER DAN JUDUL JURNAL
   ============================================================ */
.pkp_structure_head {
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 4px solid var(--gold-bright) !important;
    padding: 0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}

.pkp_head_wrapper {
    background-image: url('https://jurnal.isi-ska.ac.id/public/site/images/admin_keteg/header-keteg.png') !important;
    background-size: cover !important;
    background-position: center 80% !important;
    background-repeat: no-repeat !important;
    background-color: var(--maroon-deep) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name a {
    display: block !important;
    width: 100% !important;
    min-height: 180px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    background: transparent !important;
}

.pkp_site_name a::before,
.pkp_site_name a::after {
    display: none !important;
}

/* ============================================================
   3. NAVIGASI UTAMA — DESAIN ELEGAN SELARAS HEADER
   ============================================================ */
.pkp_navigation_primary_wrapper {
    background: linear-gradient(to right, var(--maroon-deep) 0%, #5a0e0e 50%, var(--maroon-deep) 100%) !important;
    border-bottom: 2px solid var(--gold-mid) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* Tautan navigasi utama */
.pkp_navigation_primary li a,
.pkp_navigation_primary > ul > li > a {
    color: var(--gold-pale) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 12px 18px !important;
    text-decoration: none !important;
    transition: color 0.25s ease, background 0.25s ease !important;
    border-bottom: 3px solid transparent !important;
    display: inline-block !important;
}

.pkp_navigation_primary li a:hover,
.pkp_navigation_primary > ul > li > a:hover {
    color: #ffffff !important;
    background-color: rgba(212, 160, 23, 0.15) !important;
    border-bottom: 3px solid var(--gold-bright) !important;
}

/* Search link */
.pkp_navigation_primary .search a,
#navigationPrimary .pkp_nav_link_search {
    color: var(--gold-pale) !important;
}

/* ============================================================
   4. LAYOUT UTAMA — KONTEN + SIDEBAR
   ============================================================ */
.pkp_structure_content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 100vh !important;
}

/* Area konten / "kertas" artikel */
.pkp_structure_main {
    background-color: var(--cream) !important;
    padding: 40px 50px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: -6px 0 20px rgba(0,0,0,0.2) !important;
    padding-top: 40px !important;
}

/* Judul-judul di area konten */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {
    color: var(--maroon-deep) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Garis pemisah di area konten */
.pkp_structure_main hr,
.pkp_structure_main .separator {
    border-color: var(--gold-mid) !important;
    border-width: 1px !important;
}

/* Link artikel */
.pkp_structure_main a {
    color: var(--maroon-mid) !important;
}

.pkp_structure_main a:hover {
    color: var(--maroon-light) !important;
    text-decoration: underline !important;
}

/* Judul artikel di listing */
.pkp_structure_main .obj_article_summary .title a,
.pkp_structure_main h3.title a {
    color: var(--maroon-mid) !important;
    font-weight: 700 !important;
}

/* ============================================================
   5. SIDEBAR — BACKGROUND SELARAS MAROON
   ============================================================ */
.pkp_structure_sidebar,
.col-md-3.pkp_sidebar,
aside.pkp_sidebar {
    background-image: url('https://jurnal.isi-ska.ac.id/public/site/images/admin_keteg/background-navigasi-bd5ddf1def3aef024887c61cd7c474a5.png') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    background-position: top !important;
    background-color: var(--sidebar-bg) !important;
    padding: 30px 15px 20px 15px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.35) !important;
    border-right: 2px solid var(--gold-mid) !important;
}

/* Pastikan block dalam sidebar transparan */
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block,
.pkp_structure_sidebar > div,
.pkp_structure_sidebar > aside {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Judul block di sidebar (MENU, Information, dll.) */
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .block .title {
    color: var(--gold-bright) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(212, 160, 23, 0.4) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7) !important;
}

/* ============================================================
   6. TOMBOL MENU NAVIGASI SIDEBAR — REDESIGN TOTAL
      Warna: Merah Maroon Gradien + Aksen Emas
   ============================================================ */
ul.menu-keteg-interaktif {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

ul.menu-keteg-interaktif li {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

ul.menu-keteg-interaktif li a {
    display: block !important;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    color: var(--gold-pale) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1.3 !important;

    /* Gradien maroon elegan */
    background: linear-gradient(135deg, #7a1515 0%, #4a0a0a 60%, #3b0808 100%) !important;

    /* Border emas tipis di atas dan kiri untuk efek kedalaman */
    border-top: 1px solid rgba(212, 160, 23, 0.5) !important;
    border-left: 1px solid rgba(212, 160, 23, 0.3) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.4) !important;
    border-radius: 5px !important;

    /* Bayangan halus + garis cahaya emas di dalam */
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(212, 160, 23, 0.25) !important;

    transition: all 0.22s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Kilap halus di atas tombol */
ul.menu-keteg-interaktif li a::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 40% !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent) !important;
    pointer-events: none !important;
    border-radius: 5px 5px 0 0 !important;
}

/* Hover: lebih terang, garis emas menyala */
ul.menu-keteg-interaktif li a:hover {
    background: linear-gradient(135deg, #9e1c1c 0%, #6b1010 60%, #520c0c 100%) !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(212, 160, 23, 0.9) !important;
    border-left: 1px solid rgba(212, 160, 23, 0.6) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(212, 160, 23, 0.5) !important;
    transform: translateX(3px) !important;
    text-shadow: 0 0 8px rgba(240, 208, 128, 0.4) !important;
}

/* Aktif: sedikit turun */
ul.menu-keteg-interaktif li a:active {
    background: linear-gradient(135deg, #3b0808 0%, #5a0e0e 100%) !important;
    transform: translateX(1px) translateY(1px) !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.5) !important;
}

/* ============================================================
   7. TOMBOL INFORMATION BLOCK (For Readers, Authors, Librarians)
      Warna: Emas Metalik
   ============================================================ */
.block_information .title {
    color: var(--gold-bright) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(212, 160, 23, 0.4) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.block_information ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.block_information ul li a {
    display: block !important;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    text-align: center !important;
    color: #1a0a00 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: 5px !important;

    /* Gradien emas metalik */
    background: linear-gradient(135deg, #d4a017 0%, #b8860b 50%, #9a6f08 100%) !important;

    border-top: 1px solid rgba(255, 220, 100, 0.7) !important;
    border-left: 1px solid rgba(255, 220, 100, 0.4) !important;
    border-bottom: 1px solid rgba(80, 50, 0, 0.6) !important;
    border-right: 1px solid rgba(80, 50, 0, 0.4) !important;

    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,240,150,0.4) !important;

    transition: all 0.22s ease !important;
}

.block_information ul li a:hover {
    background: linear-gradient(135deg, #e0b020 0%, #c9950d 50%, #a87c0a 100%) !important;
    color: #0d0500 !important;
    box-shadow:
        0 4px 10px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,250,180,0.6) !important;
    transform: translateX(3px) !important;
}

.block_information ul li a:active {
    background: linear-gradient(135deg, #9a6f08 0%, #b8860b 100%) !important;
    transform: translateX(1px) translateY(1px) !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* ============================================================
   8. TOMBOL "VIEW MY STATS" — ELEGAN MAROON + EMAS
   ============================================================ */
.tombol-stats-3d {
    display: inline-block !important;
    color: var(--gold-pale) !important;
    text-decoration: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 12px !important;

    background: linear-gradient(135deg, #7a1515 0%, #4a0a0a 60%, #3b0808 100%) !important;

    border-top: 1px solid rgba(212, 160, 23, 0.6) !important;
    border-left: 1px solid rgba(212, 160, 23, 0.3) !important;
    border-bottom: 2px solid rgba(0,0,0,0.7) !important;
    border-right: 1px solid rgba(0,0,0,0.5) !important;
    border-radius: 6px !important;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(212, 160, 23, 0.3) !important;

    padding: 8px 20px !important;
    transition: all 0.25s ease !important;
}

.tombol-stats-3d:hover {
    background: linear-gradient(135deg, #9e1c1c 0%, #6b1010 60%, #520c0c 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 8px 16px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(212, 160, 23, 0.5) !important;
    text-decoration: none !important;
}

/* ============================================================
   9. GRAFIK SITASI (CHART SINTA CLONE) — SELARAS TEMA
   ============================================================ */
.sinta-chart-container {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(212, 160, 23, 0.3) !important;
    border-radius: 8px !important;
    padding: 15px 10px 10px 10px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    margin-bottom: 15px !important;
}

.sinta-chart-title {
    text-align: center !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.sinta-bars-wrapper {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    height: 120px !important;
    border-bottom: 1px solid rgba(212, 160, 23, 0.5) !important;
    padding-bottom: 2px !important;
    gap: 2px !important;
    position: relative !important;
    background-image: linear-gradient(to bottom, rgba(212,160,23,0.06) 1px, transparent 1px) !important;
    background-size: 100% 25% !important;
}

.sinta-bar-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: flex-end !important;
}

.sinta-bar {
    width: 75% !important;
    background: linear-gradient(to top, #8c2020, #d4a017) !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
    position: relative !important;
    border-radius: 2px 2px 0 0 !important;
}

.sinta-bar::before {
    content: "" !important;
    position: absolute !important;
    top: -4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    background-color: var(--gold-bright) !important;
    border-radius: 50% !important;
    border: 1.5px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
    z-index: 2 !important;
}

.sinta-bar::after {
    content: attr(data-value) !important;
    position: absolute !important;
    top: -24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: var(--maroon-deep) !important;
    color: var(--gold-pale) !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s, top 0.2s !important;
    z-index: 10 !important;
    border: 1px solid var(--gold-mid) !important;
}

.sinta-bar:hover {
    background: linear-gradient(to top, #a82828, #e8b520) !important;
}

.sinta-bar:hover::after {
    opacity: 1 !important;
    top: -28px !important;
}

.sinta-year {
    font-size: 9px !important;
    color: var(--text-muted) !important;
    margin-top: 5px !important;
}

/* Tinggi batang grafik */
.bar-18 { height: 19%; }
.bar-19 { height: 22%; }
.bar-20 { height: 33%; }
.bar-21 { height: 48%; }
.bar-22 { height: 90%; }
.bar-23 { height: 68%; }
.bar-24 { height: 57%; }
.bar-25 { height: 71%; }
.bar-26 { height: 9%;  }

/* ============================================================
   10. INDEXING LOGOS — BINGKAI ELEGAN
   ============================================================ */
.indexing-container {
    text-align: center !important;
    padding: 10px 0 !important;
}

.indexing-title {
    color: var(--gold-bright) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-bottom: 18px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7) !important;
}

.indexing-item {
    display: block !important;
    margin: 0 auto 14px auto !important;
    width: 85% !important;
    max-width: 250px !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.4),
        0 0 0 1px rgba(212, 160, 23, 0.3) !important;
    border: 1px solid rgba(212, 160, 23, 0.4) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.indexing-item:hover {
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow:
        0 10px 20px rgba(0,0,0,0.5),
        0 0 0 2px var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
}

.indexing-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.efek-zoom-index {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.efek-zoom-index:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5), 0 0 0 2px var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
    position: relative !important;
    z-index: 50 !important;
}

/* ============================================================
   11. FOOTER — SELARAS MAROON & EMAS
   ============================================================ */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
    background: linear-gradient(to bottom, #1a0505, #0d0000) !important;
    color: #d0c0a0 !important;
    border-top: 3px solid var(--gold-bright) !important;
    margin-top: 0 !important;
}

.pkp_structure_footer {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.pkp_structure_footer a {
    color: var(--gold-bright) !important;
    text-decoration: none !important;
}

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

.pkp_structure_footer img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.75 !important;
}

/* ============================================================
   12. TOMBOL PDF & AKSI ARTIKEL — SELARAS TEMA
   ============================================================ */
.pkp_structure_main .btn,
.pkp_structure_main .pkp_button,
.pkp_structure_main a.btn,
.pkp_structure_main a[class*="pdf"] {
    background: linear-gradient(135deg, #7a1515 0%, #4a0a0a 100%) !important;
    color: var(--gold-pale) !important;
    border: 1px solid rgba(212, 160, 23, 0.4) !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.pkp_structure_main .btn:hover,
.pkp_structure_main a.btn:hover {
    background: linear-gradient(135deg, #9e1c1c 0%, #6b1010 100%) !important;
    color: #ffffff !important;
    border-color: var(--gold-bright) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   13. MARGIN & LAYOUT KOREKSI
   ============================================================ */
.pkp_structure_page,
.pkp_structure_content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.pkp_structure_sidebar {
    margin-top: 0 !important;
}

/* ============================================================
   14. MOBILE — TETAP TAMPILAN DESKTOP (TIDAK ADA COLLAPSE)
   
   Permintaan khusus: Di HP pun tetap tampilkan layout desktop.
   Sidebar tetap terlihat di samping, tidak disembunyikan.
   Teks dan konten tidak di-stack ke bawah.
   Zoom browser / scroll horizontal dibolehkan.
   ============================================================ */

/* Nonaktifkan semua media query mobile yang mengubah layout */
@media (max-width: 768px) {

    
    /* --- HANCURKAN HAMBURGER MENU & OVERLAY OJS --- */
    
    /* 1. Lenyapkan tombol hamburger dan tombol close (X) ke akar-akarnya */
    .pkp_site_nav_toggle, 
    button.pkp_site_nav_toggle,
    .pkp_navigation_primary_row button[aria-controls="navigationPrimary"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        z-index: -9999 !important;
    }

    /* 2. Bongkar paksa "Drawer" (menu melayang) agar kembali nempel statis di bawah header */
    .pkp_navigation_primary_wrapper {
        display: block !important;
        position: static !important; /* Mematikan efek melayang menutupi layar */
        visibility: visible !important;
        transform: none !important; /* Mematikan animasi geser/slide-in */
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        /* Kembalikan background gradien desktop */
        background: linear-gradient(to right, var(--maroon-deep) 0%, #5a0e0e 50%, var(--maroon-deep) 100%) !important;
        border-bottom: 2px solid var(--gold-mid) !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        z-index: 100 !important;
    }

    /* 3. Paksa deretan menu menyamping, bukan numpuk ke bawah */
    #navigationPrimary,
    ul#navigationPrimary,
    .pkp_navigation_primary {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        position: static !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* 4. Format setiap item menu agar persis seperti tombol desktop */
    #navigationPrimary > li,
    ul#navigationPrimary > li,
    .pkp_navigation_primary > li {
        display: inline-block !important;
        width: auto !important;
        border-bottom: none !important;
        margin: 0 !important;
    }

    #navigationPrimary a,
    .pkp_navigation_primary a {
        display: inline-block !important;
        padding: 12px 18px !important;
        text-align: left !important;
    }
    
    /* 5. Pastikan menu navigasi User (Biru) tidak merusak layout header */
    .pkp_navigation_user_wrapper {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        background: transparent !important;
    }

    /* Paksa viewport agar selalu render desktop */
    html {
        min-width: 1024px !important;
    }

    /* NONAKTIFKAN sidebar yang berubah menjadi fixed/drawer di HP */
    .pkp_structure_sidebar,
    .col-md-3.pkp_sidebar,
    aside.pkp_sidebar {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        overflow-y: visible !important;
        background-color: var(--sidebar-bg) !important;
        background-image: url('https://jurnal.isi-ska.ac.id/public/site/images/admin_keteg/background-navigasi-bd5ddf1def3aef024887c61cd7c474a5.png') !important;
        background-repeat: repeat-y !important;
        background-size: 100% auto !important;
        z-index: auto !important;
        transition: none !important;
        padding: 30px 15px 20px 15px !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.35) !important;
    }

 /* 1. Hilangkan total tombol hamburger bawaan asli OJS */
    .pkp_site_nav_toggle,
    button.pkp_site_nav_toggle {
        display: none !important;
        pointer-events: none !important;
    }

    /* 2. Bongkar susunan "Drawer/Overlay" menu mobile bawaan OJS */
    .pkp_navigation_primary_wrapper {
        position: relative !important; /* Mematikan mode melayang/fixed */
        display: block !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important; /* Mematikan animasi geser OJS */
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* 3. Paksa menu utama berjejer ke samping seperti desktop */
    ul#navigationPrimary,
    .pkp_navigation_primary {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        background: transparent !important;
        position: static !important;
        box-shadow: none !important;
    }

    /* 4. Hilangkan garis pembatas versi mobile agar rapi */
    ul#navigationPrimary > li,
    .pkp_navigation_primary > li {
        display: inline-block !important;
        width: auto !important;
        border-bottom: none !important; 
    }

    /* Konten utama tetap di samping sidebar, bukan full width */
    .pkp_structure_main {
        width: auto !important;
        padding: 30px 40px !important;
        box-sizing: border-box !important;
    }

    /* Layout tetap row (desktop), bukan column (stack) */
    .pkp_structure_content {
        flex-direction: row !important;
        min-width: 1024px !important;
    }

/* Header banner: tampilkan penuh tanpa terpotong di HP */
    .pkp_head_wrapper {
        background-size: contain !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        min-height: 0 !important;
        /* Padding-bottom memberi ruang tinggi mengikuti rasio gambar header asli */
        padding-bottom: 20% !important;
    }

    .pkp_site_name a {
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        display: block !important;
    }
}

/* ============================================================
   15. SCROLLBAR KUSTOM (Chrome/Edge) — TEMA MAROON EMAS
   ============================================================ */
::-webkit-scrollbar {
    width: 8px !important;
}
::-webkit-scrollbar-track {
    background: var(--maroon-deep) !important;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--gold-mid), var(--maroon-mid)) !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold-bright) !important;
}