/* ===================================================================
   REALTEKS CANLI PANO — duvar ekranı

   TEK TEMA, BİLİNÇLİ: bu sayfa gün boyu açık duran bir duvar
   ekranında dönecek. Aydınlık tema yok; koyu denim zemin hem
   uzaktan okunur hem ekranı yormaz.

   RENKLER — jean kumaşından:
     zemin      #0E1A2B  gece indigo
     panel      #16263C  yıkanmış indigo
     kenar      #24374F
     mürekkep   #EFEAD9  ekru
     soluk      #8FA5C0
     dikiş      #D6A03C  sarı dikiş ipi — SADECE çizgi/vurgu, veri değil

   VERİ RENKLERİ (doğrulandı: aydınlık bandı, kroma, renk körlüğü
   ayrımı ΔE 28.9, kontrast — hepsi geçti):
     alınan     #048FF4
     sevk       #B5820C

   DURUM RENKLERİ trafik ışığı düzeninde bilerek bırakıldı: fabrika
   zaten bu dili konuşuyor. Renk körlüğüne karşı her kutu AYRICA
   simge ve yazı taşıyor — renk tek başına hiçbir şey söylemiyor.
   =================================================================== */

:root{
  --zemin:#0E1A2B;  --panel:#16263C;  --panel2:#1B2E47;
  --kenar:#24374F;  --kenar2:#2E4361;
  --ink:#EFEAD9;    --ink2:#B9C8DA;   --soluk:#8FA5C0;
  --dikis:#D6A03C;
  --alinan:#048FF4; --sevk:#B5820C;
  --calisir:#06A84E; --durus:#D27908; --ariza:#EE0B2A; --kapali:#4A5C74;

  --k1:6px; --k2:12px; --k3:18px; --k4:26px; --k5:38px;
  --disp:"Oswald","Arial Narrow",system-ui,sans-serif;
  --metin:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--zemin); color:var(--ink);
  font-family:var(--metin); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;               /* duvar ekranında kaydırma yok */
}
/* denim dimi dokusu — çok hafif, sadece zemin ölü durmasın */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.018) 0 1px, transparent 1px 5px);
}
.sayfa{position:relative; z-index:1; padding:var(--k3) var(--k4) var(--k4);
       height:100%; display:flex; flex-direction:column}

h1,h2,h3{margin:0; font-family:var(--disp); font-weight:500; text-wrap:balance}
.rakam{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* ---- dikiş çizgisi: bu panonun imzası ---- */
.dikis{height:2px; border-top:2px dashed var(--dikis); opacity:.55}

/* =================== ÜST ŞERİT =================== */
.ust{display:flex; align-items:flex-end; gap:var(--k4); flex-wrap:wrap;
     padding-bottom:var(--k2)}
.marka{display:flex; align-items:baseline; gap:10px}
.marka b{font-family:var(--disp); font-weight:600; font-size:30px;
         letter-spacing:.18em; text-transform:uppercase; color:var(--ink)}
.marka span{font-family:var(--disp); font-weight:400; font-size:15px;
            letter-spacing:.3em; text-transform:uppercase; color:var(--dikis)}
.ust .sag{margin-left:auto; display:flex; align-items:center; gap:var(--k3);
          flex-wrap:wrap}
.canli{display:flex; align-items:center; gap:8px; font-family:var(--disp);
       letter-spacing:.2em; font-size:13px; color:var(--ink2);
       text-transform:uppercase}
.nabiz{width:9px; height:9px; border-radius:50%; background:var(--calisir);
       box-shadow:0 0 0 0 rgba(6,168,78,.55); animation:nabiz 2.4s infinite}
@keyframes nabiz{
  0%{box-shadow:0 0 0 0 rgba(6,168,78,.5)}
  70%{box-shadow:0 0 0 9px rgba(6,168,78,0)}
  100%{box-shadow:0 0 0 0 rgba(6,168,78,0)}
}
#saat{font-family:var(--disp); font-size:30px; font-weight:500;
      letter-spacing:.06em; font-variant-numeric:tabular-nums}
#tarih{font-size:13px; color:var(--soluk); text-align:right}

/* =================== ORTAK PANEL =================== */
.panel{background:var(--panel); border:1px solid var(--kenar);
       padding:var(--k3); display:flex; flex-direction:column; min-width:0}
