/* İsbay Randıman — tasarım sistemi "Sakin Endüstriyel" v2
   İlke (ISA-101 / yüksek performanslı HMI; PicConnect · BMSvision · Vorne · Evocon incelemesi):
   - Zemin nötr, parlama yok. Renk SADECE durum ve dikkat için; düğmeler/marka nötr mürekkep.
   - Çalışan makine sessiz (nötr karo). Renk duruşlara ait; sebep kodu (E, M, İB...) her zaman metinle de yazılı.
   - Macenta = sebep bekleyen duruş (Vorne), kırmızı = arıza, amber = hazırlık/bekleme, mavi = planlı, gri = kısa duruş / atkı-çözgü kopuşu,
     taralı = bağlantı yok. Renk hiçbir zaman tek ipucu değil (kod + etiket + desen).
   - Düzen: 12 kolonlu ızgara, aynı satırdaki kartlar eşit yükseklik, tek sayfa genişliği (monitör hariç), 8 px aralık ölçeği.
   Renkler protan/deutan simülasyonunda ayrışıyor; metin renkleri ≥ 4.5:1. */

:root {
  color-scheme: light;
  --zemin: #eceff2; --yuzey: #ffffff; --yuzey-2: #f5f6f8; --yuzey-3: #e8ebef;
  --cizgi: #dce0e5; --cizgi-2: #c3cad2;
  --yazi: #1f2328; --yazi-2: #4a525c; --yazi-3: #5f6873;
  --ana: #1f2328; --ana-uzeri: #ffffff;
  --vurgu: #3a4db4; --vurgu-uzeri: #ffffff; --vurgu-zemin: #e7e9f7;   /* indigo: seçim, odak (durum rengi değil) */
  --marka: #27408b;
  --golge: 0 1px 2px rgba(16, 24, 40, .05);
  --golge-2: 0 14px 36px rgba(16, 24, 40, .16);

  /* durum aileleri: renk (dolgu) · -z karo zemini · -m metin (mürekkep) · -c çizgi · -u dolgu üstü yazı */
  --calisiyor: #399d57; --calisiyor-m: #1a763a; --calisiyor-u: #ffffff;
  --kisa: #5b636c;      --kisa-z: #f1f2f4;      --kisa-m: #48505a;      --kisa-c: #c9ced5;  --kisa-u: #ffffff;
  --sebepsiz: #b82989;  --sebepsiz-z: #f6e6f1;  --sebepsiz-m: #b42586; --sebepsiz-c: #d6a2c6; --sebepsiz-u: #ffffff;
  --ariza: #a42d11;     --ariza-z: #f4e4e0;     --ariza-m: #a12a0d;    --ariza-c: #d9aea2;    --ariza-u: #ffffff;
  --bekleme: #f5ae39;   --bekleme-z: #fbf1e1;   --bekleme-m: #8f6213;  --bekleme-c: #e6c68c;  --bekleme-u: #1f2328;
  --plan: #2474cf;      --plan-z: #e3edf8;      --plan-m: #0e65be;     --plan-c: #a6c4e8;     --plan-u: #ffffff;
  --yok: #9aa3ad;       --yok-z: #eef0f2;       --yok-m: #5f6873;      --yok-c: #b7bec6;      --yok-u: #1f2328;
  --iyi: #1a763a; --orta: #8f6213; --dusuk: #a12a0d;

  --r: 10px;
  --genislik: 1480px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-dar: "IBM Plex Sans Condensed", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --zemin: #111315; --yuzey: #1a1d21; --yuzey-2: #202428; --yuzey-3: #272c31; --cizgi: #2c3238; --cizgi-2: #3d444c;
    --yazi: #e4e7eb; --yazi-2: #aeb5bd; --yazi-3: #8a929b;
    --ana: #e4e7eb; --ana-uzeri: #111315; --vurgu: #9aa8ff; --vurgu-uzeri: #111315; --vurgu-zemin: #252b45; --marka: #4a5fc4;
    --golge: none; --golge-2: 0 18px 44px rgba(0, 0, 0, .55);
    --calisiyor: #1b8864; --calisiyor-m: #47aa84; --calisiyor-u: #ffffff;
    --kisa: #8d959e;      --kisa-z: #202428;      --kisa-m: #c3c9d0;      --kisa-c: #3d444c;  --kisa-u: #111315;
    --sebepsiz: #df4b9d;  --sebepsiz-z: #3d2335;  --sebepsiz-m: #e570ac; --sebepsiz-c: #7a3563; --sebepsiz-u: #111315;
    --ariza: #c2460d;     --ariza-z: #37231b;     --ariza-m: #ec6d3d;    --ariza-c: #7a3a1f;    --ariza-u: #ffffff;
    --bekleme: #e4b750;   --bekleme-z: #3a3426;   --bekleme-m: #e4b750;  --bekleme-c: #7d6936;  --bekleme-u: #111315;
    --plan: #3d8fd6;      --plan-z: #1f3042;      --plan-m: #50a1e9;     --plan-c: #2f5a82;     --plan-u: #111315;
    --yok: #5b636c;       --yok-z: #23272c;       --yok-m: #8a929b;      --yok-c: #444b53;      --yok-u: #e4e7eb;
    --iyi: #47aa84; --orta: #e4b750; --dusuk: #ec6d3d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --zemin: #111315; --yuzey: #1a1d21; --yuzey-2: #202428; --yuzey-3: #272c31; --cizgi: #2c3238; --cizgi-2: #3d444c;
  --yazi: #e4e7eb; --yazi-2: #aeb5bd; --yazi-3: #8a929b;
  --ana: #e4e7eb; --ana-uzeri: #111315; --vurgu: #9aa8ff; --vurgu-uzeri: #111315; --vurgu-zemin: #252b45; --marka: #4a5fc4;
  --golge: none; --golge-2: 0 18px 44px rgba(0, 0, 0, .55);
  --calisiyor: #1b8864; --calisiyor-m: #47aa84; --calisiyor-u: #ffffff;
  --kisa: #8d959e;      --kisa-z: #202428;      --kisa-m: #c3c9d0;      --kisa-c: #3d444c;  --kisa-u: #111315;
  --sebepsiz: #df4b9d;  --sebepsiz-z: #3d2335;  --sebepsiz-m: #e570ac; --sebepsiz-c: #7a3563; --sebepsiz-u: #111315;
  --ariza: #c2460d;     --ariza-z: #37231b;     --ariza-m: #ec6d3d;    --ariza-c: #7a3a1f;    --ariza-u: #ffffff;
  --bekleme: #e4b750;   --bekleme-z: #3a3426;   --bekleme-m: #e4b750;  --bekleme-c: #7d6936;  --bekleme-u: #111315;
  --plan: #3d8fd6;      --plan-z: #1f3042;      --plan-m: #50a1e9;     --plan-c: #2f5a82;     --plan-u: #111315;
  --yok: #5b636c;       --yok-z: #23272c;       --yok-m: #8a929b;      --yok-c: #444b53;      --yok-u: #e4e7eb;
  --iyi: #47aa84; --orta: #e4b750; --dusuk: #ec6d3d;
}

