/* =====================================================================
   responsive.css — lapisan responsive di atas legacy.css

   ATURAN PENTING:
   legacy.css berisi CSS ASLI situs lama. Untuk menimpanya, setiap selektor
   di sini harus punya spesifisitas SAMA ATAU LEBIH TINGGI dari aturan yang
   ditimpa. Karena berkas ini dimuat SETELAH legacy.css, spesifisitas yang
   sama sudah cukup untuk menang.

   Contoh: legacy punya `.game-list .game-item{width:...}` (2 kelas).
   Menulis `.game-item{width:auto}` (1 kelas) TIDAK akan berlaku.

   Setiap blok di bawah mencantumkan selektor asli yang ditimpanya.
   Ada skrip pemeriksa di tools/check-specificity.php yang memverifikasi ini.
   ===================================================================== */

/* ---------- Aksesibilitas ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999;
             padding: .6rem 1rem; background: #d7800f; color: #fff; }
.skip-link:focus { left: 0; }

/* Gambar di area konten yang kita tambahkan sendiri. Gambar bawaan situs lama
   (banner, logo, ikon footer) sudah diatur legacy.css -- jangan diganggu. */
.promo-content img, .static-page img, .promotion-detail img { max-width: 100%; height: auto; }

/* ---------- Tombol hamburger ---------- */
.nav-toggle {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 9px;
    background: transparent; border: 1px solid rgba(255,255,255,.3);
    border-radius: 4px; cursor: pointer; align-self: center;
}
.nav-toggle span { display: block; height: 2px; background: #fff;
                   transition: transform .25s ease, opacity .25s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Dropdown bahasa ----------
   Menimpa: (tidak ada aturan display di legacy untuk .dropdown-menu ini)
   Dibuka lewat class, bukan [hidden], karena display di legacy akan
   mengalahkan [hidden]{display:none} bawaan browser. */
.topbar-left-section .language-selector { display: none; }
.language-selector-container.is-open .language-selector { display: block; }

/* ---------- Modal popup ---------- */
.modal { display: none; position: fixed; inset: 0; z-index: 2000;
         padding: 1rem; background: rgba(0,0,0,.75); overflow-y: auto; }
.modal.is-open { display: grid; place-items: center; }
.modal__box { width: 100%; max-width: 560px; background: #1c1c22;
              border: 1px solid #2a2a32; border-radius: 6px; }
.modal__head { display: flex; align-items: center; justify-content: space-between;
               padding: .9rem 1rem; border-bottom: 1px solid #2a2a32; }
.modal__title { margin: 0; font-size: 1rem; color: #f79c26; text-transform: uppercase; }
.modal__close { background: none; border: 0; color: #888; font-size: 1.6rem;
                line-height: 1; width: 34px; height: 34px; cursor: pointer; }
.modal__close:hover { color: #fff; }
.modal__body { padding: 1rem; }
.modal__body img { max-width: 100%; height: auto; border-radius: 4px; }
.btn-close-popup { width: 100%; padding: .6rem; background: #d7800f; color: #fff;
                   border: 0; border-radius: 4px; font-weight: 700; cursor: pointer; }


/* =====================================================================
   <= 991px — tablet & ponsel
   ===================================================================== */
@media (max-width: 991px) {

    /* ---- Topbar ----
       Menimpa: .topbar-inner-container{display:flex;flex-wrap:nowrap} */
    .topbar-inner-container { flex-wrap: wrap; gap: 6px; }
    /* Menimpa: .topbar-left-section .topbar-item a{padding:5px 10px} */
    .topbar-left-section .topbar-item a { padding: 4px 7px; }
    .topbar-left-section .topbar-item + .topbar-item { margin-left: 6px; }
    /* Unduh APK disembunyikan agar topbar muat satu baris */
    .topbar-left-section .topbar-item .download-apk-btn { display: none; }
    /* Menimpa: .login-panel .login-panel-item:last-of-type{padding-right:15px;margin-right:15px} */
    .login-panel .login-panel-item:last-of-type { padding-right: 0; margin-right: 0; }
    /* Menimpa: .login-panel .login-button,.login-panel .register-button{width:90px} */
    .login-panel .login-button,
    .login-panel .register-button { width: auto; min-width: 76px; padding: 3px 12px; font-size: 12px; }

    /* ---- Header ----
       Menimpa: .site-header-inner-container{display:flex;flex-wrap:nowrap} */
    .site-header-inner-container { flex-wrap: wrap; align-items: center; }
    /* Menimpa: .site-header-inner-container .logo{width:20%;padding:15px} */
    .site-header-inner-container .logo { width: auto; max-width: 160px; padding: 10px 0; }
    .nav-toggle { display: inline-flex; }

    /* ---- Navigasi ----
       Menimpa: .top-menu{display:flex;flex-wrap:nowrap} */
    .top-menu { display: none; flex-direction: column; width: 100%;
                border-top: 1px solid rgba(255,255,255,.15); }
    .top-menu.is-open { display: flex; }
    /* Menimpa: .top-menu>li{flex:1;display:flex} */
    .top-menu > li { flex: none; width: 100%; display: block; }
    /* Menimpa: .top-menu>li+li:before{content:'';background:...;width:1px} */
    .top-menu > li + li:before { display: none; }
    /* Menimpa: .top-menu>li>a{text-align:center} */
    .top-menu > li > a { text-align: left; padding: 12px 4px;
                         border-bottom: 1px solid rgba(255,255,255,.08); }

    /* Submenu game: dari dropdown hover jadi panel klik.
       Menimpa: .top-menu .game-list-container{position:absolute;...} */
    .top-menu .game-list-container {
        position: static; padding: 6px 0; border-bottom: 0;
        max-height: none; background-color: transparent;
    }
    /* Menimpa: .top-menu>li:not(:hover) .game-list-container{display:none}  (3 kelas)
       Hover sengaja dimatikan juga -- di layar sentuh hover "nyangkut". */
    .top-menu > li:not(:hover) .game-list-container,
    .top-menu > li:hover .game-list-container { display: none; }
    .top-menu > li:not(:hover) .game-list-container.is-open,
    .top-menu > li:hover .game-list-container.is-open { display: block; }
    /* Menimpa: .top-menu .games-container{display:flex;flex-wrap:wrap} */
    .top-menu .games-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .top-menu .games-container > li { margin: 0; }
    .top-menu .games-container > li > a { padding: 4px; }
    .top-menu .games-container > li > a img { width: 100%; height: auto; }
    .top-menu .game-list-container .container { width: 100%; padding: 0; }

    /* ---- Banner ----
       Menimpa: .banner{aspect-ratio:1920/613}
       Rasio itu memaksa tinggi wadah jadi sangat pendek di layar sempit,
       sehingga gambar terpotong -- inilah "banner setengah". */
    .banner { aspect-ratio: auto; }

    /* ---- Running text ----
       Menimpa: .announcement-container{display:flex;align-items:center} */
    .announcement-container { flex-wrap: wrap; font-size: 12px; }
    .announcement-container > [data-section="date"]  { flex-basis: 100%; padding-right: 0; }
    .announcement-container > [data-section="announcements"] { flex-basis: 100%; padding: 5px 14px; }

    /* ---- Game Populer ----
       Menimpa: .game-list .game-item{width:calc((100% - (5px*6*2))/6)}
       Ini akar bug "kotak oranye sempit": lebar 1/6 tetap dipakai di ponsel.
       Sistem rasio 1:1 asli (.wrapper-container{padding-top:100%} +
       .game-list img{position:absolute}) TIDAK diubah -- cukup lebarnya. */
    .game-list .game-item { width: calc((100% - 5px * 3 * 2) / 3); }
    .game-list .game-name { font-size: 11px; }
    .game-list .link-container a { width: 86%; padding: 6px 8px; font-size: 12px; margin: 4px; }

    .popular-game-title-container { flex-wrap: wrap; gap: 8px; }

    /* ---- Halaman promo ----
       Menimpa: .standard-container-with-sidebar{display:flex} dan
       >div:first-child / >div:last-child yang memakai flex-basis 25%/75% */
    .standard-container-with-sidebar { display: block; }
    .standard-container-with-sidebar > div:first-child,
    .standard-container-with-sidebar > div:last-child { flex-basis: auto; width: 100%; }
    .promotion-side-menu { margin-bottom: 14px; }
    /* Menimpa: .promotion-list{padding:20px} */
    .promotion-list { padding: 12px; }
    /* Menimpa: .promotion-item .promotion-footer .promotion-label h2{font-size:18px} */
    .promotion-item .promotion-footer .promotion-label h2 { font-size: 15px; }
    .promotion-item .promotion-footer .promotion-label h3 { font-size: 12px; }

    /* ---- Footer ----
       Menimpa: .footer-info-container{display:flex} dan
       .footer-info-container .site-info{flex-basis:calc(100%/3 + 30px)} */
    .footer-info-container { display: block; }
    .footer-info-container .site-info,
    .footer-info-container .site-info:last-child {
        flex-basis: auto; width: 100%; padding: 0 0 18px; margin-bottom: 18px;
    }
    /* Menimpa: .site-info:not(:last-child){padding-right:40px} */
    .site-info:not(:last-child) { padding-right: 0; }
    /* Garis pemisah vertikal antar kolom tidak masuk akal saat kolomnya bertumpuk.
       Menimpa: .footer-info-container .site-info:not(:last-child):after (3 kelas) */
    .footer-info-container .site-info:not(:last-child):after,
    .site-info:not(:last-child):after { display: none; }
    /* Menimpa: .site-info .site-info-title h3{font-size:21px} */
    .site-info .site-info-title h3 { font-size: 17px; }

    .footer-links { text-align: center; }
    .footer-links > li { display: inline-block; float: none; }
    .copyright { text-align: center; margin-top: 10px; }
    .supported-browser-container { text-align: center; }
    .bank-list { flex-wrap: wrap; }
}

/* =====================================================================
   <= 575px — ponsel kecil
   ===================================================================== */
@media (max-width: 575px) {
    /* Menimpa aturan 3 kolom di blok 991px (spesifisitas sama, urutan lebih akhir) */
    .game-list .game-item { width: calc((100% - 5px * 2 * 2) / 2); }
    .top-menu .games-container { grid-template-columns: repeat(2, 1fr); }
    .site-header-inner-container .logo { max-width: 130px; }
    .login-panel .login-button,
    .login-panel .register-button { min-width: 66px; padding: 3px 9px; font-size: 11px; }
    .topbar-left-section .topbar-item { font-size: 11px; }
}

/* ---------- Hormati preferensi kurangi animasi ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
/* =====================================================================
   Elemen baru yang tidak ada di situs lama
   (halaman detail promo, halaman statis, form daftar, 404).
   Warna mengikuti palet asli: #d7800f / #f79c26 / #222222.
   ===================================================================== */
.promotion-page-title,
.static-page h1,
.promotion-detail h1 {
    font-size: 22px;
    color: #f79c26;
    margin: 0 0 18px;
    text-transform: uppercase;
}
.promo-breadcrumb { font-size: 12px; color: #999; margin-bottom: 14px; }
.promo-breadcrumb a { color: #d7800f; }
.promo-expiry { font-size: 13px; color: #999; margin-bottom: 14px; }
.promo-expiry span { color: #b59456; font-weight: 700; }

.promotion-detail img { border-radius: 4px; margin-bottom: 20px; }
.promo-content { color: #d5d5d5; line-height: 1.8; font-size: 14px; }
.promo-content h2, .promo-content h3 { color: #f79c26; margin: 24px 0 10px; font-size: 16px; }
.promo-content p  { margin: 0 0 14px; }
.promo-content ul { list-style: disc; padding-left: 20px; margin: 0 0 14px; }
.promo-content li { margin-bottom: 6px; }
.promo-content table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.promo-content th, .promo-content td { border: 1px solid #3a3a3a; padding: 8px 10px; text-align: left; font-size: 13px; }
.promo-content th { background: #2c2c2c; color: #f79c26; }

.promo-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.promo-back-link { color: #d7800f; font-size: 13px; }
.empty-note { color: #999; padding: 30px 0; }

.static-page, .register-panel {
    background: #2b2b2b;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    padding: 26px;
    margin: 24px 0;
}
.register-panel { max-width: 560px; margin-inline: auto; }
.error-page h1 { font-size: 56px; color: #d7800f; margin-bottom: 8px; }

/* Form daftar */
.register-panel .field { margin-bottom: 16px; }
.register-panel label { display: block; font-size: 13px; font-weight: 700; color: #d5d5d5; margin-bottom: 6px; }
.register-panel label b { color: #e74c3c; }
.register-panel input[type="text"],
.register-panel input[type="tel"],
.register-panel input[type="email"],
.register-panel select {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}
.register-panel input:focus, .register-panel select:focus { border-color: #d7800f; outline: none; }
.register-panel .hint { display: block; font-size: 11px; color: #808080; margin-top: 4px; }

.register-panel .radio-row { display: flex; gap: 10px; }
.register-panel .radio-row label {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; margin: 0;
    background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 4px;
    cursor: pointer; font-weight: 400;
}
.register-panel .radio-row input { accent-color: #d7800f; }
.register-panel .radio-row label:has(input:checked) { border-color: #d7800f; color: #f79c26; }

.register-submit { width: 100%; margin-top: 8px; }
.register-terms { font-size: 11px; color: #808080; margin-top: 16px; line-height: 1.7; }
.register-terms a { color: #d7800f; }

/* Honeypot: tak terlihat manusia, tetap ada di DOM untuk bot */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.alert-box { padding: 12px 14px; border-radius: 4px; font-size: 13px; margin-bottom: 16px; border: 1px solid; }
.alert-ok    { background: rgba(0,200,83,.1);  border-color: #00c853; color: #7ee2a8; }
.alert-error { background: rgba(239,68,68,.1); border-color: #ef4444; color: #fca5a5; }

@media (max-width: 991px) {
    .standard-container-with-sidebar { display: block; }
    .promotion-side-menu { width: 100%; margin-bottom: 16px; }
    .promotion-side-menu a { display: inline-block; margin: 0 6px 6px 0; }
    .promotion-list { width: 100%; }
    .static-page, .register-panel { padding: 18px; }
}