/* =============================================================
 * tv.css — Fabrika TV panosu
 *
 * Sütun = istasyon. Sütun gövdesinde SADECE şase numarası ve rengi.
 * Her ölçü --tv çarpanına bağlı; uzaktan kumanda ile büyür/küçülür.
 * ============================================================= */

:root {
  --tv: 1;
  --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,.12), transparent 65%),
    var(--zemin);
}
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(11px * var(--tv)) calc(20px * var(--tv));
  background: var(--mrk-800);
  border-bottom: calc(3px * var(--tv)) solid var(--marka);
}

.tv-marka { display: flex; align-items: center; gap: calc(12px * var(--tv)); flex: none; }
.tv-marka .marka-logo { height: calc(32px * 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(.6rem * var(--tv)); font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}

/* KPI */
.tv-kpi-serit {
  flex: 1; display: flex; gap: calc(10px * var(--tv));
  justify-content: center; overflow: hidden;
}
.kpi {
  display: flex; align-items: center; gap: calc(10px * var(--tv));
  padding: calc(7px * var(--tv)) calc(16px * var(--tv));
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: calc(12px * var(--tv));
}
.kpi-nokta {
  width: calc(12px * var(--tv)); height: calc(12px * var(--tv));
  border-radius: 50%; background: var(--kr, #fff); flex: none;
}
.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(.62rem * 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) 60%, transparent);
  background: color-mix(in srgb, var(--alarm) 16%, transparent);
}

/* Saat */
.tv-saat { flex: none; text-align: right; }
.tv-saat-buyuk {
  font-size: calc(2rem * var(--tv)); font-weight: 900; line-height: 1;
  color: #fff; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.tv-saat-alt {
  font-size: calc(.7rem * 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
 * ========================================================== */
.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; }

.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(.76rem * 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; }

/* ---------- Sütun gövdesi: SADECE şase numaraları ---------- */
.sutun-govde {
  flex: 1; min-height: 0; overflow: hidden;
  padding: calc(10px * var(--tv));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(112px * var(--tv)), 1fr));
  grid-auto-rows: min-content;
  gap: calc(9px * var(--tv));
  align-content: start;
}

.sutun-bos {
  grid-column: 1 / -1;
  align-self: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--metin-3); gap: calc(6px * var(--tv)); padding: calc(20px * var(--tv)) 0;
}
.sutun-bos i { font-size: calc(1.6rem * var(--tv)); opacity: .35; }
.sutun-bos span { font-size: calc(.76rem * var(--tv)); font-weight: 700; }

.sutun-fazla {
  grid-column: 1 / -1;
  text-align: center;
  font-size: calc(.74rem * var(--tv)); font-weight: 800;
  color: var(--metin-3); padding: calc(4px * var(--tv));
}

/* =============================================================
 *  ŞASE KUTUSU — panonun tek içeriği
 * ========================================================== */
.sase-kart {
  position: relative;
  display: grid; place-items: center;
  padding: calc(12px * var(--tv)) calc(8px * var(--tv));
  border-radius: calc(12px * var(--tv));
  background: var(--st);
  color: #fff;
  font-size: calc(3.1rem * var(--tv));
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border: calc(2px * var(--tv)) solid transparent;
  min-height: calc(84px * var(--tv));
}

/* Duraklatıldı: sarı zeminde koyu yazı + çapraz desen (renk körlüğü için) */
.sase-kart.st-durakladi {
  color: #241500;
  background-image: repeating-linear-gradient(
    135deg, rgba(0,0,0,.10) 0 calc(9px * var(--tv)),
    transparent calc(9px * var(--tv)) calc(18px * var(--tv)));
}

/* Bitti: dolu marka kırmızısı, hafif geri çekilmiş */
.sase-kart.st-bitti { opacity: .9; }

/* Durum ikonu — renge ek ayırt edici */
.sase-durum {
  position: absolute;
  top: calc(6px * var(--tv)); right: calc(8px * var(--tv));
  font-size: calc(.85rem * var(--tv));
  opacity: .85;
}

/* Gecikme alarmı */
.sase-kart.gecikti {
  border-color: var(--alarm);
  animation: saseAlarm 1.6s ease-in-out infinite;
}
@keyframes saseAlarm {
  50% { box-shadow: 0 0 0 calc(4px * var(--tv)) color-mix(in srgb, var(--alarm) 55%, transparent); }
}

/* =============================================================
 *  KOMPAKT MOD — tüm istasyonlar tek ekranda
 * ========================================================== */
.tv-pano.kompakt .sutun-govde {
  grid-template-columns: repeat(auto-fit, minmax(calc(66px * var(--tv)), 1fr));
  gap: calc(6px * var(--tv)); padding: calc(7px * var(--tv));
}
.tv-pano.kompakt .sase-kart {
  font-size: calc(1.5rem * var(--tv));
  min-height: calc(46px * var(--tv));
  padding: calc(7px * var(--tv)) calc(4px * var(--tv));
  border-radius: calc(9px * var(--tv));
}
.tv-pano.kompakt .sase-durum { display: none; }
.tv-pano.kompakt .sutun-ad { font-size: calc(.8rem * var(--tv)); }
.tv-pano.kompakt .sutun-ikon { width: calc(24px * var(--tv)); height: calc(24px * var(--tv)); font-size: calc(.8rem * var(--tv)); }

/* =============================================================
 *  ALT ŞERİT — sadece sayfa göstergesi
 * ========================================================== */
.tv-alt {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(16px * var(--tv));
  padding: calc(9px * var(--tv)) calc(20px * var(--tv));
  background: var(--mrk-800);
}
.sayfa-noktalar { display: flex; gap: calc(7px * var(--tv)); }
.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); }

/* Renk açıklaması */
.tv-lejant { display: flex; gap: calc(16px * var(--tv)); align-items: center; }
.lej { display: flex; align-items: center; gap: calc(6px * var(--tv)); }
.lej-kutu {
  width: calc(13px * var(--tv)); height: calc(13px * var(--tv));
  border-radius: calc(4px * var(--tv)); background: var(--lk);
}
.lej span { font-size: calc(.68rem * var(--tv)); font-weight: 800; color: #9a9aa6; letter-spacing: .04em; }

/* =============================================================
 *  KONTROLLER
 * ========================================================== */
.tv-kontrol {
  position: fixed; bottom: calc(52px * 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, .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;
}

.tv-ipucu {
  position: fixed; bottom: calc(52px * 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(.72rem * 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 (tablet / masaüstü önizleme) — pano yine de bozulmasın */
@media (max-width: 900px) {
  .tv-kpi-serit { display: none; }
  .tv-ust { gap: calc(10px * var(--tv)); padding: calc(8px * var(--tv)) calc(12px * var(--tv)); }
  .tv-marka .marka-logo { height: calc(24px * var(--tv)); }
  .tv-marka-alt { display: none; }
  .tv-saat-buyuk { font-size: calc(1.35rem * var(--tv)); }
  .tv-saat-alt { font-size: calc(.6rem * var(--tv)); }
  .tv-saat-alt > span:first-child { display: none; }   /* uzun tarihi gizle */
  .tv-alt { padding: calc(7px * var(--tv)) calc(12px * var(--tv)); }
  .lej span { display: none; }                          /* sadece renk kutuları */
  .tv-lejant { gap: calc(8px * var(--tv)); }
}