/* durum sınıfı -> bileşen değişkenleri: --k dolgu · --kz zemin · --km metin · --kc çizgi · --ku dolgu üstü yazı */
.k-calisiyor { --k: var(--calisiyor); --kz: var(--yuzey);       --km: var(--calisiyor-m); --kc: var(--cizgi);      --ku: var(--calisiyor-u); }
.k-kisa, .k-kopus { --k: var(--kisa); --kz: var(--kisa-z);      --km: var(--kisa-m);      --kc: var(--kisa-c);     --ku: var(--kisa-u); }
.k-sebepsiz  { --k: var(--sebepsiz);  --kz: var(--sebepsiz-z);  --km: var(--sebepsiz-m);  --kc: var(--sebepsiz-c); --ku: var(--sebepsiz-u); }
.k-ariza     { --k: var(--ariza);     --kz: var(--ariza-z);     --km: var(--ariza-m);     --kc: var(--ariza-c);    --ku: var(--ariza-u); }
.k-bekleme   { --k: var(--bekleme);   --kz: var(--bekleme-z);   --km: var(--bekleme-m);   --kc: var(--bekleme-c);  --ku: var(--bekleme-u); }
.k-plan      { --k: var(--plan);      --kz: var(--plan-z);      --km: var(--plan-m);      --kc: var(--plan-c);     --ku: var(--plan-u); }
.k-yok       { --k: var(--yok);       --kz: var(--yok-z);       --km: var(--yok-m);       --kc: var(--yok-c);      --ku: var(--yok-u); }

