/* Layer positions & visuals — z-order L0…L7 */

/* ========== L0 Background ========== */
.layer-bg {
  inset: 0;
  z-index: var(--z-bg);
}

.bg-webgl {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-webgl canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.bg-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(1.15);
  opacity: 0;
  transition: opacity 1.1s ease;
  will-change: opacity;
}

.bg-image.is-visible {
  opacity: 1;
}

.bg-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.7) saturate(1.05);
  transition:
    opacity var(--dur-bumper) var(--ease-broadcast),
    filter 1.2s var(--ease-exit),
    transform 1.2s var(--ease-exit);
  transform: scale(1.04);
  pointer-events: none;
}

.bg-hero.is-visible {
  opacity: 1;
  transform: scale(1);
}

.bg-hero.is-fading {
  opacity: 0;
  filter: brightness(0.3) saturate(0.35) blur(12px);
  transform: scale(1.06);
}

/* CSS3D haber galerisi (periodictable) — tam genişlik */
.bg-css3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-broadcast);
  overflow: hidden;
}

.bg-css3d.is-visible {
  opacity: 1;
}

.layer-bg.has-css3d .bg-webgl,
.layer-bg.has-css3d .bg-image.is-visible {
  opacity: 0.18 !important;
  filter: brightness(0.3) saturate(0.65) blur(4px);
}

.layer-bg.has-css3d .bg-topic-label {
  opacity: 0;
}

/* Galeri modu: paneller / spikerler gizlenir, sahne galeriye kalır */
.stage.is-gallery .layer-focus,
.stage.is-gallery .layer-topic,
.stage.is-gallery .layer-camera,
.stage.is-gallery .layer-anchors,
.stage.is-gallery .layer-other,
.stage.is-gallery .layer-idle,
.stage.is-gallery .layer-worldmap {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.stage.is-gallery .bg-css3d {
  z-index: 28;
  left: 0;
  right: 0;
  /* Lower-third üst kenarına yapışık */
  top: 0;
  bottom: calc(var(--chrome-bottom) + var(--lt-h) + 8px);
  transition: bottom 5.5s ease-in 2.6s;
}

/* Panel sola kayınca boşalan alanı canvas doldursun */
.stage.is-gallery.is-lt-exit .bg-css3d,
.stage.is-latest-3d.is-lt-exit .bg-css3d,
.stage.is-cyber-bulletin.is-lt-exit .bg-css3d {
  bottom: calc(var(--chrome-bottom) + 8px);
}

.stage.is-gallery .layer-bg {
  z-index: 26;
}

.stage.is-gallery .layer-lowerthird {
  z-index: 55;
}

.stage.is-gallery .layer-ticker {
  z-index: 57;
}

/* Cyber bülten — Latest ile aynı okunaklı detay kartları */
.stage.is-cyber-bulletin .latest-3d-card {
  width: 560px;
  height: 660px;
  border: 1px solid rgba(130, 230, 255, 0.55);
  box-shadow:
    0 0 42px rgba(0, 200, 230, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.45);
  background: linear-gradient(
    165deg,
    rgba(10, 28, 40, 0.97) 0%,
    rgba(4, 14, 22, 0.98) 100%
  );
}

.stage.is-cyber-bulletin .latest-3d-card.is-spotlight {
  border-color: rgba(160, 255, 255, 0.9);
  box-shadow:
    0 0 56px rgba(0, 240, 255, 0.55),
    0 0 0 2px rgba(200, 255, 255, 0.35);
  transform: scale(1.05);
}

.stage.is-cyber-bulletin .latest-3d-media {
  flex: 0 0 280px;
  filter: contrast(1.08) saturate(1.1);
}

.stage.is-cyber-bulletin .latest-3d-title {
  font-size: 28px;
  line-height: 1.18;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.stage.is-cyber-bulletin .latest-3d-summary {
  font-size: 17px;
  line-height: 1.48;
  color: rgba(235, 248, 255, 0.95);
}

.stage.is-cyber-bulletin .latest-3d-meta {
  color: rgba(190, 230, 245, 0.9);
  font-weight: 600;
}

.stage.is-latest-3d .latest-3d-card {
  height: 640px;
}

/* Haber geçişi / idle: özet paneli kapalı */
.layer-focus.is-hidden-idle,
.layer-topic.is-hidden-idle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Latest news CSS3D detail cards */
.latest-3d-card {
  width: 560px;
  height: 720px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(8, 22, 34, 0.94) 0%, rgba(4, 12, 20, 0.97) 100%);
  border: 1px solid rgba(80, 200, 220, 0.4);
  box-shadow: 0 0 36px rgba(0, 180, 200, 0.28);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  color: #e8f4f8;
  overflow: hidden;
}

.latest-3d-card.is-spotlight {
  border-color: rgba(120, 240, 255, 0.75);
  box-shadow:
    0 0 48px rgba(0, 220, 255, 0.45),
    0 0 0 1px rgba(180, 255, 255, 0.25);
  transform: scale(1.04);
}

.latest-3d-card.has-photo {
  box-shadow: 0 0 40px rgba(0, 190, 210, 0.34);
}

.latest-3d-card[data-risk="KRİTİK"],
.latest-3d-card[data-risk="CRITICAL"] {
  border-color: rgba(255, 70, 90, 0.55);
  box-shadow: 0 0 36px rgba(255, 60, 80, 0.3);
}

.latest-3d-card[data-risk="YÜKSEK"],
.latest-3d-card[data-risk="HIGH"] {
  border-color: rgba(255, 140, 60, 0.5);
}

.latest-3d-media {
  flex: 0 0 280px;
  width: 100%;
  background-color: rgba(6, 16, 26, 0.9);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(80, 180, 200, 0.25);
  position: relative;
}

.latest-3d-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 12, 20, 0.88) 100%);
  pointer-events: none;
}

.latest-3d-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 18px;
}

.latest-3d-card:not(.has-photo) .latest-3d-body {
  padding-top: 22px;
}

.latest-3d-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.latest-3d-risk {
  color: #7fd4e8;
  font-weight: 700;
}

.latest-3d-card[data-risk="KRİTİK"] .latest-3d-risk {
  color: #ff6b7a;
}

.latest-3d-card[data-risk="YÜKSEK"] .latest-3d-risk {
  color: #ff9a4a;
}

.latest-3d-time {
  margin-left: auto;
  color: rgba(200, 230, 240, 0.75);
  font-size: 13px;
}

.latest-3d-score {
  color: rgba(180, 220, 230, 0.9);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.latest-3d-index {
  font-size: 13px;
  color: rgba(120, 200, 220, 0.6);
  letter-spacing: 0.14em;
}

.latest-3d-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.22;
  font-weight: 700;
  color: #f2fbff;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.latest-3d-summary {
  margin: 0;
  flex: 1;
  min-height: 0;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(220, 238, 245, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 11;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.latest-3d-card.has-photo .latest-3d-summary {
  -webkit-line-clamp: 5;
}

.latest-3d-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(150, 200, 220, 0.8);
  border-top: 1px solid rgba(80, 160, 180, 0.28);
  padding-top: 12px;
  margin-top: auto;
}

.css3d-mode-label {
  display: none !important;
}

/* three.js css3d_periodictable — okunaklı galeri kartları */
.element {
  width: 220px;
  height: 280px;
  box-shadow: 0px 0px 18px rgba(0, 255, 255, 0.45);
  border: 1px solid rgba(127, 255, 255, 0.35);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  text-align: left;
  line-height: normal;
  cursor: default;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.element .number,
.element .symbol,
.element .details {
  display: none !important;
}

.element-visual.has-photo {
  box-shadow: 0px 0px 20px rgba(0, 200, 220, 0.4);
}

.element-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 8, 14, 0.92) 55%);
  color: #eef8fc;
  pointer-events: none;
}

