/* Toko Catatan Usaha: gaya mewah gelap beraksen emas, senada dengan aplikasi & galeri */
@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-display-latin-700-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-display-latin-500-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --bg: #090705; --card: #15110b; --card-2: #1c160d; --line: rgba(226, 187, 108, .2); --line-2: rgba(226, 187, 108, .45);
  --ink: #faf4e8; --muted: #c2b8a4; --soft: #8f8676; --gold: #e2bb6c; --gold-hi: #fbe6b2; --gold-lo: #a87c32;
  --green: #3ccf8e; --red: #f07d6e;
  --gold-edge: linear-gradient(135deg, #fff1c9, #c39a48 25%, #6a4d1c 48%, #efcd85 66%, #85612a 86%, #f7dd9e);
  --gold-text: linear-gradient(100deg, #b98a3e 0%, #f6dc9c 22%, #fff6dc 32%, #e9c47a 45%, #b98a3e 62%, #f6dc9c 80%, #c99a4c 100%);
  --btn: linear-gradient(180deg, #fbe7b0, #e6c072 45%, #c7953f);
  --radius: 22px; --wrap: 1160px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font: 500 16px/1.65 "Plus Jakarta Sans", system-ui, sans-serif; overflow-x: hidden; }
/* Butiran halus agar latar tidak terasa datar */
body::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-hi); }
button { font: inherit; cursor: pointer; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
em.gold, .gold-text { font-style: italic; font-weight: 500; background: var(--gold-text); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; animation: shimmer 7s ease-in-out infinite; }
.gold-text { font-style: normal; font-weight: 700; }
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Bilah pengumuman */
.announce { position: relative; z-index: 21; text-align: center; padding: 9px 16px; font-weight: 700; font-size: 13px; letter-spacing: .06em; color: #1b1205; background: linear-gradient(90deg, #b88a3c, #f6dc9c 30%, #fff1c9 50%, #f0cf86 70%, #b88a3c); }

/* Navigasi */
.nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); background: rgba(9, 7, 5, .72); border-bottom: 1px solid rgba(226, 187, 108, .12); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 66px; }
.logo { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 700 21px var(--serif); }
.logo img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 0 1px var(--line-2), 0 0 20px rgba(226, 187, 108, .3); }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.btn { color: #1b1205; }
@media (max-width: 820px) { .nav-links a.hide-m { display: none; } }

/* Tombol (dengan kilau cahaya yang lewat) */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 99px; padding: 17px 30px; font-weight: 800; font-size: 17px; line-height: 1.25; text-decoration: none; color: #1b1205; background: var(--btn);
  box-shadow: 0 14px 34px -12px rgba(226, 187, 108, .75), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(120, 80, 20, .35); transition: transform .15s, box-shadow .15s; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: sweep 4.5s ease-in-out infinite; }