/* ---------- temel ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 400 14px/1.45 var(--font); font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--vurgu); }
code { font: 500 12.5px/1.2 var(--mono); background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: 5px; padding: 2px 5px; }
abbr { text-decoration: none; cursor: help; }
.ik { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
[hidden] { display: none !important; }
.soluk { color: var(--yazi-3); }
.sayi { text-align: right; font-variant-numeric: tabular-nums; }
.iyi { color: var(--iyi); } .orta { color: var(--orta); } .dusuk { color: var(--dusuk); }
.bos { color: var(--yazi-3); padding: 32px 8px; text-align: center; }
.bos.kucuk { padding: 10px 0; text-align: left; }
.bos.hata { color: var(--dusuk); }
.not { font-size: 12.5px; color: var(--yazi-3); }
.govde { display: flex; flex-direction: column; gap: 16px; }
.yukleniyor { display: grid; place-items: center; min-height: 180px; color: var(--yazi-3); }

/* ---------- kabuk ---------- */
.kabuk { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.yan { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; background: var(--yuzey); border-right: 1px solid var(--cizgi); overflow-y: auto; }
.yan-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 16px; }
.marka { display: flex; align-items: center; gap: 10px; color: var(--yazi); text-decoration: none; }
.marka b { display: block; font: 700 18px/1.05 var(--font-dar); letter-spacing: .01em; }
.marka span { display: block; font-size: 12px; color: var(--yazi-3); }
.logo { width: 32px; height: 32px; flex: none; }
.logo rect { fill: var(--marka); }
.logo path { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav-btn { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--yazi-2); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.nav a:hover, .nav-btn:hover { background: var(--yuzey-2); color: var(--yazi); }
.nav a.on, .yan-alt a.on { background: var(--yuzey-3); color: var(--yazi); }
.nav a.on .ik { color: var(--vurgu); }
.rozet { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--vurgu); color: var(--vurgu-uzeri); font: 600 11.5px/20px var(--font); font-style: normal; text-align: center; }
.yan-alt { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.ben > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ben b { font-weight: 600; color: var(--yazi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ben small { font-size: 12px; color: var(--yazi-3); }
.menu-btn { display: none !important; }
.ana { min-width: 0; display: flex; flex-direction: column; }
/* üst başlık: kaydırırken sabit; sayfa ile aynı genişlikte hizalı */
.ust { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--zemin) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; width: 100%; max-width: var(--genislik); margin: 0 auto; padding: 14px 28px; }
.ust h1 { font-size: 20px; letter-spacing: -.01em; line-height: 1.2; }
.ust-alt { margin-top: 2px; color: var(--yazi-3); font-size: 13px; }
.ust-sag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.icerik { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: var(--genislik); margin: 0 auto; padding: 20px 28px 48px; }
[data-sayfa="monitor"] { --genislik: 2400px; }

/* dar ekran + usta: üst menü */
.ust-menu .kabuk { grid-template-columns: minmax(0, 1fr); }
.ust-menu .yan { z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--cizgi); overflow: visible; }
.ust-menu .yan-bas { flex: 1; padding: 0; }
.ust-menu .menu-btn { display: inline-grid !important; }
.ust-menu .nav, .ust-menu .yan-alt { display: none; width: 100%; }
.ust-menu .yan.acik .nav, .ust-menu .yan.acik .yan-alt { display: flex; }
.ust-menu .yan-alt { margin-top: 6px; }
.ust-menu .ust { position: static; }
.ust-menu .ust-ic { padding: 12px 16px; }
.ust-menu .icerik { padding: 14px 16px 32px; }

/* ---------- 12 kolonlu ızgara: aynı satırdaki kartlar eşit yükseklik ---------- */
.izgara-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.s-3 { grid-column: span 3; } .s-4 { grid-column: span 4; } .s-5 { grid-column: span 5; } .s-6 { grid-column: span 6; }
.s-7 { grid-column: span 7; } .s-8 { grid-column: span 8; } .s-12 { grid-column: 1 / -1; }
@media (max-width: 1100px) { .izgara-12 > * { grid-column: 1 / -1; } }

/* ---------- düğmeler ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; }
.btn-ana { background: var(--ana); color: var(--ana-uzeri); }
.btn-ana:hover { opacity: .88; }
.btn-ikincil, .btn-kucuk { background: var(--yuzey); border-color: var(--cizgi-2); color: var(--yazi); }
.btn-ikincil:hover, .btn-kucuk:hover { background: var(--yuzey-2); }
.btn-tehlike { background: var(--ariza); color: var(--ariza-u); }
.btn-tehlike-cizgi { margin-right: auto; background: none; border-color: var(--ariza-c); color: var(--ariza-m); }
.btn-kucuk { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn-kucuk .ik { width: 16px; height: 16px; }
.btn.genis { width: 100%; }
.btn.buyuk { min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: default; }
.ikon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--yazi-2); cursor: pointer; }
.ikon-btn:hover:not(:disabled) { background: var(--yuzey-2); color: var(--yazi); }
.ikon-btn:disabled { opacity: .35; cursor: default; }
.ikon-btn.cerceve { border-color: var(--cizgi-2); background: var(--yuzey); }

/* ---------- kart ---------- */
.kart { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge); }
.kart-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kart-bas p { margin-top: 3px; font-size: 13px; max-width: 72ch; }
.kart-baslik { font-size: 15px; }
.kart-baslik small { margin-left: 6px; font-size: 12.5px; font-weight: 400; color: var(--yazi-3); }
.kart-govde { flex: 1; min-height: 0; }
.kart-alt { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.kart.sifir { padding: 0; overflow: hidden; }
.kart.sifir > .kart-bas { margin: 0; padding: 16px 20px 12px; }

/* ---------- özet kartları (KPI) ---------- */
.ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge); }
.kpi-e { font-size: 12.5px; font-weight: 500; color: var(--yazi-2); }
.kpi-d { font: 600 30px/1.1 var(--font-dar); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-d small { font-size: 16px; font-weight: 500; color: var(--yazi-3); }
.kpi-a { margin-top: auto; font-size: 12.5px; color: var(--yazi-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sebepsiz { background: var(--sebepsiz-z); border-color: var(--sebepsiz-c); }
.kpi-sebepsiz .kpi-d, .kpi-sebepsiz .kpi-e, .kpi-sebepsiz .kpi-a { color: var(--sebepsiz-m); }
.kpi-yok .kpi-d { color: var(--yok-m); }
.hedef-cubuk { position: relative; height: 6px; margin: 6px 0 2px; border-radius: 3px; background: var(--yuzey-3); }
.hedef-cubuk i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--yazi-3); }
.hedef-cubuk.iyi i { background: var(--calisiyor); } .hedef-cubuk.dusuk i { background: var(--dusuk); }
.hedef-cubuk b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--yazi); }

/* ---------- monitör özeti: salon durumu çubuğu + vardiya + bugün ---------- */
.mon-ozet { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1100px) { .mon-ozet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mon-ozet > :first-child { grid-column: 1 / -1; } }
.salon { gap: 10px; }
.salon-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.salon-ust .kpi-d small { margin-left: 4px; }
.durum-cubuk { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--yuzey-3); }
.durum-cubuk i { min-width: 3px; background: var(--k); }
.durum-cubuk i.k-yok { background: repeating-linear-gradient(135deg, var(--yok-z) 0 3px, var(--yok) 3px 5px); }
.durum-lejant { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--yazi-2); }
.durum-lejant li { display: inline-flex; align-items: center; gap: 6px; }
.durum-lejant b { color: var(--yazi); font-weight: 600; }
.durum-lejant li.sifir { opacity: .55; }
.durum-lejant small { color: var(--yazi-3); font-size: 11.5px; }

