:root{--n:#0B2A5B;--g:#F2B705;--l:#F4F6FB}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1b2440;line-height:1.6}
img{max-width:100%;height:auto;display:block}a{color:inherit}.w{max-width:1100px;margin:auto;padding:0 20px}section{padding:56px 0}h2{font-size:1.8rem;color:var(--n);margin:0 0 20px;text-align:center}
nav{background:var(--n);color:#fff;position:sticky;top:0;z-index:9}nav .w{display:flex;justify-content:space-between;align-items:center;height:60px}.logo{font-weight:800;font-size:1.2rem}.logo b{color:var(--g)}
.btn{display:inline-block;background:var(--g);color:var(--n);font-weight:800;padding:14px 26px;border-radius:12px;text-decoration:none;box-shadow:0 4px 0 #b88a00}.btn.s{padding:8px 16px;box-shadow:none}.btn.o{background:transparent;color:#fff;border:2px solid #fff;box-shadow:none}
.hero{background:linear-gradient(160deg,var(--n),#163d7d);color:#fff}.hero .w{display:grid;gap:32px;align-items:center}.hero h1{font-size:2.2rem;line-height:1.2;margin:8px 0}.hero h1 span{color:var(--g)}.tag{display:inline-block;background:var(--g);color:var(--n);font-weight:800;padding:4px 12px;border-radius:99px;font-size:.85rem}
.price{font-size:2.4rem;font-weight:900;color:var(--g)}.price del{font-size:1.1rem;color:#aab;margin-left:8px}.hero img{border-radius:16px;box-shadow:0 20px 50px #0008}.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.ck{list-style:none;padding:0;display:grid;gap:12px}.ck li{background:var(--l);padding:14px 16px 14px 48px;border-radius:12px;position:relative}.ck li:before{content:"✓";position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;background:var(--g);color:var(--n);font-weight:900;text-align:center;line-height:24px}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.gal img{border-radius:10px;box-shadow:0 4px 14px #0002;aspect-ratio:1;object-fit:cover}.gal2{grid-template-columns:repeat(3,1fr);margin-top:12px}.gal2 img{aspect-ratio:9/16}
.alt{background:var(--l)}.cards{display:grid;gap:16px}.card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 4px 18px #0b2a5b14;border-top:4px solid var(--g)}.card h3{margin:0 0 6px;color:var(--n)}.big{font-size:2rem;font-weight:900;color:var(--n)}
ol.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:12px}ol.steps li{counter-increment:s;padding:14px 16px 14px 56px;position:relative;background:#fff;border-radius:12px}ol.steps li:before{content:counter(s);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--n);color:var(--g);font-weight:800;text-align:center;line-height:30px}
details{background:var(--l);border-radius:12px;padding:14px 18px;margin-bottom:10px}summary{font-weight:700;cursor:pointer;color:var(--n)}
.final{background:var(--n);color:#fff;text-align:center}.final h2{color:#fff}footer{background:#071c3d;color:#b9c3d8;padding:28px 0;font-size:.9rem;text-align:center}
.fab{position:fixed;right:16px;bottom:16px;background:#25D366;color:#fff;border-radius:99px;padding:12px 18px;font-weight:700;text-decoration:none;box-shadow:0 6px 20px #0004;z-index:9}
@media(min-width:800px){.hero .w{grid-template-columns:1.1fr .9fr;padding:64px 20px}.hero h1{font-size:3rem}.gal{grid-template-columns:repeat(4,1fr)}.gal2{grid-template-columns:repeat(6,1fr)}.cards{grid-template-columns:repeat(3,1fr)}.two{display:grid;grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:799px){.hero .w{padding:36px 20px}}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0}.chip{border:2px solid var(--n);background:#fff;color:var(--n);border-radius:99px;padding:6px 16px;font-weight:700;cursor:pointer}.chip.on{background:var(--n);color:var(--g)}
.search{width:100%;max-width:480px;display:block;margin:0 auto;padding:12px 16px;border-radius:12px;border:2px solid #d5dbe8;font-size:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:24px}.pc{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 18px #0b2a5b1a;text-decoration:none;display:flex;flex-direction:column}.pc img{aspect-ratio:4/5;object-fit:cover;width:100%}.pc div{padding:14px}.pc h3{margin:4px 0;color:var(--n);font-size:1.05rem}.pp{font-weight:900;color:var(--n);font-size:1.2rem}.pp del{color:#99a;font-size:.85rem;font-weight:400;margin-left:6px}
.soon{border:2px dashed #c3cbe0;border-radius:16px;padding:28px;text-align:center;color:#667;background:#fff}.soon b{color:var(--n)}.links a{color:#fff;text-decoration:none;margin-left:14px;font-weight:600}.links{display:flex;align-items:center}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative;padding:0}.burger span{position:absolute;left:11px;width:22px;height:2.5px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s,top .25s}.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
.burger[aria-expanded=true] span:nth-child(1){top:21px;transform:rotate(45deg)}.burger[aria-expanded=true] span:nth-child(2){opacity:0}.burger[aria-expanded=true] span:nth-child(3){top:21px;transform:rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--g);border-radius:8px}.mmenu{display:none}
@media(max-width:767px){.links{display:none}.burger{display:block}nav{position:sticky}.mmenu{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:60px;background:var(--n);padding:4px 20px 12px;box-shadow:0 12px 24px #0005;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;pointer-events:none}.mmenu.open{opacity:1;transform:none;pointer-events:auto}.mmenu[hidden]{display:none}.mmenu a{color:#fff;text-decoration:none;padding:14px 4px;border-bottom:1px solid #ffffff1f;font-weight:600}.mmenu a:last-child{border:0}.mmenu a:active{color:var(--g)}}/* ===== Animasi ===== */
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shine{from{left:-60%}to{left:130%}}
.hero .w>div>*{animation:up .7s cubic-bezier(.2,.7,.2,1) both}.hero .w>div>*:nth-child(2){animation-delay:.08s}.hero .w>div>*:nth-child(3){animation-delay:.16s}.hero .w>div>*:nth-child(4){animation-delay:.24s}.hero .w>div>*:nth-child(5){animation-delay:.32s}.hero .w>div>*:nth-child(n+6){animation-delay:.4s}
.hero .w>img{animation:up .9s .2s both,float 6s 1.2s ease-in-out infinite;will-change:transform}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}.rv.in{opacity:1;transform:none}
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,background .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #b88a00,0 10px 20px #0003}.btn.o:hover,.btn.s:hover{box-shadow:0 8px 18px #0003}.btn:active{transform:translateY(1px)}
.btn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#fff7,transparent);transform:skewX(-20deg);pointer-events:none;opacity:0}.btn:hover:after{opacity:1;animation:shine .7s ease}
.pc{transition:transform .25s,box-shadow .25s}.pc img{transition:transform .5s}.pc{overflow:hidden}.pc:hover{transform:translateY(-6px);box-shadow:0 14px 30px #0b2a5b2e}.pc:hover img{transform:scale(1.05)}
.card{transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-4px);box-shadow:0 10px 26px #0b2a5b22}
.gal img{transition:transform .3s,box-shadow .3s}.gal img:hover{transform:scale(1.03);box-shadow:0 10px 24px #0003}
.gal img.ld{opacity:0;transition:opacity .5s,transform .3s}.gal img.ld.ok{opacity:1}
.grid{transition:opacity .2s}.grid.fade{opacity:0}.chip{transition:background .2s,color .2s,transform .15s}.chip:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.gal img.ld{opacity:1}}
.logo{display:flex;align-items:center;height:100%;line-height:0;text-decoration:none}.logo img{height:38px;width:auto;display:block}