@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* OTPin — gaya tambahan di atas Tailwind CDN. */
html {
  scroll-behavior: smooth;
}
/* Jangan biarkan satu elemen lebar (mis. <select> berisi teks panjang)
   menyeret seluruh halaman melebar di HP. */
html,
body {
  overflow-x: clip;
}
select,
input,
textarea {
  max-width: 100%;
}
.spinner {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 3px solid #FFEDD5;
  border-top-color: #F97316;
  animation: otp-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes otp-spin {
  to {
    transform: rotate(360deg);
  }
}
.pulse-dot {
  animation: otp-pulse 1.4s ease-in-out infinite;
}
@keyframes otp-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ===== Desain baru OTPin (oranye + hijau + krem, 30 Okt 2026) ===== */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: #FFFBF3;
}
.bg-slate-50 { background-color: #FFFBF3 !important; }
/* Palet lama (indigo) dipetakan ke palet baru */
.bg-indigo-600 { background-color: #F97316 !important; }
.bg-indigo-700 { background-color: #EA580C !important; }
.bg-indigo-500 { background-color: #FB923C !important; }
.bg-indigo-100 { background-color: #FFEDD5 !important; }
.bg-indigo-50 { background-color: #FFF7ED !important; }
.hover\:bg-indigo-700:hover { background-color: #EA580C !important; }
.hover\:bg-indigo-600:hover { background-color: #F97316 !important; }
.text-indigo-700 { color: #C2410C !important; }
.text-indigo-600 { color: #EA580C !important; }
.text-indigo-800 { color: #9A3412 !important; }
.text-indigo-200 { color: #FED7AA !important; }
.text-indigo-100 { color: #FFEDD5 !important; }
.hover\:text-indigo-700:hover { color: #C2410C !important; }
.border-indigo-200 { border-color: #FED7AA !important; }
.border-indigo-300 { border-color: #FDBA74 !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: #F97316 !important; }
.from-indigo-600 {
  --tw-gradient-from: #F97316 var(--tw-gradient-via-position) !important;
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-indigo-800 { --tw-gradient-to: #C2410C var(--tw-gradient-to-position) !important; }
.from-indigo-700 {
  --tw-gradient-from: #14532D var(--tw-gradient-via-position) !important;
  --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-indigo-900 { --tw-gradient-to: #0B3524 var(--tw-gradient-to-position) !important; }

.border-indigo-500 { border-color: #FDBA74 !important; }
.border-indigo-600 { border-color: #F97316 !important; }
.hover\:border-indigo-400:hover { border-color: #FB923C !important; }
.hover\:border-indigo-500:hover { border-color: #FB923C !important; }

/* ===== V5 LIGHT SKIN — tema terang putih + hijau #4ADE80 (30 Okt 2026) ===== */
body { background-color: #FFFFFF !important; }
::selection { background: #4ADE80; color: #052E16; }
.bg-cream { background-color: #FFFFFF !important; }
.bg-slate-50 { background-color: #F8FAFC !important; }
.bg-white { background-color: #FFFFFF !important; }
.bg-stone-50 { background-color: #F8FAFC !important; }
.bg-stone-100 { background-color: #F1F5F9 !important; }
.bg-orange-50 { background-color: rgba(74,222,128,.12) !important; }
.bg-brand { background-color: #4ADE80 !important; color: #052E16 !important; }
.hover\:bg-brand-dark:hover { background-color: #22C55E !important; }
.bg-brand-soft { background-color: rgba(74,222,128,.15) !important; }
.text-brand-deep { color: #15803D !important; }
.bg-pine { background-color: #1D9E4B !important; }
.hover\:bg-pine-deep:hover { background-color: #177A3B !important; }
.bg-pine-soft { background-color: rgba(34,197,94,.13) !important; }
.text-pine, .text-pine-deep { color: #16A34A !important; }
.bg-pine-ink { background-color: #0B3524 !important; }
.text-ink { color: #0F172A !important; }
.border-stone-100, .border-stone-200, .border-stone-200\/80, .border-stone-300, .border-orange-100, .border-orange-200, .border-slate-200 {
  border-color: #E2E8F0 !important;
}
.divide-stone-100 > :not([hidden]) ~ :not([hidden]) { border-color: #EDF1F5 !important; }
.hover\:border-orange-300:hover { border-color: rgba(74,222,128,.6) !important; }
.hover\:bg-orange-50\/50:hover { background-color: rgba(74,222,128,.08) !important; }
.hover\:bg-stone-100:hover { background-color: #F1F5F9 !important; }
.bg-\[\#FFFBF3\]\/90 { background-color: rgba(255,255,255,.92) !important; }
.border-\[\#F97316\] { border-color: #4ADE80 !important; }
input, select, textarea {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
input::placeholder, textarea::placeholder { color: #94A3B8 !important; }
.spinner { border-color: rgba(15,23,42,.15); border-top-color: #22C55E; }
.text-emerald-600 { color: #16A34A !important; }