/* Bikin Motion · link-in-bio (kelas sudah dibuka).
   One night-sky + paper look on purpose: it does not follow the device light/dark setting.
   Tokens (colors, fonts, shadows, --pop) come from tokens.css — load that first. */

*{margin:0;padding:0}
body{
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
  background:radial-gradient(120% 70% at 50% 0%,#3B2A94 0%,#1E1450 48%,#120B33 100%) fixed,#1E1450;
  color:var(--cream);font:500 16px/1.5 var(--body);
  -webkit-font-smoothing:antialiased;
}
html{scroll-behavior:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:14px}

/* ---------- langit ---------- */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;border-radius:50%;background:var(--cream);animation:twinkle var(--t,3s) ease-in-out var(--dl,0s) infinite}
.spark{position:absolute;width:var(--s);height:var(--s);animation:twinkle var(--t,4s) ease-in-out var(--dl,0s) infinite}
@keyframes twinkle{0%,100%{opacity:var(--o,.7);transform:scale(1)}50%{opacity:.15;transform:scale(.6)}}
.shoot{position:absolute;top:12%;left:-20%;width:140px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(246,243,255,.9));transform:rotate(18deg);
  animation:shoot 11s linear 3s infinite;opacity:0}
@keyframes shoot{0%{transform:translate(0,0) rotate(18deg);opacity:0}2%{opacity:1}9%{transform:translate(130vw,42vw) rotate(18deg);opacity:0}100%{opacity:0}}
/* film grain: generated noise (no external image) */
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.2 -.6'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/128px 128px}
.moon{position:fixed;top:60px;right:-46px;width:118px;height:118px;z-index:1;pointer-events:none;
  filter:drop-shadow(0 0 40px rgba(251,234,184,.25));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(8px) rotate(2deg)}}

/* ---------- kolom ---------- */
.wrap{position:relative;z-index:2;width:100%;max-width:460px;margin:0 auto;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))}
.rise{opacity:0;animation:rise .7s var(--pop) var(--d,0s) forwards}
@keyframes rise{from{opacity:0;translate:0 22px;scale:.96}to{opacity:1;translate:0 0;scale:1}}

