/* =============================================================
 * tv.css — Fabrika TV panosu
 * Kural: 4-6 metre mesafeden okunur. Her şey --tv ölçeğine bağlı,
 * kullanıcı uzaktan kumanda/klavye ile büyütüp küçültebilir.
 * ============================================================= */

:root {
  --tv: 1;                          /* zoom çarpanı (JS ayarlar) */
  --sutun-min: 300px;
  --tv-bosluk: calc(14px * var(--tv));
}

html, body { height: 100%; overflow: hidden; }
body {
  background:
    radial-gradient(1400px 700px at 50% -20%, rgba(168,26,24,.13), transparent 65%),
    var(--zemin);
  cursor: default;
}
body.imlecsiz, body.imlecsiz * { cursor: none; }

.tv-uygulama {
  display: flex; flex-direction: column;
  height: 100dvh;
}

/* =============================================================
 *  ÜST ŞERİT
 * ========================================================== */
.tv-ust {
  flex: none;
  display: flex; align-items: center; gap: calc(20px * var(--tv));
  padding: calc(12px * var(--tv)) calc(20px * var(--tv));
  background: var(--mrk-800);
  border-bottom: calc(3px * var(--tv)) solid var(--marka);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}

.tv-marka { display: flex; align-items: center; gap: calc(12px * var(--tv)); flex: none; }
.tv-marka .marka-logo { height: calc(34px * var(--tv)); }
.tv-marka-alt {
  padding: calc(3px * var(--tv)) calc(10px * var(--tv));
  background: var(--marka); color: #fff; border-radius: var(--r-tam);
  font-size: calc(.62rem * var(--tv)); font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
}

