/* 1. Sembunyikan semua seksi menu agar tidak muncul bersamaan saat refresh */
.menu-section {
  display: none;
}

/* 2. Hanya izinkan seksi HOME yang tampil di awal */
#section-home {
  display: block;
}

body { 
  margin: 0; 
  /* Efek radial agar background tidak flat */
  background: radial-gradient(circle, #1a1a1a 0%, #080808 100%); 
  background-color: #080808; 
  color: #CCC; /* Hijau IBM */
  font-family: 'IBM Plex Mono', monospace; 
  overflow-x: hidden; 
  /* Glow pada teks */
  text-shadow: 0 0 5px rgba(50, 205, 50, 0.7);
}

body::after { 
  content: ""; 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  /* Gabungan garis horizontal dan distorsi warna vertikal tipis */
  background: 
    repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0px, transparent 2px),
    linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 4px, 3px 100%;
  pointer-events: none; 
  z-index: 9999;
}

.header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  /* Border disesuaikan ke hijau */
  border: 2px solid #32cd32; border-left-style: none; border-right-style: none; border-top-style: none;
  padding: 10px 20px; padding-top: 0px; padding-bottom: 0px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.9);
  /* Tambahan: bayangan halus pada header */
  box-shadow: 0 0 15px rgba(50, 205, 50, 0.2);
}

/* Pastikan link dan button juga ikut berubah warna */
a, button {
  color: #32cd32;
  border: 0px solid #32cd32;
  text-decoration: none;
  background: transparent;
}

.logo {
  /* --- KONTROL IBM AMBER HORROR --- */
  --neon-color: #f9f8f5;      /* Kuning IBM Amber */
  --neon-intensity: 0.8;      /* Kekuatan cahaya */
  --flicker-speed: 7s;        /* Durasi siklus kedipan */

  /* Font & Ukuran Dasar */
  font-family: 'VT323', monospace;
  font-size: 50px;
  color: var(--neon-color);
  letter-spacing: 0px;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  
  /* Efek Glow (Sudah dihapus warna putihnya) */
  text-shadow: 
    0 0 calc(5px * var(--neon-intensity)) var(--neon-color),
    0 0 calc(15px * var(--neon-intensity)) rgba(255, 176, 0, 0.4),
    0 0 calc(30px * var(--neon-intensity)) rgba(255, 176, 0, 0.2);
  
  /* Animasi Kedip Neon Horror */
  animation: horrorFlicker var(--flicker-speed) infinite linear;
}

/* Biar logo pas di layar HP */
@media (max-width: 768px) {
  .logo {
    font-size: 28px !important;
  }
}

/* Logika Animasi Kedip (Teks tidak akan hilang total) */
@keyframes horrorFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 0.9;
    text-shadow: 
      0 0 calc(5px * var(--neon-intensity)) var(--neon-color),
      0 0 calc(15px * var(--neon-intensity)) rgba(255, 176, 0, 0.4);
  }
  20%, 24%, 55% {
    opacity: 0.4; /* Tetap redup tapi tidak hilang (sesuai request) */
    text-shadow: 0 0 calc(2px * var(--neon-intensity)) var(--neon-color);
  }
}

/* --- PERBAIKAN CSS NAVIGASI & DROPDOWN --- */

.top-nav { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
}

/* 1. Styling Tombol Navigasi Utama */
.top-nav button, #merch-btn, #instagram-btn, #lang-btn, .ai-style-change-6 {
  background: rgba(0, 0, 0, 0.9);
  color: #CCC;
  border: 1px solid #FFB000 !important;
  padding: 0 12px !important;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 14px;
  width: 132px;
  height: 36px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.2s ease;
  position: relative;
  z-index: 10001;
}

.top-nav button:hover, #merch-btn:hover, #instagram-btn:hover, #lang-btn:hover, .ai-style-change-6:hover {
  background: #FFB000 !important;
  color: #000 !important;
}

/* 2. Container Dropdown (UPDATE: Z-Index ditingkatkan agar tidak tertimpa IG) */
.dropdown { 
  position: relative; 
  display: inline-block; 
  vertical-align: middle;
  z-index: 20000 !important;
}

/* 3. Menu Dropdown (UPDATE: Lebar 100% & Fix Pop-up muncul saat refresh) */
#lang-dropdown, #novel-dropdown, .dropdown-content { 
  display: none !important; /* Paksa sembunyi saat refresh halaman */
  position: absolute; 
  top: 36px; 
  left: 0; 
  width: 100% !important; /* Lebar otomatis sama dengan tombol di Web & Mobile */
  min-width: 100% !important;
  background: #000 !important;
  border: 1px solid #FFB000; 
  z-index: 30000; 
  margin-top: 0; 
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  overflow: hidden;
  box-sizing: border-box;
}

/* 4. Munculkan hanya saat Hover */
.dropdown:hover #lang-dropdown, 
.dropdown:hover #novel-dropdown,
.dropdown:hover .dropdown-content { 
  display: block !important; 
}

/* 5. Styling Link di dalam Menu */
#lang-dropdown a, #novel-dropdown a, .dropdown-content a { 
  display: flex !important; 
  align-items: center;
  justify-content: center; 
  background: transparent;
  color: #CCC; 
  padding: 12px 6px; 
  text-decoration: none; 
  border-bottom: 1px solid #222; 
  font-size: 11px; 
  font-family: 'IBM Plex Mono', monospace;
  font-weight: bold;
  text-transform: uppercase; 
  letter-spacing: 1px;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

#lang-dropdown a:hover, #novel-dropdown a:hover, .dropdown-content a:hover {
  background: #FFB000 !important;
  color: #000 !important;
}

/* Hilangkan garis bawah di item terakhir */
#lang-dropdown a:last-child, #novel-dropdown a:last-child, .dropdown-content a:last-child {
  border-bottom: none;
}

/* --- BAGIAN TITLE & ANIMASI LAINNYA --- */

#title-box { 
  width: 100% !important; 
  max-width: 100% !important; 
  box-sizing: border-box !important; 
  overflow: hidden !important; 
  word-wrap: break-word !important; 
  display: block;
}

.cursor { 
  display: inline-block;
  width: 12px;
  height: 35px;
  background-color: #FFB000;
  margin-left: 4px;
  vertical-align: bottom;
  animation: blinkCursor 0.8s step-end infinite; 
}

@keyframes blinkCursor { 
  from, to { opacity: 1; } 
  50% { opacity: 0; } 
}

.marquee span { 
    display: inline-block; 
    padding-left: 100%; 
    animation: marquee 25s linear infinite; 
    color: white;  
}

@keyframes marquee { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-100%); } 
}
.main-container { display:flex; min-height:80vh; }
.left-sidebar {
    width: 220px;
    border-right: 2px solid #32cd32;
    /* Kita ubah padding atas dari 15px menjadi 10px agar posisi menu pas */
    padding: 10px 15px 15px 15px; 
    box-sizing: border-box; /* Sangat penting agar padding tidak merusak lebar 220px */
}

.menu {
    margin-top: 5px; /* Memberikan sedikit celah agar terlihat lebih rapi */
    padding: 0;
    list-style: none;
}
/*9 MENU*/
/* 1. Definisi Animasi Denyut (Pulse) */
@keyframes pulse-soft {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 176, 0, 0.7);
    }
    50% {
        transform: scale(1.03); /* Membesar sedikit */
        box-shadow: 0 0 15px 5px rgba(255, 176, 0, 0); /* Cahaya memudar */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 176, 0, 0);
    }
}

/* 2. Container Menu */
.menu { 
    list-style: none; 
    padding: 10px !important;
    margin-bottom: 15px !important; /* Memberi jarak dengan elemen di bawahnya */
    border: 2px solid #FFB000 !important; /* Tambahkan !important agar tidak ditimpa */
    border-radius: 0 !important;
    box-sizing: border-box !important; /* Sangat penting agar border tidak "memakan" tempat keluar */
    display: block !important;
}

/* 3. Gaya Semua Item Menu (Termasuk Penyeragaman Font) */
.menu li { 
    padding: 8px; 
    cursor: pointer; 
    border: 1px solid transparent; 
    font-family: "IBM Plex Mono", monospace; 
    font-size: 16px;
    font-weight: bold;
    color: #CCC; /* Warna oranye saat tidak aktif */
    transition: all 0.3s ease;
    position: relative;
    display: list-item; /* Memastikan semua menu punya layout yang sama */
}

