:root{--bg:#FFF2F8;--pink:#F0338A;--pink2:#FF78B4;--soft:#FFD9EA;--lil:#CDB4FF;--peach:#FFD2BE;--mint:#B9F0DC;--plum:#4B1F3F;--mute:#8E6283;--line:#FFC4DE;--card:rgba(255,255,255,.84);--ok:#14996B;
--head:'Fredoka',system-ui,sans-serif;--body:'Nunito',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#FFE3F0 0,#FFF2F8 38%,#F7ECFF 100%) fixed;color:var(--plum);font:500 16px/1.6 var(--body);overflow-x:hidden}
a{color:inherit}:focus-visible{outline:3px solid var(--lil);outline-offset:2px}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--head);line-height:1.1}
section{padding:54px 0}
h2{font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:700}h2::after{content:" ✦";color:var(--pink2)}
.sub{color:var(--mute);margin:8px 0 26px;font-weight:600}
/* latar */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.b1{width:480px;height:480px;background:#FFA6CF;top:-140px;right:-100px;animation:dr 14s ease-in-out infinite alternate}
.b2{width:420px;height:420px;background:var(--lil);top:38%;left:-160px;animation:dr 18s ease-in-out infinite alternate-reverse}
.b3{width:420px;height:420px;background:var(--peach);bottom:-140px;right:15%;animation:dr 16s ease-in-out infinite alternate}
@keyframes dr{to{translate:70px -50px;scale:1.15}}
.floaties i{position:fixed;bottom:-40px;z-index:-1;font-style:normal;opacity:.75;animation:rise var(--t) linear infinite;animation-delay:var(--dl)}
@keyframes rise{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(26px,-60vh) rotate(40deg)}100%{transform:translate(-18px,-118vh) rotate(90deg);opacity:0}}
#prog{position:fixed;top:0;left:0;height:4px;width:0;z-index:100;background:linear-gradient(90deg,#FF78B4,#CDB4FF,#FFD2BE);border-radius:0 4px 4px 0}
.spark{position:fixed;z-index:200;pointer-events:none;font-size:16px;color:var(--pink2);animation:sp .8s forwards}
@keyframes sp{to{transform:translateY(-26px) scale(.2) rotate(120deg);opacity:0}}
/* scroll */
.rv{opacity:0;translate:0 28px;scale:.97;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;translate:0 0;scale:1}
/* tombol */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:13px 26px;border:0;border-radius:999px;background:linear-gradient(180deg,#FF66AE,var(--pink));color:#fff;font:600 1rem var(--head);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 #B8176A,0 14px 24px -10px rgba(240,51,138,.6);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #B8176A}
.btn.alt{background:#fff;color:var(--pink);box-shadow:0 5px 0 var(--line),0 14px 24px -12px rgba(240,51,138,.35)}
.btn.sm{padding:9px 18px;font-size:.9rem;box-shadow:0 3px 0 #B8176A}.btn.alt.sm{box-shadow:0 3px 0 var(--line)}
/* header */
.notice{background:linear-gradient(90deg,var(--pink),#FF8FC1);color:#fff;text-align:center;padding:8px 16px;font-weight:700;font-size:.9rem}
header{position:sticky;top:0;z-index:50;background:rgba(255,242,248,.7);backdrop-filter:blur(14px);transition:box-shadow .3s,background .3s}
header.sc{background:rgba(255,242,248,.94);box-shadow:0 8px 30px -16px rgba(240,51,138,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.35rem var(--head);color:var(--pink)}
.lg{width:40px;height:40px;display:block;animation:wig 4s ease-in-out infinite}.lg svg{width:100%;height:100%}
@keyframes wig{50%{transform:rotate(-8deg) scale(1.06)}}
nav{display:flex;gap:24px;font-weight:700;font-size:.93rem;color:var(--mute)}nav a{text-decoration:none}nav a:hover{color:var(--pink)}
/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding-top:50px;padding-bottom:30px}
.hi{font:600 1.1rem var(--head);color:var(--pink);opacity:0;animation:up .7s .1s forwards}
.hero h1{font-size:clamp(2.8rem,7.5vw,5.4rem);font-weight:700;background:linear-gradient(90deg,#F0338A,#FF78B4 50%,#A67CFF);-webkit-background-clip:text;background-clip:text;color:transparent;margin:4px 0 12px;opacity:0;animation:up .8s .25s forwards;filter:drop-shadow(0 4px 0 rgba(240,51,138,.18))}
.tag{color:var(--mute);font-size:1.1rem;max-width:46ch;font-weight:600;opacity:0;animation:up .8s .4s forwards}
.cta{display:flex;gap:16px;flex-wrap:wrap;margin:26px 0 22px;opacity:0;animation:up .8s .55s forwards}
.chips{display:flex;gap:10px;flex-wrap:wrap;opacity:0;animation:up .8s .7s forwards}
.chips span{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700;font-size:.85rem}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-a{position:relative;display:grid;place-items:center;min-height:380px}
.hero-a::before{content:"";position:absolute;width:86%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#FFD0E6 60%,#E6D6FF);box-shadow:inset 0 -14px 40px rgba(240,51,138,.18);animation:pu 5s ease-in-out infinite}
@keyframes pu{50%{transform:scale(1.04)}}
.hero-art{position:relative;width:min(340px,82%);height:auto;overflow:visible}
.bob{animation:bob 3.6s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-12px)}}
.wave{animation:wv 1.6s ease-in-out infinite}@keyframes wv{50%{transform:rotate(-16deg)}}
.heart{animation:hb 1.2s ease-in-out infinite}@keyframes hb{50%{transform:scale(1.14)}}
.eyes .eye{transform-box:fill-box;transform-origin:center;animation:bl 4.4s infinite}
@keyframes bl{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.bow{animation:bw 3s ease-in-out infinite;transform-box:fill-box}@keyframes bw{50%{rotate:5deg}}
.bubble{position:absolute;top:2%;right:2%;z-index:2;background:#fff;border:3px solid var(--pink2);border-radius:22px;padding:10px 16px;font:600 1rem var(--head);color:var(--pink);box-shadow:0 8px 0 rgba(255,120,180,.25);animation:pop 3.6s ease-in-out infinite;transform-origin:20% 100%}
.bubble::after{content:"";position:absolute;left:18px;bottom:-14px;width:16px;height:16px;background:#fff;border-right:3px solid var(--pink2);border-bottom:3px solid var(--pink2);transform:rotate(45deg)}
@keyframes pop{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.07) rotate(2deg)}}
.st{position:absolute;font-size:1.8rem;animation:tw 2.4s ease-in-out infinite;color:var(--pink2)}
.s1{left:4%;top:12%}.s2{right:-2%;top:46%;color:#A67CFF;animation-delay:-.8s}.s3{left:0;bottom:16%;color:#FF9E7A;animation-delay:-1.4s}.s4{right:12%;bottom:4%;color:#FFC93C;animation-delay:-.4s}
@keyframes tw{50%{transform:scale(1.5) rotate(20deg);opacity:.5}}
.rib{overflow:hidden;background:linear-gradient(90deg,var(--pink),#FF8FC1,#A67CFF);padding:12px 0;transform:rotate(-1.2deg);margin:14px -10px;box-shadow:0 8px 20px -10px rgba(240,51,138,.5)}
.rib div{display:flex;gap:34px;width:max-content;color:#fff;font:600 1.05rem var(--head);white-space:nowrap;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
/* belanja */
.tabs{display:inline-flex;gap:6px;padding:6px;background:var(--card);border:2px solid var(--line);border-radius:999px;margin-bottom:24px;flex-wrap:wrap}
.tabs button{padding:10px 20px;border:0;border-radius:999px;background:none;color:var(--mute);font:600 .95rem var(--head);cursor:pointer;transition:all .2s}
.tabs button:hover{color:var(--pink)}.tabs button[aria-selected=true]{background:var(--pink);color:#fff;box-shadow:0 4px 0 #B8176A}
.order{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.note{background:#fff;border:2px dashed var(--pink2);border-radius:18px;padding:12px 16px;font-weight:600;font-size:.9rem;margin-bottom:16px}
.field{width:100%;padding:12px 16px;border:2px solid var(--line);border-radius:16px;background:#fff;color:var(--plum);font:600 1rem var(--body)}.field:focus{border-color:var(--pink2);outline:0;box-shadow:0 0 0 4px rgba(255,120,180,.2)}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}
.pack,.item,.pill{font-family:var(--body);cursor:pointer;color:var(--plum)}
.pack,.item{position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;padding:16px;border:2px solid var(--line);border-radius:20px;background:var(--card);transition:transform .15s,border-color .15s,box-shadow .15s}
.pack:hover,.item:hover{transform:translateY(-4px) rotate(-1deg);border-color:var(--pink2)}
.pack[aria-pressed=true],.item[aria-pressed=true]{border-color:var(--pink);background:#FFF0F7;box-shadow:0 5px 0 var(--pink2)}
.pack b{font:600 1.15rem var(--head)}.pack span,.item span{color:var(--pink);font-weight:800}
.item em{font-style:normal;font-size:.68rem;font-weight:800;color:#A67CFF;text-transform:uppercase;letter-spacing:.06em}.item b{font:600 1rem/1.2 var(--head)}.item small{color:var(--mute);font-weight:700}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:14px}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:14px}
.app{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:16px;transition:transform .2s,box-shadow .2s}.app:hover{box-shadow:0 14px 30px -16px rgba(240,51,138,.5)}
.app header{position:static;display:flex;align-items:center;gap:10px;background:none;backdrop-filter:none;margin-bottom:8px;flex-wrap:wrap}
.aic{font-size:1.5rem;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--soft)}
.app h3{font-size:1.15rem}.app header small{margin-left:auto;color:var(--mute);font-weight:700;font-size:.78rem}
.grp{margin-top:8px}.grp em{display:inline-block;font-style:normal;font-weight:800;font-size:.72rem;background:var(--lil);color:#fff;border-radius:999px;padding:2px 10px;margin-bottom:6px}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:flex;flex-direction:column;align-items:flex-start;padding:6px 11px;border:2px solid var(--line);border-radius:14px;background:#fff;font-weight:700;font-size:.8rem;line-height:1.25;transition:all .15s}
.pill b{color:var(--pink);font-weight:800}.pill:hover{border-color:var(--pink2);transform:translateY(-2px)}
.pill[aria-pressed=true]{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 3px 0 #B8176A}.pill[aria-pressed=true] b{color:#fff}
.ad{display:block;margin-top:8px;color:var(--mute);font-weight:700}
.box{background:var(--card);backdrop-filter:blur(10px);border:2px solid var(--line);border-radius:26px;padding:24px;box-shadow:0 18px 40px -26px rgba(240,51,138,.6)}
.custom{margin-top:16px}
.sum{position:sticky;top:84px}.sum h3{font-size:1.3rem;margin-bottom:12px}
.row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:2px dotted var(--line);font-size:.93rem}.row span{color:var(--mute);font-weight:700}.row b{text-align:right}.row.last{border:0}
.ok{color:var(--ok)}.total{font:700 2rem var(--head);color:var(--pink)}
label{display:grid;gap:6px;font-size:.85rem;font-weight:700;color:var(--mute);margin-top:14px}
.addon{display:flex;align-items:center;gap:8px;color:var(--plum)}
.cpn{display:flex;gap:8px;margin-top:12px}.cm{font-size:.84rem;font-weight:700;min-height:1.3em;margin-top:6px;color:var(--mute)}.cm.ok{color:var(--ok)}.cm.bad{color:#D6336C}
.err{color:#D6336C;font-weight:700;font-size:.88rem;min-height:1.3em;margin:8px 0}
.mini-note{font-size:.78rem;color:var(--mute);margin-top:10px;text-align:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:2px solid var(--line);border-radius:24px;padding:22px;transition:transform .2s}.card:hover{transform:translateY(-5px) rotate(-1deg)}
.card h3{font-size:1.2rem;margin:6px 0}.card p{color:var(--mute);font-weight:600;font-size:.93rem}
.card .mini{width:84px;height:84px;display:block;animation:bob 3.4s ease-in-out infinite}
.step{counter-increment:s}.step::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pink);color:#fff;font:700 1.15rem var(--head);box-shadow:0 4px 0 #B8176A;margin-bottom:8px}.steps{counter-reset:s}
details{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px 18px;margin-bottom:10px;max-width:780px}summary{cursor:pointer;font:600 1.05rem var(--head)}details p{color:var(--mute);margin-top:8px;font-weight:600}
footer{margin-top:30px;padding:30px 0 100px;border-top:2px dashed var(--line);color:var(--mute);font-size:.85rem;font-weight:600}
.foot{display:flex;gap:20px;align-items:center}.foot b{font:700 1.2rem var(--head);color:var(--pink)}
.foot .mini{width:90px;height:90px;flex:none;animation:peek 3s ease-in-out infinite}@keyframes peek{50%{transform:translateY(-10px) rotate(4deg)}}
.wa{position:fixed;right:18px;bottom:18px;z-index:60;padding:13px 18px;border-radius:999px;background:#25D366;color:#04210F;font:700 .9rem var(--head);text-decoration:none;box-shadow:0 5px 0 #168A44;animation:pl 2.6s infinite}
@keyframes pl{0%{box-shadow:0 5px 0 #168A44,0 0 0 0 rgba(37,211,102,.5)}100%{box-shadow:0 5px 0 #168A44,0 0 0 14px rgba(37,211,102,0)}}
@media (max-width:860px){.hero,.order{grid-template-columns:1fr}.hero{padding-top:28px}.hero-a{min-height:330px}nav{display:none}.sum{position:static}.foot{flex-direction:column;text-align:center}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv,.hi,.hero h1,.tag,.cta,.chips{opacity:1!important;translate:none!important;scale:none!important;transform:none!important}}

/* foto maskot */
.hero-a::before{content:none}
.hero-img{position:relative;width:100%;max-width:560px;height:auto;display:block;border-radius:34px;border:5px solid #fff;box-shadow:0 22px 50px -18px rgba(240,51,138,.55),0 0 0 2px #FFC4DE;animation:bob 4.2s ease-in-out infinite}
.lg img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:0 3px 10px -2px rgba(240,51,138,.5);display:block}
.foot-img{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 16px -6px rgba(240,51,138,.5);flex:none;animation:peek 3s ease-in-out infinite;display:block}
.card .ico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:2rem;background:linear-gradient(135deg,#FFE3F0,#EBDDFF);border:2px solid #fff;box-shadow:0 6px 14px -8px rgba(240,51,138,.6);animation:bob 3.4s ease-in-out infinite}

.hero-img{max-width:620px}