* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #e9edf2 100%); color:#1a2a3a; line-height:1.5; }
.container { max-width:1280px; margin:0 auto; padding:0 24px; }

/* Admin Gear */
.admin-gear { position:fixed; top:20px; left:20px; width:48px; height:48px; background:white; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:1000; transition:0.2s; color:#2d3748; font-size:24px; }
.admin-gear:hover { transform:rotate(30deg); background:#e2e8f0; }

/* Header */
header { background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); box-shadow:0 2px 20px rgba(0,0,0,0.05); position:sticky; top:0; z-index:100; padding:16px 0; }
header .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.logo { font-size:26px; font-weight:800; background:linear-gradient(135deg,#1e3c72,#2a5298); -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo i { background:none; color:#2a5298; }
.highlight, .gradient { background:linear-gradient(135deg,#2563eb,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent; }
nav { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.btn-login-nav, .btn-hero { background:linear-gradient(135deg,#2563eb,#4f46e5); padding:10px 24px; border-radius:40px; color:white; text-decoration:none; font-weight:600; transition:0.2s; box-shadow:0 4px 12px rgba(37,99,235,0.3); }
.btn-login-nav:hover, .btn-hero:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(37,99,235,0.4); }
.btn-logout { background:#ef4444; padding:8px 20px; border-radius:40px; color:white; text-decoration:none; font-weight:600; }
.btn-logout:hover { background:#dc2626; }

/* Hero */
.hero { text-align:center; padding:80px 20px; background:linear-gradient(135deg,#ffffff 0%,#f0f4fa 100%); border-radius:0 0 48px 48px; }
.hero h1 { font-size:48px; font-weight:800; margin-bottom:20px; }
@media(max-width:768px){ .hero h1{ font-size:32px; } }

/* Services */
.services { padding:60px 0; }
.section-title { text-align:center; font-size:32px; font-weight:700; margin-bottom:40px; }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; }
.service-card { background:white; padding:28px 20px; border-radius:32px; text-align:center; box-shadow:0 8px 28px rgba(0,0,0,0.04); transition:0.2s; }
.service-card:hover { transform:translateY(-6px); box-shadow:0 20px 35px rgba(0,0,0,0.08); }
.service-card i { font-size:48px; color:#2563eb; margin-bottom:16px; }
.features { display:flex; justify-content:center; gap:32px; flex-wrap:wrap; margin:40px 0; }
.feature-item { background:white; padding:12px 28px; border-radius:60px; font-weight:500; box-shadow:0 2px 8px rgba(0,0,0,0.05); }

/* Auth */
.auth-container { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { max-width:460px; width:100%; padding:36px 28px; border-radius:48px; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); box-shadow:0 25px 50px -12px rgba(0,0,0,0.25); }
.auth-header { text-align:center; margin-bottom:24px; }
.auth-header i { font-size:56px; color:#2563eb; }
.auth-tabs { display:flex; gap:12px; margin:24px 0; }
.tab-btn { flex:1; padding:12px; border:none; background:#f1f5f9; border-radius:40px; font-weight:600; cursor:pointer; transition:0.2s; }
.tab-btn.active { background:#2563eb; color:white; }
.auth-form { display:none; flex-direction:column; gap:16px; }
.auth-form.active { display:flex; }
.auth-form input { padding:14px 18px; border:1px solid #e2e8f0; border-radius:60px; font-size:16px; }
.btn-auth { background:#10b981; border:none; padding:14px; border-radius:60px; font-weight:700; color:white; cursor:pointer; }

/* Dashboard */
.dashboard-container { display:flex; min-height:calc(100vh - 80px); }
.sidebar { width:280px; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); border-right:1px solid rgba(0,0,0,0.05); padding:24px; }
.menu-btn { display:flex; align-items:center; gap:12px; width:100%; padding:14px 18px; margin:8px 0; border:none; background:transparent; border-radius:60px; cursor:pointer; font-weight:500; transition:0.2s; }
.menu-btn i { width:24px; }
.menu-btn.active, .menu-btn:hover { background:#eef2ff; color:#2563eb; }
.main-content { flex:1; padding:32px; background:#f8fafc; }
.feature-card { background:white; border-radius:32px; padding:28px; box-shadow:0 4px 20px rgba(0,0,0,0.03); }
.balance-badge { background:#1e293b; color:#fbbf24; padding:6px 14px; border-radius:40px; font-weight:600; font-size:14px; }
.user-badge { background:#eef2ff; padding:6px 14px; border-radius:40px; font-weight:500; }

/* Server Buttons */
.wa-server { display:flex; gap:16px; margin:24px 0; justify-content:center; }
.server-btn { background:#f1f5f9; border:2px solid transparent; padding:12px 32px; border-radius:60px; font-weight:700; cursor:pointer; transition:0.2s; color:#475569; }
.server-btn.active { background:linear-gradient(135deg,#2563eb,#4f46e5); color:white; box-shadow:0 8px 20px rgba(37,99,235,0.3); transform:scale(1.02); }
.server-btn:hover:not(.active) { background:#e2e8f0; transform:translateY(-2px); }

/* Sewa Tabs */
.sewa-tabs { display:flex; gap:16px; margin:24px 0; justify-content:center; }
.sewa-tab-btn { background:#f1f5f9; border:none; padding:12px 28px; border-radius:60px; font-weight:600; cursor:pointer; transition:0.2s; color:#475569; }
.sewa-tab-btn.active { background:linear-gradient(135deg,#8b5cf6,#7c3aed); color:white; box-shadow:0 6px 16px rgba(139,92,246,0.3); }
.sewa-tab-btn:hover:not(.active) { background:#e2e8f0; transform:translateY(-2px); }

/* Tables */
.price-table { width:100%; border-collapse:collapse; background:white; border-radius:24px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.05); }
.price-table th { background:#1e293b; color:white; padding:14px; }
.price-table td { padding:12px; border-bottom:1px solid #e2e8f0; text-align:center; }
.price-table tr:hover { background:#f8fafc; }
.sewa-buy, .btn-buy-wa, .btn-submit, .btn-topup { background:linear-gradient(135deg,#10b981,#059669); border:none; padding:8px 20px; border-radius:40px; color:white; font-weight:600; cursor:pointer; transition:0.2s; }
.btn-topup { background:linear-gradient(135deg,#8b5cf6,#7c3aed); }

/* Topup */
.topup-container { display:flex; flex-wrap:wrap; gap:32px; justify-content:center; }
.qris-box { text-align:center; flex:1; min-width:200px; }
.qris-box img { max-width:280px; border-radius:24px; background:white; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.topup-form { flex:2; min-width:260px; }
.nominal-buttons { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.nominal-btn { background:#e2e8f0; border:none; padding:10px 18px; border-radius:40px; cursor:pointer; }
#customNominal { width:100%; padding:14px; border:1px solid #cbd5e1; border-radius:60px; margin:12px 0; }

/* Rules & Task */
.rules-box { background:linear-gradient(135deg,#fef9e3,#fef3c7); padding:20px; border-radius:24px; border-left:5px solid #f59e0b; }
.rules-box ul { list-style:none; padding-left:8px; }
.rules-box li { padding:8px 0; display:flex; align-items:center; gap:10px; }
.rules-box li::before { content:"✓"; color:#10b981; font-weight:bold; }
.rules-box li.nok::before { content:"✗"; color:#ef4444; }
.task-form { display:flex; flex-direction:column; gap:18px; margin-top:24px; }
.task-form input, .task-form select { padding:14px 18px; border:1px solid #e2e8f0; border-radius:60px; font-size:15px; }
.task-form input[readonly] { background:#f1f5f9; cursor:not-allowed; }

/* Apps List */
.apps-list { display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.app-item { background:#f8fafc; padding:16px 20px; border-radius:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; border:1px solid #e2e8f0; }
.app-item .price { font-weight:700; color:#2563eb; font-size:18px; }
.buy-app-btn { background:#2563eb; border:none; padding:8px 20px; border-radius:40px; color:white; font-weight:600; cursor:pointer; }

/* Footer */
footer { background:white; padding:24px 0; text-align:center; color:#6c7a91; margin-top:40px; }

/* Mobile */
@media (max-width:768px) {
    .dashboard-container { flex-direction:column; }
    .sidebar { width:100%; display:flex; overflow-x:auto; gap:8px; padding:16px; }
    .menu-btn { width:auto; }
    .admin-gear { width:40px; height:40px; font-size:18px; top:12px; left:12px; }
}