@font-face{font-family:Geist;src:url(/aset/geist.woff2) format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/aset/geist-mono.woff2) format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:Anton;src:url(/aset/anton.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--bg:#09090b;--bg-2:#111114;--kad:#141417;--garis:#24242a;--garis-2:#2f2f36;--ink:#f4f4f2;--ink-2:#c7c7cc;
--lembut:#8e8e96;--lime:#d4ff3a;--lime-ink:#0b0b0c;--emas:#e8c873;--neon:#f9ff23;--jejari:14px;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img,svg{display:block;max-width:100%}
.bekas{width:100%;max-width:1160px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.bekas{padding:0 32px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.atas{position:sticky;top:0;z-index:20;background:rgb(9 9 11/.94);border-bottom:1px solid transparent}
.atas .bekas{display:flex;align-items:center;gap:16px;height:64px}
.jenama{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.03em;text-decoration:none}
.jenama img{width:28px;height:28px}
.nav{display:none;gap:4px;margin-left:16px}
.nav a{font-size:14px;color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:8px}
.nav a:hover{color:var(--ink);background:var(--kad)}
@media (min-width:900px){.nav{display:flex}}
.atas-kanan{margin-left:auto;display:flex;align-items:center;gap:6px}
.pautan-kecil{font-size:14px;color:var(--ink-2);text-decoration:none;padding:8px 10px;border-radius:8px}
.pautan-kecil:hover{color:var(--ink)}
@media (max-width:420px){.sembunyi-kecil{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;
font:600 15px/1 Geist,sans-serif;text-decoration:none;border:1px solid transparent;white-space:nowrap;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.utama{background:var(--lime);color:var(--lime-ink)}
.btn.kedua{border-color:var(--garis-2);color:var(--ink)}
.btn.kedua:hover{background:var(--kad)}
.btn.kecil{height:38px;padding:0 16px;font-size:14px}
.btn svg{width:16px;height:16px}

/* ---------- hero ---------- */
.hero{position:relative;padding:40px 0 72px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:720px;height:720px;border-radius:50%;
background:radial-gradient(closest-side,rgb(212 255 58/.16),transparent);pointer-events:none}
.hero::after{content:"";position:absolute;left:-200px;bottom:-260px;width:620px;height:620px;border-radius:50%;
background:radial-gradient(closest-side,rgb(155 107 240/.18),transparent);pointer-events:none}
.hero .bekas{position:relative;z-index:1;display:grid;gap:48px;align-items:center}
@media (min-width:960px){.hero{padding:72px 0 96px}.hero .bekas{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.label{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 "Geist Mono",monospace;color:var(--ink-2);
border:1px solid var(--garis-2);padding:8px 12px;border-radius:999px;background:rgb(20 20 23/.6)}
.label i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgb(212 255 58/.15)}
h1{margin:20px 0 0;font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:clamp(40px,6.6vw,70px);text-wrap:balance}
h1 .dua{display:block;color:var(--lime)}
.hero .lead{margin:20px 0 0;max-width:560px;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fakta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin:36px 0 0;padding:0;list-style:none;max-width:560px}
.fakta li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.fakta svg{width:18px;height:18px;flex:none;color:var(--lime)}

/* ---------- telefon demo ---------- */
.pentas{position:relative;display:grid;place-items:center;padding:12px 0}
.telefon{position:relative;width:min(300px,78vw);aspect-ratio:9/19.2;border-radius:44px;background:#000;padding:10px;
box-shadow:0 0 0 1px var(--garis-2),0 40px 80px -20px rgb(0 0 0/.8),0 0 120px -30px rgb(212 255 58/.25)}
.skrin{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#111}
.pulau{position:absolute;top:10px;left:50%;width:90px;height:26px;margin-left:-45px;border-radius:20px;background:#000;z-index:9}
.bar-cerita{position:absolute;top:44px;left:14px;right:14px;display:flex;gap:4px;z-index:8}
.bar-cerita span{flex:1;height:3px;border-radius:2px;background:rgb(255 255 255/.25);overflow:hidden}
.bar-cerita span::after{content:"";display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0);
animation:bar 16s linear infinite}
.bar-cerita span:nth-child(2)::after{animation-delay:4s}
.bar-cerita span:nth-child(3)::after{animation-delay:8s}
.bar-cerita span:nth-child(4)::after{animation-delay:12s}
@keyframes bar{0%{transform:scaleX(0)}25%{transform:scaleX(1)}25.01%,100%{transform:scaleX(0)}}
.babak{position:absolute;inset:0;opacity:0;animation:babak 16s infinite}
.b-d{--b:0s}.b-c{--b:4s}.b-e{--b:8s}.b-f{--b:12s}
.babak{animation-delay:var(--b)}
@keyframes babak{0%{opacity:0}1.5%{opacity:1}24%{opacity:1}25.5%{opacity:0}100%{opacity:0}}
.masuk-k{opacity:0;animation:masuk 16s infinite;animation-delay:calc(var(--b,0s) + var(--k,0) * .38s + .25s)}
@keyframes masuk{0%{opacity:0;transform:scale(1.18) translateY(6px)}2.2%{opacity:1;transform:none}23%{opacity:1;transform:none}25%{opacity:0}100%{opacity:0}}
.cop{opacity:0;animation:cop 16s infinite;animation-delay:calc(var(--b,0s) + var(--k,0) * .45s + .3s)}
@keyframes cop{0%{opacity:0;transform:scale(1.25) rotate(var(--r,0deg))}2.4%{opacity:1;transform:scale(1) rotate(var(--r,0deg))}23%{opacity:1;transform:scale(1) rotate(var(--r,0deg))}25%{opacity:0}100%{opacity:0}}
.penutur{position:absolute;left:50%;bottom:0;width:86%;margin-left:-43%}
.sarikata{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:8;background:rgb(0 0 0/.78);color:#fff;
font:600 13px/1 Geist,sans-serif;padding:8px 12px;border-radius:8px;white-space:nowrap}
/* babak D: susunan kuning neon */
.b-d{background:linear-gradient(170deg,#c091f4,#8a5ce6)}
.b-d .susun{position:absolute;left:20px;top:84px;transform:rotate(-6deg) skewX(-3deg);transform-origin:left top;line-height:.94;
font-family:Anton,Impact,sans-serif;text-transform:uppercase;color:var(--neon);text-shadow:0 0 18px rgb(249 255 35/.45);z-index:2}
.b-d .susun span{display:block}
.b-d .s1{font-size:22px;margin-bottom:2px}.b-d .s2{font-size:56px}.b-d .s3{font-size:34px;margin:2px 0 2px 44px}.b-d .s4{font-size:62px}
/* babak C: arang + starburst */
.b-c{background:#121212}
.b-c .burst{position:absolute;left:50%;top:44%;width:340px;height:340px;margin:-170px 0 0 -170px;animation:putar 24s linear infinite;opacity:.9}
@keyframes putar{to{transform:rotate(360deg)}}
.b-c .arka{position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:6px solid var(--emas);
border-left-color:transparent;border-top-color:transparent;transform:rotate(-20deg)}
.b-c .teks{position:absolute;left:0;right:0;top:92px;text-align:center;z-index:2}
.b-c .t1{font:700 20px/1.1 Geist,sans-serif;color:#fff}
.b-c .t2{font:italic 700 46px/1 Georgia,"Times New Roman",serif;color:var(--emas);margin-top:6px}
/* babak E: papan hijau */
.b-e{background:#13694d;background-image:linear-gradient(rgb(79 143 120/.35) 1px,transparent 1px),linear-gradient(90deg,rgb(79 143 120/.35) 1px,transparent 1px);
background-size:32px 32px}
.b-e .label-k{position:absolute;left:18px;top:84px;background:#ffda4c;color:#1a1a1a;font:900 26px/1 Geist,sans-serif;
letter-spacing:-.03em;padding:8px 12px;--r:-2deg;z-index:3}
.b-e .nota{position:absolute;width:104px;padding:14px 10px 18px;background:linear-gradient(#f2d04a,#e3c03e);color:#222;
font:700 17px/1.15 Geist,sans-serif;box-shadow:0 8px 14px rgb(0 0 0/.25);z-index:3;text-align:center}
.b-e .nota::before{content:"";position:absolute;top:-8px;left:50%;width:46px;height:16px;margin-left:-23px;background:rgb(255 255 255/.45)}
.b-e .n1{left:18px;top:150px;--r:-4deg}.b-e .n2{right:16px;top:186px;--r:5deg}.b-e .n3{left:58px;top:268px;--r:-2deg}
.b-e .n3 b{color:#1e6b4a}
.b-e .penutur{width:70%;margin-left:-8%}
/* babak F: majalah emas */
.b-f{background:radial-gradient(120% 80% at 50% 0%,#26211a,#17140f)}
.b-f .kepala-m{position:absolute;left:18px;right:18px;top:62px;display:flex;justify-content:space-between;
font:600 9px/1 Geist,sans-serif;letter-spacing:.2em;color:#cfc8b8;padding-bottom:8px;border-bottom:1px solid rgb(207 200 184/.35);z-index:2}
.b-f .tajuk-m{position:absolute;left:18px;right:18px;top:96px;z-index:2}
.b-f .f1{font:italic 700 34px/1 Georgia,serif;color:#f2eee6}
.b-f .f2{font:400 74px/.9 Anton,Impact,sans-serif;text-transform:uppercase;background:linear-gradient(#e8c873,#a97c2c);
-webkit-background-clip:text;background-clip:text;color:transparent}
.b-f .garis-m{height:2px;background:var(--emas);margin-top:10px;transform-origin:left;transform:scaleX(0);animation:garis 16s infinite;animation-delay:calc(12s + .9s)}
@keyframes garis{0%{transform:scaleX(0)}3%{transform:scaleX(1)}23%{transform:scaleX(1)}25%,100%{transform:scaleX(0)}}
.b-f .penutur{width:62%;margin-left:-4%;left:auto;right:0}
.cip{position:absolute;display:none;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--kad);
border:1px solid var(--garis-2);font:500 13px/1 Geist,sans-serif;color:var(--ink-2);animation:apung 6s ease-in-out infinite;white-space:nowrap;z-index:3}
.cip i{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.cip.c2{animation-delay:-1.5s}.cip.c3{animation-delay:-3s}.cip.c4{animation-delay:-4.5s}
@keyframes apung{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (min-width:1080px){.cip{display:inline-flex}}
.cip.c1{left:2%;top:16%}.cip.c2{right:0;top:30%}.cip.c3{left:-2%;bottom:24%}.cip.c4{right:4%;bottom:12%}

/* ---------- bahagian ---------- */
.bhg{padding:88px 0;border-top:1px solid var(--garis)}
.kepala-bhg{max-width:720px;margin-bottom:40px}
.kepala-bhg .label{margin-bottom:16px}
h2{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.08;font-size:clamp(30px,4.4vw,48px)}
.kepala-bhg p{margin:14px 0 0;color:var(--ink-2);font-size:17px}
.dua-kad{display:grid;gap:16px}
@media (min-width:860px){.dua-kad{grid-template-columns:1fr 1fr}}
.kad{background:var(--kad);border:1px solid var(--garis);border-radius:var(--jejari);padding:28px}
.kad h3{margin:12px 0 0;font-size:24px;letter-spacing:-.03em;line-height:1.15}
.kad p{margin:10px 0 0;color:var(--ink-2)}
.kad.sorot{border-color:rgb(212 255 58/.45);background:linear-gradient(160deg,rgb(212 255 58/.08),var(--kad) 55%)}
.tanda{font:600 12px/1 "Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--lembut)}
.kad.sorot .tanda{color:var(--lime)}
.rantai{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.rantai span{font-size:12px;color:var(--lembut);border:1px dashed var(--garis-2);border-radius:999px;padding:6px 10px}
.sembang{margin-top:20px;display:grid;gap:8px}
.sembang .anda{justify-self:end;max-width:88%;background:#2a2a30;border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:14px}
.sembang .claude{justify-self:start;display:flex;flex-wrap:wrap;gap:6px}
.sembang .claude span{font:500 12px/1 "Geist Mono",monospace;border:1px solid var(--garis-2);border-radius:8px;padding:7px 9px;color:var(--ink-2)}
.sembang .claude span.ok{border-color:rgb(212 255 58/.5);color:var(--lime)}
.tiga{display:grid;gap:16px}
@media (min-width:860px){.tiga{grid-template-columns:repeat(3,1fr)}}
.ikon-kad{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgb(212 255 58/.1);color:var(--lime)}
.ikon-kad svg{width:20px;height:20px}
.kad .no{font:400 44px/1 Anton,Impact,sans-serif;color:var(--lime)}

/* ---------- gaya ---------- */
.grid-gaya{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.kad-gaya{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;background:var(--kad);border:1px solid var(--garis);
border-radius:var(--jejari);padding:16px}
.kad-gaya h3{margin:0;font-size:18px;letter-spacing:-.02em;line-height:1.2}
.kad-gaya .kod{font:600 12px/1 "Geist Mono",monospace;color:var(--lembut)}
.kad-gaya .atas-k{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lencana{font:600 11px/1 Geist,sans-serif;padding:4px 7px;border-radius:6px;background:rgb(212 255 58/.14);color:var(--lime)}
.kad-gaya p{margin:0;font-size:14px;color:var(--ink-2)}
.kad-gaya .arahan{margin-top:10px;font:500 12px/1.4 "Geist Mono",monospace;color:var(--lembut)}
.mini{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;align-self:start;border:1px solid var(--garis-2)}
.mini b{position:absolute;display:block}
.m-A{background:radial-gradient(60% 50% at 20% 30%,rgb(255 77 109/.55),transparent),radial-gradient(60% 50% at 80% 70%,rgb(77 225 255/.5),transparent),#ececec}
.m-A b:nth-child(1){left:12%;top:42%;width:76%;height:26%;border-radius:8px;background:linear-gradient(#1b1b1b,#3a3a3a)}
.m-A b:nth-child(2){left:20%;top:20%;width:30%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgb(0 0 0/.15)}
.m-B{background:linear-gradient(160deg,#2f7f6e,#63b9a3)}
.m-B b:nth-child(1){left:22%;top:16%;width:56%;height:58%;border-radius:10px;background:#0e1513;border:2px solid #b9a6ff}
.m-B b:nth-child(2){left:14%;bottom:12%;font:800 15px/1 Geist,sans-serif;color:#3fe0b0}
.m-C{background:#121212}
.m-C b:nth-child(1){left:50%;top:40%;width:120%;aspect-ratio:1;margin-left:-60%;margin-top:-60%;border-radius:50%;
background:repeating-conic-gradient(rgb(232 200 115/.35) 0 6deg,transparent 6deg 16deg)}
.m-C b:nth-child(2){z-index:2;left:0;right:0;top:16%;text-align:center;font:italic 700 18px/1 Georgia,serif;color:var(--emas)}
.m-D{background:linear-gradient(170deg,#c091f4,#8a5ce6)}
.m-D b:nth-child(1){left:10%;top:18%;font:400 26px/.86 Anton,Impact,sans-serif;color:var(--neon);transform:rotate(-7deg)}
.m-E{background:#13694d;background-image:linear-gradient(rgb(79 143 120/.4) 1px,transparent 1px),linear-gradient(90deg,rgb(79 143 120/.4) 1px,transparent 1px);background-size:12px 12px}
.m-E b:nth-child(1){left:10%;top:14%;width:56%;height:16%;background:#ffda4c;transform:rotate(-3deg)}
.m-E b:nth-child(2){left:16%;top:42%;width:40%;aspect-ratio:1;background:#f2d04a;transform:rotate(4deg)}
.m-E b:nth-child(3){right:10%;top:58%;width:36%;aspect-ratio:1;background:#f2d04a;transform:rotate(-5deg)}
.m-F{background:#17140f}
.m-F b:nth-child(1){left:10%;right:10%;top:12%;height:1px;background:rgb(207 200 184/.5)}
.m-F b:nth-child(2){left:10%;top:22%;font:400 30px/.9 Anton,Impact,sans-serif;background:linear-gradient(#e8c873,#a97c2c);
-webkit-background-clip:text;background-clip:text;color:transparent}
.m-X{background:linear-gradient(160deg,#2a2a30,#141417)}
.m-X b{left:0;right:0;top:40%;text-align:center;font:400 28px/1 Anton,Impact,sans-serif;color:var(--lime)}
.penutur-mini{position:absolute;left:18%;bottom:0;width:64%;z-index:1}

/* ---------- cara ---------- */
.url-k{display:flex;align-items:center;gap:12px;margin-top:24px;padding:14px 16px;border-radius:12px;background:var(--bg-2);
border:1px dashed var(--garis-2);font:500 15px/1.3 "Geist Mono",monospace;overflow-wrap:anywhere;user-select:all}
.url-k small{font:500 12px/1 Geist,sans-serif;color:var(--lembut);user-select:none;flex:none}

/* ---------- harga ---------- */
.grid-harga{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));max-width:880px}
.kad-harga{display:flex;flex-direction:column;background:var(--kad);border:1px solid var(--garis);border-radius:var(--jejari);padding:28px}
.kad-harga.sorot{border-color:rgb(212 255 58/.5)}
.grid-harga.satu{max-width:460px}
.tawaran{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;font-size:15px}
.tawaran s{color:var(--lembut);font-weight:600}
.tawaran .jimat{font:600 13px/1 Geist,sans-serif;color:var(--lime)}
.tawaran+.harga{margin-top:8px}
.kad-harga h3{margin:0;font-size:20px;letter-spacing:-.02em}
.kad-harga .harga{margin-top:14px;font:800 40px/1 Geist,sans-serif;letter-spacing:-.04em}
.kad-harga .harga small{font-size:15px;font-weight:500;color:var(--lembut);letter-spacing:0}
.kad-harga .belum{margin-top:14px;font-size:18px;font-weight:600;color:var(--ink-2)}
.kad-harga ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px;flex:1}
.kad-harga li{display:flex;gap:10px;font-size:15px;color:var(--ink-2)}
.kad-harga li svg{width:18px;height:18px;flex:none;color:var(--lime);margin-top:3px}
.nota-harga{margin-top:20px;font-size:14px;color:var(--lembut)}

/* ---------- soalan ---------- */
.soalan{max-width:820px;border-top:1px solid var(--garis)}
.soalan details{border-bottom:1px solid var(--garis)}
.soalan summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
padding:20px 0;font-size:17px;font-weight:600}
.soalan summary::-webkit-details-marker{display:none}
.soalan summary::after{content:"+";font:400 24px/1 Geist,sans-serif;color:var(--lembut);transition:transform .2s}
.soalan details[open] summary::after{transform:rotate(45deg)}
.soalan details>p{margin:0 0 20px;color:var(--ink-2);max-width:68ch}
.soalan details:not([open])>p{display:none}

/* ---------- akhir + kaki ---------- */
.akhir{padding:72px 0}
.band{position:relative;overflow:hidden;border-radius:24px;padding:56px 28px;background:var(--lime);color:var(--lime-ink);text-align:center}
.band h2{max-width:760px;margin:0 auto}
.band p{margin:14px auto 0;max-width:560px;font-size:17px;color:rgb(11 11 12/.75)}
.band .btn.utama{background:var(--lime-ink);color:var(--lime);margin-top:28px}
.kaki{border-top:1px solid var(--garis);padding:32px 0 48px;font-size:14px;color:var(--lembut)}
.kaki .bekas{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.k0{--k:0}.k1{--k:1}.k2{--k:2}.k3{--k:3}
.kaki-pautan{display:flex;flex-wrap:wrap;gap:12px 20px}
.kaki a{color:var(--ink-2);text-decoration:none}
.kaki a:hover{color:var(--ink)}

/* ---------- jalur tawaran ---------- */
.jalur{display:block;background:var(--lime);color:var(--lime-ink);text-decoration:none;font-size:13px;line-height:1.35}
.jalur .bekas{display:flex;align-items:center;justify-content:center;gap:6px 14px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;text-align:center}
.jalur b{font-weight:600}
.jalur-cta{display:inline-flex;align-items:center;gap:4px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.jalur-cta svg{width:14px;height:14px}

/* ---------- palet gaya + bedah ---------- */
.palet{display:flex;align-items:center;gap:10px;margin-top:10px}
.palet svg{height:14px;width:auto;flex:none}
.palet span{font:500 11px/1.3 "Geist Mono",monospace;color:var(--lembut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pita{margin-top:28px;overflow:hidden;border-block:1px solid var(--garis);padding:14px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pita-isi{display:flex;gap:28px;width:max-content;animation:pita 40s linear infinite}
.pita-isi span{font:400 22px/1 Anton,Impact,sans-serif;letter-spacing:.02em;color:var(--ink-2);white-space:nowrap}
.pita-isi span:nth-child(3n+1){color:var(--lime)}
@keyframes pita{to{transform:translateX(-50%)}}

/* ---------- video contoh ---------- */
.contoh{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.contoh{grid-template-columns:minmax(0,1fr) minmax(0,360px)}.contoh .kepala-bhg{margin-bottom:0}}
.cip-baris{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.cip-baris li{font:500 12px/1 "Geist Mono",monospace;color:var(--ink-2);border:1px solid var(--garis-2);border-radius:999px;padding:7px 10px}
.bingkai-video{width:100%;max-width:360px;margin:0 auto;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#000;
box-shadow:0 0 0 1px var(--garis-2),0 30px 60px -20px rgb(0 0 0/.8),0 0 100px -30px rgb(212 255 58/.25)}
.bingkai-video iframe{display:block;width:100%;height:100%;border:0}

/* ---------- nota pasang ---------- */
.nota-pasang{display:grid;gap:12px;margin-top:16px}
@media (min-width:860px){.nota-pasang{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nota-pasang>div{border:1px solid var(--garis);border-radius:12px;padding:16px 18px;background:var(--bg-2);min-width:0}
.nota-pasang h3{margin:0;font-size:15px;letter-spacing:-.01em}
.nota-pasang p{margin:6px 0 0;font-size:14px;color:var(--ink-2)}
.nota-pasang code{display:block;margin-top:10px;font:500 12px/1.5 "Geist Mono",monospace;color:var(--lime);overflow-wrap:anywhere;user-select:all}

/* ---------- cara bayar ---------- */
.cara-bayar{display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;padding:0;list-style:none;max-width:880px}
.cara-bayar li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.cara-bayar span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--kad);border:1px solid var(--garis-2);
font:600 12px/1 Geist,sans-serif;color:var(--lime);flex:none}

/* ---------- pakej pro ---------- */
.kad-pro{display:grid;gap:32px;border:1px solid var(--garis-2);border-radius:24px;padding:28px;
background:radial-gradient(80% 120% at 100% 0%,rgb(155 107 240/.18),transparent 60%),var(--kad)}
@media (min-width:900px){.kad-pro{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding:44px;align-items:center}}
.kad-pro .label i{background:#9b6bf0;box-shadow:0 0 0 4px rgb(155 107 240/.2)}
.kad-pro h2{margin-top:16px}
.pro-lead{margin:14px 0 0;color:var(--ink-2);font-size:17px}
.pro-ciri{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.pro-ciri li{display:flex;gap:10px;font-size:15px;color:var(--ink-2)}
.pro-ciri svg{width:18px;height:18px;flex:none;color:#b79cff;margin-top:3px}
.pro-borang{background:var(--bg-2);border:1px solid var(--garis);border-radius:16px;padding:22px}
.pro-borang label{display:block;font-weight:600;font-size:15px}
.pro-baris{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pro-baris input{flex:1 1 200px;min-width:0}
.pro-mesej{margin:12px 0 0;font-size:13px;color:var(--lembut)}
.pro-mesej.ok{color:var(--lime)}
.pro-mesej.ralat{color:#ff8a8a}
.pro-nota{margin:8px 0 0;font-size:12px;color:var(--lembut)}

/* ---------- medan borang (pro + beli) ---------- */
input[type=email],input[type=text],input[type=tel],input:not([type]){height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--garis-2);
background:var(--bg);color:var(--ink);font:16px/1 Geist,sans-serif;width:100%}
input[type=file]{font:14px/1.4 Geist,sans-serif;color:var(--ink-2);width:100%;padding:10px;border:1px dashed var(--garis-2);border-radius:12px;background:var(--bg)}
input::file-selector-button{font:600 13px/1 Geist,sans-serif;border:0;border-radius:999px;padding:9px 14px;margin-right:12px;background:var(--garis-2);color:var(--ink)}
input:focus-visible{outline:2px solid var(--lime);outline-offset:1px}

/* ---------- butang melekat (telefon) ---------- */
.lekat{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;justify-content:space-between;
padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgb(9 9 11/.96);border-top:1px solid var(--garis-2)}
.lekat>div{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.lekat b{font:800 20px/1 Geist,sans-serif;letter-spacing:-.03em}
.lekat s{font-size:13px;color:var(--lembut)}
.lekat small{font-size:12px;color:var(--lembut)}
@media (max-width:899px){body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}}
@media (min-width:900px){.lekat{display:none}}
@media (max-width:899px){.cta-atas{display:none}}

/* ---------- halaman beli ---------- */
.halaman-beli{padding:32px 0 72px}
.beli-grid{display:grid;gap:24px;align-items:start}
@media (min-width:900px){.beli-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}.halaman-beli{padding-top:56px}}
.beli-h1{margin:0;font-weight:800;letter-spacing:-.04em;line-height:1.05;font-size:clamp(32px,5vw,48px)}
.beli-lead{margin:12px 0 24px;color:var(--ink-2);font-size:17px;max-width:48ch}
.kad-harga.ringkas{padding:24px}
.kad-harga.ringkas ul{margin-bottom:0}
.beli-kad{padding:24px}
@media (min-width:640px){.beli-kad{padding:32px}}
.beli-h2{display:flex;align-items:center;gap:10px;margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.no-k{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--lime-ink);font-size:14px;flex:none}
.jarak-l{margin-top:32px;padding-top:28px;border-top:1px solid var(--garis)}
.kecil-l{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.qr{margin:18px 0 0;width:min(260px,100%);aspect-ratio:1;padding:12px;border-radius:16px;background:#fff}
.qr img{width:100%;height:100%;object-fit:contain}
.bank{display:grid;gap:8px;margin:16px 0 0}
.bank div{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:15px}
.bank dt{color:var(--lembut);min-width:120px}
.bank dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.borang{display:grid;gap:8px;margin-top:16px}
.borang label{font-size:14px;font-weight:600;margin-top:8px}
.borang small{font-size:13px;color:var(--lembut)}
.borang .setuju{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--ink-2);margin-top:14px}
.borang .setuju input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--lime)}
.borang .btn{margin-top:14px;height:50px;font-size:16px}
.ralat-l{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:rgb(255 90 90/.1);border:1px solid rgb(255 90 90/.35);color:#ffb3b3;font-size:14px}
.terima{max-width:560px;margin:0 auto;text-align:center}
.terima p{font-size:16px}
.terima .btn{margin-top:20px}
.ikon-kad.besar{width:56px;height:56px;border-radius:16px;margin:0 auto 18px}
.ikon-kad.besar svg{width:28px;height:28px}
.beli-kad .btn.utama{width:100%}
.langkah-tempah{margin:14px 0 4px;padding-left:20px;display:grid;gap:8px;color:var(--ink-2);font-size:15px}
.langkah-tempah li::marker{color:var(--lime);font-weight:700}
.ok-l{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:rgb(212 255 58/.08);border:1px solid rgb(212 255 58/.35);color:var(--ink);font-size:14px}
.bayar .bank{margin-top:14px}
.bayar .beli-h2{margin-top:24px}
.jarak-l2{margin-top:20px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .b-d,.b-d .masuk-k{opacity:1}
  .bar-cerita span:first-child::after{transform:scaleX(1)}
  html{scroll-behavior:auto}
  .pita-isi{transform:none}
}