.element-cap-idx {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(120, 220, 240, 0.75);
  font-weight: 600;
}

.element-cap-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.element-cap-score {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7ef0ff;
  border: 1px solid rgba(100, 220, 240, 0.4);
  padding: 2px 6px;
}

.stage.is-cyber-bulletin .element {
  width: 230px;
  height: 290px;
  border-color: rgba(140, 240, 255, 0.5);
  box-shadow: 0 0 22px rgba(0, 220, 255, 0.45);
}

.stage.is-cyber-bulletin .element-cap-title {
  font-size: 16px;
  color: #fff;
}

/* WebGL aktifken fotoğu hafif underlay yap */
.layer-bg.has-webgl-bg .bg-image.is-visible {
  opacity: 0.28;
  filter: brightness(0.35) saturate(0.9) blur(2px);
}

.layer-bg.has-hero .bg-webgl,
.layer-bg.has-hero .bg-image {
  opacity: 0.15 !important;
}

.layer-bg.has-hero .bg-grid {
  opacity: 0.04;
}

/* ========== L0b Globe fly-to ========== */
.layer-globe {
  inset: 0;
  z-index: var(--z-globe);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, #06101c 0%, #000 72%);
  transition: opacity 400ms var(--ease-broadcast);
}

.layer-globe.is-visible {
  opacity: 1;
}

.layer-globe.is-leaving {
  opacity: 0;
  transition: opacity 700ms var(--ease-exit);
}

.globe-root {
  position: absolute;
  inset: 0;
}

.globe-root canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.globe-label {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(220, 240, 255, 0.92);
  text-shadow: 0 4px 28px rgba(0, 40, 80, 0.85);
  pointer-events: none;
  text-align: center;
  width: max-content;
  max-width: 90vw;
}

.globe-risk-legend {
  position: absolute;
  left: 28px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) scale(1.05);
  transform-origin: left center;
  z-index: 2;
  padding: 22px 26px;
  background: rgba(6, 14, 24, 0.72);
  border: 1px solid rgba(125, 255, 163, 0.28);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 400ms var(--ease-broadcast);
  pointer-events: none;
  min-width: 320px;
  max-width: min(420px, 28vw);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.layer-globe.is-risk .globe-risk-legend {
  opacity: 1;
}

.globe-risk-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(220, 245, 255, 0.95);
  margin-bottom: 14px;
}

.globe-risk-bar {
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2ecc71 0%, #f1c40f 45%, #e74c3c 100%);
  margin-bottom: 10px;
}

.globe-risk-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(180, 210, 230, 0.85);
  margin-bottom: 16px;
}

.globe-risk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.globe-risk-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(230, 242, 250, 0.95);
  padding: 7px 0;
  border-bottom: 1px solid rgba(120, 180, 200, 0.12);
}

.globe-risk-list li:last-child {
  border-bottom: none;
}

.globe-risk-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 8px currentColor;
}

.layer-globe.is-risk .globe-label {
  bottom: 6%;
  font-size: 34px;
  letter-spacing: 0.18em;
}

.layer-bg.has-webgl-bg .bg-vignette {
  z-index: 2;
}

.layer-bg.has-webgl-bg .bg-grid {
  z-index: 2;
  opacity: 0.08;
}

.layer-bg .bg-topic-label {
  z-index: 3;
}

.bg-topic-label {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(200, 220, 255, 0.5);
  text-shadow: var(--sh-1);
  pointer-events: none;
  transition: color 0.6s ease, opacity 0.6s ease;
}

.bg-topic-label[data-topic="malware"],
.bg-topic-label[data-topic="ransomware"],
.bg-topic-label[data-topic="ddos"] {
  color: rgba(255, 140, 140, 0.7);
}

.bg-topic-label[data-topic="vulnerability"] {
  color: rgba(120, 220, 255, 0.7);
}

.bg-topic-label[data-topic="hacking"],
.bg-topic-label[data-topic="breach"],
.bg-topic-label[data-topic="phishing"] {
  color: rgba(255, 160, 100, 0.7);
}

.bg-topic-label[data-topic="apt"] {
  color: rgba(255, 200, 120, 0.72);
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, transparent 20%, rgba(0, 8, 20, 0.75) 100%),
    linear-gradient(180deg, rgba(0, 10, 24, 0.35) 0%, transparent 30%, transparent 55%, rgba(0, 6, 18, 0.85) 100%);
}

.bg-grid {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    linear-gradient(rgba(80, 160, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 160, 255, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 28%, transparent 72%);
}

/* ========== L1 Dual anchors + center browser ========== */
.layer-anchors {
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--lt-h) + var(--chrome-bottom) + 8px);
  z-index: var(--z-anchor);
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--content-x);
  overflow: visible;
  gap: 24px;
}

.anchor-slot {
  position: absolute;
  bottom: 0;
  width: 360px;
  height: 616px;
  flex: 0 0 auto;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  overflow: visible;
  transition:
    opacity 160ms var(--ease-broadcast),
    visibility 160ms var(--ease-broadcast),
    filter 160ms ease;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
  mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
}

.anchor-slot-female {
  /* Fokus panelinin tam alt-orta hizası */
  left: calc(var(--content-x) + (var(--focus-w) - var(--avatar-f-w)) / 2);
  width: var(--avatar-f-w);
}

.anchor-slot-male {
  right: calc(var(--content-x) + 14px);
  width: var(--avatar-m-w);
  height: 638px;
}

.layer-anchors.has-article .anchor-slot {
  opacity: 0;
  visibility: hidden;
}

/* Diyalog açıkken her iki spiker görünür (makale paneli olsa da) */
.layer-anchors.has-article.speaking-female .anchor-slot,
.layer-anchors.has-article.speaking-male .anchor-slot,
.layer-anchors.has-article.is-dialogue .anchor-slot {
  opacity: var(--op-avatar-listen) !important;
  visibility: visible !important;
}

.layer-anchors.has-article.speaking-female .anchor-slot-female,
.layer-anchors.has-article.speaking-male .anchor-slot-male {
  opacity: var(--op-avatar-talk) !important;
}

/* ========== Fokus sol | Tarayıcı sağ — kenarlara yaslı ========== */
.layer-focus {
  display: none !important;
}

