/**** begin custom colors ****/
:root {
    --color-1: #2f2f2f;
    --color-2: #111111;
    --color-3: #2b2b2b;
    --color-4: #001233;
    --color-5: #ffcf00;
    --color-6: #ffc300;
    --color-7: #ffbb30;
    --color-8: #ffc300;
    --color-9: #f5f5f5;
	--color-10: #ff8300;
	--color-11: #000000;

    --gradient-1: linear-gradient(180deg, var(--color-6), var(--color-8), var(--color-10));
    --gradient-2: linear-gradient(to bottom, var(--color-5), var(--color-7) 40%, #ffa700 5%, var(--color-6) 100%);
    --gradient-3: linear-gradient(to bottom, var(--color-7), var(--color-8), var(--color-5), var(--color-7));
    --gradient-4: linear-gradient(to bottom, var(--color-1), var(--color-2), var(--color-11));
}
/**** endof custom colors ****/



/**** begin custom background colors ****/
.bg-color-2 { background-color: var(--color-2) !important; }
.bg-color-3 { background-color: var(--color-3) !important; }
.bg-color-4 { background-color: var(--color-4) !important; }
.bg-color-5 { background-color: var(--color-5) !important; }
.bg-color-6 { background-color: var(--color-6) !important; }
.bg-color-7 { background-color: var(--color-7) !important; }
.bg-color-8 { background-color: var(--color-8) !important; }
.bg-color-9 { background-color: var(--color-9) !important; }

.bg-black { background-color: #000000 !important; }

.bg-gradient-1 { background-image: var(--gradient-1) !important; }
.bg-gradient-2 { background-image: var(--gradient-2) !important; }
.bg-gradient-3 { background-image: var(--gradient-3) !important; }
.bg-gradient-4 { background-image: var(--gradient-4) !important; }
/**** endof custom background colors ****/



/**** begin custom button colors ****/
/**** endof custom button colors ****/



/**** begin custom text colors ****/
/**** endof custom text colors ****/



/**** begin custom rtp-slot colors ****/
.yellow{
    background-color: #ffc107;
}
.green{
    background-color: #28a745;
}
.red{
    background-color: #dc3545;
}
/**** endof custom rtp-slot colors ****/

@font-face {
    font-family: 'font-digits';
    src: url("../fonts/digits.otf");
}

/* Keadaan Normal dengan Shadow */
a.btn.btn-warning, 
.card-footer a.btn-warning.text-dark {
    color: #ffffff !important;
    background: linear-gradient(to bottom, #da1010 0%, #920202 100%) !important;
    border: 1px solid #ff0000 !important;
    
    /* Efek Bayangan Tombol (Outer Shadow) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    
    /* Efek Bayangan Teks agar tulisan putih lebih tajam */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    
    /* Tambahan agar ada dimensi di bagian atas (Glow tipis) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    
    transition: all 0.3s ease !important;
}

/* Keadaan Hover (Saat Kursor Menempel) */
a.btn.btn-warning:hover,
.card-footer a.btn-warning.text-dark:hover {
    color: #ffffff !important;
    /* Perbaikan Gradien Hitam agar lebih smooth */
    background: linear-gradient(to bottom, #444444 0%, #111111 100%) !important;
    border: 1px solid #333333 !important;
    
    /* Bayangan sedikit lebih gelap saat ditekan */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
    transform: translateY(1px); /* Efek tombol tertekan */
}
.card-footer, 
.result-wrapper .card-footer {
    display: block !important; /* Matikan flexbox agar tidak ciut ke tengah */
    width: 100% !important;
    padding: 10px !important;
    text-align: center;
}

/* 2. Matikan sistem Grid (col-4, col-6) agar tidak menyamping di desktop */
.card-footer .row, 
.result-wrapper .row.no-gutters {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 3. Paksa setiap kolom pembungkus tombol menjadi lebar 100% mentok */
.card-footer [class*="col-"], 
.result-wrapper .card-footer [class*="col-"] {
    display: block !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important; /* Jarak antar tombol ke bawah */
}

/* 4. Desain Tombol Merah agar Panjang Sesuai Keinginan (Zoom 200% Style) */
.card-footer a.btn, 
.result-wrapper .card-footer a.btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important; /* Tombol harus 100% dari kolomnya */
    min-width: 100% !important;
    padding: 2.5px 5px !important; /* Sedikit lebih tebal agar elegan */
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    text-transform: uppercase;
}

/* --- STYLING HERO BANNER SECTION --- */
.hero-banner-section .border-kuning {
    border: 2px solid #f1c40f !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.3s ease;
}

.hero-banner-section .border-kuning:hover {
    transform: scale(1.01);
}

.main-banner-wrapper img {
    width: 100%;
    height: 400px; /* Sesuaikan tinggi banner utama */
    object-fit: cover;
}

.side-banner-wrapper {
    display: flex;
    flex-direction: column;
    height: 400px; /* Harus sama dengan tinggi banner utama */
}

.side-banner-wrapper .promo-item {
    flex: 1;
    display: flex;
}

.side-banner-wrapper .promo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Penyesuaian Mobile */
@media (max-width: 991px) {
    .main-banner-wrapper img {
        height: auto;
    }
}