/* public/xv-profile-lux.css — [NEW 2026-10-03] tampilan MEWAH halaman Profil:
     • deretan tab (Tas, Saldo, Gacha, Pengaturan, Ajak Teman, …) jadi rel kaca dengan indikator yang MENGGESER halus
       (posisinya diatur xv-profile-lux.js), riak saat ditekan, ikon yang ikut bergerak;
     • isi tab masuk berurutan (stagger), kartu Tas melayang saat disentuh;
     • kartu Passkey / tombol login Sidik Jari / banner ajakan: pemindai sidik jari beranimasi (garis pindai, cincin, centang sukses);
     • halaman Ajak Teman (referral + komisi).
   Di HP (≤ 720px) semuanya MENYATU sampai tepi layar (tanpa kotak di dalam kotak) dan teks boleh turun baris — tidak terpotong,
   tidak memaksa melebar. Semua animasi dimatikan untuk pengguna "kurangi gerakan". Hanya CSS — markup & logika tidak bergantung padanya. */

#page-profile,#authModal,#pkNudge{--px-a:var(--vio,#8b5cf6);--px-b:var(--cy,#2dd4ff);--px-ok:var(--green,#3ddc97);--px-bad:var(--red,#ff5c7a);--px-warn:var(--amber,#ffb020);
  --px-ease:cubic-bezier(.2,.8,.2,1);--px-spring:cubic-bezier(.34,1.56,.64,1)}

/* ================= KEPALA PROFIL ================= */
#page-profile .profile-head{position:relative;isolation:isolate}
#page-profile .profile-head::before{content:"";position:absolute;inset:-30px -10px auto;height:180px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(40% 60% at 20% 50%,color-mix(in srgb,var(--px-a) 30%,transparent),transparent 70%),radial-gradient(35% 55% at 80% 40%,color-mix(in srgb,var(--px-b) 22%,transparent),transparent 70%);
  filter:blur(18px);opacity:.75;animation:pxAurora 12s ease-in-out infinite alternate}
@keyframes pxAurora{to{transform:translateX(14px) scale(1.06);opacity:1}}
#page-profile .big-av{transition:transform .5s var(--px-spring),box-shadow .5s}
#page-profile .big-av:hover{transform:rotate(-4deg) scale(1.05);box-shadow:0 14px 40px -12px var(--px-a)}

/* ================= REL TAB ================= */
#page-profile .tabs{position:relative;gap:4px;padding:5px;border-radius:18px;background:color-mix(in srgb,var(--glass,rgba(255,255,255,.05)) 100%,transparent);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -30px #000;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#page-profile .tabs .tab{position:relative;z-index:1;overflow:hidden;border:0;background:transparent;border-radius:13px;padding:9px 15px;color:var(--mut);
  transition:color .35s var(--px-ease),transform .25s var(--px-ease)}
#page-profile .tabs .tab svg{transition:transform .45s var(--px-spring)}
#page-profile .tabs .tab:hover{color:var(--txt)}
#page-profile .tabs .tab:hover svg{transform:translateY(-2px) rotate(-6deg)}
#page-profile .tabs .tab:active{transform:scale(.96)}
#page-profile .tabs .tab.on{color:#fff;background:transparent;border-color:transparent}
#page-profile .tabs .tab.on svg{transform:scale(1.12)}
#page-profile .tabs .tab:focus-visible{outline:2px solid var(--px-b);outline-offset:2px}
/* indikator geser (span.tab-ink disisipkan JS). Tanpa JS: .tab.on tetap punya latar sendiri (fallback di bawah) */
#page-profile .tabs .tab-ink{position:absolute;z-index:0;top:5px;left:0;height:calc(100% - 10px);width:0;border-radius:13px;pointer-events:none;
  background:linear-gradient(135deg,var(--px-a),color-mix(in srgb,var(--px-b) 75%,var(--px-a)));
  box-shadow:0 10px 26px -10px var(--px-a),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .55s var(--px-spring),width .55s var(--px-spring),opacity .3s}
#page-profile .tabs .tab-ink::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);
  background-size:220% 100%;animation:pxInkShine 3.6s ease-in-out infinite}
@keyframes pxInkShine{0%,60%{background-position:120% 0}100%{background-position:-120% 0}}
#page-profile .tabs:not(.has-ink) .tab.on{background:linear-gradient(135deg,var(--px-a),color-mix(in srgb,var(--px-b) 75%,var(--px-a)))}
/* riak saat ditekan */
#page-profile .tabs .tab .px-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.35);transform:scale(0);animation:pxRip .6s ease-out forwards}
@keyframes pxRip{to{transform:scale(4);opacity:0}}

