/* ==========================================================================
   [EFEK] Efek & animasi SmartSains, diadaptasi dari katalog SmartRiset
   (~/smartRiset/docs/KATALOG_EFEK_ANIMASI.md). CSS + JS biasa, tanpa library.
   Dimuat di templates/header.php setelah main.css; JS-nya di assets/js/efek.js.
   Semua kelas berawalan fx- agar tidak bentrok dengan Bootstrap/FlexStart.
   ========================================================================== */

/* 0.3 Font & 0.4 palet */
:root {
  --default-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --heading-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --nav-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --fx-indigo: #4f46e5;
  --fx-ungu: #7c3aed;
  --fx-magenta: #c026d3;
  --fx-cyan: #06b6d4;
  --fx-gradien: linear-gradient(90deg, #4f46e5, #c026d3, #06b6d4);
}
body { overflow-x: clip; }

/* ---------- 4.3 Garis progres gulir ---------- */
.fx-scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1100; pointer-events: none;
  transform-origin: left; scale: var(--progress, 0) 1; background: var(--fx-gradien); }

/* ---------- 4.2 Header kaca yang berbayang saat digulir ---------- */
.header { transition: box-shadow .3s, background-color .3s; }
.scrolled .header, .index-page.scrolled .header { background-color: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 8px 30px rgba(15, 23, 42, .08); }
.header .logo .sitename { background: linear-gradient(90deg, #012970, var(--fx-indigo) 55%, var(--fx-ungu));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 4.1 Muncul saat digulir ---------- */
.js [data-reveal] { opacity: 0; translate: 0 26px;
  transition: opacity .7s ease, translate .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* ---------- 1.1 & 1.2 Blob aurora + grid (dipasang JS pada [data-fx-aurora]) ---------- */
[data-fx-aurora] { position: relative; isolation: isolate; overflow: hidden; }
.fx-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
[data-fx-aurora="gelap"] .fx-aurora { z-index: 0; }
.fx-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .28; }
[data-fx-aurora="gelap"] .fx-blob { opacity: .45; filter: blur(50px); }
.fx-blob-1 { width: 460px; height: 460px; background: var(--fx-indigo); top: -170px; left: -120px;
  animation: fx-drift 16s ease-in-out infinite alternate; }
.fx-blob-2 { width: 380px; height: 380px; background: var(--fx-magenta); bottom: -170px; right: -90px;
  animation: fx-drift 19s ease-in-out infinite alternate-reverse; }
.fx-blob-3 { width: 300px; height: 300px; background: var(--fx-cyan); top: 30%; left: 45%;
  animation: fx-drift 22s ease-in-out infinite alternate; }
[data-fx-aurora="gelap"] .fx-blob-1 { width: 260px; height: 260px; top: -120px; left: -80px; }
[data-fx-aurora="gelap"] .fx-blob-2 { width: 240px; height: 240px; bottom: -140px; right: 10%; }
[data-fx-aurora="gelap"] .fx-blob-3 { width: 200px; height: 200px; top: -60px; left: 55%; }
@keyframes fx-drift { 50% { translate: 60px 40px; scale: 1.1; } 100% { translate: -40px 70px; scale: .95; } }
.fx-grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(65, 84, 241, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(65, 84, 241, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation: fx-grid-move 20s linear infinite; }
[data-fx-aurora="gelap"] .fx-grid { background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
                                                      linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); }
@keyframes fx-grid-move { to { background-position: 44px 44px, 44px 44px; } }
[data-parallax] { transition: transform .2s ease-out; }

/* ---------- 2.1 Teks gradien mengalir ---------- */
.fx-gradient-text { background: linear-gradient(90deg, #4f46e5, #c026d3, #06b6d4, #4f46e5); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-hue-flow 6s linear infinite; }
@keyframes fx-hue-flow { to { background-position: 300% 0; } }

/* ---------- 4.6 Titik denyut "live" ---------- */
.fx-pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34d399; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: fx-pulse 1.8s infinite; }
@keyframes fx-pulse { 70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* ---------- 5.1 Sorotan mengikuti kursor pada kartu ---------- */
.fx-glow { isolation: isolate; }
.fx-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, .10), transparent 60%); }
.fx-glow:hover::before { opacity: 1; }
.card.fx-glow { transition: transform .25s, box-shadow .25s; }
.card.fx-glow:hover { box-shadow: 0 14px 30px rgba(79, 70, 229, .10); }

/* ---------- 5.2 Tombol berkilau + riak klik ---------- */
.fx-btn { position: relative; overflow: hidden; }
.fx-shine::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  translate: -120% 0; transition: translate .7s; }
.fx-shine:hover::before { translate: 120% 0; }
.fx-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none;
  transform: scale(0); animation: fx-ripple .6s ease-out forwards; }