/* ---------- profil ---------- */
.hero{text-align:center;margin-bottom:26px}
.lrw{max-width:292px;margin:10px auto 0}
.lr:empty{padding-top:85.556%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.handle{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:600 15px var(--display);color:var(--moon);opacity:.85}
.bio{margin:12px auto 0;max-width:340px;font-size:15.5px;line-height:1.5;opacity:.88}
.bio .hl{position:relative;z-index:0;padding:0 .18em;color:var(--ink);font-weight:800;white-space:nowrap}
.bio .hl::before{content:"";position:absolute;inset:.1em 0 0;background:var(--sun);border-radius:.18em;transform:rotate(-1.5deg);z-index:-1}

/* ---------- tombol DM utama ---------- */
.wa{display:flex;align-items:center;gap:14px;margin:0 0 34px;padding:14px 18px 14px 14px;border-radius:22px;
  background:var(--mint);color:var(--ink);box-shadow:var(--sh-lg);transition:transform .22s var(--pop),box-shadow .22s}
.wa:hover{transform:translate(-2px,-3px) rotate(-.6deg);box-shadow:12px 15px 0 rgba(8,3,36,.5)}
.wa:active{transform:translate(4px,5px);box-shadow:2px 3px 0 rgba(8,3,36,.5)}
.wa .ic{width:56px;height:56px;flex:none;border-radius:16px;background:var(--ink);display:grid;place-items:center}
.wa .ic svg{width:42px;height:42px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
.wa .tx{flex:1;min-width:0}
.wa b{display:block;font:700 18px/1.15 var(--display)}
.wa small{display:block;margin-top:3px;font:600 13.5px/1.3 var(--body);opacity:.72}
.wa .arr{font:700 22px var(--display);transition:transform .2s}
.wa:hover .arr{transform:translateX(4px)}

/* ---------- judul bagian ---------- */
.sec{display:flex;align-items:baseline;gap:10px;margin:0 2px 14px}
.sec h3{font:700 20px/1.1 var(--display)}
.sec span{font:19px/1 var(--hand);color:var(--sun);transform:rotate(-3deg)}
.sec.s2{margin-top:10px}
.sec span b{font-weight:400}
.wrap [hidden]{display:none!important}
.block{margin-bottom:34px}

/* ---------- kelas unggulan ---------- */
.course{position:relative;padding:24px 20px 20px;border-radius:26px;margin-top:18px;
  background:radial-gradient(circle at 100% 100%,rgba(246,243,255,.08) 0 110px,transparent 111px),radial-gradient(110% 90% at 20% 0%,#7C60F2,#6A3CF0 55%,#5438CC);box-shadow:var(--sh-lg)}
.course .stamp{position:absolute;top:-16px;right:14px;padding:5px 10px 7px;border:3px solid var(--coral);border-radius:10px;
  background:var(--cream);color:var(--coral);font:700 13px/1 var(--display);letter-spacing:.08em;transform:rotate(8deg);box-shadow:3px 4px 0 rgba(8,3,36,.3);z-index:2}
.course .row{display:flex;gap:14px;align-items:center;position:relative;z-index:1}
.course .k{font:600 12px/1 var(--display);letter-spacing:.16em;color:var(--sun)}
.course h4{font:700 24px/1.08 var(--display);margin-top:6px}
.course ul{list-style:none;margin:16px 0 18px;display:grid;gap:8px;position:relative;z-index:1}
.course li{display:flex;gap:10px;align-items:flex-start;font:600 14.5px/1.4 var(--body)}
.course li::before{content:"✓";display:grid;place-items:center;font:800 12px/1 var(--display);color:var(--ink);flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:var(--mint)}
.course li b{font-weight:800}
.cl{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;margin-right:.28em}
.harga{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;margin:0 0 16px;position:relative;z-index:1}
.harga span{font:600 14px/1 var(--body);opacity:.82}
.harga b{font:700 30px/1 var(--display);color:var(--sun)}
.harga small{flex-basis:100%;font:600 13px/1.3 var(--body);opacity:.78}
.btns{display:flex;gap:10px;position:relative;z-index:1}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 14px;border-radius:999px;
  font:700 15.5px/1.1 var(--display);transition:transform .2s var(--pop),box-shadow .2s;text-align:center}
.btn.sun{background:var(--sun);color:var(--ink);box-shadow:4px 5px 0 rgba(8,3,36,.4)}
.btn.sun:hover{transform:translate(-1px,-2px);box-shadow:6px 8px 0 rgba(8,3,36,.4)}
.btn.sun:active{transform:translate(3px,4px);box-shadow:1px 1px 0 rgba(8,3,36,.4)}
.btn.ghost{border:2px dashed rgba(246,243,255,.45);color:var(--cream)}
.btn.ghost:hover{background:rgba(246,243,255,.08)}

/* Kipas Reels: 3 kartu 9:16 berbingkai krem; kartu tengah berganti 5 thumbnail tiap 2,5 dtk (CSS murni) */
.course .rk{position:relative;width:86px;height:100px;flex:none}
.rk .c{position:absolute;top:8px;left:23px;width:46px;height:82px;border-radius:8px;border:2.5px solid var(--cream);overflow:hidden;box-shadow:3px 4px 0 rgba(8,3,36,.35);background:#1E1450}
.rk .c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rk .l{transform:translateX(-20px) rotate(-13deg)}.rk .r{transform:translateX(20px) rotate(12deg)}
.rk .m{z-index:2;top:2px;left:20px;width:52px;height:92px;transform:rotate(-3deg)}
.rk .m img{opacity:0;animation:rkF 12.5s infinite;animation-delay:calc(var(--i)*2.5s - .5s)}
@keyframes rkF{0%{opacity:0;transform:scale(1.08)}4%,20%{opacity:1;transform:scale(1)}24%,100%{opacity:0}}
.rk .pl{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 2px rgba(0,0,0,.15);z-index:1}
.rk .pl::after{content:"";position:absolute;left:6px;top:4px;border:4px solid transparent;border-left:6px solid #1B1240;border-right:0}
/* drawn fallback art shown until thumbnails arrive */
.rk .c::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 30% at 50% 72%,var(--blush),transparent 70%),radial-gradient(circle at 50% 38%,var(--moon) 0 9px,transparent 10px),linear-gradient(#3B2A94,#1E1450)}

/* ---------- daftar tautan ---------- */
.links{display:grid;gap:12px}
.lk{position:relative;display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:20px;
  background:var(--navy2);border:1.5px solid rgba(246,243,255,.09);box-shadow:var(--sh);
  transition:transform .22s var(--pop),box-shadow .22s,background .2s;text-align:left;width:100%;transform:rotate(var(--r,0deg))}
.lk:hover{transform:translate(-2px,-3px) rotate(-.5deg);box-shadow:9px 12px 0 rgba(8,3,36,.5);background:var(--navy3)}
.lk:nth-child(even):hover{transform:translate(-2px,-3px) rotate(.5deg)}
.lk:active{transform:translate(3px,4px);box-shadow:1px 2px 0 rgba(8,3,36,.5)}
.lk .ic{width:54px;height:54px;flex:none;border-radius:16px;overflow:hidden;background:var(--navy)}
.lk .ic svg{width:100%;height:100%;display:block;transition:transform .3s var(--pop)}
.lk:hover .ic svg{transform:scale(1.12) rotate(-6deg)}
.lk .tx{flex:1;min-width:0}
.lk b{display:block;font:600 16.5px/1.2 var(--display)}
.lk small{display:block;margin-top:2px;font:600 13px/1.35 var(--body);opacity:.62}
.go{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(246,243,255,.1);font:700 15px var(--display);transition:transform .2s,background .2s}
.lk:hover .go{transform:translateX(3px);background:var(--cream);color:var(--ink)}
.shake{animation:shake .45s ease}
@keyframes shake{20%{transform:rotate(-2deg) translateX(-4px)}40%{transform:rotate(2deg) translateX(4px)}60%{transform:rotate(-1deg) translateX(-2px)}80%{transform:rotate(1deg)}}

/* ---------- karya ---------- */
.reel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:6px 16px 18px;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.shot{flex:0 0 78%;scroll-snap-align:center;position:relative;display:block;padding:8px 8px 10px;background:var(--cream);color:var(--ink);border-radius:14px;
  box-shadow:var(--sh);transform:rotate(var(--r,-1.5deg));transition:transform .25s var(--pop)}
.shot:hover{transform:rotate(0) translateY(-3px)}
.shot .img{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--navy)}
.shot .img>svg,.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shot .play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(30,20,80,.82);display:grid;place-items:center;transition:transform .25s var(--pop)}
.shot:hover .play{transform:scale(1.15)}
.shot .play svg{width:16px;height:16px;margin-left:3px}
.shot .cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 4px 0}
.shot .cap b{font:700 15px/1.2 var(--display)}
.shot .cap span{font:17px/1 var(--hand);color:var(--unguPenuh);white-space:nowrap}
.shot.t{flex:0 0 40%;padding:6px 6px 8px}
.shot.t .img{aspect-ratio:9/16}
.shot.t .cap{padding:7px 3px 0}
.shot.t .cap b{font:600 12.5px/1.25 var(--display)}
.shot.t .play{width:38px;height:38px;margin:-19px 0 0 -19px}
/* skeleton while /api/portfolio loads */
.shot.sk .img{background:linear-gradient(100deg,#2E1F78 30%,#2A3B78 50%,#2E1F78 70%) 0 0/300% 100%;animation:sk 1.4s linear infinite}
.shot.sk .cap b{display:block;height:12px;width:70%;border-radius:6px;background:rgba(27,35,70,.12)}
@keyframes sk{to{background-position:-150% 0}}
@media (min-width:720px){.shot.t{flex-basis:27%}}

/* ---------- pemutar video: contoh karya diputar di halaman ini, tidak pindah ke YouTube ---------- */
.tv{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:22px 18px}
.tv[hidden]{display:none}
.tv-bg{position:absolute;inset:0;background:rgba(7,10,30,.88);opacity:0;transition:opacity .25s}
.tv.on .tv-bg{opacity:1}
.tv-box{position:relative;width:min(100%,600px);padding:8px 8px 10px;background:var(--cream);color:var(--ink);border-radius:16px;box-shadow:var(--sh-lg);
  transform:rotate(-2deg) scale(.84);opacity:0;transition:transform .34s var(--pop),opacity .2s}
.tv.on .tv-box{transform:rotate(-.6deg) scale(1);opacity:1}
.tv.tall .tv-box{width:min(100%,380px,calc((100vh - 170px) * .5625))}
@supports (height:100dvh){.tv.tall .tv-box{width:min(100%,380px,calc((100dvh - 170px) * .5625))}}
.tv-fr{position:relative;height:0;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#0B1230}
.tv.tall .tv-fr{padding-top:177.78%}
.tv-fr iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0}
.tv-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 4px 0}
.tv-cap b{font:700 15px/1.2 var(--display)}
.tv-cap a{font:17px/1 var(--hand);color:var(--unguPenuh);white-space:nowrap;text-decoration:none}
.tv-x{position:absolute;top:-17px;right:-9px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:var(--coral);color:#fff;
  font:700 26px/1 var(--display);padding:0 0 4px;box-shadow:3px 4px 0 rgba(8,3,36,.45);cursor:pointer}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq details{border-radius:18px;background:var(--navy2);border:1.5px solid rgba(246,243,255,.09);box-shadow:var(--sh);overflow:hidden}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;cursor:pointer;font:600 15.5px/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ungu);transition:transform .3s var(--pop),background .2s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2.6px;margin:-1.3px 0 0 -5.5px;border-radius:2px;background:var(--cream)}
.faq summary i::after{transform:rotate(90deg)}
.faq:not(.js) details[open] summary i,.faq.js details.on summary i{transform:rotate(135deg);background:var(--coral)}
.faq .ans{padding:0 16px 16px;font-size:14.5px;line-height:1.55;opacity:.82}
.faq .ans b{color:var(--sun);font-weight:700}

/* ---------- sosial + footer ---------- */
.social{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:6px 0 30px}
.social a{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--navy2);border:1.5px solid rgba(246,243,255,.1);
  box-shadow:4px 5px 0 rgba(8,3,36,.45);transition:transform .2s var(--pop),background .2s,color .2s}
