/* ===========================================================================
   Monbil Account Hub — "hub" layer (redesain 20 Sep 2026)
   Dimuat TERAKHIR (setelah style.css, aurora.css, dan CSS halaman) supaya
   menang. Satu bahasa visual untuk auth, checkout, dashboard, saldo, riwayat,
   profil — web & HP. Token warna ikut aurora.css (--blue, --surface, dst).
   =========================================================================== */

:root{
  --hub-grad:linear-gradient(135deg,#2563eb,#4f46e5);
  --hub-ring:0 0 0 3px rgba(37,99,235,.14);
  --hub-r:16px; --hub-r-sm:12px;
  --hub-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --hub-shadow-lg:0 12px 32px rgba(16,24,40,.08);
  --hub-nav-h:72px;
}
:is([data-theme="dark"],[data-theme="sedang"]){
  --hub-shadow:0 1px 2px rgba(0,0,0,.3);
  --hub-shadow-lg:0 16px 40px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------- latar jaringan (canvas, seperti landing monbil.id) */
/* Lapisan latar di z-index -1 (bukan stacking context di .app) supaya drawer sidebar,
   scrim, dan topbar tetap bertumpuk seperti semula di HP. */
html{background:var(--bg)}
body.aurora{background:transparent}
.hub-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 480px at 92% -10%,rgba(99,102,241,.10),transparent 60%),
  radial-gradient(1000px 520px at 2% -8%,rgba(37,99,235,.10),transparent 58%),var(--bg)}
.hub-bg canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(125% 115% at 50% 38%,#000 62%,transparent 100%);mask-image:radial-gradient(125% 115% at 50% 38%,#000 62%,transparent 100%)}
:is([data-theme="dark"],[data-theme="sedang"]) .hub-bg canvas{opacity:.7}

/* ---------------------------------------------------------------- shell */
body.aurora .sidebar{width:260px;box-shadow:4px 0 24px rgba(16,24,40,.08),1px 0 0 var(--border);border-right:0}
:is([data-theme="dark"],[data-theme="sedang"]) body.aurora .sidebar{box-shadow:4px 0 28px rgba(0,0,0,.45),1px 0 0 var(--border)}
body.aurora .topbar{box-shadow:0 4px 20px rgba(16,24,40,.06)}
body.aurora .nav-foot{margin:12px;padding:6px;display:flex;align-items:center;gap:4px;border-radius:14px}
body.aurora .nav-foot .user-card{flex:1;min-width:0;padding:6px;gap:8px}
body.aurora .nav-foot .avatar{width:32px;height:32px;font-size:12.5px;background:var(--hub-grad)}
body.aurora .nav-foot .user-name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.aurora .nav-foot .user-mail{font-size:11px;max-width:118px}
body.aurora .nav-foot .icon-btn{width:32px;height:32px;border-radius:9px;flex:none}
body.aurora .nav-foot .logout-form{margin:0;flex:none}
body.aurora .theme-btn:hover{color:var(--blue);border-color:var(--blue)}
.theme-btn .ic-sun{display:none}
:is([data-theme="dark"],[data-theme="sedang"]) .theme-btn .ic-sun{display:block}
:is([data-theme="dark"],[data-theme="sedang"]) .theme-btn .ic-moon{display:none}
body.aurora .copyright{display:none}
body.aurora .topbar .topbar-actions{display:flex;align-items:center;gap:8px}
body.aurora .topbar .icon-btn{width:38px;height:38px;border-radius:10px}
body.aurora .topbar .topbar-title{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--text)}
body.aurora .topbar .brand-name{display:none}
body.aurora .topbar .brand{gap:9px}

body.aurora .wa-float-cs{z-index:47}
/* bottom nav HP */
.mnav{display:none}
@media(max-width:760px){
  .mnav{position:fixed;left:0;right:0;bottom:0;z-index:45;height:var(--hub-nav-h);background:var(--surface);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:8px 6px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(16,24,40,.06)}
  .mnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--muted);text-decoration:none;border-radius:12px}
  .mnav a .ic{width:22px;height:22px}
  .mnav a.is-active{color:var(--blue);background:var(--blue-tint)}
  body.aurora .main{padding-bottom:calc(var(--hub-nav-h) + 20px)}
  body.aurora.is-guest .main{padding-bottom:16px}
  body.aurora.is-guest .mnav{display:none}
  body.aurora:not(.is-guest) .wa-float-cs{bottom:calc(var(--hub-nav-h) + 12px)!important}
  body.aurora:not(.is-guest):has(.co-bar:not([hidden])) .wa-float-cs{bottom:calc(var(--hub-nav-h) + 86px)!important}
}

