/* ==========================================================================
   T-REX Top Up — gaya visual
   Tidak ada framework, tidak ada CDN: satu berkas ini saja sudah cukup,
   jadi tampilan tetap utuh walau laptop sedang tanpa internet.

   Arah desain: gelap premium. Emas sungguhan (bergradasi, bukan kuning rata)
   di atas arang netral, permukaan kaca tipis, gerak lambat.
   Produk ini memindahkan uang orang — tampilannya harus terasa tenang
   dan mahal, bukan ramai seperti arcade.
   ========================================================================== */

:root{
  /* --- dasar --- */
  --bg:#08090D;
  --bg-2:#0D0F15;

  /* Permukaan sengaja tembus pandang. Di atas cahaya latar yang hangat,
     kartu jadi terbaca sebagai kaca tanpa perlu backdrop-filter di mana-mana
     (backdrop-filter mahal kalau dipasang di puluhan kartu sekaligus). */
  --surface:rgba(255,255,255,.040);
  --surface-2:rgba(255,255,255,.065);
  --surface-3:rgba(255,255,255,.090);
  --line:rgba(255,255,255,.088);
  --line-kuat:rgba(255,255,255,.150);

  /* Teks hangat, bukan putih kebiruan — supaya menyatu dengan emas. */
  --text:#EFEBE3;
  --muted:#9A948A;

  /* --- emas --- */
  --gold-hi:#FFE9BC;
  --gold:#F0BE63;
  --gold-deep:#A4701A;
  --primary:#F0BE63;
  --primary-ink:#211808;
  /* Emas yang meyakinkan butuh beberapa titik henti: sorot, badan, bayangan,
     lalu sorot lagi. Satu warna rata selalu terbaca sebagai kuning plastik. */
  --emas:linear-gradient(135deg,#FFEFCF 0%,#F3C878 24%,#B47F22 52%,#FFE2AC 74%,#D9A544 100%);
  --emas-lembut:linear-gradient(135deg,rgba(255,239,207,.22),rgba(180,127,34,.10));

  /* --- warna keadaan, diredam supaya tidak berteriak --- */
  --accent:#6FD3BB;
  --danger:#E4756F;
  --warn:#E5B451;
  --ok:#5FC98B;

  --radius:16px;
  --radius-sm:11px;
  --shadow:0 24px 60px -22px rgba(0,0,0,.80),0 2px 10px rgba(0,0,0,.30);
  --shadow-tinggi:0 40px 90px -30px rgba(0,0,0,.90),0 4px 14px rgba(0,0,0,.35);
  /* Garis terang di tepi atas — ini yang membuat sebuah bidang terbaca
     sebagai kaca dan bukan sekadar kotak abu-abu. */
  --kilau:inset 0 1px 0 rgba(255,255,255,.10);
  --kilau-emas:inset 0 1px 0 rgba(255,233,188,.30);

  --lentur:cubic-bezier(.22,.61,.36,1);

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Plus Jakarta Sans","Space Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:15px;line-height:1.62;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* Cahaya latar. Dipasang di lapisan sendiri supaya bisa diam saat halaman
   digulir tanpa memakai background-attachment:fixed, yang tersendat di iOS. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%,rgba(240,190,99,.13),transparent 62%),
    radial-gradient(700px 420px at 2% 4%,rgba(111,211,187,.055),transparent 58%),
    radial-gradient(1000px 700px at 50% 108%,rgba(164,112,26,.075),transparent 62%),
    var(--bg);
}
a{color:var(--accent);text-decoration:none;transition:color .18s var(--lentur)}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--display);line-height:1.14;margin:0 0 .5em;letter-spacing:-.028em;font-weight:800}
h1{font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-.038em}
h2{font-size:1.4rem;letter-spacing:-.024em}
h3{font-size:1.05rem;font-weight:700;letter-spacing:-.018em}
p{margin:0 0 1em}
small{color:var(--muted)}
hr{border:none;border-top:1px solid var(--line);margin:1.5rem 0}

::selection{background:rgba(240,190,99,.26);color:#fff}

.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.wrap-sm{max-width:640px;margin:0 auto;padding:0 20px}
.mt{margin-top:1.25rem}.mt2{margin-top:2rem}.mb{margin-bottom:1.25rem}
.center{text-align:center}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);letter-spacing:.01em}
.nowrap{white-space:nowrap}

/* Teks beremas. Dipakai sangat hemat — kalau semua judul emas,
   tidak ada satu pun yang terasa istimewa. */
