/* 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 */
}

/* ========================================= */
/* 6. GARIS EMAS DI BAWAH HEADER (SIMETRIS)  */
/* ========================================= */

.pkp_structure_head {
    border-bottom: 7px solid #cca300 !important; /* Garis emas yang sama persis dengan footer */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; /* Sedikit bayangan di bawah garis agar lebih hidup */
}

/* ========================================= */
/* 7. DESAIN HEADER: LOGO PNG & GAYA PARADIGMA */
/* ========================================= */

.pkp_site_name {
    margin: 0 !important;
}

/* Mengatur wadah Logo menjadi Flexbox (Kiri-Kanan) */
.pkp_site_name a.is_img {
    display: flex !important;
    align-items: center !important;
    gap: 25px !important; /* Jarak antara Logo KETEG dan teks deskripsi */
    text-decoration: none !important;
}

/* 1. Pengaturan Ukuran Logo Baru */
.pkp_site_name a.is_img img {
    max-height: 80px !important; /* Ukuran ideal agar proporsional dengan header */
    width: auto !important;
    
    /* Membuat garis batas emas vertikal di sebelah kanan logo */
    border-right: 3px solid #cca300 !important;
    padding-right: 25px !important;
    
    /* Efek animasi timbul (bergerak) saat disorot mouse */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* MEMBUAT EFEK TIMBUL: Logo akan terangkat saat disorot mouse */
.pkp_site_name a.is_img:hover img {
    transform: translateY(-3px) scale(1.03) !important;
}

/* 2. Menambahkan Teks Deskripsi di Sebelah Kanan Logo */
.pkp_site_name a.is_img::after {
    content: "JURNAL PENGETAHUAN, PEMIKIRAN, DAN KAJIAN TENTANG BUNYI" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #e0e0e0 !important; /* Warna teks putih sedikit abu-abu */
    line-height: 1.4 !important;
    letter-spacing: 1px !important;
    max-width: 380px !important; /* Membatasi lebar teks agar rapi membentuk paragraf */
    text-align: left !important;
    white-space: pre-wrap !important;
}