/* ============================================================================
   NewMimic — canli izleme ekrani (/scada/newmimic)

   Kaynak: docs/reports/mimic/NewMimic_Tasarim_Raporu.md (bilesen sozlugu)
   Renk butcesi RAPORDAKI tablonun aynisi, deger degerine:

     Surec zemini      #cfd3d6   acik gri, parlama yapmaz
     Ekipman konturu   #4b5563   dolgu = zemin rengi
     Boru / hat        #8b9199
     Acik / enerjili   #eef0f1   renk degil, PARLAKLIK
     Kapali            #a8adb3   renk degil, PARLAKLIK
     Uyari             #ffc107   YALNIZ alarm
     Bakim             #ab47bc   YALNIZ alarm
     Kritik            #f44336   YALNIZ alarm
     AceX yesili       #3eaf7c   yalniz kabukta -- surecte YOK

   Kural: "Renk, tek basina, onemli bir durumun tek ayirt edicisi olarak asla
   kullanilmaz." Bu yuzden her durumun yaninda bir SEKIL ya da bir SOZCUK var.
   Tuvalde "normal"in rengi yoktur: renk gorunurse bir sey olmus demektir.
   ========================================================================= */

.nm {
    /* Kabuk: aydinlik, notrleri hafif mavi egilimli. */
    --nm-bg:        #f3f5f7;
    --nm-surface:   #ffffff;
    --nm-sunken:    #f7f8fa;
    --nm-line:      #e2e6ea;
    --nm-line-2:    #cdd4da;

    --nm-ink:       #1b2430;
    --nm-ink-2:     #5b6875;
    --nm-ink-3:     #8a96a3;

    --nm-brand:     #3eaf7c;   /* yalniz kabukta */

    /* Alarm renkleri AceX jetonlarindan; operatorler bu dortluyu biliyor. */
    --nm-warn:      #ffc107;
    --nm-maint:     #ab47bc;
    --nm-crit:      #f44336;
    --nm-warn-ink:  #8a6100;
    --nm-crit-ink:  #b3261e;

    /* Surec yuzeyi. Zemin hala ACIK ve dusuk doygunlukta (ISA-101: "okumaya
       yetecek kontrast, yarismaya yetmeyecek kadar"), ama notr gri yerine
       hafif mavi tarafa cekildi: yanindaki su mavisiyle ayni aileden olunca
       sema bir butun okunuyor, sogumus bir fotokopi gibi degil. */
    --nm-stage:      #ccd7de;
    --nm-equip:      #44525f;
    --nm-pipe:       #8794a0;
    --nm-open:       #eceff1;
    --nm-closed:     #a4aeb6;
    --nm-stage-line: #adbac3;

    /* Depo. Sivi tek yerden degisir: baska bir akiskan (yakit, asit,
       atiksu) icin bu uc jetonu degistirmek yeterli, cizim ayni kalir. */
    --nm-liquid-1:   #63cdef;
    --nm-liquid-2:   #2a94c6;
    --nm-liquid-3:   #12628c;
    --nm-tank-1:     #eef1f3;   /* govde: ortadaki acik ton */
    --nm-tank-2:     #c3cad0;   /* sol kenar */
    --nm-tank-3:     #aeb6bd;   /* sag kenar */
    --nm-tank-cap:   #dde2e6;
    --nm-tank-edge:  #98a2ab;
    --nm-tank-base:  #79828b;

    --nm-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Consolas, monospace;

    --nm-r-sm: 5px;
    --nm-r-md: 8px;
    --nm-r-lg: 12px;

    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    background: var(--nm-bg);
    color: var(--nm-ink);
}

/* Rakam disiplini: sabit genislik, sabit ondalik. "Deger degistikce rakamlar
   yer degistirmemeli, yoksa bir sayi sutunu asagi dogru taranamaz." */
.nm-num {
    font-family: var(--nm-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ============================================================= UST SERIT */
.nm-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    background: var(--nm-surface);
    border-bottom: 1px solid var(--nm-line);
    flex-wrap: wrap;
}

.nm-bar__mark { width: 19px; height: 19px; color: var(--nm-brand); flex: 0 0 auto; }
.nm-bar__mark svg { width: 100%; height: 100%; display: block; }
.nm-bar__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

.nm-bar__level {
    font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--nm-ink-2); background: var(--nm-sunken);
    border: 1px solid var(--nm-line); border-radius: 4px; padding: 3px 8px;
}

.nm-bar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nm-bar__meta { font-size: 11.5px; color: var(--nm-ink-3); }
.nm-bar__meta b { color: var(--nm-ink-2); font-weight: 600; }

.nm-bar__progress {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    overflow: hidden; background: var(--nm-line);
}

.nm-bar__progress::after {
    content: ""; position: absolute; inset: 0; width: 30%;
    background: linear-gradient(90deg, transparent, var(--nm-brand), transparent);
    animation: nm-sweep 1.15s ease-in-out infinite;
}

@keyframes nm-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .nm-bar__progress::after { animation: none; width: 100%; opacity: .5; } }

/* -------------------------------------------------------- SEGMENTLI SEKME */
.nm-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--nm-sunken); border: 1px solid var(--nm-line); border-radius: var(--nm-r-md); }

.nm-seg__item {
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--nm-ink-2);
    background: transparent; border: 0; border-radius: var(--nm-r-sm);
    padding: 5px 14px; cursor: pointer; transition: background .13s ease, color .13s ease;
}

.nm-seg__item:hover:not(:disabled):not(.is-on) { color: var(--nm-ink); }
.nm-seg__item.is-on { background: var(--nm-surface); color: var(--nm-ink); box-shadow: 0 1px 2px rgba(27,36,48,.09); }
.nm-seg--sub .nm-seg__item { font-size: 12px; padding: 4px 12px; }
.nm-seg__item:disabled { opacity: .38; cursor: not-allowed; }
.nm-seg__item:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 1px; }

/* ---------------------------------------------------------------- DURUM */
.nm-conn { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--nm-ink-2); }
.nm-conn__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nm-ink-3); flex: 0 0 auto; }
.nm-conn.is-live .nm-conn__dot { background: var(--nm-brand); }
.nm-conn.is-error .nm-conn__dot { background: var(--nm-crit); }

/* -------------------------------------------------------------- DUGMELER */
.nm-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--nm-ink);
    background: var(--nm-surface); border: 1px solid var(--nm-line-2);
    border-radius: var(--nm-r-sm); padding: 6px 13px; cursor: pointer;
    transition: background .13s ease, border-color .13s ease;
}