/* KPI kutuları */
.tv-kpi-serit {
  flex: 1; display: flex; gap: calc(10px * var(--tv));
  justify-content: center; flex-wrap: nowrap; overflow: hidden;
}
.kpi {
  display: flex; align-items: center; gap: calc(10px * var(--tv));
  padding: calc(8px * var(--tv)) calc(16px * var(--tv));
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: calc(12px * var(--tv));
  min-width: calc(112px * var(--tv));
}
.kpi-ikon {
  width: calc(34px * var(--tv)); height: calc(34px * var(--tv)); flex: none;
  border-radius: calc(9px * var(--tv));
  display: grid; place-items: center;
  font-size: calc(1.1rem * var(--tv));
  background: color-mix(in srgb, var(--kr, #fff) 20%, transparent);
  color: var(--kr, #fff);
}
.kpi-deger {
  font-size: calc(1.5rem * var(--tv)); font-weight: 900; line-height: 1;
  color: #fff; letter-spacing: -.03em;
}
.kpi-etiket {
  font-size: calc(.63rem * var(--tv)); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #9a9aa6; margin-top: calc(3px * var(--tv));
  white-space: nowrap;
}
.kpi.uyari { border-color: color-mix(in srgb, var(--alarm) 55%, transparent); background: color-mix(in srgb, var(--alarm) 14%, transparent); }
.kpi.uyari .kpi-deger { color: #fff; }

/* Saat */
.tv-saat { flex: none; text-align: right; }
.tv-saat-buyuk {
  font-size: calc(2.1rem * var(--tv)); font-weight: 900; line-height: 1;
  color: #fff; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.tv-saat-alt {
  font-size: calc(.72rem * var(--tv)); color: #9a9aa6; font-weight: 700;
  margin-top: calc(4px * var(--tv)); white-space: nowrap;
}
.tv-vardiya {
  display: inline-block; margin-left: calc(8px * var(--tv));
  padding: calc(1px * var(--tv)) calc(8px * var(--tv));
  background: var(--marka); color: #fff; border-radius: var(--r-tam);
  font-weight: 900;
}

/* =============================================================
 *  KANBAN ALANI
 * ========================================================== */
.tv-pano {
  flex: 1; min-height: 0;
  display: grid;
  gap: var(--tv-bosluk);
  padding: var(--tv-bosluk);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  transition: opacity .35s;
}
.tv-pano.gecis { opacity: 0; }

/* --- Sütun --- */
.sutun {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: calc(16px * var(--tv));
  overflow: hidden;
}
.sutun-baslik {
  flex: none;
  display: flex; align-items: center; gap: calc(9px * var(--tv));
  padding: calc(11px * var(--tv)) calc(13px * var(--tv));
  background: var(--yuzey-2);
  border-bottom: 1px solid var(--cizgi);
}
.sutun-ikon {
  width: calc(32px * var(--tv)); height: calc(32px * var(--tv)); flex: none;
  border-radius: calc(9px * var(--tv));
  display: grid; place-items: center;
  background: var(--marka); color: #fff;
  font-size: calc(1rem * var(--tv));
}
.sutun-ad {
  flex: 1; min-width: 0;
  font-size: calc(1.02rem * var(--tv)); font-weight: 900;
  letter-spacing: -.01em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sutun-sayac {
  flex: none; font-size: calc(.78rem * var(--tv)); font-weight: 900;
  padding: calc(3px * var(--tv)) calc(9px * var(--tv));
  border-radius: var(--r-tam);
  background: var(--yuzey-3); color: var(--metin-2);
  font-variant-numeric: tabular-nums;
}
.sutun-sayac.dolu { background: var(--marka); color: #fff; }

.sutun-govde {
  flex: 1; min-height: 0; overflow: hidden;
  padding: calc(9px * var(--tv));
  display: flex; flex-direction: column; gap: calc(9px * var(--tv));
}
/* Sığmayan kart sayısını gösteren alt bilgi */
.sutun-fazla {
  flex: none; text-align: center;
  font-size: calc(.72rem * var(--tv)); font-weight: 800;
  color: var(--metin-3); padding: calc(5px * var(--tv));
  border-top: 1px dashed var(--cizgi);
}
.sutun-bos {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--metin-3); gap: calc(6px * var(--tv));
}
.sutun-bos i { font-size: calc(1.7rem * var(--tv)); opacity: .4; }
.sutun-bos span { font-size: calc(.78rem * var(--tv)); font-weight: 700; }

/* =============================================================
 *  TREYLER KARTI
 * ========================================================== */
.tv-kart {
  flex: none;
  padding: calc(11px * var(--tv)) calc(12px * var(--tv));
  padding-left: calc(16px * var(--tv));
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: calc(12px * var(--tv));
  position: relative; overflow: hidden;
}
/* Sol durum şeridi */
.tv-kart::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: calc(6px * var(--tv)); background: var(--st);
}
.tv-kart.st-bekliyor::before {
  background: repeating-linear-gradient(135deg,
    var(--cizgi-2) 0 calc(4px * var(--tv)), transparent calc(4px * var(--tv)) calc(8px * var(--tv)));
}
.tv-kart.st-durakladi::before {
  background: repeating-linear-gradient(135deg,
    var(--st) 0 calc(6px * var(--tv)),
    color-mix(in srgb, var(--st) 40%, transparent) calc(6px * var(--tv)) calc(12px * var(--tv)));
}
/* Durum yumuşak zemin — renk körlüğünde bile kart tonu ayrışsın */
.tv-kart.st-devam     { background: color-mix(in srgb, var(--st-devam) 8%, var(--yuzey-2)); }
.tv-kart.st-durakladi { background: color-mix(in srgb, var(--st-durakladi) 9%, var(--yuzey-2)); }
.tv-kart.st-bitti     { background: color-mix(in srgb, var(--st-bitti) 8%, var(--yuzey-2)); opacity: .82; }

.tv-kart.gecikti {
  border-color: var(--alarm);
  box-shadow: 0 0 0 calc(2px * var(--tv)) color-mix(in srgb, var(--alarm) 32%, transparent);
  animation: kartAlarm 2.2s ease-in-out infinite;
}
@keyframes kartAlarm {
  50% { box-shadow: 0 0 0 calc(2px * var(--tv)) color-mix(in srgb, var(--alarm) 70%, transparent),
                    0 0 calc(18px * var(--tv)) color-mix(in srgb, var(--alarm) 40%, transparent); }
}

.kart-ust {
  display: flex; align-items: center; gap: calc(6px * var(--tv));
  margin-bottom: calc(7px * var(--tv));
}
.kart-rozet {
  display: inline-flex; align-items: center; gap: calc(4px * var(--tv));
  padding: calc(2px * var(--tv)) calc(8px * var(--tv));
  border-radius: var(--r-tam);
  font-size: calc(.62rem * var(--tv)); font-weight: 900; letter-spacing: .06em;
  background: var(--st); color: #fff;
}
.tv-kart.st-bekliyor .kart-rozet {
  background: transparent; color: var(--metin-3);
  border: 1px dashed var(--cizgi-2);
}
.kart-onc {
  padding: calc(2px * var(--tv)) calc(7px * var(--tv));
  border-radius: var(--r-tam);
  font-size: calc(.6rem * var(--tv)); font-weight: 900; letter-spacing: .05em;
}
.kart-onc.onc-acil { background: var(--alarm); color: #fff; }
.kart-onc.onc-yuksek { background: #f59e0b; color: #241500; }
.kart-alarm {
  display: inline-flex; align-items: center; gap: calc(3px * var(--tv));
  padding: calc(2px * var(--tv)) calc(7px * var(--tv));
  border-radius: var(--r-tam); background: var(--alarm); color: #fff;
  font-size: calc(.6rem * var(--tv)); font-weight: 900;
  animation: yanip 1.4s steps(1) infinite;
}

.kart-seri {
  font-size: calc(1.42rem * var(--tv)); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kart-model {
  font-size: calc(.78rem * var(--tv)); color: var(--metin-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: calc(1px * var(--tv));
}

.kart-ekip {
  display: flex; flex-wrap: wrap; gap: calc(4px * var(--tv));
  margin-top: calc(8px * var(--tv));
}
.kart-per {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(38px * var(--tv)); height: calc(26px * var(--tv));
  padding: 0 calc(7px * var(--tv));
  background: var(--celik); color: #fff;
  border-radius: var(--r-tam);
  font-size: calc(.82rem * var(--tv)); font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.kart-per.bos {
  background: transparent; border: calc(1.5px * var(--tv)) dashed var(--cizgi-2);
  color: var(--metin-3); font-weight: 700; font-size: calc(.68rem * var(--tv));
}

.kart-alt {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: calc(8px * var(--tv)); margin-top: calc(9px * var(--tv));
}
.kart-sure {
  font-size: calc(1.34rem * var(--tv)); font-weight: 900;
  letter-spacing: -.03em; line-height: 1;
  color: var(--st);
}
.tv-kart.st-bekliyor .kart-sure { color: var(--metin-3); font-size: calc(.9rem * var(--tv)); }
.kart-hedef {
  font-size: calc(.68rem * var(--tv)); color: var(--metin-3);
  font-weight: 700; text-align: right; line-height: 1.3;
}

.kart-cubuk {
  height: calc(5px * var(--tv)); background: var(--yuzey-3);
  border-radius: var(--r-tam); overflow: hidden;
  margin-top: calc(7px * var(--tv));
}
.kart-cubuk span { display: block; height: 100%; background: var(--st); transition: width 1s linear; }
.kart-cubuk.asildi span { background: var(--alarm); }

/* Duraklama sebebi satırı */
.kart-sebep {
  display: flex; align-items: center; gap: calc(5px * var(--tv));
  margin-top: calc(7px * var(--tv));
  padding: calc(4px * var(--tv)) calc(8px * var(--tv));
  background: color-mix(in srgb, var(--st-durakladi) 16%, transparent);
  border-radius: calc(7px * var(--tv));
  font-size: calc(.7rem * var(--tv)); font-weight: 800; color: var(--st-durakladi);
}

/* =============================================================
 *  KOMPAKT MOD (tüm istasyonlar tek ekranda)
 * ========================================================== */
.tv-pano.kompakt .kart-model,
.tv-pano.kompakt .kart-hedef,
.tv-pano.kompakt .kart-sebep { display: none; }
.tv-pano.kompakt .kart-seri { font-size: calc(1.05rem * var(--tv)); }
.tv-pano.kompakt .kart-sure { font-size: calc(1.02rem * var(--tv)); }
.tv-pano.kompakt .tv-kart { padding: calc(8px * var(--tv)); padding-left: calc(13px * var(--tv)); }
.tv-pano.kompakt .sutun-ad { font-size: calc(.82rem * var(--tv)); }

/* =============================================================
 *  ALT ŞERİT — sayfa göstergesi + son hareketler
 * ========================================================== */
.tv-alt {
  flex: none;
  display: flex; align-items: center; gap: calc(16px * var(--tv));
  padding: calc(8px * var(--tv)) calc(20px * var(--tv));
  background: var(--mrk-800);
  border-top: 1px solid rgba(255,255,255,.07);
  min-height: calc(42px * var(--tv));
}
.sayfa-noktalar { display: flex; gap: calc(6px * var(--tv)); flex: none; }
.sayfa-nk {
  width: calc(9px * var(--tv)); height: calc(9px * var(--tv));
  border-radius: 50%; background: rgba(255,255,255,.22);
  transition: background .3s, width .3s;
}
.sayfa-nk.aktif { background: var(--marka-acik-2); width: calc(26px * var(--tv)); border-radius: var(--r-tam); }

/* Kayan son hareketler */
.akis {
  flex: 1; min-width: 0; overflow: hidden;
  position: relative; height: calc(24px * var(--tv));
  /* Sayfa noktalarına ve sağ kenara yumuşak geçiş */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.akis-ic {
  display: flex; gap: calc(28px * var(--tv)); align-items: center;
  position: absolute; white-space: nowrap;
  animation: akisKay 44s linear infinite;
}
.akis-ic:hover { animation-play-state: paused; }
@keyframes akisKay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.akis-oge {
  display: inline-flex; align-items: center; gap: calc(7px * var(--tv));
  font-size: calc(.76rem * var(--tv)); font-weight: 700; color: #a8a8b4;
}
.akis-oge i { font-size: calc(.85rem * var(--tv)); }
.akis-oge b { color: #fff; font-weight: 900; }
.akis-saat { color: #74747f; font-variant-numeric: tabular-nums; }

/* =============================================================
 *  KONTROL PANELİ (fare hareket edince görünür)
 * ========================================================== */
.tv-kontrol {
  position: fixed; bottom: calc(58px * var(--tv)); right: calc(18px * var(--tv));
  display: flex; gap: calc(8px * var(--tv));
  padding: calc(8px * var(--tv));
  background: rgba(10,10,12,.94);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(14px * var(--tv));
  box-shadow: var(--golge-3);
  z-index: 100;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s, transform .25s;
  backdrop-filter: blur(8px);
}
.tv-kontrol.gorunur { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ktrl-btn {
  width: calc(44px * var(--tv)); height: calc(44px * var(--tv));
  border: none; border-radius: calc(10px * var(--tv));
  background: rgba(255,255,255,.09); color: #fff;
  font-size: calc(1.1rem * var(--tv)); cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.ktrl-btn:hover { background: var(--marka); }
.ktrl-btn.aktif { background: var(--marka); }
.ktrl-ayirac { width: 1px; background: rgba(255,255,255,.14); margin: calc(4px * var(--tv)) 0; }
.ktrl-etiket {
  display: grid; place-items: center; min-width: calc(52px * var(--tv));
  color: #fff; font-size: calc(.78rem * var(--tv)); font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Klavye kısayolları ipucu */
.tv-ipucu {
  position: fixed; bottom: calc(58px * var(--tv)); left: calc(18px * var(--tv));
  padding: calc(10px * var(--tv)) calc(14px * var(--tv));
  background: rgba(10,10,12,.94);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(12px * var(--tv));
  color: #a8a8b4; font-size: calc(.74rem * var(--tv)); font-weight: 600;
  z-index: 100; line-height: 1.7;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.tv-ipucu.gorunur { opacity: 1; }
.tv-ipucu kbd {
  background: rgba(255,255,255,.12); color: #fff;
  padding: 1px calc(6px * var(--tv)); border-radius: 5px;
  font-family: inherit; font-weight: 800; font-size: .95em;
}

/* Dar ekran (masaüstü önizleme / tablet) */
@media (max-width: 900px) {
  .tv-kpi-serit { display: none; }
  .tv-saat-buyuk { font-size: calc(1.4rem * var(--tv)); }
}