/* ==========================================================================
   Eduku - Global Stylesheet
   Sesuai design-system.md: token warna, tipografi, radius, spacing.
   Sebagian besar styling pakai Tailwind utility class (lihat tailwind.config
   di assets/js/tailwind-init.js). File ini isinya cuma yang tidak bisa
   dicakup utility class: font-face rendering, animasi ringan, captcha style.
   ========================================================================== */

:root {
  --color-hitam: #000000;
  --color-putih: #FFFFFF;
  --color-abu-terang: #E7E9EB;
  --color-mint: #CEE9B9;
  --color-lavender: #ECA6FC;
  --color-abu-teks: #6B7280;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  background-color: var(--color-abu-terang);
  color: var(--color-hitam);
}

body {
  min-height: 100dvh;
  /* Kenyamanan baca untuk sesi belajar panjang: line-height lebih lega &
     letter-spacing sedikit dilonggarkan dibanding default UI yang rapat. */
  line-height: 1.6;
  letter-spacing: 0.005em;
}

/* Judul tetap rapat supaya tidak terlihat "mengambang", tapi tidak
   sekencang default browser (1.2) - versi tengah yang nyaman dipindai. */
h1, h2, h3, .font-display {
  line-height: 1.35;
  letter-spacing: 0;
}

/* Teks bacaan panjang (soal, pembahasan, materi, twet) - line-height paling
   lega dari semuanya, karena ini yang paling lama dibaca saat belajar. */
#teksPertanyaan, #teksPertanyaanKuis, #pembahasanBox,
.font-body.leading-relaxed, details p, .prosa-baca {
  line-height: 1.75;
}

/* Jarak antar section vertikal sedikit dilonggarkan supaya mata tidak
   "menabrak" blok konten berikutnya secara langsung. */
main > * + * {
  scroll-margin-top: 16px;
}

/* Semua angka data wajib JetBrains Mono (skor, EXP, waktu, persentase) */
.data-num {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* Feedback visual ringan untuk aksi penting - tanpa berlebihan */
@keyframes eduku-pop {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.anim-pop { animation: eduku-pop 220ms ease-out; }

@keyframes eduku-fade-up {
  0% { transform: translateY(6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.anim-fade-up { animation: eduku-fade-up 200ms ease-out; }

/* Captcha: teks sedikit di-distorsi ringan, tetap terbaca jelas */
.captcha-render {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.35em;
  user-select: none;
}
.captcha-render span:nth-child(odd) { display: inline-block; transform: rotate(-4deg) translateY(-1px); }
.captcha-render span:nth-child(even) { display: inline-block; transform: rotate(3deg) translateY(1px); }

/* Progress bar segmen pill (progres bertahap, mis. beberapa pulau) */
.segmen-pill {
  height: 6px;
  border-radius: 9999px;
  background-color: var(--color-abu-terang);
}
.segmen-pill.selesai { background-color: var(--color-mint); }

/* Toggle switch (Pengaturan) - hanya pakai hitam pekat, tanpa warna baru */
.toggle-checkbox:checked { right: 0; border-color: var(--color-hitam); }
.toggle-checkbox:checked + .toggle-label { background-color: var(--color-hitam); }
.toggle-checkbox:checked + .toggle-label:after { transform: translateX(100%); border-color: var(--color-putih); }

/* Mode fokus (simulasi ujian): sembunyikan elemen non-esensial */
body.mode-fokus .non-esensial { display: none !important; }

/* Skeleton loading sederhana - blok warna solid, bukan gradient shimmer */
.skeleton {
  background-color: var(--color-abu-terang);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background-color: #dcdedf;
  animation: eduku-skeleton 1.1s ease-in-out infinite;
}
@keyframes eduku-skeleton {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}

/* Scrollbar tipis untuk area horizontal scroll (mis. chip mapel) */
.scroll-tipis::-webkit-scrollbar { height: 4px; }
.scroll-tipis::-webkit-scrollbar-thumb { background-color: var(--color-abu-terang); border-radius: 9999px; }

/* Confetti sederhana (Prediksi Kampus) - dibangun dari <div> persegi kecil, bukan gambar */
.confetti-piece {
  position: fixed;
  width: 8px; height: 14px;
  top: -20px;
  opacity: 0.9;
  animation: eduku-confetti-fall linear forwards;
  z-index: 60;
}
@keyframes eduku-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(540deg); }
}