.emas{
  /* Mulai dari emas, bukan dari titik paling terang. Gradien 135 derajat
     melintasi judul tiga baris menaruh sorot putih di kata pertama, dan
     kata itu jadi terbaca seperti tidak sengaja ikut terwarnai. */
  background:linear-gradient(96deg,#EFC276 0%,#FFEFCF 26%,#CE9A3E 58%,#FFE2AC 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ---------- Header ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(8,9,13,.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.topbar .inner{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:800;font-size:1.14rem;color:var(--text);letter-spacing:-.04em}
.brand:hover{text-decoration:none}
.brand .mark{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--emas);color:var(--primary-ink);
  font-size:15px;font-weight:800;font-family:var(--display);
  box-shadow:var(--kilau-emas),0 4px 14px -4px rgba(240,190,99,.55);
}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{
  color:var(--muted);font-size:.9rem;font-weight:500;
  padding:7px 12px;border-radius:9px;
  transition:color .18s var(--lentur),background .18s var(--lentur);
}
.nav a:hover,.nav a.on{color:var(--text);text-decoration:none;background:var(--surface-2)}
.nav a.on{color:var(--primary)}

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 19px;border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);
  font:600 .93rem/1 var(--body);letter-spacing:-.005em;
  cursor:pointer;text-decoration:none;position:relative;
  box-shadow:var(--kilau);
  transition:transform .18s var(--lentur),border-color .18s var(--lentur),
             background .18s var(--lentur),box-shadow .25s var(--lentur);
}
.btn:hover{text-decoration:none;transform:translateY(-1px);
  border-color:var(--line-kuat);background:var(--surface-3)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.btn-primary{
  background:var(--emas);color:var(--primary-ink);border-color:transparent;
  font-weight:700;
  box-shadow:var(--kilau-emas),0 10px 26px -12px rgba(240,190,99,.75);
}
.btn-primary:hover{
  background:var(--emas);border-color:transparent;
  box-shadow:var(--kilau-emas),0 16px 34px -12px rgba(240,190,99,.95);
}
.btn-ghost{background:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:transparent;box-shadow:none;border-color:rgba(228,117,111,.42);color:var(--danger)}
.btn-danger:hover{background:rgba(228,117,111,.10);border-color:rgba(228,117,111,.65)}
.btn-ok{background:transparent;box-shadow:none;border-color:rgba(95,201,139,.42);color:var(--ok)}
.btn-ok:hover{background:rgba(95,201,139,.10);border-color:rgba(95,201,139,.65)}
.btn-sm{padding:7px 13px;font-size:.83rem;border-radius:9px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn[disabled]:hover{transform:none;box-shadow:var(--kilau)}

/* ---------- Kartu ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow),var(--kilau);
  position:relative;
}
.card+.card{margin-top:16px}
.card h2,.card h3{margin-top:0}
.card-flat{box-shadow:var(--kilau);background:var(--surface-2)}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media(max-width:860px){.grid-4.keep2,.grid-3.keep2{grid-template-columns:repeat(2,1fr)}}

.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:17px;
  box-shadow:var(--kilau);
}
.stat .label{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;font-weight:600}
.stat .value{font-family:var(--display);font-size:1.7rem;font-weight:800;margin-top:6px;letter-spacing:-.03em}
.stat .value.sm{font-size:1.15rem}

/* ---------- Formulir ---------- */
label{display:block;font-weight:600;font-size:.86rem;margin-bottom:7px;letter-spacing:-.005em}
.hint{color:var(--muted);font-size:.82rem;margin:7px 0 0}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],select,textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.28);
  border:1px solid var(--line);color:var(--text);
  font:400 .95rem/1.4 var(--body);
  transition:border-color .18s var(--lentur),box-shadow .18s var(--lentur),background .18s var(--lentur);
}
input::placeholder,textarea::placeholder{color:rgba(154,148,138,.65)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(240,190,99,.55);background:rgba(0,0,0,.36);
  box-shadow:0 0 0 3px rgba(240,190,99,.14);
}
.field{margin-bottom:17px}
.error{color:var(--danger);font-size:.84rem;margin-top:6px}
.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.choice{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.choice label{
  display:flex;gap:10px;align-items:center;padding:14px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface-2);cursor:pointer;
  font-weight:500;margin:0;box-shadow:var(--kilau);
  transition:border-color .18s var(--lentur),background .18s var(--lentur);
}
.choice label:hover{border-color:var(--line-kuat)}
.choice input{accent-color:var(--primary)}
.choice label:has(input:checked){
  border-color:rgba(240,190,99,.60);background:rgba(240,190,99,.09);
  box-shadow:var(--kilau-emas),0 0 0 1px rgba(240,190,99,.18);
}

