/* =================================================

   CSS NANGGROE TOP UP - DIPERBAIKI TOTAL 100%

   ✅ SEMUA KOLOM TABEL PASTI SEJAJAR LURUS

   ✅ TABEL TIDAK KELUAR LAYAR HP (BISA DIGESER)

   ✅ SEMUA CLASS BERFUNGSI 100% DI SEMUA HALAMAN

   ================================================= */



:root {

    --bg: #0b1020;

    --card: #141b2d;

    --teks: #ffffff;

    --abu: #94a3b8;

    --hijau: #84cc16;

    --hijau-muda: #bef264;

    --garis: #1e293b;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Plus Jakarta Sans', sans-serif;

}



html { scroll-behavior: smooth; }



body {

    background: var(--bg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    color: var(--teks);

    line-height: 1.6;

    padding-top: 90px; /* ✅ JARAK ATAS DIPERBAIKI: tombol menu tidak tumpang tindih */

}



a { text-decoration: none; }

ul { list-style: none; }

img { max-width: 100%; display: block; }



/* =================================================

   === TOMBOL UTAMA ===

   ================================================= */

.btn-utama {

    display: inline-block;

    background: var(--hijau);

    color: #000;

    padding: 14px 32px;

    border-radius: 10px;

    font-weight: 800;

    transition: .2s;

    border: none;

    cursor: pointer;

    font-size: 15px;

}

.btn-utama:hover { filter: brightness(1.1); transform: translateY(-1px); }



.btn-kedua {

    display: inline-block;

    background: var(--card);

    color: var(--teks);

    padding: 12px 22px;

    border-radius: 10px;

    font-weight: 700;

    border: 1px solid var(--garis);

    transition: .2s;

    font-size: 13px;

}

.btn-kedua:hover { border-color: var(--hijau); color: var(--hijau-muda); }



.btn-pilih {

    background: var(--hijau);

    color: #000;

    border: none;

    padding: 8px 16px;

    border-radius: 7px;

    font-weight: 800;

    cursor: pointer;

    font-size: 12px;

    transition: .2s;

    white-space: nowrap;

}

.btn-pilih:hover { filter: brightness(1.1); transform: translateY(-1px); }



/* =================================================

   === HALAMAN BERANDA (INDEX.HTML)

   CLASS INI HILANG DI FILE ASLI → SAYA TAMBAHKAN

   ================================================= */

.hero {

    max-width: 900px;

    margin: 0 auto 60px auto;

    padding: 60px 20px 40px 20px;

    text-align: center;

}

.hero h1 {

    font-size: 48px;

    line-height: 1.1;

    margin-bottom: 18px;

    letter-spacing: 1px;

}

.hero h1 span { color: var(--hijau); }

.hero p {

    color: var(--abu);

    font-size: 17px;

    max-width: 700px;

    margin: 0 auto 30px auto;

    line-height: 1.7;

}

.menu-utama {
  max-width: 1200px;
  margin: 0 auto 60px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.menu-kartu {

    background: var(--card);

    border: 1px solid var(--garis);

    border-radius: 18px;

    padding: 30px 25px;

    text-align: center;

    transition: .25s;

}

.menu-kartu:hover {

    transform: translateY(-4px);

    border-color: var(--hijau);

    box-shadow: 0 10px 30px rgba(132,204,22,.15);

}

.menu-kartu .ikon {

    width: 60px;

    height: 60px;

    margin: 0 auto 18px auto;

    border-radius: 16px;

    background: rgba(132,204,22,.12);

    color: var(--hijau-muda);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    font-size: 22px;

}

.menu-kartu h3 {

    font-size: 19px;

    margin-bottom: 10px;

    color: var(--teks);

}

.menu-kartu p {

    color: var(--abu);

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 20px;

}



/* =================================================

   === JUDUL HALAMAN ATAS ===

   ================================================= */

main > header h1 span { color: var(--hijau); }



/* =================================================

   === KOTAK SETIAP GAME (LORDS, FF, DLL) ===

   ================================================= */

.game-section {

    background: var(--card);

    border: 1px solid var(--garis);

    border-radius: 18px;

    padding: 25px;

    margin-bottom: 35px;

}



/* ✅ KHUSUS BAGIAN PEMBAYARAN SAJA — TIDAK SALAH KENA */

.pembayaran-section {

    border: 2px solid var(--hijau);

}



.game-header {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--garis);

    flex-wrap: wrap;

}



.game-title h2 { margin: 0; font-size: 26px; color: var(--teks); }

.game-title p  { margin: 5px 0 0 0; color: var(--abu); font-size: 14px; }



/* =================================================

   === FORM DATA AKUN ===

   ================================================= */

.data-akun {

    background: rgba(132,204,22,.07);

    border: 1px solid rgba(132,204,22,.25);

    border-radius: 12px;

    padding: 18px;

    margin-bottom: 25px;

}

.data-akun h3 {

    margin: 0 0 15px 0;

    color: var(--hijau-muda);

    font-size: 16px;

}



.form-row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 12px;

}



.form-group label {

    display: block;

    font-size: 13px;

    color: var(--abu);

    margin-bottom: 6px;

    font-weight: 600;

}



.form-group input {

    width: 100%;

    padding: 11px 14px;

    background: var(--bg);

    border: 1px solid var(--garis);

    border-radius: 8px;

    color: var(--teks);

    font-size: 14px;

    outline: none;

    transition: .15s;

}

.form-group input:focus { border-color: var(--hijau); }

.form-group input[readonly] { opacity: .7; cursor: not-allowed; }



/* =================================================

   === JUDUL TIAP BAGIAN TABEL ===

   ================================================= */

.paket-section { margin-bottom: 28px; }



.section-title {

    font-size: 18px;

    margin: 0 0 15px 0;

    color: var(--hijau-muda);

    border-left: 4px solid var(--hijau);

    padding-left: 12px;

    font-weight: 800;

}



/* =================================================

   ✅✅✅ INTI PERBAIKAN TABEL — SUDAH DIPERBAIKI TOTAL ✅✅✅

   ❌ DIHAPUS: table-layout: fixed + % paksa (penyebab kolom tidak sejajar)

   ✅ DIGANTI: otomatis rapi, semua baris lurus, tidak keluar layar HP

   ================================================= */



/* 1) BUNGKUS LUAR: WAJIB ADA DI LUAR SEMUA TABEL → SUDAH SAYA PASANG DI HTML */

.bungkus-tabel {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    border-radius: 10px;

    margin: 5px 0 5px 0;

    border: 1px solid var(--garis);

    background: var(--bg);

}

/* Scrollbar kecil hijau */

.bungkus-tabel::-webkit-scrollbar { height: 6px; }

.bungkus-tabel::-webkit-scrollbar-thumb { background: var(--hijau); border-radius: 3px; }

.bungkus-tabel::-webkit-scrollbar-track { background: transparent; }



/* 2) TABEL UTAMA — TANPA DIPAKSA LEBAH, OTOMATIS SEJAJAR */

.tabel-harga {

    width: 100%;

    min-width: 480px; /* ✅ CUKUP: tabel tidak hancur, tetap bisa digeser */

    border-collapse: collapse;

    font-size: 14px;

}



/* 3) KEPALA TABEL HIJAU (SEMUA GAME LURUS SAMA) */

.tabel-harga th {

    background: rgba(132,204,22,.14);

    color: var(--hijau-muda);

    font-weight: 800;

    font-size: 12.5px;

    text-transform: uppercase;

    letter-spacing: .4px;

    padding: 13px 12px;

    text-align: center;

    border-bottom: 2px solid var(--hijau);

    white-space: nowrap;

}



/* 4) ISI TABEL — PADDING SAMA PERSIS = SEMUA LURUS SEJAJAR */

.tabel-harga td {

    padding: 13px 12px;

    text-align: left;

    border-bottom: 1px solid var(--garis);

    white-space: nowrap;

    vertical-align: middle;

    color: var(--teks);

}

.tabel-harga td:last-child { text-align: right; }

.tabel-harga tbody tr:last-child td { border-bottom: none; }

.tabel-harga tbody tr:hover td { background: rgba(132,204,22,.06); }



/* 5) WARNA TEKS KHUSUS */

.nominal     { font-weight: 700; color: var(--teks); }

/* =================================================

   === HALAMAN TESTIMONI — CLASS HILANG DI ASLI

   ================================================= */

.grid-bukti {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 18px;

    margin-bottom: 30px;

}

.item-bukti {

    background: var(--card);

    border: 1px solid var(--garis);

    border-radius: 14px;

    overflow: hidden;

    transition: .25s;

}

.item-bukti:hover {

    transform: translateY(-3px);

    border-color: var(--hijau);

}

.item-bukti img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    background: #0f172a;

}

.item-bukti p {

    padding: 12px 15px;

    margin: 0;

    color: var(--hijau-muda);

    font-weight: 700;

    font-size: 13px;

    text-align: center;

    border-top: 1px solid var(--garis);

}



/* =================================================

   === SIDEBAR MENU ===

   ================================================= */

.tombol-menu {

    position: fixed;

    top: 18px;

    right: 18px;

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: var(--card);

    border: 1px solid var(--garis);

    color: var(--hijau);

    font-size: 22px;

    font-weight: 800;

    cursor: pointer;

    z-index: 9998;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .2s;

    box-shadow: 0 4px 12px rgba(0,0,0,.3);

}

.tombol-menu:hover { border-color: var(--hijau); transform: scale(1.05); }



.overlay-menu {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.65);

    z-index: 9998;

    display: none;

    backdrop-filter: blur(3px);

}

.overlay-menu.aktif { display: block; }



.sidebar {

    position: fixed;

    top: 0;

    right: -85%;

    width: 80%;

    max-width: 340px;

    height: 100%;

    background: var(--card);

    border-left: 1px solid var(--garis);

    z-index: 9999;

    transition: right .35s ease;

    overflow-y: auto;

    padding: 25px 20px;

    box-shadow: -8px 0 25px rgba(0,0,0,.4);

}

.sidebar.aktif { right: 0; }



.tutup-menu {

    position: absolute;

    top: 15px; right: 15px;

    width: 38px; height: 38px;

    border-radius: 10px;

    background: rgba(255,255,255,.05);

    border: 1px solid var(--garis);

    color: var(--teks);

    font-size: 18px;

    font-weight: 800;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}

.tutup-menu:hover { border-color: var(--hijau); color: var(--hijau); }



.sidebar-judul {

    padding: 10px 40px 20px 0;

    border-bottom: 1px solid var(--garis);

    margin-bottom: 20px;

}

.sidebar-judul h2 { color: var(--teks); font-size: 22px; margin: 0; }

.sidebar-judul h2 span { color: var(--hijau); }

.sidebar-judul p  { color: var(--abu); font-size: 12px; margin: 5px 0 0 0; }



.menu-list { padding: 0; margin: 0 0 25px 0; }

.menu-list li { margin-bottom: 6px; }

.menu-list li a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px;

    color: var(--teks);

    border-radius: 10px;

    font-weight: 600;

    font-size: 15px;

    transition: .15s;

}

.menu-list li a:hover {

    background: var(--hijau);

    color: #000;

    transform: translateX(4px);

}

.menu-list li a .ikon-menu {

    width: 28px;

    text-align: center;

    font-size: 18px;

}



.garis-sidebar {

    border: none;

    border-top: 1px solid var(--garis);

    margin: 15px 0;

}



.tombol-wa-sidebar {

    display: block;

    width: 100%;

    text-align: center;

    background: #25d366;

    color: #fff !important;

    padding: 14px;

    border-radius: 12px;

    font-weight: 800;

    transition: .2s;

    margin-top: 10px;

}

.tombol-wa-sidebar:hover { filter: brightness(1.1); transform: translateY(-2px); }



.medsos-sidebar {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

    margin-bottom: 20px;

}

.medsos-sidebar a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    aspect-ratio: 1 / 1;

    background: rgba(255,255,255,.05);

    border: 1px solid var(--garis);

    border-radius: 12px;

    font-size: 20px;

    transition: .2s;

    color: var(--teks);

}

.medsos-sidebar a:hover {

    background: var(--hijau);

    color: #000 !important;

    transform: translateY(-2px);

    border-color: var(--hijau);

}



/* =================================================

   === FOOTER ===

   ================================================= */

footer {

    text-align: center;

    padding: 35px 20px;

    border-top: 1px solid var(--garis);

    color: var(--abu);

    font-size: 13px;

    margin-top: 40px;

}

footer p { margin: 4px 0; }



/* =================================================

   ✅ RESPONSIF KHUSUS HP (TETAP RAPI & SEJAJAR)

   ================================================= */

