/* ================= RPTI — style ================= */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Italic-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* Tema situs: KRISTAL NEON (glassmorphism gelap, biru-ungu-magenta).
 * Kartu hasil (di layar & PNG) tetap pakai warna aksen per tipe: --a1/--a2
 * di-set langsung di elemen #result-card oleh app.js. */
:root {
  --n1: #5b7cff;          /* biru neon */
  --n2: #8b5cf6;          /* ungu */
  --n3: #d946ef;          /* magenta */
  --neon-grad: linear-gradient(100deg, #4f7bff 0%, #8b5cf6 52%, #d946ef 100%);
  --title: #d9b4ff;       /* judul ungu-pink neon */
  --bg1: #04050d;
  --bg2: #0a0820;
  --bg3: #140b28;
  --a1: #8b5cf6;          /* default aksen kartu (ditimpa per tipe) */
  --a2: #d946ef;
  --border: rgba(150, 130, 255, 0.32);
  --text: #eeeaff;
  --muted: rgba(196, 188, 236, 0.74);   /* lavender redup */
  --radius: 22px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  background-color: var(--bg2);
  background-image: linear-gradient(165deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
  background-attachment: fixed;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--text);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- latar: lingkaran & cincin neon ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); animation: float 22s ease-in-out infinite alternate; }