.paket{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:640px){.paket{grid-template-columns:repeat(2,1fr)}}
/* Dipakai order/create yang memakai <button>. Jangan dihapus. */
.paket button{
  padding:13px 8px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);cursor:pointer;text-align:center;
  box-shadow:var(--kilau);
  transition:border-color .18s var(--lentur),transform .18s var(--lentur),background .18s var(--lentur);
}
.paket button:hover{border-color:rgba(240,190,99,.55);transform:translateY(-2px);background:var(--surface-3)}
/* Dipakai beranda yang memakai <a>. */
.paket a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:14px 8px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);text-align:center;
  box-shadow:var(--kilau);
  transition:border-color .18s var(--lentur),transform .18s var(--lentur),background .18s var(--lentur);
}
.paket a:hover{
  border-color:rgba(240,190,99,.55);transform:translateY(-2px);
  background:var(--surface-3);text-decoration:none;
}
.paket a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.paket .k{font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.028em}
.paket .h{color:var(--muted);font-size:.77rem}

/* ---------- Lencana status ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:.77rem;font-weight:600;border:1px solid;letter-spacing:-.005em}
.badge-green{color:var(--ok);border-color:rgba(95,201,139,.38);background:rgba(95,201,139,.10)}
.badge-amber{color:var(--warn);border-color:rgba(229,180,81,.38);background:rgba(229,180,81,.10)}
.badge-red{color:var(--danger);border-color:rgba(228,117,111,.38);background:rgba(228,117,111,.10)}
.badge-blue{color:#8FB6E4;border-color:rgba(143,182,228,.38);background:rgba(143,182,228,.10)}
.badge-grey{color:var(--muted);border-color:var(--line);background:var(--surface-2)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---------- Tabel ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--kilau)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s var(--lentur)}
tbody tr:hover{background:var(--surface-2)}
td.wrap-cell,th.wrap-cell{white-space:normal}

/* ---------- Pesan ---------- */
.alert{padding:14px 17px;border-radius:var(--radius-sm);margin-bottom:16px;
  border:1px solid;font-size:.92rem;box-shadow:var(--kilau)}