/* ---------- araç çubuğu, çipler, segment, lejant ---------- */
.arac { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.arac-sag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cipler { display: flex; gap: 6px; flex-wrap: wrap; }
.cip { min-height: 32px; padding: 0 13px; border: 1px solid var(--cizgi-2); border-radius: 16px; background: var(--yuzey); color: var(--yazi-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.cip:hover { color: var(--yazi); }
.cip.on { background: var(--ana); border-color: var(--ana); color: var(--ana-uzeri); }
.cip small { margin-left: 4px; opacity: .75; }
.segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: 9px; }
.segment button, .segment label span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border: 0; border-radius: 6px; background: none; color: var(--yazi-2); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.segment button:hover, .segment label span:hover { color: var(--yazi); }
.segment button.on, .segment input:checked + span { background: var(--yuzey); color: var(--yazi); box-shadow: 0 0 0 1px var(--cizgi-2), var(--golge); }
.segment button:disabled { opacity: .4; cursor: default; }
.segment label { position: relative; display: inline-flex; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 1px; }
.segment .simdi { width: 6px; height: 6px; border-radius: 50%; background: var(--calisiyor); }
.lejant { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--yazi-2); }
.lejant.kucuk { gap: 4px 12px; font-size: 12px; }
.lejant li { display: inline-flex; align-items: center; gap: 6px; }
.lejant small { color: var(--yazi-3); font-size: 11.5px; }
.nokta { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.k-calisiyor.nokta { background: color-mix(in srgb, var(--calisiyor) 55%, var(--yuzey)); }
.k-yok.nokta { background: repeating-linear-gradient(135deg, var(--yok-z) 0 2px, var(--yok) 2px 3px); }
.canli { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--yazi-2); white-space: nowrap; }
.canli i { width: 8px; height: 8px; border-radius: 50%; background: var(--calisiyor); animation: nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz { 50% { opacity: .3; } }
@keyframes dikkat { to { opacity: .35; } }
.gecikme { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--bekleme-c); border-radius: var(--r); background: var(--bekleme-z); color: var(--bekleme-m); font-weight: 600; }

/* ---------- monitör: grup şeritleri + makine karosu ---------- */
.hatlar { display: flex; flex-direction: column; gap: 12px; }
/* şerit: solda grup başlığı sütunu, sağda karolar (fabrika krokisi gibi; dikeyde az yer) */
.hat { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 10px 10px 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge); }
.hat.tek { display: block; padding: 10px; }
.hat-bas { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 3px; }
.hat-bas h2 { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hat-bas span { font-size: 12.5px; color: var(--yazi-3); }
.hat-bas .hat-uyari { color: var(--sebepsiz-m); font-weight: 600; }
.hat-bas .hat-eff { color: var(--yazi-2); font-weight: 600; }
@media (max-width: 700px) { .hat { grid-template-columns: minmax(0, 1fr); gap: 8px; } .hat-bas { flex-direction: row; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; } }
.hat-bas .hat-eff.dusuk { color: var(--dusuk); }
.salon-ust > div { display: flex; flex-direction: column; gap: 2px; }
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.duz .izgara { padding: 0; }
.karo { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; min-height: 74px; padding: 9px 11px 9px 14px;
        border: 1px solid var(--kc); border-radius: 9px; background: var(--kz); color: var(--yazi); text-align: left; cursor: pointer; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.karo::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--k); }
.karo.k-calisiyor::before { background: transparent; }
.karo:hover { box-shadow: 0 0 0 1px var(--kc), var(--golge); }
.karo:not(.k-calisiyor):hover { border-color: var(--k); box-shadow: 0 0 0 1px var(--k); }
.karo.k-sebepsiz { border-width: 2px; padding: 8px 10px 8px 13px; }
.karo-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.karo-no { font: 700 22px/1 var(--font-dar); }
.karo-eff { font: 600 15px/1 var(--font-dar); color: var(--yazi-2); white-space: nowrap; }
.karo-eff.dusuk { color: var(--dusuk); }
.karo-durum { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 20px; color: var(--yazi-2); white-space: nowrap; }
.karo-durum > span { overflow: hidden; text-overflow: ellipsis; }
.karo-durum em { margin-left: auto; padding-left: 4px; font-style: normal; font-weight: 600; }
.karo:not(.k-calisiyor) .karo-durum { color: var(--km); font-weight: 600; }
.karo-kod { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 19px; padding: 0 5px; border-radius: 5px; background: var(--k); color: var(--ku); font: 700 12px/1 var(--font-dar); }
.karo-kod.dikkat { animation: dikkat 1s ease-in-out infinite alternate; }
.oynat { flex: none; width: 0; height: 0; border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent var(--calisiyor); }
.karo.k-yok, .karo.kopuk { border-style: dashed; }
.karo.k-yok { background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--yazi) 6%, transparent) 7px 14px); }
.karo.k-yok .karo-eff { color: var(--yazi-3); }

/* ---------- dönem seçici (raporlar + duruş) ---------- */
.donem { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge); }
.donem-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.gezgin { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gezgin-ad { display: flex; flex-direction: column; min-width: 0; padding: 0 6px; }
.gezgin-ad b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gezgin-ad small { font-size: 12px; color: var(--yazi-3); }
.donem-alanlar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.alan > span, .alan > legend { padding: 0; font-size: 12.5px; font-weight: 500; color: var(--yazi-2); }
.alan small { font-weight: 400; color: var(--yazi-3); }
.alan.dar { max-width: 320px; }
.alan.yatay { flex-direction: row; align-items: center; gap: 8px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 38px; padding: 7px 10px; border: 1px solid var(--cizgi-2); border-radius: 8px; background: var(--yuzey); color: var(--yazi); }
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vurgu); outline-offset: -1px; border-color: var(--vurgu); }
input[readonly] { background: var(--yuzey-2); color: var(--yazi-2); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ana); }

