/* 1. Mengubah background area Banner/Logo menjadi Putih */
.pkp_structure_head {
    background-color: #ffffff !important;
    border-bottom: none !important;
}

/* 2. Memaksa gambar Banner/Logo menjadi lebih besar */
.pkp_site_name .is_img img {
    max-height: 180px !important; /* Anda bisa menaikkan/menurunkan angka 180px ini sesuai selera */
    width: auto;
}

/* 3. Mengubah warna bar menu navigasi (Current, Archives, dll) menjadi Kuning Emas */
.pkp_structure_navigation {
    background-color: #b0881b !important;
}

/* 4. Mengubah warna bar menu User (Login, Register, nama admin) di ujung atas */
/* Memaksa bar admin atas membentang penuh 100% */
.pkp_structure_head .pkp_navigation_user_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #d1a11e !important;
    display: block !important;
}

/* 5. Mengubah warna teks menu menjadi putih agar terbaca jelas */
.pkp_navigation_primary a, .pkp_navigation_user a {
    color: #ffffff !important;
    font-weight: bold;
}

/* 6. Mengubah warna teks saat kursor diarahkan ke menu */
.pkp_navigation_primary a:hover, .pkp_navigation_primary a:focus {
    color: #000000 !important; /* Berubah hitam saat disentuh */
}

/* 1. Memaksa area wadah logo menjadi lebar penuh */
.pkp_structure_head .pkp_site_name_wrapper {
    width: 100% !important;
}

/* 2. Memaksa gambar banner membentang 100% mengikuti layar */
.pkp_site_name .is_img img {
    width: 100% !important;
    max-height: none !important; /* Menghapus batasan tinggi agar proporsional */
    height: auto !important;
}

/* 3. Menghapus jarak (padding) putih di sekitar banner agar menempel rapi (opsional) */
.pkp_structure_head .pkp_container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Eksekusi paksa untuk baris biru navigasi OJS */
div.pkp_navigation_primary_row,
.pkp_structure_head .pkp_navigation_primary_row {
    background-color: #b0881b !important;
    border-top: none !important;
    border-bottom: none !important;
}
/* =========================================
   1. MENGHANCURKAN JEDA PUTIH (SUPER SPESIFIK)
   ========================================= */
/* Menetralkan semua wadah (wrapper) di sekitar banner */
header.pkp_structure_head,
.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_site_name,
.pkp_site_name a.is_img {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important; /* Kunci menghilangkan jeda spasi tersembunyi */
    display: block !important;
    border: none !important;
}

/* Memastikan gambar banner menempel sempurna atas dan bawah */
.pkp_site_name a.is_img img {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    vertical-align: top !important; /* Menghapus jeda di bawah gambar (inline-block gap) */
}

/* Menghapus jarak apa pun dari bar navigasi bawah */
.pkp_navigation_primary_row {
    margin-top: 0 !important;
    border-top: none !important;
}

/* =========================================
   2. MEMPERBAIKI TEKS DROPDOWN ADMIN
   ========================================= */
/* Memaksa khusus teks di dalam kotak dropdown (sub-menu) menjadi hitam */
ul.pkp_navigation_user > li > ul > li > a,
.pkp_navigation_user ul.dropdown-menu li a {
    color: #333333 !important; /* Abu-abu gelap / Hitam agar kontras */
    background-color: #ffffff !important;
    text-shadow: none !important;
}

/* Efek saat kursor menyorot menu dropdown */
ul.pkp_navigation_user > li > ul > li > a:hover,
.pkp_navigation_user ul.dropdown-menu li a:hover {
    color: #b0881b !important; /* Berubah kuning emas */
    background-color: #f5f5f5 !important;
}

/* Menggeser menu navigasi (Current, dll) agar tidak mepet kiri */
ul.pkp_navigation_primary {
     /* Silakan ubah angka 80px ini menjadi lebih besar/kecil (misal 50px atau 100px) sampai lurus dengan pinggiran konten di bawahnya */
}

/* Menggeser ikon Search agar tidak mepet kanan (agar seimbang dengan yang kiri) */
div.pkp_search_desktop {
    padding-right: 80px !important;
}
/* Mengembalikan pembungkus menu navigasi agar rata dengan konten utama (tengah) */
.pkp_navigation_primary_row .pkp_container {
    max-width: 1200px !important; /* Lebar standar konten jurnal */
    margin: 0 auto !important; /* Otomatis menengahkan posisi menu */
    padding-left: 15px !important; /* Jarak aman tepi kiri */
    padding-right: 15px !important; /* Jarak aman tepi kanan */
    width: 100% !important;
}