/* 4. Gaya Saat Menu Di-Hover */
.menu li:hover { 
    background: #FFB000; 
    color: black; 
    border: 1px solid #FFB000;
}

/* 5. Gaya Saat Menu Aktif (Dengan Animasi Pulse) */
.menu li.active { 
    background: #FFB000 !important; 
    color: black !important; 
    border: 1px solid #FFB000 !important;
    animation: pulse-soft 3s infinite ease-in-out !important;
    z-index: 1;
    
}

/* PENTING: Jika ada kode khusus li:nth-child(6) atau 
   selector UNIT 241 di file CSS Anda, silakan dihapus agar tidak bentrok. */
/* Container luar agar ukurannya pas */
.external-box {
  margin-top: 15px;
  border: 1px solid #FFB000;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box; /* Mencegah kotak melar keluar sidebar */
}

/* Style untuk container utama B.P.E Station */
.ibm-5151-game {
    margin-top: 20px;
    padding: 15px;
    border: none;
    background-color: transparent;
    color: #CCC;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2); /* Efek glow tipis */
}

.ibm-5151-game #bpe-title {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 1px;
}

.ibm-5151-game canvas {
    border: 1px solid #00ff00;
    display: block;
    margin: 0 auto;
    background-color: transparent;
}

.ibm-5151-game #bpe-status {
    margin-top: 9px;
    font-size: 9px;
    text-transform: uppercase;
}
/* Style untuk Oscilloscope */
.ibm-5151-osc {
    margin-top: 15px;
    padding: 10px;
    border: none;
    background-color: transparent;
    color: #CCC;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);
}

#osc-canvas {
    border: 1px solid #00ff00;
    display: block;
    margin: 5px auto;
    background-color: transparent;
}

#osc-stats {
    font-size: 9px;
    opacity: 0.8;
    letter-spacing: 0.5px;
}
/* Animasi Scanline & Flicker */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}

@keyframes flicker {
  0% { opacity: 0.97; }
  5% { opacity: 0.95; }
  10% { opacity: 0.9; }
  15% { opacity: 0.95; }
  30% { opacity: 0.98; }
  50% { opacity: 0.96; }
  80% { opacity: 0.99; }
  100% { opacity: 0.97; }
}

/* Container Efek CRT */
.crt-effect {
  position: relative;
  overflow: hidden;
}

/* Scanlines Horizontal & Vertical Mesh */
.crt-effect::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 10;
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
}

/* Efek Flicker Layar */
.crt-effect::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0.1;
  z-index: 11;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

/* Garis Pindai yang Berjalan */
.scanline-overlay {
  width: 100%;
  height: 20px;
  z-index: 12;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 255, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  animation: scanline 4s linear infinite;
  pointer-events: none;
}
/* Sidebar Log & System Status */
.log-status {
    color: #5f5;
    font-weight: bold;
    border-bottom: 1px solid #222;
    margin-bottom: 5px;
}

.text-danger {
    color: #f00;
}
/* Styling Box Log Baru */
.ibm-5151-log {
  margin-top: 10px;
  padding: 10px;
  background: transparent;
  border: 1px solid #333;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #0f0;
  text-shadow: 0 0 5px #0f0;
}

.log-line {
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
}

/* Kondisi awal link: Transparan & Tulisan Kuning */
.external-box a {
  display: block;
  color: #FFB000 !important; /* Warna teks kuning */
  text-decoration: none;
  border: 1px solid #FFB000;
  padding: 8px 12px;
  font-size: 11px; /* Font agak kecil biar gak makan tempat */
  text-align: center;
  border-radius: 4px;
  background-color: transparent !important; /* Pastikan awal transparan */
  transition: all 0.3s ease;
  box-sizing: border-box;
  line-height: 1.4;
}

/* Kondisi pas disentuh mouse (Hover) */
.external-box a:hover {
  background-color: #FFB000 !important; /* Jadi kuning solid */
  color: #000000 !important; /* Teks jadi hitam */
  transform: scale(1.02); /* Sedikit membesar */
  animation: blink-yellow 0.6s infinite alternate ease-in-out;
}

/* Animasi kelap-kelip */
@keyframes blink-yellow {
  0% { box-shadow: 0 0 5px rgba(255, 176, 0, 0.7); }
  50% { box-shadow: 0 0 15px rgba(255, 176, 0, 1); }
  100% { box-shadow: 0 0 5px rgba(255, 176, 0, 0.7); }
}
/* 1. CSS Dasar untuk semua kotak (termasuk yang di kolom) */
/* Style Dasar: Berlaku untuk semua kotak (Home, dll) */
.content-box { 
    border: 2px solid #32cd32; 
    padding: 15px; 
    margin-bottom: 20px; 
    position: relative;
    max-height: none; /* Pastikan tidak memotong di Home */
    overflow-y: visible;
}

/* Style Khusus: Hanya untuk kotak yang ingin diberi scrollbar */
.content-box.scrollable { 
    max-height: 400px; 
    overflow-y: auto;
    padding-right: 10px;
    
    /* Standard untuk Firefox */
    scrollbar-width: thin;
    scrollbar-color: #45a049 #000000;
}

/* Kustomisasi Scrollbar (Hanya untuk .scrollable) */
.content-box.scrollable::-webkit-scrollbar {
    width: 10px;
}

.content-box.scrollable::-webkit-scrollbar-track {
    background: #000000;
    border-radius: 10px;
}

.content-box.scrollable::-webkit-scrollbar-thumb {
    background: #45a049;
    border-radius: 10px;
    border: 2px solid #000000;
}

.content-box.scrollable::-webkit-scrollbar-thumb:hover {
    background: #45a049;
}

/* 2. CSS Khusus untuk kotak paling atas agar tidak tertimpa neon Marquee */
#section-home > .content-box {
    border-top: none !important;
}

/* 3. CSS Marquee lu yang sudah pakai neon */
.marquee { 
    border-top: 0px solid #FFB000; 
    border-bottom: 1px solid #FFB000; 
    padding: 0px; 
    font-size: 25px; 
    overflow: hidden; 
    white-space: nowrap; 
    font-family: 'VT323'; 
    background: transparent; 
    box-shadow: 0 4px 15px rgba(255, 176, 0, 0.7), 0 6px 25px rgba(255, 176, 0, 0.4);
    position: relative;
    z-index: 10;
}
.warning-box { background:#FFB000; color:black; padding:5px; margin-top: 0px; font-size:12px; display:inline-block; width: 98.7%; text-align: justify; }
/* --- LAYOUT UTAMA --- */
.two-columns { 
    display: flex; 
    gap: 20px; 
    align-items: stretch; 
    margin-top: 25px;
}

.two-columns .content-box { 
    flex: 1; 
    padding: 15px; /* Menyeragamkan padding semua kotak */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Mengatur konten di dalamnya agar berurutan ke bawah */
}
/* Header Box & Title */
.header-box {
    border: 2px solid #FFB000;
    padding: 10px;
    background: transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.declassified {
    font-size: 10px;
    opacity: 0.6;
    font-family: 'IBM Plex Mono';
    margin-bottom: 6px;
}

.title-box-text {
    font-family: 'VT323';
    color: #FFB000;
    font-size: 35px;
    line-height: 1.0;
    letter-spacing: 1px;
    width: 100%;
    word-wrap: break-word;
    white-space: normal;
    min-height: 70px;
}

/* Elements Utility */
.news-badge {
    cursor: pointer;
    border: 1px solid #FFB000;
    padding: 2px 5px;
    background: #111;
    font-size: 10px;
}

.w-100 {
    width: 100%;
}

/* --- KOTAK NEWS (KIRI) --- */
.content-box.news-box h3 {
    display: flex;
    color: #FFB000;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    margin-bottom: 15px; /* Memberi jarak ke list berita di bawahnya */
}
/* Container list berita */
#news-list > div {
    margin-bottom: 10px;
}

#news-list p {
    font-size: 12px;
    margin: 5px 0;
    color: #eee;
}

#news-list hr {
    border: 0;
    border-top: 1px solid #333;
    margin: 10px 0;
}

