/* =====================================================================
   Tema: Royal Purple
   Hanya warna dan sentuhan tampilan. Struktur ada di base.css.
   ===================================================================== */
:root {
    --theme-color: #a855f7;
    --theme-color-rgb: 168,85,247;
    --surface-1: #0f0b1a;          /* latar halaman            */
    --surface-2: #191228;          /* kartu, header, drawer    */
    --surface-3: #221936;          /* elemen di atas kartu     */
    --theme-accent: #f0abfc;      /* gradasi tombol           */
    --theme-ink: #1b0f2e;         /* teks di atas warna tema  */
    --theme-glow: rgba(168,85,247, .30);
    --hairline: rgba(168,85,247, .16);
    --radius: 12px;
}

/* ---------- Dasar ---------- */
body {
    background-color: var(--surface-1);
    background-image:
        radial-gradient(1000px 460px at 50% -160px, rgba(168,85,247, .15), transparent 70%),
        radial-gradient(700px 340px at 100% 100%, rgba(168,85,247, .07), transparent 70%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(168,85,247, .32); color: #fff; }

:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Lebar isi lebih lega di layar besar */
@media (min-width: 1024px) {
    .gr-jd6g1 { max-width: 1240px; }
}

/* ---------- Tombol ---------- */
.fx-3ci1x {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.sc-apru, .ct-pw0p, .fx-izlpm {
    background-image: linear-gradient(160deg, var(--theme-accent), var(--theme-color) 62%);
    box-shadow: 0 2px 10px var(--theme-glow);
    border: none;
    color: var(--theme-ink);
}
.sc-apru:hover, .ct-pw0p:hover, .fx-izlpm:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 18px var(--theme-glow);
    transform: translateY(-1px);
}
.sc-apru:active, .ct-pw0p:active, .fx-izlpm:active {
    transform: translateY(0);
    filter: brightness(.96);
}

/* ---------- Kartu ---------- */
.ct-fcmzn {
    background-color: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.38);
}
.fx-3nn6s  { background-color: var(--surface-2); }
.pn-39wpb {
    background-image: linear-gradient(150deg, rgba(168,85,247, .20), rgba(168,85,247, .05));
    background-color: var(--surface-2);
}
.md-66vj {
    border-bottom: 1px solid var(--hairline);
    padding-bottom: .6rem;
}
.md-o1ly3 span { font-weight: 700; letter-spacing: .01em; }
.ui-cp7no {
    color: var(--theme-color);
    font-weight: 600;
    transition: opacity .15s ease;
}
.ui-cp7no:hover { opacity: .75; }
.bx-4dom { transition: transform .3s ease; }
.ui-6je0:hover .bx-4dom { transform: scale(1.03); }

/* ---------- Header ---------- */
.ly-hmo84e {
    background-color: rgba(var(--theme-color-rgb), .04);
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--hairline);
    backdrop-filter: saturate(1.2) blur(6px);
    -webkit-backdrop-filter: saturate(1.2) blur(6px);
}
.el-xy394 { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

.sc-dp8j .el-i6uxu a {
    transition: color .15s ease, border-color .15s ease;
    border-bottom: 2px solid transparent;
}
.sc-dp8j .el-i6uxu a:hover { color: var(--theme-color); }
.sc-0ehr, .ct-d3m58p {
    color: var(--theme-color) !important;
    border-bottom-color: var(--theme-color);
}

/* ---------- Menu kategori ---------- */
.md-lty72 a {
    border-radius: 10px;
    transition: background-color .18s ease, transform .18s ease;
}
.md-lty72 a:hover {
    background-color: rgba(168,85,247, .10);
    transform: translateY(-2px);
}
.md-lty72 a:hover span { color: var(--theme-color); }

/* ---------- Teks berjalan ----------
   Bawaan base.css memakai warna tema pekat sebagai latar sekaligus sebagai
   gradasi :before/:after, sehingga tulisan tertutup. Latar dibuat lembut
   dan kedua gradasi disamakan dengan latar itu.                          */
.gr-i54n {
    background-color: var(--surface-2) !important;
    background-image: linear-gradient(90deg, rgba(168,85,247, .20), rgba(168,85,247, .06));
    border: 1px solid rgba(168,85,247, .22);
    border-radius: 10px;
    color: #fff;
    overflow: hidden;
}
.gr-i54n:before {
    background: linear-gradient(90deg, var(--surface-2) 0, rgba(0,0,0,0)) !important;
}
.gr-i54n:after {
    background: linear-gradient(270deg, var(--surface-2) 0, rgba(0,0,0,0)) !important;
}
.gr-wop9 marquee { color: #fff; }
.gr-wop9 i { color: var(--theme-color); }

/* Ticker pengganti <marquee> (elemen usang, tidak jalan di sebagian mesin
   render). Animasi murni CSS, berhenti saat disentuh/di-hover.          */
.ct-i0odb {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    margin-left: .5rem;
}
.ct-i0odb > span {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    color: #fff;
    animation: tickerMove 26s linear infinite;
}
.ct-i0odb:hover > span { animation-play-state: paused; }

@keyframes tickerMove {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ---------- Carousel ---------- */
.ui-g2k4x {
    background-color: var(--surface-3);
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--theme-color);
    transition: background-color .18s ease, opacity .18s ease;
}
.ui-g2k4x:hover { background-color: rgba(168,85,247, .18); }
.fx-619z { opacity: .3; pointer-events: none; }

.gr-qsk3b img, .pn-12w0 img {
    transition: transform .25s ease, filter .25s ease;
}
.gr-qsk3b:hover img, .pn-12w0:hover img {
    transform: translateY(-3px) scale(1.04);
    filter: drop-shadow(0 6px 12px var(--theme-glow));
}

/* ---------- Titik navigasi banner ---------- */
.sc-l97rn7 { text-align: center; padding: .5rem 0; }
.sc-l97rn7 li { display: inline-block; margin: 0 4px; }
.sc-l97rn7 li button {
    width: 8px; height: 8px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,.28);
    font-size: 0; cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}
.sc-l97rn7 li.gr-1c2lt0 button {
    width: 22px; border-radius: 4px;
    background: var(--theme-color);
}
.el-ghyz { border-radius: var(--radius); overflow: hidden; }
.bx-3ol51d img.ui-nkaio { width: 100%; height: auto; display: block; }

/* ---------- Drawer ---------- */
.sc-3aychn {
    background-color: var(--surface-2);
    border-left: 1px solid var(--hairline);
}
.fx-buti a { border-radius: 8px; }
.fx-buti a:hover { background-color: rgba(168,85,247, .12); }

/* ---------- Sticky footer ---------- */
.ct-10ua4 {
    background-color: var(--surface-2);
    border-top: 1px solid var(--hairline);
}
.bx-fwigzm a, .bx-fwigzm button {
    transition: color .15s ease, transform .15s ease;
}
.bx-fwigzm a:hover, .bx-fwigzm button:hover {
    color: var(--theme-color);
    transform: translateY(-2px);
}

/* ---------- Footer & artikel ---------- */
.bx-m5px {
    background-color: var(--surface-2);
    border-top: 1px solid var(--hairline);
}
.bx-m5px h5 {
    color: var(--theme-color);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .78rem;
}
.gr-0yhzr a:hover { color: var(--theme-color); }

.bx-m5px section.ct-bwa9q article { line-height: 1.75; }
.bx-m5px section.ct-bwa9q article h2 {
    font-size: 1.15rem;
    margin: 1.2rem 0 .5rem;
    color: #fff;
}
.bx-m5px section.ct-bwa9q article h3 {
    font-size: 1rem;
    margin: 1rem 0 .4rem;
    color: var(--theme-color);
}
.bx-m5px section.ct-bwa9q article a {
    color: var(--theme-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bx-m5px section.ct-bwa9q button {
    color: var(--theme-ink);
    background-image: linear-gradient(160deg, var(--theme-accent), var(--theme-color) 62%);
    border: none; border-radius: 8px;
    padding: .45rem 1.1rem; font-weight: 600; cursor: pointer;
}

/* ---------- Logo bank & partner ---------- */
.sc-5iit7a ul li,
.ly-6tvm8 ul li a {
    transition: transform .18s ease, filter .18s ease;
}
.sc-5iit7a ul li:hover,
.ly-6tvm8 ul li a:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}

/* ---------- Kartu popup pembuka ---------- */
/* width:100vw pada gaya sebaris mengabaikan lebar scrollbar; disamakan ke 100%. */
.gr-7enx {
    width: 100% !important;
    max-width: 100vw;
    left: 0 !important;
    right: 0 !important;
    padding: 16px !important;
    overflow-x: hidden;
}
.gr-7enx, .gr-7enx * { box-sizing: border-box; }

.bx-l0pm {
    max-width: min(400px, 100%) !important;
    margin: auto;
    animation: lpPop .32s cubic-bezier(.2,.8,.3,1) both;
}
.bx-l0pm > div,
.bx-l0pm > img { max-width: 100%; }

@keyframes lpPop {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.bx-l0pm [style*="width: 40%"] { flex: 0 0 42%; word-break: break-word; }
.bx-l0pm [style*="width: 60%"] { flex: 1 1 58%; word-break: break-word; }

.sc-848b64 {
    margin-top: 14px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.sc-848b64:hover {
    background: rgba(168,85,247, .18);
    border-color: var(--theme-color);
}

@media (max-width: 380px) {
    .gr-7enx { padding: 10px !important; }
    .bx-l0pm h2 { font-size: 14px !important; }
    .bx-l0pm [style*="font-size: 14px"] { font-size: 13px !important; }
}

/* ---------- Kartu permainan kasino ----------
   Skeleton bawaan berlatar warna tema dan tidak punya z-index, sehingga
   menutupi gambar dan tampak sebagai balok berwarna. Diletakkan di
   belakang gambar, dan disembunyikan begitu gambar berhasil dimuat.   */
.casino-game__img-container,
.sc-rzfei {
    position: relative;
    background-color: var(--surface-3);
    border-radius: 10px;
    overflow: hidden;
}
.pn-59f1vx {
    z-index: 0;
    background-color: var(--surface-3) !important;
}
.pn-59f1vx:before {
    background: linear-gradient(90deg,
        transparent 0, rgba(168,85,247, .10) 50%, transparent) !important;
}
.sc-mymcjw {
    z-index: 1;
    background-color: var(--surface-3) !important;
}
/* Gambar asli selalu di atas skeleton */
.sc-rzfei img,
.casino-game__img-container > img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
}
/* Setelah gambar dimuat, skeleton tidak perlu tampil lagi */
.sc-rzfei.is-loaded .pn-59f1vx,
.sc-rzfei.is-loaded .sc-mymcjw { display: none; }

.ly-emhjv { z-index: 4; border-radius: 4px; font-size: .7rem; }

.ui-4wtxp ul { gap: .5rem; }
.sc-rzfei { transition: transform .22s ease, box-shadow .22s ease; }
.sc-rzfei:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 0 1px var(--hairline);
}
.pn-x35q {
    display: block;
    padding: .4rem .25rem;
    font-size: .75rem;
    color: #cfd6df;
    text-align: center;
}

/* ---------- Cegah geser mendatar ----------
   Dua sumbernya: (1) .ly-frn5w memakai 100vw yang sudah termasuk
   lebar scrollbar; (2) slide/carousel di luar layar menambah lebar gulir. */
html, body { max-width: 100%; overflow-x: hidden; }

.ly-frn5w {
    width: 100% !important;
    max-width: 100vw;
}

.el-ghyz, .bx-jv1e { overflow: hidden; }
.fx-d0lvc, .ui-vwa2r2 { overflow: hidden; }
.fx-xsv0 { overflow: hidden; border-radius: var(--radius); }

/* ---------- Tombol kembali ke atas ---------- */
.to-top {
    position: fixed;
    right: 14px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--theme-color);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 98;
}
.to-top--show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: rgba(168,85,247, .18); }

/* ---------- Aksesibilitas: hormati preferensi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}