/* =========================================================
   CUSTOM STYLE OJS 3.5 - JIPENDIKA
   Gabungan: HEADER MODERN + SIDEBAR MODERN GLOW
   ========================================================= */

/* ==== BAGIAN 1: HEADER MODERN UNTUK OJS 3.5 ==== */

/* Hilangkan batas dan padding bawaan OJS */
.pkp_structure_head {
    margin: auto;
    max-width: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background-color: #f5f5f5; /* Bisa ganti sesuai branding */
}

/* Atur head dan body supaya seirama */
body {
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* dasar putih */
    background-image: 
        linear-gradient(to right, rgba(220,220,220,0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(220,220,220,0.3) 1px, transparent 1px);
    background-size: 5px 5px; /* ukuran kotak grid */
}

.pkp_site_name .is_img img {
    display: inline-centre-block;
    max-height: none;
    max-width: 500%;
    width: auto;
    height: auto;
}


/* Logo agar full lebar dan responsif */
.pkp_site_name_wrapper img {
    width: 100% !important;
    max-width: 1600px;
    height: auto !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Hilangkan nama jurnal default jika ada */
.pkp_site_name .is_text {
    display: none !important;
}

/* Responsif untuk tampilan mobile */
@media (max-width: 992px) {
    .pkp_site_name_wrapper img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 576px) {
    .pkp_site_name_wrapper img {
        width: 100%;
        height: auto;
    }
}

/* Garis tipis bawah header opsional */
.pkp_structure_head {
    border-bottom: 2px solid #043287 cc;
}


/* ==== BAGIAN 2: SIDEBAR MODERN DENGAN ANIMASI GLOW ==== */

/* Tata letak menu lebih rapat */
.pkp_block.block_custom ul,
.pkp_block.block_custom li,
.pkp_block.block_navigation ul,
.pkp_block.block_navigation li {
    margin: 0 !important;
    padding: 2px 0 !important;
    line-height: 1.3 !important;
    list-style: none !important;
}

/* Tampilan menu sidebar */
.pkp_block.block_custom a,
.pkp_block.block_navigation a {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2b2b2b;
    background-color: #f9f9f9;
    padding: 6px 12px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* Efek hover gradasi elegan */
.pkp_block.block_custom a:hover,
.pkp_block.block_navigation a:hover {
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #3b82f6, #06b6d4);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateX(3px);
}

/* Efek glow animasi pada menu aktif */
.pkp_block.block_custom a.active,
.pkp_block.block_navigation a.active {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: #fff;
    box-shadow: 0 0 10px rgba(59,130,246,0.8), 0 0 20px rgba(6,182,212,0.6);
    animation: glowPulse 1.5s infinite ease-in-out;
}

/* Animasi glow */
@keyframes glowPulse {
    0% {
        box-shadow: 0 0 5px rgba(59,130,246,0.7), 0 0 10px rgba(6,182,212,0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(59,130,246,1), 0 0 35px rgba(6,182,212,0.8);
    }
    100% {
        box-shadow: 0 0 5px rgba(59,130,246,0.7), 0 0 10px rgba(6,182,212,0.5);
    }
}

/* Tambahkan ikon ceria di depan menu */
.pkp_block.block_custom a::before,
.pkp_block.block_navigation a::before {
    content: "✨";
    margin-right: 6px;
    transition: transform 0.3s ease-in-out;
}

/* Animasi ikon saat hover */
.pkp_block.block_custom a:hover::before,
.pkp_block.block_navigation a:hover::before {
    transform: rotate(20deg) scale(1.2);
}

/* Tampilan blok sidebar lebih elegan */
.pkp_block.block_custom,
.pkp_block.block_navigation {
    margin-bottom: 10px !important;
    padding: 8px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Judul blok sidebar */
.pkp_block_title {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #1e40af !important;
    margin-bottom: 6px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 4px;
}

/* Body background dengan corak batik samar */
body {
    background-color: #f5f5f5; /* warna dasar netral */
    background-image: url('path_to_batik_pattern.png'); /* ganti dengan file batik samar */
    background-repeat: repeat;
    background-size: 200px 200px; /* ukuran corak batik, bisa diubah */
    font-family: "Arial", sans-serif;
    color: #333;
}

/* Kontainer konten menyesuaikan body */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, 0.95); /* semi transparan agar tulisan terbaca */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Konten utama sambung langsung ke footer */
.pkp_structure_main {
    min-height: calc(100vh - 150px); /* sesuaikan tinggi layar dikurangi header+footer */
    background: #ffffff !important;  /* warna putih */
    margin-bottom: 0 !important;     /* hilangkan gap */
    box-shadow: none !important;     /* tanpa bayangan */
    padding-bottom: 30px;            /* beri jarak sebelum footer */
}

/* Footer langsung nempel ke konten */
.pkp_structure_footer {
    margin-top: 0 !important;
}
.pkp_navigation_primary_wrapper {
    background-color: #ffffff; /* warna background */
    padding: 2px 0;           /* semakin kecil, semakin pendek tingginya */
    min-height: 20px;         /* bisa ditentukan tinggi minimum */
  
}

.pkp_navigation_primary a {
    color: #000000 !important; /* warna teks menu */
    font-size: 14px;           /* bisa kecilkan font biar lebih ramping */
    padding: 2px 10px;         /* atur jarak teks dalam menu */
}

/* Hilangkan jarak di bawah menu */
.pkp_navigation_primary_wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Hilangkan jarak ekstra dari wrapper konten */
.pkp_head_wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Atur konten supaya naik ke atas */
.pkp_structure_content {
    margin-top: 5px !important;   /* bisa atur 0 kalau mau benar-benar rapat */
    padding-top: 0 !important;
}
.pkp_navigation_primary_wrapper {
    display: flex;
    justify-content: flex-start; /* default */
    padding-left: 40px;          /* geser ke kanan */
}


/* Footer compact + dark mode */
.pkp_structure_footer_wrapper {
    max-width: 1155px;          /* lebar maksimal footer 900px */
    margin: 0.5px auto 0 auto;  /* jarak atas 20px, kanan–kiri auto (tengah), bawah 0 */
    padding: 1px;             /* ruang dalam footer 15px */
    background-color: #A7BBCC; /* warna latar belakang footer = biru gelap */
    border-top: 2px solid #000000; /* garis tebal 2px di bagian atas footer */
    border-radius: 6px 6px 0 0;    /* sudut melengkung 6px di kiri-kanan atas */
}


/* Styling untuk isi footer */
.pkp_structure_footer {
    text-align: left;   /* Semua teks di dalam footer diratakan ke tengah */
    font-size: 12px;      /* Ukuran teks kecil (12 piksel), cocok untuk footer */
    line-height: 1.6;     /* Jarak antar baris teks 1.6x lebih besar agar lebih mudah dibaca */
    color: #000000;       /* Warna teks putih keabu-abuan (#f5f5f5) */
}


/* Link di footer */
.pkp_structure_footer a {
    color: #4dabf7; /* biru soft */
    text-decoration: none;
}
.pkp_structure_footer a:hover {
    text-decoration: underline;
}

/* Logo OJS/PKP lebih kecil dan soft */
.pkp_brand_footer {
    max-width: 120px;     /* Lebar maksimum logo PKP dibatasi hanya 110px agar tidak terlalu besar */
    margin: 10px auto 0 auto;  /* Logo diberi jarak atas 10px, dan diatur posisi tengah secara horizontal (auto kiri-kanan) */
    opacity: 1;         /* Logo dibuat agak transparan (80% terlihat, 20% transparan) sehingga tampak lebih soft */
}


/* Efek hover logo PKP */
.pkp_structure_footer_wrapper .pkp_brand_footer img:hover {
    opacity: 2;               /* jadi full terlihat */
    filter: brightness(2);  /* sedikit lebih cerah */
}


/* Dark mode: logo putih */
@media (prefers-color-scheme: dark) {
  .pkp_structure_footer_wrapper .pkp_brand_footer img {
      filter: brightness(0) invert(1);  /* Membalik warna logo agar jadi putih */
  }

  .pkp_structure_footer_wrapper .pkp_brand_footer img:hover {
      opacity: 1;  /* Saat hover jadi full terlihat */
      filter: brightness(0) invert(1) drop-shadow(0 0 4px #ffffff55);
      /* Logo putih + efek glow halus putih */
  }
}
/* Light mode: logo hitam */
@media (prefers-color-scheme: light) {
  .pkp_structure_footer_wrapper .pkp_brand_footer img {
      filter: brightness(0); /* Membuat logo berubah jadi hitam */
  }

  .pkp_structure_footer_wrapper .pkp_brand_footer img:hover {
      opacity: 1;  /* Saat hover logo tampil lebih jelas (opacity penuh) */
      filter: brightness(0) drop-shadow(0 0 3px #00000033);
      /* Logo hitam + efek bayangan lembut */
  }
}