/* stats → kartu KPI ber-ikon */
body.aurora .stat{border-radius:var(--hub-r);padding:14px 16px;box-shadow:var(--hub-shadow)}
body.aurora .stat-ic{width:38px;height:38px;border-radius:11px}
body.aurora .stat-ic .ic{width:18px;height:18px}
@media(max-width:760px){body.aurora .stats{grid-template-columns:repeat(2,1fr);gap:10px}body.aurora .stat{padding:12px}body.aurora .stat-num{font-size:19px}}
body.aurora .ws{border-radius:14px}
body.aurora .ws-add,body.aurora .btn{border-radius:var(--hub-r-sm)}
body.aurora .page-head h1{font-size:22px}
body.aurora .page-head .sub{font-size:14px;margin-top:4px}
body.aurora .page-head{margin-bottom:20px}

/* ---------------------------------------------------------------- auth */
body:has(> .auth-wrapper),.auth-wrapper,.auth-wrapper button,.auth-wrapper input{font-family:'Figtree',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.auth-wrapper{padding:24px;background:radial-gradient(900px 500px at 0% 0%,rgba(99,102,241,.10),transparent 60%),radial-gradient(800px 460px at 100% 100%,rgba(37,99,235,.08),transparent 60%),#f4f6fa}
.auth-card{max-width:980px;min-height:640px;border-radius:20px;box-shadow:0 20px 60px rgba(16,24,40,.12);border:1px solid #e6e9f0;grid-template-columns:minmax(0,1fr) minmax(0,460px)}
.auth-brand{padding:40px 40px;background:linear-gradient(160deg,#5b5fe8 0%,#4f46e5 45%,#6366f1 100%)}
.auth-brand::before{display:none}
.auth-brand__logo img{border-radius:10px;background:rgba(255,255,255,.18);box-shadow:none;padding:6px}
.auth-brand__wordmark span{text-transform:none;letter-spacing:0;font-size:12px;opacity:.8}
.auth-brand__body{display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:520px}
.auth-brand__headline{font-size:30px;line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:0}
.auth-brand__lead{font-size:15px;line-height:1.5;opacity:.85;margin:0}
.auth-brand__benefits{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.auth-brand__benefits li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.10);font-size:14.5px;font-weight:500;margin:0}
.auth-brand__benefits .b-icon{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.18);flex:none;display:grid;place-items:center}
.auth-brand__footer{font-size:12.5px;opacity:.75;border:0;padding:0;margin:0}
.auth-form{padding:40px 40px;display:flex;flex-direction:column;justify-content:center;width:100%}
.auth-form h1{font-size:28px;letter-spacing:-.02em;font-weight:700}
.auth-form .subtitle{font-size:14.5px}
.auth-form .form-group input[type="text"],.auth-form .form-group input[type="email"],.auth-form .form-group input[type="tel"],.auth-form .form-group input[type="password"]{border-radius:12px;height:46px;padding-top:0;padding-bottom:0}
.auth-form .btn-primary{border-radius:12px;height:48px;background:var(--hub-grad);box-shadow:0 6px 16px rgba(37,99,235,.28);font-size:15px}
.auth-form .btn-primary:hover{filter:brightness(.96)}
.promo-callout{display:none}
.auth-form .auth-trust{justify-content:center}
.auth-form .auth-link{font-size:14px}
.auth-order-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--gray-200);text-align:center;font-size:13px;color:var(--gray-500)}
.auth-order-note a{font-weight:600}
@media(max-width:860px){
  .auth-wrapper{padding:0}
  .auth-card{grid-template-columns:1fr;max-width:none;min-height:100vh;display:flex;flex-direction:column;border-radius:0;border:0;box-shadow:none}
  .auth-brand{padding:22px 20px 26px}
  .auth-brand__logo{margin-bottom:18px}
  .auth-brand__headline{font-size:24px;margin:0 0 6px}
  .auth-brand__lead{display:block;font-size:14px}
  .auth-brand__benefits{display:none}
  .auth-brand__body{gap:0}
  .auth-form{padding:22px 20px 28px;max-width:none}
  .auth-form h1{font-size:24px}
}
/* halaman single (verify/reset/forgot) tetap ringkas di tengah */
.auth-card--single{min-height:0;max-width:460px;margin:40px auto;border-radius:20px;box-shadow:var(--hub-shadow-lg);border:1px solid var(--gray-200)}
.auth-wrapper:has(.auth-card--single){padding:24px;background:#f4f6fa;display:flex;align-items:center}
.auth-card--single .auth-form{padding:32px}

/* ---------------------------------------------------------------- checkout (satu kolom, mobile-first) */
body.aurora .onepage{max-width:760px;padding:0 0 76px}
body.aurora.is-guest .main{padding-top:24px}
body.aurora .onepage-form{display:flex;flex-direction:column;gap:10px}
body.aurora .num-section{border-radius:var(--hub-r);box-shadow:var(--hub-shadow);margin:0;background:var(--surface);border-color:var(--border)}
body.aurora .num-section__head{padding:8px 18px;min-height:44px;gap:10px;background:linear-gradient(90deg,var(--blue-tint),var(--blue-tint-2));border-bottom:1px solid var(--blue-tint-2)}
body.aurora .num-section__badge{background:var(--blue);color:#fff}
body.aurora .num-section{overflow:hidden}
body.aurora .num-section__head > div{flex:1 1 0;min-width:0}
body.aurora .num-section__badge{border:0;font-weight:700;width:24px;height:24px;font-size:12px}
body.aurora .num-section__head h2{font-size:15.5px;font-weight:700;color:var(--text);margin:0}
body.aurora .num-section__head p{display:none}
body.aurora .num-section__head p{color:var(--muted)}
body.aurora .num-section__head .num-section__aside{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
body.aurora .num-section__body{padding:12px 18px 14px}
body.aurora .num-section__body .form-group{margin-bottom:10px}
body.aurora .num-section__body .form-group label{color:var(--text)}
body.aurora .num-section__body .input-wrap input,body.aurora .num-section__body .subdomain-wrap input{border-radius:10px;height:40px;padding-top:0;padding-bottom:0}
body.aurora .subdomain-wrap__suffix{background:var(--surface-2);color:var(--muted);border-color:var(--field-border)}

/* paket: dua kartu pilihan */
body.aurora .pkg-list{gap:10px;margin:0}
body.aurora .pkg-list .pkg-line{border:1px solid var(--border);border-radius:14px;box-shadow:var(--hub-shadow);background:var(--surface)}
body.aurora .pkg-list .pkg-line:hover{border-color:var(--border-strong);box-shadow:var(--hub-shadow)}
body.aurora .pkg-list .pkg-line.is-selected,body.aurora .pkg-list .pkg-line.pkg-line--pro.is-selected,body.aurora .pkg-list .pkg-line.pkg-line--max.is-selected{border-color:var(--blue);box-shadow:var(--hub-ring);background:var(--blue-tint)}
:is([data-theme="dark"],[data-theme="sedang"]) body.aurora .pkg-list .pkg-line.is-selected{background:var(--surface-2)}
body.aurora .pkg-list .pkg-line .pkg-line__head{display:grid;grid-template-columns:20px 32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 14px;margin:0;background:transparent;border:0;border-radius:0;overflow:visible;width:100%;text-align:left;cursor:pointer;font-family:inherit}
body.aurora .pkg-line__head::before{content:"";position:static;left:auto;top:auto;bottom:auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface);box-sizing:border-box}
body.aurora .pkg-line.is-selected .pkg-line__head::before{border:6px solid var(--blue)}
body.aurora .pkg-line__icon{width:32px;height:32px;border-radius:9px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;flex:none}
body.aurora .pkg-line.is-selected .pkg-line__icon{background:var(--blue);color:#fff}
body.aurora .pkg-line__icon svg{width:18px;height:18px}
body.aurora .pkg-line__info{min-width:0;display:flex;flex-direction:column;gap:2px}
body.aurora .pkg-line__info strong{font-size:15px;font-weight:600;color:var(--text)}
body.aurora .pkg-line__desc{font-size:12.5px;color:var(--muted);line-height:1.4}
body.aurora .pkg-line__feat-link{font-size:12.5px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:4px}
body.aurora .pkg-line__price{text-align:right;flex:none;line-height:1.15}
body.aurora .pkg-line__price small{display:block;font-size:11.5px;color:var(--muted)}
body.aurora .pkg-line__price strong{font-size:15px;font-weight:700;color:var(--text)}
body.aurora .pkg-line__price span{display:block;font-size:11.5px;color:var(--muted)}
body.aurora .pkg-line__check{display:none}
body.aurora .pkg-line__body{padding:0 14px 12px;border-top:0;background:transparent}
body.aurora .pkg-line__tier-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--text);margin:4px 0 8px}
body.aurora .pkg-line__tier-label small{font-weight:500;color:var(--muted);font-size:12px}
body.aurora .pkg-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body.aurora .pkg-tier{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);position:relative}
body.aurora .pkg-tier:hover{border-color:var(--border-strong);background:var(--surface)}
body.aurora .pkg-tier.is-selected,body.aurora .pkg-line--pro .pkg-tier.is-selected,body.aurora .pkg-line--max .pkg-tier.is-selected{border-color:var(--blue);box-shadow:var(--hub-ring);background:var(--surface)}
body.aurora .pkg-tier__check{position:absolute;top:10px;right:10px;width:18px;height:18px;border:1.5px solid var(--border-strong);background:var(--surface)}
body.aurora .pkg-tier.is-selected .pkg-tier__check,body.aurora .pkg-line--pro .pkg-tier.is-selected .pkg-tier__check,body.aurora .pkg-line--max .pkg-tier.is-selected .pkg-tier__check{background:var(--blue);border-color:var(--blue)}
body.aurora .pkg-tier__main strong{font-size:18px;font-weight:800;line-height:1.1;letter-spacing:-.01em;margin:0;color:var(--text)}
body.aurora .pkg-tier__main strong small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;letter-spacing:0}
body.aurora .pkg-tier__main > small{display:none}
body.aurora .pkg-tier__price{text-align:left;margin-top:2px}
body.aurora .pkg-tier__price strong{font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--text)}
body.aurora .pkg-tier__price small{display:block;font-size:11.5px;color:var(--muted)}
/* baris "Kapasitas · Ubah" (HP) */
body.aurora .pkg-cap-row{display:none;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;width:100%;text-align:left;font-family:inherit}
body.aurora .pkg-cap-row__k{display:block;font-size:12px;color:var(--muted)}
body.aurora .pkg-cap-row__v{display:block;font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.aurora .pkg-cap-row__btn{margin-left:auto;flex:none;padding:6px 12px;border-radius:9px;background:var(--blue-tint);color:var(--blue);font-weight:600;font-size:13px}
@media(max-width:640px){
  body.aurora .pkg-list .pkg-line .pkg-line__head{grid-template-columns:20px 36px minmax(0,1fr) auto;gap:10px;padding:12px 14px}
  body.aurora .pkg-list .pkg-line .pkg-line__price{grid-column:auto;grid-row:auto;text-align:right;padding-top:0}
  body.aurora .pkg-cap-row{display:flex}
  body.aurora .pkg-line__body:not(.is-cap-open) .pkg-tiers,body.aurora .pkg-line__body:not(.is-cap-open) .pkg-line__tier-label{display:none}
  body.aurora .pkg-line__body.is-cap-open .pkg-cap-row__btn{background:var(--surface-2);color:var(--muted)}
  body.aurora .pkg-line__body.is-cap-open .pkg-tiers{margin-top:8px}
  body.aurora .pkg-line__desc--long{display:none}
  body.aurora .num-section__aside.chip{display:none}
}
@media(min-width:641px){body.aurora .pkg-line__desc--short{display:none}}
/* enterprise: kartu ringkas — ikon · judul+keterangan · tombol */
body.aurora .pkg-enterprise-cta{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:8px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);box-shadow:none;text-decoration:none}
body.aurora .pkg-enterprise-cta:hover{transform:none;border-color:var(--blue);box-shadow:none}
body.aurora .pkg-enterprise-cta__icon{width:32px;height:32px;border-radius:9px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center}
body.aurora .pkg-enterprise-cta__info{display:flex;flex-direction:column;gap:1px;min-width:0}
body.aurora .pkg-enterprise-cta__info strong{color:var(--text);font-size:14px;font-weight:600}
body.aurora .pkg-enterprise-cta__info span{color:var(--muted);font-size:12px;line-height:1.35}
body.aurora .pkg-enterprise-cta__cta{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:9px;background:var(--surface);border:1px solid var(--border-strong);color:var(--blue);font-weight:600;font-size:13px;white-space:nowrap}
body.aurora .pkg-enterprise-cta:hover .pkg-enterprise-cta__cta{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:560px){body.aurora .pkg-enterprise-cta{grid-template-columns:32px minmax(0,1fr);row-gap:8px}body.aurora .pkg-enterprise-cta__cta{grid-column:2;justify-self:start}}

