:root{--ink:#14213d;--sky:#eaf4ff;--pink:#ff5c8a;--sun:#ffd23f;--mint:#2ec4b6}*{box-sizing:border-box}body{margin:0;font:18px/1.7 Nunito,system-ui,sans-serif;color:var(--ink);background:var(--sky) radial-gradient(#c9dff5 1.5px,transparent 1.5px) 0 0/16px 16px}
header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border-bottom:4px solid var(--ink);position:sticky;top:0;z-index:5}.logo{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font:26px Bangers}.logo i{color:var(--pink);font-style:normal}.logo .mascot{width:40px}nav{display:flex;gap:6px;flex-wrap:wrap}nav a{padding:4px 10px;border:3px solid var(--ink);border-radius:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:15px;background:#fff}nav a.on,nav a:hover{background:var(--sun)}.tools{display:flex;gap:8px;align-items:center;font-weight:800}select{font:inherit;border:3px solid var(--ink);border-radius:8px}
main{max-width:900px;margin:0 auto;padding:20px 16px}h1,h2{font-family:Bangers,cursive;letter-spacing:1px;line-height:1.1}h1{font-size:clamp(34px,7vw,60px);margin:.2em 0}.hero{display:flex;align-items:center;gap:14px}.hero.big{margin:20px 0 30px;gap:24px;flex-wrap:wrap}.hero .mascot{width:120px;animation:bob 3s ease-in-out infinite}.hero.big .mascot{width:190px}@keyframes bob{50%{transform:translateY(-12px) rotate(4deg)}}
.book{background:#fff;border:4px solid var(--ink);border-radius:6px 22px 6px 22px;padding:24px;box-shadow:8px 8px 0 var(--ink)}.book p{max-width:68ch}.btn{display:inline-block;background:var(--sun);color:var(--ink);border:4px solid var(--ink);border-radius:14px;padding:10px 20px;font:800 18px Nunito;text-decoration:none;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .1s}.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}.btn.pink{background:var(--pink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}.card{background:#fff;border:4px solid var(--ink);border-radius:18px;padding:16px;text-decoration:none;color:var(--ink);box-shadow:6px 6px 0 var(--ink)}.card:hover{background:var(--sun)}.card h2{margin:6px 0;font-size:30px}.card p{font-size:15px;margin:0}.ic{font-size:36px}
.panel{background:#fff;border:4px dashed var(--ink);border-radius:18px;padding:18px;margin-top:24px}.donate{text-align:center;background:var(--mint)}.opt{display:block;width:100%;margin:8px 0;padding:10px;text-align:left;font:700 17px Nunito;border:3px solid var(--ink);border-radius:12px;background:#fff;cursor:pointer}.opt:hover{background:var(--sun)}.opt.ok{background:#7be495;animation:pop .4s}.opt.no{background:#ff9aa8;animation:shake .3s}@keyframes pop{50%{transform:scale(1.04)}}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
footer{text-align:center;padding:24px 16px 90px;font-size:15px}.bmc{position:fixed;right:14px;bottom:14px;background:var(--sun);border:4px solid var(--ink);border-radius:30px;padding:8px 16px;font-weight:800;color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 var(--ink)}a:focus-visible,button:focus-visible,select:focus-visible{outline:4px solid var(--pink);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{animation:none!important}}.bmc{width:54px;height:54px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:26px;right:12px;bottom:12px;z-index:9;transition:all .2s;white-space:nowrap;overflow:hidden}.bmc span{display:none}.bmc:hover,.bmc:focus-visible{width:auto;padding:0 18px;border-radius:30px;font-size:17px}.bmc:hover span,.bmc:focus-visible span{display:inline;margin-left:6px}
main{padding-bottom:100px}.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.fx span{position:absolute;bottom:-60px;opacity:.35;animation:rise linear infinite}@keyframes rise{50%{transform:translateY(-58vh) translateX(18px)}to{transform:translateY(-115vh)}}header,main,footer{position:relative;z-index:1}header{position:sticky}
.mascot .eyes{transform-origin:60px 78px;animation:blink 4.5s infinite}@keyframes blink{94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}.hero .mascot{width:140px}.hero.big .mascot{width:210px}.hero.big:after{content:"GO!";font:44px Bangers;background:var(--sun);border:4px solid var(--ink);border-radius:50% 50% 50% 8%;padding:12px 22px;transform:rotate(-8deg);animation:pop 1.6s ease-in-out infinite}.card .ic{display:inline-block;animation:bob 3s ease-in-out infinite}.card:hover .ic{animation-duration:.6s}
.cf{position:fixed;z-index:20;pointer-events:none;animation:fly .9s ease-out forwards}@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(200deg);opacity:0}}
.tip{margin:10px 0 0 auto;max-width:78%;font-size:14px;line-height:1.4;background:var(--sun);border:3px solid var(--ink);border-radius:12px 12px 2px 12px;padding:6px 10px;transform:rotate(-1deg)}.why{background:#f1f7ff;border-left:6px solid var(--mint);padding:8px 12px;border-radius:6px;font-size:16px}textarea{width:100%;font:16px/1.5 Nunito,sans-serif;border:3px solid var(--ink);border-radius:12px;padding:10px}.info{font-weight:800;margin:6px 0 12px}.panel .btn{margin:6px 6px 0 0}
.hero.big>div{flex:1 1 320px}.hero.big{position:relative;flex-wrap:nowrap}.hero.big:after{position:absolute;left:170px;top:-6px;font-size:34px;padding:8px 16px}@media(max-width:640px){.hero.big{flex-wrap:wrap}.hero.big:after{left:130px}}
.hero.big:after{left:8px;top:auto;bottom:-34px}@media(max-width:640px){.hero.big:after{left:8px}}.hero.big{margin-bottom:56px}
.book h2{font-size:34px;margin:1.4em 0 .3em}.book h3{font:800 20px Nunito;margin:1.1em 0 .2em}.book ul,.book ol{max-width:68ch;padding-left:22px}.book li{margin:.3em 0}.meta{font-size:14px;opacity:.75;max-width:68ch}.bc{font-size:14px;margin:0 0 6px}.bc a,.book p a,.toc a{color:#c2185b;font-weight:700}.toc{background:#f1f7ff;border:3px solid var(--ink);border-radius:12px;padding:10px 16px;max-width:68ch;margin:14px 0}.toc ol{margin:6px 0 0}
.bc a,.toc a,.book p a{display:inline;border:0;padding:0;background:none;border-radius:0;font-size:inherit;text-decoration:underline}.toc b{display:block}.book h3{font:800 20px Nunito,system-ui,sans-serif}
.book h2{font-size:34px;margin:1.4em 0 .3em}.book h3{font:800 20px Nunito;margin:1.1em 0 .2em}.book ul,.book ol{max-width:68ch;padding-left:22px}.book li{margin:.3em 0}.meta{font-size:14px;opacity:.75;max-width:68ch}.bc{font-size:14px;margin:0 0 6px}.bc a,.book p a,.toc a{color:#c2185b;font-weight:700}.toc{background:#f1f7ff;border:3px solid var(--ink);border-radius:12px;padding:10px 16px;max-width:68ch;margin:14px 0}.toc ol{margin:6px 0 0}
.fl{max-width:640px;margin:10px auto 0;font-size:13px;opacity:.8}.fl a{color:inherit;text-decoration:underline}
.calc{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}.calc label{font-weight:800}.calc input{width:80px;font:inherit;border:3px solid var(--ink);border-radius:8px;padding:4px}#co{font-weight:800;font-size:20px}.book .grid{margin-top:16px}.book .card p{font-size:14px}
.calc{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}.calc label{font-weight:800}.calc input{width:80px;font:inherit;border:3px solid var(--ink);border-radius:8px;padding:4px}#co{font-weight:800;font-size:20px}.book .grid{margin-top:16px}.book .card p{font-size:14px}

/* ===== Revisi: header, tombol Ko-fi, tanpa icon animasi ===== */
html{scroll-padding-top:110px}
header{z-index:50;gap:8px 16px;box-shadow:0 4px 0 rgba(20,33,61,.12)}
nav{justify-content:center}
nav a{padding:6px 14px;font-size:16px;line-height:1.3}
.tools{flex-shrink:0}
@media(max-width:820px){
  header{justify-content:space-between}
  nav{order:3;width:100%}
  html{scroll-padding-top:130px}
}
.btn.pink{background:#d81b60}
.bmc{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:8px;
  width:auto;height:auto;padding:10px 20px 10px 14px;border-radius:999px;overflow:visible;white-space:nowrap;
  background:#d81b60;color:#fff;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  font:800 18px/1 Nunito,system-ui,sans-serif;text-decoration:none;transition:transform .12s,box-shadow .12s}
.bmc .cup{font-size:26px;line-height:1;font-style:normal;font-weight:400}
.bmc span,.bmc:hover span,.bmc:focus-visible span{display:inline;margin:0}
.bmc:hover,.bmc:focus-visible{width:auto;padding:10px 20px 10px 14px;font-size:18px;border-radius:999px;
  transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:#ad1457}
.bmc:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
@media(max-width:480px){.bmc{right:10px;bottom:10px;padding:8px 16px 8px 12px;font-size:16px}.bmc .cup{font-size:22px}}