.alert-ok{background:rgba(95,201,139,.09);border-color:rgba(95,201,139,.32);color:#A6E6C0}
.alert-info{background:rgba(143,182,228,.09);border-color:rgba(143,182,228,.32);color:#C2DAF3}
.alert-warn{background:rgba(229,180,81,.09);border-color:rgba(229,180,81,.32);color:#F3DCA6}
.alert-err{background:rgba(228,117,111,.09);border-color:rgba(228,117,111,.32);color:#F3C4C1}

/* ---------- Pita mode demo ---------- */
.demo-ribbon{
  background:repeating-linear-gradient(135deg,#1A1305,#1A1305 14px,#241A08 14px,#241A08 28px);
  border-bottom:1px solid rgba(240,190,99,.30);
  color:#E8CE9A;font-size:.83rem;padding:8px 0;
}
.demo-ribbon strong{color:var(--primary);letter-spacing:.02em}

/* ---------- SIGNATURE: tiket invoice ---------- */
.tiket{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow),var(--kilau);position:relative;
}
.tiket .kepala{padding:22px;border-bottom:2px dashed var(--line);position:relative}
.tiket .kepala::before,.tiket .kepala::after{content:"";position:absolute;bottom:-11px;
  width:20px;height:20px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.tiket .kepala::before{left:-11px}
.tiket .kepala::after{right:-11px}
.tiket .badan{padding:22px}
.nominal{font-family:var(--mono);font-size:clamp(1.6rem,5vw,2.35rem);
  font-weight:700;letter-spacing:-.025em}
.nominal .unik{color:var(--primary);position:relative}
.nominal .unik::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--emas)}
.rincian{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px dashed var(--line);font-size:.9rem}
.rincian:last-child{border-bottom:none}
.rincian .k{color:var(--muted)}

/* garis waktu status */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{display:flex;gap:13px;padding:10px 0;align-items:flex-start}
.timeline .bulat{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface-2);font-size:11px;color:var(--muted);margin-top:1px}
.timeline li.done .bulat{background:var(--ok);border-color:var(--ok);color:#04361B}
.timeline li.now .bulat{background:var(--emas);border-color:transparent;color:var(--primary-ink);
  box-shadow:0 0 0 4px rgba(240,190,99,.16)}
.timeline li.fail .bulat{background:var(--danger);border-color:var(--danger);color:#3A0D0B}
.timeline .judul{font-weight:600;font-size:.93rem}
.timeline .ket{color:var(--muted);font-size:.83rem}

/* ---------- Tata letak admin ---------- */
.admin{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:rgba(255,255,255,.030);border-right:1px solid var(--line);
  padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.side .brand{margin-bottom:22px}
.side nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:10px;color:var(--muted);font-size:.89rem;
  font-weight:500;margin-bottom:3px;
  transition:background .18s var(--lentur),color .18s var(--lentur)}
.side nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.side nav a.on{background:rgba(240,190,99,.13);color:var(--primary);box-shadow:var(--kilau-emas)}
.side .grup{color:var(--muted);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.13em;font-weight:700;margin:18px 0 8px 12px}
.side .pill{background:var(--danger);color:#fff;border-radius:999px;padding:1px 7px;font-size:.72rem;font-weight:700}
.main{padding:24px 28px 64px;min-width:0}
@media(max-width:900px){
  .admin{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .side nav{display:flex;flex-wrap:wrap;gap:4px}
  .side nav a{padding:7px 10px}
  .side .grup{display:none}
  .main{padding:18px 16px 50px}
}

/* batang grafik sederhana */
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:12px}
.bars .b{flex:1;background:linear-gradient(180deg,var(--gold-hi),rgba(164,112,26,.22));
  border-radius:6px 6px 0 0;min-height:3px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.bars .b span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;
  font-size:.7rem;color:var(--muted)}

.footer{border-top:1px solid var(--line);margin-top:72px;padding:30px 0;
  color:var(--muted);font-size:.86rem}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}

.copy-btn{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
  border-radius:8px;padding:5px 10px;font-size:.76rem;cursor:pointer;
  box-shadow:var(--kilau);transition:color .18s var(--lentur),border-color .18s var(--lentur)}
.copy-btn:hover{color:var(--text);border-color:var(--line-kuat)}

.pagination{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px;list-style:none;padding:0;font-size:.88rem}
.pagination li{border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.pagination li span,.pagination li a{display:block;padding:7px 13px;color:var(--muted)}
.pagination li a:hover{color:var(--text);text-decoration:none}
.pagination .active{background:rgba(240,190,99,.13);border-color:rgba(240,190,99,.35)}
.pagination .active span{color:var(--primary)}

/* ==========================================================================
   SIGNATURE: cincin produk 3D di beranda

   Enam keping mengorbit satu poros. Murni CSS 3D — tanpa Three.js, tanpa
   WebGL, tanpa CDN. Alasannya sederhana: pustaka 3D berukuran ratusan
   kilobita untuk satu benda berputar, dan pembeli di sini datang lewat
   ponsel dengan kuota terbatas untuk bertransaksi cepat.

   Sorot dan pergantian nama tidak dihitung oleh JavaScript. Putaran cincin
   deterministik, jadi setiap keping cukup diberi jeda animasi negatif
   sebesar posisinya di lingkaran, lalu menyala tepat saat menghadap depan.
   ========================================================================== */
.orbit{
  /* Enam sisi rapat membentuk tabung segi enam. Apotema segi enam =
     sisi x 0,866 — itu sebabnya --jari bukan angka karangan. Kalau meleset,
     sisi-sisinya merenggang dan bendanya kelihatan bolong. */
  --putaran:42s;
  --sisi:150px;
  --jari:131px;
  --tinggi:178px;
  position:relative;
  height:400px;
  display:grid;place-items:center;
  perspective:1000px;
  perspective-origin:50% 42%;
}

/* Cahaya lantai — memberi kesan benda menggantung, bukan menempel. */
.orbit::after{
  content:"";position:absolute;left:50%;bottom:52px;transform:translateX(-50%);
  width:min(380px,84%);height:88px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(240,190,99,.24),transparent 70%);
  filter:blur(8px);
}

/* Poros dimiringkan sedikit supaya tabungnya terlihat dari agak atas.
   Dipisah dari cincin karena cincin sudah dipakai animasi rotateY. */
.orbit-poros{
  position:absolute;top:42%;left:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform:rotateX(-10deg);
}
.orbit-cincin{
  position:absolute;width:0;height:0;
  transform-style:preserve-3d;
  animation:orbit-putar var(--putaran) linear infinite;
}
@keyframes orbit-putar{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(-360deg)}
}

.orbit-keping{
  position:absolute;
  width:var(--sisi);height:var(--tinggi);
  margin:calc(var(--tinggi) / -2) 0 0 calc(var(--sisi) / -2);
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--jari));
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.orbit-muka{
  position:relative;height:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:18px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.028));
  box-shadow:var(--kilau),0 30px 60px -28px rgba(0,0,0,.95);
  text-align:center;
}
/* Sisi yang memutar ke belakang tertutup bayangan, bukan dibuat transparan —
   supaya tabungnya tetap terbaca padat dan tidak tembus pandang. */
.orbit-muka::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(165deg,rgba(0,0,0,.30),rgba(0,0,0,.72));
  animation:orbit-bayang var(--putaran) linear infinite;
  animation-delay:calc((var(--i) - 6) * var(--putaran) / 6);
}
@keyframes orbit-bayang{
  0%{opacity:0}
  24%{opacity:1}
  76%{opacity:1}
  100%{opacity:0}
}

