/** * Open Journal Systems 3.3.0.8 Custom Style
 * Berdasarkan Desain Portal Publikasi Ilmiah (Tema Biru & Kuning)
 * Adaptasi dari tema dasar themeOJS / PT. Penerbit Jurnal Indonesia
 **/

/* --- 1. ATURAN WAJIB: SEMUA IMPORT HARUS DI PALING ATAS --- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- 2. GLOBAL RESET & TIPOGRAFI GLOBAL --- */
*, *:before, *:after {  
    -webkit-box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    box-sizing: border-box;
}

html, body {  
    background-color: #f8fafc !important; 
    background-image: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #1e293b;
    overflow-x: hidden;
}

.clearfix:before, .clearfix:after {  
    content: " ";  
    display: table;
}
.clearfix:after {  
    clear: both;
}
.clearfix {  
    *zoom: 1;
}

/* --- 3. LAYOUT GRID & CONTAINER RESPONSIF --- */
.container {  
    position: relative;  
    margin: 0 auto;  
    padding: 40px 0;  
    clear: both;
}
@media only screen and (min-width: 1200px) { .container { width: 1210px; } }
@media only screen and (min-width: 960px) and (max-width: 1199px) { .container { width: 1030px; } }
@media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 682px; } }
@media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 428px; margin: 0 auto; } }
@media only screen and (max-width: 479px) { .container { width: 320px; margin: 0 auto; } }

.column2 {  
    float: left;  
    width: 33%;  
    padding: 10px;
}
.row2:after {  
    content: "";  
    display: table;  
    clear: both;
}
@media screen and (max-width: 600px) {  
    .column2 { width: 100%; }
}