/* ---------- sekme, tablo ---------- */
.sekmeler { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--cizgi); }
.sekmeler > * { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--yazi-2); font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; }
.sekmeler > *:hover { color: var(--yazi); }
.sekmeler > .on { color: var(--yazi); border-bottom-color: var(--ana); }
.tablo-kap { overflow: auto; border: 1px solid var(--cizgi); border-radius: 9px; }
.tablo-kap.yuksek { max-height: 70vh; }
.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablo th { position: sticky; top: 0; z-index: 1; padding: 0; background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); color: var(--yazi-2); font-weight: 600; text-align: left; white-space: nowrap; }
.tablo th button { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 4px; width: 100%; padding: 9px 10px; cursor: pointer; }
.tablo th.sayi button { justify-content: flex-end; }
.tablo th button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.tablo th small { font-weight: 400; color: var(--yazi-3); }
.tablo th i { font-size: 9px; font-style: normal; color: var(--vurgu); }
.tablo td { padding: 8px 10px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo td:first-child, .tablo th:first-child { position: sticky; left: 0; z-index: 1; }
.tablo td:first-child { background: var(--yuzey); }
.tablo th:first-child { z-index: 2; }
.tablo tbody tr:hover td { background: var(--yuzey-2); }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tfoot td { position: sticky; bottom: 0; background: var(--yuzey-2); border-top: 1px solid var(--cizgi-2); border-bottom: 0; font-weight: 600; }
.tablo.sade td, .tablo.sade th { padding: 7px 4px; }
.tablo.sade td:first-child { position: static; color: var(--yazi-2); }
.tablo.sade tbody tr:hover td { background: none; }
/* randıman hücresi: renk sadece sınır aşımında (alt sınırın altı kırmızı); hedef üstü yeşil yazı, arası nötr */
.eff-pil { display: inline-block; min-width: 46px; padding: 2px 7px; border-radius: 6px; font-weight: 600; text-align: center; }
.eff-pil.iyi { color: var(--iyi); }
.eff-pil.orta { color: var(--yazi); }
.eff-pil.dusuk { color: var(--dusuk); background: color-mix(in srgb, var(--dusuk) 12%, transparent); }
.etiket { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid var(--kc, var(--cizgi)); border-radius: 5px; background: var(--kz, var(--yuzey-2)); color: var(--km, var(--yazi-2)); font-size: 12px; font-weight: 600; white-space: nowrap; }
.satir-islem { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* ---------- haftalık / tarihli rapor (vendor raporunun kolonları: gün/vardiya × makine %, durma, çözgü, atkı) ---------- */
.grup-rapor + .grup-rapor { margin-top: 22px; }
.grup-rapor h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 14.5px; }
.grup-rapor h3 small { font-size: 12.5px; font-weight: 400; color: var(--yazi-3); }
.vtablo { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.vtablo th, .vtablo td { padding: 6px 9px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); white-space: nowrap; vertical-align: top; }
.vtablo thead th { position: sticky; z-index: 2; background: var(--yuzey-2); color: var(--yazi-2); font-weight: 600; text-align: center; }
.vtablo thead tr:first-child th { top: 0; height: 32px; }
.vtablo thead tr:nth-child(2) th { top: 32px; font-size: 11.5px; font-weight: 500; }
.vtablo thead tr:first-child th.m { color: var(--yazi); font: 700 14px var(--font-dar); border-bottom-color: var(--cizgi-2); }
.vtablo th:first-child, .vtablo td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; }
.vtablo thead th:first-child { z-index: 3; }
.vtablo td { background: var(--yuzey); text-align: right; }
.vtablo td:first-child { color: var(--yazi-2); font-variant-numeric: tabular-nums; }
.vtablo td:first-child b { color: var(--yazi); font-weight: 600; }
.vtablo tbody tr.gun-ilk td { border-top: 1px solid var(--cizgi-2); }
.vtablo tbody tr.zebra td { background: color-mix(in srgb, var(--yuzey-2) 70%, var(--yuzey)); }
.vtablo td.r { font-weight: 600; }
.vtablo td.r.d { color: var(--dusuk); font-weight: 700; }
.vtablo td.dur { min-width: 76px; max-width: 132px; white-space: normal; text-align: left; line-height: 1.3; }
.vtablo td.dur b { display: block; font-weight: 600; }
.vtablo td.dur small { display: block; color: var(--yazi-3); font-size: 11px; }
.vtablo td.dur small span { white-space: nowrap; }
.vtablo td.sifir { color: var(--yazi-3); }
.vtablo td.ort { background: var(--yuzey-2); font-weight: 700; }
.vtablo tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--yuzey-3); border-top: 2px solid var(--cizgi-2); font-weight: 600; }
.vtablo tfoot td:first-child { z-index: 2; }
.aciklama { margin: -4px 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--yazi-2); }
.aciklama b { color: var(--yazi); }

/* ---------- grafikler ---------- */
.saatlik { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 132px; margin-bottom: 20px; border-bottom: 1px solid var(--cizgi-2); }
.sut { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 3px 3px 0 0; background: var(--yuzey-2); }
.sut i { display: block; flex: none; background: var(--k); }
.sut i.k-calisiyor { background: color-mix(in srgb, var(--calisiyor) 50%, var(--yuzey)); }
.sut span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--yazi-3); }
.sut:not(:nth-child(3n+1)) span { visibility: hidden; }
.sut.gelecek { background: transparent; outline: 1px dashed var(--cizgi); outline-offset: -1px; }
.trend { padding: 24px 4px 30px; }
.trend-alan { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 240px; border-bottom: 1px solid var(--cizgi-2); }
.trend-sut { position: relative; flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.trend-sut i { position: relative; width: 100%; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--yazi-3) 45%, transparent); }
.trend-sut.iyi i { background: color-mix(in srgb, var(--calisiyor) 70%, transparent); }
.trend-sut.dusuk i { background: color-mix(in srgb, var(--dusuk) 45%, transparent); }
.trend-sut em { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; font-style: normal; color: var(--yazi-2); }
.trend-sut.dusuk em { color: var(--dusuk); font-weight: 600; }
.trend-sut span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--yazi-3); white-space: nowrap; }
.trend-cizgi { position: absolute; left: 0; right: 0; z-index: 1; border-top: 1.5px dashed var(--yazi-2); pointer-events: none; }
.trend-cizgi span { position: absolute; right: 0; top: -20px; padding: 0 5px; border-radius: 4px; background: var(--yuzey); color: var(--yazi-2); font-size: 11.5px; font-weight: 600; }
.trend-cizgi.ort { border-top: 1.5px dotted var(--vurgu); }
.trend-cizgi.ort span { top: 3px; color: var(--vurgu); }
.pareto { display: flex; flex-direction: column; gap: 9px; }
.pareto-satir { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 84px 44px 58px; align-items: center; gap: 10px; font-size: 13px; }
.pareto-ad { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pareto-cubuk { height: 14px; border-radius: 4px; background: var(--yuzey-2); overflow: hidden; }
.pareto-cubuk i { display: block; height: 100%; border-radius: 4px; background: var(--k); opacity: .85; }
.yigin { display: flex; flex-direction: column; gap: 8px; }
.yigin-satir { display: grid; grid-template-columns: 96px 1fr 84px; align-items: center; gap: 10px; font-size: 13px; }
.yigin-ad { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.yigin-cubuk { display: flex; gap: 1px; width: var(--w); min-width: 3px; height: 14px; border-radius: 4px; overflow: hidden; }
.yigin-cubuk i, .yigin-tek i { min-width: 2px; background: var(--k); }
.yigin-tek { display: flex; gap: 2px; height: 22px; margin-bottom: 16px; border-radius: 6px; overflow: hidden; }
.kaydir { max-height: 380px; overflow-y: auto; padding-right: 4px; }
.kat-liste { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kat-liste li { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 9px; font-size: 13px; }
/* ısı haritası: haftanın günü × saat */
.isi { display: grid; grid-template-columns: 40px repeat(24, minmax(0, 1fr)); gap: 3px; }
.isi-gun { align-self: center; font-size: 12px; color: var(--yazi-3); }
.isi-hucre { height: 28px; border-radius: 4px; background: color-mix(in srgb, var(--yazi) calc(var(--y) * 72%), var(--yuzey-2)); }
.isi-saat { font-size: 10.5px; color: var(--yazi-3); text-align: center; }
.isi-saat:nth-child(even) { visibility: hidden; }
.isi-lejant { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--yazi-3); }
.isi-lejant i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--yuzey-2), color-mix(in srgb, var(--yazi) 72%, var(--yuzey-2))); }

