/* =====================================================================
   Tema: Crimson Red
   Hanya warna dan sentuhan tampilan. Struktur ada di base.css.
   ===================================================================== */
:root {
    --theme-color: #ef4444;
    --theme-color-rgb: 239,68,68;
    --surface-1: #140a0a;          /* latar halaman            */
    --surface-2: #20100f;          /* kartu, header, drawer    */
    --surface-3: #2b1615;          /* elemen di atas kartu     */
    --theme-accent: #fca5a5;      /* gradasi tombol           */
    --theme-ink: #2a0b0b;         /* teks di atas warna tema  */
    --theme-glow: rgba(239,68,68, .30);
    --hairline: rgba(239,68,68, .16);
    --radius: 12px;
}

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

::selection { background: rgba(239,68,68, .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) {
    .pn-2o21 { max-width: 1240px; }
}

/* ---------- Tombol ---------- */
.bx-pof7z9 {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.ui-na3c, .pn-6t4d7, .gr-u03shl {
    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);
}
.ui-na3c:hover, .pn-6t4d7:hover, .gr-u03shl:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 18px var(--theme-glow);
    transform: translateY(-1px);
}
.ui-na3c:active, .pn-6t4d7:active, .gr-u03shl:active {
    transform: translateY(0);
    filter: brightness(.96);
}

/* ---------- Kartu ---------- */
.ly-6zvyai {
    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);
}
.ui-ll1v  { background-color: var(--surface-2); }
.ct-erz7r {
    background-image: linear-gradient(150deg, rgba(239,68,68, .20), rgba(239,68,68, .05));
    background-color: var(--surface-2);
}
.gr-2re8sx {
    border-bottom: 1px solid var(--hairline);
    padding-bottom: .6rem;
}
.pn-2uz9a span { font-weight: 700; letter-spacing: .01em; }
.pn-7vv3d7 {
    color: var(--theme-color);
    font-weight: 600;
    transition: opacity .15s ease;
}
.pn-7vv3d7:hover { opacity: .75; }
.pn-ymllhs { transition: transform .3s ease; }
.ct-t2tn0:hover .pn-ymllhs { transform: scale(1.03); }

/* ---------- Header ---------- */
.pn-51dy {
    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);
}
.bx-kyn0t { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

.sc-lflee .md-3ysn8 a {
    transition: color .15s ease, border-color .15s ease;
    border-bottom: 2px solid transparent;
}
.sc-lflee .md-3ysn8 a:hover { color: var(--theme-color); }
.pn-p5t6ai, .gr-dv1b {
    color: var(--theme-color) !important;
    border-bottom-color: var(--theme-color);
}

/* ---------- Menu kategori ---------- */
.el-h070 a {
    border-radius: 10px;
    transition: background-color .18s ease, transform .18s ease;
}
.el-h070 a:hover {
    background-color: rgba(239,68,68, .10);
    transform: translateY(-2px);
}
.el-h070 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.                          */
.fx-ak2t8z {
    background-color: var(--surface-2) !important;
    background-image: linear-gradient(90deg, rgba(239,68,68, .20), rgba(239,68,68, .06));
    border: 1px solid rgba(239,68,68, .22);
    border-radius: 10px;
    color: #fff;
    overflow: hidden;
}
.fx-ak2t8z:before {
    background: linear-gradient(90deg, var(--surface-2) 0, rgba(0,0,0,0)) !important;
}
.fx-ak2t8z:after {
    background: linear-gradient(270deg, var(--surface-2) 0, rgba(0,0,0,0)) !important;
}
.ly-qbcjhc marquee { color: #fff; }
.ly-qbcjhc i { color: var(--theme-color); }

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

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

/* ---------- Carousel ---------- */
.bx-cql7i {
    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;
}
.bx-cql7i:hover { background-color: rgba(239,68,68, .18); }
.pn-eiijdt { opacity: .3; pointer-events: none; }

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

/* ---------- Titik navigasi banner ---------- */
.sc-h6k2l { text-align: center; padding: .5rem 0; }
.sc-h6k2l li { display: inline-block; margin: 0 4px; }
.sc-h6k2l 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-h6k2l li.sc-nenri button {
    width: 22px; border-radius: 4px;
    background: var(--theme-color);
}
.ly-cudau { border-radius: var(--radius); overflow: hidden; }
.fx-wkij img.el-uvoo2 { width: 100%; height: auto; display: block; }

/* ---------- Drawer ---------- */
.gr-rnp6 {
    background-color: var(--surface-2);
    border-left: 1px solid var(--hairline);
}
.ly-ic0osg a { border-radius: 8px; }
.ly-ic0osg a:hover { background-color: rgba(239,68,68, .12); }

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

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

.bx-9hvgw section.fx-7owdl article { line-height: 1.75; }
.bx-9hvgw section.fx-7owdl article h2 {
    font-size: 1.15rem;
    margin: 1.2rem 0 .5rem;
    color: #fff;
}
.bx-9hvgw section.fx-7owdl article h3 {
    font-size: 1rem;
    margin: 1rem 0 .4rem;
    color: var(--theme-color);
}
.bx-9hvgw section.fx-7owdl article a {
    color: var(--theme-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bx-9hvgw section.fx-7owdl 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 ---------- */
.ct-z1opjr ul li,
.ui-hsy738 ul li a {
    transition: transform .18s ease, filter .18s ease;
}
.ct-z1opjr ul li:hover,
.ui-hsy738 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%. */
.bx-mhkdk7 {
    width: 100% !important;
    max-width: 100vw;
    left: 0 !important;
    right: 0 !important;
    padding: 16px !important;
    overflow-x: hidden;
}
.bx-mhkdk7, .bx-mhkdk7 * { box-sizing: border-box; }

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

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

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

.bx-akvc {
    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;
}
.bx-akvc:hover {
    background: rgba(239,68,68, .18);
    border-color: var(--theme-color);
}

@media (max-width: 380px) {
    .bx-mhkdk7 { padding: 10px !important; }
    .sc-7gej2 h2 { font-size: 14px !important; }
    .sc-7gej2 [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,
.ui-xk46x {
    position: relative;
    background-color: var(--surface-3);
    border-radius: 10px;
    overflow: hidden;
}
.pn-4p80 {
    z-index: 0;
    background-color: var(--surface-3) !important;
}
.pn-4p80:before {
    background: linear-gradient(90deg,
        transparent 0, rgba(239,68,68, .10) 50%, transparent) !important;
}
.fx-34sk {
    z-index: 1;
    background-color: var(--surface-3) !important;
}
/* Gambar asli selalu di atas skeleton */
.ui-xk46x 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 */
.ui-xk46x.is-loaded .pn-4p80,
.ui-xk46x.is-loaded .fx-34sk { display: none; }

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

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

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

.el-bzez {
    width: 100% !important;
    max-width: 100vw;
}

.ly-cudau, .el-rgudlg { overflow: hidden; }
.md-nomfp, .sc-rplkzh { overflow: hidden; }
.el-vjd2o { 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(239,68,68, .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;
    }
}