/* Style untuk elemen small yang Anda minta */
#news-list small {
    border: 1px solid #FFB000;
    padding: 2px;
    color: #FFB000;
    display: inline-block; /* Agar padding bekerja dengan baik */
}
/* Styling untuk item berita */
.news-item {
    margin-bottom: 10px;
}

/* Kotak kecil (tag) yang tadinya punya border kuning */
.news-tag {
    border: 1px solid #FFB000;
    padding: 2px;
    color: #FFB000;
    display: inline-block;
    font-size: 10px;
}

/* Teks berita */
.news-text {
    font-size: 12px;
    margin: 5px 0;
    color: #eee;
}

/* Garis pembatas */
.news-divider {
    border: 0;
    border-top: 1px solid #333;
    margin: 10px 0;
}
/* Container Popup */
.news-popup-container {
    border: 2px solid #FFB000;
    padding: 20px;
    width: 90%;
    position: relative;
    background-color: #000;
    z-index: 10001;
    display: block;
    color: #CCC;
}

/* Header Popup */
.popup-header {
    display: flex;
    margin-bottom: 15px;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #000;
    color: #CCC;
}

/* Konten di dalam Popup */
#news-popup-content {
    color: #FFB000;
}

/* Item berita di dalam popup */
#news-popup-content > div {
    border: 1px solid #333;
    padding: 10px;
    margin-bottom: 10px;
    background: #0a0a0a;
}

/* Mengatur teks detail di dalam popup item */
#news-popup-content div > div:nth-child(1) { /* Waktu/Kategori */
    font-size: 11px;
    color: #888;
}

#news-popup-content div > div:nth-child(2) { /* Isi Berita */
    margin-top: 6px;
    color: #eee;
    font-size: 13px;
}
/* Item berita di dalam popup */
.popup-item-container {
    border: 1px solid #333;
    padding: 10px;
    margin-bottom: 10px;
    background: #0a0a0a;
}

/* Waktu/Tanggal di dalam popup */
.popup-item-header {
    font-size: 11px;
    color: #888;
}

/* Tag kuning di dalam popup */
.popup-item-tag {
    border: 1px solid #FFB000;
    padding: 2px 6px;
    margin-left: 8px;
    color: #FFB000;
    font-size: 10px;
}