/* Memastikan menu tidak bergeser aneh */
ul.pkp_navigation_primary {
    padding-left: 0 !important;
}

/* =========================================
   1. MEMPERBAIKI POSISI MENU NAVIGASI (CURRENT & SEARCH)
   ========================================= */
/* Mendorong tulisan Current ke arah tengah menggunakan persentase layar */
ul.pkp_navigation_primary {
    margin-left: 3vw !important; /* vw = viewport width. Anda bisa menaikkan angkanya (misal 10vw atau 12vw) agar lebih ke tengah */
}

/* Mendorong ikon Search ke arah tengah agar seimbang */
.pkp_search_desktop {
    margin-right: 2vw !important; 
}

/* =========================================
   2. MEMUNCULKAN TEKS DROPDOWN (ABOUT)
   ========================================= */
/* Memaksa teks sub-menu di dalam kotak putih menjadi hitam */
ul.pkp_navigation_primary ul li a,
ul.pkp_navigation_primary ul.dropdown-menu li a {
    color: #333333 !important; /* Teks hitam/abu-abu gelap */
    background-color: #ffffff !important; 
    text-transform: none !important;
}

/* Memberikan efek saat kursor menyorot sub-menu */
ul.pkp_navigation_primary ul li a:hover,
ul.pkp_navigation_primary ul.dropdown-menu li a:hover {
    color: #b0881b !important; /* Teks berubah kuning emas */
    background-color: #f9f9f9 !important; /* Latar sedikit abu-abu */
}

/* Mengembalikan ketebalan tinggi bar menu seperti semula */
ul.pkp_navigation_primary > li > a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: normal !important;
    display: block !important;
}

/* Mengembalikan posisi vertikal tombol Search agar sejajar */
.pkp_search_desktop .search_controls {
    margin-top: 0 !important;
}

/* Merampingkan ketebalan bar admin/login di atas */
.pkp_structure_head .pkp_navigation_user_wrapper {
    padding-top: 0 !important;      
    padding-bottom: 0 !important;   
    padding-right: 5vw !important; /* Jaga agar tetap sejajar di kanan */
    min-height: 25px !important;   /* Membatasi ketebalan bar */
}

/* Membuang jarak bawaan dari daftar menu */
.pkp_navigation_user_wrapper ul {
    margin: 0 !important;
    padding: 0 !important;
}

/* Mengatur jarak pas pada teks Register & Login */
.pkp_navigation_user_wrapper ul > li > a {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    line-height: 1 !important;
}

/* =========================================
   1. MENGHILANGKAN JEDA BAR ATAS & BANNER
   ========================================= */
.pkp_structure_head .pkp_navigation_user_wrapper {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    /* Memberi sedikit ruang atas-bawah agar teks tidak terlalu sesak */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Memastikan banner benar-benar menempel ke atas */
.pkp_structure_head .pkp_site_name_wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================
   1. KUNCI JEDA BAR ATAS & BANNER (LOGIN/LOGOUT)
   ========================================= */
/* Memaksa bar atas selalu menempel dengan banner di bawahnya */
header.pkp_structure_head .pkp_navigation_user_wrapper {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    display: block !important;
}

header.pkp_structure_head .pkp_site_name_wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    clear: both !important; /* Mencegah elemen atas mengganggu ruang bawah */
}

/* =========================================
   2. MENGGESER TEKS REGISTER & LOGIN AGAR TIDAK MEPET
   ========================================= */
/* Menggunakan padding-right agar efektif mendorong kotak menu ke kiri */
header.pkp_structure_head ul.pkp_navigation_user {
    padding-right: 3vw !important; /* Ubah angka 8vw ini menjadi lebih besar/kecil sampai lurus sempurna dengan ikon Search */
    margin-right: 0 !important;
    display: block !important;
}

/* Memastikan tulisan Register dan Login berjejer rapi dan tidak terpotong */
header.pkp_structure_head ul.pkp_navigation_user > li {
    display: inline-block !important;
    margin-left: 15px !important; /* Memberi sedikit spasi antara Register dan Login */
}

