@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}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes ring{to{transform:rotate(360deg)}}
*{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:.4rem;list-style:none;margin-right:.4rem}
.nl a{padding:8px 13px;border-radius:12px;font-size:.82rem}
.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)}
.gl{font-size:1.6rem;color:#F5C065;filter:drop-shadow(0 0 6px rgba(245,192,101,.45))}
#typeSeg,#durSeg{gap:12px}
#typeSeg .opt{min-width:150px;padding:12px 18px;flex-direction:column;gap:2px}
#typeSeg .opt .r1{display:flex;align-items:center;gap:8px}
#typeSeg .opt small{font-size:.66rem;font-weight:600;opacity:.75}
#durSeg .opt{min-width:112px;flex-direction:column;gap:0;padding:9px 16px;font-size:.88rem}
#durSeg .opt small{font-size:.64rem;font-weight:600;opacity:.75}
.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}
.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:1240px){.nl,.login{display:none}.ham{display:flex}nav{padding:.8rem 4%}.li{height:40px}}
.wrap{max-width:1180px;margin:0 auto;padding:0 5%}
.hero{padding:120px 0 20px}
.botlogo{position:relative;width:116px;height:116px;margin:0 auto 1rem;display:block;filter:drop-shadow(0 10px 26px rgba(14,165,233,.45));animation:flt 4s ease-in-out infinite}
.botlogo .rg{transform-origin:60px 60px;animation:ring 14s linear infinite}
.botlogo .ey{transform-origin:center;transform-box:fill-box;animation:blink 5s infinite}
.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:620px;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}
.plat{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:1rem}
.plat span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:14px;background:linear-gradient(135deg,rgba(92,66,14,.35),rgba(8,16,38,.7));border:1px solid rgba(245,192,101,.35);color:#FFE8A3;font-size:.8rem;font-weight:700}
.plat svg{color:#F5C065;font-size:1.05rem}
.lbl{color:#94a3b8;font-size:.78rem;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.sw{display:flex;flex-direction:column;align-items:center;gap:12px;margin:2.2rem 0 1.4rem}
.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}
/* banner prosesor */
.tbn{display:flex;align-items:center;gap:18px;max-width:760px;margin:0 auto 1.6rem;padding:1rem 1.4rem;border-radius:20px;background:linear-gradient(165deg,rgba(15,32,67,.7),rgba(8,16,38,.85));border:1px solid rgba(125,211,252,.3);text-align:left}
.tbn.pm{border-color:rgba(74,222,128,.5);background:linear-gradient(165deg,rgba(6,78,59,.45),rgba(8,16,38,.85))}
.tbn .chip{width:84px;height:84px;margin:0;flex:none}
.tbn h3{font-size:1.1rem;font-weight:800}
.tbn p{font-size:.84rem;color:#94a3b8;line-height:1.6;margin-top:3px}
.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}
.pm .chip{filter:drop-shadow(0 8px 22px rgba(52,211,153,.5))}
/* kartu paket */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:16px;padding-bottom:20px}
.pc{position:relative;display:flex;flex-direction:column;text-align:left;border-radius:20px;overflow:hidden;background:linear-gradient(165deg,rgba(15,32,67,.75),rgba(8,16,38,.9));border:1px solid color-mix(in srgb,var(--a) 40%,transparent);animation:up .45s both;transition:transform .25s,box-shadow .25s}
.pc:hover{transform:translateY(-5px);box-shadow:0 12px 30px color-mix(in srgb,var(--a) 28%,transparent)}
.pc .no{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:12px 16px;background:color-mix(in srgb,var(--a) 14%,transparent);border-bottom:1px solid color-mix(in srgb,var(--a) 24%,transparent);font-weight:800;font-size:.9rem;letter-spacing:1px}
.pc .no em{font-style:normal;font-size:.62rem;padding:3px 9px;border-radius:20px;color:#07080a;background:var(--a);letter-spacing:.5px}
.pc .bd{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.pc .big{font-size:1.9rem;font-weight:800;color:#fff;line-height:1}
.pc .big small{font-size:.8rem;color:#94a3b8;font-weight:600;margin-left:4px}
.pc ul{list-style:none;margin:12px 0}
.pc li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid rgba(255,255,255,.07);font-size:.84rem;color:#cbd5e1}
.pc li span{display:flex;align-items:center;gap:8px}
.pc li i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--a) 16%,transparent);color:var(--a);font-size:.95rem}
.pc li b{color:#fff}
.pc .pr{margin-top:auto;font-size:1.5rem;font-weight:800;color:var(--a)}
.pc .pr small{font-size:.75rem;color:#94a3b8;font-weight:600;margin-left:4px}
.pc .buy{padding:11px;font-size:.88rem;animation:none}
.pc .buy::after{animation:none;transition:left .6s}
.pc .buy:hover::after{left:140%}
.usd{font-size:.78rem;color:#94a3b8;font-weight:600;margin:-.2rem 0 .9rem}
.pc .usd{margin:2px 0 12px}
.price{font-size:2.3rem;font-weight:800;margin:1.2rem 0 .2rem;letter-spacing:-1px;background:linear-gradient(135deg,#FFE8A3,#F5C065 50%,#E0A93B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.price small{font-size:.9rem;-webkit-text-fill-color:#94a3b8;font-weight:500;letter-spacing:0}
.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{margin:8px auto 0;padding:2.2rem 1rem;border-radius:22px;border:1px dashed rgba(245,192,101,.4);background:rgba(8,16,38,.6);color:#94a3b8;max-width:1080px}
.soon b{display:block;color:#fff;font-size:1.15rem;margin:.4rem 0}
/* custom */
.cust{max-width:720px;margin:0 auto;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-bottom:.3rem}.cust>p{color:#94a3b8;font-size:.9rem;margin-bottom:1.4rem}
.row{text-align:left;margin-bottom:1.2rem}.row>label,.row .lh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:700;font-size:.9rem;margin-bottom:8px}.row label b,.row .lh b{color:#FFE8A3}
.row small{color:#94a3b8;font-weight:600;font-size:.72rem;margin-left:6px}
.row input{width:100%;accent-color:#F5C065}
.row .opts{justify-content:flex-start}
.bdur{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bdur button{padding:10px 4px;border-radius:14px;border:1px solid rgba(148,163,184,.25);background:rgba(255,255,255,.03);color:#e2e8f0;cursor:pointer;font-size:.84rem;font-weight:800;transition:border-color .2s,background .2s}
.bdur button small{display:block;margin:0;font-size:.64rem;font-weight:600;color:#94a3b8}
.bdur button b{display:block;margin-top:4px;font-size:.74rem;color:#F5C065}
.bdur button.on{border-color:#F5C065;background:rgba(245,192,101,.14)}
.bsum{text-align:left;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:6px}
.bsum div{display:flex;justify-content:space-between;gap:8px;padding:5px 0;font-size:.86rem;color:#94a3b8}.bsum b{color:#fff}
.bmode{display:inline-block;margin:.6rem 0 0;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)}
.bmode.x{color:#F5C065;background:rgba(245,192,101,.1);border-color:rgba(245,192,101,.4)}
.bnote{font-size:.78rem;color:#94a3b8;line-height:1.6;margin:.8rem 0 1.2rem}
.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(33% - 8px);padding:10px 8px}
 #typeSeg .opt .r1{font-size:.84rem}
 #durSeg .opt{min-width:0;flex:1 1 calc(33% - 8px);padding:9px 6px}
 .tbn{flex-direction:column;text-align:center;gap:8px;padding:1rem}
 .pgrid{grid-template-columns:repeat(2,1fr);gap:10px}
 .pc .bd{padding:11px 11px 13px}.pc .big{font-size:1.5rem}.pc li{font-size:.74rem}.pc li i{width:22px;height:22px;font-size:.8rem}
 .pc .pr{font-size:1.1rem}.pc .pr small{display:block;margin:0}.pc .no{padding:10px 11px;font-size:.78rem}
 .pc .buy{font-size:.78rem;padding:10px 4px}.pc .usd{font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}