/* ---------- çekmece (makine detayı) + pencereler ---------- */
dialog { color: var(--yazi); }
dialog::backdrop { background: rgba(9, 13, 19, .42); }
.cekmece { position: fixed; inset: 0 0 0 auto; width: min(520px, 100vw); height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--cizgi); background: var(--yuzey); box-shadow: var(--golge-2); overflow-y: auto; }
.cek-ic { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 30px; }
.cek-ic h3 { margin-top: 6px; font-size: 13px; color: var(--yazi-2); }
.cek-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cek-bas h2 { font: 700 32px/1.05 var(--font-dar); }
.cek-bas h2 small { font: 500 14px var(--font); color: var(--yazi-3); }
.ust-etiket { font-size: 12px; color: var(--yazi-3); }
.durum-bant { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 14px; border: 1px solid var(--kc); border-left: 4px solid var(--k); border-radius: 9px; background: var(--kz); font-size: 13px; }
.durum-bant.k-calisiyor { border-left-color: var(--calisiyor); }
.durum-bant b { color: var(--km); font-size: 15px; }
.gun-gezgin { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey-2); }
.gun-gezgin b { font-weight: 600; }
.kpi-satir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpi-satir .kpi { padding: 10px 12px; box-shadow: none; }
.kpi-satir .kpi-d { font-size: 22px; }
.cihaz-bilgi { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--yazi-3); }
.cihaz-bilgi b { color: var(--yazi-2); font-weight: 600; }
.sebep-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sebep-izgara.kompakt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sebep-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 64px; padding: 9px 11px; border: 1px solid var(--kc); border-radius: 9px; background: var(--kz); color: var(--yazi); text-align: left; cursor: pointer; }
.sebep-btn:hover { border-color: var(--k); box-shadow: 0 0 0 1px var(--k); }
.sebep-btn b { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--k); color: var(--ku); font: 700 15px/1 var(--font-dar); }
.sebep-btn b .ik { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.sebep-btn span { font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.sebep-btn.k-calisiyor { background: var(--yuzey); border-color: var(--calisiyor); }
.dlg { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--yuzey); box-shadow: var(--golge-2); overflow-y: auto; }
.dlg.genis { width: min(800px, calc(100vw - 24px)); }
.dlg.kucuk { width: min(420px, calc(100vw - 24px)); }
.dlg.durum-dlg { width: min(760px, calc(100vw - 24px)); }
.durum-dlg .sebep-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.durum-dlg .sebep-btn { min-height: 92px; padding: 12px 14px; }
.durum-dlg .sebep-btn b { min-width: 40px; height: 32px; font-size: 20px; }
.durum-dlg .sebep-btn b .ik { width: 18px; height: 18px; }
.durum-dlg .sebep-btn span { font-size: 15px; }
.dlg-ic { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.dlg-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dlg-bas h2 { font-size: 17px; }
.dlg-metin { font-size: 15px; }
.dlg-alt { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form.dar { max-width: 460px; }
.alan-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.form-hata { color: var(--dusuk); font-size: 13px; }
.form-hata:empty { display: none; }
.secim-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.secim-izgara.sik { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.secim { position: relative; display: flex; }
.secim input { position: absolute; opacity: 0; pointer-events: none; }
.secim span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 4px 8px; border: 1px solid var(--cizgi-2); border-radius: 7px; background: var(--yuzey); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; }
.secim input:checked + span { background: var(--ana); border-color: var(--ana); color: var(--ana-uzeri); }
.secim input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 1px; }
.secim.baska span { border-style: dashed; color: var(--yazi-3); }
.secim-arac { display: flex; gap: 6px; margin-bottom: 8px; }
.komut { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--cizgi); border-radius: 9px; background: var(--yuzey-2); }
.kurulum { margin: 0; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 9px; background: var(--yuzey-2); font: 500 12.5px/1.6 var(--mono); white-space: pre-wrap; }
.kart.ic { box-shadow: none; }
.fw-surum { font: 700 34px/1.1 var(--font-dar); margin: 4px 0 6px; }
.komut code { flex: 1; border: 0; background: none; font-size: 14px; white-space: normal; word-break: break-all; }

/* ---------- mesaj akışı ---------- */
.akis { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.akis-oge { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--cizgi); }
.akis-oge:last-child { border-bottom: 0; }
.akis-ikon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--yuzey-2); color: var(--yazi-2); }
.akis-oge.mesaj .akis-ikon { background: var(--vurgu-zemin); color: var(--vurgu); }
.akis-govde p { margin-bottom: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.akis-oge.yeni .akis-govde p { font-weight: 600; }
.akis-oge.yeni .akis-meta::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--vurgu); vertical-align: 1px; }
.akis-meta { font-size: 12px; color: var(--yazi-3); }
.akis-islem { display: flex; align-items: center; gap: 4px; }

