/* ---------- mockup HP persona (layar 390x844) ---------- */
.phone{width:414px;height:868px;border-radius:62px;padding:12px;left:850px;top:16px}
.phone .scr{border-radius:50px}
.ps{position:absolute;inset:0;overflow:hidden;background:#F5F7FA;font-family:var(--body)}
.ps .sb{height:54px;padding:8px 30px 0 36px}
.pbody{position:absolute;left:0;right:0;top:0;bottom:84px;overflow:hidden}
.ptop{background:linear-gradient(160deg,#0A2A5E 0%,#123a7d 70%,#1F5FD1 130%);padding:62px 20px 110px;color:#fff}
.ptop .hi{display:flex;align-items:center;gap:10px}
.ptop .hi .em{width:38px;height:38px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center}
.ptop .hi .em img{height:22px}
.ptop .hi .t{font-size:12.5px;color:#cfe0ff}
.ptop .hi .t b{display:block;font:700 16px var(--head);color:#fff}
.ptop .bell{margin-left:auto;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;position:relative}
.ptop .bell i{position:absolute;right:7px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--amber);border:2px solid #123a7d}
.mc{margin:-92px 16px 0;height:206px;border-radius:20px;padding:16px 18px;position:relative;overflow:hidden;color:#1b1206;box-shadow:0 18px 30px rgba(10,42,94,.32)}
.mc:before{content:"";position:absolute;right:-70px;top:-90px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.16)}
.mc .row{display:flex;align-items:center;position:relative}
.mc .lg{background:#fff;border-radius:8px;padding:4px 9px 4px 6px;display:flex;align-items:center;gap:6px}
.mc .lg img{height:20px}.mc .lg b{font:800 12px var(--head);color:var(--navy)}
.mc .club{margin-left:8px;font:700 10.5px var(--body);letter-spacing:1.4px;opacity:.8}
.mc .tl{margin-left:auto;font:800 12.5px var(--head);letter-spacing:2px;background:rgba(255,255,255,.6);border-radius:20px;padding:4px 11px;color:#1b1206}
.mc .nm{font:800 19px var(--head);margin-top:26px;position:relative}
.mc .no{font:600 13.5px var(--body);letter-spacing:2px;margin-top:2px;opacity:.85;position:relative}
.mc .bt{display:flex;align-items:flex-end;margin-top:16px;position:relative}
.mc .bt label{font-size:11px;display:block;opacity:.8}
.mc .bt b{font:800 27px var(--head);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.mc .qr{margin-left:auto;width:60px;height:60px;background:#fff;border-radius:9px;padding:5px}
.mc.light{color:#fff}.mc.light .tl{background:rgba(255,255,255,.22);color:#fff}
.pc{margin:12px 16px 0;background:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 2px 10px rgba(10,42,94,.06)}
.pc h5{font:700 14px var(--head);color:var(--ink);display:flex;align-items:center;gap:8px}
.pc h5 span{margin-left:auto;font:500 12px var(--body);color:var(--slate)}
.pc .trk{height:10px;border-radius:5px;background:#E8EEF6;margin:11px 0 8px;position:relative;overflow:hidden}
.pc .trk i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#E3A21A,#F5A623)}
.pc .s{font-size:12.5px;color:var(--slate);line-height:1.45}
.pc .s b{color:var(--ink)}
.chipset{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chipset span{display:inline-flex;align-items:center;gap:5px;background:var(--fog);border-radius:9px;padding:5px 9px;font-size:11.5px;color:var(--ink);font-weight:500}
.chipset span svg{font-size:13px;color:var(--blue)}
.info{display:flex;gap:12px;align-items:center}
.info .ii{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.info .tx{flex:1;font-size:12px;color:var(--slate);line-height:1.4}
.info .tx b{display:block;font:700 13.5px var(--head);color:var(--ink)}
.ph{padding:62px 18px 12px;background:#fff;border-bottom:1px solid #E6EBF2}
.ph .r{display:flex;align-items:center;gap:10px}
.ph h3{font:800 22px var(--head);color:var(--ink);letter-spacing:-.4px}
.ph .bal{margin-left:auto;background:var(--foam);color:var(--navy);border-radius:16px;padding:6px 11px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.ph .bal i{width:14px;height:14px;border-radius:50%;background:var(--amber);display:inline-block}
.ph p{font-size:12.5px;color:var(--slate);margin-top:4px}
/* perbandingan tier */
.tiercol{margin:8px 16px 0;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 2px 10px rgba(10,42,94,.06);border:2px solid transparent}
.tiercol.tcur{border-color:var(--amber);box-shadow:0 6px 18px rgba(227,162,26,.28)}
.tiercol .th{display:flex;align-items:center;gap:8px;padding:8px 12px;color:#fff}
.tiercol .th b{font:800 16px var(--head)}
.tiercol .th span{margin-left:auto;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.25);border-radius:10px;padding:3px 9px}
.tiercol .th em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:1px;background:#fff;color:var(--navy);border-radius:8px;padding:2px 7px}
.tiercol ul{list-style:none;padding:5px 12px 7px}
.tiercol li{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--ink);line-height:1.3;padding:2px 0}
.tiercol li svg{font-size:13px;color:#0B8457;margin-top:1px}
.tiercol li.inh{color:var(--slate)}
.tiercol li.inh svg{color:var(--steel)}
/* riwayat */
.hl2{margin:8px 16px 0;background:#fff;border-radius:14px;padding:10px 13px;box-shadow:0 2px 10px rgba(10,42,94,.06)}
.hl2 .a{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--slate)}
.hl2 .a svg{font-size:13px}
.hl2 .a .p{margin-left:auto;font:800 14px var(--head);color:#0B8457;font-variant-numeric:tabular-nums}
.hl2 .a .p.neg{color:var(--red)}
.hl2 .r{display:flex;align-items:center;gap:7px;margin-top:4px;font:700 14px var(--head);color:var(--ink)}
.hl2 .r svg{font-size:13px;color:var(--steel)}
.hl2 .m{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.hl2 .m span{background:var(--fog);border-radius:7px;padding:2px 7px;font-size:10.5px;color:var(--slate);font-weight:500}
.hl2 .m span.b{background:#FFF3DC;color:#8a5200}
.hl2 .m span.g{background:#E3F7EE;color:#0B6B47}
/* WhatsApp */
.wa{position:absolute;inset:0;background:#EFE7DE}
.wa:before{content:"";position:absolute;inset:0;opacity:.35;background-image:radial-gradient(#d6cbbb 1.2px,transparent 1.3px);background-size:18px 18px}
.wa .wh{position:absolute;left:0;right:0;top:0;height:104px;background:#F6F6F6;border-bottom:1px solid #DCDCDC;z-index:3;padding:56px 12px 0;display:flex;align-items:center;gap:8px}
.wa .wh .bk{color:#0A84FF;font-size:20px;display:flex;align-items:center}
.wa .wh .av{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #e3e3e3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wa .wh .av img{height:24px}
.wa .wh .nm{font:600 15.5px var(--body);color:#111;display:flex;align-items:center;gap:4px}
.wa .wh .vb{width:15px;height:15px;border-radius:50%;background:#25D366;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.wa .wh .vb svg{font-size:10px}
.wa .wh small{display:block;font-size:11.5px;color:#667}
.wa .wh .ic2{margin-left:auto;display:flex;gap:18px;color:#0A84FF;font-size:20px}
.wa .msgs{position:absolute;left:0;right:0;top:104px;bottom:76px;padding:10px 10px 0;display:flex;flex-direction:column;gap:5px;z-index:2;overflow:hidden;justify-content:flex-end}
.wa .day{align-self:center;background:#E1F2FB;color:#4a5a66;font-size:11px;border-radius:7px;padding:3px 9px;margin:4px 0;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.bub{max-width:82%;border-radius:10px;padding:6px 9px 5px;font-size:13.2px;line-height:1.38;color:#111;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bub.in{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.bub.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:3px}
.bub .tm{float:right;font-size:10.5px;color:#7a8a85;margin:6px 0 -2px 10px;display:flex;align-items:center;gap:2px}
.bub .tm svg{font-size:13px;color:#53BDEB}
.bub b{font-weight:700}
.bub .card{margin:2px -4px 5px;border-radius:8px;overflow:hidden;background:#F2F5F8}
.bub .card .ttl{font:700 13px var(--body);padding:8px 10px 2px;color:#0A2A5E}
.bub .card .sub{font-size:11.5px;padding:0 10px 8px;color:#555}
.bub .card .ban{height:64px;display:flex;align-items:center;justify-content:center;color:#fff;gap:10px;font:800 15px var(--head)}
.btns2{align-self:flex-start;max-width:82%;width:82%;display:flex;flex-direction:column;gap:3px;margin-top:-2px}
.btns2 span{background:#fff;border-radius:9px;text-align:center;color:#0A84FF;font-size:13.5px;font-weight:500;padding:8px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa .inp{position:absolute;left:0;right:0;bottom:0;height:76px;background:#F6F6F6;border-top:1px solid #DCDCDC;z-index:3;display:flex;align-items:flex-start;gap:10px;padding:10px 12px 0}
.wa .inp .f{flex:1;height:34px;border-radius:18px;background:#fff;border:1px solid #ddd;font-size:13.5px;color:#999;display:flex;align-items:center;padding:0 14px}
.wa .inp svg{font-size:22px;color:#0A84FF;margin-top:6px}
.photo{width:210px;height:150px;border-radius:7px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border:1px solid #dbe3ec;margin:0 -3px 4px;position:relative;overflow:hidden}
.photo .tk{position:absolute;left:14px;top:14px;right:14px;bottom:14px;background:#fff;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.12);padding:9px 10px;font-size:9px;color:#334;transform:rotate(-3deg)}
.photo .tk b{font-size:10px;color:#0A2A5E;display:block}
/* notifikasi iOS */
.nb{position:absolute;left:10px;right:10px;top:50px;z-index:40;background:rgba(245,245,247,.97);border-radius:20px;padding:11px 13px;display:flex;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nb .ap{width:36px;height:36px;border-radius:9px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.nb .ap svg{font-size:20px}
.nb .tx{flex:1;font-size:12.5px;color:#111;line-height:1.35}
.nb .tx b{font-weight:700}
.nb .tx small{float:right;color:#888;font-size:11px}
.nb .cp{align-self:center;background:#fff;border-radius:12px;padding:6px 10px;font-weight:700;font-size:12px;color:#0A84FF;box-shadow:0 1px 2px rgba(0,0,0,.1);white-space:nowrap}
/* web (browser) */
.br{position:absolute;inset:0;background:#fff}
.br .bar{position:absolute;left:0;right:0;bottom:0;height:84px;background:#F6F6F8;border-top:1px solid #E1E1E6;padding:10px 14px 0;z-index:5}
.br .url{height:38px;border-radius:12px;background:#E9E9EE;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13.5px;color:#222}
.br .url svg{font-size:12px;color:#555}
.br .pg{position:absolute;left:0;right:0;top:54px;bottom:84px;overflow:hidden}
.wh2{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid #EEF1F5}
.wh2 img{height:30px}
.wh2 span{margin-left:auto;font-size:11.5px;color:var(--slate)}
.wf{padding:22px 22px 0}
.wf h3{font:800 22px var(--head);color:var(--ink);letter-spacing:-.4px}
.wf p{font-size:13px;color:var(--slate);margin-top:6px;line-height:1.5}
.fld{margin-top:16px}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px}
.fld .in{height:48px;border:1.5px solid #CBD5E1;border-radius:12px;display:flex;align-items:center;padding:0 14px;font-size:16px;color:var(--ink);background:#fff}
.fld .in.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,95,209,.15)}
.fld .in .ph2{color:#94A3B8}
.fld .hint{font-size:11.5px;color:var(--slate);margin-top:5px}
.wbtn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;height:50px;border-radius:14px;background:var(--navy);color:#fff;font-weight:700;font-size:15px}
.wbtn.wa2{background:#1FAF56}
.wbtn svg{font-size:18px}
.otp{display:flex;gap:8px;margin-top:18px}
.otp span{flex:1;height:56px;border:1.5px solid #CBD5E1;border-radius:12px;display:flex;align-items:center;justify-content:center;font:800 24px var(--head);color:var(--ink)}
.otp span.f{border-color:var(--blue);background:#F5F9FF}
.sec2{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px;border-radius:12px;background:#F5F7FA;font-size:11.5px;color:var(--slate);line-height:1.45}
.sec2 svg{font-size:16px;color:#0B8457;flex:none;margin-top:1px}
.kat{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px}
.kat .it{border-radius:16px;overflow:hidden;background:#fff;border:1px solid #E6EBF2;position:relative}
.kat .it.sel{border:2px solid var(--amber);box-shadow:0 6px 16px rgba(245,166,35,.25)}
.kat .it .img{height:70px;display:flex;align-items:center;justify-content:center;font-size:32px}
.kat .it .tx{padding:8px 10px 10px}
.kat .it b{font:700 12px/1.3 var(--head);color:var(--ink);display:block;min-height:31px}
.kat .it .pt{display:flex;align-items:center;gap:5px;margin-top:5px;font-weight:800;font-size:12.5px;color:var(--navy)}
.kat .it .pt i{width:13px;height:13px;border-radius:50%;background:var(--amber);display:inline-block}
.kat .it .tg{position:absolute;left:7px;top:7px;background:rgba(255,255,255,.92);font-size:9.5px;font-weight:700;color:var(--navy);border-radius:9px;padding:2px 7px}
.wbal{margin:14px 16px 0;border-radius:16px;padding:12px 14px;background:linear-gradient(120deg,#0A2A5E,#1F5FD1);color:#fff;display:flex;align-items:center}
.wbal label{font-size:11.5px;color:#cfe0ff;display:block}
.wbal b{font:800 22px var(--head);font-variant-numeric:tabular-nums}
.wbal span{margin-left:auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.18);border-radius:10px;padding:4px 9px}
.cfm{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;padding:16px 20px 18px;box-shadow:0 -10px 30px rgba(0,0,0,.18)}
.cfm .row3{display:flex;justify-content:space-between;font-size:13px;color:var(--slate);padding:5px 0}
.cfm .row3 b{color:var(--ink)}
.vq{margin:18px 22px 0;border-radius:20px;border:1.5px dashed #C7D3E3;padding:18px;text-align:center;position:relative}
.vq .q{width:190px;height:190px;margin:0 auto}
.vq .code{font:800 17px var(--body);letter-spacing:2.5px;color:var(--navy);margin-top:10px}
.vq b{font:800 16px var(--head);color:var(--ink);display:block;margin-top:2px}
.vq small{display:block;font-size:12px;color:var(--slate);margin-top:4px;line-height:1.45}
.stamp{position:absolute;left:50%;top:94px;transform:translateX(-50%) rotate(-12deg);border:4px solid #0B8457;color:#0B8457;border-radius:12px;padding:6px 14px;font:900 22px var(--head);letter-spacing:2px;background:rgba(255,255,255,.88)}
/* naik tier */
.up{position:absolute;inset:0;background:radial-gradient(500px 420px at 50% 28%,#F5C04F 0%,#E3A21A 35%,#0A2A5E 80%);color:#fff;text-align:center;padding:84px 24px 0}
.up .medal{width:120px;height:120px;border-radius:50%;margin:0 auto;background:linear-gradient(135deg,#FFE29A,#E3A21A 55%,#B97A0E);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(255,255,255,.18),0 20px 40px rgba(0,0,0,.3);color:#5a3a00}
.up .medal svg{font-size:60px}
.up h2{font:800 28px/1.15 var(--head);margin-top:22px;letter-spacing:-.5px}
.up p{font-size:13.5px;color:#FFF3DC;margin-top:8px;line-height:1.5}
.up .lst{margin-top:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:12px 14px;text-align:left}
.up .lst div{display:flex;gap:10px;align-items:center;font-size:13px;padding:5px 0}
.up .lst div svg{font-size:16px;color:#FFE29A}
.conf{position:absolute;width:8px;height:14px;border-radius:2px}
/* galeri persona */
html:has(body.gallery){background:#EEF3FA}
body.gallery{overflow:auto;height:auto;min-height:100%;background:#EEF3FA linear-gradient(180deg,#0A2A5E 0,#123a7d 420px,#EEF3FA 420px) no-repeat}
.gal-h{padding:36px 48px 0;color:#fff;display:flex;align-items:center;gap:22px}
.gal-h .lg{background:#fff;border-radius:14px;padding:10px 14px}
.gal-h .lg img{height:46px;display:block}
.gal-h h1{font:800 34px var(--head);letter-spacing:-.6px}
.gal-h p{font-size:15px;color:#cfe0ff;margin-top:4px}
.gal-h nav{margin-left:auto;display:flex;gap:10px}
.gal-h nav a{color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:8px 16px;font-size:14px}
.gal-h nav a.on{background:#fff;color:var(--navy);font-weight:700}
.gal{display:flex;flex-wrap:wrap;gap:36px 30px;padding:36px 48px 60px}
.gal .cell{width:414px}
.gal .cell .phone{position:relative;left:auto;top:auto}
.gal .cap{margin-top:14px;font:700 15px var(--head);color:var(--ink)}
.gal .cap small{display:block;font:400 13px var(--body);color:var(--slate);margin-top:3px;line-height:1.45}
.gal .cap em{font-style:normal;display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;align-items:center;justify-content:center;margin-right:8px}
.tiercol .th.lt{color:#1b2430}.tiercol .th.lt span{background:rgba(255,255,255,.55);color:#1b2430}
.wh2 img{height:34px}
.stepchip{display:inline-flex;align-items:center;gap:8px;margin-top:30px;background:rgba(245,166,35,.16);border:1px solid rgba(245,166,35,.45);color:#FFE29A;border-radius:20px;padding:6px 14px;font:700 14px var(--body);letter-spacing:.3px}
.stepchip+h2{margin-top:14px!important}