:root {
  color-scheme: light dark;
  
  /* --- Light Mode (Biru Muda & Kaca) --- */
  --bg-gradient: linear-gradient(135deg, #e0eafc 0%, #cfdef3 50%, #e0eafc 100%);
  --text: #1c1e21; 
  --text-muted: #65676b;
  
  /* Biru Facebook */
  --primary: #1877F2; 
  --primary-hover: #166FE5; 
  --primary-soft: rgba(24, 119, 242, 0.15); 
  --text-invert: #ffffff;
  
  --danger: #fa3e3e; 
  --danger-soft: rgba(250, 62, 62, 0.15); 
  --danger-text: #b91c1c;
  
  --success: #00a400; 
  --success-soft: rgba(0, 164, 0, 0.15); 
  --success-text: #047857;
  
  --warning: #f7b928; 
  --warning-soft: rgba(247, 185, 40, 0.15); 
  --warning-text: #b45309;

  /* Kunci Glassmorphism (Light) */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  --glass-blur: blur(12px);
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --- Dark Mode (Biru Gelap & Kaca) --- */
    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    --text: #e4e6eb; 
    --text-muted: #b0b3b8;
    
    --primary: #2D88FF; 
    --primary-hover: #4599FF;
    --primary-soft: rgba(45, 136, 255, 0.2);
    
    --danger: #ff4d4f; 
    --danger-soft: rgba(255, 77, 79, 0.2); 
    --danger-text: #ff7875;
    
    --success: #45d175; 
    --success-soft: rgba(69, 209, 117, 0.2); 
    --success-text: #95de64;
    
    --warning: #ffc53d; 
    --warning-soft: rgba(255, 197, 61, 0.2); 
    --warning-text: #ffd666;

    /* Kunci Glassmorphism (Dark) */
    --glass-bg: rgba(30, 30, 46, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  }
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  -webkit-tap-highlight-color: transparent; 
}

/* ==========================================
   ANIMASI BACKGROUND (BERGELOMBANG)
   ========================================== */
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  /* Animasi background: Membuat warna gradient bergerak perlahan */
  background: var(--bg-gradient);
  background-size: 200% 200%;
  animation: gradientWave 15s ease infinite;
  
  height: 100dvh; 
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

@keyframes gradientWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

input, select, textarea { font-size: 16px; font-family: inherit; }
a { text-decoration: none; color: inherit; cursor: pointer; }
button { font-family: inherit; }
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); font-weight: 500; }

/* ==========================================
   ANIMASI MICRO-INTERACTION (FADE & SLIDE)
   ========================================== */

/* Animasi untuk halaman saat pertama kali dibuka */
.animate-enter {
  animation: fadeSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

/* Animasi berurutan untuk kartu (Staggered) */
.animate-enter-delay-1 { animation-delay: 0.1s; }
.animate-enter-delay-2 { animation-delay: 0.2s; }
.animate-enter-delay-3 { animation-delay: 0.3s; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animasi Efek "Bernafas" (Pulse) untuk tombol/elemen penting */
.animate-pulse-soft {
  animation: pulseSoft 2s infinite;
}

@keyframes pulseSoft {
  0% { box-shadow: 0 0 0 0 rgba(24, 119, 242, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(24, 119, 242, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 119, 242, 0); }
}

/* Animasi Getar (Shake) untuk Error/Validasi Gagal */
.animate-shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Animasi Loading Spinner (Berputar) */
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================
   AKSESIBILITAS: MATIKAN ANIMASI JIKA DIMINTA
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}