.baslik{font-family:var(--disp); font-size:13px; letter-spacing:.22em;
        text-transform:uppercase; color:var(--soluk);
        display:flex; align-items:center; gap:12px; margin-bottom:var(--k2)}
.baslik .cizgi{flex:1; height:1px; background:var(--kenar2)}
.baslik em{font-style:normal; color:var(--dikis); letter-spacing:.1em}

/* =================== MAKİNE PARKURU =================== */
.parkur{margin-top:var(--k2)}
.ozet{display:flex; gap:var(--k2); flex-wrap:wrap; margin-left:auto;
      font-family:var(--metin); letter-spacing:0; text-transform:none}
.ozet span{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink2)}
.nokta{width:10px; height:10px; flex:none}
.nokta.c{background:var(--calisir)} .nokta.d{background:var(--durus)}
.nokta.a{background:var(--ariza)}   .nokta.k{background:var(--kapali)}

.tezgahlar{display:grid; gap:var(--k1);
           grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.tz{background:var(--panel2); border:1px solid var(--kenar);
    border-left:4px solid var(--kapali); padding:9px 11px; min-width:0}
.tz.c{border-left-color:var(--calisir)} .tz.d{border-left-color:var(--durus)}
.tz.a{border-left-color:var(--ariza)}   .tz.k{border-left-color:var(--kapali)}
.tz .ust2{display:flex; align-items:center; justify-content:space-between; gap:8px}
.tz .no{font-family:var(--disp); font-size:19px; font-weight:500; letter-spacing:.04em}
.tz .rozet{display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
           font-family:var(--disp); letter-spacing:.13em; text-transform:uppercase}
.tz.c .rozet{color:var(--calisir)} .tz.d .rozet{color:var(--durus)}
.tz.a .rozet{color:var(--ariza)}   .tz.k .rozet{color:var(--soluk)}
.tz .sure{font-size:12.5px; color:var(--soluk); font-variant-numeric:tabular-nums; margin-top:3px}
.tz .is{font-size:12.5px; color:var(--ink2); margin-top:5px;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tz.k .is{color:var(--soluk)}


/* =================== GEZİNME =================== */
.gezinme{display:flex; gap:var(--k2); margin-left:var(--k4)}
.gezinme a{
  font-family:var(--disp); font-size:14px; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; color:var(--soluk);
  padding:6px 14px 8px; border-bottom:3px solid transparent;
}
.gezinme a:hover{color:var(--ink)}
.gezinme a.acik{color:var(--ink); border-bottom-color:var(--dikis)}
.gezinme a:focus-visible{outline:2px solid var(--dikis); outline-offset:2px}

.nabiz.sorunlu{background:var(--ariza); box-shadow:0 0 0 0 rgba(238,11,42,.5); animation:none}

/* =================== DÖRT BÖLÜM =================== */
.bolumler{
  display:grid; gap:var(--k2); margin-top:var(--k3);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.bolum{
  position:relative;                 /* parlama katmani icin */
  background:var(--panel); border:1px solid var(--kenar);
  border-top:3px solid var(--dikis);
  padding:var(--k3); display:flex; flex-direction:column; gap:var(--k1);
  min-width:0;
}
.bolum.beklemede{border-top-color:var(--kapali)}

.bolumBaslik{display:flex; align-items:center; gap:10px}
.bolumBaslik .ad{
  font-family:var(--disp); font-size:17px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.bolumBaslik .cizgi{flex:1; height:1px; background:var(--kenar2)}
.bolumBaslik .birim{
  font-family:var(--disp); font-size:11.5px; letter-spacing:.18em;
  color:var(--dikis); text-transform:uppercase;
}

.bolum .buyuk{
  font-family:var(--disp); font-weight:600; line-height:1;
  font-size:clamp(38px,3.6vw,60px); margin-top:4px;
}
.bolum .altBilgi{font-size:13px; color:var(--ink2)}

.bugunEt{
  font-family:var(--disp); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--soluk); margin-top:6px;
}
/*  KIYAS BLOGU - uc satir, sayilar ayni sutunda hizali.
    Izgara kullaniyorum ki rakamlar alt alta gelsin; tabular rakamla
    birlesince basamaklar da hizalaniyor ve fark goz kararyla okunuyor. */
.kiyas{ margin-top:10px; display:flex; flex-direction:column; gap:2px }
.kiyas .satir{
  display:grid; grid-template-columns:1fr auto minmax(0,auto);
  gap:10px; align-items:baseline;
  padding:3px 0;
}
.kiyas .satir.sonu{ border-top:1px solid #1E3049; margin-top:2px; padding-top:6px }
.kiyas .et{
  font-size:12.5px; color:var(--soluk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kiyas b{ color:var(--ink); font-weight:700; font-size:17px; text-align:right }
.kiyas .delta{ font-size:12.5px; white-space:nowrap }

.seriAd{
  font-size:12px; color:var(--soluk); margin-top:var(--k2);
  padding-bottom:2px; letter-spacing:.02em;
}

.mini-grafik{width:100%; height:auto; margin-top:var(--k1)}

/* ---- panelin altındaki son hareketler ---- */
.mini{list-style:none; margin:var(--k1) 0 0; padding:0;
      display:flex; flex-direction:column}
/*  IZGARA DEGIL ESNEK KUTU.

    Izgarada satirin icindeki her kutu bir hucre isgal ediyor. Bir
    ::before eklendigi anda o da hucre sayiliyor ve butun satir bir
    sutun kayiyor; kolon sayisi tutmayinca ad ve miktar alt alta
    dusuyor. Esnek kutuda boyle bir tehlike yok, ve satir hicbir
    kosulda alt satira gecmiyor.                                    */
.mini li{
  display:flex; align-items:baseline; gap:var(--k2);
  padding:5px 0 5px 9px; border-top:1px solid #1E3049;
  font-size:13px;
}
.mini .ana{flex:1 1 auto; min-width:0}
.mini .sag{flex:0 0 auto}
.mini .ana{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink2)}
.mini .sag{color:var(--ink); font-weight:600; white-space:nowrap}

/* ---- kaynağı bağlanmamış bölüm ---- */
.bolum.beklemede .bos{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  gap:6px; text-align:left; padding:var(--k4) 0;
}
.bosBaslik{font-family:var(--disp); font-size:19px; letter-spacing:.1em;
           color:var(--ink2); text-transform:uppercase}

@media (max-width:1400px){ .bolumler{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){  .bolumler{grid-template-columns:1fr}
                            .gezinme{margin-left:0} }

/* =================== BAĞLANTI / HATA ŞERİTLERİ ===================

   BU KURALLAR BİR SÜRE KAYIPTI. Kullanılmayan CSS bloklarını
   temizlerken bu bloğu da kesmişim; sonra yenisini eklemek için
   yaptığım metin değiştirme hedefini bulamadığı için SESSİZCE
   hiçbir şey yapmadı. Sonuç: iki şerit de kuralsız kaldı, yani
   sıradan birer <div> gibi sayfanın altında sürekli göründüler.

   Ders: değiştirme yapıyorsan tuttuğunu DOĞRULA.                    */

.serit-uyari{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  display:none;
  padding:14px 22px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  font-family:"IBM Plex Sans","Segoe UI",sans-serif;
  font-size:16px; font-weight:600; text-align:center;
  color:#0E1A2B; background:#D27908;
}
.serit-uyari.hata{ background:#EE0B2A; color:#FFFFFF }

/* Blazor yeniden bağlanma şeridini kendi sınıflarıyla açıyor.
   Görünürlüğü SADECE bu sınıflar belirlesin.                        */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected{ display:block }

/* Onarılamaz hata şeridini Blazor satır içi style ile açıyor;
   burada sadece varsayılanı kapalı tutuyoruz.                       */

/* =================== SABİT TUVAL + ORANTILI ÖLÇEK ===================

   Düzen 1920×1080'lik bir tuvale çiziliyor, tuval de pencereye sığacak
   orana kadar küçültülüyor (ölçeği saat.js hesaplıyor). Yazı, çubuk ve
   boşluk aynı oranda küçüldüğü için düzen hiçbir genişlikte bozulmuyor.
   ------------------------------------------------------------------- */
.olcek{ position:fixed; inset:0; overflow:hidden }

.tuval{
  width:1920px; height:1080px;
  transform-origin:top left;
  will-change:transform;
}

.icerik{ flex:1; min-height:0; display:flex; flex-direction:column }

/* ALT BANT: içeriği henüz yok, yeri ayrılmış durumda. Zeminle aynı
   renkte olduğu için boşken görünmüyor.                              */
.bant{ flex:none; height:64px }

/* Paneller kalan yüksekliği paylaşıyor ve TAŞMIYOR: sığmayan liste
   satırı kırpılıyor, sayfayı uzatmıyor.                              */
.olcek .bolumler{
  flex:1; min-height:0;
  grid-template-columns:repeat(4,minmax(0,1fr));   /* tuvalde her zaman 4 */
}
.olcek .bolum{ min-height:0; overflow:hidden }
.olcek .mini{ overflow:hidden }
.olcek .parkur{ flex:1; min-height:0; overflow:hidden }

/* ---- 900 px altı: ölçekten vazgeç, normal akışa dön ----
   Telefonda 1920'lik tuvali küçültmek okunmaz bir ekran üretir.     */
body.dar{ overflow:auto }
body.dar .olcek{ position:static; overflow:visible }
body.dar .tuval{ width:auto; height:auto; transform:none }
body.dar .sayfa{ height:auto }
body.dar .icerik{ display:block }
body.dar .bolumler{ grid-template-columns:1fr; flex:none }
body.dar .bolum{ overflow:visible }
body.dar .bant{ display:none }

/* =================== DEGISIM ISARETI ===================

   Duvar ekraninda kimse surekli bakmiyor. Bir kayit girildiginde
   panonun degistigini SOYLEMESI gerekiyor, yoksa sayilar sessizce
   yerinden oynar ve kimse fark etmez.

   Iki katman:
     1. Panelin ust kenari bir kez parliyor  -> 5 metreden gorulur,
        "hangi panelde" sorusunu cevaplar
     2. Yeni satirin zemini altin renginden soner -> yakindan
        bakan "hangi kayit" sorusunu cevaplar

   Ikisi de BIR KEZ oynayip biter. Surekli yanip sonen bir ekran
   bir sure sonra bakilmayan bir ekran olur.
   ------------------------------------------------------------ */

.parlama{
  position:absolute; left:0; right:0; top:-3px; height:3px;
  background:var(--dikis); opacity:0; pointer-events:none; z-index:3;
  animation:parla 2.8s ease-out 1;
}
@keyframes parla{
  0%   { opacity:0 }
  6%   { opacity:1; box-shadow:0 0 16px 3px rgba(214,160,60,.9) }
  45%  { opacity:1; box-shadow:0 0 10px 1px rgba(214,160,60,.5) }
  100% { opacity:0; box-shadow:none }
}

/*  YENI SATIR ISARETI

    Soldaki altin cizgiyi ::before ile degil IC GOLGE ile ciziyorum.
    Golge yerlesimi HIC etkilemiyor: ne satiri kaydiriyor, ne bir
    izgara hucresi isgal ediyor, ne de tasip kirpiliyor. Solda zaten
    9 px dolgu var ve o dolgu BUTUN satirlarda duruyor - isaret
    gelip gidince satir yerinden oynamasin diye.                    */
.mini li.yeni{ animation:satirParla 12s ease-out 1 }
@keyframes satirParla{
  0%   { background:rgba(214,160,60,.34); box-shadow:inset 3px 0 0 rgba(214,160,60,1) }
  10%  { background:rgba(214,160,60,.30); box-shadow:inset 3px 0 0 rgba(214,160,60,1) }
  70%  { background:rgba(214,160,60,.10); box-shadow:inset 3px 0 0 rgba(214,160,60,.65) }
  100% { background:transparent;          box-shadow:inset 3px 0 0 rgba(214,160,60,0) }
}

.bosGun{
  margin-top:var(--k2); padding:var(--k3) 0;
  font-size:13px; color:var(--soluk); text-align:center;
  border-top:1px solid #1E3049;
}

@media (prefers-reduced-motion:reduce){
  .parlama, .mini li.yeni{ animation:none }
  .mini li.yeni{ background:rgba(214,160,60,.16) }
}