@media (max-width: 700px) {

    body { padding-top: 90px; }

    main { padding: 20px 14px !important; }



    .hero { padding: 20px 14px 40px 14px; }

    .hero h1 { font-size: 34px; }

    .hero p { font-size: 15px; }



    .game-section { padding: 18px 14px; border-radius: 14px; margin-bottom: 25px; }

    .game-title h2 { font-size: 20px; }



    .data-akun { padding: 14px; }

    .section-title { font-size: 16px; }



    /* ✅ TABEL DI HP: TETAP LURUS, DIGESER DI BUNGKUSNYA */

    .tabel-harga { font-size: 13.5px; min-width: 520px; }

    .tabel-harga th, .tabel-harga td { padding: 11px 9px; }

    .btn-pilih { padding: 7px 12px; font-size: 11.5px; }



    .btn-kedua { padding: 10px 16px; font-size: 12px; }

    main > header h1 { font-size: 28px !important; }



    .grid-bukti { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

    .item-bukti img { height: 200px; }

}

/* ✅ MLBB SELALU SEJAJAR 2 KOLOM */

#game-mlbb .data-akun .form-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

#game-mlbb .data-akun .form-group { min-width: 0 !important; }

@media (max-width: 420px) {

    #game-mlbb .data-akun .form-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

}



/* =================================================

   ✅ CSS NANGGROE TOP UP — FINAL VERSION 100% SIAP PAKAI

   ✅ Semua masalah sudah diperbaiki total

   ✅ Gambar tidak gede, MLBB sejajar, tabel rapi, latar gelap

   ================================================= */



:root {

    --bg: #0b1020;

    --card: #141b2d;

    --teks: #ffffff;

    --abu: #94a3b8;

    --hijau: #84cc16;

    --hijau-muda: #bef264;

    --garis: #1e293b;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Plus Jakarta Sans', sans-serif;

}



html { scroll-behavior: smooth; }



html, body {

    background-color: #0b1020 !important;

    background: #0b1020 !important;

    color: #ffffff !important;

    line-height: 1.6;

    padding-top: 90px;

}



a { text-decoration: none; }

ul { list-style: none; }

img {

    max-width: 100% !important;

    height: auto !important;

    display: block !important;

}



/* =================================================

   === TOMBOL UTAMA ===

   ================================================= */

.btn-utama {

    display: inline-block;

    background: var(--hijau);

    color: #000;

    padding: 14px 32px;

    border-radius: 10px;

    font-weight: 800;

    transition: .2s;

    border: none;

    cursor: pointer;

    font-size: 15px;

}

.btn-utama:hover { filter: brightness(1.1); transform: translateY(-1px); }



.btn-kedua {

    display: inline-block;

    background: var(--card);

    color: var(--teks);

    padding: 12px 22px;

    border-radius: 10px;

    font-weight: 700;

    border: 1px solid var(--garis);

    transition: .2s;

    font-size: 13px;

}

.btn-kedua:hover { border-color: var(--hijau); color: var(--hijau-muda); }



.btn-pilih {

    background: var(--hijau);

    color: #000;

    border: none;

    padding: 8px 16px;

    border-radius: 7px;

    font-weight: 800;

    cursor: pointer;

    font-size: 12px;

    transition: .2s;

    white-space: nowrap;

}

.btn-pilih:hover { filter: brightness(1.1); transform: translateY(-1px); }



/* =================================================

   === HALAMAN BERANDA ===

   ================================================= */

.hero {

    max-width: 900px;

    margin: 0 auto 60px auto;

    padding: 60px 20px 40px 20px;

    text-align: center;

}

.hero h1 {

    font-size: 48px;

    line-height: 1.1;

    margin-bottom: 18px;

    letter-spacing: 1px;

}

.hero h1 span { color: var(--hijau); }

.hero p {

    color: var(--abu);

    font-size: 17px;

    max-width: 700px;

    margin: 0 auto 30px auto;

    line-height: 1.7;

}

.menu-utama {

    max-width: 1200px;

    margin: 0 auto 60px auto;

    padding: 0 20px;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;

}

.menu-kartu {

    background: var(--card);

    border: 1px solid var(--garis);

    border-radius: 18px;

    padding: 30px 25px;

    text-align: center;

    transition: .25s;

}

.menu-kartu:hover {

    transform: translateY(-4px);

    border-color: var(--hijau);

    box-shadow: 0 10px 30px rgba(132,204,22,.15);

}

.menu-kartu .ikon {

    width: 60px;

    height: 60px;

    margin: 0 auto 18px auto;

    border-radius: 16px;

    background: rgba(132,204,22,.12);

    color: var(--hijau-muda);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    font-size: 22px;

}

.menu-kartu h3 {

    font-size: 19px;

    margin-bottom: 10px;

    color: var(--teks);

}

.menu-kartu p {

    color: var(--abu);

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 20px;

}



main > header h1 span { color: var(--hijau); }



/* =================================================

   === KOTAK SETIAP GAME ===

   ================================================= */

.game-section {

    background: var(--card);

    border: 1px solid var(--garis);

    border-radius: 18px;

    padding: 25px;

    margin-bottom: 35px;

}



.pembayaran-section {

    border: 2px solid var(--hijau);

}



.game-header {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--garis);

    flex-wrap: wrap;

}



/* ✅ GAMBAR GAME: DIKUNCI TIDAK BOLEH GEDE MENTAH */

.game-title h2 { margin: 0; font-size: 26px; color: var(--teks); }

.game-title p  { margin: 5px 0 0 0; color: var(--abu); font-size: 14px; }



/* =================================================

   === FORM DATA AKUN ===

   ================================================= */

.data-akun {

    background: rgba(132,204,22,.07);

    border: 1px solid rgba(132,204,22,.25);

    border-radius: 12px;

    padding: 18px;

    margin-bottom: 25px;

}

.data-akun h3 {

    margin: 0 0 15px 0;

    color: var(--hijau-muda);

    font-size: 16px;

}



.form-row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 12px;

}



.form-group label {

    display: block;

    font-size: 13px;

    color: var(--abu);

    margin-bottom: 6px;

    font-weight: 600;

}



.form-group input {

    width: 100%;

    padding: 11px 14px;

    background: var(--bg);

    border: 1px solid var(--garis);

    border-radius: 8px;

    color: var(--teks);

    font-size: 14px;

    outline: none;

    transition: .15s;

}

.form-group input:focus { border-color: var(--hijau); }

.form-group input[readonly] { opacity: .7; cursor: not-allowed; }



/* =================================================

   === JUDUL TIAP BAGIAN TABEL ===

   ================================================= */

.paket-section { margin-bottom: 28px; }



.section-title {

    font-size: 18px;

    margin: 0 0 15px 0;

    color: var(--hijau-muda);

    border-left: 4px solid var(--hijau);

    padding-left: 12px;

    font-weight: 800;

}



/* =================================================

   ✅ INTI PERBAIKAN TABEL — SEMUA LURUS SEJAJAR

   ================================================= */

.bungkus-tabel {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    border-radius: 10px;

    margin: 5px 0 5px 0;

    border: 1px solid var(--garis);

    background: var(--bg);

}

.bungkus-tabel::-webkit-scrollbar { height: 6px; }

.bungkus-tabel::-webkit-scrollbar-thumb { background: var(--hijau); border-radius: 3px; }

.bungkus-tabel::-webkit-scrollbar-track { background: transparent; }



.tabel-harga {

    width: 100%;

    min-width: 480px;

    border-collapse: collapse;

    font-size: 14px;

}



.tabel-harga th {

    background: rgba(132,204,22,.14);

    color: var(--hijau-muda);

    font-weight: 800;

    font-size: 12.5px;

    text-transform: uppercase;

    letter-spacing: .4px;

    padding: 13px 12px;

    text-align: center;

    border-bottom: 2px solid var(--hijau);

    white-space: nowrap;

}



.tabel-harga td {

    padding: 13px 12px;

    text-align: left;

    border-bottom: 1px solid var(--garis);

    white-space: nowrap;

    vertical-align: middle;

    color: var(--teks);

}

.tabel-harga td:last-child { text-align: right; }

.tabel-harga tbody tr:last-child td { border-bottom: none; }

.tabel-harga tbody tr:hover td { background: rgba(132,204,22,.06); }



.nominal     { font-weight: 700; color: var(--teks); }

/* =================================================

   === HALAMAN TESTIMONI ===

   ================================================= */

.grid-bukti {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 18px;

    margin-bottom: 30px;

}

.item-bukti {

    background: var(--card);

    border: 1px solid var(--garis);

    border-radius: 14px;

    overflow: hidden;

    transition: .25s;

}

.item-bukti:hover {

    transform: translateY(-3px);

    border-color: var(--hijau);

}

.item-bukti img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    background: #0f172a;

}

.item-bukti p {

    padding: 12px 15px;

    margin: 0;

    color: var(--hijau-muda);

    font-weight: 700;

    font-size: 13px;

    text-align: center;

    border-top: 1px solid var(--garis);

}



/* =================================================

   === SIDEBAR MENU ===

   ================================================= */

.tombol-menu {

    position: fixed;

    top: 18px;

    right: 18px;

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: var(--card);

    border: 1px solid var(--garis);

    color: var(--hijau);

    font-size: 22px;

    font-weight: 800;

    cursor: pointer;

    z-index: 9998;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .2s;

    box-shadow: 0 4px 12px rgba(0,0,0,.3);

}

.tombol-menu:hover { border-color: var(--hijau); transform: scale(1.05); }



.overlay-menu {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.65);

    z-index: 9998;

    display: none;

    backdrop-filter: blur(3px);

}

.overlay-menu.aktif { display: block; }



.sidebar {

    position: fixed;

    top: 0;

    right: -85%;

    width: 80%;

    max-width: 340px;

    height: 100%;

    background: var(--card);

    border-left: 1px solid var(--garis);

    z-index: 9999;

    transition: right .35s ease;

    overflow-y: auto;

    padding: 25px 20px;

    box-shadow: -8px 0 25px rgba(0,0,0,.4);

}

.sidebar.aktif { right: 0; }



.tutup-menu {

    position: absolute;

    top: 15px; right: 15px;

    width: 38px; height: 38px;

    border-radius: 10px;

    background: rgba(255,255,255,.05);

    border: 1px solid var(--garis);

    color: var(--teks);

    font-size: 18px;

    font-weight: 800;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}

.tutup-menu:hover { border-color: var(--hijau); color: var(--hijau); }



.sidebar-judul {

    padding: 10px 40px 20px 0;

    border-bottom: 1px solid var(--garis);

    margin-bottom: 20px;

}

.sidebar-judul h2 { color: var(--teks); font-size: 22px; margin: 0; }

.sidebar-judul h2 span { color: var(--hijau); }

.sidebar-judul p  { color: var(--abu); font-size: 12px; margin: 5px 0 0 0; }



.menu-list { padding: 0; margin: 0 0 25px 0; }

.menu-list li { margin-bottom: 6px; }

.menu-list li a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px;

    color: var(--teks);

    border-radius: 10px;

    font-weight: 600;

    font-size: 15px;

    transition: .15s;

}

.menu-list li a:hover {

    background: var(--hijau);

    color: #000;

    transform: translateX(4px);

}

.menu-list li a .ikon-menu {

    width: 28px;

    text-align: center;

    font-size: 18px;

}



.garis-sidebar {

    border: none;

    border-top: 1px solid var(--garis);

    margin: 15px 0;

}



.tombol-wa-sidebar {

    display: block;

    width: 100%;

    text-align: center;

    background: #25d366;

    color: #fff !important;

    padding: 14px;

    border-radius: 12px;

    font-weight: 800;

    transition: .2s;

    margin-top: 10px;

}

.tombol-wa-sidebar:hover { filter: brightness(1.1); transform: translateY(-2px); }



.medsos-sidebar {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

    margin-bottom: 20px;

}

.medsos-sidebar a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    aspect-ratio: 1 / 1;

    background: rgba(255,255,255,.05);

    border: 1px solid var(--garis);

    border-radius: 12px;

    font-size: 20px;

    transition: .2s;

    color: var(--teks);

}

.medsos-sidebar a:hover {

    background: var(--hijau);

    color: #000 !important;

    transform: translateY(-2px);

    border-color: var(--hijau);

}



/* =================================================

   === FOOTER ===

   ================================================= */

footer {

    text-align: center;

    padding: 35px 20px;

    border-top: 1px solid var(--garis);

    color: var(--abu);

    font-size: 13px;

    margin-top: 40px;

}

footer p { margin: 4px 0; }



/* =================================================

   ✅ RESPONSIF HP

   ================================================= */

@media (max-width: 700px) {

    body { padding-top: 90px; }

    main { padding: 20px 14px !important; }



    .hero { padding: 20px 14px 40px 14px; }

    .hero h1 { font-size: 34px; }

    .hero p { font-size: 15px; }



    .game-section { padding: 18px 14px; border-radius: 14px; margin-bottom: 25px; }

    .game-title h2 { font-size: 20px; }



    .data-akun { padding: 14px; }

    .section-title { font-size: 16px; }



    .tabel-harga { font-size: 13.5px; min-width: 520px; }

    .tabel-harga th, .tabel-harga td { padding: 11px 9px; }

    .btn-pilih { padding: 7px 12px; font-size: 11.5px; }



    .btn-kedua { padding: 10px 16px; font-size: 12px; }

    main > header h1 { font-size: 28px !important; }



    .grid-bukti { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

    .item-bukti img { height: 200px; }

}



/* =================================================

   ✅ MLBB — DIKUNCI KUAT SELALU 2 KOLOM SEJAJAR

   ================================================= */

#game-mlbb .data-akun .form-row {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    grid-auto-flow: column !important;

    gap: 12px !important;

    width: 100% !important;

}

#game-mlbb .data-akun .form-group {

    min-width: 0 !important;

    width: 100% !important;

    display: block !important;

    float: none !important;

}

#game-mlbb .data-akun .form-group label {

    display: block !important;

    width: 100% !important;

    white-space: nowrap !important;

    margin-bottom: 6px !important;

}

#game-mlbb .data-akun .form-group input {

    width: 100% !important;

    box-sizing: border-box !important;

    display: block !important;

}