.social a:hover{transform:translateY(-4px) rotate(-6deg);background:var(--cream);color:var(--ink)}
.social svg{width:22px;height:22px}
footer{text-align:center;font-size:13px;opacity:.6;line-height:1.6}
footer .mini{width:44px;height:44px;margin:0 auto 6px;display:block;animation:float 5s ease-in-out infinite}
footer .h{font:18px var(--hand);opacity:.9;color:var(--moon)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:60;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:10px;padding:12px 18px 13px 14px;border-radius:16px;background:var(--cream);color:var(--ink);
  font:600 14.5px/1.35 var(--display);box-shadow:var(--sh-lg);transform:translate(-50%,140%);transition:transform .45s var(--pop);pointer-events:none}
.toast.on{transform:translate(-50%,0)}
.toast .e{font-size:22px;line-height:1}

/* ---------- mata yang berkedip ---------- */
.blink{transform-box:fill-box;transform-origin:center;animation:blink 4.2s ease-in-out 2.4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.look{transition:transform .25s ease-out}

/* ---------- micro-animations ---------- */
/* titik "sedang buka" di samping label kelas */
.sec .live{display:inline-block;width:8px;height:8px;margin:0 7px 2px 0;border-radius:50%;vertical-align:middle;background:var(--mint);
  box-shadow:0 0 0 0 rgba(143,227,200,.6);animation:ping 1.8s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(143,227,200,0)}100%{box-shadow:0 0 0 0 rgba(143,227,200,0)}}