/* Isi teks berita di dalam popup */
.popup-item-body {
    margin-top: 6px;
    color: #eee;
    font-size: 13px;
}
/* --- KOTAK BOTANI (KANAN) --- */
/* 1. Pastikan parent-nya punya position relative */
.dropdown.w-100 {
    position: relative;
    width: 100%;
}
.botani-pagination-box {
    margin-top: 20px;
    display: flex;
    justify-content: center; /* Menengahkan tombol & angka */
    align-items: center;
    gap: 15px; /* Jarak antara [ < ] [ 1/6 ] [ > ] */
    font-family: 'VT323', monospace;
    font-size: 18px; /* Ukuran angka lebih besar agar terbaca */
    color: #FFB000;
}
/* 2. Style untuk tombol dropdown */
.botani-dropdown-btn { 
    width: 100%; 
    background: radial-gradient(circle, #1a1a1a 0%, #080808 100%); 
    color: #FFB000; 
    border: 1px solid #FFB000; 
    padding: 8px 12px; 
    font-family: 'VT323', monospace; 
    font-size: 16px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-sizing: border-box;
    margin-bottom: 10px;
}
.botani-nav-btn {
    background: black;
    color: #FFB000;
    border: 1px solid #FFB000;
    padding: 4px 12px;
    cursor: pointer;
    font-family: 'VT323', monospace;
    font-size: 16px;
    transition: all 0.2s ease;
    z-index: 10; /* Pastikan di atas elemen lain */
}
.botani-nav-btn:hover {
    background: #FFB000;
    color: black;
}
/* 3. Style untuk isi dropdown */
.dropdown-content {
    display: none; /* Akan muncul saat JS memicu perubahan */
    position: absolute;
    width: 100%; 
    background: #000;
    border: 1px solid #FFB000;
    z-index: 999; /* Tingkatkan agar selalu di depan */
    z-index: 100;
    box-sizing: border-box;
    top: 100%; 
    left: 0;
}
#botani-path {display: none;}
#botani-image-wrapper { width:100%; height:400px; background:none; border:1px solid #FFB000; margin-top:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#botani-img { max-width:100%; max-height:100%; object-fit:contain; }

/* 9 MENU PATCH - SMALL BOX 180px LIKE 1_HOME.png */
.small-box { 
    width: 180px !important; 
    height: 180px !important; 
    margin: 15px auto !important; 
    position: relative; 
    background: rgba(255, 176, 0, 0.05); /* Sedikit highlight background */
    border: 1px solid rgba(255, 176, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.small-box #botani-img { max-width:160px !important; max-height:160px !important; }
.section-title { font-family:'VT323'; font-size:20px; color:#FFB000; border-bottom:1px solid #FFB000; padding-bottom:5px; margin-bottom:15px; }
.menu-section { animation: fadeIn 0.3s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ========================================================
   SECTION MAP
======================================================== */
.p-5 {
    padding: 5px;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#map-image-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
    background: #111;
    border: 1px solid #FFB000;
    overflow: hidden;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.area-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 10;
}

.abs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.flex-gap-10 {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.flex-gap-15 {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.compass {
    width: 120px;
    text-align: center;
    font-family: 'VT323';
    border: none;
    color: #f1c21b !important;
}

.sector-info {
    flex: 1;
    border: none;
    max-height: 350px;
    overflow-y: auto;
    padding-top: 10px;
    padding-right: 15px;
}

.sector-title-text {
    margin-top: 0;
    margin-bottom: 5px;
    color: #f1c21b !important;
}

.text-justify-sm {
    text-align: justify;
    margin-top: 0;
    font-size: 12px;
    line-height: 1.6;
}
/*1. GAYA DROPDOWN SECTOR (RAPI & RINGAN)*/
.dropdown {
    position: relative;
    display: inline-block;
    width: fit-content;
}

#sector-dropdown-btn {
    background-color: #000;
    color: #FFB000;
    border: 1px solid #FFB000;
    font-family: 'VT323', monospace;
    font-size: 20px;
    padding: 5px 12px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    width: 100%;           
    display: block;        
    box-sizing: border-box;
}

#sector-dropdown-btn:hover {
    background-color: #FFB000;
    color: #000;
}

#sector-dropdown {
    background-color: #000 !important;
    border: 2px solid #FFB000;
    z-index: 1000;
    position: absolute;    
    width: 100%;           
    min-width: 100%;       
    box-sizing: border-box; 
    left: 0;
    display: none; /* Dikontrol via JS class 'show' atau manual */
}
#sector-dropdown a {
    color: #FFB000;
    padding: 10px;
    display: block;
    text-decoration: none;
    font-family: 'VT323', monospace;
    border-bottom: 1px solid #222;
    cursor: pointer;
}

#sector-dropdown a:hover {
    background-color: #333;
}

/*2. KOTAK TOWER (T1-T4)*/
.tower-box { 
    flex: 1; 
    border: 1px solid #FFB000; 
    padding: 10px; 
    cursor: pointer; 
    font-size: 12px; 
    background: transparent; 
    min-height: 60px; 
    font-family: 'VT323', monospace;
    transition: 0.3s;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.tower-box.active { 
    background-color: #FFB000 !important; 
    color: black !important; 
    border: 2px solid #000 !important; 
    box-shadow: 0 0 15px rgba(255, 176, 0, 0.6);
    /* Gunakan animasi opacity saja agar tidak berat */
    animation: simple-pulse 1s infinite alternate ease-in-out;
}

.tower-box:hover { background:#FFB000; color:black; }

/* 3. OVERLAY PETA (ARSIRAN AREA)*/
.area-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 10;
    display: none; 
    mix-blend-mode: normal; /* Karena gambarmu sudah transparan */
    opacity: 0.8;
}

/* Animasi Pulse untuk Arsiran */
.area-overlay.active {
    display: block !important;
    animation: simple-pulse 1s infinite alternate ease-in-out;
    outline: none !important;
}
/* Container Utama */
.ibm-coord-animations {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #f1c21b;
    font-family: 'VT323', monospace;
    font-size: 14px;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

.ibm-label {
    margin-top: 5px;
}

.ibm-label.smaller {
    font-size: 10px;
}

/* Radar Scan Style */
.ibm-radar-box {
    border: 1px solid #f1c21b;
    width: 80px;
    height: 80px;
    position: relative;
    overflow: hidden;
    background: rgba(241, 194, 27, 0.05);
}

.ibm-radar-h-line, .ibm-radar-v-line {
    position: absolute;
    background: #f1c21b;
    opacity: 0.3;
}

.ibm-radar-h-line { width: 100%; height: 1px; top: 50%; }
.ibm-radar-v-line { height: 100%; width: 1px; left: 50%; }

.ibm-scanline {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #f1c21b;
    top: 0;
    box-shadow: 0 0 5px #f1c21b;
    animation: ibm-scan 2s linear infinite;
}

.ibm-blip {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    top: 30%;
    left: 70%;
    box-shadow: 0 0 8px #fff;
    animation: ibm-pulse 1s ease-in-out infinite;
}

/* Coordinate Box Style */
.ibm-flux-box {
    border: 1px solid #f1c21b;
    padding: 5px;
    width: 80px;
    background: rgba(241, 194, 27, 0.05);
}

/* Vector Lock Style */
.ibm-vector-container {
    margin-top: 10px;
    border: 1px dashed #f1c21b;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ibm-rotate 4s linear infinite;
}

.ibm-vector-h { position: absolute; width: 80%; height: 1px; background: #f1c21b; }
.ibm-vector-v { position: absolute; height: 80%; width: 1px; background: #f1c21b; }
.ibm-vector-core { border: 1px solid #f1c21b; width: 20px; height: 20px; transform: rotate(45deg); }

/* Animations */
@keyframes ibm-scan { 0% { top: 0; } 100% { top: 100%; } }
@keyframes ibm-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes ibm-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Animasi Universal yang Ringan untuk GPU */
@keyframes simple-pulse {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Hilangkan outline fokus global */
*:focus {
    outline: none !important;
}
/* ========================================================
   SECTION CHARACTER
======================================================== */

.float-right {
    float: right;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.team-tag {
    float: right;
    font-size: 10px;
    color: #FFB000;
    border: 1px solid #FFB000;
    padding: 2px;
}

.char-detail-layout {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 10px;
}

.char-photo-box {
    width: 150px;
    flex-shrink: 0;
    border: 1px solid #FFB000;
    padding: 5px;
}

.char-vhs {
    width: 100%;
    height: 160px;
    background: #111;
    overflow: hidden;
    position: relative;
}

.char-id {
    text-align: center;
    background: black;
    border: 1px solid #FFB000;
    margin-top: 5px;
    font-size: 10px;
}

.char-desc {
    flex: 1;
    font-size: 12px;
    
}

.char-stats {
    border: 1px solid #FFB000;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    color: #FFB000;
}
/* ==========================================
   CHARACTER BOX & STYLING UTAMA
   ========================================== */
.char-box { 
  border: 1px solid #FFB000; 
  padding: 5px; 
  background: black; 
  cursor: pointer; 
}
.char-header { 
  display: flex; 
  justify-content: space-between; 
  font-size: 10px; 
  background: #FFB000; 
  color: black; 
  padding: 2px 5px; 
}
.badge { 
  border: 1px solid #FFB000; 
  padding: 1px 4px; 
  font-size: 8px; 
}
.badge.active { 
  background: black; 
  color: #FFB000; 
}
.badge.deceased { 
  background: #FF0000; 
  color: black; 
}
.char-name { 
  font-size: 10px; 
  line-height: 1.3; 
  color: #FFB000;
}

/* ==========================================
   EFEK VHS 80S & TV SEMUT (STATIC NOISE)
   ========================================== */
.char-img { 
  width: 100%; 
  height: 80px; 
  background: #111; 
  margin: 5px 0; 
  position: relative; 
  overflow: hidden; 
}

/* Layer 1: Animasi TV Semut (Static Noise) */
.char-img.vhs::before,
.vhs::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200%;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 176, 0, 0.15) , rgba(0, 0, 0, 0.9) 1px, transparent 2px);
  background-size: 3px 3px;
  opacity: 0.25;
  pointer-events: none;
  animation: tvStatic 0.1s steps(4) infinite;
  z-index: 2;
}

/* Layer 2: Garis-Garis Scanline Kaset VHS */
.char-img.vhs::after,
.vhs::after { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: repeating-linear-gradient(
    0deg, 
    rgba(0, 0, 0, 0.081) 0px, 
    transparent 1px, 
    rgba(207, 206, 204, 0.401) 0.2px, 
    transparent 4px
  ); 
  animation: vhsScanline 0.2s infinite linear; 
  pointer-events: none;
  z-index: 3;
}

/* Keyframes Animasi TV Semut (Acak & Cepat) */
@keyframes tvStatic {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-5%, 5%); }
  50% { transform: translate(10%, -5%); }
  75% { transform: translate(-10%, 10%); }
  100% { transform: translate(5%, -10%); }
}

/* Keyframes Scanline VHS */
@keyframes vhsScanline { 
  0% { transform: translateY(0); } 
  100% { transform: translateY(4px); } 
}

/* ==========================================
   LAYOUT SLIDER, DOTS & CONTENT BOX
   ========================================== */
.char-slider-wrapper { 
  position: relative; 
}

/* Indikator Dots Pojok Kanan Bawah Grid */
.char-dots { 
  display: flex;
  justify-content: flex-end; 
  align-items: center;
  margin: 10px 0 15px 0;
  padding-right: 2px;
}

.char-dots .char-dot { 
  display: inline-block; 
  width: 10px; 
  height: 10px; 
  border: 1px solid #FFB000; 
  margin-left: 6px; 
  cursor: pointer; 
  background: transparent;
}

.char-dots .char-dot.active { 
  background: #FFB000; 
}

/* Frame Kotak Informasi Karakter (Content Box) */
.char-content-box {
  margin-top: 15px;
  margin-top: 5px !important;
  padding-top: 5px !important;
  border: 1px solid #FFB000;
  padding: 15px;
  background: transparent;
  box-sizing: border-box;
  clear: both;
}

.char-detail-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

#char-detail-title {
    margin-top: 5px !important;
    color: #FFB000;
}
/* Dropdown Scope & Z-Index */
.dropdown { 
  position: relative; 
  z-index: 100; 
}

.dropdown-content { 
  display: none; 
  position: absolute; 
  right: 0; 
  top: 100%; 
  background: black; 
  border: 1px solid #FFB000; 
  min-width: 140px; 
  z-index: 101; 
}

.dropdown-content a { 
  display: block; 
  padding: 5px 10px; 
  color: #FFB000; 
  cursor: pointer; 
  font-size: 10px; 
  text-decoration: none; 
}

.dropdown-content a:hover { 
  background: #FFB000; 
  color: black; 
}

.dropdown.show .dropdown-content { 
  display: block; 
}

/* Khusus untuk dropdown di bagian SERUM, MINING, UNIT 241, dan B.P.E */
#section-mining .dropdown.float-right,
#section-unit241 .dropdown.float-right,
#section-bpe .dropdown.float-right {
    position: relative !important;
    top: 8px !important;
    margin-top: 0 !important;
}

/* ========================================================
   SECTION SERUM RESEARCH - FINAL MASTER CSS
======================================================== */
/* Sembunyikan semua item secara default atau yang memiliki kelas .d-none */
.serum-item.d-none {
    display: none !important;
}
/* Pastikan hanya item aktif yang tampil */
.serum-item.active {
    display: block !important;
}
.serum-container {
    width: 100%;
}

/* Layout Grid: Menyamakan tinggi kotak formula dan gambar */
.serum-grid {
    display: flex;
    gap: 15px;
    align-items: stretch;
}

/* Kotak Formula - Tema Lab IBM */
.formula-box {
    flex: 1;
    font-size: 9px;
    line-height: 1.4;
    background: #0a0a0a !important;
    border-left: 3px solid #32cd32 !important;
    position: relative;
    overflow: hidden;
    padding-top: 5px !important; /* Menaikkan posisi konten */
}

/* Judul Kecil (Small) */
.formula-box small {
    display: block !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #fff !important; /* Warna Putih */
    margin-top: 2px !important;
    margin-bottom: 5px !important;
    letter-spacing: 1px;
}

/* Kotak Kode ASCII - Kuning IBM */
.chem-ascii {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 15px;
    line-height: 1.1;
    color: #32cd32 !important; /* Teks Hijau Lab */
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 10px !important;
    white-space: pre;
    margin: 10px 0 2px 0 !important; /* Margin bawah diperkecil agar teks naik */
    
    /* Garis Kuning IBM */
    border: 1px solid #FFB000 !important;
    box-shadow: 0 0 5px rgba(255, 176, 0, 0.3) !important;
    text-shadow: 0 0 5px rgba(50, 205, 50, 0.5);
}

/* Deskripsi Teks (Composition, Formula, dll) */
.formula-box strong {
    color: #fff !important; /* Warna Putih */
    font-size: 8px;
}

/* Alert/Peringatan Serum */
.serum-alert {
    color: #ff3333 !important; 
    font-weight: bold;
    border: 1px solid #ff3333 !important;
    padding: 4px 4px;
    display: inline-block;
    margin-top: 0px !important; /* Posisi naik */
    font-size: 10px;
    animation: pulse-alert 2s infinite;
}

/* Kotak Gambar - Full Stretch */
.img-box {
    flex: 1;
    padding: 0 !important;
    border: 1px solid #32cd32 !important;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;
    filter: sepia(1) hue-rotate(60deg) brightness(0.8) contrast(1.2);
    transition: filter 0.5s ease;
}

.img-box:hover { filter: none; }

.img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Scanner Laser Animation */
.formula-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: rgba(50, 205, 50, 0.4);
    box-shadow: 0 0 10px #32cd32;
    z-index: 10;
    pointer-events: none;
    animation: scanline 8s linear infinite;
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(1000%); }
}

