@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,800&display=swap');
:root{--ink:#14143a;--blue:#3b3bff;--pink:#ff3d81;--yellow:#ffe14d;--mint:#2de2b0;--orange:#ff8a3d;--mut:#5a5a8a;--flash:#ffe14d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;color:var(--ink);font:500 16px/1.5 'Bricolage Grotesque',system-ui,sans-serif;
background:radial-gradient(rgba(255,255,255,.18) 2px,transparent 2.5px) 0 0/26px 26px,var(--blue)}
main{max-width:600px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 16px max(64px,env(safe-area-inset-bottom))}
main>p{color:#e8eaff;margin:.4em 0}main>p a{color:var(--yellow)}
h1{font-size:clamp(3rem,16vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:.95;margin:.1em 0 .2em;color:var(--yellow);
text-shadow:4px 4px 0 var(--pink),8px 8px 0 var(--ink);transform:rotate(-2deg);transform-origin:left;width:fit-content}
.card{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:20px;margin:22px 0;box-shadow:6px 6px 0 var(--ink);position:relative}
.card strong{font-size:1.15rem;font-weight:800}
#list .card:nth-child(odd){transform:rotate(-.8deg)}#list .card:nth-child(even){transform:rotate(.8deg)}
#list .card::before{content:"";position:absolute;left:24px;top:-14px;width:70px;height:24px;background:var(--mint);border:3px solid var(--ink);border-radius:6px;transform:rotate(-4deg)}
#list .card:nth-child(4n+2)::before{background:var(--pink)}#list .card:nth-child(4n+3)::before{background:var(--yellow)}#list .card:nth-child(4n)::before{background:var(--orange)}
label{display:block;font-size:.9rem;font-weight:800;margin:14px 0 6px}
input{width:100%;padding:12px 14px;border:3px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16px;min-height:50px;-webkit-appearance:none;appearance:none}
input:focus{outline:0;background:#fffbe0;box-shadow:4px 4px 0 var(--pink)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:3px solid var(--ink);border-radius:14px;
background:var(--pink);color:var(--ink);font:inherit;font-weight:800;cursor:pointer;text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
button:active,.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
button.flash,.btn.flash{background:var(--yellow)}button.ghost{background:var(--mint)}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:3px dashed var(--ink);outline-offset:3px}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;align-items:center}.mut{color:var(--mut);font-size:.9rem}
.qr{padding:8px;background:#fff;border:3px solid var(--ink);border-radius:12px;line-height:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;margin-top:16px}
.grid div{position:relative;background:#fff;padding:6px 6px 22px;border:3px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--ink)}
.grid div:nth-child(odd){transform:rotate(-1.5deg)}.grid div:nth-child(even){transform:rotate(1.5deg)}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.grid button{position:absolute;right:-8px;top:-10px;min-height:28px;padding:0 10px;font-size:.75rem;border-radius:8px;box-shadow:2px 2px 0 var(--ink)}
@media(max-width:420px){.row .btn,.row button{flex:1}}
@media(prefers-reduced-motion:reduce){button,.btn{transition:none}}
/* Teks di luar kad (atas latar biru) mesti cerah */
main .mut{color:#eef0ff}
main a{color:var(--yellow);font-weight:800}
.card .mut{color:var(--mut)}
.card a:not(.btn){color:var(--blue)}