/* Variabel CSS untuk pengaturan font, warna, dan lainnya */
:root {
    --smaller-font: 0.7rem; /* Ukuran font terkecil */
    --small-font: 0.87rem; /* Ukuran font kecil */
    --normal-font: 1rem; /* Ukuran font normal */
    --medium-font: 1.1rem; /* Ukuran font sedang */
    --large-font: 1.7rem; /* Ukuran font besar */
    --x-large-font: 2rem; /* Ukuran font sangat besar */
    --bg-color: #131313; /* Warna latar belakang utama */
    --text-first: #F5F5F5; /* Warna teks utama */
    --text-second: #0a0a0a; /* Warna teks sekunder (hitam) */
    --first-color: #fdef02; /* Warna aksen pertama */
    --second-color: #fab92d; /* Warna aksen kedua */
    --third-color: #e9ab00; /* Warna aksen ketiga */
    --fourth-color: #e9be00; /* Warna aksen keempat */
    --fifth-color: #fab92d; /* Warna aksen kelima */
    --g1: #fab92d; /* Warna gradien pertama */
    --g2: #e9ab00; /* Warna gradien kedua */
}

/* Gaya untuk body */
body {
    background: var(--bg-color); /* Latar belakang menggunakan warna utama */
    color: var(--text-first); /* Warna teks utama */
}

/* Gaya untuk logo */
.logo img {
    width: 19rem; /* Lebar logo */
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.9rem; /* Jarak atas */
    margin-bottom: 1rem; /* Jarak bawah */
    filter: none; /* Pastikan gambar tidak ada efek abu-abu */
}

/* Gaya untuk kartu RTP */
.rtp-card {
    background: #440D4C; /* Latar belakang kartu */
    padding: 0.7rem; /* Jarak dalam */
    text-align: center; /* Teks rata tengah */
    width: 24rem; /* Lebar kartu */
    max-width: 100%; /* Lebar maksimum */
    height: 100%; /* Tinggi penuh */
    align-items: center; /* Penyelarasan item */
    border-radius: 5px; /* Sudut membulat */
    margin-bottom: 0.7rem; /* Jarak bawah */
    position: relative;
    z-index: 1; /* Lapisan z-index */
    color: var(--text-first); /* Warna teks di kartu */
}

/* Gaya untuk gambar dalam kartu RTP */
.rtp-card-img {
    max-width: 100%; /* Lebar maksimum */
    width: 29rem; /* Lebar gambar */
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px; /* Sudut membulat */
    filter: none; /* Pastikan gambar tidak ada efek abu-abu */
}

/* Gaya untuk wadah gambar RTP */
.place-img-rtp {
    width: 100%; /* Lebar penuh */
    padding: 0.5rem; /* Jarak dalam */
    position: relative;
    overflow: hidden; /* Menyembunyikan konten berlebih */
    z-index: 1; /* Lapisan z-index */
    display: flex;
    justify-items: center; /* Penyelarasan item */
    border-radius: 5px; /* Sudut membulat */
    box-shadow: 1px 0px 4px 2px #131313 inset; /* Bayangan dalam */
    color: var(--text-first); /* Warna teks di wadah */
}

/* Efek hover untuk wadah gambar RTP */
.place-img-rtp:hover {
    cursor: pointer; /* Kursor pointer saat hover */
}

/* Gaya untuk tombol play */
.btn-play {
    position: absolute;
    top: 50%; /* Posisi vertikal tengah */
    left: 50%; /* Posisi horizontal tengah */
    transform: translate(-50%, -50%); /* Posisi tengah */
    z-index: 10; /* Lapisan z-index */
    border: none; /* Tanpa border */
    border-radius: 5px; /* Sudut membulat */
    padding: 0.3rem; /* Jarak dalam */
    width: 12rem; /* Lebar tombol */
    font-size: 0.6rem; /* Ukuran font */
    font-weight: bold; /* Teks tebal */
    text-transform: capitalize; /* Kapitalisasi teks */
    max-width: 70%; /* Lebar maksimum */
    border: 2px solid var(--first-color); /* Border dengan warna aksen */
    background: linear-gradient(0deg, var(--g1) 0%, var(--g2) 100%); /* Gradien latar belakang */
    color: var(--text-first); /* Warna teks */
}

/* Efek hover untuk tombol play */
.btn-play:hover {
    background: linear-gradient(0deg, var(--g2) 0%, var(--g1) 100%); /* Gradien terbalik saat hover */
}

/* Gaya untuk wadah pola */
.pola-wrapper {
    background: var(--text-second); /* Latar belakang tetap hitam (var(--text-second) = #0a0a0a) */
    padding: 0.9rem; /* Jarak dalam */
    width: 14rem; /* Lebar wadah */
    max-width: 100%; /* Lebar maksimum */
    border-radius: 5px; /* Sudut membulat */
    position: relative;
    color: var(--text-first); /* Warna teks di wadah pola */
}

/* Gaya untuk judul dalam wadah pola */
.pola-wrapper h4 {
    font-size: 0.9rem; /* Ukuran font */
    color: var(--text-first); /* Warna teks judul */
}