/* gelembung "hai!" di ikon DM */
.wa .ic{position:relative}
.hi{position:absolute;top:-12px;right:-16px;z-index:1;padding:3px 8px 5px;background:var(--cream);color:var(--ink);
  font:600 12px/1 var(--display);border-radius:10px 10px 10px 3px;box-shadow:2px 3px 0 rgba(8,3,36,.35);
  transform-origin:0 100%;animation:hi 4.5s var(--pop) 1.8s infinite both}
@keyframes hi{0%{transform:scale(0) rotate(-10deg)}8%,70%{transform:scale(1) rotate(6deg)}78%,100%{transform:scale(0) rotate(-10deg)}}
/* emoji toast bergoyang saat muncul */
.toast.on .e{display:inline-block;transform-origin:50% 10%;animation:ring 1.4s ease-in-out .15s}
@keyframes ring{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(14deg)}72%{transform:rotate(-12deg)}79%{transform:rotate(8deg)}86%{transform:rotate(-4deg)}}
/* garis tangan yang tergambar (judul halaman legal, 404) */
svg.draw{display:block;width:100%;height:30px;margin-top:6px;overflow:visible}
.draw .ln{fill:none;stroke:var(--ungu);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:drawln 3.6s cubic-bezier(.6,.05,.3,1) infinite}
@keyframes drawln{0%{stroke-dashoffset:1;opacity:1}70%{stroke-dashoffset:0;opacity:1}88%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
/* loader "chat → play" di pemutar video, tampil sampai iframe menggambar */
.tv-fr .tm{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:20px;background:radial-gradient(120% 120% at 70% 15%,#2A3A74,#1E1450 70%)}
.tm .tm-b{position:absolute;left:13px;top:19px;width:44px;height:30px;border-radius:13px 13px 13px 4px;background:var(--cream);display:flex;align-items:center;justify-content:center;gap:4px;transform-origin:20% 90%;animation:tmB 4.5s infinite}
.tm .tm-b i{width:6px;height:6px;border-radius:50%;background:var(--ink);animation:tmD 4.5s infinite}
.tm .tm-b i:nth-child(2){animation-delay:.14s}.tm .tm-b i:nth-child(3){animation-delay:.28s}
.tm .tm-p{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--sun);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(255,212,92,.5);animation:tmP 4.5s infinite}
.tm .tm-p svg{width:24px;height:24px;margin-left:2px}
.tm .tm-s{position:absolute;width:7px;height:7px;background:var(--mint);border-radius:2px;transform:rotate(45deg) scale(0);animation:tmS 4.5s infinite}
.tm .tm-s.s1{right:9px;top:10px}.tm .tm-s.s2{left:10px;bottom:11px;background:var(--coral);animation-delay:.12s}
@keyframes tmB{0%{opacity:0;transform:scale(.4)}7%,40%{opacity:1;transform:none}48%,100%{opacity:0;transform:scale(.3) rotate(-12deg)}}
@keyframes tmD{0%,8%{transform:none}13%{transform:translateY(-5px)}18%{transform:none}23%{transform:translateY(-5px)}28%,100%{transform:none}}
@keyframes tmP{0%,44%{opacity:0;transform:scale(.2) rotate(-40deg);box-shadow:0 0 0 0 rgba(255,212,92,.5)}54%{opacity:1;transform:scale(1.16)}60%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(255,212,92,.5)}78%{box-shadow:0 0 0 11px rgba(255,212,92,0)}90%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(255,212,92,0)}97%,100%{opacity:0;transform:scale(.6)}}
@keyframes tmS{0%,50%{transform:rotate(45deg) scale(0);opacity:1}60%{transform:rotate(45deg) scale(1.2);opacity:1}75%,100%{transform:rotate(135deg) scale(0);opacity:0}}
/* logo kecil di footer: digambar, wajah meletup, kilau muncul, lalu bergoyang pelan */
.loop .body{stroke-dasharray:1;stroke-dashoffset:1}
.loop.on .body{animation:loopdraw 1.5s cubic-bezier(.65,0,.35,1) .1s forwards}
@keyframes loopdraw{to{stroke-dashoffset:0}}
.loop .shine{opacity:0}
.loop.on .shine{animation:fade .5s ease 1.45s forwards}
@keyframes fade{to{opacity:.9}}
.loop .face{transform-box:fill-box;transform-origin:center;scale:0}
.loop.on .face{animation:facepop .55s var(--pop) 1.35s forwards}
@keyframes facepop{to{scale:1}}
.loop .wig{transform-origin:200px 200px}
.loop.on .wig{animation:wig 5s ease-in-out 2s infinite}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) translateY(-4px)}60%{transform:rotate(2deg) translateY(2px)}}
@media (prefers-reduced-motion:reduce){.loop .body{stroke-dashoffset:0}.loop .face{scale:1}.loop .shine{opacity:.9}}

