/* ==========================================================================
   Demo aplikasi Motion Lab (animasi alur: pesan -> tim bekerja -> render -> siap upload)
   Tampilan meniru tema gelap aplikasi asli (source-asli/ui/tema-neu.css).
   ========================================================================== */
.demo-sec{padding-top:90px}
.win{border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:#1E2129;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03),0 40px 120px -60px rgba(255,90,31,.55)}
.win-bar{height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#1A1D23;border-bottom:1px solid rgba(0,0,0,.4)}
.win-bar i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.win-bar i:nth-child(2){background:#FEBC2E}.win-bar i:nth-child(3){background:#28C840}
.win-bar span{margin:0 auto;font-size:12.5px;color:#8D94A3;font-weight:600;transform:translateX(-26px)}
.viewport{position:relative;width:100%;overflow:hidden;background:#262A33}

/* panggung internal ukuran tetap, diskalakan JS supaya pas lebar */
.app{--bg:#262A33;--s2:#2B3039;--s3:#323844;--ink:#E7EAF0;--ink2:#C3C8D3;--mut:#8D94A3;--hi:#313642;--lo:#1A1D23;
  --acc:#2F8BFF;--grad:linear-gradient(135deg,#1F5BFF 0%,#2F8BFF 55%,#33D2E6 100%);
  --raise:7px 7px 16px var(--lo),-7px -7px 16px var(--hi);--raise-sm:4px 4px 9px var(--lo),-4px -4px 9px var(--hi);
  --press:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi);
  position:absolute;left:0;top:0;width:1200px;height:720px;transform-origin:0 0;display:flex;
  background:var(--bg);color:var(--ink);font-family:"Montserrat","Plus Jakarta Sans",sans-serif;font-size:14px;line-height:1.45;font-weight:500}
.app *{box-sizing:border-box}
.a-side{width:212px;flex:none;padding:18px 12px;display:flex;flex-direction:column;box-shadow:6px 0 18px -10px var(--lo);z-index:2}
.a-logo{display:flex;gap:10px;align-items:center;padding:0 8px 18px}
.a-logo img{width:34px;height:34px;border-radius:10px;background:#111;padding:5px;box-shadow:var(--raise-sm)}
.a-logo b{display:block;font-size:14.5px}.a-logo small{color:var(--mut);font-size:11px}
.a-lab{font-size:10.5px;letter-spacing:.1em;color:var(--mut);font-weight:700;margin:14px 10px 6px}
.a-nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;color:var(--ink2);font-size:13.5px;margin:2px 0;transition:box-shadow .3s,color .3s}
.a-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.a-nav em{margin-left:auto;font-style:normal;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--grad);color:#fff;opacity:0;transition:opacity .3s}
.a-nav.on{box-shadow:var(--press);color:var(--acc)}
.a-nav em.show{opacity:1}
.a-run{margin-top:auto;border-radius:14px;box-shadow:var(--press);padding:12px;font-size:11.5px;color:var(--mut)}
.a-run b{color:var(--ink);display:flex;align-items:center;gap:7px;font-size:12px}
.a-run b i{width:7px;height:7px;border-radius:50%;background:#8D94A3}
.a-run.live b i{background:#33D2E6;box-shadow:0 0 8px #33D2E6}
.a-run .bar{height:5px;border-radius:9px;box-shadow:var(--press);margin-top:9px;overflow:hidden}
.a-run .bar span{display:block;height:100%;width:0;background:var(--grad)}

.a-main{flex:1;position:relative;overflow:hidden}
.scene{position:absolute;inset:0;padding:26px 30px;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s;pointer-events:none}
.scene.on{opacity:1;transform:none}
.eyb{font-size:11px;letter-spacing:.12em;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.scene h4{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:2px 0 2px}
.scene .desc{color:var(--mut);font-size:13px;margin-bottom:18px}
.card{border-radius:18px;box-shadow:var(--raise);padding:18px 20px;background:var(--bg)}

/* scene 1 */
.s1-grid{display:grid;grid-template-columns:1fr 290px;gap:22px}
.s1-col{display:grid;gap:16px}
.st-h{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.st-h b{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:12.5px}
.st-h strong{font-size:15px}
.row-f{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.lbl{font-size:12px;font-weight:700;margin-bottom:7px}
.stepper{display:flex;align-items:center;gap:6px;border-radius:999px;box-shadow:var(--press);padding:4px}
.stepper span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);font-size:16px;transition:box-shadow .15s}
.stepper span.pr{box-shadow:var(--press)}
.stepper .v{width:28px;text-align:center;font-weight:700;font-size:15px}
.fmt{display:flex;gap:10px}
.fmt div{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:13px;box-shadow:var(--raise-sm);font-size:12.5px;font-weight:700;border:1.5px solid transparent}
.fmt div small{display:block;font-weight:500;color:var(--mut);font-size:10.5px}
.fmt div.sel{border-color:var(--acc);color:var(--acc)}
.fmt i{display:block;border:1.6px solid currentColor;border-radius:3px}
.inp{border-radius:13px;box-shadow:var(--press);padding:12px 14px;font-size:14px;min-height:44px;color:var(--ink)}
.inp .ph{color:var(--mut)}
.inp .cr{display:inline-block;width:2px;height:16px;background:var(--acc);vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
.gaya{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.gaya div{aspect-ratio:9/12;border-radius:12px;overflow:hidden;box-shadow:var(--raise-sm);position:relative;border:2px solid transparent;transition:border-color .2s,transform .2s}
.gaya img{width:100%;height:100%;object-fit:cover;display:block}
.gaya div.sel{border-color:var(--acc);transform:translateY(-3px)}
.gaya div.sel::after{content:"✓";position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--grad);color:#fff;font-size:11px;display:grid;place-items:center}
.sum{display:flex;flex-direction:column}
.sum .ln{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.25);font-size:12.5px;color:var(--mut)}
.sum .ln b{color:var(--ink)}
.eta{border-radius:13px;box-shadow:var(--press);padding:11px 13px;margin:14px 0;font-size:11.5px;color:var(--mut)}
.eta b{display:block;color:var(--ink);font-size:17px}
.go{border-radius:14px;padding:13px;text-align:center;font-weight:700;color:#fff;background:var(--grad);box-shadow:0 12px 26px -10px rgba(31,91,255,.8);transition:transform .15s,filter .15s}
.go.pr{transform:scale(.96);filter:brightness(1.15)}

/* scene 2 */
.top-card{display:flex;align-items:center;gap:22px;margin-bottom:16px}
.pct{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1;width:120px}
.pct small{font-size:18px;color:var(--mut)}
.tc-mid{flex:1}
.tc-mid b{font-size:15.5px}
.tc-mid .who{font-size:12.5px;color:var(--mut);margin:2px 0 10px}.tc-mid .who em{font-style:normal;color:var(--acc);font-weight:700}
.pbar{height:9px;border-radius:9px;box-shadow:var(--press);overflow:hidden}
.pbar span{display:block;height:100%;width:0;background:var(--grad);border-radius:9px}
.s2-grid{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.vids{display:grid;gap:12px;align-content:start}
.vid{padding:14px 18px}
.vid .t{display:flex;justify-content:space-between;font-weight:700;font-size:13.5px;margin-bottom:12px}
.vid .t span{font-size:11px;color:var(--acc);box-shadow:var(--press);padding:2px 8px;border-radius:8px}
.steps{display:flex;justify-content:space-between;position:relative}
.steps::before{content:"";position:absolute;left:18px;right:18px;top:14px;height:2px;background:rgba(0,0,0,.35)}
.steps div{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:var(--mut);width:60px}
.steps i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;background:var(--bg);box-shadow:var(--raise-sm);color:var(--mut);transition:background .3s,color .3s}
.steps .done i{background:var(--grad);color:#fff}
.steps .cur i{box-shadow:0 0 0 2px var(--acc);color:var(--acc)}
.steps .cur{color:var(--acc);font-weight:700}
.log{padding:16px 18px}
.log h5{font-size:15px;margin-bottom:2px}.log p.d{font-size:11.5px;color:var(--mut);margin-bottom:8px}
.log .it{display:none;gap:12px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.22);font-size:12px}
.log .it.show{display:flex;animation:itIn .35s ease-out}
@keyframes itIn{from{opacity:0;transform:translateY(-6px)}}
.log .it span{color:var(--mut);font-variant-numeric:tabular-nums;width:38px;flex:none}
.log .it b{display:block;font-size:12px}.log .it small{color:var(--ink2);font-size:11.5px}

/* scene 3 */
.s3-grid{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
.phone{aspect-ratio:9/16;border-radius:22px;overflow:hidden;position:relative;box-shadow:var(--raise);border:3px solid #15171C}
.phone img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 6s linear}
.phone.zoom img{transform:scale(1)}
.phone .subt{position:absolute;left:12px;right:12px;bottom:58px;text-align:center;font-weight:800;font-size:19px;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.9);color:#fff}
.phone .subt .w{opacity:.35;transition:opacity .15s,color .15s}
.phone .subt .w.on{opacity:1}.phone .subt .w.hl{color:#FFD43B}
.phone .rec{position:absolute;top:10px;left:10px;font-size:10.5px;font-family:"JetBrains Mono",monospace;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px;display:flex;gap:6px;align-items:center}
.phone .rec i{width:7px;height:7px;border-radius:50%;background:#FF4D4D;animation:blink 1s steps(1) infinite}
.rinfo{display:grid;gap:16px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kv div{border-radius:14px;box-shadow:var(--press);padding:12px 14px;font-size:11.5px;color:var(--mut)}
.kv div b{display:block;color:var(--ink);font-size:20px;font-variant-numeric:tabular-nums}
.wave2{display:flex;align-items:center;gap:3px;height:54px}
.wave2 i{flex:1;border-radius:2px;background:var(--grad);opacity:.35;transition:opacity .2s}
.wave2 i.on{opacity:1}
.chk{display:grid;gap:8px;font-size:13px}
.chk div{display:flex;align-items:center;gap:10px;opacity:.35;transition:opacity .3s}
.chk div.on{opacity:1}
.chk div i{width:20px;height:20px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-style:normal;font-size:11px}

/* scene 4 */
.s4-grid{display:grid;grid-template-columns:repeat(3,1fr) 330px;gap:16px;align-items:start}
.vc{border-radius:16px;box-shadow:var(--raise);overflow:hidden;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .45s,transform .45s,box-shadow .3s}
.vc.show{opacity:1;transform:none}
.vc.sel{box-shadow:0 0 0 2px var(--acc),var(--raise)}
.vc .th{aspect-ratio:9/14;position:relative;overflow:hidden}
.vc .th img{width:100%;height:100%;object-fit:cover;display:block}
.vc .th .pl{position:absolute;inset:0;display:grid;place-items:center}
.vc .th .pl span{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;backdrop-filter:blur(4px)}
.vc .th .bd{position:absolute;top:9px;left:9px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:7px;background:#18A06A;color:#fff}
.vc .ti{padding:10px 12px;font-size:12.5px;font-weight:700;line-height:1.3}
.vc .ti small{display:block;font-weight:500;color:var(--mut);font-size:11px;margin-top:3px}
.capt{padding:18px;opacity:0;transform:translateX(16px);transition:opacity .45s,transform .45s}
.capt.show{opacity:1;transform:none}
.capt h5{font-size:14.5px;margin-bottom:10px}
.capt .tx{border-radius:13px;box-shadow:var(--press);padding:12px;font-size:12px;color:var(--ink2);line-height:1.55}
.capt .hs{color:var(--acc);margin-top:6px;display:block}
.capt .bt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.capt .bt div{border-radius:12px;box-shadow:var(--raise-sm);padding:10px;text-align:center;font-size:12px;font-weight:700;transition:box-shadow .15s,color .15s}
.capt .bt div.pr{box-shadow:var(--press);color:var(--acc)}
.capt .jd{display:flex;justify-content:space-between;margin-top:14px;font-size:12px;color:var(--mut)}
.capt .jd b{color:var(--ink)}

/* kursor & toast */
.cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:20;pointer-events:none;transition:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
.cursor .rp{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;opacity:0}
.cursor.clk .rp{animation:rp .5s ease-out}
@keyframes rp{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.toast{position:absolute;left:50%;bottom:22px;z-index:15;transform:translate(-50%,20px);opacity:0;transition:opacity .3s,transform .3s;background:#1A1D23;border:1px solid rgba(255,255,255,.08);color:var(--ink);padding:10px 16px;border-radius:12px;font-size:13px;font-weight:600;display:flex;gap:9px;align-items:center;box-shadow:0 16px 40px -10px rgba(0,0,0,.8)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast i{width:18px;height:18px;border-radius:50%;background:#18A06A;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff}

/* kontrol pemutar */
.player{display:flex;align-items:center;gap:12px;margin-top:18px}
.pp{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.pp:hover{background:rgba(255,255,255,.08)}
.chaps{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.chap{background:none;border:0;color:var(--muted);font-family:inherit;text-align:left;cursor:pointer;padding:0;font-size:13px;font-weight:600}
.chap .tr{display:block;height:4px;border-radius:4px;background:var(--line-2);overflow:hidden;margin-bottom:9px}
.chap .tr span{display:block;height:100%;width:0;background:var(--acc)}
.chap.on{color:var(--ink)}
.chap small{font-family:var(--mono);font-size:11px;color:var(--acc-2);margin-right:6px}

/* mode ringkas (HP): sidebar disembunyikan, panggung lebih sempit */
.app.compact{width:680px;height:780px;font-size:15px}
.app.compact .a-side{display:none}
.app.compact .s1-grid,.app.compact .s2-grid,.app.compact .s3-grid{grid-template-columns:1fr}
.app.compact .sum,.app.compact .log{display:none}
.app.compact .s3-grid{grid-template-columns:260px 1fr}
.app.compact .kv{grid-template-columns:1fr}
.app.compact .s4-grid{grid-template-columns:repeat(3,1fr)}
.app.compact .capt{grid-column:1/-1}
.app.compact .go-m{display:block}
.go-m{display:none;margin-top:4px}
@media (max-width:760px){
  .chaps{grid-template-columns:repeat(4,1fr);gap:6px}
  .chap{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chap small{display:none}
  .win-bar span{font-size:11px}
}