/* Fokus / konu paneli — sola yaslı, okunaklı */
.layer-topic {
  top: 72px;
  left: var(--content-x);
  right: auto;
  width: var(--focus-w);
  z-index: var(--z-side);
  display: block;
  justify-content: flex-start;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.layer-topic .side-card--topic {
  pointer-events: auto;
  width: 100%;
  max-height: calc(100% - 72px - var(--lt-h) - var(--chrome-bottom) - 12px);
  overflow: auto;
  background: rgba(8, 18, 30, 0.72);
  border: 1px solid rgba(140, 230, 255, 0.35);
  border-radius: var(--radius-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 18px 16px 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.layer-topic .side-card--topic .panel-title {
  font-size: 17px;
  letter-spacing: 0.1em;
  color: #f2fbff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  margin-bottom: 12px;
}

/* Tarayıcı — fokusa 10px, sağa tam genişlik, biraz daha yüksek */
.article-panel {
  position: absolute;
  top: 0;
  left: calc(var(--content-x) + var(--focus-w) + 10px);
  right: var(--content-x);
  width: auto;
  max-width: none;
  height: min(680px, calc(100% - var(--lt-h) - var(--chrome-bottom) - 12px));
  margin: 0;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 320ms var(--ease-broadcast),
    transform 320ms var(--ease-broadcast);
  pointer-events: none;
  z-index: calc(var(--z-anchor) - 1);
  border: 1px solid rgba(140, 230, 255, 0.35);
  border-radius: var(--radius-1);
  background: rgba(8, 18, 30, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.article-panel.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Tarayıcı açıkken sağ görsel paneli gizle */
.layer-anchors.has-article ~ .layer-camera {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.article-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(4, 12, 22, 0.55);
  border-bottom: 1px solid rgba(140, 230, 255, 0.28);
  flex: 0 0 auto;
}

.article-dots {
  display: flex;
  gap: 5px;
}
.article-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a4a5e;
}
.article-dots span:nth-child(1) { background: #ff5f57; }
.article-dots span:nth-child(2) { background: #febc2e; }
.article-dots span:nth-child(3) { background: #28c840; }

.article-address {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.article-host {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 235, 255, 0.95);
}

.article-link {
  font-size: 12px;
  color: rgba(220, 235, 250, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.article-badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 210, 140, 0.95);
  border: 1px solid rgba(255, 180, 80, 0.45);
  padding: 4px 8px;
}

.article-scroll {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  scrollbar-width: none;
  mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%);
}

.article-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.article-body {
  padding: 22px 28px 48px;
  color: #f4f8fc;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  background: transparent;
}

.article-body h1 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 18px 0 8px;
  color: rgba(160, 210, 255, 0.95);
}

.article-body p {
  margin: 0 0 12px;
}

.article-body .art-domain {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(120, 180, 255, 0.7);
  margin-bottom: 6px;
}

.article-body .art-url {
  display: block;
  font-size: 11px;
  color: rgba(160, 190, 220, 0.55);
  margin-bottom: 14px;
  word-break: break-all;
}

.article-body .art-fig {
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid rgba(80, 140, 200, 0.25);
}

.article-body .art-fig img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.art-loading,
.art-fallback-box {
  padding: 28px 12px;
  text-align: center;
  color: rgba(180, 210, 240, 0.75);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}

.art-url-plain {
  font-size: 12px;
  word-break: break-all;
  color: rgba(140, 190, 255, 0.8);
  margin: 12px 0;
}

/* Diyalog süresince her iki spiker ekranda kalsın; bitince kaybolur */
.layer-anchors.speaking-female .anchor-slot,
.layer-anchors.speaking-male .anchor-slot,
.layer-anchors.is-dialogue .anchor-slot {
  opacity: var(--op-avatar-listen) !important;
  visibility: visible !important;
  transform: none;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
}

.layer-anchors.speaking-female .anchor-slot-female,
.layer-anchors.speaking-male .anchor-slot-male {
  opacity: var(--op-avatar-talk) !important;
}

.avatar-3d,
.avatar-host {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

.avatar-3d canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

.layer-anchors.mode-photo .avatar-3d canvas {
  display: none !important;
}

.layer-anchors.mode-facecap .avatar-3d {
  overflow: hidden;
  border-radius: 2px;
}

.layer-anchors.mode-facecap .avatar-3d canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

.layer-anchors.mode-facecap .anchor-slot {
  opacity: 0;
  visibility: hidden;
}

.layer-anchors.mode-facecap.speaking-female .anchor-slot,
.layer-anchors.mode-facecap.speaking-male .anchor-slot,
.layer-anchors.mode-facecap.is-dialogue .anchor-slot {
  opacity: var(--op-avatar-listen);
  visibility: visible;
}

.layer-anchors.mode-facecap.speaking-female .anchor-slot-female,
.layer-anchors.mode-facecap.speaking-male .anchor-slot-male {
  opacity: var(--op-avatar-talk);
}

.host-still,
.host-video {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: 115%;
  object-fit: cover;
  object-position: center 15%;
  opacity: 0;
  transition: opacity 0.25s ease, filter 0.25s ease;
  filter: saturate(0.95) contrast(1.02);
  z-index: 1;
}

.host-still.is-visible,
.host-video.is-visible {
  opacity: 1;
}

.layer-anchors.mode-photo .anchor-slot {
  opacity: 0;
  visibility: hidden;
}

.layer-anchors.mode-photo.speaking-female .anchor-slot,
.layer-anchors.mode-photo.speaking-male .anchor-slot,
.layer-anchors.mode-photo.is-dialogue .anchor-slot {
  opacity: var(--op-avatar-listen) !important;
  visibility: visible !important;
}

.layer-anchors.mode-photo.speaking-female .anchor-slot-female,
.layer-anchors.mode-photo.speaking-male .anchor-slot-male {
  opacity: var(--op-avatar-talk) !important;
}

.host-still.is-talking {
  animation: host-talk-pulse 0.9s ease-in-out infinite;
}

@keyframes host-talk-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.008);
  }
}

/* Kullanıcı isteğiyle kaldırıldı: ekranın altında dolu/boş anlamsız bir kutu
   olarak görünüyordu. JS hâlâ setStatus() çağırıp #broadcast-status'a metin
   yazıyor (dokunulmadı) ama artık hiçbir zaman görünmüyor. */
.broadcast-status {
  display: none !important;
}

.dialogue-line {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  max-width: min(920px, 92vw);
  z-index: 4;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: #e8eef6;
  text-align: center;
  background: rgba(5, 10, 18, 0.82);
  border: var(--border-1);
  padding: 10px 20px;
  border-radius: var(--radius-0);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* ========== L2 Sol: risk / fokus paneli (şeffaf) ========== */
.layer-focus {
  top: 72px;
  left: var(--content-x);
  width: var(--risk-w);
  z-index: var(--z-side);
}

.side-card--risk {
  padding: 14px 12px;
}

.layer-focus .side-card.side-card--risk {
  background: rgba(10, 20, 32, 0.42);
  border: 1px solid rgba(125, 255, 163, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.side-card--risk .focus-risk {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ========== L2b Fokus — konum üstte (en sola) tanımlı ========== */

.side-card {
  background: rgba(10, 20, 32, var(--op-panel));
  border: var(--border-1);
  border-radius: var(--radius-1);
  padding: 16px 16px 12px;
  backdrop-filter: none;
  box-shadow: none;
}

.focus-risk {
  display: flex;
  gap: 14px;
  align-items: center;
}

.focus-risk-icon {
  color: var(--c-red);
  flex-shrink: 0;
  filter: none;
  transition: color 0.35s ease;
}

.layer-focus[data-risk="YÜKSEK"] .focus-risk-icon,
.layer-focus[data-risk="YUKSEK"] .focus-risk-icon {
  color: var(--c-orange);
}

.layer-focus[data-risk="ORTA"] .focus-risk-icon {
  color: var(--c-amber);
}

.layer-focus[data-risk="DÜŞÜK"] .focus-risk-icon,
.layer-focus[data-risk="DUSUK"] .focus-risk-icon {
  color: #5ecf8a;
}

.focus-risk-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.focus-risk-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.focus-risk-status {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--c-red);
  letter-spacing: 0.04em;
}

.layer-focus[data-risk="YÜKSEK"] .focus-risk-status,
.layer-focus[data-risk="YUKSEK"] .focus-risk-status {
  color: var(--c-orange);
}

.layer-focus[data-risk="ORTA"] .focus-risk-status {
  color: var(--c-amber);
}

.layer-focus[data-risk="DÜŞÜK"] .focus-risk-status,
.layer-focus[data-risk="DUSUK"] .focus-risk-status {
  color: #5ecf8a;
}

.focus-risk-score {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
}

.side-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--panel-border), transparent);
  margin: 14px 0;
}

.layer-focus[data-mode="stats"] .focus-risk-status {
  font-variant-numeric: tabular-nums;
}

.focus-cat-head {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(125, 255, 163, 0.18);
}

.focus-cat-head .focus-item-label {
  color: var(--glass-green, #7dffa3);
  letter-spacing: 0.14em;
}

.focus-cat-row .focus-item-value {
  font-variant-numeric: tabular-nums;
}

.focus-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.focus-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0.35;
  transform: translateX(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
}

.focus-item.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

.focus-item.is-hot {
  background: transparent;
  border-left: 3px solid var(--c-cyan);
  padding-left: 8px;
}

.focus-item-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #7ef0ff;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.focus-item-value {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #f5f9fc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* ========== L4 Channel Bug — kalıcı köşe kimliği (TV bug) ========== */
.layer-channelbug {
  top: var(--safe-y);
  left: var(--safe-x);
  z-index: var(--z-channelbug);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 520ms var(--ease-broadcast),
    transform 520ms var(--ease-broadcast);
}

.layer-channelbug.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Yerel alt yazı (kanalAdi) — marka adının hemen altında, ince etiket */
.channel-sub {
  margin-top: -1px;
  font-family: var(--font-display, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(196, 224, 245, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* Kalıcı köşe kredisi — logo bloğunun altında, soluk yayın filigranı */
.channel-credit {
  margin-top: 2px;
  font-family: var(--font-display, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(214, 230, 244, 0.4);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  user-select: none;
}

/* 90 dakikada bir kısa yayın kredisi — alt bant alanını 5 sn kaplar */
.lt-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--chrome-bottom) + 8px);
  height: var(--lt-h);
  z-index: calc(var(--z-lowerthird) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 16, 28, 0.96);
  border: var(--border-1);
  border-radius: var(--radius-0);
  font-family: var(--font-display, sans-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #cfe8ff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-broadcast);
}

.lt-credit.is-on {
  opacity: 1;
}

/* Ara sıra sıfırdan oluşma — TV kanal logosuna özgü rebuild */
.layer-channelbug.is-visible.is-rebuild .channel-title {
  animation: channelbug-title-build 1.1s var(--ease-broadcast) both;
}

.layer-channelbug.is-visible.is-rebuild .live-badge {
  animation: channelbug-live-build 0.9s 0.35s var(--ease-broadcast) both;
}

@keyframes channelbug-title-build {
  0% {
    opacity: 0;
    letter-spacing: 0.35em;
    filter: blur(6px);
    clip-path: inset(0 100% 0 0);
  }
  45% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    letter-spacing: 0.05em;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes channelbug-live-build {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.channel-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--c-ink);
  text-shadow: var(--sh-1);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 235, 235, 0.92);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-live);
  box-shadow: 0 0 6px var(--c-live);
  animation: live-pulse 1.2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.channel-sub {
  display: none !important;
}


/* ========== L3 Sağ: haber görseli (yalnızca görsel varsa) ========== */
.layer-camera {
  top: 0;
  right: var(--content-x);
  width: var(--side-w);
  z-index: var(--z-side);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition: opacity 0.35s ease;
}

.layer-camera.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.camera-card {
  position: relative;
  background: rgba(10, 20, 32, var(--op-panel));
  border: var(--border-1);
  border-radius: var(--radius-1);
  box-shadow: none;
  overflow: hidden;
  padding-bottom: 4px;
}

.camera-panel-title {
  padding: 0 12px;
  margin: 8px 0 6px;
}

.camera-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(80, 140, 220, 0.25);
}

.camera-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(180, 255, 210, 0.9);
}

.camera-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glass-green, #7dffa3);
  box-shadow: none;
  animation: none;
}

.layer-camera.has-image .camera-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #02060c;
  position: relative;
}

.camera-frame .news-still-blur {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(16px) brightness(0.4);
  z-index: 0;
  pointer-events: none;
}

.camera-frame .camera-jpeg.news-still-img,
.news-still-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: transparent;
}

