/* ==========================================
   0. RESET CONTAINER & BACKGROUND BATIK
   ========================================== */
body {
    background-image: url('https://ijain.org/plugins/themes/nusantara3columnsSteelBlue/imgs/new_grid.png') !important;
    background-repeat: repeat !important;
    background-position: top center !important;
    background-attachment: fixed !important;
    background-color: #f2f2f7 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Container Utama Presisi Tegak Lurus ala Apple Card */
.pkp_structure_page {
    max-width: 1100px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important; /* DIBUAT HIDDEN AGAR FOOTER TIDAK LUBER KE SISI BATIK */
}

/* ==========================================
   1. HEADER & NAVIGASI UTAMA (PROPORSIONAL)
   ========================================== */
header.pkp_site_header {
    background-image: url('https://ejournal-education.upi.edu/public/journals/1/homepageImage_en.png') !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #008000 !important;
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
}

/* Sembunyikan Teks, Logo Img, dan Elemen Bawaan Header OJS (Mencegah Double Image) */
header.pkp_site_header .pkp_site_name_wrapper,
header.pkp_site_header .pkp_site_name,
header.pkp_site_header h1,
header.pkp_site_header h1.pkp_site_name,
header.pkp_site_header .site-name,
header.pkp_site_header a.title,
header.pkp_site_header a.is_text,
header.pkp_site_header .is_text,
header.pkp_site_header .pkp_head_wrapper > a,
header.pkp_site_header .pkp_head_wrapper .pkp_site_name,
header.pkp_site_header .pkp_site_name_wrapper img,
header.pkp_site_header .pkp_head_wrapper img,
header.pkp_site_header img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Navigation User (Disembunyikan Sempurna) */
header.pkp_site_header .pkp_navigation_user_wrapper,
header.pkp_site_header .pkp_navigation_user,
.pkp_navigation_user_wrapper,
.pkp_navigation_user {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Wrapper Navigasi Utama */
.pkp_navigation_primary_wrapper,
header.pkp_site_header .pkp_navigation_primary_wrapper {
    position: relative !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 28px !important;
    background-color: rgba(0, 60, 0, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    z-index: 99 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    float: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Menu Utama Rata Kiri Presisi */
.pkp_navigation_primary,
header.pkp_site_header .pkp_navigation_primary {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: left !important;
    width: auto !important;
    flex: 1 1 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pkp_navigation_primary li,
header.pkp_site_header .pkp_navigation_primary li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: left !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Link Menu Utama */
.pkp_navigation_primary a,
header.pkp_site_header .pkp_navigation_primary a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: -0.1px !important;
    padding: 12px 14px !important;
    display: inline-block !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
}

.pkp_navigation_primary li:first-child a,
header.pkp_site_header .pkp_navigation_primary li:first-child a {
    margin-left: -14px !important;
}

.pkp_navigation_primary a:hover,
.pkp_navigation_primary a:focus,
.pkp_navigation_primary a:active,
header.pkp_site_header .pkp_navigation_primary a:hover,
header.pkp_site_header .pkp_navigation_primary a:focus,
header.pkp_site_header .pkp_navigation_primary a:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.pkp_navigation_primary a::before,
.pkp_navigation_primary a::after,
header.pkp_site_header .pkp_navigation_primary a::before,
header.pkp_site_header .pkp_navigation_primary a::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Search Bar Rata Kanan Presisi */
.pkp_navigation_primary_wrapper .pkp_search,
header.pkp_site_header .pkp_search {
    margin-left: auto !important;
    margin-right: -14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    float: right !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pkp_navigation_primary_wrapper .pkp_search a,
header.pkp_site_header .pkp_search a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 12px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
}

.pkp_navigation_primary_wrapper .pkp_search a::before,
header.pkp_site_header .pkp_search a::before,
.pkp_navigation_primary_wrapper .pkp_search .fa::before,
header.pkp_site_header .pkp_search .fa::before {
    margin-right: 6px !important;
}

.pkp_navigation_primary_wrapper .pkp_search a:hover,
.pkp_navigation_primary_wrapper .pkp_search a:focus,
.pkp_navigation_primary_wrapper .pkp_search a:active,
header.pkp_site_header .pkp_search a:hover,
header.pkp_site_header .pkp_search a:focus,
header.pkp_site_header .pkp_search a:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================
   2. TYPOGRAPHY & HIDDEN ELEMENTS
   ========================================== */
body, p, a, h1, h2, h3, h4, h5, h6, input, button {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
}

.pkp_block.block_make_submission,
.block_make_submission,
a.action.make_submission,
.page_index_journal .about_journal h2,
.page_index_journal .about_journal h1,
.page_index_journal .homepage_about h2,
.page_index_journal .page-header,
.page_index_journal hr,
a[href*="ror.org"],
.ror-icon,
img[src*="ror"] {
    display: none !important;
}

.pkp_block.block_custom .title,
.pkp_block.block_custom .title_wrapper,
.pkp_block.block_custom .block_title,
.pkp_block.block_custom h1,
.pkp_block.block_custom h2,
.pkp_block.block_custom h3,
.pkp_block.block_custom h4 {
    display: none !important;
}

/* ==========================================
   3. STRUKTUR GRID PRESISI (SIDEBAR RAPAT ATAS & SAMPING)
   ========================================== */
.pkp_structure_content {
    display: grid !important;
    grid-template-columns: 1fr 280px !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    position: relative !important;
    float: none !important;
    border: none !important;
}

.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::after,
.pkp_structure_sidebar::before {
    display: none !important;
    content: none !important;
    border: none !important;
}

.pkp_structure_main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 28px 32px 28px !important;
    box-sizing: border-box !important;
    float: none !important;
    border-right: 1px solid #e5e5ea !important;
}

/* Sidebar Tanpa Padding Atas/Samping agar Rapat dan Presisi */
.pkp_structure_sidebar,
.pkp_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 24px 0 !important; /* Padding atas dibuat 0 agar rapat ke header */
    margin: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    border: none !important;
    background: transparent !important;
}

/* ==========================================
   4. URUTAN HOMEPAGE
   ========================================== */
.page_index_journal .page_index_journal_container,
.page_index_journal main#mainContent,
.page_index_journal .page,
.page_index_journal .pkp_structure_main {
    display: flex !important;
    flex-direction: column !important;
}

.page_index_journal .homepage_about,
.page_index_journal .about_journal,
.page_index_journal .journal_summary,
.page_index_journal .additional_content {
    order: 1 !important;
}

.page_index_journal .current_issue {
    order: 2 !important;
    margin-top: 25px !important;
}

.page_index_journal .current_issue h2,
.page_index_journal .current_issue h3 {
    margin: 0 0 12px 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1c1c1e !important;
    letter-spacing: -0.4px !important;
}

.page_index_journal .view_all,
.page_index_journal a.view_all,
.page_index_journal .current_issue a.read_more {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 16px !important;
    color: #007aff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    outline: none !important;
}

.page_index_journal .view_all:hover,
.page_index_journal a.view_all:hover,
.page_index_journal .current_issue a.read_more:hover {
    opacity: 1 !important;
    color: #007aff !important;
}

/* ==========================================
   4.5. UPDATE KHUSUS: KOLOM METADATA ARTIKEL
   ========================================== */
/* Container detail artikel dibuat 2 kolom terpisah */
.page_article .obj_article_details {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Judul Artikel Full Width di Atas */
.page_article .obj_article_details .page_title,
.page_article .obj_article_details .article-title {
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* Kolom Kiri: Penulis, Keywords, Abstrak, References */
.page_article .obj_article_details .main_entry {
    flex: 1 1 60% !important;
    width: 60% !important;
    max-width: 60% !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Kolom Kanan: Metadata (PDF, Published, Issue, License, Citation) */
.page_article .obj_article_details .entry_details {
    flex: 0 0 38% !important;
    width: 38% !important;
    max-width: 38% !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
    border-left: 1px solid #e5e5ea !important;
    float: none !important;
    margin: 0 !important;
}

/* Item di Dalam Kolom Metadata Kanan */
.page_article .obj_article_details .entry_details .item {
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #f0f0f5 !important;
    display: block !important;
    width: 100% !important;
}

.page_article .obj_article_details .entry_details .item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Label Judul Metadata (Published, Issue, License, dll) */
.page_article .obj_article_details .entry_details .label,
.page_article .obj_article_details .entry_details .item .label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #8e8e93 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Isi Teks & Link Metadata */
.page_article .obj_article_details .entry_details .value,
.page_article .obj_article_details .entry_details a {
    font-size: 13.5px !important;
    color: #1c1c1e !important;
    text-decoration: none !important;
    word-break: break-word !important;
}

.page_article .obj_article_details .entry_details a:hover {
    color: #007aff !important;
}

/* Styling Tombol PDF di Kolom Kanan Metadata */
.page_article .obj_article_details .entry_details .item.galleys,
.page_article .obj_article_details .entry_details .galleys_links {
    margin-bottom: 20px !important;
}

.page_article .obj_article_details .entry_details a.galley_link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    color: #007aff !important;
    border: 1px solid #007aff !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

.page_article .obj_article_details .entry_details a.galley_link:hover {
    background-color: #007aff !important;
    color: #ffffff !important;
}

/* ==========================================
   5. STYLING NAVIGASI SIDEBAR (RAPAT FULL WIDTH & TEPAT DI ATAS)
   ========================================== */
.flat-nav-container,
.flat-nav-container ul,
.pkp_structure_sidebar .pkp_block.block_custom:first-child {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #008000 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    list-style: none !important;
    box-shadow: none !important;
}

.flat-nav-container li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

.flat-nav-container a,
.flat-nav-container li a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 18px !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.1px !important;
    text-decoration: none !important;
    text-align: left !important;
    
    /* Garis pemisah halus antar menu */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    
    outline: none !important;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.flat-nav-container a:last-child,
.flat-nav-container li:last-child a {
    border-bottom: none !important;
}

.flat-nav-container a:hover,
.flat-nav-container a:focus,
.flat-nav-container li a:hover,
.flat-nav-container li a:focus {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    padding-left: 22px !important;
    outline: none !important;
}

/* ==========================================
   6. BLOCK LANGUAGE & INFORMATION
   ========================================== */
.pkp_block.block_language,
.pkp_block.block_information {
    margin: 20px 14px 0 14px !important;
    padding: 0 !important;
    width: auto !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e5ea !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.pkp_block.block_language .title,
.pkp_block.block_information .title,
.pkp_block.block_language h2,
.pkp_block.block_information h2,
.pkp_block.block_language h3,
.pkp_block.block_information h3 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #8e8e93 !important;
    background-color: #f2f2f7 !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-bottom: 1px solid #e5e5ea !important;
    border-top: none !important;
}

.pkp_block.block_language ul,
.pkp_block.block_information ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px !important;
}

.pkp_block.block_language li,
.pkp_block.block_information li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
}

.pkp_block.block_language a,
.pkp_block.block_information a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    color: #1c1c1e !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    outline: none !important;
}

.pkp_block.block_language a:hover,
.pkp_block.block_language a:focus,
.pkp_block.block_information a:hover,
.pkp_block.block_information a:focus {
    background-color: transparent !important;
    color: #1c1c1e !important;
    padding-left: 12px !important;
    outline: none !important;
}

/* ==========================================
   7. STATCOUNTER & CUSTOM BLOCK LAINNYA
   ========================================== */
.pkp_block.block_custom {
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.pkp_structure_sidebar .pkp_block img,
.pkp_sidebar .pkp_block img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* ==========================================
   8. FOOTER (PRESISI & PENUH)
   ========================================== */
.pkp_structure_footer_wrapper,
footer.pkp_structure_footer,
.pkp_footer {
    background-color: #f9f9fb !important;
    border-top: 1px solid #e5e5ea !important;
    margin: 0 !important;
    padding: 24px 28px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    position: relative !important;
    float: none !important;
}

.pkp_brand_footer,
.pkp_footer .pkp_brand_footer {
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    float: none !important;
    display: block !important;
}

.pkp_brand_footer a,
.pkp_footer .pkp_brand_footer a {
    display: inline-block !important;
    max-width: 100% !important;
    text-decoration: none !important;
}

.pkp_brand_footer img,
.pkp_footer .pkp_brand_footer img {
    max-width: 180px !important;
    height: auto !important;
    display: inline-block !important;
}