/* =============================================================================
   Layout web game — desain "desktop" kini dipakai di SEMUA ukuran layar (responsif).
   - Aturan dasar (base) = tampilan lebar; identik dengan tampilan desktop >= 992px.
   - Blok @media (max-width: 991px) & (max-width: 575px) menyesuaikan untuk HP/tablet.
   ========================================================================== */

/* ---------- Desktop (>=992px): sembunyikan chrome mobile, pakai header desktop ---------- */
@media (min-width: 992px) {
  .app-mobile-header { display: none !important; }
  .my-navbar { display: none !important; }
  .beranda-kategori-bar { display: none !important; }
  .games-kategori-bar { display: none !important; }
  .app-main .container-masuk-daftar { display: none !important; }
  .announce-mobile { display: none !important; }
  .member-bar { display: none !important; }
}

/* ---------- Panel info member (penanda login) — tampil di mobile ---------- */
.member-bar { background: #1b1b1b; margin: 0; }
.member-bar .mb-top {
  display: flex; align-items: center; gap: 10px; padding: 5px 12px;
  background: linear-gradient(0deg, #303030 0%, #525252 85.5%, #303030 99%);
}
.member-bar .mb-user {
  font-size: 15px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; max-width: 34%;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.member-bar .mb-balance {
  flex: 0 1 auto; width: 300px; max-width: 58%; margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  background: #0a0a0a; border: 1px solid rgba(0, 0, 0, .6); border-radius: 6px;
  padding: 4px 12px; text-decoration: none; min-width: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
.member-bar .mb-cur { color: #fff; font-weight: 700; font-size: 13px; }
.member-bar .mb-amt { color: #22c55e; font-weight: 800; font-size: 15px; margin-left: auto; }
.member-bar .mb-caret { color: #cfcfcf; font-size: 18px; }
.member-bar .mb-refresh {
  flex: 0 0 auto; width: 30px; height: 30px; border: none; border-radius: 6px;
  background: transparent; color: #f0a500; font-size: 20px;
  display: grid; place-items: center; cursor: pointer;
}
.member-bar .mb-refresh.is-loading i { animation: mbSpin .7s linear infinite; }
@keyframes mbSpin { to { transform: rotate(360deg); } }

.member-bar .mb-bottom {
  display: flex; align-items: stretch; gap: 8px; padding: 10px 12px; background: #1b1b1b;
}
.member-bar .mb-cell {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: #262626; border-radius: 8px; padding: 8px 8px; text-decoration: none;
}
.member-bar .mb-cell-ic { font-size: 18px; flex: 0 0 auto; line-height: 1; }
.member-bar .mb-ic-tier { color: #cd7f32; }
.member-bar .mb-ic-lp { color: #ffd23f; }
.member-bar .mb-cell-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.member-bar .mb-cell-title {
  font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.member-bar .mb-metric { display: flex; align-items: center; gap: 6px; }
.member-bar .mb-metric-tag {
  font-size: 10px; font-weight: 800; color: #fff; background: #4a4a4a;
  border-radius: 4px; padding: 2px 6px; flex: 0 0 auto;
}
.member-bar .mb-tag-lp { background: var(--warna-utama, #f0a500); color: #111; }
.member-bar .mb-progress {
  flex: 1 1 auto; height: 6px; background: #000; border-radius: 4px; overflow: hidden; min-width: 30px;
}
.member-bar .mb-progress i { display: block; height: 100%; background: linear-gradient(90deg, #fedb37, #d4971c); }
.member-bar .mb-metric-val { font-size: 11px; color: #cfcfcf; font-weight: 700; flex: 0 0 auto; }
.member-bar .mb-cell-arrow { color: #6f6f6f; font-size: 16px; flex: 0 0 auto; }
.member-bar .mb-chest {
  flex: 0 0 auto; width: 54px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(180deg, #3a3a3a, #222); color: #ffd23f; font-size: 26px;
  text-decoration: none;
}

/* ---------- Kontainer utama terpusat ---------- */
.app-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 132px 0 40px 0 !important;
}

/* ---------- Header ---------- */
.dsk-header {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.dsk-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Top bar tipis */
.dsk-topbar {
  background: #101010;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  height: 44px;
}
.dsk-topbar .dsk-container { height: 44px; }
.dsk-social { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dsk-social a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 6px;
  font-size: 12px; color: #fff !important; text-decoration: none; white-space: nowrap;
}
.dsk-social a i { font-size: 15px; }
.dsk-social a:hover { filter: brightness(1.12); }

.dsk-auth { display: flex; align-items: center; gap: 10px; }
.dsk-saldo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--warna-utama, #b97d00); font-weight: 700; white-space: nowrap;
}
.dsk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 20px; border-radius: 6px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: filter .15s ease; white-space: nowrap;
}
.dsk-btn-outline { border: 1px solid #6b6b6b; color: #fff !important; background: transparent; }
.dsk-btn-outline:hover { border-color: var(--warna-utama, #b97d00); color: var(--warna-utama, #b97d00) !important; }
.dsk-btn-gold {
  color: #000 !important;
  background: linear-gradient(to bottom, #fedb37 0%, #d4971c 100%);
  border: 1px solid #d5b100;
}
.dsk-btn-gold:hover { filter: brightness(1.08); }

/* ---------- Widget member (topbar saat sudah login) ---------- */
.dsk-member {
  display: flex; align-items: center; gap: 0;
  background: #1c1c1c; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px;
  height: 30px; overflow: hidden;
}
.dsk-member > a {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px;
  text-decoration: none; white-space: nowrap; border-left: 1px solid rgba(255, 255, 255, .07);
}
.dsk-member > a:first-child { border-left: none; }
.dsk-mb-user { color: #fff; font-size: 12px; font-weight: 700; max-width: 140px; }
.dsk-mb-user span { overflow: hidden; text-overflow: ellipsis; }
.dsk-mb-tier { color: #cd7f32; font-size: 15px; }
.dsk-mb-balance .ri-rocket-2-fill { color: var(--warna-utama, #f0a500); font-size: 15px; }
.dsk-mb-cur { color: #fff; font-size: 12px; font-weight: 700; }
.dsk-mb-amt { color: #22c55e; font-size: 12px; font-weight: 800; }
.dsk-mb-lp { gap: 5px; }
.dsk-mb-lp-tag {
  font-size: 10px; font-weight: 800; color: #111; background: var(--warna-utama, #f0a500);
  border-radius: 4px; padding: 1px 5px;
}
.dsk-mb-lp span:last-child { color: #cfcfcf; font-size: 12px; font-weight: 700; }
.dsk-mb-chest { color: #ffd23f; font-size: 17px; background: #2a2a2a; }
.dsk-member > a:hover { background: #2f2f2f; }

.dsk-actions { display: flex; align-items: center; gap: 4px; }
.dsk-actions > a {
  position: relative; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 6px;
  color: #d8d8d8; font-size: 17px; text-decoration: none;
  background: #1c1c1c; border: 1px solid rgba(255, 255, 255, .08); transition: all .15s ease;
}
.dsk-actions > a:hover { color: var(--warna-utama, #f0a500); border-color: var(--warna-utama, #f0a500); }
.dsk-actions .dsk-act-badge b {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: #e0322f; color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.dsk-actions .dsk-act-logout { color: #fff; background: #e0322f; border-color: #e0322f; }
.dsk-actions .dsk-act-logout:hover { color: #fff; background: #c81e1b; border-color: #c81e1b; }

/* Bar utama: logo + menu */
.dsk-mainbar {
  background: var(--warna-header, #000000);
  height: 76px;
}
.dsk-mainbar .dsk-container { height: 76px; gap: 18px; }
.dsk-logo { flex-shrink: 0; display: flex; align-items: center; }
.dsk-logo img { height: 46px; width: auto; display: block; }

.dsk-nav {
  display: flex; align-items: stretch; justify-content: center; gap: 2px;
  flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.dsk-nav::-webkit-scrollbar { display: none; }
.dsk-nav-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-width: 74px; padding: 6px 10px; border-radius: 8px;
  color: #d8d8d8 !important; text-decoration: none; white-space: nowrap;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  transition: background .15s ease, color .15s ease;
}
.dsk-nav-item img { height: 34px; width: 34px; object-fit: contain; }
.dsk-nav-item i { font-size: 30px; line-height: 34px; }
.dsk-nav-item:hover { background: rgba(255, 255, 255, .06); color: var(--warna-utama, #b97d00) !important; }
.dsk-nav-item.aktif { color: var(--warna-utama, #b97d00) !important; }
.dsk-nav-item.aktif::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  background: var(--warna-utama, #b97d00); border-radius: 3px 3px 0 0;
}

/* Beri sedikit ruang di dasar konten karena bottom navbar hilang */
.licenses { margin-bottom: 10px; }

/* ---------- Hero / banner utama ---------- */
.app-main .owl-carousel {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 16px;
  border-radius: 0; overflow: hidden;
}
.app-main .owl-carousel .item img {
  width: 100%; height: auto; display: block; border-radius: 0; object-fit: cover;
}
.app-main .owl-carousel { position: relative; }
.app-main .owl-carousel .owl-dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  margin: 0; text-align: center; z-index: 3;
  transform: none !important;
}
.app-main .owl-carousel .owl-dots .owl-dot span {
  width: 10px; height: 10px; background: rgba(255, 255, 255, .55);
}
.app-main .owl-carousel .owl-dots .owl-dot.active span { background: var(--warna-utama, #b97d00); }

/* ---------- Bar pemberitahuan + jam ---------- */
.dsk-announce {
  display: flex; align-items: center; gap: 16px;
  margin: 0 16px 14px; padding: 0 18px; height: 46px;
  background: #191919; border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px; color: #cfcfcf; font-size: 13px;
}
.dsk-announce-label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--warna-utama, #f0a500); font-weight: 700; white-space: nowrap;
}
.dsk-announce-label i { font-size: 18px; }
.dsk-announce-text { flex: 1; overflow: hidden; }
.dsk-announce-clock { color: var(--warna-utama, #f0a500); font-weight: 600; white-space: nowrap; }

/* ---------- Baris jackpot + feed pemenang slot ---------- */
/* Feed absolute agar tinggi baris = tinggi gambar jackpot saja */
.dsk-jackpot-row {
  position: relative;
  display: block;
  margin: 0 auto 18px;
  padding-right: 276px; /* 260 feed + 16 gap */
}
.dsk-jackpot {
  height: 150px; padding: 0 32px;
  display: flex; align-items: center; gap: 26px;
  background-image: none !important;
  background: linear-gradient(160deg, #fff4c2 0%, #e6b422 18%, #9c7a1e 46%, #6b5416 72%, #caa02e 100%) !important;
  background-size: auto !important;
  border: 3px solid #b8860b; border-radius: 80px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55), inset 0 0 0 4px rgba(0, 0, 0, .22);
}
/* Varian gambar jackpot — ukuran via --jp-w; angka overlay bisa diatur dari panel */
.dsk-jackpot.dsk-jackpot-img {
  padding: 0; gap: 0; height: auto;
  width: var(--jp-w, 70%); max-width: 100%;
  margin: 0;
  background: transparent !important;
  border: none; box-shadow: none; border-radius: 12px;
  overflow: visible;
}
.dsk-jackpot.dsk-jackpot-img .jp-frame { position: relative; width: 100%; line-height: 0; }
.dsk-jackpot.dsk-jackpot-img .jp-img-link { display: block; width: 100%; line-height: 0; }
.dsk-jackpot.dsk-jackpot-img img {
  display: block; width: 100%; height: auto;
  object-fit: contain; border-radius: 12px;
}
.dsk-jackpot.dsk-jackpot-img .jp-counter-overlay {
  position: absolute; z-index: 2;
  transform: translate(-50%, -50%);
  margin: 0; padding: 0; width: auto; max-width: 92%;
  background: transparent !important; border: none !important; box-shadow: none !important;
  border-radius: 0; letter-spacing: 1px; white-space: nowrap;
  pointer-events: none; font-family: 'advanced_dot_digital7', monospace;
  text-shadow: 0 0 8px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .8);
}
.dsk-jackpot-brand {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1; flex-shrink: 0;
}
.dsk-jp-pp { font-size: 12px; font-weight: 700; color: #2a2000; letter-spacing: .4px; }
.dsk-jp-pp i { color: #b8860b; }
.dsk-jp-pp b { color: #b31217; }
.dsk-jp-title {
  font-size: 30px; font-weight: 900; color: #1a1400; letter-spacing: 1px;
  margin-top: 5px; text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.dsk-jp-title span { color: #0a6ebd; }
.dsk-jackpot .usd-jackpot-counter {
  flex: 1; margin: 0; padding: 16px 28px; border-radius: 50px;
  background: radial-gradient(ellipse at center, #1e1e1e 0%, #050505 100%);
  border: 2px solid rgba(0, 0, 0, .6); box-shadow: inset 0 0 18px rgba(0, 0, 0, .9);
  color: #ff8c1a; font-size: 2.5em; text-align: center; letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(255, 140, 26, .55);
}
/* Feed kanan: tinggi mengikuti gambar jackpot (top/bottom stretch) */
.dsk-jp-feed {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 260px; margin: 0;
  display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
  flex: none;
}
.dsk-jp-feed .vs-winners-viewport {
  flex: 1 1 auto; min-height: 0; height: auto;
}

/* ---------- Judul seksi + Grid Game Populer ---------- */
.app-main .container-populer {
  border: 1px solid rgba(213, 177, 0, .45) !important; border-radius: 12px;
  background: rgba(0, 0, 0, .25); width: 100% !important; margin: 6px 0 0 !important; position: relative;
  padding: 14px 40px 12px !important;
}
.app-main .container-populer .swiper { padding: 4px 0; }
.app-main .container-title { justify-content: flex-start; padding-left: 0; margin-bottom: 4px; }
.app-main .container-title h1 {
  display: inline-block !important; margin: 0;
  font-size: 1.15rem !important; letter-spacing: .4px; font-weight: 800;
  padding: 5px 26px 5px 12px !important; line-height: 1.3;
  background: linear-gradient(to bottom, #fedb37 0%, #d4971c 100%) !important;
  color: #241a00 !important;
}
.app-main .container-title h1::after {
  background: #d4971c !important; width: 18px;
}
.app-main .game-item2 { border-radius: 12px; padding: 2.5px; }
.app-main .game-item2 img { border-radius: 10px; }
.app-main .game-item2:hover { transform: scale(1.05); }
.app-main .container-populer .swiper-button-prev,
.app-main .container-populer .swiper-button-next { width: 32px; height: 32px; }
.container-populer .swiper-slide { height: auto; }
.game-name {
  display: block; text-align: center; color: #fff; font-size: 12px; font-weight: 600;
  margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px;
}

/* ---------- Footer bertingkat ---------- */
.site-footer {
  padding: 48px 0 36px;
  border-top: 3px solid var(--warna-utama, #b97d00);
}
.site-footer .container { max-width: 1200px; }
.site-footer h6 { margin-bottom: 14px; }
.site-footer .footer-links li { margin-bottom: 7px; }
.site-footer .footer-links a { transition: color .15s ease, padding-left .15s ease; }
.site-footer .footer-links a:hover { color: var(--warna-utama, #b97d00) !important; padding-left: 4px; }
.site-footer .copyright-text { line-height: 44px; }
.site-footer #ProviderList {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 4px 16px; max-width: 1120px; margin: 0 auto 26px;
  padding: 22px 18px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px;
}
.site-footer #ProviderList li { margin: 6px 8px; transition: transform .15s ease; }
.site-footer #ProviderList li:hover { transform: translateY(-3px); }
.site-footer .social-icons a:hover { background-color: var(--warna-utama, #b97d00); }
.site-footer .footer-cols { --bs-gutter-x: 2rem; }
.site-footer .footer-cols > [class^="col-"] { margin-bottom: 0; }
.site-footer .footer-cols h6 { color: #ffffff; }
.site-footer .footer-links a i { margin-right: 7px; opacity: .85; }

/* ---------- Container artikel dari panel (tepat sebelum footer) ---------- */
.app-main .footer-article {
  max-width: 1200px; margin: 8px auto 0; padding: 28px 12px 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.app-main .footer-article h1,
.app-main .footer-article h2,
.app-main .footer-article h3 { text-align: left; }

/* ---------- Seksi "Video Slots Popular" (pemenang + tab provider + hero) ---------- */
.dsk-showcase {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 14px;
  margin: 24px 0 0; align-items: start;
}
.vs-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.vs-title {
  display: flex; align-items: center; gap: 8px;
  background: #1b1b1b; border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px;
  padding: 14px 16px; color: #fff; font-weight: 700; font-size: 14px;
}
.vs-title i { color: var(--warna-utama, #f0a500); font-size: 18px; }
.vs-winners { background: #101010; border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.vs-winners-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font-size: 12px; font-weight: 700; color: #ffd23f;
  background: linear-gradient(90deg, #2a1f00, #141414); border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.vs-winners-viewport { flex: 1 1 auto; min-height: 120px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.vs-winners-list { list-style: none; margin: 0; padding: 0; animation: vsScrollUp var(--vs-dur, 14s) linear infinite; will-change: transform; }
.vs-winners-viewport:hover .vs-winners-list { animation-play-state: paused; }
@keyframes vsScrollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.vs-winners-list li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.vs-winners-list img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.vs-dep-icon {
  width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, #1f6b3a, #0d3d22);
  border: 1px solid rgba(57, 211, 83, .35);
}
.vs-winners.vs-deposits .vs-winners-head {
  color: #39d353;
  background: linear-gradient(90deg, #0a2010, #141414);
}
.vs-win-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vs-win-user { font-size: 11px; color: #9a9a9a; }
.vs-win-amount { font-size: 13px; font-weight: 800; color: #39d353; }
.vs-win-game { font-size: 11px; color: #cfcfcf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-promo-left { display: block; border-radius: 10px; overflow: hidden; line-height: 0; flex: 0 0 auto; }
.vs-promo-left img { width: 100%; display: block; }

.vs-mid { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vs-tabs {
  display: flex; align-items: center; gap: 6px;
  background: #161616; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 8px;
}
.vs-tab-nav {
  flex-shrink: 0; width: 30px; height: 44px; border: none; background: #242424;
  color: #fff; border-radius: 8px; cursor: pointer; font-size: 18px; display: grid; place-items: center;
}
.vs-tab-nav:hover { background: #2f2f2f; }
.vs-tabs-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.vs-tabs-scroll::-webkit-scrollbar { display: none; }
.vs-tab {
  flex-shrink: 0; height: 44px; min-width: 118px; padding: 0 16px;
  background: #0d0d0d; border: 1px solid #2b2b2b; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; transition: border-color .15s ease, background .15s ease;
}
.vs-tab img { max-height: 26px; max-width: 92px; object-fit: contain; opacity: .55; transition: opacity .15s ease; }
.vs-tab .vs-tab-name { color: #cfcfcf; font-size: 12px; font-weight: 700; white-space: nowrap; opacity: .7; transition: opacity .15s ease; }
.vs-tab.aktif { border-color: var(--warna-utama, #f0a500); background: #1c1607; }
.vs-tab.aktif img, .vs-tab.aktif .vs-tab-name { opacity: 1; }
.vs-tab.aktif .vs-tab-name { color: var(--warna-utama, #f0a500); }
.vs-state { text-align: center; color: #8a8a8a; font-size: 13px; padding: 22px 10px; }
.vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vs-grid-item {
  position: relative; border-radius: 12px; overflow: hidden; display: block; padding: 2px;
  background: linear-gradient(331deg, #fedb37 0%, #d4971c 8%, #9f7928 30%, #8a6e2f 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #fff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  transition: transform .15s ease;
}
.vs-grid-item:hover { transform: translateY(-3px); }
.vs-grid-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
.vs-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2; font-size: 9px; font-weight: 800;
  color: #fff; padding: 2px 7px; border-radius: 4px; letter-spacing: .5px;
}
.vs-badge-new { background: #e0322f; }
.vs-badge-daily { background: #0a6ebd; }

.vs-hero {
  display: block; border-radius: 14px; overflow: hidden; min-height: 0;
  background: #141414; border: 1px solid rgba(255, 255, 255, .06); line-height: 0;
}
.vs-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================================
   RESPONSIF — tablet & HP (< 992px)
   ========================================================================== */
@media (max-width: 991px) {
  /* Pakai chrome mobile asli: header + navbar bawah + tombol + bar kategori */
  .dsk-header { display: none !important; }
  .dsk-announce { display: none !important; }
  .app-mobile-header { display: block !important; }
  .announce-mobile { display: flex !important; }

  /* Ruang untuk header mobile (fixed-top) & navbar bawah (fixed) */
  .app-main { padding: 84px 0 96px 0 !important; }
  .dsk-container { padding: 0 10px; }

  /* Header ringkas */
  .dsk-topbar, .dsk-topbar .dsk-container { height: 40px; }
  .dsk-topbar .dsk-container { gap: 8px; }
  .dsk-social { gap: 4px; overflow: hidden; flex-shrink: 1; }
  .dsk-social a { font-size: 0; gap: 0; padding: 0 8px; height: 26px; }
  .dsk-social a i { font-size: 16px; }
  .dsk-auth { gap: 6px; flex-shrink: 0; }
  .dsk-saldo { font-size: 12px; }
  .dsk-btn { height: 28px; padding: 0 12px; font-size: 12px; }
  .dsk-mainbar, .dsk-mainbar .dsk-container { height: 60px; }
  .dsk-mainbar .dsk-container { gap: 10px; }
  .dsk-logo img { height: 34px; }
  .dsk-nav { justify-content: flex-start; }
  .dsk-nav-item { min-width: 62px; padding: 4px 8px; font-size: 10px; }
  .dsk-nav-item img { height: 22px; width: 22px; }
  .dsk-nav-item i { font-size: 20px; line-height: 22px; }

  /* Bar pemberitahuan */
  .dsk-announce { margin: 0 0 12px; gap: 8px; height: auto; min-height: 42px; padding: 6px 12px; font-size: 12px; flex-wrap: wrap; }
  .dsk-announce-clock { display: none; }

  /* Jackpot menumpuk — feed kembali alur normal di bawah gambar */
  .dsk-jackpot-row { padding-right: 0; margin: 0 0 14px; }
  .dsk-jackpot { height: auto; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 22px; text-align: center; }
  .dsk-jackpot.dsk-jackpot-img { padding: 0; height: auto; width: var(--jp-w, 85%); margin: 0 auto; }
  .dsk-jackpot.dsk-jackpot-img img { width: 100%; height: auto; object-fit: contain; }
  .dsk-jackpot.dsk-jackpot-img .jp-counter-overlay { letter-spacing: 0.5px; }
  .dsk-jackpot-brand { align-items: center; }
  .dsk-jp-title { font-size: 22px; }
  .dsk-jackpot .usd-jackpot-counter { width: 100%; font-size: 1.7em; padding: 12px 10px; letter-spacing: 2px; }
  .dsk-jp-feed {
    position: static; width: 100%; height: 220px; margin-top: 12px;
  }
  .dsk-jp-feed .vs-winners-viewport { flex: 1 1 auto; min-height: 0; height: auto; }

  /* Tombol Daftar (emas) + Masuk (abu) menyatu dengan sekat lurus */
  .container-masuk-daftar { display: flex !important; gap: 0; margin: 12px 0 4px !important; animation: none !important; }
  .container-masuk-daftar a {
    flex: 1; padding: 14px 10px !important; border-radius: 0 !important;
    font-size: 16px; font-weight: 800; text-transform: none; text-align: center;
    text-decoration: none; border: 0 !important; line-height: 1.2; position: relative;
  }
  .container-masuk-daftar .daftar {
    background: linear-gradient(to bottom, #fedb37 0%, #d4971c 100%) !important;
    color: #fff !important; z-index: 2;
  }
  .container-masuk-daftar .masuk {
    background: linear-gradient(to bottom, #4a4a4a 0%, #2c2c2c 100%) !important;
    color: #fff !important; z-index: 1;
  }

  /* Game populer */
  .app-main .container-populer { padding: 12px 26px 10px !important; border-radius: 10px; }
  .app-main .container-title h1 { font-size: 1rem !important; padding: 4px 22px 4px 10px !important; }
  .app-main .container-populer .swiper-button-prev,
  .app-main .container-populer .swiper-button-next { width: 26px; height: 26px; }
  .game-name { font-size: 11px; margin-top: 5px; }

  /* Footer */
  .site-footer { padding: 34px 0 28px; }
  /* Grid logo provider disembunyikan di tampilan mobile/tablet. */
  .site-footer #ProviderList { display: none; }
  .site-footer .footer-cols { --bs-gutter-x: 1rem; }

  /* Video Slots Popular menumpuk 1 kolom */
  .dsk-showcase { grid-template-columns: 1fr; gap: 12px; margin: 16px 0 0; }
  .vs-left { height: auto !important; }
  .vs-winners { flex: 0 0 auto; }
  .vs-winners-viewport { flex: none; height: 300px; }
  .vs-hero { min-height: 0; height: auto !important; }
  .vs-hero img { height: auto; }
}

/* Desktop sempit (992–1280px): ringkas topbar agar widget member + ikon tidak meluber */
@media (min-width: 992px) and (max-width: 1280px) {
  .dsk-social a { font-size: 0; gap: 0; padding: 0 8px; }
  .dsk-social a i { font-size: 16px; }
  .dsk-mb-user { max-width: 96px; }
  .dsk-actions > a { width: 28px; height: 28px; font-size: 15px; }
}

@media (max-width: 575px) {
  .app-main { padding-top: 80px !important; }
  .dsk-saldo { display: none; }
  .dsk-btn { padding: 0 10px; font-size: 11px; }
  .dsk-nav-item span { display: none; }
  .dsk-nav-item { min-width: 46px; padding: 6px; }
  .dsk-jp-title { font-size: 19px; }
  .dsk-jackpot .usd-jackpot-counter { font-size: 1.4em; letter-spacing: 1px; }
  .dsk-jp-feed .vs-winners-list img { width: 34px; height: 34px; }
  .vs-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* =============================================================================
   Halaman Akun Saya (profil) — desktop: sidebar + tab + kartu; mobile: menumpuk
   ========================================================================== */
.akun-page { color: #e6e6e6; }
.akun-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; padding: 0 16px; }

/* Sidebar (desktop) */
.akun-side { background: #131313; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; overflow: hidden; align-self: start; }
.akun-side-head { text-align: center; padding: 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.as-user { color: var(--warna-utama, #c9a54e); font-weight: 800; font-size: 16px; }
.as-last { color: #8a8a8a; font-size: 11px; margin-top: 4px; }
.as-title { text-align: center; color: #fff; font-weight: 800; letter-spacing: 1px; padding: 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.as-menu { display: flex; flex-direction: column; padding: 6px; }
.as-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: #cfcfcf; text-decoration: none; border-radius: 8px; font-size: 13px; position: relative; }
.as-menu a i { font-size: 18px; color: #9a9a9a; }
.as-menu a:hover { background: #1e1e1e; }
.as-menu a.aktif { background: linear-gradient(90deg, rgba(201, 165, 78, .18), transparent); color: #fff; }
.as-menu a.aktif i { color: var(--warna-utama, #c9a54e); }
.as-menu a.aktif::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--warna-utama, #c9a54e); border-radius: 0 3px 3px 0; }
.as-badge { margin-left: auto; background: #e0322f; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; }

.akun-main { min-width: 0; }

/* Tab atas */
.akun-tabs { display: flex; background: #131313; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.akun-tabs a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; color: #bdbdbd; text-decoration: none; font-size: 13px; font-weight: 700; border-bottom: 2px solid transparent; }
.akun-tabs a i { font-size: 16px; }
.akun-tabs a:hover { color: #fff; }
.akun-tabs a.aktif { color: var(--warna-utama, #c9a54e); border-bottom-color: var(--warna-utama, #c9a54e); background: #171717; }
.akun-tabs .lbl-mobile { display: none; }

/* Kartu ringkasan profil */
.akun-summary { display: flex; align-items: center; gap: 18px; background: #141210; border: 1px solid #7a6323; border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; flex-wrap: wrap; }
.asm-avatar { width: 64px; height: 64px; display: grid; place-items: center; font-size: 42px; color: #c9862f; flex: 0 0 auto; }
.asm-id { min-width: 150px; }
.asm-name { color: var(--warna-utama, #c9a54e); font-weight: 800; font-size: 18px; }
.asm-metrics { display: flex; gap: 8px; margin-top: 6px; }
.asm-exp, .asm-lp { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #cfcfcf; }
.asm-exp b, .asm-lp b { font-size: 10px; font-weight: 800; color: #111; background: #8a8a8a; border-radius: 4px; padding: 1px 5px; }
.asm-lp b { background: var(--warna-utama, #f0a500); }
.asm-detail { display: inline-flex; align-items: center; gap: 2px; background: #2a2a2a; color: #cfcfcf !important; font-size: 11px; font-weight: 700; padding: 8px 10px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.asm-detail:hover { background: #373737; }
.asm-actions { display: flex; gap: 22px; margin-left: 10px; }
.asm-actions a { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #d8d8d8; text-decoration: none; font-size: 11px; font-weight: 600; }
.asm-actions a i { font-size: 24px; color: var(--warna-utama, #c9a54e); }
.asm-actions a:hover { color: #fff; }
.asm-verif { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-left: auto; text-align: center; font-size: 11px; color: #bdbdbd; max-width: 92px; }
.asm-verif-ic { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #2a2a2a; display: grid; place-items: center; color: #c9a54e; font-size: 18px; text-decoration: none; }
.asm-verif-ic b { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #e0322f; color: #fff; font-size: 10px; display: grid; place-items: center; }
.asm-ref { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 11px; color: #bdbdbd; }
.asm-ref-code { display: block; max-width: 110px; background: linear-gradient(to bottom, #fedb37, #d4971c); color: #111 !important; font-weight: 800; padding: 8px 14px; border-radius: 6px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Blok umum (informasi akun, status) */
.akun-block { background: #111; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.akun-block-head { background: linear-gradient(90deg, #8a6d24, #5f4a18); color: #fff; font-weight: 800; letter-spacing: .5px; padding: 12px 16px; font-size: 14px; }
.akun-block-body { padding: 18px; }

/* Form akun (profil & ubah kata sandi) */
.akun-form { max-width: 460px; }
.akun-form .dep-field { margin-bottom: 16px; }
.akun-form .dep-submit { margin-top: 4px; }
.akun-note { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.akun-note li { position: relative; padding-left: 18px; color: #b9b9b9; font-size: 12.5px; line-height: 1.5; }
.akun-note li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--warna-utama, #f0a500); }
.dep-pass { position: relative; }
.dep-pass .dep-input { padding-right: 44px; }
.dep-eye { position: absolute; top: 0; right: 0; width: 42px; height: 100%; border: none; background: transparent; color: #9a9a9a; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dep-eye:hover { color: var(--warna-utama, #f0a500); }
.dep-error-text { color: #ff6b6b; font-size: 12px; margin-top: 6px; min-height: 1px; }

/* Kartu daftar (bonus, rebate, inbox) */
.acard { background: #191919; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 14px 16px; }
.acard.mb-2 { margin-bottom: 10px; }
.acard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acard-title { color: #fff; font-weight: 700; font-size: 14px; }
.acard-val { color: var(--warna-utama, #f0a500); font-weight: 800; font-size: 14px; white-space: nowrap; }
.acard-desc { color: #9a9a9a; font-size: 12px; margin: 8px 0 0; }
.acard-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; color: #bdbdbd; flex-wrap: wrap; }
.acard-plus { color: #22c55e; font-weight: 700; white-space: nowrap; }
.acard-btn { display: block; margin-top: 12px; text-align: center; text-decoration: none; }
.acard-empty { text-align: center; color: #8a8a8a; font-size: 13px; padding: 22px 10px; }
.acard-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acard-line { display: block; color: #fff; font-size: 13px; }
.acard-sub { display: block; color: #8a8a8a; font-size: 11px; margin-top: 3px; }
.acard-progress { height: 6px; background: #000; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.acard-progress i { display: block; height: 100%; background: linear-gradient(90deg, #fedb37, #d4971c); }
.acard-progress-label { color: #9a9a9a; font-size: 11px; margin-top: 6px; }
.acard-msg-body { color: #cfcfcf; font-size: 13px; margin: 8px 0 0; white-space: pre-line; }

/* Halaman bonus (detail seperti Nova) */
.bstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.bstat { background: #191919; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 14px 10px; text-align: center; }
.bstat-label { display: block; color: #9a9a9a; font-size: 11px; margin-bottom: 6px; }
.bstat-val { display: block; font-weight: 800; font-size: 17px; }
.bstat-blue .bstat-val { color: #60a5fa; }
.bstat-green .bstat-val { color: #34d399; }
.bstat-ok .bstat-val { color: #22c55e; }
.bstat-gold .bstat-val { color: var(--warna-utama, #f0a500); }

.bactive { background: linear-gradient(135deg, rgba(240, 165, 0, .16), rgba(240, 165, 0, .04)); border: 2px solid rgba(240, 165, 0, .5); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.bactive-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bactive-sub { color: #9a9a9a; font-size: 12px; }
.bactive-title { color: #fff; font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.bactive-desc { color: #bdbdbd; font-size: 13px; margin: 0 0 12px; }
.bactive-desc b { color: #34d399; }
.bactive-box { background: #0f0f0f; border-radius: 12px; padding: 14px; }
.bactive-row { display: flex; justify-content: space-between; align-items: center; color: #cfcfcf; font-size: 13px; }
.bactive-row b { color: #fff; }
.bactive-bar { height: 14px; background: #000; border-radius: 8px; overflow: hidden; margin: 10px 0 6px; }
.bactive-bar i { display: block; height: 100%; background: linear-gradient(90deg, #fedb37, #f0791c); }
.bactive-minmax { display: flex; justify-content: space-between; color: #8a8a8a; font-size: 11px; }
.bactive-sisa { text-align: center; background: rgba(240, 165, 0, .1); border: 1px solid rgba(240, 165, 0, .3); border-radius: 10px; padding: 12px; margin-top: 12px; }
.bactive-sisa span { display: block; color: #f0a500; font-size: 12px; }
.bactive-sisa b { display: block; color: #f0a500; font-size: 24px; font-weight: 800; margin: 2px 0; }
.bactive.bactive-none { background: #191919; border: 1px solid rgba(255, 255, 255, .08); }
.bactive-sisa small { color: #8a8a8a; font-size: 11px; }
.bactive-cta { display: block; text-align: center; text-decoration: none; margin-top: 14px; }

.bfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bfilter-chip { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-decoration: none; background: #1e1e1e; color: #9a9a9a; border: 1px solid rgba(255, 255, 255, .08); }
.bfilter-chip:hover { color: #fff; }
.bfilter-chip.aktif { background: var(--warna-utama, #f0a500); color: #111; border-color: var(--warna-utama, #f0a500); }
.bperpage { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; color: #8a8a8a; font-size: 12px; }
.bperpage select { background: #1b1b1b; border: 1px solid rgba(255, 255, 255, .12); color: #fff; border-radius: 6px; padding: 4px 8px; font-size: 12px; }

.bhist { display: flex; align-items: flex-start; gap: 12px; }
.bhist-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; }
.bhist-ic-bonus { background: rgba(240, 165, 0, .15); color: var(--warna-utama, #f0a500); }
.bhist-ic-rolling { background: rgba(129, 140, 248, .18); color: #a5b4fc; }
.bhist-ic-cashback { background: rgba(45, 212, 191, .18); color: #5eead4; }
.bhist-body { flex: 1 1 auto; min-width: 0; }
.bhist-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bhist-to { color: #9a9a9a; font-size: 11px; }
.bhist-date { color: #6f6f6f; font-size: 11px; margin-left: auto; }
.bhist-count { text-align: center; color: #8a8a8a; font-size: 12px; margin-top: 10px; }

@media (max-width: 991px) {
  .bstats { grid-template-columns: 1fr 1fr; }
}

/* Ringkasan hadiah (rebate) */
.reb-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reb-sum-item { background: #191919; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 14px 10px; text-align: center; }
.reb-sum-label { display: block; color: #9a9a9a; font-size: 12px; }
.reb-sum-val { display: block; color: var(--warna-utama, #f0a500); font-weight: 800; font-size: 16px; margin-top: 6px; }

/* Salin (referral) */
.rek-copy { display: flex; gap: 8px; }
.rek-copy .dep-input { flex: 1 1 auto; min-width: 0; }
.rek-copy-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--warna-utama, #f0a500); color: #111; border: none; border-radius: 8px; padding: 0 16px; font-weight: 700; font-size: 13px; cursor: pointer; }
.rek-copy-btn:hover { filter: brightness(1.06); }
.ref-count { display: flex; align-items: center; gap: 10px; background: #191919; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 14px 16px; color: #cfcfcf; font-size: 14px; margin-top: 4px; }
.ref-count i { color: var(--warna-utama, #f0a500); font-size: 20px; }
.ref-count b { margin-left: auto; color: #fff; font-size: 18px; }

@media (max-width: 991px) {
  .reb-summary { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .reb-sum-val { font-size: 14px; }
  .rek-copy-btn { padding: 0 12px; }
}

.akun-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.akun-info-list { display: flex; flex-direction: column; gap: 14px; }
.aif { display: grid; grid-template-columns: 170px 12px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.aif-k { color: #9a9a9a; text-align: right; }
.aif-s { color: #9a9a9a; }
.aif-v { color: #fff; font-weight: 600; word-break: break-word; }
.aif-alert { display: inline-flex; align-items: center; gap: 6px; background: #e0322f; color: #fff; padding: 8px 12px; border-radius: 6px; font-weight: 600; }

.akun-bank-head { display: flex; align-items: center; justify-content: space-between; color: #cfcfcf; font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.akun-bank-edit { color: #c9a54e; font-size: 18px; }
.akun-bank-card { background: #1a1a1a; border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px; padding: 16px 18px; }
.abk-name { color: #cfcfcf; font-size: 13px; }
.abk-num { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: 4px; margin: 6px 0 12px; }
.abk-bank { color: #bdbdbd; font-size: 14px; }
.abk-line { height: 3px; width: 40px; background: #c9a54e; border-radius: 2px; margin: 14px auto 0; }
.akun-bank-empty { color: #9a9a9a; font-size: 13px; }
.akun-bank-empty a { color: #c9a54e; }

.akun-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.akun-status-title { color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.akun-status-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.akun-status-table th { color: #9a9a9a; font-weight: 600; text-align: left; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.akun-status-table th:last-child, .akun-status-table td:last-child { text-align: right; }
.akun-status-table td { padding: 10px 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: #ddd; }
.ast-empty { text-align: center !important; color: #7a7a7a; padding: 22px 8px !important; }
.ast-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.ast-ok { background: rgba(34, 197, 94, .15); color: #22c55e; }
.ast-no { background: rgba(224, 50, 47, .15); color: #e0322f; }
.ast-wait { background: rgba(240, 165, 0, .15); color: #f0a500; }

@media (max-width: 991px) {
  .akun-layout { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .akun-side { display: none; }
  .akun-summary { display: none; }
  .akun-main { padding: 10px; }
  .akun-tabs { background: #161616; border: none; border-radius: 10px; padding: 8px; gap: 8px; }
  .akun-tabs a { flex-direction: column; gap: 6px; font-size: 11px; padding: 12px 4px; border: 1px solid transparent; border-radius: 8px; background: #1e1e1e; }
  .akun-tabs a i { font-size: 22px; }
  .akun-tabs a.aktif { background: #2a2313; border-color: var(--warna-utama, #c9a54e); color: var(--warna-utama, #c9a54e); border-bottom-width: 1px; }
  .akun-tabs .lbl-desktop { display: none; }
  .akun-tabs .lbl-mobile { display: inline; }
  .akun-info-grid { grid-template-columns: 1fr; gap: 22px; }
  .aif { grid-template-columns: 130px 10px 1fr; font-size: 12px; }
  .aif-k { font-size: 12px; }
  .akun-status-grid { grid-template-columns: 1fr; gap: 20px; }
  .abk-num { font-size: 22px; letter-spacing: 3px; }
}