/* ============================================================
   Tema kosmik merah untuk halaman pembayaran Sahabat Viral.
   Meniru latar bumi merah bertabur bintang, dibangun sepenuhnya
   dengan CSS supaya halaman tetap ringan di jaringan seluler.
   ============================================================ */

/* Bintang dibuat sebagai box-shadow: satu elemen, ratusan titik,
   nol permintaan jaringan. Posisi diacak sekali dengan seed tetap. */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #f8e9e9;
  background: #050208;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 26px 16px 48px;
  position: relative;
  overflow-x: hidden;
}

/* Pendar merah tua di beberapa titik, meniru nebula pada referensi. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(190, 18, 42, .30), transparent 62%),
    radial-gradient(ellipse 45% 38% at 12% 12%, rgba(220, 38, 38, .16), transparent 70%),
    radial-gradient(ellipse 45% 40% at 88% 78%, rgba(136, 19, 55, .20), transparent 70%),
    #050208;
}

/* ---------- Bintang ---------- */
.sky { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.sky i {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 var(--pendar, 4px) rgba(255, 255, 255, .95);
  animation-name: kedip;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity, filter;
}
/* Warna bintang mengikuti tema. */
.tema-merah .sky i {
  background: #ffe3e3;
  box-shadow: 0 0 var(--pendar, 4px) rgba(255, 120, 120, .95);
}
.tema-hijau .sky i {
  background: #e2fff0;
  box-shadow: 0 0 var(--pendar, 4px) rgba(70, 245, 150, .95);
}

/* Jarak antara redup dan terang dibuat lebih lebar, ditambah brightness
   supaya kedipnya benar-benar terasa. filter ikut menguatkan box-shadow
   yang membentuk titik bintangnya, bukan hanya opacity. */
/* Kedip: opacity untuk hidup-mati, brightness untuk menguatkan pendar,
   dan sedikit perubahan ukuran supaya terbaca sebagai kelip — bukan
   sekadar berdenyut. */
@keyframes kedip {
  0%, 100% { opacity: .16; filter: brightness(.7);  transform: scale(.8); }
  50%      { opacity: 1;   filter: brightness(2.6); transform: scale(1.3); }
}

/* ---------- Bola bumi merah ---------- */
.globe-wrap {
  position: fixed;
  top: 34%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
  pointer-events: none;
}
.globe {
  width: 340px; height: 340px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,190,150,.30), transparent 42%),
    radial-gradient(circle at 68% 62%, rgba(190,20,40,.85), transparent 58%),
    linear-gradient(150deg, #2a0a18 0%, #7f1020 45%, #3b0a14 78%, #12030a 100%);
  box-shadow:
    0 0 90px 20px rgba(200, 25, 45, .34),
    0 0 190px 60px rgba(150, 15, 35, .20),
    inset -26px -22px 70px rgba(0,0,0,.75),
    inset 14px 12px 40px rgba(255,120,90,.10);
  opacity: .85;
  animation: berdenyut 9s ease-in-out infinite;
}
/* Lengkung cahaya tipis di tepi atas, seperti pantulan atmosfer. */
.globe::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 6px 22px -6px rgba(255, 210, 170, .55);
}
@keyframes berdenyut {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.03); opacity: .95; }
}

@media (max-width: 420px) {
  .globe { width: 260px; height: 260px; }
}

/* ---------- Kartu ---------- */
.card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 28px 24px;
  border-radius: 20px;
  text-align: center;
  /* Cukup tembus pandang agar bintang dan naga terlihat di
     baliknya, tapi tetap gelap supaya teks putih tetap terbaca. Blur
     dibuat ringan (7px) — kalau terlalu kuat, latar jadi rata dan kesan
     kacanya justru hilang. */
  background: linear-gradient(165deg, rgba(38, 12, 22, .52), rgba(10, 3, 9, .66));
  border: 1px solid rgba(255, 120, 120, .26);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .55),
    0 0 40px rgba(190, 30, 60, .12),
    0 1px 0 rgba(255, 255, 255, .14) inset,      /* kilau tepi atas kaca */
    0 -1px 0 rgba(0, 0, 0, .35) inset;
  backdrop-filter: blur(7px) saturate(125%);
  -webkit-backdrop-filter: blur(7px) saturate(125%);
}