/* ---------- tautan legal di footer ---------- */
footer .legal{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin:6px 0 4px;font:600 13px/1.4 var(--body)}
footer .legal a{text-decoration:underline;text-decoration-color:rgba(246,243,255,.35);text-underline-offset:3px}
footer .legal a:hover{text-decoration-color:var(--sun);color:var(--sun)}

@media (max-width:719px){.moon{display:none}}   /* bulan hanya tampil di desktop */
@media (min-width:720px){
  .moon{width:230px;height:230px;top:-46px;right:-36px}
  .wrap{padding-top:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition:none!important}
  .shoot{display:none}
  .rk .m img{animation:none}.rk .m img:first-child{opacity:1}
}

/* ---------- 404 ---------- */
.lost{text-align:center;padding-top:6vh}
.lost .big{font:700 92px/1 var(--display);letter-spacing:-.02em;text-shadow:0 6px 0 rgba(5,8,25,.35)}
.lost .big em{font-style:normal;display:inline-block;color:var(--sun);animation:float 4s ease-in-out infinite}
.lost .card{position:relative;margin:26px 4px 26px;padding:22px 20px 20px;border-radius:22px;background:var(--cream);color:var(--ink);transform:rotate(-1.2deg);box-shadow:var(--sh-lg);text-align:left}
.lost .card .tape{position:absolute;top:-11px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(140,107,255,.55);transform:rotate(3deg);border-radius:3px}
.lost .card .k{font:600 12px/1 var(--display);letter-spacing:.16em;color:var(--unguPenuh)}
.lost .card h1{font:700 24px/1.12 var(--display);margin:8px 0 6px}
.lost .card p{font-size:14.5px;line-height:1.45;opacity:.75}
.lost .card .note{position:absolute;right:14px;bottom:-30px;font:22px/1 var(--hand);color:var(--moon);transform:rotate(-4deg);white-space:nowrap}
.lost .btns{margin-top:46px}
.lost .ghost-ic{width:120px;height:120px;margin:0 auto 6px;display:block}