/* --- 4. STRUKTUR HEADER & NAVIGASI (TEMA BIRU) --- */
#headerNavigationContainer {  
    max-height: 200% !important;
}
.pkp_site_name {  
    padding-top: 0 !important;  
    padding-bottom: 0 !important;
    margin: 0 !important;
}
.pkp_site_name > a {  
    padding-top: 0 !important;  
    padding-bottom: 0 !important;
}
.pkp_site_name .is_img img {  
    max-height: 100% !important;
    max-width: 100% !important;
}
.pkp_site_name_wrapper {  
    padding-left: 0 !important;  
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
.pkp_navigation_user_wrapper {  
    top: 0;  
    right: 0;  
    padding-right: 30px;
}

/* Background Bar Navigasi Utama */
.pkp_navigation_primary_row {
    text-align: center;
    background-color: #00448a !important; /* Biru Gelap Tradisional */
    font-weight: bold;
}
@media (min-width: 992px) {
    .pkp_navigation_primary_row {
        background: #005bb7 !important; /* Biru Terang Sesuai Gambar Portal */       
        padding-left: 2.143rem;        
        padding-right: 2.143rem;
    }
}
.pkp_navigation_primary_wrapper ul li { padding: 0 !important; margin: 0 !important; }
.pkp_navigation_primary_wrapper ul li a { 
    margin: 0 !important; 
    padding: 0 15px !important; 
    line-height: 40px !important;
    font-family: 'Inter', sans-serif !important;
    color: #ffffff !important; 
    font-weight: bold !important;
}
/* Hover Menu Utama: Menyesuaikan warna abu lembut semi-gelap */
.pkp_navigation_primary_wrapper ul li a:hover { 
    background: #e2e8f0; 
    border-radius: 4px !important; 
    color: #005bb7 !important;
}

/* Background Dropdown Menu */
.pkp_navigation_primary_wrapper ul li ul { 
    background: #00448a !important; 
}
.pkp_navigation_primary_wrapper ul li ul li { 
    border-bottom: solid 1px rgba(255, 255, 255, 0.1) !important; 
}
.pkp_navigation_primary_wrapper ul li ul li:last-child { 
    border-bottom: none !important; 
}

/* Tombol Navigasi Mobile */
.pkp_site_nav_toggle { 
    background-color: #005bb7 !important; 
}

.pkp_search.pkp_search_desktop { color: #ffffffee; }
.pkp_search.pkp_search_desktop:hover { color: #ffcc00; } /* Aksen Kuning Saat Hover Cari */

/* --- 5. HALAMAN UTAMA (COVER & DESKRIPSI) + DAFTAR ISI (TOC) --- */

/* --- A. PENGATURAN LAYOUT HALAMAN UTAMA --- */
@media (min-width: 768px) {
    /* Deskripsi Jurnal di Kiri */
    .homepage_about {
        width: 65% !important;
        float: left !important;
        padding-right: 40px !important;
        box-sizing: border-box !important;
        text-align: justify !important;
        line-height: 1.6 !important;
        color: #334155 !important;
    }

    /* Gambar Cover Jurnal di Kanan */
    .homepage_image {
        width: 32% !important;
        float: right !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Mencegah konten di bawahnya ikut bergeser naik */
    .current_issue, 
    .homepage_announcements, 
    .obj_issue_toc,
    .page_homepage::after {
        clear: both !important;
        display: table !important;
        content: "" !important;
        width: 100% !important;
        padding-top: 20px !important;
    }
}

/* Tampilan Responsif Layar Mobile / Handphone */
@media (max-width: 767px) {
    .homepage_image {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
        float: none !important;
    }
    .homepage_about {
        width: 100% !important;
        float: none !important;
        text-align: justify !important;
    }
}

/* Detail Estetika Gambar Cover */
.homepage_image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
}


/* --- B. PENGATURAN KOTAK DAFTAR ARTIKEL (TOC) SEPERTI KARTU --- */
.journals ul .body .description a { display: inline; }

.obj_issue_toc .articles > li {  
    /* KUNCI PERUBAHAN: Menurunkan jarak antar kotak dari 22px menjadi 12px agar lebih dekat */
    margin-bottom: 12px !important;  
    background: #ffffff !important;  
    
    /* Menyeimbangkan ruang dalam kartu (Atas-Bawah: 1.1rem, Kanan-Kiri: 1.5rem) */
    padding: 1.1rem 1.5rem !important;  
    border-radius: 8px !important;  
    
    /* Batas bingkai kotak */
    border: 1px solid #cbd5e1 !important; 
    border-left: 5px solid #005bb7 !important; 
    
    /* Soft shadow agar tidak terlalu berat saat kotak berdekatan */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s ease-in-out !important;
}

/* Efek interaktif saat kotak artikel disorot mouse */
.obj_issue_toc .articles > li:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08) !important;
    border-color: #94a3b8 !important;
    border-left-color: #00448a !important;
}

.pkp_structure_page {  
    margin-top: 20px !important;  
    margin-bottom: 20px !important;  
    padding-bottom: 20px !important;
}
.obj_article_details .abstract { text-align: justify; }


/* FIX IKON PENULIS (ORCID) AGAR TETAP MUNCUL */
.obj_article_summary .authors a img,
.obj_issue_toc .articles li .authors a img {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}
.obj_article_summary .authors a,
.obj_issue_toc .articles li .authors a {
    display: inline-flex !important;
    align-items: center !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23A6CE39"><path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM7.361 17.656H6.015V6.751h1.346v10.905zm-.673-11.783c-.455 0-.825-.369-.825-.825s.369-.825.825-.825.825.369.825.825-.369.825-.825.825zm11.233 11.783h-1.201v-4.9c0-1.258-.401-2.115-1.528-2.115-.861 0-1.373.579-1.598 1.14-.083.202-.103.483-.103.766v5.109h-1.201V9.52h1.152v1.144h.016c.16-.304.551-.93 1.685-.93 1.765 0 2.778 1.153 2.778 3.535v4.387z"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* --- 6. DESAIN BLOK SIDEBAR (MODERN & RATA KIRI) --- */
.pkp_block {
    background-color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important; 
    margin-bottom: 12px !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
}
.pkp_block:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Judul Blok Sidebar (Menu, Indeks By, dll) */
.pkp_structure_sidebar .pkp_block .title,
.pkp_block .title {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #005bb7 !important; 
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 10px 18px !important; 
    line-height: 1.2 !important; 
    border-bottom: 3px solid #00448a !important;
    margin: 0 !important;
    text-align: center !important; /* Judul blok juga disamakan menjadi rata kiri */
}
.pkp_block .content {
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
}
.pkp_block .content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.pkp_block .content ul li {
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pkp_block .content ul li:last-child {
    border-bottom: none !important;
}

/* Link Menu di Dalam Sidebar - SEKARANG RATA KIRI */
.pkp_block .content ul li a {
    display: block !important;
    padding: 7px 18px !important; /* Jarak atas-bawah dan kiri-kanan yang seimbang */
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    position: relative !important;
    text-align: left !important; /* KUNCI UTAMA: Mengubah teks menu menjadi rata kiri */
    transition: all 0.2s ease !important;
}

/* Efek Hover Menu: Latar belakang berubah biru muda dan teks sedikit bergeser ke kanan */
.pkp_block .content ul li a:hover {
    background-color: #e6f0fa !important; 
    color: #005bb7 !important; 
    padding-left: 24px !important; /* Efek dorong teks ke kanan yang halus saat disorot */
}
.pkp_block .content ul li a::before {
    content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background-color: #005bb7; opacity: 0; transform: scaleY(0); transition: all 0.2s ease !important;
}
.pkp_block .content ul li a:hover::before { opacity: 1; transform: scaleY(1); }

/* --- 7. FIX SPASI & GAMBAR SIDEBAR (MEMBERI JARAK KANAN-KIRI) --- */
.pkp_structure_sidebar .pkp_block .content,
.pkp_block .content,
.pkp_block .content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Memastikan elemen pembungkus teks tetap rapi */
.pkp_block .content p, 
.pkp_block .content div,
.pkp_block .content span,
.pkp_block .content ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* KUNCI PERBAIKAN: Mengatur gambar/logo indeksasi agar tidak mepet */
.pkp_structure_sidebar .pkp_block .content img,
.pkp_block .content img,
.pkp_block img {
    display: block !important;
    width: 90% !important;        /* Mengurangi lebar ke 90% agar ada sisa jarak di kiri & kanan */
    max-width: 100% !important;
    height: auto !important;
    margin: 10px auto !important; /* Memberikan jeda 10px antar-logo dan otomatis ke tengah */
    padding: 0 !important;
    border: none !important;
    vertical-align: bottom !important;
    transition: transform 0.2s ease !important; /* Efek interaktif saat kursor menyentuh logo */
}

/* Efek opsional: Logo sedikit membesar secara halus saat disorot kursor */
.pkp_structure_sidebar .pkp_block .content img:hover,
.pkp_block .content img:hover {
    transform: scale(1.02);
}

/* --- 8. EDITORIAL LIST / TIM PROFILE --- */
.editorial-list { position: relative; }
.editorial-list li { margin-bottom: 1.125rem; }
.editorial-list .img-profile { position: absolute; width: 95px; height: 105px; border: 1px solid #cbd5e1; padding: .5rem; }
.editorial-list .img-profile .imgthumb { width: 80px; height: 90px; overflow: hidden; margin: 0 auto; object-fit: fill; }
.team-content { margin-left: 100px; min-height: 130px; }

/* --- 9. KESELARASAN FOOTER (TEMA GELAP BERSIH) --- */
.pkp_structure_footer_wrapper {  
    background-color: #0f172a !important; /* Slate Gelap Modern */
    border-top: 4px solid #005bb7; /* Garis Pembatas Biru */
    color: #94a3b8 !important;
}
.pkp_footer_content a { color: #ffcc00 !important; } /* Link Footer Berwarna Kuning Aksen */

/* --- 10. PENGECUALIAN UNTUK IKON SIDEBAR KECIL --- */
.pkp_block .content img.ikon-sidebar {
    width: auto !important;
    max-width: 240px !important;
    height: auto !important;
    display: inline-block !important;
    margin: 10px auto !important;
}
.pkp_block .content .tengah {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}


//* --- 12. PERBAIKAN FOOTER: LOGO PKP DI KANAN ATAS (FIX) --- */

/* 1. Menjadikan wadah utama footer sebagai titik jangkar (anchor) */
.pkp_structure_footer_wrapper {
    position: relative !important;
    padding-top: 20px !important; 
    padding-bottom: 20px !important;
    min-height: 140px !important;
}

/* 2. Membatasi lebar teks 'Diterbitkan Oleh' agar tidak menabrak logo */
.pkp_footer_content {
    width: 75% !important;
    display: block !important;
}

/* 3. KUNCI POSISI: Menarik logo OJS/PKP ke pojok kanan atas */
.pkp_brand_footer {
    position: absolute !important;
    right: 0 !important;
    top: 20px !important; /* Jarak dari atas. Bisa disesuaikan angkanya agar pas */
    margin: 0 !important;
    text-align: right !important;
}

/* 4. KUNCI WARNA: Mengubah gambar hitam OJS menjadi putih terang! */
.pkp_brand_footer a img {
    filter: brightness(0) invert(1) !important; /* Rumus ajaib pemutih gambar */
    opacity: 0.85 !important;
    max-width: 150px !important; /* Mencegah ukuran gambar kebesaran */
    transition: opacity 0.2s ease !important;
}

.pkp_brand_footer a:hover img {
    opacity: 1 !important;
}

/* 5. Tampilan Responsif Layar Mobile / Handphone */
@media (max-width: 767px) {
    .pkp_structure_footer_wrapper {
        min-height: auto !important;
    }
    .pkp_footer_content {
        width: 100% !important;
    }
    .pkp_brand_footer {
        position: static !important; /* Di HP, posisinya kembali ke bawah */
        margin-top: 25px !important;
        text-align: left !important;
    }
}