/* ============================================================
   01-base.css  — reset, variabel warna, font, tombol dasar
   ------------------------------------------------------------
   Ubah warna / ukuran global di bagian :root aja.
   ============================================================ */

:root{
  /* --- warna crayon --- */
  --kertas:       #FFF6E2;
  --kertas-2:     #FFE9C7;
  --putih:        #FFFDF7;
  --tinta:        #2F2A26;
  --tinta-lembut: #6B5E52;
  --merah:        #FF4D6D;
  --kuning:       #FFC93C;
  --hijau:        #3FBF7F;
  --biru:         #4D9DE0;
  --ungu:         #A78BFA;
  --oranye:       #FF8A3D;

  /* --- font --- */
  --font-comik: "Baloo 2", "Comic Neue", "Comic Sans MS", "Chalkboard SE", "Segoe Print", "Bradley Hand", cursive;
  --font-tulis: "Caveat", "Comic Neue", "Comic Sans MS", "Segoe Print", cursive;
  --font-teks : "Baloo 2", ui-rounded, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* --- bentuk --- */
  --r-kartu: 22px;
  --r-kecil: 14px;
  --r-besar: 34px;
  --garis: 3px;
  --bayang: 0 6px 0 rgba(47,42,38,.16), 0 14px 26px rgba(47,42,38,.14);
  --bayang-kecil: 0 4px 0 rgba(47,42,38,.18);

  /* --- jarak responsif (sumber kebenaran) --- */
  --jarak: clamp(14px, 3.2vw, 28px);
  --lebar: 1100px;
}

/* ---------- reset ringan ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100svh;
  font-family:var(--font-teks);
  font-size: clamp(15px, 1.05vw + 12px, 19px);
  line-height:1.6;
  color:var(--tinta);
  background:var(--kertas);
  overflow:hidden;              /* deck slides, tidak ada scroll */
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,canvas,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:var(--biru); }
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.9em; background:#00000012; padding:.1em .4em; border-radius:6px;
}
strong{ font-weight:800; }
::selection{ background:var(--kuning); color:var(--tinta); }
:focus-visible{ outline:3px dashed var(--ungu); outline-offset:3px; border-radius:8px; }
[hidden]{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- latar kertas ---------- */
.paper-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, #00000008 0 2px, transparent 2.5px) 0 0/26px 26px,
    radial-gradient(circle at 72% 64%, #00000007 0 2px, transparent 2.5px) 8px 10px/34px 34px,
    repeating-linear-gradient(102deg, #00000006 0 1px, transparent 1px 7px);
  mix-blend-mode:multiply;
}
.confetti{
  position:fixed; inset:0; z-index:70; pointer-events:none;
  width:100%; height:100%;
}

/* ---------- tombol ---------- */
.btn{
  font-family:var(--font-comik); font-weight:800;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color:var(--tinta);
  background:var(--kuning);
  border: var(--garis) solid var(--tinta);
  border-radius: 999px;
  padding:.55em 1.4em;
  box-shadow: 0 5px 0 var(--tinta);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-2px) rotate(-1deg); }
.btn:active{ transform: translateY(4px); box-shadow: 0 1px 0 var(--tinta); }
.btn--besar{ font-size:clamp(1.15rem,3.6vw,1.6rem); padding:.6em 1.6em; background:var(--merah); color:var(--putih); }
.btn--kecil{ font-size:clamp(.8rem,2vw,.95rem); }
.btn--ghost{ background:var(--putih); }
.btn[aria-pressed="true"]{ background:var(--hijau); }

/* ---------- loading ---------- */
.boot{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:var(--kertas);
  transition: opacity .45s ease, visibility .45s ease;
}
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__crayon{ display:flex; gap:10px; }
.boot__crayon span{
  width:16px; height:46px; border:2px solid var(--tinta); border-radius:6px;
  animation: goyangCrayon .7s ease-in-out infinite alternate;
}
.boot__crayon span:nth-child(1){ background:var(--merah);  animation-delay:0s; }
.boot__crayon span:nth-child(2){ background:var(--kuning); animation-delay:.15s; }
.boot__crayon span:nth-child(3){ background:var(--hijau);  animation-delay:.3s; }
.boot__text{ font-family:var(--font-tulis); font-size:1.2rem; color:var(--tinta-lembut); }
.boot__bar{
  width:min(240px, 60vw); height:14px;
  background:var(--putih); border: var(--garis) solid var(--tinta);
  border-radius:999px; overflow:hidden;
}
.boot__bar i{ display:block; height:100%; width:0%; background:var(--ungu); transition: width .25s ease; }