@keyframes pulse-alert {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Dropdown Alignment */
#section-serum .dropdown.float-right {
    position: relative !important;
    top: 8px !important;
}

/* Mobile View */
@media (max-width: 768px) {
    .serum-grid { flex-direction: column; }
    .img-box { min-height: 300px; }
}

/* ========================================================
   SECTION MINING & MINERAL STONE
======================================================== */

/* Styling Menu Mining */
.mining-container {
    width: 100%;
}
.mining-grid {
  display: flex;
  gap: 15px;
  align-items: stretch;
}
/* Update pada .media-box untuk pemusatan yang solid */
.media-box {
    flex: 1;
    height: fit-content;
    text-align: center;
    min-height: 280px;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    border: 1px solid #FFB000;
    overflow: hidden;
    padding: 0px;
}

/* Update pada .mining-media agar mengikuti flexbox parent */
.mining-media {
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Pastikan fallback tidak mengambil ruang layout sama sekali */
.mining-fallback-img.d-none {
  display: none !important;
  position: absolute; /* Pengaman tambahan agar tidak merusak flex layout */
}
.mining-history-img {
  flex: 4;
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: cover;
}

.info-box {
    flex: 1;
    font-size: 13px;
    line-height: 1.3;
    height: 273px;
    overflow-y: auto;
}

.info-box small {
  color: #FFB000;
  font-size: 17px;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 5px;
}

.log-box {
  margin-top: 15px;
  max-height: 220px;
  overflow-y: auto;
}

.log-box small {
  color: #FFB000;
  font-size: 17px;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 5px;
}

.log-box p {
  font-size: 13px;
  line-height: 1.3;
  text-align: justify;
}

/* Layout Khusus Dropdown Historical */
.historical-media-box {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 350px;
    margin-bottom: 15px;
    overflow: hidden;
    background: #000;
    border: 1px solid #FFB000;
    padding: 10px;
}

.historical-img {
  max-width: 100%;
  max-height: 350px; /* Batas tinggi gambar agar tidak terlalu memakan layar */
  width: auto;
  height: auto;
  object-fit: contain;
  display: inline-block;
}

.historical-log-box {
  margin-top: 15px;
  max-height: 280px; /* Area scroll log box sejarah */
  overflow-y: auto;
}
.historical-log-box p {
    font-size: 11px;
    line-height: 1.6;
    margin-top: 10px;
}
/* Custom Scrollbar untuk Box yang Scrollable */
.content-box.scrollable::-webkit-scrollbar {
  width: 4px;
}
.content-box.scrollable::-webkit-scrollbar-thumb {
  background: #FFB000;
}
.content-box.scrollable::-webkit-scrollbar-track {
  background: #111;
}
.mining-item {
    display: none; /* Sembunyikan semua item mining secara default */
}

.mining-item.active {
    display: block !important; /* Hanya munculkan yang aktif */
}
@media (max-width: 768px) {
    .mining-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   SECTION UNIT 241 // BOTANICAL DIVISION
======================================================== */

.unit241-container {
    width: 100%;
}
.unit241-container.active {
    display: block !important;
}
.unit-title-danger {
    color: #FF6B6B;
    font-size: 15px;
    font-weight: bold;
}

.roster-title {
    color: #FFB000;
    font-size: 13px;
    font-weight: bold;
}

.classified-title {
    color: #FF6B6B;
    font-size: 16px;
    font-weight: bold;
}

.motto-title {
    color: #FFB000;
    font-size: 12px;
}

.history-unit-box {
    max-height: 250px;
    margin-bottom: 15px;
}

.unit241-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.roster-box {
    font-size: 12px;
    line-height: 1.4;
}

.status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: bold;
    float: right;
}

.active-status {
    background: transparent;
    color: #00FF66;
    border: 1px solid #00FF66;
}

.deactive-status {
    background: transparent;
    color: #FF3333;
    border: 1px solid #FF3333;
}

.classified-box {
    max-height: 250px;
}
/* Sembunyikan archive secara default */
#unit241-archive {
    display: none;
}
/* Jika Anda menggunakan class 'active' atau serupa untuk menampilkan halaman */
.show-section {
    display: block !important;
}

/* MOTTO BOX */
.motto-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.motto-heading {
    color: #FF6B6B;
    margin: 5px 0;
    font-size: 18px;
}

.motto-sub {
    font-style: italic;
    font-size: 11px;
    color: #AAA;
    margin: 0;
}

.unit241-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* PDF ARCHIVE VIEWER */
.pdf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.pdf-btn, .pdf-btn-nav {
    background: #1A1A1A;
    color: #FFB000;
    border: 1px solid #333;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.pdf-btn:hover, .pdf-btn-nav:hover {
    background: #FFB000;
    color: #000;
}

.pdf-dropdown-select {
    background: #000;
    color: #FFB000;
    border: 1px solid #333;
    padding: 4px;
    font-size: 11px;
}

.pdf-page-label {
    font-size: 11px;
    color: #888;
}

.pdf-page-val {
    color: #FFB000;
    font-weight: bold;
    font-size: 11px;
}

.pdf-viewer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: #050505;
}

#pdf-render-canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid #333;
}

.pdf-fallback-msg {
    text-align: center;
    padding: 20px;
}

.pdf-fallback-text {
    color: #FF6B6B;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .unit241-grid {
        grid-template-columns: 1fr;
    }
    
    .pdf-toolbar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}
/* --- LAYOUT GENERAL & TEXT BOX --- */
.text-content-box {
  font-size: 11px;
  text-align: justify;
  margin-top: 10px;
  line-height: 1.6;
  white-space: pre-line; /* Mempertahankan format baris teks */
  color: #CCC;
   max-height: 200px;
  overflow-y: auto;
}