/* Gaya untuk subjudul dalam wadah pola */
.pola-wrapper h5 {
    font-size: 0.7rem; /* Ukuran font */
    color: var(--text-first); /* Warna teks subjudul */
}

/* Warna ikon dalam wadah pola */
.pola-wrapper h4 i, .pola-wrapper h5 i {
    color: var(--first-color); /* Warna ikon */
}

/* Gaya untuk wadah jam */
.jam-wrapper {
    background: #131313; /* Latar belakang */
    border-radius: 50%; /* Bentuk lingkaran */
    padding: 0.6rem; /* Jarak dalam */
    color: var(--text-first); /* Warna teks di jam */
}

/* Gaya untuk tabel pola */
.table-pola {
    max-width: 100%; /* Lebar maksimum */
    width: 9rem; /* Lebar tabel */
}

/* Gaya untuk sel tabel pola */
.table-pola tr td {
    text-align: center; /* Teks rata tengah */
    font-size: 0.7rem; /* Ukuran font */
    color: var(--text-first); /* Warna teks di tabel */
}

/* Gaya untuk badge top game dan hot game */
.top-game, .hot-game {
    background-repeat: no-repeat !important; /* Tidak mengulang gambar */
    position: absolute;
    width: 3rem; /* Lebar badge */
    top: 0rem; /* Posisi atas */
    z-index: 2; /* Lapisan z-index */
    height: 2.9rem; /* Tinggi badge */
    left: 0.4rem; /* Posisi kiri */
}

/* Gambar untuk badge top game */
.top-game {
    background: url('../images/top.gif'); /* Gambar badge */
    filter: none; /* Pastikan gambar tidak ada efek abu-abu */
}

/* Gambar untuk badge hot game */
.hot-game {
    background: url('../images/hot.gif'); /* Gambar badge */
    filter: none; /* Pastikan gambar tidak ada efek abu-abu */
}

/* Gaya untuk ikon penyedia */
.icon-providers {
    position: absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 2rem; /* Lebar ikon */
    top: 0.5rem; /* Posisi atas */
    right: 0.5rem; /* Posisi kanan */
}

/* Gaya untuk gambar ikon penyedia */
.icon-providers img {
    width: 1.7rem; /* Lebar gambar */
    filter: none; /* Pastikan gambar tidak ada efek abu-abu */
}

/* Gaya untuk slider dan swiper */
.slider, .swiper {
    width: 50rem; /* Lebar slider */
    max-width: 100%; /* Lebar maksimum */
}

/* Jarak dalam untuk slider */
.slider {
    padding: 1rem; /* Jarak dalam */
}

/* Gaya untuk gambar dalam slider */
.slider-img {
    width: 40rem; /* Lebar gambar */
    max-width: 100%; /* Lebar maksimum */
    display: block;
    margin-left: auto;
    margin-right: auto;
    background: #000000; /* Latar belakang hitam */
    filter: none; /* Pastikan gambar tidak ada efek abu-abu */
}

/* Gaya untuk wadah slider */
.slider-wrapper {
    background: linear-gradient(0deg, var(--text-second) 0%, var(--text-second) 100%); /* Latar belakang gradien */
    height: 100%; /* Tinggi penuh */
    border-bottom: 1px dashed var(--first-color); /* Garis putus-putus bawah */
    color: var(--text-first); /* Warna teks di slider */
}

/* Gaya untuk teks berjalan */
.running-text {
    background: #440D4C; /* Latar belakang */
    font-weight: 500; /* Ketebalan font */
    text-transform: uppercase; /* Teks huruf besar */
    font-size: 1rem; /* Ukuran font */
    color: var(--text-first); /* Warna teks */
    padding: 0.1rem; /* Jarak dalam */
}

/* Gaya untuk wadah ikon penyedia */
.icon-prov {
    background: #440D4C; /* Latar belakang */
    display: flex;
    position: relative;
    overflow: auto !important; /* Mengizinkan scroll */
    color: var(--text-first); /* Warna teks di wadah ikon */
}

/* Gaya untuk kartu ikon */
.icon-card-bg {
    cursor: pointer; /* Kursor pointer */
    padding: 0.1rem !important; /* Jarak dalam */
    color: var(--text-first); /* Warna teks */
    text-decoration: none; /* Tanpa dekorasi teks */
}

/* Gaya untuk teks dalam kartu ikon */
.icon-card-bg p {
    font-size: 0.73rem; /* Ukuran font */
    font-weight: 700; /* Ketebalan font */
    color: var(--text-first); /* Warna teks */
    text-align: center; /* Teks rata tengah */
    white-space: nowrap; /* Teks tidak membungkus */
    text-transform: uppercase; /* Teks huruf besar */
}

/* Gaya untuk gambar penyedia */
.img-prov {
    display: block;
    margin-right: auto;
    margin-left: auto;
    filter: none; /* Pastikan gambar tidak ada efek abu-abu */
}

/* Gaya untuk item penyedia */
.item-prov {
    padding: 0 0rem; /* Jarak dalam */
}

