/* Sahne: telefon (önde) + laptop (arkada). Tasarım pikseliyle çizilir, --s ile ölçeklenir (js/main.js). */

.hero__player{min-width:0}
.stage{position:relative;width:100%;--w:990px;--h:690px;--s:1}
.stage__inner{position:absolute;top:0;left:calc((100% - var(--w) * var(--s)) / 2);width:var(--w);height:var(--h);transform:scale(var(--s));transform-origin:0 0}
.stage[data-mode="phone"] .laptop{display:none}

/* ---- telefon ------------------------------------------------------------- */
.phone{position:absolute;left:0;top:20px;width:312px;height:650px;padding:10px;border-radius:50px;background:#0b0f17;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),0 40px 70px -24px rgba(0,0,0,.65),0 8px 18px rgba(0,0,0,.3);z-index:2}
.phone__screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#fff;isolation:isolate}
.phone__island{position:absolute;top:19px;left:50%;width:86px;height:25px;border-radius:14px;background:#05070b;transform:translateX(-50%);z-index:6}

/* ---- laptop -------------------------------------------------------------- */
.laptop{position:absolute;left:272px;top:92px;width:718px}
.laptop__lid{position:relative;padding:10px 9px 12px;border-radius:16px 16px 6px 6px;background:#0b0f17;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),0 30px 60px -28px rgba(0,0,0,.7)}
.laptop__lid::before{content:"";position:absolute;top:4px;left:50%;width:4px;height:4px;border-radius:50%;background:#262d3a;transform:translateX(-50%)}
.laptop__screen{width:700px;height:431px;overflow:hidden;border-radius:4px;background:#f4f5f7;position:relative}
.laptop__base{position:relative;height:15px;margin:0 -22px;border-radius:2px 2px 16px 16px;background:linear-gradient(#aeb4bf,#8b919d);box-shadow:0 18px 30px -12px rgba(0,0,0,.55)}
.laptop__base::before{content:"";position:absolute;top:0;left:50%;width:110px;height:5px;border-radius:0 0 8px 8px;background:#6d7380;transform:translateX(-50%)}

/* odak: öndeki telefon okunur kalır; arkadaki masa/mini uygulama ekranı oynar ama geride durur
   (düşük kontrast, hafif bulanık, yavaş ve küçük salınım). Tek anahtar: --back-dim (0 = kapalı). */
.laptop{--back-dim:1;opacity:calc(1 - .42 * var(--back-dim));filter:blur(calc(1.3px * var(--back-dim))) saturate(calc(1 - .28 * var(--back-dim)));animation:laptop-drift 22s ease-in-out infinite alternate;will-change:transform}
@keyframes laptop-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(10px,-7px,0)}}
@media (prefers-reduced-motion:reduce){
  .laptop{animation:none;will-change:auto}
}

/* senaryo geçişi: sahne yana kayar (önce çıkar, sonra sağdan girer) */
.stage__inner{transition:translate .32s cubic-bezier(.4,0,.2,1),opacity .32s ease}
.stage__inner.is-out{translate:-64px 0;opacity:0}
.stage__inner.is-pre{translate:64px 0;opacity:0}
.stage__inner.no-trans{transition:none}

/* ---- kontroller ---------------------------------------------------------- */
.controls{margin:16px auto 0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.ctl{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--brand-paper) 28%,transparent);background:transparent;color:var(--on-dark);cursor:pointer;transition:background .2s,border-color .2s}
.ctl:hover:not(:disabled){background:color-mix(in srgb,var(--brand-paper) 12%,transparent)}
.ctl:disabled{opacity:.35;cursor:default}
.ctl--main{width:48px;height:48px;background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-accent-ink)}
.ctl--main:hover:not(:disabled){background:var(--brand-accent);filter:brightness(1.1)}
.controls__status{margin-inline-start:8px;font-size:13px;color:var(--on-dark-soft);font-variant-numeric:tabular-nums;min-width:9ch}
.hero__disclaimer{margin-top:10px;text-align:center;font-size:12.5px;color:var(--on-dark-soft)}
#demo-transcript{white-space:normal}

@media (prefers-reduced-motion:reduce){
  .stage__inner{transition:none}
}

/* sahneye tıklayınca duraklat/devam; duraklatılınca küçük bir not */
.stage{cursor:pointer}
.stage__paused{display:block;width:max-content;margin:10px auto 0;padding:5px 14px;border-radius:999px;background:color-mix(in srgb,var(--brand-paper) 12%,transparent);color:var(--on-dark);font:500 12.5px/1 var(--font-body);opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
.stage.is-paused + .stage__paused{opacity:1;transform:none}
.is-calm .stage__paused{display:none}
.is-calm .stage{cursor:default}