/* ==========================================================================
   1. BAGIAN BACKDROP: FULL SEAMLESS PATTERN MENUTUPI SELURUH LATAR WEB
   ========================================================================== */
html, body {
    /* Menggunakan gambar motif geometris Islami abu-abu pilihan Anda */
    background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTxir1Mg1P_II_mCrAKBvEw5Sm2R10IB_OSD0CncAkbg&s=10") #f5f9fb fixed !important;
    
    /* Membuat motif berulang tanpa putus ke seluruh penjuru halaman web */
    background-repeat: repeat !important;
    
    /* Ukuran kerapatan pattern agar kotak garisnya presisi dan pas di layar */
    background-size: 180px 180px !important; 
    
    overflow-x: hidden;
    font-family: "Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
}

/* Sinkronisasi jarak layout luar OJS agar serasi dengan background baru */
.pkp_structure_page {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
}


/* ==========================================================================
   2. BAGIAN HEADER & BANNER LOGO (TRANSPARAN AGAR PATTERN TEMBUS KE ATAS)
   ========================================================================== */

/* Memaksa seluruh area struktur kepala/header menjadi transparan */
.pkp_structure_head {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 0px !important;
}

/* Mengatur kontainer utama melebar penuh dan menghilangkan warna latar belakang */
.pkp_site_name_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important; 
    background-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Menyiapkan area gambar logo untuk efek cahaya (tanpa keluar jalur) */
.pkp_site_name_wrapper .pkp_site_name .is_img {
    position: relative;
    display: block;
    overflow: hidden; /* Memotong cahaya agar tetap di dalam area logo */
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}

/* Memaksa gambar logo menggunakan ukuran penuh web tanpa batasan OJS */
.pkp_site_name .is_img img {
    max-height: none !important;
    max-width: 100% !important;
    width: 100% !important; /* Memaksa gambar melebar penuh mengikuti layar */
    height: auto !important; /* Memastikan gambar tidak gepeng dan proporsi terjaga */
    display: block;
    margin: 0 auto;
}


/* ==========================================================================
   3. ANIMASI LAPISAN CAHAYA DI ATAS BANNER LOGO
   ========================================================================== */
.pkp_site_name_wrapper .pkp_site_name .is_img::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Posisi awal cahaya di luar kiri logo */
    width: 30%;  /* Lebar kilauan cahaya */
    height: 100%;
    
    /* Efek gradasi warna putih berkilau */
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* Kemiringan garis cahaya */
    
    /* Menjalankan animasi kilauCahaya secara berkala */
    animation: kilauCahaya 7s infinite ease-in-out;
}

/* Aturan pergerakan cahaya (dari kiri melesat ke kanan) */
@keyframes kilauCahaya {
    0% {
        left: -150%;
    }
    25% {
        left: 150%; /* Cahaya berjalan cepat ke kanan melewati logo */
    }
    100% {
        left: 150%; /* Jeda waktu sebelum animasi diulang kembali */
    }
}


/* ==========================================================================
   4. BAGIAN HALAMAN TENGAH: MENUTUPI PATTERN (PERSIS SEPERTI INKUNABULA)
   ========================================================================== */
.pkp_structure_content {
    background: #ffffff !important; /* Memaksa warna latar belakang tengah menjadi putih solid */
    max-width: 1200px !important;  /* Membatasi lebar konten tengah agar pattern kiri-kanan tetap kelihatan */
    margin: 0 auto !important;     /* Memastikan posisi konten tengah tepat berada di pusat layar */
    padding: 30px 20px !important; /* Memberikan jarak ruang di dalam kotak agar tulisan tidak mentok ke pinggir */
    
    /* Memberikan efek bayangan halus di sisi kiri & kanan kotak putih agar terlihat estetik dan timbul */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05) !important; 
    border-radius: 4px; /* Membuat sudut kotak sedikit melengkung halus */
}

/* Memastikan area footer bawah ikut menyesuaikan lebar konten tengah */
.pkp_structure_footer {
    max-width: 1200px !important;
    margin: 0 auto !important;
}


/* =======================================================
   NAVIGASI UTAMA - GAYA KLASIK ELEGAN (GEORGIA)
   ======================================================= */

/* 1. Menggeser seluruh baris menu sedikit ke kanan */
.pkp_navigation_primary_wrapper {
    padding-left: 35px !important; /* Ubah angka ini jika ingin menggeser lebih kanan/kiri */
}

/* 2. Mengubah teks menu menggunakan Font Georgia Bold */
.pkp_navigation_primary a {
    font-family: 'Georgia', Times, serif !important;
    font-weight: 700 !important;          /* Membuat huruf menjadi Tebal (Bold) */
    font-size: 14px !important;           /* Ukuran huruf proporsional untuk menu */
    text-transform: uppercase !important;  /* Mengubah huruf menjadi kapital semua agar estetik */
    letter-spacing: 1px !important;       /* Memberikan sedikit rongga antar-huruf agar mewah */
}


/* ========================================================
   CSS KHUSUS UNTUK TOMBOL GAMBAR (PPT) - JURNAL QALAM
   ======================================================== */

/* 1. Atur semua link yang membungkus gambar di sidebar agar siap bergerak */
.pkp_structure_sidebar .block_custom a,
#sidebar .block_custom a,
.sidebar .block_custom a {
    display: inline-block !important;
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out !important;
    border-radius: 6px !important; /* Menyesuaikan lengkungan gambar Anda */
}

/* 2. Efek saat kursor menyentuh Gambar PPT Anda (Hover) */
.pkp_structure_sidebar .block_custom a:hover,
#sidebar .block_custom a:hover,
.sidebar .block_custom a:hover {
    /* Memaksa seluruh boks gambar terangkat ke atas */
    transform: translateY(-4px) scale(1.03) !important;
    /* Memancarkan bayangan emas mewah di luar tepi gambar */
    box-shadow: 0 10px 20px rgba(180, 83, 9, 0.6) !important;
}

/* 3. Menjaga agar gambar di dalamnya ikut halus saat boksnya membesar */
.pkp_structure_sidebar .block_custom a img,
#sidebar .block_custom a img,
.sidebar .block_custom a img {
    display: block !important;
    transition: filter 0.25s ease-in-out !important;
}

.pkp_structure_sidebar .block_custom a:hover img,
#sidebar .block_custom a:hover img,
.sidebar .block_custom a:hover img {
    filter: brightness(1.08) !important; /* Membuat gambar sedikit lebih cerah saat disentuh */
}