/* ============================================================================
   NewMimic calisma zamani katmani (svg-kit v4)

   SVG'lerin ICINDE <style>, class, script ve SMIL yok. Durum ve hareketi bu
   katman yapar: uygulama bilesen kokune (data-mimic-component tasiyan oge)
   yalniz ozniteliklerle yazar, bu CSS gerisini cizer.
   Kapsam: her secici .mm-host altinda. @keyframes kapsanamaz; adlari
   mm-rt- onekiyle cakismaya karsi korunur.

     Kok oznitelikleri : data-alarm   none|warn|maint|crit
                         data-quality good|stale|offline
                         data-state   running|stopped|fault|open|closed
                         data-dir     forward|reverse|none
                         data-limits  on|off
     Kok degiskenleri  : --mm-level --mm-hh --mm-h --mm-l --mm-ll --mm-pos
                         --mm-flow-period  (canli veriden, uygulama yazar)
     Geometri          : dosyadaki style ozniteligi YALNIZ --mm-* degiskeni tasir
                         (--mm-fill-h, --mm-wave-len, --mm-lift, --mm-track-w).
                         Sanitize bunlari korur, baska her CSS'i ozniteliğe cevirir.
     Parca kancalari   : data-mimic-anim / -paint / -show / -hide
                         (sozluk: SVG_Hazirlama_Standardi.md §5)

   Her kural .mm-host altinda: uygulama her satir ici SVG'yi bu sinifli bir
   kapsayiciya koyar (NewMimic: <g class="mm-host"><svg class="nmx-svg">).
   Sinif bilesen kokunun USTUNDE olmali: kit dosyasinda bilesen koku <svg>'nin
   kendisidir ve secicilerin hepsi soy (descendant) secicisidir.
   Uygulamadaki kopya: AceX.Apps.Blazor.Components/wwwroot/mm-runtime.css
   (index.html yukler). Kit kopyasi ile icerik AYNI tutulur.
   ========================================================================= */

.mm-host {
    --mm-warn: #ffc107;  --mm-warn-ink: #8a6100;
    --mm-maint: #ab47bc; --mm-maint-ink: #7b2d8b;
    --mm-crit: #f44336;  --mm-crit-ink: #b3261e;
    --mm-on: #eef0f1;    --mm-off: #a8adb3;
    --mm-ink-2: #5b6875; --mm-ink-3: #8a96a3;
    --mm-alarm-stroke: 4;
}

/* ---- Gorunurluk: data-mimic-show varsayilan GIZLI ------------------------ */
.mm-host [data-mimic-show] { display: none; }

.mm-host [data-alarm="warn"]  [data-mimic-show~="warn"],
.mm-host [data-alarm="maint"] [data-mimic-show~="maint"],
.mm-host [data-alarm="crit"]  [data-mimic-show~="crit"],
.mm-host [data-quality="stale"]   [data-mimic-show~="stale"],
.mm-host [data-quality="offline"] [data-mimic-show~="offline"],
.mm-host [data-alarm="none"][data-quality="good"]    [data-mimic-show~="normal"],
.mm-host [data-alarm="none"][data-quality="stale"]   [data-mimic-show~="stale-quiet"],
.mm-host [data-alarm="none"][data-quality="offline"] [data-mimic-show~="offline-quiet"],
.mm-host [data-state="running"] [data-mimic-show~="running"],
.mm-host [data-state="stopped"] [data-mimic-show~="stopped"],
.mm-host [data-state="fault"]   [data-mimic-show~="fault"],
.mm-host [data-state="open"]    [data-mimic-show~="open"],
.mm-host [data-state="closed"]  [data-mimic-show~="closed"] { display: inline; }

/* Gizleme gosterimden SONRA gelir: ayni ozgulukte son kural kazanir. */
.mm-host [data-quality="offline"] [data-mimic-hide~="offline"],
.mm-host [data-quality="stale"]   [data-mimic-hide~="stale"],
.mm-host [data-dir="none"]        [data-mimic-hide~="noflow"],
.mm-host [data-limits="off"]      [data-mimic-hide~="nolimits"] { display: none; }

/* ---- Boya: alarm konturu, acik/kapali parlakligi, "guncel degil" soluklugu */
.mm-host [data-alarm="warn"]  [data-mimic-paint~="outline"] { stroke: var(--mm-warn);  stroke-width: var(--mm-alarm-stroke); }
.mm-host [data-alarm="maint"] [data-mimic-paint~="outline"] { stroke: var(--mm-maint); stroke-width: var(--mm-alarm-stroke); }
.mm-host [data-alarm="crit"]  [data-mimic-paint~="outline"],
.mm-host [data-state="fault"] [data-mimic-paint~="outline"] { stroke: var(--mm-crit);  stroke-width: var(--mm-alarm-stroke); }

