/* Wadah menu - Layout dipertahankan karena sudah bagus */
ul.menu-keteg-interaktif {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important; 
}

ul.menu-keteg-interaktif li {
  margin-bottom: 0 !important; 
  padding: 0 !important;
}

/* Desain Dasar Tombol - Efek Timbul Diperkuat Kontrasnya */
ul.menu-keteg-interaktif li a {
  display: block !important;
  padding: 4px 8px !important; 
  font-size: 11px !important; 
  font-weight: bold !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: #ffffff !important;
  text-decoration: none !important;
  line-height: 1.1 !important; 
  
  background: linear-gradient(to bottom, #3131f3, #2e2efc) !important;
  
  /* Kunci 3D: Garis atas terang (kena cahaya), garis bawah sangat gelap (bayangan) */
  border-top: 2px solid #4d4dff !important; 
  border-left: 1px solid #3333cc !important; 
  border-bottom: 2px solid #000011 !important; 
  border-right: 1px solid #00001a !important; 
  border-radius: 4px !important;
  
  /* Bayangan bawah diperbesar, pantulan cahaya atas (inset) dipertebal */
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.4) !important;
  
  /* Transisi khusus bergaya "Bouncy" (membal) agar interaktifnya terasa hidup */
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
}

/* EFEK INTERAKTIF (Zoom Lebih Besar & Terangkat) */
ul.menu-keteg-interaktif li a:hover {
  background: linear-gradient(to bottom, #2b2bff, #000055) !important; 
  
  /* Zoom dinaikkan dari 2% ke 5%, tombol terangkat 3px ke atas */
  transform: translateY(-3px) scale(1.05) !important; 
  
  /* Bayangan jatuh melebar karena tombol "terbang" mendekati kursor */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.6), inset 0 2px 2px rgba(255, 255, 255, 0.5) !important;
}

/* Efek saat diklik (Amblas ke dalam) */
ul.menu-keteg-interaktif li a:active {
  background: #000022 !important;
  
  /* Tombol turun dan mengecil sedikit layaknya ditekan keras */
  transform: translateY(2px) scale(0.98) !important; 
  
  /* Cahaya dibalik: Atas jadi gelap, bawah jadi terang */
  border-top: 2px solid #000011 !important; 
  border-bottom: 1px solid #4d4dff !important;
  
  /* Bayangan ditarik ke dalam dengan pekat */
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.7) !important;
}

/* Sidebar background batik */
.pkp_structure_sidebar {
    background-image: url('https://jurnal.isi-ska.ac.id/public/site/images/admin_keteg/batik.png') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    background-position: top !important;
    min-height: 100% !important;
    position: relative !important;
}

/* Paksa parent container stretch */
.pkp_structure_content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 100vh !important;
}

/* Pastikan semua block di dalam sidebar transparan */
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block,
.pkp_structure_sidebar > div,
.pkp_structure_sidebar > aside {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Kalau pakai Bootstrap theme */
.col-md-3.pkp_sidebar,
aside.pkp_sidebar {
    background-image: url('https://jurnal.isi-ska.ac.id/public/site/images/admin_keteg/batik.png') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    min-height: 100vh !important;
}

/* ========================================= */
/* GRAFIK BATANG INTERAKTIF SINTA CLONE      */
/* ========================================= */

.sinta-chart-container {
  background: #ffffff;
  padding: 15px 10px 10px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin-bottom: 15px;
}

.sinta-chart-title {
  text-align: center;
  font-size: 11px;
  color: #333;
  margin-bottom: 20px;
}

.sinta-bars-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 120px; 
  border-bottom: 1px solid #999; /* Garis dasar sumbu X */
  padding-bottom: 2px;
  gap: 2px;
  position: relative;
  
  /* Garis bantu horizontal (Grid) untuk melihat korelasi tinggi */
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 100% 25%;
}

.sinta-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
}

.sinta-bar {
  width: 75%; 
  background-color: #93c47d; 
  transition: background-color 0.2s ease;
  cursor: pointer;
  position: relative;
  border-radius: 2px 2px 0 0;
}