.btn-outline-primary .fx-ripple, .btn-outline-secondary .fx-ripple, .btn-light .fx-ripple, .btn-link .fx-ripple,
.btn-outline-success .fx-ripple, .btn-outline-danger .fx-ripple, .btn-outline-warning .fx-ripple, .btn-outline-info .fx-ripple,
.btn-outline-dark .fx-ripple { background: rgba(79, 70, 229, .18); }
@keyframes fx-ripple { to { transform: scale(2.6); opacity: 0; } }
.btn-getstarted, .btn-get-started { background-image: linear-gradient(120deg, var(--fx-indigo), var(--fx-ungu)) !important;
  border: 0; }

/* ---------- 5.6 Input bercahaya saat fokus ---------- */
.form-control, .form-select { transition: border-color .2s, box-shadow .25s; }
.form-control:focus, .form-select:focus { border-color: #818cf8; box-shadow: 0 0 0 6px rgba(79, 70, 229, .12); }

/* ---------- 5.5 Konten yang berganti muncul dengan fade-up ---------- */
.fx-fade-up { animation: fx-fade-up .4s ease both; }
@keyframes fx-fade-up { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* ---------- 5.3 & 5.4 Pilihan jawaban kuis sebagai kartu ---------- */
#soal-container .form-check { position: relative; margin: 0 0 10px; padding: 12px 14px 12px 44px; border: 1.5px solid #e2e6f0;
  border-radius: 14px; cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s, background-color .25s; }
#soal-container .form-check .form-check-input { margin-left: -30px; margin-top: .2em; cursor: pointer; }
#soal-container .form-check .form-check-label { cursor: pointer; display: block; }
#soal-container .form-check:hover { transform: translateY(-3px); border-color: #c7d2fe;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--fx-indigo) 14%, transparent); }
#soal-container .form-check:has(input:checked) { border-color: var(--fx-indigo); background-color: #eef2ff;
  animation: fx-pop .35s ease; }
#soal-container .form-check:has(input:focus-visible) { outline: 3px solid #a5b4fc; outline-offset: 2px; }
#soal-container .form-check:has(input:disabled) { cursor: default; transform: none; box-shadow: none; }
@keyframes fx-pop { 40% { transform: scale(1.025); } }

