html.no-anim .pbar,body.no-anim .pbar{display:none!important}
/* punya.shop — animasi (v5.6). Aktif hanya bila pengguna menyalakannya (html tanpa .no-anim) dan tidak memilih "kurangi gerakan". */
@keyframes fxRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fxNavPop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-6px) scale(1.25)}100%{transform:translateY(-2px) scale(1.12)}}
@keyframes fxPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes fxDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes fxZoom{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:none}}
@keyframes fxWob{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-8deg)}94%{transform:rotate(7deg)}97%{transform:rotate(-4deg)}}
@keyframes fxShine{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(320%) skewX(-20deg)}}
@keyframes fxBounce{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-7px) scale(1.18)}65%{transform:translateY(1px) scale(.94)}100%{transform:none}}
@keyframes fxRip{from{transform:scale(0);opacity:.45}to{transform:scale(1);opacity:0}}
@keyframes fxDot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-6px);opacity:1}}
@keyframes fxBar{0%{width:0}60%{width:78%}100%{width:94%}}
@keyframes fxFly{from{opacity:1;transform:translate(0,0) scale(1) rotate(0)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4) rotate(var(--r))}}
@keyframes fxIn{from{opacity:0}to{opacity:1}}
@keyframes fxSquish{0%{transform:scale(1)}40%{transform:scale(.88,1.1)}70%{transform:scale(1.06,.96)}100%{transform:scale(1)}}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:no-preference){
/* masuk halaman: header turun, isi naik berurutan (--i diisi skrip) */
html:not(.no-anim) .sf-hdr{animation:fxDown .5s cubic-bezier(.2,.8,.2,1) both}
html:not(.no-anim) .fx-seq>*{animation:fxRise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(min(var(--i,0),7)*55ms)}
/* panel geser dan latarnya jangan ikut animasi masuk: animasi 'both' menimpa transform/opacity sehingga panel tampil terbuka sendiri */
html:not(.no-anim) .fx-seq>.pf2-dr,html:not(.no-anim) .fx-seq>.pf2-bd,html:not(.no-anim) .fx-seq>[role=dialog],html:not(.no-anim) .fx-seq>[class*="-bd"]{animation:none}
html:not(.no-anim) .sf-mnav{animation:fxRise .6s .15s cubic-bezier(.2,.8,.2,1) both}
/* teks: judul per kata */
html:not(.no-anim) .fx-w{display:inline-block;opacity:0;animation:fxRise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--w,0)*60ms + .15s)}
/* kartu: angkat saat disentuh, tekan saat diklik, kilau saat muncul */
html:not(.no-anim) .card,html:not(.no-anim) .k,html:not(.no-anim) .sf-card,html:not(.no-anim) .pr-row,html:not(.no-anim) .qx-menu,html:not(.no-anim) .qx-card,html:not(.no-anim) .rowbtn{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background .2s}
@media(hover:hover){html:not(.no-anim) .sf-card:hover,html:not(.no-anim) .pr-row:hover,html:not(.no-anim) .qx-menu:hover,html:not(.no-anim) .rowbtn:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--shadow)}}
html:not(.no-anim) .sf-card:active,html:not(.no-anim) .pr-row:active,html:not(.no-anim) .qx-menu:active,html:not(.no-anim) .rowbtn:active{transform:scale(.97)}
html:not(.no-anim) .fx-tilt{transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.975)!important}
html:not(.no-anim) .hs-s,html:not(.no-anim) .qx-card.hero,html:not(.no-anim) .hm-hero{position:relative;overflow:hidden}
html:not(.no-anim) .hs-s::after,html:not(.no-anim) .qx-card.hero::after{content:"";position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:fxShine 3.6s 1s ease-in-out infinite;pointer-events:none}
/* label dan lencana */
html:not(.no-anim) .lbl,html:not(.no-anim) .tg,html:not(.no-anim) .rpil,html:not(.no-anim) .hs-tag,html:not(.no-anim) .pr-lv,html:not(.no-anim) .qx-badge,html:not(.no-anim) .st{animation:fxPop .55s .25s cubic-bezier(.2,.9,.3,1.2) both}
html:not(.no-anim) .pr-new,html:not(.no-anim) .menu-badge-new{animation:fxWob 3s 2 .8s}
html:not(.no-anim) .sf-ibtn b,html:not(.no-anim) .help-badge{animation:fxPop .5s cubic-bezier(.2,.9,.3,1.3) both}
html:not(.no-anim) .help>button{animation:fxFloat 3.2s ease-in-out 3}
/* tombol: tekan + riak */
html:not(.no-anim) .btn,html:not(.no-anim) .qx-b,html:not(.no-anim) .pr-tabs button{position:relative;overflow:hidden;transition:transform .15s,box-shadow .2s,filter .2s}
html:not(.no-anim) .btn:active,html:not(.no-anim) .qx-b:active{transform:scale(.95)}
html:not(.no-anim) .fx-rip{position:absolute;border-radius:50%;background:currentColor;pointer-events:none;transform:scale(0);animation:fxRip .6s ease-out forwards;width:var(--s);height:var(--s);left:calc(var(--x) - var(--s)/2);top:calc(var(--y) - var(--s)/2)}
/* navigasi bawah: ikon memantul */
html:not(.no-anim) .sf-mnav a{transition:background .25s,color .25s}
html:not(.no-anim) .sf-mnav a.on i{animation:fxNavPop .55s .3s cubic-bezier(.3,1.5,.5,1) both}
html:not(.no-anim) .fx-bn{animation:fxBounce .5s both!important}
/* tab dan chip: garis geser */
html:not(.no-anim) .pr-tabs button::after,html:not(.no-anim) .tab-title::after{transition:transform .3s cubic-bezier(.2,.8,.2,1);transform-origin:left}
/* panel geser dan popup: pegas */
html:not(.no-anim) .sheet{transition:transform .45s cubic-bezier(.2,.9,.25,1.08)}
html:not(.no-anim) .sheet-bd,html:not(.no-anim) .qx-ov{transition:opacity .3s;backdrop-filter:blur(3px)}
html:not(.no-anim) .qx-ov.show .qx-modal,html:not(.no-anim) .qr-ov:not([hidden]) .qr-modal{animation:fxZoom .38s cubic-bezier(.2,.9,.25,1.1) both}
html:not(.no-anim) .qx-page.show{animation:fxRise .4s cubic-bezier(.2,.8,.2,1) both}
html:not(.no-anim) .ps-modal.on .box{animation:fxZoom .35s cubic-bezier(.2,.9,.25,1.1) both}
/* memuat: bar atas, titik melompat, skeleton */
html:not(.no-anim) .fx-bar{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#fff));z-index:99999;animation:fxBar 1.4s cubic-bezier(.2,.8,.2,1) forwards;box-shadow:0 0 10px var(--accent);border-radius:0 3px 3px 0}
html:not(.no-anim) .btn.loading{color:transparent!important;pointer-events:none}
html:not(.no-anim) .btn.loading::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:-12px 0 #fff,12px 0 #fff;animation:fxDot 1s infinite}
html:not(.no-anim) .fx-dots{display:inline-flex;gap:5px}html:not(.no-anim) .fx-dots i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:fxDot 1s infinite}html:not(.no-anim) .fx-dots i:nth-child(2){animation-delay:.15s}html:not(.no-anim) .fx-dots i:nth-child(3){animation-delay:.3s}
/* percikan (pecah saat sukses/favorit/salin) */
html:not(.no-anim) .fx-p{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:99998;animation:fxFly .8s cubic-bezier(.2,.8,.3,1) forwards}
html:not(.no-anim) .fx-p.sq{border-radius:2px;width:7px;height:11px}
html:not(.no-anim) .fx-squish{animation:fxSquish .4s both}
html:not(.no-anim) .toast.on{animation:fxZoom .35s cubic-bezier(.2,.9,.25,1.2) both}
}