/* ================= ISI TAB ================= */
#page-profile .pane.on{animation:pxPaneIn .5s var(--px-ease)}
#page-profile .pane.on>*{animation:pxRise .6s var(--px-ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes pxPaneIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
@keyframes pxRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ================= KARTU TAS ================= */
#page-profile .order-card{position:relative;transition:transform .35s var(--px-ease),border-color .35s,box-shadow .35s;animation:pxRise .55s var(--px-ease) both;animation-delay:calc(var(--i,0) * 45ms)}
#page-profile .order-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(120deg,var(--px-a),transparent 40%,transparent 60%,var(--px-b));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
@media (hover:hover){
  #page-profile .order-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px var(--px-a)}
  #page-profile .order-card:hover::before{opacity:1}
  #page-profile .order-card:hover .oc-ic{transform:rotate(-6deg) scale(1.06)}
}
#page-profile .order-card .oc-ic{transition:transform .45s var(--px-spring)}
#page-profile .order-card h4,#page-profile .order-card .meta{overflow-wrap:anywhere;min-width:0}
#page-profile .order-card .toggle{transition:letter-spacing .3s,color .3s}
#page-profile .order-card .toggle:hover{letter-spacing:.3px}

/* ================= PEMINDAI SIDIK JARI (dipakai kartu, tombol login & banner) ================= */
.pk-scan{position:relative;flex:none;display:grid;place-items:center;color:var(--px-b);border-radius:50%;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--px-b) 22%,transparent),color-mix(in srgb,var(--px-a) 14%,transparent) 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--px-b) 40%,transparent)}
.pk-scan.lg{width:62px;height:62px}.pk-scan.md{width:48px;height:48px}.pk-scan.sm{width:42px;height:42px}
.pk-scan>svg{position:relative;z-index:1;transition:opacity .3s,transform .4s var(--px-spring)}
.pk-scan>svg:not(.pk-ok) path{stroke-dasharray:40;stroke-dashoffset:0;animation:pkDraw 3.2s ease-in-out infinite}
.pk-scan>svg:not(.pk-ok) path:nth-child(2n){animation-delay:.25s}.pk-scan>svg:not(.pk-ok) path:nth-child(3n){animation-delay:.5s}
@keyframes pkDraw{0%,100%{stroke-dashoffset:0;opacity:1}45%{stroke-dashoffset:40;opacity:.35}55%{stroke-dashoffset:40;opacity:.35}}
.pk-scan .pk-ok{position:absolute;inset:0;margin:auto;opacity:0;transform:scale(.4);color:var(--px-ok);z-index:2}
.pk-scan .pk-beam{position:absolute;z-index:2;left:18%;right:18%;top:20%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--px-b),transparent);
  box-shadow:0 0 10px var(--px-b);opacity:.85;animation:pkBeam 2.2s ease-in-out infinite}
@keyframes pkBeam{0%,100%{top:20%}50%{top:78%}}
.pk-scan .pk-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--px-b) 55%,transparent);opacity:0;animation:pkRing 2.6s ease-out infinite}
.pk-scan .pk-ring.r2{animation-delay:1.3s}
@keyframes pkRing{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.55);opacity:0}}
/* status: sedang memindai / berhasil / gagal */
.is-scan .pk-scan{animation:pkGlow 1s ease-in-out infinite alternate}
.is-scan .pk-scan .pk-beam{animation-duration:.9s}
@keyframes pkGlow{to{box-shadow:inset 0 0 0 1px var(--px-b),0 0 26px -2px var(--px-b)}}
.is-ok .pk-scan{background:radial-gradient(circle,color-mix(in srgb,var(--px-ok) 28%,transparent),transparent 75%);box-shadow:inset 0 0 0 1.5px var(--px-ok),0 0 30px -6px var(--px-ok)}
.is-ok .pk-scan>svg:not(.pk-ok){opacity:0;transform:scale(.6)}
.is-ok .pk-scan .pk-ok{opacity:1;transform:none;transition:opacity .25s,transform .5s var(--px-spring)}
.is-ok .pk-scan .pk-ok path{stroke-dasharray:24;stroke-dashoffset:24;animation:pkCheck .5s .1s var(--px-ease) forwards}
@keyframes pkCheck{to{stroke-dashoffset:0}}
.is-ok .pk-scan .pk-beam,.is-ok .pk-scan .pk-ring{display:none}
.is-err{animation:pkShake .45s ease-in-out}
.is-err .pk-scan{color:var(--px-bad);box-shadow:inset 0 0 0 1.5px var(--px-bad)}
@keyframes pkShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* ================= KARTU PASSKEY (Pengaturan Akun) ================= */
.pk-card{position:relative;overflow:hidden;margin-top:14px;padding:18px;border-radius:20px;isolation:isolate;
  background:linear-gradient(150deg,color-mix(in srgb,var(--px-a) 14%,transparent),color-mix(in srgb,var(--px-b) 7%,transparent) 55%,transparent),var(--glass,rgba(255,255,255,.04));
  border:1px solid color-mix(in srgb,var(--px-a) 30%,var(--line))}
