/* ============================================================
   LANDING DESIGN SYSTEM OVERRIDE — Drama RumahAI SPA
   Diterapkan dari https://arsip.utu.ac.id/assets/css/landing_page.css
   Desain system: brand #006DF0, Poppins, kartu radius 16px, shadow halus.
   Target: komponen Home/Dashboard yang sudah ada (tanpa ngerusak layout).
   ============================================================ */

/* --- 1. TYPOGRAPHY: Poppins (sesuai design system) — dimuat via <link> di index.html (non-blocking) --- */
html, body, #root, button, input, select, textarea {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- 2. BRAND ACCENT: ganti lime #CCFF00 -> #006DF0 (brand UTU) --- */
body {
  background-color: #0f1a2e; /* dark navy, match SPA theme (jaga anti-flash putih saat pre-mount) */
}

.bg-primary-500,
.bg-primary-600,
.from-primary-500,
.from-primary-600,
.to-primary-600,
.via-primary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(0 109 240 / var(--tw-bg-opacity, 1)) !important;
}
.from-primary-400,
.via-primary-200 { background-color: #4d93f5 !important; }

.text-primary-500,
.text-primary-400,
.text-primary-300 {
  color: #006DF0 !important;
}
.text-primary-100 { color: #cfe4ff !important; }

.border-primary-500 { border-color: #006DF0 !important; }

/* dot / indicator brand */
.bg-primary-500\/20 { background-color: rgba(0,109,240,.2) !important; }
.bg-primary-500\/10 { background-color: rgba(0,109,240,.1) !important; }

/* --- 3. SURFACE / BACKGROUND standard (sesuai dark, diselaraskan) --- */
.bg-surface-dark { background-color: #0f1a2e !important; } /* var --text / brand-dark blend */
.bg-surface, .bg-surface-light { background-color: #ffffff !important; }

/* --- 3b. KONTRA F: restore surface gelap utk komponen yg bawa teks putih --- */
/* Button episode (grid angka) pakai bg-surface-light + teks putih inherit -> white-on-white.
   Kembalikan ke dark surface asli supaya angka kebaca; hover tetap ke primary/black. */
button[class*="aspect-square"][class*="bg-surface-light"] {
  background-color: rgb(30 43 64) !important;
  color: #ffffff !important;
}
/* Button language switcher (bendera) — dark surface biar bendera & teks kelihatan */
button[class*="bg-surface-light"]:has(img[alt="Indonesia"]),
button[class*="bg-surface-light"]:has(img[src*="flagcdn"]) {
  background-color: rgb(23 32 48) !important;
  color: #ffffff !important;
}
/* Placeholder skeleton loading (kartu & pill) — restore dark biar kelihatan di atas body light */
[class*="animate-pulse"][class*="bg-surface-light"] {
  background-color: rgb(30 43 64) !important;
}
/* Poster drama (aspect 3/4) — restore dark di balik gambar biar tidak flash putih saat loading */
[class*="aspect-[3/4]"][class*="overflow-hidden"][class*="bg-surface-light"] {
  background-color: rgb(23 32 48) !important;
}
/* INPUT di atas surface putih (bg-surface-light) — paksa teks & caret gelap biar terlihat saat ngetik */
input[class*="bg-surface-light"], textarea[class*="bg-surface-light"], select[class*="bg-surface-light"] {
  color: rgb(17 24 39) !important;
  caret-color: rgb(17 24 39) !important;
  -webkit-text-fill-color: rgb(17 24 39) !important;
}
input[class*="bg-surface-light"]::placeholder, textarea[class*="bg-surface-light"]::placeholder {
  color: rgb(107 114 128) !important;
  -webkit-text-fill-color: rgb(107 114 128) !important;
}
/* LOGO ANIMASI HEADER & FOOTER — warna di-edit langsung di data Lottie (merah -> biru #006DF0),
   sehingga header dan footer tampil sama (biru solid #006DF0). */
/* DAFTAR EPISODE — perbaiki tampilan: kurangi tombol bujur sangkar raksasa,
   jadikan pill ramping, rounded, border halus, hover biru brand #006DF0 */
div[class*="grid-cols-5"] button[class*="aspect-square"],
div[class*="grid-cols-8"] button[class*="aspect-square"] {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 48px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.15s ease !important;
}
div[class*="grid-cols-5"] button[class*="aspect-square"]:hover,
div[class*="grid-cols-8"] button[class*="aspect-square"]:hover {
  background-color: rgba(0, 109, 240, 0.22) !important;
  border-color: rgba(0, 109, 240, 0.6) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.bg-dark-700 { background-color: #16233c !important; }
.bg-dark-800 { background-color: #101d33 !important; }
.bg-dark-900 { background-color: #0b1424 !important; }
.bg-dark-600 { background-color: #1d2d4a !important; }
.bg-dark-500 { background-color: #243656 !important; }
.bg-dark-400 { background-color: #2f4470 !important; }

/* --- 4. KARTU (card) shadow + radius sesuai design system --- */
.card, [class*="rounded-2xl"], [class*="rounded-xl"] {
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.10);
}
/* hover pada kartu drama */
[class*="group"]:hover [class*="shadow"],
[class*="hover:shadow"]:hover {
  box-shadow: 0 18px 40px -16px rgba(0,109,240,.22) !important;
}

/* --- 5. NAVBAR header: glass + border halus --- */
header[class*="sticky"] {
  background: rgba(15,26,46,.80) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(230,234,242,.08) !important;
}

/* --- 6. PLATFORM BAR pills --- */
.platform-bar-desktop { background: rgba(15,26,46,.92) !important; }
button[class*="rounded-xl border"], [class*="rounded-xl"][class*="border"] {
  border-radius: 10px !important;
  transition: all .25s ease !important;
}
button[class*="rounded-xl border"]:hover {
  border-color: #006DF0 !important;
  color: #006DF0 !important;
  background: rgba(0,109,240,.08) !important;
}

/* --- 7. BOTTOM NAV --- */
nav[class*="fixed bottom-0"] {
  background: rgba(15,26,46,.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(230,234,242,.08) !important;
}

/* --- 8. SECTION HEADING --- */
section [class*="mb-6"] h1,
section [class*="mb-6"] h2,
section [class*="mb-6"] h3 {
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

/* --- 9. FOOTER --- */
footer {
  background: #0b1424 !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}

/* --- 10. TOMBOL / CTA primary --- */
button[class*="bg-primary-500"], a[class*="bg-primary-500"] {
  box-shadow: 0 6px 14px -6px rgba(0,109,240,.6) !important;
}
button[class*="bg-primary-500"]:hover, a[class*="bg-primary-500"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -6px rgba(0,109,240,.6) !important;
}

/* ============================================================
   RESPOSIF — sesuaikan dengan mini-breakpoint landing css
   ============================================================ */
@media (max-width: 640px) {
  header[class*="sticky"] { background: rgba(15,26,46,.92) !important; }
}