/* TITIK SIMPUL (Node) DI PUCUK BATANG */
.sinta-bar::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: #38761d; /* Hijau tua */
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 2;
}

/* POP-UP ANGKA SAAT DISOROT MOUSE */
.sinta-bar::after {
  content: attr(data-value); 
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  opacity: 0; 
  pointer-events: none;
  transition: opacity 0.2s, top 0.2s;
  z-index: 10;
}

.sinta-bar:hover {
  background-color: #6aa84f; 
}

.sinta-bar:hover::after {
  opacity: 1;
  top: -28px; /* Animasi pop-up sedikit terangkat */
}

.sinta-year {
  font-size: 9px;
  color: #666;
  margin-top: 5px;
}

/* TINGGI BATANG DIKUNCI DI CSS AGAR TIDAK DIHAPUS OJS */
.bar-18 { height: 19%; } /* 12 Sitasi */
.bar-19 { height: 22%; } /* 14 Sitasi */
.bar-20 { height: 33%; } /* 21 Sitasi */
.bar-21 { height: 48%; } /* 31 Sitasi */
.bar-22 { height: 90%; } /* 58 Sitasi */
.bar-23 { height: 68%; } /* 44 Sitasi */
.bar-24 { height: 57%; } /* 37 Sitasi */
.bar-25 { height: 71%; } /* 46 Sitasi */
.bar-26 { height: 9%; }  /* 6 Sitasi */

/* ========================================= */
/* MENGHILANGKAN CELAH PUTIH DI ATAS SIDEBAR */
/* ========================================= */

/* 1. Hilangkan bantalan putih global di bawah header secara paksa */
.pkp_structure_page, 
.pkp_structure_content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Berikan kembali jarak aman HANYA untuk area artikel (sebelah kiri) agar teks tidak menabrak header */
.pkp_structure_main {
    padding-top: 40px !important; 
}

/* 3. Tarik sedikit background sidebar ke atas jika masih ada sisa margin bawaan tema */
.pkp_structure_sidebar {
    margin-top: 0 !important;
}

/* ========================================= */
/* 3. BACKGROUND UTAMA WEBSITE & AREA KERTAS */
/* ========================================= */

/* Terapkan motif gamelan ke SELURUH layar (Body) */
body {
    background-image: url('https://jurnal.isi-ska.ac.id/public/site/images/admin_keteg/bg-kawung3.png') !important;
    background-attachment: fixed !important; /* Motif diam saat discroll */
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

/* Pastikan lapisan dasar transparan agar background terlihat */
.pkp_structure_page {
    background-color: transparent !important;
}

/* Buat "kertas putih" untuk area konten/artikel di sebelah kiri */
.pkp_structure_main {
    background-color: #ffffff !important; 
    padding: 30px 40px !important; 
    
    /* MODIFIKASI: Menempel penuh ke atas, KANAN, dan BAWAH (Footer) */
    margin-top: 0 !important; 
    margin-bottom: 0 !important; 
    margin-right: 0 !important; 
    
    /* MODIFIKASI: Sudut lurus rata semua (0) agar pas menabrak header dan footer */
    border-radius: 0 !important; 
    box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.15) !important; 
}

/* ========================================= */
/* 4. PENYESUAIAN LAYOUT & SIDEBAR MENYATU    */
/* ========================================= */

/* Alas kotak biru navy gelap untuk area navigasi */
.pkp_structure_sidebar,
.col-md-3.pkp_sidebar,
aside.pkp_sidebar {
    background-color: rgba(0, 0, 30, 0.95) !important; 
    padding: 30px 15px 20px 15px !important; 
    
    /* MODIFIKASI: Menempel penuh ke atas, KIRI (Kertas Putih), dan BAWAH (Footer) */
    margin-top: 0 !important; 
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    
    /* MODIFIKASI: Sudut lurus rata semua (0) */
    border-radius: 0 !important; 
    box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.2) !important; 
}