.pk-card::before{content:"";position:absolute;z-index:-1;width:240px;height:240px;right:-90px;top:-110px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--px-b) 26%,transparent),transparent 70%);animation:pxAurora 9s ease-in-out infinite alternate}
.pk-top{display:flex;align-items:center;gap:14px}
.pk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pk-txt b{font-size:.98rem;line-height:1.3;overflow-wrap:anywhere}
.pk-status{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.06);color:var(--mut)}
.pk-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pk-status.on{background:color-mix(in srgb,var(--px-ok) 15%,transparent);color:var(--px-ok)}
.pk-status.on::before{box-shadow:0 0 0 0 currentColor;animation:pkLive 2s ease-out infinite}
.pk-status.off{background:color-mix(in srgb,var(--px-warn) 14%,transparent);color:var(--px-warn)}
@keyframes pkLive{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--px-ok) 60%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
.pk-add{flex:none;width:auto!important;margin:0!important;padding:9px 14px!important;font-size:.8rem!important;border-radius:12px!important;display:inline-flex;align-items:center;gap:6px}
.pk-desc{margin:14px 0 10px;font-size:.8rem;line-height:1.6;color:var(--mut)}
.pk-perks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pk-perks span{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt)}
.pk-perks svg{color:var(--px-b)}
.pk-pw{margin-bottom:10px}
.pk-pw input{width:100%;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:11px 13px;color:var(--txt);font-size:.86rem;outline:none;transition:border-color .2s,box-shadow .2s}
.pk-pw input:focus{border-color:var(--px-a);box-shadow:0 0 0 4px color-mix(in srgb,var(--px-a) 18%,transparent)}
.pk-list{font-size:.8rem;color:var(--mut)}
.pk-empty{padding:12px 14px;border-radius:14px;border:1px dashed var(--line);line-height:1.55}
.pk-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);animation:pxRise .5s var(--px-ease) both;animation-delay:calc(var(--i,0) * 60ms)}
.pk-dev{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--px-b);background:color-mix(in srgb,var(--px-b) 12%,transparent)}
.pk-it{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-it b{color:var(--txt);font-size:.84rem;overflow-wrap:anywhere}
.pk-it small{font-size:.72rem;line-height:1.45;overflow-wrap:anywhere}
.pk-del{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line);background:transparent;color:var(--mut);transition:color .2s,border-color .2s,transform .2s}
.pk-del:hover{color:var(--px-bad);border-color:var(--px-bad);transform:rotate(-8deg)}
.pk-card.is-ok{animation:pkCardOk 1.2s var(--px-ease)}
@keyframes pkCardOk{30%{box-shadow:0 0 0 3px color-mix(in srgb,var(--px-ok) 45%,transparent),0 20px 50px -20px var(--px-ok)}}

/* ================= TOMBOL LOGIN SIDIK JARI (modal Masuk) ================= */
.pk-or{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:.78rem;margin-bottom:12px}
.pk-or span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.pk-login{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:10px 14px 10px 10px;border-radius:16px;cursor:pointer;color:var(--txt);
  border:1px solid color-mix(in srgb,var(--px-b) 40%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--px-a) 16%,transparent),color-mix(in srgb,var(--px-b) 10%,transparent));
  transition:transform .3s var(--px-ease),box-shadow .35s,border-color .35s}
