*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;background:#09070f;color:#eee}body{font-size:14px}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.sidebar{position:fixed;z-index:110;left:0;top:0;bottom:0;width:270px;padding:28px 18px;background:#0d0915;border-right:1px solid #21182d;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:13px;margin:0 12px 42px}.mark{width:54px;height:54px;border-radius:17px;background:linear-gradient(135deg,#914dff,#5e24db);display:grid;place-items:center;font-size:24px;font-weight:800;box-shadow:0 12px 35px #6427bb55}.brand b{display:block;font-size:21px;letter-spacing:-.7px}.brand b span{color:#a878ff}.brand small{display:block;color:#857a94;margin-top:5px}.nav-title{font-size:11px;font-weight:800;letter-spacing:1.6px;color:#6d6479;margin:0 14px 12px}.sidebar nav{display:grid;gap:5px;margin-bottom:28px}.sidebar nav a{height:50px;padding:0 15px;border-radius:16px;display:flex;align-items:center;gap:16px;color:#9f95ad;font-size:15px;transition:.18s}.sidebar nav a:first-letter{font-size:18px}.sidebar nav a:hover{background:#171021;color:#fff}.sidebar nav a.active{background:#24173a;color:#fff;box-shadow:inset 3px 0 #914dff}.side-bottom{margin-top:auto}.online{border:1px solid #2a2232;padding:13px;border-radius:15px;color:#aaa1b2;font-size:12px;margin-bottom:15px}.online:first-letter{color:#42dda0}.user-mini{border-top:1px solid #241d2c;padding:16px 8px 0;display:flex;align-items:center;gap:12px}.avatar{width:40px;height:40px;border-radius:13px;background:#271a40;color:#c8a9ff;display:grid;place-items:center;font-weight:800}.user-mini b,.user-mini small{display:block}.user-mini small{color:#817789;margin-top:3px}.main{margin-left:270px;min-height:100vh}header{height:76px;border-bottom:1px solid #1d1725;display:flex;align-items:center;padding:0 34px;gap:20px}.crumb{color:#70677a}.crumb b{color:#ddd;margin-left:6px}.menu-btn{display:none;background:none;border:0;color:#fff;font-size:23px}.content{padding:38px;max-width:1450px;margin:auto}.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.hero small,.page-head small{color:#9162d8;font-weight:800;letter-spacing:1.7px}.hero h1,.page-head h1{font-size:32px;letter-spacing:-1.2px;margin:8px 0}.hero p,.page-head p,.card p{color:#83798f}.btn{border:0;border-radius:13px;padding:12px 18px;cursor:pointer;font-weight:700}.primary{background:linear-gradient(135deg,#9655ff,#6d32e9);color:#fff;box-shadow:0 10px 28px #7134df35}.ghost{background:#191220;color:#c9b8dd}.full{width:100%}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stats>div{background:linear-gradient(145deg,#12101a,#0e0b13);border:1px solid #211a2b;border-radius:18px;padding:22px}.stats span,.stats small{display:block;color:#82788d}.stats strong{display:block;font-size:25px;margin:12px 0 6px}.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-bottom:18px}.card{background:linear-gradient(145deg,#12101a,#0e0b13);border:1px solid #211a2b;border-radius:19px;padding:22px}.card-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:12px}.card-head h2,.card h2{font-size:17px;margin:0 0 5px}.card-head a,.linkbtn{color:#a979ff;background:none;border:0;cursor:pointer}.row{display:flex;align-items:center;gap:13px;padding:14px 0;border-top:1px solid #1e1827}.grow{flex:1}.row b,.row small{display:block}.row small{color:#7e7489;margin-top:4px}.product-icon{width:40px;height:40px;border-radius:13px;background:#211735;color:#b889ff;display:grid;place-items:center;font-weight:800}.product-icon.big{width:48px;height:48px;font-size:19px}.badge{padding:6px 10px;border-radius:20px;font-size:11px;font-weight:800;text-transform:capitalize}.badge.active{background:#15352b;color:#55e2aa}.badge.pending{background:#3a2b14;color:#ffc66b}.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick a{border:1px solid #251d30;border-radius:14px;padding:16px;color:#a979ff}.quick b,.quick small{display:block;color:#fff;margin-top:6px}.quick small{color:#7e7489}.page-head{display:flex;justify-content:space-between;margin-bottom:25px}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-line{display:flex;justify-content:space-between;align-items:center}.pill{font-size:11px;padding:6px 9px;border-radius:20px;background:#211736;color:#bb92ff}.product h2{margin:20px 0 8px}.price{font-size:24px;display:block;margin:18px 0}.price small{font-size:12px;color:#777;margin-left:4px}.product ul{padding-left:18px;color:#93899d;line-height:2;margin-bottom:22px}.table-card{overflow:auto}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:15px 10px;border-bottom:1px solid #211b29}th{color:#766c80;font-size:11px;text-transform:uppercase;letter-spacing:1px}.mono,code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.wallet{padding:30px;border-radius:22px;background:linear-gradient(135deg,#6e32dd,#31155c);margin-bottom:18px}.wallet span,.wallet small{display:block;color:#dfccff}.wallet strong{font-size:38px;display:block;margin:8px 0}.api-box{display:flex;justify-content:space-between;align-items:center;padding:25px;border:1px solid #332544;border-radius:19px;background:#130e1d}.api-box p{color:#887d94}.secret{display:flex;align-items:center;border:1px solid #292033;background:#0b0910;border-radius:12px;overflow:hidden;margin:7px 0 18px}.secret code{padding:13px;flex:1;overflow:auto}.secret button{border:0;border-left:1px solid #292033;background:#19121f;color:#b98aff;padding:13px;cursor:pointer}.unlimited{padding:12px;border-radius:12px;background:#152d25;color:#55e2aa}.coupon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.coupon>b{color:#ae7cff;letter-spacing:1px}.coupon strong{display:block;font-size:25px;margin:18px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid .btn{grid-column:1/-1}label{display:block;color:#93889d;margin:12px 0 7px}input,select{width:100%;padding:13px 14px;background:#0b0910;border:1px solid #2a2133;border-radius:11px;color:#fff;outline:none}input:focus,select:focus{border-color:#8b4cf4}pre{background:#0a080e;border:1px solid #251d2d;border-radius:12px;padding:15px;white-space:pre-wrap;color:#c6a6ff}.alert{padding:13px 16px;border-radius:13px;margin-bottom:18px}.alert.error{background:#3a171d;color:#ff9ca7}.alert.success{background:#15352b;color:#5de1ad}.modal-bg{position:fixed;inset:0;background:#0009;z-index:100;display:none}.modal-bg.show{display:grid;place-items:center}.overlay{position:fixed;inset:0;background:#0009;z-index:100;display:none}.modal{width:min(520px,calc(100% - 30px));background:#120e18;border:1px solid #30233c;border-radius:20px;padding:25px;position:relative;box-shadow:0 30px 100px #000}.modal .close{position:absolute;right:15px;top:12px;border:0;background:none;color:#aaa;font-size:27px}.modal h2{margin-top:7px}.login-wrap,.center{min-height:100vh;display:grid;place-items:center}.login-card,.setup{width:min(430px,calc(100% - 30px));background:#120e18;border:1px solid #2b2135;border-radius:22px;padding:30px}.login-card h1{font-size:29px;margin-bottom:5px}.login-card p,.setup>p{color:#887d91}.login-card form{margin-top:25px}.login-card .brand{margin:0 0 30px}.setup{text-align:center}.setup .logo{margin:auto;width:60px;height:60px;border-radius:18px;background:#7b39ed;display:grid;place-items:center;font-size:27px;font-weight:800}.setup input{margin:7px 0}.setup button{width:100%;padding:13px;border:0;border-radius:12px;background:#843ff0;color:#fff;font-weight:800;margin-top:12px}.notice{padding:12px;background:#173326;color:#70e8b5;border-radius:12px;margin-bottom:12px}
@media(max-width:1050px){.products{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.coupon-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.sidebar{transform:translateX(-105%);transition:transform .24s ease;box-shadow:20px 0 60px #0008}.sidebar.open{transform:translateX(0)}.overlay.show{display:block}.main{margin-left:0}header{height:66px;padding:0 17px}.menu-btn{display:block}.content{padding:23px 16px}.hero{display:block}.hero .btn{margin-top:15px}.stats{grid-template-columns:1fr 1fr}.products,.coupon-grid{grid-template-columns:1fr}.page-head h1,.hero h1{font-size:27px}.form-grid{grid-template-columns:1fr}.api-box{display:block}.api-box .btn{margin-top:12px}.table-card{padding:13px}.brand{margin-bottom:30px}.sidebar nav a{height:52px;font-size:16px}}
@media(max-width:450px){.stats{grid-template-columns:1fr}.quick{grid-template-columns:1fr}.stats>div{padding:18px}.hero h1{font-size:25px}}


/* ===== MOBILE SIDEBAR FIX ===== */

.sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
}

/* Pastikan isi sidebar tidak terpotong */
.sidebar nav {
    flex-shrink: 0;
}

.side-bottom {
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 760px) {
    .sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        padding-bottom: 25px;
    }

    .sidebar nav a {
        flex-shrink: 0;
    }

    .side-bottom {
        margin-top: 25px !important;
    }
}

/* Jangan sampai overlay menghalangi sidebar */
.overlay {
    z-index: 100 !important;
}

.sidebar {
    z-index: 110 !important;
}