.layer-camera.is-fit-cover .news-still-img {
  object-fit: cover;
}

.layer-camera.is-fit-contain .news-still-img {
  object-fit: contain;
}

.layer-camera.is-empty .camera-live-pill {
  color: rgba(200, 210, 220, 0.7);
}

.camera-country {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(180, 220, 255, 0.85);
  text-transform: uppercase;
}

.camera-frame {
  position: relative;
  width: calc(100% - 16px);
  margin: 0 8px;
  aspect-ratio: 16 / 11;
  min-height: 168px;
  background: #02060c;
  overflow: hidden;
  border: 1px solid rgba(80, 140, 200, 0.3);
}

.camera-frame iframe,
.camera-frame .camera-jpeg,
.camera-frame .camera-video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #000;
}

.camera-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 180, 180, 0.9);
  background: rgba(10, 0, 0, 0.65);
}

.layer-camera.is-error .camera-live-pill {
  color: #ff8a8a;
}

.layer-camera.is-connecting .camera-frame::after {
  content: "SİNYAL ARANIYOR…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(160, 210, 255, 0.75);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.35) 0 2px,
      transparent 2px 4px
    ),
    rgba(0, 10, 20, 0.72);
  animation: cam-flicker 1.2s steps(2) infinite;
}

@keyframes cam-flicker {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.camera-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 10px;
}

.camera-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(120, 190, 255, 0.7);
}

.camera-place {
  font-size: 14px;
  font-weight: 600;
  color: rgba(230, 240, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camera-scan {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(80, 180, 255, 0.08) 48%,
    transparent 52%
  );
  background-size: 100% 220%;
  animation: cam-scan 3.2s linear infinite;
  opacity: 0.55;
}

@keyframes cam-scan {
  0% { background-position: 0 -40%; }
  100% { background-position: 0 140%; }
}

.lt-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
}

.lt-country {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-cyan);
  background: transparent;
  border: 1px solid var(--c-cyan-dim);
  padding: 2px 8px;
  text-transform: uppercase;
}

.lt-country[hidden] {
  display: none !important;
}

