/* ==========================================================================
   responsive.css  —  lapisan responsive (dimuat PALING AKHIR setelah theme)
   Breakpoint:  ≤1199  |  ≤991 (tablet, menu hamburger)  |  ≤767 (mobile)  |  ≤479 (HP kecil)
   ========================================================================== */

/* ---------- Dasar / global ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    overflow-x: hidden;
    overflow-x: clip;           /* cegah scroll horizontal tanpa merusak position:sticky */
    padding-bottom: env(safe-area-inset-bottom);
    min-width: 0;
}
img, picture, svg, video, iframe { max-width: 100%; }
.container { width: 100%; max-width: 1170px; }     /* gantikan lebar tetap 750/970/1170 */
.container .row { margin-left: -15px; margin-right: -15px; }
table { max-width: 100%; }
.table-responsive, .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tombol hamburger: tersembunyi di desktop */
.mobile-menu-toggle { display: none; }

/* ---------- Modal (semua ukuran) ---------- */
.modal-dialog,
.login-modal .modal-dialog,
.telegram-login-modal .modal-dialog { max-width: calc(100% - 20px); }
.login-modal .modal-dialog,
.telegram-login-modal .modal-dialog { width: 483px; margin-left: auto; margin-right: auto; }
.modal { -webkit-overflow-scrolling: touch; }
.otp-popup .otp-popup-content { width: 100%; max-width: 500px; box-sizing: border-box; }
.user-info .vendor-balances-container { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* ==========================================================================
   ≤ 1199px  (laptop kecil)
   ========================================================================== */
@media (max-width: 1199px) {
    .top-menu > li { min-width: 76px; }            /* biar slider chevron tetap berfungsi */
    .top-menu > li > a { font-size: 11px; }
    .popular-games [data-section="right"] { width: 420px; }
    .home-progressive-jackpot .jackpot-container { font-size: 34px; letter-spacing: 3px; }
}

/* ==========================================================================
   ≤ 991px  (tablet & di bawahnya)  — header jadi hamburger, layout menumpuk
   ========================================================================== */
@media (max-width: 991px) {

    /* ----- Header sticky + hamburger ----- */
    .site-header { position: sticky; top: 0; z-index: 1000; }
    .site-header .container { padding-left: 12px; padding-right: 12px; }
    .site-header .row {
        display: flex; flex-wrap: wrap; align-items: center;
        margin-left: 0; margin-right: 0;
    }
    .site-header .row::before,
    .site-header .row::after { display: none; }
    .site-header .row > .col-sm-3 {
        float: none; width: 200px; max-width: 58%; flex: 0 1 200px; padding: 0;
    }
    .site-header .row > .col-sm-9 {
        float: none; width: 100%; flex: 0 0 100%; padding: 0; display: none;
    }
    .site-header.nav-open .row > .col-sm-9 { display: block; }

    .mobile-menu-toggle {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; margin-left: auto; padding: 10px;
        background: transparent; border: 1px solid rgba(255,255,255,.25);
        border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .mobile-menu-toggle span {
        display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }
    .site-header.nav-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.nav-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
    .site-header.nav-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ----- Menu vertikal (akordeon) ----- */
    .menu-slide {
        display: block; overflow-x: hidden; overflow-y: auto;
        max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px);
        -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        border-top: 1px solid rgba(255,255,255,.12);
    }
    .menu-slide > i { display: none; }              /* chevron slider tak dipakai */
    .top-menu { flex-direction: column; flex-wrap: nowrap; overflow: visible; }
    .top-menu > li { flex: 0 0 auto; flex-basis: auto; width: 100%; min-width: 0; }
    .top-menu > li > a {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px; text-align: left; font-size: 13px;
    }
    .top-menu > li > a > img { margin: 0; height: 26px; width: 26px; flex: 0 0 auto; }
    .top-menu > li > a .floating-icon { position: static; height: 14px; width: auto; }
    .top-menu > li + li { border-top: 1px solid rgba(255,255,255,.08); }

    /* tanda panah untuk item yang punya submenu */
    .top-menu > li:has(> .game-list) > a::after {
        content: ""; margin-left: auto; width: 8px; height: 8px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg); transition: transform .2s ease;
    }
    .top-menu > li.open > a::after { transform: rotate(-135deg); }

    /* submenu: statis, buka-tutup via class .open (bukan hover) */
    .top-menu > li .game-list { display: none !important; }
    .top-menu > li.open > .game-list { display: flex !important; }
    .top-menu .game-list {
        position: static; border: 0; border-radius: 0; margin: 0;
        padding: 8px 6px 12px; background: rgba(3, 8, 40, .55);
        justify-content: flex-start;
    }
    .top-menu .game-list > li { flex-basis: 33.333%; max-width: 33.333%; padding: 0 6px; }
    .top-menu .game-list > li:hover > a { transform: none; }

    /* ----- Section "Video Slots Popular" menumpuk ----- */
    .popular-games { flex-direction: column; background-size: cover; }
    .popular-games [data-section="left"] { margin-right: 0; margin-bottom: 8px; }
    .popular-games [data-section="left"] .section-title { height: 44px; font-size: 16px; }
    .popular-games [data-section="right"] { width: 100%; min-width: 0; }
    .popular-games .animated-image { display: none; }

    /* ----- Game Populer: scroll horizontal ----- */
    .popular-game-title-container .container-content .game-list {
        -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    }
    .popular-game-title-container .container-content .game-list .games-group {
        width: calc((100% - 6px * 3) / 4.5); scroll-snap-align: start;
    }

    /* ----- Footer ----- */
    .site-info-container:not(:last-child) { padding-right: 15px; }
    .site-info-container:not(:last-child):after { display: none; }
    .site-info-container { margin-bottom: 15px; }
    .copyright { text-align: left; }
    .supported-browser-container { justify-content: flex-start; flex-wrap: wrap; }
    .footer-section-title { margin-top: 10px; }

    /* ----- Download APK menumpuk ----- */
    .download-apk { flex-direction: column; text-align: center; padding: 20px 0; }
    .download-apk > div { flex-basis: 100%; width: 100%; }
    .download-apk .h2 { font-size: 26px; }
}