@keyframes sweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(226, 187, 108, .9), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn.ghost { background: rgba(226, 187, 108, .04); color: var(--gold-hi); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn.ghost::after { display: none; }
.btn.ghost:hover { background: rgba(226, 187, 108, .1); }
.btn.sm { padding: 10px 20px; font-size: 15px; }
.btn.lg { padding: 20px 36px; font-size: 18.5px; }
.btn.block { width: 100%; }
.btn small { display: block; font-weight: 600; font-size: 12.5px; opacity: .75; }

/* Hero sinematik: judul besar di tengah, HP besar dengan sorot cahaya emas & layar yang berganti */
.hero { position: relative; min-height: min(calc(100svh - 104px), 900px); padding: 56px 0 40px; overflow: hidden; text-align: center; isolation: isolate; }
.hero .rays { position: absolute; inset: -10% -20% auto; height: 120%; z-index: -2; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255, 200, 120, .10) 10deg, transparent 22deg, transparent 150deg, rgba(255, 200, 120, .08) 162deg, transparent 176deg, transparent 184deg, rgba(255, 200, 120, .08) 198deg, transparent 210deg, transparent 338deg, rgba(255, 200, 120, .10) 350deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 85%); mask-image: linear-gradient(180deg, #000 20%, transparent 85%); animation: rays 14s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes rays { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.hero .halo { position: absolute; left: 50%; top: 58%; width: min(900px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 110, .34), rgba(226, 160, 70, .12) 45%, transparent 72%); filter: blur(6px); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .75; transform: translate(-50%, -50%) scale(.94); } }
.dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dust i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ffe2a3; box-shadow: 0 0 8px 2px rgba(255, 210, 130, .7); opacity: 0; animation: rise linear infinite; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .6; } 100% { transform: translateY(-105vh) translateX(30px); opacity: 0; } }
.hero h1 { font: 700 clamp(44px, 7.4vw, 104px)/.98 var(--serif); letter-spacing: -.02em; margin: 18px auto 18px; max-width: 1000px; text-wrap: balance; }
.hero h1 em { display: block; }
.hero .lead { font-size: clamp(17px, 2vw, 21px); color: var(--muted); max-width: 640px; margin: 0 auto; }
.hero .lead b { color: var(--ink); }
.hero .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 12px; }
.micro { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; color: var(--soft); font-size: 14px; font-weight: 600; }
.micro span::before { content: "✓ "; color: var(--gold); font-weight: 800; }

.kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); font-weight: 800; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; }
.kicker::before, .kicker.both::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.kicker.both::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hero-art { text-align: center; }
@media (min-width: 1000px) {
  .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; text-align: left; }
  .hero-grid h1 { font-size: clamp(54px, 5.6vw, 84px); margin-left: 0; }
  .hero-grid .lead { margin: 0; }
  .hero-grid .cta, .hero-grid .micro { justify-content: flex-start; }
  .hero-grid .stage { margin-top: 10px; width: min(300px, 23vw, calc((100svh - 240px) / 2.2)); }
  .hero-grid .chip.c1, .hero-grid .chip.c3 { margin-right: -46px; }
  .hero-grid .chip.c2 { margin-left: -56px; }
  .hero .halo { left: 72%; top: 52%; }
}

/* Panggung HP */
.stage { position: relative; width: min(340px, 74vw); margin: 44px auto 0; perspective: 1400px; }
.device { position: relative; aspect-ratio: 390 / 844; border-radius: 15% / 7%; padding: 3.2%; border: 6px solid transparent; transform-style: preserve-3d;
  background: linear-gradient(#050505, #050505) padding-box, var(--gold-edge) border-box;
  box-shadow: 0 60px 120px -40px #000, 0 0 70px rgba(240, 185, 90, .35), inset 0 0 0 2px #000; transition: transform .25s ease-out; }
.device::before { content: ""; position: absolute; left: -10px; top: 22%; width: 5px; height: 9%; border-radius: 3px; background: var(--gold-edge); }
.device::after { content: ""; position: absolute; right: -10px; top: 26%; width: 5px; height: 13%; border-radius: 3px; background: var(--gold-edge); }
.screen { position: relative; height: 100%; border-radius: 12% / 5.6%; overflow: hidden; background: #0b0b0d; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .9s ease, transform 1.6s ease; }
.screen img.on { opacity: 1; transform: none; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 30%); }
.notch { position: absolute; left: 50%; top: 2.2%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 99px; background: #000; z-index: 2; }
.stage .reflect { position: absolute; left: 8%; right: 8%; bottom: -46px; height: 50px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 200, 120, .35), transparent); filter: blur(8px); }
.caption { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 9px 18px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(18, 14, 9, .7); backdrop-filter: blur(10px); font-weight: 700; font-size: 14.5px; color: var(--gold-hi); }
.caption .dots { display: inline-flex; gap: 5px; }
.caption .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(226, 187, 108, .3); transition: background .3s, width .3s; }
.caption .dots i.on { width: 16px; border-radius: 4px; background: var(--gold); }
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-radius: 16px; text-align: left; white-space: nowrap;
  background: rgba(18, 14, 9, .78); backdrop-filter: blur(12px); border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px #000, 0 0 30px rgba(240, 185, 90, .15); animation: float 6s ease-in-out infinite; }
