/* Ceria: undangan ulang tahun anak, gaya karakter. Bersih, lapang, pastel kalem; Poppins.
   Warna dari palet template (--t-*), aksen pastel tetap untuk tokoh dan balon.
   Kinerja: semua gerak memakai transform/opacity pada div; animasi diam di bagian yang tidak terlihat dihentikan (.cr-off). */
.tpl-ceria{
  --cr-cream:var(--t-paper,#FFFAF2);--cr-ink:var(--t-ink,#22364A);--cr-deep:var(--t-night,#2D6F93);--cr-sky:var(--t-tone,#5BB6DA);
  --cr-sun:var(--t-metal,#F5C04E);--cr-mist:var(--t-mist,#E3F2F8);--cr-grass:var(--t-grass,#8FCB76);
  --cr-coral:#F4937B;--cr-mint:#8FDAC2;--cr-lilac:#BDABEF;--cr-pink:#F6B5C5;
  --cr-hl-far:color-mix(in srgb,var(--cr-grass) 52%,#fff);--cr-hl-mid:color-mix(in srgb,var(--cr-grass) 78%,#fff);--cr-hl-near:var(--cr-grass);
  --cr-sea1:color-mix(in srgb,var(--cr-sky) 62%,#fff);--cr-sea2:var(--cr-sky);
  --bg:var(--cr-cream);--ink:var(--cr-ink);--accent:var(--cr-deep);--on-accent:#fff;--muted:color-mix(in srgb,var(--cr-ink) 64%,var(--cr-cream));--line:color-mix(in srgb,var(--cr-ink) 12%,transparent);
  --backdrop:linear-gradient(180deg,#DDEFF7,#F3F7EE);
  --cr-shadow:0 22px 44px -22px rgba(34,54,74,.32),0 2px 8px rgba(34,54,74,.05);
  font-family:'Poppins',system-ui,sans-serif;letter-spacing:-.005em;font-size:15px;line-height:1.7;
  background:var(--backdrop) fixed
}
.tpl-ceria .stage{background:var(--cr-cream);box-shadow:0 0 70px rgba(34,54,74,.16)}
.cr-defs{position:absolute;width:0;height:0;overflow:hidden}
.cr-t-sun{--c:#F7C957;--c2:#FFF4D6;--ct:#6A4A0B}
.cr-t-sky{--c:#70C2E3;--c2:#E3F4FB;--ct:#15496A}
.cr-t-coral{--c:#F4937B;--c2:#FDE8E1;--ct:#7A2F1E}
.cr-t-mint{--c:#8FDAC2;--c2:#E2F7EF;--ct:#1C5C48}
.cr-t-lilac{--c:#BDABEF;--c2:#EFEAFD;--ct:#45367A}

/* ---------- huruf & tombol ---------- */
.cr-kicker{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:#fff;color:var(--cr-deep);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.3;box-shadow:0 6px 16px -10px rgba(34,54,74,.4)}
.cr-kicker-light{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.cr-h2{font-size:clamp(30px,8.6vw,38px);font-weight:800;line-height:1.08;letter-spacing:-.035em;color:var(--cr-ink);margin-top:14px}
.cr-w{display:inline-block}
.cr-hl{position:relative;z-index:0}
.cr-hl::after{content:"";position:absolute;z-index:-1;left:-4px;right:-4px;bottom:.06em;height:.36em;border-radius:6px;background:color-mix(in srgb,var(--cr-sun) 70%,transparent)}
.cr-head{text-align:center;margin-bottom:30px}
.cr-lead{margin:14px auto 0;max-width:34ch;color:var(--muted);font-size:14.5px}
.cr-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:12px 26px;border-radius:999px;border:0;font:600 14.5px/1.2 'Poppins',system-ui,sans-serif;letter-spacing:0;text-decoration:none;cursor:pointer;transition:transform .25s cubic-bezier(.2,1.6,.4,1),box-shadow .25s,background .25s}
.cr-btn:active{transform:scale(.95)}
.cr-btn-main{background:var(--cr-deep);color:#fff;box-shadow:0 14px 28px -14px color-mix(in srgb,var(--cr-deep) 80%,#000),inset 0 -3px 0 rgba(0,0,0,.14)}
.cr-btn-line{background:#fff;color:var(--cr-deep);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cr-deep) 22%,transparent)}
.cr-btn-soft{min-height:42px;padding:9px 18px;font-size:13px;background:var(--c2,var(--cr-mist));color:var(--ct,var(--cr-deep))}

/* ---------- tokoh ---------- */
.cr-fig{position:relative;pointer-events:none}
.cr-boy,.cr-girl{aspect-ratio:200/314}
.cr-pup{aspect-ratio:220/236}
.cr-bob{position:relative;width:100%;height:100%;animation:crBob 3.2s ease-in-out infinite}
.cr-fig-svg{position:relative;width:100%;height:100%;display:block;overflow:visible}
.cr-arm{position:absolute;top:42.7%;width:15%;height:20.4%;transform-origin:50% 94%}
.cr-arm svg,.cr-tail svg{width:100%;height:100%;display:block;overflow:visible}
.cr-arm-r{left:59.5%;animation:crWaveR 1.5s ease-in-out infinite}
.cr-arm-l{left:25.5%;animation:crWaveL 1.5s ease-in-out infinite .2s}
.cr-tail{position:absolute;left:66%;top:60%;width:22.7%;height:25.4%;transform-origin:16% 93%;animation:crWag .5s ease-in-out infinite alternate}
.cr-eyes{transform-box:fill-box;transform-origin:center;animation:crBlink 4.8s infinite}
.cr-girl .cr-eyes{animation-delay:1.6s}.cr-pup .cr-eyes{animation-delay:3s}
.cr-ear{transform-box:fill-box;transform-origin:50% 6%;animation:crEar 2.6s ease-in-out infinite}
.cr-ear-r{animation-delay:-1.3s}
.cr-girl .cr-bob{animation-delay:-1.1s}.cr-pup .cr-bob{animation-duration:2.6s;animation-delay:-.5s}

/* ---------- langit: matahari, awan, balon, bendera, bukit ---------- */
.cr-sun{position:absolute;width:118px;aspect-ratio:1;pointer-events:none}
.cr-sun b{position:absolute;inset:23%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFF5CF,#F7C957 58%,#E6AC3B);box-shadow:0 0 44px 12px rgba(247,201,87,.32)}
.cr-rays{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(247,201,87,.36) 0 9deg,transparent 9deg 24deg);-webkit-mask:radial-gradient(circle,transparent 33%,#000 34%,#000 58%,transparent 71%);mask:radial-gradient(circle,transparent 33%,#000 34%,#000 58%,transparent 71%);animation:crSpin 46s linear infinite}
.cr-cloud{position:absolute;width:118px;pointer-events:none}
.cr-in{display:block;width:100%}
.cr-cloud .cr-in{animation:crDrift 16s ease-in-out infinite alternate}
.cr-cloud svg,.cr-balloon svg{width:100%;display:block;overflow:visible}
.cr-balloon{position:absolute;width:44px;pointer-events:none}
.cr-balloon .cr-in{transform-origin:50% 100%;animation:crFloat 5.6s ease-in-out infinite}
.cr-bunting{position:absolute;left:-2%;right:-2%;top:0;transform-origin:50% 0;animation:crSway 6s ease-in-out infinite;pointer-events:none}
.cr-bunting svg{width:100%;display:block}
.cr-hills{display:block;width:100%;height:100%}
.cr-hl-far{fill:var(--cr-hl-far)}.cr-hl-mid{fill:var(--cr-hl-mid)}.cr-hl-near{fill:var(--cr-hl-near)}
.cr-trunk{fill:#B98A63}.cr-leaf{fill:color-mix(in srgb,var(--cr-grass) 72%,#2F7A4E)}
.cr-fl0{fill:#fff}.cr-fl1{fill:var(--cr-sun)}.cr-fl2{fill:var(--cr-coral)}
.cr-sand{fill:#F3E0B9}.cr-isle{fill:var(--cr-grass)}

/* ---------- sampul ---------- */
.tpl-ceria .cr-cover{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:calc(30px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#D4ECF7 0%,var(--cr-mist) 46%,color-mix(in srgb,var(--cr-mist) 40%,#fff) 100%)}
.cr-cover-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cr-cover-sun{top:9%;right:-5%}
.cr-c1{top:14%;left:-6%;width:132px}.cr-c2{top:30%;right:4%;width:96px}.cr-c3{top:6%;left:46%;width:84px;opacity:.85}
.cr-c2 .cr-in{animation-duration:20s;animation-delay:-6s}.cr-c3 .cr-in{animation-duration:24s;animation-delay:-11s}
.cr-cover-bunting{top:-6px}
.cr-cover-hills{position:absolute;left:0;right:0;bottom:0;height:36%}
.cr-cover-top{position:relative;z-index:2;margin-top:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.cr-cover-name{font-size:clamp(58px,17vw,82px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--cr-ink);margin-top:8px;overflow-wrap:anywhere}
.cr-cover-age{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--cr-ink);box-shadow:var(--cr-shadow)}
.cr-cover-age svg{color:var(--cr-sun)}
.cr-cover-mid{position:relative;z-index:2;width:100%;flex:none;margin-top:2vh;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px}
.cr-cover-pup{width:28%;max-width:130px;margin-right:-6%;z-index:1}
.cr-cover-girl{width:24%;max-width:112px;margin-left:-5%;z-index:1}
.cr-cover-foot{position:relative;z-index:3;width:100%;max-width:360px;margin-top:14px;padding:16px 18px 14px;border-radius:28px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--cr-shadow);display:flex;flex-direction:column;align-items:center;gap:12px}
.tpl-ceria .guest{margin:0}
.tpl-ceria .guest small{font-size:10.5px;letter-spacing:.2em;font-weight:600;color:var(--muted);opacity:1}
.tpl-ceria .guest strong{font-family:'Poppins',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--cr-ink)}
.cr-cover-foot .cr-btn{width:100%}
.cr-cover-note{font-size:12px;color:var(--muted);margin-top:-2px}

/* balon foil angka umur: terbang naik dari balik bukit, lalu bergoyang; terbang pergi saat kado dibuka */
.cr-cover-stage{position:relative;z-index:2;flex:1 1 auto;width:100%;min-height:104px;container-type:size;pointer-events:none}
.cr-foils{position:absolute;inset:4% 0 3%;display:flex;justify-content:center;align-items:flex-end}
.cr-foil{position:relative;height:96px;height:min(100cqh,232px);aspect-ratio:120/236;margin:0 -2.5%;animation:crFoilIn 1.8s cubic-bezier(.18,.9,.24,1.1) both;animation-delay:calc(.2s + var(--i) * .16s)}
.cr-foil-star{height:70px;height:min(46cqh,104px);aspect-ratio:120/180;align-self:flex-start;margin-left:1%}
.cr-foil-bob{width:100%;height:100%;animation:crFoilBob 4.6s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.7s)}
.cr-foil-sway{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;animation:crFoilSway 6.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -2.3s)}
.cr-foil-num{width:100%;height:auto;flex:none;display:block;overflow:visible}
.cr-foil-str{flex:1 1 auto;width:16%;min-height:8px;display:block;margin-top:-3px}
.cr-glint{position:absolute;left:20%;top:14%;width:20%;aspect-ratio:1;opacity:0;animation:crTwinkle 3.4s ease-in-out infinite;animation-delay:calc(2s + var(--i) * 1.1s)}
.cr-glint::before,.cr-glint::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;border-radius:2px;background:linear-gradient(transparent,#fff 45%,#fff 55%,transparent)}
.cr-glint::after{transform:rotate(90deg)}
.cr-foil-tag{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%) rotate(-5deg);transform-origin:50% 0;white-space:nowrap;padding:4px 10px 4px 16px;border-radius:7px;background:#fff;color:var(--cr-deep);font-size:10.5px;font-weight:600;letter-spacing:.03em;line-height:1.4;box-shadow:0 8px 16px -10px rgba(34,54,74,.55)}
.cr-foil-tag::before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--cr-mist);box-shadow:inset 0 0 0 1px #B9C7D1}
.is-open .cr-foil{animation:crFoilAway 1.5s cubic-bezier(.55,0,.8,.3) forwards;animation-delay:calc(.3s + var(--i) * .1s)}

/* kado */
.cr-gift{position:relative;width:min(54%,250px);aspect-ratio:240/250;z-index:2;animation:crGiftIdle 3.4s ease-in-out infinite;transform-origin:50% 100%}
.cr-gift-base{position:absolute;left:0;right:0;bottom:0;height:64%}
.cr-gift-lid{position:absolute;left:0;right:0;top:0;height:40%;transform-origin:50% 92%;animation:crLidIdle 3.4s ease-in-out infinite}
.cr-gift-base svg,.cr-gift-lid svg{width:100%;height:100%;display:block;overflow:visible}
.cr-pops{position:absolute;inset:0}
.cr-pop{left:39%;top:30%;width:22%;opacity:0;transform:translateY(20%) scale(.3)}
.cr-pop .cr-in{animation:none}
.cr-glow{position:absolute;left:50%;top:42%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 40%,rgba(255,255,255,0) 70%);opacity:0;transform:scale(0);pointer-events:none}

/* membuka kado (tanpa JS pun jalan: dipicu kelas is-open dari inv.js) */
.is-open .cr-cover-top{opacity:0;transform:translateY(-14px) scale(.96);transition:opacity .35s,transform .35s}
.is-open .cr-cover-foot{opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s}
.is-open .cr-gift{animation:crShake .5s ease-in-out}
.is-open .cr-gift-lid{animation:crLidOff 1.15s cubic-bezier(.2,.75,.25,1) .42s forwards}
.is-open .cr-pop{animation:crRise 2.3s cubic-bezier(.25,.7,.3,1) forwards}
.is-open .cr-pop0{--dx:-150%;animation-delay:.5s}.is-open .cr-pop1{--dx:120%;animation-delay:.56s}.is-open .cr-pop2{--dx:-40%;animation-delay:.62s}
.is-open .cr-pop3{--dx:220%;animation-delay:.68s}.is-open .cr-pop4{--dx:-240%;animation-delay:.74s}.is-open .cr-pop5{--dx:40%;animation-delay:.8s}.is-open .cr-pop6{--dx:-90%;animation-delay:.86s}
.is-open .cr-glow{animation:crGlow 1.5s cubic-bezier(.3,.6,.3,1) .62s forwards}
.is-open .cr-cover .cr-fig{animation:crHop .42s cubic-bezier(.3,.7,.4,1) .45s 2 alternate}
.is-open .cr-cover{animation:crFade .7s ease 1.95s forwards}
.cr-cover.is-gone *{animation-play-state:paused!important}

/* ---------- beranda ---------- */
.cr-main{position:relative}
.cr-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(56px + env(safe-area-inset-top)) 20px 200px;overflow:hidden;
  background:linear-gradient(180deg,#D4ECF7 0%,var(--cr-mist) 42%,color-mix(in srgb,var(--cr-grass) 14%,#fff) 100%)}
.cr-hero-sky{position:absolute;inset:0;pointer-events:none}
.cr-hc1{top:9%;left:-8%;width:130px}.cr-hc2{top:24%;right:-6%;width:110px}.cr-hc3{top:56%;left:-4%;width:86px;opacity:.8}
.cr-hc2 .cr-in{animation-duration:19s;animation-delay:-5s}.cr-hc3 .cr-in{animation-duration:23s;animation-delay:-9s}
.cr-hb1{top:15%;right:9%;width:40px}.cr-hb2{top:33%;left:5%;width:36px}.cr-hb3{top:45%;right:3%;width:32px}.cr-hb4{top:6%;left:20%;width:28px;opacity:.9}
.cr-hb2 .cr-in{animation-delay:-1.8s;animation-duration:6.4s}.cr-hb3 .cr-in{animation-delay:-3.2s;animation-duration:5s}.cr-hb4 .cr-in{animation-delay:-2.4s;animation-duration:7s}
.cr-hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.cr-name{font-size:clamp(60px,18vw,88px);font-weight:800;letter-spacing:-.05em;line-height:.98;color:var(--cr-ink);margin-top:12px;overflow-wrap:anywhere}
.cr-ch{display:inline-block}
.cr-port{position:relative;width:min(76vw,306px);aspect-ratio:1;margin:16px auto 10px}
.cr-port::before{content:"";position:absolute;inset:10.5%;border-radius:50%;background:conic-gradient(from 200deg,var(--cr-sun),var(--cr-coral),var(--cr-lilac),var(--cr-sky),var(--cr-mint),var(--cr-sun));box-shadow:var(--cr-shadow)}
.cr-port-ring{position:absolute;inset:0;animation:crSpin 30s linear infinite}
.cr-port-ring svg{width:100%;height:100%;display:block;overflow:visible}
.cr-port-ring text{font:600 10.6px 'Poppins',sans-serif;fill:var(--cr-deep);letter-spacing:2px}
.cr-port-photo{position:absolute;inset:13%;border-radius:50%;overflow:hidden;border:6px solid #fff;background:var(--cr-mist)}
.cr-port-photo img{width:100%;height:100%;object-fit:cover}
.cr-port-mono{display:grid;place-items:center;width:100%;height:100%;font-size:96px;font-weight:800;color:var(--cr-sky)}
.cr-age{position:absolute;right:0;bottom:5%;width:31%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;border:5px solid #fff;
  background:radial-gradient(circle at 36% 30%,#FFEDB8,var(--cr-sun) 58%,#DDA132);box-shadow:0 16px 28px -14px rgba(200,140,30,.75),inset 0 -6px 12px rgba(150,90,10,.12)}
.cr-age b{font-size:clamp(40px,11.5vw,50px);font-weight:800;line-height:.95;letter-spacing:-.04em;text-shadow:0 3px 0 #D2952B,0 7px 14px rgba(150,90,10,.28)}
.cr-age span{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-top:1px}
.cr-hero-date{font-size:14px;font-weight:600;color:var(--cr-ink);padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.75)}
.cr-hero-ground{position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none}
.cr-hero-hills{position:absolute;left:0;right:0;bottom:0;height:160px}
.cr-hero-boy{position:absolute;left:6%;bottom:92px;width:23%;max-width:108px;z-index:2}
.cr-hero-pup{position:absolute;right:6%;bottom:84px;width:26%;max-width:122px;z-index:2}

/* ---------- bagian umum ---------- */
.cr-sec{position:relative;padding:64px 22px}

/* hitung mundur di padang rumput */
.cr-count{background:var(--cr-hl-near);padding:6px 18px 74px}
.cr-ticket{position:relative;display:grid;grid-template-columns:96px 1fr;gap:0;border-radius:28px;background:var(--cr-deep);color:#fff;overflow:hidden;box-shadow:0 24px 40px -22px rgba(20,50,70,.6)}
.cr-ticket::before,.cr-ticket::after{content:"";position:absolute;left:96px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--cr-hl-near)}
.cr-ticket::before{top:-10px}.cr-ticket::after{bottom:-10px}
.cr-cal{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:16px 6px;background:#fff;color:var(--cr-ink);border-right:2px dashed color-mix(in srgb,var(--cr-deep) 25%,#fff)}
.cr-cal i{position:absolute;top:0;left:0;right:0;height:9px;background:var(--cr-coral)}
.cr-cal span{font-size:12px;font-weight:700;color:var(--cr-coral);letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.cr-cal b{font-size:36px;font-weight:800;line-height:1;letter-spacing:-.04em}
.cr-cal small{font-size:11px;font-weight:500;color:var(--muted)}
.cr-ticket-main{padding:16px 14px 16px 18px}
.cr-ticket-t{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.cr-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.cr-cd div{display:flex;flex-direction:column;align-items:center;padding:8px 2px 6px;border-radius:14px;background:rgba(255,255,255,.12)}
.cr-cd b{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cr-cd span{font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.8}

/* sambutan */
.cr-hello{background:var(--cr-cream);padding-top:84px}
.cr-hello-card{position:relative;padding:44px 24px 28px;border-radius:32px;background:#fff;box-shadow:var(--cr-shadow);text-align:center}
.cr-hello-girl{position:absolute!important;left:14px;top:-104px;width:96px}
.cr-bubble{position:absolute;left:104px;top:-74px;padding:8px 16px;border-radius:18px 18px 18px 4px;background:var(--cr-coral);color:#fff;font-weight:700;font-size:15px;transform-origin:0 100%;box-shadow:0 10px 20px -12px rgba(214,108,85,.8)}
.cr-greet{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--cr-ink)}
.cr-intro{margin-top:12px;color:var(--muted);font-size:14.5px}
.cr-quote{position:relative;margin-top:22px;padding:22px 20px 18px;border-radius:22px;background:var(--cr-mist)}
.cr-quote::before{content:"\201C";position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:var(--cr-sun);color:#fff;font:800 34px/56px 'Poppins',sans-serif}
.cr-quote p{font-style:italic;font-size:14.5px;color:var(--cr-ink);line-height:1.75}
.cr-quote cite{display:block;margin-top:10px;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cr-deep)}

/* kenalan */
.cr-kid{background:var(--cr-cream);padding-top:30px;padding-bottom:100px}
.cr-kidcard{padding:26px 22px 26px;border-radius:34px;background:#fff;box-shadow:var(--cr-shadow);text-align:center}
.cr-kidpic{position:relative;width:min(78%,290px);aspect-ratio:4/5;margin:0 auto 22px;padding:8px;border-radius:28px;background:#fff;rotate:-2.5deg;box-shadow:0 18px 34px -18px rgba(34,54,74,.45)}
.cr-kidpic img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.cr-tape{position:absolute;left:50%;top:-12px;width:78px;height:24px;margin-left:-39px;background:color-mix(in srgb,var(--c,var(--cr-sun)) 72%,transparent);rotate:-4deg;border-radius:3px;z-index:2;box-shadow:0 2px 4px rgba(0,0,0,.06)}
.cr-kidname{font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--cr-ink)}
.cr-kidfull{margin-top:4px;font-weight:500;color:var(--muted)}
.cr-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.cr-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--c2);color:var(--ct);font-size:12.5px;font-weight:600}
.cr-chip svg{width:15px;height:15px}
.cr-parents{margin-top:18px;font-size:14px;color:var(--muted);line-height:1.6}
.cr-parents b{color:var(--cr-ink);font-weight:600}
.cr-ig{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;color:var(--cr-deep);text-decoration:none;padding:7px 14px;border-radius:999px;background:var(--cr-mist)}

/* pembatas mengalir berlapis (bukit, pita laut, buih putih) seperti contoh situs; lapis belakang bergoyang pelan */
.cr-div{position:absolute;left:0;right:0;top:-69px;height:70px;pointer-events:none;z-index:1;overflow:hidden}
.cr-div-bottom{top:auto;bottom:-1px}
.cr-dv-l{position:absolute;top:0;bottom:0;left:0;width:100%}
.cr-dv-l svg{width:100%;height:100%;display:block}
.cr-dv-sway{left:-12%;width:124%;animation:crDvSway 9s ease-in-out infinite alternate}
.cr-dv-sway+.cr-dv-sway{animation-duration:12s;animation-delay:-4s}
.cr-dv-hill2{fill:var(--cr-hl-mid)}.cr-dv-hill1{fill:var(--cr-cream)}
.cr-dv-sea2{fill:color-mix(in srgb,var(--cr-sky) 34%,var(--cr-mist))}.cr-dv-sea1{fill:var(--cr-mist)}
.cr-dv-back2{fill:rgba(255,255,255,.7)}.cr-dv-back1{fill:var(--cr-cream)}
.cr-dv-oc3{fill:color-mix(in srgb,#8FD0E8 30%,#fff)}.cr-dv-oc2{fill:color-mix(in srgb,#8FD0E8 62%,#fff)}.cr-dv-oc1{fill:#8FD0E8}
.cr-dv-crest{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.85;vector-effect:non-scaling-stroke}
/* gelombang pemisah (bergerak menyamping, transform pada div lebar) */
.cr-wave{position:absolute;left:0;right:0;top:-29px;height:30px;overflow:hidden;pointer-events:none}
.cr-wave i{position:absolute;left:0;top:0;width:200%;height:100%;background-repeat:repeat-x;background-size:240px 30px;animation:crWaveMove 14s linear infinite}

/* acara */
.cr-party{background:var(--cr-mist);padding-top:44px;padding-bottom:124px}
.cr-party-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cr-pc1{top:6%;right:-8%;width:120px}.cr-pc2{top:34%;left:-10%;width:100px;opacity:.85}
.cr-party .cr-head,.cr-events,.cr-actions,.cr-cakewrap{position:relative;z-index:1}
.cr-cakewrap{display:flex;justify-content:center;margin:-6px 0 22px}
.cr-cake{position:relative;width:min(56%,214px);aspect-ratio:200/220}
.cr-cake svg{width:100%;height:100%;display:block;overflow:visible}
.cr-flame{position:absolute;left:50%;top:var(--ft,7%);width:7.5%;aspect-ratio:.62;margin-left:-3.75%;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 72%,#fff 0 16%,#FFE07A 32%,#F6A23A 74%);transform-origin:50% 92%;animation:crFlicker .8s ease-in-out infinite alternate;box-shadow:0 0 22px 8px rgba(255,200,90,.42)}
.cr-events{display:grid;gap:16px}
.cr-event{position:relative;padding:26px 22px 22px;border-radius:30px;background:var(--c);color:var(--ct);overflow:hidden;box-shadow:0 22px 36px -24px color-mix(in srgb,var(--c) 90%,#000)}
.cr-event::after{content:"";position:absolute;right:-50px;bottom:-60px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.16);pointer-events:none}
.cr-event-no{position:absolute;right:20px;top:14px;font-size:44px;font-weight:800;letter-spacing:-.04em;color:rgba(255,255,255,.5);line-height:1}
.cr-event h3{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.15;padding-right:56px}
.cr-event-when{display:flex;flex-direction:column;margin-top:12px;font-size:14px;line-height:1.5}
.cr-event-when b{font-weight:700}
.cr-event-where{display:flex;gap:8px;margin-top:12px;font-size:13.5px;line-height:1.55}
.cr-event-where svg{flex:none;margin-top:2px}
.cr-event-where b{font-weight:700}
.cr-map{margin-top:14px;position:relative;z-index:1}
.cr-map summary{cursor:pointer;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px;list-style:none}
.cr-map summary::-webkit-details-marker{display:none}
.tpl-ceria .cr-map .event-map{border-radius:18px;border:3px solid #fff;margin:12px 0 0;max-width:none}
.cr-go{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:10px 18px;border-radius:999px;background:#fff;color:var(--ct);font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 8px 18px -12px rgba(0,0,0,.4)}
.cr-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px}

/* cerita: jalan berkelok */
.cr-story{background:var(--cr-cream);padding-top:34px;padding-bottom:40px}
.cr-road{position:relative;height:calc(var(--n) * 196px);margin:0 -6px}
.cr-road-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cr-road-base{fill:none;stroke:#E4EDF2;stroke-width:34;stroke-linecap:round}
.cr-road-line{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:9 11;stroke-linecap:round}
.cr-car{position:absolute;left:0;top:0;width:30px;z-index:1;will-change:transform;transform:translate(-50%,-50%)}
.cr-car svg{width:100%;display:block}
.cr-stop{position:absolute;left:0;right:0;top:var(--y);transform:translateY(-50%);z-index:2}
.cr-stop-dot{position:absolute;left:var(--x);top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;border-radius:50%;background:var(--c);color:var(--ct);border:4px solid #fff;font-size:11px;font-weight:700;line-height:1.15;text-align:center;padding:4px;box-shadow:0 12px 22px -12px rgba(34,54,74,.5);transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.cr-stop.is-on .cr-stop-dot{transform:scale(1.12)}
.cr-stop-dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--c);opacity:0;transform:scale(.8)}
.cr-stop.is-on .cr-stop-dot::after{animation:crPing 1.4s ease-out 1}
.cr-stop-card{padding:14px 16px;border-radius:22px;background:#fff;box-shadow:var(--cr-shadow);transition:transform .6s cubic-bezier(.2,1.4,.4,1),opacity .6s}
.cr-stop.is-l .cr-stop-card{margin-left:calc(var(--x) + 44px);margin-right:6px;text-align:left}
.cr-stop.is-r .cr-stop-card{margin-right:calc(100% - var(--x) + 44px);margin-left:6px;text-align:right}
.cr-g .cr-stop:not(.is-on) .cr-stop-card{opacity:.35;transform:translateY(10px) scale(.97)}
.cr-stop-card h3{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--cr-ink)}
.cr-stop-card p{font-size:13px;color:var(--muted);line-height:1.55;margin-top:4px}

/* video dalam TV mainan */
.cr-tv{background:var(--cr-cream);padding-top:30px}
.cr-reel{gap:20px}
.cr-tvbox{position:relative;width:min(80%,300px);padding:16px 16px 50px;border-radius:36px;background:radial-gradient(circle at 30% 20%,#FFC9B7,var(--cr-coral) 60%,#D9705A);box-shadow:var(--cr-shadow)}
.cr-tvbox .reel-frame{width:100%;border-radius:22px}
.cr-ant{position:absolute;top:-34px;width:3px;height:40px;background:#9AA8B3;border-radius:2px;transform-origin:50% 100%}
.cr-ant::before{content:"";position:absolute;top:-6px;left:-4.5px;width:12px;height:12px;border-radius:50%;background:var(--cr-sun)}
.cr-ant-l{left:38%;rotate:-24deg}.cr-ant-r{left:60%;rotate:24deg}
.cr-knob{position:absolute;bottom:14px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.1)}
.cr-knob:nth-of-type(3){left:calc(50% - 30px)}.cr-knob:nth-of-type(4){left:calc(50% + 8px);background:var(--cr-sun)}
.tpl-ceria .reel-video{filter:none}

/* galeri polaroid */
.cr-gal{background:var(--cr-cream)}
.cr-pols{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;padding:8px 4px 0}
.tpl-ceria .cr-pol{position:relative;aspect-ratio:auto;grid-column:auto;padding:8px 8px 30px;border-radius:8px;background:#fff;overflow:visible;box-shadow:0 16px 28px -18px rgba(34,54,74,.45);rotate:-3deg;transition:scale .3s}
.tpl-ceria .cr-pol:nth-child(even){rotate:2.6deg;margin-top:26px}
.tpl-ceria .cr-pol:nth-child(3n){rotate:-1.4deg}
.tpl-ceria .cr-pol img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;transition:none}
.tpl-ceria .cr-pol:active{scale:.97}
.cr-pol .cr-tape{top:-11px;width:62px;margin-left:-31px}

/* kado */
.cr-gifts{background:var(--cr-cream);padding-bottom:104px}
.cr-giftlist{display:grid;gap:16px}
.cr-giftcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:24px 84px 22px 22px;border-radius:28px;background:#fff;box-shadow:var(--cr-shadow);overflow:hidden;text-align:left}
.cr-giftic{position:absolute;right:18px;top:18px;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--c2);color:var(--ct)}
.cr-giftic svg{width:24px;height:24px}
.cr-giftbank{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ct)}
.cr-giftno{font-size:24px;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--cr-ink)}
.cr-giftholder,.cr-giftaddr{font-size:13.5px;color:var(--muted)}
.cr-giftcard .cr-btn{margin-top:12px}

/* buku tamu di tepi laut */
.cr-rsvp{padding-top:50px;background:linear-gradient(180deg,#8FD0E8 0%,var(--cr-sky) 70%,color-mix(in srgb,var(--cr-sky) 80%,var(--cr-deep)) 100%);color:#fff;padding-bottom:70px}
.cr-head-light .cr-h2{color:#fff}
.cr-head-light .cr-hl::after{background:color-mix(in srgb,var(--cr-sun) 85%,transparent)}
.cr-form{padding:24px 20px 22px;border-radius:30px;background:#fff;box-shadow:0 26px 44px -26px rgba(20,60,90,.6);max-width:none}
.tpl-ceria .rsvp-form label,.tpl-ceria .rsvp-form legend{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.tpl-ceria .rsvp-form input[type=text],.tpl-ceria .rsvp-form select,.tpl-ceria .rsvp-form textarea{border-radius:16px;background:#F3F8FA;border:1.5px solid #E1ECF1;padding:13px 15px;font-family:'Poppins',sans-serif;font-size:15px;color:var(--cr-ink)}
.tpl-ceria .rsvp-form input:focus,.tpl-ceria .rsvp-form select:focus,.tpl-ceria .rsvp-form textarea:focus{outline:none;border-color:var(--cr-sky);background:#fff}
.tpl-ceria .seg span{border-radius:999px;border:1.5px solid #E1ECF1;font-weight:600;font-size:12.5px;min-height:44px;color:var(--cr-ink)}
.tpl-ceria .seg input:checked+span{background:var(--cr-deep);border-color:var(--cr-deep);color:#fff}
.cr-form .cr-btn{width:100%;margin-top:4px}
.tpl-ceria .form-error{color:#D9534F}
.tpl-ceria .cr-counts{color:rgba(255,255,255,.85);margin:26px 0 16px}
.tpl-ceria .cr-counts b{color:#fff;font-family:'Poppins',sans-serif;font-weight:700}
.tpl-ceria .cr-wishes{max-width:none}
.tpl-ceria .cr-wishes li{border-radius:22px 22px 22px 6px;background:#fff;color:var(--cr-ink);padding:14px 16px;box-shadow:0 10px 20px -16px rgba(20,60,90,.6)}
.tpl-ceria .cr-wishes .tag{border-radius:999px;border:0;background:var(--cr-mist);color:var(--cr-deep);font-weight:600}
.tpl-ceria .cr-wishes .tag-tidak,.tpl-ceria .cr-wishes .tag-ragu{background:#F2F2F2;color:#6B7A86}
.tpl-ceria .wishes-empty{color:rgba(255,255,255,.85)}

/* kamera (paket Luxury) di atas laut */
.cr-camwrap{background:color-mix(in srgb,var(--cr-sky) 80%,var(--cr-deep));color:#fff;--ink:#fff;--muted:rgba(255,255,255,.82)}
.cr-camwrap .sec{padding-top:40px}
.cr-camwrap .sec-head h2{font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-.03em;font-size:30px}
.cr-camwrap .eyebrow{font-weight:600}
.cr-camwrap .btn{border-radius:999px;font:600 14px/1.2 'Poppins',system-ui,sans-serif;letter-spacing:0;text-transform:none;min-height:52px}
.cr-camwrap .btn-primary{background:#fff;color:var(--cr-deep);box-shadow:0 14px 28px -16px rgba(10,40,60,.6)}
.cr-camwrap .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}

/* penutup: pulau dan pantai */
.cr-end{padding:0;background:var(--cr-cream)}
.cr-end-sea{position:relative;aspect-ratio:480/400;background:linear-gradient(180deg,color-mix(in srgb,var(--cr-sky) 80%,var(--cr-deep)) 0%,var(--cr-sky) 40%,#A9DDF0 100%);overflow:hidden}
.cr-end-sea::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-2px;height:32%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,#F6E6C4,var(--cr-cream) 80%)}
.cr-isles{position:absolute;left:0;right:0;top:22%;width:100%;height:auto}
.cr-boat{position:absolute;left:8%;top:31%;width:13%;animation:crBoat 4.4s ease-in-out infinite;transform-origin:50% 90%}
.cr-boat svg{width:100%;display:block}
.cr-end-cast{position:absolute;left:0;right:0;bottom:6%;z-index:1;display:flex;justify-content:center;align-items:flex-end}
.cr-end-boy{width:24%;max-width:112px;margin-right:-4%}
.cr-end-pup{width:27%;max-width:126px;z-index:1}
.cr-end-girl{width:22%;max-width:104px;margin-left:-4%}
.cr-end-text{padding:16px 26px calc(120px + env(safe-area-inset-bottom));text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.cr-end-msg{max-width:32ch;font-size:15px;color:var(--cr-ink)}
.cr-end-salam{font-weight:700;font-size:17px;color:var(--cr-deep)}
.cr-end .cr-kicker{margin-top:10px}
.cr-end-name{font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--cr-ink);display:inline-flex;align-items:flex-start;gap:6px}
.cr-end-name i{font-style:normal;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cr-sun);color:#fff;font-size:22px;letter-spacing:-.03em;margin-top:-4px}
.tpl-ceria .credit{margin-top:24px;font-size:12px;color:var(--muted)}

/* hiu kecil melompat membentuk pelangi (posisi digerakkan ceria.js), buih dan riak saat keluar-masuk air */
.cr-shark-zone{position:absolute;left:0;right:0;top:4%;height:38%;pointer-events:none}
.cr-rainbow{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cr-rainbow path{fill:none;stroke-width:4.500;stroke-linecap:round;transition:opacity .9s ease}
.cr-shark{position:absolute;left:0;top:0;width:clamp(62px,17%,82px);opacity:0;will-change:transform,opacity}
.cr-shark svg{width:100%;display:block;overflow:visible}
.cr-shark-flip{animation:crSwim .32s ease-in-out infinite alternate}
.cr-drop{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 45%,#CFEAF6);animation:crDrop .95s cubic-bezier(.2,.7,.4,1) forwards}
.cr-crown{position:absolute;left:0;top:0;width:58px;margin:-36px 0 0 -29px;transform-origin:50% 100%;animation:crCrown .85s cubic-bezier(.2,.8,.3,1) forwards}
.cr-crown svg{width:100%;display:block}
.cr-ripple{position:absolute;left:0;top:0;width:58px;height:14px;margin:-7px 0 0 -29px;border-radius:50%;border:2.5px solid rgba(255,255,255,.9);animation:crRipple 1.05s ease-out forwards}
.cr-ripple2{width:84px;height:18px;margin:-9px 0 0 -42px;border-width:1.5px}
.cr-glide{position:absolute;height:3px;border-radius:3px;background:rgba(255,255,255,.6);animation:crGlide 7s ease-in-out infinite alternate}
.cr-g1{top:12%;left:10%;width:44px}.cr-g2{top:27%;left:64%;width:58px;animation-delay:-3s}.cr-g3{top:41%;left:34%;width:34px;animation-delay:-5s}

/* ---------- dok, musik, muncul saat digulir ---------- */
.tpl-ceria .dock{bottom:calc(10px + env(safe-area-inset-bottom));width:min(calc(100% - 24px),456px);padding:6px;border-radius:26px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 36px -18px rgba(34,54,74,.45);transform:translate(-50%,160%)}
.tpl-ceria.is-open .dock{transform:translate(-50%,0)}
.tpl-ceria .dock a{border-radius:18px;font-weight:500;font-size:10.5px;color:var(--muted);padding:6px 4px;flex:1;min-width:0;transition:background .3s,color .3s}
.tpl-ceria .dock a.is-current{background:var(--cr-mist);color:var(--cr-deep)}
.tpl-ceria .music-btn{bottom:calc(84px + env(safe-area-inset-bottom));background:#fff;border:0;color:var(--cr-deep);box-shadow:0 12px 24px -14px rgba(34,54,74,.55)}
.tpl-ceria .toast{background:var(--cr-ink);color:#fff;bottom:calc(96px + env(safe-area-inset-bottom))}
.cr-confetti{position:fixed;top:0;left:50%;width:min(100%,480px);height:100vh;height:100dvh;transform:translateX(-50%);z-index:70;pointer-events:none}
.js .tpl-ceria [data-rv]{transition:opacity .8s ease,transform 1s cubic-bezier(.2,1.25,.35,1)}
.js .tpl-ceria [data-rv]:not(.in){transform:translateY(28px) scale(.97)}
.cr-off *{animation-play-state:paused!important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- gerak diam ---------- */
@keyframes crSpin{to{transform:rotate(360deg)}}
@keyframes crBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@keyframes crWaveR{0%,100%{transform:rotate(18deg)}50%{transform:rotate(52deg)}}
@keyframes crWaveL{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(-52deg)}}
@keyframes crWag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes crBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes crEar{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
@keyframes crDrift{from{transform:translateX(0)}to{transform:translateX(26px)}}
@keyframes crFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes crSway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
@keyframes crGiftIdle{0%,62%,100%{transform:none}68%{transform:rotate(-3deg) scaleY(.97)}74%{transform:rotate(3deg)}80%{transform:rotate(-2deg)}86%{transform:none}}
@keyframes crLidIdle{0%,62%,100%{transform:none}70%{transform:translateY(-7%) rotate(-3deg)}78%{transform:translateY(-3%) rotate(2deg)}86%{transform:none}}
@keyframes crShake{0%,100%{transform:none}20%{transform:rotate(-5deg) scale(1.03,.96)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg) scale(.98,1.03)}}
@keyframes crLidOff{0%{transform:none;opacity:1}30%{transform:translate(4%,-60%) rotate(-10deg);opacity:1}100%{transform:translate(70%,-330%) rotate(42deg);opacity:0}}
@keyframes crRise{0%{opacity:0;transform:translate(0,20%) scale(.3)}12%{opacity:1}100%{opacity:1;transform:translate(var(--dx,0),-170vh) scale(1.15)}}
@keyframes crGlow{0%{opacity:0;transform:scale(0)}35%{opacity:.95}100%{opacity:0;transform:scale(70)}}
@keyframes crHop{to{transform:translateY(-16%)}}
@keyframes crFade{to{opacity:0}}
@keyframes crFlicker{0%{transform:scale(1,1) rotate(-3deg)}100%{transform:scale(.9,1.12) rotate(3deg)}}
@keyframes crWaveMove{to{transform:translateX(-240px)}}
@keyframes crBoat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8%) rotate(4deg)}}
@keyframes crDvSway{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@keyframes crFoilIn{0%{transform:translateY(120vh) rotate(-12deg);opacity:0}10%{opacity:1}100%{transform:none;opacity:1}}
@keyframes crFoilBob{from{transform:translateY(0)}to{transform:translateY(-5%)}}
@keyframes crFoilSway{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes crFoilAway{to{transform:translateY(-140vh) rotate(14deg)}}
@keyframes crTwinkle{0%,68%,100%{transform:scale(0) rotate(0);opacity:0}80%{transform:scale(1) rotate(45deg);opacity:1}90%{transform:scale(.35) rotate(90deg);opacity:.5}}
@keyframes crSwim{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes crDrop{0%{transform:translate(0,0) scale(1);opacity:1}55%{transform:translate(var(--dx),var(--dy)) scale(.9);opacity:1}100%{transform:translate(calc(var(--dx) * 1.4),calc(var(--dy) * -.1)) scale(.5);opacity:0}}
@keyframes crCrown{0%{transform:scale(.6,.1);opacity:1}35%{transform:scale(1,1);opacity:1}100%{transform:scale(1.35,.15);opacity:0}}
@keyframes crRipple{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes crGlide{from{transform:translateX(0);opacity:.25}to{transform:translateX(26px);opacity:.75}}
@keyframes crPing{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}

@media (prefers-reduced-motion:reduce){
  .tpl-ceria *,.tpl-ceria *::before,.tpl-ceria *::after{animation:none!important;transition:none!important}
  .is-open .cr-cover{opacity:0}
  .cr-shark-zone{display:none}
}
@media (max-height:700px){
  .cr-port{width:min(66vw,256px)}
}
.cr-shark.is-left .cr-shark-flip{scale:-1 1}

/* Sampul selalu muat satu layar, juga di iPhone dengan bilah Safari (~550-610px tinggi terlihat):
   ukuran tiap blok mengikuti tinggi layar (dvh), balon angka mendapat sisa ruang di atas dan tidak pernah terpotong.
   Isi disusun dari atas (flex-start), jadi kalau layar sangat pendek, yang terdorong keluar adalah bagian bawah, bukan balon. */
.tpl-ceria .cr-cover{justify-content:flex-start;padding:calc(clamp(8px,1.6dvh,26px) + env(safe-area-inset-top)) 20px calc(clamp(10px,2dvh,20px) + env(safe-area-inset-bottom))}
.cr-cover-stage{min-height:clamp(96px,19dvh,150px)}
.cr-foils{inset:8px 0 28px}
.cr-foil{height:min(calc(93cqh - 36px),250px);aspect-ratio:120/206}
.cr-foil-tag{bottom:-22px}
.cr-cover-top{gap:clamp(2px,.7dvh,6px)}
.cr-cover-name{font-size:clamp(42px,min(17vw,8.8dvh),82px);margin-top:clamp(2px,.9dvh,8px)}
.cr-cover-age{padding:clamp(5px,1dvh,8px) 16px}
.cr-cover-mid{margin-top:clamp(4px,1.4dvh,24px)}
.cr-gift{width:min(54%,250px,21dvh)}
.cr-cover-pup{width:min(28%,13dvh)}
.cr-cover-girl{width:min(24%,11.2dvh)}
.cr-cover-foot{margin-top:clamp(8px,1.6dvh,14px);padding:clamp(10px,1.7dvh,16px) 18px clamp(10px,1.5dvh,14px);gap:clamp(6px,1.2dvh,12px)}
.tpl-ceria .cr-cover .guest strong{font-size:clamp(16px,2.5dvh,19px)}
.cr-cover-foot .cr-btn{min-height:clamp(44px,6.4dvh,52px)}
.cr-cover-note{font-size:clamp(11px,1.8dvh,12px)}