/* =========================
   DUO GAMING LOGIN (RESET)
   ========================= */

:root{
  --bg:#0b0b0b;
  --panel:#1f1f1f;
  --panel2:#242424;
  --border:#3a3a3a;

  --text:#f5f5f5;
  --muted:#bdbdbd;

  --accent:#E4C658;          /* kuning */
  --accent-dark:#b99525;

  --input-bg:#eef3fb;        /* putih kebiruan */
  --input-border:#cfd7e6;

  --btn-dark:#4e4e4e;
  --btn-dark2:#3f3f3f;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Biar layout nggak “nyenggol” kanan */
.main-wrap{
  max-width: 480px; /* kolom layanan bantuan dan mulai bermain */
  margin: 0 auto;
  padding: 10px;
}

/* CARD UTAMA (2 kolom) */
.home-grid{
  display:flex;
  width:100%;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2a2a 0%, #161616 60%, #101010 100%);
  border: 1px solid #2e2e2e;
  box-shadow: 0 14px 30px rgba(0,0,0,.6);
}

/* penting: biar flex item boleh mengecil (fix overflow kanan) */
.home-left{
  flex: 0 0 30%;        /* sebelumnya 38% */
  padding: 8px;         /* sedikit dipersempit */
}
/* kolom kanan otomatis makin lebar */
.home-right{
  flex: 1 1 70%;
  padding: 12px 14px 14px;  /* boleh agak dilebarkan */
}

/* KOLOM KIRI */
.home-left{
  flex: 0 0 38%;
  padding: 10px;
  background: linear-gradient(180deg, #2b2b2b 0%, #1a1a1a 100%);
  position: relative;
}

/* garis aksen kuning pemisah */
.home-left::after{
  content:"";
  position:absolute;
  top:10px;
  right:0;
  width:2px;
  height: calc(100% - 20px);
  background: var(--accent);
  opacity: .95;
}

.home-left-title{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #eaeaea;
}

.home-menu{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.home-menu-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #2a2a2a;
  border: 1px solid #3b3b3b;
}

.home-menu-item-icon{
  width: 24px;
  height: 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  background: transparent;
}

.home-menu-item-icon svg{
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.home-menu-item-icon img{
  width: 20px !important;
  height: 20px !important;
  display:block;
}

.home-menu-item-text span{
  font-size: 13px;
  font-weight: 600;
  color: #f2f2f2;
}

/* KOLOM KANAN */
.home-right{
  flex: 1;
  padding: 12px 12px 14px;
  background: radial-gradient(circle at 40% 0%, #2f2f2f 0%, #151515 55%, #0e0e0e 100%);
}

.home-right-title{
  text-align:center;
  font-size: 20px;
  font-weight: 800;
  margin: 6px 0 4px;
}

.home-right-sub{
  text-align:center;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}

/* FORM */
form{ width:100%; }

.form-group{ margin-bottom: 10px; }

.input-wrap{
  display:flex;
  align-items: stretch;
  width:100%;
  border-radius: 8px;
  overflow:hidden;
  border: 1px solid rgba(228,198,88,.6);
  background: #1b1b1b;
}

/* strip icon kiri */
.input-icon{
  flex: 0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #2a2a2a;
  border-right: 1px solid rgba(228,198,88,.35);
}

.input-icon svg{
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* input */
.input-field{
  width:100%;
  border:0;
  outline:0;
  background: var(--input-bg);
  color: #111;
  font-size: 14px;
  padding: 10px 12px;
}

/* fix supaya nggak melebar aneh di mobile */
.input-field,
.btn{ max-width: 100%; }

.input-field::placeholder{
  color:#7c8798;
  font-style: italic;
}

/* lupa password */
.forgot-link{
  text-align:right;
  font-size: 12px;
  color: var(--accent);
  margin: 6px 2px 8px;
  cursor:pointer;
}
.forgot-link:hover{ text-decoration: underline; }

/* BUTTONS */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: .4px;
  text-decoration:none;
  user-select:none;
}

.btn-ghost{
  background: linear-gradient(180deg, var(--btn-dark) 0%, var(--btn-dark2) 100%);
  border-color: #6a6a6a;
  color: #fff;
}

.btn-primary{
  background: linear-gradient(180deg, var(--accent) 0%, #d8b949 100%);
  border-color: #e9d37a;
  color:#111;
}

/* MOBILE RESPONSIVE (tetap 2 kolom seperti screenshot) */
@media (max-width: 420px){
  .main-wrap{ padding: 8px; }
  .home-left{ flex-basis: 40%; padding: 9px; }
  .home-right{ padding: 10px; }
  .home-right-title{ font-size: 18px; }
  .home-menu-item{ padding: 7px 9px; }
}

/* EXTRA SMALL: kalau terlalu sempit baru stack (opsional) */
@media (max-width: 320px){
  .home-grid{ flex-direction: column; }
  .home-left::after{ display:none; }
}
















/* =========================
   HEADER (LOGO + MARQUEE) mobile
   ========================= */

.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}


/* marquee wrapper */
.marquee-wrap{
  width: 100%;
  overflow: hidden;
  background: #121212;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* isi teks berjalan */
.marquee-inner{
  display: inline-block;
  white-space: nowrap;
  padding: 10px 0;          /* sedikit lebih tinggi */
  padding-left: 100%;

  color: #ffffff;
  font-size: 12px;          /* lebih besar */
  font-weight: 400;         /* lebih tebal */
  letter-spacing: 0.3px;    /* biar lebih premium */

  animation: marquee 35s linear infinite; /* LEBIH LAMBAT */
}

/* jarak antar potongan teks */
.marquee-inner span{
  margin-right: 36px;
}

/* animasi */
/* animasi lebih smooth */
@keyframes marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-120%); }
}

/* mobile tweak */
@media (max-width: 420px){
  .navbar-inner{ height: 54px; }
  .navbar-logo img{ height: 32px; }
  .marquee-inner{ font-size: 11px; padding: 6px 0; }
}

.page { display:none; }
.page.active { display:block; }






























    /* CATEGORY CHIPS SCROLL */
    .chip-scroll {
      margin-top: 12px;
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .chip-scroll-btn {
      min-width: 32px;
      height: 26px;
      border-radius: 999px;
      border: none;
      background: var(--primary);
      color: #111;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 11px;
    }

    .chip-row {
      display: flex;
      overflow-x: auto;
      gap: 6px;
      padding-bottom: 4px;
    }

    .chip-row::-webkit-scrollbar {
      display: none;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: #15151f;
      font-size: 11px;
      white-space: nowrap;
      color: #f5f5f5;
    }

    .chip svg {
      width: 14px;
      height: 14px;
    }

    .chip.active {
      background: var(--primary);
      color: #111;
      border-color: transparent;
    }

    /* KARTU PROMO / SECTION BAWAH */
    .section {
      margin-top: 14px;
    }

    .card {
      background: var(--card);
      border-radius: 12px;
      padding: 12px;
      border: 1px solid var(--border-soft);
      position: relative;
      overflow: hidden;
    }

    .card-strong-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 4px;
    }

    .card-title-sm {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .card-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(154,214,58,0.1);
      color: var(--primary);
      margin-bottom: 8px;
    }

    .card-cta {
      margin-top: 8px;
    }

    .btn-outline-light {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.3);
      font-size: 12px;
      cursor: pointer;
      background: rgba(0,0,0,0.4);
      color: #f5f5f5;
      text-decoration: none;
    }

    .btn-outline-light svg {
      width: 20px;
      height: 20px;
    }

    .feature-grid {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .feature-item {
      flex: 1;
      min-width: 90px;
      background: var(--card-soft);
      border-radius: 10px;
      padding: 8px 6px;
      text-align: center;
      border: 1px solid rgba(255,255,255,0.06);
    }

    .feature-icon-wrap {
      background: #171824;
      border-radius: 10px;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 5px;
    }

    .feature-icon-wrap svg {
      width: 20px;
      height: 20px;
      color: var(--primary);
    }

    .feature-text {
      font-size: 11px;
      color: var(--text-muted);
    }

    .partners-wrap {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: space-between;
    }

    .partner-pill {
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 11px;
      background: #171824;
      border: 1px solid rgba(255,255,255,0.08);
      color: #e2e2e2;
      white-space: nowrap;
    }

    /* FOOTER */
    footer {
      padding: 14px 10px 20px;
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-top: 18px;
    }

   @media (max-width: 480px) {
  /* lebar keseluruhan biar mirip tampilan HP */
  .app-shell {
    max-width: 390px;
    margin: 0 auto;
  }

  /* tetap dua kolom di mobile */
  .home-grid {
    flex-direction: row;
  }

  .home-left {
    flex: 0 0 36%;
    padding: 6px;
    border-right: 1px solid #090a0f;
    border-bottom: none;
  }

  .home-right {
    flex: 0 0 64%;
    padding: 8px;
  }

  .home-right-title {
    font-size: 18px;
    margin: 6px 0 4px;
  }

  .home-right-sub {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .home-menu-item {
    padding: 5px 6px;
  }

  .home-menu-item-text span {
    font-size: 11px;
  }

  .input-field {
    font-size: 13px;
    padding: 8px 8px;
  }

  .btn {
    font-size: 13px;
    padding: 8px 10px;
  }
}

    /* ==== NAV KATEGORI (Lobi, Slot, dst) ==== */
.section.nav-kategori {
  margin-top: 8px;
}

.chip-scroll {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #151515;
  border-radius: 6px;
  border: 1px solid #252525;
  padding: 3px 4px;
}

.chip-scroll-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #2c2c2c;
  background: #2a2a2a;
  color: #f5f5f5;
  font-size: 14px;
  cursor: pointer;
}

.chip-scroll-btn.next {
  background: #f4c545;
  border-color: #f4c545;
  color: #111;
  font-weight: 700;
}

.chip-row {
  display: flex;
  flex: 1;
  gap: 4px;
  overflow-x: auto;
  padding: 0 2px;
  scroll-behavior: smooth; /* tambahin biar halus */
}

.chip-row::-webkit-scrollbar {
  display: none;
}


/* tombol nav */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #3a3a3a;
  border: 1px solid #4a4a4a;
  font-size: 12px;
  color: #ffffff;
  white-space: nowrap;
}

.chip svg {
  width: 14px;
  height: 14px;
}

.chip.active {
  background: #f4c545;
  border-color: #f4c545;
  color: #111;
  font-weight: 700;
}
.home-menu-item-icon {
    background: transparent !important;
    box-shadow: none !important;
}

.page-wrapper {
  margin-top: 10px;
}

/* default semua page disembunyikan */
.page {
  display: none;
}

/* page aktif saja yang kelihatan */
.page.active {
  display: block;
}

#pages-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.page { display:none; margin-top:6px; }
.page.active { display:block; }

/* supaya slot nempel ke chip, kecilkan margin-top kalau mau */
.section.nav-kategori { margin-top:8px; }


    /* ===== SPORTS PAGE ===== */
#page-sports {
  margin-top: 8px;
}

