:root{
  --purple:#6200EA;--pink:#F50057;--white:#FFFFFF;--black:#000000;
  --green:#00C853;--yellow:#FFD600;--gray:#9E9E9E;
  --shadow:6px 6px 0 var(--black);--border:4px solid var(--black);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Roboto Mono",monospace;color:var(--black);min-height:100vh;
  background-color:var(--white);
  background-image:radial-gradient(var(--gray) 1.5px,transparent 1.5px);
  background-size:22px 22px;overflow-x:hidden;
}
.spray{font-family:"Rubik Spray Paint","Archivo Black",sans-serif;font-weight:400;line-height:1.1}
.page{display:none;min-height:100vh;padding:24px 16px 40px;max-width:960px;margin:0 auto}
.page.active{display:block;animation:pop .45s ease}
#page1.active{display:flex;align-items:center;justify-content:center}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:none}}

.card{background:var(--white);border:var(--border);box-shadow:var(--shadow);padding:28px 22px;border-radius:6px}
.welcome{background:var(--purple);color:var(--white);text-align:center;max-width:620px;position:relative;transform:rotate(-1deg)}
.welcome h1{font-size:clamp(2.2rem,8vw,4.2rem);color:var(--yellow);text-shadow:4px 4px 0 var(--black);margin:14px 0}
.welcome p{font-size:clamp(.95rem,3vw,1.15rem);margin-bottom:28px}
.sticker{position:absolute;top:-18px;right:-10px;background:var(--pink);color:var(--white);border:3px solid var(--black);padding:6px 12px;font-weight:700;transform:rotate(8deg);box-shadow:3px 3px 0 var(--black)}

.btn{font-family:"Roboto Mono",monospace;font-weight:700;font-size:1rem;border:var(--border);box-shadow:var(--shadow);padding:14px 18px;cursor:pointer;border-radius:6px;transition:transform .1s,box-shadow .1s;color:var(--black);text-align:left}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--black)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--black)}
.btn.big{font-size:1.3rem;padding:16px 40px;text-align:center}
.btn-yellow{background:var(--yellow)}.btn-pink{background:var(--pink);color:var(--white)}
.btn-green{background:var(--green)}.btn-purple{background:var(--purple);color:var(--white)}
.btn-white{background:var(--white);text-align:center}

.title-card{background:var(--yellow);text-align:center;transform:rotate(.6deg)}
.title-card h1{font-size:clamp(2rem,7vw,3.6rem);color:var(--pink);text-shadow:3px 3px 0 var(--black);margin-bottom:10px}

.box-wrap{margin:44px auto 20px;max-width:520px;position:relative}
.box-lid{background:var(--pink);border:var(--border);box-shadow:var(--shadow);height:56px;margin:0 -14px;display:flex;align-items:center;justify-content:center;font-family:"Archivo Black",sans-serif;color:var(--white);letter-spacing:.3em;font-size:1.4rem;transform:rotate(-4deg) translateY(10px);position:relative;z-index:2;border-radius:6px}
.box{background:var(--purple);border:var(--border);box-shadow:var(--shadow);height:280px;position:relative;overflow:hidden;border-radius:0 0 6px 6px;
  background-image:repeating-linear-gradient(90deg,transparent 0 38px,rgba(0,0,0,.18) 38px 42px)}
.roll{position:absolute;width:64px;height:20px;border:3px solid var(--black);border-radius:10px;box-shadow:2px 2px 0 var(--black)}
.roll::before,.roll::after{content:"";position:absolute;top:2px;width:10px;height:10px;border:2px solid var(--black);border-radius:50%;background:inherit}
.roll::before{left:2px}.roll::after{right:2px}
.box.shake{animation:shake .5s}
@keyframes shake{25%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}75%{transform:rotate(-1deg)}}

.ask{text-align:center;font-weight:700;font-size:1.05rem;background:var(--white);border:3px solid var(--black);padding:14px;margin:26px auto;max-width:620px;box-shadow:4px 4px 0 var(--black)}
.buttons{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.buttons{grid-template-columns:1fr 1fr}}

.gallery-title{font-family:"Archivo Black",sans-serif;text-align:center;margin:56px 0 22px;font-size:1.8rem;display:inline-block;background:var(--green);border:var(--border);box-shadow:var(--shadow);padding:6px 18px;position:relative;left:50%;transform:translateX(-50%) rotate(-2deg)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:800px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{background:var(--white);border:var(--border);box-shadow:var(--shadow);padding:8px 8px 12px;transition:transform .2s}
.gallery figure:nth-child(odd){transform:rotate(-2deg)}.gallery figure:nth-child(even){transform:rotate(2deg)}
.gallery figure:hover{transform:rotate(0) scale(1.04)}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--black);display:block}
.gallery figcaption{font-size:.78rem;font-weight:700;margin-top:8px;text-align:center}

footer{margin-top:60px;background:var(--black);color:var(--white);text-align:center;padding:26px;border:var(--border);box-shadow:6px 6px 0 var(--pink)}
footer .sign{font-family:"Rubik Spray Paint",sans-serif;color:var(--yellow);font-size:1.6rem;margin-top:10px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.overlay.show{display:flex}
.popup{position:relative;width:100%;max-width:440px;border:var(--border);box-shadow:10px 10px 0 var(--black);padding:34px 24px 24px;border-radius:6px;animation:bounce .4s cubic-bezier(.3,1.6,.6,1);text-align:center}
@keyframes bounce{from{transform:scale(.5) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.popup p{font-size:1.15rem;font-weight:700;line-height:1.5;margin:16px 0 24px}
.pop-label{background:var(--white);color:var(--black);border:3px solid var(--black);padding:4px 10px;font-size:.8rem;font-weight:700;text-transform:uppercase}
.close{position:absolute;top:-16px;right:-16px;width:40px;height:40px;background:var(--white);border:var(--border);box-shadow:3px 3px 0 var(--black);font-weight:700;cursor:pointer;border-radius:50%}
.popup.angry{background:var(--pink);color:var(--white)}.popup.happy{background:var(--green)}
.popup.sad{background:var(--purple);color:var(--white)}.popup.anxious{background:var(--yellow)}

.music-btn{position:fixed;bottom:16px;right:16px;z-index:40;width:52px;height:52px;border-radius:50%;border:var(--border);background:var(--yellow);box-shadow:4px 4px 0 var(--black);font-size:1.4rem;cursor:pointer}
.music-btn.playing{animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.roll {
  position: absolute; /* Pastikan kertasnya absolute agar bisa ditumpuk di dalam box */
  animation: floatAround infinite alternate ease-in-out;
}

/* Membuat efek bergerak ke kanan-atas sedikit, lalu kembali lagi */
@keyframes floatAround {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(15px, -15px); /* Ubah angka ini untuk mengatur seberapa jauh geraknya */
  }
}