@font-face {
    font-family: 'digital_sans_ef_medium';
    font-display: swap;
    src: url('./fonts/digital_sans_ef_medium.woff2') format('woff2'),
        url('./fonts/digital_sans_ef_medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gilroybold';
    font-display: swap;
    src: url('./fonts/Gilroy-Bold.woff2') format('woff2'),
        url('./fonts/Gilroy-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open24DisplaySt';
    font-display: swap;
    src: url('./fonts/Open24DisplaySt.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Glyphicons Halflings';
    font-display: swap;
    src: url('./fonts/glyphicons-halflings-regular.woff') format('woff');
}

body {
    font-family: 'digital_sans_ef_medium', Arial, Helvetica, sans-serif;
    font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: inherit;
}

.home-progressive-jackpot .jackpot-play-section .jackpot-play-text {
    font-family: 'gilroybold';
}

.home-progressive-jackpot .jackpot-container {
    font-family: 'Open24DisplaySt';
}

.glyphicon {
    font-family: 'Glyphicons Halflings';
}

@media (max-width: 767px) {
    .site-header .logo {
        width: auto !important;
        display: inline-block !important;
    }

    .site-header .logo img {
        width: 100px !important;
        max-width: 100px !important;
        height: auto !important;
    }

    .site-header .col-sm-3 {
        width: auto !important;
        text-align: center;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .site-header .col-sm-9 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .site-header {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .site-header .row {
        margin-bottom: 0 !important;
    }

    /* Sembunyikan tombol di topbar pada mobile */
    .topbar-right-container .login-panel {
        display: none !important;
    }

    /* Sembunyikan site-header (logo besar + menu) di mobile */
    .site-header {
        display: none !important;
    }

    /* Logo di topbar kanan - hanya mobile */
    .mob-topbar-logo {
        display: flex !important;
        align-items: center;
        margin-left: auto;
        padding: 0 4px;
    }

    .mob-topbar-logo img {
        height: 32px;
        width: auto;
        max-width: 110px;
        object-fit: contain;
    }

    /* Rapikan topbar agar pas dengan banner */
    .topbar-container {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .topbar-container .row {
        margin: 0 !important;
    }

    .topbar-left-container {
        flex: 1;
    }

    .topbar-right-container {
        display: flex !important;
        align-items: center;
        gap: 4px;
    }
}

/* Jackpot section responsive mobile */
@media (max-width: 767px) {
    .home-progressive-jackpot {
        padding: 4px;
        border-radius: 14px;
    }

    .home-progressive-jackpot .outer-container {
        padding: 4px;
        border-radius: 40px;
    }

    .home-progressive-jackpot .inner-container {
        padding: 4px;
        border-radius: 40px;
    }

    .home-progressive-jackpot .border-container {
        gap: 8px !important;
        padding: 4px 6px;
        border-radius: 40px;
    }

    .home-progressive-jackpot .jackpot-container {
        font-size: 18px !important;
        letter-spacing: 1px !important;
        padding: 4px 8px !important;
        border-radius: 30px;
    }

    .home-progressive-jackpot .jackpot-inner-container {
        padding: 3px 6px;
        border-radius: 22px;
    }

    .home-progressive-jackpot .jackpot-border-container {
        padding-bottom: 3px;
        border-radius: 18px;
        line-height: 26px;
    }

    .home-progressive-jackpot .jackpot-currency {
        margin-right: 4px !important;
        font-size: 14px;
    }

    .home-progressive-jackpot .jackpot-play-section {
        margin-left: 4px !important;
    }

    .home-progressive-jackpot .jackpot-play-section img {
        width: 46px !important;
        height: auto !important;
    }

    .home-progressive-jackpot .jackpot-play-section .jackpot-play-text {
        font-size: 12px !important;
    }
}

/* Tombol mobile di bawah banner */
.mobile-banner-buttons {
    display: none;
}

@media (max-width: 767px) {
    .mobile-banner-buttons {
        display: flex;
        gap: 10px;
        padding: 10px 12px;
        background: linear-gradient(to bottom, #06081000 0%, #040610 100%);
    }

    .mobile-banner-buttons a {
        flex: 1;
        text-align: center;
        padding: 14px 0;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 2.5px;
        text-decoration: none;
        border-radius: 8px;
        text-transform: uppercase;
        position: relative;
        overflow: hidden;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .mobile-banner-buttons a:active {
        transform: scale(0.97);
    }

    /* MASUK — dark navy with sapphire trim */
    .mobile-banner-buttons .mob-login {
        background: linear-gradient(160deg, #0a0e1a 0%, #0c1225 60%, #060a14 100%);
        color: #8ec5ff;
        border: 1.5px solid #3d85cc;
        box-shadow:
            0 2px 10px rgba(61, 133, 204, 0.22),
            inset 0 1px 0 rgba(142, 197, 255, 0.12);
    }

    .mobile-banner-buttons .mob-login::after {
        content: '';
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(142, 197, 255, 0.08), transparent);
        transform: skewX(-20deg);
    }

    /* DAFTAR — sapphire blue gradient CTA */
    .mobile-banner-buttons .mob-register {
        background: linear-gradient(135deg,
                #0c2a4e 0%,
                #1c5a96 20%,
                #4f94db 45%,
                #3d85cc 65%,
                #143e70 100%);
        color: #fff;
        border: 1.5px solid #6aadef;
        box-shadow:
            0 4px 18px rgba(61, 133, 204, 0.50),
            inset 0 1px 0 rgba(142, 197, 255, 0.45);
        text-shadow: 0 1px 2px rgba(30, 90, 150, 0.25);
    }

    .mobile-banner-buttons .mob-register::after {
        content: '';
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(142, 197, 255, 0.25), transparent);
        transform: skewX(-20deg);
        animation: btn-shimmer 2.4s ease-in-out infinite;
    }

    @keyframes btn-shimmer {
        0% {
            left: -60%;
        }

        60% {
            left: 120%;
        }

        100% {
            left: 120%;
        }
    }
}

/* Logo mobile hanya tampil di mobile */
.mob-topbar-logo {
    display: none;
}

/* ── Artikel: atomic-box, CTA, FAQ ── */
.k303-atomic-box {
    background: rgba(30, 90, 200, 0.06);
    border-left: 4px solid #3d85cc;
    border-radius: 6px;
    padding: 14px 18px;
    margin: 14px 0 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #eee;
}

.k303-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0;
}

.k303-cta-btn {
    flex: 1;
    min-width: 180px;
    display: inline-block;
    text-align: center;
    padding: 11px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.3px;
}

.k303-cta-primary {
    background: linear-gradient(135deg, #0c2a4e 0%, #1c5a96 50%, #4f94db 100%);
    color: #fff;
}

.k303-cta-secondary {
    background: #1e1e1e;
    color: #ffffff;
    border: 1px solid #777;
}

.k303-faq {
    margin: 10px 0;
}

.k303-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
}

.k303-faq-item:last-child {
    border-bottom: none;
}

.k303-faq-question {
    font-weight: 700;
    color: #7bb8f7;
    font-size: 14px;
    margin-bottom: 5px;
}

.k303-faq-answer {
    font-size: 13px;
    color: #e0e0e0;
    line-height: 1.6;
}

/* Fix ukuran logo telegram-banner-container */
.telegram-banner-container img {
    max-width: 280px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.telegram-banner-container a {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

/* Fix logo di popular-games section - responsive */
.popular-games [data-section="left"]>a img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {

    /* Stack popular-games vertically on mobile */
    .popular-games {
        flex-direction: column !important;
    }

    /* Left section: horizontal strip with title + ticker side by side */
    .popular-games [data-section="left"] {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        margin-right: 0 !important;
        gap: 0 !important;
        padding: 6px 8px !important;
    }

    .popular-games [data-section="left"] .section-title {
        width: 100% !important;
        height: 38px !important;
        font-size: 15px !important;
        margin-bottom: 6px;
    }

    .popular-games [data-section="left"] .jackpot-winners {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Hide KEPO88 logo in left sidebar on mobile - saves space */
    .popular-games [data-section="left"]>a {
        display: none !important;
    }

    /* Right section: full width */
    .popular-games [data-section="right"] {
        width: 100% !important;
    }

    /* Provider tabs: horizontal scroll */
    .popular-games #popular_providers {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .popular-games #popular_providers::-webkit-scrollbar {
        display: none;
    }

    .popular-games #popular_providers>li {
        flex-shrink: 0 !important;
    }

    .popular-games #popular_providers>li>a img {
        width: 70px !important;
        height: 30px !important;
        object-fit: contain;
    }

    /* Winners ticker: compact height */
    .popular-games .jackpot-winners .winners-ticker-container {
        height: 24px !important;
    }

    .popular-games [data-section="left"]>a img {
        max-width: 120px;
    }

    .telegram-banner-container img {
        max-width: 200px;
    }
}

/* ── Kategori mobile di bawah marquee ── */
.mob-cat-bar {
    display: none;
}

@media (max-width: 767px) {

    /* Sembunyikan menu-slide di header pada mobile */
    .menu-slide {
        display: none !important;
    }

    .mob-cat-bar {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: #0d0d0d;
        padding: 8px 4px;
        gap: 4px;
        scrollbar-width: none;
        border-bottom: 1px solid rgba(30, 133, 204, 0.15);
    }

    .mob-cat-bar::-webkit-scrollbar {
        display: none;
    }

    .mob-cat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-width: 60px;
        padding: 4px 6px;
        text-decoration: none;
        color: #ffffff;
        font-size: 10px;
        text-align: center;
        position: relative;
        gap: 4px;
        flex-shrink: 0;
    }

    .mob-cat-item span {
        line-height: 1.2;
        white-space: nowrap;
    }

    .mob-cat-icon {
        display: block;
        width: 28px;
        height: 28px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0;
    }

    .mob-cat-hot {
        position: absolute;
        top: 0;
        right: 4px;
        background: #e63900;
        color: #fff;
        font-size: 8px;
        font-weight: 700;
        padding: 1px 3px;
        border-radius: 3px;
        line-height: 1.3;
        letter-spacing: 0.3px;
    }
}

/* Footer accessibility: contrast & touch targets */
.site-footer .footer-links a {
    color: #d0d0d0 !important;
    padding: 8px 12px;
    display: inline-block;
    min-height: 44px;
    line-height: 28px;
}

.site-footer .footer-links a:hover {
    color: #ffffff !important;
}

.site-footer .copyright {
    color: #c0c0c0 !important;
}

.site-footer .footer-section-title {
    color: #e0e0e0 !important;
}

.site-footer .site-info p,
.site-footer .site-info-description p {
    color: #c0c0c0 !important;
}

.site-footer .social-media-list a {
    display: inline-block;
    padding: 6px;
    min-width: 44px;
    min-height: 44px;
}

/* ADR animation overlay */
.adr-gif {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.adr-full {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
    filter: drop-shadow(0 0 35px rgba(255, 255, 255, 0.9)) brightness(1.2) contrast(1.2);
    transform: translateY(-50%);
    transition: all 2.8s ease-in-out;
}

.adr-kiri {
    left: -100%;
    background-image: url("#");
    background-position: center;
}

.adr-kanan {
    right: -30%;
    background-image: url("#");
    background-position: center right;
    transform: translateY(-60%) rotateY(180deg);
}

.angpao-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}