.unit241-grid {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.roster-box, .classified-box {
  flex: 1;
  font-size: 11px;
}

/* --- STATUS BADGES --- */
.status-badge {
  float: right;
  font-weight: bold;
}
.status-badge.active-status { color: #00FF66; }
.status-badge.deactive-status { color: #FF4444; }

/* --- MOTTO BOX FLEX (TEXT KIRI, LOGO KANAN FIT) --- */
.motto-box {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid #333;
  gap: 20px;
}

.motto-text-side { flex: 1; }

.motto-heading {
  margin: 5px 0 0 0;
  color: #FFFFFF;
  font-family: monospace;
  font-size: 16px;
}

.motto-sub {
  margin: 4px 0 0 0;
  font-size: 10px;
  color: #888;
}

.motto-logo-side {
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.unit241-logo {
  max-width: 120%;
  max-height: 120%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.4));
}

/* --- ARCHIVE PDF TOOLBAR --- */
.pdf-viewer-hidden {
  display: none !important;
}
/* Spesifik untuk menampilkan elemen PDF */
.pdf-viewer-visible {
  display: block !important;
}
.pdf-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #151515;
  border: 1px solid #333;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.pdf-tool-center, .pdf-tool-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdf-btn {
  display: inline-block;
  padding: 6px 14px;
  background: #FFB000;
  color: #1a1a1a;
  font-weight: bold;
  font-size: 11px;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
  border: none;
}

.pdf-btn:hover {
  background: #FFC033;
  box-shadow: 0 0 8px rgba(255, 176, 0, 0.5);
}

.pdf-btn-nav {
  background: #222;
  color: #FFB000;
  border: 1px solid #444;
  padding: 5px 12px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 3px;
}

.pdf-btn-nav:hover {
  background: #333;
  color: #FFF;
}

.pdf-dropdown-select {
  background: #111;
  color: #FFB000;
  border: 1px solid #444;
  padding: 5px 10px;
  font-size: 11px;
  outline: none;
  border-radius: 3px;
  min-width: 150px;
}

.pdf-page-label { font-size: 11px; color: #AAA; }
.pdf-page-val { font-size: 11px; font-weight: bold; color: #FFB000; }

/* --- PDF CANVAS CONTAINER --- */
.pdf-viewer-wrapper {
  margin-top: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  border: 1px solid #333;
  overflow: hidden;
  min-height: 420px;
}

#pdf-loading-indicator {
  color: #FFB000;
  font-family: monospace;
  font-size: 12px;
  margin-bottom: 10px;
}

#pdf-render-canvas {
  max-width: 100%;
  height: auto;
  box-shadow: 0 0 12px none;
  border: 1px solid #222;
}
/* ========================================================
   SECTION 7: B.P.E // BALAI PENELITIAN EDELWEISS
======================================================== */
#era-overview {
    display: none;
}
.bpe-container {
    width: 100%;
}

.history-bpe-box,
.history-era-box {
    max-height: 240px;
    margin-bottom: 15px;
    position: relative;
}

.bpe-small-red {
    color: #FF6B6B;
    font-size: 16px;
    font-weight: bold;
}

.bpe-small-gold {
    color: #FFB000;
    font-size: 16px;
    font-weight: bold;
}

.approval-stamp-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #333;
    font-size: 10px;
    color: #888;
    letter-spacing: 1px;
}

.bpe-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.chart-box {
    max-height: 320px;
}

.bpe-chart-title-gold {
    color: #FFB000;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.bpe-chart-title-red {
    color: #FF6B6B;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.ascii-chart-box {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    line-height: 1.3;
    color: #ddd;
    background: #000;
    padding: 10px;
    border: 1px solid #333;
    overflow-x: auto;
    max-height: 230px;
}

.logo-display-box {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 320px;
    background: #0b0b0b;
    border: 1px solid #333;
    padding: 20px;
    border: 2px solid #32cd32;
}

.bpe-logo-img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .bpe-grid {
        grid-template-columns: 1fr;
    }
}
/* --- LAYOUT GRID B.P.E / E.R.A --- */
.bpe-grid {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.chart-box {
  flex: 1.3;
  font-size: 11px;
  overflow-x: auto;
}

.logo-display-box {
  flex: 0.7;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* --- LOGO DISPLAY BOX (KOTAK PEMBUNGKUS) --- */
.logo-display-box {
  flex: 0.7;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: none; /* Latar belakang gelap transparan */
  min-height: 180px; /* Menjaga tinggi kotak agar sejajar dengan chart */
}

/* --- LOGO IMAGE --- */
.bpe-logo-img {
  max-width: 120%;
  height: auto;
  max-height: 180px;
  object-fit: contain; /* Memastikan rasio gambar tidak gepeng */
  filter: drop-shadow(0 0 8px rgba(255, 176, 0, 0.3)); /* Efek glowing tipis ala retro/military UI */
  display: block;
}

/* --- ASCII CHART FORMATTING --- */
.ascii-chart-box {
  font-family: monospace;
  font-size: 10px;
  color: #00FF66;
  background: none;
  padding: 10px;
  border: 1px solid #333;
  margin-top: 10px;
  white-space: pre;
  overflow-x: auto;
  line-height: 1.4;
}

/* --- APPROVAL STAMP STYLES --- */
.approval-stamp-box {
  border: 1px solid #FFB000;
  padding: 8px 12px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: monospace;
  color: #FFB000;
  background: rgba(255, 176, 0, 0.05);
}
/* ========================================================
   SECTION 8: MURAI AIRLINES LIMITED
======================================================== */

.murai-container {
    width: 100%;
}

.ibm-terminal-box {
    background: #000;
    border: 1px solid #333;
    padding: 15px;
}

.ibm-header-text {
    color: #FFB000;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 15px;
    overflow-x: auto;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.murai-manifest-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #ddd;
}

.murai-manifest-table th,
.murai-manifest-table td {
    padding: 8px 12px;
    border: 1px solid #333;
    text-align: left;
}

.murai-manifest-table th {
    background: #111;
    color: #FFB000;
}

.history-murai-box {
    margin-top: 15px;
}

.murai-archive-title {
    color: #FFB000;
    font-family: monospace;
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}

.font-ibm {
    font-family: 'IBM Plex Mono', monospace;
}
/* --- RETRO IBM TERMINAL STYLING --- */
.crt-status-tag {
  float: right;
  font-size: 10px;
  color: #00FF66;
  font-family: monospace;
  letter-spacing: 1px;
}

.ibm-terminal-box {
  background: transparent;
  border: 1px solid #FFB000;
  box-shadow: inset 0 0 10px rgba(255, 176, 0, 0.15);
  padding: 15px;
  font-family: 'Courier New', Courier, monospace;
}

.ibm-header-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  color: #FFB000;
  margin: 0 0 10px 0;
  line-height: 1.2;
  white-space: pre;
  overflow-x: auto;
}

/* --- TABEL MANIFEST RETRO --- */
.murai-manifest-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  color: #FFB000;
}

.murai-manifest-table th {
  text-align: left;
  border-bottom: 1px dashed #FFB000;
  padding: 6px 8px;
  color: #FFF;
  letter-spacing: 1px;
}

.murai-manifest-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 176, 0, 0.1);
}

/* HIGHLIGHT STATUS INSIDEN FLIGHT M-20 */
.status-lost {
  color: #FF6B6B !important;
  font-weight: bold;
  animation: blink-lost 1.2s infinite;
}

.status-departed {
  color: #00FF66;
}

@keyframes blink-lost {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.ibm-footer-divider {
  font-family: monospace;
  font-size: 11px;
  color: #FFB000;
  margin-top: 10px;
  white-space: pre;
  overflow-x: auto;
}

.font-ibm {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #D1D1D1;
}

/* --- IBM CRT CURSOR & TYPEWRITER STYLING --- */
.ibm-cursor {
  display: inline-block;
  width: 8px;
  height: 13px;
  background-color: #FFB000;
  margin-left: 3px;
  vertical-align: middle;
  animation: ibm-blink 0.8s infinite;
}

@keyframes ibm-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ========================================================
   SECTION 9: ABOUT // SARCASS & RIGHT SIDEBAR
======================================================== */

.about-container {
    width: 100%;
}

.about-content-gold {
    color: #FFB000;
}

.about-genre-tag,
.author-genre-tag {
    font-size: 12px;
}

.about-desc-style {
    font-size: 11px;
    line-height: 1.6;
}

.about-meta-style {
    font-size: 11px;
}

.ibm-sys-gold {
    color: #FFB000;
}

.ibm-sys-red {
    color: #fa4d56;
}

/* --- ABOUT SECTION STYLING --- */
.about-footer-box {
  text-align: center;
  background: transparent;
  margin-top: 15px;
  padding: 15px;
  color: #32cd32;
  border: 1px solid #FFB000;
}

.about-logo-frame {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-logo-img {
  max-width: 280px;
  max-height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 176, 0, 0.4));
}

.ibm-sys-info {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  color: #888;
  letter-spacing: 1px;
  display: block;
}