/* ========== L5 Lower Third — TV chiron ========== */
.layer-lowerthird {
  left: 0;
  right: 0;
  bottom: calc(var(--chrome-bottom) + 8px);
  height: var(--lt-h);
  z-index: var(--z-lowerthird);
  display: grid;
  grid-template-columns: 128px 1fr 160px;
  background: rgba(8, 16, 28, 0.96);
  border: var(--border-1);
  border-left: none;
  border-radius: var(--radius-0);
  box-shadow: none;
  overflow: hidden;
}

.lt-breaking {
  background: var(--c-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-shadow: var(--sh-2);
}

.lt-breaking[data-mode="archive"],
.lt-breaking[data-mode="standby"],
.lt-breaking[data-mode="daily"],
.lt-breaking[data-mode="daily_news"] {
  background: #1a3a5c;
}

.lt-breaking[data-mode="critical"] {
  background: #7a1a1a;
}

.lt-breaking[data-mode="report"] {
  background: #0d4a3a;
}

.lt-breaking[data-mode="archive"] .lt-breaking-label,
.lt-breaking[data-mode="report"] .lt-breaking-label,
.lt-breaking[data-mode="standby"] .lt-breaking-label,
.lt-breaking[data-mode="daily"] .lt-breaking-label,
.lt-breaking[data-mode="daily_news"] .lt-breaking-label,
.lt-breaking[data-mode="critical"] .lt-breaking-label {
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 0 4px;
}

.lt-body[data-mode="archive"],
.layer-lowerthird:has(.lt-breaking[data-mode="archive"]) .lt-body {
  border-left-color: #3d7ab5;
}

.layer-lowerthird:has(.lt-breaking[data-mode="daily"]) .lt-body,
.layer-lowerthird:has(.lt-breaking[data-mode="daily_news"]) .lt-body {
  border-left-color: #3d8fd4;
}

.layer-lowerthird:has(.lt-breaking[data-mode="critical"]) .lt-body {
  border-left-color: #e85d04;
}

.layer-lowerthird:has(.lt-breaking[data-mode="report"]) .lt-body {
  border-left-color: #2a9a6a;
}

/* Arşiv: açıklama satırı + sembolik önem/skor */
.lt-body.is-archive-meta .lt-headline {
  display: none !important;
}

.lt-body.is-archive-meta .lt-summary,
.stage.lt-archive-meta .lt-summary,
.layer-lowerthird:has(.lt-breaking[data-mode="archive"]) .lt-summary {
  white-space: normal;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  line-height: 1.35;
  font-size: 18px;
  font-weight: 500;
  color: rgba(220, 235, 245, 0.92);
  text-transform: none;
  letter-spacing: 0.01em;
  overflow: visible;
  text-overflow: unset;
  -webkit-line-clamp: unset;
}

.lt-arch-age {
  flex: 1 1 auto;
  min-width: 12em;
}

.lt-arch-metrics {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.lt-arch-risk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 2px;
  border: 1px solid currentColor;
}

.lt-arch-risk-icon {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid currentColor;
}

.lt-arch-risk.is-critical {
  color: #ff4d5e;
  box-shadow: 0 0 10px rgba(255, 70, 90, 0.35);
}

.lt-arch-risk.is-high {
  color: #ff9a4a;
}

.lt-arch-risk.is-medium {
  color: #f1c40f;
}

.lt-arch-risk.is-medium .lt-arch-risk-icon {
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 11px;
  height: 11px;
  background: currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
}

.lt-arch-risk.is-low {
  color: #2ecc71;
}

.lt-arch-risk.is-low .lt-arch-risk-icon {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: none;
  border-top: 12px solid currentColor;
}

.lt-arch-score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lt-arch-pips {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #7dffa3;
  line-height: 1;
}

.lt-arch-frac {
  font-size: 16px;
  color: rgba(230, 245, 255, 0.95);
}

.lt-arch-frac b {
  color: #fff;
  font-size: 18px;
}

/* Başlık-only alt panel (harita / rapor) */
.lt-body.is-title-only .lt-summary {
  display: none !important;
}

.lt-body.is-title-only .lt-headline,
.stage.lt-title-only .lt-headline {
  font-size: 44px;
  line-height: 1.08;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lt-breaking.is-whip {
  animation: lt-whip-in 420ms var(--ease-broadcast) both;
}

@keyframes lt-whip-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.lt-breaking-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: var(--lh-tight);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.lt-body {
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  border-left: 3px solid var(--c-red);
  transition: opacity var(--dur-ui) var(--ease-broadcast);
}

.lt-body.is-updating {
  opacity: 0.12;
}

.lt-headline {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-ink);
}

.lt-summary {
  font-size: 18px;
  font-weight: 500;
  color: var(--c-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lt-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
}

.clock-time {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.clock-date {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-ink-faint);
  text-align: right;
  margin-top: 4px;
  max-width: 140px;
  line-height: 1.2;
}

/* ========== L6 Other News ========== */
.layer-other {
  left: 0;
  right: 0;
  bottom: 40px;
  height: 36px;
  z-index: var(--z-other);
  display: flex;
  align-items: stretch;
  background: rgba(8, 16, 28, 0.92);
  border: var(--border-1);
  border-bottom: none;
  border-radius: var(--radius-0);
}

.other-label {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0 16px;
  background: #1a2a44;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.other-news {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 18px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.other-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  flex-shrink: 0;
}

.other-item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--red-bright);
  flex-shrink: 0;
}

.other-item time {
  font-family: var(--font-display);
  color: var(--muted);
  margin-left: 4px;
}

/* ========== L7 Ticker ========== */
.layer-ticker {
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  z-index: var(--z-ticker);
  background: #0a1420;
  border-top: 2px solid var(--c-red-deep);
  overflow: hidden;
}

.ticker-track {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ticker-content {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: ticker-scroll 160s linear infinite;
  will-change: transform;
}

.ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.ticker-item::before {
  content: "●";
  color: var(--red-bright);
  font-size: 10px;
  align-self: center;
}

.ticker-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}

.ticker-sep {
  color: rgba(125, 200, 255, 0.55);
  font-weight: 600;
}

.ticker-summary {
  font-size: 14px;
  font-weight: 500;
  color: rgba(210, 222, 236, 0.88);
}

.ticker-source {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ========== Idle bumper: kritik haber slider ========== */
.layer-idle {
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--chrome-bottom) + var(--lt-h) + 8px);
  z-index: 38;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 420ms var(--ease-broadcast),
    bottom 5.5s ease-in 2.6s;
  background: linear-gradient(
    180deg,
    rgba(5, 10, 18, 0.15) 0%,
    rgba(5, 10, 18, 0.45) 40%,
    rgba(5, 10, 18, 0.15) 100%
  );
}

/* Panel kayınca yalnızca CSS3D / latest idle alanı alta uzasın — premium ortada kalsın */
.stage.is-lt-exit .layer-idle.is-css3d,
.stage.is-lt-exit .layer-idle.is-latest {
  bottom: calc(var(--chrome-bottom) + 8px);
}

.layer-idle.is-visible {
  opacity: 1;
}

.layer-idle.is-css3d {
  background: transparent;
}

.layer-idle.is-css3d .idle-viewport {
  display: none;
}