/* Gaya untuk tombol kredit */
.btn-credit {
    background: #FFA500; /* Latar belakang diubah ke jingga */
    padding: 0.6rem; /* Jarak dalam */
    color: var(--text-first); /* Warna teks */
    border: none; /* Tanpa border */
    font-weight: bold; /* Teks tebal */
    border-right: 1px solid var(--first-color); /* Border kanan */
}

/* Efek hover untuk tombol kredit */
.btn-credit:hover {
    background: #FFA500; /* Latar belakang tetap jingga */
}

/* Gaya untuk tombol login */
.btn-login {
    background: #FFA500; /* Latar belakang diubah ke jingga */
    padding: 0.6rem; /* Jarak dalam */
    color: var(--text-first); /* Warna teks */
    border: none; /* Tanpa border */
    font-weight: bold; /* Teks tebal */
    border-right: 1px solid var(--first-color); /* Border kanan */
}

/* Efek hover untuk tombol login */
.btn-login:hover {
    background: #FFA500; /* Latar belakang tetap jingga */
}

/* Gaya untuk navigasi bawah */
.nav-bottom {
    position: fixed; /* Posisi tetap di bawah */
    bottom: 0;
    display: flex;
    z-index: 11; /* Lapisan z-index */
    overflow: hidden; /* Menyembunyikan konten berlebih */
    width: 100%; /* Lebar penuh */
    border-top: 3px #ff3434; /* Border atas merah */
    color: var(--text-first); /* Warna teks di navigasi */
}

/* Gaya untuk item navigasi bawah */
.item-nav-bottom {
    background: #440D4C; /* Latar belakang */
    color: var(--text-first); /* Warna teks */
    font-weight: bold; /* Teks tebal */
    text-align: center; /* Teks rata tengah */
    font-size: 0.8rem; /* Ukuran font */
    padding: 0.3rem; /* Jarak dalam */
}

/* Efek hover untuk item navigasi bawah */
.item-nav-bottom:hover {
    background: #f7595a; /* Latar belakang saat hover */
    cursor: pointer; /* Kursor pointer */
}

/* Gaya untuk teks dalam item navigasi bawah */
.item-nav-bottom p {
    margin: 0;
    padding: 0;
    margin-bottom: 0;
    color: var(--text-first); /* Warna teks */
}

/* Gaya untuk tombol ke atas */
.btn-up {
    display: none; /* Tersembunyi secara default */
    position: fixed; /* Posisi tetap */
    bottom: 3.8rem; /* Posisi bawah */
    right: 0; /* Posisi kanan */
    z-index: 99; /* Lapisan z-index */
    font-size: 0.9rem; /* Ukuran font */
    color: var(--text-first); /* Warna teks */
}

/* Gaya untuk bar persentase */
.percent {
    height: 19px; /* Tinggi bar */
    margin-top: 10px !important; /* Jarak atas */
    display: flex;
    overflow: hidden; /* Menyembunyikan konten berlebih */
    font-size: 0.75rem; /* Ukuran font */
    background-color: #e9ecef; /* Latar belakang */
    position: relative;
    z-index: 1; /* Lapisan z-index */
    border-radius: 5px; /* Sudut membulat */
    width: 100%; /* Lebar penuh */
    margin: 0 auto;
    color: var(--text-first); /* Warna teks di bar */
}

/* Gaya untuk teks dalam bar persentase */
.percent p {
    z-index: 15; /* Lapisan z-index */
    position: absolute;
    text-align: center; /* Teks rata tengah */
    width: 100%; /* Lebar penuh */
    font-size: 13px; /* Ukuran font */
    top: -15px; /* Posisi atas */
    font-weight: bold; /* Teks tebal */
    transform: translateY(14px); /* Transformasi vertikal */
    color: black; /* Warna teks (diubah ke hitam untuk kontras) */
}

/* Gaya untuk bar persentase */
.percent-bar {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); /* Pola garis */
    background-size: 1rem 1rem; /* Ukuran pola */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Penyelarasan vertikal */
    overflow: hidden; /* Menyembunyikan konten berlebih */
    color: #fff; /* Warna teks */
    text-align: center; /* Teks rata tengah */
    white-space: nowrap; /* Teks tidak membungkus */
    transition: width 0.6s ease; /* Transisi lebar */
    animation: progress-bar-stripes 1s linear infinite; /* Animasi garis */
    z-index: 10; /* Lapisan z-index */
}

/* Warna untuk status baik */
.good {
    background-color: #ffc107; /* Warna kuning */
}

/* Warna untuk status sangat baik */
.great {
    background-color: #28a745; /* Warna hijau */
}

/* Warna untuk status buruk */
.bad {
    background-color: #dc3545; /* Warna merah */
}

/* Gaya untuk konten beranda */
.content-home {
    padding: 1rem; /* Jarak dalam */
    margin-bottom: 4rem; /* Jarak bawah */
    background: var(--bg-color); /* Latar belakang diubah ke warna gelap */
    color: var(--text-second); /* Warna teks */
}

/* Gaya untuk kontainer pada layar besar */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1100px !important; /* Lebar maksimum kontainer */
    }
}