/* =======================================================
   1. GLOBAL RESET & PERBAIKAN HORIZONTAL SCROLL
   ======================================================= */
   html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* =======================================================
   2. RESTRUKTURISASI HEADER DENGAN CSS GRID (TETAP MUNCUL DI HP)
   ======================================================= */
header.navbar,
header.navbar-default,
#header-site,
.pkp_structure_header {
    display: grid !important;
    grid-template-columns: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* Mengamankan tempat image header / logo agar tidak hilang di HP */
header .container,
#header-site .container,
.navbar-header,
.site-name-wrapper {
    grid-row: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    float: none !important;
}

header a.navbar-brand,
.navbar-brand {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Memastikan gambar header / logo ditarik penuh 100% lebar layar */
header a.navbar-brand img,
.navbar-brand img,
.is_img img,
.pkp_site_name_wrapper img {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
}

/* Menyembunyikan teks duplikat di belakang gambar */
header a.navbar-brand, .navbar-brand, .site-name, #headerSiteTitle, .pkp_site_name {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
}

/* =======================================================
   3. BAR NAVIGASI ORANYE (SOLUSI MUTLAK CLASH ANIMASI HP)
   ======================================================= */
.pkp_navigation_primary_wrapper, 
#main-navigation,
.pkp_structure_nav {
    grid-row: 2 !important;
    background-color: #ff6600 !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    clear: both !important;
}

.pkp_navigation_primary_wrapper .container,
#main-navigation .container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* -------------------------------------------------------
   A. TAMPILAN KHUSUS LAPTOP / DESKTOP (DI ATAS 768PX)
   ------------------------------------------------------- */
@media (min-width: 769px) {
    .navbar-collapse.collapse,
    .navbar-collapse,
    .pkp_navigation_primary,
    #nav-menu {
        display: flex !important; /* Hanya aktif mendatar di layar besar */
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        overflow: visible !important;
    }
    
    .navbar-nav {
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        float: none !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .navbar-nav > li {
        float: none !important;
        display: block !important;
    }
}

/* -------------------------------------------------------
   B. TAMPILAN KHUSUS HP / MOBILE (MAKSIMAL 768PX)
   ------------------------------------------------------- */
@media (max-width: 768px) {
    /* 1. TOMBOL HAMBURGER: Latar hitam, garis putih solid tajam */
    button.navbar-toggle, 
    .navbar-toggle,
    [aria-controls="nav-menu"] {
        display: block !important;
        background-color: #333333 !important;
        border: 1px solid #ffffff !important;
        float: right !important;
        padding: 8px 10px !important;
        margin: 10px 15px !important;
        border-radius: 4px !important;
        cursor: pointer !important;
    }

    button.navbar-toggle .icon-bar,
    .navbar-toggle .icon-bar {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background-color: #ffffff !important;
        margin-top: 4px !important;
    }
    button.navbar-toggle .icon-bar:first-child,
    .navbar-toggle .icon-bar:first-child {
        margin-top: 0 !important;
    }

    /* 2. KUNCI UTAMA: Sembunyikan total menu saat tertutup, hancurkan paksaan display global */
    .navbar-collapse,
    .pkp_navigation_primary,
    #nav-menu {
        display: none !important; /* Tertutup rapat secara default */
        width: 100vw !important;
        clear: both !important;
        background-color: #ff6600 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. MENJINAKKAN ANIMASI BOOTSTRAP (.collapsing): Mengizinkan sistem menghitung tinggi buka-tutup */
    .navbar-collapse.collapsing,
    #nav-menu.collapsing {
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        height: auto; /* Biarkan JS memanipulasi tinggi pixel di sini */
    }

    /* 4. TAMPILKAN MENU HANYA SAAT AKTIF TERBUKA (.in) */
    .navbar-collapse.in,
    .navbar-collapse.collapse.in,
    #nav-menu.in {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 5. SUSUNAN MENU KEBOWAH (VERTIKAL) DI HP */
    .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .navbar-nav > li {
        width: 100% !important;
        display: block !important;
        float: none !important;
    }
}

/* -------------------------------------------------------
   C. GAYA LINK TEKS MENU (GLOBAL & WARISAN)
   ------------------------------------------------------- */
.navbar-nav > li > a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 15px 20px !important;
    background-color: #ff6600 !important;
    display: block !important;
    text-align: left !important;
    border-bottom: 1px solid #e05300 !important;
    box-sizing: border-box !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > .open > a {
    background-color: #e05300 !important;
}

/* =======================================================
   4. TAMPILAN KOTAK DROPDOWN MENJADI ORANYE IDEAL
   ======================================================= */
   .navbar-nav .dropdown-menu {
    background-color: #ff6600 !important;
    border: none !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
    padding: 5px 0 !important;
    margin-top: 0 !important;
}