.idle-banner {
  width: min(1680px, calc(100% - 72px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.idle-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--glass-green, #7dffa3);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.idle-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.layer-idle.is-premium {
  align-items: center;
  justify-content: center;
  padding-top: 0;
  background: transparent;
  /* Panel çıkınca bottom değişmesin — kartlar ekran ortasında kalsın */
  bottom: calc(var(--chrome-bottom) + var(--lt-h) + 8px) !important;
  transition: opacity 420ms var(--ease-broadcast);
}

.layer-idle.is-premium .idle-label {
  display: none !important;
}

.layer-idle.is-premium .idle-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1320px, calc(100% - 56px));
  height: auto;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.layer-idle.is-premium .idle-viewport {
  mask-image: none;
  -webkit-mask-image: none;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: min(560px, 62vh);
  width: 100%;
  padding-bottom: 0;
}

.layer-idle.is-latest .idle-viewport {
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  overflow: hidden;
  min-height: 520px;
  align-items: stretch;
}

.idle-track {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

.idle-track-premium {
  position: relative;
  width: min(1320px, 100%);
  height: min(560px, 62vh);
  display: block;
}

.idle-track-latest {
  display: flex;
  gap: 24px;
  align-items: stretch;
  padding: 4px 0;
}

@keyframes idle-slide-ltr {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.idle-card {
  flex: 0 0 400px;
  width: 400px;
  padding: 18px 20px;
  background: rgba(8, 16, 28, 0.72);
  border: 1px solid rgba(125, 255, 163, 0.22);
  border-left: 3px solid var(--glass-green, #7dffa3);
}

.idle-card-latest {
  flex: 0 0 560px;
  width: 560px;
  min-height: 480px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  background: rgba(8, 16, 28, 0.82);
  border: 1px solid rgba(90, 160, 220, 0.32);
  border-left: 5px solid #5aa0d8;
}

.idle-card-latest .idle-card-title {
  font-size: 28px;
  line-height: 1.18;
  margin: 12px 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.idle-card-summary-long {
  flex: 1;
  font-size: 17px;
  line-height: 1.55;
  -webkit-line-clamp: 12;
  margin-bottom: 16px;
}

.idle-card-time {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(160, 200, 240, 0.9);
  margin-right: auto;
  margin-left: 8px;
}

.idle-card-premium {
  position: absolute;
  inset: 0;
  width: 100%;
  flex: none;
  padding: 36px 44px 32px;
  background: rgba(8, 16, 28, 0.62);
  border: 1px solid rgba(125, 255, 163, 0.32);
  border-left: 5px solid var(--glass-green, #7dffa3);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateX(48px) scale(0.985);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  transition:
    opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.idle-card-premium.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 2;
}

.idle-card-premium.is-exit {
  opacity: 0;
  transform: translateX(-40px) scale(0.99);
  z-index: 1;
}

.idle-card-summary {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(230, 240, 250, 0.88);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.idle-card-premium .idle-card-summary {
  flex: 1;
  font-size: 22px;
  line-height: 1.55;
  font-weight: 500;
  color: rgba(236, 244, 252, 0.94);
  -webkit-line-clamp: 5;
  margin-bottom: 22px;
}

.idle-card-premium .idle-card-title {
  font-size: clamp(34px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: 0.01em;
  margin: 8px 0 18px;
  -webkit-line-clamp: 3;
}

.idle-card-premium .idle-card-top {
  margin-bottom: 14px;
}

.idle-card-premium .idle-card-risk {
  font-size: 15px;
  letter-spacing: 0.18em;
}

.idle-card-premium .idle-card-score {
  font-size: 28px;
}

.idle-card-premium .idle-card-score small {
  font-size: 14px;
}

.idle-card-premium .idle-card-stats {
  margin-top: auto;
  gap: 18px;
}

.idle-card-premium .idle-stat span {
  font-size: 12px;
  letter-spacing: 0.12em;
}

.idle-card-premium .idle-stat strong {
  font-size: 18px;
  line-height: 1.25;
}

.idle-card[data-risk="KRİTİK"] {
  border-left-color: var(--c-red);
}

.idle-card[data-risk="YÜKSEK"] {
  border-left-color: var(--c-orange);
}

.idle-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.idle-card-risk {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--glass-green, #7dffa3);
}

.idle-card[data-risk="KRİTİK"] .idle-card-risk {
  color: var(--c-red);
}

.idle-card-score {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--c-ink);
}

.idle-card-score small {
  font-size: 12px;
  color: var(--c-ink-faint);
  margin-left: 2px;
}

.idle-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.4em;
}

.idle-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.idle-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.idle-stat span {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-ink-faint);
  text-transform: uppercase;
}

.idle-stat strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== Geçmiş haber penceresi ========== */
.layer-past-peek {
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--chrome-bottom) + var(--lt-h) + 8px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--ease-broadcast);
  background: transparent;
}

.layer-past-peek.is-visible {
  opacity: 1;
}

.past-peek-card {
  width: min(1280px, calc(100% - 48px));
  max-height: calc(100% - 16px);
  padding: 28px 36px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "kicker kicker"
    "image title"
    "image summary"
    "image meta";
  gap: 14px 32px;
  align-items: start;
  background: rgba(8, 16, 28, 0.28);
  border: 1px solid rgba(140, 190, 230, 0.28);
  border-left: 5px solid #5aa0d8;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  animation: past-peek-in 560ms var(--ease-broadcast) both;
  overflow: hidden;
}

.past-peek-card.is-slide-in {
  animation: past-peek-slide 520ms var(--ease-broadcast) both;
}

@keyframes past-peek-slide {
  from {
    opacity: 0.2;
    transform: translateX(64px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

html.perf-lite .past-peek-card,
html.perf-lite .idle-card-premium,
html.perf-lite .globe-risk-legend,
html.perf-lite .daily-report-card {
  background: rgba(8, 16, 28, 0.88);
}

.past-peek-card.has-no-image {
  grid-template-columns: 1fr;
  grid-template-areas:
    "kicker"
    "title"
    "summary"
    "meta";
}

@keyframes past-peek-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.past-peek-kicker {
  grid-area: kicker;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #9ec8ef;
}

.past-peek-image {
  grid-area: image;
  display: block;
  width: 100%;
  height: min(420px, 38vh);
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.past-peek-card.has-no-image .past-peek-image {
  display: none;
}

.past-peek-title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  align-self: end;
}

.past-peek-summary {
  grid-area: summary;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: rgba(240, 246, 255, 0.94);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.past-peek-meta {
  grid-area: meta;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(170, 205, 235, 0.9);
  text-transform: uppercase;
  align-self: end;
}

/* ========== Günlük rapor ========== */
.layer-daily-report {
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--chrome-bottom) + var(--lt-h) + 8px);
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms var(--ease-broadcast);
  background: radial-gradient(
    ellipse at 50% 35%,
    rgba(4, 28, 22, 0.55) 0%,
    rgba(5, 12, 22, 0.15) 70%,
    transparent 100%
  );
}

.layer-daily-report.is-visible {
  opacity: 1;
}

.daily-report-card {
  width: min(980px, calc(100% - 48px));
  padding: 32px 36px 28px;
  background: rgba(6, 22, 18, 0.94);
  border: 1px solid rgba(60, 180, 130, 0.35);
  border-left: 5px solid #2a9a6a;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  transform-origin: center center;
  animation: past-peek-in 480ms var(--ease-broadcast) both;
}

.layer-daily-report.is-visible .daily-report-card {
  animation:
    past-peek-in 480ms var(--ease-broadcast) both,
    daily-report-grow 9s 0.4s ease-out forwards;
}

@keyframes daily-report-grow {
  from { transform: scale(1); }
  to { transform: scale(1.25); }
}

/* Günlük rapor: ticker / other kapalı; alt panel (GÜNLÜK RAPOR) açık */
.stage.is-daily-report .layer-other,
.stage.is-daily-report .layer-ticker {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Rapor sırasında LT sola kayma animasyonu uygulanmasın */
.stage.is-daily-report.is-lt-exit .layer-lowerthird {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes chrome-fade-out {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Galeri / Son haberler / Siber: panel başta görünür, sonra sola kayarak çıkar */
.stage.is-lt-exit .layer-lowerthird {
  animation: lt-panel-exit-left 6.5s ease-in 2.4s forwards;
}

/* Kritik / Arşiv premium: alt panel sabit */
.stage.is-lt-exit:has(.layer-idle.is-premium.is-visible) .layer-lowerthird {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes lt-panel-exit-left {
  0% {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
  100% {
    transform: translateX(-108%);
    opacity: 0;
    visibility: hidden;
  }
}

/* Günlük rapor progress — harita cyan çizgi dili */
.daily-report-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 5;
  background: rgba(0, 20, 36, 0.45);
  overflow: hidden;
  pointer-events: none;
}

.daily-report-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    #5ee7ff 0%,
    #b8fbff 45%,
    #7ef9ff 100%
  );
  box-shadow:
    0 0 10px rgba(94, 231, 255, 0.7),
    0 0 22px rgba(126, 249, 255, 0.35);
}

@keyframes daily-report-progress-fill {
  from { width: 0%; }
  to { width: 100%; }
}

/* Bölgesel risk: alt panel yok */
.stage.is-risk-map .layer-lowerthird,
.stage.is-risk-map .layer-other,
.stage.is-risk-map .layer-ticker {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.daily-report-kicker {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #7dffa3;
  margin-bottom: 8px;
}

.daily-report-date {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
}

.daily-report-summary {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(230, 248, 240, 0.9);
  margin: 0 0 16px;
}

.daily-report-highlights {
  margin: 0 0 16px;
  padding-left: 20px;
  color: rgba(210, 240, 225, 0.9);
  font-size: 17px;
  line-height: 1.55;
}

.daily-report-highlights li {
  margin-bottom: 6px;
}

.daily-report-stats {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(125, 255, 163, 0.75);
  text-transform: uppercase;
}

/* —— SON DAKİKA video bumper (≤5 sn, opacity/volume fade) —— */
.layer-breaking-bumper {
  inset: 0;
  z-index: var(--z-breaking-bumper);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: transparent;
}

.layer-breaking-bumper.is-active {
  opacity: 1;
  visibility: visible;
}

.breaking-bumper-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  background: transparent;
}

/* —— SHORT TV klip oynatıcı (tam ekran yerel video — ana içerik) —— */
.layer-shorts-clip {
  inset: 0;
  z-index: var(--z-shorts-clip);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #0d0d0d;
  transition: opacity 0.28s var(--ease-broadcast);
}

.layer-shorts-clip.is-active {
  opacity: 1;
  visibility: visible;
}

.shorts-clip-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0d0d0d;
}

.shorts-clip-title {
  position: absolute;
  left: 40px;
  bottom: 36px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.78);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  border: 2px solid #ff6a00;
  max-width: 70%;
}

.shorts-clip-title:empty {
  display: none;
}

/* —— SHORT TV — haberden bağımsız "sıradaki video" bekleme ekranı —— */
.layer-shorts-idle {
  position: absolute;
  inset: 0;
  z-index: var(--z-shorts-clip);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(circle at 50% 40%, #1c1c1d 0%, #0d0d0d 75%);
  transition: opacity 0.3s var(--ease-broadcast);
}

.layer-shorts-idle.is-active {
  opacity: 1;
  visibility: visible;
}

.shorts-idle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.shorts-idle-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 96px;
  letter-spacing: 0.04em;
  color: #fafaf7;
  text-transform: uppercase;
}

.shorts-idle-logo span {
  color: #ff6a00;
  margin-left: 10px;
}

.shorts-idle-dots {
  display: flex;
  gap: 12px;
}

.shorts-idle-dots i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff6a00;
  display: inline-block;
  animation: shorts-idle-bounce 1s ease-in-out infinite;
}

.shorts-idle-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.shorts-idle-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes shorts-idle-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  40% {
    transform: translateY(-14px);
    opacity: 1;
  }
}

.shorts-idle-label {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(250, 250, 247, 0.7);
  text-transform: uppercase;
}

/* —— Açılış jeneriği (müzik-duyarlı Three.js) —— */
.layer-opener {
  inset: 0;
  z-index: var(--z-opener);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--ease-broadcast), visibility 0.55s;
  background: #03070e;
}

.layer-opener.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.layer-opener.is-leaving {
  opacity: 0;
  transition: opacity 0.9s var(--ease-exit);
}

.opener-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.opener-root canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SHORT TV stüdyo jeneriği kendi markasını sahne içinde (3D canvas dokusu)
   çiziyor — paylaşılan "SİBER 24" DOM chrome'unu üstte göstermeyelim. */
.layer-opener.is-studio-opener .opener-chrome {
  display: none;
}

.opener-chrome {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(3, 7, 14, 0.2) 0%,
    transparent 28%,
    transparent 62%,
    rgba(3, 7, 14, 0.72) 100%
  );
}

.opener-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 120px;
  line-height: 0.92;
  letter-spacing: 0.06em;
  color: #f2f5f8;
  text-transform: uppercase;
  will-change: transform;
  margin-top: 280px;
}