/* ==========================================================================
   ≤ 767px  (mobile)
   ========================================================================== */
@media (max-width: 767px) {

    /* ----- Topbar ----- */
    .topbar-container { padding: 6px 0; }
    .topbar-container .container { padding-left: 12px; padding-right: 12px; }
    .topbar-container .row { flex-wrap: nowrap; justify-content: space-between; margin-left: 0; margin-right: 0; }
    .topbar-container .row::before,
    .topbar-container .row::after { display: none; }
    .topbar-left-container { width: auto; flex: 1 1 auto; min-width: 0; padding: 0; }
    .topbar-right-container { width: auto; flex: 0 0 auto; padding: 0; }
    .topbar-left-section { flex-wrap: wrap; gap: 4px; }
    .topbar-left-section .topbar-item + .topbar-item { margin-left: 0; padding-left: 0; border-left: 0; }
    .topbar-left-section .topbar-item a.telegram-btn { padding: 5px 8px; font-size: 11px; }
    .login-panel .login-button,
    .login-panel .register-button { padding: 6px 14px; font-size: 12px; }

    /* ----- Pengumuman ----- */
    .announcement-container { flex-wrap: wrap; gap: 6px; padding: 8px 12px; margin: 10px 0; }
    .announcement-container > [data-section="title"] { font-size: 13px; }
    .announcement-container > [data-section="announcements"] { width: 100%; order: 3; }
    .announcement-container > [data-section="date"] { font-size: 11px; margin-left: auto; }
    .announcement-container .announcement-list li { padding: 5px 8px; font-size: 12px; }

    /* ----- Jackpot ----- */
    .home-inner-container { margin-top: 10px; margin-bottom: 20px; gap: 10px; }
    .home-progressive-jackpot { border-radius: 20px; padding: 6px; }
    .home-progressive-jackpot .outer-container { padding: 6px; border-radius: 16px; }
    .home-progressive-jackpot .inner-container { padding: 6px; border-radius: 14px; }
    .home-progressive-jackpot .border-container {
        flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; border-width: 2px;
    }
    .home-progressive-jackpot .jackpot-play-section {
        margin-left: 0; flex-direction: row; align-items: center; gap: 8px;
    }
    .home-progressive-jackpot .jackpot-play-section img { width: 52px; }
    .home-progressive-jackpot .jackpot-play-section .jackpot-play-text { font-size: 22px; }
    .home-progressive-jackpot .jackpot-container {
        width: 100%; box-sizing: border-box; font-size: 24px; letter-spacing: 1px;
        border-radius: 12px; padding: 6px;
    }
    .home-progressive-jackpot .jackpot-inner-container { border-radius: 10px; padding: 6px; }
    .home-progressive-jackpot .jackpot-border-container {
        border-radius: 8px; line-height: 1.2; padding: 4px 6px 6px; flex-wrap: wrap;
    }

    /* ----- Judul section ----- */
    .popular-game-title-container .container-title span,
    .home-game-list-container .container-title span { padding: 5px 30px 5px 16px; font-size: 13px; }
    .popular-game-title-container .container-content,
    .home-game-list-container .container-content { padding: 8px; }
    .popular-game-title-container .container-content .game-list .games-group {
        width: calc((100% - 6px * 2) / 2.5);
    }
    .popular-game-title-container .container-content .game-list .game-item .game-name,
    .popular-game-title-container .container-content .game-list .game-item .provider-name { font-size: 11px; }

    /* ----- Tab provider (Video Slots Popular) ----- */
    .popular-games .nav-tabs { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; white-space: nowrap;
        -webkit-overflow-scrolling: touch; }
    .popular-games .nav-tabs > li { float: none; display: inline-block; }
    .popular-games .popular-game-list { padding: 0 6px; }
    .popular-games .popular-game-list .game-item { padding: 4px; }

    /* ----- Submenu 2 kolom ----- */
    .top-menu .game-list > li { flex-basis: 50%; max-width: 50%; }
    .top-menu .game-list > li > a[data-maintenance-status="true"]::after { font-size: 14px; }

    /* ----- Footer ----- */
    .site-footer { padding: 15px 0; }
    .footer-links > li { display: inline-block; margin-bottom: 4px; }
    .footer-links > li > a { font-size: 13px; }
    .site-description h3 { font-size: 18px; }
    .site-description p { font-size: 12px; }
    .hover-list { gap: 6px 4px; }
    .hover-list > li + li,
    .provider-section .hover-list > li + li { margin-left: 0; }
    .provider-section img, .site-footer img { max-width: 100%; height: auto; }

    .download-apk .h2 { font-size: 22px; }

    /* ----- Modal penuh lebar ----- */
    .login-modal .modal-dialog,
    .telegram-login-modal .modal-dialog { width: auto; margin: 10px; max-width: none; }
    .modal-dialog { margin: 10px; }
    .modal-body { padding: 15px; }
}