/* Banner */
.sports-banner img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* Maintenance Box */
.sports-maintenance {
  margin-top: 8px;
  background: #2a1d00;
  border: 1px solid #f4c545;
  color: #f4c545;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.sports-maintenance small {
  display: block;
  color: #e0e0e0;
  margin-top: 4px;
}

/* Kategori */
.sports-category-row {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.sports-category {
  padding: 6px 10px;
  border-radius: 6px;
  background: #2b2b2b;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  border: 1px solid #3a3a3a;
}
.sports-category.active {
  background: #f4c545;
  color: #111;
  font-weight: 700;
}

/* List match */
.sports-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Match Card */
.sports-card {
  background: #161616;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #2a2a2a;
}
.sports-card.live {
  border-color: #e53935;
}

/* Head */
.sports-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.sports-league {
  color: #f4c545;
  font-weight: 600;
}
.sports-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
}
.sports-status.live {
  background: #e53935;
  color: #fff;
}
.sports-status.upcoming {
  background: #555;
  color: #fff;
}

/* Teams */
.sports-teams {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.team {
  text-align: center;
  flex: 1;
}
.team-name {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.team-score {
  font-size: 18px;
  font-weight: 700;
  color: #ffd54f;
}
.vs {
  font-size: 11px;
  color: #aaa;
}

/* Time */
.match-time {
  margin-top: 6px;
  font-size: 11px;
  color: #bbb;
  text-align: center;
}

/* Button */
.sports-btn {
  margin-top: 8px;
  width: 100%;
  padding: 6px 0;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 700;
}
.sports-btn.disabled {
  background: #444;
  color: #bbb;
}
/* Judul History */
.sports-history-title {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #f4c545;
}

/* History list bisa sedikit beda spacing kalau mau */
.sports-history .sports-card {
  margin-bottom: 0;
}

/* Card pertandingan yang sudah selesai */
.sports-card.past {
  opacity: 0.9;
  border-style: dashed;
}

/* Status FT (Full Time) */
.sports-status.ft {
  background: #777;
  color: #fff;
}




    /* === FISHING PAGE === */
.fishing-title {
  font-size: 18px;
  color: #f4c545;
  margin-bottom: 4px;
}

.fishing-subtitle {
  font-size: 12px;
  color: #bbb;
  margin-bottom: 12px;
}

/* GRID */
.fishing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* CARD */
.fishing-card {
  background: #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #333;
}

.fishing-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

/* INFO */
.fishing-info {
  padding: 8px;
  background: #f4c545;
  color: #111;
  position: relative;
}

.fishing-name {
  font-size: 12px;
  font-weight: 700;
}

.fishing-provider {
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.8;
}

/* TAG */
.fishing-tag {
  position: absolute;
  top: -8px;
  right: 8px;
  font-size: 9px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #333;
  color: #fff;
}
.fishing-tag.live { background: #e53935; }
.fishing-tag.new  { background: #1e88e5; }

/* BUTTON */
.fishing-btn {
  width: 100%;
  margin-top: 6px;
  font-size: 11px;
  padding: 5px;
  border-radius: 5px;
  border: none;
  background: #333;
  color: #fff;
}
.fishing-btn.disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* NOTE */
.fishing-note {
  margin-top: 12px;
  font-size: 11px;
  text-align: center;
  color: #f4c545;
}

/* MOBILE FIX */
@media (max-width: 480px) {
  .fishing-card img {
    height: 95px;
  }
}

   /* ===== PAGE TOGEL ===== */
#page-togel {
  margin-top: 8px;
}

.togel-title {
  font-size: 16px;
  color: #f4c545;
  margin-bottom: 2px;
}

.togel-sub {
  font-size: 12px;
  color: #bdbdbd;
  margin-top: 0;
}

.togel-page {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* grup per tanggal */
.togel-group {
  background: #151515;
  border-radius: 8px;
  border: 1px solid #2c2c2c;
  overflow: hidden;
}

.togel-group-header {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #f4c545;
  background: #202020;
  border-bottom: 1px solid #2c2c2c;
}

/* tiap baris */
.togel-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-top: 1px solid #252525;
}

.togel-row-card:first-of-type {
  border-top: none;
}

/* kiri: logo + info */
.togel-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* logo bulat */
.togel-logo-wrap {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.togel-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.togel-logo-text {
  font-size: 11px;
  font-weight: 700;
  color: #f4c545;
}

/* info tengah */
.togel-row-mid {
  display: flex;
  flex-direction: column;
}

.togel-row-market {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}

.togel-row-meta {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #bdbdbd;
}

/* badge OPEN/CLOSE */
.togel-badge {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
.togel-badge.ok {
  background: #18c43a;
  color: #111;
}
.togel-badge.down {
  background: #e53935;
  color: #fff;
}

/* kanan: angka */
.togel-row-right {
  text-align: right;
}



@media (max-width: 480px) {
  .togel-row-number {
    font-size: 16px;
    letter-spacing: 1px;
  }
}


 /* ===== SLOT PAGE ===== */
.page { display:none; margin-top:8px; }
.page.active { display:block; }

.slot-banner img {
  width: 100%;
  border-radius: 6px;
  display: block;
}

/* bar MODE DEMO */
.slot-toggle-row {
  margin-top: 8px;
  background: #2a2a2a;
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #f5f5f5;
}

/* switch kecil */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 22px;
}
.switch input { display:none; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #444;
  border-radius: 999px;
  transition: .3s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px; width: 18px;
  left: 2px; top: 2px;
  background-color: #f5f5f5;
  border-radius: 50%;
  transition: .3s;
}
.switch input:checked + .slider {
  background-color: #f4c545;
}
.switch input:checked + .slider:before {
  transform: translateX(24px);
}

/* ikon info */
.info-btn {
  border:none;
  background:#3a3a3a;
  color:#f4c545;
  border-radius:50%;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
}

/* bar filter */
.slot-filters {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* kolom search */
.slot-search {
  flex: 1.2;
  position: relative;
}
.slot-search input {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #3a3a3a;
  background:#1c1c1c;
  padding: 8px 30px 8px 10px;
  font-size: 12px;
  color:#fff;
}
.slot-search input::placeholder {
  color:#777;
}
.slot-search i {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color:#bbb;
}

/* tombol pilih provider */
.slot-provider {
  flex: 0.9;
  position: relative;       /* penting utk dropdown */
}
#btnProvider {
  width:100%;
  border-radius: 6px;
  border: 1px solid #3a3a3a;
  background:#1c1c1c;
  color:#fff;
  font-size:12px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* panel provider dropdown */
.provider-panel {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  z-index: 50;
  background:#151515;
  border:1px solid #333;
  border-radius:6px;
  padding:4px;
  max-height:180px;
  overflow-y:auto;
  display:none;
}
.provider-panel.show { display:block; }
.provider-item {
  width:100%;
  text-align:left;
  padding:6px 8px;
  margin-bottom:3px;
  border-radius:4px;
  border:none;
  font-size:12px;
  cursor:pointer;
  background:#222;
  color:#eee;
}
.provider-item.active {
  background:#f4c545;
  color:#111;
}

/* GRID GAME SLOT – mirip screenshot: 3 kolom, kartu pertama besar */
.slot-grid {
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}

/* kartu game */
.game-card {
  position:relative;
  background:#222;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #333;
  cursor:pointer;
}
.game-card img {
  width:100%;
  display:block;
}

/* FEATURED (kartu pertama) */
.game-card.featured {
  grid-column: span 2;
  grid-row: span 2;
}
.game-card.featured img {
  height: 100%;
  object-fit: cover;
}

/* badge kecil pojok */
.badge-top {
  position:absolute;
  top:4px; right:4px;
  background:#000000aa;
  color:#f4c545;
  font-size:10px;
  padding:2px 5px;
  border-radius:999px;
}

/* info bawah */
.game-info {
  padding: 6px 6px 8px;
  background: #f6c453;   /* warna kuning seperti contoh */
}

.game-name {
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a !important;  /* hitam */
}

.game-provider {
  font-size: 10px;
  color: #3a3a3a !important; /* abu gelap */
}

.game-tag {
  margin-top:3px;
  display:inline-block;
  font-size:9px;
  padding:2px 6px;
  border-radius:999px;
  background:#ff4f4f;
  color:#fff;
}
.game-tag-off {
  background:#777;
}

/* responsive: kalau layar kecil, 2 kolom supaya nggak sempit banget */
@media (max-width:480px){
  .slot-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .game-card.featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}
/* ===== LIVE CASINO DUMMY ===== */
.casino-banner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}

.casino-banner img {
  width: 100%;
  display: block;
  opacity: 0.7;
}

.casino-banner-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #f4c545;
  font-size: 14px;
  text-align: center;
  background: rgba(0,0,0,0.5);
}

/* Provider Row */
.casino-provider-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
}

.casino-provider {
  padding: 6px 14px;
  background: #2b2b2b;
  color: #eee;
  border-radius: 20px;
  white-space: nowrap;
  font-size: 12px;
  cursor: default;
}

.casino-provider.active {
  background: #f4c545;
  color: #111;
  font-weight: 600;
}

/* Grid */
.casino-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.casino-card {
  background: #1c1c1c;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #2f2f2f;
}

.casino-thumb img {
  width: 100%;
  display: block;
  filter: grayscale(100%);
}

.casino-info {
  padding: 8px;
  text-align: center;
}

.casino-name {
  font-size: 12px;
  color: #ddd;
}

.casino-status {
  margin-top: 4px;
  font-size: 11px;
  color: #f4c545;
  font-weight: bold;
}



.maintenance-note {
  font-size: 11px;
  color: #f4c545;
  margin-bottom: 4px;
}

/* efek ribbon "Segera Hadir" di pojok gambar */
.game-card-mini .game-thumb {
  position: relative;
}

.ribbon-maint {
  position: absolute;
  top: 6px;
  left: 0;
  background: linear-gradient(135deg,#f4c545,#ff9800);
  color: #111;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.game-card-mini.maintenance {
  border-color: #f4c545;
}

/* Container list togel */
.toto-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.toto-list::-webkit-scrollbar {
  height: 4px;
}
.toto-list::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

/* Kartu Toto */
.toto-card {
  min-width: 120px;
  max-width: 130px;
  background: #222;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #333;
  flex-shrink: 0;
  color: #fff;
  font-family: inherit;
}

/* bagian atas: RESULT + angka besar */
.toto-top {
  background: linear-gradient(180deg, #1e1e30 0%, #111 100%);
  padding: 4px 6px 2px;
}

.toto-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #ffffff;
  opacity: 0.9;
}

.toto-number {
  font-size: 24px;
  font-weight: 800;
  color: #ffd54f;
  line-height: 1.1;
}

/* bagian tengah: logo + jam */
.toto-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f4c545;
  padding: 3px 6px;
}

.toto-logo img {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  object-fit: cover;
}

.toto-logo-text {
  font-size: 10px;
  font-weight: 700;
  color: #111;
}

.toto-time {
  font-size: 10px;
  font-weight: 600;
  color: #111;
}

/* bagian bawah: nama pasaran */
.toto-bottom {
  padding: 4px 6px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
}

/* tombol panah kecil di header */
.nav-arrows-mini {
  display: flex;
  gap: 4px;
}

.nav-mini-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #f4c545;
  background: #2b2b2b;
  color: #f4c545;
  font-size: 11px;
  cursor: pointer;
}
.nav-mini-btn:hover {
  background: #f4c545;
  color: #111;
}
/* Wrapper list */
.toto-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.toto-list::-webkit-scrollbar {
  display: none;
}

/* CARD UTAMA */
.toto-card {
  width: 150px;
  height: 170px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

/* LAYER HITAM AGAR ANGKA JELAS */
.toto-overlay {
  height: 100%;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.85)
  );
}