.orbit-lambang{
  width:64px;height:64px;border-radius:19px;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.26rem;
  letter-spacing:-.04em;color:#0C0A06;
  background:var(--warna,var(--gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),
             0 14px 28px -10px var(--warna,var(--gold));
}
.orbit-judul{font-family:var(--display);font-weight:700;font-size:.9rem;
  letter-spacing:-.02em;line-height:1.2}
.orbit-satuan{font-size:.73rem;color:var(--muted);letter-spacing:.02em}

.orbit-keping.siap .orbit-muka{
  border-color:rgba(240,190,99,.50);
  box-shadow:var(--kilau-emas),0 0 0 1px rgba(240,190,99,.18),
             0 30px 60px -26px rgba(240,190,99,.50);
}
.orbit-keping.segera .orbit-lambang{filter:grayscale(.4)}

/* Nama produk yang sedang menghadap depan. Jendela tampil sengaja dibuat
   14% dari siklus — lebih sempit dari jarak antar puncak (16,7%), supaya
   dua nama tidak pernah tampil bersamaan. */
.orbit-label{
  position:absolute;left:0;right:0;bottom:0;height:52px;
  pointer-events:none;list-style:none;margin:0;padding:0;
}
.orbit-label li{
  position:absolute;inset:0;opacity:0;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.02em;
  animation:orbit-label-tampil var(--putaran) linear infinite;
  animation-delay:calc((var(--i) - 6) * var(--putaran) / 6);
}
@keyframes orbit-label-tampil{
  0%,3%{opacity:1;transform:translateY(0)}
  7%,93%{opacity:0;transform:translateY(6px)}
  97%,100%{opacity:1;transform:translateY(0)}
}
.orbit-label .titik{width:8px;height:8px;border-radius:50%;background:var(--warna,var(--gold));flex:none}
.orbit-label .stat-kecil{font-family:var(--body);font-weight:500;font-size:.8rem;color:var(--muted)}

.orbit:hover .orbit-cincin,
.orbit:hover .orbit-muka::after,
.orbit:hover .orbit-label li{animation-play-state:paused}

@media(max-width:1000px){
  .orbit{--sisi:132px;--jari:115px;--tinggi:158px;height:356px}
  .orbit-lambang{width:56px;height:56px;border-radius:17px;font-size:1.1rem}
}
@media(max-width:520px){
  .orbit{--sisi:112px;--jari:97px;--tinggi:136px;height:300px}
  .orbit-lambang{width:46px;height:46px;border-radius:14px;font-size:.94rem}
  .orbit-judul{font-size:.78rem}
  .orbit-satuan{font-size:.67rem}
  .orbit-label li{font-size:.9rem}
  .orbit::after{bottom:44px;height:64px}
}

/* ==========================================================================
   Katalog produk / game di beranda
   ========================================================================== */
.game-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:860px){.game-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.game-grid{grid-template-columns:repeat(2,1fr)}}

.game{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 9px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface-2);text-align:center;box-shadow:var(--kilau);
  transition:border-color .2s var(--lentur),transform .2s var(--lentur),
             background .2s var(--lentur),box-shadow .25s var(--lentur)}
a.game:hover{
  border-color:rgba(240,190,99,.55);transform:translateY(-3px);
  background:var(--surface-3);text-decoration:none;
  box-shadow:var(--kilau-emas),0 18px 36px -18px rgba(240,190,99,.55);
}
a.game:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.game .ikon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.94rem;letter-spacing:-.03em;
  color:#0C0A06;background:var(--warna,var(--primary));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40)}
.game .nama{font-weight:600;font-size:.86rem;color:var(--text);line-height:1.25}
.game .kat{font-size:.73rem;color:var(--muted)}
.game.mati{opacity:.42;cursor:not-allowed}

/* ==========================================================================
   Saklar dua-posisi (mis. Otomatis / Manual di daftar pesanan)
   ========================================================================== */
.saklar{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--surface-2);box-shadow:var(--kilau)}
.saklar button{appearance:none;border:0;background:transparent;cursor:pointer;
  color:var(--muted);font:inherit;font-size:.83rem;font-weight:600;
  padding:8px 15px;transition:background .18s var(--lentur),color .18s var(--lentur)}
.saklar button:hover{color:var(--text)}
.saklar button.on{background:var(--emas);color:var(--primary-ink)}
.saklar button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.card.sapu{border-color:rgba(240,190,99,.28)}
@media(max-width:720px){
  .card.sapu .inline{flex-direction:column;gap:14px}
}