/* ---------- 3.1 Cincin skor (halaman hasil kuis) ---------- */
.fx-skor { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px;
  border: 1px solid #e2e6f0; border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgba(20, 30, 60, .06); }
.fx-ring { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.fx-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.fx-ring circle { fill: none; stroke-width: 10; }
.fx-ring .fx-ring-track { stroke: #eef2ff; }
.fx-ring .fx-ring-fill { stroke: var(--fx-indigo); stroke-linecap: round; animation: fx-ring-isi 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.fx-ring.lulus .fx-ring-fill { stroke: #10b981; }
.fx-ring.gagal .fx-ring-fill { stroke: #f59e0b; }
.fx-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.7rem; font-weight: 800; color: #1f2a44; }
@keyframes fx-ring-isi { from { stroke-dasharray: 0 100; } }

/* ---------- Isian cincin/meter/progres dashboard tumbuh saat dimuat (3.1, 3.4) ---------- */
.dsb-cincin .isi, .dsb-meter .isi { animation: fx-ring-isi 1.4s cubic-bezier(.22, 1, .36, 1) .2s both; }
.dsb-progres span { transform-origin: left; animation: fx-tumbuh 1.2s cubic-bezier(.22, 1, .36, 1) .3s both; }
@keyframes fx-tumbuh { from { scale: 0 1; } }

/* ---------- 6.1 & 6.3 Layar tunggu (form ber-data-fx-loading) ---------- */
.fx-loading { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fx-fade-up .25s ease both; }
.fx-loading-kotak { background: #fff; border-radius: 18px; padding: 26px 30px; text-align: center; min-width: 240px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3); }
.fx-orbit { position: relative; width: 56px; height: 56px; margin: 6px auto 16px; }
.fx-orbit span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--fx-indigo);
  animation: fx-spin 1.2s linear infinite; }
.fx-orbit span:nth-child(2) { inset: 9px; border-top-color: var(--fx-magenta); animation-duration: 1.8s; animation-direction: reverse; }
.fx-orbit span:nth-child(3) { inset: -7px; border-top-color: var(--fx-cyan); animation-duration: 2.4s; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx-progress { height: 6px; margin-top: 14px; border-radius: 6px; overflow: hidden; background: #eef2ff; }
.fx-progress span { display: block; width: 40%; height: 100%; border-radius: 6px; background: var(--fx-gradien);
  animation: fx-indeterminate 1.4s ease-in-out infinite; }
@keyframes fx-indeterminate { from { translate: -100% 0; } to { translate: 250% 0; } }

/* ---------- 6.5 Konfeti ---------- */
.fx-confetti { position: fixed; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; z-index: 2100;
  animation: fx-confetti 1.4s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes fx-confetti { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

/* ---------- [TABEL] Tabel & paginasi halaman admin ---------- */
.table { --bs-table-hover-bg: #f5f7ff; }
.table > thead th { white-space: nowrap; font-weight: 700; font-size: .86rem; vertical-align: middle; }
.table > thead:not(.table-dark) th { color: #1f2a44; }
.table > thead.table-primary th { --bs-table-bg: #eef2ff; --bs-table-color: #1f2a44; border-color: #dbe1f5; }
.table td { vertical-align: middle; }
.table td.aksi, .table th.aksi, td.aksi { white-space: nowrap; width: 1%; }
td.aksi .btn + .btn, td.aksi .btn + form, td.aksi form + .btn, td.aksi form + form { margin-left: .25rem; }
td.aksi form { display: inline-block; }
/* Sel tabel berisi 2+ tombol (kolom Aksi di semua halaman admin): satu baris, tidak bertumpuk */
.table td:has(> .btn ~ .btn), .table td:has(> .btn ~ form), .table td:has(> form ~ .btn), .table td:has(> form ~ form) { white-space: nowrap; }
.table td:has(> .btn ~ .btn) > .btn, .table td:has(> form ~ .btn) > .btn { margin-block: 1px; }
.table td > form { display: inline-block; }
.table-responsive { border-radius: 12px; }
table[data-halaman] { scroll-margin-top: 110px; }
.hal-bar .pagination .page-link { min-width: 34px; text-align: center; border-radius: 8px !important; margin: 0 2px; border-color: #dbe1f5; color: #3b47c4; }
.hal-bar .pagination .page-item.active .page-link { background: var(--fx-indigo); border-color: var(--fx-indigo); color: #fff; }
.hal-bar .pagination .page-item.disabled .page-link { color: #9aa3b5; background: transparent; }
.hal-bar { padding: 10px 12px; background: #f8f9fc; border: 1px solid #e8ebf2; border-radius: 12px; }

/* ---------- [FORM] Form lama berbasis Bootstrap 4 (form-group, select.form-control) ---------- */
.form-group { margin-bottom: 1rem; }
.form-group > label, .form-group > .form-label { font-weight: 600; font-size: .9rem; color: #2a3550; margin-bottom: .3rem; display: inline-block; }
select.form-control:not([multiple]):not([size]) { appearance: none; -webkit-appearance: none; padding-right: 2.25rem;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center / 16px 12px; }

/* ---------- 0.2 Hormati "kurangi animasi" + cetak ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; translate: 0 0; }
}
@media print {
  .js [data-reveal] { opacity: 1 !important; translate: 0 0 !important; }
  .fx-scroll-progress, .fx-aurora, .fx-loading { display: none !important; }
}