/* =========================================================
   Kolom Tanya Ustadz — Muslim Solo
   Custom styles pelengkap TailwindCSS
   ========================================================= */

/* Render lebih halus */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
}

/* Honeypot anti-spam: benar-benar tersembunyi dari user & screen reader,
   tapi tetap ada di DOM agar bot terjebak mengisinya. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Animasi Toast ---------- */
.toast {
  pointer-events: auto;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.toast.toast-show {
  transform: translateY(0);
  opacity: 1;
}

/* ---------- Animasi sukses (card) ---------- */
@keyframes pop-in {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pop {
  animation: pop-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Sedikit getaran lembut saat validasi gagal */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.4s ease;
}

/* Hormati preferensi pengguna yang mengurangi gerakan */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}