.pk-login::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14),transparent 70%);transform:translateX(-120%);transition:transform .9s var(--px-ease)}
.pk-login:hover{transform:translateY(-2px);border-color:var(--px-b);box-shadow:0 16px 36px -20px var(--px-b)}
.pk-login:hover::after{transform:translateX(120%)}
.pk-login:active{transform:scale(.98)}
.pk-login:focus-visible{outline:2px solid var(--px-b);outline-offset:3px}
.pk-lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-lt b{font-size:.9rem;line-height:1.3;overflow-wrap:anywhere}
.pk-lt small{font-size:.72rem;color:var(--mut);overflow-wrap:anywhere}
.pk-arrow{flex:none;color:var(--px-b);transition:transform .35s var(--px-spring)}
.pk-login:hover .pk-arrow{transform:translateX(4px)}
.pk-login.is-scan .pk-arrow{opacity:0}
.pk-note{text-align:center;font-size:.72rem;color:var(--mut);margin-top:8px;line-height:1.5}

/* ================= BANNER AJAKAN PASSKEY ================= */
#pkNudge.pk-nudge{position:fixed;left:50%;bottom:24px;z-index:95;width:calc(100% - 28px);max-width:460px;align-items:center;gap:12px;padding:13px 14px;border-radius:20px;
  transform:translate(-50%,0);background:color-mix(in srgb,var(--bg,#05060f) 88%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--px-a) 45%,var(--line));box-shadow:0 22px 60px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03)}
#pkNudge.pk-nudge.in{animation:pkNudgeIn .6s var(--px-spring) both}
#pkNudge.pk-nudge.out{animation:pkNudgeOut .3s ease-in both}
@keyframes pkNudgeIn{from{opacity:0;transform:translate(-50%,40px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pkNudgeOut{to{opacity:0;transform:translate(-50%,30px) scale(.97)}}
.pk-nt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-nt b{font-size:.86rem;line-height:1.35;overflow-wrap:anywhere}
.pk-nt span{font-size:.74rem;color:var(--mut);line-height:1.45}
.pk-nb{flex:none;display:flex;flex-direction:column;gap:6px}
.pk-nb .btn{width:auto;margin:0;padding:7px 12px;font-size:.75rem}

/* ================= AJAK TEMAN (referral + komisi) ================= */
.rf-wrap{max-width:620px}
.rf-off{color:var(--mut);font-size:.85rem}
.rf-hero{position:relative;overflow:hidden;isolation:isolate;padding:22px 20px;border-radius:22px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--px-a) 30%,transparent),color-mix(in srgb,var(--px-b) 14%,transparent) 60%,transparent),var(--glass);
  border:1px solid color-mix(in srgb,var(--px-a) 35%,var(--line))}
.rf-orb{position:absolute;z-index:-1;width:260px;height:260px;right:-80px;top:-120px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--px-a),var(--px-b),var(--px-ok),var(--px-a));filter:blur(50px);opacity:.45;animation:rfSpin 14s linear infinite}
@keyframes rfSpin{to{transform:rotate(360deg)}}
.rf-kicker{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--px-b)}
.rf-hero h3{margin:8px 0 6px;font-family:var(--font-d);font-size:1.35rem;line-height:1.25;letter-spacing:-.3px;overflow-wrap:anywhere}
.rf-lead{margin:0 0 16px;color:var(--mut);font-size:.86rem;line-height:1.6;overflow-wrap:anywhere}
.rf-lead b{color:var(--px-ok)}
.rf-code{display:flex;align-items:stretch;gap:0;border-radius:14px;overflow:hidden;border:1px dashed color-mix(in srgb,var(--px-b) 60%,transparent);background:rgba(5,6,15,.45)}
.rf-code input{flex:1;min-width:0;border:0;background:transparent;color:var(--txt);text-align:center;font-family:var(--font-d);font-weight:800;font-size:1.25rem;letter-spacing:5px;padding:12px 8px;outline:none}
.rf-copy{flex:none;border:0;padding:0 18px;font-weight:800;font-size:.82rem;color:#fff;background:linear-gradient(135deg,var(--px-a),var(--px-b));cursor:pointer;transition:filter .2s}
.rf-copy:hover{filter:brightness(1.12)}
.rf-share{width:100%;margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.rf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}
.rf-stat{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--line);animation:pxRise .5s var(--px-ease) both}
.rf-stat .v{font-family:var(--font-d);font-size:1.45rem;font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.rf-stat .l{color:var(--mut);font-size:.76rem}
.rf-stat.ok .v{color:var(--px-ok)}.rf-stat.wait .v{color:var(--px-warn)}
.rf-how{display:flex;flex-direction:column;gap:8px;margin:6px 0 16px}
.rf-step{display:flex;gap:12px;align-items:flex-start;animation:pxRise .5s var(--px-ease) both;animation-delay:calc(var(--i,0) * 90ms)}
.rf-step .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;background:linear-gradient(135deg,var(--px-a),var(--px-b));box-shadow:0 6px 16px -8px var(--px-a)}
.rf-step div{min-width:0;display:flex;flex-direction:column;gap:2px}
.rf-step b{font-size:.86rem}.rf-step small{color:var(--mut);font-size:.78rem;line-height:1.5;overflow-wrap:anywhere}
.rf-sec{margin-top:8px}
.rf-sec h4{font-family:var(--font-d);font-size:.92rem;margin:12px 0 4px}
.rf-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);animation:pxRise .45s var(--px-ease) both;animation-delay:calc(min(var(--i,0),12) * 40ms)}
.rf-row .av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.82rem;color:#fff;background:linear-gradient(135deg,var(--px-a),var(--px-b))}
.rf-row .st{flex:none;width:10px;height:10px;border-radius:50%;margin:0 12px 0 4px;background:var(--mut)}
.rf-row .st.paid{background:var(--px-ok);box-shadow:0 0 10px var(--px-ok)}.rf-row .st.pending{background:var(--px-warn);animation:pkLive 2s ease-out infinite}.rf-row .st.void{background:var(--px-bad)}
.rf-row .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rf-row .t b{font-size:.84rem;overflow-wrap:anywhere}.rf-row .t small{color:var(--mut);font-size:.72rem;line-height:1.45;overflow-wrap:anywhere}
.rf-row .a{flex:none;text-align:right;display:flex;flex-direction:column;gap:1px}
.rf-row .a b{font-size:.86rem;color:var(--px-ok)}.rf-row .a b.pending{color:var(--px-warn)}.rf-row .a b.void{color:var(--mut);text-decoration:line-through}
.rf-row .a small{color:var(--mut);font-size:.68rem}