/* ---------- halaman legal (syarat, privasi, refund) ---------- */
.doc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}
.back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 9px 10px;border-radius:999px;background:rgba(246,243,255,.08);
  border:1.5px solid rgba(246,243,255,.14);font:600 14px/1 var(--display);transition:transform .2s var(--pop),background .2s}
.back:hover{transform:translateX(-3px);background:rgba(246,243,255,.14)}
.back svg{width:22px;height:22px}
.doc-head{text-align:center;margin-bottom:22px}
.doc-head .k{font:600 12px/1 var(--display);letter-spacing:.16em;color:var(--sun)}
.doc-head h1{font:700 32px/1.08 var(--display);margin-top:8px;text-shadow:0 4px 0 rgba(5,8,25,.35)}
.doc-head .upd{margin-top:8px;font:18px/1.2 var(--hand);color:var(--mint);transform:rotate(-2deg)}
.doc-head svg.draw{max-width:220px;margin:4px auto 0}
.toc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px}
.toc a{padding:6px 12px 7px;border-radius:999px;background:var(--navy2);border:1.5px solid rgba(246,243,255,.1);font:600 13px/1 var(--display);box-shadow:3px 4px 0 rgba(8,3,36,.4);transition:transform .2s var(--pop)}
.toc a:hover{transform:translateY(-2px) rotate(-2deg)}
.paper{position:relative;padding:24px 20px 22px;border-radius:22px;background:var(--cream);color:var(--ink);box-shadow:var(--sh-lg);margin:0 2px 30px}
.paper .tape{position:absolute;top:-11px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(140,107,255,.55);transform:rotate(3deg);border-radius:3px}
.paper h2{font:700 19px/1.2 var(--display);margin:22px 0 8px;scroll-margin-top:16px}
.paper>h2:first-child,.paper>.tape+h2{margin-top:4px}
.paper h2 .n{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;border-radius:50%;background:var(--ungu);color:var(--cream);font-size:14px;vertical-align:2px}
.paper p,.paper li{font-size:15px;line-height:1.6;color:rgba(27,35,70,.85)}
.paper p+p{margin-top:8px}
.paper ul,.paper ol{margin:8px 0 0 20px;display:grid;gap:5px}
.paper b{color:var(--ink)}
.paper a{color:var(--unguPenuh);text-decoration:underline;text-underline-offset:2px}
.paper .ph{background:rgba(255,212,92,.45);border-radius:4px;padding:0 4px;font-weight:700}
.paper .box{margin:14px 0 0;padding:14px 16px;border-radius:16px;background:rgba(143,227,200,.35);border:2px dashed rgba(27,35,70,.18)}
.paper .box.coral{background:rgba(255,107,87,.12)}
.doc-cta{margin:0 0 30px}