.b1 { width: 52vmax; height: 52vmax; left: -24vmax; top: -18vmax; background: #3b3fd6; opacity: .42; }
.b2 { width: 44vmax; height: 44vmax; right: -18vmax; top: 20vmax; background: #7c3aed; opacity: .40; animation-delay: -7s; }
.b3 { width: 38vmax; height: 38vmax; left: -10vmax; bottom: -20vmax; background: #a21caf; opacity: .26; animation-delay: -12s; }
.b4 { width: 24vmax; height: 24vmax; right: 6vmax; bottom: -4vmax; background: #4f46e5; opacity: .30; animation-delay: -3s; }
/* cincin / donat neon */
.ring {
  position: absolute; border-radius: 50%; filter: blur(3px);
  background: radial-gradient(circle, transparent 50%, rgba(99,102,241,.55) 57%, rgba(168,85,247,.45) 64%, rgba(168,85,247,.08) 70%, transparent 72%);
  animation: float 26s ease-in-out infinite alternate;
}
.r1 { width: 46vmin; height: 46vmin; left: -16vmin; top: 12vh; opacity: .75; }
.r2 { width: 34vmin; height: 34vmin; right: -10vmin; bottom: 10vh; opacity: .6; animation-delay: -9s;
  background: radial-gradient(circle, rgba(129,140,248,.10) 0%, rgba(99,102,241,.18) 55%, rgba(167,139,250,.55) 66%, transparent 71%); }
.r3 { width: 18vmin; height: 18vmin; right: 12vmin; top: 6vh; opacity: .45; animation-delay: -4s; filter: blur(2px); }
@keyframes float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(3vmax, 2.5vmax) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .blob, .ring { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- layout ---------- */
#app { width: 100%; max-width: 560px; padding: max(18px, env(safe-area-inset-top)) 16px 8px; flex: 1 0 auto; display: flex; flex-direction: column; }
/* Landing & kuis: isi dibagi rata di tinggi layar, footer nempel natural di bawah (tanpa celah mati) */
#screen-landing.is-active, #screen-quiz.is-active { display: flex; flex-direction: column; flex: 1 0 auto; }
#screen-landing.is-active { justify-content: center; }
#screen-quiz.is-active .question-card { margin: auto 0; }
#screen-quiz.is-active::after { content: ""; flex: 0 0 clamp(0px, 6vh, 64px); } /* kartu sedikit di atas tengah */
.screen { display: none; }
.screen.is-active { display: block; animation: enter 0.45s cubic-bezier(.2,.8,.2,1); }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* kaca gelap dengan garis neon tipis (lebih terang di pojok) */
.glass {
  position: relative;
  background: linear-gradient(160deg, rgba(46,36,98,0.42), rgba(14,11,34,0.62) 60%, rgba(40,16,62,0.48));
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 26px rgba(124,92,255,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}
.glass::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(122,162,255,0.95) 0%, rgba(139,92,246,0.35) 22%, transparent 48%, transparent 70%, rgba(217,70,239,0.45) 88%, rgba(255,128,214,0.9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* judul neon dengan garis tipis di kiri-kanan: —— Judul —— */
.neon-title {
  display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center;
  color: var(--title); text-shadow: 0 0 14px rgba(192,132,252,0.55);
}
.neon-title::before, .neon-title::after {
  content: ""; flex: 1 1 24px; min-width: 18px; max-width: 70px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.9));
  box-shadow: 0 0 6px rgba(192,132,252,0.7);
}
.neon-title::after { background: linear-gradient(270deg, transparent, rgba(192,132,252,0.9)); }

/* ---------- landing ---------- */
.hero { padding: 28px 22px 22px; text-align: center; }
.logo {
  display: inline-block; margin: 6px 0 10px; font-size: clamp(64px, 22vw, 104px); line-height: 1; font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(110deg, #8fb0ff 0%, #a78bfa 40%, #e879f9 75%, #f9a8d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(139,92,246,0.45));
}
.subtitle { margin: 0 0 18px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.intro { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--muted); text-align: left; }
/* 3 chip info kecil */
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 9px; border-radius: 14px;
  background: rgba(8,6,22,0.45); border: 1px solid rgba(139,120,255,0.3);
  box-shadow: inset 0 0 14px rgba(124,92,255,0.10), 0 0 12px rgba(124,92,255,0.12);
}
.stat strong {
  font-size: 20px; font-weight: 800; line-height: 1.1;
  background: linear-gradient(110deg, #8fb0ff, #c084fc 55%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.form-hint { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* panel dalam berbingkai dengan tepi menyala */
.nick-form, .fb-form {
  margin-top: 20px; padding: 18px 16px; text-align: left; border-radius: 18px;
  background: rgba(8,6,22,0.55); border: 1px solid rgba(139,120,255,0.38);
  box-shadow: inset 0 0 22px rgba(124,92,255,0.14), 0 0 16px rgba(124,92,255,0.18);
}
.label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 6px; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
.label .opt { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
input[type="text"], textarea {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 16px; font-weight: 600; color: var(--text);
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(139,120,255,0.35); border-radius: 14px; outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
textarea { resize: vertical; min-height: 110px; line-height: 1.5; font-weight: 500; }
input[type="text"]::placeholder, textarea::placeholder { color: rgba(196,188,236,0.42); font-weight: 500; }
input[type="text"]:focus, textarea:focus { border-color: #a78bfa; background: rgba(255,255,255,0.07); box-shadow: 0 0 0 4px rgba(139,92,246,0.18), 0 0 18px rgba(139,92,246,0.35); }
.invalid { border-color: #ff8fb1 !important; animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.help { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.count { float: right; font-variant-numeric: tabular-nums; opacity: .8; }
.error { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #ffb4cf; }

/* ---------- tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 12px 18px; border-radius: 16px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 800; color: var(--text); cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .option:focus-visible, .btn-icon:focus-visible, .site-footer a:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.btn-block { width: 100%; margin-top: 14px; }
.btn-primary {
  background: var(--neon-grad); color: #fff; border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 22px rgba(139,92,246,0.55), 0 8px 24px rgba(79,70,229,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: 0 1px 6px rgba(40,0,80,0.35);
}
.btn-primary:hover { box-shadow: 0 0 30px rgba(168,85,247,0.75), 0 8px 24px rgba(79,70,229,0.4), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-x { background: #05050a; border-color: rgba(167,139,250,0.4); color: #fff; box-shadow: 0 0 14px rgba(99,102,241,0.2); }
.btn-glass { background: rgba(255,255,255,0.05); border-color: var(--border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn-ghost { background: rgba(10,8,26,0.35); border-color: rgba(167,139,250,0.5); color: #c4b5fd; font-weight: 700; box-shadow: 0 0 14px rgba(139,92,246,0.15); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-icon {
  width: 44px; height: 44px; flex: none; border-radius: 14px; border: 1px solid var(--border);
  background: rgba(20,16,48,0.55); color: #c4b5fd; font-size: 20px; font-weight: 800; cursor: pointer;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 12px rgba(124,92,255,0.25);
}

/* ---------- kuis ---------- */
.quiz-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.progress { flex: 1; height: 10px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; border: 1px solid rgba(139,120,255,0.3); }
.progress-fill { height: 100%; width: 5%; border-radius: 99px; background: var(--neon-grad); box-shadow: 0 0 12px rgba(168,85,247,0.8); transition: width .35s ease; }
.progress-text { min-width: 46px; text-align: right; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: #c4b5fd; }
.question-card { padding: 22px 18px 18px; }
.question-card.swap { animation: swap .35s cubic-bezier(.2,.8,.2,1); }
@keyframes swap { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.question-card.swap-back { animation: swapback .35s cubic-bezier(.2,.8,.2,1); }
@keyframes swapback { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.q-number { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--title); text-shadow: 0 0 10px rgba(192,132,252,0.5); }
.q-text { margin: 0 0 18px; font-size: 19px; line-height: 1.45; font-weight: 800; }
.options { display: grid; gap: 10px; }
.option {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 14px 14px; border-radius: 16px; cursor: pointer;
  font: inherit; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--text);
  background: rgba(8,6,22,0.5); border: 1.5px solid rgba(139,120,255,0.22);
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.option:hover { background: rgba(139,92,246,0.10); border-color: rgba(167,139,250,0.55); }
.option:active { transform: scale(0.985); }
.option .key {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: rgba(139,92,246,0.16); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.45); font-weight: 800; font-size: 14px;
}
.option.selected { background: rgba(139,92,246,0.18); border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(139,92,246,0.16), 0 0 20px rgba(168,85,247,0.35); }
.option.selected .key { background: var(--neon-grad); color: #fff; border-color: transparent; box-shadow: 0 0 10px rgba(168,85,247,0.7); }

/* ---------- hasil ---------- */
.result-opener { margin: 4px 4px 12px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--muted); }
/* Kartu hasil: kaca gelap + glow neon warna tipe (bukan tema situs) */
.result-card {
  padding: 22px 20px 18px; overflow: hidden; color: #fff;
  border-color: color-mix(in srgb, var(--a1) 60%, transparent);
  background:
    radial-gradient(120% 55% at 0% 0%, color-mix(in srgb, var(--a1) 34%, transparent), transparent 62%),
    radial-gradient(110% 50% at 100% 42%, color-mix(in srgb, var(--a2) 26%, transparent), transparent 62%),
    radial-gradient(90% 40% at 10% 100%, color-mix(in srgb, var(--a1) 18%, transparent), transparent 65%),
    linear-gradient(165deg, rgba(14,12,34,0.92), rgba(8,7,22,0.94));
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 34px color-mix(in srgb, var(--a1) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.12);
}
.result-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--a1), var(--a2)); box-shadow: 0 0 16px var(--a2);
}
.result-card::after {
  background: linear-gradient(135deg, var(--a1) 0%, color-mix(in srgb, var(--a1) 30%, transparent) 25%, transparent 50%, transparent 70%, color-mix(in srgb, var(--a2) 40%, transparent) 88%, var(--a2) 100%);
}
.rc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: rgba(225,220,255,0.78); }
.rc-oc { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 58%; }
.rc-oc-label { font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(225,220,255,0.7); }
.rc-nick { padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,0.06); border: 1px solid color-mix(in srgb, var(--a2) 70%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--a2) 35%, transparent); color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-code-wrap { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.rc-code {
  font-size: clamp(56px, 18vw, 84px); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  background: #fff;
  background: linear-gradient(120deg, #fff, #fff 30%, color-mix(in srgb, var(--a2) 65%, #fff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--a1) 55%, transparent));
}
.rc-mbti { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid color-mix(in srgb, var(--a2) 65%, transparent); }
.rc-name { margin: 10px 0 6px; font-size: 22px; line-height: 1.3; font-weight: 800; }
.rc-tagline { margin: 0 0 6px; font-size: 16px; font-style: italic; font-weight: 600; line-height: 1.5; color: color-mix(in srgb, var(--a2) 35%, #fff); }
.rc-team { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: rgba(225,220,255,0.7); letter-spacing: .04em; }
.rc-desc { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(236,232,255,0.9); }
.rc-section { margin-top: 14px; padding: 14px 14px 13px; border-radius: 16px; background: rgba(255,255,255,0.035); border: 1px solid color-mix(in srgb, var(--a1) 32%, transparent); box-shadow: inset 0 0 16px color-mix(in srgb, var(--a1) 10%, transparent); }
.rc-section h3 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--a2) 45%, #fff); }
.rc-section p { margin: 0; font-size: 15px; line-height: 1.6; }
.rc-section ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.rc-section li + li { margin-top: 4px; }
.rc-section li::marker { color: var(--a2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 14px; border-radius: 99px; font-size: 14px; font-weight: 800; background: rgba(255,255,255,0.08); background: linear-gradient(120deg, color-mix(in srgb, var(--a1) 32%, transparent), color-mix(in srgb, var(--a2) 32%, transparent)); border: 1px solid color-mix(in srgb, var(--a2) 70%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--a1) 30%, transparent); }
.rc-credit { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; text-align: center; }
.rc-credit-main { font-size: 12px; font-weight: 700; color: rgba(236,232,255,0.85); letter-spacing: .06em; }
.rc-credit-sub { font-size: 9.5px; font-weight: 800; color: rgba(225,220,255,0.6); letter-spacing: .28em; }

.bars { display: grid; gap: 12px; }
.bar-row { font-size: 13px; font-weight: 700; }
.bar-labels { display: flex; justify-content: space-between; margin-bottom: 5px; color: rgba(225,220,255,0.65); }
.bar-labels .win { color: #fff; }
.bar-track { position: relative; height: 12px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--a1), var(--a2)); box-shadow: 0 0 10px var(--a2); transition: width .9s cubic-bezier(.2,.8,.2,1); width: 0; }
.bar-fill.left { left: 0; }
.bar-fill.right { right: 0; background: linear-gradient(270deg, var(--a1), var(--a2)); }
.bar-axis { margin-top: 3px; font-size: 11px; font-weight: 600; color: rgba(225,220,255,0.55); text-align: center; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.actions .btn { padding: 12px 10px; font-size: 14px; white-space: nowrap; }
.caption-preview { margin: 12px 4px 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; word-break: break-word; }

/* ---------- kritik & saran ---------- */
.feedback { margin-top: 22px; padding: 22px 18px 18px; }
.feedback h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.fb-intro { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); text-align: center; }
.fb-form { margin-top: 14px; }
.fb-form .label + input, .fb-form .label + textarea { margin-bottom: 12px; }
.fb-form .help { margin-top: -4px; }
.fb-status { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.fb-status.ok { color: #c7f9e4; background: rgba(16,185,129,0.12); border: 1px solid rgba(52,211,153,0.45); }
.fb-status.err { color: #ffd1e0; background: rgba(236,72,153,0.12); border: 1px solid rgba(244,114,182,0.5); }

/* ---------- semua tipe ---------- */
.types-top { display: flex; align-items: center; gap: 12px; }
.types-top h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--title); text-shadow: 0 0 14px rgba(192,132,252,0.5); }
.types-hint { margin: 8px 2px 14px; font-size: 13px; color: var(--muted); }
.team-title { margin: 22px 4px 12px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.type-item { margin-bottom: 10px; padding: 0; overflow: hidden; }
.type-item summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; gap: 14px; align-items: center; }
.type-item summary::-webkit-details-marker { display: none; }
.type-swatch { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .02em; color: #fff; border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 14px rgba(139,92,246,0.35); }
.type-meta { min-width: 0; }
.type-meta strong { display: block; font-size: 15px; line-height: 1.3; }
.type-meta span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.type-body { padding: 0 16px 16px; font-size: 14px; line-height: 1.6; color: rgba(236,232,255,0.9); }
.type-body h4 { margin: 12px 0 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--title); }
.type-body p { margin: 0; }
.type-body ul { margin: 0; padding-left: 18px; }

/* ---------- footer ---------- */
.site-footer { width: 100%; max-width: 560px; padding: 18px 16px max(16px, env(safe-area-inset-bottom)); text-align: center; }
.site-footer p { margin: 3px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.site-footer .credit { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #d9c6ff; text-shadow: 0 0 10px rgba(167,139,250,0.45); }
.site-footer .credit-sub {
  margin: 4px 0 10px; font-size: 9.5px; font-weight: 800; letter-spacing: .32em; color: rgba(196,181,253,0.7);
  text-align: center;
}
.site-footer a { color: #f0abfc; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(240,171,252,0.4); }
.site-footer a:hover { color: #fff; border-bottom-color: #fff; }
.site-footer .credit-link { color: inherit; border-bottom: 1px solid rgba(217,198,255,0.35); }

/* ---------- modal & toast ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(3, 2, 12, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal[hidden] { display: none; }
.modal-box { width: 100%; max-width: 440px; max-height: 92vh; overflow: auto; padding: 18px; text-align: center; animation: enter .3s ease; background: rgba(14, 11, 34, 0.88); }
.modal-box h2 { margin: 0 0 6px; font-size: 18px; }
.modal-hint { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.modal-box img { width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: 16px; display: block; box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 22px rgba(139,92,246,0.3); -webkit-touch-callout: default; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 700;
  background: rgba(14, 11, 34, 0.94); color: #e9d5ff; border: 1px solid var(--border); box-shadow: 0 0 18px rgba(139,92,246,0.35);
  transition: all .3s ease; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* fallback kalau browser nggak dukung backdrop-filter: kaca dibikin lebih pekat */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(16, 13, 38, 0.92); }
}

@media (min-width: 600px) {
  #app { padding-top: 40px; }
  .hero { padding: 38px 34px 30px; }
  .question-card { padding: 30px 28px 24px; }
  .q-text { font-size: 22px; }
  .result-card { padding: 28px 28px 22px; }
  .feedback { padding: 26px 26px 22px; }
}
@media (max-width: 360px) {
  .actions { grid-template-columns: 1fr; }
}