/* BAGIAN ATAS */
.toto-top {
  display: flex;
  flex-direction: column;
}

.toto-badge {
  background: #f4c545;
  color: #111;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-block;
}

.toto-number {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
}

/* BAGIAN BAWAH */
.toto-bottom {
  background: rgba(255, 204, 0, 0.95);
  padding: 6px 8px;
  border-radius: 6px;
  text-align: left;
}

.toto-time {
  font-size: 12px;
  font-weight: bold;
  color: #000;
}

.toto-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px;
  color: #000;
}

/* tombol navigasi kecil */
.nav-mini-btn {
  background: #f4c545;
  border-radius: 5px;
  border: none;
  color: #000;
  font-weight: bold;
  width: 26px;
  height: 26px;
  cursor: pointer;
}
/* DOT SPORT */
.dot-sport {
  background: #00c3ff;
}

/* SPORT LIST */
.sport-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 0 10px;
}
.sport-list::-webkit-scrollbar {
  display: none;
}

/* CARD */
.sport-card {
  width: 140px;
  background: #1c1c1c;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #2d2d2d;
  flex-shrink: 0;
}

.sport-img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}

.sport-info {
  background: #f4c545;
  padding: 6px;
  color: #111;
  text-align: center;
  border-top: 1px solid #a88726;
}