/* user margin top */
/* Container Utama Terminal */
#user-status-terminal {
    margin-top: 15px; /* Nilai default */
    font-size: 10px;
    opacity: 0.6;
    color: #CCC;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1.5;
    transition: margin-top 0.8s ease-in-out, opacity 0.5s;
}

/* Highlight untuk lokasi yang terdeteksi */
#user-location {
    color: #5f5; /* Warna hijau neon khas IBM 5151 */
    text-transform: uppercase;
}

/* Animasi sederhana saat teks berubah */
.location-updated {
    animation: blink-text 0.1s step-end infinite alternate;
}

@keyframes blink-text {
    50% { opacity: 0.3; }
}

/* --- CSS KHUSUS MENU 9 (SECTION ABOUT) - VERSI FINAL TERPAS --- */

/* 0. Menyeimbangkan Jarak Dalam Kotak */
#section-about .content-box {
    padding-top: 12px !important;  /* Jarak atas kotak yang lebih ideal */
    text-align: center !important;
}

/* 1. Menengahkan Judul & Posisi yang Pas (Tidak ter-enter / Tidak terlalu mepet) */
#section-about .content-box h2 {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 1.5em !important;
    
    /* JARAK POSISI YANG PAS */
    margin-top: 5px !important;    /* Memberi sedikit ruang agar tidak mepet */
    margin-bottom: 8px !important;
    position: static !important;    /* Tetap di dalam aliran kotak */
    top: 0 !important;
    
    color: #FFB000 !important;
}

/* 2. Menengah & Merapatkan Teks Genre */
#section-about .about-genre-tag,
#section-about .author-genre-tag {
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #fa4d56 !important;
    margin: 0 auto 12px auto !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 3. Mengatur ASCII Art / Slogan (Besar, Hijau, Kedip) */
#section-about #about-quote-text,
#section-about #author-quote-text {
    display: block !important;
    text-align: center !important;
    white-space: pre-wrap !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    color: #0f62fe !important;
    margin: 10px 0 !important;
    animation: pulse-glow-surveillance 2s infinite ease-in-out;
}

/* 4. Animasi Hijau SARCASS */
@keyframes pulse-glow-surveillance {
    0% { text-shadow: 0 0 5px #0f62fe; opacity: 0.8; }
    50% { text-shadow: 0 0 20px #0f62fe; opacity: 1; }
    100% { text-shadow: 0 0 5px #0f62fe; opacity: 0.8; }
}

/* 5. Header Title & Dropdown */
#section-about .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* --- CUSTOM SCROLLBAR UNTUK DESKRIPSI --- */

/* 1. Ukuran Scrollbar */
p#author-desc-text::-webkit-scrollbar,
p#about-desc-text::-webkit-scrollbar {
    width: 6px; /* Buat agak tipis agar elegan */
}

/* 2. Latar Belakang Jalur Scrollbar (Track) - Dibuat Transparan */
p#author-desc-text::-webkit-scrollbar-track,
p#about-desc-text::-webkit-scrollbar-track {
    background: transparent !important;
}

/* 3. Batang Scrollbar (Thumb) - Putih Transparan */
p#author-desc-text::-webkit-scrollbar-thumb,
p#about-desc-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important; /* Putih Transparan */
    border-radius: 10px;
}

/* 4. Batang Scrollbar Saat Diarahkan Mouse (Hover) */
p#author-desc-text::-webkit-scrollbar-thumb:hover,
p#about-desc-text::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Dukungan untuk browser Firefox */
p#author-desc-text,
p#about-desc-text {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}


.chat-title {
    margin: 0 0 10px 0;
}

#chat-messages {
    height: 150px;
    overflow-y: auto;
    border: 1px solid #333;
    padding: 5px;
    margin-bottom: 10px;
    font-size: 12px;
}
.center-content { flex:1; padding: 0 20px 20px 20px; border-right: 2px solid #FFB000;}
.dropdown-content a:hover { background:#FFB000 !important; color:#000 !important; }
.dropdown:hover .dropdown-content { display:block; }

.right-sidebar { width:320px; padding:15px; }
.cover-box { border:2px solid #FFB000; padding:5px; position:relative; }
.cover-slider-wrapper { position:relative; width:100%; height:450px; background:#111; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-top: 4px; }
#cover-img { max-width:100%; max-height:100%; object-fit:contain; cursor:pointer; }
.cover-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.7); border:1px solid #FFB000; color:#FFB000; width:30px; height:30px; cursor:pointer; }
.cover-nav.prev { left:5px; } .cover-nav.next { right:5px; }
.cover-dots { text-align:center; margin:8px 0; }
.cover-dots span { display:inline-block; width:10px; height:10px; border:1px solid #FFB000; margin:0 3px; cursor:pointer; }
.cover-dots span.active { background:#FFB000; }
.cover-title { font-family:'VT323'; text-align:center; margin:5px 0; }

/* Container utama Support Box */
.support-box {
  background-color: #161616 !important; /* Warna gelap IBM */
  border: 1px solid #3d3d3d !important;
  border-left: 4px solid #0f62fe !important; /* Aksen biru kiri */
  border-radius: 0 !important; /* Sudut tajam/kaku */
  padding: 8px 16px 16px 16px !important; /* Padding atas dikurangi agar judul naik */
  color: #c6c6c6 !important;
  box-shadow: none !important;
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 15px !important;
}

/* Judul Research Support */
.support-box h4 {
  color: #f4f4f4 !important;
  margin: 0 0 12px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Garis tipis bawah judul */
  padding-bottom: 8px !important;
}

/* Teks Deskripsi (Tengah) */
#support-text {
  line-height: 1.4 !important;
  margin-bottom: 16px !important;
  color: #c6c6c6 !important;
  font-size: 14px !important;
  text-align: justify !important; /* Rata kanan-kiri */
}

/* Tombol Ko-fi */
#kofi-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Teks center */
  background-color: #0f62fe !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
  animation: kofi-pulse 2s infinite; /* Efek berdenyut */
}

#kofi-btn:hover {
  background-color: #0353e9 !important;
  transform: translateY(-2px);
}

/* Definisi Animasi Pulse */
@keyframes kofi-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(15, 98, 254, 0.7); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(15, 98, 254, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(15, 98, 254, 0); }
}

/* Container Chat Box */
.chat-box {
    border: 1px solid #FFB000;
    padding: 10px;
    margin-top: 20px;
}

/* Judul dengan Efek Kelap-Kelip (Tanpa Shadow) */
.chat-box h4 {
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    color: #FFB000;
    font-weight: bold;
    text-shadow: none;
    animation: simple-flicker 2.5s infinite;
}

/* Area Pesan & Tema Scrollbar */
#chat-messages {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #FFB000 #1a1a1a;
}

#chat-messages::-webkit-scrollbar {
    width: 8px;
}

#chat-messages::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

#chat-messages::-webkit-scrollbar-thumb {
    background: #FFB000;
    border-radius: 4px;
    border: 2px solid #1a1a1a;
}

/* Input Chat */
#chat-input {
    width: 100%;
    background: transparent;
    border: 1px solid #FFB000;
    color: #FFB000;
    padding: 8px;
    box-sizing: border-box;
}

/* Animasi Kelap-Kelip */
@keyframes simple-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
    }
    20%, 22%, 24%, 55% {
        opacity: 0.1;
    }
}
/* ============================================================
   PERBAIKAN FINAL V3: LAYER POP-UP & DROPDOWN SYSTEM
   ============================================================ */
.ig-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.ig-popup-box {
    background: #080808;
    border: 2px solid #FFB000;
    padding: 20px;
    width: 300px;
    text-align: center;
    font-family: 'VT323', monospace;
    color: #FFB000;
}

.ig-popup-desc {
    font-size: 12px;
}

.ig-follow-btn {
    display: block;
    background: #FFB000;
    color: black;
    padding: 10px;
    text-decoration: none;
    margin: 10px 0;
}

.ig-close-btn {
    background: #000;
    color: #FFB000;
    border: 1px solid #FFB000;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: bold;
}

.news-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.news-popup-container {
    background: #000;
    border: 2px solid #FFB000;
    padding: 20px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    z-index: 10001;
}

.news-popup-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #FFB000;
    padding-bottom: 10px;
    margin-bottom: 15px;
    position: sticky;
    top: -20px;
    background: #000;
    z-index: 20;
    padding-top: 5px;
}