/* ---------- yönetim ---------- */
.grup-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.grup-kart { padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey); }
.grup-kart header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.grup-kart h3 { font-size: 15px; }
.grup-kart .satir-islem { margin-left: auto; }
.no-cipler { display: flex; flex-wrap: wrap; gap: 5px; }
.no-cipler span { min-width: 30px; padding: 3px 7px; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuzey-2); font: 600 13px/1.3 var(--font-dar); text-align: center; }
.vardiya-cizelge { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; margin: 4px 0 26px; }
.vc-saat { position: relative; height: 30px; border-radius: 4px; background: var(--yuzey-2); outline: 1px dashed var(--cizgi-2); outline-offset: -1px; }
.vc-saat.r0, .vc-saat.r1, .vc-saat.r2, .vc-saat.r3 { outline: 0; }
.vc-saat.r0 { background: color-mix(in srgb, var(--vurgu) 20%, var(--yuzey)); }
.vc-saat.r1 { background: color-mix(in srgb, var(--vurgu) 40%, var(--yuzey)); }
.vc-saat.r2 { background: color-mix(in srgb, var(--vurgu) 60%, var(--yuzey)); }
.vc-saat.r3 { background: color-mix(in srgb, var(--vurgu) 80%, var(--yuzey)); }
.vc-saat.cakisma { outline: 2px solid var(--dusuk); outline-offset: -2px; }
.vc-saat span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--yazi-3); }
.vc-saat:nth-child(odd) span { visibility: hidden; }
.uyari-not { display: flex; align-items: center; gap: 8px; margin: -8px 0 12px; color: var(--orta); font-size: 13px; font-weight: 500; }
.sinyal { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.sinyal i { width: 3px; border-radius: 1px; background: var(--cizgi-2); }
.sinyal i:nth-child(1) { height: 4px; } .sinyal i:nth-child(2) { height: 7px; } .sinyal i:nth-child(3) { height: 10px; } .sinyal i:nth-child(4) { height: 12px; }
.sinyal[data-g="1"] i:nth-child(-n+1), .sinyal[data-g="2"] i:nth-child(-n+2), .sinyal[data-g="3"] i:nth-child(-n+3), .sinyal[data-g="4"] i { background: var(--yazi-2); }
.sinyal[data-g="1"] i:nth-child(1) { background: var(--dusuk); }

/* ---------- usta paneli ---------- */
.kuyruk { display: flex; flex-direction: column; gap: 8px; }
.kuyruk h2 { font-size: 14px; color: var(--sebepsiz-m); }
.kuyruk h2 small { font-weight: 400; color: var(--yazi-3); margin-left: 6px; }
.kuyruk-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.kuyruk-oge { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; border: 2px solid var(--kc); border-radius: 10px; background: var(--kz); color: var(--yazi); text-align: left; cursor: pointer; }
.kuyruk-oge:hover { border-color: var(--k); }
.kuyruk-oge b { font: 700 26px/1 var(--font-dar); min-width: 36px; }
.kuyruk-oge span { flex: 1; color: var(--km); font-weight: 600; }
.kuyruk-oge em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--yazi-2); }
.kuyruk-oge .dikkat { animation: dikkat 1s ease-in-out infinite alternate; }
.usta-izgara { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; padding-bottom: 96px; }
.usta-karo { min-height: 118px; padding: 12px 14px 12px 16px; }
.usta-karo .karo-no { font-size: 32px; }
.usta-durum { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--km); }
.usta-karo.k-calisiyor .usta-durum { color: var(--yazi-2); font-weight: 500; }
.karo-alt { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--yazi-2); }
.secim-kutu { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--cizgi-2); border-radius: 8px; background: var(--yuzey); color: var(--vurgu-uzeri); }
.secim-kutu .ik { width: 18px; height: 18px; stroke-width: 2.6; }
.usta-karo.secili { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu); }
.usta-karo.secili .secim-kutu { border-color: var(--vurgu); background: var(--vurgu); }
.secim-cubugu { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px 12px 18px; border: 1px solid var(--cizgi-2); border-radius: 12px; background: var(--yuzey); box-shadow: var(--golge-2); }
.zil-btn .rozet { margin-left: 2px; }

/* ---------- giriş ---------- */
.giris { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); min-height: 100vh; }
.giris-gorsel { position: relative; background: var(--yuzey-3) url("/giris.jpg") center / cover no-repeat; }
.giris-gorsel p { position: absolute; left: 32px; bottom: 28px; color: #fff; font-size: 14px; font-weight: 500; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.giris-form { display: grid; place-items: center; padding: 24px; background: var(--yuzey); }
.giris-kart { display: flex; flex-direction: column; gap: 16px; width: min(360px, 100%); }
.giris-kart h1 { font-size: 22px; margin-top: 10px; }
.giris-kart .soluk { margin-top: -10px; }
.giris-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.giris-satir label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.link-btn { padding: 0; border: 0; background: none; color: var(--vurgu); font-size: 13.5px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.unuttum-not { margin-top: -6px; padding: 10px 12px; border-radius: 8px; background: var(--yuzey-2); color: var(--yazi-2); font-size: 13px; }
.demo-giris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--cizgi-2); font-size: 13px; }
.demo-giris span { width: 100%; }
.marka.buyuk .logo { width: 44px; height: 44px; }
.marka.buyuk b { font-size: 24px; }
@media (max-width: 860px) { .giris { grid-template-columns: minmax(0, 1fr); } .giris-gorsel { display: none; } }