.navbar-nav .dropdown-menu > li > a {
    color: #ffffff !important;
    background-color: #ff6600 !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: all 0.2s ease-in-out !important;
}

.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus,
.navbar-nav .dropdown-menu > .active > a {
    background-color: #ffffff !important;
    color: #e05300 !important;
}

/* =======================================================
   5. MENYEMBUNYIKAN MENU AKUN BAWAAN OJS SECARA TOTAL
   ======================================================= */
.pkp_structure_header .pkp_navigation_user_wrapper,
header .pkp_navigation_user_wrapper,
#navigationUser,
.nav.navbar-nav.navbar-right,
ul.navbar-right,
.pkp_navigation_user {
    display: none !important;
}

/* =======================================================
   6. MENDOBRAK HINGGA KOTAK INPUT PENCARIAN (SEARCH) MUNCUL
   ======================================================= */

header .navbar-form,
.navbar-collapse .navbar-form,
.pkp_navigation_primary .pkp_search,
#main-navigation .navbar-form,
form.pkp_search {
    display: flex !important; 
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
    align-items: center !important;
    height: 50px !important;
    overflow: visible !important;
}

header .navbar-form .form-group,
.pkp_search .form-group {
    display: flex !important;
    margin: 0 !important;
    align-items: center !important;
    visibility: visible !important;
}

header .navbar-form input[type="text"],
header .navbar-form .form-control,
.pkp_search input[type="text"] {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #e3e6ec !important;
    border-radius: 4px 0 0 4px !important;
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    width: 150px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

header .navbar-form button[type="submit"],
header .navbar-form .btn,
.pkp_search button[type="submit"] {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 4px 4px 0 !important;
    height: 34px !important;
    padding: 6px 15px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    cursor: pointer !important;
    line-height: 22px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* =======================================================
   7. MENYEMBUNYIKAN CURRENT ISSUE & ARTICLES DI HOMEPAGE
   ======================================================= */
   .page_index_journal .current_issue,
   .page_index_journal .issue_toc,
   .page_index_journal .obj_issue_toc,
   .page_index_journal .sections,
   .page_index_journal .section,
   .page_index_journal .obj_article_summary {
       display: none !important;
   }
   
   .page_index_journal h2, .page_index_journal h3, .page_index_journal h4 {
       display: none !important;
   }
   
   /* =======================================================
      8. MENJAGA KONTEN UTAMA TETAP PROPORSIONAL DI TENGAH
      ======================================================= */
   .pkp_structure_content .container,
   .pkp_structure_content.pkp_container,
   main .container,
   #main-content .container {
       max-width: 1200px !important;
       width: 95% !important;
       margin: 30px auto !important;
       padding-left: 15px !important;
       padding-right: 15px !important;
       position: static !important;
   }
   
   /* =======================================================
      9. TATA TAMPILAN SIDEBAR MENJADI KOTAK MODERN (CARD)
      ======================================================= */
   .pkp_structure_sidebar .pkp_block, .panel-default {
       background-color: #ffffff !important;
       padding: 20px !important;
       border-radius: 8px !important;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
       border: 1px solid #e3e6ec !important;
       margin-bottom: 25px !important;
   }
   
   .pkp_structure_sidebar .pkp_block .title, .panel-heading {
       color: #1a2530 !important;
       font-size: 16px !important;
       font-weight: 700 !important;
       text-transform: uppercase !important;
       text-align: center !important;
       padding-bottom: 8px !important;
       border-bottom: 3px solid #ff6600 !important;
   }
   
   .list-group-item, .pkp_structure_sidebar .pkp_block a {
       display: block !important;
       background-color: #ff6600 !important;
       color: #ffffff !important;
       text-align: center !important;
       padding: 11px 15px !important;
       margin-bottom: 10px !important;
       text-decoration: none !important;
       font-weight: 500 !important;
       border-radius: 4px !important;
       border: none !important;
       transition: all 0.25s ease-in-out !important;
   }
   
   .list-group-item:hover, .pkp_structure_sidebar .pkp_block a:hover {
       background-color: #e05300 !important;
       transform: translateY(-2px);
       color: #ffffff !important;
   }
/* =======================================================
   10. ELIMINASI SELEKTIF JUDUL BAWAAN HANYA DI HALAMAN STATIS KUSTOM
   ======================================================= */
/* LANGKAH 1: Hilangkan visual & ruang teks judul bawaan secara radikal di halaman statis */
.page_custom .page-header,
.page_custom_page .page-header,
.page_about .page-header,
.page_subordinate .page-header,
[class*="custom"] .page-header,
[class*="about"] .page-header,
.obj_statpage_title,
.page-header:not(.page_issue_archive .page-header):not(.page_issue .page-header):not(.page_article .page-header) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    border: none !important;
}