/* ==========================================================================
   Masuk halaman — sekali jalan, halus, tidak mengulang saat digulir
   ========================================================================== */
.naik{animation:naik .7s var(--lentur) both}
.naik-1{animation-delay:.05s}
.naik-2{animation-delay:.13s}
.naik-3{animation-delay:.21s}
.naik-4{animation-delay:.29s}
@keyframes naik{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ==========================================================================
   Geser otomatis (banner promo)

   Isinya datang dari tabel banners_promos lewat scope tayang(), jadi apa
   yang tampil di sini sudah ditentukan database — bukan ditulis di berkas.
   Rel memakai scroll-snap asli browser: di ponsel bisa diusap dengan jari
   dan terasa seperti aplikasi, dan kalau JavaScript gagal dimuat pun
   slidernya tetap bisa digeser manual.
   ========================================================================== */
.geser{position:relative}
.geser-rel{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius);
}
.geser-rel::-webkit-scrollbar{display:none}

.geser-item{
  scroll-snap-align:start;
  position:relative;overflow:hidden;
  min-height:172px;
  display:flex;flex-direction:column;justify-content:center;gap:9px;
  padding:26px 28px;
  border-radius:var(--radius);
  border:1px solid rgba(240,190,99,.26);
  background:
    radial-gradient(680px 220px at 88% 8%,rgba(240,190,99,.16),transparent 66%),
    linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.020));
  box-shadow:var(--kilau-emas),var(--shadow);
}
.geser-item .gambar{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.30;
}
.geser-item .gambar+*{position:relative;z-index:1}
.geser-item > *{position:relative;z-index:1}
.geser-item h3{margin:0;font-size:1.22rem;letter-spacing:-.028em}
.geser-item p{margin:0;color:var(--muted);max-width:62ch}
.geser-item .aksi{margin-top:6px}

.geser-titik{display:flex;gap:7px;justify-content:center;margin-top:14px}
.geser-titik button{
  width:26px;height:5px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:var(--surface-3);
  transition:background .25s var(--lentur),width .25s var(--lentur);
}
.geser-titik button:hover{background:var(--line-kuat)}
.geser-titik button.on{background:var(--emas);width:38px}
.geser-titik button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:560px){
  .geser-item{padding:20px;min-height:150px}
  .geser-item h3{font-size:1.08rem}
}

/* ==========================================================================
   Lapisan responsif menyeluruh

   Berkas ini dipakai ke-28 halaman, jadi aturan di bawah berlaku juga untuk
   halaman yang belum ditulis ulang: panel admin, daftar pesanan, formulir.
   ========================================================================== */

/* Apa pun yang bisa melebar dijaga supaya tidak mendorong halaman ke samping.
   Satu gambar kelebaran cukup untuk membuat seluruh halaman bisa digeser
   ke kanan, dan di ponsel itu terasa seperti aplikasi rusak. */
img,video,canvas,svg,iframe{max-width:100%;height:auto}
pre,code{overflow-x:auto;max-width:100%}

@media(max-width:720px){
  /* Bilah atas jadi dua baris: merek di atas, menu bergulir di bawah.
     Dipaksa satu baris dan digulir, bukan dibungkus — menu yang membungkus
     jadi tiga baris dan memakan sepertiga layar ponsel. */
  .topbar .inner{height:auto;flex-wrap:wrap;gap:10px;padding-top:11px;padding-bottom:11px}
  .nav{
    margin-left:0;width:100%;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a,.nav form,.nav .btn{flex:none;white-space:nowrap}

  .wrap,.wrap-sm{padding:0 16px}
  .card{padding:18px}
  .choice{grid-template-columns:1fr}
  h1{font-size:clamp(1.65rem,7vw,2.1rem)}
  h2{font-size:1.22rem}
  .footer .inline{flex-direction:column;align-items:flex-start;gap:12px}
  .footer{margin-top:48px}
  /* Baris rincian pada tiket boleh membungkus daripada terpotong. */
  .rincian{flex-wrap:wrap}
  .rincian .k{flex:1 0 auto}
}

@media(max-width:520px){
  body{font-size:14.5px}
  .card{padding:16px;border-radius:14px}
  .btn{padding:12px 17px}
  /* Sasaran sentuh minimum supaya tombol kecil tetap bisa ditekan jempol. */
  .btn-sm{padding:9px 13px;min-height:38px}
  .stat{padding:14px}
  .stat .value{font-size:1.45rem}
  .tiket .kepala,.tiket .badan{padding:17px}
  .demo-ribbon{font-size:.78rem;padding:9px 0}
  .grid{gap:12px}
  .game-grid{gap:9px}
  .game{padding:14px 6px}
}

/* Layar tinggi-sempit (ponsel dimiringkan) tidak perlu cincin setinggi itu. */
@media(max-height:520px) and (orientation:landscape){
  .orbit{height:250px;--sisi:96px;--jari:83px;--tinggi:116px}
}

/* ==========================================================================
   Kepala halaman

   Sebelumnya tiap halaman dalam dibuka dengan <h1> telanjang di atas hitam,
   dan itu yang bikin halaman terasa melompong. Blok ini memberi judul
   sebuah alas: label kecil di atas, judul, keterangan, tombol di kanan.
   ========================================================================== */
.laman-kepala{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;margin-bottom:22px;
  background:
    radial-gradient(620px 200px at 92% -20%,rgba(240,190,99,.15),transparent 66%),
    linear-gradient(160deg,rgba(255,255,255,.062),rgba(255,255,255,.016));
  box-shadow:var(--kilau),var(--shadow);
}
/* Kisi tipis di latar. Ini yang mengisi ruang kosong tanpa menambah benda
   baru yang harus dibaca mata. */
.laman-kepala::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 72%);
}
.laman-kepala > *{position:relative;z-index:1}
.laman-kepala .atas{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.laman-kepala .label{
  font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--primary);margin-bottom:9px;display:block;
}
.laman-kepala h1{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 5px}
.laman-kepala .ket{color:var(--muted);margin:0;max-width:60ch}
@media(max-width:640px){.laman-kepala{padding:20px}}

