@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--mo-bg:#f5f7fb;--mo-surface:#fff;--mo-surface-2:#f8fafc;--mo-text:#0b1220;--mo-muted:#64748b;--mo-line:#e5eaf2;--mo-primary:#635bff;--mo-primary-2:#4f46e5;--mo-cyan:#06b6d4;--mo-green:#10b981;--mo-gold:#f59e0b;--mo-shadow:0 20px 60px rgba(15,23,42,.09);--mo-shadow-sm:0 8px 28px rgba(15,23,42,.07);--mo-radius:22px}
html[data-theme="dark"]{--mo-bg:#070b14;--mo-surface:#0e1524;--mo-surface-2:#111a2b;--mo-text:#f8fafc;--mo-muted:#94a3b8;--mo-line:#1d2940;--mo-shadow:0 24px 70px rgba(0,0,0,.38);--mo-shadow-sm:0 10px 30px rgba(0,0,0,.28)}
*,*:before,*:after{scrollbar-width:thin;scrollbar-color:var(--mo-primary) transparent}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;background:var(--mo-bg)!important;color:var(--mo-text)!important;line-height:1.65!important;transition:background .35s,color .35s}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(700px 420px at 8% -5%,rgba(99,91,255,.12),transparent 65%),radial-gradient(600px 360px at 92% 8%,rgba(6,182,212,.09),transparent 65%)}
a{transition:color .2s,border-color .2s,background .2s,transform .2s}
header{background:color-mix(in srgb,var(--mo-bg) 82%,transparent)!important;border-color:var(--mo-line)!important;box-shadow:0 1px 0 rgba(255,255,255,.03)}
nav{max-width:1320px!important;height:76px!important}
.logo-box{gap:12px!important}.logo-img{width:40px!important;height:40px!important;border-radius:13px!important;box-shadow:0 8px 25px rgba(99,91,255,.22)}.logo-text{font-weight:800!important;letter-spacing:-.03em!important}.logo-text span{color:var(--mo-primary)!important}
.nav-center{gap:.35rem!important}.nav-center a{padding:.65rem .85rem!important;border-radius:11px!important;font-size:.82rem!important;font-weight:700!important;color:var(--mo-muted)!important}.nav-center a:hover,.nav-center a.active{color:var(--mo-text)!important;background:var(--mo-surface-2)!important}
.theme-toggle,.hamburger{border-color:var(--mo-line)!important;background:var(--mo-surface)!important;color:var(--mo-text)!important;border-radius:12px!important}
.btn{border-radius:13px!important;font-weight:800!important;letter-spacing:-.01em;box-shadow:none!important}.btn-primary{background:linear-gradient(135deg,var(--mo-primary),var(--mo-primary-2))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 10px 24px rgba(99,91,255,.2)!important}.btn-primary:hover{transform:translateY(-2px)!important;box-shadow:0 16px 32px rgba(99,91,255,.25)!important}.btn-outline,.btn-ghost,.btn-soft{border-color:var(--mo-line)!important;background:var(--mo-surface)!important;color:var(--mo-text)!important}.btn-outline:hover,.btn-ghost:hover,.btn-soft:hover{border-color:rgba(99,91,255,.4)!important;color:var(--mo-primary)!important;transform:translateY(-2px)}
.hero,.market-hero{position:relative!important;overflow:hidden!important}.hero:after,.market-hero:after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;right:-160px;top:-220px;background:radial-gradient(circle,rgba(99,91,255,.17),transparent 68%);pointer-events:none}.hero-content{position:relative;z-index:1}.hero-badge,.section-eyebrow,.market-hero .section-eyebrow{border-radius:999px!important;background:rgba(99,91,255,.09)!important;border:1px solid rgba(99,91,255,.18)!important;color:var(--mo-primary)!important;font-weight:800!important}
.hero h1,.market-hero h1{letter-spacing:-.055em!important}.hero-sub,.section-subtitle,.market-hero p{color:var(--mo-muted)!important}.hero-btns{gap:.75rem!important}
.layanan-grid,.why-grid,.testimoni-grid,.market-grid,.order-steps-grid{gap:18px!important}.layanan-card,.why-card,.testi-card,.home-product-card,.market-preview,.market-cta,.cta-box,.faq-item{background:var(--mo-surface)!important;border:1px solid var(--mo-line)!important;border-radius:var(--mo-radius)!important;box-shadow:var(--mo-shadow-sm)!important;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s!important}.layanan-card:hover,.why-card:hover,.testi-card:hover,.home-product-card:hover,.faq-item:hover{transform:translateY(-7px)!important;box-shadow:var(--mo-shadow)!important;border-color:rgba(99,91,255,.28)!important}
.layanan-icon-wrap,.why-icon,.home-product-icon{background:linear-gradient(135deg,rgba(99,91,255,.12),rgba(6,182,212,.08))!important;border-color:rgba(99,91,255,.16)!important;color:var(--mo-primary)!important}
.section-title{letter-spacing:-.035em!important}.section-eyebrow{letter-spacing:.12em!important}
.testi-stars,.summary-score .stars,.slot-stars{color:var(--mo-gold)!important}.testi-avatar{background:linear-gradient(135deg,var(--mo-primary),var(--mo-cyan))!important}
.faq-question{border-radius:16px!important}.faq-item{overflow:hidden}
/* Market */
.market-hero{padding:86px 5% 46px!important}.market-hero h1{font-size:clamp(2.5rem,6vw,5rem)!important}.filter-wrap{max-width:1320px;margin:auto!important;padding:18px 5% 28px!important;background:transparent!important;gap:9px!important}.filter-btn{background:var(--mo-surface)!important;border-color:var(--mo-line)!important;color:var(--mo-muted)!important;border-radius:999px!important;padding:.68rem 1rem!important}.filter-btn.active,.filter-btn:hover{background:var(--mo-primary)!important;border-color:var(--mo-primary)!important;color:#fff!important}.product-section{background:transparent!important;padding:0 5% 100px!important}.product-grid{max-width:1320px!important;grid-template-columns:repeat(auto-fill,minmax(265px,1fr))!important;gap:20px!important}.product-card{background:var(--mo-surface)!important;border:1px solid var(--mo-line)!important;border-radius:22px!important;box-shadow:var(--mo-shadow-sm)!important;overflow:hidden!important}.product-card:hover{transform:translateY(-8px)!important;border-color:rgba(99,91,255,.35)!important;box-shadow:var(--mo-shadow)!important}.card-thumb{height:180px!important;background:linear-gradient(135deg,var(--mo-surface-2),rgba(99,91,255,.06))!important}.card-badge{border-radius:999px!important;background:var(--mo-primary)!important}.card-body{padding:1.35rem 1.4rem 1.45rem!important}.card-body h3{font-size:1.02rem!important;letter-spacing:-.02em}.btn-add-cart{border-radius:11px!important;background:linear-gradient(135deg,var(--mo-primary),var(--mo-primary-2))!important}.btn-detail-link{border-radius:11px!important}
/* Product detail */
.product-detail,.detail-page,.product-page{max-width:1200px!important}.product-detail .panel,.detail-card,.product-info,.product-sidebar{background:var(--mo-surface)!important;border-color:var(--mo-line)!important;border-radius:24px!important;box-shadow:var(--mo-shadow-sm)!important}
/* Reviews */
.rv-page,.wrap{max-width:1180px!important;padding:62px 22px 100px!important}.rv-hero{padding:42px 0 26px!important}.rv-hero h1,h1{letter-spacing:-.055em!important}.rv-kicker,.eyebrow{color:var(--mo-primary)!important}.rv-card,.panel{background:var(--mo-surface)!important;border:1px solid var(--mo-line)!important;border-radius:24px!important;box-shadow:var(--mo-shadow-sm)!important}.rv-input,.rv-textarea,.sort-select{background:var(--mo-surface-2)!important;color:var(--mo-text)!important;border-color:var(--mo-line)!important;border-radius:13px!important}.rv-input:focus,.rv-textarea:focus,.sort-select:focus{border-color:var(--mo-primary)!important;box-shadow:0 0 0 4px rgba(99,91,255,.1)!important}.rv-submit{background:linear-gradient(135deg,var(--mo-primary),var(--mo-primary-2))!important;border-radius:13px!important;box-shadow:0 10px 24px rgba(99,91,255,.2)!important}.rv-link,.back-link{background:var(--mo-surface)!important;border-color:var(--mo-line)!important;color:var(--mo-text)!important;border-radius:13px!important}.rv-score-num,.summary-score .num{color:var(--mo-primary)!important}.rv-star.active,.rv-gold,.slot-stars{color:var(--mo-gold)!important}.slot{background:var(--mo-surface)!important;border-color:var(--mo-line)!important;border-radius:18px!important;box-shadow:var(--mo-shadow-sm)!important}.slot:hover{transform:translateY(-3px);box-shadow:var(--mo-shadow)!important}.bd-track{background:var(--mo-surface-2)!important}.bd-fill{background:linear-gradient(90deg,var(--mo-primary),var(--mo-cyan))!important}
/* Admin */
body:has(.admin-shell),body:has(#login-view){background:var(--mo-bg)!important}.admin-shell{max-width:1380px!important;margin:auto!important;padding:0 24px 70px!important}.topbar{background:transparent!important;border:0!important;padding:28px 0!important}.brand-mark{background:linear-gradient(135deg,var(--mo-primary),var(--mo-cyan))!important;box-shadow:0 10px 25px rgba(99,91,255,.22)}.hero-card,.stat-card,.admin-shell .panel{background:var(--mo-surface)!important;border:1px solid var(--mo-line)!important;border-radius:22px!important;box-shadow:var(--mo-shadow-sm)!important}.hero-card{background:linear-gradient(135deg,var(--mo-surface),rgba(99,91,255,.06))!important}.stats{gap:14px!important}.stat-card{transition:transform .25s,box-shadow .25s}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--mo-shadow)!important}.stat-value{color:var(--mo-text)!important}.layout{gap:20px!important}.panel-head{border-color:var(--mo-line)!important}.search,input,textarea,select{border-color:var(--mo-line)!important;background:var(--mo-surface-2)!important;color:var(--mo-text)!important;border-radius:12px!important}.search:focus,input:focus,textarea:focus,select:focus{border-color:var(--mo-primary)!important;outline:none!important;box-shadow:0 0 0 4px rgba(99,91,255,.08)!important}.table-wrap{border-color:var(--mo-line)!important;border-radius:16px!important}.admin-shell table th{background:var(--mo-surface-2)!important;color:var(--mo-muted)!important}.admin-shell table td{border-color:var(--mo-line)!important}.category-list .category-item,.category-picker .category-item{border-color:var(--mo-line)!important;background:var(--mo-surface-2)!important;border-radius:13px!important}.category-list .category-item.active,.category-picker .category-item.active{background:rgba(99,91,255,.1)!important;border-color:rgba(99,91,255,.35)!important;color:var(--mo-primary)!important}.btn-danger{background:rgba(239,68,68,.08)!important;color:#ef4444!important;border:1px solid rgba(239,68,68,.22)!important;border-radius:11px!important}.btn-danger:hover{background:#ef4444!important;color:#fff!important}.modal{background:var(--mo-surface)!important;border-color:var(--mo-line)!important;border-radius:24px!important;box-shadow:0 35px 100px rgba(0,0,0,.25)!important}.form-section{border-color:var(--mo-line)!important;background:var(--mo-surface)!important;border-radius:16px!important}.modal-overlay{backdrop-filter:blur(8px)!important;background:rgba(4,8,18,.55)!important}
/* generic content pages */
main:not(.rv-page),.page-wrap,.content-wrap{position:relative}.service-card,.info-card,.feature-card,.hosting-card,.domain-card,.article-card,.contact-card{background:var(--mo-surface)!important;border:1px solid var(--mo-line)!important;border-radius:22px!important;box-shadow:var(--mo-shadow-sm)!important}.service-card:hover,.info-card:hover,.feature-card:hover,.hosting-card:hover,.domain-card:hover,.article-card:hover,.contact-card:hover{transform:translateY(-5px);box-shadow:var(--mo-shadow)!important}
/* Motion */
.reveal-ready{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}.reveal-ready.revealed{opacity:1;transform:none}.stagger-1{transition-delay:.05s}.stagger-2{transition-delay:.1s}.stagger-3{transition-delay:.15s}.stagger-4{transition-delay:.2s}.page-enter{animation:moPage .55s ease both}@keyframes moPage{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.nav-center{position:fixed!important;left:16px!important;right:16px!important;top:82px!important;padding:12px!important;background:var(--mo-surface)!important;border:1px solid var(--mo-line)!important;border-radius:18px!important;box-shadow:var(--mo-shadow)!important}.hero{padding-top:80px!important}.layanan-grid,.why-grid,.testimoni-grid{grid-template-columns:1fr 1fr!important}.rv-grid{grid-template-columns:1fr!important}.layout{grid-template-columns:1fr!important}}
@media(max-width:620px){nav{height:68px!important;padding:0 18px!important}.logo-text{font-size:.85rem!important}.hero{padding:64px 20px 54px!important}.hero h1{font-size:clamp(2.2rem,12vw,3.6rem)!important}.layanan-grid,.why-grid,.testimoni-grid,.product-grid{grid-template-columns:1fr!important}.market-hero{padding:62px 20px 34px!important}.product-section{padding-left:20px!important;padding-right:20px!important}.filter-wrap{padding-left:20px!important;padding-right:20px!important;overflow-x:auto;justify-content:flex-start!important;flex-wrap:nowrap!important}.filter-btn{white-space:nowrap}.rv-page,.wrap{padding:40px 16px 80px!important}.rv-hero{display:block!important}.rv-link{margin-top:18px}.summary{grid-template-columns:1fr!important}.bd-row{grid-template-columns:38px 1fr 30px}.admin-shell{padding:0 12px 50px!important}.topbar{align-items:flex-start!important;gap:12px}.top-actions{flex-wrap:wrap}.stats{grid-template-columns:1fr 1fr!important}.table-wrap{overflow-x:auto}.table-wrap table{min-width:760px}.modal{width:calc(100vw - 20px)!important;max-height:92vh!important}.form-layout{grid-template-columns:1fr!important}.modal-foot{position:sticky!important;bottom:0!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-ready{opacity:1!important;transform:none!important}}

/* ===== HOME VISUAL UPGRADE ===== */
.hero{min-height:760px!important;padding:72px 5% 64px!important;display:grid!important;grid-template-columns:minmax(0,.86fr) minmax(460px,1.14fr)!important;align-items:center!important;text-align:left!important;gap:28px!important;background:radial-gradient(circle at 72% 40%,rgba(37,99,235,.14),transparent 34%),var(--mo-bg)!important}
.hero-content{max-width:690px!important;margin:0!important;order:1!important}.hero-sub{margin-left:0!important;margin-right:0!important;max-width:610px!important}.hero-btns{justify-content:flex-start!important}.hero-services{margin:0!important;max-width:680px!important;grid-template-columns:repeat(3,1fr)!important}.hero-visual{position:relative;order:2;min-width:0;height:560px;display:flex;align-items:center;justify-content:center;perspective:1200px}.hero-visual-glow{position:absolute;width:75%;height:75%;background:radial-gradient(circle,rgba(59,130,246,.35),rgba(124,58,237,.14) 45%,transparent 70%);filter:blur(28px);animation:visualPulse 7s ease-in-out infinite alternate}.hero-visual-frame{position:relative;width:min(720px,100%);transform:rotateY(-5deg) rotateX(2deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 35px 55px rgba(0,0,0,.38));}.hero-visual-frame:hover{transform:rotateY(0) rotateX(0) translateY(-6px)}.hero-visual-frame:before{content:"";position:absolute;inset:-1px;border-radius:24px;background:linear-gradient(135deg,rgba(56,189,248,.8),rgba(99,102,241,.25),rgba(168,85,247,.65));z-index:-1;padding:1px;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}.hero-visual-frame img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid rgba(148,163,184,.18);background:#07111f}.hero-floating-card{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(148,163,184,.2);background:rgba(7,16,31,.82);backdrop-filter:blur(14px);border-radius:15px;box-shadow:0 18px 45px rgba(0,0,0,.3);color:#fff;animation:floatCard 5s ease-in-out infinite}.hero-floating-card b,.hero-floating-card small{display:block}.hero-floating-card b{font-size:.78rem}.hero-floating-card small{font-size:.64rem;color:#9fb0c8;margin-top:2px}.hero-floating-card-a{left:-20px;bottom:14%;animation-delay:-1.5s}.hero-floating-card-b{right:-14px;top:15%;animation-delay:-3s}.dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 14px #22c55e}.spark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#06b6d4,#6366f1);font-size:17px}.home-showcase{max-width:1320px;margin:0 auto;padding:90px 5%;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:45px}.showcase-copy h2{font-size:clamp(2rem,4vw,3.5rem);margin:.5rem 0 1rem;letter-spacing:-.05em}.showcase-copy p{color:var(--mo-muted);line-height:1.8;max-width:520px}.showcase-pills{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 28px}.showcase-pills span{padding:7px 12px;border:1px solid var(--mo-line);border-radius:999px;background:var(--mo-surface);font-size:.75rem;color:var(--mo-muted)}.showcase-image{position:relative}.showcase-image:before{content:"";position:absolute;inset:8% -4%;background:radial-gradient(circle,rgba(59,130,246,.22),transparent 65%);filter:blur(30px);z-index:-1}.showcase-image img{width:100%;display:block;border-radius:24px;border:1px solid var(--mo-line);box-shadow:0 30px 80px rgba(0,0,0,.25);transition:transform .5s ease,box-shadow .5s ease}.showcase-image:hover img{transform:translateY(-8px) scale(1.01);box-shadow:0 40px 100px rgba(37,99,235,.18)}@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes visualPulse{0%{transform:scale(.94);opacity:.55}100%{transform:scale(1.06);opacity:.9}}
@media(max-width:1050px){.hero{grid-template-columns:1fr!important;padding-top:62px!important}.hero-content{order:1!important;text-align:center;margin:auto!important}.hero-sub{margin-left:auto!important;margin-right:auto!important}.hero-btns{justify-content:center!important}.hero-services{margin:auto!important}.hero-visual{order:2;height:auto;max-width:760px;width:100%;margin:10px auto 0}.home-showcase{grid-template-columns:1fr;max-width:850px}.showcase-copy{text-align:center}.showcase-copy p{margin-left:auto;margin-right:auto}.showcase-pills{justify-content:center}}
@media(max-width:620px){.hero{min-height:auto!important;padding:55px 18px 45px!important}.hero-visual{height:auto;margin-top:8px}.hero-visual-frame{transform:none}.hero-floating-card{display:none}.hero-services{grid-template-columns:1fr!important}.hero-svc{padding:1.1rem}.home-showcase{padding:65px 18px}.showcase-image img{border-radius:16px}}
@media(prefers-reduced-motion:reduce){.hero-visual-glow,.hero-floating-card{animation:none!important}.hero-visual-frame,.showcase-image img{transition:none!important}}