#timer {
  color: red;
  font-size: 5em;
  font-family: monospace;
  text-shadow: 0 0 10px #fff;
}

:root{
  --purple:#2b0074;
  --purple-2:#4d15be;
  --accent:#6a32ff;
  --green:#20d64f;
  --gray-1:#f2f2f7;
  --shadow:0 10px 24px rgba(0,0,0,.18);
}
html,body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;background:#fff;color:#0b0420}
.wrap{max-width:980px;margin:auto;padding:24px}

.lead{ text-align:center; }
.lead h1{font-size:26px;margin:6px 0 2px;letter-spacing:.3px;font-weight:800;color:#1b0b63}
.lead h2{font-size:18px;margin:0 0 24px;color:#1b0b63;opacity:.95}
.deadline{font-size:20px;margin:8px 0 18px;font-weight:800;color:#2a1385}

.bar{background:var(--purple);color:#fff;font-weight:800;text-align:center;padding:14px;border-radius:14px;margin:8px 0 22px}

/* Grid of cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:720px){.grid{display: flex; gap:14px}}

.card {
  position: relative;
  border-radius: 28px;
  background: linear-gradient(#cc1020 0 50%, #fff 50% 100%);
  box-shadow: 0 6px 0 rgba(0,0,0,.12) inset,
              0 0 0 10px rgba(0,0,0,.03) inset,
              var(--shadow);
  aspect-ratio: 1 / 1;   /* bikin selalu kotak persegi */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px) scale(1.01); }
.card:active{ transform: translateY(1px) scale(.99); }

.klik{ font-size:44px; font-weight:900; letter-spacing:1px; color:#fff; text-shadow:0 4px 14px rgba(0,0,0,.45); mix-blend-mode:luminosity }

/* Ripple on click */
.card:before{content:""; position:absolute; width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.65); transform:scale(0); opacity:0;}
.card.ripple:before{ animation:ripple .6s ease;}
@keyframes ripple{ 0%{transform:scale(0);opacity:.9} 60%{opacity:.35} 100%{transform:scale(30);opacity:0} }

/* Reveal numbers */
.reveal .klik{ display:none; }
.pct{ position:absolute; font-size:64px; font-weight:900; color:#cfcfd4; opacity:0; transform:translateY(16px) scale(.96); text-shadow:0 2px 0 rgba(0,0,0,.18), 0 10px 22px rgba(0,0,0,.25) }
.reveal .pct{ opacity:1; transform:translateY(0) scale(1); transition: all .5s ease .05s; }

/* Highlight for 50% */
.is-50 .pct{ color:var(--green); filter:drop-shadow(0 8px 18px rgba(32,214,79,.45)); }
.is-50{ animation:pop .9s ease both; }
@keyframes pop{ 0%{ transform:scale(.9)} 40%{ transform:scale(1.06)} 70%{ transform:scale(.98)} 100%{ transform:scale(1)} }

/* Result section */
.result{ margin:42px 0 10px; opacity:0; pointer-events:none; transform:translateY(20px); transition: all .6s ease; }
.result.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

.panel{ background:linear-gradient(180deg, rgba(119,77,255,.22), rgba(119,77,255,.05)); border-radius:24px; padding:26px 20px 30px; box-shadow:var(--shadow); position:relative; overflow:hidden }

.check{ width:108px; height:108px; border-radius:999px; background:var(--purple-2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:64px; font-weight:900; margin:-70px auto 12px; box-shadow:0 16px 36px rgba(77,21,190,.35) }

.result h3{ text-align:center; color:#2a1385; font-size:22px; margin:4px 0 18px; line-height:1.35 }
.product{ text-align:center }
.product img{ width:min(520px, 92%); height:auto; filter:drop-shadow(0 18px 24px rgba(0,0,0,.22)); }

.cta{ display:block; margin:20px auto 6px; width:min(520px, 92%); background:linear-gradient(90deg, var(--purple-2), var(--accent)); color:#fff; font-weight:900; text-decoration:none; text-align:center; padding:16px 18px; border-radius:999px; letter-spacing:.4px; box-shadow:0 12px 26px rgba(77,21,190,.35); transition: transform .12s ease; border:0; cursor:pointer; }
.cta:hover{ transform: translateY(-1px); }

/* Mini confetti */
.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.confetti i{ position:absolute; width:8px; height:10px; background: hsl(var(--h) 80% 55%); left:var(--x); top:-12px; transform:rotate(calc(var(--r)*1deg)); border-radius:2px; animation:fall calc(900ms + var(--d)*1ms) ease-out forwards; opacity:.9 }
@keyframes fall{ to{ transform: translateY(520px) rotate(calc(var(--r)*3deg)); opacity:0 } }