@media (max-width: 420px) {

    #game-mlbb .data-akun .form-row {

        grid-template-columns: 1fr 1fr !important;

        gap: 8px !important;

    }

    #game-mlbb .data-akun .form-group input {

        padding: 10px 10px !important;

        font-size: 13px !important;

    }

}



/* ✅ FITUR GESER KANAN-KIRI */

html, body {

  overflow-x: auto !important;

  max-width: 100vw;

}



.game-section,

.pembayaran-section,

.metode-kategori,

.isi-kategori {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}



/* =========================================================

   ✅ TAMBAHAN: SISTEM SIDEBAR & HALAMAN AKUN

   ✅ Ditempelkan DI BAWAH kode CSS yang sudah ada

   ========================================================= */



/* 🔹 1. SIDEBAR OVERLAY (LAYAR HITAM BELAKANG) */

.overlay-menu {

    position: fixed;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: rgba(0,0,0,0.75);

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}

.overlay-menu.aktif {

    opacity: 1;

    visibility: visible;

}



/* 🔹 2. SIDEBAR UTAMA */

.sidebar {

    position: fixed;

    top: 0;

    right: -340px; /* Awalnya disembunyikan di kanan */

    width: 300px;

    max-width: 85%;

    height: 100vh;

    background: var(--card);

    border-left: 2px solid var(--garis);

    z-index: 1001;

    overflow-y: auto;

    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    padding: 22px 18px;

    box-shadow: -10px 0 30px rgba(0,0,0,0.5);

}

.sidebar.aktif {

    right: 0; /* Muncul dari kanan */

}



/* 🔹 3. TOMBOL TUTUP SIDEBAR */

.tutup-menu {

    position: absolute;

    top: 15px; right: 15px;

    background: #ef4444;

    color: #fff;

    border: none;

    width: 34px; height: 34px;

    border-radius: 8px;

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .2s;

}

.tutup-menu:hover {

    background: #dc2626;

    transform: rotate(90deg);

}



/* 🔹 4. JUDUL & MEDSOS DI SIDEBAR */

.sidebar-judul {

    margin-bottom: 18px;

    padding-bottom: 15px;

    border-bottom: 2px solid var(--garis);

    padding-right: 45px;

}

.sidebar-judul h2 {

    font-size: 20px;

    font-weight: 900;

    color: #facc15; /* Kuning emas */

    line-height: 1.1;

    letter-spacing: .5px;

}

.sidebar-judul h2 span {

    color: var(--hijau);

}

.sidebar-judul p {

    font-size: 12px;

    color: var(--abu);

    margin-top: 6px;

}

.medsos-sidebar {

    display: flex;

    gap: 8px;

    margin-bottom: 18px;

}

.medsos-sidebar a {

    width: 38px; height: 38px;

    background: var(--bg);

    border: 1px solid var(--garis);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;

    transition: all .2s;

}

.medsos-sidebar a:hover {

    background: var(--hijau);

    transform: translateY(-3px);

    box-shadow: 0 4px 12px rgba(132,204,22,.4);

}



/* 🔹 5. DAFTAR MENU */

.menu-list {

    list-style: none;

    margin-bottom: 15px;

}

.menu-list li {

    margin-bottom: 4px;

}

.menu-list li a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    color: var(--teks);

    text-decoration: none;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 600;

    transition: all .15s ease;

}

.menu-list li a:hover {

    background: rgba(132, 204, 22, 0.12);

    color: var(--hijau);

    padding-left: 20px; /* Efek geser kanan */

}

.ikon-menu {

    font-size: 18px;

    width: 26px;

    text-align: center;

    flex-shrink: 0;

}

.garis-sidebar {

    border: none;

    border-top: 1px dashed var(--garis);

    margin: 15px 0;

}



/* 🔹 6. TOMBOL WA BESAR DI SIDEBAR */

.tombol-wa-sidebar {

    display: block;

    text-align: center;

    background: linear-gradient(135deg, #25d366, #128c7e);

    color: #fff !important;

    padding: 13px 10px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: 900;

    font-size: 13px;

    letter-spacing: .5px;

    margin-top: 10px;

    box-shadow: 0 4px 14px rgba(37,211,102,.35);

    transition: all .2s;

}

.tombol-wa-sidebar:hover {

    filter: brightness(1.1);

    transform: translateY(-2px);

}



/* 🔹 7. TABEL HARGA - HOVER EFEK */

.tabel-harga tbody tr:hover {

    background: rgba(132, 204, 22, 0.06) !important;

}

.nominal {

    font-weight: 800 !important;

    color: #facc15 !important; /* Kuning */

}

.btn-pilih {

    transition: all .15s !important;

}

.btn-pilih:hover {

    filter: brightness(1.12);

    transform: translateY(-1px);

}



/* 🔹 8. SCROLLBAR CANTIK */

::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}

::-webkit-scrollbar-track {

    background: var(--bg);

}

::-webkit-scrollbar-thumb {

    background: var(--garis);

    border-radius: 6px;

    border: 2px solid var(--bg);

}

::-webkit-scrollbar-thumb:hover {

    background: var(--hijau);

}



/* 🔹 9. HALAMAN AKUN (MASUK / DAFTAR / LUPA) */

.auth-container input:focus,

.auth-container select:focus {

    border-color: var(--hijau) !important;

    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.15) !important;

}



/* =========================================================

   ✅ SELESAI - TIDAK PERLU UBAH KODE DI ATAS INI

   ========================================================= */

   /* ✅ TAUTAN: NANGGROE PPOB */

.link-web-bawah a.link-ppob {

  background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(99,102,241,.18));

  border-color: rgba(139,92,246,.5);

  color: #e0d7ff !important;

}

.link-web-bawah a.link-ppob:hover {

  color: #ffffff !important;

  border-color: #8b5cf6;

  transform: translateY(-3px);

  box-shadow: 0 10px 25px -8px rgba(139,92,246,.4);

}
/* ========================================================= */
/* ========================================================= */

/* --- Tombol kembali ke atas --- */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hijau);
    color: #000;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    z-index: 999;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { filter: brightness(1.1); }

