/* ============================================================ VPStrading - Tema Baru (halaman publik) Dimuat SETELAH style.css, jadi tampilan lama tertimpa. Tidak ada logika PHP yang berubah. ============================================================ */ :root{ --vt-paper:#FFFFFF; --vt-mist:#F5F8FC; --vt-plat1:#FAFCFE; --vt-plat2:#DDE4EE; --vt-plat3:#C9D3E0; --vt-line:#DCE3EC; --vt-line2:#C3CEDC; --vt-text:#0F1D33; --vt-muted:#596982; --vt-dim:#8493AA; --vt-blue:#1D5FD6; --vt-blue-d:#1749A8; --vt-blue-l:#4C8BF5; --vt-blue-soft:#EAF1FD; --vt-up:#0E9F6E; --vt-down:#E02424; --vt-amber:#B45309; --vt-amber-soft:#FEF6E7; --vt-r-s:8px; --vt-r-m:14px; --vt-r-l:18px; --vt-sh-s:0 1px 2px rgba(15,29,51,.06); --vt-sh-m:0 2px 6px rgba(15,29,51,.06),0 10px 28px -20px rgba(15,29,51,.4); --vt-metal:linear-gradient(145deg,var(--vt-plat1),var(--vt-plat2)); --vt-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --vt-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; } /* ---------- dasar ---------- */ body{ margin:0;color:var(--vt-text);font-family:var(--vt-sans);font-size:15px;line-height:1.6; background: linear-gradient(rgba(29,95,214,.055) 1px,transparent 1px) 0 0/100% 46px, linear-gradient(90deg,rgba(29,95,214,.05) 1px,transparent 1px) 0 0/46px 100%, var(--vt-mist); -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom,0px); } a{color:var(--vt-blue)} .container{max-width:1160px;margin:0 auto;padding:0 18px} .vt-mono{font-family:var(--vt-mono)} /* ---------- navbar ---------- */ .navbar{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,.93);backdrop-filter:blur(14px); border-bottom:1px solid var(--vt-line);box-shadow:none } .navbar .container{display:flex;align-items:center;gap:14px;height:60px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;color:var(--vt-text)} .brand-name{font-size:17px} .brand-dot{ width:36px;height:36px;border-radius:10px;background:var(--vt-metal); border:1px solid var(--vt-line2);box-shadow:var(--vt-sh-s); display:grid;place-items:center;color:var(--vt-blue);flex:none } .brand-logo{ height:38px;width:auto;max-width:170px;object-fit:contain;border-radius:8px; background:var(--vt-paper);padding:2px 4px;border:1px solid var(--vt-line);flex:none } @media(max-width:720px){.brand-logo{height:32px;max-width:120px}.brand-name{font-size:15.5px}} .nav-links{margin-left:auto;display:flex;align-items:center;gap:22px} .nav-links a{color:var(--vt-muted);font-size:14.5px;font-weight:500;text-decoration:none} .nav-links a:hover{color:var(--vt-blue)} .nav-toggle{ display:none;width:42px;height:42px;border:1px solid var(--vt-line2);border-radius:var(--vt-r-s); background:var(--vt-paper);color:var(--vt-text);font-size:18px;box-shadow:var(--vt-sh-s) } @media(max-width:979px){ .nav-toggle{display:grid;place-items:center;margin-left:auto} .nav-links{ display:none;position:absolute;left:0;right:0;top:60px;flex-direction:column; align-items:stretch;gap:0;background:var(--vt-paper);border-bottom:1px solid var(--vt-line2); padding:8px 18px 14px;box-shadow:var(--vt-sh-m) } .nav-links.show{display:flex} .nav-links a{padding:12px 4px;border-bottom:1px solid var(--vt-line);font-size:15px} .nav-links a:last-child{border-bottom:0} } /* ---------- tombol ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 20px;border-radius:var(--vt-r-s);border:1px solid transparent; font-weight:600;font-size:15px;background:var(--vt-blue);color:#fff;text-decoration:none; box-shadow:0 1px 2px rgba(29,95,214,.3);transition:background .15s,transform .15s } .btn:hover{background:var(--vt-blue-d);color:#fff} .btn:active{transform:translateY(1px)} .btn-outline{background:var(--vt-paper);border-color:var(--vt-line2);color:var(--vt-text);box-shadow:var(--vt-sh-s)} .btn-outline:hover{border-color:var(--vt-blue);color:var(--vt-blue);background:var(--vt-paper)} .btn-accent{background:var(--vt-up) !important;color:#fff} .btn-accent:hover{background:#0c8a5f !important} .btn-sm{padding:9px 14px;font-size:13.5px} .btn-block{width:100%} .btn-wa{background:#1FAF54 !important} .btn-wa:hover{background:#199445 !important} /* ---------- hero ---------- */ .hero{ background:transparent !important;color:var(--vt-text); padding:46px 0 34px;text-align:left } .hero .container{max-width:1160px} .hero h1{ font-size:clamp(1.65rem,5.4vw,2.9rem);line-height:1.06;letter-spacing:-.025em; font-weight:800;margin:0 0 14px;color:var(--vt-text);max-width:20ch } .hero p{font-size:clamp(.95rem,2.8vw,1.05rem);color:var(--vt-muted);max-width:52ch;margin:0 0 24px} .hero-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start} @media(min-width:980px){.hero{padding:64px 0 48px}} /* penanda kecil (dipakai include vt_hero_tags.php bila dipasang) */ .vt-tag{ display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:6px; font-family:var(--vt-mono);font-size:11.5px;border:1px solid var(--vt-line2); background:var(--vt-paper);color:var(--vt-muted);margin:0 6px 10px 0 } .vt-tag-up{color:var(--vt-up);border-color:#A7E3CC;background:#EAF8F2} .vt-led{width:8px;height:8px;border-radius:50%;flex:none;background:var(--vt-plat3)} .vt-led.on{background:var(--vt-up);box-shadow:0 0 7px rgba(14,159,110,.75)} .vt-led.idle{background:var(--vt-blue);box-shadow:0 0 7px rgba(29,95,214,.7)} /* ---------- bagian ---------- */ .section{padding:48px 0} .section-alt{background:var(--vt-paper);border-block:1px solid var(--vt-line)} .section-title{ font-size:clamp(1.25rem,4.2vw,1.85rem);line-height:1.15;letter-spacing:-.02em; font-weight:800;color:var(--vt-text);margin:0 0 8px;text-align:left } .section-subtitle{color:var(--vt-muted);margin:0 0 26px;text-align:left;max-width:60ch;font-size:14px} /* ---------- kartu paket bergaya rak server ---------- */ .plans-grid{ display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); align-items:start } .plan-card{ position:relative;background:var(--vt-paper);border:1px solid var(--vt-line); border-radius:var(--vt-r-m);padding:18px 18px 18px 46px;box-shadow:var(--vt-sh-s); display:flex;flex-direction:column;gap:11px;text-align:left;height:100% } /* panel muka rak: pelat perak + lampu + ventilasi */ .plan-card::before{ content:"";position:absolute;left:14px;top:18px;bottom:18px;width:20px;border-radius:5px; background:var(--vt-metal);border:1px solid var(--vt-line2) } .plan-card::after{ content:"";position:absolute;left:19px;top:44px;width:10px;height:44px;border-radius:2px; background:repeating-linear-gradient(180deg,var(--vt-plat3) 0 2px,transparent 2px 6px) } .plan-card.featured{border-color:var(--vt-blue);box-shadow:var(--vt-sh-m)} /* lampu status di atas ventilasi */ .plan-card .plan-name::before{ content:"";position:absolute;left:20px;top:26px;width:8px;height:8px;border-radius:50%; background:var(--vt-up);box-shadow:0 0 7px rgba(14,159,110,.75) } .plan-card .ribbon{ position:absolute !important;top:-10px !important;right:14px !important;left:auto !important; width:auto !important;transform:none !important;background:var(--vt-blue) !important;color:#fff !important; font-family:var(--vt-mono);font-size:10.5px;font-weight:500;letter-spacing:.03em; padding:3px 9px !important;border-radius:5px !important;box-shadow:var(--vt-sh-s);text-align:center } .plan-name{margin:0;font-size:16.5px;font-weight:800;color:var(--vt-text)} .plan-type{ font-family:var(--vt-mono);font-size:10.5px;color:var(--vt-dim); letter-spacing:.04em;margin:-7px 0 0;text-transform:lowercase } .plan-specs{ display:grid;grid-template-columns:repeat(2,1fr);gap:7px 12px; font-family:var(--vt-mono);font-size:12.5px; border-block:1px solid var(--vt-line);padding:12px 0;margin:0;background:transparent } .plan-specs div{display:flex;gap:6px;align-items:baseline;color:var(--vt-muted);justify-content:flex-start} .plan-specs b{color:var(--vt-text);font-weight:700} .plan-prices{margin:0;padding:0;border:0;background:transparent} .plan-prices ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .plan-prices li{ display:flex;justify-content:space-between;gap:12px;align-items:baseline; font-family:var(--vt-mono);font-size:12.5px;color:var(--vt-muted); border:0;padding:0;background:transparent } .plan-prices li b{color:var(--vt-blue);font-weight:700;font-size:13.5px} .plan-card .btn{margin-top:auto} /* ---------- fitur ---------- */ .features-grid{display:grid;gap:12px;grid-template-columns:1fr} @media(min-width:620px){.features-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.features-grid{grid-template-columns:repeat(4,1fr)}} .feature{ background:var(--vt-mist);border:1px solid var(--vt-line);border-radius:var(--vt-r-m); padding:18px;text-align:left;box-shadow:none } .feature h3{margin:0 0 5px;font-size:15px;color:var(--vt-text)} .feature p{margin:0;color:var(--vt-muted);font-size:13.5px} .feature-icon{ width:38px;height:38px;border-radius:9px;background:var(--vt-metal);border:1px solid var(--vt-line2); color:var(--vt-blue);display:grid;place-items:center;margin:0 0 13px;font-size:18px;box-shadow:var(--vt-sh-s) } /* ---------- promo ---------- */ .promo-section{ padding:44px 0 !important; background:transparent !important;border-block:1px solid var(--vt-line) } .promo-grid{gap:14px !important} .promo-card,.order-card,.summary-box{ background:var(--vt-paper);border:1px solid var(--vt-line);border-radius:var(--vt-r-m); box-shadow:var(--vt-sh-s);overflow:hidden } .promo-badge{background:var(--vt-blue) !important;font-family:var(--vt-mono)} /* ---------- form & order ---------- */ .order-section{padding:34px 0} .order-card{padding:18px} .summary-box{padding:18px;background:var(--vt-metal)} .form-group{margin-bottom:14px} .form-group label{display:block;font-size:13px;color:var(--vt-muted);margin-bottom:6px;font-weight:600} .form-group input,.form-group select,.form-group textarea, input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{ width:100%;background:var(--vt-paper);border:1px solid var(--vt-line2);border-radius:var(--vt-r-s); padding:12px 14px;color:var(--vt-text);font-family:var(--vt-sans);font-size:15px } input:focus,select:focus,textarea:focus{outline:2px solid var(--vt-blue);outline-offset:1px;border-color:var(--vt-blue)} .form-row{display:grid;gap:12px} @media(min-width:680px){.form-row{grid-template-columns:repeat(2,1fr)}} .plan-tabs{display:flex;flex-wrap:wrap;gap:8px} .plan-tab{ border:1px solid var(--vt-line2);background:var(--vt-paper);border-radius:7px; padding:9px 14px;font-family:var(--vt-mono);font-size:13px;font-weight:600;color:var(--vt-muted);cursor:pointer } .plan-tab.active,.plan-tab[aria-pressed=true]{border-color:var(--vt-blue);background:var(--vt-blue-soft);color:var(--vt-blue)} /* ---------- alert ---------- */ .alert{border-radius:var(--vt-r-s);padding:12px 14px;font-size:14px;border:1px solid var(--vt-line2);background:var(--vt-paper)} .alert.success{background:#EAF8F2;border-color:#A7E3CC;color:#0B6B4B} .alert.error{background:#FDECEC;border-color:#F7C4C4;color:#8C1C1C} /* ---------- footer ---------- */ .footer{ background:var(--vt-metal);color:var(--vt-muted); border-top:1px solid var(--vt-line2);padding:36px 0 110px;font-size:14px } .footer h4,.footer h3{color:var(--vt-text);font-size:14px;margin:0 0 12px} .footer a{color:var(--vt-muted);text-decoration:none} .footer a:hover{color:var(--vt-blue)} .footer-bottom{ border-top:1px solid var(--vt-line2);margin-top:22px;padding-top:16px; font-family:var(--vt-mono);font-size:12px;color:var(--vt-dim) } @media(min-width:980px){.footer{padding-bottom:36px}} /* tombol WA melayang tidak menabrak menu bawah */ .fab-wa{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important} @media(min-width:980px){.fab-wa{bottom:24px !important}} /* ---------- layar kecil ---------- */ @media(max-width:720px){ body{font-size:14px;line-height:1.55} .container{padding:0 14px} .section{padding:34px 0} .section-subtitle{font-size:13px;margin-bottom:18px} .hero{padding:26px 0 24px} .btn{padding:11px 16px;font-size:14px} .plan-card{padding:15px 15px 15px 42px} .plans-grid{grid-template-columns:1fr} .feature{padding:15px} .footer{font-size:13px} } /* ============================================================ Konfigurator paket (slider) + komponen tambahan ============================================================ */ .vt-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--vt-mono);font-size:12px;color:var(--vt-blue);margin-bottom:10px} .vt-cfg{ display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start; background:var(--vt-paper);border:1px solid var(--vt-line2);border-radius:var(--vt-r-l); padding:18px;box-shadow:var(--vt-sh-m) } @media(min-width:900px){.vt-cfg{grid-template-columns:auto 1fr 300px}} .vt-rack-face{ width:26px;border-radius:6px;background:var(--vt-metal);border:1px solid var(--vt-line2); display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 0;align-self:stretch } .vt-vents{flex:1;width:10px;margin-top:4px;border-radius:2px; background:repeating-linear-gradient(180deg,var(--vt-plat3) 0 2px,transparent 2px 6px)} .vt-cfg-main{min-width:0} .vt-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .vt-chips{display:flex;flex-wrap:wrap;gap:8px} .vt-chip{ border:1px solid var(--vt-line2);background:var(--vt-paper);border-radius:7px; padding:9px 14px;font-family:var(--vt-mono);font-size:12.5px;font-weight:600; color:var(--vt-muted);cursor:pointer } .vt-chip[aria-pressed=true]{border-color:var(--vt-blue);background:var(--vt-blue-soft);color:var(--vt-blue)} .vt-save{color:var(--vt-up);font-size:11px;margin-left:5px} .vt-sl{margin-bottom:18px} .vt-sl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px} .vt-sl-head label{font-size:14px;font-weight:600;color:var(--vt-text)} .vt-sl-val{font-family:var(--vt-mono);font-weight:700;font-size:15px;color:var(--vt-blue)} .vt-sl input[type=range]{width:100%;accent-color:var(--vt-blue);height:24px;margin:0;cursor:pointer} .vt-sl-scale{display:flex;justify-content:space-between;font-family:var(--vt-mono);font-size:11px;color:var(--vt-dim)} .vt-note{margin:8px 0 0;color:var(--vt-muted);font-size:12.5px} .vt-cfg-price{ grid-column:1/-1;background:var(--vt-metal);border:1px solid var(--vt-line2); border-radius:var(--vt-r-m);padding:16px } @media(min-width:900px){.vt-cfg-price{grid-column:auto;align-self:start;position:sticky;top:78px}} .vt-lbl{font-family:var(--vt-mono);font-size:11px;color:var(--vt-muted)} .vt-n{font-family:var(--vt-mono);font-size:clamp(20px,5.2vw,26px);font-weight:700;color:var(--vt-blue);line-height:1.2;letter-spacing:-.02em} .vt-sub{font-family:var(--vt-mono);font-size:11px;color:var(--vt-muted);margin-top:2px} .vt-recap{margin:12px 0;padding:12px 0;border-block:1px solid var(--vt-line2);display:grid;gap:6px;font-family:var(--vt-mono);font-size:12.5px} .vt-recap div{display:flex;justify-content:space-between;gap:10px} .vt-recap .k{color:var(--vt-muted)} .vt-custom{ margin-top:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between; background:var(--vt-paper);border:1px dashed var(--vt-line2);border-radius:var(--vt-r-m);padding:16px } .vt-custom .muted{display:block;color:var(--vt-muted);font-size:13.5px;margin-top:3px} /* langkah cara order */ .vt-steps{display:grid;gap:1px;background:var(--vt-line2);border:1px solid var(--vt-line2);border-radius:var(--vt-r-m);overflow:hidden} @media(min-width:860px){.vt-steps{grid-template-columns:repeat(4,1fr)}} .vt-step{background:var(--vt-paper);padding:18px} .vt-step b{display:block;margin-bottom:5px;font-size:15px} .vt-step .muted{color:var(--vt-muted);font-size:13.5px} .vt-step-no{font-family:var(--vt-mono);font-size:12px;color:var(--vt-blue);margin-bottom:8px} /* blok kontak */ .vt-kontak{display:grid;gap:10px;margin-top:18px} @media(min-width:620px){.vt-kontak{grid-template-columns:repeat(2,1fr)}} .vt-kontak a{ display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--vt-r-m); background:var(--vt-paper);border:1px solid var(--vt-line2);box-shadow:var(--vt-sh-s);text-decoration:none;color:var(--vt-text) } .vt-kontak a:hover{border-color:var(--vt-blue)} .vt-ik{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;color:#fff} .vt-ik.wa{background:#1FAF54} .vt-ik.tg{background:#2AABEE} .vt-lbl2{display:block;font-size:12px;color:var(--vt-muted)} .vt-val2{display:block;font-family:var(--vt-mono);font-weight:700;font-size:15px} /* konfigurator di layar kecil: harga jadi bar tipis yang menempel */ @media(max-width:899px){ .vt-cfg{display:flex;flex-direction:column;padding:14px;gap:12px} .vt-cfg .vt-rack-face{display:none} .vt-cfg-price{ order:-1;position:sticky;top:64px;z-index:30;margin:0;padding:9px 12px; display:flex;align-items:center;gap:10px;box-shadow:0 8px 20px -16px rgba(15,29,51,.9) } .vt-harga{flex:1;min-width:0} .vt-harga .vt-n{font-size:20px} .vt-cfg-price .vt-recap,.vt-cfg-price .vt-note{display:none} .vt-cfg-price .btn{width:auto;flex:none;margin:0;padding:9px 14px;font-size:13px} } /* logo sosial media di kaki halaman */ .vt-sosmed{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} .vt-sosmed a{ width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:var(--vt-paper);border:1px solid var(--vt-line2);box-shadow:var(--vt-sh-s); color:var(--vt-muted);transition:transform .15s,border-color .15s,color .15s } .vt-sosmed a:hover{transform:translateY(-2px)} .vt-sosmed a.wa:hover{color:#1FAF54;border-color:#1FAF54} .vt-sosmed a.tg:hover{color:#2AABEE;border-color:#2AABEE} .vt-sosmed a.ml:hover{color:var(--vt-blue);border-color:var(--vt-blue)} .vt-sosmed a.yt:hover{color:#FF0033;border-color:#FF0033} /* tombol di hero: pastikan terbaca (aturan lama memakai teks putih) */ .hero .btn,.hero .btn:hover{color:#fff !important} .hero .btn-outline,.hero .btn-outline:hover{ background:var(--vt-paper) !important;border:1px solid var(--vt-line2) !important;color:var(--vt-text) !important } .hero .btn-outline:hover{border-color:var(--vt-blue) !important;color:var(--vt-blue) !important} .hero .btn svg{flex:none} /* tombol WhatsApp melayang */ .fab-wa{ width:54px;height:54px;border-radius:16px !important;display:grid !important;place-items:center; background:#1FAF54 !important;color:#fff !important;font-size:0 !important; box-shadow:0 12px 26px -12px rgba(31,175,84,.9) !important;text-decoration:none } .fab-wa svg{font-size:initial} /* teks promo dari admin: rapikan */ .promo-title{font-size:16px;font-weight:800;color:var(--vt-text);margin:0 0 6px} .promo-subtitle{font-size:13px;color:var(--vt-blue);font-family:var(--vt-mono);margin-bottom:8px} .promo-desc{font-size:13.5px;color:var(--vt-muted);margin:0} .promo-body{padding:16px} .promo-footer{padding:0 16px 16px;display:grid;gap:8px} .promo-expires{font-family:var(--vt-mono);font-size:11.5px;color:var(--vt-amber)} .promo-voucher-box{ display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px; background:var(--vt-blue-soft);border:1px dashed var(--vt-blue);border-radius:var(--vt-r-s);padding:9px 12px } .promo-voucher-code{font-family:var(--vt-mono);font-weight:700;letter-spacing:.08em;color:var(--vt-blue)} .promo-copy-btn{ border:1px solid var(--vt-line2);background:var(--vt-paper);border-radius:7px; padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--vt-text);cursor:pointer } .promo-copy-btn:hover{border-color:var(--vt-blue);color:var(--vt-blue)} .promo-image{height:120px;background-size:cover;background-position:center} .promo-image-fallback{background:var(--vt-metal) !important} /* ============================================================ Halaman order ============================================================ */ .order-section{padding:30px 0 40px} .order-card{padding:20px} .vt-h3{ font-size:15.5px;font-weight:800;color:var(--vt-text);margin:26px 0 14px; display:flex;align-items:center;gap:9px } .vt-h3::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--vt-blue);flex:none } .summary-box{ background:var(--vt-metal);border:1px solid var(--vt-line2);border-radius:var(--vt-r-m); padding:16px;margin:18px 0;font-size:14px } .summary-box b,.summary-box strong{font-family:var(--vt-mono);font-weight:700} .summary-box hr{border:0;border-top:1px solid var(--vt-line2);margin:10px 0} #summary-content{display:grid;gap:7px} #summary-content div{display:flex;justify-content:space-between;gap:12px} /* ringkasan menempel di HP supaya total selalu terlihat */ @media(max-width:899px){ .vt-sticky-sum{ position:sticky;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:29; box-shadow:0 -8px 22px -16px rgba(15,29,51,.9);margin-bottom:14px } } /* kartu pilihan CPU */ #cpuTypeBox{gap:10px} .cpu-card .cpu-name{font-weight:700;font-size:14px;color:var(--vt-text)} .cpu-card .cpu-desc{font-size:12.5px;color:var(--vt-muted);margin-top:2px} #cpuAvxHint{ background:var(--vt-blue-soft) !important;border:1px solid #B9D2F8 !important; color:var(--vt-blue) !important;border-radius:var(--vt-r-s) !important;font-size:12.5px !important } /* ============================================================ Halaman Info & Promo ============================================================ */ .vt-pita-wrap{padding-top:6px;padding-bottom:6px} .vt-pita{ display:flex;align-items:center;gap:12px;padding:13px 16px;text-decoration:none; background:linear-gradient(115deg,var(--vt-blue-soft),var(--vt-paper) 70%); border:1px solid var(--vt-line2);border-radius:var(--vt-r-m);box-shadow:var(--vt-sh-s);color:var(--vt-text) } .vt-pita:hover{border-color:var(--vt-blue)} .vt-pita-tanda{ width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center; background:var(--vt-paper);border:1px solid var(--vt-line2);color:var(--vt-blue) } .vt-pita-teks{flex:1;min-width:0;font-size:13px;line-height:1.45} .vt-pita-teks b{display:block;font-size:14.5px} .vt-pita-teks span{color:var(--vt-muted)} .vt-pita-panah{color:var(--vt-blue);flex:none} .vt-info-list{display:grid;gap:14px} @media(min-width:900px){.vt-info-list{grid-template-columns:repeat(2,1fr)}} .vt-info{ background:var(--vt-paper);border:1px solid var(--vt-line);border-radius:var(--vt-r-l); overflow:hidden;box-shadow:var(--vt-sh-s);display:flex;flex-direction:column } .vt-info-gambar{height:150px;background-size:cover;background-position:center;background-color:var(--vt-plat2)} .vt-info-isi{padding:18px;display:flex;flex-direction:column;flex:1} .vt-info-atas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .vt-label{ display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px; font-family:var(--vt-mono);font-size:11px;border:1px solid var(--vt-line2); background:var(--vt-mist);color:var(--vt-muted) } .vt-label.promo{color:var(--vt-blue);border-color:#B9D2F8;background:var(--vt-blue-soft)} .vt-label.kabar{color:var(--vt-up);border-color:#A7E3CC;background:#EAF8F2} .vt-label.waktu{color:var(--vt-amber);border-color:#F3D9A8;background:var(--vt-amber-soft)} .vt-info h2{font-size:17px;margin:0 0 6px;letter-spacing:-.01em} .vt-info-sub{font-family:var(--vt-mono);font-size:12.5px;color:var(--vt-blue);margin-bottom:10px} .vt-info p{margin:0 0 14px;font-size:13.5px;color:var(--vt-muted);line-height:1.7} .vt-voucher{ display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px; background:var(--vt-mist);border:1px dashed var(--vt-blue);border-radius:var(--vt-r-s);padding:10px 13px } .vt-voucher .k{display:block;font-family:var(--vt-mono);font-size:10.5px;color:var(--vt-muted)} .vt-voucher .v{display:block;font-family:var(--vt-mono);font-weight:700;font-size:16px;letter-spacing:.09em;color:var(--vt-blue)} .vt-info-aksi{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .vt-info-tgl{font-family:var(--vt-mono);font-size:11.5px;color:var(--vt-dim)} .vt-kosong{ text-align:center;padding:44px 20px;background:var(--vt-paper); border:1px dashed var(--vt-line2);border-radius:var(--vt-r-l);color:var(--vt-muted) } .vt-kosong svg{color:var(--vt-line2);margin-bottom:12px} .vt-kosong h3{margin:0 0 8px;font-size:16px;color:var(--vt-text)} .vt-kosong p{margin:0 auto 18px;max-width:44ch;font-size:13.5px} .vt-arsip-judul{margin:34px 0 12px;font-size:15px;color:var(--vt-muted);font-weight:700} .vt-arsip{background:var(--vt-paper);border:1px solid var(--vt-line);border-radius:var(--vt-r-m);overflow:hidden} .vt-arsip-baris{ display:flex;justify-content:space-between;gap:14px;padding:12px 16px; border-bottom:1px solid var(--vt-line);font-size:13.5px;color:var(--vt-muted) } .vt-arsip-baris:last-child{border-bottom:0} .vt-arsip-baris .tgl{font-family:var(--vt-mono);font-size:12px;color:var(--vt-dim);white-space:nowrap} .vt-info-bantuan{ margin-top:30px;padding:18px;border-radius:var(--vt-r-m);background:var(--vt-metal); border:1px solid var(--vt-line2);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap } .vt-info-bantuan b{display:block;font-size:14.5px;margin-bottom:3px} .vt-info-bantuan span{color:var(--vt-muted);font-size:13px} .vt-info-kontak{display:flex;gap:8px;flex-wrap:wrap} /* biaya terminal di halaman order */ .vt-biaya-terminal{ margin-top:16px;padding:12px 14px;border-radius:var(--vt-r-s); background:var(--vt-blue-soft);border:1px solid #B9D2F8; display:flex;justify-content:space-between;align-items:baseline;gap:12px } .vt-biaya-terminal .k{display:block;font-family:var(--vt-mono);font-size:11px;color:var(--vt-blue)} .vt-biaya-terminal .s{display:block;font-size:12.5px;color:var(--vt-muted)} .vt-biaya-terminal b{font-family:var(--vt-mono);font-size:18px;color:var(--vt-blue)} /* ============================================================ TEMA GELAP Aktif saat ============================================================ */ html[data-tema="gelap"]{ --vt-paper:#131C2A; --vt-mist:#0B111B; --vt-plat1:#1E2A3C; --vt-plat2:#141E2D; --vt-plat3:#33415A; --vt-line:#22304A; --vt-line2:#2E3E5C; --vt-text:#E6EDF9; --vt-muted:#93A2BE; --vt-dim:#6B7C99; --vt-blue:#4C8BF5; --vt-blue-d:#2E6FE8; --vt-blue-l:#79A9FF; --vt-blue-soft:#17253C; --vt-up:#2FD98C; --vt-down:#FF5C6C; --vt-amber:#F7B733; --vt-amber-soft:#2A2213; --vt-sh-s:0 1px 2px rgba(0,0,0,.4); --vt-sh-m:0 2px 6px rgba(0,0,0,.4),0 10px 28px -20px rgba(0,0,0,.9); --vt-sh-l:0 24px 60px -34px rgba(0,0,0,.95); --vt-metal:linear-gradient(145deg,#1E2A3C,#141E2D); color-scheme:dark; } html[data-tema="gelap"] body{ background: linear-gradient(rgba(76,139,245,.07) 1px,transparent 1px) 0 0/100% 46px, linear-gradient(90deg,rgba(76,139,245,.06) 1px,transparent 1px) 0 0/46px 100%, var(--vt-mist); color:var(--vt-text); } /* bar yang memakai warna putih tembus pandang */ html[data-tema="gelap"] .navbar, html[data-tema="gelap"] .adm-topbar, html[data-tema="gelap"] .appbar, html[data-tema="gelap"] .vt-dock, html[data-tema="gelap"] .rev{ background:rgba(11,17,27,.92) !important; } html[data-tema="gelap"] .vt-sheet, html[data-tema="gelap"] .drawer, html[data-tema="gelap"] .adm-sidebar{background:var(--vt-paper) !important} html[data-tema="gelap"] .vt-scrim, html[data-tema="gelap"] .adm-overlay{background:rgba(0,0,0,.6)} /* kotak isian */ html[data-tema="gelap"] input, html[data-tema="gelap"] select, html[data-tema="gelap"] textarea{ background:var(--vt-mist) !important;color:var(--vt-text) !important;border-color:var(--vt-line2) !important } html[data-tema="gelap"] input::placeholder, html[data-tema="gelap"] textarea::placeholder{color:var(--vt-dim)} /* elemen lama yang warnanya ditulis langsung di berkas */ html[data-tema="gelap"] .card, html[data-tema="gelap"] .login-card, html[data-tema="gelap"] .order-card, html[data-tema="gelap"] .promo-card, html[data-tema="gelap"] .table-wrap, html[data-tema="gelap"] .cpu-card, html[data-tema="gelap"] .plan-up-card, html[data-tema="gelap"] .pay-card, html[data-tema="gelap"] .vt-info, html[data-tema="gelap"] .vt-bayar, html[data-tema="gelap"] .feature, html[data-tema="gelap"] .plan-card, html[data-tema="gelap"] .vt-kontrol, html[data-tema="gelap"] .unit, html[data-tema="gelap"] .vt-cfg{ background:var(--vt-paper) !important;border-color:var(--vt-line) !important;color:var(--vt-text) } html[data-tema="gelap"] .cpu-card.selected, html[data-tema="gelap"] .plan-up-card.selected, html[data-tema="gelap"] .pay-card.selected, html[data-tema="gelap"] .choice[aria-pressed="true"]{ background:var(--vt-blue-soft) !important;border-color:var(--vt-blue) !important } html[data-tema="gelap"] .vt-trow, html[data-tema="gelap"] .vt-bayar-atas, html[data-tema="gelap"] .rdp, html[data-tema="gelap"] .feat, html[data-tema="gelap"] .vt-arsip{background:var(--vt-mist) !important} html[data-tema="gelap"] .section-alt{background:var(--vt-paper);border-color:var(--vt-line)} html[data-tema="gelap"] .footer{background:var(--vt-metal);border-color:var(--vt-line2)} html[data-tema="gelap"] th{color:var(--vt-dim);border-color:var(--vt-line)} html[data-tema="gelap"] td{border-color:var(--vt-line);color:var(--vt-text)} html[data-tema="gelap"] hr{border-color:var(--vt-line)} html[data-tema="gelap"] .muted, html[data-tema="gelap"] .section-subtitle, html[data-tema="gelap"] .hint{color:var(--vt-muted) !important} html[data-tema="gelap"] .section-title, html[data-tema="gelap"] h1,html[data-tema="gelap"] h2, html[data-tema="gelap"] h3,html[data-tema="gelap"] h4, html[data-tema="gelap"] b,html[data-tema="gelap"] strong{color:var(--vt-text)} /* status & label */ html[data-tema="gelap"] .alert{background:var(--vt-paper);border-color:var(--vt-line2);color:var(--vt-text)} html[data-tema="gelap"] .alert.success{background:#0F2A20;border-color:#1D5B43;color:#8FE8C2} html[data-tema="gelap"] .alert.error{background:#2C1518;border-color:#6B2A2F;color:#FFB3B8} html[data-tema="gelap"] .badge{background:var(--vt-mist);border-color:var(--vt-line2);color:var(--vt-muted)} html[data-tema="gelap"] .badge-aktif, html[data-tema="gelap"] .badge-selesai{background:#0F2A20;border-color:#1D5B43;color:#4FE0A2} html[data-tema="gelap"] .badge-baru, html[data-tema="gelap"] .badge-diproses{background:var(--vt-blue-soft);border-color:#2E4E7D;color:#8FB8FF} html[data-tema="gelap"] .badge-dibatalkan{background:#2C1518;border-color:#6B2A2F;color:#FF9AA0} html[data-tema="gelap"] .note, html[data-tema="gelap"] .vt-modal-spek{background:var(--vt-mist);border-color:var(--vt-line2);color:var(--vt-text)} html[data-tema="gelap"] .vt-modal{background:var(--vt-paper);border-color:var(--vt-line2)} /* tombol berlatar putih */ html[data-tema="gelap"] .btn-outline, html[data-tema="gelap"] .btn-ghost, html[data-tema="gelap"] .vt-chip, html[data-tema="gelap"] .chip, html[data-tema="gelap"] .plan-tab, html[data-tema="gelap"] .burger, html[data-tema="gelap"] .icon-btn, html[data-tema="gelap"] .promo-copy-btn, html[data-tema="gelap"] .vt-sosmed a, html[data-tema="gelap"] .vt-kontak a, html[data-tema="gelap"] .vt-tema-btn{ background:var(--vt-paper) !important;color:var(--vt-text) !important;border-color:var(--vt-line2) !important } html[data-tema="gelap"] .vt-chip[aria-pressed="true"], html[data-tema="gelap"] .chip[aria-pressed="true"], html[data-tema="gelap"] .plan-tab.active{ background:var(--vt-blue-soft) !important;color:var(--vt-blue) !important;border-color:var(--vt-blue) !important } html[data-tema="gelap"] .rdp-btn{background:var(--vt-paper);color:var(--vt-blue)} /* blok RDP biru di halaman VPS Saya tetap terbaca */ html[data-tema="gelap"] .pwd-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)} /* gambar dan QR jangan menyilaukan */ html[data-tema="gelap"] .vt-qris-kotak img{background:#fff} /* ============================================================ TEMA GELAP - lapisan kedua Menimpa warna yang ditulis langsung di dalam berkas PHP. Memakai !important karena warna itu menempel di atribut style. ============================================================ */ /* ---------- latar putih ---------- */ html[data-tema="gelap"] [style*="background:#fff"], html[data-tema="gelap"] [style*="background: #fff"], html[data-tema="gelap"] [style*="background:#ffffff"], html[data-tema="gelap"] [style*="background:white"], html[data-tema="gelap"] [style*="background-color:#fff"], html[data-tema="gelap"] [style*="background-color: #fff"]{ background:var(--vt-paper) !important;color:var(--vt-text) !important } /* ---------- latar abu muda ---------- */ html[data-tema="gelap"] [style*="#f8fafc"], html[data-tema="gelap"] [style*="#f1f5f9"], html[data-tema="gelap"] [style*="#f9fafb"], html[data-tema="gelap"] [style*="#f3f4f6"], html[data-tema="gelap"] [style*="#e2e8f0"], html[data-tema="gelap"] [style*="#e5e7eb"]{ background-color:var(--vt-mist) !important;border-color:var(--vt-line) !important;color:var(--vt-text) !important } /* ---------- kotak biru muda ---------- */ html[data-tema="gelap"] [style*="#eff6ff"], html[data-tema="gelap"] [style*="#dbeafe"], html[data-tema="gelap"] [style*="#e0f2fe"]{ background-color:#152337 !important;border-color:#2E4E7D !important;color:#BBD4FF !important } /* ---------- kotak kuning peringatan ---------- */ html[data-tema="gelap"] [style*="#fef3c7"], html[data-tema="gelap"] [style*="#fefce8"], html[data-tema="gelap"] [style*="#fff7ed"], html[data-tema="gelap"] [style*="#ffedd5"]{ background-color:#2A2213 !important;border-color:#5C4718 !important;color:#F7CE73 !important } /* ---------- kotak hijau ---------- */ html[data-tema="gelap"] [style*="#dcfce7"], html[data-tema="gelap"] [style*="#f0fdf4"], html[data-tema="gelap"] [style*="#d1fae5"]{ background-color:#0F2A20 !important;border-color:#1D5B43 !important;color:#7FE3B8 !important } /* ---------- kotak merah ---------- */ html[data-tema="gelap"] [style*="#fee2e2"], html[data-tema="gelap"] [style*="#fef2f2"], html[data-tema="gelap"] [style*="#fecaca"]{ background-color:#2C1518 !important;border-color:#6B2A2F !important;color:#FFB3B8 !important } /* ---------- kotak ungu ---------- */ html[data-tema="gelap"] [style*="#faf5ff"], html[data-tema="gelap"] [style*="#f3e8ff"], html[data-tema="gelap"] [style*="#e9d5ff"]{ background-color:#231A33 !important;border-color:#4B3568 !important;color:#D6BBFB !important } /* ---------- tulisan gelap agar tetap terbaca ---------- */ html[data-tema="gelap"] [style*="color:#0f172a"], html[data-tema="gelap"] [style*="color: #0f172a"], html[data-tema="gelap"] [style*="color:#1e293b"], html[data-tema="gelap"] [style*="color:#111"], html[data-tema="gelap"] [style*="color:#000"], html[data-tema="gelap"] [style*="color:#333"]{ color:var(--vt-text) !important } html[data-tema="gelap"] [style*="color:#64748b"], html[data-tema="gelap"] [style*="color: #64748b"], html[data-tema="gelap"] [style*="color:#475569"], html[data-tema="gelap"] [style*="color:#94a3b8"], html[data-tema="gelap"] [style*="color:#6b7280"], html[data-tema="gelap"] [style*="color:#666"], html[data-tema="gelap"] [style*="color:#999"], html[data-tema="gelap"] [style*="color:#888"]{ color:var(--vt-muted) !important } /* ---------- tulisan berwarna: dicerahkan ---------- */ html[data-tema="gelap"] [style*="color:#2563eb"], html[data-tema="gelap"] [style*="color: #2563eb"], html[data-tema="gelap"] [style*="color:#1d4ed8"], html[data-tema="gelap"] [style*="color:#1e40af"]{ color:#79A9FF !important } html[data-tema="gelap"] [style*="color:#16a34a"], html[data-tema="gelap"] [style*="color:#15803d"], html[data-tema="gelap"] [style*="color:#166534"]{ color:#4FE0A2 !important } html[data-tema="gelap"] [style*="color:#dc2626"], html[data-tema="gelap"] [style*="color:#b91c1c"], html[data-tema="gelap"] [style*="color:#991b1b"], html[data-tema="gelap"] [style*="color:#ef4444"]{ color:#FF9AA0 !important } html[data-tema="gelap"] [style*="color:#7c3aed"], html[data-tema="gelap"] [style*="color:#6d28d9"], html[data-tema="gelap"] [style*="color:#a855f7"]{ color:#C4A5FB !important } html[data-tema="gelap"] [style*="color:#92400e"], html[data-tema="gelap"] [style*="color:#b45309"], html[data-tema="gelap"] [style*="color:#f59e0b"], html[data-tema="gelap"] [style*="color:#d97706"]{ color:#F7C35B !important } /* ---------- tombol berwarna tetap putih tulisannya ---------- */ html[data-tema="gelap"] .btn[style*="background:#2563eb"], html[data-tema="gelap"] .btn[style*="background:#7c3aed"], html[data-tema="gelap"] .btn[style*="background:#16a34a"], html[data-tema="gelap"] .btn[style*="background:#dc2626"], html[data-tema="gelap"] .btn[style*="background:#f59e0b"], html[data-tema="gelap"] .btn[style*="background:#25D366"]{ color:#fff !important } /* ---------- garis pemisah ---------- */ html[data-tema="gelap"] [style*="border:1px solid #e"], html[data-tema="gelap"] [style*="border:2px solid #e"], html[data-tema="gelap"] [style*="border-bottom:1px solid #e"], html[data-tema="gelap"] [style*="border-top:1px solid #e"]{ border-color:var(--vt-line) !important } /* ---------- bagian yang masih memakai warna terang dari style.css ---------- */ html[data-tema="gelap"] .promo-section, html[data-tema="gelap"] .cara-order-section, html[data-tema="gelap"] .order-section{ background:transparent !important } html[data-tema="gelap"] .cara-order-card, html[data-tema="gelap"] .promo-body, html[data-tema="gelap"] .promo-footer, html[data-tema="gelap"] .summary-box, html[data-tema="gelap"] .vt-step, html[data-tema="gelap"] .steps, html[data-tema="gelap"] .stat, html[data-tema="gelap"] .kpi, html[data-tema="gelap"] .stats{ background:var(--vt-paper) !important;border-color:var(--vt-line) !important } html[data-tema="gelap"] .summary-box{ background:var(--vt-metal) !important } html[data-tema="gelap"] .toast-notif{ background:var(--vt-paper) !important;color:var(--vt-text) !important;border:1px solid var(--vt-line2) } /* ---------- gambar & QR tetap berlatar putih agar terbaca pemindai ---------- */ html[data-tema="gelap"] img[alt="QRIS"], html[data-tema="gelap"] .vt-qris-kotak img{ background:#fff !important } /* ---------- kotak biru RDP di halaman VPS Saya ---------- */ html[data-tema="gelap"] [style*="linear-gradient(135deg,#2563eb"], html[data-tema="gelap"] [style*="linear-gradient(135deg, #2563eb"]{ background:linear-gradient(135deg,#1B3A6B,#16305A) !important } /* ============================================================ TEMA GELAP - lapisan ketiga Menimpa variabel milik style.css dan admin.css, plus blok warna yang ditulis di tiap halaman admin. ============================================================ */ html[data-tema="gelap"]{ /* milik style.css */ --bg:#0B111B; --bg-card:#131C2A; --text:#E6EDF9; --text-muted:#93A2BE; --border:#22304A; --primary:#4C8BF5; --primary-dark:#2E6FE8; --shadow:0 4px 16px rgba(0,0,0,.5); --shadow-hover:0 10px 30px rgba(0,0,0,.7); /* milik admin.css */ --card:#131C2A; --muted:#93A2BE; --bd:#22304A; --p:#4C8BF5; --pd:#2E6FE8; } /* ---------- dashboard admin ---------- */ html[data-tema="gelap"] .dash-fin .fc, html[data-tema="gelap"] .quick-actions a, html[data-tema="gelap"] .stat, html[data-tema="gelap"] .card, html[data-tema="gelap"] .box, html[data-tema="gelap"] .panel{ background:var(--vt-paper) !important; color:var(--vt-text) !important; border-color:var(--vt-line) !important; box-shadow:0 2px 10px rgba(0,0,0,.4) !important; } html[data-tema="gelap"] .quick-actions a:hover{background:var(--vt-mist) !important} /* kotak peringatan kuning di dashboard */ html[data-tema="gelap"] .warn-box{ background:linear-gradient(135deg,#2A2213,#3A2E16) !important; border-left-color:#B7841F !important; color:#F7CE73 !important; } html[data-tema="gelap"] .warn-box a{color:#FFD98A !important} html[data-tema="gelap"] .warn-box b, html[data-tema="gelap"] .warn-box strong{color:#FFE2A6 !important} /* grafik batang */ html[data-tema="gelap"] .mini-chart .bar{background:linear-gradient(180deg,#4C8BF5,#2E6FE8) !important} html[data-tema="gelap"] .mini-chart .bar.zero{background:var(--vt-line2) !important} /* tabel */ html[data-tema="gelap"] th{background:var(--vt-mist) !important;color:var(--vt-dim) !important} html[data-tema="gelap"] tr:hover td{background:var(--vt-mist) !important} html[data-tema="gelap"] table{background:transparent !important} /* lencana status bawaan admin.css */ html[data-tema="gelap"] .badge-baru{background:#2A2213 !important;color:#F7CE73 !important} html[data-tema="gelap"] .badge-diproses{background:#152337 !important;color:#8FB8FF !important} html[data-tema="gelap"] .badge-aktif{background:#0F2A20 !important;color:#4FE0A2 !important} html[data-tema="gelap"] .badge-selesai{background:#1B1F3A !important;color:#A8B4FF !important} /* sidebar tetap gelap, tapi selaraskan dengan tema */ html[data-tema="gelap"] .adm-sidebar{background:#0A0F18 !important;border-right:1px solid var(--vt-line)} html[data-tema="gelap"] .adm-nav a:hover{background:#15203A !important} html[data-tema="gelap"] .adm-nav a.active{background:#1B2941 !important} /* halaman umum publik */ html[data-tema="gelap"] .hero{background:transparent !important} html[data-tema="gelap"] .section{background:transparent} html[data-tema="gelap"] .container{background:transparent} /* apa pun yang masih berlatar putih murni */ html[data-tema="gelap"] [style*="background:#FFF"], html[data-tema="gelap"] [style*="background:#FFFFFF"], html[data-tema="gelap"] [style*="background:rgb(255,255,255)"], html[data-tema="gelap"] [style*="background:rgba(255,255,255"]{ background:var(--vt-paper) !important;color:var(--vt-text) !important } /* tulisan yang terlanjur putih di atas latar terang */ html[data-tema="gelap"] .warn-box li, html[data-tema="gelap"] .warn-box p, html[data-tema="gelap"] .warn-box span{color:#F0D79B !important} /* ============================================================ TEMA GELAP - lapisan keempat Dibuat otomatis dari blok