/* ==========================================================================
   MASTER CSS - EMERALD STYLE (FINAL FIXED SIDEBAR & MOBILE)
   ========================================================================== */

/* --- 1. IMPORT FONT & RESET --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&family=Open+Sans:wght@400;600&display=swap');

body { font-family: 'Open Sans', sans-serif; background-color: #ffffff; color: #222; overflow-x: hidden; }
a { text-decoration: none; transition: all 0.2s ease; }

/* HILANGKAN ELEMEN SAMPAH */
.breadcrumb, .page-header, .pkp_page_title, .about_journal > h1:first-child, .site_logo {
    display: none !important;
}


/* --- 2. DESKTOP HEADER (PAKU BUMI) --- */
header.navbar-default, #headerNavigationContainer {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 0 !important;
    height: 80px !important; /* Tinggi Fix Desktop */
    z-index: 99999 !important;
    position: relative !important;
}

#headerNavigationContainer .container {
    width: 100%; max-width: 1200px !important; padding: 0 20px;
    height: 100%; position: relative;
}

/* LOGO & MENU KIRI */
.navbar-header {
    float: left; height: 80px; display: flex; align-items: center;
    margin-right: 20px !important; padding-left: 50px !important;
}
a.navbar-brand {
    padding: 0 !important;
    background-image: url('https://prpcjournal.org/public/journals/1/pageHeaderLogoImage_en.png'); /* GANTI URL LOGO */
    background-repeat: no-repeat; background-position: left center; background-size: contain;
    width: 250px; height: 50px; color: transparent !important;
}