h1 { font-size: 20px; margin: 0 0 4px; color: #fff; letter-spacing: -.2px; }

/* Judul dua baris dengan teks gradient. Tiap kata satu baris; gradient
   vertikal membuat baris atas lebih terang dan baris bawah lebih pekat.
   Warna default = tema merah; tema lain menimpanya di bawah. */
h1.judul {
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.5px;
  margin: 2px 0 6px;
}
h1.judul span { display: block; }
h1.judul span:last-child { letter-spacing: 3px; }  /* "QRIS" sedikit direnggangkan */
/* Teks transparan diisi gradient lewat background-clip. `color` tetap
   diset sebagai cadangan bila peramban tak mendukung clip. */
h1.judul {
  color: #ff8a9c;
  background: linear-gradient(180deg, #ffd8de 0%, #ff8a9c 26%, #f4485f 58%, #d81e3f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* text-shadow tak tampak pada teks transparan; pakai drop-shadow */
  filter: drop-shadow(0 2px 10px rgba(255, 70, 70, .45));
}
.sub, .ref, .hint { color: #cbb3b8; }
.sub  { font-size: 13px; margin: 0 0 22px; opacity: .9; }
.ref  { font-size: 13px; opacity: .7; }
.hint { font-size: 12px; opacity: .75; margin-top: 14px; line-height: 1.55; }
.foot { font-size: 11.5px; color: #cbb3b8; opacity: .72; margin-top: 16px; line-height: 1.6; }

.amount {
  font-size: 32px; font-weight: 800; margin: 4px 0 2px; color: #fff;
  text-shadow: 0 0 26px rgba(255, 70, 70, .45);
}

label {
  display: block; font-size: 11px; font-weight: 800; margin: 16px 0 6px;
  text-transform: uppercase; letter-spacing: .7px; color: #f0c9cd; opacity: 1;
  text-align: left;
}

/* ---------- Input ---------- */
input {
  width: 100%; padding: 13px 14px;
  border-radius: 12px; font-size: 16px; font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 140, 140, .30);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: rgba(240, 200, 205, .38); }
input:focus {
  outline: none;
  border-color: rgba(255, 90, 90, .65);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(225, 29, 72, .20);
}

/* ============================================================
   Tombol — dibuat terlihat nyata: gradien dua arah, garis
   cahaya tipis di tepi atas, bayangan bawah sebagai "tebal"
   tombol, lalu tenggelam saat ditekan.
   ============================================================ */
.btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-radius: 13px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  /* Rentang terang→gelap sengaja lebar supaya arah cahaya terbaca jelas:
     nyaris merah muda di puncak, merah pekat di dasar. */
  background: linear-gradient(180deg,
      #ff8a9c 0%,
      #f4485f 18%,
      #d81e3f 52%,
      #a51029 82%,
      #7d0a1e 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .55) inset,      /* garis kilau tepi atas */
    0 -14px 22px rgba(90, 0, 12, .45) inset,     /* bayangan dalam bawah  */
    0 7px 0 #6b0818,                             /* tebal badan tombol    */
    0 8px 2px rgba(0, 0, 0, .35),                /* garis pisah dasar     */
    0 14px 24px rgba(200, 20, 60, .45),          /* pendar merah          */
    0 18px 30px rgba(0, 0, 0, .50);              /* bayangan jatuh        */
  text-shadow: 0 1px 2px rgba(90, 0, 15, .55);
  transition: transform .09s ease, box-shadow .09s ease, filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .30) inset,
    0 -6px 14px rgba(0, 0, 0, .28) inset,
    0 1px 0 #7c0d20,
    0 4px 10px rgba(190, 18, 60, .35),
    0 5px 12px rgba(0, 0, 0, .40);
}
/* Pantulan cahaya melengkung di separuh atas — dibuat lebih tegas
   agar permukaan tombol terbaca cembung, bukan datar. */
.btn::before {
  content: '';
  position: absolute; left: 3px; right: 3px; top: 2px; height: 46%;
  border-radius: 11px 11px 50% 50% / 11px 11px 26px 26px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, .48) 0%,
      rgba(255, 255, 255, .16) 55%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
/* Garis gelap tipis tepat di dasar, memisahkan permukaan dari badan tombol. */
.btn::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(80, 0, 12, .38));
  pointer-events: none;
}
.btn:focus-visible { outline: 3px solid rgba(255, 180, 180, .7); outline-offset: 3px; }

/* Sapuan cahaya bergerak — DUA garis miring sejajar yang melintas
   berulang. Dibuat dari dua lapisan linear-gradient tipis pada elemen
   .sheen; posisinya digeser lewat background-position (persen), jadi
   bebas dari lebar tombol dan berlaku di semua tema. Warna putih agar
   terbaca di atas merah/emas/hijau/biru. */