/* durasi: pil */
body.aurora .dur-pills{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
body.aurora .dur-pill{height:36px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;gap:5px;font-weight:600;font-size:14px;color:var(--text);cursor:pointer;font-family:inherit;white-space:nowrap;padding:0 8px}
body.aurora .dur-pill small{font-weight:500;color:var(--muted);font-size:12px}
body.aurora .dur-pill.is-on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 4px 12px rgba(37,99,235,.25)}
body.aurora .dur-pill.is-on small{color:#dbe4ff}
body.aurora .dur-custom{display:none;margin-top:8px}
body.aurora .dur-custom.is-open{display:block}
body.aurora .duration-row{margin:0}
body.aurora .duration-row__label{color:var(--muted)}
body.aurora .duration-row__select{background:var(--field);border-color:var(--field-border);color:var(--text);border-radius:12px}
body.aurora .duration-row__promo{color:var(--green);font-size:13px;font-weight:600;margin:10px 0 0;display:flex;align-items:center;gap:6px}
@media(max-width:640px){body.aurora .dur-pills{grid-template-columns:repeat(4,minmax(0,1fr))}body.aurora .dur-pill--more{grid-column:span 4;height:auto;border:0;background:transparent;box-shadow:none;justify-content:flex-start;color:var(--blue);font-size:13px;padding:4px 2px 0}body.aurora .dur-pill--more.is-on{background:transparent;color:var(--blue)}}

/* pembayaran */
body.aurora .pay-picker__heading{display:none}
body.aurora .pay-cat-list{gap:6px;margin-bottom:8px}
body.aurora .pay-cat-card{grid-template-columns:20px 32px minmax(0,1fr) auto;gap:10px;padding:9px 14px;min-height:0;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--hub-shadow)}
body.aurora .pay-cat-card:hover{border-color:var(--border-strong)}
body.aurora .pay-cat-card.is-selected{border-color:var(--blue);border-width:1px;padding:9px 14px;box-shadow:var(--hub-ring);background:var(--blue-tint)}
:is([data-theme="dark"],[data-theme="sedang"]) body.aurora .pay-cat-card.is-selected{background:var(--surface-2)}
body.aurora .pay-cat-card__radio{border:1.5px solid var(--border-strong);width:20px;height:20px;background:var(--surface)}
body.aurora .pay-cat-card.is-selected .pay-cat-card__radio{border:6px solid var(--blue)}
body.aurora .pay-cat-card.is-selected .pay-cat-card__radio::after{display:none}
body.aurora .pay-cat-card__icon{width:32px;height:32px;border-radius:9px;background:var(--surface-2);border:0;padding:4px}
body.aurora .pay-cat-card__icon--va{background:var(--surface-2);color:var(--muted);font-size:12px}
body.aurora .pay-cat-card__main strong{font-size:14px;font-weight:600;color:var(--text)}
body.aurora .pay-cat-card__main small{font-size:12px;color:var(--muted)}
body.aurora .pay-cat-card__main{gap:1px}
body.aurora .pay-cat-card__arrow{display:none}
body.aurora .pay-cat-card__tag{margin-left:auto;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
body.aurora .pay-cat-card__tag--green{background:var(--green-tint);color:var(--green)}
body.aurora .va-bank-picker{margin:0 0 8px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
body.aurora .va-bank-picker__label{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--text)}
body.aurora .va-bank-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
body.aurora .va-bank-card{min-height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:8px}
body.aurora .va-bank-card.is-selected{border-color:var(--blue);border-width:1px;padding:8px;box-shadow:var(--hub-ring)}
body.aurora .va-bank-card__text{color:var(--text)}
@media(max-width:640px){body.aurora .va-bank-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* kupon & referral: dilipat */
body.aurora .coupon-details{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:0 14px}
body.aurora .coupon-details.is-disabled{opacity:.5;pointer-events:none}
body.aurora .coupon-details summary{list-style:none;display:flex;align-items:center;gap:10px;height:40px;cursor:pointer;font-weight:600;font-size:14px;color:var(--text)}
body.aurora .coupon-details summary::-webkit-details-marker{display:none}
body.aurora .coupon-details summary .ic{color:var(--blue)}
body.aurora .coupon-details summary .opt{margin-left:auto;font-weight:500;font-size:12.5px;color:var(--muted)}
body.aurora .coupon-details[open] summary{border-bottom:1px solid var(--border)}
body.aurora .coupon-referral-row{padding:12px 0 14px;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.aurora .coupon-row{border-radius:12px;border-color:var(--field-border);background:var(--field)}
body.aurora .coupon-row__input{background:transparent;color:var(--text);height:38px}
body.aurora .coupon-row__btn{border-radius:9px;background:var(--blue-tint);color:var(--blue);font-weight:600}
@media(max-width:640px){body.aurora .coupon-referral-row{grid-template-columns:1fr}}
/* ringkasan */
body.aurora .pay-summary{margin:8px 0 0;padding:0;border:1px solid var(--border);border-radius:var(--hub-r);background:var(--surface);box-shadow:var(--hub-shadow);overflow:hidden}
body.aurora .pay-summary__head{display:none;padding:10px 18px;border-bottom:1px dashed var(--border-strong);margin:0}
body.aurora .pay-summary__head span{font-weight:700;font-size:15px;color:var(--text)}
body.aurora .pay-summary__rows{padding:2px 18px 0;display:flex;flex-direction:column;gap:0}
body.aurora .pay-summary__row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:13.5px;border-bottom:1px solid var(--border)}
body.aurora .pay-summary__row span{color:var(--muted)}
body.aurora .pay-summary__row strong{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
body.aurora .pay-summary__row--total{border-bottom:0;margin:6px -18px 0;padding:11px 18px;border-radius:0 0 calc(var(--hub-r) - 1px) calc(var(--hub-r) - 1px);background:var(--hub-grad);color:#fff}
body.aurora .pay-summary__row--total span{color:rgba(255,255,255,.85);font-size:13px}
body.aurora .pay-summary__row--total strong{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.02em}
body.aurora #payNowBtn,body.aurora #guestPayBtn{display:none}
body.aurora .pay-method-mode > .help-text{display:none}
body.aurora:has(.co-bar:not([hidden])) .wa-float-cs{bottom:calc(86px + env(safe-area-inset-bottom))!important}
body.aurora .pay-guarantee{display:none}
body.aurora .order-payment-result{margin-top:12px}
/* sakelar trial — aura hijau lembut; saat aktif menyala neon hijau */
body.aurora .trial-top-banner{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:0;border:1px solid #bfe3cc;border-radius:var(--hub-r);background:var(--surface);color:var(--text);box-shadow:0 0 0 4px rgba(22,163,74,.06),0 6px 18px rgba(22,163,74,.10);transition:box-shadow .25s,border-color .25s}
:is([data-theme="dark"],[data-theme="sedang"]) body.aurora .trial-top-banner{border-color:rgba(62,207,120,.35)}
body.aurora .trial-top-banner[data-trial-active="1"]{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.28),0 0 18px rgba(34,197,94,.55),0 0 42px rgba(34,197,94,.3);animation:trialNeon 1.8s ease-in-out infinite alternate}
@keyframes trialNeon{from{box-shadow:0 0 0 3px rgba(34,197,94,.22),0 0 14px rgba(34,197,94,.45),0 0 32px rgba(34,197,94,.22)}to{box-shadow:0 0 0 3px rgba(34,197,94,.34),0 0 22px rgba(34,197,94,.7),0 0 52px rgba(34,197,94,.38)}}
@media(prefers-reduced-motion:reduce){body.aurora .trial-top-banner[data-trial-active="1"]{animation:none}}
body.aurora .trial-top-banner__icon{width:34px;height:34px;border-radius:10px;background:var(--green-tint);color:var(--green);display:grid;place-items:center;flex:none;transition:.25s}
body.aurora .trial-top-banner[data-trial-active="1"] .trial-top-banner__icon{background:#22c55e;color:#fff;box-shadow:0 0 12px rgba(34,197,94,.7)}
body.aurora .trial-top-banner__text{min-width:0;flex:1}
body.aurora .trial-top-banner__text strong{font-size:14px;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.aurora .trial-top-banner__badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--green-tint);color:var(--green);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
body.aurora .trial-top-banner[data-trial-active="1"] .trial-top-banner__badge{background:#22c55e;color:#fff}
body.aurora .trial-top-banner__text p{font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.35}
body.aurora .trial-top-banner__btn{flex:none;width:44px;height:26px;border-radius:999px;background:var(--border-strong);border:0;position:relative;padding:0;cursor:pointer;font-size:0;color:transparent;box-shadow:none;transition:background .2s}
body.aurora .trial-top-banner__btn::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
body.aurora .trial-top-banner[data-trial-active="1"] .trial-top-banner__btn{background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.7)}
body.aurora .trial-top-banner[data-trial-active="1"] .trial-top-banner__btn::after{left:21px}
body.aurora .trial-top-banner__btn-default,body.aurora .trial-top-banner__btn-active{display:none}
@media(max-width:560px){body.aurora .trial-top-banner{padding:10px 12px;gap:10px}body.aurora .trial-top-banner__text p{display:none}body.aurora .trial-top-banner__text strong{font-size:13.5px}}
body.aurora .pay-trial-mode{padding:14px 16px;border:1px solid #bfe3cc;border-radius:14px;background:#f2fbf5}
body.aurora .pay-trial-mode__info{margin:0;color:var(--green);font-weight:600;font-size:14px;display:flex;gap:8px;align-items:flex-start}
body.aurora .onepage-snap-btn{display:none}
body.aurora .onepage-footer{margin-top:12px;padding:10px 0 0}
/* bar total + Bayar menempel di bawah (web & HP) */
.co-bar{position:fixed;left:0;right:0;bottom:0;z-index:46;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(16,24,40,.08);padding:9px 16px calc(9px + env(safe-area-inset-bottom))}
.co-bar__in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:12px}
.co-bar__k{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-bar__v{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
.co-bar__btn{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 22px;border-radius:12px;border:0;background:var(--blue);color:#fff;font-weight:600;font-size:15px;cursor:pointer;font-family:inherit;box-shadow:0 6px 16px rgba(37,99,235,.25);white-space:nowrap}
.co-bar__btn:hover{background:var(--blue-hover)}
.co-bar__btn[disabled]{opacity:.6;cursor:default}
.co-bar__btn .ic{width:18px;height:18px}
.co-bar.is-trial .co-bar__btn{background:var(--green)}
.co-bar.is-trial .co-bar__btn:hover{background:#15803d}
@media(min-width:761px){.co-bar{padding-left:32px;padding-right:32px}body.aurora:not(.is-guest) .co-bar{left:260px}}
body.aurora .main{padding-top:24px}
@media(max-width:760px){body.aurora .main{padding-top:16px}body.aurora .onepage{padding-bottom:66px}.co-bar{bottom:0}body.aurora:not(.is-guest) .co-bar{bottom:var(--hub-nav-h)}.co-bar__btn{padding:0 20px}}
/* akun (tamu) */
body.aurora .acc-logged{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
body.aurora .acc-logged .avatar{width:34px;height:34px;font-size:13px;background:var(--hub-grad)}
body.aurora .acc-logged__n{font-weight:600;font-size:14.5px}
body.aurora .acc-logged__e{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.aurora .acc-logged .chip{margin-left:auto}
body.aurora .num-section__head .num-section__aside a{font-weight:600}
@media(max-width:640px){body.aurora .num-section__head{flex-wrap:wrap}body.aurora .num-section__head .num-section__aside{width:100%;margin-left:38px;white-space:normal}}

/* ---------------------------------------------------------------- order/workspace & success */
body.aurora .hub-hero{padding:20px 22px;border-radius:18px;background:var(--hub-grad);color:#fff;box-shadow:0 12px 32px rgba(37,99,235,.25);display:flex;flex-direction:column;gap:14px;margin-bottom:12px}
body.aurora .hub-hero__top{display:flex;align-items:center;gap:12px}
body.aurora .hub-hero__ic{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
body.aurora .hub-hero__ic .ic{width:22px;height:22px;stroke:#fff}
body.aurora .hub-hero h1{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.2}
body.aurora .hub-hero__sub{font-size:13.5px;color:rgba(255,255,255,.85);margin-top:3px}
body.aurora .hub-hero__rows{background:rgba(255,255,255,.14);border-radius:12px;padding:4px 14px;font-size:13.5px}
body.aurora .hub-hero__row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.18)}
body.aurora .hub-hero__row:last-child{border-bottom:0}
body.aurora .hub-hero__row span{color:rgba(255,255,255,.8)}
body.aurora .hub-hero__row b{text-align:right}
body.aurora .hub-hero__row code{font-family:inherit;font-weight:700;color:#fff}
body.aurora .onepage-alert{border-radius:14px}
body.aurora .pay-now-btn.hub-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;border-radius:12px;background:var(--hub-grad);color:#fff;font-weight:600;font-size:15px;border:0;box-shadow:0 6px 16px rgba(37,99,235,.28);cursor:pointer;font-family:inherit;margin-top:6px}
body.aurora .pay-now-btn.hub-cta:hover{filter:brightness(.96)}

/* ---------------------------------------------------------------- saldo */
body.aurora .wallet-balance{padding:22px;border:0;border-radius:18px;background:var(--hub-grad);color:#fff;box-shadow:0 12px 32px rgba(37,99,235,.25);margin-bottom:0}
body.aurora .wallet-balance__icon{background:rgba(255,255,255,.18);color:#fff;border-radius:12px}
body.aurora .wallet-balance__label{color:rgba(255,255,255,.8)}
body.aurora .wallet-balance__amount{color:#fff;font-size:34px;letter-spacing:-.02em}
body.aurora .wallet-balance__debt{background:#fff;color:var(--red)}
body.aurora .wallet-grid{margin-top:20px;gap:20px}
body.aurora .wallet-tool{border-radius:var(--hub-r);box-shadow:var(--hub-shadow);padding:18px}
body.aurora .wallet-tool__head>.ic{display:none}
body.aurora .wallet-tool__head p{display:none}
body.aurora .wallet-amount-field{border-radius:12px}
body.aurora .wallet-presets button{border-radius:12px;height:36px;padding:0 8px;font-size:13px;color:var(--text)}
body.aurora .wallet-presets button.is-on,body.aurora .wallet-presets button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
body.aurora .wallet-pay-section .pay-cat-card{grid-template-columns:20px 36px minmax(0,1fr);gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);min-height:0}
body.aurora .wallet-pay-section .pay-cat-card.is-selected{border-width:1px;padding:12px 14px;box-shadow:var(--hub-ring);border-color:var(--blue);background:var(--blue-tint)}
body.aurora .wallet-pay-section .pay-cat-card__icon{width:36px;height:36px;border-radius:10px;background:var(--surface-2);border:0}
body.aurora .wallet-pay-section .pay-cat-card__main strong{color:var(--text)}
body.aurora .wallet-pay-section .pay-cat-card__main small{color:var(--muted)}
body.aurora .wallet-pay-section .pay-cat-card__radio{width:20px;height:20px;border:1.5px solid var(--border-strong)}
body.aurora .wallet-pay-section .pay-cat-card.is-selected .pay-cat-card__radio{border:6px solid var(--blue)}
body.aurora .wallet-pay-section .pay-cat-card.is-selected .pay-cat-card__radio::after{display:none}
body.aurora .wallet-pay-section .pay-cat-card__arrow{display:none}
body.aurora .wallet-pay-section .va-bank-card{background:var(--surface);border:1px solid var(--border);border-radius:10px}
body.aurora .wallet-pay-section .va-bank-card.is-selected{border-width:1px;padding:10px 8px;border-color:var(--blue);box-shadow:var(--hub-ring)}
body.aurora .wallet-pay-section .va-bank-card__text{color:var(--text)}
body.aurora .wallet-pay-section .pay-summary{background:var(--surface-2);border-color:var(--border);border-radius:12px;overflow:hidden}
body.aurora .wallet-pay-section .pay-summary__row--total{margin:4px -14px -12px;padding:12px 14px}
body.aurora .wallet-pay-section .pay-summary__head span,body.aurora .wallet-pay-section .pay-summary__row strong{color:var(--text)}
body.aurora .wallet-submit{border-radius:12px;height:48px;background:var(--blue);box-shadow:0 6px 16px rgba(37,99,235,.25)}
@media(max-width:900px){body.aurora .wallet-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- riwayat / tabel */
body.aurora .rh-table-wrap{border-radius:var(--hub-r);padding:0}
body.aurora .rh-table th{padding:12px 16px;border-bottom:1px solid var(--border)}
body.aurora .rh-table td{padding:13px 16px}
body.aurora .rh-table tr:last-child td{border-bottom:0}
@media(max-width:760px){body.aurora .rh-table{font-size:12.5px}body.aurora .rh-table th,body.aurora .rh-table td{padding:10px 12px}}

/* ---------------------------------------------------------------- profil */
body.aurora .profile-card{border-radius:var(--hub-r);box-shadow:var(--hub-shadow);overflow:hidden}
body.aurora .profile-card::before{display:none}
@media(max-width:760px){body.aurora .page-head .head-actions{display:none}}
body.aurora .styled-form .form-group input{border-radius:12px;height:46px}
body.aurora .styled-form .btn-primary{border-radius:12px;height:44px}

/* ---------------------------------------------------------------- order/success */
body.aurora .success-card{border-radius:var(--hub-r);box-shadow:var(--hub-shadow);border:1px solid var(--border);background:var(--surface)}
body.aurora .success-card .btn{border-radius:12px}
body.aurora .success-card .btn-primary{background:var(--hub-grad);box-shadow:0 6px 16px rgba(37,99,235,.25)}