.navbar-collapse.collapse { width: auto !important; padding: 0 !important; margin: 0 !important; float: left !important; }
ul.nav.navbar-nav { float: left; margin: 0; display: flex; flex-direction: row; height: 80px; }
.navbar-nav > li > a {
    color: #222 !important; font-weight: 700; font-size: 13px; text-transform: uppercase;
    padding: 0 15px !important; line-height: 80px; white-space: nowrap;
}
.navbar-nav > li > a:hover { color: #005538 !important; }
ul.nav li.dropdown:hover > ul.dropdown-menu { display: block !important; top: 80px !important; }


/* --- 3. DESKTOP KANAN (SEARCH & USER) --- */
/* User Tikstudio */
body .pkp_structure_page header#headerNavigationContainer .user_navigation,
div.user_navigation, .user_navigation {
    position: absolute !important; top: 25px !important; right: 20px !important; 
    height: 30px !important; background: transparent !important; border: none !important;
    padding: 0 !important; margin: 0 !important; display: flex; align-items: center; z-index: 100005;
}
.user_navigation ul.nav > li > a {
    color: #555 !important; font-weight: 600; font-size: 11px; text-transform: uppercase;
    padding: 0 !important; line-height: 30px !important; display: block; text-shadow: none !important;
}

/* Search Box */
.navbar-form {
    position: absolute !important; top: 25px !important; right: 110px !important; 
    height: 30px !important; margin: 0 !important; padding: 0 !important;
    border: none !important; box-shadow: none !important; display: flex; align-items: center; z-index: 100004;
}
.navbar-form .form-control {
    height: 30px !important; width: 140px !important; font-size: 11px !important;
    border: 1px solid #ddd !important; background-color: #f9f9f9 !important; 
    border-radius: 2px 0 0 2px !important; padding: 0 10px !important;
}
.navbar-form .btn {
    height: 30px !important; background: #333 !important; color: #fff !important;
    border: none; text-transform: uppercase; font-size: 10px !important;
    border-radius: 0 2px 2px 0 !important; padding: 0 12px !important;
}


/* --- 4. BANNER EMERALD --- */
.row.journal_index {
    background: linear-gradient(135deg, #00a79d 0%, #008c82 100%) !important;
    padding: 70px 0 90px 0 !important; margin: 0 0 50px 0; border: none !important;
    text-align: left !important; position: relative; z-index: 1;
}
.about_journal, .row.journal_index .container {
    background: transparent !important; border: none !important; box-shadow: none !important;
    width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important;
    text-align: left !important;
}
.emerald-banner-layout { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; width: 100%; }
.emerald-text-col { width: 60% !important; text-align: left !important; padding-right: 20px !important; }
.emerald-img-col { display: block !important; width: 40% !important; text-align: right !important; }
.emerald-img-col img { max-width: 100%; height: auto; box-shadow: 0 25px 50px rgba(0,0,0,0.3); border: 4px solid rgba(255,255,255,0.2); transform: rotate(2deg); }
h1.emerald-title {
    font-family: 'Roboto', sans-serif; font-size: 3.5rem !important; font-weight: 300 !important;
    color: #ffffff !important; margin-bottom: 20px; line-height: 1.1; text-align: left !important;
}
p.emerald-desc {
    font-size: 1.3rem !important; color: rgba(255,255,255,0.95) !important; font-weight: 300;
    margin-bottom: 35px; line-height: 1.6; text-align: left !important; max-width: 100%; margin-left: 0;
}
.emerald-actions { display: flex; gap: 15px; justify-content: flex-start; }
.btn-emerald-primary { background-color: #9d1e58 !important; color: #fff !important; padding: 14px 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px; }
.btn-emerald-secondary { background-color: transparent !important; border: 2px solid #fff !important; color: #fff !important; padding: 14px 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px; }


/* --- 5. SIDEBAR FIX (HILANGKAN BIRU JADUL) --- */
/* Target semua elemen header sidebar dengan agresif */
.pkp_block .title,
.pkp_block .card-header,
.block_web_feed .title,
.block_browse .title,
.block_information .title {
    background: #ffffff !important; /* Paksa Putih */
    background-image: none !important; /* Hapus Gradasi */
    background-color: transparent !important;
    color: #333 !important;
    border: none !important;
    border-bottom: 2px solid #005538 !important; /* Garis Hijau */
    text-transform: uppercase;
    font-weight: 800;
    padding: 10px 0 !important;
    box-shadow: none !important;
}

/* Hilangkan border kotak */
.pkp_block .card, .pkp_block {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* ==========================================================================
   !!! MOBILE FIX (JURUS ANTI TABRAKAN) !!!
   ========================================================================== */
@media (max-width: 991px) {
    
    /* 1. HEADER JADI FLEKSIBEL (TIDAK DIKUNCI 80PX) */
    header.navbar-default, #headerNavigationContainer { 
        height: auto !important; 
        padding-bottom: 10px !important;
        position: relative !important;
    }
    
    /* 2. LOGO DI TENGAH, MENU DI KIRI */
    .navbar-header { 
        padding-left: 0 !important; 
        width: 100%; 
        height: 60px;
        display: flex;
        justify-content: center; /* Logo Center */
        margin-right: 0 !important;
    }
    
    /* Tombol Menu Burger (Garis Tiga) */
    .navbar-toggle {
        display: block !important;
        float: left !important;
        margin-left: 15px;
        margin-top: 13px;
        position: absolute;
        left: 0;
        z-index: 100010;
    }
    
    /* Logo Mobile */
    a.navbar-brand { 
        background-position: center !important; 
        width: 200px !important;
    }

    /* 3. USER (TIKSTUDIO) TURUN KE BAWAH LOGO */
    .user_navigation {
        position: relative !important; /* Lepas Absolute */
        top: auto !important; right: auto !important; 
        width: 100% !important;
        justify-content: center !important;
        margin-top: 5px !important;
        height: 30px !important;
    }

    /* 4. SEARCH TURUN DI BAWAH USER */
    .navbar-form {
        position: relative !important; /* Lepas Absolute */
        top: auto !important; right: auto !important;
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 15px !important;
        margin-top: 5px !important;
    }
    .navbar-form .form-control { width: 200px !important; }

    /* 5. BANNER TUMPUK */
    .emerald-banner-layout { flex-direction: column !important; }
    .emerald-text-col, .emerald-img-col { width: 100% !important; text-align: center !important; padding: 0 !important; }
    .emerald-img-col { margin-top: 30px !important; }
    h1.emerald-title, p.emerald-desc { text-align: center !important; }
    .emerald-actions { justify-content: center; }
}

/* Footer */
.pkp_structure_content { margin-top: 0 !important; }
footer.footer { background: #111 !important; color: #888; padding: 60px 0; border-top: none; }


/* ==========================================================================
   LAYOUT CARD STYLE: THE GOLDEN STANDARD (1280px)
   UI/UX Recommendation: Lebar pas, enak dibaca, fokus di tengah.
   ========================================================================== */

/* 1. CONTAINER: KUNCI DI TENGAH DENGAN LEBAR TETAP */
body, .pkp_structure_content { background-color: #f4f6f8 !important; }

.pkp_structure_content.container {
    max-width: 1280px !important; /* <-- INI ANGKA AJAIBNYA */
    width: 100% !important;
    margin: 0 auto !important; /* Pastikan rata tengah */
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 2. PEMBAGIAN KOLOM (70% KONTEN : 28% SIDEBAR) */
@media (min-width: 992px) {
    
    /* Kolom Kiri (Konten Utama) */
    .pkp_structure_main.col-md-8 {
        width: 70% !important; 
        flex: 0 0 70%;
        max-width: 70%;
        margin-right: 2% !important; /* Jarak Gap 2% */
    }

    /* Kolom Kanan (Sidebar) */
    .pkp_structure_sidebar.col-md-4 {
        width: 28% !important; /* Sidebar Pas (Gak kurus, gak gendut) */
        flex: 0 0 28%;
        max-width: 28%;
    }
}

/* 3. STYLING KARTU KIRI (KONTEN) */
.pkp_structure_main {
    background: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Shadow lembut */
    padding: 40px !important; /* Padding lega biar napas */
    border: 1px solid #eaf0f1;
    margin-bottom: 40px;
}

/* 4. STYLING KARTU KANAN (SIDEBAR) */
.pkp_structure_sidebar {
    background: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 25px !important;
    border: 1px solid #eaf0f1;
    height: fit-content;
}

/* 5. ISI KONTEN (FOTO & TEKS) */
#main-content .page_index_journal {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 30px; /* Jarak antar foto dan teks */
}

/* Foto Editor */
.homepage-image, .col-md-4 .media-object {
    width: 240px !important; /* Ukuran foto ideal */
    min-width: 240px !important;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    margin: 0 !important;
}

/* Teks Deskripsi */
.journal-description {
    flex: 1;
    padding: 0 !important;
    font-size: 16px !important; /* Font size dinaikkan dikit biar enak baca */
    line-height: 1.8 !important; /* Spasi antar baris */
    color: #444;
    text-align: justify;
}

/* 6. RESPONSIVE (HP) */
@media (max-width: 991px) {
    .pkp_structure_main, .pkp_structure_sidebar { width: 100% !important; margin-right: 0 !important; }
    #main-content .page_index_journal { flex-direction: column !important; }
    .homepage-image, .col-md-4 .media-object { width: 100% !important; max-width: 100% !important; margin-bottom: 20px !important; }
}


/* edit bos

/* ==========================================================================
   SIDEBAR HOVER EFFECT: ULTRA STRONG VERSION
   Fixes: Memaksa link sidebar geser & hijau saat disentuh
   ========================================================================== */

/* 1. RESET STYLE LINK SIDEBAR (TARGET SPESIFIK) */
/* Kita tembak langsung ke dalam struktur sidebar OJS */
body .pkp_structure_sidebar .pkp_block li a,
body .pkp_structure_sidebar .block_content li a,
.pkp_block .content ul li a {
    display: block !important;
    position: relative !important;
    padding: 10px 12px !important; /* Ruang napas */
    color: #555 !important;        /* Warna teks normal (Abu) */
    font-weight: 500 !important;
    text-decoration: none !important;
    
    /* Border kiri transparan (biar gak kaget pas hover) */
    border-left: 3px solid transparent !important; 
    border-bottom: 1px solid #f0f0f0 !important; /* Garis pemisah tipis */
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Animasi mulus */
    background-color: transparent !important;
}

/* 2. EFEK SAAT MOUSE NEMPEL (HOVER) */
body .pkp_structure_sidebar .pkp_block li a:hover,
body .pkp_structure_sidebar .block_content li a:hover,
.pkp_block .content ul li a:hover {
    color: #005538 !important;       /* Teks Hijau Emerald */
    background-color: #f7fcf9 !important; /* Background Hijau Pudar */
    
    /* GESER KE KANAN & MUNCULKAN GARIS HIJAU */
    padding-left: 20px !important;   
    border-left: 5px solid #005538 !important; 
    
    font-weight: 700 !important;     /* Teks Tebal */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.05) !important; /* Efek timbul */
}

/* 3. BERSIHKAN JARAK LIST */
body .pkp_structure_sidebar .pkp_block ul,
body .pkp_structure_sidebar .pkp_block li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important; /* Hilangkan titik bullet */
}