/* 🎱 === GLOBAL THEME (Modern Bright Red-Gold - LIGHT THEME) === */
:root {
  /* Palette Asli (Tetap dipertahankan untuk aksen) */
  --drachen-black: #0a0a0a;
  --drachen-red: #ef4444;        /* ← MERAH CERAH MODERN */
  --drachen-red-dark: #dc2626;    /* ← MERAH GELAP CERAH */
  --drachen-red-light: #f87171;    /* ← MERAH TERANG BARU */
  --drachen-red-glow: #fca5a5;    /* ← MERAH SOFT/GLOW BARU */
  --drachen-gold: #fbbf24;
  --drachen-gold-bright: #fde047;  /* ← GOLD LEBIH CERAH BARU */

  /* Palette Baru (Light Theme) */
  --drachen-white: #ffffff;
  --drachen-bg-light: #f8f9fa;   /* ← Abu-abu sangat muda (untuk hover/bg ringan) */
  --drachen-text-primary: #212529; /* ← Teks utama (hitam lembut) */
  --drachen-text-secondary: #6c757d; /* ← Teks abu-abu */
  --drachen-border-light: #dee2e6; /* ← Border/garis pemisah */
}

body {
  background-color: var(--drachen-white); /* ← DIUBAH JADI PUTIH */
  /* Hapus background-image gradient hitam/merah */
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--drachen-text-primary); /* ← Teks utama jadi gelap */
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ✨ Ambient Light Effect (DIHAPUS) */
/* Efek ini tidak cocok untuk background putih */

/* Ensure content above background effects */
header, main, footer, .navbar {
  position: relative;
  z-index: 1;
}

/* --- GLOBAL NAVBAR --- */
.navbar {
  background: rgba(255, 255, 255, 0.85); /* ← DIUBAH jadi putih transparan */
  backdrop-filter: blur(15px);
  border-bottom: 2px solid var(--drachen-red);  /* ← Border merah dipertahankan */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* ← Shadow hitam normal & subtle */
}

.navbar-brand {
  color: var(--drachen-red) !important;       /* ← DIUBAH jadi merah (aksen utama) */
  letter-spacing: 0.1em;
  font-weight: 700;
  text-shadow: none; /* ← Hapus glow di background putih */
}

.nav-link {
  color: var(--drachen-text-secondary) !important; /* ← DIUBAH jadi teks abu-abu gelap */
  transition: all 0.3s ease;
  position: relative;
  font-weight: 500;
}

.nav-link:hover, .nav-link.active {
  color: var(--drachen-red) !important; /* ← DIUBAH hover jadi merah */
  text-shadow: none; /* ← Hapus glow */
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--drachen-red), var(--drachen-gold)); /* ← Gradient dipertahankan */
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: none; /* ← Hapus glow */
}

.nav-link:hover::after, .nav-link.active::after {
  width: 70%;
}

/* --- GLOBAL FOOTER --- */
footer {
  background: var(--drachen-bg-light); /* ← DIUBAH jadi abu-abu muda */
  border-top: 2px solid var(--drachen-red);   /* ← Border merah dipertahankan */
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.07); /* ← Shadow hitam subtle */
  color: var(--drachen-text-secondary); /* ← Teks footer jadi abu-abu */
}

/* --- GLOBAL CTA BUTTON (Dipakai di Home & About) --- */
/* Tombol CTA merah sudah bagus di background putih, shadow sedikit disesuaikan */
.cta-button {
  display: inline-block;
  background: linear-gradient(135deg, 
    var(--drachen-red) 0%, 
    var(--drachen-red-dark) 100%
  );
  color: white;
  padding: 1rem 3rem;
  border-radius: 50px;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 
    0 6px 18px rgba(239, 68, 68, 0.35), /* ← Shadow disesuaikan */
    0 0 15px rgba(239, 68, 68, 0.15);
  position: relative;
  overflow: hidden;
}

.cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2), 
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-button:hover {
  background: linear-gradient(135deg, 
    var(--drachen-red-light), 
    var(--drachen-red)
  );
  color: white;
  border-color: var(--drachen-gold); /* ← Border gold saat hover */
  transform: translateY(-3px) scale(1.02); /* Gerakan lebih subtle */
  box-shadow: 
    0 10px 25px rgba(239, 68, 68, 0.4), 
    0 0 20px rgba(251, 191, 36, 0.2), 
    0 3px 15px rgba(239, 68, 68, 0.3);
}

.cta-button:hover::before {
  opacity: 1;
}

/* --- GLOBAL SECTION STYLING (Dipakai di Home & About) --- */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  margin-top: -8vh;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--drachen-red); /* ← Aksen merah dipertahankan */
  position: relative;
  padding-bottom: 15px;
  text-shadow: none; /* ← Hapus glow */
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 5px;
  background: linear-gradient(90deg, 
    var(--drachen-gold), /* ← Pakai gold standar */
    var(--drachen-red)
  );
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.2); /* ← Shadow dikurangi */
}

