/* Live-stream package (OBS browser sources), on top of ../../youtube/_ortak/hareket.css. Values from tokens. */

/* full scenes: white ground, lattice, tayf light (lime top-left, blue bottom-right) */
.scene { position: absolute; inset: 0; background: #fff; overflow: hidden; }
.scene .aura.lime { width: 820px; height: 680px; left: -460px; top: -420px; }   /* corner only: the copy never sits on it */
.scene .aura.cyan { width: 1400px; height: 1200px; left: 1240px; top: 520px; }
.scene .lat { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; -webkit-mask: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 45%, transparent 75%); mask: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 45%, transparent 75%); }
.scene .lat > svg { position: absolute !important; left: 0; top: 0; height: 1080px !important; }
.corner { position: absolute; left: 120px; top: 96px; }
.foot { position: absolute; left: 120px; bottom: 84px; font: 500 24px/1 var(--font-mono); letter-spacing: .08em; color: var(--color-ink-700); white-space: nowrap; }
.foot b { color: var(--color-tayf-blue-700); font-weight: 600; }
.foot i { font-style: normal; color: var(--color-mint-400); padding: 0 14px; }
.kicker { font: 600 24px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--color-tayf-blue-700); white-space: nowrap; }
.h1 { font: 700 132px/.98 var(--font-display); letter-spacing: -.03em; color: var(--color-ink); }
.lead { font: 400 40px/1.35 var(--font-text); color: var(--color-ink-700); }
.topic { display: inline-flex; align-items: center; gap: 18px; height: 72px; padding: 0 30px 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-2); font: 600 32px/1 var(--font-text); color: var(--color-ink); white-space: nowrap; }
.topic .chip { height: 48px; font-size: 17px; }

/* countdown digits: each digit in its own slot so a change can roll */
.cd { display: inline-flex; align-items: baseline; font: 700 200px/1 var(--font-display); letter-spacing: -.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.cd .slot { position: relative; display: inline-block; width: .6em; height: 1em; overflow: hidden; text-align: center; }
.cd .slot span { position: absolute; left: 0; right: 0; top: 0; }
.cd .sep { display: inline-block; width: .32em; text-align: center; color: var(--color-mint-400); transform: translateY(-.06em); }
.cdl { font: 600 22px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--color-tayf-blue-700); }
.bar { position: relative; height: 4px; border-radius: 4px; background: var(--color-mint-200); overflow: hidden; }
.bar i { position: absolute; inset: 0; background: var(--gradient-brand); transform-origin: 0 50%; }

/* overlay cards over unknown video: white, ink text (tayf mürekkebi), gradient as accent */
.ocard { position: absolute; background: #fff; border-radius: 24px; color: var(--color-ink);
  box-shadow: 0 24px 50px -22px rgba(0,68,90,.42), 0 3px 10px rgba(0,68,90,.10); }
.live { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--color-mint-100); color: var(--color-tayf-blue-800); font: 600 15px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.drift { background-size: 300% 100%; }

/* small countdown (inside pills and bars) */
.cdmini { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdmini .slot { position: relative; display: inline-block; width: .6em; height: 1.05em; overflow: hidden; vertical-align: -.2em; }
.cdmini .slot span { position: absolute; left: 0; right: 0; top: 0; text-align: center; }
.cdmini .sep { padding: 0 .05em; color: var(--color-mint-400); }