.opener-sub {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: rgba(168, 180, 196, 0.85);
  text-transform: uppercase;
}

.stage.is-breaking-hero .layer-focus,
.stage.is-breaking-hero .layer-topic,
.stage.is-breaking-hero .layer-camera,
.stage.is-breaking-hero .layer-other,
.stage.is-breaking-hero .layer-anchors {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.stage.is-breaking-hero .bg-hero {
  z-index: 48;
  filter: brightness(0.82) saturate(1.08);
}

.stage.is-breaking-hero .layer-bg {
  z-index: 46;
}

.stage.is-opener .layer-channelbug,
.stage.is-opener .layer-lowerthird,
.stage.is-opener .layer-other,
.stage.is-opener .layer-ticker,
.stage.is-opener .layer-anchors,
.stage.is-opener .layer-focus,
.stage.is-opener .layer-topic,
.stage.is-opener .layer-camera,
.stage.is-opener .layer-idle,
.stage.is-opener .layer-globe,
.stage.is-opener .layer-worldmap {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* SON DAKİKA saldırı yayı — galeri/opener gizlemesini geçersiz kıl */
.stage.is-attack-map .layer-worldmap {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 44;
}

.stage.is-attack-map .layer-focus,
.stage.is-attack-map .layer-topic,
.stage.is-attack-map .layer-camera {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ========== 2D dünya haritası ========== */
.layer-worldmap {
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--chrome-bottom) + var(--lt-h) + 8px);
  z-index: 42;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-broadcast);
}