/* ==========================================================================
   ≤ 575px  — topbar jadi 2 baris: ikon/Telegram di atas, tombol Masuk/Daftar lebar penuh
   ========================================================================== */
@media (max-width: 575px) {
    .topbar-container .row { flex-wrap: wrap; row-gap: 6px; }
    .topbar-left-container { flex: 1 1 100%; width: 100%; }
    .topbar-left-section { justify-content: center; }
    .topbar-right-container { flex: 1 1 100%; width: 100%; }
    .login-panel { width: 100%; gap: 8px; }
    .login-panel .login-panel-item { flex: 1 1 0; margin-left: 0 !important; }
    .login-panel .login-button,
    .login-panel .register-button { display: block; width: 100%; text-align: center; box-sizing: border-box; padding: 8px 10px; }
}

/* ==========================================================================
   ≤ 479px  (HP kecil)
   ========================================================================== */
@media (max-width: 479px) {
    body { font-size: 13px; }
    .site-header .row > .col-sm-3 { width: 160px; flex-basis: 160px; }
    .home-progressive-jackpot .jackpot-container { font-size: 19px; letter-spacing: 0; }
    .home-progressive-jackpot .jackpot-play-section .jackpot-play-text { font-size: 18px; }
    .popular-game-title-container .container-content .game-list .games-group {
        width: calc((100% - 6px) / 2.2);
    }
    .top-menu > li > a { font-size: 12px; }
    .login-panel .login-button,
    .login-panel .register-button { padding: 6px 10px; }
}

/* ==========================================================================
   Perangkat sentuh (tanpa hover): tombol COBA / MAIN selalu terlihat
   ========================================================================== */
@media (hover: none) {
    .popular-games .popular-game-list .link-container {
        opacity: 1; justify-content: flex-end; flex-direction: row; align-items: flex-end;
        gap: 4px; padding: 0 4px 4px;
        background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0) 55%);
    }
    .popular-games .popular-game-list .link-container a {
        width: auto; flex: 1 1 0; text-align: center; font-size: 11px; padding: 4px 2px; margin: 0;
    }
    .top-menu .game-list > li:hover > a { transform: none; }
}

/* Hormati preferensi kurangi-animasi */
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}