/* === GUDANG168 — DARK THEME PREMIUM === */
*{margin:0;padding:0;box-sizing:border-box;outline:none}
body{font-family:"Plus Jakarta Sans",sans-serif;background:#0a0c15;color:#e8ecf4;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.container{max-width:480px;margin:0 auto;padding:0 16px 80px}
a{text-decoration:none;color:inherit}

/* === NAVBAR === */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:14px 0 10px}
.logo{font-size:1.1rem;font-weight:800;letter-spacing:-.5px}
.logo span{color:#22d984}
.nav-right{display:flex;gap:8px;align-items:center}
.balance{background:#1a1e33;padding:5px 12px;border-radius:20px;font-size:.7rem;font-weight:700;display:flex;align-items:center;gap:4px;cursor:pointer}
.balance .coin{color:#f0c040;font-size:.9rem}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#22d984,#1ab871);display:flex;align-items:center;justify-content:center;font-weight:800;color:#0a0c15;font-size:.72rem;cursor:pointer}
.btn-sm{background:#1a1e33;padding:6px 16px;border-radius:20px;font-size:.7rem;font-weight:700;transition:all .2s}
.btn-sm.gold{background:linear-gradient(135deg,#f0c040,#e0a030);color:#0a0c15}
.btn-sm:active{transform:scale(.95)}

/* === HERO === */
.hero{position:relative;margin:8px 0 18px;border-radius:18px;overflow:hidden;min-height:145px;background:linear-gradient(135deg,#1a2a5a,#0f1a3a,#2a1a4a)}
.hero-content{padding:20px;position:relative;z-index:2}
.hero-content h1{font-size:1.4rem;font-weight:800;line-height:1.2}
.hero-content h1 span{color:#f0c040}
.hero-content p{font-size:.72rem;color:#8892b0;margin:4px 0 10px}
.tag-new{background:rgba(240,192,64,.15);color:#f0c040;padding:3px 12px;border-radius:10px;font-size:.56rem;font-weight:700;display:inline-block;width:fit-content;margin-bottom:6px;letter-spacing:.3px}
.btn-gold{background:linear-gradient(135deg,#f0c040,#e0a030);color:#0a0c15;padding:9px 26px;border-radius:22px;font-weight:800;font-size:.72rem;display:inline-block;width:fit-content;transition:all .2s}
.btn-gold:active{transform:scale(.96)}

/* === QUICK ACTIONS === */
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.q-btn{background:#1a1e33;border-radius:14px;padding:12px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.62rem;font-weight:600;color:#8892b0;transition:all .2s}
.q-btn:active{transform:scale(.94)}
.q-btn .q-icon{font-size:1.25rem}
.q-btn.depo{position:relative}
.q-btn.depo::after{content:"💰";position:absolute;top:-4px;right:-2px;font-size:.7rem}
.q-btn.wd{position:relative}
.q-btn.wd::after{content:"💸";position:absolute;top:-4px;right:-2px;font-size:.7rem}

/* === SECTION HEADINGS === */
.section-head{display:flex;justify-content:space-between;align-items:center;margin:16px 0 10px}
.section-head h3{font-size:.8rem;font-weight:700}
.section-head a{color:#22d984;font-size:.65rem;font-weight:600}

/* === GAME GRID === */
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game-card{background:#1a1e33;border-radius:14px;overflow:hidden;cursor:pointer;transition:all .2s;color:inherit;text-decoration:none}
.game-card:active{transform:scale(.96)}
.game-thumb{height:108px;background:linear-gradient(135deg,#252a42,#1a1e33);display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative}
.game-thumb img{width:100%;height:100%;object-fit:cover}
.rtp{position:absolute;top:6px;right:6px;background:rgba(34,217,132,.15);color:#22d984;font-size:.5rem;font-weight:700;padding:2px 8px;border-radius:8px;backdrop-filter:blur(4px)}
.game-info{padding:8px 10px}
.game-info h4{font-size:.7rem;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.game-info p{font-size:.56rem;color:#8892b0;margin-top:1px}

/* === PROVIDER GRID === */
.providers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:18px}
.prov-card{background:linear-gradient(180deg,#1a1e33,#151929);border-radius:14px;padding:14px 8px;text-align:center;border:1px solid #252a42;cursor:pointer;transition:all .25s}
.prov-card:active{transform:scale(.94);background:#22d984}
.prov-card:active .prov-name{color:#0a0c15}
.prov-card:active .prov-count{color:#0a0c1588}
.prov-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin:0 auto 6px}
.prov-card.slots .prov-icon{background:linear-gradient(135deg,#22d98422,#1ab87122)}
.prov-card.casino .prov-icon{background:linear-gradient(135deg,#f0c04022,#e0a03022)}
.prov-card.egames .prov-icon{background:linear-gradient(135deg,#ff5e6e22,#ee405022)}
.prov-name{font-size:.68rem;font-weight:700;line-height:1.2;margin-bottom:2px}
.prov-count{font-size:.56rem;color:#22d984;font-weight:600}
@media(min-width:400px){.providers-grid{grid-template-columns:repeat(3,1fr)}}

/* === PROVIDERS HORIZONTAL (old) === */
.providers{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.providers span{background:#1a1e33;border-radius:10px;padding:8px 16px;font-size:.68rem;font-weight:600;white-space:nowrap}

/* === PROMO CARDS === */
.promo-list{display:flex;flex-direction:column;gap:10px}
.promo-card{background:linear-gradient(135deg,#1a2a3a,#2a1a3a);border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;border:1px solid rgba(34,217,132,.08)}
.promo-icon{font-size:1.5rem;width:34px;text-align:center}
.promo-card h4{font-size:.74rem;font-weight:700}
.promo-card p{font-size:.6rem;color:#8892b0;margin-top:1px}
.btn-promo{background:linear-gradient(135deg,#f0c040,#e0a030);color:#0a0c15;padding:6px 14px;border-radius:10px;font-weight:700;font-size:.6rem;white-space:nowrap;margin-left:auto;transition:all .2s}
.btn-promo:active{transform:scale(.92)}

/* === FEATURE BANNER === */
.feature-banner{border-radius:14px;padding:16px;margin:18px 0;background:linear-gradient(135deg,#1a3a2a,#0f2a1a)}
.feature-banner h3{font-size:.82rem;font-weight:700}
.feature-banner p{font-size:.62rem;color:#8892b0;margin-top:3px}
.tag-free{background:rgba(34,217,132,.15);color:#22d984;padding:2px 12px;border-radius:10px;font-size:.56rem;font-weight:700;display:inline-block;margin-bottom:4px}

/* === BOTTOM NAV === */
.bottom-nav{display:flex;position:fixed;bottom:0;left:0;width:100%;background:#0f1221ee;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #1e2340;padding:4px 0 max(12px,env(safe-area-inset-bottom,12px));max-width:480px;left:50%;transform:translateX(-50%);z-index:100}
.nav-item{flex:1;text-align:center;font-size:.56rem;font-weight:600;color:#555;padding:2px 0;transition:color .2s}
.nav-item span{display:block;font-size:1.15rem;margin-bottom:1px}
.nav-item.active{color:#22d984}

/* === AUTH PAGES === */
.auth-card{max-width:340px;margin:30px auto}
.auth-card .auth-logo{text-align:center;margin-bottom:20px}
.auth-card .auth-logo h1{font-size:1.5rem;font-weight:800}
.auth-card .auth-logo h1 span{color:#22d984}
.auth-card h2{font-size:1.15rem;margin-bottom:2px}
.auth-sub{color:#8892b0;font-size:.75rem;margin-bottom:22px}
.form-group{margin-bottom:14px}
.form-group label{font-size:.62rem;font-weight:700;color:#8892b0;display:block;margin-bottom:4px}
.form-group input{width:100%;background:#0a0c15;border:1.5px solid #252a42;border-radius:10px;color:#e8ecf4;padding:10px 14px;font-size:.8rem;transition:border-color .2s}
.form-group input:focus{border-color:#22d984}
.form-group input::placeholder{color:#333}
.form-hint{font-size:.6rem;color:#555;margin-top:3px}
.btn-primary{width:100%;background:linear-gradient(135deg,#22d984,#1ab871);color:#0a0c15;padding:11px;border-radius:10px;border:none;font-weight:800;font-size:.8rem;cursor:pointer;transition:all .2s}
.btn-primary:active{transform:scale(.97)}
.auth-link{text-align:center;font-size:.72rem;color:#8892b0;margin-top:16px}
.auth-link a{color:#22d984;font-weight:700}

/* === DASHBOARD === */
.dash-header{display:flex;justify-content:space-between;align-items:center;margin:8px 0 16px;padding:16px;background:linear-gradient(135deg,#1a1e33,#151929);border-radius:14px;border:1px solid #252a42}
.dash-label{font-size:.62rem;color:#8892b0;text-transform:uppercase;letter-spacing:1px}
.dash-amount{font-size:1.15rem;font-weight:800;color:#22d984}
.dash-user{font-size:.72rem;color:#8892b0;text-align:right}
.dash-user strong{color:#e8ecf4}
.dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.stat-card{background:#1a1e33;border-radius:12px;padding:12px;text-align:center}
.stat-card .stat-icon{font-size:1.2rem;margin-bottom:2px}
.stat-card .stat-val{font-size:.78rem;font-weight:700}
.stat-card .stat-label{font-size:.6rem;color:#8892b0}

/* === CARDS / TABLE === */
.card{background:#1a1e33;border-radius:14px;padding:16px;margin-bottom:14px}
.card h3{font-size:.78rem;margin-bottom:10px}
table{width:100%;font-size:.68rem;border-collapse:collapse}
th{text-align:left;color:#8892b0;padding:6px 4px;border-bottom:1px solid #252a42;font-size:.6rem;font-weight:600}
td{padding:6px 4px;border-bottom:1px solid #151929}
.gold{color:#f0c040}
.green{color:#22d984}
.badge{padding:2px 10px;border-radius:10px;font-size:.55rem;font-weight:700;display:inline-block}
.badge-paid,.badge-approved,.badge-selesai{background:rgba(34,217,132,.15);color:#22d984}
.badge-pending{background:rgba(255,152,0,.15);color:#ff9800}
.badge-rejected{background:rgba(255,94,110,.15);color:#ff5e6e}
.back{color:#8892b0;font-size:.68rem;margin-bottom:12px;display:block;transition:color .2s}
.back:hover{color:#22d984}
.back:before{content:"← ";font-weight:700}

/* === FORMS === */
select{width:100%;background:#0a0c15;border:1.5px solid #252a42;border-radius:10px;color:#e8ecf4;padding:10px 14px;font-size:.8rem;appearance:none}
textarea{width:100%;background:#0a0c15;border:1.5px solid #252a42;border-radius:10px;color:#e8ecf4;padding:10px 14px;font-size:.8rem;resize:vertical}
hr{border:none;border-top:1px solid #1e2340;margin:16px 0}

/* === TRACKER === */
.tracker-card{background:#1a1e33;border-radius:14px;padding:14px;margin-bottom:10px}
.tracker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tracker-id{font-size:.62rem;color:#8892b0}
.tracker-status{font-size:.58rem;font-weight:700;padding:2px 10px;border-radius:8px}
.tracker-match{font-size:.65rem;padding:4px 0;border-bottom:1px solid #252a42}
.tracker-odds{color:#f0c040;font-weight:600}
.tracker-footer{display:flex;justify-content:space-between;margin-top:8px;font-size:.68rem}

/* === MISC === */
.empty-state{text-align:center;padding:40px 20px;background:#1a1e33;border-radius:14px}
.empty-state .emoji{font-size:2.5rem;margin-bottom:8px}
.empty-state p{color:#8892b0;font-size:.75rem}
.btn-outline{display:inline-block;margin-top:12px;background:#22d984;color:#0a0c15;padding:10px 24px;border-radius:12px;font-weight:700;font-size:.72rem}
.filter-pills{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.filter-pill{padding:6px 16px;border-radius:14px;font-size:.65rem;font-weight:600;white-space:nowrap;transition:all .2s}
.filter-pill.active{background:#22d984;color:#0a0c15}
.filter-pill:not(.active){background:#1a1e33;color:#8892b0}
.search-box input::placeholder{color:#444}

/* === RESPONSIVE === */
@media(min-width:481px){.container{padding:0 0 80px}.bottom-nav{width:480px;left:50%;transform:translateX(-50%);border-radius:16px 16px 0 0}}
/* === PROVIDER SLIDER === */
.prov-slider{display:flex;gap:10px;overflow-x:auto;padding:4px 0 12px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.prov-slider::-webkit-scrollbar{display:none}
.prov-slide-item{flex:0 0 85px;text-align:center;text-decoration:none;color:inherit;scroll-snap-align:start;transition:all .2s}
.prov-slide-item:active{transform:scale(.92)}

.prov-slide-name{font-size:.6rem;font-weight:600;line-height:1.1;color:#8892b0;margin-bottom:1px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.prov-slide-count{font-size:.5rem;font-weight:600;color:#22d984}

.prov-slide-logo{width:50px;height:50px;margin:0 auto 5px}
.prov-slide-logo img{width:50px;height:50px;border-radius:12px;object-fit:cover}