/* =========================================
   1. WARNA ADMIN BAR (Paling Atas)
   ========================================= */
header.pkp_structure_head .pkp_navigation_user_wrapper {
    background-color: #53c8d4 !important; /* Ganti #53c8d4 dengan kode warna biru asli Anda */
}

/* =========================================
   2. WARNA MENU BAR UTAMA (Home, Current, dll)
   ========================================= */
.pkp_structure_head .pkp_navigation_primary_row {
    background-color: #53c8d4 !important;
}

/* =========================================
   3. WARNA SIDEBAR KANAN
   ========================================= */
/* Warna latar judul kotak sidebar (About the Journal, dll) */
.pkp_structure_sidebar .pkp_block .title {
    background-color: #53c8d4 !important; 
    color: #ffffff !important; /* Teks judul diubah putih agar kontras */
}



/* Memastikan tulisan di sidebar tetap hitam/abu gelap agar terbaca jelas */
.pkp_structure_sidebar .pkp_block ul li a {
    color: #333333 !important; 
}

/* Efek saat menu sidebar disorot kursor (hover) */
.pkp_structure_sidebar .pkp_block ul li a:hover {
    background-color: #ffffff !important;
    color: #53c8d4 !important;
}

/* =========================================
   4. WARNA TOMBOL MAKE A SUBMISSION
   ========================================= */
.pkp_structure_sidebar .custom-block a {
    background-color: #53c8d4 !important;
    color: #ffffff !important;
    border: none !important;
}

/* =========================================
   5. SEJAJARKAN FOOTER ALAMAT & LOGO PKP (VERSI KUAT)
   ========================================= */
/* Memaksa kontainer utama menjadi baris horizontal */
.pkp_structure_footer_wrapper .pkp_structure_footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* Paksa agar tidak turun baris di layar PC */
}

/* Mengatur ruang untuk teks alamat di sebelah kiri */
.pkp_structure_footer_wrapper .pkp_page_footer {
    width: 70% !important; /* Memberi porsi ruang 70% untuk teks */
    float: none !important;
    padding-right: 20px !important;
    margin-bottom: 0 !important;
}

/* Mengatur ruang untuk logo OJS di sebelah kanan */
.pkp_structure_footer_wrapper .pkp_brand_footer {
    width: 30% !important; /* Sisa ruang 30% untuk logo */
    float: none !important;
    margin: 0 !important;
    text-align: right !important; /* Mendorong logo ke rata kanan */
}

/* Penyesuaian khusus jika dibuka di layar HP agar kembali bertumpuk rapi */
@media (max-width: 768px) {
    .pkp_structure_footer_wrapper .pkp_structure_footer {
        flex-wrap: wrap !important;
    }
    .pkp_structure_footer_wrapper .pkp_page_footer,
    .pkp_structure_footer_wrapper .pkp_brand_footer {
        width: 100% !important;
        text-align: center !important;
        padding-right: 0 !important;
        margin-bottom: 15px !important;
    }
}

/* =========================================
   6. PERBAIKAN TAMPILAN GAMBAR ABOUT DI HP
   ========================================= */
@media (max-width: 768px) {
    /* Menargetkan gambar di bagian About the Journal halaman depan */
    .homepage_about img,
    .obj_journal_description img {
        float: none !important; /* Mematikan posisi berdampingan */
        display: block !important; 
        margin: 0 auto 20px auto !important; /* Memaksa gambar pindah ke tengah dan memberi jarak bawah */
        max-width: 80% !important; /* Membatasi ukuran gambar agar tidak terlalu raksasa di HP */
        height: auto !important;
    }
}

/* =========================================
   6. PERBAIKAN TOTAL GAMBAR ABOUT DI HP
   ========================================= */
@media (max-width: 768px) {
    /* Memaksa SEMUA gambar di area konten utama turun ke tengah */
    .pkp_structure_main img {
        float: none !important;
        display: block !important;
        margin: 15px auto 20px auto !important;
        max-width: 80% !important; 
        height: auto !important;
        clear: both !important; /* Ini adalah kunci untuk memaksa teks turun ke bawah gambar */
    }

    /* Mengubah teks dari rata kanan-kiri (justify) menjadi rata kiri khusus di HP 
       agar tidak ada spasi putih yang bolong-bolong aneh */
    .pkp_structure_main p {
        text-align: left !important;
    }
}