/* SİBER 24 — Broadcast canvas 1920×1080 + design tokens */

/* Edge / lite: backdrop-filter GPU'yu kitler */
html.perf-lite * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Edge / lite: harita çizgi glow'u + nabız animasyonu kapalı (full'de açık) */
html.perf-lite .worldmap-link-core,
html.perf-lite .worldmap-link-spur-core,
html.perf-lite .worldmap-link-glow,
html.perf-lite .worldmap-link-spur-glow {
  animation: none !important;
}
html.perf-lite .worldmap-link-glow,
html.perf-lite .worldmap-link-spur-glow,
html.perf-lite .worldmap-link-node {
  filter: none !important;
}

/* SPACE basılı = yayın duraklatıldı: tüm CSS animasyonları donar (ticker,
   dash akışı, kart animasyonları); JS zamanlayıcıları pause.js bekletir */
html.broadcast-paused *,
html.broadcast-paused *::before,
html.broadcast-paused *::after {
  animation-play-state: paused !important;
}

html.broadcast-paused #stage::after {
  content: "⏸ DURAKLATILDI";
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  padding: 8px 18px;
  background: rgba(8, 16, 28, 0.88);
  border: 1px solid rgba(140, 230, 255, 0.4);
  border-radius: 4px;
  font-family: var(--font-display, sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #cfeaff;
  pointer-events: none;
}

:root {
  /* Layout */
  --stage-w: 1920px;
  --stage-h: 1080px;
  --safe-x: 36px;
  --safe-y: 20px;
  /* İçerik kartları (konu paneli, kamera, tarayıcı) için köşe bug'ından daha
     dar bir kenar boşluğu — yayın alanını tam sığdırmak için. */
  --content-x: 14px;
  --lt-h: 148px;
  --ticker-h: 40px;
  --other-h: 36px;
  --chrome-bottom: calc(var(--ticker-h) + var(--other-h));
  --browser-w: 1280px;
  --browser-h: 700px;
  --glass-green: #7dffa3;

  /* Brand colors */
  --c-bg-deep: #050a12;
  --c-bg-panel: #0a1420;
  --c-bg-panel-2: #0e1a2a;
  --c-ink: #f2f5f8;
  --c-ink-muted: #a8b4c4;
  --c-ink-faint: #6b7a8c;
  --c-red: #e10600;
  --c-red-deep: #a60b0b;
  --c-orange: #e85d04;
  --c-amber: #d4a017;
  --c-cyan: #3d9be0;
  --c-cyan-dim: #1e4f76;
  --c-line: #2a3f5c;
  --c-live: #e10600;

  /* Legacy aliases (mevcut CSS uyumu) */
  --red: var(--c-red);
  --red-bright: var(--c-red);
  --red-dark: var(--c-red-deep);
  --blue-deep: var(--c-bg-deep);
  --blue-panel: rgba(10, 20, 32, 0.94);
  --blue-glow: transparent;
  --white: var(--c-ink);
  --muted: var(--c-ink-muted);
  --panel-border: var(--c-line);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Arial", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-hero: 38px;
  --fs-h1: 34px;
  --fs-h2: 22px;
  --fs-body: 15px;
  --fs-meta: 12px;
  --fs-micro: 10px;
  --lh-tight: 1.05;
  --lh-body: 1.45;
  --track-display: 0.04em;
  --track-meta: 0.16em;

  /* Radius / border */
  --radius-0: 0px;
  --radius-1: 2px;
  --border-1: 1px solid var(--c-line);

  /* Opacity — avatars hidden unless speaking */
  --op-panel: 0.94;
  --op-avatar-idle: 0;
  --op-avatar-talk: 0.92;
  --op-avatar-listen: 0.72;

  /* Shadow — minimal hard */
  --sh-1: 0 2px 8px rgba(0, 0, 0, 0.55);
  --sh-2: 4px 0 0 rgba(0, 0, 0, 0.35);

  /* Motion */
  --ease-broadcast: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-micro: 160ms;
  --dur-ui: 280ms;
  --dur-bumper: 700ms;

  /* Z-order — spikerler yan panellerin üstünde (konuşurken görünsün) */
  --z-bg: 0;
  --z-threat: 30;
  --z-featured: 30;
  --z-side: 30;
  --z-camera: 30;
  --z-anchor: 36;
  --z-globe: 45;
  --z-channelbug: 80;
  --z-lowerthird: 50;
  --z-other: 60;
  --z-ticker: 70;
  --z-breaking-bumper: 88;
  --z-shorts-clip: 90;
  --z-opener: 95;
  --z-start: 100;

  --risk-w: 280px;
  --focus-w: 600px;
  --side-w: 460px;
  --avatar-f-w: 396px;
  --avatar-m-w: 418px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 36px;
}

/* —— SHORT TV (komedi teması) — turuncu/antrasit kimlik, aynı yerleşim —— */
:root[data-air-theme="comedy"] {
  --c-red: #ff6a00;
  --c-red-deep: #cc5200;
  --c-orange: #ff6a00;
  --c-amber: #ff9a3d;
  --c-cyan: #ff9a3d;
  --c-cyan-dim: #7a3a10;
  --c-live: #ff6a00;
  --c-line: #4a4a4c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-body);
  color: var(--c-ink);
  margin: 0;
}

/* Tam ekran: siyah letterbox, sahne sabit 1920×1080 HD */
html:fullscreen,
html:-webkit-full-screen {
  background: #000;
  width: 100%;
  height: 100%;
}

html:fullscreen body,
html:-webkit-full-screen body {
  background: #000;
  width: 100%;
  height: 100%;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  overflow: hidden;
  background: var(--c-bg-deep);
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: center center;
  /* Alt piksel kaymasını azalt — HD broadcast */
  backface-visibility: hidden;
}

.layer {
  position: absolute;
  pointer-events: none;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: var(--track-meta);
  color: var(--c-ink);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.btn-start {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: var(--z-start);
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-0);
  padding: 18px 44px 14px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--c-red);
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.btn-start-sub {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.88;
}

.btn-start:hover {
  filter: brightness(1.08);
}

.btn-start:disabled {
  opacity: 0.75;
  cursor: wait;
}

.btn-start.is-hidden {
  display: none !important;
}