/* ==========================================================================
   Penunjuk langkah — dipakai di alur beli
   ========================================================================== */
.langkah{display:flex;align-items:center;gap:0;list-style:none;margin:20px 0 0;padding:0;flex-wrap:wrap}
.langkah li{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--muted)}
.langkah li .no{
  width:25px;height:25px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:.74rem;font-weight:700;
  border:1px solid var(--line);background:var(--surface-2);
}
.langkah li.kini{color:var(--text);font-weight:600}
.langkah li.kini .no{background:var(--emas);border-color:transparent;color:var(--primary-ink);
  box-shadow:0 0 0 4px rgba(240,190,99,.15)}
.langkah li.usai .no{background:rgba(95,201,139,.18);border-color:rgba(95,201,139,.5);color:var(--ok)}
.langkah .garis{flex:1;min-width:22px;height:1px;background:var(--line);margin:0 13px}
@media(max-width:640px){
  .langkah{gap:10px}
  .langkah .garis{display:none}
  .langkah li{font-size:.78rem}
}

/* ==========================================================================
   Ringkasan pesanan yang menempel saat digulir

   Angka totalnya adalah hal terpenting di halaman beli, jadi dia tidak
   boleh menghilang saat orang menggulir ke bawah mengisi formulir.
   ========================================================================== */
.ringkas{position:sticky;top:86px}
.ringkas .jumlah{
  border-radius:14px;padding:18px 20px;margin:4px 0 16px;
  background:
    radial-gradient(420px 150px at 88% 0%,rgba(240,190,99,.20),transparent 68%),
    linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.020));
  border:1px solid rgba(240,190,99,.34);
  box-shadow:var(--kilau-emas);
}
.ringkas .jumlah .label{color:var(--muted);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.11em;font-weight:600}
.ringkas .jumlah .angka{
  font-family:var(--mono);font-weight:700;font-size:clamp(1.5rem,4.6vw,2.05rem);
  letter-spacing:-.03em;margin-top:5px;line-height:1.1;
}
@media(max-width:860px){.ringkas{position:static}}

/* ==========================================================================
   Baris salin — nomor rekening dan nominal transfer

   Dua angka ini yang paling sering disalin orang, dan paling mahal kalau
   salah ketik. Dibuat besar, monospasi, dengan tombol salin selebar jempol.
   ========================================================================== */
