:root {
  color-scheme: dark;
  --bg: #0a0a0f;
  --panel: #15121b;
  --primary: #d4af37;
  --primary-dark: #b8892a;
  --text: #f4f1ea;
  --muted: #b8b2bd;
  --line: rgba(212, 175, 55, .3);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #faf7ee;
  --panel: #fffdf8;
  --primary: #71530b;
  --primary-dark: #5c4206;
  --text: #201a12;
  --muted: #554e44;
  --line: rgba(96, 70, 19, .34);
}
body { background-color: var(--bg) !important; color: var(--text); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .13;
}
header, footer { background: var(--bg) !important; color: var(--text); }
#menuDrawer { background: var(--panel) !important; }
.card, .site-card { background: var(--panel); border: 1px solid var(--line); }
/* .card sengaja tidak ikut: sudut potong memakan teks di kartu kecil (harga promo, status). */
/* Gaya dasar tombol utama untuk semua halaman (sebelumnya hanya ada di dalam index.html sehingga tombol di halaman lain transparan) */
.btn-primary { background: linear-gradient(135deg, #E8C766, var(--primary) 55%, var(--primary-dark)); box-shadow: 0 8px 20px -6px rgba(212,175,55,.45); color: #1A1408; font-weight: 700; }
.btn-primary, .btn-emas, .site-clip { clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 100%, 13px 100%); }
.site-badge, .site-breadcrumb { font: 700 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.site-badge { color: var(--primary); }
.site-display { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(2.4rem, 7vw, 5.8rem); line-height: 1.02; font-weight: 800; letter-spacing: -.055em; }
.site-display em { font-style: italic; color: var(--primary); }
.site-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; text-decoration: none; font-weight: 800; }
.site-cta:hover, .site-card:hover, .site-nav a:hover { box-shadow: 0 0 24px rgba(212,175,55,.25); }
.site-hero { width: 92%; max-width: 1152px; margin: 38px auto 0; padding: clamp(24px, 6vw, 70px); background: var(--panel); border: 1px solid var(--line); position: relative; overflow: hidden; }
.site-hero::after { content: "AABD"; position: absolute; right: -18px; bottom: -40px; font: 900 clamp(6rem,20vw,16rem)/1 system-ui; opacity: .045; pointer-events: none; }
.site-hero > * { position: relative; z-index: 1; }
.site-hero p { max-width: 630px; color: var(--muted); }
.site-chips, .site-actions, .site-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.site-chips span { border: 1px solid var(--line); padding: 8px 12px; color: var(--text); font-size: .82rem; }
.site-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.site-stats > div { padding: 18px; background: var(--bg); border: 1px solid var(--line); }
.site-stats strong { display: block; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--primary); }
.site-stats span { color: var(--muted); font-size: .78rem; }
.site-toolbar { width: 92%; max-width: 1152px; margin: auto; padding: 4px 0 8px; display: flex; align-items: center; gap: 10px; position: relative; }
.site-nav { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; }
.site-nav a, .site-nav summary, .site-mobile-menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; color: var(--text); text-decoration: none; cursor: pointer; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.site-new-badge { margin-left: 5px; padding: 2px 5px; border-radius: 5px; background: var(--primary); color: var(--bg); font-size: .6rem; line-height: 1.2; }
.tool-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tool-heading h1 { min-width: 0; overflow-wrap: anywhere; }
.tool-heading-icon, .tool-card-icon { flex: none; display: grid; place-items: center; color: var(--primary); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.tool-heading-icon { width: 58px; height: 58px; }
.tool-heading-icon svg { width: 48px; height: 48px; }
.tool-card-icon { width: 40px; height: 40px; }
.tool-card-icon svg { width: 26px; height: 26px; }
.site-nav details { position: relative; }
.site-menu { position: absolute; top: 100%; left: 0; z-index: 50; background: var(--panel); border: 1px solid var(--line); padding: 8px; width: min(280px, 90vw); max-height: 60vh; overflow: auto; box-shadow: 0 18px 35px #0005; }
.site-menu a { display: flex; white-space: normal; }
.site-search { min-width: 120px; max-width: 190px; width: 16vw; min-height: 44px; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 8px 12px; }
.site-search-results { position: absolute; right: 52px; top: 100%; z-index: 60; width: min(440px, 90vw); max-height: 55vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 35px #0006; }
.site-search-results a, .site-search-results p { display: block; padding: 12px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.site-search-results a:hover { background: var(--bg); }
.site-theme, .site-help-close { min-width: 44px; min-height: 44px; background: var(--panel); color: var(--primary); border: 1px solid var(--line); cursor: pointer; }
header a, header button, #menuDrawer a, #gameList a, #katalogList a { min-height: 44px; }
#gameList a, #katalogList a { display: flex; align-items: center; justify-content: center; }
.site-breadcrumb { width: 92%; max-width: 1152px; margin: 18px auto 0; color: var(--muted); }
.site-breadcrumb a { color: var(--primary); }
.site-why { width: 92%; max-width: 1152px; margin: 56px auto 0; }
.site-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.site-why-grid article { padding: 22px; }
.site-why-grid h3 { color: var(--primary); font-weight: 800; }
.site-why-grid p { color: var(--muted); font-size: .85rem; margin-top: 8px; }
.site-help-button { position: fixed; right: 18px; bottom: 18px; z-index: 70; min-height: 50px; padding: 0 18px; background: #d4af37; color: #1a1408; border: 0; font-weight: 800; cursor: pointer; box-shadow: 0 6px 22px #0006; }
.site-help-panel { position: fixed; right: 16px; bottom: 78px; z-index: 70; width: min(390px, calc(100vw - 32px)); max-height: min(650px, 75vh); overflow: auto; padding: 20px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 44px #0008; color: var(--text); }
.site-help-panel button, .site-help-panel input { min-height: 44px; }
.site-help-panel input { width: 100%; padding: 10px; background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.site-help-panel details { border-top: 1px solid var(--line); padding: 10px 0; }
.site-help-panel summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.site-help-panel p { color: var(--muted); margin: 6px 0; }
.site-help-panel a { color: var(--primary); font-weight: 700; }
.site-help-panel > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.site-help-tabs { display: flex; gap: 8px; margin: 12px 0; }
.site-help-tabs button { flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.site-help-tabs button[aria-selected="true"] { border-color: var(--primary); color: var(--primary); }
.site-help-button:hover, .site-help-panel button:hover, .btn-primary:hover, .btn-emas:hover, .button:hover { filter: brightness(1.12); transform: translateY(-2px); }
.site-help-button:active, .site-help-panel button:active, .btn-primary:active, .btn-emas:active, .button:active { transform: translateY(1px); filter: brightness(.94); }
.site-help-button:focus-visible, .site-help-panel :focus-visible, .site-card:focus-visible, .btn-primary:focus-visible, .btn-emas:focus-visible, .button:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.site-card:hover { border-color: var(--primary); }
.site-help-panel details a { display: inline-flex; align-items: center; min-height: 44px; }
.site-help-panel [role="tabpanel"][hidden] { display: none; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (max-width: 1199px) { .site-nav { display: none; } .site-search { width: auto; max-width: none; flex: 1; } .site-toolbar { justify-content: flex-end; } }
@media (min-width: 1200px) { header button[aria-label="Buka menu"] { display: none; } .site-mobile-menu { display: none; } }
@media (max-width: 600px) { .site-stats, .site-why-grid { grid-template-columns: 1fr; } .site-hero { margin-top: 16px; } .site-hero::after { display: none; } .site-search-results { right: 50px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; } }
/* Tombol sekunder di hero: clip-path memotong border samping, jadi pakai border emas utuh. */
.site-actions .site-card { clip-path: none; background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.site-hero {
  --bg: #0a0a0f;
  --panel: #121014;
  --primary: #e8c766;
  --text: #f4f1ea;
  --muted: #d1c8b7;
  --line: rgba(232, 199, 102, .32);
  background: #0a0a0f;
  color: var(--text);
}
.site-hero > .site-hero-art { position: absolute; inset: 0 0 0 auto; z-index: 0; width: 72%; height: 100%; pointer-events: none; opacity: .8; -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.site-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.site-hero > :not(.site-hero-art) { max-width: 620px; }
.site-hero .site-stats { max-width: 100%; }
.site-developer-banner {
  --panel: #0a0a0f;
  --text: #f4f1ea;
  --muted: #d1c8b7;
  --primary: #e8c766;
  position: relative;
  overflow: hidden;
  color: var(--text);
}
.site-developer-banner > :not(.site-developer-art) { position: relative; z-index: 1; }
.site-developer-art { position: absolute; inset: 0 0 0 auto; z-index: 0; width: 60%; height: 100%; object-fit: cover; object-position: center; opacity: .58; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 65%); mask-image: linear-gradient(to right, transparent, #000 65%); }
.site-category-icon { display: inline-block; width: 32px; height: 32px; border-radius: 7px; object-fit: cover; }
.site-category-svg { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 7px; background: rgba(212,175,55,.12); color: var(--primary); }
.site-category-svg svg { width: 22px; height: 22px; }
.site-category-hero-icon { display: block; width: 112px; height: 112px; margin: 0 auto 16px; border: 1px solid var(--line); border-radius: 16px; object-fit: cover; }
.site-why-grid img { width: 56px; height: 56px; margin-bottom: 14px; }
.site-jasa-image { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; margin: 18px 0 26px; border: 1px solid var(--line); border-radius: 16px; }
@media (max-width: 600px) {
  .site-hero > .site-hero-art { width: 100%; opacity: .3; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%); mask-image: linear-gradient(to bottom, #000, transparent 90%); }
  .site-developer-art { width: 100%; opacity: .2; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
  .site-category-hero-icon { width: 96px; height: 96px; }
}

/* Bagian "Mau cari apa?" di beranda: pita ramping, gambar moai hanya sebagai latar */
.site-ask { position: relative; overflow: hidden; border: 1px solid var(--line); background: #0a0a0f; display: flex; align-items: center; min-height: 190px; }
.site-ask-art { position: absolute; inset: 0; }
.site-ask-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; }
.site-ask-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,15,.94) 0%, rgba(10,10,15,.82) 45%, rgba(10,10,15,.25) 100%); }
.site-ask-body { position: relative; z-index: 1; width: 100%; padding: 22px 18px; text-align: center; }
.site-ask .site-display { font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: 1; }
.site-ask-sub { margin-top: 8px; font-size: clamp(.95rem, 2.4vw, 1.2rem); font-weight: 700; color: var(--text); }
.site-ask-sub em { color: var(--primary); font-style: italic; }
.site-ask-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.site-ask-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; font-weight: 700; font-size: .9rem; background: rgba(10,10,15,.72); }
.site-ask-links a:hover { border-color: var(--primary); }
@media (min-width: 701px) {
  .site-ask { min-height: 170px; }
  .site-ask-body { max-width: 74%; text-align: left; padding: 22px 40px; }
  .site-ask-links { justify-content: flex-start; }
}

.site-strip { width: 92%; max-width: 72rem; margin: 20px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.site-strip-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 14px; background: var(--card, transparent); color: var(--text); text-decoration: none; transition: transform .2s, border-color .2s; }
.site-strip-item:hover { transform: translateY(-2px); border-color: var(--primary); }
.site-strip-ico img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.site-strip-ico { flex: none; overflow: hidden; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(212,175,55,.12); font-size: 1.15rem; }
.site-strip-item b { display: block; font-size: .9rem; color: var(--primary); }
.site-strip-item small { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.35; color: var(--muted); }
.site-kit-feature { width: 92%; max-width: 72rem; margin: 24px auto 0; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--primary); border-radius: 22px; background: linear-gradient(155deg, rgba(212,175,55,.16), var(--panel) 45%); box-shadow: 0 14px 32px #0004; }
.site-kit-feature-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; }
.site-kit-feature-head h2 { color: var(--text); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; }
.site-kit-feature .site-kit-grid { margin-top: 16px; }
.site-kit-page { width: 92%; max-width: 72rem; margin: 36px auto 80px; min-width: 0; }
.site-kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.site-kit-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); scroll-margin-top: 110px; }
.site-kit-art { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #493412, #b8892a 55%, #e8c766); color: #1a1408; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 900; }
.site-kit-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-kit-new { position: absolute; z-index: 1; top: 10px; right: 10px; padding: 4px 9px; border-radius: 8px; background: #1a1408; color: #e8c766; font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.site-kit-placeholder-icon svg { width: 28px; height: 28px; }
.site-kit-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 14px; }
.site-kit-card-body h2, .site-kit-card-body h3 { color: var(--text); font-size: 1.3rem; font-weight: 800; }
.site-kit-card-body p { color: var(--muted); font-size: .9rem; }
.site-kit-card-body .site-kit-update-note { color: var(--text); font-weight: 700; }
.site-kit-price { color: var(--primary); font-size: 1.25rem; }
.site-kit-card-body .site-kit-contents-title { margin-top: 8px; font-size: 1rem; font-weight: 800; }
.site-kit-contents { padding-left: 20px; list-style: disc; color: var(--muted); font-size: .9rem; }
.site-kit-contents li + li { margin-top: 5px; }
.site-kit-service { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.site-kit-service-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.site-kit-service-card h2 { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
.site-kit-service-card p { margin-top: 8px; color: var(--muted); font-size: .9rem; }
@media (max-width: 600px) { .site-kit-service { grid-template-columns: 1fr; } }
.site-kit-status { color: var(--primary); font-size: .8rem; font-weight: 800; }
.site-kit-detail-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; margin-top: 2px; border-radius: 10px; text-decoration: none; }
.site-premium-page { width: 92%; max-width: 72rem; margin: 36px auto 80px; min-width: 0; }
.site-premium-search-label { display: block; margin-top: 26px; font-weight: 800; color: var(--primary); }
.site-premium-search { display: block; width: min(100%, 480px); margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
.site-premium-message { margin-top: 18px; color: var(--muted); }
.site-premium-message:empty { display: none; }
.site-premium-group { margin-top: 30px; }
.site-premium-group h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800; color: var(--primary); }
.site-premium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-top: 12px; }
.site-premium-card { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 112px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); text-decoration: none; }
.site-premium-card:hover, .site-premium-card:focus-visible { border-color: var(--primary); }
.site-premium-logo { flex: none; width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: rgba(212,175,55,.14); }
.site-premium-logo.hidden, .site-premium-ask.hidden { display: none; }
.site-premium-logo img { width: 80%; height: 80%; object-fit: contain; }
.site-premium-logo:has(img) { background: #f4f1ea; }
.site-premium-monogram { font-size: 2rem; font-weight: 900; color: var(--primary); }
.site-premium-card-info { display: flex; flex-direction: column; min-width: 0; gap: 3px; overflow-wrap: anywhere; }
.site-premium-card-info strong { font-size: 1rem; }
.site-premium-card-info span { color: var(--primary); font-weight: 700; font-size: .9rem; }
.site-premium-card-info small { color: var(--muted); }
.site-premium-trademark { margin-top: 36px; font-size: .75rem; color: var(--muted); }
.site-premium-detail-logo { width: 90px; height: 90px; margin: 0 auto 18px; }
.site-premium-badge { display: inline-flex; align-items: center; gap: 8px; }
.site-premium-badge [data-premium-icon] { display: inline-flex; align-items: center; }
.site-premium-feature { width: 92%; max-width: 72rem; min-width: 0; margin: 18px auto 0; padding: 22px; display: flex; align-items: center; gap: 18px; border: 1px solid var(--primary); border-radius: 20px; background: linear-gradient(130deg, var(--panel), rgba(212,175,55,.16)); }
.site-premium-feature-icon { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: rgba(212,175,55,.16); color: var(--primary); }
.site-premium-feature-icon svg { width: 38px; height: 38px; }
.site-premium-feature > div { min-width: 0; flex: 1; }
.site-premium-feature h2 { margin-top: 5px; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 900; }
.site-premium-feature p { color: var(--muted); font-size: .9rem; }
.site-premium-feature-link { flex: none; min-height: 44px; padding: 10px 18px; border-radius: 10px; text-decoration: none; text-align: center; }
@media (max-width: 600px) { .site-premium-feature { align-items: flex-start; flex-wrap: wrap; padding: 16px; } .site-premium-feature-icon { width: 48px; height: 48px; } .site-premium-feature-link { width: 100%; } }
.site-premium-ask { margin-top: 14px; color: var(--primary); font-size: .85rem; text-decoration: underline; }
.site-premium-note { margin-top: 8px; font-size: .8rem; color: var(--muted); }
@media (max-width: 600px) { .site-kit-feature { margin-top: 16px; padding: 12px; } .site-kit-grid { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 900px) { .site-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .site-strip { gap: 8px; } .site-strip-item { padding: 10px; gap: 8px; } .site-strip-ico { width: 32px; height: 32px; font-size: 1rem; } .site-strip-item small { display: none; } }
.jasa-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin: 0 0 14px; }

.jasa-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

.site-menu-ico { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: rgba(212,175,55,.12); color: var(--primary); }
.site-menu-ico svg { width: 20px; height: 20px; }

/* Beranda HP: hero ringkas dan pil kategori satu baris supaya katalog Top Up cepat terlihat */
@media (max-width: 600px) {
  .site-hero { padding: 20px; }
  .site-hero .site-chips, .site-hero .site-stats { display: none; }
  .site-hero p { font-size: .95rem; margin-top: 12px; }
  .site-hero .site-actions { margin-top: 16px; }
  .site-pills { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; padding: 4px 4% 8px; margin: 0 -4%; scrollbar-width: none; }
  .site-pills::-webkit-scrollbar { display: none; }
  .site-pills .chip { flex: none; white-space: nowrap; }
}

/* Paket terpilih di halaman top up: kelas utilitas kalah urutan oleh border/bg bawaan tombol, jadi tegaskan di sini */
.nominal-btn.nominal-terpilih { border-color: #d4af37 !important; background-color: #1a1500 !important; box-shadow: 0 0 0 1px #d4af37, 0 10px 15px -3px rgba(0,0,0,.4) !important; transform: scale(1.05) !important; }

/* Menu dropdown HP (halaman tanpa laci geser): samakan dengan laci di beranda */
.site-mobile-menu .site-menu { width: min(320px, 92vw); max-height: 70vh; padding: 8px; }
.site-mobile-menu .site-menu a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 12px; font-size: .9rem; font-weight: 500; color: var(--text); text-decoration: none; }
.site-mobile-menu .site-menu a:hover { background: rgba(255,255,255,.05); }
.payment-btn.payment-terpilih { border-color: #d4af37 !important; background-color: #1a1500 !important; box-shadow: 0 0 0 1px #d4af37, 0 10px 15px -3px rgba(0,0,0,.4) !important; transform: scale(1.05) !important; }
/* Halaman isi saldo: nominal cepat dan metode terpilih */
.pilihan-terpilih { border-color: #d4af37 !important; background-color: #1a1500 !important; box-shadow: 0 0 0 1px #d4af37 !important; }

/* =====================================================================
   IDENTITAS AABD 2026 ("Jalur A"): biru terang sebagai bawaan, navy untuk mode gelap.
   Blok ini menimpa warna hitam-emas lama di semua halaman lewat variabel dan kelas utilitas,
   tanpa mengubah HTML/JS tiap halaman. Hapus blok ini untuk kembali ke tampilan lama.
   ===================================================================== */
html:root {
  color-scheme: light;
  --bg: #f3f6fb;
  --panel: #ffffff;
  --field: #f7f9fd;
  --primary: #3b63dc;
  --primary-dark: #2e50bc;
  --btn: #3b63dc;
  --btn-hover: #2e50bc;
  --text: #182b50;
  --muted: #5e6c84;
  --line: #dce4ef;
  --pale: #e8efff;
  --accent: #b7eddd;
  --shadow: 0 8px 28px rgba(24, 43, 80, .07);
  --motif: url("gambar/motif-jalur-a.svg");
}
html:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1629;
  --panel: #16223a;
  --field: #101b30;
  --primary: #80a2ff;
  --primary-dark: #4167d8;
  --btn: #4167d8;
  --btn-hover: #355acb;
  --text: #edf2ff;
  --muted: #acb9d0;
  --line: #30405c;
  --pale: #1c2b4a;
  --accent: #2c5b52;
  --shadow: 0 8px 28px rgba(0, 0, 0, .28);
  --motif: url("gambar/motif-jalur-a-gelap.svg");
}
body { background-image: none !important; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }
body::before { display: none; }
header { background: color-mix(in srgb, var(--bg) 92%, transparent) !important; border-color: var(--line) !important; }
footer { background: var(--panel) !important; border-color: var(--line) !important; }

/* Kelas utilitas lama (hitam, emas, abu) dipetakan ke variabel identitas */
[class*="bg-[#0A0A0F]"], [class*="bg-[#0a0a0a]"] { background-color: var(--bg) !important; }
.bg-black, [class*="bg-[#0F0D13]"], [class*="bg-[#111"], [class*="bg-[#050505]"] { background-color: var(--field) !important; }
[class*="bg-[#1a1500]"] { background-color: var(--pale) !important; }
[class*="text-[#d4af37]"], [class*="text-[#D4AF37]"], .text-yellow-400 { color: var(--primary) !important; }
[class*="bg-[#d4af37]"], [class*="bg-[#D4AF37]"] { background-color: var(--btn) !important; color: #fff !important; }
[class*="border-[#d4af37]"]:not([class*="hover:border-[#d4af37]"]) { border-color: var(--line) !important; }
[class*="hover:border-[#d4af37]"]:hover { border-color: var(--primary) !important; }
.text-white:not([class*="bg-"]), [class*="text-gray-1"], [class*="text-gray-2"], [class*="text-gray-3"] { color: var(--text) !important; }
[class*="text-gray-4"], [class*="text-gray-5"], [class*="text-gray-6"] { color: var(--muted) !important; }
[class*="border-gray-"] { border-color: var(--line) !important; }
[class*="hover:bg-white/5"]:hover { background-color: var(--pale) !important; }
main h1, main h2 { color: var(--text); }

/* Kartu, isian, tombol */
.card, .site-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.card:hover { box-shadow: 0 12px 28px -12px rgba(59, 99, 220, .28) !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { background-color: var(--field) !important; color: var(--text) !important; border-color: var(--line) !important; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
.btn-primary, .btn-emas { background: var(--btn) !important; color: #fff !important; box-shadow: 0 8px 20px -8px rgba(59, 99, 220, .5); border-radius: 12px; }
.btn-primary, .btn-emas, .site-clip { clip-path: none; }
.site-cta { border-radius: 12px; }
.site-cta:hover, .site-card:hover, .site-nav a:hover { box-shadow: 0 0 0 3px var(--pale); }
.site-actions .site-card { border-radius: 12px; }
.site-new-badge { color: #fff; background: var(--btn); }
.site-badge, .site-breadcrumb { font-family: inherit; letter-spacing: .08em; }
.site-display em { font-style: normal; }
.site-menu, .site-search, .site-search-results, .site-theme, .site-help-panel, .site-help-panel input { border-radius: 12px; }
.site-theme { display: inline-grid; place-items: center; }
.site-theme svg { width: 20px; height: 20px; }
.site-help-button { background: var(--btn); color: #fff; border-radius: 999px; box-shadow: 0 8px 24px rgba(59, 99, 220, .4); }
.logo-float { animation: none !important; filter: none !important; }
::-webkit-scrollbar-thumb { background: var(--line); }

/* Pilihan terpilih (nominal, pembayaran, isi saldo) */
.nominal-btn.nominal-terpilih, .payment-btn.payment-terpilih, .pilihan-terpilih { border-color: var(--primary) !important; background-color: var(--pale) !important; box-shadow: 0 0 0 1px var(--primary) !important; transform: none !important; }
.kat-utama-btn.aktif, .kat-nominal-btn.aktif { background: var(--btn) !important; color: #fff !important; border-color: var(--btn) !important; }
.kat-nominal-btn { background: var(--field) !important; }
.nominal-btn, .payment-btn { border-radius: 14px; }

/* Bidang yang dulu dipaksa gelap dengan gambar lama: sekarang memakai motif Jalur A */
.site-hero, .site-ask, .site-developer-banner {
  --bg: #ffffff; --panel: #ffffff; --primary: #3b63dc; --text: #182b50; --muted: #5e6c84; --line: #cfdcf5;
  background: #e3ecfc var(--motif) right -30px bottom -70px / min(440px, 78%) no-repeat !important;
  color: var(--text); border-color: #d5e2fa !important; border-radius: 20px;
}
html[data-theme="dark"] .site-hero, html[data-theme="dark"] .site-ask, html[data-theme="dark"] .site-developer-banner {
  --bg: #101b30; --panel: #16223a; --primary: #80a2ff; --text: #edf2ff; --muted: #acb9d0; --line: #30405c;
  background-color: #16223a !important; border-color: #30405c !important;
}
.site-hero::after, .site-hero > .site-hero-art, .site-ask-art, .site-developer-art { display: none !important; }
.site-ask-links a { background: var(--panel); border-radius: 12px; }
.site-stats > div { border-radius: 14px; }
.site-kit-art { background: linear-gradient(135deg, #2e50bc, #3b63dc 55%, #7f9df0); color: #fff; }
.site-kit-new { background: #fff; color: #2e50bc; }
.site-kit-feature, .site-premium-feature { background: var(--panel) var(--motif) right -40px bottom -80px / 340px no-repeat; border-color: var(--line); box-shadow: var(--shadow); }
.site-category-svg, .site-menu-ico, .site-strip-ico, .site-premium-logo, .site-premium-feature-icon { background: var(--pale); }
.site-strip-item { background: var(--panel); border-left-width: 1px; }
.site-mobile-menu .site-menu a:hover { background: var(--pale); }
[class*="text-[#1A1408]"], [class*="text-[#1a1408]"], .btn-primary *, .btn-emas * { color: #fff !important; }
.text-black[class*="bg-[#d4af37]"], [class*="bg-[#d4af37]"] * { color: #fff !important; }

[style*="#E8C766"], [style*="#F5DFA0"], [style*="#D4AF37"], [style*="#d4af37"] { background: var(--btn) !important; color: #fff !important; }
[stroke="#d4af37"], [stroke="#D4AF37"] { stroke: var(--primary); }
[fill="#d4af37"], [fill="#D4AF37"] { fill: var(--primary); }

/* ===== Beranda 2026: susunan fokus top up ===== */
.home-hero, .home-kategori, .home-section, .home-langkah, .home-dev { width: 92%; max-width: 72rem; margin-left: auto; margin-right: auto; }
.home-hero { margin-top: 16px; border: 1px solid #d5e2fa; border-radius: 20px; overflow: hidden; background: #e3ecfc var(--motif) right -20px bottom -90px / min(420px, 80%) no-repeat; }
html[data-theme="dark"] .home-hero { background-color: #16223a; border-color: #30405c; }
.home-hero-body { padding: clamp(20px, 5vw, 44px) clamp(20px, 5vw, 48px) clamp(16px, 3vw, 28px); }
.home-hero-title { margin-top: 10px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.9rem, 6.2vw, 3.4rem); line-height: 1.05; letter-spacing: -.04em; color: var(--text); }
.home-hero-title span { color: var(--primary); }
.home-hero-sub { margin-top: 10px; color: var(--muted); font-size: clamp(.95rem, 2.4vw, 1.1rem); }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.home-cta-ghost { background: var(--panel); color: var(--primary); border: 1px solid var(--line); }
.home-ticker { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px clamp(20px, 5vw, 48px); background: color-mix(in srgb, var(--panel) 78%, transparent); border-top: 1px solid var(--line); font-size: .85rem; color: var(--text); }
.home-ticker svg { flex: none; width: 18px; height: 18px; color: #1f9d6b; }
.home-ticker-label { flex: none; font-weight: 700; color: var(--muted); }
.home-ticker-teks { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.home-ticker-masuk { animation: homeTickerMasuk .35s ease-out; }
@keyframes homeTickerMasuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.home-kategori { margin-top: 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.home-kategori a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; text-align: center; transition: border-color .18s, transform .18s; }
.home-kategori a:hover { border-color: var(--primary); transform: translateY(-2px); }
.home-kategori b { font-size: .72rem; font-weight: 700; line-height: 1.2; }
.home-kategori-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--pale); color: var(--primary); }
.home-kategori-ico svg { width: 22px; height: 22px; }
@media (min-width: 700px) { .home-kategori a { flex-direction: row; gap: 10px; min-height: 60px; } .home-kategori b { font-size: .9rem; } }

.home-section { margin-top: 28px; }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.home-section-head h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(1.25rem, 3.4vw, 1.7rem); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.home-section-head p { font-size: .8rem; color: var(--muted); text-align: right; }

.home-dicari { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .home-dicari { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
.home-dicari-kartu { position: relative; display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .18s, border-color .18s; }
.home-dicari-kartu:hover { transform: translateY(-3px); border-color: var(--primary); }
.home-dicari-kartu img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.home-dicari-kartu strong { display: block; padding: 8px 10px 10px; font-size: .78rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-dicari-urut { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #fff; color: #2e50bc; font-size: .75rem; font-weight: 800; }

/* Kartu katalog game: sampul sudah memuat label, jadi lencana lama disembunyikan */
#gameList .badge-hot, #katalogList .badge-hot { display: none; }
#gameList .card, #katalogList > div { border-radius: 14px; overflow: hidden; }
#gameList h3, #katalogList h3 { color: var(--text) !important; }

.home-langkah { margin-top: 28px; padding: clamp(18px, 4vw, 30px); background: var(--pale); border-radius: 20px; display: grid; gap: 18px; }
.home-langkah-intro h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(1.25rem, 3.4vw, 1.6rem); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.home-langkah-intro p { margin-top: 4px; color: var(--muted); font-size: .85rem; }
.home-langkah ol { display: grid; gap: 14px; }
.home-langkah li { display: flex; align-items: flex-start; gap: 12px; }
.home-langkah li > span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--btn); color: #fff; font-weight: 800; }
.home-langkah b { display: block; color: var(--text); font-size: .95rem; }
.home-langkah small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
@media (min-width: 860px) { .home-langkah { grid-template-columns: 1fr 3fr; align-items: center; } .home-langkah ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.home-dev { margin-top: 28px; padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px dashed var(--line); border-radius: 16px; }
.home-dev h2 { font-size: 1rem; font-weight: 800; color: var(--text); }
.home-dev p { font-size: .8rem; color: var(--muted); }
.home-dev-links { display: flex; flex-wrap: wrap; gap: 8px; }
.home-dev-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--primary); font-size: .85rem; font-weight: 700; text-decoration: none; }
.home-dev-links a:hover { border-color: var(--primary); }
#aktivitasDaftar li { background: var(--field) !important; }
.site-nav summary::after { content: ""; width: 6px; height: 6px; margin-left: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.site-nav summary { list-style: none; }
.site-nav summary::-webkit-details-marker { display: none; }

/* Menu bawah di HP: Beranda, Cek Pesanan, Akun */
.site-bottom-nav { display: none; }
@media (max-width: 767px) {
  .site-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); background: color-mix(in srgb, var(--panel) 96%, transparent); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(10px); }
  .site-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--muted); font-size: .68rem; font-weight: 700; text-decoration: none; }
  .site-bottom-nav a[aria-current="page"] { color: var(--primary); }
  .site-bottom-nav svg { width: 22px; height: 22px; }
  body.punya-menu-bawah { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.punya-menu-bawah .site-help-button { bottom: calc(70px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 14px; font-size: .85rem; }
  body.punya-menu-bawah .site-help-panel { bottom: calc(124px + env(safe-area-inset-bottom)); }
}
/* Popup gambar saat halaman dibuka dimatikan: pengunjung langsung melihat toko. Hapus baris ini untuk menghidupkannya lagi. */
#popupPromoContainer { display: none !important; }

/* ===== Halaman produk 2026: langkah bernomor + batang beli menempel ===== */
main { counter-reset: langkah; }
#dataPlayerBox, #nominalSection, #paymentSection { counter-increment: langkah; border-radius: 18px !important; }
#dataPlayerTitle, #nominalSection > h3, #paymentSection > h3 { display: flex; align-items: center; gap: 10px; color: var(--text) !important; font-size: 1.05rem; }
#dataPlayerTitle::before, #nominalSection > h3::before, #paymentSection > h3::before { content: counter(langkah); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--btn); color: #fff; font-size: .85rem; font-weight: 800; }
#gameImage { border-radius: 14px; }
#gameName { color: var(--text) !important; }
#nominalList .nominal-btn { min-height: 64px; }
#paymentList .payment-btn { min-height: 60px; }

.batang-beli { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: color-mix(in srgb, var(--panel) 97%, transparent); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(24, 43, 80, .08); padding: 10px max(4%, calc((100% - 72rem) / 2)) calc(10px + env(safe-area-inset-bottom)); backdrop-filter: blur(10px); }
.batang-beli #estimasiBiayaPG { margin: 0 0 6px; text-align: left; }
.batang-beli-isi { display: flex; align-items: center; gap: 12px; }
.batang-beli-ringkas { min-width: 0; flex: 1; }
.batang-beli-ringkas b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; color: var(--text); }
.batang-beli-ringkas small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--muted); }
#batangHarga { flex: none; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--text); }
.batang-beli #orderBtn { flex: none; width: auto !important; min-height: 48px; margin: 0 !important; padding: 0 18px !important; border-radius: 12px; font-size: .9rem; white-space: nowrap; transform: none !important; }
.batang-beli-kosong #orderBtn { opacity: .55; }
@media (max-width: 420px) { .batang-beli-ringkas small { display: none; } #batangHarga { font-size: 1rem; } .batang-beli #orderBtn { padding: 0 14px !important; } }
body.punya-batang-beli { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.punya-batang-beli .site-help-button { bottom: calc(96px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 14px; font-size: .85rem; }
body.punya-batang-beli .site-help-panel { bottom: calc(150px + env(safe-area-inset-bottom)); }
#gameImage { object-position: left center; }
.nominal-btn.nominal-terpilih, .payment-btn.payment-terpilih, .pilihan-terpilih { box-shadow: 0 0 0 2px var(--primary) !important; }

/* ===== Tahap B: beli cepat Robux, ikon nominal, lencana, ajakan masuk ===== */
.home-robux { width: 92%; max-width: 72rem; margin: 14px auto 0; padding: 16px 18px; display: grid; gap: 14px; background: var(--panel) var(--motif) right -60px bottom -110px / 300px no-repeat; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.home-robux-head { display: flex; align-items: center; gap: 12px; }
.home-robux-head img { flex: none; width: 44px; height: 44px; padding: 8px; border-radius: 12px; background: var(--pale); }
.home-robux-head h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.home-robux-head p { font-size: .8rem; color: var(--muted); }
.home-robux-form { display: grid; gap: 10px; }
.home-robux-form input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 1rem; }
.home-robux-pilihan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-robux-pilihan button { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--text); font-weight: 700; font-size: .9rem; cursor: pointer; }
.home-robux-pilihan button[aria-pressed="true"] { border-color: var(--primary); background: var(--pale); color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.home-robux-form .site-cta { border: 0; cursor: pointer; }
@media (min-width: 860px) { .home-robux { grid-template-columns: 1fr 2fr; align-items: center; } .home-robux-form { grid-template-columns: 1.2fr 1.6fr auto; align-items: center; } }

.nominal-ikon { display: block; width: 22px; height: 22px; margin: 0 auto 4px; }
.nominal-terlaris { position: absolute; top: 0; right: 0; padding: 2px 7px; border-radius: 0 12px 0 8px; background: var(--btn); color: #fff; font-size: 10px; font-weight: 800; line-height: 1.5; }
#nominalList .nominal-btn p.text-xs, #nominalList .nominal-btn span.text-xs { font-size: .8rem; }
#nominalList .nominal-btn [class*="text-[10px]"] { font-size: 12px; }

.produk-lencana { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 12px; padding: 0; list-style: none; }
.produk-lencana li { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.produk-lencana svg { flex: none; width: 16px; height: 16px; color: var(--primary); }

.batang-beli-ajakan { margin: 0 0 6px; font-size: .75rem; color: var(--muted); }
.batang-beli-ajakan a { color: var(--primary); font-weight: 700; text-decoration: none; }
.batang-beli-ajakan a:hover { text-decoration: underline; }
body.punya-batang-beli { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
body.punya-batang-beli .site-help-button { bottom: calc(118px + env(safe-area-inset-bottom)); }
.home-dicari-urut { left: auto; right: 8px; }
#robuxHarga { margin-left: 6px; font-weight: 700; opacity: .92; }

/* ===== Sisa gaya lama yang ditulis di <style> tiap halaman ===== */
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.chip.active, .chip:hover { background: var(--pale) !important; border-color: var(--primary) !important; color: var(--primary) !important; }
.badge-hot { background: var(--btn) !important; color: #fff !important; }
.titik { background: var(--field) !important; }
.langkah.selesai .titik, .langkah.aktif .titik { color: #fff !important; }
.langkah.aktif .titik { background: var(--btn) !important; border-color: var(--btn) !important; }
.spinner { border-color: var(--line) !important; border-top-color: var(--primary) !important; }
.marquee-promo-track .card { border-radius: 14px; }

/* Baris pesanan selesai di banner: pil dengan produk berwarna dan waktu di kanan */
.home-ticker { margin: 0 clamp(14px, 4vw, 40px) clamp(14px, 3vw, 24px); padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.home-ticker-label { color: var(--text); }
.home-ticker-teks { flex: 1; color: var(--primary); font-weight: 700; }
.home-ticker-waktu { flex: none; font-size: .75rem; color: var(--muted); }

/* Notifikasi pembelian di banner (kartu): sampul kecil, nama, status, waktu */
.home-notif { display: flex; align-items: center; gap: 12px; margin: 0 clamp(14px, 4vw, 40px) clamp(14px, 3vw, 24px); padding: 10px 14px 10px 10px; max-width: 460px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 26px rgba(24, 43, 80, .12); }
.home-notif[hidden] { display: none; }
.home-notif-gambar { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.home-notif-isi { min-width: 0; flex: 1; }
.home-notif-isi strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 700; color: var(--text); }
.home-notif-isi span { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .76rem; font-weight: 600; color: #1f9d6b; }
.home-notif-isi svg { width: 14px; height: 14px; }
.home-notif-waktu { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--field); color: var(--muted); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.home-notif-masuk { animation: homeNotifMasuk .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes homeNotifMasuk { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Banner beranda: ilustrasi gamepad di sisi kanan, teks tetap terbaca di kiri */
.home-hero { position: relative; background: #e3ecfc; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("gambar/ui/banner-gamepad.webp") right center / auto 100% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 62%); pointer-events: none; }
.home-hero > * { position: relative; z-index: 1; }
html[data-theme="dark"] .home-hero::before { opacity: .55; }
@media (max-width: 700px) {
  .home-hero::before { background-size: auto 78%; background-position: right -90px top 8px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 80%); mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 80%); opacity: .9; }
}
@media (min-width: 900px) { .home-hero-body { padding-top: 56px; padding-bottom: 40px; max-width: 60%; } }
/* Kartu dengan ilustrasi: nama game sudah ada di bawah gambar */
.home-dicari-kartu img, #gameList img, #katalogList img { background: var(--pale); }
/* Penyesuaian ilustrasi banner: desktop digeser ke kanan (teks mockup di gambar terpotong keluar), HP jadi pita di atas teks */
.home-hero::before { background-position: right -150px center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, #000 66%); mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, #000 66%); }
@media (max-width: 700px) {
  .home-hero::before { position: static; display: block; height: 150px; opacity: 1; background-size: auto 118%; background-position: 34% 42%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .home-hero-body { padding-top: 6px; }
}
.home-hero::before { background-position: right -185px center; }
@media (max-width: 700px) { .home-hero::before { background-position: 26% 42%; } }

/* =====================================================================
   BERANDA mengikuti paket Astra "GAME STORE" (ukuran dan jarak diambil dari styles.css paket itu),
   dengan warna lewat variabel identitas supaya mode gelap ikut.
   ===================================================================== */
html:root { --ah-hero: #e3edfb; --ah-hero-line: #dbe9fc; --ah-pale: #e1edff; --ah-orange: #d46a00; --ah-ink-icon: #17386b; --ah-circle: #f6faff; }
html:root[data-theme="dark"] { --ah-hero: #16223a; --ah-hero-line: #30405c; --ah-pale: #16223a; --ah-orange: #f0a85a; --ah-ink-icon: #a9c0ff; --ah-circle: #1c2b4a; }

.ah { width: min(1460px, calc(100% - 72px)); margin: 0 auto; padding-top: 0; }
.ah-icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.ah-hero { display: grid; grid-template-columns: 52% 48%; position: relative; overflow: hidden; background: var(--ah-hero); border-radius: 17px; min-height: 325px; border: 1px solid var(--ah-hero-line); isolation: isolate; }
.ah-hero-copy { padding: 32px 0 34px 52px; position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; }
.ah-eyebrow { font-size: 12px; letter-spacing: 3.2px; color: var(--ah-orange); font-weight: 750; margin-bottom: 15px; }
.ah-hero-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(37px, 3.82vw, 59px); font-weight: 800; line-height: 1.03; letter-spacing: -2px; color: var(--text); }
.ah-hero-title span { display: block; white-space: nowrap; }
.ah-hero-desc { color: var(--muted); font-size: 18px; margin: 15px 0 19px; }
.ah-button { display: inline-flex; justify-content: center; align-items: center; gap: 13px; background: var(--btn); color: #fff; border: 1px solid var(--btn); padding: 13px 24px; min-height: 47px; border-radius: 11px; font-weight: 650; font-size: 14px; text-decoration: none; transition: background .18s, transform .18s; }
.ah-button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.ah-button .ah-icon { width: 20px; height: 20px; }
.ah-hero-art { height: 100%; min-height: 325px; position: relative; z-index: 0; overflow: hidden; }
.ah-hero-art img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 30% center; }
.ah-hero-art::before { content: ""; position: absolute; top: 0; left: 0; width: 70px; height: 100%; z-index: 1; background: linear-gradient(90deg, var(--ah-hero), transparent); }
html[data-theme="dark"] .ah-hero-art img { opacity: .82; }
.ah-hero .home-notif { margin: 18px 0 0; width: min(100%, 400px); }

.ah-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--panel); border-radius: 17px; margin-top: 12px; padding: 21px 29px; gap: 0; }
.ah-benefit { display: flex; align-items: center; gap: 23px; padding: 0 29px; border-right: 1px solid var(--line); min-height: 38px; }
.ah-benefit:last-child { border: 0; }
.ah-benefit > .ah-icon { width: 36px; height: 36px; color: var(--ah-ink-icon); }
.ah-benefit h2 { font-size: 14px; font-weight: 650; color: var(--text); }
.ah-benefit p { font-size: 12px; color: var(--muted); margin-top: 1px; }

.ah-kategori { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ah-kategori a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 10px 12px; background: var(--panel); border-radius: 13px; border: 1px solid transparent; color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .18s, border-color .18s; }
.ah-kategori a:hover { transform: translateY(-3px); border-color: var(--primary); }
.ah-kategori .ah-icon { width: 26px; height: 26px; color: var(--primary); }
.ah-kategori b { font-size: 14px; font-weight: 650; }
.ah .home-robux { width: 100%; max-width: none; margin-top: 12px; border-radius: 17px; border-color: transparent; }

.ah-catalog { margin-top: 29px; scroll-margin-top: 130px; }
.ah-catalog-toolbar { display: flex; align-items: center; gap: 44px; margin-bottom: 20px; }
.ah-catalog-toolbar h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 29px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.2; white-space: nowrap; color: var(--text); }
.ah-filters { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; }
.ah-filter { border: 1px solid var(--line); border-radius: 30px; padding: 10px 22px; min-height: 40px; background: var(--field); color: var(--text); font-size: 12px; cursor: pointer; transition: background .18s; }
.ah-filter[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: #fff; font-weight: 650; box-shadow: 0 4px 10px rgba(36, 85, 237, .1); }
.ah-filter:hover { border-color: var(--primary); }
.ah-text-link { display: inline-flex; align-items: center; gap: 13px; margin-left: auto; padding: 8px 0; border: 0; background: none; color: var(--primary); font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.ah-text-link .ah-icon { width: 16px; height: 16px; }
.ah-text-link:hover { text-decoration: underline; }
.ah-game-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ah-game-card { display: block; min-width: 0; border-radius: 13px; overflow: hidden; background: var(--panel); box-shadow: 0 6px 22px rgba(24, 62, 117, .06); border: 1px solid transparent; color: var(--text); text-decoration: none; transition: transform .18s, border-color .18s, box-shadow .18s; }
.ah-game-card:hover { transform: translateY(-4px); border-color: #b4c7ff; box-shadow: 0 10px 24px rgba(23, 62, 117, .11); }
.ah-game-art { display: block; width: 100%; aspect-ratio: 1.02; background: var(--pale); overflow: hidden; }
.ah-game-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ah-game-info { padding: 12px 16px 14px; }
.ah-game-info h3 { font-size: 15px; line-height: 1.3; font-weight: 650; letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-game-info p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.ah-kosong { margin-top: 12px; color: var(--muted); font-size: 13px; }
.ah-kosong[hidden] { display: none; }
.ah-promo { margin-top: 26px; }
.ah-promo .ah-eyebrow { margin-bottom: 8px; }

.ah-steps { display: grid; grid-template-columns: 1.05fr repeat(3, 1.2fr); gap: 24px; padding: 28px 38px; background: var(--ah-pale); border-radius: 17px; margin-top: 26px; align-items: center; }
.ah-steps-intro h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -1px; line-height: 1.25; color: var(--text); }
.ah-steps-intro p { font-size: 13px; color: var(--muted); margin-top: 7px; }
.ah-step { display: flex; gap: 14px; position: relative; align-items: center; }
.ah-step-art { position: relative; flex-shrink: 0; width: 72px; height: 64px; display: flex; align-items: center; justify-content: center; }
.ah-step-number { position: absolute; left: -4px; top: -6px; background: var(--btn); border-radius: 50%; width: 35px; height: 35px; color: #fff; display: grid; place-items: center; font-size: 15px; z-index: 1; }
.ah-step-circle { display: grid; place-items: center; margin-left: 13px; width: 56px; height: 56px; border-radius: 50%; background: var(--ah-circle); color: var(--primary); }
.ah-step-circle .ah-icon { width: 29px; height: 29px; }
.ah-step h3 { font-size: 14px; font-weight: 650; color: var(--text); }
.ah-step p { font-size: 12px; color: var(--muted); margin-top: 3px; max-width: 155px; }
.ah-step + .ah-step::before { content: "\203A"; font-size: 34px; font-weight: 300; color: var(--primary); position: absolute; left: -25px; top: 8px; }
.ah-bukti { margin-top: 26px; display: grid; gap: 20px; }
.ah .home-dev { width: 100%; max-width: none; margin-top: 26px; border-radius: 17px; }

/* Tombol bantuan bulat seperti paket Astra */
.site-help-button { width: 56px; height: 56px; min-height: 56px; padding: 0 !important; border-radius: 50%; font-size: 0 !important; background: var(--btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11a9 9 0 0 1-9 9H3l1.5-4A9 9 0 1 1 21 11Z'/%3E%3Cpath d='M8 11h.01M12 11h.01M16 11h.01'/%3E%3C/svg%3E") center / 28px no-repeat; box-shadow: 0 7px 25px rgba(36, 85, 237, .27); }

@media (max-width: 1250px) {
  .ah { width: calc(100% - 48px); }
  .ah-hero-copy { padding-left: 35px; }
  .ah-hero-title { font-size: clamp(34px, 4.1vw, 50px); }
  .ah-hero-desc { font-size: 16px; }
  .ah-benefits { padding: 20px 12px; }
  .ah-benefit { padding: 0 17px; gap: 17px; }
  .ah-benefit p { font-size: 11px; }
  .ah-benefit h2 { font-size: 13px; }
  .ah-catalog-toolbar { gap: 27px; }
  .ah-catalog-toolbar h2 { font-size: 26px; }
  .ah-filter { padding-inline: 18px; }
  .ah-game-info { padding: 12px 11px; }
  .ah-game-info h3 { font-size: 13px; }
  .ah-steps { padding: 25px; gap: 21px; }
  .ah-steps-intro h2 { font-size: 24px; }
  .ah-step { gap: 9px; }
  .ah-step-art { width: 59px; }
  .ah-step h3 { font-size: 12px; }
  .ah-step p { font-size: 11px; }
}
@media (max-width: 1000px) {
  .ah-hero { grid-template-columns: 55% 45%; min-height: 320px; }
  .ah-hero-copy { padding: 30px 0 30px 29px; }
  .ah-hero-title { font-size: clamp(33px, 4.2vw, 43px); }
  .ah-hero-desc { font-size: 14px; max-width: 320px; }
  .ah-eyebrow { font-size: 10px; letter-spacing: 2px; }
  .ah-hero-art { min-height: 320px; }
  .ah-benefit { gap: 12px; }
  .ah-benefit > .ah-icon { width: 28px; height: 28px; }
  .ah-catalog-toolbar { flex-wrap: wrap; gap: 18px; }
  .ah-filters { order: 2; width: 100%; }
  .ah-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .ah-game-info { padding: 14px 17px; }
  .ah-game-info h3 { font-size: 16px; }
  .ah-steps { grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px; }
  .ah-step + .ah-step::before { display: none; }
  .ah-steps-intro h2 { font-size: 26px; }
  .ah-step h3 { font-size: 14px; }
  .ah-step p { font-size: 12px; max-width: 200px; }
  .ah-step-art { width: 72px; }
  .ah-kategori b { font-size: 12px; }
}
@media (max-width: 720px) {
  .ah { width: calc(100% - 32px); }
  .ah-hero { grid-template-columns: 1fr; margin-top: 7px; min-height: 0; }
  .ah-hero-copy { padding: 29px 24px 20px; }
  .ah-hero-title { font-size: clamp(31px, 7vw, 45px); letter-spacing: -1.25px; }
  .ah-hero-title span { white-space: normal; }
  .ah-eyebrow { font-size: 10px; margin-bottom: 13px; letter-spacing: 2px; }
  .ah-hero-desc { font-size: 14px; margin: 15px 0 18px; max-width: none; }
  .ah-button { font-size: 13px; min-height: 44px; padding: 11px 17px; }
  .ah-hero-art { height: 225px; min-height: 0; grid-row: 2; }
  .ah-hero-art::before { width: 100%; height: 30px; background: linear-gradient(var(--ah-hero), transparent); }
  .ah-benefits { grid-template-columns: 1fr; padding: 8px 20px; margin-top: 13px; }
  .ah-benefit { padding: 15px 0; border-right: 0; border-bottom: 1px solid var(--line); gap: 18px; }
  .ah-benefit > .ah-icon { width: 29px; height: 29px; }
  .ah-kategori { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .ah-kategori a { flex-direction: column; gap: 6px; min-height: 72px; padding: 10px 4px; text-align: center; }
  .ah-kategori b { font-size: 11px; line-height: 1.2; }
  .ah-catalog { margin-top: 26px; }
  .ah-catalog-toolbar { gap: 16px; margin-bottom: 17px; }
  .ah-catalog-toolbar h2 { font-size: 25px; }
  .ah-text-link { font-size: 11px; gap: 5px; }
  .ah-filters { gap: 8px; }
  .ah-filter { padding: 9px 17px; font-size: 11px; min-height: 38px; }
  .ah-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .ah-game-info { padding: 12px; }
  .ah-game-info h3 { font-size: 14px; }
  .ah-game-info p { font-size: 11px; }
  .ah-steps { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; margin-top: 24px; }
  .ah-steps-intro p { font-size: 12px; }
  .ah-step { gap: 17px; }
  .ah-step p { max-width: none; }
  .site-help-button { width: 51px; height: 51px; min-height: 51px; }
}
@media (prefers-reduced-motion: reduce) { .ah-game-card:hover, .ah-kategori a:hover { transform: none; } }

/* Header satu baris di layar lebar, seperti paket Astra: logo, menu, pencarian, tombol akun */
@media (min-width: 1200px) {
  body > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 26px; padding: 0 max(36px, calc((100% - 1460px) / 2)); min-height: 76px; }
  body > header > div:first-child { display: contents; }
  body > header > div:first-child > div:first-child { grid-column: 1; grid-row: 1; }
  body > header > div:first-child > div:last-child { grid-column: 3; grid-row: 1; }
  body > header > .site-toolbar { grid-column: 2; grid-row: 1; width: auto; max-width: none; margin: 0; padding: 0; }
  body > header .site-nav { justify-content: center; gap: 6px; }
  body > header .site-nav a, body > header .site-nav summary { font-size: 13px; font-weight: 600; }
  body > header .site-search { width: 240px; max-width: 240px; border-radius: 11px; }
}

/* =====================================================================
   Gaya paket Astra diterapkan ke halaman lain: ikon, kartu, tombol, katalog kategori, halaman produk.
   ===================================================================== */
/* Ikon kategori beranda: satu gaya dengan ikon baris manfaat (navy, garis 1.8, ukuran sama) */
.ah-kategori .ah-icon { width: 34px; height: 34px; color: var(--ah-ink-icon); }
.ah-kategori a { min-height: 64px; gap: 16px; justify-content: flex-start; padding: 12px 22px; }
@media (max-width: 720px) { .ah-kategori a { justify-content: center; padding: 10px 4px; gap: 6px; } .ah-kategori .ah-icon { width: 28px; height: 28px; } }

/* Kartu dan tombol di semua halaman: putih, tanpa garis tegas, sudut 17/11 px, bayangan lembut */
.card, .site-card, .site-kit-card, .site-premium-card, .site-kit-service-card { border-radius: 17px; border-color: transparent; box-shadow: 0 6px 22px rgba(24, 62, 117, .06); }
.card:hover, .site-premium-card:hover { border-color: #b4c7ff !important; }
.btn-primary, .btn-emas, .site-cta, header .chip { border-radius: 11px !important; font-weight: 650; }
header .btn-primary, header .chip { min-height: 42px; display: inline-flex; align-items: center; padding: 10px 18px; font-size: 12px; }
header .chip { background: var(--panel); border: 1px solid var(--line); }
body > header { border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent) !important; }

/* Katalog kategori (pulsa, PPOB, voucher, item): kisi dan kartu seperti "Game Populer" */
#katalogList { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px !important; }
@media (max-width: 1000px) { #katalogList { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; } }
@media (max-width: 720px) { #katalogList { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 13px !important; } }
.site-category-hero-icon { display: none; }
main > .text-center > h2, main > .text-center > .text-xs { text-align: left; }
main > .text-center { text-align: left; }
main > .text-center > h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 29px !important; font-weight: 800; letter-spacing: -1.2px; }
main > .text-center > p:first-of-type { color: var(--ah-orange) !important; letter-spacing: 3px; }

/* Halaman produk: dua kolom di layar lebar (info produk menempel di kiri, langkah di kanan) */
#formCheckoutUtama > div, #dataPlayerBox, #nominalSection, #paymentSection, #cekTagihanBox { border-color: transparent !important; background: var(--panel) !important; border-radius: 17px !important; box-shadow: 0 6px 22px rgba(24, 62, 117, .06); }
#formCheckoutUtama > #varianTabs, #formCheckoutUtama > #kategoriUtamaTabs { background: transparent !important; box-shadow: none; }
#catatanProduk { background: #fff6e8 !important; border-color: #f3dcb6 !important; color: #5b4521 !important; box-shadow: none; }
html[data-theme="dark"] #catatanProduk { background: #2a2416 !important; border-color: #54431f !important; color: #f1dfb8 !important; }
#nominalList .nominal-btn, #paymentList .payment-btn { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 13px; }
#nominalList .nominal-btn.nominal-terpilih, #paymentList .payment-btn.payment-terpilih { background: var(--pale) !important; border-color: var(--primary) !important; }
@media (min-width: 1000px) {
  #formCheckoutUtama:not(.hidden) { max-width: 1180px; width: calc(100% - 72px); display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  #formCheckoutUtama:not(.hidden) > * { grid-column: 2; }
  #formCheckoutUtama:not(.hidden) > :first-child { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 100px; margin-bottom: 0; }
  #formCheckoutUtama:not(.hidden) > #dataPlayerBox, #formCheckoutUtama:not(.hidden) > :nth-child(2) { margin-top: 0; }
  #nominalList { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Kartu game: bagian teks harus blok (bukan sebaris) supaya jarak dan tingginya persis paket Astra */
.ah-game-card { display: flex; flex-direction: column; }
.ah-game-card > span { display: block; }
.ah-game-art { flex: none; }
.ah-game-info { padding: 12px 16px 14px; }
.ah-game-info h3 { margin: 0; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.3; font-weight: 650; letter-spacing: -.3px; color: var(--text); }
.ah-game-info p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.ah-game-grid, #katalogList { align-items: start; }
@media (max-width: 1250px) { .ah-game-info { padding: 12px 11px; } .ah-game-info h3 { font-size: 13px; } }
@media (max-width: 1000px) { .ah-game-info { padding: 14px 17px; } .ah-game-info h3 { font-size: 16px; } }
@media (max-width: 720px) { .ah-game-info { padding: 12px; } .ah-game-info h3 { font-size: 14px; } .ah-game-info p { font-size: 11px; } }

/* Layar muat: latar terang, logo AA, pemutar biru (sebelumnya hitam dengan lencana emas "AD") */
#layarMuat { background: var(--bg) !important; }
#layarMuat > div:first-child { background: url("gambar/logo-aabd.svg") center / contain no-repeat !important; font-size: 0 !important; box-shadow: none !important; border-radius: 18px !important; }
#layarMuat > div:last-child { border-color: var(--line) !important; border-top-color: var(--primary) !important; }

/* Gulir halus saat pindah bagian (tanpa pustaka), dan butir pembelian terbaru yang bergantian */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
.home-aktivitas-butir { background: var(--field); animation: homeNotifMasuk .45s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .home-aktivitas-butir, .home-notif-masuk { animation: none; } }

/* Banner persis paket Astra: ilustrasi di tengah kolom kanan, notifikasi sejajar tombol (tinggi banner tidak bertambah) */
.ah-hero-art img { object-position: center; }
.ah-hero-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ah-hero .home-notif { margin: 0; width: auto; min-width: 250px; max-width: 330px; padding: 7px 12px 7px 8px; border-radius: 13px; }
.ah-hero .home-notif-gambar { width: 34px; height: 34px; border-radius: 9px; }
.ah-hero .home-notif-isi strong { font-size: .82rem; }
.ah-hero .home-notif-isi span { font-size: .7rem; margin-top: 0; }
@media (max-width: 720px) { .ah-hero .home-notif { width: 100%; max-width: none; } }

/* Baris kategori hanya di layar yang menu atasnya tersembunyi; di layar lebar menu atas sudah memuatnya */
@media (min-width: 1200px) { .ah-kategori { display: none; } }

/* Pembelian terbaru: kartu kecil dengan sampul, nama, nominal, status, dan waktu */
.ah-terbaru-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ah-terbaru-kepala h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.8px; color: var(--text); }
.ah-terbaru-kepala p { margin-top: 2px; font-size: 12px; color: var(--muted); }
.ah-terbaru-langsung { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #e7f7ef; color: #177a52; font-size: 11px; font-weight: 700; }
html[data-theme="dark"] .ah-terbaru-langsung { background: #173529; color: #7fdcae; }
.ah-terbaru-langsung i { width: 8px; height: 8px; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 0 rgba(31, 157, 107, .5); animation: ahDenyut 1.8s ease-out infinite; }
@keyframes ahDenyut { to { box-shadow: 0 0 0 9px rgba(31, 157, 107, 0); } }
.ah-terbaru-daftar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding: 0; list-style: none; }
.ah-terbaru-butir { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 10px 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); animation: homeNotifMasuk .45s cubic-bezier(.2, .8, .2, 1); }
.ah-terbaru-butir img { flex: none; width: 48px; height: 48px; border-radius: 11px; object-fit: cover; background: var(--pale); }
.ah-terbaru-isi { min-width: 0; flex: 1; }
.ah-terbaru-isi strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; color: var(--text); }
.ah-terbaru-isi span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; font-size: 12px; color: var(--muted); }
.ah-terbaru-status { flex: none; text-align: right; }
.ah-terbaru-status b { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #1f9d6b; }
.ah-terbaru-status b::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.ah-terbaru-status time { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); white-space: nowrap; }
@media (max-width: 1000px) { .ah-terbaru-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ah-terbaru-daftar { grid-template-columns: 1fr; gap: 9px; } .ah-terbaru-langsung { display: none; } }
@media (prefers-reduced-motion: reduce) { .ah-terbaru-butir, .ah-terbaru-langsung i { animation: none; } }
.home-robux-head img { padding: 9px; }

/* Tahap E: logo aplikasi di daftar pembelian, baris WhatsApp berlogo di footer */
.ah-terbaru-butir img.gambar-logo, .home-notif-gambar.gambar-logo { object-fit: contain; padding: 7px; background: #fff; border: 1px solid var(--line); }
.ah-hero .home-notif-gambar.gambar-logo { padding: 5px; }
.footer-ikon { flex: none; width: 18px; height: 18px; }
.footer-wa .footer-ikon { color: #1fa855; }

/* =====================================================================
   Kartu game AABD (desain sendiri): kartu potret biru, ilustrasi dengan tepi bawah melengkung seperti
   lengkung huruf A pada logo, dua garis lengkung gema di bawahnya, lencana Terlaris, harga awal.
   ===================================================================== */
.ah-game-grid .kartu-game {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; aspect-ratio: 3 / 4;
  border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(165deg, #3b63dc 0%, #2548b8 55%, #172766 100%);
  box-shadow: 0 10px 24px rgba(36, 68, 160, .22);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s;
}
.kartu-game::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .16; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 330' fill='none'><path d='M-30 335 100 60Q120 17 140 60L270 335M60 335 190 60Q210 17 230 60L360 335M150 335 280 60Q300 17 320 60L450 335' stroke='white' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'/></svg>") 40% 108% / 170% auto no-repeat;
}
.kartu-game:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(36, 68, 160, .34); }
.kartu-game-art {
  position: relative; z-index: 1; display: block; flex: none; height: 73%; overflow: hidden; background: #dfe8ff;
  border-radius: 0 0 50% 50% / 0 0 13% 13%;
  box-shadow: 0 5px 0 rgba(255, 255, 255, .30), 0 10px 0 rgba(255, 255, 255, .13);
}
.kartu-game-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.kartu-game:hover .kartu-game-art img { transform: scale(1.07); }
.kartu-game-isi { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 14px 10px 10px; text-align: center; }
.kartu-game-isi h3 { max-width: 100%; margin: 0; font-size: 15px; font-weight: 750; line-height: 1.25; letter-spacing: -.3px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-game-isi p { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; font-weight: 600; color: #d3e1ff; }
.kartu-game-bolt { flex: none; width: 13px; height: 13px; color: #ffc83d; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kartu-game-lencana {
  position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px 5px 7px; border-radius: 999px; background: #fff; color: #b8430a;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 4px 12px rgba(10, 30, 80, .25);
}
.kartu-game-lencana .kartu-game-bolt { color: #f2790f; }
html[data-theme="dark"] .ah-game-grid .kartu-game { background: linear-gradient(165deg, #2b4bb8 0%, #1a2c78 55%, #0e1633 100%); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
@media (max-width: 1250px) { .kartu-game-isi h3 { font-size: 14px; } }
@media (max-width: 720px) { .ah-game-grid .kartu-game { border-radius: 17px; } .kartu-game-isi h3 { font-size: 13.5px; } .kartu-game-isi p { font-size: 11px; } .kartu-game-lencana { top: 8px; left: 8px; font-size: 9.5px; } }
@media (prefers-reduced-motion: reduce) { .kartu-game, .kartu-game-art img { transition: none; } .kartu-game:hover { transform: none; } .kartu-game:hover .kartu-game-art img { transform: none; } }