@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
@keyframes mv{to{background-position:-200% 0}}
@keyframes shine{to{background-position:-150% 0,0 0}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sweep{0%,55%{left:-80%}100%{left:160%}}
@keyframes pg{50%{box-shadow:0 0 28px rgba(0,210,255,.8),inset 0 0 14px rgba(0,210,255,.35)}}
@keyframes dd{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
html{overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:88px}
body{background:#07080a;color:#fff;min-height:100vh;overflow-x:hidden;text-align:center}
a,button{touch-action:manipulation}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
[data-ic]{display:inline-flex}
.bg{position:absolute;top:0;left:0;width:100%;height:max(100vh,780px);z-index:0;pointer-events:none;overflow:hidden;background:#07080a}
.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .6s}
.bg video.on{opacity:1}
.bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,#07080a 0%,rgba(7,8,10,0) 8%,rgba(7,8,10,0) 50%,#07080a 78%),linear-gradient(rgba(7,8,10,.45),rgba(7,8,10,.45)),radial-gradient(circle at 50% -10%,rgba(14,165,233,.18),transparent 60%)}
.wrap,.fx,.fe,footer{position:relative;z-index:10}
nav{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 4%;background:linear-gradient(135deg,rgba(8,16,38,.94),rgba(15,32,67,.94) 50%,rgba(6,12,28,.94));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:100;box-shadow:0 4px 25px rgba(2,6,23,.8),inset 0 1px 1px rgba(255,255,255,.12)}
nav::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#F5C065,#CBD5E1 20%,#FFE8A3 40%,#94A3B8 60%,#E0A93B 80%,#F5C065);background-size:200% 100%;animation:mv 3s linear infinite}
.lw{display:flex;align-items:center;gap:12px;text-decoration:none}
.li{height:46px;width:auto;pointer-events:none}
.logo{display:inline-block;font-size:1.5rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;background-image:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%),linear-gradient(135deg,#FFE8A3,#F5C065 25%,#E0A93B 45%,#9D5BD2 75%,#6B21A8);background-size:200% 100%,100% 100%;background-position:250% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}
.nr{display:flex;align-items:center;gap:.8rem}
.nl{display:flex;gap:.5rem;list-style:none;margin-right:.4rem}
.nl a{padding:8px 14px;border-radius:12px;font-size:.84rem}
.nl a:hover{color:#fff}
.nl a.on:hover{color:#1a1205}
/* TOMBOL: garis luar bergerak */
.opt,.login,.lb,.nb,.buy{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;border-radius:14px;font-weight:700;cursor:pointer;text-decoration:none;color:#cbd5e1;background:linear-gradient(#0a1428,#0a1428) padding-box,conic-gradient(from var(--ang),rgba(245,192,101,.22) 0 38%,#F5C065 60%,#fff 78%,rgba(245,192,101,.22) 100%) border-box;transition:transform .2s,color .2s,box-shadow .2s;animation:spin 7s steps(168) infinite}
.opt{padding:11px 22px;font-size:.92rem}
.opt::after,.login::after,.lb::after,.nb::after{content:'';position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s;pointer-events:none}
.opt:hover::after,.login:hover::after,.lb:hover::after,.nb:hover::after{left:140%}
.opt svg.i,.nb svg.i{transition:transform .25s}
.opt:hover svg.i,.nb:hover svg.i{transform:scale(1.12)}
.fl{display:block;width:24px;height:16px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
#typeSeg{gap:12px}
#typeSeg .opt{min-width:150px;padding:12px 22px}
.opt svg,.lb svg{font-size:1.1rem}
.opt:hover,.login:hover,.lb:hover,.nb:hover{animation:spin 3s steps(72) infinite;transform:translateY(-3px);color:#fff;box-shadow:0 10px 24px rgba(245,192,101,.25)}
.opt.on,.nb.on,.lang.open .lb{animation:spin 3s steps(72) infinite;color:#1a1205;background:linear-gradient(135deg,#F5C065,#E0A93B 55%,#B8801C) padding-box,conic-gradient(from var(--ang),#7a5410 0 38%,#fff 70%,#7a5410 100%) border-box;box-shadow:0 0 24px rgba(245,192,101,.35)}
.opt:active,.login:active,.lb:active,.nb:active,.buy:active{transform:scale(.94)}
.login{padding:9px 20px;font-size:.88rem;color:#FFE8A3}
.gl{font-size:1.6rem;color:#F5C065;filter:drop-shadow(0 0 6px rgba(245,192,101,.45))}
.lang{position:relative}
.lb{height:42px;padding:0 12px;font-size:.88rem;color:#fff}
.lb .ar{font-size:.7rem;transition:transform .2s}
.lang.open .ar{transform:rotate(180deg)}
.ld{position:absolute;top:50px;right:0;width:150px;display:none;flex-direction:column;gap:8px;padding:8px;border-radius:16px;background:rgba(8,16,38,.97);border:1.5px solid rgba(226,232,240,.35);box-shadow:0 10px 30px rgba(0,0,0,.8);z-index:101}
.lang.open .ld{display:flex;animation:dd .2s ease-out}
.ld .opt{width:100%;justify-content:flex-start;padding:9px 12px;font-size:.85rem}
.ham{display:none;flex-direction:column;justify-content:space-between;width:42px;height:42px;background:rgba(255,255,255,.05);border:1px solid rgba(245,192,101,.35);border-radius:12px;padding:11px 9px;cursor:pointer}
.ham span{width:100%;height:2.5px;border-radius:4px;background:linear-gradient(90deg,#F5C065,#CBD5E1 33%,#FFE8A3 66%,#F5C065);background-size:200% 100%;animation:mv 3s linear infinite;transition:transform .2s,opacity .2s}
.ham.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ham.on span:nth-child(2){opacity:0;transform:translateX(-10px)}
.ham.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;top:75px;right:4%;width:270px;max-height:80vh;overflow:auto;padding:1.2rem;border-radius:20px;border:2px solid transparent;transform:translate3d(125%,0,0);transition:transform .2s;z-index:99;background-image:linear-gradient(135deg,rgba(8,16,38,.98),rgba(15,32,67,.98)),linear-gradient(90deg,#F5C065,#CBD5E1 20%,#FFE8A3 40%,#E2E8F0 60%,#E0A93B 80%,#F5C065);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 12px 40px rgba(0,0,0,.85)}
.drawer.on{transform:none}
.drawer ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;text-align:left}
.drawer a{width:100%;justify-content:flex-start;padding:11px 16px;font-size:.9rem;border-radius:14px}
.drawer .dl{display:flex;gap:8px}
.drawer .dl .opt{flex:1;padding:9px 8px;font-size:.84rem}
@media(max-width:1180px){.nl,.login{display:none}.ham{display:flex}nav{padding:.8rem 4%}.li{height:40px}}
.wrap{max-width:1080px;margin:0 auto;padding:0 5%}
.hero{padding:130px 0 20px}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 18px;border-radius:30px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.35);color:#bae6fd;font-size:.85rem;font-weight:600}
.badge i{width:8px;height:8px;border-radius:50%;background:#38bdf8;box-shadow:0 0 10px #38bdf8}
h1{font-size:clamp(2rem,6vw,3.5rem);line-height:1.12;margin:1.2rem 0 1rem;letter-spacing:-1px;font-weight:800}
h1 em{font-style:normal;background:linear-gradient(135deg,#e0f2fe,#38bdf8 50%,#0284c7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:#cbd5e1;max-width:600px;margin:0 auto;line-height:1.8;font-weight:500}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:1.6rem}
.pills span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:99px;background:rgba(8,16,38,.6);border:1px solid rgba(56,189,248,.25);color:#cbd5e1;font-size:.8rem;font-weight:600}
.pills svg{color:#38bdf8;font-size:1rem}
.sw{display:flex;flex-direction:column;align-items:center;gap:14px;margin:2.2rem 0 1.8rem}
.opts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.opts.sm .opt{padding:9px 18px;font-size:.84rem;border-radius:12px}
.hide{display:none!important}
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding-bottom:20px}
.card{position:relative;flex:1 1 270px;max-width:330px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.3rem 1.5rem;border-radius:22px;background:linear-gradient(165deg,rgba(15,32,67,.7),rgba(8,16,38,.85));border:1px solid rgba(125,211,252,.3);backdrop-filter:blur(8px);animation:up .5s both;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);border-color:#F5C065;box-shadow:0 14px 36px rgba(245,192,101,.2)}
.card.pop{border-color:rgba(245,192,101,.7);box-shadow:0 0 30px rgba(245,192,101,.18)}
.card.nat{border-color:rgba(34,211,238,.45)}
.card.gld{border-color:rgba(245,192,101,.6);background:linear-gradient(165deg,rgba(92,66,14,.38),rgba(8,16,38,.85))}
.card.gld .chip{filter:drop-shadow(0 8px 22px rgba(245,192,101,.5))}
.tag{position:absolute;top:14px;right:14px;font-size:.68rem;font-weight:800;letter-spacing:1px;padding:3px 10px;border-radius:20px;background:linear-gradient(90deg,#F5C065,#E0A93B);color:#1a1205}
.tag.l{right:auto;left:14px;background:linear-gradient(90deg,#34d399,#22d3ee)}
.tag.l.g{background:linear-gradient(90deg,#FFE8A3,#E0A93B)}
.chip{width:110px;height:110px;margin:0 auto .4rem;display:block;filter:drop-shadow(0 8px 20px rgba(14,165,233,.35));animation:flt 4s ease-in-out infinite}
.cust .chip.gold{filter:drop-shadow(0 8px 22px rgba(245,192,101,.5))}
.cpu{font-weight:800;font-size:1.02rem}
.pk{display:inline-block;margin:.8rem 0 .4rem;padding:4px 14px;border-radius:20px;background:rgba(245,192,101,.12);border:1px solid rgba(245,192,101,.4);color:#FFE8A3;font-size:.78rem;letter-spacing:2px;font-weight:700}
.old{color:#64748b;text-decoration:line-through;font-size:.9rem;font-weight:600;height:1.2rem}
.price{font-size:2.1rem;font-weight:800;margin:.1rem 0 1rem;letter-spacing:-1px;background:linear-gradient(135deg,#FFE8A3,#F5C065 50%,#E0A93B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nat .price{background-image:linear-gradient(135deg,#cffafe,#22d3ee 50%,#0ea5e9)}
.sv{margin:-.4rem 0 1rem;padding:4px 13px;border-radius:20px;font-size:.75rem;font-weight:700;color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35)}
.usd{font-size:.78rem;color:#94a3b8;font-weight:600;margin:-.7rem 0 .9rem}
.usd+.sv{margin-top:0}
.cust .usd{margin:-.8rem 0 1.2rem}
.price small{font-size:.9rem;-webkit-text-fill-color:#94a3b8;font-weight:500;letter-spacing:0}
.spec{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:8px;margin-bottom:1rem}
.spec b{display:flex;flex-direction:column;padding:9px 4px;font-size:.95rem;border-radius:10px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.28);color:#e0f2fe}
.spec small{font-size:.62rem;color:#94a3b8;font-weight:600;letter-spacing:1px}
ul.f{list-style:none;flex:1;width:100%;margin-bottom:1.2rem}
ul.f li{display:flex;gap:10px;justify-content:center;align-items:center;padding:9px 2px;border-top:1px solid rgba(255,255,255,.08);font-size:.87rem;color:#d1d5db}
ul.f li::before{content:"";width:14px;height:14px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.buy{width:100%;padding:13px;overflow:hidden;color:#1a1205;font-weight:800;background:linear-gradient(135deg,#F5C065,#E0A93B 55%,#B8801C) padding-box,conic-gradient(from var(--ang),#7a5410 0 38%,#fff 70%,#7a5410 100%) border-box;animation:spin 3.4s steps(82) infinite}
.buy::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);animation:sweep 3.4s ease-in-out infinite}
.buy:hover{filter:brightness(1.1);transform:translateY(-2px) scale(1.02)}
.cta{max-width:360px;margin:1.2rem auto 0}
.soon{flex:1 1 100%;padding:2.4rem 1rem;border-radius:22px;border:1px dashed rgba(245,192,101,.4);background:rgba(8,16,38,.6);color:#94a3b8}
.soon b{display:block;color:#fff;font-size:1.15rem;margin:.4rem 0}
.cust{flex:1 1 100%;max-width:720px;padding:1.8rem 1.5rem;border-radius:22px;background:linear-gradient(165deg,rgba(15,32,67,.7),rgba(8,16,38,.85));border:1px solid rgba(245,192,101,.4);animation:up .5s both}
.cust h3{font-size:1.35rem;margin:.6rem 0 .3rem}.cust>p{color:#94a3b8;font-size:.9rem;margin-bottom:1.4rem}
.row{text-align:left;margin-bottom:1.2rem}.row label{display:flex;justify-content:space-between;font-weight:700;font-size:.9rem;margin-bottom:8px}.row label b{color:#FFE8A3}
.row input{width:100%;accent-color:#F5C065}
.row .opts{justify-content:flex-start}
.cust .price{font-size:2.3rem;margin:1.2rem 0}.cust .buy{max-width:360px;margin:0 auto}
.fx{padding:3rem 5% 0;max-width:1080px;margin:0 auto}
.fh{margin-bottom:1.6rem}.ey{color:#38bdf8;font-weight:700;font-size:.85rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:.5rem}
.fh h2{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;background:linear-gradient(135deg,#e0f2fe,#38bdf8 60%,#0284c7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fc{padding:1.3rem 1rem;border-radius:18px;background:linear-gradient(160deg,rgba(15,32,67,.7),rgba(8,16,38,.7));border:1px solid rgba(56,189,248,.2);transition:transform .25s,border-color .25s,box-shadow .25s}
.fc:hover{transform:translateY(-5px);border-color:#F5C065;box-shadow:0 10px 28px rgba(245,192,101,.18)}
.fc:nth-child(-n+2){border-color:rgba(245,192,101,.5)}
.ico{width:48px;height:48px;margin:0 auto .7rem;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;color:#38bdf8;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35);animation:flt 4s ease-in-out infinite}
.fc:nth-child(even) .ico{animation-delay:-2s;color:#F5C065;background:rgba(245,192,101,.12);border-color:rgba(245,192,101,.4)}
.fc b{display:block;font-size:.98rem;margin-bottom:.3rem}.fc p{font-size:.82rem;color:#94a3b8;line-height:1.6}
.fe{border-top:1px solid rgba(255,255,255,.08);padding:3rem 5% 0;margin-top:3rem}
.fgd{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;text-align:left}
.fd{font-size:.88rem;color:#9ca3af;line-height:1.7;margin-top:.8rem;max-width:280px}
.ft{font-size:.85rem;font-weight:700;margin-bottom:1rem}
.fgd ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.fgd ul a{color:#9ca3af;text-decoration:none;font-size:.88rem;transition:color .15s}.fgd ul a:hover{color:#FFE8A3}
footer{display:flex;justify-content:center;padding:2.5rem 1rem 1.8rem;color:#9ca3af;font-size:.88rem}
footer span{color:#fff;font-weight:600}
.cs{position:fixed;bottom:calc(25px + env(safe-area-inset-bottom,0px));right:25px;z-index:999;display:flex;align-items:center;gap:12px}
.tip{background:rgba(8,16,38,.96);color:#38bdf8;padding:9px 16px;border-radius:12px;font-size:.85rem;font-weight:700;border:1.5px solid rgba(0,210,255,.4);white-space:nowrap;opacity:0;transform:translateX(12px);transition:.25s;pointer-events:none}
.csb{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;background:linear-gradient(135deg,rgba(8,16,38,.98),rgba(15,32,67,.98) 50%,rgba(6,12,28,.98));border:2px solid #00d2ff;box-shadow:0 0 18px rgba(0,210,255,.5),inset 0 0 10px rgba(0,210,255,.25);animation:pg 3s ease-in-out infinite;transition:transform .3s}
.csb svg{width:36px;height:36px;filter:drop-shadow(0 0 6px rgba(0,210,255,.6))}
@media(hover:hover){.cs:hover .tip{opacity:1;transform:none}.csb:hover{transform:scale(1.1)}}
@media(max-width:900px){.cs{right:18px}.csb{width:55px;height:55px}.csb svg{width:31px;height:31px}.tip{display:none}.fg,.fgd{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fgd{grid-template-columns:1fr}.opt{padding:10px 16px}#typeSeg .opt{min-width:0;flex:1 1 calc(50% - 6px);padding:11px 12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}