/* Acik / enerjili = zeminden ACIK, kapali / durmus = zeminden KOYU. Renk degil. */
.mm-host [data-state="running"] [data-mimic-paint~="state-fill"],
.mm-host [data-state="open"]    [data-mimic-paint~="state-fill"] { fill: var(--mm-on); }
.mm-host [data-state="stopped"] [data-mimic-paint~="state-fill"],
.mm-host [data-state="closed"]  [data-mimic-paint~="state-fill"],
.mm-host [data-state="fault"]   [data-mimic-paint~="state-fill"] { fill: var(--mm-off); }

.mm-host [data-mimic-paint~="alarm-ink"] { fill: var(--mm-ink-2); }
.mm-host [data-alarm="warn"]  [data-mimic-paint~="alarm-ink"] { fill: var(--mm-warn-ink); }
.mm-host [data-alarm="maint"] [data-mimic-paint~="alarm-ink"] { fill: var(--mm-maint-ink); }
.mm-host [data-alarm="crit"]  [data-mimic-paint~="alarm-ink"],
.mm-host [data-state="fault"] [data-mimic-paint~="alarm-ink"] { fill: var(--mm-crit-ink); }

/* Guncel degil (stale): kesikli kontur, soluk deger, sivi rengini kaybeder. */
.mm-host [data-quality="stale"] [data-mimic-paint~="outline"] { stroke-dasharray: 8 5; }
.mm-host [data-quality="stale"] [data-mimic-paint~="liquid"]  { filter: grayscale(1); opacity: .55; }
.mm-host [data-quality="stale"] [data-mimic-paint~="value"]   { fill: var(--mm-ink-3); }
.mm-host [data-quality="stale"] [data-mimic-paint~="dim"]     { opacity: .6; }
.mm-host [data-quality="stale"] [data-mimic-paint~="age"]     { fill: var(--mm-warn-ink); font-weight: 700; }

