/* ===========================================================================
   affiliate.css — SELURUH gaya halaman Program Affiliate (.aff-*, .af-*, .afr-*)
   Dipisah dari index.html (17 Sep 2026) supaya halaman affiliate bisa diubah
   tanpa menyentuh index.html. Dimuat dari index.html lewat
   <link rel="stylesheet" href="affiliate.css?v=N"> — naikkan N tiap kali
   berkas ini berubah (dan di sw.js) agar cache lama tidak dipakai.
   Pasangannya: affiliate.js. Rumus/angka tier TIDAK ada di sini —
   sumbernya app-api/subscription-config.php (AFFILIATE_REWARDS).
   =========================================================================== */

/* ===== Program Affiliate ===== */
.aff-hero{padding:20px;border-radius:22px;background:linear-gradient(135deg,rgba(91,134,255,.2),rgba(47,227,160,.08));border:1px solid rgba(105,145,240,.35);margin-top:10px}.aff-title{font-size:22px;font-weight:850;margin:8px 0}.aff-sub{color:var(--muted);font-size:12px;line-height:1.65}.aff-code{display:flex;gap:8px;align-items:center;margin-top:15px}.aff-code input{flex:1;min-width:0;padding:12px;border-radius:13px;border:1px solid var(--border);background:rgba(5,10,22,.65);color:var(--text);font-size:12px}.aff-code button,.aff-btn{border:0;border-radius:13px;padding:12px 14px;font-weight:800;background:linear-gradient(135deg,#6E9BFF,#4F7CFF);color:#071124;cursor:pointer}.aff-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:13px 0}.aff-stat{padding:13px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--border)}.aff-stat span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.aff-stat b{display:block;margin-top:5px;font-size:17px}.aff-section{margin-top:18px}.aff-section h3{font-size:13px;margin:0 0 9px}.aff-row{display:flex;gap:10px;align-items:center;padding:12px;border-radius:15px;background:rgba(255,255,255,.025);border:1px solid var(--border);margin-bottom:8px}.aff-row .grow{flex:1;min-width:0}.aff-row b{font-size:12px}.aff-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px;overflow:hidden;text-overflow:ellipsis}.aff-badge{font-size:9px;font-weight:900;padding:5px 8px;border-radius:999px;background:rgba(91,134,255,.15);color:#9DBBF5}.aff-plans{display:grid;grid-template-columns:1fr 1fr;gap:8px}.aff-plan{padding:12px;border-radius:15px;background:rgba(255,255,255,.025);border:1px solid var(--border)}.aff-plan b{font-size:12px}.aff-plan span{display:block;color:var(--muted);font-size:10px;margin-top:4px}.aff-payout{display:grid;gap:8px;margin-top:10px}.aff-payout input{width:100%;padding:12px;border-radius:13px;border:1px solid var(--border);background:rgba(5,10,22,.65);color:var(--text)}


.aff-info{padding:15px;border-radius:18px;background:linear-gradient(135deg,rgba(91,134,255,.13),rgba(47,227,160,.07));border:1px solid var(--border);line-height:1.65;color:var(--muted);font-size:12px}.aff-info b{display:block;color:var(--text);font-size:15px;margin-bottom:5px}.aff-withdraw-card{display:flex;align-items:center;gap:12px;padding:15px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid var(--border);margin-top:13px}.aff-withdraw-card .grow{flex:1}.aff-withdraw-card small{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.aff-withdraw-card strong{font-size:20px;color:var(--green)}.aff-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.72);display:none;align-items:flex-end;justify-content:center;padding:14px}.aff-modal.show{display:flex}.aff-modal-card{width:min(520px,100%);max-height:90vh;overflow:auto;border-radius:24px 24px 18px 18px;background:linear-gradient(160deg,#111b39,#07101f);border:1px solid rgba(105,145,240,.4);box-shadow:0 -20px 60px rgba(0,0,0,.45);padding:18px}.aff-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.aff-modal-head h3{margin:0;font-size:18px}.aff-close{border:0;background:rgba(255,255,255,.07);color:var(--text);width:38px;height:38px;border-radius:12px;font-size:20px}.aff-form{display:grid;gap:11px}.aff-form label{font-size:11px;color:var(--muted)}.aff-form input,.aff-form textarea{display:block;width:100%;margin-top:5px;padding:12px;border-radius:13px;border:1px solid var(--border);background:rgba(5,10,22,.72);color:var(--text);font:inherit}.aff-form textarea{min-height:74px;resize:vertical}.aff-form-note{padding:10px 12px;border-radius:13px;background:rgba(91,134,255,.1);color:var(--muted);font-size:10px;line-height:1.55}
.af-spacer{margin-left:auto}
.af-help{color:var(--muted);font-size:20px;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--card);border:1px solid var(--border)}
.af-reveal{opacity:0;transform:translateY(12px);animation:afRise .55s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes afRise{to{opacity:1;transform:none}}
.af-hero{position:relative;border-radius:24px;padding:20px 18px 18px;overflow:hidden;background:linear-gradient(150deg,rgba(91,134,255,.30),rgba(47,227,160,.05) 55%,rgba(91,134,255,.06));border:1px solid rgba(120,155,240,.34);margin-top:6px}
.af-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 82% -30%,rgba(91,134,255,.4),transparent 70%);pointer-events:none}
.af-hero::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg);animation:afSweep 6s ease-in-out 1s infinite}
@keyframes afSweep{0%{left:-60%}22%,100%{left:130%}}
.af-hero>*{position:relative;z-index:1}
.af-hpill{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:900;letter-spacing:.13em;color:#bfe9d8;background:rgba(47,227,160,.14);border:1px solid rgba(47,227,160,.3);padding:5px 11px;border-radius:999px}
.af-hpill i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:afPulse 2s infinite}
@keyframes afPulse{0%{box-shadow:0 0 0 0 rgba(47,227,160,.55)}70%{box-shadow:0 0 0 7px rgba(47,227,160,0)}100%{box-shadow:0 0 0 0 rgba(47,227,160,0)}}
.af-hlbl{color:#cdd8f0;font-size:11.5px;margin-top:15px}
.af-hbal{font-size:37px;font-weight:800;letter-spacing:-.5px;margin-top:3px;font-variant-numeric:tabular-nums;line-height:1.02;color:#eafff7}
.af-hsub{color:#c6d2ea;font-size:12px;margin-top:9px}
.af-hsub b{color:#eafff7;font-weight:700}
.af-codewrap{margin-top:16px;display:flex;gap:9px}
.af-codebox{flex:1;min-width:0;padding:10px 13px;border-radius:14px;background:rgba(4,9,20,.6);border:1px solid rgba(255,255,255,.1)}
.af-codebox .l{font-size:9px;color:var(--muted);letter-spacing:.12em;font-weight:700}
.af-codebox .v{font-size:14px;font-weight:800;letter-spacing:.07em;font-family:ui-monospace,Menlo,monospace;color:#eafff7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-cta{border:0;border-radius:14px;padding:0 16px;font:800 13px inherit;cursor:pointer;background:linear-gradient(135deg,#6E9BFF,#4F7CFF);color:#071124;display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .12s}
.af-cta:active{transform:scale(.96)}
.af-cta .ms{font-size:17px}
.af-wd{width:100%;margin-top:12px;padding:14px}
.af-grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:13px}
.af-trk{position:relative;padding:14px;border-radius:18px;background:var(--card);border:1px solid var(--border);overflow:hidden;transition:transform .18s,border-color .18s}
.af-trk:active{transform:scale(.98)}
.af-trk .ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.af-trk .ic .ms{font-size:19px}
.af-trk.sub .ic{background:rgba(91,134,255,.16);color:var(--bluetx)}
.af-trk.ib .ic{background:rgba(47,227,160,.14);color:var(--green)}
.af-trk .k{color:var(--muted);font-size:10.5px;font-weight:600}
.af-trk .v{font-size:19px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.af-trk.ib .v{color:var(--green)}
.af-trk .c{color:#5E6A84;font-size:10px;margin-top:5px}
.af-trk .edge{position:absolute;left:0;top:0;bottom:0;width:3px}
.af-trk.sub .edge{background:linear-gradient(var(--blue),transparent)}
.af-trk.ib .edge{background:linear-gradient(var(--green),transparent)}
.af-strip{display:flex;gap:9px;margin-top:11px}
.af-mstat{flex:1;text-align:center;padding:11px 4px;border-radius:15px;background:rgba(255,255,255,.028);border:1px solid var(--border)}
.af-mstat .v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.af-mstat .k{color:var(--muted);font-size:9px;margin-top:3px}
.af-share{margin-top:15px;padding:15px;border-radius:18px;background:var(--card);border:1px solid var(--border)}
.af-share h4{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:7px}
.af-share h4 .ms{font-size:16px;color:var(--bluetx)}
.af-share p{color:var(--muted);font-size:11px;margin-top:4px;line-height:1.5}
.af-linkrow{display:flex;gap:8px;margin-top:11px}
.af-lk{flex:1;min-width:0;display:flex;align-items:center;padding:11px 13px;border-radius:13px;background:rgba(4,9,20,.55);border:1px solid var(--border);font-size:11px;color:#cdd8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,Menlo,monospace}
.af-cpy{border:0;width:44px;flex-shrink:0;border-radius:13px;background:linear-gradient(135deg,#6E9BFF,#4F7CFF);color:#071124;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s}
.af-cpy:active{transform:scale(.92)}
.af-cpy .ms{font-size:18px}
.af-schips{display:flex;gap:8px;margin-top:9px}
.af-schip{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--silver);font-size:11.5px;font-weight:700;cursor:pointer;transition:transform .16s}
.af-schip:active{transform:scale(.97)}
.af-schip .ms{font-size:16px}
.af-schip.wa{color:#54e6a0}.af-schip.tg{color:#6fb6ff}
.af-seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;padding:4px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:15px}
.af-glider{position:absolute;top:4px;bottom:4px;width:calc(25% - 2px);border-radius:11px;background:linear-gradient(135deg,#5B86FF,#4F7CFF);transition:transform .32s cubic-bezier(.3,.8,.25,1);z-index:0}
.af-seg button{position:relative;z-index:1;background:none;border:0;color:var(--muted);font:700 11.5px inherit;padding:9px 4px;cursor:pointer;border-radius:11px;transition:color .25s}
.af-seg button.on{color:#071124}
.af-panel{margin-top:13px;min-height:150px}
.af-pane{display:none}
.af-pane.on{display:block;animation:afFade .35s ease}
@keyframes afFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.af-row{display:flex;gap:11px;align-items:center;padding:12px;border-radius:15px;background:rgba(255,255,255,.028);border:1px solid var(--border);margin-bottom:9px}
.af-av{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.af-av .ms{font-size:18px}
/* ---- avatarHTML() -- lingkaran foto/inisial member, dipakai lintas navprof/topbar/akun/profil/chat ---- */
.af-row .grow{flex:1;min-width:0}
.af-row .grow b{font-size:12.5px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-row .grow small{color:var(--muted);font-size:10.5px;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-amt{color:var(--green);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.af-bdg{font-size:9px;font-weight:900;padding:5px 9px;border-radius:999px;letter-spacing:.03em;white-space:nowrap}
.af-bdg.q{background:rgba(47,227,160,.15);color:var(--green)}
.af-bdg.r{background:rgba(91,134,255,.15);color:var(--bluetx)}
.af-bdg.paid{background:rgba(47,227,160,.15);color:var(--green)}
.af-bdg.wait{background:rgba(255,213,106,.14);color:var(--gold)}
.af-bdg.rej{background:rgba(255,107,133,.14);color:var(--red)}
.af-ibrow{padding:12px;border-radius:15px;background:rgba(255,255,255,.028);border:1px solid var(--border);margin-bottom:9px}
.af-ibtop{display:flex;align-items:center;gap:11px}
.af-ibtop .grow{flex:1;min-width:0}
.af-ibtop .grow b{font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-ibtop .grow small{color:var(--muted);font-size:10.5px;display:block;margin-top:2px}
.af-prog{margin-top:10px}
.af-prog .lbls{display:flex;justify-content:space-between;font-size:9.5px;color:#5E6A84;margin-bottom:5px;font-weight:600}
.af-prog .lbls b{color:var(--bluetx)}
.af-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.af-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--green));transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.af-empty{text-align:center;padding:26px 20px;color:var(--muted)}
.af-empty .eic{width:50px;height:50px;border-radius:16px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:rgba(91,134,255,.1);border:1px solid rgba(91,134,255,.2);color:var(--bluetx)}
.af-empty .eic .ms{font-size:24px}
.af-empty b{display:block;color:var(--silver);font-size:13px;font-weight:700;margin-bottom:5px}
.af-empty span{font-size:11.5px;line-height:1.55}
.af-benefits{display:grid;gap:9px;margin-top:14px}
.af-benefit{display:flex;gap:11px;align-items:center;padding:12px 13px;border-radius:15px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.af-benefit .bic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.af-benefit .bic .ms{font-size:19px}
.af-benefit b{font-size:12.5px;display:block}
.af-benefit small{color:var(--muted);font-size:10.5px;display:block;margin-top:2px;line-height:1.4}
.af-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);z-index:10000;background:rgba(20,28,44,.96);border:1px solid rgba(47,227,160,.4);color:#eafff7;font-size:12px;font-weight:600;padding:11px 16px;border-radius:13px;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:.3s;box-shadow:0 20px 40px -12px rgba(0,0,0,.7)}
.af-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.af-toast .ms{font-size:16px;color:var(--green)}


/* ===== ROADMAP REWARD AFFILIATE (afr-*) =====
   Tangga 16 hadiah yang dinaiki dengan LOT + REFERRAL sekaligus. Awalan `afr-`
   dipilih supaya tidak bertabrakan dengan gaya `af-`/`aff-` yang sudah ada.
   Datanya dari blok `rewards` di api/affiliate/status.php; sumber kebenarannya
   AFFILIATE_REWARDS di app-api/subscription-config.php. Tokens warna memakai
   :root milik aplikasi, jadi ikut berubah bila tema berubah. */
.afr-kicker{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(91,134,255,.16);border:1px solid rgba(91,134,255,.3);color:#C8D7FF;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.afr-kicker .ms{font-size:13px}
.afr-hero{position:relative;margin-top:12px;padding:20px 18px 18px;border-radius:26px;overflow:hidden;
  background:linear-gradient(150deg,rgba(91,134,255,.32),rgba(47,227,160,.06) 55%,rgba(91,134,255,.07));
  border:1px solid rgba(120,155,240,.36);isolation:isolate}
.afr-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px 220px at 88% -20%,rgba(91,134,255,.42),transparent 68%)}
.afr-hero::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);animation:afrSweep 6.5s ease-in-out 1s infinite}
@keyframes afrSweep{0%,100%{left:-60%}50%{left:120%}}
.afr-title{font-family:'Cinzel',serif;font-weight:600;font-size:21px;letter-spacing:.03em;margin:10px 0 5px;color:#fff}
.afr-sub{color:var(--bluetx);font-size:12px;line-height:1.6;max-width:40ch}
.afr-sub b{color:#fff}
.afr-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.afr-stat{position:relative;padding:13px 14px;border-radius:17px;background:rgba(5,10,22,.38);border:1px solid var(--border);overflow:hidden;min-width:0}
/* Ikon hantu ditaruh di kanan-BAWAH: label di atas bisa dua baris ("HADIAH
   TERBUKA"), dan ikon di kanan-atas menindihnya. */
.afr-stat .ms{position:absolute;right:10px;bottom:10px;font-size:22px;color:rgba(255,255,255,.12)}
.afr-stat span{display:block;color:var(--muted);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.afr-stat b{display:block;margin-top:6px;font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.afr-stat small{display:block;margin-top:3px;color:#8a95b5;font-size:9.5px;line-height:1.4;padding-right:22px}
/* <b> di dalam keterangan kecil (mis. "kurang 3.150 lot") harus tetap inline —
   tanpa ini ia mewarisi aturan .afr-stat b di atas dan pecah jadi baris besar. */
.afr-stat small b{display:inline;margin:0;font-size:inherit;letter-spacing:0;color:#e7ecf8}
.afr-stat.next b{color:var(--gold);font-size:13.5px;line-height:1.3}
.afr-stat.unlocked b{color:var(--green)}
.afr-rule{margin-top:12px;padding:9px 11px;border-radius:13px;background:rgba(5,10,22,.32);border:1px dashed rgba(157,187,245,.35);color:#c9d6f5;font-size:10.5px;line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.afr-rule .ms{font-size:15px;color:var(--gold);flex:none;margin-top:1px}

.afr-sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 2px 10px}
.afr-sec b{font-size:14px;color:#F1F5FF}
.afr-sec small{color:var(--muted);font-size:10px;font-weight:700}

.afr-legend{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.afr-legend span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px 6px 8px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--border);font-size:9.5px;font-weight:700;color:var(--muted)}
.afr-legend i{width:8px;height:8px;border-radius:50%;display:block;flex:none}
.afr-legend .dot-locked{background:#3a4359}
.afr-legend .dot-current{background:var(--gold);box-shadow:0 0 0 3px rgba(255,213,106,.22)}
.afr-legend .dot-open{background:var(--green)}
.afr-legend .dot-claimed{background:var(--blue)}

.afr-roadmap{position:relative}
.afr-path-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.afr-path-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 9}
.afr-path-fg{fill:none;stroke:url(#afrGrad);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(47,227,160,.55))}
/* Daftar tier. Di HP satu kolom; di layar lebar dua kolom berselang-seling
   (kiri, kanan, kiri, ...) dengan plat hadiah menghadap ke tengah, sehingga
   jalur SVG yang menembus plat-plat itu berkelok seperti peta level. */
.afr-list{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:10px}
.afr-item{position:relative;opacity:0;transform:translateY(14px);animation:afrRise .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes afrRise{to{opacity:1;transform:none}}
.afr-card{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--border);transition:border-color .25s,background .25s,transform .25s;position:relative;overflow:hidden}
.afr-card::before{content:"";position:absolute;inset:0;background:radial-gradient(240px 120px at var(--afr-gx,0%) 0%,var(--afr-glow,rgba(91,134,255,.14)),transparent 70%);pointer-events:none;opacity:.9}
.afr-body{flex:1;min-width:0;position:relative}
/* Plat hadiah: kotak besar bergradasi per tier. Warna dari --afr-c1/--afr-c2
   yang disetel inline oleh JS (16 rona menaik dari teal ke merah). */
.afr-plate{width:74px;height:74px;border-radius:24px;flex:none;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--afr-c1,#2FE3A0),var(--afr-c2,#1f9d6f));box-shadow:0 12px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 16px rgba(0,0,0,.18);transition:transform .25s,box-shadow .25s,filter .25s}
.afr-plate .ms{font-size:38px;color:#fff;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.afr-plate .num{position:absolute;top:-9px;left:-9px;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:#0b1020;border:1.5px solid rgba(255,255,255,.3);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;color:#fff;letter-spacing:.02em}
.afr-plate .afr-badge-sm{position:absolute;bottom:-7px;right:-7px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--bg)}
.afr-plate .afr-badge-sm .ms{font-size:12px;color:#071124;filter:none}
.afr-item.locked .afr-plate{filter:saturate(.35) brightness(.5);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.afr-item.locked .afr-plate .num{border-color:rgba(255,255,255,.12);color:#8894b3}
.afr-item.locked .afr-card{opacity:.82}
.afr-item.locked .afr-card::before{opacity:.35}
.afr-item.current .afr-plate{box-shadow:0 0 0 5px rgba(255,213,106,.18),0 0 34px rgba(255,213,106,.55),0 14px 30px rgba(0,0,0,.45);animation:afrBreathe 2.4s ease-in-out infinite}
@keyframes afrBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.afr-item.current .afr-card{border-color:rgba(255,213,106,.45);background:linear-gradient(160deg,rgba(255,213,106,.12),rgba(91,134,255,.06));box-shadow:0 18px 44px rgba(0,0,0,.35);--afr-glow:rgba(255,213,106,.22)}
.afr-item.open .afr-plate{box-shadow:0 0 0 5px rgba(47,227,160,.16),0 0 28px rgba(47,227,160,.5),0 14px 30px rgba(0,0,0,.45)}
.afr-item.open .afr-card{border-color:rgba(47,227,160,.4);background:linear-gradient(160deg,rgba(47,227,160,.1),rgba(255,255,255,.02));--afr-glow:rgba(47,227,160,.2)}
.afr-item.claimed .afr-card{border-color:rgba(91,134,255,.3);--afr-glow:rgba(91,134,255,.16)}
.afr-item.rejected .afr-card{border-color:rgba(255,107,133,.35);--afr-glow:rgba(255,107,133,.14)}
.afr-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.afr-card-head>div{min-width:0}
.afr-name{font-size:15px;font-weight:800;color:#F4F7FF;line-height:1.25;letter-spacing:-.01em}
.afr-item.locked .afr-name{color:#aab3cc}
.afr-value{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px}
.afr-value b{font-size:15px;color:#fff;font-weight:800;letter-spacing:-.01em}
.afr-item.locked .afr-value b{color:#c6cde0}
.afr-value .chip{font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--muted);border:1px solid var(--border)}
.afr-req{display:block;margin-top:6px;font-size:10px;color:#8b96b4;font-weight:600}
.afr-req .ms{font-size:12px;vertical-align:-2px}
.afr-tag{flex:none;font-size:8.5px;font-weight:900;letter-spacing:.06em;padding:5px 9px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.afr-tag.locked{background:rgba(255,255,255,.05);color:#7784a0}
.afr-tag.current{background:rgba(255,213,106,.16);color:var(--gold);border:1px solid rgba(255,213,106,.32)}
.afr-tag.open{background:rgba(47,227,160,.14);color:var(--green)}
.afr-tag.pending{background:rgba(255,213,106,.14);color:var(--gold)}
.afr-tag.disetujui{background:rgba(47,227,160,.14);color:var(--green)}
.afr-tag.dikirim{background:rgba(91,134,255,.16);color:var(--bluetx)}
.afr-tag.ditolak{background:rgba(255,107,133,.14);color:var(--red)}
.afr-gauges{display:grid;gap:8px;margin-top:11px}
.afr-gauge-row{display:grid;grid-template-columns:58px 1fr 38px;align-items:center;gap:8px}
.afr-gauge-lbl{font-size:9.5px;font-weight:800;color:var(--muted2);display:flex;align-items:center;gap:3px;white-space:nowrap}
.afr-gauge-lbl .ms{font-size:12px}
.afr-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.afr-bar i{display:block;height:100%;width:0;border-radius:999px;transition:width 1.05s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 10px rgba(91,134,255,.45)}
.afr-bar i.lot{background:linear-gradient(90deg,var(--blue),#8fb0ff)}
.afr-bar i.ref{background:linear-gradient(90deg,#2fbf8c,var(--green));box-shadow:0 0 10px rgba(47,227,160,.45)}
.afr-bar i.met{background:linear-gradient(90deg,var(--green),#8CFFD8)}
.afr-gauge-pct{font-size:10px;font-weight:800;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.afr-gauge-pct.met{color:var(--green)}
.afr-gauge-det{font-size:9.5px;color:#8b96b4;font-weight:600;grid-column:2/4;margin-top:-3px;font-variant-numeric:tabular-nums}
.afr-gap{margin-top:11px;padding:9px 11px;border-radius:13px;font-size:11px;font-weight:700;line-height:1.4;display:flex;gap:7px;align-items:flex-start}
.afr-gap .ms{font-size:15px;margin-top:.5px;flex:none}
.afr-item.current .afr-gap{background:rgba(255,213,106,.1);color:#F3DDA1;border:1px solid rgba(255,213,106,.22)}
.afr-req-compact{margin-top:9px;font-size:10px;color:#7d89a8;font-weight:600;display:flex;align-items:center;gap:5px}
.afr-req-compact .ms{font-size:13px}
.afr-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.afr-status{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;line-height:1.4;min-width:0;flex:1}
.afr-status small{overflow-wrap:anywhere}
.afr-status .ms{font-size:15px}
.afr-status.pending{color:var(--gold)}
.afr-status.disetujui{color:var(--green)}
.afr-status.dikirim{color:var(--bluetx)}
.afr-status.ditolak{color:var(--red)}
.afr-status small{display:block;font-weight:600;color:var(--muted);font-size:9.5px}
.afr-btn-claim{border:0;cursor:pointer;border-radius:13px;padding:11px 18px;font-weight:800;font-size:12px;font-family:inherit;
  background:linear-gradient(135deg,var(--green),#1fcf90);color:#04241a;display:inline-flex;align-items:center;gap:6px;box-shadow:0 10px 24px rgba(47,227,160,.32);transition:transform .15s;animation:afrPulse 2s ease-in-out infinite}
@keyframes afrPulse{0%,100%{box-shadow:0 10px 24px rgba(47,227,160,.32)}50%{box-shadow:0 10px 30px rgba(47,227,160,.6)}}
.afr-btn-claim:active{transform:scale(.95)}
.afr-btn-claim .ms{font-size:16px}
.afr-btn-ghost{border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;border-radius:11px;padding:8px 12px;font-size:10px;font-weight:800;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.afr-btn-ghost .ms{font-size:13px}
/* Layar lebar: peta berkelok. Kartu kiri menaruh platnya di sisi kanan, kartu
   kanan di sisi kiri, jadi semua plat berjajar di dekat tengah dan jalurnya
   menembus mereka zig-zag. Statistik hero jadi satu baris empat kolom. */
@media(min-width:760px){
  .afr-stats{grid-template-columns:repeat(4,1fr)}
  .afr-list{grid-template-columns:1fr 1fr;column-gap:64px;row-gap:14px}
  .afr-item.l{grid-column:1}
  .afr-item.r{grid-column:2}
  .afr-item.l .afr-card{flex-direction:row-reverse;--afr-gx:100%}
  .afr-item.l .afr-plate .num{left:auto;right:-9px}
  .afr-item.l .afr-plate .afr-badge-sm{right:auto;left:-7px}
  .afr-item.l .afr-card-head{flex-direction:row-reverse;text-align:right}
  .afr-item.l .afr-value{justify-content:flex-end}
  .afr-item.l .afr-req-compact,.afr-item.l .afr-gap{flex-direction:row-reverse;text-align:right}
  .afr-item.l .afr-foot{flex-direction:row-reverse}
  .afr-item.l .afr-status{flex-direction:row-reverse;text-align:right}
  .afr-plate{width:84px;height:84px;border-radius:26px}
  .afr-plate .ms{font-size:44px}
  .afr-item.current .afr-plate{width:92px;height:92px}
  .afr-name{font-size:16.5px}
}
/* Saldo komisi (langganan + saldo lama). Lot tidak lagi jadi uang, jadi kartu ini
   sengaja lebih tenang daripada roadmap di atasnya. */
.afr-saldo{margin-top:6px;padding:15px 16px;border-radius:20px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;gap:12px}
.afr-saldo .ic{width:42px;height:42px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,213,106,.14);color:var(--gold)}
.afr-saldo .grow{flex:1;min-width:0}
.afr-saldo .k{font-size:9.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.afr-saldo .v{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.afr-saldo .c{font-size:9.5px;color:#8a95b5;margin-top:2px;line-height:1.4}
.afr-saldo .af-cta{margin:0;padding:10px 13px;flex:none}

/* Modal klaim: memakai kerangka .aff-modal aplikasi (lihat afLiftModal) */
.afr-choice{display:flex;align-items:center;gap:12px;padding:13px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.03);margin-bottom:9px;cursor:pointer;transition:border-color .2s,background .2s}
.afr-choice:active{transform:scale(.98)}
.afr-choice.rec{border-color:rgba(47,227,160,.4);background:rgba(47,227,160,.06)}
.afr-choice .ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;background:rgba(91,134,255,.15);color:var(--bluetx)}
.afr-choice.rec .ic{background:rgba(47,227,160,.16);color:var(--green)}
.afr-choice .grow{flex:1;min-width:0}
.afr-choice .grow b{display:block;font-size:12.5px}
.afr-choice .grow span{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.afr-choice .chip{font-size:8.5px;font-weight:900;padding:3px 7px;border-radius:999px;background:rgba(47,227,160,.16);color:var(--green);flex:none}
.afr-choice.busy{opacity:.5;pointer-events:none}
.afr-modal-note{margin-top:6px;padding:10px 12px;border-radius:13px;background:rgba(91,134,255,.1);color:var(--muted);font-size:9.8px;line-height:1.55}
.afr-modal-req{margin:0 0 12px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border);font-size:10.5px;color:#c9d6f5;line-height:1.5}
.afr-note{margin-top:10px;padding:10px 12px;border-radius:13px;background:rgba(255,107,133,.08);border:1px solid rgba(255,107,133,.25);color:#f3c1cb;font-size:10.5px;line-height:1.5}

@media (prefers-reduced-motion:reduce){
  .afr-hero::after,.afr-item.current .afr-node{animation:none!important}
  .afr-item{opacity:1!important;transform:none!important;animation:none!important}
  .afr-bar i,.afr-path-fg{transition:none!important}
}

/* ===========================================================================
   ROADMAP HIDUP (v2) — tambahan di atas gaya afr-* di atas.
   - maskot phoenix beranimasi di hero (sayap mengepak, mata berkedip, piala);
   - "pejalan": maskot kecil yang terbang menyusuri jalur dari tangga 1 sampai
     posisi progres pengguna, menyalakan tiap plat yang dilewati;
   - jalur latar yang berjalan + komet cahaya di bagian yang sudah ditempuh;
   - plat berisi ilustrasi hadiah (folder hadiah/).
   =========================================================================== */
.afr-mascot{position:absolute;top:8px;right:6px;width:96px;height:96px;z-index:0;pointer-events:none;
  animation:afrFloat 3.6s ease-in-out infinite;filter:drop-shadow(0 10px 22px rgba(60,120,255,.5))}
.afr-mascot svg,.afr-walker svg{width:100%;height:100%;display:block;overflow:visible}
.afr-hero>.afr-kicker{position:relative}
.afr-hero>.afr-title,.afr-hero>.afr-sub{position:relative;padding-right:92px}
@keyframes afrFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}

.afr-m-wl{transform-origin:44px 58px;animation:afrFlapL .5s ease-in-out infinite alternate}
.afr-m-wr{transform-origin:76px 58px;animation:afrFlapR .5s ease-in-out infinite alternate}
@keyframes afrFlapL{from{transform:rotate(14deg)}to{transform:rotate(-18deg)}}
@keyframes afrFlapR{from{transform:rotate(-14deg)}to{transform:rotate(18deg)}}
.afr-m-eyes{transform-origin:60px 44px;animation:afrBlink 4.2s infinite}
@keyframes afrBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.afr-m-crest{transform-origin:60px 28px;animation:afrFlick .35s ease-in-out infinite alternate}
@keyframes afrFlick{from{transform:scaleY(.9) skewX(-4deg)}to{transform:scaleY(1.08) skewX(4deg)}}
.afr-m-tail{transform-origin:55px 86px;animation:afrTail 1.2s ease-in-out infinite alternate}
.afr-m-tail.t2{transform-origin:66px 86px;animation-delay:-.6s}
@keyframes afrTail{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.afr-m-trophy{transform-origin:11px 22px;animation:afrTrophy 1.8s ease-in-out infinite}
@keyframes afrTrophy{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg) translateY(-2px)}}
.afr-m-spark path,.afr-m-glint{transform-box:fill-box;transform-origin:center;animation:afrTwinkle 1.6s ease-in-out infinite}
.afr-m-spark path:nth-child(2){animation-delay:.8s}
.afr-m-glint{animation-duration:2.4s}
@keyframes afrTwinkle{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.1)}}

/* jalur */
.afr-roadmap{padding-top:36px}
.afr-path-bg{animation:afrMarch 1.1s linear infinite}
@keyframes afrMarch{to{stroke-dashoffset:-10}}
.afr-comet{fill:#fff;filter:drop-shadow(0 0 6px #8FF3FF) drop-shadow(0 0 12px #5B86FF)}

/* pejalan */
.afr-walker{position:absolute;left:0;top:0;width:48px;height:48px;z-index:3;pointer-events:none;will-change:transform}
.afr-walker-fig{width:100%;height:100%;transform:rotate(var(--afr-tilt,0deg));transition:transform .25s}
.afr-walker svg{animation:afrBob 1.1s ease-in-out infinite;filter:drop-shadow(0 6px 14px rgba(60,120,255,.6))}
@keyframes afrBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.afr-walker:not(.tiba) .afr-m-wl,.afr-walker:not(.tiba) .afr-m-wr{animation-duration:.2s}
.afr-bubble{position:absolute;left:46px;top:-4px;white-space:nowrap;padding:5px 9px;border-radius:10px 10px 10px 3px;
  background:var(--gold);color:#2a1d00;font-size:10px;font-weight:900;letter-spacing:.02em;box-shadow:0 6px 16px rgba(0,0,0,.35);
  opacity:0;transform:scale(.5) translateY(6px);transform-origin:0 100%;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.afr-walker.tiba .afr-bubble{opacity:1;transform:none}

/* plat bergambar */
.afr-plate{width:80px;height:80px}
.afr-plate.has-img .ms.fb{opacity:0}
.afr-img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;z-index:1;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.35));transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.afr-plate .num,.afr-plate .afr-badge-sm,.afr-lock{z-index:2}
.afr-shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0;
  background:radial-gradient(60% 50% at 30% 20%,rgba(255,255,255,.35),transparent 70%)}
.afr-shine::after{content:"";position:absolute;top:-20%;left:-80%;width:50%;height:140%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:afrShine 4.5s ease-in-out infinite}
@keyframes afrShine{0%,70%{left:-80%}100%{left:140%}}
.afr-item.locked .afr-shine::after{display:none}
.afr-lock{position:absolute;bottom:-7px;right:-7px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#1c2336;border:2.5px solid var(--bg);color:#9aa6c4}
.afr-lock .ms{font-size:12px}
.afr-card:hover .afr-img{transform:scale(1.08) rotate(-3deg)}
.afr-item.current .afr-img{animation:afrHop 2.4s ease-in-out infinite}
@keyframes afrHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) scale(1.04)}}
.afr-plate::before,.afr-plate::after{content:"";position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;opacity:0}
.afr-item.hit .afr-plate::before{border:2px solid var(--afr-c1,#2FE3A0);animation:afrRing .8s ease-out}
.afr-item.current .afr-plate::after{border:2px solid rgba(255,213,106,.85);animation:afrRing 1.8s ease-out infinite}
@keyframes afrRing{0%{opacity:.95;transform:scale(.92)}100%{opacity:0;transform:scale(1.45)}}
.afr-card{transition:border-color .25s,background .25s,transform .25s}
.afr-card:hover{transform:translateY(-2px);border-color:rgba(157,187,245,.28)}

@media(min-width:760px){
  .afr-mascot{width:132px;height:132px;top:6px;right:16px}
  .afr-hero>.afr-title,.afr-hero>.afr-sub{padding-right:150px}
  .afr-walker{width:60px;height:60px}
  .afr-bubble{left:58px;top:-2px;font-size:11px}
  .afr-plate{width:92px;height:92px}
  .afr-item.current .afr-plate{width:102px;height:102px}
  .afr-item.l .afr-lock{right:auto;left:-7px}
}
@media (prefers-reduced-motion:reduce){
  .afr-mascot,.afr-mascot *,.afr-walker *,.afr-path-bg,.afr-plate::before,.afr-plate::after,.afr-shine::after,.afr-img{animation:none!important}
  .afr-comet{display:none}
}

/* ===========================================================================
   HERO AKUN + LEVEL PARTNER + ADS KIT (v3)
   =========================================================================== */
.afr-me{position:relative;display:flex;align-items:center;gap:12px;margin-top:14px;padding-right:96px}
.afr-me-av{flex:none;width:54px;height:54px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#6E9BFF,#2FE3A0)}
.afr-me-av>*:not(.afr-me-cam){width:50px!important;height:50px!important;border:2px solid #0b1020;border-radius:50%}
.afr-me-fb{display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:#071124;background:linear-gradient(135deg,#9DBBF5,#5B86FF)}
.afr-me-tx{min-width:0}
.afr-me-tx>b{display:block;font-size:18px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afr-lvchip{margin-top:5px;display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 4px;border-radius:999px;cursor:pointer;font:inherit;
  border:1px solid color-mix(in srgb,var(--lv1) 55%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--lv2) 40%,transparent),rgba(255,255,255,.03));color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.02em}
.afr-lvchip .ms{font-size:15px;color:var(--muted)}
.afr-badge{display:inline-block;vertical-align:middle;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));flex:none}
.afr-bal{position:relative;margin-top:16px}
.afr-bal .k{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bluetx)}
.afr-bal .v{margin-top:4px;font-size:38px;line-height:1.05;font-weight:800;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(91,134,255,.35)}
.afr-bal .c{margin-top:6px;font-size:11.5px;color:#aab8d8;line-height:1.45}
.afr-bal .c b{color:#e8efff}
.afr-hbtns{position:relative;display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.afr-hbtn{flex:1 1 140px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 14px;border-radius:14px;cursor:pointer;font:inherit;font-weight:800;font-size:12.5px;
  border:1px solid rgba(157,187,245,.28);background:rgba(5,10,22,.35);color:#e8efff;transition:transform .12s}
.afr-hbtn .ms{font-size:18px}
.afr-hbtn.pri{border:0;background:linear-gradient(135deg,var(--green),#1fcf90);color:#04241a;box-shadow:0 10px 26px -8px rgba(47,227,160,.6)}
.afr-hbtn:disabled{opacity:.45;cursor:default}
.afr-hbtn:not(:disabled):active{transform:scale(.97)}
.afr-lvprog{position:relative;margin-top:14px;padding:11px 12px;border-radius:15px;background:rgba(5,10,22,.35);border:1px solid var(--border)}
.afr-lvprog.top{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--gold)}
.afr-lvprog-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11.5px;color:#c9d6f5}
.afr-lvprog-h span{display:inline-flex;align-items:center;gap:5px}
.afr-lvprog-h b{color:#fff}
.afr-lvprog-h small{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.afr-lvbars{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.afr-intro{margin:-4px 2px 12px;font-size:11.5px;line-height:1.55;color:var(--muted)}
.afr-intro b{color:var(--silver)}

/* kartu Ads Kit */
.afr-ads{position:relative;display:flex;align-items:center;gap:12px;margin-top:14px;padding:16px 14px 16px 18px;border-radius:20px;cursor:pointer;overflow:hidden;
  background:radial-gradient(260px 140px at 100% 0,rgba(91,134,255,.35),transparent 70%),linear-gradient(135deg,rgba(91,134,255,.16),rgba(139,111,255,.08));
  border:1px solid rgba(120,155,240,.35);transition:transform .15s}
.afr-ads:active{transform:scale(.99)}
.afr-ads .tx{flex:1;min-width:0}
.afr-ads b{display:block;font-size:16px;font-weight:800;color:#fff}
.afr-ads span{display:block;margin-top:4px;font-size:11.5px;line-height:1.45;color:#aab8d8}
.afr-ads img{width:108px;height:88px;flex:none;object-fit:contain;animation:afrFloat 4s ease-in-out infinite}
.afr-ads-btn{margin-top:11px;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-radius:11px;cursor:pointer;font:inherit;font-size:12px;font-weight:800;
  background:var(--gold);color:#2a1d00;box-shadow:0 8px 20px -8px rgba(255,213,106,.7)}
.afr-ads-btn .ms{font-size:16px;display:inline}

/* modal level */
.afr-lv{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.03);margin-bottom:8px}
.afr-lv .grow{flex:1;min-width:0}.afr-lv b{display:block;font-size:13.5px}.afr-lv small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.afr-lv.kunci .afr-badge{filter:grayscale(.85) brightness(.7)}
.afr-lv.kini{border-color:rgba(255,213,106,.45);background:linear-gradient(135deg,rgba(255,213,106,.12),rgba(91,134,255,.05))}
.afr-lv-tag{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:900;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted)}
.afr-lv-tag .ms{font-size:12px}
.afr-lv-tag.ok{background:rgba(47,227,160,.14);color:var(--green)}
.afr-lv-tag.now{background:rgba(255,213,106,.18);color:var(--gold)}

/* modal ads kit */
.afr-ads-card{width:min(760px,100%)}
.afr-ads-pdf{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,rgba(255,107,133,.18),rgba(255,213,106,.08));border:1px solid rgba(255,107,133,.35)}
.afr-ads-pdf>.ms:first-child{font-size:30px;color:#FF8FA3}.afr-ads-pdf div{flex:1}
.afr-ads-pdf b{display:block;font-size:13px}.afr-ads-pdf small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.afr-ads-sec{margin:16px 2px 8px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.afr-ads-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.afr-ad{padding:8px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);min-width:0}
.afr-ad .th{display:flex;align-items:center;justify-content:center;height:130px;border-radius:10px;overflow:hidden;background:#05070d}
.afr-ad .th img{max-width:100%;max-height:100%;display:block}
.afr-ad b{display:block;margin-top:7px;font-size:12px}.afr-ad small{display:block;font-size:10px;color:var(--muted)}
.afr-ad .bt{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.afr-ad .bt a,.afr-ad .bt button{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:7px 8px;border-radius:9px;font:inherit;font-size:10.5px;font-weight:800;
  cursor:pointer;text-decoration:none;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--silver)}
.afr-ad .bt .pri{border:0;background:linear-gradient(135deg,#6E9BFF,#4F7CFF);color:#071124}
.afr-ad .bt .ms{font-size:14px}
.afr-ad .bt button:disabled{opacity:.5}
.afr-cap{padding:11px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);margin-bottom:8px}
.afr-cap .hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.afr-cap b{font-size:12px}
.afr-cap button{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:9px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--silver);font:inherit;font-size:10.5px;font-weight:800;cursor:pointer}
.afr-cap button .ms{font-size:14px}
.afr-cap p{margin-top:6px;font-size:11px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}

@media(min-width:560px){.afr-ads-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:760px){
  .afr-me{padding-right:150px}
  .afr-bal .v{font-size:46px}
  .afr-hbtns{max-width:460px}
  .afr-ads{padding:20px 22px}
  .afr-ads img{width:150px;height:120px}
  .afr-ads b{font-size:19px}
}
html[data-theme="terang"] .afr-intro b{color:#1A2334}
@media (prefers-reduced-motion:reduce){.afr-ads img{animation:none}}

/* ===== Konfirmasi klaim ke Telegram (v4) ===== */
.afr-tg{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:11px;text-decoration:none;
  font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2AABEE,#229ED9);box-shadow:0 8px 18px -8px rgba(42,171,238,.8)}
.afr-tg.big{width:100%;padding:14px;font-size:13.5px;border-radius:14px;margin-top:4px}
.afr-tg:active{transform:scale(.97)}
.afr-ok{text-align:center;padding:6px 2px 2px}
.afr-ok .ic{width:60px;height:60px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(47,227,160,.15);color:var(--green);animation:afrRing2 .6s cubic-bezier(.3,1.6,.5,1)}
.afr-ok .ic .ms{font-size:34px}
@keyframes afrRing2{from{transform:scale(.4);opacity:0}}
.afr-ok>b{display:block;font-size:17px}
.afr-ok p{margin:6px 0 12px;font-size:11.5px;line-height:1.55;color:var(--muted)}
.afr-ok p b{color:var(--silver)}
.afr-ok .afr-btn-ghost{margin-top:8px;width:100%;justify-content:center;padding:11px}

/* ===== Foto profil (v5) ===== */
button.afr-me-av{position:relative;border:0;cursor:pointer;font:inherit;display:block}
.afr-me-cam{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#08122B;border:2px solid #0b1020;box-shadow:0 3px 8px rgba(0,0,0,.4);transition:transform .15s}
.afr-me-cam .ms{font-size:13px}
button.afr-me-av:hover .afr-me-cam{transform:scale(1.1)}
.afr-foto-card{width:min(420px,100%)}
.afr-foto-prev{display:flex;justify-content:center;padding:8px 0 14px}
.afr-foto-prev>*{border-radius:50%;box-shadow:0 0 0 4px rgba(91,134,255,.35),0 14px 30px rgba(0,0,0,.4)}
.afr-foto-btns{display:flex;gap:8px}
.afr-hbtn.del{color:var(--red);border-color:rgba(255,107,133,.35)}
.afr-foto-err{min-height:16px;margin:8px 2px 4px;font-size:11px;color:var(--red);text-align:center}
.afr-foto-save{width:100%}