:root{--bg:#080b12;--surface:#0e1420;--surface2:#121b2a;--border:#202c40;--blue:#3987ff;--cyan:#62d9ff;--text:#f4f7ff;--muted:#929db0;--green:#48dfad}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.container{width:min(1160px,92%);margin:auto}
.navbar{height:76px;display:flex;align-items:center;position:sticky;top:0;z-index:50;background:rgba(8,11,18,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}.nav-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}.logo{font-size:22px;font-weight:800;letter-spacing:-1px;white-space:nowrap}.logo span{color:var(--blue)}.nav-links{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:13px}.nav-links a:hover{color:white}.nav-actions{display:flex;align-items:center;gap:10px}
.btn{border:1px solid var(--border);background:var(--surface2);color:white;padding:11px 17px;border-radius:9px;font-weight:600;font-size:13px;display:inline-flex;justify-content:center;align-items:center;gap:9px;transition:.2s ease}.btn:hover{transform:translateY(-2px);border-color:var(--blue)}.btn-primary{background:linear-gradient(110deg,#2869ed,#398dff);border-color:transparent;box-shadow:0 6px 25px rgba(57,135,255,.17)}.cart-btn{position:relative}.cart-count{position:absolute;top:-7px;right:-7px;background:#ff5978;border-radius:50%;min-width:19px;height:19px;display:grid;place-items:center;font-size:10px}
.hero{padding:94px 0 76px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:650px;height:500px;right:-180px;top:-100px;background:radial-gradient(ellipse,rgba(38,105,255,.19),transparent 68%);pointer-events:none}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}.eyebrow{display:inline-flex;gap:9px;align-items:center;border:1px solid #253b5d;background:rgba(44,100,190,.10);color:#83b9ff;border-radius:30px;padding:7px 13px;font-size:11px;font-weight:700;margin-bottom:23px}.eyebrow i{color:var(--green)}h1{font-size:clamp(37px,5vw,62px);line-height:1.12;letter-spacing:-2.8px;margin-bottom:23px}.gradient-text{background:linear-gradient(100deg,#4e91ff,#70e2ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:14px;line-height:1.9;max-width:510px}.hero-buttons{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.hero-stats{display:flex;gap:28px;margin-top:42px;flex-wrap:wrap}.stat strong{display:block;font-size:21px}.stat span{color:var(--muted);font-size:11px}
.server-card{background:linear-gradient(145deg,#131e30,#0b111d);border:1px solid #263954;border-radius:20px;padding:28px;box-shadow:0 25px 80px #0008;position:relative;animation:float 5s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}.server-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.server-head small{color:var(--muted);font-size:11px}.server-head h3{font-size:17px}.live{color:var(--green);font-size:10px;background:#12362f;padding:6px 9px;border-radius:20px}.server-visual{height:160px;display:grid;place-items:center;background:radial-gradient(ellipse at center,#173e75 0%,#101d34 43%,#0b111c 75%);border:1px solid #233a5d;border-radius:13px;margin-bottom:23px;overflow:hidden}.server-visual i{font-size:75px;color:#6eb8ff;filter:drop-shadow(0 0 25px #3987ff)}.resource-list{display:grid;gap:17px}.resource-top{display:flex;justify-content:space-between;font-size:12px}.resource-top span:last-child{color:var(--muted)}.progress{margin-top:8px;height:5px;background:#253148;border-radius:9px;overflow:hidden}.progress div{height:100%;border-radius:inherit;background:linear-gradient(90deg,#3379ff,#64d7ff)}
.trust-bar{padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#0b1019}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.trust-item{display:flex;gap:12px;align-items:center}.trust-item i{color:#67b2ff;font-size:20px}.trust-item strong{display:block;font-size:12px}.trust-item span{display:block;color:var(--muted);font-size:10px}
section{padding:82px 0}.section-head{margin-bottom:32px}.section-head h2{font-size:clamp(26px,3vw,36px);letter-spacing:-1px;margin:10px 0}.section-head p{color:var(--muted);font-size:13px}.section-tag{color:#69b3ff;font-size:10px;font-weight:800;letter-spacing:2px}.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.category-card{text-align:left;padding:23px 19px;background:var(--surface);border:1px solid var(--border);border-radius:13px;color:white;transition:.25s}.category-card:hover,.category-card.active{background:#111d30;border-color:#347cfa;transform:translateY(-3px)}.category-icon{width:44px;height:44px;display:grid;place-items:center;background:#172b49;border-radius:11px;color:#6cb4ff;font-size:19px;margin-bottom:17px}.category-card strong{display:block;font-size:14px}.category-card small{color:var(--muted);font-size:11px}.catalog{padding-top:30px}
.catalog-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;flex-wrap:wrap}.catalog-top h3{font-size:20px}.search-box{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);padding:0 14px;border-radius:9px;width:min(100%,310px)}.search-box i{color:var(--muted)}.search-box input{background:transparent;border:none;outline:none;color:white;padding:12px 0;width:100%;font-size:12px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}.filter-btn{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:8px;padding:8px 13px;font-size:11px}.filter-btn.active,.filter-btn:hover{background:#17345e;color:white;border-color:#357df5}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product-card{background:linear-gradient(150deg,#101827,#0b1019);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:.25s}.product-card:hover{transform:translateY(-5px);border-color:#3d73bb;box-shadow:0 16px 40px #0003}.product-art{height:150px;display:grid;place-items:center;position:relative;background:radial-gradient(ellipse at center,#1b3c69,#111a2a 70%)}.product-art i{font-size:49px;color:#79baff;filter:drop-shadow(0 0 17px #3987ff88)}.product-badge{position:absolute;top:13px;left:13px;padding:5px 8px;background:#183c6b;color:#a5d1ff;border-radius:5px;font-size:9px;font-weight:800}.product-content{padding:20px}.product-category{color:#6cb5ff;font-size:10px;font-weight:700}.product-content h3{font-size:16px;margin:7px 0}.product-description{font-size:11px;color:var(--muted);min-height:37px}.product-features{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0}.product-features span{background:#182235;color:#b5c2d5;border-radius:5px;padding:5px 7px;font-size:9px}.product-bottom{display:flex;justify-content:space-between;align-items:end;gap:10px;padding-top:15px;border-top:1px solid var(--border)}.price-label{color:var(--muted);font-size:10px}.price{font-size:17px;font-weight:800}.period{color:var(--muted);font-size:10px;font-weight:400}.product-buttons{display:flex;gap:7px}.icon-btn{border:1px solid var(--border);background:#151f30;color:white;width:36px;height:36px;border-radius:8px}.icon-btn:hover{border-color:var(--blue);color:#7abaff}.empty-state{text-align:center;color:var(--muted);padding:50px 10px;grid-column:1/-1}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.benefit{border:1px solid var(--border);background:var(--surface);border-radius:13px;padding:25px}.benefit i{font-size:23px;color:#6cb4ff;margin-bottom:20px}.benefit h3{font-size:15px;margin-bottom:9px}.benefit p{font-size:12px;color:var(--muted)}.order-banner{background:radial-gradient(ellipse at 90% 20%,#214e9b66,transparent 50%),linear-gradient(120deg,#101c30,#0c1422);border:1px solid #263e61;padding:45px;border-radius:18px;display:flex;justify-content:space-between;align-items:center;gap:25px}.order-banner h2{font-size:27px;margin:9px 0}.order-banner p{color:var(--muted);font-size:12px}
footer{border-top:1px solid var(--border);padding:40px 0 25px;background:#090d14}.footer-top{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;padding-bottom:30px}.footer-about{max-width:340px}.footer-about p{color:var(--muted);font-size:12px;margin-top:12px}.footer-links h4{font-size:12px;margin-bottom:12px}.footer-links a{display:block;color:var(--muted);font-size:11px;margin:8px 0}.footer-links a:hover{color:white}.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:10px;flex-wrap:wrap}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:#000b;backdrop-filter:blur(6px);display:none;justify-content:center;align-items:center;padding:18px}.modal-backdrop.show{display:flex}.modal{width:min(460px,100%);max-height:85vh;overflow:auto;background:#101827;border:1px solid #2a3b56;border-radius:16px;padding:25px;animation:appear .2s ease}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px}.modal-head h3{font-size:19px}.close-btn{background:#1b2638;border:none;color:white;border-radius:7px;width:34px;height:34px}.cart-item{padding:14px 0;display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--border)}.cart-item strong{font-size:12px;display:block}.cart-item small{color:var(--muted);font-size:10px}.cart-item button{background:none;color:#ff7890;border:none;font-size:11px}.cart-total{display:flex;justify-content:space-between;margin:23px 0;font-weight:700}.modal .btn{width:100%;margin-top:9px}.toast{position:fixed;z-index:150;bottom:25px;left:50%;transform:translate(-50%,20px);background:#15243a;border:1px solid #315582;padding:12px 20px;border-radius:9px;font-size:12px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.reveal{animation:reveal .6s ease both}@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.nav-links{display:none}.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding-top:65px}.server-card{max-width:520px;width:100%}.categories{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.trust-grid{grid-template-columns:repeat(2,1fr)}.benefits-grid{grid-template-columns:1fr}}
@media(max-width:520px){.navbar{height:66px}.logo{font-size:19px}.nav-actions .contact-btn{display:none}.hero{padding:55px 0}h1{letter-spacing:-1.6px}.hero-stats{gap:20px}.server-card{padding:19px}section{padding:60px 0}.categories{gap:10px}.category-card{padding:16px 13px}.product-grid{grid-template-columns:1fr}.product-art{height:175px}.order-banner{padding:27px 21px;align-items:flex-start;flex-direction:column}.trust-item{gap:9px}.trust-item strong{font-size:10px}.footer-bottom{flex-direction:column}}


.account-btn { white-space: nowrap; }
.account-profile { display:flex;align-items:center;gap:12px;background:#111d30;border:1px solid var(--border);padding:14px;border-radius:10px;margin-bottom:18px }
.account-avatar { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#1d477c;color:#a9d5ff;font-weight:800;font-size:17px }
.account-profile strong { display:block;font-size:13px }
.account-profile small { display:block;color:var(--muted);font-size:11px;overflow-wrap:anywhere }
.account-form label { display:block;font-size:11px;color:#bdc8d8;margin:13px 0 6px }
.account-form input { display:block;width:100%;padding:12px 13px;background:#0b111c;border:1px solid #2a3b56;border-radius:8px;color:white;outline:none;font-size:12px }
.account-form input:focus { border-color:var(--blue) }
.account-form .btn { margin-top:16px }
.account-switch { text-align:center;color:var(--muted);font-size:11px;margin-top:16px }
.account-switch button { color:#7dbaff;background:none;border:0;font-weight:700 }
.account-note { color:var(--muted);font-size:10px;line-height:1.7;margin-top:14px }
.form-error { color:#ff8ba0;font-size:11px;margin-top:10px }
@media(max-width:520px){.account-btn{padding:10px 11px;font-size:11px}.nav-actions{gap:7px}}


/* Admin panel */
.admin-nav-btn{border-color:#31527b;color:#a8d2ff;white-space:nowrap}.admin-nav-btn:hover{background:#132846}
.admin-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.admin-topline strong,.admin-topline small{display:block}.admin-topline strong{font-size:14px}.admin-topline small{color:var(--muted);font-size:10px}.admin-add-btn{width:100%;margin:0 0 15px!important}.admin-product-list{display:grid;gap:8px}.admin-product-row{display:flex;align-items:center;gap:9px;padding:10px;background:#0c1421;border:1px solid var(--border);border-radius:9px}.admin-product-icon{width:35px;height:35px;display:grid;place-items:center;flex-shrink:0;background:#172b49;color:#83bcff;border-radius:8px}.admin-product-info{min-width:0;flex:1}.admin-product-info strong,.admin-product-info small{display:block;overflow-wrap:anywhere}.admin-product-info strong{font-size:11px}.admin-product-info small{font-size:9px;color:var(--muted)}.admin-edit{padding:8px 10px;font-size:10px}.admin-delete,.admin-delete-confirm{padding:8px 10px;color:#ff9baa;border-color:#673344;background:#291521;font-size:10px}.admin-delete-confirm{width:100%;margin-top:18px!important}.admin-product-form select,.admin-product-form textarea{display:block;width:100%;padding:12px 13px;background:#0b111c;border:1px solid #2a3b56;border-radius:8px;color:white;outline:none;font-size:12px}.admin-product-form select:focus,.admin-product-form textarea:focus{border-color:var(--blue)}.admin-product-form textarea{resize:vertical}
@media(max-width:520px){.admin-nav-btn{padding:10px 9px;font-size:10px}.admin-product-row{gap:6px}.admin-edit{font-size:0}.admin-edit i{font-size:12px}.admin-delete{padding:8px}}

/* FIX: cegah tombol dan teks pada daftar produk admin turun/menumpuk */
.modal:has(.admin-product-list),
.modal:has(.admin-product-form) { width: min(680px, 100%); }
.admin-product-row { min-width: 0; }
.admin-product-row .btn { width: auto; flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
.admin-product-info { overflow: hidden; }
.admin-product-info strong,
.admin-product-info small { overflow-wrap: anywhere; word-break: normal; line-height: 1.45; }
.admin-topline > .btn { width: auto; flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
.admin-product-form .btn { width: 100%; }
@media (max-width: 520px) {
  .modal:has(.admin-product-list), .modal:has(.admin-product-form) { width: 100%; padding: 17px; }
  .admin-product-row { flex-wrap: wrap; }
  .admin-product-info { flex: 1 1 calc(100% - 55px); }
  .admin-product-row .btn { padding: 8px 10px; }
}