/* Cevrimdisi: noktali gri kontur; deger kancalari zaten data-mimic-hide ile gider. */
.mm-host [data-quality="offline"] [data-mimic-paint~="outline"] { stroke: var(--mm-ink-3); stroke-dasharray: 2 4; }
.mm-host [data-quality="offline"] [data-mimic-paint~="state-fill"] { fill: #e4e7ea; }
.mm-host [data-quality="offline"] [data-mimic-paint~="dim"] { opacity: .35; }

/* ---- Hareket ------------------------------------------------------------- */
/* Seviye: dolum grubu alttan olceklenir. */
.mm-host [data-mimic-anim~="fill"] {
    transform-box: fill-box; transform-origin: 50% 100%;
    transform: scaleY(var(--mm-level, 1)); transition: transform .8s ease;
}
/* Yuzey ve limit cizgileri DOLUM ALANININ TEPESINE cizilir, asagi kaydirilir.
   --mm-fill-h: dolum alaninin yuksekligi (uygulama level parcasindan olcer). */
.mm-host [data-mimic-anim~="surface"]  { transform: translateY(calc((1 - var(--mm-level, 1)) * var(--mm-fill-h, 0px))); transition: transform .8s ease; }
.mm-host [data-mimic-anim~="limit-hh"] { transform: translateY(calc((1 - var(--mm-hh, 1)) * var(--mm-fill-h, 0px))); }
.mm-host [data-mimic-anim~="limit-h"]  { transform: translateY(calc((1 - var(--mm-h, 1))  * var(--mm-fill-h, 0px))); }
.mm-host [data-mimic-anim~="limit-l"]  { transform: translateY(calc((1 - var(--mm-l, 0))  * var(--mm-fill-h, 0px))); }
.mm-host [data-mimic-anim~="limit-ll"] { transform: translateY(calc((1 - var(--mm-ll, 0)) * var(--mm-fill-h, 0px))); }

.mm-host [data-mimic-anim~="wave"] { animation: mm-rt-wave var(--mm-wave-period, 3.2s) linear infinite; }
@keyframes mm-rt-wave { to { transform: translateX(var(--mm-wave-len, 52px)); } }

/* Akis: grubun icindeki cizgiler kesikli akar; yon kokteki data-dir'den. */
.mm-host [data-mimic-anim~="flow"] path {
    stroke-dasharray: 14 18;
    animation: mm-rt-flow var(--mm-flow-period, 1.4s) linear infinite;
}
.mm-host [data-dir="reverse"] [data-mimic-anim~="flow"] path { animation-direction: reverse; }
@keyframes mm-rt-flow { to { stroke-dashoffset: -32; } }

/* Oklar: HER OK KENDI YERINDE doner ve akar. Grup olarak aynalamak, uzun ve
   duzensiz hatlarda oklari boru disina tasir (ayna ekseni grubun ortasidir).
   Ters yondeki temel donusum animasyon kapaliyken de (guncel degil, hareket azaltma)
   gecerli kalir; boylece ok yonu hicbir durumda yanlis gostermez. */
.mm-host [data-mimic-anim~="arrows"] > *,
.mm-host [data-mimic-anim~="arrows-y"] > * { transform-box: fill-box; transform-origin: 50% 50%; }
.mm-host [data-mimic-anim~="arrows"] > *   { animation: mm-rt-arrow-x var(--mm-flow-period, 1.4s) linear infinite; }
.mm-host [data-mimic-anim~="arrows-y"] > * { animation: mm-rt-arrow-y var(--mm-flow-period, 1.4s) linear infinite; }
.mm-host [data-dir="reverse"] [data-mimic-anim~="arrows"] > *   { transform: scaleX(-1); animation-name: mm-rt-arrow-x-rev; }
.mm-host [data-dir="reverse"] [data-mimic-anim~="arrows-y"] > * { transform: scaleY(-1); animation-name: mm-rt-arrow-y-rev; }
@keyframes mm-rt-arrow-x {
    0%   { transform: translateX(-10px); opacity: 0; }
    25%, 75% { opacity: 1; }
    100% { transform: translateX(10px); opacity: 0; }
}
@keyframes mm-rt-arrow-x-rev {
    0%   { transform: translateX(10px) scaleX(-1); opacity: 0; }
    25%, 75% { opacity: 1; }
    100% { transform: translateX(-10px) scaleX(-1); opacity: 0; }
}
@keyframes mm-rt-arrow-y {
    0%   { transform: translateY(-10px); opacity: 0; }
    25%, 75% { opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}
@keyframes mm-rt-arrow-y-rev {
    0%   { transform: translateY(10px) scaleY(-1); opacity: 0; }
    25%, 75% { opacity: 1; }
    100% { transform: translateY(-10px) scaleY(-1); opacity: 0; }
}

/* Donme: merkez = grubun sinir kutusu merkezi. Yazar, gobege ortali gorunmez
   bir daire koyarak merkezi sabitler (standart §5). */
.mm-host [data-mimic-anim~="spin"] { transform-box: fill-box; transform-origin: 50% 50%; }
.mm-host [data-state="running"] [data-mimic-anim~="spin"] { animation: mm-rt-spin 1.1s linear infinite; }
@keyframes mm-rt-spin { to { transform: rotate(360deg); } }

.mm-host [data-mimic-anim~="lift"] { transition: transform .4s ease; }
.mm-host [data-state="open"] [data-mimic-anim~="lift"] { transform: translateY(calc(-1 * var(--mm-lift, 10px))); }

.mm-host [data-mimic-anim~="pointer"] {
    transform: translateX(calc(var(--mm-pos, 0.5) * var(--mm-track-w, 0px)));
    transition: transform .6s ease;
}

/* Guncel degil (stale): hareket DURUR (bilmedigimiz seyi iddia etmeyiz). Cevrimdisi: hic yok. */
.mm-host [data-quality="stale"] [data-mimic-anim~="wave"],
.mm-host [data-quality="stale"] [data-mimic-anim~="flow"] path { animation-play-state: paused; }
/* Oklar guncel degilken DURAGAN ve gorunur kalir (duraklatilirsa saydam anda donabilir). */
.mm-host [data-quality="stale"] [data-mimic-anim~="spin"],
.mm-host [data-quality="stale"] [data-mimic-anim~="arrows"] > *,
.mm-host [data-quality="stale"] [data-mimic-anim~="arrows-y"] > *,
.mm-host [data-quality="offline"] [data-mimic-anim],
.mm-host [data-quality="offline"] [data-mimic-anim] * { animation: none; }
.mm-host [data-quality="offline"] [data-mimic-anim~="lift"] { transform: none; }

/* Hareket azaltma: donme, akis, dalga, ok, seviye/ibre/mil gecisi -- HEPSI kapanir.
   Durum yine ton, sekil ve sozcukle okunur. */
@media (prefers-reduced-motion: reduce) {
    .mm-host [data-mimic-anim],
    .mm-host [data-mimic-anim] * { animation: none !important; transition: none !important; }
}