/* Tablet → 3 kolom */
@media (max-width: 991px) {
  .menu-utama {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* HP → tetap 2 kolom */
@media (max-width: 600px) {
  .menu-utama {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .menu-kartu {
    padding: 20px 15px;
  }
}

/* ⬆️ TOMBOL KEMBALI KE ATAS */
.btn-kembali-atas {
  position: fixed; bottom: 25px; right: 25px; width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--hijau), #65a30d);
  color: #000; border: none; border-radius: 50%; font-size: 22px; font-weight: bold;
  cursor: pointer; box-shadow: 0 4px 15px rgba(132,204,22,0.5);
  display: none; align-items: center; justify-content: center; z-index: 999;
  transition: all 0.3s;
}
.btn-kembali-atas:hover { transform: translateY(-3px); }
.btn-kembali-atas.tampil { display: flex; }

/* =========================================================
   🔥 GAME POPULER VIP — HARGA VIP RESELLER
   ========================================================= */
.game-vip-section {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 4px;
}
.game-vip-header {
  text-align: center;
  margin-bottom: 22px;
}
.game-vip-header h2 {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: .3px;
}
.game-vip-header p {
  color: #84cc16;
  font-size: .95rem;
  font-weight: 500;
  margin: 0;
  opacity: .9;
}
.game-vip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.game-vip-kartu {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #0f172a;
  border: 1px solid rgba(132,204,22,.18);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.game-vip-kartu img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, filter .3s ease;
}
.game-vip-kartu span {
  display: block;
  padding: 10px 8px;
  text-align: center;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  background: #111827;
  line-height: 1.25;
}
.game-vip-kartu:hover {
  transform: translateY(-6px);
  border-color: #84cc16;
  box-shadow: 0 12px 28px -8px rgba(132,204,22,.55);
}
.game-vip-kartu:hover img {
  transform: scale(1.08);
  filter: brightness(1.05) saturate(1.1);
}

@media (max-width: 720px) {
  .game-vip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .game-vip-kartu span {
    font-size: .8rem;
    padding: 8px 6px;
  }
}

/* =========================================================
   🤖 / 📤 FLOATING ACTION BUTTONS — pojok KIRI BAWAH (ringkas)
   - Nanggroe AI: pil kecil paling bawah
   - Bagikan: tepat di atas Nanggroe AI
   - Kembali ke Atas: tetap di kanan (tidak disentuh)
   Tinggi/jarak diatur variabel agar mudah dirawat.
   ========================================================= */
:root {
  --fab-kiri: max(12px, env(safe-area-inset-left));
  --fab-bawah: max(14px, env(safe-area-inset-bottom));
  --fab-ai-tinggi: 40px;
  --fab-jarak: 10px;
  --fab-bagikan: 42px;
}
.nanggroe-ai-float,
.tombol-bagikan-nanggroe {
  position: fixed;
  left: var(--fab-kiri);
  z-index: 1200;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.nanggroe-ai-float {
  bottom: var(--fab-bawah);
  height: var(--fab-ai-tinggi);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 5px;
  border: 1px solid rgba(190, 242, 100, .5);
  border-radius: 999px;
  background: rgba(8, 15, 28, .92);
  color: #f8fafc;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nanggroe-ai-float__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #d9f99d 0%, #a3e635 48%, #65a30d 100%);
  color: #08111d;
  font-size: 16px;
  line-height: 1;
}
.nanggroe-ai-float__text {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.tombol-bagikan-nanggroe {
  bottom: calc(var(--fab-bawah) + var(--fab-ai-tinggi) + var(--fab-jarak));
  width: var(--fab-bagikan);
  height: var(--fab-bagikan);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: linear-gradient(145deg, #bef264 0%, #84cc16 52%, #4d7c0f 100%);
  color: #07101a;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.nanggroe-ai-float:hover,
.nanggroe-ai-float:focus-visible,
.tombol-bagikan-nanggroe:hover,
.tombol-bagikan-nanggroe:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  outline: none;
}
.nanggroe-ai-float:active,
.tombol-bagikan-nanggroe:active { transform: scale(.96); }

@media (min-width: 1024px) {
  :root { --fab-kiri: 20px; --fab-bawah: 20px; --fab-ai-tinggi: 44px; --fab-bagikan: 46px; }
  .nanggroe-ai-float__text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .nanggroe-ai-float,
  .tombol-bagikan-nanggroe { transition: none; }
}

/* 📲 Ajakan pasang aplikasi — strip tipis di bawah slider banner */
.banner-pasang-app {
  max-width: 1200px;
  margin: 10px auto;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: calc(100% - 24px);
  border-radius: 10px;
  background: linear-gradient(135deg, #facc15, #eab308);
  color: #000;
  box-shadow: 0 2px 8px rgba(234,179,8,.3);
}
.banner-pasang-app[hidden] { display: none; }
.banner-pasang-app__aksi {
  flex: 1;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 800; font-size: 13px; line-height: 1.3;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  padding: 0 4px 0 12px;
}
.banner-pasang-app__tutup {
  flex: 0 0 40px;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
}
@media (min-width: 768px) { .banner-pasang-app__aksi { font-size: 14px; } }

/* =========================================================
/* =========================================================
   🎉 FITUR BARU 2 — POPUP SELAMAT DATANG & PROMO
   ========================================================= */
.overlay-selamat-datang {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 15, .78);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 18px;
  opacity: 0;
  transition: opacity .3s ease;
}
.overlay-selamat-datang.tampil {
  display: flex;
  opacity: 1;
}
.popup-selamat-datang {
  position: relative;
  width: 100%;
  max-width: 440px;
  background:
    radial-gradient(circle at 50% -15%, rgba(132,204,22,.16), transparent 42%),
    linear-gradient(180deg, #141b2d, #0b1220);
  border: 1px solid rgba(132,204,22,.38);
  border-radius: 24px;
  box-shadow: 0 26px 70px -18px rgba(0,0,0,.72), 0 0 0 1px rgba(132,204,22,.08);
  transform: translateY(24px) scale(.96);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  max-height: 90vh;
  overflow-y: auto;
}
.overlay-selamat-datang.tampil .popup-selamat-datang {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.tutup-popup-selamat-datang {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  z-index: 1;
}
.tutup-popup-selamat-datang:hover {
  background: rgba(132,204,22,.25);
  transform: rotate(90deg);
}
.popup-selamat-datang-isi {
  padding: 34px 26px 28px;
  text-align: center;
}
.popup-selamat-datang-ikon {
  width: 66px;
  height: 66px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  border-radius: 20px;
  background: rgba(132,204,22,.12);
  border: 1px solid rgba(132,204,22,.28);
  box-shadow: inset 0 0 24px rgba(132,204,22,.08);
}
.popup-selamat-datang-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(132,204,22,.10);
  border: 1px solid rgba(132,204,22,.24);
  color: #a3e635;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: 1.2px;
}
.popup-selamat-datang-isi h2 {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.35;
}
.popup-selamat-datang-deskripsi {
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.62;
  margin: 0 0 16px;
}
.popup-selamat-datang-panduan {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  text-align: left;
}
.popup-panduan-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(148,163,184,.10);
}
.popup-panduan-ikon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(132,204,22,.10);
}
.popup-panduan-item strong {
  display: block;
  color: #f8fafc;
  font-size: .80rem;
  margin-bottom: 2px;
}
.popup-panduan-item span:last-child {
  display: block;
  color: #94a3b8;
  font-size: .72rem;
  line-height: 1.45;
}
.popup-selamat-datang-promo {
  background: rgba(132,204,22,.1);
  border: 1px dashed rgba(132,204,22,.5);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 22px;
  text-align: left;
}
.popup-selamat-datang-promo-label {
  display: inline-block;
  color: #84cc16;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.popup-selamat-datang-promo p {
  color: #e2e8f0;
  font-size: .85rem;
  line-height: 1.5;
  margin: 0;
}
.popup-selamat-datang-tombol {
  display: block;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(135deg, #84cc16, #65a30d);
  color: #0f172a;
  font-weight: 900;
  font-size: .95rem;
  letter-spacing: .3px;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(132,204,22,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.popup-selamat-datang-tombol:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(132,204,22,.55);
}
.popup-selamat-datang-catatan {
  margin: 10px 0 0;
  color: var(--abu);
  font-size: .68rem;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .popup-selamat-datang-isi { padding: 26px 17px 20px; }
  .popup-selamat-datang-isi h2 { font-size: 1.1rem; }
  .popup-selamat-datang-deskripsi { font-size: .86rem; }
}

/* =========================================================
   ✅ FITUR BARU (Agustus 2026): FLASH SALE + SLIDER ITEM
   DISKON + PERLUASAN BANNER JADI 6
   Digabungkan & disinkronkan dari draft AI lain oleh Claude
   agar sesuai variabel warna & struktur CSS yang sudah ada.
   ========================================================= */

/* --- Banner tambahan 4, 5, 6 (pelengkap .banner-1/2/3 di index.html) --- */
.banner-4 {
  background: #064e3b center/cover no-repeat;
  background-size: 100% 100%;
}
.banner-5 {
  background: #7c2d12 center/cover no-repeat;
  background-size: 100% 100%;
}
.banner-6 {
  background: #1e3a8a center/cover no-repeat;
  background-size: 100% 100%;
}

/* --- Promo + game pilihan mingguan: padat, visual, dan marquee seamless --- */
.flash-sale-section{max-width:1100px;margin:18px auto 0;padding:0 12px;}
.flash-sale-card{position:relative;overflow:hidden;background:radial-gradient(circle at 8% 12%,rgba(132,204,22,.17),transparent 30%),radial-gradient(circle at 92% 88%,rgba(59,130,246,.10),transparent 28%),linear-gradient(145deg,#111827,#071019 72%);border:1px solid rgba(132,204,22,.42);border-radius:22px;padding:20px 0 15px;box-shadow:0 16px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04);}
.flash-sale-card:before,.flash-sale-card:after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(2px);}
.flash-sale-card:before{width:210px;height:210px;left:-130px;bottom:-135px;background:rgba(132,204,22,.13);}
.flash-sale-card:after{width:160px;height:160px;right:-100px;top:-105px;background:rgba(132,204,22,.10);}
.flash-header{position:relative;z-index:1;text-align:center;padding:0 18px;margin-bottom:14px;}
.promo-kicker{display:inline-flex;align-items:center;justify-content:center;color:#bef264;font-size:10px;font-weight:900;letter-spacing:1.8px;margin-bottom:5px;}
.flash-header h2{font-size:1.45rem;font-weight:950;color:var(--teks);margin:0 0 5px;line-height:1.2;}
.flash-header p{color:var(--abu);font-size:.88rem;line-height:1.5;margin:0;}
.diskon-slider-container{position:relative;z-index:1;overflow:hidden;width:100%;}
.diskon-track{display:flex;width:max-content;gap:0;padding:5px 0 12px;animation:diskonMarquee 42s linear infinite;will-change:transform;}
.diskon-set{display:flex;flex:none;gap:10px;padding-right:10px;}
@keyframes diskonMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.item-diskon-card{box-sizing:border-box;flex:0 0 154px;width:154px;min-height:0;background:linear-gradient(180deg,rgba(30,41,59,.96),rgba(11,18,32,.98));border:1px solid rgba(148,163,184,.20);border-radius:13px;padding:0 10px 10px;position:relative;text-align:center;text-decoration:none;overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;box-shadow:0 6px 16px rgba(0,0,0,.20);}
.item-diskon-card:hover{border-color:rgba(132,204,22,.72);transform:translateY(-2px);box-shadow:0 9px 22px rgba(0,0,0,.30);}
.item-diskon-card--promo{border-color:rgba(132,204,22,.34);}
.badge-diskon{position:absolute;top:7px;left:7px;right:auto;background:#ef4444;color:#fff;font-size:7px;font-weight:950;padding:3px 6px;border-radius:6px;z-index:2;letter-spacing:.25px;}
.badge-katalog{background:#334155;color:#bef264;border:1px solid rgba(190,242,100,.20);}
.img-item-diskon{display:block;width:calc(100% + 20px);height:104px;margin:0 -10px 9px;object-fit:cover;object-position:center;border-radius:12px 12px 10px 10px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));background:#0b1220;}
.nama-item-diskon{font-size:10px;font-weight:850;color:var(--teks);margin:0 0 5px;height:28px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.28;}
.harga-coret{font-size:8px;color:#ef4444;text-decoration:line-through;display:block;line-height:1.1;margin-bottom:2px;}
.harga-asli-diskon{font-size:11.5px;font-weight:950;color:var(--hijau);display:block;line-height:1.15;margin-bottom:7px;}
.harga-katalog-diskon{display:flex;align-items:center;justify-content:center;height:18px;font-size:8.5px;font-weight:900;color:#bef264;line-height:1.1;margin-bottom:7px;}
.btn-beli-diskon{align-self:center;width:max-content;max-width:100%;box-sizing:border-box;background:linear-gradient(135deg,#bef264,var(--hijau));color:#071000;font-size:8px;font-weight:950;padding:7px 10px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:filter .18s ease;white-space:nowrap;line-height:1;}
.btn-beli-diskon:hover{filter:brightness(1.08);}
.promo-footnote{position:relative;z-index:1;margin:1px 18px 0;padding-top:9px;border-top:1px solid rgba(148,163,184,.14);color:var(--abu);font-size:10px;line-height:1.45;text-align:center;}
@media(max-width:600px){
  .flash-sale-section{margin-top:12px;padding:0 8px;}
  .flash-sale-card{border-radius:18px;padding-top:16px;}
  .flash-header{padding:0 13px;margin-bottom:11px;}
  .flash-header h2{font-size:1.08rem;}
  .flash-header p{font-size:.76rem;}
  .item-diskon-card{flex-basis:132px;width:132px;padding:0 8px 8px;border-radius:11px;}
  .diskon-set{gap:7px;padding-right:7px;}
  .img-item-diskon{width:calc(100% + 16px);height:88px;margin:0 -8px 8px;border-radius:11px 11px 9px 9px;}
  .nama-item-diskon{font-size:8.7px;height:24px;}
  .harga-coret{font-size:7.5px;}
  .harga-asli-diskon{font-size:10.5px;}
  .harga-katalog-diskon{font-size:7.8px;height:17px;}
  .btn-beli-diskon{font-size:7.2px;padding:6px 9px;}
  .promo-footnote{margin-left:12px;margin-right:12px;font-size:9px;}
}

/* NTT SEO PRODUCT BLOCK — 2026-08-27: static, lightweight, mobile-first */
/* NTT SEO PRODUCT BLOCK */
.seo-produk { max-width:1100px; margin:28px auto 10px; padding:0 18px; }
.seo-produk__inner { background:var(--card,#1e293b); border:1px solid var(--garis,rgba(255,255,255,.1)); border-radius:16px; padding:22px; box-shadow:0 8px 24px rgba(0,0,0,.16); }
.seo-produk h2 { margin:0 0 10px; color:var(--hijau,#84cc16); font-size:22px; line-height:1.3; }
.seo-produk h3 { margin:20px 0 8px; color:var(--teks,#f8fafc); font-size:16px; }
.seo-produk p { margin:8px 0; color:var(--teks,#f8fafc); line-height:1.75; font-size:14px; }
.seo-produk ul { margin:8px 0 8px 20px; padding:0; color:var(--teks,#f8fafc); line-height:1.8; font-size:14px; }
.seo-produk details { border-top:1px solid var(--garis,rgba(255,255,255,.1)); padding:10px 0; }
.seo-produk summary { cursor:pointer; color:var(--teks,#f8fafc); font-weight:800; font-size:14px; }
.seo-produk details p { margin:7px 0 0; color:var(--abu,#94a3b8); }
.seo-produk .seo-note { font-size:12px; color:var(--abu,#94a3b8); margin-top:14px; }
@media(max-width:600px){ .seo-produk{padding:0 12px}.seo-produk__inner{padding:17px}.seo-produk h2{font-size:19px} }


/* =========================================================
   NANGGROE TOP UP V2 — MOBILE / UX POLISH
   UI-only: tidak mengubah API, Supabase, provider, auth,
   fulfillment, atau struktur serverless function.
   ========================================================= */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

/* Katalog tetap lengkap, tetapi tabel dapat digeser dengan nyaman di HP. */
.bungkus-tabel {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bungkus-tabel table { margin-bottom: 2px; }

/* Search katalog lebih mudah ditemukan tanpa menutupi navbar. */
#inputCariGame:focus, #inputCariGame:focus-visible {
  box-shadow: 0 0 0 3px rgba(132,204,22,.14);
}

/* Target tap yang nyaman untuk tombol utama. */
.btn-pilih, .btn-utama, .btn-beli-diskon, .tombol-wa-sidebar { min-height: 44px; }

@media (max-width: 600px) {
  .grid-layanan { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .grid-layanan a { padding: 13px 8px !important; min-width: 0; }
  .grid-layanan .ikon { font-size: 29px !important; margin-bottom: 7px !important; }
  .grid-layanan .nama { font-size: 12px !important; line-height: 1.35; }
  .game-section { overflow: hidden; }
  .data-akun { padding: 17px !important; }
  .data-akun input, .form-group input, select, textarea { min-height: 46px; }
  .btn-pilih { padding: 10px 14px !important; font-size: 11px !important; }
  .seo-produk { padding-left: 12px !important; padding-right: 12px !important; }
  .seo-produk__inner { padding: 16px !important; }
  .flash-sale-section { margin-left: 10px; margin-right: 10px; }
  .pencarian-index { padding-left: 12px !important; padding-right: 12px !important; }
  .pencarian-index input { min-height: 48px; }
}

@media (max-width: 380px) {
  .grid-layanan .nama { font-size: 11px !important; }
  .grid-layanan a { padding: 11px 6px !important; }
}

.ntt-v2-payment-details{margin-top:10px;border:1px solid var(--garis);border-radius:14px;background:var(--card);overflow:hidden;}
.ntt-v2-payment-details summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:900;color:var(--teks);text-align:center;min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;}
.ntt-v2-payment-details summary::-webkit-details-marker{display:none;}
.ntt-v2-payment-details[open] summary{border-bottom:1px solid var(--garis);color:var(--hijau);}
.ntt-v2-payment-details .pembayaran-grid{padding:14px;}
@media(max-width:600px){.ntt-v2-payment-details summary{font-size:12px;padding:12px;}.ntt-v2-payment-details .pembayaran-grid{padding:10px;}}


/* PDAM payment method selector — visual-only/manual methods; does not expose secrets or add API functions. */
.pdam-method-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 15px;}
.pdam-method-picker button{appearance:none;border:1px solid var(--garis);background:var(--card);color:var(--teks);border-radius:12px;padding:12px 10px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;text-align:center;transition:border-color .18s ease,background .18s ease,transform .18s ease;}
.pdam-method-picker button:hover{border-color:var(--hijau);transform:translateY(-1px);}
.pdam-method-picker button small{display:block;margin-top:4px;color:var(--hijau);font-size:11px;font-weight:900;}
@media(max-width:700px){.pdam-method-picker{grid-template-columns:1fr;}.pdam-method-picker button{text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px}.pdam-method-picker button small{margin-top:0;}}


/* Accessibility: keyboard focus must remain visible without affecting mouse focus. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--hijau-muda) !important;
  outline-offset: 2px;
}

/* ======================================================================
   NANGGROE TOP UP — UI REDESIGN 2026-09-25
   Visual-only layer. It intentionally comes last to override older UI
   patches and inline sizing. No API, provider, auth, or checkout logic.
   ====================================================================== */
:root {
  --ntt-surface: #111827;
  --ntt-surface-2: #0f172a;
  --ntt-border: rgba(148,163,184,.16);
  --ntt-shadow: 0 18px 48px rgba(0,0,0,.28);
}
html { background: var(--bg); }
body {
  padding-top: 0 !important;
  background:
    radial-gradient(circle at 20% -10%, rgba(132,204,22,.07), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(59,130,246,.06), transparent 24%),
    var(--bg) !important;
  overflow-x: hidden;
}

/* Header */
.navbar {
  width: 100% !important;
  min-height: 70px;
  position: sticky !important;
  top: 0 !important;
  z-index: 9997 !important;
  background: rgba(20,27,45,.88) !important;
  border-bottom: 1px solid rgba(148,163,184,.16) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}
.navbar > div, .navbar-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  min-height: 70px !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.navbar img[src*="logo-nanggroe"] {
  width: 42px !important; height: 42px !important; border-radius: 10px !important;
  border: 1px solid rgba(132,204,22,.55) !important;
  box-shadow: 0 7px 22px rgba(132,204,22,.16) !important; object-fit: cover !important;
}
.navbar a > div span:first-child, .navbar .judul > span:first-child {
  font-size: 18px !important; line-height: 1.15 !important; font-weight: 900 !important;
  color: #f8fafc !important; letter-spacing: -.2px;
}
.navbar a > div span:last-child, .navbar .judul > span:last-child { font-size: 10px !important; color: #94a3b8 !important; }
.tombol-menu {
  position: static !important; width: 42px !important; height: 42px !important; min-width: 42px !important;
  flex: 0 0 42px !important; border-radius: 12px !important;
  background: linear-gradient(135deg,#bef264,#84cc16) !important; color:#08110a !important;
  border: 1px solid rgba(190,242,100,.55) !important; box-shadow:0 7px 20px rgba(132,204,22,.18) !important;
  transform:none !important;
}
.tombol-menu:hover { transform: translateY(-1px) !important; }

/* Page headers/containers */
main[style*="max-width"], main[style*="max-width:"] { max-width:1200px !important; padding-top:28px !important; }
main > header {
  position:relative; max-width:900px; margin-left:auto !important; margin-right:auto !important;
  padding:22px !important; border:1px solid var(--ntt-border) !important; border-radius:20px !important;
  background:linear-gradient(145deg,rgba(20,27,45,.92),rgba(15,23,42,.82)) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.18) !important;
}
main > header h1 { letter-spacing:-.5px; }

/* Banner contract: desktop = 1100x360 target area; mobile = 100%x180. */
.banner-container, #bannerContainer {
  width:min(1100px,calc(100% - 28px)) !important; max-width:1100px !important; height:360px !important;
  margin:18px auto 26px !important; border-radius:20px !important; overflow:hidden !important;
  border:1px solid rgba(132,204,22,.28) !important;
  box-shadow:var(--ntt-shadow),0 0 0 1px rgba(255,255,255,.02) inset !important; background:#09111c !important;
}
.banner-track, #bannerTrack { height:100% !important; }
.banner-slide,.banner-1,.banner-2,.banner-3,.banner-4,.banner-5,.banner-6 { height:100% !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.banner-arrow { width:34px !important; height:34px !important; border:1px solid rgba(255,255,255,.16) !important; background:rgba(8,15,28,.65) !important; color:#d9f99d !important; backdrop-filter:blur(8px); }
.banner-left { left:12px !important; } .banner-right { right:12px !important; }
.banner-dots { bottom:12px !important; gap:6px !important; }
.banner-dot { width:7px !important; height:7px !important; } .banner-dot.aktif { width:20px !important; }
.banner-kepercayaan { left:22px !important; right:auto !important; bottom:22px !important; max-width:min(720px,calc(100% - 44px)) !important; padding:12px 15px !important; background:rgba(5,10,18,.72) !important; border:1px solid rgba(255,255,255,.08) !important; backdrop-filter:blur(12px) !important; }
.banner-pasang-app { width:min(1100px,calc(100% - 28px)) !important; margin:-10px auto 18px !important; border-radius:12px !important; box-shadow:0 10px 24px rgba(234,179,8,.12) !important; }

/* Sidebar accordion */
.overlay-menu { background:rgba(2,6,15,.72) !important; backdrop-filter:blur(5px) !important; }
.ntt-public .sidebar {
  top:0 !important; right:-92% !important; width:min(390px,88vw) !important; max-width:390px !important; padding:18px !important;
  background:radial-gradient(circle at 0 0,rgba(132,204,22,.10),transparent 34%),linear-gradient(180deg,#111827 0%,#0b1220 100%) !important;
  border-left:1px solid rgba(148,163,184,.15) !important; box-shadow:-24px 0 60px rgba(0,0,0,.42) !important;
}
.ntt-public .sidebar.aktif { right:0 !important; }
.ntt-public .sidebar-judul { margin:0 0 12px !important; padding:8px 42px 16px 2px !important; border-bottom:1px solid rgba(148,163,184,.13) !important; }
.ntt-public .sidebar-judul h2 { font-size:20px !important; letter-spacing:.2px; }
.ntt-public .sidebar-judul p { font-size:11px !important; color:#94a3b8 !important; }
.ntt-public .sidebar-social-label { margin:12px 2px 7px; font-size:9px; font-weight:900; color:#64748b; letter-spacing:1.3px; }
.ntt-public .medsos-sidebar { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:7px !important; margin-bottom:12px !important; }
.ntt-public .medsos-sidebar a { aspect-ratio:auto !important; height:40px !important; border-radius:11px !important; background:rgba(255,255,255,.035) !important; border-color:rgba(148,163,184,.12) !important; color:#e2e8f0 !important; font-size:16px !important; }
.ntt-public .medsos-sidebar a:hover { background:rgba(132,204,22,.14) !important; color:#d9f99d !important; }
.ntt-public .sidebar-groups { display:grid; gap:7px; }
.ntt-public .sidebar-group { overflow:hidden; border:1px solid rgba(148,163,184,.11); border-radius:14px; background:rgba(255,255,255,.028); }
.ntt-public .sidebar-group summary { list-style:none; min-height:46px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#f8fafc; cursor:pointer; font-size:13px; font-weight:800; }
.ntt-public .sidebar-group summary::-webkit-details-marker { display:none; }
.ntt-public .sidebar-group summary > span:first-child { display:inline-flex; align-items:center; gap:8px; }
.ntt-public .sidebar-summary-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:rgba(132,204,22,.09); color:#bef264; font-size:14px; }
.ntt-public .sidebar-chevron { color:#64748b; font-size:16px; transition:transform .18s ease; }
.ntt-public .sidebar-group[open] .sidebar-chevron { transform:rotate(180deg); color:#bef264; }
.ntt-public .sidebar-group-links { padding:0 7px 7px; border-top:1px solid rgba(148,163,184,.08); }
.ntt-sidebar-link { display:flex !important; align-items:center !important; gap:10px !important; min-height:40px !important; padding:7px 9px !important; margin:4px 0 0 !important; border-radius:10px !important; color:#cbd5e1 !important; font-size:12px !important; font-weight:650 !important; text-decoration:none !important; transition:background .16s ease,color .16s ease,transform .16s ease !important; }
.ntt-sidebar-link .ikon-menu { width:24px !important; height:24px !important; flex:0 0 24px !important; display:grid !important; place-items:center !important; border-radius:8px !important; background:rgba(148,163,184,.07) !important; color:#94a3b8 !important; font-size:11px !important; }
.ntt-sidebar-link:hover,.ntt-sidebar-link:focus-visible,.ntt-sidebar-link.aktif { background:rgba(132,204,22,.10) !important; color:#d9f99d !important; transform:translateX(2px) !important; }
.ntt-sidebar-link.aktif .ikon-menu { background:rgba(132,204,22,.18) !important; color:#bef264 !important; }
.tombol-wa-sidebar { display:grid !important; grid-template-columns:32px 1fr 18px !important; align-items:center !important; gap:9px !important; text-align:left !important; min-height:52px !important; margin-top:12px !important; padding:8px 12px !important; border-radius:13px !important; background:linear-gradient(135deg,#1d8e45,#15803d) !important; box-shadow:0 10px 26px rgba(21,128,61,.17) !important; }
.tombol-wa-sidebar .wa-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.16); font-size:13px; }
.tombol-wa-sidebar strong { display:block; font-size:12px; color:#fff; } .tombol-wa-sidebar small { display:block; margin-top:2px; font-size:9px; color:rgba(255,255,255,.72); } .tombol-wa-sidebar .wa-arrow { color:#dcfce7; font-weight:900; }
.ntt-public .tutup-menu { top:12px !important; right:12px !important; width:34px !important; height:34px !important; border-radius:10px !important; }

/* Shared visual hierarchy */
.menu-kartu,.game-section,.pp-card,.seo-produk__inner,.flash-sale-card { box-shadow:var(--ntt-shadow) !important; }
.game-section { border-radius:20px !important; border:1px solid var(--ntt-border) !important; background:linear-gradient(145deg,rgba(20,27,45,.94),rgba(15,23,42,.90)) !important; }
.game-header { gap:14px !important; padding-bottom:16px !important; margin-bottom:18px !important; }
.game-title h2 { font-size:22px !important; }
.section-title { display:flex; align-items:center; gap:8px; border-left:0 !important; padding:0 !important; margin-bottom:12px !important; color:#f8fafc !important; font-size:15px !important; }
.section-title::before { content:""; width:4px; height:18px; border-radius:999px; background:#84cc16; flex:0 0 4px; }
.judul-mewah { margin-bottom:20px !important; } .judul-mewah h2 { font-size:28px !important; letter-spacing:-.5px; } .judul-mewah::after { width:56px !important; height:3px !important; margin-top:12px !important; }
.game-card { border-radius:16px !important; box-shadow:0 12px 26px rgba(0,0,0,.22) !important; }
.game-card:hover { transform:translateY(-4px) scale(1.015) !important; box-shadow:0 16px 34px rgba(0,0,0,.30) !important; }
.game-card .nama { font-size:11.5px !important; min-height:42px !important; padding:9px !important; }

/* Promo/game rail — every image receives exactly the same 1:1 display frame. */
.flash-sale-section { max-width:1120px !important; padding:0 10px !important; }
.flash-sale-card { border-radius:22px !important; padding:20px 0 16px !important; }
.flash-header { margin-bottom:14px !important; } .flash-header h2 { font-size:1.35rem !important; letter-spacing:-.3px; }
.diskon-track { padding:7px 0 13px !important; } .diskon-set { gap:10px !important; padding-right:10px !important; }
.item-diskon-card { flex:0 0 168px !important; width:168px !important; min-height:258px !important; padding:0 10px 11px !important; border-radius:14px !important; border-color:rgba(148,163,184,.15) !important; }
.img-item-diskon { width:calc(100% + 20px) !important; height:148px !important; margin:0 -10px 9px !important; border-radius:13px 13px 10px 10px !important; object-fit:cover !important; object-position:center !important; }
.nama-item-diskon { font-size:10.5px !important; height:29px !important; } .harga-coret { font-size:8px !important; } .harga-asli-diskon { font-size:12px !important; }
.btn-beli-diskon { min-height:34px !important; font-size:8px !important; padding:7px 11px !important; border-radius:8px !important; } .promo-footnote { font-size:9.5px !important; }

/* Daftar harga */
.game-section .game-banner { height:190px !important; min-height:190px !important; border-radius:16px !important; overflow:hidden !important; background-size:cover !important; background-position:center !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) !important; }
.game-banner-overlay { display:flex !important; flex-direction:column !important; justify-content:flex-end !important; align-items:flex-start !important; padding:18px !important; background:linear-gradient(180deg,transparent 35%,rgba(5,10,18,.88) 100%) !important; }
.game-banner-overlay h2 { font-size:23px !important; } .game-banner-overlay p { font-size:11px !important; }
.data-akun { border-radius:16px !important; padding:17px !important; background:rgba(15,23,42,.58) !important; }
.bungkus-tabel { border-radius:14px !important; border:1px solid rgba(148,163,184,.13) !important; background:rgba(7,13,24,.58) !important; }
.tabel-harga { min-width:560px !important; border-collapse:separate !important; border-spacing:0 !important; }
.tabel-harga thead { background:linear-gradient(180deg,rgba(132,204,22,.16),rgba(132,204,22,.08)) !important; }
.tabel-harga th { background:transparent !important; color:#bef264 !important; border-bottom:1px solid rgba(132,204,22,.30) !important; padding:11px 12px !important; font-size:10.5px !important; }
.tabel-harga td { padding:10px 12px !important; border-bottom:1px solid rgba(148,163,184,.10) !important; font-size:12.5px !important; color:#e2e8f0 !important; }
.tabel-harga tbody tr:hover td { background:rgba(132,204,22,.045) !important; } .tabel-harga .nominal { color:#f8fafc !important; font-weight:750 !important; }
.tabel-harga td:nth-last-child(2) { color:#d9f99d !important; font-weight:850 !important; } .tabel-harga td:last-child,.tabel-harga th:last-child { text-align:center !important; }
.btn-pilih { min-height:38px !important; padding:7px 12px !important; border-radius:9px !important; font-size:10.5px !important; letter-spacing:.4px !important; box-shadow:none !important; }

/* Footer */
footer { margin-top:52px !important; padding:24px 18px 28px !important; background:rgba(20,27,45,.82) !important; border-top:1px solid rgba(148,163,184,.13) !important; }
.footer-nav { max-width:860px; margin:14px auto 12px; display:flex; flex-wrap:wrap; justify-content:center; gap:7px 10px; }
.footer-nav a { display:inline-flex; align-items:center; min-height:34px; padding:7px 11px; border-radius:10px; border:1px solid rgba(148,163,184,.11); background:rgba(255,255,255,.025); color:#cbd5e1; font-size:10px; font-weight:750; text-decoration:none; }
.footer-nav a:hover { color:#d9f99d; border-color:rgba(132,204,22,.28); background:rgba(132,204,22,.07); }
.link-web-bawah { margin-top:24px !important; } .link-web-bawah a { border-width:1px !important; box-shadow:none !important; }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
@media (max-width:700px) {
  .navbar { min-height:64px; } .navbar > div,.navbar-inner { min-height:64px !important; padding:8px 13px !important; }
  .navbar img[src*="logo-nanggroe"] { width:38px !important; height:38px !important; }
  .navbar a > div span:first-child,.navbar .judul > span:first-child { font-size:15px !important; }
  .navbar a > div span:last-child,.navbar .judul > span:last-child { font-size:8.5px !important; }
  .tombol-menu { width:40px !important; height:40px !important; min-width:40px !important; flex-basis:40px !important; }
  .banner-container,#bannerContainer { width:calc(100% - 24px) !important; height:180px !important; margin:12px auto 18px !important; border-radius:16px !important; }
  .banner-arrow { width:30px !important; height:30px !important; font-size:11px !important; } .banner-left{left:8px!important}.banner-right{right:8px!important}
  .banner-kepercayaan { left:11px !important; right:11px !important; bottom:18px !important; max-width:none !important; padding:8px 10px !important; }
  main[style*="max-width"],main[style*="max-width:"] { padding-top:18px !important; } main > header { padding:18px 15px !important; border-radius:16px !important; }
  main > header h1 { font-size:26px !important; } .judul-mewah h2{font-size:21px!important;}
  .game-section { padding:14px !important; border-radius:16px !important; } .game-section .game-banner{height:140px!important;min-height:140px!important;border-radius:13px!important;}
  .game-banner-overlay{padding:12px!important}.game-banner-overlay h2{font-size:18px!important}.game-title h2{font-size:19px!important}.data-akun{padding:14px!important;}
  .diskon-set{gap:8px!important}.item-diskon-card{flex-basis:148px!important;width:148px!important;min-height:235px!important;padding:0 8px 9px!important;}
  .img-item-diskon{width:calc(100% + 16px)!important;height:132px!important;margin:0 -8px 8px!important;border-radius:12px 12px 9px 9px!important;}
  .nama-item-diskon{font-size:9.4px!important;height:26px!important}.btn-beli-diskon{min-height:32px!important;padding:6px 9px!important;}
  .tabel-harga{min-width:520px!important}.tabel-harga th,.tabel-harga td{padding:9px!important}.btn-pilih{min-height:36px!important;padding:7px 10px!important;font-size:10px!important;}
  .footer-nav{gap:6px}.footer-nav a{min-height:32px;padding:6px 9px;}
}


/* NANGGROE TOP UP — FINAL RESPONSIVE PATCH 2026-09-25 */
/* Visual-only hardening for the public storefront. Admin/Owner is deliberately excluded. */
body.ntt-public {
  padding-top: 70px !important;
  overflow-x: hidden !important;
}

body.ntt-public .navbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  min-height: 70px !important;
  z-index: 10040 !important;
}
body.ntt-public .navbar > div,
body.ntt-public .navbar-inner {
  min-height: 70px !important;
}
body.ntt-public .navbar img[src*="logo-nanggroe"] {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}
body.ntt-public .navbar a > div span:first-child,
body.ntt-public .navbar .judul > span:first-child {
  background: linear-gradient(90deg,#facc15 0%,#bef264 52%,#84cc16 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body.ntt-public .tombol-menu {
  position: relative !important;
  z-index: 10041 !important;
}

/* Sidebar never starts underneath the fixed navbar. It keeps its own scroll area. */
body.ntt-public .overlay-menu {
  top: 70px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 10020 !important;
}
body.ntt-public .sidebar {
  top: 70px !important;
  right: -92% !important;
  bottom: auto !important;
  width: min(390px, 90vw) !important;
  max-width: 390px !important;
  height: calc(100dvh - 70px) !important;
  max-height: calc(100dvh - 70px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px !important;
  border-top-left-radius: 20px !important;
  border-bottom-left-radius: 20px !important;
  z-index: 10030 !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
body.ntt-public .sidebar.aktif { right: 0 !important; }
body.ntt-public .tutup-menu {
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  z-index: 2 !important;
}
body.ntt-public .sidebar-judul {
  padding-top: 8px !important;
  padding-right: 50px !important;
  margin-bottom: 14px !important;
}
body.ntt-public .sidebar-judul h2 {
  background: linear-gradient(90deg,#facc15 0%,#bef264 46%,#84cc16 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: .15px !important;
}
body.ntt-public .sidebar-judul h2 span { color: inherit !important; -webkit-text-fill-color: inherit !important; }
body.ntt-public .sidebar-summary-icon {
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
}
body.ntt-public .sidebar-summary-icon i,
body.ntt-public .ikon-menu i {
  line-height: 1 !important;
}
body.ntt-public .ntt-sidebar-link .ikon-menu {
  font-size: 12px !important;
}

/* All public banners use the same new desktop/mobile art set. */
body.ntt-public #bannerContainer,
body.ntt-public .banner-container {
  width: min(1100px, calc(100% - 28px)) !important;
  max-width: 1100px !important;
  aspect-ratio: 1920 / 630 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 18px auto 26px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #09111c !important;
}
body.ntt-public #bannerTrack { height: 100% !important; }
body.ntt-public .banner-slide,
body.ntt-public .banner-1,
body.ntt-public .banner-2,
body.ntt-public .banner-3,
body.ntt-public .banner-4,
body.ntt-public .banner-5,
body.ntt-public .banner-6 {
  height: 100% !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
body.ntt-public .banner-1 { background-image: url('../img/banner-1-desktop.png') !important; }
body.ntt-public .banner-2 { background-image: url('../img/banner-2-desktop.png') !important; }
body.ntt-public .banner-3 { background-image: url('../img/banner-3-desktop.png') !important; }
body.ntt-public .banner-4 { background-image: url('../img/banner-4-desktop.png') !important; }
body.ntt-public .banner-5 { background-image: url('../img/banner-5-desktop.png') !important; }
body.ntt-public .banner-6 { background-image: url('../img/banner-6-desktop.png') !important; }

/* Game banners in the catalogue preserve the complete 1200x250 artwork.
   The aspect ratio removes the mobile horizontal crop instead of distorting it. */
body.ntt-public .game-section .game-banner {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1200 / 250 !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
}
body.ntt-public .game-section .game-banner-overlay {
  min-height: 100% !important;
  padding: 16px 18px !important;
}

/* Keep reduced-motion users from receiving moving marquee/banner animation. */
@media (prefers-reduced-motion: reduce) {
  body.ntt-public * { scroll-behavior: auto !important; }
  body.ntt-public .diskon-track { animation: none !important; }
}

@media (max-width: 600px) {
  body.ntt-public {
    padding-top: 64px !important;
  }
  body.ntt-public .navbar,
  body.ntt-public .navbar > div,
  body.ntt-public .navbar-inner {
    min-height: 64px !important;
  }
  body.ntt-public .navbar > div,
  body.ntt-public .navbar-inner {
    padding: 8px 12px !important;
  }
  body.ntt-public .navbar img[src*="logo-nanggroe"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 9px !important;
  }
  body.ntt-public .navbar a > div span:first-child,
  body.ntt-public .navbar .judul > span:first-child {
    font-size: 16px !important;
  }
  body.ntt-public .navbar a > div span:last-child,
  body.ntt-public .navbar .judul > span:last-child {
    font-size: 9px !important;
  }
  body.ntt-public .tombol-menu {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
    border-radius: 11px !important;
  }
  body.ntt-public .overlay-menu {
    top: 64px !important;
  }
  body.ntt-public .sidebar {
    top: 64px !important;
    height: calc(100dvh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    width: min(390px, 92vw) !important;
    padding: 15px !important;
  }
  body.ntt-public .sidebar-judul h2 { font-size: 18px !important; }
  body.ntt-public .sidebar-judul p { font-size: 10px !important; }

  body.ntt-public #bannerContainer,
  body.ntt-public .banner-container {
    width: calc(100% - 24px) !important;
    aspect-ratio: 2 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px auto 18px !important;
    border-radius: 16px !important;
  }
  body.ntt-public .banner-1 { background-image: url('../img/banner-1-mobile.png') !important; }
  body.ntt-public .banner-2 { background-image: url('../img/banner-2-mobile.png') !important; }
  body.ntt-public .banner-3 { background-image: url('../img/banner-3-mobile.png') !important; }
  body.ntt-public .banner-4 { background-image: url('../img/banner-4-mobile.png') !important; }
  body.ntt-public .banner-5 { background-image: url('../img/banner-5-mobile.png') !important; }
  body.ntt-public .banner-6 { background-image: url('../img/banner-6-mobile.png') !important; }

  body.ntt-public .game-section .game-banner-overlay {
    padding: 10px 12px !important;
  }
  body.ntt-public .game-section .game-banner-overlay h2 {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }
  body.ntt-public .game-section .game-banner-overlay p {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
}


/* ======================================================================
   NANGGROE TOP UP — UI REFINEMENT 2026-09-25 19:00 WIB
   Visual-only. Tidak menyentuh API, payment gateway, auth flow,
   provider logic, database, atau menambah serverless function.
   ====================================================================== */

/* Desktop brand/header: beri ruang yang layak pada identitas brand. */
@media (min-width: 1024px) {
  body.ntt-public .navbar,
  body.ntt-public .navbar > div,
  body.ntt-public .navbar-inner {
    min-height: 88px !important;
  }
  body.ntt-public .navbar > div,
  body.ntt-public .navbar-inner {
    padding: 12px 24px !important;
  }
  body.ntt-public .navbar img[src*="logo-nanggroe"] {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    border-radius: 14px !important;
  }
  body.ntt-public .navbar a > div span:first-child,
  body.ntt-public .navbar .judul > span:first-child {
    font-size: 36px !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
  }
  body.ntt-public .navbar a > div span:last-child,
  body.ntt-public .navbar .judul > span:last-child {
    font-size: 11px !important;
    margin-top: 5px !important;
  }
  body.ntt-public .tombol-menu {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    flex-basis: 54px !important;
    border-radius: 14px !important;
    font-size: 25px !important;
  }
  body.ntt-public {
    padding-top: 88px !important;
  }
}

/* Desktop: checkout tidak lagi terjebak di kolom sempit 700px. */
.checkout-summary-wrap {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 40px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.checkout-summary-wrap > div {
  margin-bottom: 0 !important;
  height: 100%;
}
.checkout-summary-wrap > div:nth-child(3),
.checkout-summary-wrap > div:nth-child(4) {
  grid-column: 1 / -1;
}
.checkout-summary-wrap > div:nth-child(1),
.checkout-summary-wrap > div:nth-child(2) {
  min-height: 100%;
}

/* Form daftar/masuk: desktop memanfaatkan lebar layar tanpa membuat input raksasa. */
@media (min-width: 901px) {
  body.ntt-public .auth-container {
    max-width: 920px !important;
    width: 100% !important;
    padding: 34px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.ntt-public .auth-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    align-items: start;
  }
  body.ntt-public .auth-form .form-group,
  body.ntt-public .auth-form .auth-options,
  body.ntt-public .auth-form .terms-box,
  body.ntt-public .auth-form .kotak-recaptcha,
  body.ntt-public .auth-form .btn-login,
  body.ntt-public .auth-form .btn-register,
  body.ntt-public .auth-form .divider,
  body.ntt-public .auth-form .btn-sosmed,
  body.ntt-public .auth-form .link-switch {
    grid-column: 1 / -1;
  }
  body.ntt-public .auth-form .form-group {
    margin-bottom: 18px !important;
  }
  body.ntt-public .auth-form > .form-group:nth-child(1),
  body.ntt-public .auth-form > .form-group:nth-child(2),
  body.ntt-public .auth-form > .form-group:nth-child(3),
  body.ntt-public .auth-form > .form-group:nth-child(4),
  body.ntt-public .auth-form > .form-group:nth-child(5),
  body.ntt-public .auth-form > .form-group:nth-child(6) {
    grid-column: auto;
  }
}

/* Floating actions: desktop lebih mudah terlihat di area layar yang lebar. */
@media (min-width: 1024px) {
  :root {
    --fab-kiri: 26px;
    --fab-bawah: 26px;
    --fab-ai-tinggi: 58px;
    --fab-jarak: 14px;
    --fab-bagikan: 58px;
  }
  .nanggroe-ai-float {
    padding: 0 18px 0 7px !important;
    gap: 10px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.35) !important;
  }
  .nanggroe-ai-float__icon {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    font-size: 21px !important;
  }
  .nanggroe-ai-float__text { font-size: 15px !important; }
  .tombol-bagikan-nanggroe { font-size: 23px !important; box-shadow: 0 10px 26px rgba(0,0,0,.35) !important; }
}

/* Sidebar HP: lebih ramping, isinya rapat, dan tidak meninggalkan panel kosong. */
@media (max-width: 700px) {
  body.ntt-public .sidebar {
    width: min(310px, calc(100vw - 34px)) !important;
    max-width: 310px !important;
    padding: 15px 13px 18px !important;
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: 18px !important;
  }
  body.ntt-public .sidebar-judul {
    margin-bottom: 10px !important;
    padding: 7px 39px 12px 1px !important;
  }
  body.ntt-public .sidebar-judul h2 { font-size: 18px !important; }
  body.ntt-public .sidebar-judul p { font-size: 10px !important; }
  body.ntt-public .sidebar-social-label { margin-top: 10px !important; }
  body.ntt-public .medsos-sidebar { gap: 6px !important; margin-bottom: 10px !important; }
  body.ntt-public .medsos-sidebar a { height: 36px !important; font-size: 14px !important; }
  body.ntt-public .sidebar-groups { gap: 5px !important; }
  body.ntt-public .sidebar-group { border-radius: 12px !important; }
  body.ntt-public .sidebar-group summary { min-height: 42px !important; padding: 0 11px !important; font-size: 12px !important; }
  body.ntt-public .sidebar-summary-icon { width: 25px !important; height: 25px !important; font-size: 12px !important; }
  body.ntt-public .sidebar-group-links { padding: 0 6px 6px !important; }
  body.ntt-public .ntt-sidebar-link { min-height: 36px !important; padding: 6px 8px !important; margin-top: 3px !important; font-size: 11px !important; }
  body.ntt-public .ntt-sidebar-link .ikon-menu { width: 22px !important; height: 22px !important; flex-basis: 22px !important; font-size: 10px !important; }
  body.ntt-public .tombol-wa-sidebar { min-height: 48px !important; margin-top: 9px !important; padding: 7px 10px !important; grid-template-columns: 28px 1fr 16px !important; }
  body.ntt-public .tombol-wa-sidebar .wa-icon { width: 27px !important; height: 27px !important; }
}

/* Tema terang/gelap. Gelap tetap menjadi default agar perubahan tidak mengejutkan. */
html[data-theme="light"] body.ntt-public {
  --bg: #f4f7fb;
  --card: #ffffff;
  --teks: #0f172a;
  --abu: #64748b;
  --hijau: #65a30d;
  --hijau-muda: #4d7c0f;
  --garis: #d7e0eb;
  --ntt-surface: #ffffff;
  --ntt-surface-2: #eef3f8;
  --ntt-border: rgba(15,23,42,.10);
  --ntt-shadow: 0 18px 42px rgba(15,23,42,.10);
  background:
    radial-gradient(circle at 20% -10%, rgba(132,204,22,.10), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(59,130,246,.08), transparent 24%),
    var(--bg) !important;
  color: var(--teks) !important;
}
html[data-theme="light"] body.ntt-public .navbar {
  background: rgba(255,255,255,.92) !important;
  border-bottom-color: rgba(15,23,42,.09) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] body.ntt-public .navbar a > div span:first-child,
html[data-theme="light"] body.ntt-public .navbar .judul > span:first-child {
  background: linear-gradient(90deg,#ca8a04 0%,#65a30d 60%,#4d7c0f 100%) !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] body.ntt-public .sidebar {
  background: linear-gradient(180deg,#ffffff 0%,#eef3f8 100%) !important;
  border-left-color: rgba(15,23,42,.10) !important;
  box-shadow: -20px 0 48px rgba(15,23,42,.16) !important;
}
html[data-theme="light"] body.ntt-public .sidebar-group,
html[data-theme="light"] body.ntt-public .sidebar-groups .sidebar-group {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(15,23,42,.08) !important;
}
html[data-theme="light"] body.ntt-public .ntt-sidebar-link { color:#334155 !important; }
html[data-theme="light"] body.ntt-public .ntt-sidebar-link:hover,
html[data-theme="light"] body.ntt-public .ntt-sidebar-link.aktif { background:rgba(132,204,22,.12) !important; color:#365314 !important; }
html[data-theme="light"] body.ntt-public .medsos-sidebar a { background:rgba(15,23,42,.035) !important; color:#334155 !important; border-color:rgba(15,23,42,.08) !important; }
html[data-theme="light"] body.ntt-public .medsos-sidebar a:hover { background:rgba(132,204,22,.14) !important; }
html[data-theme="light"] body.ntt-public .tutup-menu { color:#fff !important; }
html[data-theme="light"] .game-section,
html[data-theme="light"] .flash-sale-card,
html[data-theme="light"] .seo-produk__inner,
html[data-theme="light"] .menu-kartu,
html[data-theme="light"] .pp-card,
html[data-theme="light"] main > header,
html[data-theme="light"] body.ntt-public .auth-container,
html[data-theme="light"] .data-akun,
html[data-theme="light"] .bungkus-tabel {
  background: #ffffff !important;
  color: var(--teks) !important;
  border-color: rgba(15,23,42,.09) !important;
  box-shadow: var(--ntt-shadow) !important;
}
html[data-theme="light"] .item-diskon-card,
html[data-theme="light"] .game-card,
html[data-theme="light"] .game-vip-kartu {
  background: #ffffff !important;
  color: var(--teks) !important;
  border-color: rgba(15,23,42,.10) !important;
}
html[data-theme="light"] .game-vip-kartu span { background:#f8fafc !important; color:#0f172a !important; }
html[data-theme="light"] .nanggroe-ai-float { background:rgba(255,255,255,.94) !important; color:#0f172a !important; box-shadow:0 10px 25px rgba(15,23,42,.15) !important; }
html[data-theme="light"] .tombol-bagikan-nanggroe { border-color:rgba(15,23,42,.10) !important; box-shadow:0 10px 24px rgba(15,23,42,.15) !important; }
html[data-theme="light"] footer { background:rgba(255,255,255,.92) !important; border-top-color:rgba(15,23,42,.09) !important; }
html[data-theme="light"] .tabel-harga { background:#fff !important; }
html[data-theme="light"] .tabel-harga td { color:#1e293b !important; border-bottom-color:rgba(15,23,42,.08) !important; }
html[data-theme="light"] .tabel-harga thead { background:linear-gradient(180deg,rgba(132,204,22,.13),rgba(132,204,22,.06)) !important; }
html[data-theme="light"] .checkout-summary-wrap > div { background:#fff !important; border-color:rgba(15,23,42,.09) !important; }

/* Tombol tema ditambahkan oleh JS ke sidebar, tanpa menyentuh alur aplikasi. */
.ntt-theme-toggle {
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
  padding:9px 12px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:#e2e8f0;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.ntt-theme-toggle:hover { background:rgba(132,204,22,.10); border-color:rgba(132,204,22,.26); transform:translateY(-1px); }
.ntt-theme-toggle__label { display:inline-flex; align-items:center; gap:8px; }
.ntt-theme-toggle__state { color:#bef264; font-size:10px; }
html[data-theme="light"] .ntt-theme-toggle { color:#334155; background:rgba(15,23,42,.035); border-color:rgba(15,23,42,.08); }
html[data-theme="light"] .ntt-theme-toggle__state { color:#4d7c0f; }

@media (max-width: 900px) {
  .checkout-summary-wrap {
    display:block !important;
    width:100% !important;
    max-width:none !important;
  }
  .checkout-summary-wrap > div { margin-bottom:18px !important; }
}

@media (max-width: 700px) {
  body.ntt-public .navbar,
  body.ntt-public .navbar > div,
  body.ntt-public .navbar-inner { min-height:64px !important; }
  body.ntt-public { padding-top:64px !important; }
  body.ntt-public .navbar img[src*="logo-nanggroe"] { width:44px !important; height:44px !important; min-width:44px !important; border-radius:11px !important; }
  body.ntt-public .navbar a > div span:first-child,
  body.ntt-public .navbar .judul > span:first-child { font-size:17px !important; line-height:1.05 !important; letter-spacing:-.3px !important; }
  body.ntt-public .navbar a > div span:last-child,
  body.ntt-public .navbar .judul > span:last-child { font-size:8px !important; }
}

/* Header-aware sidebar alignment after the desktop/mobile navbar resize. */
@media (min-width: 1024px) {
  body.ntt-public .overlay-menu {
    top: 88px !important;
  }
  body.ntt-public .sidebar {
    top: 88px !important;
    height: calc(100dvh - 88px) !important;
    max-height: calc(100dvh - 88px) !important;
  }
}
@media (max-width: 700px) {
  body.ntt-public .overlay-menu {
    top: 64px !important;
  }
  body.ntt-public .sidebar {
    top: 64px !important;
    height: calc(100dvh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
  }
}

/* Final mobile drawer polish: compact floating panel, no giant empty lower area. */
@media (max-width: 700px) {
  body.ntt-public .sidebar {
    width: min(300px, calc(100vw - 34px)) !important;
    max-width: 300px !important;
    top: auto !important;
    bottom: 14px !important;
    height: auto !important;
    max-height: calc(100dvh - 92px) !important;
    border-radius: 18px !important;
  }
}


/* ======================================================================
   NANGGROE TOP UP — UI REFINEMENT PASS 2 — 2026-09-25 20:00 WIB
   Visual/UI only. Tidak menyentuh API, payment gateway, Supabase,
   provider logic, auth flow, atau jumlah serverless function.
   Tujuan: benar-benar memakai ruang desktop, proporsional di HP,
   banner tidak terpotong, dan light mode memiliki kontras yang layak.
   ====================================================================== */

/* ---------- Header: logo + judul ---------- */
body.ntt-public .navbar,
body.ntt-public .navbar > div,
body.ntt-public .navbar-inner { min-height: 92px !important; }
body.ntt-public .navbar > div,
body.ntt-public .navbar-inner { padding: 12px 22px !important; gap: 18px !important; }
body.ntt-public .navbar img[src*="logo-nanggroe"] {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  border-radius: 15px !important;
  border-width: 2px !important;
  box-shadow: 0 9px 28px rgba(132,204,22,.22) !important;
}
body.ntt-public .navbar a > div span:first-child,
body.ntt-public .navbar .judul > span:first-child {
  font-size: 36px !important;
  line-height: 1.02 !important;
  letter-spacing: -.75px !important;
}
body.ntt-public .navbar a > div span:last-child,
body.ntt-public .navbar .judul > span:last-child {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin-top: 5px !important;
}
body.ntt-public .tombol-menu {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  flex-basis: 52px !important;
  border-radius: 14px !important;
  font-size: 24px !important;
}
body.ntt-public { padding-top: 92px !important; }

/* ---------- Banner: art sudah disediakan dalam rasio desktop/mobile ---------- */
body.ntt-public #bannerContainer,
body.ntt-public .banner-container {
  width: min(1160px, calc(100% - 40px)) !important;
  max-width: 1160px !important;
  aspect-ratio: 1920 / 630 !important;
  height: auto !important;
  margin: 22px auto 30px !important;
  border-radius: 22px !important;
}
body.ntt-public .banner-slide,
body.ntt-public .banner-1,
body.ntt-public .banner-2,
body.ntt-public .banner-3,
body.ntt-public .banner-4,
body.ntt-public .banner-5,
body.ntt-public .banner-6 {
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}
body.ntt-public .banner-1 { background-image: url('../img/banner-1-desktop.png') !important; }
body.ntt-public .banner-2 { background-image: url('../img/banner-2-desktop.png') !important; }
body.ntt-public .banner-3 { background-image: url('../img/banner-3-desktop.png') !important; }
body.ntt-public .banner-4 { background-image: url('../img/banner-4-desktop.png') !important; }
body.ntt-public .banner-5 { background-image: url('../img/banner-5-desktop.png') !important; }
body.ntt-public .banner-6 { background-image: url('../img/banner-6-desktop.png') !important; }

/* ---------- Ringkasan checkout: desktop benar-benar dua kolom ---------- */
body.ntt-public .checkout-summary-wrap,
body.ntt-public .vip-checkout-wrap {
  width: min(1160px, calc(100% - 40px)) !important;
  max-width: 1160px !important;
  margin: 42px auto 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
}
body.ntt-public .checkout-summary-wrap > div,
body.ntt-public .vip-checkout-wrap > div {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  height: auto !important;
}
body.ntt-public .checkout-summary-wrap > div:nth-child(n+3),
body.ntt-public .vip-checkout-wrap > div:nth-child(n+3) {
  grid-column: 1 / -1 !important;
}

/* ---------- Auth desktop: panel informasi + form, bukan kartu sempit di tengah ---------- */
@media (min-width: 901px) {
  body.ntt-public .auth-container {
    width: min(1080px, calc(100% - 40px)) !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 38px !important;
    display: grid !important;
    grid-template-columns: minmax(260px, .78fr) minmax(430px, 1.22fr) !important;
    gap: 34px !important;
    align-items: start !important;
  }
  body.ntt-public .auth-container .auth-header { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: stretch !important; display:flex !important; flex-direction:column !important; justify-content:center !important; padding: 26px 22px !important; border:1px solid var(--ntt-border) !important; border-radius:18px !important; background:linear-gradient(145deg, rgba(132,204,22,.10), rgba(255,255,255,.025)) !important; }
  body.ntt-public .auth-container #pesanError { grid-column: 2 !important; grid-row: 1 !important; }
  body.ntt-public .auth-container .auth-form { grid-column: 2 !important; grid-row: 2 !important; display:grid !important; grid-template-columns:1fr 1fr !important; column-gap:18px !important; align-items:start !important; }
  body.ntt-public .auth-container .auth-form > .form-group:nth-child(-n+2) { grid-column:auto !important; }
  body.ntt-public .auth-container .auth-form > *:not(.form-group) { grid-column:1 / -1 !important; }
}

/* ---------- Floating actions: desktop terasa desktop, bukan versi HP diperbesar sedikit ---------- */
@media (min-width: 1024px) {
  :root {
    --fab-kiri: 30px;
    --fab-bawah: 30px;
    --fab-ai-tinggi: 68px;
    --fab-jarak: 16px;
    --fab-bagikan: 68px;
  }
  body.ntt-public .nanggroe-ai-float { padding:0 22px 0 8px !important; gap:12px !important; }
  body.ntt-public .nanggroe-ai-float__icon { width:50px !important; height:50px !important; flex-basis:50px !important; font-size:24px !important; }
  body.ntt-public .nanggroe-ai-float__text { font-size:17px !important; }
  body.ntt-public .tombol-bagikan-nanggroe { font-size:27px !important; }
}

/* ---------- Sidebar HP: drawer penuh dari bawah navbar, bukan panel menggantung ---------- */
@media (max-width: 700px) {
  body.ntt-public .navbar,
  body.ntt-public .navbar > div,
  body.ntt-public .navbar-inner { min-height:68px !important; }
  body.ntt-public { padding-top:68px !important; }
  body.ntt-public .navbar > div,
  body.ntt-public .navbar-inner { padding:8px 13px !important; gap:11px !important; }
  body.ntt-public .navbar img[src*="logo-nanggroe"] { width:52px !important; height:52px !important; min-width:52px !important; border-radius:12px !important; }
  body.ntt-public .navbar a > div span:first-child,
  body.ntt-public .navbar .judul > span:first-child { font-size:20px !important; line-height:1.05 !important; letter-spacing:-.45px !important; }
  body.ntt-public .navbar a > div span:last-child,
  body.ntt-public .navbar .judul > span:last-child { font-size:8.5px !important; margin-top:3px !important; }
  body.ntt-public .tombol-menu { width:44px !important; height:44px !important; min-width:44px !important; flex-basis:44px !important; font-size:20px !important; }

  body.ntt-public .overlay-menu { top:68px !important; }
  body.ntt-public .sidebar {
    top:68px !important;
    bottom:auto !important;
    right:-100% !important;
    width:min(340px, calc(100vw - 18px)) !important;
    max-width:340px !important;
    height:calc(100dvh - 68px) !important;
    max-height:calc(100dvh - 68px) !important;
    padding:14px 12px 16px !important;
    border-radius:20px 0 0 0 !important;
    border-top:1px solid rgba(148,163,184,.15) !important;
    box-shadow:-22px 0 46px rgba(0,0,0,.42) !important;
  }
  body.ntt-public .sidebar.aktif { right:0 !important; }
  body.ntt-public .sidebar-judul { margin-bottom:8px !important; padding:5px 44px 10px 2px !important; }
  body.ntt-public .sidebar-judul h2 { font-size:19px !important; }
  body.ntt-public .sidebar-judul p { font-size:9.5px !important; }
  body.ntt-public .sidebar-social-label { margin-top:9px !important; font-size:8.5px !important; }
  body.ntt-public .medsos-sidebar { margin-bottom:9px !important; gap:6px !important; }
  body.ntt-public .medsos-sidebar a { height:35px !important; font-size:13px !important; }
  body.ntt-public .sidebar-groups { gap:5px !important; }
  body.ntt-public .sidebar-group summary { min-height:40px !important; padding:0 10px !important; font-size:11.5px !important; }
  body.ntt-public .sidebar-summary-icon { width:24px !important; height:24px !important; font-size:11px !important; }
  body.ntt-public .sidebar-group-links { padding:0 5px 5px !important; }
  body.ntt-public .ntt-sidebar-link { min-height:34px !important; padding:5px 7px !important; margin-top:2px !important; font-size:10.8px !important; }
  body.ntt-public .ntt-sidebar-link .ikon-menu { width:21px !important; height:21px !important; flex-basis:21px !important; font-size:9.5px !important; }
  body.ntt-public .ntt-theme-toggle { min-height:39px !important; margin:8px 0 9px !important; padding:8px 10px !important; }
}

/* ---------- Light mode: seluruh permukaan utama ikut pindah, termasuk komponen inline yang sebelumnya hitam ---------- */
html[data-theme="light"] body.ntt-public,
html[data-theme="light"] body.ntt-public main,
html[data-theme="light"] body.ntt-public section { color:var(--teks) !important; }
html[data-theme="light"] body.ntt-public .auth-header,
html[data-theme="light"] body.ntt-public .auth-container .auth-header { background:linear-gradient(145deg,#f0fdf4,#f8fafc) !important; border-color:#dbe5ef !important; }
html[data-theme="light"] body.ntt-public .auth-container h1,
html[data-theme="light"] body.ntt-public .auth-container h2,
html[data-theme="light"] body.ntt-public .auth-container label,
html[data-theme="light"] body.ntt-public .auth-container .remember-me,
html[data-theme="light"] body.ntt-public .auth-container .link-switch { color:#0f172a !important; }
html[data-theme="light"] body.ntt-public .auth-container input,
html[data-theme="light"] body.ntt-public .auth-container select,
html[data-theme="light"] body.ntt-public .auth-container textarea { background:#fff !important; color:#0f172a !important; border-color:#cbd5e1 !important; }
html[data-theme="light"] body.ntt-public .auth-container input::placeholder { color:#94a3b8 !important; }
html[data-theme="light"] body.ntt-public .auth-container .divider { color:#64748b !important; }
html[data-theme="light"] body.ntt-public .auth-container .divider::before,
html[data-theme="light"] body.ntt-public .auth-container .divider::after { border-color:#dbe5ef !important; }
html[data-theme="light"] body.ntt-public .auth-container .btn-sosmed { background:#fff !important; color:#334155 !important; border-color:#cbd5e1 !important; }
html[data-theme="light"] body.ntt-public .game-section,
html[data-theme="light"] body.ntt-public .pembayaran-section,
html[data-theme="light"] body.ntt-public .data-akun,
html[data-theme="light"] body.ntt-public .metode-kategori,
html[data-theme="light"] body.ntt-public .isi-kategori { color:#0f172a !important; }
html[data-theme="light"] body.ntt-public .game-section p,
html[data-theme="light"] body.ntt-public .data-akun label,
html[data-theme="light"] body.ntt-public .metode-kategori p,
html[data-theme="light"] body.ntt-public .isi-kategori p { color:#475569 !important; }
html[data-theme="light"] body.ntt-public .game-section h2,
html[data-theme="light"] body.ntt-public .game-section h3,
html[data-theme="light"] body.ntt-public .data-akun h3 { color:#0f172a !important; }
html[data-theme="light"] body.ntt-public .game-section input,
html[data-theme="light"] body.ntt-public .game-section select,
html[data-theme="light"] body.ntt-public .game-section textarea { background:#fff !important; color:#0f172a !important; border-color:#cbd5e1 !important; }
html[data-theme="light"] body.ntt-public .vip-checkout-wrap > div,
html[data-theme="light"] body.ntt-public .checkout-summary-wrap > div { background:#fff !important; color:#0f172a !important; box-shadow:0 12px 30px rgba(15,23,42,.08) !important; }
html[data-theme="light"] body.ntt-public .vip-checkout-wrap label,
html[data-theme="light"] body.ntt-public .checkout-summary-wrap label { color:#334155 !important; }
html[data-theme="light"] body.ntt-public .vip-checkout-wrap input,
html[data-theme="light"] body.ntt-public .checkout-summary-wrap input { background:#fff !important; color:#0f172a !important; border-color:#cbd5e1 !important; }
html[data-theme="light"] body.ntt-public .judul-mewah h2,
html[data-theme="light"] body.ntt-public main > header h1 { color:#0f172a !important; }
html[data-theme="light"] body.ntt-public .judul-mewah .desc,
html[data-theme="light"] body.ntt-public main > header p { color:#64748b !important; }
html[data-theme="light"] body.ntt-public .seo-produk__inner { background:#fff !important; border-color:#dbe5ef !important; box-shadow:0 12px 30px rgba(15,23,42,.07) !important; }
html[data-theme="light"] body.ntt-public .seo-produk p,
html[data-theme="light"] body.ntt-public .seo-produk li { color:#334155 !important; }
html[data-theme="light"] body.ntt-public .format-digiflazz,
html[data-theme="light"] body.ntt-public .ntt-v2-payment-details { background:#fff !important; color:#334155 !important; }
html[data-theme="light"] body.ntt-public .tabel-harga th { color:#334155 !important; }
html[data-theme="light"] body.ntt-public .tabel-harga td { background:#fff !important; color:#334155 !important; }
html[data-theme="light"] body.ntt-public .banner-pasang-app { box-shadow:0 8px 20px rgba(15,23,42,.10) !important; }

/* ---------- Mobile checkout kembali satu kolom, tetapi full-width dan tanpa ruang samping ---------- */
@media (max-width: 900px) {
  body.ntt-public .checkout-summary-wrap,
  body.ntt-public .vip-checkout-wrap {
    width:calc(100% - 24px) !important;
    max-width:none !important;
    display:block !important;
    margin-top:28px !important;
  }
  body.ntt-public .checkout-summary-wrap > div,
  body.ntt-public .vip-checkout-wrap > div { margin-bottom:18px !important; }
}

@media (max-width: 600px) {
  body.ntt-public #bannerContainer,
  body.ntt-public .banner-container {
    width:calc(100% - 20px) !important;
    aspect-ratio:2 / 1 !important;
    margin:12px auto 18px !important;
    border-radius:16px !important;
  }
  body.ntt-public .banner-1 { background-image:url('../img/banner-1-mobile.png') !important; }
  body.ntt-public .banner-2 { background-image:url('../img/banner-2-mobile.png') !important; }
  body.ntt-public .banner-3 { background-image:url('../img/banner-3-mobile.png') !important; }
  body.ntt-public .banner-4 { background-image:url('../img/banner-4-mobile.png') !important; }
  body.ntt-public .banner-5 { background-image:url('../img/banner-5-mobile.png') !important; }
  body.ntt-public .banner-6 { background-image:url('../img/banner-6-mobile.png') !important; }
  body.ntt-public .banner-slide { background-size:100% 100% !important; }
}

/* Jangan biarkan selector lama memaksa horizontal overflow pada halaman storefront. */
body.ntt-public,
body.ntt-public main,
body.ntt-public .checkout-summary-wrap,
body.ntt-public .vip-checkout-wrap { max-width:100vw !important; }

/* =========================================================
   POPUP SELAMAT DATANG — VERSI WARNA LEBIH LEMBUT
   ========================================================= */
.overlay-selamat-datang {
  background: rgba(6, 10, 22, .82) !important;
  backdrop-filter: blur(6px) !important;
}

.popup-selamat-datang {
  background:
    radial-gradient(circle at 20% 0%, rgba(132,204,22,.18), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(59,130,246,.15), transparent 40%),
    linear-gradient(170deg, #1a2338 0%, #141b2d 55%, #0e1525 100%) !important;
  border: 1.5px solid rgba(132,204,22,.28) !important;
  border-radius: 28px !important;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.75),
    0 0 0 1px rgba(132,204,22,.06),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.popup-selamat-datang-ikon {
  background: linear-gradient(145deg, rgba(132,204,22,.22), rgba(132,204,22,.08)) !important;
  border: 1px solid rgba(190,242,100,.35) !important;
  box-shadow:
    0 8px 24px rgba(132,204,22,.18),
    inset 0 0 20px rgba(132,204,22,.1) !important;
  border-radius: 24px !important;
}

.popup-selamat-datang-badge {
  background: linear-gradient(135deg, rgba(132,204,22,.18), rgba(132,204,22,.08)) !important;
  border: 1px solid rgba(190,242,100,.35) !important;
  color: #d9f99d !important;
  box-shadow: 0 4px 12px rgba(132,204,22,.12) !important;
}

.popup-selamat-datang-isi h2 {
  background: linear-gradient(135deg, #ffffff 0%, #d9f99d 60%, #bef264 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.35rem !important;
}

.popup-selamat-datang-deskripsi {
  color: #cbd5e1 !important;
  font-size: .93rem !important;
}

/* Panduan item — lebih lembut, ada efek glow */
.popup-panduan-item {
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  border-radius: 14px !important;
  padding: 12px 13px !important;
  transition: transform .2s ease, border-color .2s ease;
}
.popup-panduan-item:hover {
  transform: translateX(3px);
  border-color: rgba(132,204,22,.35) !important;
}

.popup-panduan-ikon {
  background: linear-gradient(145deg, rgba(132,204,22,.16), rgba(132,204,22,.06)) !important;
  border: 1px solid rgba(190,242,100,.22) !important;
  border-radius: 11px !important;
}

.popup-panduan-item strong {
  color: #f1f5f9 !important;
  font-size: .85rem !important;
}

.popup-panduan-item span:last-child {
  color: #94a3b8 !important;
  font-size: .76rem !important;
}

/* Promo box — lebih hangat */
.popup-selamat-datang-promo {
  background: linear-gradient(135deg, rgba(250,204,21,.14), rgba(132,204,22,.10)) !important;
  border: 1.5px dashed rgba(250,204,21,.45) !important;
  border-radius: 16px !important;
  padding: 15px 17px !important;
}

.popup-selamat-datang-promo-label {
  color: #facc15 !important;
  text-shadow: 0 0 12px rgba(250,204,21,.35);
}

.popup-selamat-datang-promo p {
  color: #e2e8f0 !important;
  font-size: .87rem !important;
}

/* Tombol — gradient hangat + glow */
.popup-selamat-datang-tombol {
  background: linear-gradient(135deg, #bef264 0%, #84cc16 55%, #65a30d 100%) !important;
  color: #0b1508 !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
  letter-spacing: .4px;
  box-shadow:
    0 10px 26px rgba(132,204,22,.4),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
  padding: 15px 20px !important;
}
.popup-selamat-datang-tombol:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 32px rgba(132,204,22,.55),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* Tombol X — lebih lembut */
.tutup-popup-selamat-datang {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.tutup-popup-selamat-datang:hover {
  background: rgba(239,68,68,.25) !important;
  border-color: rgba(239,68,68,.4) !important;
}