/* ══════════════════════════════════════
   Home Page (Color Matched)
   ══════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }
html, body { overflow-x: hidden; width: 100%; }

/* ══ Ikon SVG sebaris ══
   <svg class="i"> tidak membawa viewBox maupun ukuran, jadi browser
   memakai ukuran bawaannya: 300×150px. Itu yang membuat header dan
   kotak pengumuman membengkak — ikonnya sendiri tetap tergambar kecil
   di pojok kotak raksasa yang tak terlihat.
   Ukurannya diikat ke ukuran teks di sekitarnya supaya ikon selalu
   sepadan dengan tulisan yang menemaninya. */
svg.i {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  flex-shrink: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #d4eef8;
  color: #3b82f6;
  padding-bottom: 90px;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ── Header ── */
.header {
  background: linear-gradient(135deg, #3b82f6, #60a5fa, #93c5fd);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 10px; }
.hamburger { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 4px; }
.logo {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffd700, #ffaa00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}
.logo span {
  -webkit-text-fill-color: #b0c4de;
  font-size: 13px;
  font-weight: 400;
}
.logo-img {
  max-height: 36px;
  max-width: 140px;
  object-fit: contain;
}
.header-right { display: flex; align-items: center; gap: 8px; }
.btn-masuk, .btn-daftar {
  padding: 8px 18px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-masuk { background: rgba(90, 140, 200, 0.45); color: #fff; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.15); }
.btn-daftar { background: linear-gradient(180deg, #ffffff, #e8ecf0); color: #1a2d4a; border: 1px solid rgba(200,210,220,0.5); font-weight: 700; }
.badge-250 {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, #ff4444, #cc0000);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 2px;
}
.badge-250 img { width: 14px; height: 14px; }

/* ── Banner Slider ── */
.banner-section { padding: 12px 14px 0; }
.banner-placeholder {
  width: 100%;
  height: 160px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a3f7a, #2b66c4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  font-weight: 600;
  border: 2px dashed rgba(255,255,255,0.2);
}
/* Slider dots */
.banner-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.banner-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b0c4de;
}
.banner-dots span.active {
  background: #2563eb;
  width: 18px;
  border-radius: 4px;
}

/* ── Promo Cards (3 in one frame) ── */
.promo-scroll {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
}
.promo-card {
  width: 100%;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
}
.promo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Marquee / Ticker ── */
.ticker {
  margin: 0 14px;
  background: #fff;
  border-radius: 25px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
}
.ticker-icon { font-size: 18px; flex-shrink: 0; }
.ticker-text {
  flex: 1;
  font-size: 13px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-chat {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Section Title ── */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 10px;
  font-size: 17px;
  font-weight: 700;
  color: #3b82f6;
}
.section-title .emoji { font-size: 22px; }
.section-title .see-all {
  margin-left: auto;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  cursor: pointer;
}

/* ── Recent Wins ── */
.wins-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 14px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wins-scroll::-webkit-scrollbar { display: none; }
.win-card {
  flex-shrink: 0;
  width: 80px;
  text-align: center;
}
.win-thumb {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2d3a4a, #3d4f63);
  margin: 0 0 6px;
  border: 2px dashed rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 10px;
}
.win-user { font-size: 12px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-amount { font-size: 12px; color: #16a34a; font-weight: 700; }

/* ── Provider Tabs ── */
.provider-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 14px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.provider-scroll::-webkit-scrollbar { display: none; }
.provider-tab {
  flex-shrink: 0;
  width: 85px;
  height: 85px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.provider-tab.active { border-color: #3b82f6; background: #eff6ff; }
.provider-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #475569;
}
.provider-tab.active .provider-icon { background: #dbeafe; color: #2563eb; }
.provider-name { font-size: 12px; font-weight: 600; color: #475569; }
.provider-tab.active .provider-name { color: #2563eb; }

/* ── Game Grid ── */
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 14px 16px;
}
.game-card {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.game-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(145deg, #2d3a4a, #3d4f63);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 11px;
  text-align: center;
  padding: 6px;
  border: 2px dashed rgba(255,255,255,0.12);
}
.game-hot {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.game-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ── Bottom Nav (Curved) ── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 80px;
  z-index: 100;
}
.bottom-nav svg.nav-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
}
.nav-items {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  padding: 0 0 6px;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
  position: relative;
  flex: 1;
}
.nav-item.active { }
.nav-icon { width: 62px; height: 62px; object-fit: contain; }
.nav-center-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: -38px;
  position: relative;
  z-index: 10;
}
.nav-center {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: visible;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-center img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* ── News Modal ── */
.modal-overlay {
  position: fixed;
  top:0; right:0; bottom:0; left:0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-news {
  background: linear-gradient(180deg, #d4eef8 0%, #eaf6fc 30%, #fff 50%);
  border-radius: 20px;
  width: 100%;
  max-width: 380px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.modal-news-header {
  display: flex;
  justify-content: center;
  padding: 24px 0 0;
}
.modal-news-img {
  width: 120px;
  height: auto;
}
.modal-news-title {
  font-size: 20px;
  font-weight: 800;
  color: #3b82f6;
  padding: 10px 24px 8px;
}
.modal-news-body {
  padding: 0 24px 24px;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  margin: 0 16px 20px;
  padding: 16px;
  background: #fff;
}
.modal-news-body p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 12px;
}
.modal-news-body p:last-child {
  margin-bottom: 0;
}
.modal-news-close {
  position: absolute;
  bottom: -52px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Hadiah Gratis Banner ── */
.gift-wrapper {
  margin: 16px 14px;
  border-radius: 16px;
  overflow: visible;
}
.gift-label-top {
  background: linear-gradient(135deg, #e8e45a, #c8cc30);
  color: #1a3a6c;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: 8px 20px;
  width: 190px;
  margin: 0 auto;
  border-radius: 0 0 14px 14px;
  position: relative;
  z-index: 2;
}
.gift-body {
  background: linear-gradient(180deg, #1a4a8a 0%, #2563c4 70%, #3a8ee8 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  margin-top: -6px;
  border-radius: 16px 16px 0 0;
}
.gift-percent {
  font-size: 42px;
  font-weight: 900;
  color: #fff;
}
.gift-btn-img {
  width: 120px;
  height: auto;
  cursor: pointer;
}
.gift-wave {
  width: 100%;
  height: 36px;
  display: block;
  margin-top: -1px;
}

/* ── Leaderboard ── */
.leaderboard {
  margin: 16px 14px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #3b82f6;
}
.lb-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 14px 14px 0 0;
  margin: 8px 8px 0;
  overflow: hidden;
}
.lb-tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  font-family: inherit;
}
.lb-tab.active {
  background: #1a2d4a;
  color: #fff;
}
.lb-header {
  display: flex;
  padding: 10px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.lb-col {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding: 6px;
  background: #f1f5f9;
  border-radius: 8px;
  margin: 0 3px;
}
.lb-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.lb-row.even { background: #f8fafc; }
.lb-rank {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}
.lb-badge { width: 32px; height: 32px; object-fit: contain; }
.lb-user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
  justify-content: center;
}
.lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.lb-amount {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #2563eb;
}

/* ── Community ── */
.community-section { padding: 20px 14px 8px; }
.community-title {
  font-size: 17px;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 12px;
}
.social-row {
  display: flex;
  flex-wrap: nowrap;          /* selalu satu baris */
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* ── 18+ Warning ── */
.age-warning {
  margin: 16px 14px;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #e2e8f0;
}
.age-icon { font-size: 42px; flex-shrink: 0; }
.age-warning p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
}

/* ── Provider Logos ── */
.provider-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
}
.provider-logo-box {
  padding: 8px 14px;
  background: #fff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* ── Footer ── */
.footer-text {
  margin: 12px 14px 20px;
  background: linear-gradient(180deg, #d4eef8, #c4e4f2);
  border-radius: 14px;
  padding: 20px;
}
.footer-text p {
  font-size: 13px;
  color: #475569;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 12px;
}
.footer-line {
  text-align: center;
  font-size: 12px;
  color: #64748b;
  padding: 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  margin-bottom: 6px;
}

/* ── Gift banner image overrides ── */
.gift-frame {
  width: 100%;
  display: block;
  margin-top: -1px;
}
.gift-btn-img {
  width: 120px;
  height: auto;
  cursor: pointer;
}

/* ── Social icon images ── */
.social-icon-img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 44px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}
.social-icon-img:hover {
  transform: scale(1.1);
}

/* ══ SIDEBAR ══ */
.sidebar-overlay {
  display: none;
  position: fixed;
  top:0; right:0; bottom:0; left:0;
  background: rgba(0,0,0,0.5);
  z-index: 150;
}
.sidebar {
  position: fixed;
  top: 0;
  left: -85%;
  width: 75%;
  max-width: 360px;
  /* 100vh salah di browser HP: tingginya ikut area di balik bar URL,
     jadi bagian bawah konten kepotong. dvh mengikuti area yang benar-benar terlihat. */
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, #d4eef8, #e8f4fc);
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  /* Kolom, supaya kartu Dukungan bisa didorong ke dasar sidebar
     lewat margin-top:auto — bukan menempel di bawah menu. */
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;   /* scroll halus di iOS */
  overscroll-behavior: contain;        /* jangan ikut menggeser halaman di belakang */
  transition: left 0.3s ease;
  /* ruang aman: bar navigasi bawah + area gestur HP */
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}
.sidebar.open { left: 0; }

.sidebar-header {
  background: linear-gradient(135deg, #0b1d3a, #163468);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-back {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.sidebar-header .logo {
  font-size: 22px;
}

/* Auth */
.sidebar-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  position: relative;
}
.sb-btn-masuk, .sb-btn-daftar {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
}
.sb-btn-masuk { background: linear-gradient(135deg, #a8d8ea, #87ceeb); color: #1a3a6c; }
.sb-btn-daftar { background: #fff; color: #1a3a6c; border: 1px solid #e2e8f0; }
.sb-gift { width: 22px; height: 22px; position: absolute; top: 10px; right: 60px; }
.sb-250 { position: absolute; top: 8px; right: 16px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }

/* Balance */
.sidebar-balance {
  margin: 0 16px;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sb-amount {
  font-size: 24px;
  font-weight: 800;
  color: #3b82f6;
  margin-bottom: 12px;
}
.sb-actions { display: flex; gap: 10px; }
.sb-deposit, .sb-penarikan {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.sb-deposit { background: linear-gradient(135deg, #a8e6cf, #7dd3a8); color: #1a3a6c; }
.sb-penarikan { background: #f1f5f9; color: #64748b; }
.sb-act-icon { width: 18px; height: 18px; }

/* Menu Grid */
.sidebar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 16px;
}
.sb-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.sb-menu-item:hover { background: #f0f7ff; }
.sb-menu-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.sb-menu-item span {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
}

/* Support — didorong ke dasar sidebar */
.sidebar-support {
  padding: 16px;
  margin-top: auto;          /* dorong ke bawah */
  padding-bottom: 24px;
  cursor: pointer;
}
.sidebar-support img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
.sidebar-support:active img { opacity: .85; }

/* ══ SPA PAGE SYSTEM ══ */
.page {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  background: #d4eef8;
  padding-bottom: 90px;
}
.page.active { display: block; }

/* Slide animations */
@keyframes slideInUp {
  from { transform: translateX(-50%) translateY(100%); }
  to { transform: translateX(-50%) translateY(0); }
}
@keyframes slideOutUp {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to { transform: translateX(-50%) translateY(-30%); opacity: 0; }
}
@keyframes slideInDown {
  from { transform: translateX(-50%) translateY(-100%); }
  to { transform: translateX(-50%) translateY(0); }
}
@keyframes slideOutDown {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to { transform: translateX(-50%) translateY(100%); opacity: 0; }
}
.slide-in-up { animation: slideInUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.slide-out-up { animation: slideOutUp 0.3s ease forwards; }
.slide-in-down { animation: slideInDown 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.slide-out-down { animation: slideOutDown 0.3s ease forwards; }

/* Auth page overlay style */
.page-auth {
  background: linear-gradient(180deg, #87ceeb 0%, #b5e8f7 35%, #ddf2fc 60%, #eef9ff 100%);
}

/* ══ LAYANAN PAGE ══ */
.layanan-header {
  background: linear-gradient(135deg, #b5e0f7, #d4eef8);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.layanan-title {
  font-size: 20px;
  font-weight: 800;
  color: #3b82f6;
  flex: 1;
  text-align: center;
  padding-right: 30px;
}
.layanan-card {
  background: linear-gradient(135deg, #e8f4fc, #f0f9ff);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  overflow: hidden;
}
.layanan-card-left {
  flex-shrink: 0;
}
.layanan-cs-placeholder {
  width: 120px;
  height: 130px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c4e4f2, #a8d8ea);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 600;
  border: 2px dashed rgba(255,255,255,0.4);
}
.layanan-card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.layanan-logo-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a4a8a, #2563eb);
  color: #ffd700;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fbbf24;
}
.layanan-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #3b82f6;
}
.layanan-card-sub {
  font-size: 11px;
  color: #64748b;
  word-break: break-all;
}
.layanan-chat-btn {
  display: inline-block;
  padding: 10px 40px;
  border-radius: 25px;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 6px;
  position: relative;
  overflow: hidden;
}
.layanan-chat-btn::after {
  content: '';
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 6px 6px;
}
.layanan-footer-text {
  font-size: 14px;
  color: #475569;
  line-height: 1.7;
  margin-top: 8px;
}

.layanan-cs-img {
  width: 130px;
  height: auto;
  object-fit: contain;
}

/* ══ PROMOSI PAGE ══ */
.promo-tabs {
  display: flex;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 2px solid #e2e8f0;
}
.promo-tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #475569;
  border: none;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  border-radius: 10px;
  transition: all 0.2s;
}
.promo-tab.active {
  background: #1a2d4a;
  color: #fff;
}
.promo-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.promo-banner-placeholder {
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, #1a4a8a, #2b6ad4, #4a9ae8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  font-weight: 600;
  border: 2px dashed rgba(255,255,255,0.2);
  border-bottom: none;
}
.promo-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}
.promo-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.promo-item-left img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.promo-item-left span {
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
}
.promo-claim-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: none;
  background: #1a2d4a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.promo-claim-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2.5s infinite;
}
@keyframes shimmer {
  0% { left: -100%; }
  50% { left: 150%; }
  100% { left: 150%; }
}

/* ══ WELCOME POPUP ══ */
.welcome-popup-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 340px;
  width: 90%;
}
.welcome-popup-img {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.welcome-popup-img img {
  width: 100%;
  display: block;
}
.welcome-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, #1a4a8a, #2b6ad4, #4a9ae8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border: 2px dashed rgba(255,255,255,0.2);
  line-height: 1.6;
}
.welcome-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

/* ══ REGISTRATION SUCCESS POPUP ══ */
.reg-success-modal {
  background: #fff;
  border-radius: 20px;
  width: 90%;
  max-width: 380px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.reg-success-header {
  background: linear-gradient(135deg, #d4eef8, #b5e0f7);
  padding: 20px 16px 30px;
  text-align: center;
  position: relative;
}
.reg-check-icon { margin-bottom: 6px; }
.reg-success-title {
  font-size: 20px;
  font-weight: 800;
  color: #3b82f6;
}
.reg-success-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.08);
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reg-success-body {
  padding: 20px;
}
.reg-success-body p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 6px;
}
.reg-bold {
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 10px !important;
}
.reg-info-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0;
  border: 1px solid #e2e8f0;
}
.reg-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
}
.reg-info-row span:first-child { color: #475569; }
.reg-info-val { color: #2563eb; font-weight: 600; }
.reg-copy-btn {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 50px;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.reg-copy-btn::after {
  content: '';
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* ══ LOGGED-IN STATE ══ */
.header-balance {
  background: linear-gradient(135deg, #1a3a5c, #0f2440);
  color: #fff;
  padding: 8px 20px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.1);
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.hamburger {
  position: relative;
}
.nav-badge {
  position: absolute;
  top: -2px;
  right: 14px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.nav-item {
  position: relative;
}

/* Deposit & Penarikan buttons on home */
.home-actions {
  display: flex;
  gap: 10px;
  padding: 12px 14px 0;
}
.home-deposit, .home-penarikan {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.home-deposit {
  background: linear-gradient(135deg, #a8e6cf, #6dd5a0);
  color: #0f3d2a;
}
.home-penarikan {
  background: linear-gradient(135deg, #b8e8f8, #8dd4ef);
  color: #3b7cc0;
}
.home-act-ico {
  width: 20px;
  height: 20px;
}

/* ══ AKUN PAGE ══ */
.akun-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-top: 8px;
}
.akun-info {
  flex: 1;
  min-width: 0;
}
.akun-avatar-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #fbbf24;
  flex-shrink: 0;
  overflow: hidden;
}
.akun-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.akun-name {
  font-size: 22px;
  font-weight: 800;
  color: #0f2b4a;
  margin-bottom: 6px;
  word-break: break-word;
}
.akun-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.5);
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}
.akun-copy { cursor: pointer; font-size: 14px; }

.akun-balance-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.akun-bal-card {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.akun-bal-label {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}
.akun-bal-amount {
  font-size: 22px;
  font-weight: 800;
  color: #3b82f6;
}

.akun-vip-card {
  background: linear-gradient(135deg, #3b7cc0, #5b9bd5, #7bb8e8);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  min-height: 110px;
}
.akun-vip-text { position: relative; z-index: 1; }
.akun-vip-level {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
}
.akun-vip-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.akun-vip-bg-img {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 90px;
  object-fit: contain;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

.akun-stats-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.akun-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #64748b;
  margin-bottom: 8px;
}
.akun-stat-val { font-weight: 700; }
.akun-progress-wrap {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.akun-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 4px;
}
.akun-progress-full {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}
.akun-stat-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
}

.akun-section-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.akun-sec-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.akun-sec-title {
  font-size: 15px;
  font-weight: 700;
  color: #3b82f6;
}
.akun-sec-amount {
  font-size: 15px;
  font-weight: 700;
  color: #3b82f6;
}
.akun-sec-link {
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
}
.akun-agen-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: #475569;
}

/* ── Akun: Bagikan Cepat ── */
.akun-share-label {
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
  margin: 14px 0 10px;
}
.akun-share-row {
  display: flex;
  flex-wrap: nowrap;          /* selalu satu baris */
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}
.akun-share-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.akun-share-item img {
  width: 100%;
  max-width: 40px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 50%;
}
.akun-share-item span {
  font-size: 9px;
  color: #475569;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

/* ── Akun: Menu List ── */
.akun-menu-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.akun-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #3b82f6;
  transition: background 0.15s;
}
.akun-menu-item:last-child { border-bottom: none; }
.akun-menu-item:active { background: #f8fafc; }
.akun-menu-ico { font-size: 20px; width: 28px; text-align: center; }
.akun-menu-item span:nth-child(2) { flex: 1; }
.akun-arrow {
  font-size: 22px;
  color: #cbd5e1;
  font-weight: 300;
}

.akun-menu-ico-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.75;
}

/* ── Button image backgrounds (Deposit & Penarikan) ── */
.home-deposit, .sb-deposit {
  background: url('../assets/btn_deposit.png') center/cover no-repeat !important;
  color: #1a3a2a !important;
  border: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.home-penarikan, .sb-penarikan {
  background: url('../assets/btn_penarikan.png') center/cover no-repeat !important;
  color: #3b7cc0 !important;
  border: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

/* ══ DEPOSIT PAGE ══ */
.dep-tabs { display:flex; background:#fff; border-radius:12px; overflow:hidden; margin-bottom:14px; border:2px solid #e2e8f0; }
.dep-tab { flex:1; padding:12px 0; text-align:center; font-size:14px; font-weight:600; color:#64748b; border:none; background:#fff; cursor:pointer; font-family:inherit; border-radius:10px; }
.dep-tab.active { background:#2563eb; color:#fff; }
.dep-label { font-size:16px; font-weight:700; color:#3b82f6; margin-bottom:8px; }

.dep-offer-card { background:#fff; border-radius:12px; overflow:hidden; margin-bottom:8px; }
.dep-offer-selected { display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; }
.dep-offer-text { flex:1; font-size:14px; font-weight:600; }
.dep-offer-arrow { color:#94a3b8; font-size:18px; }
.dep-offer-dropdown { background:#1a2d4a; border-radius:0 0 12px 12px; overflow:hidden; }
.dep-offer-opt { display:flex; align-items:center; gap:10px; padding:14px 16px; color:#fff; font-size:14px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.08); }
.dep-offer-opt:last-child { border:none; }
.dep-offer-opt span:nth-child(2) { flex:1; }
.dep-offer-opt span:nth-child(3) { color:#3b82f6; }

.dep-methods { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; margin-bottom:14px; }
.dep-methods::-webkit-scrollbar { display:none; }
.dep-method { flex-shrink:0; padding:8px 16px; background:#fff; border-radius:10px; cursor:pointer; border:2px solid transparent; white-space:nowrap; display:flex; align-items:center; justify-content:center; position:relative; min-width:90px; height:48px; }
.dep-method.active { border-color:transparent; }
.dep-method.active::after { content:''; position:absolute; bottom:-4px; left:15%; right:15%; height:3px; background:#2563eb; border-radius:3px; }
.dep-method-logo { height:22px; max-width:70px; object-fit:contain; }

.dep-amount-area { background:linear-gradient(180deg,#2563eb,#3b82f6,#60a5fa); border-radius:16px; padding:18px; margin-bottom:14px; }
.dep-channel-label { display:inline-block; background:#1a2d4a; color:#fff; padding:6px 14px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:12px; }
.dep-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.dep-amt-card { background:rgba(255,255,255,0.15); border-radius:10px; padding:10px 8px; text-align:center; cursor:pointer; border:2px solid transparent; transition:all 0.2s; }
.dep-amt-card:hover { background:rgba(255,255,255,0.22); }
.dep-amt-card.active { background:rgba(255,255,255,0.3); border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,0.4); }
.dep-amt-bonus { display:inline-block; background:rgba(0,0,0,0.3); color:#fbbf24; font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; margin-bottom:6px; }
.dep-amt-val { display:block; color:#fff; font-size:15px; font-weight:700; }

.dep-custom-input { display:flex; align-items:center; background:rgba(255,255,255,0.9); border-radius:10px; padding:10px 14px; gap:8px; margin-bottom:8px; }
.dep-rp { font-size:16px; font-weight:700; color:#64748b; }
.dep-custom-input input { flex:1; border:none; background:transparent; font-size:15px; color:#64748b; outline:none; font-family:inherit; }
.dep-clear { background:none; border:none; color:#94a3b8; font-size:16px; cursor:pointer; }
.dep-minmax { display:flex; flex-direction:column; gap:2px; font-size:12px; color:rgba(255,255,255,0.7); }

.dep-detail-section { background:#fff; border-radius:14px; overflow:hidden; margin-bottom:14px; }
.dep-detail-header { display:flex; justify-content:space-between; align-items:center; padding:16px; font-size:16px; font-weight:700; color:#3b82f6; cursor:pointer; }
.dep-detail-arrow { font-size:18px; color:#94a3b8; transition:transform 0.3s; }
.dep-detail-section.open .dep-detail-arrow { transform:rotate(180deg); }
.dep-detail-body { display:none; padding:0 16px 16px; }
.dep-detail-section.open .dep-detail-body { display:block; }
.dep-detail-row { display:flex; justify-content:space-between; font-size:14px; color:#475569; padding:6px 0; border-bottom:1px solid #f1f5f9; }
.dep-detail-total { background:#f8fafc; border-radius:10px; padding:14px; text-align:right; font-size:16px; font-weight:700; color:#2563eb; margin-top:10px; }

.dep-support-card { background:#fff; border-radius:14px; padding:16px; margin-bottom:80px; }
.dep-support-header { display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:700; color:#3b82f6; margin-bottom:10px; }
.dep-support-card p { font-size:14px; color:#475569; line-height:1.6; background:#f0f7ff; padding:14px; border-radius:10px; margin-bottom:10px; }
.dep-safe { font-size:14px; color:#16a34a; font-weight:600; }

.dep-submit-wrap { position:fixed; bottom:70px; left:50%; transform:translateX(-50%); width:100%; max-width:480px; padding:14px; background:linear-gradient(0deg,rgba(212,238,248,1),rgba(212,238,248,0.8)); z-index:10; }
.dep-submit-btn { width:100%; padding:16px; border:none; border-radius:50px; background:linear-gradient(90deg,#60a5fa,#2563eb); color:#fff; font-size:16px; font-weight:700; cursor:pointer; position:relative; overflow:hidden; }
.dep-submit-btn::after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:radial-gradient(circle,rgba(255,255,255,0.15) 1px,transparent 1px); background-size:8px 8px; }

/* ── Transaksi Tab ── */
.dep-tab-content { }
.txn-filters { display:flex; gap:10px; margin-bottom:14px; }
.txn-filter-select { flex:1; position:relative; }
.txn-filter-select select { width:100%; padding:12px 14px; border-radius:12px; border:none; background:#fff; font-size:14px; font-weight:600; color:#64748b; appearance:none; font-family:inherit; cursor:pointer; }
.txn-filter-select .txn-arrow { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#94a3b8; pointer-events:none; }
.txn-row { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#f0f7ff; border-radius:12px; margin-bottom:8px; }
.txn-amount { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#e67e22; }
.txn-amount .txn-icon { width:20px; height:20px; border-radius:50%; background:#e67e22; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }
.txn-date { font-size:13px; color:#64748b; }
.txn-empty { text-align:center; padding:30px; color:#94a3b8; font-size:14px; }

.txn-empty-img { width: 140px; height: auto; margin-bottom: 12px; }
.txn-empty p { font-size: 16px; color: #94a3b8; }

/* ══ PENARIKAN TAB ══ */
.wd-saldo-card { background:linear-gradient(135deg,#2563eb,#3b82f6,#60a5fa); border-radius:14px; padding:18px; margin-bottom:12px; color:#fff; }
.wd-saldo-label { font-size:14px; opacity:0.8; margin-bottom:4px; }
.wd-saldo-amount { font-size:28px; font-weight:900; }
.wd-info-card { background:#fff; border-radius:14px; padding:16px; margin-bottom:12px; }
.wd-info-card p { font-size:14px; color:#64748b; line-height:1.6; margin-bottom:6px; }
.wd-detail-btn { background:#1a2d4a; color:#fff; border:none; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; margin-top:4px; }
.wd-add-account { width:100%; padding:14px; border:none; border-radius:50px; background:linear-gradient(90deg,#60a5fa,#2563eb); color:#fff; font-size:15px; font-weight:700; cursor:pointer; position:relative; overflow:hidden; font-family:inherit; }
.wd-add-account::after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:radial-gradient(circle,rgba(255,255,255,0.15) 1px,transparent 1px); background-size:8px 8px; }
.wd-amount-area { background:#fff; border-radius:14px; padding:16px; }
.wd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wd-amt-card { background:#2563eb; color:#fff; border-radius:10px; padding:14px 8px; text-align:center; font-size:14px; font-weight:700; cursor:pointer; border:2px solid transparent; transition:all 0.2s; }
.wd-amt-card:hover,.wd-amt-card.active { background:#1d4ed8; border-color:#93c5fd; }

/* ══ E-WALLET PAGE ══ */
.ew-card { background:#fff; border-radius:14px; padding:16px; margin-bottom:12px; }
.ew-field-label { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#3b82f6; margin-bottom:10px; }
.ew-input { width:100%; padding:14px; border-radius:10px; border:none; background:#f0f7ff; font-size:15px; color:#64748b; font-family:inherit; outline:none; }
.ew-input::placeholder { color:#94a3b8; }
.ew-confirm-btn { width:100%; padding:16px; border:none; border-radius:50px; background:linear-gradient(90deg,#94a3b8,#64748b); color:#fff; font-size:16px; font-weight:700; cursor:pointer; position:relative; overflow:hidden; }
.ew-confirm-btn::after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:radial-gradient(circle,rgba(255,255,255,0.1) 1px,transparent 1px); background-size:8px 8px; }

/* ══ TURNOVER MODAL ══ */
.turnover-modal { background:#fff; border-radius:20px 20px 0 0; width:100%; max-width:480px; position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-height:85vh; overflow-y:auto; box-shadow:0 -8px 32px rgba(0,0,0,0.15); }
.turnover-header { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #e2e8f0; }
.turnover-header span { font-size:18px; font-weight:800; color:#3b82f6; }
.turnover-header button { background:none; border:none; font-size:20px; color:#94a3b8; cursor:pointer; }
.turnover-body { padding:20px; }
.turnover-label { font-size:15px; font-weight:600; color:#3b82f6; margin-bottom:8px; }
.turnover-val-box { background:#f0f7ff; border-radius:10px; padding:14px; font-size:18px; font-weight:700; color:#16a34a; margin-bottom:14px; }
.turnover-faq { margin-top:16px; }
.turnover-faq-item { background:#f8fafc; border-radius:12px; padding:14px; margin-bottom:10px; }
.turnover-faq-q { font-size:14px; font-weight:700; color:#3b82f6; margin-bottom:6px; }
.turnover-faq-item p:last-child { font-size:13px; color:#475569; line-height:1.6; }

/* ══ PENARIKAN ENHANCEMENTS ══ */
.wd-custom-input { display:flex; align-items:center; background:#f0f7ff; border-radius:10px; padding:12px 14px; gap:8px; margin-top:12px; }
.wd-rp { font-size:16px; font-weight:700; color:#3b82f6; }
.wd-custom-input input { flex:1; border:none; background:transparent; font-size:16px; color:#64748b; outline:none; font-family:inherit; font-weight:600; }
.wd-custom-input input::placeholder { color:#94a3b8; font-weight:400; }
.wd-clear { background:none; border:none; font-size:18px; color:#94a3b8; cursor:pointer; padding:0 4px; }

.wd-turnover-info { margin-top:12px; }
.wd-turnover-text { font-size:13px; color:#ef4444; line-height:1.5; }

.wd-detail-section { background:#fff; border-radius:14px; margin-top:12px; overflow:hidden; margin-bottom:80px; }
.wd-detail-header { display:flex; justify-content:space-between; align-items:center; padding:16px; cursor:pointer; user-select:none; }
.wd-detail-header span:first-child { font-size:15px; font-weight:700; color:#3b82f6; }
.wd-detail-arrow { font-size:18px; color:#94a3b8; transition:transform 0.3s; display:inline-block; }
.wd-detail-arrow.open { transform:rotate(180deg); }
.wd-detail-body { padding:0 16px; max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease; }
.wd-detail-body.open { max-height:200px; padding:0 16px 16px; }
.wd-detail-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14px; color:#475569; border-bottom:1px solid #f1f5f9; }
.wd-detail-row:last-child { border-bottom:none; }
.wd-detail-row span:last-child { font-weight:600; color:#3b82f6; }
.wd-detail-total span:first-child { font-weight:700; color:#3b82f6; }
.wd-detail-total span:last-child { color:#2563eb; font-weight:800; }

.wd-submit-btn { background:linear-gradient(90deg,#60a5fa,#2563eb) !important; }

/* ══ WITHDRAWAL VALIDATION POPUP ══ */
.wd-popup-modal { background:rgba(15,23,42,0.92); border-radius:16px; padding:32px 28px; max-width:320px; width:85%; text-align:center; position:relative; backdrop-filter:blur(8px); }
.wd-popup-close { position:absolute; top:12px; right:14px; background:none; border:none; color:#94a3b8; font-size:26px; cursor:pointer; line-height:1; }
.wd-popup-text { color:#fff; font-size:16px; font-weight:600; line-height:1.6; margin:0; padding-top:8px; }

/* ══ GAME CARDS (Nexus) ══ */
.game-card { border-radius:12px; overflow:hidden; cursor:pointer; position:relative; transition:transform 0.2s; background:#1a2d4a; }
.game-card:active { transform:scale(0.96); }
.game-card-img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.game-card-placeholder { width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; text-align:center; font-size:11px; font-weight:700; color:#fff; padding:8px; background:linear-gradient(135deg,#3b82f6,#2563eb); word-break:break-word; }
.game-card-name { padding:6px 8px; font-size:11px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(0,0,0,0.3); }

/* ══ BANNER SLIDER ══ */
.banner-slider { position:relative; overflow:hidden; border-radius:14px; }
.banner-track { display:flex; transition:transform 0.4s ease; }
.banner-slide { min-width:100%; }
.banner-slide-img { width:100%; height:auto; display:block; border-radius:14px; }
.promo-banner-img { width:100%; border-radius:14px 14px 0 0; display:block; }

/* ══ BONUS DEPOSIT HARIAN PAGE ══ */
.bdh-deposit-btn { width:100%; padding:14px; border:none; border-radius:50px; background:#3b82f6; color:#fff; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; margin-bottom:18px; }
.bdh-table-wrap { background:#fff; border-radius:14px; overflow:hidden; margin-bottom:24px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.bdh-table-header { display:flex; justify-content:space-between; padding:14px 16px; background:linear-gradient(135deg,#dbeafe,#bfdbfe); font-size:14px; font-weight:700; color:#1e40af; }
.bdh-table-row { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; font-size:13px; color:#64748b; border-top:1px solid #f1f5f9; }
.bdh-table-row.even { background:#f8fafc; }
.bdh-pct { font-weight:700; color:#2563eb; }
.bdh-desc-section { margin-top:8px; }
.bdh-desc-ribbon { position:relative; text-align:center; margin-bottom:20px; }
.bdh-ribbon-img { width:70%; max-width:320px; }
.bdh-ribbon-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:16px; font-weight:800; color:#0e7490; text-shadow:0 1px 2px rgba(255,255,255,0.5); white-space:nowrap; }
.bdh-rules { background:#f0f9ff; border-radius:14px; padding:20px 16px; }
.bdh-rule { display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.bdh-rule:last-child { margin-bottom:0; }
.bdh-rule-num { width:36px; height:36px; min-width:36px; border-radius:10px; background:linear-gradient(135deg,#60a5fa,#3b82f6); color:#fff; font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(59,130,246,0.3); }
.bdh-rule p { font-size:13px; color:#64748b; line-height:1.6; margin:0; padding-top:6px; }

/* ══ PENAWARAN (DEPOSIT BESAR) PAGE ══ */
.pnw-countdown-card { background:#fff; border-radius:14px; padding:20px; text-align:center; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.pnw-countdown-label { font-size:15px; font-weight:600; color:#3b82f6; margin-bottom:12px; }
.pnw-countdown { display:flex; align-items:center; justify-content:center; gap:6px; }
.pnw-cd-num { background:#f0f7ff; border:2px solid #dbeafe; border-radius:10px; padding:8px 12px; font-size:22px; font-weight:800; color:#1e40af; min-width:44px; text-align:center; }
.pnw-cd-unit { font-size:14px; color:#64748b; font-weight:600; }
.pnw-day-header { background:#3b82f6; color:#fff; text-align:center; padding:10px; border-radius:10px 10px 0 0; font-size:16px; font-weight:700; margin-top:-4px; }
.pnw-cards { background:#fff; border-radius:0 0 14px 14px; padding:4px; margin-bottom:8px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.pnw-card { background:#f0f7ff; border-radius:12px; padding:16px; margin:8px; }
.pnw-card-top { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:12px; border-bottom:1px solid #e2e8f0; }
.pnw-card-left { display:flex; flex-direction:column; gap:4px; }
.pnw-card-line { font-size:13px; color:#64748b; display:flex; align-items:center; gap:6px; }
.pnw-card-line b { color:#3b82f6; }
.pnw-ico { width:20px; height:20px; }
.pnw-card-right { text-align:right; }
.pnw-card-total { font-size:24px; font-weight:800; color:#1e40af; }
.pnw-card-total-label { font-size:11px; color:#64748b; }
.pnw-card-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:10px; }
.pnw-rollover { font-size:12px; color:#64748b; }
.pnw-deposit-btn { padding:10px 24px; border:none; border-radius:50px; background:#3b82f6; color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }

/* ══ BONUS HADIAH PAGE ══ */
.hdh-days { display:flex; gap:8px; justify-content:center; margin-bottom:18px; }
.hdh-day { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; opacity:0.7; transition:opacity 0.2s; }
.hdh-day.active { opacity:1; }
.hdh-day-coin { width:36px; height:36px; }
/* Label hari.
   Sebelumnya memakai gambar latar yang 75% areanya putih, sehingga
   teks putih di atasnya tidak terlihat sama sekali. */
.hdh-day-label {
  padding:6px 14px; font-size:12px; font-weight:700; color:#fff;
  border-radius:0 0 10px 10px; text-align:center; min-width:60px;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.hdh-day-label.biru  { background:linear-gradient(180deg,#60a5fa,#2563eb); }
.hdh-day-label.merah { background:linear-gradient(180deg,#fb7185,#e11d48); }
.hdh-deposit-card { background:#fff; border-radius:14px; padding:18px; margin-bottom:18px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.hdh-deposit-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:14px; font-weight:600; color:#3b82f6; }
.hdh-deposit-left { display:flex; align-items:center; gap:6px; }
.hdh-deposit-amount { font-size:18px; font-weight:800; color:#3b82f6; }
.hdh-claim-info { background:#f0f7ff; border-radius:10px; padding:12px; margin-bottom:14px; }

/* ══ COIN SHIMMER EFFECT ══ */
.hdh-day-coin { position:relative; }
.hdh-day::after {
  content:'';
  position:absolute;
  top:2px; left:10%;
  width:28px; height:28px;
  background:linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.7) 45%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.7) 55%, transparent 70%);
  background-size:200% 200%;
  border-radius:50%;
  animation:coinShimmer 2.5s ease-in-out infinite;
  pointer-events:none;
}
.hdh-day { position:relative; }
.hdh-day:nth-child(2)::after { animation-delay:0.4s; }
.hdh-day:nth-child(3)::after { animation-delay:0.8s; }
.hdh-day:nth-child(4)::after { animation-delay:1.2s; }
.hdh-day:nth-child(5)::after { animation-delay:1.6s; }
@keyframes coinShimmer {
  0% { background-position:200% 200%; opacity:0; }
  30% { opacity:1; }
  50% { background-position:0% 0%; opacity:1; }
  70% { opacity:0; }
  100% { background-position:-200% -200%; opacity:0; }
}

/* ══ REFERRAL 1 (PETI HARTA) PAGE ══ */
.ref-link-card { background:#fff; border-radius:14px; padding:18px; margin-bottom:14px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.ref-link-row { display:flex; gap:8px; }
.ref-link-input { flex:1; padding:12px; border-radius:10px; border:1px solid #e2e8f0; background:#f8fafc; font-size:13px; color:#64748b; font-family:inherit; outline:none; }
.ref-copy-btn { padding:12px 20px; border:none; border-radius:10px; background:#3b82f6; color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.ref-social-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.ref-social-item { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:48px; }
.ref-social-ico { width:32px; height:32px; }
.ref-social-item span { font-size:9px; color:#64748b; white-space:nowrap; }
.ref-bawahan-card { background:#fff; border-radius:14px; padding:18px; margin-bottom:14px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.ref-chest-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:8px; }
.ref-chest-item { text-align:center; }
.ref-chest-box { background:linear-gradient(180deg,#fff 60%,#4a90d9 60%); border-radius:14px; padding:12px 4px 6px; position:relative; border:2px solid #d0e0f0; }
.ref-chest-badge { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(90deg,#3b82f6,#2563eb); color:#fff; font-size:11px; font-weight:700; padding:3px 0; border-radius:0 0 12px 12px; display:flex; align-items:center; justify-content:center; gap:2px; }
.ref-chest-rp { font-size:11px; color:#64748b; margin-top:4px; font-weight:600; }
.ref-chest-arrow-row { grid-column:1/-1; display:flex; justify-content:space-around; color:#94a3b8; font-size:10px; padding:2px 0; }

/* ── Peti Harta: Zigzag Grid ── */
.ph-grid { padding:4px 0; }
.ph-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
.ph-item {
  flex:1;
  text-align:center;
  min-width:0;
}
.ph-box {
  background:linear-gradient(180deg,#f0f7ff 55%,#60a5fa 55%);
  border-radius:14px;
  padding:8px 4px 4px;
  position:relative;
  border:2px solid #bfdbfe;
  margin:0 2px;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ph-chest-img {
  width:58%;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
  position:relative;
  top:-4px;
}
.ph-badge {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(90deg,#3b82f6,#2563eb);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 0;
  border-radius:0 0 12px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.ph-rp {
  font-size:11px;
  color:#64748b;
  margin-top:4px;
  font-weight:600;
}
.ph-arrow-h {
  color:#94a3b8;
  font-size:18px;
  font-weight:700;
  flex-shrink:0;
  width:14px;
  text-align:center;
  line-height:1;
}
.ph-arrow-v {
  position:relative;
  height:18px;
  margin:2px 0;
}
.ph-arrow-down {
  position:absolute;
  color:#94a3b8;
  font-size:18px;
  line-height:1;
}
.ref-arrow { opacity:0.4; }

/* ══ AGEN PAGE ══ */
.agn-tabs { display:flex; gap:4px; padding:12px 14px; overflow-x:auto; }
.agn-tab { padding:10px 16px; border:none; border-radius:50px; background:#fff; color:#64748b; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; }
.agn-tab.active { background:#3b82f6; color:#fff; }
.agn-time-tabs { display:flex; gap:4px; overflow-x:auto; margin:12px 0 10px; padding-bottom:4px; }
.agn-time { padding:8px 14px; border:none; border-radius:50px; background:#e2e8f0; color:#64748b; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; }
.agn-time.active { background:linear-gradient(90deg,#3b82f6,#2563eb); color:#fff; }
.agn-date-row { background:#f0f7ff; border-radius:10px; padding:12px; display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.agn-stats-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.agn-stat-row { display:flex; justify-content:space-between; padding:16px; border-bottom:1px solid #f1f5f9; font-size:14px; color:#64748b; }
.agn-stat-row:last-child { border:none; }
.agn-stat-row b { color:#3b82f6; }
.agn-mini-card { background:#f0f7ff; border-radius:10px; padding:12px; text-align:center; }
.agn-mini-val { font-size:16px; font-weight:800; color:#3b82f6; margin-bottom:4px; }
.agn-mini-label { font-size:10px; color:#64748b; }
.agn-sub-tab { background:#f8fafc; border-radius:10px; padding:10px; text-align:center; font-size:12px; font-weight:600; color:#64748b; cursor:pointer; }
.agn-sub-tab.active { background:#e0e7ff; color:#2563eb; }
.agn-faq-card { background:#fff; border-radius:14px; padding:18px 16px; margin:10px 0; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.agn-faq-card h3 { font-size:15px; color:#3b82f6; margin-bottom:10px; }
.agn-faq-answer { background:#f0f7ff; border-radius:10px; padding:14px; font-size:13px; color:#64748b; line-height:1.6; }

/* ══ BONUS ISI ULANG AKUMULATIF ══ */
.bak-countdown { position:absolute; top:52%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.bak-cd-grid { display:grid; grid-template-columns:auto auto auto auto auto auto auto auto; gap:4px; align-items:center; }
.bak-cd-num { background:rgba(0,0,0,0.6); color:#fff; font-size:24px; font-weight:800; padding:8px 12px; border-radius:8px; text-align:center; min-width:44px; }
.bak-cd-unit { color:#fff; font-size:14px; font-weight:600; }
.bak-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.bak-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.bak-card-header { display:flex; align-items:center; gap:6px; padding:14px 16px 0; }
.bak-card-body { padding:8px 16px; }
.bak-progress { height:4px; background:#e2e8f0; border-radius:4px; margin-top:6px; overflow:hidden; }
.bak-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,#3b82f6,#60a5fa); border-radius:4px; }
.bak-terima-btn { width:calc(100% - 32px); margin:8px 16px 14px; padding:10px; border:none; border-radius:50px; background:#e2e8f0; color:#64748b; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }

/* ══ BONUS CHECK-IN ══ */
.cki-card { background:#fff; border-radius:14px; padding:18px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.cki-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.cki-day { background:#f0f7ff; border-radius:12px; padding:10px 6px; text-align:center; }
.cki-day-big { grid-column:span 2; }
.cki-day-label { font-size:12px; font-weight:600; color:#64748b; margin-bottom:4px; }
.cki-day-icon { width:40px; height:32px; object-fit:contain; }
.cki-day-big .cki-day-icon { width:70px; height:44px; }
.cki-day-rp { font-size:14px; font-weight:800; color:#3b82f6; margin:4px 0; }
.cki-klaim-btn { padding:6px 16px; border:none; border-radius:50px; background:#d1d5db; color:#6b7280; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
.cki-checkin-btn { width:100%; padding:16px; border:none; border-radius:50px; background:linear-gradient(90deg,#60a5fa,#2563eb); color:#fff; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }

/* ══ REFERRAL 2 ══ */

/* ══════════════════════════════════════
   PAGE: BONUS APP (Bonus Unduh)
   ══════════════════════════════════════ */
.ba-body {
  padding: 14px;
  padding-bottom: 40px;
  background: linear-gradient(180deg, #d4eef8 0%, #e8f6fd 100%);
  background-image: url('../assets/bonusapp_bg_dots.webp'), linear-gradient(180deg, #d4eef8 0%, #e8f6fd 100%);
  background-repeat: repeat, no-repeat;
  background-size: 52px 52px, 100% 100%;
  min-height: calc(100vh - 52px);
}

/* ── Bonus Cards ── */
.ba-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.ba-card {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  padding: 16px 10px 14px;
  text-align: center;
  border: 1.5px solid #e2e8f0;
}
.ba-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 8px;
}
.ba-card-img {
  width: 100%;
  max-width: 130px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
}
.ba-card-amount {
  font-size: 24px;
  font-weight: 800;
  color: #2563eb;
}

/* ── Download Button ── */
.ba-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  margin-bottom: 16px;
  border: none;
  border-radius: 50px;
  background: url('../assets/bonusapp_btn_bg.png') center/cover no-repeat;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(54,112,243,0.35);
  position: relative;
  overflow: hidden;
}
.ba-download-btn:active {
  transform: scale(0.97);
}
.ba-android-ico {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

/* ── Info Text ── */
.ba-info-text {
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}
.ba-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

/* ── Aturan Acara (Collapsible) ── */
.ba-rules-wrap {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
}
.ba-rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #3b82f6;
  -webkit-tap-highlight-color: transparent;
}
.ba-chevron {
  transition: transform 0.3s ease;
}
.ba-rules-wrap.open .ba-chevron {
  transform: rotate(180deg);
}
.ba-rules-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 18px;
}
.ba-rules-wrap.open .ba-rules-body {
  max-height: 600px;
  padding: 0 18px 18px;
}
.ba-rule-section {
  margin-bottom: 14px;
}
.ba-rule-section:last-child {
  margin-bottom: 0;
}
.ba-rule-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 8px;
}
.ba-rule-section-title span {
  text-decoration: underline;
}
.ba-rule-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ba-rule-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 4px;
}
.ba-rule-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  font-weight: 900;
  color: #475569;
}

/* ── Android Download Steps ── */
.ba-android-section {
  background: #fff;
  border-radius: 14px;
  padding: 20px 16px;
  margin-bottom: 20px;
}
.ba-android-title {
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 2px;
}
.ba-android-subtitle {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 18px;
}
.ba-step {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #eef6ff;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.ba-step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ba-step-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
  line-height: 1.4;
}
.ba-step-badge {
  background: linear-gradient(135deg, #93c5fd, #60a5fa);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Phone Mockup ── */
.ba-phone-wrap {
  text-align: center;
  padding: 10px 0 20px;
  position: relative;
}
.ba-phone-wrap::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 60%;
  background: radial-gradient(ellipse at center bottom, rgba(147,197,253,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.ba-phone-img {
  width: 75%;
  max-width: 340px;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.1));
}

/* ══════════════════════════════════════
   PAGE: KODE REDEEM (Tukar Hadiah)
   ══════════════════════════════════════ */
.kr-body {
  padding: 14px;
  padding-bottom: 40px;
}

/* ── Banner ── */
.kr-banner {
  margin-bottom: 16px;
}

/* ── Cards ── */
.kr-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px;
  margin-bottom: 16px;
}
.kr-card-label {
  font-size: 15px;
  font-weight: 600;
  color: #3b82f6;
  margin-bottom: 12px;
}

/* ── Input Row ── */
.kr-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px 4px 4px 14px;
  margin-bottom: 8px;
}
.kr-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #3b82f6;
  outline: none;
  font-family: inherit;
  padding: 10px 0;
}
.kr-input::placeholder {
  color: #94a3b8;
}
.kr-paste-btn {
  background: #64748b;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.kr-paste-btn:active {
  opacity: 0.8;
}

/* ── Hint ── */
.kr-hint {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 16px;
}

/* ── Submit Button ── */
.kr-submit-btn {
  display: block;
  margin: 0 auto;
  background: #2b2d22;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 40px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.kr-submit-btn:active {
  opacity: 0.85;
}

/* ── Social Media ── */
.kr-social-label {
  font-size: 15px;
  font-weight: 600;
  color: #3b82f6;
  margin-bottom: 14px;
  line-height: 1.4;
}
.kr-social-row {
  display: flex;
  flex-wrap: nowrap;          /* selalu satu baris */
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 12px 10px;
}
.kr-social-icon {
  flex: 1 1 0;                /* menyusut sendiri agar muat */
  min-width: 0;
  max-width: 44px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s;
}
.kr-social-icon:active {
  transform: scale(0.9);
}

/* ══════════════════════════════════════
   PAGE: CASHBACK (Dana Penyelamatan)
   ══════════════════════════════════════ */

/* ── Countdown ── */
.cb-countdown-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
}
.cb-countdown-title {
  font-size: 16px;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 16px;
}
.cb-digits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cb-digit {
  width: 52px;
  height: 64px;
  background: url('../assets/cashback_digit_bg.png') center/cover no-repeat;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.cb-colon {
  font-size: 36px;
  font-weight: 900;
  color: #346dee;
  padding: 0 2px;
}

/* ── Kerugian Hari Ini ── */
.cb-loss-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}
.cb-loss-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cb-loss-title {
  font-size: 18px;
  font-weight: 800;
  color: #3b82f6;
}
.cb-loss-stats {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.cb-loss-box {
  flex: 1;
  background: #f0f7ff;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.cb-loss-label {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}
.cb-loss-value {
  font-size: 15px;
  font-weight: 700;
  color: #2563eb;
}
.cb-collect-btn {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 50px;
  background: url('../assets/cashback_btn_bg.webp') center/cover no-repeat;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.5px;
}
.cb-collect-btn:active {
  opacity: 0.85;
}

/* ── VIP Table (Collapsible) ── */
.cb-vip-wrap {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
}
.cb-vip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #3b82f6;
  -webkit-tap-highlight-color: transparent;
}
.cb-chevron {
  transition: transform 0.3s ease;
}
.cb-vip-wrap.open .cb-chevron {
  transform: rotate(180deg);
}
.cb-vip-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.cb-vip-wrap.open .cb-vip-body {
  max-height: 800px;
}
.cb-vip-table-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.cb-vip-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
  font-size: 14px;
  color: #64748b;
}
.cb-vip-row.even {
  background: #f0f7ff;
}

/* ═══════════════════════════════════════ */
/*          VIP ROULETTE (Lucky Spin)      */
/* ═══════════════════════════════════════ */
.vr-body {
  padding: 0 0 40px 0;
  background: linear-gradient(180deg, #dbeafe 0%, #e0f2fe 30%, #f0f9ff 100%);
  min-height: 100vh;
}

/* ── Tier Tabs ── */
.vr-tabs {
  display: flex;
  gap: 0;
  padding: 12px 14px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vr-tabs::-webkit-scrollbar { display: none; }
.vr-tab {
  flex: 0 0 auto;
  min-width: 90px;
  padding: 10px 16px;
  border: none;
  background: #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  line-height: 1.3;
  transition: all .2s;
}
.vr-tab small {
  font-weight: 600;
  font-size: 11px;
  opacity: .7;
}
.vr-tab.active {
  background: #3b82f6;
  color: #fff;
}
.vr-tab.active small {
  opacity: 1;
}

/* ── Wheel Area ── */
.vr-wheel-area {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0 20px;
  overflow: hidden;
}

.vr-wheel-container {
  position: relative;
  width: 300px;
  height: 300px;
}

/* ── Penunjuk di atas ── */
.vr-pointer {
  position: absolute;
  top: -4px; left: 50%; margin-left: -13px; z-index: 10;
  width: 0; height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 26px solid #dc2626;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.vr-pointer::after {
  content: ''; position: absolute; left: -8px; top: -30px;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fca5a5, #dc2626);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* ── Bingkai luar ── */
.vr-wheel-container::before {
  content: ''; position: absolute;
  top: -9px; right: -9px; bottom: -9px; left: -9px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fde68a, #f59e0b 45%, #d97706);
  box-shadow: 0 10px 28px rgba(180,83,9,.35), inset 0 -3px 8px rgba(0,0,0,.18);
}

/* ── Roda ── */
.vr-wheel {
  width: 300px; height: 300px; position: relative;
  border-radius: 50%;
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.vr-wheel-face {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 50%;
  background: #fef3c7;   /* cadangan bila conic-gradient tidak didukung */
  background: conic-gradient(
    #fffbeb 0deg 45deg,   #fcd34d 45deg 90deg,
    #fffbeb 90deg 135deg, #fb923c 135deg 180deg,
    #fffbeb 180deg 225deg,#fcd34d 225deg 270deg,
    #fffbeb 270deg 315deg,#fb923c 315deg 360deg);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.65), inset 0 0 28px rgba(180,83,9,.18);
}
.vr-wheel-face::after {
  content: ''; position: absolute;
  top: 16px; right: 16px; bottom: 16px; left: 16px;
  border-radius: 50%; border: 2px dashed rgba(180,83,9,.35);
}

/* Pentol di garis pembatas segmen */
.vr-pegs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.vr-peg {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #fde68a);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* ── Lapisan hadiah ── */
.vr-prize-layer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none; z-index: 4;
}
.vr-prize {
  position: absolute;
  width: 74px; height: 60px;
  top: 50%; left: 50%;
  margin-top: -30px; margin-left: -37px;
  transform-origin: center center;
  /* +22.5deg = TENGAH wedge, bukan di garis pembatas.
     Rotasi kedua membuat teks tetap tegak. */
  transform:
    rotate(calc(var(--seg) * 45deg + 22.5deg))
    translateY(-96px)
    rotate(calc(var(--seg) * -45deg - 22.5deg));
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.vr-prize-ico {
  font-size: 26px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
.vr-prize-txt {
  font-size: 11px; font-weight: 800; color: #b45309;
  margin-top: 3px; white-space: nowrap; line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

/* ── Tombol GO ── */
.vr-go-btn {
  position: absolute; top: 50%; left: 50%;
  width: 84px; height: 84px; margin: -42px;
  border-radius: 50%; border: 5px solid #f59e0b;
  background: radial-gradient(circle at 38% 32%, #93c5fd, #3b82f6 55%, #1d4ed8);
  color: #fff; font-size: 24px; font-weight: 900; font-family: inherit;
  cursor: pointer; z-index: 6; letter-spacing: .5px;
  box-shadow: 0 5px 15px rgba(0,0,0,.3), inset 0 -3px 6px rgba(0,0,0,.2);
  text-shadow: 0 2px 3px rgba(0,0,0,.25);
}
.vr-go-btn:active { transform: scale(.94); }
.vr-go-btn.ready { animation: vrPulse 1.8s ease-in-out infinite; }
@keyframes vrPulse {
  0%,100% { box-shadow: 0 5px 15px rgba(0,0,0,.3), inset 0 -3px 6px rgba(0,0,0,.2), 0 0 0 0 rgba(59,130,246,.5); }
  50%     { box-shadow: 0 5px 15px rgba(0,0,0,.3), inset 0 -3px 6px rgba(0,0,0,.2), 0 0 0 13px rgba(59,130,246,0); }
}
.vr-go-btn.disabled {
  background: radial-gradient(circle at 38% 32%, #e2e8f0, #94a3b8 55%, #64748b);
  border-color: #cbd5e1; cursor: not-allowed; animation: none;
}

/* ── VIP Info ── */
.vr-vip-info {
  text-align: center;
  margin: 0 14px 16px;
  padding: 10px 20px;
  background: #e0f2fe;
  border-radius: 50px;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

/* ── Reward Section ── */
.vr-reward-section {
  margin: 0 14px 16px;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.vr-reward-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.vr-reward-title {
  font-size: 15px;
  font-weight: 700;
  color: #3b82f6;
}
.vr-jackpot-link {
  font-size: 13px;
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
}
.vr-reward-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}
.vr-reward-row:last-child {
  border-bottom: none;
}
.vr-reward-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.vr-reward-name {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  flex: 1;
}
.vr-reward-prize {
  font-size: 13px;
  color: #f59e0b;
  font-weight: 600;
  text-align: right;
}

/* ── Jackpot Section ── */
.vr-jackpot-section {
  margin: 0 14px 16px;
}
.vr-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 12px;
}
.vr-jackpot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.vr-jackpot-card {
  background: #f0f9ff;
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
  position: relative;
  border: 1px solid #e0f2fe;
}
.vr-jackpot-info {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  font-style: italic;
}
.vr-jackpot-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 6px;
}
.vr-jackpot-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  line-height: 1.3;
}

/* ── Spin Result Modal ── */
.vr-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}
.vr-modal-overlay.show {
  display: flex;
}
.vr-modal {
  background: #fff;
  border-radius: 20px;
  padding: 30px 24px;
  text-align: center;
  width: 280px;
  animation: vrModalIn .3s ease;
}
@keyframes vrModalIn {
  from { transform: scale(.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.vr-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #f59e0b;
  margin-bottom: 10px;
}
.vr-modal-prize-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 10px auto;
}
.vr-modal-prize-name {
  font-size: 15px;
  font-weight: 600;
  color: #3b82f6;
  margin-bottom: 16px;
}
.vr-modal-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ═══════════════════════════════════════ */
/*              VIP PAGE                   */
/* ═══════════════════════════════════════ */
.vp-body {
  padding: 0 0 40px 0;
  background: linear-gradient(180deg, #dbeafe 0%, #e0f2fe 25%, #f0f9ff 100%);
  min-height: 100vh;
}

/* ── Merged Status + Progress Card ── */
.vp-merged-card {
  margin: 16px 14px 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ── Hero: banner utuh sebagai background, teks di atasnya ── */
.vp-status-top {
  position: relative;
  line-height: 0;
}
.vp-hero-bg {
  width: 100%;
  height: auto;
  display: block;
}
.vp-status-left {
  position: absolute;
  left: 8%;
  /* panel biru pada gambar: 21.3% – 88.8%; taruh teks di tengahnya */
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  line-height: 1.1;
}
.vp-level-big {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.vp-level-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 14px;
  background: rgba(0,0,0,.35);
  border-radius: 50px;
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}
.vp-progress-bottom {
  background: #fff;
  padding: 18px 16px;
  line-height: normal;
}

/* ── Progress bars ── */
.vp-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}
.vp-progress-val {
  font-weight: 700;
  font-size: 15px;
  color: #3b82f6;
}
.vp-bar-wrap {
  height: 8px;
  background: #e2e8f0;
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 4px;
}
.vp-bar {
  height: 100%;
  border-radius: 50px;
  transition: width .5s;
}
.vp-progress-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
}

/* ── 4 Bonus Cards ── */
.vp-bonus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 26px 14px 0;   /* ruang untuk medali yang menonjol ke atas */
}
/* Kartu biru pembungkus */
.vp-bonus-card {
  background: #3670F3;
  border-radius: 14px;
  padding: 4px 4px 8px;
  position: relative;
}
/* Kotak putih DI DALAM kartu — isi medali, angka, label */
.vp-bonus-inner {
  background: #fff;
  border-radius: 11px;
  padding: 22px 3px 8px;   /* padding atas beri ruang medali */
  text-align: center;
  position: relative;
  min-height: 78px;
}
/* Medali menonjol keluar di atas kotak putih */
.vp-bonus-medal {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.vp-bonus-val {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 2px;
}
.vp-bonus-label {
  font-size: 10px;
  color: #3b82f6;
  font-weight: 600;
  line-height: 1.2;
}
/* Tombol gembok di area biru bawah */
.vp-bonus-lock {
  margin-top: 7px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Catatan ── */
.vp-catatan {
  margin: 16px 14px 0;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #3b82f6;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ── Tabs ── */
.vp-tabs-wrap {
  margin: 16px 14px 0;
  background: #fff;
  border-radius: 14px;
  padding: 6px;
  display: flex;
  gap: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.vp-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-radius: 10px;
  transition: all .2s;
}
.vp-tab.active {
  background: #3b82f6;
  color: #fff;
}

/* ── Tab Content ── */
.vp-tab-content {
  margin: 12px 14px 0;
}

/* ── Accordion ── */
.vp-accordion {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.vp-accordion-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: #3b82f6;
}
.vp-chevron {
  transition: transform .3s;
  flex-shrink: 0;
}
.vp-accordion.open .vp-chevron {
  transform: rotate(180deg);
}
.vp-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
  padding: 0 16px;
}
.vp-accordion.open .vp-accordion-body {
  max-height: 99999px;
  padding: 0 16px 16px;
}

/* ── Table ── */
.vp-table-title {
  font-size: 15px;
  font-weight: 700;
  color: #3b82f6;
  margin: 16px 0 8px;
}
.vp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.vp-table thead th {
  background: #3b82f6;
  color: #fff;
  padding: 10px 6px;
  font-weight: 600;
  text-align: left;
  font-size: 11px;
}
.vp-table thead th:first-child {
  border-radius: 8px 0 0 0;
}
.vp-table thead th:last-child {
  border-radius: 0 8px 0 0;
}
.vp-table tbody td {
  padding: 10px 6px;
  color: #64748b;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  white-space: nowrap;
}
.vp-table tbody tr.even td {
  background: #f8fafc;
}
.vp-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Syarat Card ── */
.vp-syarat-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ═══════════════════════════════════════ */
/*          PWA INSTALL POPUP              */
/* ═══════════════════════════════════════ */
.pwa-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pwa-popup-card {
  background: url('../assets/pwa_popup_bg.webp') center/cover no-repeat, linear-gradient(180deg, #b3dcf7 0%, #e3f2fd 100%);
  border-radius: 20px;
  padding: 30px 24px 28px;
  text-align: center;
  width: 100%;
  max-width: 340px;
  position: relative;
  animation: pwaPopIn .35s ease;
}
@keyframes pwaPopIn {
  from { transform: scale(.85) translateY(30px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.pwa-popup-icon {
  width: 160px;
  height: auto;
  margin: -60px auto 10px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
}
.pwa-popup-title {
  font-size: 20px;
  font-weight: 800;
  color: #3b82f6;
  margin-bottom: 8px;
}
.pwa-popup-text {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 20px;
}
.pwa-popup-btn {
  display: block;
  width: 70%;
  margin: 0 auto;
  padding: 14px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #ff6b9d, #ff4081, #e91e63);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(233,30,99,.35);
  transition: transform .15s;
}
.pwa-popup-btn:active {
  transform: scale(.95);
}
.pwa-popup-close {
  margin-top: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0,0,0,.3);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════ */
/*          QRIS PAYMENT MODAL             */
/* ═══════════════════════════════════════ */
/* ══ MODAL PEMBAYARAN QRIS ══ */
.qris-overlay {
  position: fixed; top:0; right:0; bottom:0; left:0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 14px;
}
.qris-modal {
  position: relative;
  background: #fff; width: 100%; max-width: 420px;
  border-radius: 16px;
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.qris-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(100,116,139,.75); color: #fff;
  border: none; font-size: 15px; cursor: pointer; line-height: 1;
}
.qris-scroll {
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
/* — total — */
.qris-total-label { font-size: 14px; color: #94a3b8; margin-bottom: 4px; }
.qris-total-val { font-size: 30px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.qris-note { font-size: 12px; color: #94a3b8; margin-top: 5px; }
.qris-dashed { border-top: 2px dashed #e2e8f0; margin: 16px 0; }
/* — jatuh tempo — */
.qris-due { background: #f8fafc; border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.qris-due-label { font-size: 14px; color: #475569; margin-bottom: 10px; }
.qris-due-boxes { display: flex; align-items: center; gap: 6px; }
.qris-dbox {
  background: #1e293b; color: #fff;
  border-radius: 7px; padding: 7px 11px;
  font-size: 18px; font-weight: 700;
  font-family: ui-monospace, monospace; min-width: 44px; text-align: center;
}
.qris-dsep { font-size: 18px; font-weight: 700; color: #64748b; }
/* — QR — */
.qris-qr-section {
  background: #f8fafc; border-radius: 12px;
  padding: 20px 14px 16px; text-align: center; position: relative;
  margin-bottom: 14px;
}
.qris-qr-pill {
  display: inline-block; background: #fff;
  border-radius: 50px; padding: 8px 26px;
  font-size: 15px; color: #334155; font-weight: 500;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  margin-top: -34px; margin-bottom: 14px;
}
.qris-qr-wrap { margin-bottom: 12px; }
.qris-qr-img {
  width: 210px; height: 210px; object-fit: contain;
  background: #fff; padding: 8px; border-radius: 8px;
}
.qris-save-note { font-size: 14px; color: #dc2626; margin-bottom: 12px; }
.qris-save-btn {
  background: #3b82f6; color: #fff; border: none;
  border-radius: 8px; padding: 11px 22px;
  font-size: 14px; font-family: inherit; cursor: pointer;
  margin-bottom: 16px;
}
.qris-save-btn:active { background: #2563eb; }
.qris-logos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 12px 18px;
}
.qris-logo { height: 22px; max-width: 74px; object-fit: contain; }
/* — status — */
.qris-status {
  text-align: center; font-size: 14px;
  font-weight: 600; color: #d97706; margin-bottom: 6px;
}
.qris-status.paid { color: #16a34a; }
.qris-status.expired { color: #dc2626; }
.qris-bonus {
  text-align: center; font-size: 13px;
  color: #f59e0b; font-weight: 600; margin-bottom: 10px;
}
/* — info bawah — */
.qris-info-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 13px; color: #64748b;
}
.qris-info-logo { height: 20px; object-fit: contain; }
.qris-order-id {
  font-family: ui-monospace, monospace; font-size: 11px;
  color: #334155; word-break: break-all; text-align: right;
}

/* ═══ AUTO-SCROLL MARQUEES ═══ */

/* Wins marquee (horizontal) */
.wins-marquee { overflow:hidden; margin:0 14px 16px; display:block; }
.wins-marquee .wins-track { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:10px; width:max-content; animation: winsScroll 25s linear infinite; }
.wins-marquee .wins-track .win-card { flex:0 0 80px !important; width:80px !important; text-align:center; }
.win-thumb-img { width:80px; height:80px; object-fit:cover; border-radius:12px; margin:0 0 6px; display:block; }
.wins-marquee .wins-track .win-thumb { width:80px; height:80px; margin:0 0 6px; }
@keyframes winsScroll {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}
/* Jeda hanya di perangkat yang punya penunjuk (mouse).
   Di ponsel, ketukan membuat :hover menempel sehingga animasinya
   berhenti selamanya — itu sebabnya marquee mati setelah diklik. */
@media (hover: hover) and (pointer: fine) {
  .wins-marquee:hover .wins-track { animation-play-state: paused; }
}

/* Leaderboard vertical auto-scroll */
.lb-scroll-wrap { max-height:440px; overflow:hidden; position:relative; }
.lb-scroll { width:100%; }
.lb-scroll-inner { animation: lbScroll 40s linear infinite; will-change:transform; }
@keyframes lbScroll {
  from { transform:translateY(0); }
  to { transform:translateY(-50%); }
}
@media (hover: hover) and (pointer: fine) {
  .lb-scroll-wrap:hover .lb-scroll-inner { animation-play-state: paused; }
}

/* ═══ CATATAN PERMAINAN TABS ═══ */
.cg-tab {
  padding: 8px 18px;
  border-radius: 50px;
  border: none;
  background: #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: .2s;
}
.cg-tab.active {
  background: #1e293b;
  color: #fff;
}

/* ═══ KUPON PAGE ═══ */
.kupon-tab {
  flex:1; padding:10px; border:none; background:none;
  font-size:14px; font-weight:600; color:#64748b;
  cursor:pointer; border-radius:10px; font-family:inherit;
}
.kupon-tab.active { background:#1e293b; color:#fff; }

.kupon-card {
  background:#fff; border-radius:16px; padding:14px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.06); cursor:pointer;
}
.kupon-ticket {
  width:100px; height:60px; position:relative;
  flex-shrink:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.kupon-ticket-bg {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:contain; border-radius:8px;
}
.kupon-ticket-amount {
  position:relative; z-index:1; color:#fff;
  font-size:16px; font-weight:800; line-height:1;
}
.kupon-ticket-label {
  position:relative; z-index:1; color:#fff;
  font-size:10px; font-weight:600; margin-top:2px;
}
.kupon-info { flex:1; }
.kupon-desc { font-size:13px; font-weight:600; color:#334155; margin-bottom:4px; }
.kupon-expiry { font-size:12px; color:#3b82f6; }
.kupon-apply-btn {
  padding:8px 16px; border-radius:50px; border:none;
  background:#1e293b; color:#fff; font-size:12px;
  font-weight:700; cursor:pointer; white-space:nowrap;
}
.kupon-method {
  padding:6px 12px; border:2px solid #e2e8f0;
  border-radius:10px; cursor:pointer;
}
.kupon-method.active { border-color:#3b82f6; }

/* ═══ PESAN PAGE ═══ */
.pesan-card { background:#fff; border-radius:14px; padding:14px; margin-bottom:10px; cursor:pointer; }
.pesan-header { display:flex; justify-content:space-between; align-items:center; }
.pesan-title { font-size:14px; font-weight:600; color:#0f172a; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pesan-chevron { flex-shrink:0; transition:transform .3s; }
.pesan-card.open .pesan-chevron { transform:rotate(180deg); }
.pesan-date { font-size:12px; color:#64748b; margin-top:4px; }
.pesan-body { max-height:0; overflow:hidden; transition:max-height .3s; font-size:13px; color:#475569; line-height:1.5; }
.pesan-card.open .pesan-body { max-height:200px; margin-top:8px; padding-top:8px; border-top:1px solid #f1f5f9; }

/* ═══ SIDEBAR PROFILE ═══ */
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin: 0 0 12px;
}
.sb-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #fbbf24;
  object-fit: cover;
  flex-shrink: 0;
}
.sb-profile-info { flex: 1; min-width: 0; }
.sb-profile-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f2b4a;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-profile-id {
  font-size: 12px;
  color: #64748b;
  background: rgba(0,0,0,0.05);
  padding: 2px 10px;
  border-radius: 12px;
  display: inline-block;
}

/* ═══ PESAN TABS (rounded pills) ═══ */
.pesan-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pesan-tabs::-webkit-scrollbar { display: none; }
.pesan-tab {
  flex-shrink: 0;
  padding: 10px 22px;
  border-radius: 50px;
  border: none;
  background: #e0f2fe;
  color: #3b82f6;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: .2s;
}
.pesan-tab.active {
  background: #1e293b;
  color: #fff;
}

/* ── Agen Terperinci: Date Dropdown ── */
.agn-dd-item {
  padding: 14px 16px;
  font-size: 14px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background .15s;
}
.agn-dd-item:last-child { border-bottom: none; }
.agn-dd-item:active, .agn-dd-item:hover { background: #f0f7ff; }
.agn-dd-item.active { color: #2563eb; font-weight: 700; background: #eff6ff; }

/* ── Bawahan Langsung Page ── */
.bwh-toggle {
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
}
.bwh-toggle input { opacity:0; width:0; height:0; }
.bwh-slider {
  position:absolute;
  cursor:pointer;
  top:0; right:0; bottom:0; left:0;
  background:#cbd5e1;
  border-radius:24px;
  transition:.3s;
}
.bwh-slider:before {
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.3s;
}
.bwh-toggle input:checked + .bwh-slider { background:#1e293b; }
.bwh-toggle input:checked + .bwh-slider:before { transform:translateX(20px); }
.bwh-tab {
  flex:1;
  padding:12px;
  border:none;
  border-radius:12px;
  background:transparent;
  color:#64748b;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .2s, color .2s;
}
.bwh-tab.active {
  background:#eef5ff;
  color:#2563eb;
}

/* ── Bawahan User List ── */
.bwh-user-row {
  display:flex;
  align-items:center;
  padding:16px;
  gap:12px;
}
.bwh-border { border-top:1px solid #f1f5f9; }
.bwh-user-ava {
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:2px solid #e2e8f0;
}
.bwh-user-info {
  flex:1;
  min-width:0;
}
.bwh-user-name {
  font-size:14px;
  font-weight:700;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bwh-user-id {
  font-size:12px;
  color:#94a3b8;
  margin-top:2px;
}
.bwh-user-stats {
  text-align:right;
  font-size:13px;
  color:#334155;
  flex-shrink:0;
}
.bwh-user-stats div {
  white-space:nowrap;
  line-height:1.6;
}

/* ══ HALAMAN: HASIL DEPOSIT ══ */
.hd-body {
  padding: 24px 18px 40px;
  min-height: 100vh;
  background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 30%, #dbeafe 100%);
  text-align: center;
}
.hd-icon {
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin: 8px auto 14px;
  display: block;
}
.hd-headline {
  font-size: 19px;
  font-weight: 500;
  color: #0f172a;
  letter-spacing: .3px;
  line-height: 1.4;
  margin-bottom: 22px;
}
.hd-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 16px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  margin-bottom: 26px;
}
.hd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  gap: 12px;
}
.hd-row-key {
  font-size: 14px;
  color: #64748b;
}
.hd-row-val {
  font-size: 15px;
  color: #0f172a;
  font-weight: 600;
  text-align: right;
}
.hd-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e0f2fe;
  border-radius: 10px;
  padding: 13px 14px;
  margin-top: 10px;
  font-size: 15px;
  color: #334155;
}
.hd-total-val {
  color: #2563eb;
  font-weight: 700;
  font-size: 16px;
}
.hd-detail-btn {
  width: 100%;
  padding: 17px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
  transition: transform .12s;
}
.hd-detail-btn:active { transform: scale(.98); }
.hd-detail-btn.done {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 4px 14px rgba(22,163,74,.35);
}
.hd-support {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #475569;
  font-size: 14px;
  cursor: pointer;
}
.hd-support img { width: 22px; height: 22px; object-fit: contain; }

/* ══ CRYPTO: modal pilih koin & bayar ══ */
.cx-overlay {
  position: fixed; top:0; right:0; bottom:0; left:0; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 10000;
}
.cx-modal {
  background: #fff; width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0;
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0,0,0,.18);
}
.cx-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.cx-title { font-size: 16px; font-weight: 700; color: #0f172a; }
.cx-close {
  background: none; border: none; font-size: 19px; color: #94a3b8;
  cursor: pointer; line-height: 1; padding: 4px;
}
/* — pemilih koin — */
.cx-search-wrap { padding: 12px 18px; flex-shrink: 0; }
.cx-search {
  width: 100%; padding: 12px 14px; border: 1px solid #e2e8f0;
  border-radius: 10px; font-size: 14px; font-family: inherit; outline: none;
  background: #f8fafc;
}
.cx-search:focus { border-color: #3b82f6; background: #fff; }
.cx-coin-list {
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0 10px calc(20px + env(safe-area-inset-bottom, 0px));
  flex: 1; min-height: 180px;
}
.cx-coin {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 10px; border-radius: 10px; cursor: pointer;
}
.cx-coin:active { background: #eff6ff; }
.cx-coin img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; border-radius: 50%; }
.cx-coin-info { flex: 1; min-width: 0; }
.cx-coin-name {
  font-size: 14px; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-coin-net { font-size: 11px; color: #94a3b8; text-transform: uppercase; }
.cx-loading, .cx-empty { text-align: center; color: #94a3b8; padding: 32px 0; font-size: 14px; }
/* — layar bayar — */
.cx-pay-body {
  padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cx-countdown {
  text-align: center; font-size: 17px; font-weight: 700;
  color: #2563eb; margin-bottom: 14px;
}
.cx-field { margin-bottom: 13px; }
.cx-field-label { font-size: 12px; color: #64748b; margin-bottom: 5px; }
.cx-copy-row {
  display: flex; align-items: center; gap: 8px;
  background: #f1f5f9; border-radius: 10px; padding: 11px 12px;
}
.cx-amount {
  flex: 1; font-size: 17px; font-weight: 800; color: #0f172a;
  word-break: break-all; font-family: ui-monospace, monospace;
}
.cx-address {
  flex: 1; font-size: 12px; color: #334155;
  word-break: break-all; font-family: ui-monospace, monospace; line-height: 1.45;
}
.cx-copy-btn {
  flex-shrink: 0; background: #2563eb; color: #fff; border: none;
  border-radius: 7px; padding: 7px 13px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.cx-copy-btn:active { background: #1d4ed8; }
.cx-memo {
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 10px; padding: 11px; margin-bottom: 13px;
}
.cx-memo-warn { font-size: 12px; font-weight: 700; color: #b91c1c; margin-bottom: 7px; }
.cx-memo-note { font-size: 11px; color: #b91c1c; margin-top: 7px; line-height: 1.4; }
.cx-qr-wrap { text-align: center; margin: 14px 0; }
.cx-qr-wrap img {
  width: 165px; height: 165px; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff; padding: 6px;
}
.cx-status {
  text-align: center; font-size: 14px; font-weight: 600;
  color: #d97706; margin-bottom: 8px;
}
.cx-status.paid { color: #16a34a; }
.cx-status.expired { color: #dc2626; }
.cx-hint {
  font-size: 11px; color: #94a3b8; text-align: center;
  line-height: 1.5; margin-bottom: 14px;
}
.cx-change-btn {
  width: 100%; padding: 12px; border: 1px solid #cbd5e1;
  border-radius: 10px; background: #fff; color: #475569;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
/* tombol metode Crypto di halaman deposit */
.dep-method-crypto { min-width: 96px; }
.dep-crypto-label { font-size: 14px; font-weight: 700; color: #f7931a; white-space: nowrap; }

/* ── Minimum deposit per metode ── */
.dep-min-hint {
  margin-top: 8px;
  background: rgba(251,191,36,.16);
  border: 1px solid rgba(251,191,36,.5);
  color: #fbbf24;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.dep-amt-card.dep-amt-disabled {
  opacity: .35;
  cursor: not-allowed;
}
.dep-amt-card.dep-amt-disabled:hover { background: rgba(255,255,255,0.15); }

/* ══ HALAMAN: SEMUA GAME ══ */
.gm-body {
  padding: 12px 14px calc(90px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  background: linear-gradient(180deg, #dbeafe, #e0f2fe, #f0f9ff);
}
.gm-search-wrap { margin-bottom: 12px; }
.gm-search {
  width: 100%; padding: 12px 14px;
  border: 1px solid #cbd5e1; border-radius: 50px;
  font-size: 14px; font-family: inherit; outline: none; background: #fff;
}
.gm-search:focus { border-color: #3b82f6; }
.gm-provs {
  display: flex; gap: 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin-bottom: 12px;
  scrollbar-width: none;
}
.gm-provs::-webkit-scrollbar { display: none; }
.gm-prov {
  flex-shrink: 0; padding: 8px 16px; border-radius: 50px;
  background: #fff; color: #475569; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; border: none; font-family: inherit;
}
.gm-prov.active { background: #2563eb; color: #fff; }
.gm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gm-loading, .gm-empty {
  grid-column: 1/-1; text-align: center;
  color: #94a3b8; padding: 40px 0; font-size: 14px;
}

/* ══════════ REFERRAL 2 — RODA KEBERUNTUNGAN ══════════ */
.rf2-body { padding: 14px 14px calc(90px + env(safe-area-inset-bottom,0px)); }

/* — Kartu saldo — */
.rf2-balance-card { background:#fff; border-radius:16px; padding:14px; margin-bottom:16px; }
.rf2-bal-inner { background:#e0f2fe; border-radius:12px; padding:14px; margin-bottom:12px; }
.rf2-bal-top { display:flex; align-items:center; gap:8px; font-size:22px; font-weight:800; color:#0f172a; margin-bottom:10px; }
.rf2-bal-dot { width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff 0 18%,#38bdf8 20% 55%,#0284c7 57%); flex-shrink:0; }
.rf2-progress { height:9px; background:#fff; border-radius:50px; overflow:hidden; }
.rf2-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,#1e293b,#0f172a); border-radius:50px; transition:width .6s ease; }
.rf2-need { font-size:13px; color:#64748b; margin-top:8px; }
.rf2-need b { color:#2563eb; }
.rf2-menarik-btn {
  width:100%; padding:15px; border:none; border-radius:50px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff;
  font-size:17px; font-weight:700; font-family:inherit; cursor:pointer;
  box-shadow:0 4px 14px rgba(37,99,235,.3);
}
.rf2-menarik-btn.disabled { background:linear-gradient(135deg,#cbd5e1,#94a3b8); box-shadow:none; cursor:not-allowed; }

/* — Roda (digambar penuh dengan CSS, tanpa file gambar) — */
.rf2-wheel-wrap { display:flex; justify-content:center; margin-bottom:16px; }
.rf2-wheel-stage { position:relative; width:290px; height:290px; }

/* Penunjuk di atas */
.rf2-pointer {
  position:absolute; top:-4px; left:50%; margin-left:-13px; z-index:8;
  width:0; height:0;
  border-left:13px solid transparent; border-right:13px solid transparent;
  border-top:26px solid #dc2626;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.rf2-pointer::after {
  content:''; position:absolute; left:-8px; top:-30px;
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fca5a5,#dc2626);
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}

/* Bingkai luar */
.rf2-wheel-stage::before {
  content:''; position:absolute; top:-8px; right:-8px; bottom:-8px; left:-8px;
  border-radius:50%;
  background:linear-gradient(160deg,#fde68a,#f59e0b 45%,#d97706);
  box-shadow:0 10px 26px rgba(180,83,9,.35), inset 0 -3px 8px rgba(0,0,0,.18);
}

.rf2-wheel {
  position:absolute; top:0; right:0; bottom:0; left:0; border-radius:50%;
  transition:transform 4.5s cubic-bezier(.17,.67,.12,.99);
}
.rf2-wheel-face {
  position:absolute; top:0; right:0; bottom:0; left:0; border-radius:50%;
  background:#fef3c7;   /* cadangan bila conic-gradient tidak didukung */
  background:conic-gradient(
    #fffbeb 0deg 45deg,   #fcd34d 45deg 90deg,
    #fffbeb 90deg 135deg, #fb923c 135deg 180deg,
    #fffbeb 180deg 225deg,#fcd34d 225deg 270deg,
    #fffbeb 270deg 315deg,#fb923c 315deg 360deg);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.65), inset 0 0 26px rgba(180,83,9,.18);
}
/* Garis putus melingkar di dalam */
.rf2-wheel-face::after {
  content:''; position:absolute; top:16px; right:16px; bottom:16px; left:16px;
  border-radius:50%; border:2px dashed rgba(180,83,9,.35);
}

/* Pentol di garis pembatas */
.rf2-pegs { position:absolute; top:0; right:0; bottom:0; left:0; }
.rf2-peg {
  position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-6px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#fde68a);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* Hadiah — ikut berputar, gambar tetap tegak */
.rf2-prizes { position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; }
.rf2-prize {
  position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform 4.5s cubic-bezier(.17,.67,.12,.99);
}
.rf2-prize-ico { font-size:28px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.rf2-prize-txt {
  font-size:11px; font-weight:800; color:#b45309;
  margin-top:2px; white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

/* Tombol GO */
.rf2-go-btn {
  position:absolute; top:50%; left:50%; width:80px; height:80px; margin:-40px;
  border-radius:50%; border:5px solid #f59e0b;
  background:radial-gradient(circle at 38% 32%,#93c5fd,#3b82f6 55%,#1d4ed8);
  color:#fff; font-size:23px; font-weight:900; font-family:inherit;
  cursor:pointer; z-index:6; letter-spacing:.5px;
  box-shadow:0 5px 14px rgba(0,0,0,.3), inset 0 -3px 6px rgba(0,0,0,.2);
  text-shadow:0 2px 3px rgba(0,0,0,.25);
}
.rf2-go-btn:active { transform:scale(.94); }
.rf2-go-btn.off {
  background:radial-gradient(circle at 38% 32%,#e2e8f0,#94a3b8 55%,#64748b);
  border-color:#cbd5e1; cursor:not-allowed;
}
/* Denyut halus saat masih punya kesempatan */
.rf2-go-btn.ready { animation:rf2Pulse 1.8s ease-in-out infinite; }
@keyframes rf2Pulse {
  0%,100% { box-shadow:0 5px 14px rgba(0,0,0,.3), inset 0 -3px 6px rgba(0,0,0,.2), 0 0 0 0 rgba(59,130,246,.5); }
  50%     { box-shadow:0 5px 14px rgba(0,0,0,.3), inset 0 -3px 6px rgba(0,0,0,.2), 0 0 0 12px rgba(59,130,246,0); }
}

.rf2-toast {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.8); color:#fff; border-radius:12px;
  padding:16px 22px; font-size:15px; text-align:center; line-height:1.4;
  z-index:9; display:none; max-width:240px;
}
.rf2-toast.show { display:block; }
.rf2-toast-x { display:block; font-size:26px; margin-bottom:4px; }

/* Rincian kesempatan putar */
.rf2-spins {
  background:#fff; border-radius:14px; padding:14px; margin-bottom:14px;
}
.rf2-spins-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px; font-size:15px; color:#334155;
}
.rf2-spins-n { font-size:22px; font-weight:800; color:#2563eb; }
.rf2-spin-src {
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-top:1px solid #f1f5f9; font-size:13px; color:#64748b;
}
.rf2-spin-src b { margin-left:auto; color:#0f172a; font-weight:700; }
.rf2-spin-src.done b { color:#16a34a; }

/* — Hitung mundur & ajakan — */
.rf2-cd-wrap { text-align:center; margin-bottom:14px; }
.rf2-cd { background:#fff; padding:9px 22px; border-radius:50px; font-size:14px; color:#334155; }
.rf2-invite {
  background:#fff; border-radius:14px; padding:16px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; color:#334155; cursor:pointer; margin-bottom:16px;
}
.rf2-invite-arrow { color:#38bdf8; font-size:20px; }

/* — Tab laporan — */
.rf2-tabs-card { background:linear-gradient(180deg,#2563eb,#3b82f6); border-radius:16px; padding:10px; }
.rf2-tabs { background:#fff; border-radius:12px; padding:6px; display:flex; gap:6px; margin-bottom:10px; }
.rf2-tab { flex:1; padding:12px; border:none; border-radius:9px; background:transparent; color:#64748b; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; }
.rf2-tab.active { background:#1e293b; color:#fff; }
/* Daftar penarik bergulir otomatis.
   Tinggi dikunci + overflow disembunyikan supaya jendelanya tetap. */
.rf2-log {
  background:#fff; border-radius:12px;
  height:238px; overflow:hidden; position:relative;
}
/* Sedikit gradasi di tepi atas & bawah agar potongan baris tidak terlihat kasar */
.rf2-log::before, .rf2-log::after {
  content:''; position:absolute; left:0; right:0; height:26px;
  pointer-events:none; z-index:2;
}
.rf2-log::before { top:0;    background:linear-gradient(#fff,rgba(255,255,255,0)); }
.rf2-log::after  { bottom:0; background:linear-gradient(rgba(255,255,255,0),#fff); }
.rf2-log-track {
  animation: rf2LogScroll 26s linear infinite;
  will-change: transform;
}
/* Digeser tepat setengah karena isinya digandakan → sambungan tak terlihat */
@keyframes rf2LogScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
/* Hormati pengguna yang mematikan animasi di pengaturan HP */
@media (prefers-reduced-motion: reduce) {
  .rf2-log-track { animation: none; }
  .rf2-log { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
.rf2-log-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; font-size:14px; border-bottom:1px solid #f1f5f9; }
.rf2-log-row:last-child { border-bottom:none; }
.rf2-log-ph { color:#334155; font-family:ui-monospace,monospace; font-size:13px; }
.rf2-log-mid { color:#94a3b8; font-size:13px; }
.rf2-log-amt { color:#2563eb; font-weight:700; white-space:nowrap; }
.rf2-star-note { font-size:14px; font-weight:600; color:#0f172a; margin-bottom:16px; }

/* — Popup — */
.rf2-overlay { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.6); z-index:10000; display:flex; align-items:center; justify-content:center; padding:16px; }
.rf2-modal-wrap { width:100%; max-width:380px; }
.rf2-modal-tab {
  background:linear-gradient(180deg,#dbeafe,#bfdbfe); border-radius:18px 18px 0 0;
  padding:18px 24px 26px; text-align:center; font-size:19px; color:#0f172a;
  margin:0 26px -14px; position:relative; z-index:1;
}
.rf2-modal {
  background:linear-gradient(180deg,#93c5fd,#dbeafe 45%,#eff6ff);
  border-radius:20px; padding:26px 18px 20px; position:relative; z-index:2;
}
.rf2-win-amt { text-align:center; font-size:32px; font-weight:800; color:#0f172a; margin-bottom:16px; }
.rf2-win-prog { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rf2-win-bar-wrap { flex:1; height:12px; background:#fff; border-radius:50px; overflow:hidden; }
.rf2-win-bar { height:100%; width:0%; background:#2563eb; border-radius:50px; transition:width .8s ease; }
.rf2-win-pct { font-size:15px; font-weight:600; color:#0f172a; }
.rf2-win-need { font-size:14px; color:#2563eb; margin-bottom:14px; }
.rf2-win-log { background:#fff; border-radius:12px; max-height:170px; overflow-y:auto; margin-bottom:16px; }
.rf2-pink-btn {
  width:100%; padding:15px; border:none; border-radius:50px;
  background:linear-gradient(90deg,#ec4899,#ef4444); color:#fff;
  font-size:16px; font-weight:700; font-family:inherit; cursor:pointer; line-height:1.3;
}
.rf2-modal-close {
  display:block; margin:18px auto 0; width:40px; height:40px; border-radius:50%;
  background:#2563eb; color:#fff; border:none; font-size:18px; cursor:pointer;
}
.rf2-claim-label { text-align:center; font-size:15px; color:#2563eb; margin-bottom:8px; }
.rf2-timeline { background:#fff; border-radius:14px; padding:18px 16px; margin-bottom:18px; }
.rf2-tl-item { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:#334155; padding-bottom:22px; position:relative; }
.rf2-tl-item:last-child { padding-bottom:0; }
.rf2-tl-item:not(:last-child)::before { content:''; position:absolute; left:6px; top:14px; bottom:0; width:2px; background:#0f172a; }
.rf2-tl-dot { width:14px; height:14px; border-radius:50%; background:#cbd5e1; flex-shrink:0; margin-top:2px; position:relative; z-index:1; }
.rf2-tl-item.done .rf2-tl-dot { background:#0f172a; }
.rf2-tl-item b { color:#2563eb; }

/* — Bagikan — */
.rf2-share-overlay { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.5); z-index:10001; display:flex; align-items:flex-end; justify-content:center; }
.rf2-share { background:#fff; width:100%; max-width:480px; border-radius:20px 20px 0 0; padding:22px 18px calc(24px + env(safe-area-inset-bottom,0px)); position:relative; }
.rf2-share-close { position:absolute; top:16px; right:16px; background:none; border:none; font-size:20px; color:#94a3b8; cursor:pointer; }
.rf2-share-title { font-size:17px; color:#0f172a; text-align:center; margin-bottom:18px; padding:0 28px; line-height:1.4; }
.rf2-share-label { font-size:14px; color:#64748b; margin-bottom:8px; }
.rf2-share-link { display:flex; align-items:center; gap:10px; background:#e0f2fe; border-radius:10px; padding:14px; }
.rf2-share-link span { flex:1; font-size:13px; color:#0f172a; word-break:break-all; }
.rf2-share-copy { background:none; border:none; font-size:19px; color:#475569; cursor:pointer; }
.rf2-share-icons { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:4px; }
.rf2-share-item { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
.rf2-share-item img { width:100%; max-width:44px; height:auto; aspect-ratio:1/1; object-fit:contain; border-radius:50%; }
.rf2-share-item span { font-size:9px; color:#475569; text-align:center; }

/* ── Ringkasan cashback ── */
.cb-summary {
  display: flex; align-items: center; gap: 8px;
  background: #f0f9ff; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
  font-size: 14px; color: #64748b;
}
.cb-summary b { margin-left: auto; font-size: 18px; color: #2563eb; }
.cb-pct-badge {
  background: #dbeafe; color: #2563eb; border-radius: 50px;
  padding: 3px 10px; font-size: 12px; font-weight: 700;
}

/* ══════════ KARTU KLAIM (dipakai di semua halaman promo) ══════════ */
.clm-body { padding: 14px 14px calc(90px + env(safe-area-inset-bottom,0px)); }
.clm-card {
  background: #fff; border-radius: 16px; padding: 18px;
  margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.clm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.clm-title { font-size: 16px; font-weight: 800; color: #0f172a; }
.clm-streak { font-size: 12px; color: #2563eb; background: #eff6ff; border-radius: 50px; padding: 4px 12px; font-weight: 700; }

/* 7 hari beruntun */
.clm-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.clm-day {
  background: #f0f9ff; border: 2px solid #e0f2fe; border-radius: 12px;
  padding: 10px 4px; text-align: center; position: relative;
}
.clm-day-n { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.clm-day-rp { font-size: 13px; font-weight: 800; color: #2563eb; }
.clm-day.done { background: #ecfdf5; border-color: #a7f3d0; }
.clm-day.done .clm-day-rp { color: #16a34a; }
.clm-day.done::after {
  content: '✓'; position: absolute; top: 3px; right: 6px;
  color: #16a34a; font-size: 12px; font-weight: 800;
}
.clm-day.today { border-color: #3b82f6; background: #dbeafe; }

/* Baris statistik */
.clm-stat { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.clm-stat-item {
  flex: 1 1 46%; min-width: 0; background: #f8fafc;
  border-radius: 10px; padding: 11px 12px;
}
.clm-stat-k { display: block; font-size: 11px; color: #94a3b8; margin-bottom: 3px; }
.clm-stat-item b { font-size: 15px; color: #0f172a; }
.clm-hi { color: #2563eb !important; }

/* Penawaran */
.clm-offers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.clm-offer {
  display: flex; align-items: center; gap: 12px;
  background: #f8fafc; border-radius: 12px; padding: 12px 14px;
}
.clm-offer-info { flex: 1; min-width: 0; }
.clm-offer-t { font-size: 14px; font-weight: 700; color: #0f172a; }
.clm-offer-s { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.clm-offer-btn {
  flex-shrink: 0; padding: 9px 18px; border: none; border-radius: 50px;
  background: #3b82f6; color: #fff; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.clm-offer-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Input tukar koin */
.clm-input-row { display: flex; gap: 8px; margin-bottom: 10px; }
.clm-input {
  flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid #cbd5e1;
  border-radius: 10px; font-size: 15px; font-family: inherit; outline: none;
}
.clm-input:focus { border-color: #3b82f6; }
.clm-max {
  flex-shrink: 0; padding: 0 18px; border: none; border-radius: 10px;
  background: #e0f2fe; color: #2563eb; font-size: 13px; font-weight: 800;
  font-family: inherit; cursor: pointer;
}

.clm-note { font-size: 12px; color: #64748b; line-height: 1.5; margin-bottom: 14px; }
.clm-btn {
  width: 100%; padding: 15px; border: none; border-radius: 50px;
  background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff;
  font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 14px rgba(37,99,235,.28);
}
.clm-btn:active { transform: scale(.99); }
.clm-btn:disabled {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  box-shadow: none; cursor: not-allowed;
}

/* ══════════ TOKO WIN ══════════ */
.tw-body { padding: 14px 14px calc(90px + env(safe-area-inset-bottom,0px)); }
.tw-banner { width: 100%; height: auto; display: block; border-radius: 14px; margin-bottom: 14px; }

/* Saldo koin */
.tw-coin-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(110deg, #eff6ff 0%, #bfdbfe 55%, #60a5fa 100%);
  border-radius: 16px; padding: 18px; margin-bottom: 14px; overflow: hidden;
}
.tw-coin-label { font-size: 16px; color: #334155; margin-bottom: 4px; }
.tw-info-i { color: #94a3b8; font-size: 13px; }
.tw-coin-val { font-size: 34px; font-weight: 800; color: #2563eb; line-height: 1.1; }
.tw-detail-btn {
  flex-shrink: 0; background: rgba(255,255,255,.75); border: none;
  border-radius: 50px; padding: 8px 16px; font-size: 14px;
  color: #334155; font-family: inherit; cursor: pointer;
}

/* Info cara dapat koin */
.tw-info-card { background: #fff; border-radius: 16px; padding: 18px; margin-bottom: 14px; }
.tw-info-head { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.tw-info-title { flex: 1; font-size: 16px; font-weight: 600; color: #0f172a; line-height: 1.45; }
.tw-info-chev {
  flex-shrink: 0; width: 26px; height: 26px; border: 1px solid #cbd5e1;
  border-radius: 50%; color: #94a3b8; display: flex; align-items: center;
  justify-content: center; font-size: 15px; transition: transform .2s;
}
.tw-info-card.open .tw-info-chev { transform: rotate(180deg); }
.tw-info-body { font-size: 14px; color: #94a3b8; line-height: 1.5; margin-top: 10px; display: none; }
.tw-info-card.open .tw-info-body { display: block; }

/* Tab */
.tw-tabs { background: #fff; border-radius: 14px; padding: 6px; display: flex; gap: 6px; margin-bottom: 14px; }
.tw-tab {
  flex: 1; padding: 13px; border: none; border-radius: 10px; background: transparent;
  color: #64748b; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.tw-tab.active { background: #1e293b; color: #fff; }

/* Kartu penukaran */
.tw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tw-loading, .tw-empty { grid-column: 1/-1; text-align: center; color: #94a3b8; padding: 34px 0; font-size: 14px; }
.tw-card {
  background: #fff; border-radius: 14px; padding: 12px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;   /* tombol selalu rata di bawah */
}
.tw-card .tw-desc { flex: 1; }             /* dorong sisanya ke bawah */
.tw-vip-badge {
  position: absolute; top: 0; right: 0;
  background: #1e293b; color: #fff; font-size: 11px;
  padding: 5px 12px; border-radius: 0 14px 0 12px;
}

/* Tiket kupon — takik di kiri & kanan garis putus */
.tw-ticket {
  background: #3b82f6; border-radius: 10px; padding: 14px 10px;
  text-align: center; color: #fff; position: relative; margin: 22px 0 12px;
}
.tw-tk-lbl { font-size: 13px; opacity: .95; }
.tw-tk-val { font-size: 21px; font-weight: 700; line-height: 1.2; }
.tw-tk-line {
  border-top: 2px dashed rgba(255,255,255,.9);
  margin: 9px -10px; position: relative;
}
.tw-tk-line::before, .tw-tk-line::after {
  content: ''; position: absolute; top: -9px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
}
.tw-tk-line::before { left: -9px; }
.tw-tk-line::after  { right: -9px; }
/* Grafis tukar koin — digambar dengan CSS, tanpa file gambar */
.tw-swap {
  background: #3b82f6; border-radius: 10px;
  margin: 22px 0 12px; padding: 16px 10px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative; min-height: 104px;
}
.tw-coin {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: #7c2d12;
  background: radial-gradient(circle at 34% 28%, #fef08a, #fbbf24 55%, #d97706);
  box-shadow: 0 3px 8px rgba(0,0,0,.3), inset 0 -3px 5px rgba(0,0,0,.18);
  border: 3px solid #fcd34d;
  flex-shrink: 0;
}
.tw-swap-arrows {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; color: #fb923c; font-size: 17px; line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.tw-desc { font-size: 14px; color: #64748b; line-height: 1.55; margin-bottom: 8px; }
.tw-desc b { color: #0f172a; font-weight: 600; }
.tw-cost { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.tw-cost-ico {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #93c5fd, #1d4ed8);
  color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.tw-cost-val { font-size: 17px; font-weight: 700; color: #2563eb; }
.tw-btn {
  width: 100%; padding: 13px; border: none; border-radius: 50px;
  background: #1e293b; color: #fff; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.tw-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
.tw-end { text-align: center; color: #94a3b8; font-size: 14px; padding: 22px 0; }

/* Riwayat */
.tw-hist { background: #fff; border-radius: 14px; overflow: hidden; }
.tw-hist-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.tw-hist-row:last-child { border-bottom: none; }
.tw-hist-t { font-size: 14px; font-weight: 600; color: #0f172a; }
.tw-hist-s { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.tw-hist-c { font-size: 14px; font-weight: 700; color: #dc2626; white-space: nowrap; }

/* Rincian kupon di popup hasil roda VIP */
.vr-modal-coupon {
  font-size: 13px; color: #2563eb; font-weight: 600;
  background: #eff6ff; border-radius: 8px;
  padding: 8px 12px; margin-top: 8px; line-height: 1.4;
}

/* ── Kupon di dropdown penawaran deposit ── */
.dep-coupon-count {
  background: #2563eb; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 50px; padding: 2px 9px; margin-left: 6px; vertical-align: middle;
}
.dep-coupon-hint {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  padding: 10px 12px; font-size: 12px; color: #2563eb;
  line-height: 1.5; margin-top: 8px;
}
.dep-amt-card.dep-amt-coupon {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 2px rgba(251,191,36,.45);
}

/* ══ KODE REDEEM HARIAN ══ */
.dc-card {
  background: linear-gradient(135deg, #2563eb, #3b82f6 55%, #60a5fa);
  border-radius: 16px; padding: 18px; margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(37,99,235,.25);
}
.dc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dc-title { font-size: 16px; font-weight: 800; color: #fff; }
.dc-badge {
  background: #fbbf24; color: #78350f; font-size: 11px; font-weight: 800;
  border-radius: 50px; padding: 3px 11px;
}
.dc-badge.done { background: rgba(255,255,255,.3); color: #fff; }
.dc-code-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.95); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.dc-code {
  flex: 1; min-width: 0; font-family: ui-monospace, monospace;
  font-size: 20px; font-weight: 800; letter-spacing: 2px;
  color: #1e293b; word-break: break-all;
}
.dc-copy {
  flex-shrink: 0; background: #1e293b; color: #fff; border: none;
  border-radius: 8px; padding: 8px 15px; font-size: 13px;
  font-weight: 700; font-family: inherit; cursor: pointer;
}
.dc-note { font-size: 12px; color: rgba(255,255,255,.9); line-height: 1.5; margin-bottom: 14px; }
.dc-btn {
  width: 100%; padding: 14px; border: none; border-radius: 50px;
  background: #fbbf24; color: #78350f; font-size: 16px;
  font-weight: 800; font-family: inherit; cursor: pointer;
}
.dc-btn:active { transform: scale(.99); }
.dc-btn:disabled { background: rgba(255,255,255,.35); color: rgba(255,255,255,.8); cursor: not-allowed; }

/* ══ Baris sisa kesempatan putar (Lucky Spin & Referral 2) ══ */
.spin-bar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 14px;
  padding: 13px 16px; margin: 0 14px 14px;
  font-size: 15px; color: #334155;
}
/* Jarak cadangan: sebagian WebView Android lama tidak mengenal "gap" pada
   flexbox, tanpa ini teksnya menempel jadi "Sisa putaran3". */
.spin-bar > * + * { margin-left: 10px; }
.spin-bar-ico { font-size: 18px; line-height: 1; flex-shrink: 0; }
.spin-bar-txt { flex: 1; min-width: 0; }
.spin-bar-n {
  font-size: 20px; font-weight: 800; color: #2563eb;
  min-width: 26px; text-align: right;
}
/* Habis: angka & baris jadi redup */
.spin-bar.empty { background: #f1f5f9; color: #94a3b8; }
.spin-bar.empty .spin-bar-n { color: #94a3b8; }
.spin-bar.empty .spin-bar-ico { filter: grayscale(1); opacity: .6; }
/* Masih ada: angka berdenyut halus */
.spin-bar:not(.empty) .spin-bar-n { animation: spinNum 2s ease-in-out infinite; }
@keyframes spinNum {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.12); }
}

/* Kartu kesempatan putar Referral 2 saat habis */
.rf2-spins.empty { background: #f1f5f9; }
.rf2-spins.empty .rf2-spins-top { color: #94a3b8; }
.rf2-spins.empty .rf2-spins-n { color: #94a3b8; }
.rf2-spins:not(.empty) .rf2-spins-n { animation: spinNum 2s ease-in-out infinite; }

/* ══ Tab kategori game ══ */
.gm-cats {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 8px; margin-bottom: 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gm-cats::-webkit-scrollbar { display: none; }
.gm-cats > * + * { margin-left: 8px; }   /* cadangan bila gap tak didukung */
.gm-cat {
  flex-shrink: 0; display: flex; align-items: center;
  padding: 9px 16px; border: none; border-radius: 50px;
  background: #fff; color: #475569;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.gm-cat-ico { margin-right: 6px; font-size: 15px; line-height: 1; }
.gm-cat.active { background: #2563eb; color: #fff; }
/* Kategori yang langsung membuka game (mis. sportbook) */
.gm-cat.direct { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }
.gm-cat.direct.active { background: linear-gradient(135deg,#d97706,#b45309); }
.gm-cat-n {
  margin-left: 6px; font-size: 11px; font-weight: 600;
  opacity: .7;
}

/* ══ Peti Harta: progres & status ══ */
.ph-progress {
  background: #fff; border-radius: 14px;
  padding: 14px 16px; margin: 0 0 16px;
}
.ph-prog-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; color: #334155; margin-bottom: 9px;
}
.ph-prog-n b { font-size: 19px; color: #2563eb; }
.ph-prog-bar { height: 9px; background: #e2e8f0; border-radius: 50px; overflow: hidden; }
.ph-prog-fill {
  height: 100%; width: 0%; border-radius: 50px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transition: width .6s ease;
}
.ph-prog-note { font-size: 12px; color: #64748b; margin-top: 8px; line-height: 1.5; }

/* Status tiap peti */
.ph-item { cursor: default; }
.ph-box { position: relative; }
/* ── Label status peti ──
   Diletakkan di tengah kotak, bukan menempel di dasarnya. Di posisi
   lama (bottom:-4px) label ini jatuh persis di atas .ph-badge yang
   duduk di bottom:0 — dua tulisan bertumpuk di ruang yang sama, dan
   angka syaratnya jadi tidak terbaca. */
.ph-state {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 9px; font-weight: 800; white-space: nowrap;
  padding: 3px 9px; border-radius: 50px; display: none;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .3px; z-index: 2;
}

/* Terkunci — cukup diredupkan, tanpa label */
.ph-item.locked .ph-chest-img { filter: grayscale(1); opacity: .45; }
.ph-item.locked .ph-rp { color: #94a3b8; }

/* Siap dibuka — memantul, hijau, bisa diklik */
.ph-item.ready { cursor: pointer; }
.ph-item.ready .ph-chest-img { animation: phBounce 1.4s ease-in-out infinite; }
.ph-item.ready .ph-state {
  display: block; background: #16a34a; color: #fff; font-size: 10px;
}
@keyframes phBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}

/* Sudah diambil — diselubungi, label CLAIMED di tengah */
.ph-item.done .ph-box { position: relative; }
.ph-item.done .ph-chest-img { opacity: .45; }
.ph-item.done .ph-box::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(15,23,42,.42); border-radius: inherit;
}
.ph-item.done .ph-state {
  display: block; background: #16a34a; color: #fff;
}
.ph-tick { font-weight: 900; margin-right: 2px; }
.ph-item.done .ph-rp { text-decoration: line-through; color: #94a3b8; }

/* ══ Bawahan: tanda valid / belum ══ */
.bwh-badge {
  display: inline-block; margin-left: 7px; vertical-align: middle;
  font-size: 9px; font-weight: 800; letter-spacing: .3px;
  border-radius: 50px; padding: 2px 8px;
}
.bwh-badge.ok { background: #dcfce7; color: #15803d; }
.bwh-badge.no { background: #f1f5f9; color: #94a3b8; }
.bwh-user-row.bwh-valid { background: #f0fdf4; }
.bwh-ok { color: #16a34a; font-weight: 700; }
.bwh-no { color: #94a3b8; }

/* Pesan alasan di halaman masuk */
.auth-note {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  padding: 11px 14px; margin: 0 0 14px;
  font-size: 13px; color: #2563eb; line-height: 1.5; text-align: center;
}

/* ══════════ OBROLAN LAYANAN PELANGGAN ══════════ */
.cs-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(15,23,42,.5); z-index: 10050;
  display: flex; align-items: flex-end; justify-content: center;
}
.cs-box {
  width: 100%; max-width: 480px; height: 88vh;
  background: #eef6fb; border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
}

/* — Kepala — */
.cs-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  flex-shrink: 0;
}
.cs-head > * + * { margin-left: 11px; }
.cs-ava { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.cs-ava img {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; background: #fff; border: 2px solid rgba(255,255,255,.7);
}
.cs-dot {
  position: absolute; right: 0; bottom: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; border: 2px solid #2563eb;
}
.cs-head-info { flex: 1; min-width: 0; }
.cs-name { color: #fff; font-size: 15px; font-weight: 700; }
.cs-status { color: rgba(255,255,255,.85); font-size: 11px; margin-top: 1px; }
.cs-close {
  background: rgba(255,255,255,.2); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0;
}

/* — Isi percakapan — */
.cs-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 14px; display: flex; flex-direction: column;
}
.cs-msg { max-width: 82%; margin-bottom: 12px; }
.cs-msg.bot  { align-self: flex-start; }
.cs-msg.user { align-self: flex-end; }
.cs-bubble {
  padding: 11px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.cs-msg.bot .cs-bubble {
  background: #fff; color: #1e293b;
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.cs-msg.user .cs-bubble {
  background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.cs-bubble b { font-weight: 700; }
.cs-time { font-size: 10px; color: #94a3b8; margin-top: 4px; }
.cs-msg.user .cs-time { text-align: right; }

/* — Tanda sedang mengetik — */
.cs-typing { display: flex; gap: 4px; padding: 13px 16px; }
.cs-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: #94a3b8;
  animation: csDot 1.3s infinite;
}
.cs-typing span:nth-child(2) { animation-delay: .18s; }
.cs-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes csDot {
  0%,60%,100% { opacity: .3; transform: translateY(0); }
  30%         { opacity: 1;  transform: translateY(-4px); }
}

/* — Saran topik — */
.cs-saran {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 10px;
  flex-shrink: 0; scrollbar-width: none;
}
.cs-saran::-webkit-scrollbar { display: none; }
.cs-saran > * + * { margin-left: 8px; }
.cs-chip {
  flex-shrink: 0; background: #fff; border: 1px solid #bfdbfe;
  color: #2563eb; border-radius: 50px; padding: 8px 14px;
  font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.cs-chip:active { background: #dbeafe; }

/* — Kotak tulis — */
.cs-input-row {
  display: flex; gap: 9px; padding: 11px 14px;
  padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  background: #fff; flex-shrink: 0;
}
.cs-input-row > * + * { margin-left: 9px; }
.cs-input {
  flex: 1; min-width: 0; padding: 12px 16px;
  border: 1px solid #cbd5e1; border-radius: 50px;
  font-size: 14px; font-family: inherit; outline: none;
}
.cs-input:focus { border-color: #3b82f6; }
.cs-send {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.cs-send:active { transform: scale(.94); }

/* Gambar & tombol lampiran di obrolan */
.cs-img {
  max-width: 200px; width: 100%; border-radius: 10px;
  display: block; margin-bottom: 6px;
}
.cs-msg.user .cs-bubble:has(.cs-img) { padding: 6px; }
.cs-clip {
  width: 40px; height: 44px; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; padding: 0;
}
.cs-clip:active { opacity: .6; }

/* ══ VIP: kartu klaim bonus berkala ══ */
.vp-claim-card {
  background: #fff; border-radius: 16px;
  padding: 16px; margin-bottom: 16px;
}
.vp-claim-head {
  font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 12px;
}
.vp-claim-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid #f1f5f9;
}
.vp-claim-row:last-of-type { border-bottom: none; }
.vp-claim-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.vp-claim-left > * + * { margin-left: 11px; }
.vp-claim-ico { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.vp-claim-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.vp-claim-val { font-size: 13px; color: #2563eb; font-weight: 700; margin-top: 2px; }
.vp-claim-btn {
  flex-shrink: 0; border: none; border-radius: 50px;
  padding: 9px 20px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff;
}
.vp-claim-btn:active { transform: scale(.96); }
.vp-claim-btn.off {
  background: #e2e8f0; color: #94a3b8; cursor: default;
}
.vp-claim-note {
  font-size: 12px; color: #64748b; line-height: 1.5;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9;
}

/* ══ Gambar game di halaman Semua Game ══
   Kelas ini dipakai JS tapi belum punya aturan sama sekali, sehingga
   gambar tampil setinggi aslinya dan kartunya jadi memanjang. */
.game-card-img,
.game-thumb-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #e2e8f0;
}
.game-card {
  background: #1e293b;
  /* Kolom, supaya judul selalu rata di bawah walau panjangnya beda */
  display: flex; flex-direction: column;
}
.game-name {
  padding: 8px 9px;
  font-size: 12px; font-weight: 600; color: #e2e8f0;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}

/* ══ Logo provider ══
   Sebagian besar logo provider berbentuk tulisan memanjang. Dipaksa ke
   kotak 24×24 membuatnya mengecil sampai tidak terbaca. */
.provider-icon {
  width: 62px !important;
  height: 38px !important;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 5px;
  font-size: 13px;
  overflow: hidden;
}
.provider-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
.provider-tab.active .provider-icon {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.16);
}
/* Bila provider tidak punya logo, tampilkan singkatan yang terbaca */
.provider-abbr {
  font-size: 13px; font-weight: 800; color: #334155; letter-spacing: -.3px;
}

/* ══ Teks pengumuman berjalan ══
   Sebelumnya hanya dipotong dengan "..." tanpa gerakan sama sekali. */
.ticker { overflow: hidden; }
.ticker-text {
  flex: 1; min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.ticker-text > span {
  display: inline-block;
  padding-left: 100%;
  animation: tickerJalan 18s linear infinite;
}
@keyframes tickerJalan {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (hover: hover) and (pointer: fine) {
  .ticker:hover .ticker-text > span { animation-play-state: paused; }
}

/* ══ Blok logo provider ══
   Latar putih membuat logo PNG bertulisan putih tidak terlihat.
   Biru tua bekerja untuk logo terang maupun gelap. */
.provider-icon {
  background: #1e3a5f !important;
  border-color: #1e3a5f !important;
}
/* Halo putih tipis mengelilingi bentuk logo.
   Logo bertulisan putih terbaca karena latarnya gelap; logo bertulisan
   gelap tetap terbaca karena dapat garis luar terang. Satu latar tidak
   bisa melayani keduanya, halo ini yang menjembatani. */
.provider-icon img,
.provider-logo-box img {
  /* Halo tipis agar logo bertulisan gelap tetap terbaca di latar biru. */
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.8));
}
.provider-abbr { color: #fff !important; }
.provider-tab.active .provider-icon {
  background: #2563eb !important;
  border-color: #2563eb !important;
}
/* Kotak logo di bagian bawah halaman */
.provider-logo-box {
  background: #1e3a5f !important;
  color: #fff !important;
}


/* Kartu kemenangan bisa diketuk */
.win-card { cursor: pointer; }
.win-card:active { opacity: .8; }

/* ══ Baris kategori di beranda ══ */
.kat-scroll {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 0 14px 12px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kat-scroll::-webkit-scrollbar { display: none; }
.kat-scroll > * + * { margin-left: 8px; }
.kat-tab {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #dbeafe; border-radius: 50px;
  padding: 9px 16px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: #475569;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.kat-tab > * + * { margin-left: 7px; }
.kat-tab .i { width: 17px; height: 17px; }
.kat-tab .jml {
  font-size: 11px; font-weight: 600; opacity: .65;
}
.kat-tab.active {
  background: #2563eb; color: #fff; border-color: #2563eb;
}
.kat-tab:active { transform: scale(.97); }

/* Judul bagian ikut kategori */
.section-title #home-sec-ikon .i { width: 24px; height: 24px; color: #2563eb; }

/* Tombol cari di dalam daftar provider */
.prov-cari {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 62px; height: 38px; border-radius: 9px;
  background: #eff6ff; border: 1px dashed #93c5fd; color: #2563eb;
  cursor: pointer;
}
.prov-cari .i { width: 19px; height: 19px; }

/* ══ Logo provider — perbesar ══
   Kotak 62×38 dengan padding membuat logo yang punya ruang kosong
   bawaan (kebanyakan logo provider begitu) mengecil sampai tidak
   terbaca. Kotak diperlebar dan padding dipangkas. */
/* Logo provider berbentuk persegi (1:1).
   Kotak memanjang membuat sisi lebarnya terbuang — dengan object-fit
   contain, sisi terpendek yang jadi patokan, jadi logo persegi hanya
   mengisi setinggi kotak dan separuh lebarnya kosong. */
.provider-tab {
  width: 92px !important;
  height: auto !important;
  min-height: 118px;
  padding: 8px 6px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.provider-icon {
  width: 74px !important;
  height: 74px !important;          /* persegi, sesuai rasio logo */
  padding: 4px !important;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.provider-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.06);           /* menutup ruang kosong bawaan gambar */
}
.provider-abbr { font-size: 22px !important; letter-spacing: -.6px; }
.provider-name {
  font-size: 11px !important; line-height: 1.25;
  margin-top: 6px; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 28px;
}
.prov-cari { width: 74px !important; height: 74px !important; border-radius: 12px; }

/* ══════════════════════════════════════════════════
   IKON: PENGGANTI EMOJI
   ══════════════════════════════════════════════════
   Emoji mengikuti gambar bawaan tiap sistem — bentuk, warna, dan
   ketebalannya berbeda di tiap HP dan tidak pernah menyatu dengan ikon
   garis di sekitarnya. Semuanya diganti sprite SVG yang mewarisi warna
   teks induknya. Ukuran diatur di sini karena aturan lama memakai
   font-size, yang tidak lagi menentukan besar SVG. */

/* Tab kategori di halaman Semua Game */
.gm-cat-ico {
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.gm-cat-ico svg.i { width: 17px; height: 17px; vertical-align: middle; }

/* Panah buka-tutup */
.ph-arrow-down svg.i,
.dep-detail-arrow svg.i,
.wd-detail-arrow svg.i,
.txn-arrow svg.i,
.dep-offer-arrow svg.i { width: 18px; height: 18px; display: block; }
.tw-info-chev svg.i { width: 15px; height: 15px; display: block; }

/* Lingkaran keterangan */
.tw-info-i svg.i { width: 14px; height: 14px; vertical-align: -0.2em; }
.wd-saldo-label svg.i,
.dep-label svg.i { width: 14px; height: 14px; vertical-align: -0.2em; }

/* Hitung mundur pembayaran crypto */
.cx-countdown svg.i { width: 18px; height: 18px; vertical-align: -0.22em; }

/* Hadiah di roda VIP */
.vr-prize-ico svg.i { width: 26px; height: 26px; }

/* Masa berlaku kupon */
.kupon-expiry svg.i { width: 13px; height: 13px; vertical-align: -0.18em; }

/* Panah antar peti — sprite, bukan glyph ‹ › */
.ph-arrow-h {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-arrow-h svg.i { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════
   TAMPILAN PERMAINAN
   ══════════════════════════════════════════════════
   Game dimuat di dalam aplikasi. Sebelumnya dibuka lewat window.open
   setelah menunggu jawaban server — di luar ketukan pemain, jadi
   peramban HP memblokirnya sebagai popup dan tidak terjadi apa-apa. */

.gv-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 20000; background: #0b1220;
  display: flex; flex-direction: column;
}
.gv-bar {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  background: #0f172a; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gv-x {
  background: none; border: none; color: #fff; cursor: pointer;
  padding: 6px; display: flex; align-items: center; flex-shrink: 0;
}
.gv-x svg.i { width: 22px; height: 22px; }
.gv-nama {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gv-ext {
  flex-shrink: 0; font-size: 11.5px; font-weight: 600;
  color: #93c5fd; text-decoration: none;
  border: 1px solid rgba(147,197,253,.4); border-radius: 50px;
  padding: 5px 11px;
}
.gv-frame {
  flex: 1; width: 100%; border: 0; display: block; background: #0b1220;
}

/* Pemuatan di dalam bingkai */
.gv-load {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: #cbd5e1; font-size: 13px; text-align: center;
}
.gv-load-pesan { color: #cbd5e1; font-size: 13px; }
.gv-load-btn {
  display: inline-block; margin-top: 4px;
  background: #2563eb; color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700;
  border-radius: 50px; padding: 9px 18px;
}

/* Layar tunggu sebelum bingkai dibuka */
.gv-siap {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 19000; background: rgba(11,18,32,.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
}
.gv-siap-teks { color: #e2e8f0; font-size: 13.5px; font-weight: 600; }

.gv-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: #60a5fa;
  animation: gvSpin .8s linear infinite;
}
@keyframes gvSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gv-spin { animation-duration: 2.4s; }
}

/* Penanda muat bertahap di ujung daftar game */
.gm-lagi { text-align: center; padding: 18px 0 26px; }
.gm-lagi-btn {
  background: #fff; border: 1px solid #dbeafe; color: #2563eb;
  font-family: inherit; font-size: 13px; font-weight: 700;
  border-radius: 50px; padding: 10px 22px; cursor: pointer;
}
.gm-lagi-btn:active { background: #eff6ff; }
.gm-lagi-sisa { font-size: 11px; color: #94a3b8; margin-top: 7px; }

/* Pemilih rekening tujuan di halaman penarikan */
.wd-akun-list { display: flex; flex-direction: column; gap: 8px; }
.wd-akun {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 2px solid #e2e8f0; border-radius: 14px;
  padding: 11px 13px; cursor: pointer; transition: border-color .15s, background .15s;
}
.wd-akun.active { border-color: #2563eb; background: #eff6ff; }
.wd-akun-tipe {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  background: #1e293b; color: #fff; border-radius: 7px; padding: 5px 9px;
  min-width: 62px; text-align: center;
}
.wd-akun.active .wd-akun-tipe { background: #2563eb; }
.wd-akun-info { flex: 1; min-width: 0; }
.wd-akun-rek {
  font-family: ui-monospace, monospace; font-size: 13.5px;
  font-weight: 700; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-akun-nama {
  font-size: 11.5px; color: #64748b; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-akun-tick { flex-shrink: 0; color: #2563eb; opacity: 0; }
.wd-akun.active .wd-akun-tick { opacity: 1; }
.wd-akun-tick svg.i { width: 20px; height: 20px; }
.wd-akun-kosong {
  background: #fff7ed; border: 1px dashed #fdba74; border-radius: 12px;
  padding: 14px; font-size: 12.5px; color: #9a3412; line-height: 1.55;
}