.btn .sheen, .sbtn .sheen {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;                      /* di atas ::before/::after kilau statis */
  mix-blend-mode: screen;          /* menyatu dengan warna tombol, bukan menimpa */
  background-image:
    linear-gradient(105deg, transparent 45%, rgba(255,255,255,.85) 50%, transparent 55%),
    linear-gradient(105deg, transparent 62%, rgba(255,255,255,.55) 66%, transparent 70%);
  background-repeat: no-repeat, no-repeat;
  background-size: 220% 100%, 220% 100%;
  background-position: -160% 0, -130% 0;   /* garis kedua tertinggal sedikit */
  animation: kilau-sapu 6.5s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes kilau-sapu {
  0%   { background-position: -160% 0, -130% 0; }
  /* sapuan lambat lalu jeda: kedua garis meluncur melintas dalam ~65% durasi */
  65%  { background-position:  260% 0,  290% 0; }
  100% { background-position:  260% 0,  290% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn .sheen, .sbtn .sheen { animation: none; display: none; }
}

/* Varian sekunder (mis. tombol salin) */
.btn-ghost {
  background: linear-gradient(180deg, #46303c 0%, #2c1a24 55%, #1d1018 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 -8px 16px rgba(0, 0, 0, .30) inset,
    0 5px 0 #150a10,
    0 10px 20px rgba(0, 0, 0, .50);
}
.btn-ghost:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -5px 12px rgba(0,0,0,.32) inset,
    0 1px 0 #150a10,
    0 4px 10px rgba(0,0,0,.45);
}

/* ---------- Chip nominal ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  flex: 1 1 auto; min-width: 74px;
  padding: 10px 6px;
  border-radius: 11px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  color: #ffd9dd;
  cursor: pointer;
  border: 1px solid rgba(255, 120, 120, .28);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 3px 0 rgba(0, 0, 0, .45),
    0 6px 12px rgba(0, 0, 0, .38);
  transition: transform .08s, box-shadow .08s, border-color .15s, color .15s;
}
.chip:hover { border-color: rgba(255, 90, 90, .6); color: #fff; }
.chip:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 0 rgba(0,0,0,.45);
}

/* ---------- Elemen khusus halaman QR ---------- */
/* Logo merchant. Kedua logo berasio lebar (~4:1), jadi batas lebarnya
   yang menentukan — bukan batas tinggi. Dibuat mengikuti lebar kartu
   agar tetap utuh di layar sempit. */
img.logo {
  width: auto;
  max-width: min(300px, 100%);
  max-height: 110px;
  margin: 0 auto 20px;
  display: block;
}

div.qr, img.qr {
  width: 276px; max-width: 100%;
  margin: 18px auto 8px;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 0 34px rgba(255, 80, 80, .30), 0 10px 26px rgba(0, 0, 0, .55);
}
div.qr { display: flex; justify-content: center; }
div.qr canvas, div.qr img { display: block; max-width: 100%; height: auto; }

.alt { font-size: 12px; margin-top: 4px; }
.alt a { color: #ff8b9a; text-decoration: none; }

.timer { font-size: 13px; color: #d9b9be; margin-top: 6px; }

.state {
  margin-top: 16px; padding: 12px; border-radius: 12px;
  font-weight: 700; font-size: 14px;
  border: 1px solid transparent;
}
.s-processing { background: rgba(217, 119, 6, .16); color: #fcd34d; border-color: rgba(252, 211, 77, .25); }
.s-success    { background: rgba(22, 163, 74, .18); color: #86efac; border-color: rgba(134, 239, 172, .3); }
.s-failed, .s-expired { background: rgba(220, 38, 38, .18); color: #fca5a5; border-color: rgba(252, 165, 165, .3); }

.methods { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.m {
  font-size: 10px; font-weight: 700; padding: 5px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, .07); color: #e8c9cd;
  border: 1px solid rgba(255, 255, 255, .07);
}

/* ---------- Layar berhasil ---------- */
.done-ic {
  width: 72px; height: 72px; margin: 8px auto 14px; border-radius: 50%;
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #fff; font-size: 38px; line-height: 72px; font-weight: 700;
  box-shadow: 0 0 40px rgba(34, 197, 94, .45), 0 8px 18px rgba(0, 0, 0, .5),
              0 1px 0 rgba(255,255,255,.4) inset;
}
.done-title { font-size: 20px; font-weight: 800; color: #86efac; }
.done-amount { font-size: 32px; font-weight: 900; margin: 6px 0 18px; color: #fff;
               text-shadow: 0 0 26px rgba(34, 197, 94, .4); }
.done-box {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; padding: 16px; font-size: 13px; line-height: 1.65;
  text-align: left; color: #e9d6d9;
}
.done-detail { margin: 12px 0; }
.done-detail div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed rgba(255, 255, 255, .12);
}
.done-detail span { opacity: .6; }
.done-detail b { text-align: right; word-break: break-all; color: #fff; }

.err {
  margin-top: 16px; padding: 12px 14px; border-radius: 11px; font-size: 13px;
  background: rgba(220, 38, 38, .16); color: #fca5a5;
  border: 1px solid rgba(252, 165, 165, .28);
}

.out {
  margin-top: 20px; padding: 14px; border-radius: 12px; font-size: 13px;
  word-break: break-all; line-height: 1.6; text-align: left;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  color: #e9d6d9;
}
.out a { color: #ff8b9a; font-weight: 600; }

.amount-wrap { position: relative; }
.amount-wrap .rp {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 700; opacity: .55; pointer-events: none; font-size: 16px; color: #ffd9dd;
}
input#amount { padding-left: 40px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .sky i, .globe { animation: none; }
}

/* ================================================================
   TEMA EMAS — dipakai halaman yang menyetel THEME=emas di config.
   Merah diganti emas, dan bola bumi diganti naga emas yang diambil
   dari logo merchant sendiri (assets/naga.png), sehingga tidak ada
   gambar pihak ketiga yang dipakai.
   ================================================================ */

body.tema-emas { color: #f7ecd8; background: #070502; }

body.tema-emas::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 36%, rgba(190, 145, 30, .26), transparent 62%),
    radial-gradient(ellipse 45% 38% at 12% 12%, rgba(212, 175, 55, .14), transparent 70%),
    radial-gradient(ellipse 45% 40% at 88% 78%, rgba(140,  95, 15, .18), transparent 70%),
    #070502;
}

/* Naga menggantikan bola bumi. */
.tema-emas .globe-wrap { top: 33%; }
.tema-emas .globe {
  width: 340px; height: 340px;
  background: url('naga.png') center/contain no-repeat;
  box-shadow: none;
  opacity: .55;
  filter: drop-shadow(0 0 44px rgba(212, 175, 55, .45))
          drop-shadow(0 0 90px rgba(160, 110, 20, .30));
  animation: berdenyut 11s ease-in-out infinite;
}
.tema-emas .globe::after { display: none; }
@media (max-width: 420px) { .tema-emas .globe { width: 270px; height: 270px; } }

/* Kartu */
.tema-emas .card {
  background: linear-gradient(165deg, rgba(38, 28, 8, .52), rgba(10, 8, 3, .68));
  border-color: rgba(230, 190, 90, .30);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .58),
    0 0 44px rgba(190, 150, 40, .14),
    0 1px 0 rgba(255, 240, 200, .16) inset,
    0 -1px 0 rgba(0, 0, 0, .35) inset;
}

.tema-emas .sub, .tema-emas .ref, .tema-emas .hint, .tema-emas .foot { color: #e2d2ad; }
.tema-emas label { color: #f0dca6; }
.tema-emas .amount, .tema-emas .done-amount { text-shadow: 0 0 26px rgba(255, 200, 80, .45); }
.tema-emas h1.judul {
  color: #ffe08f;
  background: linear-gradient(180deg, #fff3ca 0%, #ffe08f 26%, #ecc04a 58%, #cf9e28 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 200, 80, .42));
}

/* Isian */
.tema-emas input {
  border-color: rgba(230, 190, 90, .32);
  background: rgba(255, 240, 200, .07);
}
.tema-emas input::placeholder { color: rgba(240, 225, 185, .40); }
.tema-emas input:focus {
  border-color: rgba(240, 200, 90, .70);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(212, 175, 55, .22);
}
.tema-emas .amount-wrap .rp { color: #f0dca6; }

/* Tombol emas — arah cahaya tetap dari atas seperti versi merah. */
.tema-emas .btn {
  background: linear-gradient(180deg,
      #ffe9a8 0%, #f2d477 8%, #e8b83c 22%, #d29b1f 52%, #a97613 82%, #7d5409 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 230, .60) inset,
    0 -14px 22px rgba(70, 45, 0, .45) inset,
    0 7px 0 #6a4708,
    0 8px 2px rgba(0, 0, 0, .35),
    0 14px 24px rgba(190, 150, 40, .40),
    0 18px 30px rgba(0, 0, 0, .50);
  color: #3b2a04;
  text-shadow: 0 1px 1px rgba(255, 240, 190, .55);
}
.tema-emas .btn::after { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(70, 45, 0, .34)); }
.tema-emas .btn:active {
  box-shadow:
    0 1px 0 rgba(255,255,230,.40) inset,
    0 -6px 14px rgba(70,45,0,.30) inset,
    0 1px 0 #6a4708,
    0 4px 10px rgba(190,150,40,.32),
    0 5px 12px rgba(0,0,0,.42);
}
.tema-emas .btn-ghost {
  background: linear-gradient(180deg, #4a3c1c 0%, #2e250f 55%, #1c1608 100%);
  color: #f7ecd8;
  text-shadow: none;
  box-shadow:
    0 1px 0 rgba(255, 240, 200, .18) inset,
    0 -8px 16px rgba(0, 0, 0, .30) inset,
    0 5px 0 #140f05,
    0 10px 20px rgba(0, 0, 0, .50);
}

/* Chip nominal */
.tema-emas .chip {
  color: #f5e3b4;
  border-color: rgba(230, 190, 90, .32);
  background: linear-gradient(180deg, rgba(255,240,200,.10), rgba(255,240,200,.02));
}
.tema-emas .chip:hover { border-color: rgba(240, 200, 90, .65); color: #fff8e2; }

/* QR & pernik */
.tema-emas div.qr, .tema-emas img.qr {
  box-shadow: 0 0 34px rgba(255, 205, 90, .34), 0 10px 26px rgba(0, 0, 0, .55);
}
.tema-emas .alt a { color: #ffd76a; }
.tema-emas .timer { color: #e2d2ad; }
.tema-emas .m { background: rgba(255, 240, 200, .08); color: #e8d5a4; }
.tema-emas .done-box, .tema-emas .out {
  background: rgba(255, 240, 200, .06);
  border-color: rgba(255, 240, 200, .10);
  color: #eeddb8;
}
.tema-emas .done-detail div { border-bottom-color: rgba(255, 240, 200, .14); }
.tema-emas .out a { color: #ffd76a; }

/* ================================================================
   Butiran jatuh seperti salju.
   Elemen luar <i> mengurus jatuhnya, elemen dalam <b> mengurus
   ayunan kiri-kanan. Dipisah karena keduanya menganimasikan
   transform — kalau digabung di satu elemen, yang satu menimpa
   yang lain dan ayunannya hilang.
   ================================================================ */
.snow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.snow i {
  position: absolute;
  top: -8vh;
  display: block;
  animation-name: turun;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.snow i b {
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%,
      rgba(255, 255, 255, .95), rgba(255, 226, 150, .75) 55%, rgba(255, 190, 70, 0) 100%);
  box-shadow: 0 0 6px rgba(255, 214, 120, .55);
  animation-name: goyang;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes turun  { from { transform: translateY(0); }
                    to   { transform: translateY(116vh); } }
@keyframes goyang { from { transform: translateX(-14px); }
                    to   { transform: translateX(14px); } }

/* Butiran salju hanya untuk tema emas. */
.tema-merah .snow { display: none; }

/* ================================================================
   Hujan garis — hanya untuk tema merah.
   Tiap kolom jatuh tegak dengan kepala terang di ujung bawah dan
   ekor yang memudar ke atas, sehingga arah jatuhnya terbaca jelas.
   Markup-nya dari rain_html() di lib.php.
   ================================================================ */
.tema-emas .rain { display: none; }
.rain { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rain i {
  position: absolute;
  top: -220px;
  border-radius: 2px;
  background: linear-gradient(180deg,
      rgba(255, 120, 120, 0)    0%,
      rgba(255, 120, 120, .35) 55%,
      rgba(255, 190, 190, .85) 88%,
      rgba(255, 255, 255, .95) 100%);
  filter: drop-shadow(0 0 4px rgba(255, 80, 80, .55));
  animation-name: jatuh;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes jatuh {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(100vh + 260px)); }
}

/* ================================================================
   Latar bergambar untuk tema emas.
   Gambar dipasang tetap (tidak ikut menggulung) dan diberi lapisan
   gelap di atasnya — tanpa itu, teks putih di kartu akan hilang
   tertelan bagian terang gambar.
   ================================================================ */
/* Lapisan gelap saja — gambarnya ditangani .bg di bawah. */
body.tema-emas::before {
  background: linear-gradient(180deg,
      rgba(6, 4, 1, .58) 0%, rgba(6, 4, 1, .44) 38%, rgba(6, 4, 1, .82) 100%);
}

/* ================================================================
   Latar bergambar yang pas di layar tegak maupun mendatar.

   Gambarnya potret (441x740, rasio 0,6). Di HP yang juga tegak,
   `cover` pas sempurna. Di layar PC yang mendatar, `cover` akan
   membesarkannya sampai hanya secuil bagian tengah terlihat dan
   pecah — maka di sana dipakai `contain` supaya gambarnya utuh,
   dengan salinan kabur di belakangnya sebagai pengisi tepi.

   Tidak memakai background-attachment: fixed — elemennya sudah
   position:fixed, jadi itu mubazir sekaligus bermasalah di iOS.
   ================================================================ */
.bg { display: none; }
.tema-emas .bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
}
.tema-emas .bg::before,
.tema-emas .bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('bg-naga.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}
/* Pengisi tepi: salinan kabur yang selalu menutup penuh. */
.tema-emas .bg::before {
  background-size: cover;
  filter: blur(28px) brightness(.5) saturate(1.15);
  transform: scale(1.15);
}
/* Gambar tajam. */
.tema-emas .bg::after { background-size: cover; }

/* Layar mendatar (PC / HP diputar).

   Naga tetap di tengah dan dibuat lebih tinggi dari layar (115%) supaya
   ukurannya megah, bukan sekadar gambar kecil di tengah. Bagian yang
   terpotong hanya bingkai gelap di tepi atas-bawah lukisannya, bukan
   naganya. Kartu di depannya tembus pandang, jadi naga tetap terlihat.

   Satu angka pengatur: `auto 115%` — naikkan untuk lebih besar. */
@media (min-aspect-ratio: 1/1) {
  .tema-emas .bg::after {
    background-size: auto 115%;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 58% 70% at 50% 50%,
        #000 66%, rgba(0,0,0,.6) 84%, transparent 100%);
            mask-image: radial-gradient(ellipse 58% 70% at 50% 50%,
        #000 66%, rgba(0,0,0,.6) 84%, transparent 100%);
  }
  /* Lapisan gelap diringankan di layar lebar supaya warna emasnya hidup;
     teks tetap terbaca karena kartu punya latar sendiri. */
  body.tema-emas::before {
    background: linear-gradient(180deg,
        rgba(6, 4, 1, .40) 0%, rgba(6, 4, 1, .28) 40%, rgba(6, 4, 1, .66) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .snow, .rain { display: none; }
}

/* ================================================================
   TEMA HIJAU — dipakai halaman yang menyetel THEME=hijau.
   Latarnya sekop hijau bernebula yang dibuat sendiri (assets/spade.png),
   bukan gambar stok, sehingga bebas watermark dan hak cipta.
   Tidak ada efek jatuh — hanya bintang hijau yang berkedip.
   ================================================================ */

body.tema-hijau { color: #e6f7ec; background: #030806; }

body.tema-hijau::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(20, 150, 80, .22), transparent 62%),
    radial-gradient(ellipse 45% 38% at 12% 12%, rgba(45, 200, 120, .12), transparent 70%),
    radial-gradient(ellipse 45% 40% at 88% 78%, rgba(10, 110, 60, .16), transparent 70%),
    #030806;
}

/* Sekop menggantikan bola bumi. */
.tema-hijau .globe-wrap { top: 34%; }
.tema-hijau .globe {
  width: 350px; height: 350px;
  background: url('spade.png') center/contain no-repeat;
  box-shadow: none;
  opacity: .62;
  filter: drop-shadow(0 0 40px rgba(45, 210, 120, .40))
          drop-shadow(0 0 90px rgba(20, 140, 80, .28));
  animation: berdenyut 10s ease-in-out infinite;
}
.tema-hijau .globe::after { display: none; }
@media (max-width: 420px) { .tema-hijau .globe { width: 280px; height: 280px; } }
@media (min-aspect-ratio: 1/1) { .tema-hijau .globe { width: 460px; height: 460px; } }

.tema-hijau .card {
  background: linear-gradient(165deg, rgba(12, 40, 26, .52), rgba(3, 12, 8, .68));
  border-color: rgba(90, 230, 150, .26);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .58),
    0 0 44px rgba(30, 170, 100, .14),
    0 1px 0 rgba(200, 255, 225, .14) inset,
    0 -1px 0 rgba(0, 0, 0, .35) inset;
}

.tema-hijau .sub, .tema-hijau .ref, .tema-hijau .hint, .tema-hijau .foot { color: #b6dcc6; }
.tema-hijau label { color: #a9edc6; }
.tema-hijau .amount, .tema-hijau .done-amount { text-shadow: 0 0 26px rgba(60, 230, 140, .45); }
.tema-hijau h1.judul {
  color: #7fe8a8;
  background: linear-gradient(180deg, #cffee2 0%, #7fe8a8 26%, #33ce7a 58%, #1aa25a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(60, 230, 140, .42));
}

.tema-hijau input {
  border-color: rgba(90, 230, 150, .30);
  background: rgba(200, 255, 225, .06);
}
.tema-hijau input::placeholder { color: rgba(200, 240, 215, .38); }
.tema-hijau input:focus {
  border-color: rgba(70, 225, 140, .70);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(45, 200, 120, .22);
}
.tema-hijau .amount-wrap .rp { color: #a9edc6; }

.tema-hijau .btn {
  background: linear-gradient(180deg,
      #9dfbc4 0%, #5fe89a 10%, #2fce78 30%, #1ba75d 60%, #127a44 85%, #0b5730 100%);
  box-shadow:
    0 2px 0 rgba(220, 255, 235, .55) inset,
    0 -14px 22px rgba(0, 55, 30, .45) inset,
    0 7px 0 #084a2a,
    0 8px 2px rgba(0, 0, 0, .35),
    0 14px 24px rgba(25, 170, 100, .40),
    0 18px 30px rgba(0, 0, 0, .50);
  color: #042a17;
  text-shadow: 0 1px 1px rgba(200, 255, 225, .5);
}
.tema-hijau .btn::after { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0, 55, 30, .34)); }
.tema-hijau .btn-ghost {
  background: linear-gradient(180deg, #1d4531 0%, #122c1f 55%, #0a1a12 100%);
  color: #e6f7ec; text-shadow: none;
  box-shadow:
    0 1px 0 rgba(200, 255, 225, .18) inset,
    0 -8px 16px rgba(0, 0, 0, .30) inset,
    0 5px 0 #061009,
    0 10px 20px rgba(0, 0, 0, .50);
}

.tema-hijau .chip {
  color: #c9f5da;
  border-color: rgba(90, 230, 150, .30);
  background: linear-gradient(180deg, rgba(200,255,225,.09), rgba(200,255,225,.02));
}
.tema-hijau .chip:hover { border-color: rgba(70, 225, 140, .65); color: #eafff2; }

.tema-hijau div.qr, .tema-hijau img.qr {
  box-shadow: 0 0 34px rgba(60, 230, 140, .32), 0 10px 26px rgba(0, 0, 0, .55);
}
.tema-hijau .alt a, .tema-hijau .out a { color: #6ff0a6; }
.tema-hijau .timer { color: #b6dcc6; }
.tema-hijau .m { background: rgba(200, 255, 225, .07); color: #bfe8d0; }
.tema-hijau .done-box, .tema-hijau .out {
  background: rgba(200, 255, 225, .05);
  border-color: rgba(200, 255, 225, .10);
  color: #d8efe1;
}
.tema-hijau .done-detail div { border-bottom-color: rgba(200, 255, 225, .14); }

/* ================================================================
   TEMA BIRU — THEME=biru.
   Latarnya nebula biru buatan sendiri (assets/bg-biru.jpg), efeknya
   meteor melesat miring — berbeda dari hujan tegak, salju, dan
   bintang diam pada tema lain.
   ================================================================ */

body.tema-biru { color: #e6f0ff; background: #03060f; }

body.tema-biru::before {
  background: linear-gradient(180deg,
      rgba(3, 6, 15, .52) 0%, rgba(3, 6, 15, .38) 40%, rgba(3, 6, 15, .78) 100%);
}

.tema-biru .bg { display: block; position: fixed; inset: 0; z-index: -5;
                 overflow: hidden; pointer-events: none; }
.tema-biru .bg::before, .tema-biru .bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('bg-biru.jpg');
  background-repeat: no-repeat; background-position: center center;
}
.tema-biru .bg::before { background-size: cover; filter: blur(26px) brightness(.6); transform: scale(1.14); }
.tema-biru .bg::after  { background-size: cover; }
@media (min-aspect-ratio: 1/1) { .tema-biru .bg::after { background-size: cover; } }

/* Bola bumi tidak dipakai; latarnya sudah bergambar. */
.tema-biru .globe-wrap { display: none; }
.tema-biru .sky i {
  background: #dbeeff;
  box-shadow: 0 0 var(--pendar, 4px) rgba(90, 180, 255, .95);
}

/* ---------- Meteor ---------- */
.meteor { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.meteor i {
  position: absolute;
  border-radius: 999px;
  /* ekor memudar di kiri, kepala terang di kanan — arah lesatnya terbaca */
  background: linear-gradient(90deg,
      rgba(120, 190, 255, 0) 0%,
      rgba(120, 190, 255, .55) 55%,
      rgba(200, 235, 255, .95) 88%,
      #ffffff 100%);
  filter: drop-shadow(0 0 6px rgba(120, 190, 255, .85));
  animation-name: melesat;
  animation-timing-function: cubic-bezier(.25, .5, .4, 1);
  animation-iteration-count: infinite;
}
/* rotate ditulis ulang di tiap tahap: transform hanya bisa disetel
   sekali, jadi rotasi dan perpindahan harus digabung di satu nilai. */
@keyframes melesat {
  0%   { opacity: 0; transform: rotate(32deg) translateX(0); }
  8%   { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(32deg) translateX(150vmax); }
}

.tema-biru .card {
  background: linear-gradient(165deg, rgba(14, 30, 60, .52), rgba(3, 7, 18, .68));
  border-color: rgba(110, 175, 255, .28);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .58),
    0 0 44px rgba(40, 110, 220, .16),
    0 1px 0 rgba(210, 235, 255, .16) inset,
    0 -1px 0 rgba(0, 0, 0, .35) inset;
}
.tema-biru .sub, .tema-biru .ref, .tema-biru .hint, .tema-biru .foot { color: #b9cde8; }
.tema-biru label { color: #a8ccf5; }
.tema-biru .amount, .tema-biru .done-amount { text-shadow: 0 0 26px rgba(80, 170, 255, .48); }
.tema-biru h1.judul {
  color: #7fb8ff;
  background: linear-gradient(180deg, #d8ecff 0%, #7fb8ff 26%, #3d8bf5 58%, #1c68d6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(80, 170, 255, .45));
}

.tema-biru input {
  border-color: rgba(110, 175, 255, .32);
  background: rgba(200, 228, 255, .07);
}
.tema-biru input::placeholder { color: rgba(200, 224, 255, .40); }
.tema-biru input:focus {
  border-color: rgba(90, 175, 255, .72);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(50, 130, 240, .24);
}
.tema-biru .amount-wrap .rp { color: #a8ccf5; }

.tema-biru .btn {
  background: linear-gradient(180deg,
      #a9d8ff 0%, #63b2ff 10%, #2f8bf5 32%, #1c68d6 60%, #1349a1 85%, #0d3273 100%);
  box-shadow:
    0 2px 0 rgba(225, 242, 255, .55) inset,
    0 -14px 22px rgba(0, 25, 65, .45) inset,
    0 7px 0 #0a2a5e,
    0 8px 2px rgba(0, 0, 0, .35),
    0 14px 24px rgba(35, 110, 220, .42),
    0 18px 30px rgba(0, 0, 0, .50);
  color: #05203f;
  text-shadow: 0 1px 1px rgba(210, 235, 255, .5);
}
.tema-biru .btn::after { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0, 25, 65, .34)); }
.tema-biru .btn-ghost {
  background: linear-gradient(180deg, #1d3350 0%, #122036 55%, #0a1220 100%);
  color: #e6f0ff; text-shadow: none;
  box-shadow:
    0 1px 0 rgba(210, 235, 255, .18) inset,
    0 -8px 16px rgba(0, 0, 0, .30) inset,
    0 5px 0 #060c16,
    0 10px 20px rgba(0, 0, 0, .50);
}
.tema-biru .chip {
  color: #cfe4ff;
  border-color: rgba(110, 175, 255, .30);
  background: linear-gradient(180deg, rgba(200,228,255,.09), rgba(200,228,255,.02));
}
.tema-biru .chip:hover { border-color: rgba(90, 175, 255, .68); color: #eef6ff; }
.tema-biru div.qr, .tema-biru img.qr {
  box-shadow: 0 0 34px rgba(90, 175, 255, .34), 0 10px 26px rgba(0, 0, 0, .55);
}
.tema-biru .alt a, .tema-biru .out a { color: #7cc0ff; }
.tema-biru .timer { color: #b9cde8; }
.tema-biru .m { background: rgba(200, 228, 255, .07); color: #c3d9f2; }
.tema-biru .done-box, .tema-biru .out {
  background: rgba(200, 228, 255, .05);
  border-color: rgba(200, 228, 255, .10);
  color: #dae9fb;
}
.tema-biru .done-detail div { border-bottom-color: rgba(200, 228, 255, .14); }

@media (prefers-reduced-motion: reduce) { .meteor { display: none; } }

/* ============================================================
   TOMBOL BANTUAN — Telegram & Live Chat
   ============================================================
   Cincin neon yang mengitari tombol dibuat dari SATU conic-gradient
   berukuran besar yang diputar di belakang tombol, lalu dipotong oleh
   overflow:hidden milik tombol. Badan tombol digambar ulang oleh
   ::after dengan inset 2px, sehingga dari lapisan cahaya itu yang
   tersisa terlihat hanya satu utas garis yang berlari mengelilingi tepi.

   Dipilih cara ini, bukan @property --sudut, karena animasi custom
   property belum jalan di sebagian peramban HP — di situ ring-nya
   akan diam total, padahal justru gerakannya yang diminta.
   ============================================================ */
.support {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  /* Boleh melipat sejak tombol WhatsApp ditambahkan (2 September 2026).
     Untuk merek yang cuma punya dua tombol ini tidak mengubah apa pun —
     keduanya tetap muat sebaris. */
  flex-wrap: wrap;
}

.sbtn {
  --neon: #ff3b5c;               /* warna cahaya; ditimpa tiap tema */
  --badan: linear-gradient(180deg, #2e0812 0%, #0f0205 100%);
  position: relative;
  z-index: 0;                    /* bikin konteks tumpukan sendiri, supaya
                                    ::before/::after ber-z-index negatif tetap
                                    di belakang teks tapi di depan latar     */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  border-radius: 14px;
  overflow: hidden;              /* inilah yang memotong cahaya jadi cincin */
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  box-shadow: 0 0 20px -6px var(--neon), 0 8px 18px rgba(0, 0, 0, .45);
  transition: transform .09s ease, box-shadow .2s ease;
}

/* Lapisan cahaya. Persegi dan jauh lebih besar dari tombol, supaya saat
   berputar tidak pernah ada sudut yang tersingkap — 420px masih menutup
   sekalipun hanya satu tombol yang tampil selebar penuh kartu.
   Ukurannya ditulis dalam piksel, bukan persen + aspect-ratio, karena
   aspect-ratio belum ada di WebView Android lama: di sana tingginya jadi
   nol dan cincinnya hilang sama sekali. */
.sbtn::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  /* Dua garis: pola cahaya yang sama diulang pada +180°, sehingga ada dua
     berkas berseberangan yang mengelilingi tombol bersamaan. */
  background: conic-gradient(from 0deg,
      transparent   0deg,
      transparent  52deg,
      var(--neon)  108deg,
      #ffffff      138deg,
      var(--neon)  156deg,
      transparent  180deg,
      transparent 232deg,
      var(--neon)  288deg,
      #ffffff      318deg,
      var(--neon)  336deg,
      transparent  360deg);
  animation: neon-putar 2.6s linear infinite;
}

@keyframes neon-putar {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Badan tombol: menutup bagian tengah, menyisakan cincin selebar 2px. */
.sbtn::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2px;
  border-radius: 12px;
  background: var(--badan);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset;
}

.sbtn:hover   { box-shadow: 0 0 30px -4px var(--neon), 0 10px 22px rgba(0, 0, 0, .5); }
.sbtn:active  { transform: translateY(2px); }
.sbtn:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }

.sbtn svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: currentColor;
  filter: drop-shadow(0 0 6px var(--neon));
}

/* Layar sempit: label dipendekkan lewat CSS saja, ikon tetap utuh. */
@media (max-width: 340px) {
  /* Di layar sempit tiga tombol jadi terlalu kurus untuk dibaca, jadi
     yang ketiga dibiarkan turun ke baris berikutnya. Dengan dua tombol,
     basis 45% + flex-grow tetap menghasilkan dua kolom sama lebar
     seperti sebelumnya — tidak ada yang berubah bagi merek lama. */
  .sbtn { font-size: 13px; padding: 12px 8px; gap: 6px; flex-basis: 45%; }
}

/* Warna cahaya & badan per tema. */
.tema-emas  .sbtn { --neon: #ffc247; --badan: linear-gradient(180deg, #2b2110 0%, #150f04 100%); }
.tema-hijau .sbtn { --neon: #34e58c; --badan: linear-gradient(180deg, #0f2a1c 0%, #04140b 100%); }
.tema-biru  .sbtn { --neon: #56b4ff; --badan: linear-gradient(180deg, #10203a 0%, #050d19 100%); }

/* Cahaya berputar termasuk gerakan besar yang terus-menerus; untuk yang
   memilih hemat animasi, cincinnya dibekukan jadi pendar diam. */
@media (prefers-reduced-motion: reduce) {
  .sbtn::before { animation: none; background: var(--neon); opacity: .55; }
}

/* ---------- Layar kedaluwarsa ----------
   Memakai kerangka .done yang sama dengan layar berhasil — yang berbeda
   hanya nadanya. Hijau berarti "selesai, semua beres"; layar ini justru
   memberitahu bahwa tidak ada yang beres dan prosesnya harus diulang,
   jadi warnanya kuning peringatan, bukan hijau.

   Bentuk dan kalimatnya mengikuti halaman penyedia yang dibuka pembayar
   lewat tautan "QR tidak muncul?", supaya keduanya tidak bercerita
   berbeda tentang order yang sama. */
.kadaluwarsa .done-ic {
  background: linear-gradient(180deg, #f0b429, #b7791f);
  box-shadow: 0 0 40px rgba(240, 180, 41, .40), 0 8px 18px rgba(0, 0, 0, .5),
              0 1px 0 rgba(255, 255, 255, .4) inset;
}
.kadaluwarsa .done-title { color: #fcd34d; }
/* Tombol "Ulangi Deposit" berupa <a>, bukan <button>: garis bawah dan
   warna tautan bawaan peramban harus dimatikan supaya bentuknya sama
   dengan tombol lain di kartu ini. */
.kadaluwarsa a.btn { text-decoration: none; text-align: center; }