.news-popup-title {
    font-family: 'VT323', monospace;
    color: #FFB000;
    margin: 0;
}

.news-close-btn {
    background: #000;
    color: #FFB000;
    border: 1px solid #FFB000;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    z-index: 99999;
    pointer-events: auto;
}

.news-popup-content-box {
    color: #FFB000;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    line-height: 1.6;
}
   /* Popup Overlay */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

/* Popup Container & Header */
.news-popup-container {
    background: #000;
    border: 2px solid #FFB000;
    padding: 20px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #00ff00 #000;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #FFB000;
    padding-bottom: 10px;
    margin-bottom: 15px;
    position: sticky;
    top: -20px;
    background: #000;
    z-index: 1;
    padding-top: 5px;
}

.popup-title {
    font-family: 'VT323';
    color: #FFB000;
    margin: 0;
}

.popup-close-btn {
    background: #000;
    color: #FFB000;
    border: 1px solid #FFB000;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: bold;
}

.popup-content-text {
    color: #FFB000;
    font-family: 'IBM Plex Mono';
    font-size: 12px;
    line-height: 1.6;
}

/* Scrollbar Hijau Popup News */
.news-popup-container::-webkit-scrollbar {
    width: 8px;
}
.news-popup-container::-webkit-scrollbar-track {
    background: #000;
}
.news-popup-container::-webkit-scrollbar-thumb {
    background: #00ff00;
    border: 1px solid #000;
}
.news-popup-container::-webkit-scrollbar-thumb:hover {
    background: #00cc00;
}
/* 1. LAYER POP-UP (OVERLAY) */
/* Harus di atas segalanya termasuk dropdown */
#ig-popup, 
#news-popup, 
.popup-overlay, 
.modal {
  z-index: 100000 !important; /* Ditingkatkan sedikit agar aman dari dropdown */
  position: fixed;
  display: none; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9); /* Overlay gelap */
  align-items: center;
  justify-content: center;
}

/* 2. TOMBOL CLOSE (X) */
/* Pastikan pointer-events aktif dan z-index internal paling tinggi */
#close-news-btn, #close-ig-btn {
  position: relative;
  z-index: 100002 !important; 
  cursor: pointer;
  pointer-events: auto !important;
}

/* 3. STYLING TOMBOL NAVIGASI UTAMA */
.top-nav button, #merch-btn, #instagram-btn, #lang-btn, .ai-style-change-6 {
  background: rgba(0, 0, 0, 0.9);
  color: #CCC;
  border: 1px solid #FFB000 !important;
  padding: 0 12px !important;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 14px;
  width: 132px;
  height: 36px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.2s ease;
  position: relative;
  z-index: 500; /* Z-index navigasi standar */
}

/* 4. CONTAINER & MENU DROPDOWN */
.dropdown { 
  position: relative; 
  display: inline-block; 
  vertical-align: middle;
  z-index: 1000 !important; /* Pastikan di atas elemen body tapi di bawah popup */
}

#lang-dropdown, 
#novel-dropdown, 
#botani-dropdown, 
#char-dropdown, 
#serum-dropdown,
#mining-dropdown,
#unit241-dropdown,
#bpe-dropdown,
#about-dropdown,
.dropdown-content { 
  display: none !important; 
  position: absolute; 
  top: 100% !important; 
  left: 0; 
  width: 100% !important; 
  min-width: 100% !important;
  background: #000 !important;
  border: 1px solid #FFB000; 
  z-index: 2000; /* Di bawah popup (yang nilainya 100.000) */
  margin-top: 0; 
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  overflow: hidden;
  box-sizing: border-box;
}

/* 5. MUNCULKAN SAAT HOVER */
.dropdown:hover #lang-dropdown, 
.dropdown:hover #novel-dropdown, 
.dropdown:hover #botani-dropdown, 
.dropdown:hover #char-dropdown,
.dropdown:hover #serum-dropdown,
.dropdown:hover #mining-dropdown,
.dropdown:hover #unit241-dropdown,
.dropdown:hover #bpe-dropdown,
.dropdown:hover #about-dropdown,
.dropdown:hover .dropdown-content { 
  display: block !important; 
}

/* 6. STYLING LINK DI DALAM MENU */
#lang-dropdown a, 
#novel-dropdown a, 
#botani-dropdown a, 
.dropdown-content a { 
  display: flex !important; 
  align-items: center;
  justify-content: center; 
  background: transparent;
  color: #CCC; 
  padding: 12px 6px; 
  text-decoration: none; 
  border-bottom: 1px solid #222; 
  font-size: 11px; 
  font-family: 'IBM Plex Mono', monospace;
  font-weight: bold;
  text-transform: uppercase; 
  letter-spacing: 1px;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

#lang-dropdown a:hover, 
#novel-dropdown a:hover, 
.dropdown-content a:hover {
  background: #FFB000 !important;
  color: #000 !important;
}
footer { border-top:1px solid #FFB000; text-align:center; padding:10px; font-size:10px; opacity:0.7; }

/* --- MOBILE LAYOUT --- */
@media (max-width: 768px) {
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .header {
    padding: 8px 10px;
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
  }

  .logo {
    width: 100%;
    text-align: center;
    font-size: 28px !important;
    line-height: 1;
  }

  .top-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .top-nav > .dropdown,
  .top-nav > button {
    width: 100%;
  }

  .top-nav button,
  #merch-btn,
  #instagram-btn,
  #lang-btn {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 6px !important;
    font-size: 13px;
  }

  #lang-dropdown,
  #novel-dropdown,
  .top-nav .dropdown-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .marquee {
    font-size: 20px;
  }

  .main-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .left-sidebar,
  .center-content,
  .right-sidebar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .left-sidebar {
    border-right: 0;
    border-bottom: 2px solid #32cd32;
    padding: 10px;
  }

  .center-content {
    padding: 15px 10px 20px;
    border-right: 0;
  }

  .right-sidebar {
    padding: 10px;
  }

  .menu li {
    padding: 9px 8px;
    font-size: 14px;
  }

  .external-box {
    margin-top: 10px;
  }

  .two-columns,
  .serum-grid,
  .mining-grid,
  .unit241-grid,
  .bpe-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
  }

  .two-columns .content-box,
  .formula-box,
  .img-box,
  .media-box,
  .info-box,
  .roster-box,
  .classified-box,
  .chart-box,
  .logo-display-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex: none;
  }

  .img-box,
  .media-box {
    min-height: 240px;
  }

  .info-box,
  .log-box,
  .text-content-box {
    max-height: 320px;
  }

  .section-title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    font-size: 19px;
    line-height: 1.1;
  }

  .section-title .dropdown {
    float: none !important;
    width: 100%;
  }

  .section-title .dropdown button,
  #sector-dropdown-btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }

  .char-slide {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .char-slide:not(.active) {
    display: none !important;
  }

  .char-content-box > div {
    flex-direction: column;
  }

  .char-content-box > div > div:first-child {
    width: 100% !important;
  }

  #section-map h2.section-title {
    gap: 10px !important;
  }

  #section-map h2.section-title .dropdown {
    width: 100%;
  }

  #map-image-wrapper {
    height: min(70vw, 380px) !important;
  }

  #section-map > div[style*="display:flex"] {
    flex-direction: column;
  }

  #section-map > div[style*="display:flex"] > .content-box:first-child {
    width: 100% !important;
  }

  .tower-box {
    min-width: 0;
  }

  .approval-stamp-box,
  .motto-box,
  .pdf-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .pdf-tool-left,
  .pdf-tool-center,
  .pdf-tool-right,
  .pdf-dropdown-select,
  .pdf-btn,
  .pdf-btn-nav {
    width: 100%;
    box-sizing: border-box;
  }

  .pdf-tool-center,
  .pdf-tool-right {
    justify-content: center;
  }

  .chem-ascii,
  .ibm-header-text,
  .ascii-chart-box {
    max-width: 100%;
    overflow-x: auto;
    font-size: 12px;
  }

  .warning-box {
    width: 100%;
    box-sizing: border-box;
  }

  .chat-box h4 {
    white-space: normal;
  }

  footer {
    padding: 10px;
    line-height: 1.5;
  }
}