/* ==========================================================================
   KOKA — Koding dan Kecerdasan Artifisial
   Design tokens — konsep "Playful Educational Tech"
   Palet: Primary Purple, Deep Purple, Sky Blue, Pink, Yellow, Mint
   ========================================================================== */
:root {
  /* Warna utama — Ungu (dipertahankan nama variabel lama agar seluruh CSS
     yang sudah ada tetap bekerja tanpa perlu diubah satu per satu) */
  --ungu-900: #382773;
  --ungu-800: #4B35A8;   /* Deep Purple */
  --ungu-700: #5A3FC0;
  --ungu-600: #6C4CE8;   /* Primary Purple */
  --ungu-500: #8567EE;
  --ungu-400: #A190F2;
  --ungu-300: #C3B8F7;
  --ungu-100: #EEEAFE;

  /* Aksen hangat (nama variabel "oren" dipertahankan, kini bernuansa Pink) */
  --oren-700: #D63E82;
  --oren-600: #F0619F;
  --oren-500: #FF7EB6;   /* Pink */
  --oren-400: #FF9BC7;
  --oren-300: #FFC1DD;
  --oren-100: #FFEAF3;

  /* Aksen tambahan untuk membedakan tiap menu */
  --biru-700: #1F7FCC;
  --biru-600: #2E9EE8;
  --biru-500: #4DB8FF;   /* Sky Blue */
  --biru-300: #A6DDFF;
  --biru-100: #E5F5FF;

  --mint-700: #2E9C7C;
  --mint-600: #45C299;
  --mint-500: #65D6B3;   /* Mint */
  --mint-300: #ADEBD5;
  --mint-100: #E4FAF3;

  --kuning-700: #D9A61A;
  --kuning-600: #F0C233;
  --kuning-500: #FFD95A;   /* Yellow */
  --kuning-300: #FFE998;
  --kuning-100: #FFF9E5;

  --putih: #FFFFFF;
  --abu-100: #F2EFFC;      /* latar lavender sangat lembut, bukan putih polos */
  --abu-200: #E8E3F9;
  --abu-500: #8B87A5;
  --abu-700: #26304A;      /* Text Dark */
  --gelap: #221B3D;

  --hijau-sukses: #22C55E;
  --merah-gagal: #EF4444;
  --kuning-koin: #FFD95A;

  /* Gradasi khas KOKA (dipakai di background besar / hero / kartu utama) */
  --grad-utama: linear-gradient(135deg, #6C4CE8 0%, #8567EE 45%, #4DB8FF 100%);
  --grad-lembut: linear-gradient(160deg, #EEEAFE 0%, #E5F5FF 100%);
  --grad-ungu: linear-gradient(180deg, #4B35A8 0%, #6C4CE8 100%);
  --grad-oren: linear-gradient(120deg, #FF5FA8 0%, #FF8A4C 55%, #FFD93D 100%);
  --grad-kartu: linear-gradient(160deg, #FFFFFF 0%, #F5F2FF 100%);
  --grad-biru: linear-gradient(135deg, #4DB8FF 0%, #65D6B3 100%);

  /* Radius & bayangan ala kartu game anak-anak */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pil: 999px;

  --shadow-sm: 0 2px 10px rgba(75, 53, 168, 0.10);
  --shadow-md: 0 8px 24px rgba(75, 53, 168, 0.16);
  --shadow-lg: 0 18px 44px rgba(75, 53, 168, 0.22);
  --shadow-tombol: 0 6px 0 rgba(0,0,0,0.15);

  --font-heading: 'Fredoka', 'Baloo 2', sans-serif;
  --font-body: 'Nunito', 'Nunito Sans', sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--abu-700);
  background: var(--abu-100);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; color: var(--ungu-800); margin: 0 0 8px; }
p { margin: 0 0 8px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-body); cursor: pointer; border: none; }
ul { margin: 0; padding-left: 20px; }

/* Latar bergelombang ala "way ground" — dipakai di halaman login/dashboard.
   Warna dasar sudah ditaruh langsung di body (lihat login.css/dashboard.css)
   supaya tetap tampil walau elemen fixed di bawah ini gagal dirender oleh
   browser tertentu (mis. in-app browser WhatsApp/Instagram). Div ini hanya
   menambahkan pola/ombak dekoratif di atasnya. */
.bg-gelombang {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  min-height: 100vh;
  z-index: 0;
  background: var(--grad-utama);
  overflow: hidden;
  pointer-events: none;
}
.bg-gelombang::before,
.bg-gelombang::after {
  content: "";
  position: absolute;
  left: -10%;
  width: 120%;
  height: 220px;
  border-radius: 45%;
  background: rgba(255,255,255,0.10);
}
.bg-gelombang::before { bottom: -60px; }
.bg-gelombang::after { bottom: -110px; background: rgba(255,255,255,0.16); }

/* Versi background dihias: tambahkan/hapus class "bg-hias" pada <body>
   di index.html untuk beralih antara versi polos dan versi dihias */
body.bg-hias .bg-gelombang {
  background-image: var(--grad-utama), url('../assets/images/icons/pola-login.svg');
  background-blend-mode: normal;
  background-repeat: no-repeat, repeat;
  background-size: cover, 260px 260px;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.28;
  background: var(--kuning-koin);
}

/* Elemen dekoratif kecil: bintang & kilau mengambang */
.elemen-dekor {
  position: absolute;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  user-select: none;
}
@keyframes mengambangDekor {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(12deg); }
}
.elemen-dekor { animation: mengambangDekor 4.5s ease-in-out infinite; }

/* Scrollbar imut */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--ungu-400); border-radius: var(--r-pil); }
::-webkit-scrollbar-track { background: var(--ungu-100); }