/* LANGKAH 2: Bersihkan paksa jika judul berupa tag H1 statis tanpa class */
.page_custom h1, .page_custom_page h1, .page_about h1, .page_subordinate h1,
[class*="custom"] h1, [class*="about"] h1,
#main-content > h1:not(.page_issue_archive h1) {
    display: none !important;
    font-size: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* LANGKAH 3: AMANKAN & PEMULIHAN TOTAL HALAMAN ARCHIVES (RESTORE) */
body.page_issue_archive .page-header,
body.page_issue_archive h1,
body.page_issue_archive h2,
body.page_issue_archive .issues_list,
body.page_issue_archive .obj_issue_summary,
body.page_issue_archive #main-content a,
.page_issue_archive .issues_list li a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    font-size: revert !important; /* Mengembalikan ukuran font asli halaman Archives */
    line-height: normal !important;
    margin-bottom: 15px !important;
}

/* LANGKAH 4: Jaga teks link volume di halaman Archives tetap terlihat kontras */
.page_issue_archive .issues_list li a,
.page_issue_archive .obj_issue_summary h2 a {
    display: inline-block !important;
    color: #ffffff !important; /* Menjaga teks tautan di dalam list tetap putih sesuai gaya barunya */
    background-color: #ff6600 !important;
    padding: 11px 15px !important;
    border-radius: 4px !important;
}

/* =======================================================
   11. CSS MODAL INTERAKTIF LAYAR PENUH (FIXED NETRALISASI)
   ======================================================= */
.pkp_structure_sidebar .block_custom .panel-body a.cert-click-trigger {
    display: block !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
}

.fullscreen-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    z-index: 999999 !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
}

.fullscreen-overlay:target {
    display: flex !important;
}

.overlay-close-area {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: zoom-out !important;
    background: transparent !important;
}

.overlay-content {
    position: relative !important;
    max-width: 90% !important;
    max-height: 90% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    z-index: 9999999 !important;
}

.overlay-content img {
    max-width: 100% !important;
    max-height: 90vh !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
}

.close-btn {
    position: absolute !important;
    top: -50px !important;
    right: 0 !important;
    color: #ffffff !important;
    font-size: 45px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.close-btn:hover { color: #ff6600 !important; }

/* =======================================================
   12. MEMBERSIHKAN HEADER SIDEBAR DARI GARIS GANDA & LATAR ABU-ABU
   ======================================================= */
.pkp_structure_sidebar .panel-default > .panel-heading,
.pkp_structure_sidebar .pkp_block .title,
.block_custom .panel-heading {
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
}

.pkp_structure_sidebar .panel-heading,
.pkp_structure_sidebar .pkp_block .title {
    border-bottom: 3px solid #ff6600 !important;
    display: block !important;
    width: 100% !important;
}

.pkp_structure_sidebar .panel-default {
    border: 1px solid #e3e6ec !important;
}
/* =======================================================
   14. FORCE FIXED: SOLUSI AKHIR TOGGLE NAVBAR MOBIL OJS
   ======================================================= */
@media (max-width: 768px) {
    /* 1. Reset Total & Sembunyikan Menu Saat Tertutup (Kondisi Awal / aria-expanded="false") */
    div#nav-menu,
    nav#nav-menu,
    .pkp_navigation_primary_wrapper .navbar-collapse,
    #main-navigation .navbar-collapse,
    .pkp_navigation_primary {
        display: none !important; /* Paksa sembunyi saat halaman pertama dimuat */
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* 2. Tampilkan Menu Secara Vertikal HANYA Saat Terbuka (Kondisi Aktif / .in) */
    div#nav-menu.in,
    nav#nav-menu.in,
    .pkp_navigation_primary_wrapper .navbar-collapse.in,
    #main-navigation .navbar-collapse.in,
    .pkp_navigation_primary.in {
        display: flex !important; /* Ubah kembali menjadi flex untuk layouting internal */
        flex-direction: column !important; /* Susun paksa ke bawah */
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100vw !important;
        background-color: #ff6600 !important;
        overflow: visible !important;
    }

    /* 3. Tampilkan Menu Saat Proses Animasi Berlangsung (.collapsing) */
    div#nav-menu.collapsing,
    nav#nav-menu.collapsing,
    .navbar-collapse.collapsing {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 4. Pastikan Struktur List Menu Mengikuti Arah Vertikal */
    .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-nav > li {
        width: 100% !important;
        display: block !important;
        float: none !important;
    }

    .navbar-nav > li > a {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #e05300 !important;
    }
}