/* Overlay & Pola Sisik (DIHAPUS) */
/* Pola dan overlay ini didesain untuk background gelap */
.hero-section::before, .home-hero-section::before {
  display: none;
}

.hero-overlay {
  display: none;
}

.hero-content {
  position: relative;
  text-align: center;
  z-index: 3;
  animation: fadeInUp 1s ease-out;
}

/* /--------------------------------------------------------------------------
/ --- GLOBAL KEYFRAMES (ANIMASI) ---
/--------------------------------------------------------------------------
*/
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* @keyframes pulseGlow (DIHAPUS - terkait .hero-overlay) */


/* Form Light Theme (Menggantikan Dark Theme) */
.form-control-dark,
.form-select-dark {
  background-color: var(--drachen-white); /* ← DIUBAH jadi putih */
  color: var(--drachen-text-primary); /* ← DIUBAH jadi teks gelap */
  border: 2px solid var(--drachen-border-light); /* ← DIUBAH jadi border abu-abu */
  transition: all 0.3s ease;
}

.form-control-dark:focus,
.form-select-dark:focus {
  background-color: var(--drachen-white);
  color: var(--drachen-text-primary);
  border-color: var(--drachen-red); /* ← Aksen merah saat fokus */
  box-shadow: 
    0 0 15px rgba(239, 68, 68, 0.2); /* ← Glow merah subtle */
}

.form-control-dark::placeholder {
  color: var(--drachen-text-secondary); /* ← Placeholder jadi abu-abu */
}

/* Modal Light Theme (Menggantikan Dark Theme) */
.modal-content-drachen {
  background: var(--drachen-white); /* ← DIUBAH jadi putih */
  border: 1px solid transparent;
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.1); /* ← Shadow hitam normal */
  border-radius: 1rem;
}

.modal-content-drachen .modal-header {
  border-bottom: 2px solid var(--drachen-red); /* ← Border merah dipertahankan */
  background: var(--drachen-bg-light); /* ← Background abu-abu muda */
}

.modal-content-drachen .modal-header .modal-title {
  color: var(--drachen-red); /* ← Judul jadi merah */
  text-shadow: none; /* Hapus shadow */
}

.modal-content-drachen .modal-footer {
  border-top: 1px solid var(--drachen-border-light); /* ← Border abu-abu standar */
  background: var(--drachen-bg-light);
}

.modal-content-drachen .btn-close {
  filter: none; /* ← Tombol close standar (hitam) */
}

.modal-content-drachen .form-label {
  color: var(--drachen-text-primary); /* ← Label form jadi gelap */
  font-weight: 600;
}

/* Table Light Theme (Menggantikan Dark Theme) */
.table-drachen {
  width: 100%;
  background: var(--drachen-white); /* ← DIUBAH jadi putih */
  backdrop-filter: none;
  border-radius: 0.75rem;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--drachen-border-light); /* ← Border abu-abu standar */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07); /* ← Shadow hitam subtle */
}

.table-drachen thead th {
  background: linear-gradient(135deg, 
    var(--drachen-red), 
    var(--drachen-red-dark)
  ); /* ← Header merah dipertahankan (sesuai permintaan) */
  color: white;
  padding: 1rem;
  border: 0;
  font-weight: 700;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.table-drachen tbody tr {
  transition: all 0.3s ease;
}

.table-drachen tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--drachen-border-light); /* ← Border abu-abu standar */
  color: var(--drachen-text-primary); /* ← Teks jadi gelap */
}

.table-drachen tbody tr:last-child td {
  border-bottom: 0;
}

.table-drachen tbody tr:hover {
  background: var(--drachen-bg-light); /* ← Hover jadi abu-abu muda */
  box-shadow: none;
}

/* List Group Light Theme (Menggantikan Dark Theme) */
.list-group-drachen .list-group-item {
  background-color: var(--drachen-white); /* ← DIUBAH jadi putih */
  border: 1px solid var(--drachen-border-light); /* ← Border abu-abu standar */
  color: var(--drachen-text-primary); /* ← Teks jadi gelap */
  transition: all 0.3s ease;
}

.list-group-drachen .list-group-item:hover {
  background-color: var(--drachen-bg-light);
  border-color: var(--drachen-red); /* ← Aksen merah saat hover */
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.1); /* ← Glow merah subtle */
  z-index: 2;
  position: relative;
}

.list-group-drachen .list-group-item strong {
  color: var(--drachen-red); /* ← DIUBAH jadi merah */
  text-shadow: none;
}