/* Tombol peresmian — mobile-first, satu layar, tombol raksasa. */
:root {
  --brand-300: #8ab8ff;
  --brand-500: #2f70ea;
  --brand-700: #1a45a3;
  --brand-950: #10224a;
  --leaf-400: #37c877;
  --leaf-500: #1fae5c;
  --leaf-600: #128047;
  --sun-400: #ffb23d;
  --navy: #0f172a;
  --ink: #f8fafc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: 'Plus Jakarta Sans Variable', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(700px 460px at 50% 0%, rgba(47, 112, 234, 0.28), transparent 65%),
    radial-gradient(600px 420px at 85% 100%, rgba(31, 174, 92, 0.14), transparent 60%),
    linear-gradient(180deg, #0b1222 0%, var(--navy) 60%, #0b1730 100%);
  overflow: hidden;
}

canvas#confetti {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 50;
}

.wrap {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 5vh, 44px);
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  text-align: center;
}

.head { display: flex; flex-direction: column; align-items: center; }
.head-logo { width: clamp(56px, 16vw, 84px); height: auto; margin-bottom: 14px; }
.head-eyebrow {
  font-size: 13px; letter-spacing: 0.5em; text-indent: 0.5em;
  text-transform: uppercase; font-weight: 600; color: var(--brand-300);
}
.head-title {
  font-size: clamp(26px, 8vw, 40px); font-weight: 800; letter-spacing: 0.03em;
  background: linear-gradient(92deg, #dbe7ff, var(--brand-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.head-sub { margin-top: 6px; font-size: clamp(12px, 3.6vw, 15px); color: #8ba3c9; font-weight: 600; }

.view { display: flex; flex-direction: column; align-items: center; }
.view[hidden] { display: none; }

/* ---------- Tombol raksasa ---------- */
.big-btn {
  position: relative;
  width: min(72vw, 46dvh, 340px);
  aspect-ratio: 1;
  border: none; border-radius: 50%;
  background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.big-btn-ring {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 2px solid rgba(138, 184, 255, 0.5);
  animation: ringPulse 2s ease-out infinite;
}
@keyframes ringPulse {
  0% { transform: scale(0.94); opacity: 0.9; }
  70% { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}
.big-btn-face {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  color: #fff;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(160deg, var(--brand-500) 0%, var(--brand-700) 62%, var(--brand-950) 130%);
  border: 1px solid rgba(138, 184, 255, 0.55);
  box-shadow:
    0 22px 60px rgba(15, 30, 70, 0.65),
    0 0 0 10px rgba(47, 112, 234, 0.12),
    inset 0 -12px 30px rgba(6, 16, 40, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.big-btn:active .big-btn-face { transform: scale(0.94); }
.big-btn:focus-visible .big-btn-face { outline: 4px solid var(--sun-400); outline-offset: 6px; }
.big-btn:disabled { cursor: default; opacity: 0.6; }
.big-btn:disabled .big-btn-ring { animation: none; opacity: 0; }
.big-btn-label {
  font-size: clamp(19px, 5.6vw, 27px);
  font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  line-height: 1.3;
}

.hint {
  margin-top: 26px; font-size: clamp(13px, 3.6vw, 15px);
  color: #a9c1e8; max-width: 34ch; line-height: 1.55;
}
.err { margin-top: 14px; font-size: 14px; color: #fca5a5; font-weight: 600; }

/* ---------- Tampilan sukses ---------- */
.done-circle {
  width: 132px; height: 132px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #eafff3;
  background: linear-gradient(160deg, var(--leaf-400), var(--leaf-600));
  box-shadow: 0 20px 54px rgba(15, 106, 60, 0.5), 0 0 0 12px rgba(31, 174, 92, 0.15);
  animation: donePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes donePop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#check-path {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: checkDraw 0.55s ease-out 0.25s forwards;
}
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
.done-title {
  margin-top: 26px; font-size: clamp(24px, 7vw, 34px); font-weight: 800;
  color: #d1fadf;
}
.done-sub { margin-top: 12px; font-size: clamp(14px, 4vw, 17px); color: #c7d5ee; line-height: 1.6; }
#done-time { color: var(--sun-400); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .big-btn-ring, .done-circle, #check-path { animation: none; }
  #check-path { stroke-dashoffset: 0; }
}