.nm-btn svg { width: 14px; height: 14px; }
.nm-btn:hover:not(:disabled) { background: var(--nm-sunken); border-color: #b8c1c9; }
.nm-btn:disabled { opacity: .42; cursor: not-allowed; }
.nm-btn:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 1px; }
.nm-btn.is-on { background: var(--nm-ink); border-color: var(--nm-ink); color: #fff; }
.nm-btn.is-primary { background: var(--nm-brand); border-color: var(--nm-brand); color: #fff; }
.nm-btn.is-primary:hover:not(:disabled) { filter: brightness(1.05); }
.nm-btn.is-danger { color: var(--nm-crit-ink); border-color: #e7b6b2; background: #fdf3f2; }
.nm-btn.is-danger:hover { background: #fbe9e7; }

.nm-ghost { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--nm-ink-2); background: transparent; border: 1px solid var(--nm-line-2); border-radius: var(--nm-r-sm); padding: 4px 10px; cursor: pointer; }
.nm-ghost:hover { color: var(--nm-ink); background: var(--nm-sunken); }

.nm-link { font-size: 12px; font-weight: 600; color: var(--nm-brand); text-decoration: none; margin-left: auto; }
.nm-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ CIPS */
.nm-chips { display: flex; gap: 5px; flex-wrap: wrap; }

.nm-chip {
    font: inherit; font-size: 11.5px; font-weight: 600; color: var(--nm-ink-2);
    background: var(--nm-sunken); border: 1px solid var(--nm-line);
    border-radius: 999px; padding: 4px 11px; cursor: pointer;
    transition: background .13s ease, color .13s ease;
}

.nm-chip:hover:not(:disabled) { color: var(--nm-ink); border-color: var(--nm-line-2); }
.nm-chip:disabled { opacity: .4; cursor: not-allowed; }
.nm-chip.is-on { background: var(--nm-ink); border-color: var(--nm-ink); color: #fff; }
.nm-chip:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 1px; }

/* ---------------------------------------------------------------- NOTLAR */
.nm-note {
    margin: 12px 20px 0; padding: 10px 14px; border-radius: var(--nm-r-md);
    font-size: 12.5px; line-height: 1.55; background: var(--nm-surface);
    border: 1px solid var(--nm-line); border-left: 3px solid var(--nm-line-2);
    color: var(--nm-ink-2);
}

.nm-note b { color: var(--nm-ink); }
.nm-note.is-info { border-left-color: #4a8fd6; }
.nm-note.is-warn { border-left-color: var(--nm-warn); }
.nm-note.is-error { border-left-color: var(--nm-crit); }

/* ================================================================= YARGI */
.nm-verdict {
    display: flex; align-items: center; gap: 13px;
    margin: 14px 20px 0; padding: 13px 16px;
    background: var(--nm-surface); border: 1px solid var(--nm-line);
    border-left: 3px solid var(--nm-ink-3); border-radius: var(--nm-r-md);
}

.nm-verdict__icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--nm-ink-3); background: var(--nm-sunken); }
.nm-verdict__icon svg { width: 17px; height: 17px; }
.nm-verdict__text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.nm-verdict__head { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.nm-verdict__detail { font-size: 12.5px; color: var(--nm-ink-2); }

.nm-verdict.is-ok       { border-left-color: var(--nm-brand); }
.nm-verdict.is-ok       .nm-verdict__icon { color: var(--nm-brand); background: #e9f6f0; }
.nm-verdict.is-warn     { border-left-color: var(--nm-warn); }
.nm-verdict.is-warn     .nm-verdict__icon { color: var(--nm-warn-ink); background: #fdf5e0; }
.nm-verdict.is-critical { border-left-color: var(--nm-crit); background: #fef7f6; }
.nm-verdict.is-critical .nm-verdict__icon { color: var(--nm-crit); background: #fdeae8; }
.nm-verdict.is-critical .nm-verdict__head { color: var(--nm-crit-ink); }

/* ================================================================== KPI */
.nm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 12px; margin: 12px 20px 0; }

.nm-kpi {
    background: var(--nm-surface); border: 1px solid var(--nm-line);
    border-radius: var(--nm-r-lg); padding: 14px 16px 13px;
    display: flex; flex-direction: column; gap: 9px;
}

.nm-kpi__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.nm-kpi__title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nm-ink-2); }
.nm-kpi__unit { font-size: 10.5px; color: var(--nm-ink-3); }

.nm-kpi__value { display: flex; align-items: baseline; gap: 9px; font-size: 32px; font-weight: 500; line-height: 1; color: var(--nm-ink); }
.nm-kpi__of { font-size: 12px; font-weight: 400; color: var(--nm-ink-3); }
.nm-kpi__note { font-family: inherit; font-size: 11px; font-weight: 500; color: var(--nm-ink-3); letter-spacing: 0; }

.nm-kpi__badge {
    font-family: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
    border-radius: 3px; padding: 3px 7px; white-space: nowrap;
}

.nm-kpi__badge.is-crit { color: var(--nm-crit-ink); background: #fdeae8; }
.nm-kpi__badge.is-warn { color: var(--nm-warn-ink); background: #fdf5e0; }
.nm-kpi.is-crit .nm-kpi__value { color: var(--nm-crit-ink); }

/* Bantli olcek: normal bant BEYAZ, uyari ve kritik dilimler renkli, uzerinde
   hareketli ibre. Cubuk degil ibre -- cubugun degeri dustukce cubuk kaybolur. */
.nm-kpi__scale { position: relative; height: 16px; display: flex; align-items: center; }
.nm-kpi__bands { display: flex; width: 100%; height: 7px; border-radius: 2px; overflow: hidden; }
.nm-kpi__bands > span { display: block; height: 100%; }
.nm-kpi__bands .is-normal { background: #ffffff; box-shadow: inset 0 0 0 1px var(--nm-line-2); }
.nm-kpi__bands .is-manage { background: #f4f6f7; box-shadow: inset 0 0 0 1px var(--nm-line); }
.nm-kpi__bands .is-warn   { background: var(--nm-warn); }
.nm-kpi__bands .is-crit   { background: var(--nm-crit); }
.nm-kpi__bands .is-idle   { background: var(--nm-line-2); }

.nm-kpi__needle {
    position: absolute; top: 0; width: 0; height: 16px;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 8px solid var(--nm-ink);
    transform: translateX(-5px);
}

.nm-kpi.is-crit .nm-kpi__needle { border-top-color: var(--nm-crit); }

.nm-kpi__axis { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--nm-ink-3); }
.nm-kpi__axis span:nth-child(2) { color: var(--nm-ink-3); }

/* Bilesim seridi (istasyon durumu) */
.nm-kpi__stack { display: flex; height: 7px; border-radius: 2px; overflow: hidden; background: var(--nm-line); }
.nm-kpi__stack > span { display: block; height: 100%; }
.nm-kpi__stack .is-normal { background: var(--nm-line-2); }
.nm-kpi__stack .is-idle   { background: #dfe4e8; }
.nm-kpi__stack .is-warn   { background: var(--nm-warn); }
.nm-kpi__stack .is-crit   { background: var(--nm-crit); }

.nm-kpi__foot { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10.5px; color: var(--nm-ink-3); }
.nm-kpi__key { display: inline-flex; align-items: center; gap: 5px; }
.nm-kpi__key::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--nm-line-2); }
.nm-kpi__key.is-warn::before { background: var(--nm-warn); }
.nm-kpi__key.is-crit::before { background: var(--nm-crit); }
.nm-kpi__key.is-idle::before { background: #dfe4e8; }

/* ============================================================== IKI SUTUN */
.nm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; margin: 12px 20px 20px; align-items: start; }
@media (max-width: 1180px) { .nm-cols { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ PANELLER */
.nm-panel { background: var(--nm-surface); border: 1px solid var(--nm-line); border-radius: var(--nm-r-lg); padding: 14px 16px 16px; }
.nm-panel__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.nm-panel__title { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nm-ink-2); }
.nm-panel__count { font-family: var(--nm-mono); font-size: 11px; color: var(--nm-ink-3); background: var(--nm-sunken); border-radius: 999px; padding: 2px 8px; }
.nm-panel__head .nm-chips { margin-left: auto; }
.nm-panel__more { margin: 10px 0 0; font-size: 10.5px; color: var(--nm-ink-3); }

.nm-empty { margin: 0; padding: 30px 10px; text-align: center; font-size: 13px; color: var(--nm-ink-3); }
.nm-calm { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 2px; font-size: 12.5px; color: var(--nm-ink-2); }
.nm-calm svg { width: 15px; height: 15px; color: var(--nm-brand); flex: 0 0 auto; }

/* Alarm ucu okunamadi: "alarm yok" degil "bilinmiyor". Sakin yesil degil uyari. */
.nm-alarm-error {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 9px;
    font-size: 12.5px; color: var(--nm-warn-ink); background: #fdf5e0;
    border-left: 3px solid var(--nm-warn); border-radius: var(--nm-r-sm);
}
.nm-alarm-error svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ------------------------------------------------------------ ALARM RAYI */
.nm-alarms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.nm-alarm {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px;
    background: var(--nm-sunken); border: 1px solid var(--nm-line);
    border-left: 3px solid var(--nm-line-2); border-radius: var(--nm-r-sm);
}

/* Seviye rakami RENKLE BIRLIKTE yazili. */
.nm-alarm__level {
    flex: 0 0 auto; width: 21px; height: 21px; display: grid; place-items: center;
    border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; background: var(--nm-ink-3);
}

.nm-alarm.is-level-1 { border-left-color: #4caf50; } .nm-alarm.is-level-1 .nm-alarm__level { background: #4caf50; }
.nm-alarm.is-level-2 { border-left-color: var(--nm-warn); background: #fdf9ee; } .nm-alarm.is-level-2 .nm-alarm__level { background: var(--nm-warn); color: #3d2c00; }
.nm-alarm.is-level-3 { border-left-color: var(--nm-maint); } .nm-alarm.is-level-3 .nm-alarm__level { background: var(--nm-maint); }
.nm-alarm.is-level-4 { border-left-color: var(--nm-crit); background: #fdf3f2; } .nm-alarm.is-level-4 .nm-alarm__level { background: var(--nm-crit); }

.nm-alarm__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nm-alarm__text { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-alarm__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: var(--nm-ink-3); }
.nm-alarm__ack { font-weight: 600; color: var(--nm-ink-2); }
.nm-alarms--side .nm-alarm { background: #fff; }

/* ========================================================= ISTASYON KARTI */
.nm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 9px; }

.nm-card {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    min-width: 0; text-align: left; font: inherit; color: var(--nm-ink);
    background: var(--nm-surface); border: 1px solid var(--nm-line);
    border-radius: var(--nm-r-md); padding: 11px 12px 10px;
    cursor: pointer; overflow: hidden;
    transition: border-color .13s ease, background .13s ease;
}

.nm-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.nm-card:hover { border-color: var(--nm-line-2); background: var(--nm-sunken); }
.nm-card:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 1px; }

.nm-card__head { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.nm-card__dot { width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--nm-line-2); flex: 0 0 auto; }
.nm-card__icon { width: 14px; height: 14px; margin-top: 1px; flex: 0 0 auto; }

/* Isim IKI SATIRA kadar sarar, sonra kirpilir. */
.nm-card__name {
    font-size: 12px; font-weight: 600; line-height: 1.32; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}

.nm-card__code { font-family: var(--nm-mono); font-size: 10px; color: var(--nm-ink-3); }
.nm-card__value { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.nm-card__value b { font-size: 23px; font-weight: 500; line-height: 1.05; }
.nm-card__unit { font-size: 10.5px; color: var(--nm-ink-3); }
.nm-card__idle { margin-top: 3px; font-size: 11px; color: var(--nm-ink-3); font-style: italic; }
.nm-card__foot { font-size: 10px; color: var(--nm-ink-3); min-height: 12px; }

.nm-card.is-unknown { border-style: dashed; }
.nm-card.is-stale::before { background: var(--nm-warn); }
.nm-card.is-stale { background: #fdfaf1; }
.nm-card.is-stale .nm-card__icon, .nm-card.is-stale .nm-card__foot { color: var(--nm-warn-ink); }
.nm-card.is-critical { border-color: #e9b3ae; background: #fdf3f2; }
.nm-card.is-critical::before { background: var(--nm-crit); }
.nm-card.is-critical .nm-card__icon,
.nm-card.is-critical .nm-card__value b,
.nm-card.is-critical .nm-card__foot { color: var(--nm-crit-ink); }

/* ============================================================== SEVIYE 2 */
.nm-subbar { display: flex; align-items: center; gap: 13px; padding: 9px 20px; background: var(--nm-surface); border-bottom: 1px solid var(--nm-line); flex-wrap: wrap; }
.nm-subbar__name { font-size: 13px; font-weight: 600; color: var(--nm-ink-2); }
.nm-subbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.nm-dirty {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--nm-warn-ink); background: #fdf5e0; border: 1px solid #f0dca8;
    border-radius: 999px; padding: 3px 9px;
}

/* --------------------------------------------------------- ARAC CUBUGU */
.nm-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 20px; background: var(--nm-sunken); border-bottom: 1px solid var(--nm-line); }
.nm-toolbar__sep { width: 1px; height: 18px; background: var(--nm-line-2); margin: 0 6px; }
.nm-toolbar__hint { font-size: 11.5px; font-weight: 600; color: var(--nm-brand); }
.nm-toolbar__state { margin-left: auto; display: flex; gap: 14px; font-size: 11.5px; color: var(--nm-ink-2); }

.nm-state { display: inline-flex; align-items: center; gap: 6px; }
.nm-state__dot { width: 8px; height: 8px; border-radius: 50%; }
.nm-state.is-bound .nm-state__dot { background: var(--nm-brand); }
.nm-state.is-free .nm-state__dot { background: var(--nm-warn); }
.nm-state b { font-family: var(--nm-mono); }

.nm-tool {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--nm-ink-2);
    background: var(--nm-surface); border: 1px solid var(--nm-line-2);
    border-radius: var(--nm-r-sm); padding: 5px 11px; cursor: pointer;
}

.nm-tool svg { width: 14px; height: 14px; }
.nm-tool:hover:not(:disabled) { color: var(--nm-ink); border-color: #b8c1c9; }
.nm-tool:disabled { opacity: .38; cursor: not-allowed; }
.nm-tool:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 1px; }
.nm-tool__count { font-family: var(--nm-mono); font-size: 10px; color: var(--nm-ink-3); }

/* --------------------------------------------------- CALISMA ALANI (3 sutun) */
.nm-work { display: flex; flex: 1; min-height: 0; gap: 12px; padding: 12px 20px 20px; }

/* ------------------------------------------------------------- SOL PALET */
.nm-pal {
    width: 210px; flex: 0 0 210px; min-width: 0;
    background: var(--nm-surface); border: 1px solid var(--nm-line);
    border-radius: var(--nm-r-lg); padding: 12px;
    display: flex; flex-direction: column; gap: 10px;

    /* Palet KENDI ICINDE kayiyor. Boyle olmazsa: katalogda ellinin uzerinde
       gorsel var, palet dogal boyunda yirmi satir uzuyor, satir yuksekligi
       tum calisma alanini geriyor ve tuval ekranin disina itiliyordu --
       istasyona girince bombos gri bir alan goruluyordu. */
    max-height: calc(100vh - 210px); overflow-y: auto; overflow-x: hidden;
}

.nm-pal__search { position: relative; display: flex; align-items: center; }
.nm-pal__search svg { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--nm-ink-3); pointer-events: none; }

.nm-pal__search input {
    font: inherit; font-size: 12.5px; width: 100%;
    padding: 7px 9px 7px 29px; color: var(--nm-ink);
    background: var(--nm-sunken); border: 1px solid var(--nm-line); border-radius: var(--nm-r-sm);
}

.nm-pal__search input:focus { outline: none; border-color: var(--nm-brand); background: #fff; }

.nm-pal__group {
    position: sticky; top: -12px; z-index: 1;
    /* Uzun listede grup basligi gorunur kalsin: yirmi satir kaydirdiktan
       sonra hangi grupta oldugunu bilmek gerekiyor. */
    margin: 0 -12px; padding: 6px 12px 4px; background: var(--nm-surface);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--nm-ink-3);
}

/* minmax(0, 1fr): ikinci deger olmadan izgara parcalari ICERIGIN en kucuk
   genisligine gore buyur. "Kokulandirma" gibi bolunemeyen uzun bir ad,
   sutunu paletten genis yapiyor ve ucuncu sutun kirpiliyordu. */
.nm-pal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nm-pal__grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nm-pal__tile {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    /* Izgara ogesinin varsayilan min-width'i "auto"dur: icerigin en kucuk
       genisliginden dar olamaz. Sifirlanmazsa uzun adlar kareyi sisiriyor. */
    min-width: 0; overflow: hidden;
    font: inherit; font-size: 9.5px; font-weight: 600; color: var(--nm-ink-2);
    background: var(--nm-surface); border: 1px solid var(--nm-line);
    border-radius: var(--nm-r-md); padding: 9px 4px 7px; cursor: pointer;
    text-align: center; line-height: 1.2;
    transition: border-color .13s ease, background .13s ease;
}

.nm-pal__tile:hover { border-color: var(--nm-line-2); background: var(--nm-sunken); color: var(--nm-ink); }
.nm-pal__tile:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 1px; }
.nm-pal__icon { width: 22px; height: 22px; fill: none; stroke: var(--nm-equip); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nm-pal__note { margin: auto 0 0; font-size: 10.5px; line-height: 1.5; color: var(--nm-ink-3); }

/* --------------------------------------------------------- SUREC YUZEYI */
.nm-stage {
    position: relative; flex: 1; min-width: 0;
    background: var(--nm-stage); border: 1px solid var(--nm-stage-line);
    border-radius: var(--nm-r-lg); padding: 14px; overflow: auto;
    color: #2b3540;
}

.nm-stage.is-three { padding: 0; overflow: hidden; }

.nm-blank { height: 100%; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; color: #5c6771; }
.nm-blank svg { width: 46px; height: 46px; opacity: .55; }
.nm-blank p { margin: 0; font-size: 13px; }

/* ------------------------------------------------------- DEGER KARTLARI */
.nm-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 9px; }

.nm-value { background: #e9ecee; border: 1px solid var(--nm-stage-line); border-radius: var(--nm-r-md); padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nm-value.is-stale { border-color: #d4a93c; background: #eee9dc; }
.nm-value__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.nm-value__label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5c6771; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-value__stale { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--nm-warn-ink); }
.nm-value__stale svg { width: 12px; height: 12px; }
.nm-value__number { font-family: var(--nm-mono); font-size: 25px; font-weight: 500; line-height: 1.1; color: #16202c; }
.nm-value__unit { font-family: inherit; font-size: 11.5px; color: #5c6771; margin-left: 5px; font-weight: 500; }

/* ------------------------------------------------------------------- 3B */
.nm-three { position: absolute; inset: 0; }
.nm-three__host { position: absolute; inset: 0; }

.nm-three__msg {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 11px;
    background: rgba(255,255,255,.95); border: 1px solid var(--nm-line-2);
    border-radius: var(--nm-r-md); padding: 15px 18px; font-size: 12.5px;
    max-width: 320px; text-align: center; color: var(--nm-ink-2);
}

.nm-three__msg > * { pointer-events: auto; }

/* ============================================================== YAN PANEL */
.nm-side {
    width: 290px; flex: 0 0 290px; min-width: 0;
    background: var(--nm-surface); border: 1px solid var(--nm-line);
    border-radius: var(--nm-r-lg); padding: 14px;
    display: flex; flex-direction: column; gap: 11px;

    /* Denetimci de KENDI ICINDE kaysin: kural sekmesinde on kural tanimlayan
       biri, paneli calisma alanini geren bir sutuna cevirirdi. */
    max-height: calc(100vh - 210px); overflow-y: auto; overflow-x: hidden;
}

.nm-side__head { display: flex; align-items: center; gap: 10px; }
.nm-side__glyph { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--nm-sunken); border: 1px solid var(--nm-line); border-radius: var(--nm-r-sm); }
.nm-side__glyph svg { width: 19px; height: 19px; fill: none; stroke: var(--nm-equip); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nm-side__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nm-side__text b { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.nm-side__text span { font-size: 11px; color: var(--nm-ink-3); }

.nm-side__sub { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nm-ink-3); padding-top: 3px; border-top: 1px solid var(--nm-line); }

/* --------------------------------------------------------------- SEKMELER */
.nm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--nm-line); }

.nm-tabs__item {
    font: inherit; font-size: 12px; font-weight: 600; color: var(--nm-ink-3);
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    padding: 7px 11px; margin-bottom: -1px; cursor: pointer;
}

.nm-tabs__item:hover { color: var(--nm-ink-2); }
.nm-tabs__item.is-on { color: var(--nm-ink); border-bottom-color: var(--nm-brand); }
.nm-tabs__item:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: -2px; }

.nm-facts { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.nm-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nm-facts dt { font-size: 11.5px; color: var(--nm-ink-3); }
.nm-facts dd { margin: 0; font-size: 13px; font-weight: 600; }
.nm-facts dd.is-warn { color: var(--nm-warn-ink); }

.nm-hint { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--nm-ink-2); background: var(--nm-sunken); border-radius: var(--nm-r-sm); padding: 10px 11px; }
.nm-hint.is-warn { color: var(--nm-warn-ink); background: #fdf5e0; }

/* ------------------------------------------------------- RENK SOZLUGU */
/* Renk butcesi ekranin KENDISINDE yaziyor: "normal"in rengi yok. */
.nm-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; color: var(--nm-ink-2); }
.nm-legend li { display: flex; align-items: center; gap: 9px; }
.nm-legend__sw { width: 15px; height: 15px; border-radius: 3px; flex: 0 0 auto; }
.nm-legend__sw.is-normal { background: var(--nm-stage); border: 1px solid var(--nm-stage-line); }
.nm-legend__sw.is-warn { background: var(--nm-warn); }
.nm-legend__sw.is-maint { background: var(--nm-maint); }
.nm-legend__sw.is-crit { background: var(--nm-crit); }

/* ------------------------------------------------------- CANLI ONIZLEME */
.nm-live { border: 1px solid var(--nm-line); border-radius: var(--nm-r-md); padding: 11px 12px; background: var(--nm-sunken); display: flex; flex-direction: column; gap: 4px; }
.nm-live__label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nm-ink-3); }
.nm-live__value { font-family: var(--nm-mono); font-size: 24px; font-weight: 500; line-height: 1.1; }
.nm-live__unit { font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--nm-ink-3); margin-left: 5px; }
.nm-live__meta { font-size: 11px; color: var(--nm-ink-3); }
.nm-live__none { font-family: inherit; font-size: 13px; font-style: italic; color: var(--nm-ink-3); }

.nm-live.is-ok    { background: #eef8f3; border-color: #bfe3d3; }
.nm-live.is-warn  { background: #fdf5e0; border-color: #f0dca8; }
.nm-live.is-warn  .nm-live__value { color: var(--nm-warn-ink); }
.nm-live.is-stale { background: #fdf9ee; border-color: #ecdfc0; }
.nm-live.is-crit  { background: #fdf3f2; border-color: #e9b3ae; }
.nm-live.is-crit  .nm-live__value { color: var(--nm-crit-ink); }

.nm-bandpreview { padding: 4px 2px 2px; }

/* --------------------------------------------------------------- FORM */
.nm-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nm-field > label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--nm-ink-3); }

.nm-input {
    font: inherit; font-size: 12.5px; color: var(--nm-ink);
    background: var(--nm-surface); border: 1px solid var(--nm-line-2);
    border-radius: var(--nm-r-sm); padding: 7px 9px; width: 100%; min-width: 0;
}

.nm-input::placeholder { color: var(--nm-ink-3); }
.nm-input:hover:not(:disabled) { border-color: #b8c1c9; }
.nm-input:focus { outline: none; border-color: var(--nm-brand); box-shadow: 0 0 0 3px rgba(62,175,124,.14); }
.nm-input:disabled { background: var(--nm-sunken); opacity: .65; cursor: not-allowed; }

.nm-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.nm-field--tight > label { font-size: 9px; }

/* Esik kutulari rengiyle KENDINI anlatiyor: uyari sari, kritik kirmizi
   cerceve. Sekiz ayni gorunen kutu, hangisinin ne oldugunu okumadan
   ayirt edilemiyordu. */
.nm-field--tight.is-warn > label { color: var(--nm-warn-ink); }
.nm-field--tight.is-warn .nm-input { border-color: #e6c463; }
.nm-field--tight.is-warn .nm-input:focus { border-color: var(--nm-warn); box-shadow: 0 0 0 3px rgba(255,193,7,.18); }
.nm-field--tight.is-crit > label { color: var(--nm-crit-ink); }
.nm-field--tight.is-crit .nm-input { border-color: #e9a49e; }
.nm-field--tight.is-crit .nm-input:focus { border-color: var(--nm-crit); box-shadow: 0 0 0 3px rgba(244,67,54,.15); }

@media (max-width: 1240px) {
    .nm-work { flex-wrap: wrap; }
    .nm-pal { width: 100%; flex: 0 0 auto; }
    .nm-pal__grid { grid-template-columns: repeat(6, 1fr); }
    .nm-side { width: 100%; flex: 0 0 auto; }
}

/* ============================================================================
   TUVAL (nmx)

   Bilesen sozlugu: ekipman KARE kutu + cizgisel SIMGE, deger kutunun ALTINDA
   olcegi ve ibresiyle. Ekipman zeminle ayni tonda, yalnizca konturla ayrilir;
   renk butcesinin tamami anormal duruma ayrildi.
   ========================================================================= */
.nmx { display: block; width: 100%; height: 100%; min-height: 420px; touch-action: none; }
.nmx.is-edit .nmx-node { cursor: grab; }
/* Klavye: tuval ve ogeler odaklanabilir; odak tarayicinin kutusu yerine
   ogenin cevresinde gorunur bir halka. */
.nmx:focus { outline: none; }
.nmx:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 2px; }
.nmx-node { outline: none; }
.nmx-node:focus-visible .nmx-box { stroke: var(--nm-brand); stroke-width: 3; }
.nmx-node:focus-visible { filter: drop-shadow(0 0 3px rgba(62, 175, 124, .9)); }
/* Izleme kipinde bagli SVG parcasi tiklanir: trendini acar. */
.nmx:not(.is-edit) [data-mimic-role="bind"][data-mimic-id] { cursor: pointer; }
.nmx.is-dragging .nmx-node { cursor: grabbing; }
.nmx-gridbg { pointer-events: none; }

/* Boru IKI cizgiyle: kalin acik bir kilif, uzerinde ince govde. */
.nmx-pipe { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.nmx-pipe--casing { stroke: var(--nm-pipe); stroke-width: 9; }
.nmx-pipe--core   { stroke: #c2c8cd;        stroke-width: 4; }

.nmx-box { fill: var(--nm-stage); stroke: var(--nm-equip); stroke-width: 1.8; }
.nmx-panel { fill: #dce0e3; stroke: var(--nm-stage-line); stroke-width: 1.2; }
.nmx-glyph { fill: none; stroke: var(--nm-equip); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nmx-select { fill: none; stroke: var(--nm-brand); stroke-width: 2; stroke-dasharray: 6 4; }

.nmx-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; fill: #55606c; text-transform: uppercase; }
.nmx-value { font-family: var(--nm-mono); font-size: 19px; font-weight: 500; fill: #16202c; }
.nmx-unit { font-family: inherit; font-size: 10px; font-weight: 600; fill: #5c6771; }
.nmx-limit { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; fill: var(--nm-crit-ink); }
.nmx-stale { font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; fill: var(--nm-warn-ink); }

/* Durum RENKTEN once KONTURLA: kalinlasan cizgi renk koruligunde de secilir. */
.nmx-node.is-warning .nmx-box { stroke: var(--nm-warn-ink); stroke-width: 2.4; }
.nmx-node.is-warning .nmx-glyph { stroke: var(--nm-warn-ink); }
.nmx-node.is-warning .nmx-value { fill: var(--nm-warn-ink); }
.nmx-node.is-warning .nmx-limit { fill: var(--nm-warn-ink); }
.nmx-node.is-critical .nmx-box { stroke: var(--nm-crit); stroke-width: 2.6; fill: #f7dedc; }
.nmx-node.is-critical .nmx-glyph { stroke: var(--nm-crit-ink); }
.nmx-node.is-critical .nmx-value { fill: var(--nm-crit-ink); }
.nmx-node.is-stale .nmx-box { stroke-dasharray: 7 4; }

/* Olcek: normal bant BEYAZ, uyari ve kritik dilimler renkli, ustunde ibre. */
.nmx-bar__track  { fill: #b4bbc1; }
.nmx-bar__normal { fill: #ffffff; }
.nmx-bar__warn   { fill: var(--nm-warn); }
.nmx-bar__crit   { fill: var(--nm-crit); }
.nmx-bar__needle { fill: #2b3540; }
.nmx-node.is-warning  .nmx-bar__needle { fill: var(--nm-warn-ink); }
.nmx-node.is-critical .nmx-bar__needle { fill: var(--nm-crit); }

/* DEPO.
   Sivi RENKLI: bir su deposunu mavi dolgusuz anlatmak, operatorun "bu ne"
   sorusunu her seferinde yeniden sormasi demek. ISA-101'in renk butcesi
   korunuyor ama sinir baska yere cekildi: ALARM RENKLERI (sari/kirmizi)
   hic kullanilmiyor -- sivi normalde MAVI, esik asildiginda kehribar, kritikte
   kirmizi olur. Yani renk yine bir sey ANLATIYOR, dekorasyon degil, ve alarm
   tonlari yalniz alarmda ortaya cikiyor.
   Govde uc katman: gradyan kabuk + silindir hacmi + .nmx-box konturu. Kontur
   ayri bir katman oldugu icin esik/bayat kurallari (yukarida) degismeden
   calisiyor; dolgusu burada bosaltiliyor ki kabugun gradyanini ezmesin. */
.nmx-tank__shell { fill: url(#nmx-shell); stroke: none; }
.nmx-tank__volume { fill: url(#nmx-cyl); stroke: none; pointer-events: none; }
.nmx-tank__cap { fill: var(--nm-tank-cap); stroke: var(--nm-tank-edge); stroke-width: 1; }
.nmx-tank__base { fill: var(--nm-tank-base); }
.nmx-node .nmx-box.nmx-tank__outline { fill: none; }

/* Dolgu rengi nitelikten (gradyan) gelir; burada yalnizca hareketi var:
   seviye ziplamaz, akar. */
.nmx-tank__fill { transition: y .55s ease-out, height .55s ease-out; }
.nmx-tank__surface {
    stroke: rgba(255, 255, 255, .72); stroke-width: 1.2;
    transition: cy .55s ease-out;
}

/* Deger sivinin uzerinde duruyor: acik halo olmadan koyu mavide kayboluyor. */
.nmx-node--tank .nmx-value { paint-order: stroke fill; stroke: rgba(255, 255, 255, .82); stroke-width: 3.5px; }
.nmx-tank__pct {
    font-family: var(--nm-mono); font-size: 10px; fill: #2b3945;
    paint-order: stroke fill; stroke: rgba(255, 255, 255, .8); stroke-width: 3px;
}

.nmx-tank__limit { stroke-width: 1.2; stroke-dasharray: 5 4; }
.nmx-tank__limit.is-warn { stroke: var(--nm-warn-ink); }
.nmx-tank__limit.is-crit { stroke: var(--nm-crit); }
.nmx-tank__limit-text {
    font-size: 8px; font-weight: 700; letter-spacing: 0.08em;
    paint-order: stroke fill; stroke: rgba(255, 255, 255, .8); stroke-width: 2.5px;
}
.nmx-tank__limit-text.is-warn { fill: var(--nm-warn-ink); }
.nmx-tank__limit-text.is-crit { fill: var(--nm-crit-ink); }

.nmx-tank__tick { stroke: var(--nm-stage-line); stroke-width: 1; }
.nmx-tank__tick-text {
    font-family: var(--nm-mono); font-size: 8.5px;
    fill: var(--nm-ink-3); font-variant-numeric: tabular-nums;
}

.nmx-tank__hint { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; fill: var(--nm-ink-3); }

/* Rozetler: yesil onay = cihaza bagli, sari unlem = bagli degil,
   kirmizi ucgen = alarm. Renk + SEKIL birlikte. */
.nmx-badge circle, .nmx-badge rect { stroke: #ffffff; stroke-width: 2; }
.nmx-badge__mark { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nmx-badge__dot { fill: #ffffff; stroke: none; }
.nmx-badge.is-bound circle { fill: var(--nm-brand); }
.nmx-badge.is-free circle { fill: var(--nm-warn); }
.nmx-badge.is-free .nmx-badge__mark, .nmx-badge.is-free .nmx-badge__dot { stroke: #3d2c00; fill: none; }
.nmx-badge.is-free .nmx-badge__dot { fill: #3d2c00; }
.nmx-badge.is-alarm rect { fill: var(--nm-crit); }
.nmx-badge.is-alarm .nmx-badge__mark { fill: #ffffff; stroke: none; }

/* Surec yuzeyindeki gosterge ve trend, ayni renk butcesine uyar. */
.nm-stage .acex-gauge__track  { fill: #b4bbc1; }
.nm-stage .acex-gauge__normal { fill: #ffffff; stroke: var(--nm-stage-line); }
.nm-stage .acex-gauge__warn   { fill: var(--nm-warn); }
.nm-stage .acex-gauge__crit   { fill: var(--nm-crit); }
.nm-stage .acex-gauge__needle { fill: #2b3540; }
.nm-stage .acex-gauge.is-warning  .acex-gauge__needle { fill: var(--nm-warn-ink); }
.nm-stage .acex-gauge.is-critical .acex-gauge__needle { fill: var(--nm-crit); }
.nm-stage .acex-spark__normal { fill: #ffffff; }
.nm-stage .acex-spark__line   { stroke: #5c6771; }
.nm-stage .acex-spark__head   { fill: #2b3540; }

/* Iki sutunun icindeki paneller kendi yuksekliklerini alir; alarm rayi
   izgaranin altina DUSMEZ, saginda kalir. */
.nm-cols__main { min-width: 0; }
.nm-cols__rail { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nm-cols__rail .nm-panel { padding: 13px 14px 14px; }

/* Modul cipleri baslikta, gorunum sekmelerinin yaninda. */
.nm-chips--modules { margin-left: 2px; }

/* ============================================================== 24 SAAT
   Dort sayi ve bir tekrar listesi. Rakam tek basina "iyi mi kotu mu"
   sorusunu yanitlamadigi icin her sayinin ALTINDA yargi yazili.
   ==================================================================== */
.nm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.nm-stat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 9px 10px; background: var(--nm-sunken);
    border: 1px solid var(--nm-line); border-left: 3px solid var(--nm-line-2);
    border-radius: var(--nm-r-sm);
}

.nm-stat__num { font-family: var(--nm-mono); font-size: 19px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nm-stat__cap { font-size: 10px; color: var(--nm-ink-3); line-height: 1.35; }

/* Renk YALNIZ anormal icin: normal yukte dort kutu da grinin tonlarinda. */
.nm-stat.is-warn     { border-left-color: var(--nm-warn); background: #fdf9ee; }
.nm-stat.is-warn     .nm-stat__num { color: var(--nm-warn-ink); }
.nm-stat.is-critical { border-left-color: var(--nm-crit); background: #fdf3f2; }
.nm-stat.is-critical .nm-stat__num { color: var(--nm-crit-ink); }

.nm-panel__sub {
    display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--nm-ink-3);
}

.nm-panel__share { margin-left: auto; font-family: var(--nm-mono); letter-spacing: 0; color: var(--nm-ink-2); }

.nm-tops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.nm-top { display: flex; flex-direction: column; gap: 4px; }
.nm-top__row { display: flex; align-items: baseline; gap: 8px; }

/* Metin tasarsa komsu satiri iter; tek satirda kesiliyor, tamami baslikta. */
.nm-top__text {
    flex: 1; min-width: 0; font-size: 11.5px; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nm-top__num { font-family: var(--nm-mono); font-size: 11.5px; color: var(--nm-ink-2); font-variant-numeric: tabular-nums; }
.nm-top__bar { display: block; height: 4px; background: var(--nm-line); border-radius: 2px; overflow: hidden; }
.nm-top__fill { display: block; height: 100%; background: var(--nm-ink-3); border-radius: 2px; }

.nm-top.is-level-2 .nm-top__fill { background: var(--nm-warn); }
.nm-top.is-level-3 .nm-top__fill { background: var(--nm-maint); }
.nm-top.is-level-4 .nm-top__fill { background: var(--nm-crit); }

/* ========================================================= ORTA SUTUN
   Surec yuzeyi ve ALTINDA trend. Yuzey buyur/kucultur, trend sabit boyda:
   egrinin yuksekligi degisirse egim de degisir ve ayni veri her acilista
   baska bir egilim gosterirdi.
   ==================================================================== */
.nm-center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.nm-center > .nm-stage { flex: 1; min-height: 0; }

/* Yakinlastirma: kaydirma TUVAL SARMALAYICISINDA, sahnede degil. Sahnede
   olsaydi yakinlastirma dugmeleri (mutlak konumlu) icerikle birlikte kayar ve
   %200'de ekrandan cikardi. */
.nm-stage.is-canvas { overflow: hidden; display: flex; }
.nmx-wrap { flex: 1; min-width: 0; min-height: 320px; display: flex; overflow: auto; }
/* Olcu artik satir ici stilden geliyor (ZoomStyle); sinif icindeki
   min-height, %100'un altinda tuvali serbest birakmaz. */
.nmx-wrap > .nmx { flex: 0 0 auto; margin: auto; min-height: 0; }

.nmx-zoom {
    position: absolute; right: 14px; bottom: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    background: var(--nm-surface); border: 1px solid var(--nm-line-2);
    border-radius: var(--nm-r-md); box-shadow: 0 1px 3px rgba(20, 28, 38, .14);
}

.nmx-zoom__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; cursor: pointer;
    color: var(--nm-ink-2); background: transparent; border: 0; border-radius: var(--nm-r-sm);
}

.nmx-zoom__btn:hover:not(:disabled) { color: var(--nm-ink); background: var(--nm-sunken); }
.nmx-zoom__btn:disabled { opacity: .35; cursor: default; }
.nmx-zoom__btn:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 1px; }
.nmx-zoom__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.nmx-zoom__val {
    min-width: 40px; text-align: center; font-family: var(--nm-mono);
    font-size: 11px; color: var(--nm-ink-2); font-variant-numeric: tabular-nums;
}

/* =============================================================== TREND
   Secili ogenin son dort saati. Normal bant RENK DEGIL acik bir zemin;
   renk butcesinin tamami anormal duruma ayrildi.
   ==================================================================== */
.nm-trend {
    flex: 0 0 auto; background: var(--nm-surface);
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-lg);
    padding: 11px 14px 12px;
}

.nm-trend__head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }

.nm-trend__title {
    margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--nm-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
}

.nm-trend__span { font-size: 10.5px; color: var(--nm-ink-3); }
.nm-trend__note { font-size: 10.5px; color: var(--nm-ink-3); font-style: italic; }
.nm-trend__close { margin-left: auto; }
.nm-trend__msg { margin: 14px 0 6px; font-size: 11.5px; color: var(--nm-ink-3); }

.nm-trend__foot {
    margin: 4px 0 0; font-size: 10.5px; color: var(--nm-ink-3);
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}

.nm-trend__sep { color: var(--nm-line-2); }

.nm-trend__hint {
    flex: 0 0 auto; margin: 0; padding: 9px 14px; font-size: 11px; color: var(--nm-ink-3);
    background: var(--nm-surface); border: 1px dashed var(--nm-line-2); border-radius: var(--nm-r-lg);
}

.nmt { display: block; width: 100%; height: auto; margin-top: 8px; }

.nmt-band { fill: #eef1f3; }
.nmt-grid { stroke: var(--nm-line); stroke-width: 1; }
.nmt-grid--v { stroke-dasharray: 2 4; }

.nmt-tick {
    font-family: var(--nm-mono); font-size: 9px; fill: var(--nm-ink-3);
    font-variant-numeric: tabular-nums;
}

/* Esik cizgileri KESIKLI: renk tek tasiyici olamaz, cizgi bicimi de anlatir. */
.nmt-limit { stroke-width: 1.2; stroke-dasharray: 5 4; fill: none; }
.nmt-limit--warn { stroke: var(--nm-warn); }
.nmt-limit--crit { stroke: var(--nm-crit); }
.nmt-limit__text { font-size: 8.5px; fill: var(--nm-ink-3); letter-spacing: 0.04em; }

.nmt-area { fill: rgba(91, 104, 117, .09); stroke: none; }
.nmt-line { fill: none; stroke: #5c6771; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.nmt-head { fill: var(--nm-ink); }

.nmt-head__text {
    font-family: var(--nm-mono); font-size: 10.5px; font-weight: 600;
    fill: var(--nm-ink); font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
    .nm-trend__title { max-width: 100%; }
}

/* ======================================================= GORSEL PALETI
   Ekipman artik cizgisel ikon degil: isletmenin yillardir kullandigi
   gercek gorseller (img/water/akses*.png). Dosya kopyalanmiyor, eski
   ekranla ayni yerden okunuyor.
   ==================================================================== */
.nm-pal__img {
    width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain;
    /* Beyaz zeminde acik gorseller kayboluyordu; cok hafif bir zemin
       hepsini gorunur kiliyor ama renklerini bozmuyor. */
    background: #eef0f2; border-radius: 3px; padding: 2px;
}

.nm-pal__box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: 3px;
    font-weight: 700; font-size: 15px; color: var(--nm-ink-2);
    background: #eef0f2; border: 1px solid var(--nm-line);
}

.nm-pal__tile span:last-child {
    /* Katalogda ellinin uzerinde ad var; tasan ad komsu kareyi itmesin.
       Tam adi yine gorebilmek icin karede title niteligi duruyor. */
    display: block; width: 100%; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nm-side__glyph img { width: 26px; height: 26px; object-fit: contain; }
.nm-side__glyph b { font-size: 15px; color: var(--nm-ink-2); }

/* ----------------------------------------------- ESKI SEMAYI AKTARMA */
.nm-blank__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.nm-blank__hint { margin: 2px 0 0; max-width: 380px; text-align: center; font-size: 11px; line-height: 1.55; color: #6b7681; }

/* Bos bir semada animasyonlu sablonlar paletin icinde saklanmaz. Kullanici
   hangi cizimin gelecegini burada gorur ve tek tikla gercek SVG'yi tuvale alir. */
.nm-template-picker {
    width: min(820px, calc(100% - 32px)); margin: 6px auto 2px; padding: 14px;
    background: rgba(255,255,255,.72); border: 1px solid #aebbc4; border-radius: var(--nm-r-lg);
    box-shadow: 0 8px 24px rgba(35, 52, 65, .08); color: var(--nm-ink); text-align: left;
}
.nm-template-picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.nm-template-picker__head > span:first-child { display: grid; gap: 3px; }
.nm-template-picker__head b { font-size: 14px; }
.nm-template-picker__head small { font-size: 10.5px; line-height: 1.45; color: var(--nm-ink-3); }
.nm-template-picker__badge { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #e2f5ec; color: #216e4e; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; }
.nm-template-picker__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.nm-template-card {
    min-width: 0; padding: 0; overflow: hidden; cursor: pointer; text-align: left;
    font: inherit; color: inherit; background: #fff; border: 1px solid var(--nm-line-2); border-radius: var(--nm-r-md);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.nm-template-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--nm-brand); box-shadow: 0 7px 18px rgba(35, 52, 65, .12); }
.nm-template-card:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 2px; }
.nm-template-card:disabled { opacity: .62; cursor: wait; }
.nm-template-card__preview { display: block; height: 88px; padding: 7px 10px; background: #dce5ea; border-bottom: 1px solid var(--nm-line); }
.nm-template-card__preview svg { display: block; width: 100%; height: 100%; }
.nm-template-card__copy { display: grid; gap: 4px; padding: 10px 11px 11px; }
.nm-template-card__copy b { font-size: 12.5px; }
.nm-template-card__copy small { min-height: 30px; font-size: 10px; line-height: 1.45; color: var(--nm-ink-3); }
.nm-template-card__copy em { margin-top: 2px; font-size: 10.5px; font-style: normal; font-weight: 700; color: var(--nm-brand); }
.nm-template-card__tank, .nm-template-card__pump, .nm-template-card__meter { fill: #eef2f4; stroke: #52616d; stroke-width: 3; }
.nm-template-card__level { fill: #2a94c6; transform-box: fill-box; transform-origin: center bottom; animation: nm-template-level 2.8s ease-in-out infinite alternate; }
.nm-template-card__pipe { fill: none; stroke: #8794a0; stroke-width: 10; stroke-linecap: round; }
.nm-template-card__flow { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 8; animation: nm-template-flow .9s linear infinite; }
.nm-template-card__rotor { fill: none; stroke: #52616d; stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: nm-template-rotor 1.15s linear infinite; }
.nm-template-card__valve { fill: #eef2f4; stroke: #52616d; stroke-width: 2.5; stroke-linejoin: round; }
.nm-template-card__meter { fill: #fff; }
.nm-template-card__needle { fill: none; stroke: #b3261e; stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: left center; animation: nm-template-needle 2.4s ease-in-out infinite alternate; }
@keyframes nm-template-flow { to { stroke-dashoffset: -30; } }
@keyframes nm-template-rotor { to { transform: rotate(360deg); } }
@keyframes nm-template-level { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes nm-template-needle { from { transform: rotate(-18deg); } to { transform: rotate(34deg); } }
@media (max-width: 760px) {
    .nm-template-picker { width: calc(100% - 16px); padding: 10px; }
    .nm-template-picker__head { display: grid; gap: 8px; }
    .nm-template-picker__badge { justify-self: start; }
    .nm-template-picker__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ TUVAL OGELERI */

/* Serbest deger kutusu: gercek semalarda "191,50 Bar" kutulari ekipmandan
   BAGIMSIZ duruyor, altina yapisik degil. */
.nmx-watch { fill: #ffffff; stroke: var(--nm-stage-line); stroke-width: 1; }
.nmx-watch.is-ruled { stroke: none; }

.nmx-affix { font-size: 10px; fill: #5c6771; }

/* Kural tuttugunda operatorun yazdigi metin. Renk tek tasiyici olmasin:
   "DEBI YOK" yazan bir oge, kirmizi bir ogeden fazlasini soyler. */
.nmx-rule {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
    fill: var(--nm-crit-ink); text-transform: uppercase;
}

/* Yanip sonme. Kac kuralda acilacagi OPERATORUN karari; ekran yalnizca
   sayar ve uyarir. Hareket duyarliligi olanlar icin kapaniyor -- o
   durumda renk ve metin zaten tasiyor. */
@keyframes nmx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
.nmx-node.is-blink { animation: nmx-blink 1.1s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) {
    .nmx-node.is-blink { animation: none; }
    /* Depo seviyesi ve yuzeyi de akmaz, yeni degere dogrudan oturur. */
    .nmx-tank__fill, .nmx-tank__surface { transition: none; }
    .nm-template-card, .nm-template-card__level, .nm-template-card__flow,
    .nm-template-card__rotor, .nm-template-card__needle { animation: none; transition: none; }
}

/* ---------------------------------------------------------------- SVG yukleme */
.nm-svgload { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--nm-line); border-radius: var(--nm-r-sm); background: var(--nm-sunken); }
.nm-svgload__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.nm-svgload .nm-btn { position: relative; overflow: hidden; cursor: pointer; white-space: nowrap; }
.nm-svgload .nm-btn.is-disabled { opacity: .55; pointer-events: none; }
.nm-svgload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nm-svgload__templates { display: grid; gap: 5px; }
.nm-svgload__template { display: grid; gap: 2px; width: 100%; padding: 7px 8px; cursor: pointer; text-align: left; font: inherit; color: var(--nm-ink-2); background: #fff; border: 1px solid var(--nm-line); border-radius: var(--nm-r-sm); }
.nm-svgload__template:hover:not(:disabled) { border-color: var(--nm-brand); color: var(--nm-ink); }
.nm-svgload__template:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 1px; }
.nm-svgload__template:disabled { opacity: .55; cursor: wait; }
.nm-svgload__template b { font-size: 10.5px; }
.nm-svgload__template span { font-size: 9px; line-height: 1.35; color: var(--nm-ink-3); }
.nm-svgload__warnings { font-size: 10.5px; color: var(--nm-warn-ink); }
.nm-svgload__warnings summary { cursor: pointer; font-weight: 700; }
.nm-svgload__warnings ul { margin: 5px 0 0; padding-left: 18px; }
.nm-hint.is-error { color: var(--nm-crit-ink); }
.nm-hint.is-ok { color: #216e4e; }

.nm-svgload__errors { display: grid; gap: 6px; padding: 8px 10px; font-size: 11px; color: var(--nm-crit-ink); background: #fdecea; border: 1px solid #f3c1bb; border-radius: var(--nm-r-sm); }
.nm-svgload__errors ul { margin: 0; padding-left: 18px; overflow-wrap: anywhere; }
.nm-svgload__errors .nm-hint { padding: 6px 8px; }

/* Satir ici cizim. Secim cercevesi ve tutamak ayri bir katmanda cizilir
   (.nmx-svgframe); ic ice <svg> uzerindeki outline tarayicilar arasinda
   tutarli degil. Parca vurgusu drop-shadow ile: grup ogelerinde de gorunur. */
.nmx-svg { overflow: visible; cursor: default; }
.nmx.is-edit .nmx-svg { cursor: move; }
.nmx.is-edit .nmx-svg [data-mimic-role="bind"] { cursor: crosshair; }
.nmx.is-edit .nmx-svg [data-nm-bound="0"] { filter: drop-shadow(0 0 1.5px var(--nm-warn)) drop-shadow(0 0 1.5px var(--nm-warn)); }
.nmx.is-edit .nmx-svg [data-nm-part-selected="1"] { filter: drop-shadow(0 0 2px var(--nm-brand)) drop-shadow(0 0 2px var(--nm-brand)); }
.nmx-svgframe .nmx-svgframe__box { pointer-events: none; }
.nmx.is-dragging .nmx-svg { cursor: grabbing; }
/* Kilitli cizim: tasinmaz; imlec bunu soyler. Parca baglama (Alt+tik) yine calisir. */
.nmx.is-edit .nmx-svg.is-locked { cursor: default; }
.nmx-svgframe.is-extra .nmx-svgframe__box { stroke-dasharray: 5 4; }

/* DUZENLE satiri ve katman listesi */
.nm-toolbar--arrange { padding-top: 4px; padding-bottom: 6px; border-top: 0; }
.nm-toolbar__label { font-size: 11px; font-weight: 700; color: var(--nm-ink-2); text-transform: uppercase; letter-spacing: .04em; }
.nm-tool--icon { padding-left: 6px; padding-right: 6px; }
.nm-tool--icon svg { width: 16px; height: 16px; }
.nm-arrange { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

.nm-layers { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.nm-layer { display: flex; align-items: center; gap: 2px; border: 1px solid var(--nm-line); border-radius: var(--nm-r-sm); background: #fff; }
.nm-layer.is-on { border-color: var(--nm-brand); box-shadow: 0 0 0 1px var(--nm-brand) inset; }
.nm-layer__name {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: inherit; font-size: 12px; text-align: left; color: var(--nm-ink);
    background: transparent; border: 0; padding: 6px 8px; cursor: pointer;
}
.nm-layer.is-locked .nm-layer__name { color: var(--nm-ink-2); }
.nm-layer__btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; color: var(--nm-ink-2); background: transparent; border: 0; border-radius: var(--nm-r-sm); cursor: pointer;
}
.nm-layer__btn svg { width: 15px; height: 15px; }
.nm-layer__btn:hover { color: var(--nm-ink); background: var(--nm-sunken); }
.nm-layer.is-locked .nm-layer__btn[aria-pressed="true"] { color: var(--nm-warn-ink); }
.nm-layer__name:focus-visible, .nm-layer__btn:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: -2px; }

.nm-svg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-svg-parts { display: grid; gap: 2px; max-height: 240px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.nm-svg-parts__item { display: grid; grid-template-columns: 10px 1fr; column-gap: 7px; width: 100%; padding: 5px 7px; text-align: left; font: inherit; color: var(--nm-ink); background: transparent; border: 1px solid transparent; border-radius: var(--nm-r-sm); cursor: pointer; }
.nm-svg-parts__item:hover, .nm-svg-parts__item:focus-visible { background: var(--nm-sunken); border-color: var(--nm-line); }
.nm-svg-parts__item code { font-size: 11px; overflow-wrap: anywhere; }
.nm-svg-parts__item > span:last-child { grid-column: 2; font-size: 10px; color: var(--nm-ink-3); }
.nm-svg-parts__item.is-unbound > span:last-child { color: var(--nm-warn-ink); }
.nm-svg-parts__dot { grid-row: span 2; align-self: center; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--nm-warn-ink); }
.nm-svg-parts__item.is-bound .nm-svg-parts__dot { background: #216e4e; border-color: #216e4e; }
.nm-svg-orphans { display: grid; gap: 6px; padding: 8px 10px; font-size: 11px; color: var(--nm-warn-ink); background: #fdf5e0; border: 1px solid #f0dca8; border-radius: var(--nm-r-sm); }
.nm-svg-orphans ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nm-svg-orphans li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.nm-svg-orphans code { overflow-wrap: anywhere; }
.nm-svg-part { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 8px; border: 1px solid var(--nm-line); border-radius: var(--nm-r-sm); background: var(--nm-sunken); }
.nm-svg-part code { overflow-wrap: anywhere; color: var(--nm-ink); }
.nm-svg-part span { font-size: 10px; color: var(--nm-ink-3); text-transform: uppercase; letter-spacing: .08em; }

/* ============================================================== KURAL
   "Su deger su esigin altindaysa kirmizi yak ve yanip sondur."
   Sira onemli: ILK TUTAN kazanir, o yuzden satirlar numarali ve
   tasinabilir.
   ==================================================================== */
.nm-rule {
    display: flex; flex-direction: column; gap: 7px;
    padding: 9px 10px; margin-bottom: 9px;
    background: var(--nm-sunken); border: 1px solid var(--nm-line);
    border-left: 3px solid var(--nm-line-2); border-radius: var(--nm-r-sm);
}

/* Su an tutan kural, editorde isaretli: esik girip sonucu baska yerde
   aramak, kural kurmayi angaryaya cevirir. */
.nm-rule.is-on { border-left-color: var(--nm-crit); background: #fdf3f2; }

.nm-rule__head { display: flex; align-items: center; gap: 6px; }

.nm-rule__no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
    font-size: 10.5px; color: #ffffff; background: var(--nm-ink-3);
}

.nm-rule.is-on .nm-rule__no { background: var(--nm-crit); }
.nm-rule__state { flex: 1; min-width: 0; font-size: 10.5px; color: var(--nm-ink-3); }
.nm-rule__head .nm-ghost { padding: 2px 6px; font-size: 11px; line-height: 1.2; }
.nm-ghost.is-danger { color: var(--nm-crit-ink); border-color: #f0c9c6; }

.nm-clause { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.nm-clause__lead { font-size: 10.5px; color: var(--nm-ink-3); min-width: 26px; }

.nm-input--mini  { width: 58px; flex: 0 0 auto; padding-inline: 5px; }
.nm-input--num   { width: 78px; flex: 0 0 auto; font-family: var(--nm-mono); }
.nm-input--label { flex: 1; min-width: 96px; }

.nm-rule__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.nm-rule__color { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--nm-ink-2); }
.nm-rule__color input { width: 26px; height: 22px; padding: 0; border: 1px solid var(--nm-line-2); border-radius: 3px; background: none; cursor: pointer; }

.nm-check { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--nm-ink-2); cursor: pointer; }
.nm-check input { margin: 0; }

/* Aktarma raporu: aktarilamayan ogeler. Sessizce dusurmek, semanin eksik
   oldugunu aylar sonra fark ettirmek olurdu. */
.nm-note__list { margin: 5px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.nm-note__list li { font-size: 11px; line-height: 1.5; }

/* ============================================== PALET: KATLANIR GRUPLAR
   Gruplar KAPALI basliyor. Katalogda ellinin uzerinde gorsel var; hepsini
   birden acmak paleti yirmi satirlik bir kaydirmaya cevirip aranan ogeyi
   bulmayi zorlastiriyordu.
   ==================================================================== */
.nm-pal__group {
    display: flex; align-items: center; gap: 6px; width: 100%;
    font: inherit; cursor: pointer; text-align: left;
    border: 0; border-radius: var(--nm-r-sm);
}

.nm-pal__group:hover { color: var(--nm-ink); background: var(--nm-sunken); }
.nm-pal__group:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: -1px; }

.nm-pal__group svg {
    width: 12px; height: 12px; flex: 0 0 auto; fill: none;
    stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .14s ease;
}

.nm-pal__group.is-open svg { transform: rotate(90deg); }
.nm-pal__group span { flex: 1; min-width: 0; }

.nm-pal__group b {
    font-size: 9.5px; font-weight: 600; letter-spacing: 0;
    color: var(--nm-ink-3); background: var(--nm-sunken);
    border-radius: 999px; padding: 1px 6px;
}

@media (prefers-reduced-motion: reduce) { .nm-pal__group svg { transition: none; } }

/* ======================================= BOYUTLANDIRMA VE TASIYICI
   Tutamak yalnizca SECILI ogede cizilir: hepsinde birden gostermek,
   tuvali yuzlerce kucuk kareyle doldurur ve ekipmanin kendisini
   gormeyi zorlastirirdi.
   ==================================================================== */
.nmx-handle {
    fill: #ffffff; stroke: var(--nm-brand); stroke-width: 1.2;
    cursor: pointer; pointer-events: all;
}

.nmx-handle:hover { fill: var(--nm-brand); }

/* Imlec yonu isi anlatir: kullanici cekmeden once ne olacagini bilir. */
.nmx-handle--nw, .nmx-handle--se { cursor: nwse-resize; }
.nmx-handle--ne, .nmx-handle--sw { cursor: nesw-resize; }
.nmx-handle--n,  .nmx-handle--s  { cursor: ns-resize; }
.nmx-handle--e,  .nmx-handle--w  { cursor: ew-resize; }

/* Boyutlandirma onizlemesi: surukleme bitene kadar ogenin butun cocuklarini
   tek tek buyutmek yerine cerceve ciziliyor. */
.nmx-rsz {
    fill: rgba(62, 175, 124, .1); stroke: var(--nm-brand);
    stroke-width: 1.2; stroke-dasharray: 4 3; pointer-events: none;
}

/* Tasiyici cercevesi: hangi ogenin uzerindekileri goturecegi, suruklemeden
   ONCE gorulsun. */
.nmx-carry {
    fill: none; stroke: var(--nm-brand); stroke-width: 1;
    stroke-dasharray: 6 4; opacity: .65; pointer-events: none;
}

.nm-check--row { justify-content: flex-start; padding: 2px 0; }

/* ============================================================== SEMALAR
   Bir istasyonda birden cok sema olabilir: genel gorunum + hat detaylari,
   gaz semasi + elektrik semasi, bolum bolum ayrilmis tesisler.
   ==================================================================== */
.nm-sheets {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 0 20px 8px; margin-top: -2px;
}

.nm-sheet {
    font: inherit; font-size: 12px; font-weight: 600; color: var(--nm-ink-2);
    background: var(--nm-sunken); border: 1px solid var(--nm-line);
    border-radius: var(--nm-r-sm); padding: 4px 12px; cursor: pointer;
    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: background .13s ease, color .13s ease;
}

.nm-sheet:hover { color: var(--nm-ink); border-color: var(--nm-line-2); }
.nm-sheet:focus-visible { outline: 2px solid var(--nm-brand); outline-offset: 1px; }

/* Acik sema, YUZEYIN rengini alir: altindaki tuvalle ayni kagit uzerinde
   oldugu okunsun. */
.nm-sheet.is-on {
    color: var(--nm-ink); background: var(--nm-surface);
    border-color: var(--nm-line-2); box-shadow: 0 1px 2px rgba(27,36,48,.08);
}

.nm-sheets__acts { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nm-sheets__acts .nm-ghost { padding: 3px 9px; font-size: 11px; }
.nm-sheets__ask { font-size: 11px; color: var(--nm-crit-ink); }
.nm-sheets__empty { font-size: 11.5px; color: var(--nm-ink-3); }

.nm-rename {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 0 20px 10px;
}

.nm-rename label { font-size: 11px; color: var(--nm-ink-3); }
.nm-rename .nm-input { width: 260px; }

/* ====================================================================
   ARAMALI DEGER SECICI (NewMimicValuePicker). Duz select yuzlerce
   etikette ise yaramiyordu: arama kutusu, canli olanlar ustte, her
   satirda ad + kisa kimlik + son deger ve birim.
   ==================================================================== */
.nm-picker { position: relative; min-width: 0; }
.nm-picker__current { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; text-align: left; cursor: pointer; }
.nm-picker__current:disabled { cursor: not-allowed; }
.nm-picker__current .nm-picker__meta { grid-column: 1; }
.nm-picker__caret { grid-column: 2; grid-row: 1 / span 2; color: var(--nm-ink-3); font-size: 11px; }
.nm-picker__placeholder { color: var(--nm-ink-3); }
.nm-picker__name { display: block; font-size: 12.5px; color: var(--nm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-picker__meta { display: block; font-size: 10.5px; color: var(--nm-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-picker__meta code { font-size: 10px; color: var(--nm-ink-2); margin-right: 4px; }
.nm-picker__panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
    display: grid; gap: 6px; padding: 8px;
    background: var(--nm-surface); border: 1px solid var(--nm-line-2);
    border-radius: var(--nm-r-sm); box-shadow: 0 10px 28px rgba(27, 36, 48, .16);
}
.nm-picker__head { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.nm-picker__list { display: grid; gap: 2px; max-height: 260px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.nm-picker__item {
    display: grid; grid-template-columns: 10px 1fr; column-gap: 7px; width: 100%; padding: 5px 7px;
    text-align: left; font: inherit; color: var(--nm-ink); background: transparent;
    border: 1px solid transparent; border-radius: var(--nm-r-sm); cursor: pointer;
}
.nm-picker__item:hover, .nm-picker__item:focus-visible { background: var(--nm-sunken); border-color: var(--nm-line); }
.nm-picker__item.is-on { border-color: var(--nm-brand); background: rgba(62, 175, 124, .08); }
.nm-picker__item .nm-picker__name, .nm-picker__item .nm-picker__meta { grid-column: 2; white-space: normal; }
.nm-picker__item.is-clear .nm-picker__name { grid-column: 1 / span 2; color: var(--nm-ink-3); }
.nm-picker__item.is-catalog .nm-picker__name { color: var(--nm-ink-2); }
.nm-picker__dot { grid-row: span 2; align-self: center; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--nm-line-2); }
.nm-picker__item.is-live .nm-picker__dot { background: #216e4e; border-color: #216e4e; }
.nm-picker__more { padding: 6px 7px; font-size: 10.5px; color: var(--nm-ink-3); }

/* ESIK DOGRULAMASI: hatali siralanmis alan kirmizi cerceve + altinda aciklama. */
.nm-input.is-invalid { border-color: var(--nm-crit); box-shadow: 0 0 0 3px rgba(244, 67, 54, .12); }
.nm-field__error { display: block; font-size: 10.5px; line-height: 1.4; color: var(--nm-crit-ink); }