/**
 * ============================================================
 * MENTAYA — Base Styles: Reset & Typography
 * File    : css/base.css
 * Purpose : CSS reset, normalisasi browser, dan gaya tipografi
 *           global. Tidak boleh ada class komponen di sini —
 *           hanya elemen HTML dan selector universal.
 * Audit   : Perubahan di sini berdampak ke seluruh aplikasi.
 * ============================================================
 */

/* ── RESET ──────────────────────────────────────────────────── */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Mencegah perubahan font size saat orientasi berubah di iOS */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background:
    radial-gradient(ellipse 80% 60% at 15% 85%, rgba(74, 171, 109, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 15%, rgba(45, 122, 79, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(26, 77, 46, 0.5) 0%, transparent 70%),
    linear-gradient(155deg, #0c2218 0%, #1a4d2e 45%, #123421 100%);
  background-attachment: fixed;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;

  /* Anti-aliasing untuk rendering teks yang lebih tajam */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Menghapus style default list */
ul, ol {
  list-style: none;
}

/* Membuat semua gambar responsif secara default */
img, svg {
  display: block;
  max-width: 100%;
}

/* Normalisasi tombol dan input */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── GRAIN TEXTURE OVERLAY ──────────────────────────────────────
 * Efek noise halus di atas seluruh halaman untuk kedalaman visual.
 * pointer-events: none memastikan tidak mengganggu interaksi.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: var(--z-overlay);
  mix-blend-mode: soft-light;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-sage);
}

/* ── SELECTION ───────────────────────────────────────────────── */

::selection {
  background-color: var(--color-mint);
  color: var(--color-forest);
}

/* ── FOCUS VISIBLE ───────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-sage);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── TIPOGRAFI GLOBAL ────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--color-forest);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p {
  color: var(--color-text);
  line-height: 1.65;
}

small {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

strong {
  font-weight: var(--weight-semibold);
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */

/* Untuk elemen yang hanya terlihat oleh screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mencegah teks terpilih (untuk elemen UI interaktif) */
.no-select {
  -webkit-user-select: none;
  user-select: none;
}

/* Teks terpotong dengan ellipsis */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Animasi fade-in dari bawah — digunakan saat tab/screen muncul */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animasi masuk dari kanan — untuk transisi screen */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animasi scale untuk modal dan popup */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Animasi pulse untuk indikator status aktif */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* Animasi geser masuk untuk slide login card */
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(48px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animasi untuk bar chart (mengisi dari bawah) */
@keyframes barGrow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

/* Animasi progress bar dari kiri ke kanan */
@keyframes progressFill {
  from { width: 0%; }
}