/* Demo hero: prompt diketik di Claude Code, lalu jadi video 9:16 */

.demo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 236px; align-items: center; perspective: 1400px; }

.term {
  position: relative; z-index: 1; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #1d1b18, #151311);
  box-shadow: inset 0 1px 0 rgba(255, 244, 228, .12), inset 0 0 0 1px var(--line-ink), 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4);
  transform: rotateY(7deg) rotateX(3deg); transform-origin: right center;
}
.term-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line-ink); background: rgba(255, 244, 228, .025); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-4); }
.term-bar i:first-child { background: var(--accent); }
.term-bar span { margin-left: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--on-ink-3); white-space: nowrap; }
.term-body { padding: 18px 64px 22px 18px; font-family: var(--f-mono); font-size: 14px; line-height: 1.6; min-height: 232px; }
.prompt { color: var(--on-ink); min-height: 4.8em; word-break: break-word; }
.prompt .pr { color: var(--accent); font-weight: 700; }
.prompt .tcur { display: inline-block; width: .55em; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: var(--accent); }
.steps { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed rgba(255, 244, 228, .1); }
.steps li { display: flex; align-items: center; gap: 10px; height: 28px; font-family: var(--f-ui); font-size: 14px; color: var(--on-ink-2); opacity: 0; white-space: nowrap; }
.steps .st { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--ink-4); }
.steps .st::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.6px solid transparent; border-top-color: var(--soft); animation: spin .7s linear infinite; }
.steps li.ok .st { background: var(--accent); box-shadow: none; }
.steps li.ok .st::before { display: none; }
.steps li.ok .st::after { content: ""; position: absolute; left: 5px; top: 3.4px; width: 4px; height: 7px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.steps li.ok { color: var(--on-ink); }
@keyframes spin { to { transform: rotate(360deg); } }

.phone {
  position: relative; z-index: 2; margin-left: -40px; width: 276px; aspect-ratio: 9 / 18.6; padding: 9px; border-radius: 38px;
  background: linear-gradient(145deg, #3a352e, #15130f 40%, #2a2620);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 90px -30px rgba(0, 0, 0, .95), 0 0 120px -40px rgba(255, 74, 28, .3);
  transform-style: preserve-3d; will-change: transform, opacity;
}
.screen { position: relative; height: 100%; border-radius: 30px; overflow: hidden; container-type: inline-size; background: #0d0c0b; isolation: isolate; }
.screen .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #2a2a55 0%, #8a3f62 38%, #ff7a3d 68%, #ffc06b 86%, #3a2016 100%); }
.screen .haze { position: absolute; left: -20%; right: -20%; top: 60%; height: 30%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 210, 140, .55), transparent 70%); filter: blur(6px); }
.screen .sun { position: absolute; left: 50%; top: 40%; width: 30cqw; height: 30cqw; margin-left: -15cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4d6, #ffd27a 45%, #ff8b3d 100%); box-shadow: 0 0 40px 10px rgba(255, 170, 80, .55); }
.screen .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, #2b1a14, #120c0a); }
.screen .ground::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 28px; background: radial-gradient(60% 100% at 30% 100%, #2b1a14 60%, transparent 61%), radial-gradient(50% 100% at 78% 100%, #2b1a14 60%, transparent 61%); }
.kt { position: absolute; left: 9cqw; right: 9cqw; top: 13%; display: flex; flex-direction: column; gap: 2.6cqw; }
.kt b { display: block; text-wrap: balance; font-family: var(--f-display); font-weight: 700; font-size: 13cqw; line-height: .98; letter-spacing: -.01em; word-spacing: .1em; color: #fff; text-shadow: 0 3px 0 rgba(30, 10, 20, .35), 0 10px 30px rgba(40, 10, 30, .45); transform-origin: 30% 70%; will-change: transform, opacity, filter; }
.kt b.hot { color: #ffd18a; }
.kt2 { top: 13%; }
.kt2 b { font-size: 11.5cqw; }
.ray { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ray path { fill: none; stroke: #fff6dc; stroke-width: .8; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 220, 160, .9)); }
.ray .dot { fill: #9cc4ff; filter: drop-shadow(0 0 3px #8fb8ff); }
.ray .lab { font-family: var(--f-mono); font-size: 7.4px; fill: #d9e8ff; letter-spacing: .02em; }
.rnd { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 14cqw; background: rgba(13, 12, 11, .92); backdrop-filter: blur(6px); }
.rnd .bar { height: 5px; border-radius: 9px; background: rgba(255, 244, 228, .1); overflow: hidden; }
.rnd .bar i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--accent); }
.rnd span { font-family: var(--f-mono); font-size: 11.5px; color: var(--on-ink-2); }
.notch { position: absolute; z-index: 6; top: 9px; left: 50%; width: 34%; height: 22px; margin-left: -17%; border-radius: 0 0 14px 14px; background: #0d0c0b; }

.chip {
  position: absolute; z-index: 3; right: 196px; bottom: 26px;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 14px;
  background: var(--paper); color: var(--on-paper); font-family: var(--f-mono); font-size: 13px; white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff, 0 18px 40px -14px rgba(0, 0, 0, .8); will-change: transform, opacity;
}
.chip .ck { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--ta-hijau); }
.chip .ck svg { width: 13px; height: 13px; color: var(--ta-putih); }
.chip em { font-style: normal; color: var(--on-paper-2); }

@media (max-width: 760px) {
  .demo { grid-template-columns: 1fr; }
  .term { transform: none; }
  .term-body { font-size: 13px; padding: 16px 16px 18px; min-height: 0; }
  .prompt { min-height: 6.4em; }
  .steps li { font-size: 13px; height: 26px; }
  .steps { padding-right: 46%; }
  .phone { justify-self: end; margin: -150px -4px 0 0; width: 46%; max-width: 190px; padding: 6px; border-radius: 28px; }
  .screen { border-radius: 23px; }
  .notch { top: 6px; height: 15px; }
  .chip { left: 0; right: auto; bottom: 18px; font-size: 11.5px; padding: 8px 12px 8px 10px; gap: 8px; }
  .chip em { display: none; }
}