/* v6.1 — animasi merata di semua halaman toko */
@keyframes fxGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fxSk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fxCheck{0%{transform:scale(0) rotate(-40deg);opacity:0}60%{transform:scale(1.25) rotate(6deg);opacity:1}100%{transform:none}}
@keyframes fxShake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes fxSlideL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes fxGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
@media(prefers-reduced-motion:no-preference){
/* daftar dan kartu muncul saat digulir ke layar */
html:not(.no-anim) .fx-rv{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:var(--rd,0ms)}
html:not(.no-anim) .fx-rv.fx-in{opacity:1;transform:none}
/* halaman tanpa urutan masuk: tetap memudar halus */
html:not(.no-anim) main:not(.fx-seq){animation:fxIn .35s ease both}
/* bar kemajuan tumbuh */
html:not(.no-anim) .prog>i,html:not(.no-anim) .tg-bar>i,html:not(.no-anim) .kr-bar>i,html:not(.no-anim) .pg-sm+*,html:not(.no-anim) .svc-bar>i{transform-origin:left;animation:fxGrowX .9s cubic-bezier(.2,.8,.2,1) both}
/* skeleton berkilau */
html:not(.no-anim) .skl{background:linear-gradient(90deg,var(--soft) 25%,color-mix(in srgb,var(--soft) 55%,var(--card)) 50%,var(--soft) 75%)!important;background-size:200% 100%;animation:fxSk 1.3s linear infinite}
/* isian: sorot lembut saat fokus */
html:not(.no-anim) input,html:not(.no-anim) textarea,html:not(.no-anim) select{transition:border-color .2s,box-shadow .25s,background .2s}
html:not(.no-anim) input:focus,html:not(.no-anim) textarea:focus,html:not(.no-anim) select:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
html:not(.no-anim) .err:not(:empty),html:not(.no-anim) .kr-er{animation:fxShake .4s both}
/* baris, chip, dan tombol kecil: tekan */
html:not(.no-anim) .sf-row,html:not(.no-anim) .trx,html:not(.no-anim) .chip,html:not(.no-anim) .tdl-i,html:not(.no-anim) .vopt,html:not(.no-anim) .sf-cat{transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
html:not(.no-anim) .sf-row:active,html:not(.no-anim) .trx:active,html:not(.no-anim) .chip:active,html:not(.no-anim) .tdl-i:active,html:not(.no-anim) .vopt:active,html:not(.no-anim) .sf-cat:active{transform:scale(.96)}
@media(hover:hover){html:not(.no-anim) .sf-cat:hover,html:not(.no-anim) .tdl-i:hover,html:not(.no-anim) .vopt:hover{transform:translateY(-3px);box-shadow:0 8px 20px var(--shadow)}}
/* keranjang dan pesanan */
html:not(.no-anim) .kr-it,html:not(.no-anim) .pg-it{animation:fxSlideL .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--rd,0ms))}
html:not(.no-anim) .kr-no,html:not(.no-anim) .pg-no{animation:fxPop .55s .2s cubic-bezier(.2,.9,.3,1.3) both}
html:not(.no-anim) .kr-pi .st.ok i,html:not(.no-anim) .mk-ok>i{animation:fxCheck .5s cubic-bezier(.2,.9,.3,1.3) both}
html:not(.no-anim) #krGo:not(:disabled),html:not(.no-anim) .po-o{animation:fxGlow 2.4s ease-in-out infinite}
html:not(.no-anim) .pg-chip{animation:fxPop .5s .15s both}
/* status dan nominal */
html:not(.no-anim) .st3 b,html:not(.no-anim) .pg-sm b,html:not(.no-anim) .onl-n{display:inline-block;animation:fxRise .6s .1s both}
html:not(.no-anim) .wallet-pill{animation:fxPop .55s .2s cubic-bezier(.2,.9,.3,1.3) both}
html:not(.no-anim) .sf-ibtn:active{transform:scale(.88)}
}