.salin-baris{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:15px 17px;border-radius:14px;
  border:1px solid var(--line);background:rgba(0,0,0,.26);
  box-shadow:var(--kilau);
}
.salin-baris + .salin-baris{margin-top:11px}
.salin-baris .isi{min-width:0}
.salin-baris .tajuk{color:var(--muted);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.1em;font-weight:600;margin-bottom:4px}
.salin-baris .nilai{
  font-family:var(--mono);font-size:1.28rem;font-weight:700;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.salin-baris .bawah{color:var(--muted);font-size:.82rem;margin-top:3px}
.salin-baris .copy-btn{flex:none;padding:10px 14px;font-size:.82rem;border-radius:10px}
@media(max-width:520px){
  .salin-baris{flex-direction:column;align-items:stretch;gap:11px}
  .salin-baris .copy-btn{width:100%}
}

/* ==========================================================================
   Hitung mundur tenggat bayar
   ========================================================================== */
.mundur{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:999px;
  border:1px solid rgba(229,180,81,.42);background:rgba(229,180,81,.10);
  color:var(--warn);font-family:var(--mono);font-size:.88rem;font-weight:700;
}
.mundur .nadi{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;
  animation:nadi 2s ease-in-out infinite}
@keyframes nadi{0%,100%{opacity:1}50%{opacity:.28}}
.mundur.lewat{border-color:rgba(228,117,111,.45);background:rgba(228,117,111,.10);color:var(--danger)}

/* ==========================================================================
   Keadaan kosong

   Layar kosong adalah ajakan bertindak, bukan ruang mati. Setiap keadaan
   kosong menyebut apa yang belum ada dan tombol untuk memulainya.
   ========================================================================== */
.kosong{text-align:center;padding:38px 22px}
.kosong .rupa{
  width:52px;height:52px;border-radius:16px;margin:0 auto 14px;
  display:grid;place-items:center;font-size:1.35rem;
  border:1px solid var(--line);background:var(--surface-2);box-shadow:var(--kilau);
}
.kosong .judul{font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:5px}
.kosong .ket{color:var(--muted);font-size:.89rem;margin:0 auto 16px;max-width:40ch}
td .kosong{padding:30px 18px}

/* ==========================================================================
   Deretan jaminan — pengisi ruang yang membawa isi, bukan hiasan
   ========================================================================== */
.jaminan{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.jaminan div{
  padding:15px 16px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface-2);box-shadow:var(--kilau);
}
.jaminan strong{display:block;font-family:var(--display);font-size:.88rem;
  font-weight:700;letter-spacing:-.015em;margin-bottom:3px}
.jaminan span{color:var(--muted);font-size:.81rem;line-height:1.45}
@media(max-width:760px){.jaminan{grid-template-columns:1fr}}

/* Pemisah berlabel */
.pemisah{display:flex;align-items:center;gap:14px;margin:24px 0;
  color:var(--muted);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em}
.pemisah::before,.pemisah::after{content:"";height:1px;background:var(--line);flex:1}

/* Paket dengan penanda pilihan terlaris */
.paket .laris{position:relative;border-color:rgba(240,190,99,.42)}
.paket .laris::after{
  content:"LARIS";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  background:var(--emas);color:var(--primary-ink);
  font-size:.58rem;font-weight:800;letter-spacing:.1em;
  padding:2px 8px;border-radius:999px;white-space:nowrap;
}

/* Keadaan pemeriksaan ID MICO */
.periksa{margin:8px 0 0;font-size:.85rem;display:flex;align-items:flex-start;gap:8px}
.periksa.tunggu{color:var(--muted)}
.periksa.ketemu{color:var(--ok)}
.periksa.gagal{color:var(--danger)}

/* ==========================================================================
   Hormati pengguna yang mematikan animasi di perangkatnya.
   Cincin berhenti pada posisi diam yang tetap terbaca, dan label pertama
   dibiarkan tampil supaya tidak ada ruang kosong.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .orbit-muka{opacity:1}
  .orbit-label li{opacity:0}
  .orbit-label li:first-child{opacity:1}
}

/* ==========================================================================
   Tambahan revisi — Agustus 2026
   ========================================================================== */

/* Selector formulir di atas menyebut tipe input satu per satu. Akibatnya
   <input name="x"> tanpa atribut type TIDAK ikut tergaya: browser memakai
   type=text secara diam-diam, tapi CSS attribute selector tidak ikut
   menebak. Itu sebabnya beberapa kotak isian di panel admin (Pengaturan,
   verifikasi pembayaran) muncul putih di atas latar gelap.

   Blok ini menambal itu sekaligus mendaftarkan tipe yang baru dipakai.
   Kalau tampilan lama lebih disukai, hapus saja blok ini — tidak ada
   berkas lain yang bergantung padanya. */
input:not([type]),
input[type=datetime-local],
input[type=search],
input[type=url]{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.28);
  border:1px solid var(--line);color:var(--text);
  font:400 .95rem/1.4 var(--body);
  transition:border-color .18s var(--lentur),box-shadow .18s var(--lentur),background .18s var(--lentur);
}
input:not([type]):focus,
input[type=datetime-local]:focus,
input[type=search]:focus,
input[type=url]:focus{
  outline:none;border-color:rgba(240,190,99,.55);background:rgba(0,0,0,.36);
  box-shadow:0 0 0 3px rgba(240,190,99,.14);
}

/* Pemilih tanggal bawaan Chrome berwarna gelap di atas latar gelap —
   praktis tidak terlihat. */
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.75)}

/* Kotak centang mengikuti warna merek, bukan biru bawaan sistem. */
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}