@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, #08060100 0%, #050400 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 obsidian with gold trim */
            .mobile-banner-buttons .mob-login {
                background: linear-gradient(160deg, #13100a 0%, #1c1607 60%, #0d0b05 100%);
                color: #d4bf8e;
                border: 1.5px solid #aa9972;
                box-shadow:
                    0 2px 10px rgba(170, 153, 114, 0.22),
                    inset 0 1px 0 rgba(212, 191, 142, 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(212, 191, 142, 0.08), transparent);
                transform: skewX(-20deg);
            }

            /* DAFTAR — molten gold gradient CTA */
            .mobile-banner-buttons .mob-register {
                background: linear-gradient(135deg,
                        #5c3d00 0%,
                        #b8810e 20%,
                        #e8c050 45%,
                        #d4a820 65%,
                        #8a5e00 100%);
                color: #1a0c00;
                border: 1.5px solid #e8c050;
                box-shadow:
                    0 4px 18px rgba(212, 160, 30, 0.50),
                    inset 0 1px 0 rgba(255, 240, 160, 0.45);
                text-shadow: 0 1px 2px rgba(255, 210, 60, 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(255, 245, 200, 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(255, 180, 0, 0.06);
            border-left: 4px solid #ff8c00;
            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, #c45200 0%, #ee6700 50%, #ffac00 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: #ffc870;
            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(255, 180, 0, 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;
        }