.sport-name {
  font-size: 13px;
  font-weight: 700;
}

.sport-provider {
  font-size: 10px;
  opacity: 0.8;
  margin-top: 2px;
}


   .game-section {
  margin-top: 12px;
  background: #191919;
  border-radius: 8px;
  border: 1px solid #333;
  padding: 8px 10px;
}

/* header judul + tombol ? (ikon info di screenshot) */
.game-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.game-section-header .title-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f5;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #f5f5f5;
}

.dot-slot   { background: #f4c545; }
.dot-casino { background: #ff6f00; }
.dot-togel  { background: #29b6f6; }
.dot-sport  { background: #66bb6a; }
.dot-egames { background: #ab47bc; }

.game-section-more {
  background: #2a2a2a;
  color: #f5f5f5;
  border-radius: 999px;
  border: 1px solid #444;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

/* LIST game horizontal scroll */
.game-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.game-list::-webkit-scrollbar {
  height: 4px;
}
.game-list::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

/* CARD MINI */
.game-card-mini {
  min-width: 120px;
  max-width: 130px;
  background: #222;
  border-radius: 6px;
  border: 1px solid #333;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}

.game-thumb img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.game-meta {
  padding: 4px 6px 6px;
}

.game-name {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

.game-provider {
  font-size: 10px;
  color: #bdbdbd;
}
/* === APP DOWNLOAD CARD === */
.app-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #262626;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  min-height: 150px;
}

.app-left {
  width: 60%;
  z-index: 2;
}

.app-title {
  font-size: 20px;
  font-weight: 700;
  color: #f4c545;
}

.app-sub {
  font-size: 13px;
  margin-top: 4px;
  color: #ddd;
}

.app-small {
  margin: 12px 0 6px;
  font-size: 12px;
  color: #fff;
}

/* DOWNLOAD BUTTON */
.app-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1b1b1b;
  border: 2px solid #95CF00;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  transition: .2s;
}

.app-download-btn:hover {
  background: #252525;
}

.app-download-btn svg {
  width: 35px;
  height: 35px;
}

.app-btn-text {
  font-size: 12px;
  line-height: 1.1;
}

/* Posisi Android lebih turun */
.app-right {
  width: 40%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;       /* turunkan posisi vertical */
  padding-bottom: 0px;         /* tambah dorongan ke bawah */
}

.app-illustration {
  width: 190px;                /* sedikit lebih besar */
  margin-bottom: -40px;        /* geser lebih ke bawah */
  transform: translateY(10px); /* memaksa posisi turun */
}

/* MOBILE RESPONSIVE */
@media(max-width:480px){
  .app-card {
    flex-direction: row;
    min-height: 130px;
    padding: 15px;
  }

  .app-left {
    width: 55%;
  }

  .app-right {
    width: 45%;
  }

  .app-illustration {
    width: 90px;
  }

  .app-title {
    font-size: 16px;
  }

  .app-sub {
    font-size: 11px;
  }

  .app-download-btn {
    padding: 8px 10px;
  }

  .app-download-btn svg {
    width: 30px;
  }
}

 /* ==== SPIN CARD ==== */
.spin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2b2b2f;
  border-radius: 12px;
  padding: 18px 20px;
  overflow: hidden;
}

/* TEKS KIRI */
.spin-left {
  width: 60%;
  z-index: 3;
}

.spin-title-main {
  font-size: 17px;
  font-weight: 800;
  color: #ffd95a;
  text-transform: uppercase;
  line-height: 1.3;
}

.spin-sub {
  font-size: 12px;
  color: #eaeaea;
  margin-top: 4px;
}

/* TOMBOL */
.spin-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 14px;
  background: #111;
  color: #fff;
  border-radius: 6px;
  border: 1px solid #f4c545;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 0 #8b6b12;
}

/* KANAN: RODA + PETI */
.spin-right {
  width: 40%;
  height: 130px;
  position: relative;
  margin-left: 10px;
}

/* RODA: lebih turun */
.spin-wheel {
  position: absolute;
  right: -15px;
  top: 10px;          /* turun 20px dari versi sebelumnya */
  width: 140px;       /* agak diperbesar biar dominan */
  z-index: 1;
}

/* PETI: lebih naik dan overlap */
.spin-chest {
  position: absolute;
  right: -5px;
  bottom: -15px;      /* peti naik */
  width: 110px;
  z-index: 2;         /* peti di depan roda */
  transform: rotate(-2deg); /* sedikit miring agar natural */
}

/* MOBILE */
@media (max-width: 480px) {
  .spin-card { padding: 14px; }

  .spin-left { width: 55%; }

  .spin-right {
    width: 45%;
    height: 110px;
  }

  .spin-wheel {
    width: 120px;
    top: 12px;
    right: -10px;
  }

  .spin-chest {
    width: 90px;
    bottom: -10px;
    right: -10px;
  }
}

/* OVERRIDE POSISI SPIN WHEEL – HANYA RODANYA TURUN */
.spin-wheel {
  top: 50px !important;   /* makin besar angkanya = makin turun */
}
@media (max-width: 480px) {
  .spin-wheel {
    top: 44px !important; /* versi mobile, juga sedikit turun */
  }
}

  body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      padding: 0;
      background: #050608;
      color: #f5f5f5;
      line-height: 1.6;
    }
    .page {
      max-width: 960px;
      margin: 0 auto;
      padding: 20px 15px 40px;
    }
    h1, h2, h3, h4 {
      color: #f4c545;
      margin-top: 1.4em;
      margin-bottom: .5em;
    }
    h1 {
      font-size: 1.9rem;
    }
    h2 {
      font-size: 1.5rem;
      border-left: 4px solid #f4c545;
      padding-left: 8px;
    }
    h3 {
      font-size: 1.2rem;
    }
    p {
      margin: .4em 0;
      color: #e0e0e0;
    }
    strong {
      color: #fff;
    }

    /* Table of contents */
    .toc-wrapper {
      margin: 18px 0 28px;
      background: #141414;
      border-radius: 8px;
      border: 1px solid #2c2c2c;
      overflow: hidden;
    }
    .toc-title {
      background: #1f1f1f;
      padding: 10px 14px;
      font-weight: 700;
      font-size: 1rem;
      border-bottom: 1px solid #2c2c2c;
    }
    table.toc {
      width: 100%;
      border-collapse: collapse;
      font-size: .9rem;
    }
    .toc th, .toc td {
      padding: 6px 10px;
    }
    .toc th {
      text-align: left;
      background: #1a1a1a;
      border-bottom: 1px solid #2c2c2c;
    }
    .toc tr:nth-child(even) td {
      background: #111;
    }
    .toc a {
      color: #f4c545;
      text-decoration: none;
    }
    .toc a:hover {
      text-decoration: underline;
    }

    ul {
      padding-left: 18px;
      margin: .3em 0 .7em;
    }
    li { margin: .15em 0; }

    .faq-block {
      margin-top: 24px;
      background: #141414;
      border-radius: 8px;
      border: 1px solid #2c2c2c;
      padding: 14px 16px;
    }
    .faq-item + .faq-item {
      margin-top: 10px;
      border-top: 1px dashed #333;
      padding-top: 10px;
    }
    .faq-q {
      font-weight: 600;
      color: #fff;
    }
    .faq-a {
      font-size: .95rem;
      color: #d4d4d4;
      margin-top: 4px;
    }

    a {
      color: #f4c545;
    }

    @media (max-width: 640px) {
      h1 { font-size: 1.6rem; }
      h2 { font-size: 1.3rem; }
      .page { padding: 16px 10px 30px; }
    }
  


    .partners-section {
    margin-top: 20px;
}

.partners-card {
    background: #202020;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 20px;
    color: white;
}

.partners-title {
    font-size: 18px;
    font-weight: 700;
    color: #f4c545;
    margin-bottom: 5px;
}

.partners-subtitle {
    font-size: 13px;
    color: #ddd;
    margin-bottom: 15px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 15px;
    justify-items: center;
    align-items: center;
}

.partners-grid img {
    width: 80px;
    height: auto;
    opacity: 0.9;
    transition: .2s;
}

.partners-grid img:hover {
    opacity: 1;
    transform: scale(1.05);
}


 .bankinfo-wrap {
    background: #f4c545;          /* strip kuning luar */
    padding: 10px 0 0;
  }
  .bankinfo-card {
    max-width: 480px;             /* sesuaikan dengan lebar layoutmu */
    margin: 0 auto;
    background: #171717;
    border-radius: 6px 6px 0 0;
    padding: 12px 14px 16px;
    color: #f5f5f5;
    font-family: system-ui, sans-serif;
  }
  .bankinfo-title {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .bank-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
  }
  .bank-item {
    position: relative;
    background: #222;
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
  }
  .bank-logo {
    background: #fff;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 4px;
    border-radius: 3px;
    text-align: center;
    width: 100%;
  }
  .dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .dot.ok  { background: #18c43a; }
  .dot.err { background: #e53935; }

  .bankinfo-note {
    margin-top: 6px;
    background: #262626;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 11px;
    text-align: center;
    color: #f4c545;
  }

  .link-row {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
  .link-pill {
    flex: 1 1 30%;
    min-width: 110px;
    text-align: center;
    background: #202020;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 11px;
    text-decoration: none;
    color: #f5f5f5;
    border: 1px solid #3a3a3a;
  }
  .link-pill:hover {
    background: #2a2a2a;
  }

  .footer-bottom {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .powered {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .powered-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    color: #f4c545;
  }
  .powered-text small {
    font-size: 10px;
    color: #bbbbbb;
  }
  .powered-text strong {
    font-size: 12px;
  }

  .footer-icons {
    display: flex;
    gap: 6px;
    font-size: 14px;
    color: #cccccc;
  }

  .copyright {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: #f5f5f5;
  }

  @media (max-width: 480px) {
    .bank-grid {
      grid-template-columns: repeat(3, 1fr);
    }
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
    }
  }


   /* ===== MODAL LUPA PASSWORD ===== */
.forgot-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;            /* default: hidden */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.forgot-modal-overlay.show {
  display: flex;
}

.forgot-modal {
  width: 90%;
  max-width: 420px;
  background: #202020;
  border-radius: 6px;
  border: 1px solid #444;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  color: #fff;
}

/* Header */
.forgot-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2a2a2a;
  padding: 8px 12px;
  border-bottom: 1px solid #444;
  font-size: 14px;
  font-weight: 600;
}

.forgot-modal-close {
  border: none;
  background: transparent;
  color: #f4c545;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

/* Body */
.forgot-modal-body {
  padding: 12px 14px 14px;
  font-size: 13px;
}

.forgot-modal-body p {
  margin-bottom: 10px;
}

/* Tombol di modal */
.forgot-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.forgot-btn {
  flex: 1;
  text-align: center;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.forgot-btn-main {
  background: #f4c545;
  color: #111;
  border-color: #f4c545;
}

.forgot-btn-secondary {
  background: #333;
  color: #fff;
  border-color: #555;
}

.forgot-btn-main:hover,
.forgot-btn-secondary:hover {
  filter: brightness(1.05);
}

/* opsional: bikin teks 'Lupa Password?' kelihatan clickable */
.forgot-link {
  text-align: right;
  font-size: 12px;
  margin-bottom: 6px;
  color: #f4c545;
  cursor: pointer;
}
.forgot-link:hover {
  text-decoration: underline;
}



    /* ====== DASHBOARD KHUSUS (NGE-NUANSAIN AJA) ====== */

    /* bikin isi sedikit turun dari navbar */
    .dashboard-main {
      padding: 10px 8px 80px;
    }

   

    .nav-burger {
      font-size: 22px;
      color: #f4c545;
      cursor: pointer;
    }

 

    .btn-livechat {
      background: #f4c545;
      border: none;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      color: #111;
    }

    /* PANEL USER + SALDO (versi lama, kalau nggak dipakai boleh dihapus) */
    .dash-user-wrap {
      background: #171717;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      padding: 10px 8px 6px;
    }

    .dash-user-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      color: #fff;
    }

    .dash-user-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dash-user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: #262626;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .dash-user-name {
      font-size: 14px;
      font-weight: 600;
    }

    .dash-user-balance {
      font-size: 12px;
      color: #e0e0e0;
    }
    .dash-user-balance strong {
      font-size: 16px;
    }

    /* grid tombol kecil di kanan atas user */
    .dash-action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .dash-action-btn {
      min-width: 70px;
      background: #252525;
      border-radius: 8px;
      border: 1px solid #3c3c3c;
      font-size: 11px;
      color: #fff;
      padding: 6px 4px;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 3px rgba(0,0,0,0.5);
    }

    .dash-action-btn span.icon {
      display: block;
      font-size: 14px;
      margin-bottom: 2px;
    }

    /* strip merah doorprize (marquee text) */
    .doorprize-strip {
      margin-top: 6px;
      background: #d8232a;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* banner tengah */
    .doorprize-banner {
      background: #000;
    }
    .doorprize-banner img {
      width: 100%;
      display: block;
    }

    /* tombol GET / HISTORY voucher */
    .voucher-buttons {
      display: flex;
      width: 100%;
    }
    .voucher-buttons button {
      flex: 1;
      padding: 12px 0;
      border: none;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .voucher-get {
      background: #FFD700; /* hijau terang */
      color: #111;
    }
    .voucher-history {
      background: #FFD700;
      color: #fff;
    }

    /* bar abu-abu LIVE DOORPRIZE */
    .doorprize-footer {
      background: #222;
      color: #fff;
      font-size: 13px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .doorprize-footer .dot-live {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #ff3b30;
      box-shadow: 0 0 6px rgba(255,59,48,0.8);
    }
    .doorprize-footer span.label {
      text-transform: uppercase;
      font-weight: 600;
    }

    /* section kategori & hot games biar rapat ke atas seperti ss */
    .section.nav-kategori {
      margin-top: 8px;
    }

    .section-hot {
      margin-top: 10px;
    }

    .section-hot-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
      font-size: 13px;
      color: #f5f5f5;
    }

    .section-hot-header .title {
      font-weight: 600;
    }

    .section-hot-header .nav-arrows button {
      background: #f4c545;
      border: none;
      border-radius: 4px;
      width: 22px;
      height: 22px;
      font-size: 14px;
      cursor: pointer;
      margin-left: 2px;
    }

    .hot-game-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
    }

    .hot-game-card {
      min-width: 90px;
      max-width: 90px;
      background: #1b1b1b;
      border-radius: 8px;
      border: 1px solid #333;
      overflow: hidden;
      font-size: 11px;
    }

    .hot-game-card img {
      width: 100%;
      height: 70px;
      object-fit: cover;
      display: block;
    }

    .hot-game-info {
      padding: 4px 5px 6px;
    }

    .hot-tag {
      display: inline-block;
      background: #d8232a;
      color: #fff;
      border-radius: 999px;
      font-size: 9px;
      padding: 1px 6px;
      margin-bottom: 2px;
    }

    .hot-game-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width:480px){
      .app-shell {
        max-width: 390px;
        margin: 0 auto;
      }
    }

    /* ====== USER BAR MIRIP SCREENSHOT (FINAL) ====== */

    .dg-userbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px 6px;
      background: #181818;
      border-bottom: 2px solid #c22020; /* garis merah bawah */
      color: #fff;
    }

    /* kiri */
    .dg-user-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dg-user-avatar {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 2px solid #f4c545;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f4c545;
      font-size: 15px;
    }

    .dg-user-text {
      display: flex;
      flex-direction: column;
    }

    .dg-user-name {
      font-size: 14px;
      font-weight: 600;
    }

    .dg-user-balance {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
    }

    .dg-user-balance .curr {
      color: #f4c545;
      font-weight: 600;
    }

    .dg-user-balance .amount {
      font-size: 15px;
      font-weight: 700;
    }

    .dg-user-balance .refresh {
      font-size: 11px;
      opacity: .8;
    }

    /* kanan: container dengan background kuning + kotak abu */
    .dg-user-right {
      position: relative;
      margin-left: 8px;
      padding: 4px 5px;
      width: 178px;       /* sedikit lebih lebar supaya komposisi mirip */
      height: 74px;
      overflow: hidden;
    }

    /* layer kuning "petir" di belakang, fokus sisi kanan */
    .dg-user-bgflash {
      position: absolute;
      inset: -8px -22px -4px 45%;
      background:
        linear-gradient(125deg, transparent 0%, transparent 35%, #f4c545 55%, transparent 80%),
        linear-gradient(155deg, transparent 0%, transparent 40%, #f4c545 60%, transparent 85%);
      opacity: .96;
    }

    /* grid tombol: baris 1 = 3 tombol penuh, baris 2 = 2 tombol kiri & tengah */
    .dg-user-menu {
      position: relative; /* di atas flash */
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 32px 32px;
      column-gap: 4px;
      row-gap: 5px;
    }

    /* History kiri bawah */
    .dg-user-menu .dg-menu-btn:nth-child(4) {
      grid-column: 1 / 2;
      grid-row: 2;
    }

    /* Referral tengah bawah, kolom 3 sengaja kosong */
    .dg-user-menu .dg-menu-btn:nth-child(5) {
      grid-column: 2 / 3;
      grid-row: 2;
    }

    /* tombol abu */
    .dg-menu-btn {
      background: #3b3b3b;
      border-radius: 8px;
      border: 1px solid #707070;
      box-shadow: 0 1px 2px rgba(0,0,0,0.6);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 3px 6px;
      color: #fff;
      font-size: 10px;
      cursor: pointer;
    }

    .dg-menu-btn .icon {
      font-size: 13px;
      line-height: 1;
      margin-bottom: 1px;
    }

    .dg-menu-btn .label {
      line-height: 1.1;
      font-size: 11px;
    }

    /* responsif biar nggak pecah di HP */
    @media (max-width: 480px) {
      .dg-userbar {
        padding-inline: 8px;
      }
      .dg-user-right {
        width: 170px;
      }
    }


/* ===== OVERLAY UNTUK SIDEBAR ===== */
/* =========================================================
   ===============  SIDEBAR OVERLAY  =======================
   ========================================================= */



/* =========================================================
   ===============  SIDEBAR PANEL  =========================
   ========================================================= */


/* =========================================================
   ===============  MOBILE TWEAK ============================
   ========================================================= */

@media (max-width: 480px) {
  .dg-sidebar {
    width: 80%;
  }
}

.game-card-mini-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* ===== FIX KONTRAS TOGEL ===== */
#page-togel .togel-row-card {
  background: linear-gradient(180deg, #1a1a1a, #111);
}

#page-togel .togel-row-number {
  background: #0d0d0d;
  color: #ffd54f;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  min-width: 64px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255,213,79,0.35);
}

#page-togel .togel-row-right {
  border-left: 1px dashed #333;
  padding-left: 10px;
}
#page-togel .togel-logo-wrap {
  background: #000;
  border: 1px solid #333;
}

#page-togel .togel-logo-text {
  color: #ffd54f;
}

.section.nav-kategori .chip {
  background: #2a2a2a;
  border-color: #444;
  color: #fff;
}

.section.nav-kategori .chip.active {
  background: #f4c545;
  color: #111;
}

/* ===== FORCE DARK TOGEL (FIX FINAL) ===== */
#page-togel {
  background: #0b0b0b !important;
}

#page-togel .togel-row-card {
  background: #151515 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.6) !important;
  border: 1px solid #222 !important;
}

#page-togel .togel-row-market {
  color: #ffffff !important;
}

#page-togel .togel-row-meta {
  color: #bbbbbb !important;
}

#page-togel .togel-row-number {
  background: #000 !important;
  color: #ffd54f !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  min-width: 70px !important;
  text-align: center !important;
  box-shadow: inset 0 0 0 1px rgba(255,213,79,.4) !important;
}

#page-togel .togel-logo-wrap {
  background: #000 !important;
  border: 1px solid #333 !important;
}

#page-togel .togel-logo-text {
  color: #ffd54f !important;
}