/* ---------- bildirim (popover: pencerelerin üstünde) ---------- */
.tostlar { inset: auto 16px 16px auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.tostlar:popover-open { display: flex; flex-direction: column; gap: 8px; }
.tost { display: flex; align-items: center; gap: 14px; max-width: 420px; padding: 11px 12px 11px 15px; border-radius: 9px; background: var(--ana); color: var(--ana-uzeri); box-shadow: var(--golge-2); font-weight: 500; }
.tost.hata { background: var(--ariza); color: var(--ariza-u); }
.tost button { margin-left: auto; padding: 5px 10px; border: 1px solid currentColor; border-radius: 6px; background: none; color: inherit; font-weight: 600; cursor: pointer; }

/* ---------- TV (salon ekranı): 5 m'den okunur — büyük no + durum/süre, özet üst bantta ---------- */
.tv-bas { display: none; }
.tv .kabuk { grid-template-columns: minmax(0, 1fr); }
.tv .yan, .tv .ust, .tv .mon-ozet, .tv #mon-arac { display: none; }
/* 8 sütun × 6 satır tek ekrana sığar (araştırma: 5 m'de no ~72 px, durum ~50 px) */
.tv .icerik { max-width: none; gap: 1vh; padding: 1.2vh 1.2vw; }
.tv .tv-bas { display: flex; align-items: center; gap: 2.4vw; padding-bottom: 1vh; border-bottom: 1px solid var(--cizgi); }
.tv .tv-bas .marka b { font-size: 3vh; }
.tv .tv-bas .marka span { font-size: 1.6vh; }
.tv .tv-bas .logo { width: 4.2vh; height: 4.2vh; }
.tv-bilgi { display: flex; align-items: baseline; gap: 2.6vw; flex: 1; font-size: 1.8vh; color: var(--yazi-2); }
.tv-bilgi b { display: block; font: 700 3.8vh/1.05 var(--font-dar); color: var(--yazi); }
.tv-bilgi .alarm b { color: var(--sebepsiz-m); }
.tv-saat { margin-left: auto; text-align: right; }
.tv-saat b { font-size: 4.6vh; }
.tv .hatlar { gap: 0; }
.tv .hat { padding: 0; border: 0; background: none; box-shadow: none; }
.tv .hat-bas { display: none; }
.tv .hatlar { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1vh; }
.tv .hat, .tv .hat .izgara { display: contents; }
.tv .karo { min-height: 0; gap: .4vh; padding: 1vh 1vw 1vh 1.3vw; }
.tv .karo.k-sebepsiz { padding: calc(1vh - 1px) calc(1vw - 1px) calc(1vh - 1px) calc(1.3vw - 1px); }
.tv .karo-no { font-size: 5.8vh; }
.tv .karo-eff { display: none; }
.tv .karo-durum { font-size: 2.6vh; line-height: 1.25; }
.tv .karo-kod { height: 3.2vh; min-width: 3.4vh; font-size: 2.4vh; border-radius: .6vh; }
.tv .karo:not(.k-calisiyor) .karo-durum > span { display: none; }
.tv .karo-durum em { margin-left: 0; padding-left: 0; }
.tv .oynat { border-width: 1.1vh 0 1.1vh 1.8vh; }

/* ---------- küçük ekran ---------- */
@media (max-width: 600px) {
  .ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mon-ozet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-d { font-size: 23px; }
  .cipler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .cip { flex: none; }
  [data-sayfa="monitor"] [data-act="tv"] { display: none; }
  .izgara { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
  .hat { padding: 10px; }
  .karo { min-height: 64px; padding: 7px 8px 7px 11px; gap: 4px; }
  .karo.k-sebepsiz { padding: 6px 7px 6px 10px; }
  .karo-no { font-size: 19px; }
  .karo-durum > span { display: none; }
  .usta-izgara { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sebep-izgara.kompakt, .durum-dlg .sebep-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pareto-satir { grid-template-columns: minmax(110px, 1fr) 1.2fr 70px 38px; }
  .pareto-satir > :last-child { display: none; }
  .kart { padding: 14px; }
  .donem { padding: 10px; }
  .gezgin-ad b { font-size: 14.5px; }
  .ust h1 { font-size: 18px; }
  .isi { grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .canli i, .karo-kod.dikkat, .kuyruk-oge .dikkat { animation: none; }
  * { transition: none !important; }
}

/* ---------- yazdırma (A4 yatay, her zaman açık tema). Asıl PDF: "PDF indir" (pdfmake) ---------- */
.baski-bas { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root, :root[data-theme], :root:not([data-theme="light"]) {
    color-scheme: light; --zemin: #fff; --yuzey: #fff; --yuzey-2: #f3f4f6; --yuzey-3: #e5e7eb; --cizgi: #cfd4da; --cizgi-2: #9aa3ad;
    --yazi: #000; --yazi-2: #333; --yazi-3: #555; --golge: none; --vurgu: #3a4db4;
    --iyi: #1a763a; --orta: #8f6213; --dusuk: #c00000;
    --calisiyor: #399d57; --sebepsiz: #b82989; --ariza: #a42d11; --bekleme: #f5ae39; --plan: #2474cf; --yok: #9aa3ad; --kisa: #5b636c;
    --sebepsiz-m: #b42586; --ariza-m: #a12a0d; --bekleme-m: #8f6213; --plan-m: #0e65be; --yok-m: #5f6873; --kisa-m: #48505a;
    --sebepsiz-z: #f6e6f1; --ariza-z: #f4e4e0; --bekleme-z: #fbf1e1; --plan-z: #e3edf8; --yok-z: #eef0f2; --kisa-z: #f1f2f4;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 10.5px; }
  .yan, .ust, .donem, .sekmeler, .satir-islem, .tostlar, dialog, .baski-gizle { display: none !important; }
  .kabuk { display: block; }
  .icerik { max-width: none; padding: 0; gap: 8px; }
  .baski-bas { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 2px solid #000; font-size: 11px; }
  .ozet { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .kpi { padding: 6px 8px; }
  .kpi-d { font-size: 16px; }
  .kart, .kpi { box-shadow: none; break-inside: avoid; }
  .kart { padding: 8px 0; border: 0; }
  .izgara-12 { display: block; }
  .tablo-kap { overflow: visible; max-height: none; border: 0; }
  .tablo, .vtablo { font-size: 8.5px; }
  .tablo td, .tablo th button, .vtablo td, .vtablo th { padding: 2px 4px; }
  .tablo td:first-child, .tablo th:first-child, .tablo th, .vtablo th, .vtablo td, .vtablo tfoot td { position: static; }
  .tablo th i { display: none; }
}