/* ------------------------------------------------------------------
 * app.css — Gaya kustom & komponen untuk Tanya Jawab PPIB
 * Tailwind dimuat via CDN; file ini berisi override, komponen,
 * animasi, skeleton loading, dan utilitas yang tidak praktis ditulis
 * inline di setiap halaman.
 * ------------------------------------------------------------------ */

:root {
  --tms-primary: #2f415b;
  --tms-secondary: #22304a;
  --tms-accent: #f59e0b;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Sembunyikan elemen Alpine sebelum di-init agar tidak "berkedip" */
[x-cloak] {
  display: none !important;
}

/* ---------- Skeleton loading ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: rgb(226 232 240); /* slate-200 */
}
.dark .skeleton {
  background-color: rgb(51 65 85); /* slate-700 */
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: tms-shimmer 1.4s infinite;
}
.dark .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
}
@keyframes tms-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ---------- Fade-in halus untuk konten ---------- */
.fade-in {
  animation: tms-fade 0.4s ease both;
}
@keyframes tms-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Prose ringan untuk isi jawaban ---------- */
.answer-body {
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}
.answer-body p {
  margin-bottom: 1rem;
}

/* ---------- Garis clamp (fallback bila plugin line-clamp tak aktif) ---------- */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Scrollbar tipis ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgb(148 163 184 / 0.6);
  border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
  background: rgb(71 85 105 / 0.7);
}