.chip b { display: block; font-size: 15px; }
.chip small { display: block; color: var(--soft); font-size: 12.5px; font-weight: 600; }
.chip .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: rgba(226, 187, 108, .12); border: 1px solid var(--line); }
.chip.c1 { right: 100%; margin-right: -14px; top: 14%; }
.chip.c2 { left: 100%; margin-left: -14px; top: 38%; animation-delay: -2s; }
.chip.c3 { right: 100%; margin-right: -24px; top: 66%; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Masuk panggung: HP naik dari bawah, keterangan muncul satu per satu */
.rv-on .stage { animation: rise 1.1s cubic-bezier(.2, .8, .2, 1) .15s both; }
@keyframes rise { from { opacity: 0; transform: translateY(80px) scale(.88); } }
.rv-on .chip { animation: pop .7s cubic-bezier(.2, 1.5, .4, 1) both, float 6s ease-in-out infinite; }
.rv-on .chip.c1 { animation-delay: 1s, 0s; }
.rv-on .chip.c2 { animation-delay: 1.35s, -2s; }
.rv-on .chip.c3 { animation-delay: 1.7s, -4s; }
@keyframes pop { from { opacity: 0; scale: .6; translate: 0 16px; } }
/* Di ponsel: judul ringkas, lalu HP langsung terlihat di layar pertama; penjelasan & tombol di bawahnya */
@media (max-width: 760px) {
  .hero { padding: 14px 0 30px; min-height: 0; }
  .hero-grid { display: flex; flex-direction: column; align-items: center; }
  .hero-copy { display: contents; }
  .hero .kicker { order: 1; font-size: 11px; letter-spacing: .2em; gap: 8px; }
  .hero .kicker::before, .hero .kicker.both::after { width: 20px; }
  .hero h1 { order: 2; font-size: clamp(30px, 9vw, 42px); margin: 8px auto 0; }
  .hero-art { order: 3; width: 100%; }
  .hero .lead { order: 4; margin-top: 22px; font-size: 16.5px; }
  .hero .cta { order: 5; margin-top: 20px; }
  .hero .micro { order: 6; }
  .hero .halo { top: 50%; }
  .stage { width: clamp(180px, calc((100svh - 250px) / 2.05), min(260px, 64vw)); margin-top: 16px; }
  .caption { margin-top: 26px; font-size: 13px; padding: 8px 14px; }
  .chip { padding: 9px 12px; gap: 8px; }
  .chip .ic { width: 28px; height: 28px; font-size: 15px; }
  .chip b { font-size: 13px; } .chip small { font-size: 11px; }
  .chip.c1 { right: auto; left: -30%; margin: 0; top: 8%; }
  .chip.c2 { left: auto; right: -30%; margin: 0; top: 44%; }
  .chip.c3 { right: auto; left: -28%; margin: 0; top: 76%; }
}

/* Angka kepercayaan */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 24px 18px; text-align: center; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 700 clamp(28px, 3.4vw, 38px)/1.1 var(--serif); background: var(--gold-text); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: 14px; font-weight: 600; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Pita jenis usaha berjalan */
.marquee { overflow: hidden; padding: 22px 0; border-bottom: 1px solid rgba(226, 187, 108, .1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 46px; width: max-content; animation: scroll 38s linear infinite; }
.marquee span { font: italic 500 24px var(--serif); color: rgba(246, 220, 156, .75); white-space: nowrap; }
.marquee span::after { content: "✦"; font-style: normal; font-size: 14px; color: var(--gold-lo); margin-left: 46px; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* Bagian umum */
section { padding: 84px 0; position: relative; }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.sec-head h2 { font: 700 clamp(32px, 4.6vw, 52px)/1.1 var(--serif); margin: 14px 0 14px; text-wrap: balance; }
.sec-head p { color: var(--muted); font-size: 17.5px; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold-lo); font-size: 14px; }
.ornament::before, .ornament::after { content: ""; width: min(160px, 26vw); height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.ornament::after { background: linear-gradient(90deg, var(--line-2), transparent); }

/* Pertanyaan pembuka */
.ask { text-align: center; }
.ask h2 { font: 700 clamp(30px, 4.8vw, 56px)/1.12 var(--serif); max-width: 900px; margin: 16px auto 28px; text-wrap: balance; }
.ask-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ask-btns button { padding: 14px 26px; border-radius: 99px; border: 1.5px solid var(--line-2); background: rgba(226, 187, 108, .05); color: var(--ink); font-weight: 700; font-size: 16px; transition: background .15s, border-color .15s; }
.ask-btns button:hover, .ask-btns button[aria-pressed="true"] { background: rgba(226, 187, 108, .16); border-color: var(--gold); }
.ask-out { max-width: 680px; margin: 22px auto 0; min-height: 56px; color: var(--muted); font-size: 18px; }
.ask-out b { color: var(--gold-hi); }

/* Sebelum vs sesudah */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vs-col { padding: 30px 28px; border-radius: 26px; }
.vs-col h3 { font: 700 26px var(--serif); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.vs-col ul { list-style: none; display: grid; gap: 14px; }
.vs-col li { display: flex; gap: 12px; align-items: flex-start; }
.vs-col li i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; margin-top: 1px; }
.vs-before { background: #110e0b; border: 1px solid rgba(255, 255, 255, .07); color: #9c9488; }
.vs-before h3 { color: #b9b1a4; }
.vs-before li i { background: rgba(240, 125, 110, .12); color: var(--red); }
.vs-after { border: 2px solid transparent; background: linear-gradient(165deg, #261c0e, #0f0c08 75%) padding-box, var(--gold-edge) border-box; box-shadow: 0 30px 80px -40px #000, 0 0 60px rgba(240, 185, 90, .14); }
.vs-after li { color: var(--ink); }
.vs-after li i { background: rgba(60, 207, 142, .14); color: var(--green); }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }

/* Kalkulator untung */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 30px; overflow: hidden; border: 1.5px solid transparent;
  background: linear-gradient(165deg, #1d160c, #0d0a07) padding-box, var(--gold-edge) border-box; box-shadow: 0 40px 90px -40px #000, 0 0 70px rgba(240, 185, 90, .12); }
.calc-in { padding: 32px 30px; display: grid; gap: 16px; align-content: start; }
.calc-in label { display: grid; gap: 7px; font-weight: 700; font-size: 15px; }
.calc-in label small { color: var(--soft); font-weight: 500; font-size: 13px; }
.money { display: flex; align-items: center; border-radius: 14px; border: 1px solid var(--line-2); background: #0a0806; }
.money span { padding: 0 4px 0 14px; color: var(--soft); font-weight: 700; }
.money input { flex: 1; min-width: 0; padding: 13px 14px 13px 4px; border: 0; background: transparent; color: var(--ink); font: 700 18px "Plus Jakarta Sans", sans-serif; outline: none; }
.money:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226, 187, 108, .18); }
.calc-out { padding: 32px 30px; background: rgba(0, 0, 0, .28); border-left: 1px solid var(--line); display: grid; align-content: center; gap: 16px; }
.calc-out .big { font: 700 clamp(38px, 5vw, 54px)/1.05 var(--serif); }
.calc-out .big.pos { color: var(--gold-hi); }
.calc-out .big.neg { color: var(--red); }
.calc-out .lbl { color: var(--soft); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.calc-row b { color: var(--ink); text-align: right; }
.calc-msg { padding: 14px 16px; border-radius: 14px; background: rgba(226, 187, 108, .08); border: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.calc-msg.warn { background: rgba(240, 125, 110, .08); border-color: rgba(240, 125, 110, .35); }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } .calc-out { border-left: 0; border-top: 1px solid var(--line); } }

/* Tur aplikasi: HP menempel di kiri, layarnya berganti mengikuti langkah yang sedang dibaca */
.story { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; }
.story-stage { position: sticky; top: max(80px, calc(50vh - 290px)); height: 580px; display: grid; place-items: center; }
.story-stage .device { width: 268px; }
.story-stage .halo2 { position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(255, 196, 110, .22), transparent 70%); pointer-events: none; }
.steps-s { display: grid; }
.step-s { min-height: min(78vh, 680px); display: flex; flex-direction: column; justify-content: center; padding: 30px 0; opacity: .32; transition: opacity .5s; }
.step-s.on { opacity: 1; }
.step-s .m-shot { display: none; }
.num { font: italic 500 18px var(--serif); color: var(--gold); letter-spacing: .1em; }
.step-s h3 { font: 700 clamp(30px, 3.8vw, 46px)/1.08 var(--serif); margin: 10px 0 16px; text-wrap: balance; }
.step-s p { color: var(--muted); font-size: 18px; margin-bottom: 18px; max-width: 520px; }
.list { list-style: none; display: grid; gap: 11px; }
.list li { display: flex; gap: 12px; align-items: flex-start; }
.list li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: rgba(226, 187, 108, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2bb6c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: inset 0 0 0 1px var(--line-2); }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-stage { display: none; }
  .step-s { min-height: 0; opacity: 1; padding: 34px 0; border-top: 1px solid rgba(226, 187, 108, .12); }
  .step-s .m-shot { display: block; width: min(250px, 66vw); margin: 0 auto 26px; border-radius: 30px; border: 3px solid #d9b265; box-shadow: 0 0 40px rgba(240, 185, 90, .3), 0 30px 60px -30px #000; }
}

/* Laptop: layar aplikasi asli dengan tab */
.desk-show { max-width: 1040px; margin: 0 auto; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.tabs button { padding: 10px 20px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-weight: 700; font-size: 15px; transition: all .2s; }
.tabs button[aria-selected="true"] { background: var(--btn); color: #1b1205; border-color: transparent; }
.laptop { position: relative; padding: 2% 2% 2.4%; border-radius: 22px 22px 10px 10px; border: 3px solid transparent;
  background: linear-gradient(#050505, #050505) padding-box, linear-gradient(160deg, #8d7a58, #2a241c 40%, #6f5f45 70%, #c9a866) border-box; box-shadow: 0 0 80px rgba(240, 185, 90, .18), 0 60px 100px -50px #000; }
.laptop .scr { position: relative; aspect-ratio: 1440 / 900; border-radius: 6px; overflow: hidden; background: #0b0b0d; }
.laptop .scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.laptop .scr img.on { opacity: 1; }
.laptop-base { height: 18px; margin: 0 -6%; border-radius: 0 0 40px 40px / 0 0 18px 18px; background: linear-gradient(180deg, #8b7d68, #3b342b 30%, #120f0c); box-shadow: 0 40px 60px -20px #000; }
.desk-note { text-align: center; color: var(--soft); font-size: 14px; margin-top: 22px; }

/* Coba langsung: demo asli di dalam HP */
.live { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }
.live h2 { font: 700 clamp(32px, 4.4vw, 52px)/1.1 var(--serif); margin: 14px 0 16px; text-wrap: balance; }
.live p { color: var(--muted); font-size: 17.5px; margin-bottom: 20px; }
.live .device { width: 320px; }
.live .screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live .poster { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; }
.live .poster img { opacity: .55; filter: blur(1px); transform: none; }
.live .poster .play { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; color: var(--ink); font-weight: 800; font-size: 16px; }
.live .poster .play i { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: #1b1205; font-style: normal; font-size: 26px; box-shadow: 0 0 0 10px rgba(226, 187, 108, .18), 0 0 40px rgba(226, 187, 108, .6); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px rgba(226, 187, 108, .06), 0 0 50px rgba(226, 187, 108, .7); } }
@media (max-width: 860px) { .live { grid-template-columns: 1fr; text-align: center; gap: 30px; } .live .device { width: min(300px, 76vw); margin: 0 auto; } .live .list { text-align: left; max-width: 420px; margin: 0 auto 20px; } }

/* Sekali bayar vs berlangganan */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto 40px; }
.cmp { padding: 26px 26px 22px; border-radius: 24px; }
.cmp h3 { font: 700 22px var(--serif); margin-bottom: 4px; }
.cmp .sub { color: var(--soft); font-size: 14px; margin-bottom: 16px; }
.cmp .row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px dashed rgba(255, 255, 255, .08); }
.cmp .row b { font-weight: 800; }
.cmp.sub-plan { background: #110e0b; border: 1px solid rgba(255, 255, 255, .07); color: #a59d90; }
.cmp.sub-plan .row b { color: var(--red); }
.cmp.ours { border: 2px solid transparent; background: linear-gradient(165deg, #261c0e, #0f0c08 75%) padding-box, var(--gold-edge) border-box; }
.cmp.ours .row b { color: var(--green); }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

/* Grid fitur */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { padding: 26px 24px; border-radius: var(--radius); background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.feat:hover { border-color: var(--line-2); transform: translateY(-3px); }
.ring { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; color: #f4d18a; border: 2px solid transparent;
  background: radial-gradient(circle at 50% 30%, #2d2315, #0b0906 72%) padding-box, var(--gold-edge) border-box; box-shadow: 0 0 20px rgba(240, 185, 90, .25); }
.ring svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.feat b { display: block; font-size: 17.5px; margin-bottom: 6px; }
.feat p { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

/* Bonus */
.bonus { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 34px; border-radius: 28px; border: 2px solid transparent;
  background: radial-gradient(500px 200px at 0% 0%, rgba(240, 190, 100, .18), transparent 70%), linear-gradient(160deg, #241b0e, #0e0b07) padding-box, var(--gold-edge) border-box; box-shadow: 0 0 60px rgba(240, 185, 90, .16); }
.bonus .gift { width: 92px; height: 92px; border-radius: 24px; display: grid; place-items: center; background: var(--btn); color: #1b1205; box-shadow: 0 16px 40px -12px rgba(226, 187, 108, .7); }
.bonus .gift svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bonus .tagline { color: var(--gold); font-weight: 800; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; }
.bonus h3 { font: 700 clamp(26px, 3.2vw, 36px)/1.15 var(--serif); margin: 6px 0 8px; }
.bonus p { color: var(--muted); }
@media (max-width: 640px) { .bonus { grid-template-columns: 1fr; text-align: center; } .bonus .gift { margin: 0 auto; } }

/* Langkah */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.step { position: relative; padding: 28px 24px 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.step::before { counter-increment: s; content: "0" counter(s); display: block; font: italic 500 40px/1 var(--serif); background: var(--gold-text); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; }
.step b { display: block; font-size: 18px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Harga */
.price-wrap { position: relative; }
.price-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 760px; height: 560px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(240, 185, 90, .2), transparent); }
.price-card { position: relative; max-width: 600px; margin: 0 auto; padding: 40px 34px 32px; border-radius: 32px; text-align: center; border: 2px solid transparent;
  background: linear-gradient(165deg, #251b0d, #0c0a07 70%) padding-box, var(--gold-edge) border-box; box-shadow: 0 50px 100px -40px #000, 0 0 80px rgba(240, 185, 90, .22); }
.seal { position: absolute; right: -18px; top: -26px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; text-align: center; transform: rotate(10deg);
  background: var(--btn); color: #1b1205; font: 800 11.5px/1.25 "Plus Jakarta Sans", sans-serif; letter-spacing: .04em; box-shadow: 0 16px 40px -10px rgba(226, 187, 108, .7), inset 0 0 0 4px rgba(255, 255, 255, .25), inset 0 0 0 6px rgba(120, 80, 20, .35); }
.seal b { display: block; font: 700 16px var(--serif); }
.price-card .tag { color: var(--muted); font-weight: 700; }
.price-card .big { font: 700 clamp(70px, 12vw, 104px)/1.05 var(--serif); background: var(--gold-text); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; margin: 8px 0 6px; animation: shimmer 7s ease-in-out infinite; }
.price-card .once { display: inline-block; padding: 7px 16px; border-radius: 99px; background: rgba(60, 207, 142, .12); color: var(--green); font-weight: 700; font-size: 14px; }
.price-card .perday { color: var(--muted); font-size: 15px; margin: 12px 0 24px; }
.price-card .perday b { color: var(--gold-hi); }
.stack-list { text-align: left; margin: 0 auto 26px; max-width: 460px; display: grid; gap: 2px; }
.stack-list div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.stack-list span { display: flex; gap: 10px; }
.stack-list span::before { content: "✦"; color: var(--gold); }
.stack-list em { font-style: normal; color: var(--gold-hi); font-weight: 700; white-space: nowrap; }
.pay-methods { margin-top: 16px; color: var(--soft); font-size: 13.5px; }
.guarantee { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding: 16px 18px; border-radius: 16px; background: rgba(226, 187, 108, .06); border: 1px dashed var(--line-2); color: var(--muted); font-size: 14.5px; text-align: left; }
.guarantee svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .seal { right: -6px; top: -34px; width: 90px; height: 90px; font-size: 10.5px; } }

/* FAQ */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s; }
.faq details[open] { border-color: var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 19px 54px 19px 22px; font-weight: 700; font-size: 16.5px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 24px; font-weight: 500; transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 19px; color: var(--muted); }

/* Penutup */
.final { text-align: center; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 50% 60%, rgba(240, 185, 90, .18), transparent 70%); pointer-events: none; }
.final .wrap { position: relative; }
.final h2 { font: 700 clamp(34px, 5.4vw, 64px)/1.06 var(--serif); margin: 14px auto 16px; max-width: 900px; text-wrap: balance; }
.final p { color: var(--muted); margin-bottom: 28px; font-size: 18px; }
.final .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
footer { padding: 38px 0 120px; border-top: 1px solid rgba(226, 187, 108, .12); color: var(--soft); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
footer a { color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: 16px; }

/* Muncul saat digulir */
/* Hanya disembunyikan bila JavaScript berjalan (kelas rv-on), supaya isi tetap terlihat bila skrip gagal */
.rv-on .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.rv-on .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv-on .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; }
}

/* Bilah beli di HP */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(9, 7, 5, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); transform: translateY(110%); transition: transform .3s; }
.buybar.on { transform: none; }
.buybar small { display: block; color: var(--soft); font-size: 12.5px; }
.buybar b { font: 700 22px var(--serif); color: var(--gold-hi); }
@media (max-width: 760px) { .buybar { display: flex; } }

/* Checkout */
.sheet { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(5px); }
.sheet.show { display: flex; }
.sheet-box { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 28px 24px 22px; border-radius: 26px; border: 1.5px solid transparent;
  background: linear-gradient(170deg, #1f180e, #0e0b08) padding-box, var(--gold-edge) border-box; box-shadow: 0 40px 100px -20px #000; }
.sheet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sheet-top h3 { font: 700 27px/1.2 var(--serif); }
.sheet-top p { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 20px; line-height: 1; }
.summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(226, 187, 108, .07); border: 1px solid var(--line); margin-bottom: 18px; font-size: 14.5px; }
.summary b { font-size: 15.5px; display: block; }
.summary .amt { font: 700 22px var(--serif); color: var(--gold-hi); white-space: nowrap; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 700; font-size: 14.5px; }
.field label small { color: var(--soft); font-weight: 500; }
.field input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #0a0806; color: var(--ink); font: 600 16px "Plus Jakarta Sans", sans-serif; outline: none; }
.field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226, 187, 108, .18); }
.field .hint { color: var(--soft); font-size: 13px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin: 4px 0 16px; }
.check input { margin-top: 3px; accent-color: var(--gold); width: 17px; height: 17px; flex: none; }
.err { display: none; padding: 11px 14px; border-radius: 12px; background: rgba(240, 125, 110, .1); border: 1px solid rgba(240, 125, 110, .4); color: #ffb4a8; font-size: 14px; margin-bottom: 14px; }
.err.show { display: block; }
.secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--soft); font-size: 12.5px; }

/* Banner pesanan terakhir */
.resume { display: none; margin: 16px auto 0; width: min(var(--wrap), 100% - 32px); padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(226, 187, 108, .07); font-size: 14.5px; }
.resume.show { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* Halaman pesanan & kebijakan */
.page { padding: 40px 0 80px; }
.panel { max-width: 640px; margin: 0 auto; padding: 30px 26px; border-radius: 26px; border: 1.5px solid transparent;
  background: linear-gradient(170deg, #1c160d, #0d0b08) padding-box, var(--gold-edge) border-box; box-shadow: 0 40px 90px -40px #000; }
.status-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; font-size: 34px; }
.status-ic.ok { background: rgba(60, 207, 142, .14); color: var(--green); box-shadow: 0 0 0 1px rgba(60, 207, 142, .4), 0 0 30px rgba(60, 207, 142, .2); }
.status-ic.wait { background: rgba(226, 187, 108, .12); color: var(--gold); box-shadow: 0 0 0 1px var(--line-2); }
.status-ic.bad { background: rgba(240, 125, 110, .12); color: var(--red); box-shadow: 0 0 0 1px rgba(240, 125, 110, .4); }
.panel h1 { font: 700 clamp(28px, 4vw, 36px)/1.15 var(--serif); text-align: center; margin-bottom: 8px; }
.panel .lead { text-align: center; color: var(--muted); margin-bottom: 24px; }
.meta { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); font-size: 14.5px; margin-bottom: 22px; }
.meta div { display: flex; justify-content: space-between; gap: 12px; }
.meta span { color: var(--soft); }
.meta b { text-align: right; word-break: break-all; }
.code-card { padding: 18px; border-radius: 18px; background: rgba(226, 187, 108, .06); border: 1px solid var(--line-2); margin-bottom: 14px; }
.code-card .what { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.code-card .what em { font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: rgba(60, 207, 142, .12); color: var(--green); }
.code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #0a0806; border: 1px dashed var(--line-2); margin-bottom: 12px; }
.code code { font: 800 clamp(20px, 5vw, 26px) ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; color: var(--gold-hi); }
.copy { flex: none; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--gold-hi); font-weight: 700; font-size: 14px; }
.howto { margin: 22px 0; padding: 18px 20px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.howto b { display: block; margin-bottom: 8px; }
.howto ol { padding-left: 20px; color: var(--muted); display: grid; gap: 6px; font-size: 15px; }
.stack { display: grid; gap: 10px; }
.note { color: var(--soft); font-size: 13.5px; text-align: center; margin-top: 16px; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(226, 187, 108, .25); border-top-color: var(--gold); animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.doc { max-width: 760px; margin: 0 auto; }
.doc h1 { font: 700 clamp(30px, 4vw, 40px)/1.15 var(--serif); margin-bottom: 8px; }
.doc h2 { font: 700 24px/1.25 var(--serif); margin: 34px 0 10px; color: var(--gold-hi); }
.doc p, .doc li { color: var(--muted); }
.doc ul, .doc ol { padding-left: 22px; display: grid; gap: 6px; margin: 8px 0; }
.doc p + p { margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 60; padding: 10px 18px; border-radius: 99px; background: #f4ead2; color: #1b1205; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }