/* == JEMBATAN TOKEN (dihasilkan storefrontTema, jangan disunting tangan) == */
html[data-tema="royal"]{
  --t-bg:var(--bg,#f4f6fa);--t-frame:color-mix(in srgb,var(--bg,#f4f6fa) 82%,var(--txt,#162033));
  --t-surface:var(--card,#fff);--t-field:color-mix(in srgb,var(--card,#fff) 95%,var(--txt,#162033));
  --t-fill:color-mix(in srgb,var(--card,#fff) 92%,var(--txt,#162033));--t-line:var(--line,#dfe5ee);
  --t-text:var(--txt,#162033);--t-muted:var(--muted,#667085);--t-subtle:color-mix(in srgb,var(--muted,#667085) 70%,var(--card,#fff));
  --t-on-bg:var(--txt,#162033);--t-on-bg-muted:var(--muted,#667085);
  --t-on-bg-link:color-mix(in srgb,var(--brand,#4f7cff) 78%,var(--txt,#162033));
  --t-accent:var(--brand,#4f7cff);--t-accent-d:var(--brand-d,#3959be);--t-on-accent:#fff;
  --t-accent-text:color-mix(in srgb,var(--brand,#4f7cff) 78%,var(--txt,#162033));
  --t-accent-soft:color-mix(in srgb,var(--brand,#4f7cff) 12%,var(--card,#fff));
  --t-accent-line:color-mix(in srgb,var(--brand,#4f7cff) 32%,var(--line,#dfe5ee));
  --t-deep:color-mix(in srgb,var(--brand-d,#3959be) 30%,#0b1224);--t-deep-2:color-mix(in srgb,var(--brand,#4f7cff) 38%,#101a33);
  --t-on-deep:#fff;--t-on-deep-muted:rgba(255,255,255,.74);--t-scrim:rgba(6,8,14,.64);
  --t-ok:#22a95b;--t-ok-d:#13804a;--t-ok-soft:var(--ok-bg,#e9f9ef);--t-ok-text:var(--ok-tx,#0b7a3b);
  --t-err:#e5534b;--t-err-d:#a8261e;--t-err-soft:var(--err-bg,#fdecec);--t-err-text:var(--err-tx,#b42318);
  --t-err-line:color-mix(in srgb,var(--err-tx,#b42318) 30%,var(--card,#fff));
  --t-warn-soft:color-mix(in srgb,var(--gold,#f6b60c) 16%,var(--card,#fff));--t-warn-line:color-mix(in srgb,var(--gold,#f6b60c) 42%,var(--card,#fff));
  --t-warn-text:color-mix(in srgb,var(--gold-d,#d98e00) 62%,var(--txt,#162033));
  --t-gold:var(--gold,#f6b60c);--t-gold-d:var(--gold-d,#d98e00);--t-gold-soft:color-mix(in srgb,var(--gold,#f6b60c) 34%,var(--card,#fff));
  --t-gold-text:color-mix(in srgb,var(--gold-d,#d98e00) 85%,var(--txt,#162033));--t-on-gold:#2f2200;--t-promo:#d92d83;
  --t-font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--t-font-display:var(--t-font);
}
/* Kontrol formulir tidak mewarisi huruf; tema berhuruf sendiri butuh ini. */
html[data-tema="royal"] :is(input,select,textarea){font-family:inherit}
/* Kaki identitas duduk di atas kanvas halaman, bukan di atas kartu, jadi
   aksennya memakai warna tautan-di-kanvas: warna merek apa adanya nyaris
   hilang di tema berkanvas gelap (Domino, Arena, Nebula). */
html[data-tema="royal"] .ident-foot{--ident-accent:var(--t-on-bg-link)!important}
/* Baris tautan kebijakan juga duduk di kanvas, bukan di kartu. */
html[data-tema="royal"] .ident-kebijakan a{color:var(--t-on-bg-muted)}
html[data-tema="royal"] .ident-kebijakan a:hover{color:var(--t-on-bg-link)}
/* Cangkang halaman blog dan kebijakan: gayanya inline dan tidak memuat
   style.css, jadi permukaan dan teksnya dipetakan ke token di sini —
   sekali untuk semua tema. Isi artikel diberi panel supaya tetap terbaca
   di atas kanvas bertekstur atau gelap. */
html[data-tema="royal"] body{color:var(--t-on-bg)}
html[data-tema="royal"] :is(.b-title,.b-art-title,.b-lead,.b-date,.b-crumb,.b-pager-info,.b-foot){color:var(--t-on-bg)}
html[data-tema="royal"] .b-eyebrow{background:var(--t-accent-soft);color:var(--t-accent-text)}
html[data-tema="royal"] :is(.b-lead,.b-date,.b-pager-info,.b-crumb,.b-foot){color:var(--t-on-bg-muted)}
html[data-tema="royal"] :is(.b-card,.b-pager a){background:var(--t-surface);border-color:var(--t-line);color:var(--t-text)}
html[data-tema="royal"] .b-card a{color:inherit}
html[data-tema="royal"] .b-body{padding:16px 18px;border:1px solid var(--t-line);border-radius:16px;
  background:var(--t-surface);color:var(--t-text)}
html[data-tema="royal"] .b-body :is(h2,h3,h4,strong,b){color:var(--t-text)}
html[data-tema="royal"] .b-body a{color:var(--t-accent-text)}
html[data-tema="royal"] :is(.b-more,.b-card:hover h2,.b-pager a){color:var(--t-accent-text)}
html[data-tema="royal"] :is(.b-foot a,.b-crumb a:hover){color:var(--t-on-bg-link)}
html[data-tema="royal"] .b-crumb a{color:var(--t-on-bg-muted)}
html[data-tema="royal"] .b-body blockquote{border-color:var(--t-accent)}
html[data-tema="royal"]{--brand-soft:color-mix(in srgb,var(--brand,#4f7cff) 12%,var(--card,#fff));
  --brand-line:color-mix(in srgb,var(--brand,#4f7cff) 32%,var(--line,#dfe5ee))}
/* Huruf tema ikut ke halaman luar: tema bukan hanya warna. */
html[data-tema="royal"] body{font-family:var(--t-font)}
html[data-tema="royal"] :is(.b-brand,.b-title,.b-art-title,.b-card h2,.b-body h2,.b-body h3){font-family:var(--t-font-display)}
/* == /JEMBATAN TOKEN == */

/* ══ Tema ROYAL — pita biru miring, nominal tiga kolom, tombol kuning ══
   Pola toko top up itemku: header biru kerajaan yang turun jadi pita bersisi
   miring di belakang bagian atas halaman, latar biru langit, kartu putih
   berbayang biru lembut, nominal tiga kolom berikon gambar penuh, bar bayar biru
   dengan tombol kuning. Semua pemilih berawalan html[data-tema="royal"];
   aturan yang menyetel display memakai :not([hidden]). */
@font-face{font-family:"Figtree";font-style:normal;font-weight:500 900;font-display:swap;src:url('huruf/figtree-500-900.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

html[data-tema="royal"]{
  --gold:#ffc53d;--gold-d:#e0a100;
  --bg:#edf3ff;--card:#fff;--txt:#0f1d3d;--muted:#56648a;--line:#dbe5f7;
  --ok-bg:#e7f8ee;--ok-tx:#0f7a45;--err-bg:#fdecec;--err-tx:#b42318;
  --t-bg:#edf3ff;--t-frame:#d9e4f7;--t-surface:#fff;--t-field:#f5f8ff;--t-fill:#eef3fc;--t-line:#dbe5f7;
  /* --t-subtle dipakai cetakan kecil kaki identitas (alamat, hak cipta) dan
     tahapan pembayaran yang belum aktif. Nilainya digelapkan sampai lolos
     4,5:1 di latar halaman #edf3ff (4,71:1) maupun di kartu putih (5,24:1). */
  --t-text:#0f1d3d;--t-muted:#56648a;--t-subtle:#5f6c8a;
  --t-accent:var(--brand);--t-accent-d:var(--brand-d);--t-accent-text:var(--brand-text,var(--brand));--t-accent-soft:color-mix(in srgb,var(--brand) 10%,#fff);--t-accent-line:color-mix(in srgb,var(--brand) 24%,#fff);--t-on-accent:var(--brand-on,#fff);
  --t-deep:color-mix(in srgb,var(--brand) 52%,#0b0b14);--t-deep-2:color-mix(in srgb,var(--brand) 74%,#0b0b14);--t-on-deep:#fff;--t-on-deep-muted:#b3c3e8;--t-scrim:rgba(8,18,45,.62);
  --t-ok:#1fa45a;--t-ok-d:#0f7a45;--t-ok-soft:#e7f8ee;--t-ok-text:#0f7a45;
  --t-err:#e5534b;--t-err-d:#b42318;--t-err-soft:#fdecec;--t-err-line:#f4c6c2;--t-err-text:#b42318;
  --t-warn-soft:#fff7e0;--t-warn-line:#ffe19a;--t-warn-text:#7a5a12;
  --t-gold:#ffc53d;--t-gold-d:#e0a100;--t-gold-soft:#fff3cf;--t-gold-text:#9a6400;--t-on-gold:#0f1d3d;--t-promo:#e5337a;
  --t-font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--t-font-display:"Figtree",system-ui,sans-serif;
  --ry-tx:var(--brand-text,var(--brand));--ry:var(--brand);--ry2:color-mix(in srgb,var(--brand) 80%,#000);--ry-ubin:color-mix(in srgb,var(--brand) 10%,#fff);--ry-bayang:0 6px 18px color-mix(in srgb,var(--brand) 10%,transparent);
}

/* ── Header + pita miring ──────────────────────────────────────────── */
html[data-tema="royal"] .hdr{background:var(--ry);box-shadow:none}
html[data-tema="royal"] .hdr-back{border-radius:10px;background:rgba(255,255,255,.16)}
/* Logo apa adanya, tanpa kotak putih (keputusan Taka 6 Okt 2026, sama dengan ikon nominal). */
html[data-tema="royal"] .brand img#brand-logo{border-radius:10px}
/* Pita = pseudo-elemen z-index -1 dengan tepi bawah miring (clip-path).
   flow-root menahan margin banner supaya pita menempel di bawah header. */
html[data-tema="royal"] #view-topup:not([hidden]){display:flow-root;position:relative}
html[data-tema="royal"] #view-topup::before{content:"";position:absolute;z-index:-1;top:0;left:-14px;right:-14px;aspect-ratio:2.6;background:linear-gradient(180deg,var(--ry),color-mix(in srgb,var(--brand) 78%,#fff));clip-path:polygon(0 0,100% 0,100% 68%,0 100%)}
html[data-tema="royal"] section.hero.hero-mati + .event-banner{margin-top:6px}
html[data-tema="royal"] section.hero.hero-mati + .event-banner[hidden] + .card{margin-top:8px}
/* Halaman: sisi miring 40px. Bawaannya miring di dalam padding kepala sendiri;
   bila yang tampil pertama kartu, pita memanjang ke belakang kartu itu. */
html[data-tema="royal"] .page-head{position:relative;margin-bottom:14px;padding:14px 2px 56px;color:#fff}
html[data-tema="royal"] .page-head::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-14px;right:-14px;background:linear-gradient(180deg,var(--ry),color-mix(in srgb,var(--brand) 78%,#fff));clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),0 100%)}
html[data-tema="royal"] :is(#view-saldo,#view-masuk,#view-bantuan,#view-info,#view-nota) .page-head{padding-bottom:18px}
html[data-tema="royal"] :is(#view-saldo,#view-masuk,#view-bantuan,#view-info,#view-nota) .page-head::before{bottom:-54px}
/* :has() dipisah per aturan supaya peramban lama tidak membuang aturan lain. */
html[data-tema="royal"] #view-pesanan:has(> #track-card:not([hidden]),> #pay:not([hidden])) .page-head{padding-bottom:18px}
html[data-tema="royal"] #view-pesanan:has(> #track-card:not([hidden]),> #pay:not([hidden])) .page-head::before{bottom:-54px}
html[data-tema="royal"] #view-akun:has(#acct-panel-overview:not([hidden])) .page-head{padding-bottom:18px}
html[data-tema="royal"] #view-akun:has(#acct-panel-overview:not([hidden])) .page-head::before{bottom:-54px}
/* 521–700px: kolom 520px tapi header selebar layar. Di perangkat sentuh
   (bilah gulir menumpang) pita ikut selebar header. */
@media (min-width:521px) and (max-width:700px) and (hover:none){
  html[data-tema="royal"] #view-topup::before,html[data-tema="royal"] .page-head::before{left:calc(50% - 50vw);right:calc(50% - 50vw)}
}
html[data-tema="royal"] .page-head h1{color:#fff;font-size:22px;font-weight:800;letter-spacing:-.01em}
html[data-tema="royal"] .page-head p{margin-top:4px;color:rgba(255,255,255,.86);font-size:12.5px}
html[data-tema="royal"] .page-head .section-kicker{color:#cfe0ff}

/* ── Hero (kalau domain menyalakannya) ─────────────────────────────── */
html[data-tema="royal"] .hero:not(.hero-mati){border:0;border-radius:16px;background-color:#0f1d3d;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 12px 24px rgba(15,29,61,.25);
  background-image:linear-gradient(90deg,rgba(10,24,72,.96) 0%,color-mix(in srgb,var(--brand) 86%,transparent) 40%,color-mix(in srgb,var(--brand) 30%,transparent) 64%,transparent 100%),var(--hero-gambar,url('/assets/tokohiggs-hero-resmi-mitra-bergaransi.webp'))!important}
html[data-tema="royal"] .hero-trust span{border-radius:10px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
html[data-tema="royal"] .hero-trust b{background:var(--gold);color:var(--txt)}

/* ── Banner event ──────────────────────────────────────────────────── */
html[data-tema="royal"] .event-slider{border-radius:16px;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 12px 24px rgba(15,29,61,.25)}
html[data-tema="royal"] .event-dots{margin-top:11px}
html[data-tema="royal"] .event-dots button{background:#b9c8ea}
html[data-tema="royal"] .event-dots button.is-on{width:20px;background:var(--ry)}

/* ── Kartu langkah ─────────────────────────────────────────────────── */
html[data-tema="royal"] .card{border:0;border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:var(--ry-bayang)}
html[data-tema="royal"] .card h2{gap:10px;font-size:15.5px;font-weight:800}
html[data-tema="royal"] .card h2 .num{width:28px;height:28px;border-radius:9px;background:var(--ry-ubin);color:var(--ry-tx);font-size:14px;font-weight:800}
html[data-tema="royal"] .user-id-row{gap:8px}
html[data-tema="royal"] :is(#game-id,#contact-email,#track-input,#login-email,#login-code){padding:12px;border:1.5px solid var(--line);border-radius:12px;background:var(--t-field);color:var(--txt);font-weight:700}
html[data-tema="royal"] :is(#game-id,#contact-email,#track-input,#login-email,#login-code)::placeholder{color:#8190b0;font-weight:500}
html[data-tema="royal"] :is(#game-id,#contact-email,#track-input,#login-email,#login-code):focus{border-color:var(--ry-tx);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
html[data-tema="royal"] .user-id-row #check-btn,html[data-tema="royal"] #track-go{padding:0 18px;border-radius:12px;background:var(--ry);box-shadow:none;font-weight:800}
html[data-tema="royal"] .user-id-row #user-id-guide-btn{border:0;border-radius:12px;background:var(--ry-ubin)}
html[data-tema="royal"] .user-id-copy{margin-top:8px;font-size:12px;line-height:1.5}
html[data-tema="royal"] .buyer{padding:10px 12px;border-radius:12px;font-size:13.5px;font-weight:700}
/* Saklar mode ID (hanya pembeli yang login): ikut kendali tersegmen kategori. */
html[data-tema="royal"] .id-mode{padding:3px;border-radius:11px;background:var(--ry-ubin)}
html[data-tema="royal"] .id-mode button{border-radius:8px;color:#3b4f7a;font-weight:700}
html[data-tema="royal"] .id-mode button.is-on{background:#fff;color:var(--ry-tx);box-shadow:0 2px 6px color-mix(in srgb,var(--brand) 18%,transparent)}

/* Kategori: kendali tersegmen di atas lintasan biru pucat. */
html[data-tema="royal"] .product-card .tabs{gap:4px;margin:0 0 12px;padding:4px;border-radius:12px;background:var(--ry-ubin);backdrop-filter:none}
html[data-tema="royal"] .product-card .tabs :is(a,button){flex:1 0 0;min-width:max-content;padding:9px 10px;border:0;border-radius:9px;background:transparent;box-shadow:none;color:#3b4f7a;font-size:12.5px;font-weight:700}
html[data-tema="royal"] .product-card .tabs :is(a,button).active{background:#fff;color:var(--ry-tx);box-shadow:0 2px 6px color-mix(in srgb,var(--brand) 18%,transparent)}
html[data-tema="royal"] .product-card .tabs :is(a,button):focus-visible{outline:2px solid var(--ry);outline-offset:-2px}

/* Nominal: tiga kolom — ikon gambar penuh (tanpa ubin putih, keputusan Taka 5 Okt
   2026), nama di tengah, harga biru, pil poin emas. */
html[data-tema="royal"] #products{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html[data-tema="royal"] .prod{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:10px 5px 11px;border:1.5px solid transparent;border-radius:14px;background:var(--t-field);box-shadow:none;color:var(--txt);text-align:center}
html[data-tema="royal"] .prod:hover{border-color:#b9cdf5}
html[data-tema="royal"] .prod .ic,html[data-tema="royal"] .prod.prod-image-native .ic{display:grid;place-items:center;flex:0 0 auto;width:50px;height:50px;margin-bottom:7px;overflow:hidden;border-radius:12px;background:none;box-shadow:none;font-size:34px}
html[data-tema="royal"] .prod .ic img,html[data-tema="royal"] .prod.prod-image-native .ic img{width:100%;height:100%;object-fit:contain;color:transparent}
/* Nama TIDAK dipesan dua baris (dulu min-height:2.4em): nama satu baris
   menyisakan rongga di atas harga. Harga menempel ke bawah kartu, jadi baris
   yang semua namanya pendek tetap rapat, dan bila tetangganya bernama dua
   baris, harganya tetap sejajar (7 Okt 2026). */
html[data-tema="royal"] .prod .n{flex:0 0 auto;width:100%;font-size:11px;font-weight:800;line-height:1.2}
html[data-tema="royal"] .prod .prod-price{flex-direction:column;align-items:center;gap:4px;margin-top:auto;padding-top:4px}
html[data-tema="royal"] .prod-price strong{color:var(--ry-tx);font-size:12.5px;font-weight:800;letter-spacing:-.01em}
html[data-tema="royal"] .prod-price del{font-size:10px;font-weight:600}
html[data-tema="royal"] .prod .prod-points{padding:2px 6px;border-radius:999px;background:#fff3cf;color:#8a5a00;font-size:9.5px;font-weight:700}
/* Harga coret domain: rata tengah di kartu tiga kolom; label jingga lembut,
   bukan keluarga warna promo (label promo padat). Harga sudah menempel ke
   bawah kartu di semua domain (aturan .prod-price di atas), jadi kartu tanpa
   coret tetap sejajar dengan tetangganya. */
html[data-tema="royal"] .prod-coret{justify-content:center;gap:2px 4px;margin-bottom:-1px}
html[data-tema="royal"] .prod-diskon{padding:1px 5px;border-radius:999px;background:#ffeee6;color:#c2410c;font-size:9px}
html[data-tema="royal"] .prod-diskon.prod-diskon-promo{background:var(--t-promo);color:#fff}
html[data-tema="royal"] .prod .promo-copy{align-items:center;margin-top:5px}
html[data-tema="royal"] .prod .promo-copy b{font-size:10px}
html[data-tema="royal"] .prod .promo-copy small{font-size:9px}
html[data-tema="royal"] .prod .promo-badge{top:-1.5px;left:-1.5px;right:auto;padding:3px 6px;border-radius:13px 0 10px 0;clip-path:none;font-size:8.5px}
html[data-tema="royal"] .prod.active{border-color:var(--ry-tx);background:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--brand) 18%,transparent)}
/* Tab centang di pojok kanan atas kartu terpilih. */
html[data-tema="royal"] .prod.active::after{content:"✓";position:absolute;top:-1.5px;right:-1.5px;width:22px;height:20px;border-radius:0 13px 0 10px;background:var(--ry);color:#fff;font-size:11px;font-weight:800;line-height:20px;text-align:center}
html[data-tema="royal"] .prod:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 40%,transparent);outline-offset:2px}
html[data-tema="royal"] .flash-sale{border:0;border-radius:16px}
html[data-tema="royal"] .flash-products{grid-auto-columns:minmax(118px,34%)}
/* Dua kartu Flash Sale: dua kolom sama lebar. Kolom 34% sengaja memuat tiga
   kartu per layar, jadi dua kartu menyisakan seperempat rak kosong (6 Okt
   2026). Satu kartu sudah selebar rak lewat aturan dasar di style.css. */
html[data-tema="royal"] .flash-products[data-jumlah="2"]{grid-auto-columns:calc((100% - 9px) / 2)}
html[data-tema="royal"] .flash-products .prod{border-color:transparent;background:#fff}
html[data-tema="royal"] .flash-ticket{clip-path:none;border-radius:8px;background:var(--gold);color:var(--txt)}

/* Email */
html[data-tema="royal"] .email-help{padding:0;border:0;background:none;color:var(--muted);font-size:12px;line-height:1.5}
html[data-tema="royal"] .email-help::before{border-radius:6px;background:var(--ry-ubin);color:var(--ry-tx)}
html[data-tema="royal"] .email-help[data-kind="error"]{padding:9px 11px;border-radius:12px;background:var(--err-bg)}
html[data-tema="royal"] .email-help[data-kind="error"]::before{background:var(--err-tx);color:#fff}

/* Langkah 4: saldo & poin di pita biru, metode putih */
html[data-tema="royal"] .checkout-benefits{padding:12px;border:0;border-radius:12px;background:linear-gradient(90deg,var(--ry),#2f5fe8);color:#fff}
html[data-tema="royal"] .checkout-benefits-head>span{color:#fff;font-size:13px;font-weight:800;letter-spacing:0;text-transform:none}
html[data-tema="royal"] .checkout-benefits-head small{color:rgba(255,255,255,.92);font-size:12px}
html[data-tema="royal"] .benefit-card{border:0;border-radius:12px;background:#fff}
html[data-tema="royal"] .benefit-card.locked{background:rgba(255,255,255,.92)}
html[data-tema="royal"] .benefit-card.active{box-shadow:0 0 0 3px var(--gold)}
html[data-tema="royal"] .benefit-icon{border-radius:10px}
html[data-tema="royal"] .benefit-note{color:rgba(255,255,255,.92)}
html[data-tema="royal"] .external-pay-head{border-top:1px dashed var(--line)}
html[data-tema="royal"] .external-pay-head>span{font-size:13px;font-weight:800;letter-spacing:0;text-transform:none}
html[data-tema="royal"] .paym{gap:6px;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
html[data-tema="royal"] .paym:hover{border-color:#9fb8ee}
html[data-tema="royal"] .paym.active{border-color:var(--ry-tx);background:color-mix(in srgb,var(--brand) 6%,#fff);box-shadow:none}
html[data-tema="royal"] .paym .paym-n{font-size:14px;font-weight:700;color:var(--txt)}
html[data-tema="royal"] .paym .paym-p{font-size:12px;color:var(--muted)}
html[data-tema="royal"] .paym.active .paym-p{color:var(--ry-tx);font-weight:800}
html[data-tema="royal"] .paym-internal{background:linear-gradient(135deg,#eaf1ff,#fff)}

/* ── Bar bayar: kartu biru, total putih, tombol kuning ─────────────── */
html[data-tema="royal"] .summary{gap:6px 4px;padding:10px 8px 10px 14px;border:0;border-radius:16px 16px 0 0;background:linear-gradient(135deg,var(--ry),var(--ry2));box-shadow:0 -8px 22px rgba(0,0,0,.12);color:#fff}
html[data-tema="royal"] .summary-assurance{padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.16);color:#cfe0ff;font-size:11px;font-weight:600}
html[data-tema="royal"] .summary>div::before{color:rgba(255,255,255,.8);font-size:11px;font-weight:600}
html[data-tema="royal"] .summary #sum-price{color:#fff;font-size:19px;font-weight:800}
html[data-tema="royal"] #buy-btn{padding:6px 18px;border-radius:12px;background:var(--gold);box-shadow:none;color:var(--txt);font-size:14px;font-weight:800}
html[data-tema="royal"] #buy-btn:disabled{opacity:1;background:rgba(255,255,255,.16);color:rgba(255,255,255,.72)}

/* ── Tombol CS: ubin membulat ──────────────────────────────────────── */
html[data-tema="royal"] .bantuan-tg{border-radius:16px;box-shadow:0 6px 16px rgba(15,29,61,.25)}
html[data-tema="royal"] .bantuan-avatar{border-radius:12px}
html[data-tema="royal"] .bantuan-avatar>img{border-radius:10px}

/* ── Bilah navigasi bawah ──────────────────────────────────────────── */
html[data-tema="royal"] .bnav{border-top:0;box-shadow:0 -4px 14px color-mix(in srgb,var(--brand) 8%,transparent)}
html[data-tema="royal"] .bnav a{color:#67759a;font-weight:600}
html[data-tema="royal"] .bnav a[aria-current="page"]{color:var(--ry-tx);font-weight:800}
html[data-tema="royal"] .bnav a[aria-current="page"]::before{display:none}
html[data-tema="royal"] .bnav a[aria-current="page"] svg{fill:#d6e3ff}
html[data-tema="royal"] .bnav li.center a{color:var(--ry-tx);font-weight:800}
html[data-tema="royal"] .bnav .bnav-fab{top:-20px;width:52px;height:52px;border:0;border-radius:18px;background:var(--ry);box-shadow:0 0 0 5px var(--bg),0 8px 16px color-mix(in srgb,var(--brand) 35%,transparent)}
html[data-tema="royal"] .bnav li.center a[aria-current="page"] .bnav-fab{background:var(--ry2);box-shadow:0 0 0 5px var(--bg),0 8px 18px color-mix(in srgb,var(--brand) 45%,transparent)}
html[data-tema="royal"] .bnav li.center .bnav-dot.pts{top:-26px;left:calc(50% + 14px)}

/* ── Artikel, jelajah, kaki ────────────────────────────────────────── */
html[data-tema="royal"] .seo-jelajah{border:0;border-radius:16px;box-shadow:var(--ry-bayang)}
html[data-tema="royal"] .seo-jelajah a{color:var(--ry-tx);font-weight:800}
html[data-tema="royal"] .seo-artikel{--seo-soft:#f3f7ff;--seo-line:#dde7f8;border:0;border-radius:16px;box-shadow:var(--ry-bayang)}
html[data-tema="royal"] .seo-article-head{padding:14px 16px;background:#fff}
html[data-tema="royal"] .seo-article-head::after{content:none}
html[data-tema="royal"] .seo-eyebrow{margin-bottom:6px;color:var(--muted);font-size:10.5px;font-weight:800;letter-spacing:.08em}
html[data-tema="royal"] .seo-eyebrow span{width:14px;background:var(--gold)}
html[data-tema="royal"] .seo-artikel h2{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
html[data-tema="royal"] .seo-artikel h3{font-weight:800}
html[data-tema="royal"] .seo-toggle{margin-top:8px;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--ry-tx);font-size:13px;font-weight:800}
html[data-tema="royal"] .seo-article-lead{padding-inline:16px}
html[data-tema="royal"] .seo-block{border-radius:14px;box-shadow:none}
html[data-tema="royal"] .seo-block::before{background:var(--ry)}
html[data-tema="royal"] .seo-step-list li::before{border-radius:9px;background:var(--ry-ubin);color:var(--ry-tx);box-shadow:none}
html[data-tema="royal"] .seo-faq{border-radius:12px}
html[data-tema="royal"] .seo-faq summary::after{border-radius:8px}
html[data-tema="royal"] .seo-return{background:linear-gradient(120deg,var(--ry2),var(--ry))}
/* Kaki identitas: garis batas dan pemisah "|" dinaikkan supaya kelihatan di
   latar biru langit. Baris tautan kebijakan (.ident-kebijakan, terbit bersama
   kaki identitas) memakai biru kerajaan — ±6:1 di latar #edf3ff. */
html[data-tema="royal"] .ident-foot{border-top-color:#d3e0f6}
html[data-tema="royal"] .ident-segel>span{background:var(--ry-ubin);box-shadow:none;color:var(--ry-tx);font-weight:800;letter-spacing:.03em}
html[data-tema="royal"] .ident-kontak a{border-bottom-color:#cbdaf3}
html[data-tema="royal"] .ident-kebijakan li::before{border-left-color:#c3d4f6}
html[data-tema="royal"] .ident-kebijakan a{color:var(--ry-tx);font-weight:700}
html[data-tema="royal"] .ident-kebijakan a:hover{color:var(--ry-tx)}

/* ── Pembayaran /pesanan/<nomor> ───────────────────────────────────── */
html[data-tema="royal"] .pay-page{padding:18px 16px 14px;border:0;border-radius:18px;box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 10%,transparent)}
html[data-tema="royal"] .payment-card::before{content:none}
html[data-tema="royal"] .pay-kicker{color:var(--ry-tx);font-weight:800;letter-spacing:.1em}
html[data-tema="royal"] .payment-card h3{font-size:19px;font-weight:800}
html[data-tema="royal"] .pay-invoice{padding:14px 16px;border:0;border-radius:14px;background:var(--bg);box-shadow:none}
html[data-tema="royal"] .pay-invoice-label{color:#3b4f7a;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:none}
html[data-tema="royal"] .pay-invoice-amount{color:var(--ry-tx);font-size:30px;font-weight:900;letter-spacing:-.02em}
html[data-tema="royal"] .pay-invoice-product{color:var(--muted);font-size:13px;font-weight:600}
html[data-tema="royal"] .pay-funding-breakdown{border-top-color:#c9d8f5}
/* Tahapan naik ke atas tagihan seperti mockup: #pay-status dilebur jadi anak
   flex #pay supaya urutannya bisa diatur tanpa mengubah DOM. */
html[data-tema="royal"] #pay:not([hidden]){display:flex;flex-direction:column}
html[data-tema="royal"] #pay-status{display:contents}
html[data-tema="royal"] #pay-status>*{order:3}
html[data-tema="royal"] #pay-status>:is(.pay-steps,.pay-status-logo){order:1}
html[data-tema="royal"] #pay-body{order:2}
html[data-tema="royal"] #pay-close{order:4;align-self:flex-start}
html[data-tema="royal"] #pay .pay-state-head{margin-top:14px}
html[data-tema="royal"] .pay-steps{margin:0 0 14px}
html[data-tema="royal"] .pay-step{color:var(--t-subtle);font-weight:700}
html[data-tema="royal"] .pay-step.active,html[data-tema="royal"] .pay-step.done{color:var(--txt)}
html[data-tema="royal"] .pay-step-dot{width:26px;height:26px;border-radius:9px;background:var(--ry-ubin);color:var(--ry-tx);font-size:12px;font-weight:800}
html[data-tema="royal"] .pay-step.active .pay-step-dot{background:var(--ry);color:#fff;box-shadow:none}
html[data-tema="royal"] .pay-step-line{flex:1 1 0;width:auto;min-width:10px;max-width:56px;background:var(--line)}
html[data-tema="royal"] .pay-state-head{align-items:center;padding:12px;border:0;border-radius:12px;background:var(--t-warn-soft)}
html[data-tema="royal"] .pay-state-symbol{border-radius:10px;background:var(--gold);box-shadow:none;color:var(--txt)}
html[data-tema="royal"] :is(.pay-status.ok,.pay-status.err) .pay-state-symbol{color:#fff}
html[data-tema="royal"] .pay-state-symbol.has-asset{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
html[data-tema="royal"] .pay-state-head strong{font-weight:800}
html[data-tema="royal"] .pay-state-head p{color:#6f5214}
html[data-tema="royal"] .pay-status.ok .pay-state-head{background:var(--t-ok-soft)}
html[data-tema="royal"] .pay-status.ok .pay-state-head p{color:var(--t-ok-text)}
html[data-tema="royal"] .pay-status.err .pay-state-head{background:var(--t-err-soft)}
html[data-tema="royal"] .pay-status.err .pay-state-head p{color:var(--t-err-text)}
/* Tiket nomor pesanan: panel navy, tombol kedua kuning. */
html[data-tema="royal"] .order-ticket{padding:14px;border-radius:14px;box-shadow:0 10px 22px rgba(15,29,61,.22)}
html[data-tema="royal"] .order-ticket::after{opacity:.07}
html[data-tema="royal"] .order-ticket-top{color:#9fb3e0}
html[data-tema="royal"] .order-ticket-top b{font-weight:800}
html[data-tema="royal"] .order-ticket-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;border-top-color:rgba(255,255,255,.16)}
html[data-tema="royal"] .order-ticket-actions button{padding:9px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:transparent;color:#fff;font-size:12px;font-weight:700}
html[data-tema="royal"] .order-ticket-actions button:last-child{border-color:var(--gold);background:var(--gold);color:var(--txt)}
html[data-tema="royal"] .pay-email-note{border-radius:12px}

/* ── Lacak ─────────────────────────────────────────────────────────── */
html[data-tema="royal"] .track-order-card{border:0;border-radius:16px;box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 10%,transparent)}
html[data-tema="royal"] .track-status-head{align-items:center;border-bottom-color:var(--line)}
html[data-tema="royal"] .track-status-icon{border-radius:12px}
html[data-tema="royal"] .track-status-head strong{font-weight:800}
html[data-tema="royal"] .track-buyer{border:0;border-radius:12px;background:var(--t-field)}
html[data-tema="royal"] .track-avatar{border-radius:12px;background:var(--ry);box-shadow:none}
html[data-tema="royal"] .track-detail-grid{border-color:var(--line);border-radius:12px}
html[data-tema="royal"] .track-detail-grid b{font-weight:700}
html[data-tema="royal"] .track-ticket button{border:0;background:var(--gold);color:var(--txt);font-weight:800}
html[data-tema="royal"] .refund-box{border-color:var(--line);border-radius:12px}
html[data-tema="royal"] .refund-opt button{border-radius:10px}

/* ── Tombol penuh, bantuan, info, menu ─────────────────────────────── */
html[data-tema="royal"] .btn-full{border-radius:12px;background:var(--ry);box-shadow:0 6px 14px color-mix(in srgb,var(--brand) 25%,transparent);font-weight:800}
html[data-tema="royal"] .btn-outline{border:0;background:var(--ry-ubin);box-shadow:none;color:var(--ry-tx)}
html[data-tema="royal"] .login-card .login-msg{margin-bottom:0}
html[data-tema="royal"] .nota-btn{border-radius:12px;background:var(--ry);font-weight:800}
html[data-tema="royal"] .nota-btn-sekunder{border:1.5px solid var(--line);background:#fff;color:var(--ry-tx)}
html[data-tema="royal"] .cs-card,html[data-tema="royal"] .account-menu{border:0;border-radius:16px;box-shadow:var(--ry-bayang)}
html[data-tema="royal"] .cs-avatar{border-radius:14px}
html[data-tema="royal"] .cs-go{color:var(--ry-tx)}
html[data-tema="royal"] .faq-item summary{font-weight:700}
html[data-tema="royal"] .faq-item summary::after{border-radius:8px;background:var(--ry-ubin);color:var(--ry-tx)}
html[data-tema="royal"] .account-menu :is(a,button)>span{border-radius:10px;background:var(--ry-ubin);color:var(--ry-tx)}
html[data-tema="royal"] .account-menu :is(a,button){font-weight:700}
html[data-tema="royal"] .account-menu a>i{color:var(--ry-tx)}
html[data-tema="royal"] .account-menu button.danger>span{background:var(--err-bg);color:var(--err-tx)}
html[data-tema="royal"] :is(.info-promo-list,.info-leaderboard-list) img{border:0;border-radius:14px}
html[data-tema="royal"] .info-posts a b{font-weight:700}
html[data-tema="royal"] .info-more{color:var(--ry-tx);font-weight:800}

/* ── Akun ──────────────────────────────────────────────────────────── */
html[data-tema="royal"] .player-pass{border-radius:18px;background:radial-gradient(120% 90% at 100% 0,rgba(59,106,245,.45),transparent 60%),linear-gradient(150deg,#1b3a9e,#0f1d3d 72%);box-shadow:0 12px 26px rgba(15,29,61,.28)}
html[data-tema="royal"] .player-avatar,html[data-tema="royal"] .wallet-pass-mark{border-radius:16px}
html[data-tema="royal"] :is(.checkin-card,.account-rank,.account-spender-card,.wallet-topup-card){border:0;border-radius:16px;box-shadow:var(--ry-bayang)}
html[data-tema="royal"] .checkin-mark{border-radius:12px}
html[data-tema="royal"] .checkin-card button{border-radius:10px;background:var(--ry);font-weight:800}
html[data-tema="royal"] .checkin-card button:disabled{background:var(--t-fill);color:var(--muted)}
html[data-tema="royal"] .checkin-days li{border-radius:12px;border-color:var(--line);background:var(--t-field)}
html[data-tema="royal"] .checkin-days li.today{border-color:var(--ry-tx)}
html[data-tema="royal"] .spender-card::after{border-color:color-mix(in srgb,var(--brand) 6%,transparent)}
html[data-tema="royal"] .spender-head h2{font-weight:800}
html[data-tema="royal"] .spender-periods{background:var(--ry-ubin)}
html[data-tema="royal"] .spender-periods button{color:#3b4f7a;font-weight:700}
html[data-tema="royal"] .spender-periods button[aria-selected="true"]{color:var(--ry-tx);box-shadow:0 2px 6px color-mix(in srgb,var(--brand) 18%,transparent)}
html[data-tema="royal"] .spender-list li,html[data-tema="royal"] .account-entry{border-radius:12px}
html[data-tema="royal"] :is(.account-more,.account-subhead button){border-radius:10px}
html[data-tema="royal"] .account-subhead strong{font-size:14px;font-weight:800}
/* Kartu tanpa garis: tanda gagal muat katalog pindah ke cincin bayangan. */
html[data-tema="royal"].store-load-failed .product-card{box-shadow:0 0 0 1.5px var(--t-err-line),var(--ry-bayang)}

/* ── Saldo ─────────────────────────────────────────────────────────── */
html[data-tema="royal"] .wallet-pass-mark{background:linear-gradient(145deg,#3b6af5,var(--ry2))}
html[data-tema="royal"] .wallet-pass-btn.primary{background:var(--gold);color:var(--txt)}
html[data-tema="royal"] .wallet-topup-mark{border-radius:14px}
html[data-tema="royal"] .wallet-topup-steps span{border-radius:8px}
html[data-tema="royal"] .wallet-topup-steps .active span{background:var(--ry)}
html[data-tema="royal"] .wallet-topup-presets button{border:1.5px solid transparent;border-radius:12px;background:var(--t-field);font-weight:800}
html[data-tema="royal"] .wallet-topup-presets button[aria-pressed="true"]{border-color:var(--ry-tx);background:#fff;color:var(--ry-tx);box-shadow:0 6px 14px color-mix(in srgb,var(--brand) 16%,transparent)}
html[data-tema="royal"] .wallet-topup-input{border:1.5px solid var(--line);border-radius:12px;background:var(--t-field)}
html[data-tema="royal"] .wallet-topup-input:focus-within{border-color:var(--ry-tx);background:#fff}
html[data-tema="royal"] .wallet-topup-methods button{border-radius:12px}
html[data-tema="royal"] .wallet-topup-submit{border-radius:12px;background:var(--ry);font-size:13px;font-weight:800}
html[data-tema="royal"] .wallet-topup-submit:disabled{background:var(--t-fill);color:var(--t-muted)}

/* ── Overlay ───────────────────────────────────────────────────────── */
html[data-tema="royal"] :is(.paycard,.tg-miniapp-install-card){border-radius:18px}
html[data-tema="royal"] :is(.bulk-confirm-actions button,.tg-miniapp-install-actions button){border-radius:12px}
html[data-tema="royal"] :is(.event-popup-card,.event-popup-body){border-radius:18px}
/* Ajakan pop-up event ikut pasangan warna bar bayar: kuning + teks navy. */
html[data-tema="royal"] .event-popup-cta{background:var(--gold);color:var(--t-on-gold)}
html[data-tema="royal"] .user-id-guide-image{border-radius:16px}

/* Tiga kolom di layar sempit: harga seperti "Rp 130.000" tetap sebaris. */
@media (max-width:380px){
  html[data-tema="royal"] .product-card{padding-inline:12px}
  html[data-tema="royal"] #products{gap:6px}
  html[data-tema="royal"] .prod{padding-inline:3px}
  html[data-tema="royal"] .prod-price strong{font-size:11.5px}
  html[data-tema="royal"] #buy-btn{padding-inline:12px;font-size:13px}
}

/* == HALAMAN LUAR: bilah merek blog & kebijakan ===================== */
html[data-tema="royal"] .b-top{background:var(--ry);box-shadow:none}
html[data-tema="royal"] .b-back{border-radius:10px;background:rgba(255,255,255,.16)}
html[data-tema="royal"] .b-brand img:not(.b-wordmark){border-radius:10px}
/* == /HALAMAN LUAR ================================================== */

/* == KONTRAS LOGO NAMA DI BILAH BERWARNA MEREK ===================== */
/* Bilah kepala tema ini memakai warna merek domain, jadi logo nama putih
   bisa hilang di warna terang. Cabang gelap/terangnya dihitung server
   (--brand-on-img): "none" untuk merek gelap, tinta hitam untuk terang. */
html[data-tema="royal"] :is(#brand-wordmark,.b-brand img.b-wordmark){filter:var(--brand-on-img,none)}
/* == /KONTRAS LOGO NAMA ============================================ */

/* == POP-UP CEK ID ================================================== */
/* Bingkai biru kerajaan, cincin emas, panel putih, tombol kuning seperti bar bayar Royal. */
html[data-tema="royal"] .paycard.idcek-kartu{--idcek-emas:var(--gold);--idcek-emas-d:var(--gold-d);--idcek-b1:color-mix(in srgb,var(--ry) 82%,#fff);--idcek-b2:var(--ry2);--idcek-b3:color-mix(in srgb,var(--ry2) 55%,#000);--idcek-pil:var(--ry-ubin);--idcek-teks:var(--txt);--idcek-ikon:var(--ry2);border-radius:22px}
html[data-tema="royal"] .idcek-ubah{color:var(--ry-tx)}
html[data-tema="royal"] .idcek-benar{background:var(--gold);color:var(--txt);box-shadow:0 3px 0 var(--gold-d)}
/* == /POP-UP CEK ID ================================================= */

/* == SUSUNAN KARTU: MEMANJANG ======================================== */
/* Pilihan domain "memanjang" (kerangka di style.css). Ikon gambar penuh di
   kiri, pil poin emas di bawah nama. Tepi kanan 24px memberi tempat tab
   centang terpilih di pojok kanan atas, supaya tidak menimpa angka coret. */
html[data-tema="royal"][data-kartu="memanjang"] #products .prod{--k-ikon:46px;--k-harga:15px;min-height:68px;padding:10px 24px 10px 12px;border-radius:14px}
html[data-tema="royal"][data-kartu="memanjang"] #products .prod .ic img,
html[data-tema="royal"][data-kartu="memanjang"] #products .prod.prod-image-native .ic img{width:100%;height:100%}
html[data-tema="royal"][data-kartu="memanjang"] #products .prod .n{width:auto;font-size:13.5px}
html[data-tema="royal"][data-kartu="memanjang"] #products .prod .promo-badge{top:-8px;left:auto;right:30px;border-radius:999px}
@media (max-width:360px){
  html[data-tema="royal"][data-kartu="memanjang"] #products .prod{--k-ikon:40px;--k-harga:14px;padding:9px 22px 9px 10px}
  html[data-tema="royal"][data-kartu="memanjang"] #products .prod .n{font-size:12.5px}
}
/* == /SUSUNAN KARTU ================================================== */