.layer-worldmap.is-visible {
  opacity: 1;
}

.worldmap-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(5, 14, 24, 0.88);
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.worldmap-frame--cesium {
  width: 100%;
  height: 100%;
  max-width: none;
}

.worldmap-cesium {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Konteyner dolsun; canvas piksel boyutunu Cesium ayarlar (CSS stretch = bulanık) */
.worldmap-cesium .cesium-viewer,
.worldmap-cesium .cesium-viewer-cesiumWidgetContainer,
.worldmap-cesium .cesium-widget {
  width: 100%;
  height: 100%;
}

.worldmap-cesium .cesium-widget canvas {
  display: block;
  /* downscale yumusamasini azalt */
  image-rendering: auto;
}

.worldmap-cesium .cesium-viewer-bottom,
.worldmap-cesium .cesium-viewer-toolbar,
.worldmap-cesium .cesium-viewer-animationContainer,
.worldmap-cesium .cesium-viewer-timelineContainer {
  display: none !important;
}

.worldmap-media {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
  /* Çizgilerin ALTINDA — ülke→ülke yayını örtmesin */
  z-index: 3;
  /* 420px / 28vw → %65 daha büyük, +header kazanımıyla biraz daha */
  width: min(760px, 48vw);
  aspect-ratio: 16 / 10;
  background: rgba(4, 10, 18, 0.92);
  border: 1px solid var(--wm-accent, rgba(126, 249, 255, 0.35));
  box-shadow:
    0 0 18px var(--wm-accent, rgba(94, 231, 255, 0.18)),
    0 12px 36px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms var(--ease-broadcast), visibility 400ms;
}

/* İki ülke: küçük medya, müsait köşe */
.worldmap-media.is-compact {
  width: min(400px, 26vw);
}

.worldmap-media.is-corner-tr {
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
}

.worldmap-media.is-corner-tl {
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
}

.worldmap-media.is-corner-br {
  top: auto;
  right: 16px;
  left: auto;
  bottom: min(200px, 22%);
}

.worldmap-media.is-slot {
  /* Yer kaplar ama görünmez — çizgi hedefi */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.worldmap-media.is-revealed {
  opacity: 1;
  visibility: visible;
  animation: worldmapMediaIn 420ms var(--ease-broadcast);
}

.worldmap-media.is-exit {
  opacity: 0 !important;
  visibility: hidden;
  animation: none;
  transition: opacity 400ms ease, visibility 400ms;
}

@keyframes worldmapMediaIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Uzaydan bakış: yükselen yay + yer gölgesi — medyanın ÜSTÜNDE */
.worldmap-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 280ms ease;
  --link-core: #b8fbff;
  --link-glow: rgba(94, 231, 255, 0.55);
  --link-node: #7ef9ff;
}

.worldmap-link.is-on {
  opacity: 1;
}

.worldmap-link.is-exit {
  opacity: 0 !important;
  transition: opacity 400ms ease;
}

.worldmap-link-shadow {
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

/* ROUND 10 — "kesik kesik OLMASIN": kullanıcı şikayeti stutter değil,
   çizginin ilk çizimden sonra KESİKLİ DESENE dönüşmesiydi (dasharray +
   akan dash animasyonu). Çizgiler artık kalıcı DÜZ/SÜREKLİ; canlılık hissi
   glow'un yumuşak nabız animasyonuyla veriliyor (opacity — ucuz).
   (perf-lite/ultra scene.css'te animasyon+filter yine kapalı.) */
.worldmap-link-glow {
  stroke: var(--link-glow);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  filter: drop-shadow(0 0 7px var(--link-glow));
  animation: worldmapLinkGlowPulse 2.6s ease-in-out infinite;
}

.worldmap-link-core {
  stroke: var(--link-core);
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hedef ülke → medya spur (ikinci çizgi) */
.worldmap-link-spur-glow {
  stroke: var(--link-glow);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 2.2;
  opacity: 0.6;
  filter: drop-shadow(0 0 5px var(--link-glow));
  animation: worldmapLinkGlowPulse 2.2s ease-in-out infinite;
}

.worldmap-link-spur-core {
  stroke: var(--link-core);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 2.2;
}

@keyframes worldmapLinkGlowPulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}

/* Tek ülke: uçlar yuvarlak, kırılmalar keskin */
.worldmap-link.is-elbow .worldmap-link-core,
.worldmap-link.is-elbow .worldmap-link-glow {
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 2.2;
}

.worldmap-link.is-elbow .worldmap-link-shadow {
  display: none;
}

.worldmap-link.is-elbow .worldmap-link-glow {
  stroke-width: 5.5;
}

/* Ülke→ülke saldırı yayı */
.worldmap-link.is-arc .worldmap-link-core,
.worldmap-link.is-arc .worldmap-link-glow {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.worldmap-link.is-drawing .worldmap-link-core {
  animation: none;
  stroke-dasharray: none;
}

.worldmap-link.is-drawing .worldmap-link-shadow {
  opacity: 0.35;
}

.worldmap-link-node {
  fill: var(--link-node);
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 5px var(--link-node));
}

.worldmap-link-node--pin {
  fill: var(--link-core);
  stroke: var(--link-node);
  stroke-width: 2;
}

.worldmap-link-node--apex {
  fill: var(--link-core);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1;
  opacity: 0.95;
}

.worldmap-link-node--media {
  fill: var(--link-node);
  stroke: #fff;
  stroke-width: 1.5;
}

.worldmap-media-blur {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  filter: blur(18px) saturate(1.1) brightness(0.45);
  transform: scale(1.08);
  pointer-events: none;
}

.worldmap-media-img,
.worldmap-media-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

.worldmap-media.is-fit-contain .worldmap-media-img {
  object-fit: contain;
  object-position: center;
}

.worldmap-media.is-fit-cover .worldmap-media-img,
.worldmap-media.is-fit-cover .worldmap-media-video {
  object-fit: cover;
}

.worldmap-media.is-fallback {
  border-color: rgba(90, 160, 200, 0.35);
}

.worldmap-caption {
  position: absolute;
  left: 0;
  width: calc(100% - min(560px, 36vw));
  right: auto;
  bottom: 20px;
  z-index: 4;
  max-width: none;
  padding: 20px 32px 18px;
  background: none;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* Dikey: üst→%100 şeffaf; yatay: ortadan yanlara → %100 şeffaf */
.worldmap-caption::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(4, 12, 22, 0) 0%,
    rgba(4, 12, 22, 0.52) 50%,
    rgba(4, 12, 22, 0.94) 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 18%,
    #000 36%,
    #000 64%,
    rgba(0, 0, 0, 0.55) 82%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 18%,
    #000 36%,
    #000 64%,
    rgba(0, 0, 0, 0.55) 82%,
    transparent 100%
  );
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}

.worldmap-kicker {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #7dffa3;
  margin-bottom: 10px;
}

.worldmap-title {
  display: none !important;
}

.worldmap-body {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(245, 250, 255, 0.96);
  max-height: 9.5em;
  max-width: min(900px, 92%);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.worldmap-meta {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(190, 220, 240, 0.92);
}