/* Bersihkan sisa background putih dari block-block bawaan OJS di sidebar */
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block,
.pkp_structure_sidebar > div,
.pkp_structure_sidebar > aside {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ========================================= */
/* 5. DESAIN FOOTER SELARAS TEMA JURNAL      */
/* ========================================= */

/* Mengubah warna latar dan teks pembungkus Footer */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
    background-color: #00001a !important; /* Warna biru navy sangat pekat (mirip sidebar) */
    color: #e0e0e0 !important; /* Warna teks abu-abu terang */
    border-top: 3px solid #cca300 !important; /* Garis pemisah pita emas yang elegan */
    margin-top: 0 !important; /* Memastikan bersentuhan lurus dengan konten di atasnya */
}

/* Jarak bernapas di dalam Footer */
.pkp_structure_footer {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Mewarnai link/tautan di dalam Footer */
.pkp_structure_footer a {
    color: #ffd700 !important; /* Warna link emas */
    text-decoration: none !important;
}

.pkp_structure_footer a:hover {
    color: #ffffff !important; /* Link berubah putih jika disorot */
    text-decoration: underline !important;
}

/* Trik menyulap gambar Logo OJS hitam menjadi Logo Putih bersinar */
.pkp_structure_footer img {
    filter: brightness(0) invert(1) !important; 
    opacity: 0.8 !important; /* Sedikit transparansi agar terlihat elegan tidak terlalu silau */
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700;900&display=swap');

.pkp_structure_head {
    position: sticky !important; 
    top: 0 !important; 
    z-index: 9999 !important;
    border-bottom: 5px solid #cca300 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-bottom: 5px solid #cca300 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pkp_site_name {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.pkp_site_name a {
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    min-height: 100px !important;
    padding: 15px 0 6px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pkp_site_name a::before {
    content: "" !important;
    display: block !important;
    width: 270px !important;
    height: 80px !important;
    background-image: url('https://jurnal.isi-ska.ac.id/public/site/images/admin_keteg/logo-keteg-metal-final.png') !important;
    background-size: contain !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
    border-right: 2px solid #cca300 !important;
    padding-right: 14px !important;
    margin-right: 20px !important;
    flex-shrink: 0 !important;
}

.pkp_site_name a::after {
    content: 'Jurnal Pengetahuan, Pemikiran\A dan Kajian Tentang "Bunyi"' !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    font-family: 'Noto Sans', sans-serif !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    letter-spacing: 0.8px !important;
    white-space: pre !important;
    text-shadow: 1px 2px 5px rgba(0,0,0,0.8) !important;
    flex: 1 !important;
}

/* Menghilangkan ruang kosong bawaan OJS di atas header */
.pkp_head_wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ========================================= */
/* 6. OPTIMASI TAMPILAN MOBILE / HP / TABLET */
/* ========================================= */

@media (max-width: 768px) {
    /* 1. Menumpuk Layout: Sidebar turun ke bawah konten utama */
    .pkp_structure_content {
        flex-direction: column !important; 
    }

    /* 2. Menyesuaikan area Kertas Putih (Konten) agar pas di layar kecil */
    .pkp_structure_main {
        padding: 20px 15px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Menyesuaikan Sidebar Biru agar melebar penuh di bawah konten */
    .pkp_structure_sidebar,
    .col-md-3.pkp_sidebar,
    aside.pkp_sidebar {
        width: 100% !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
    }

    /* 4. Menata Ulang Header & Logo untuk HP */
    .pkp_site_name a {
        flex-direction: column !important; /* Menumpuk logo di atas, teks di bawah */
        align-items: flex-start !important;
        min-height: auto !important;
        padding: 15px 15px !important;
    }

    /* Mengecilkan ukuran Logo Keteg dan membuang garis batas kanan */
    .pkp_site_name a::before {
        width: 180px !important; 
        height: 55px !important;
        border-right: none !important; 
        padding-right: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important; /* Jarak antara logo dan teks */
    }

    /* Mengecilkan ukuran Font Judul Jurnal dan mengizinkan teks turun ke baris baru */
    .pkp_site_name a::after {
        font-size: 14px !important; 
        white-space: normal !important; /* Membatalkan paksaan satu baris */
        line-height: 1.3 !important;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
    }
}