/* =========================================
    0. HAPUS DEKORASI DEFAULT OJS (BERLAKU UNTUK SEMUA UKURAN)
   ========================================= */
/* Ini menghilangkan baris oranye/abu-abu yang mungkin muncul di desktop */
.pkp_structure_head::after,
.pkp_structure_head::before,
.pkp_site_name_wrapper::after,
.pkp_site_name_wrapper::before {
    display: none !important;
}


/* =========================================
    1. HEADER: LOGO UTUH TANPA DISTORSI & WARNA GANGGUAN
   ========================================= */

/* Target elemen header utama yang memiliki background oranye */
.pkp_structure_head {
    /* URL logo Anda */
    background-image: url('https://jurnal.al-fathsiak.org/public/journals/1/pageHeaderLogoImage_en.jpg');
    
    /* --- KUNCI UTAMA: Tampilkan gambar utuh di dalam kotak --- */
    background-size: contain;       /* Gambar akan selalu utuh dan proporsional */
    background-position: center center; /* Pusatkan gambar */
    background-repeat: no-repeat; /* Jangan ulangi gambar */
    
    /* --- PERBAIKAN PENTING: Paksa warna latar jadi putih di desktop --- */
    background-color: #fff !important; /* Ini akan menimpa warna oranye/abu-abu */
    border: none !important; /* Hapus border yang mungkin muncul */
    
    /* Berikan tinggi tetap agar layout bisa diandalkan */
    min-height: 180px; 
}

/* Sembunyikan logo default yang berada di dalam konten putih */
.pkp_site_name {
    display: none;
}

/* Atur ulang wrapper karena logo asli sudah tidak ada */
.pkp_site_name_wrapper {
    padding: 0;
}

/* =========================================
    1b. POSISI MENU NAVIGASI
   ========================================= */
.pkp_navigation_primary_wrapper {
    position: relative !important;
    /* --- KUNCI UTAMA: Dorong menu ke bawah sebesar tinggi header --- */
    margin-top: 180px !important; /* Harus sama dengan min-height header */
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #ddd;
}

/* Jarak halaman utama dari header yang sekarang bergambar */
.pkp_structure_page {
    margin-top: 0 !important; 
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
}


/* =========================================
    2. STYLING SIDEBAR (GOLD STYLE)
   ========================================= */
.pkp_block .title {
    display: block;
    margin: 0;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    border-bottom: 1px solid #faebbd;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background: linear-gradient(135deg, #faebbd 7%, #faebbd 3%, #faebbd 12%, #faebbd 54%, #ffc61a 85%, #cd9a00 120%);
    text-transform: uppercase;
}
.pkp_block .content {
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.pkp_brand_footer {
    display: none !important;
}


/* =========================================
    3. RESPONSIVE HEADER & NAVIGASI UNTUK MOBILE
   ========================================= */
@media (max-width: 767px) {
    /* --- Aturan Header di Mobile --- */
    .pkp_structure_head {
        /* Kurangi tinggi header di mobile */
        min-height: 80px; 
        /* Tetap gunakan contain agar logo utuh */
        background-size: contain; 
        /* --- PERBAIKAN PENTING: Pastikan latar belakang transparan di mobile --- */
        background-color: transparent !important; /* Ini mencegah oranye menutupi logo */
    }

    /* --- Aturan Navigasi di Mobile --- */
    .pkp_navigation_primary_wrapper {
        /* Sesuaikan margin dengan tinggi header di mobile */
        margin-top: 80px !important;
    }

    /* --- Aturan Footer dan Layout Umum --- */
    .pkp_structure_footer {
        background: #fff !important;
        border-top: 1px solid #ddd !important;
        color: #333 !important;
        padding: 20px 10px !important;
    }

    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .pkp_structure_page {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .pkp_structure_main, 
    .pkp_structure_sidebar {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    iframe {
        width: 100% !important;
        height: auto !important;
    }
}


/* =========================================
    4. CUSTOM SIDEBAR HOVER EFFECT (FINAL VERSION)
   ========================================= */
.custom-gold-sidebar {
    padding: 10px;
    background-color: transparent;
}

.sidebar-item {
    margin-bottom: 5px;
    
    a {
        display: inline-block; 
        padding: 8px 10px;
        color: #333; 
        text-decoration: none; 
        position: relative;
        transition: color 0.3s ease-in-out;

        &:hover {
            color: #d4af37; 
        }

        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #d4af37;
            visibility: hidden;
            transform: scaleX(0);
            transition: all 0.3s ease-in-out; 
        }

        &:hover::after {
            visibility: visible;
            transform: scaleX(1);
        }
    }
}