/* ================= HP: MENYATU SAMPAI TEPI ================= */
@media (max-width:720px){
  #page-profile{overflow-x:clip}
  html body #page-profile .tabs{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;border-left:0;border-right:0;padding:6px 14px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;background:color-mix(in srgb,var(--bg,#05060f) 70%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 26px),transparent)}
  html body #page-profile .tabs::-webkit-scrollbar{display:none}
  html body #page-profile .tabs .tab{flex:none;scroll-snap-align:center;padding:9px 13px;font-size:.82rem}
  html body #page-profile .tabs .tab-ink{top:6px;height:calc(100% - 12px)}
  /* kartu Tas → baris menyatu, bukan kotak terpisah */
  html body #page-profile #bagList{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  html body #page-profile .order-card{border-radius:0;border-left:0;border-right:0;border-top:0;margin-bottom:0;padding:15px 16px;background:transparent}
  html body #page-profile .order-card::before{display:none}
  html body #page-profile .order-card:first-child{border-top:1px solid var(--line)}
  .pk-card{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;border-left:0;border-right:0;padding:18px 16px}
  .pk-top{flex-wrap:wrap}
  .pk-txt{flex:1 1 150px}
  .rf-hero{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;border-left:0;border-right:0;padding:22px 16px}
  .rf-stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;margin:0 calc(50% - 50vw) 14px;border-bottom:1px solid var(--line)}
  .rf-stat{border-radius:0;border:0;border-right:1px solid var(--line);background:transparent;padding:14px 16px}
  .rf-stat:last-child{border-right:0}
  .rf-hero h3{font-size:1.2rem}
  .rf-code input{letter-spacing:3px;font-size:1.1rem}
  #pkNudge.pk-nudge{bottom:88px;flex-wrap:wrap}
  .pk-nb{flex-direction:row;width:100%}.pk-nb .btn{flex:1}
}

/* ================= KURANGI GERAKAN ================= */
@media (prefers-reduced-motion:reduce){
  #page-profile .profile-head::before,#page-profile .tabs .tab-ink::after,.pk-card::before,.rf-orb,
  .pk-scan>svg:not(.pk-ok) path,.pk-scan .pk-beam,.pk-scan .pk-ring,.pk-status.on::before,.rf-row .st.pending{animation:none}
  #page-profile .pane.on,#page-profile .pane.on>*,#page-profile .order-card,.pk-item,.rf-stat,.rf-step,.rf-row,#pkNudge.pk-nudge.in,#pkNudge.pk-nudge.out,.is-err,.pk-card.is-ok{animation:none}
  #page-profile .tabs .tab-ink{transition:none}
}