/* ioWORK · Proje 219 Kalorif — kumanda paneli (PWA ve Kule ortak; her iki kabuğun --s1/--s3/--cy/--ye/--gr/--rd/--mute/--fg/--line değişkenlerini kullanır) */
.kf { position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r, 20px); padding: 18px; --acc: var(--cy); --acc-ink: #04141a; }
.kf.run { --acc: var(--gr); --acc-ink: #06200f; }
.kf.wait { --acc: var(--ye); --acc-ink: #231c00; }
.kf.done { --acc: var(--gr); }
.kf.fault { --acc: var(--rd); border-color: rgba(255,77,77,.45); box-shadow: 0 0 0 4px rgba(255,77,77,.07); }
.kf.offline { border-color: rgba(255,212,0,.35); }
.kf.compact { padding: 14px; }
.kf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.kf-title { font-weight: 700; font-size: 17px; }
.kf.compact .kf-title { font-size: 15px; }
.kf-sync { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--s3); color: var(--mute); white-space: nowrap; }
.kf-sync i { width: 8px; height: 8px; border-radius: 50%; background: #5c6270; }
.kf-sync.ok { color: var(--gr); } .kf-sync.ok i { background: var(--gr); box-shadow: 0 0 0 4px rgba(61,220,132,.15); }
.kf-sync.wait { color: var(--ye); } .kf-sync.wait i { background: var(--ye); }
.kf-sync.queued { color: var(--ye); } .kf-sync.queued i { background: var(--ye); animation: kfblink 1.2s infinite; }
.kf-sync.fault { color: var(--rd); } .kf-sync.fault i { background: var(--rd); }
@keyframes kfblink { 50% { opacity: .3; } }

/* durum: halka + açıklama */
.kf-state { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.kf.compact .kf-state { grid-template-columns: 92px 1fr; gap: 12px; }
.kf-ring { position: relative; width: 112px; height: 112px; }
.kf.compact .kf-ring { width: 92px; height: 92px; }
.kf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kf-ring .bg { fill: none; stroke: var(--s3); stroke-width: 8; }
.kf-ring .fg { fill: none; stroke: var(--acc); stroke-width: 8; stroke-linecap: round; stroke-dasharray: calc(var(--p, 0) * 100) 100; transition: stroke-dasharray .8s cubic-bezier(.2,.8,.2,1), stroke .3s; }
.kf.run .kf-ring .fg { filter: drop-shadow(0 0 6px rgba(61,220,132,.5)); }
.kf-ring-in { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.kf-ring-in b { display: block; font-size: 32px; font-weight: 700; letter-spacing: -.04em; color: var(--acc); font-variant-numeric: tabular-nums; }
.kf.compact .kf-ring-in b { font-size: 26px; }
.kf-ring-in b small { font-size: 12px; color: var(--mute); margin-left: 3px; font-weight: 500; letter-spacing: 0; }
.kf-ring-in span { display: block; margin-top: 6px; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
.kf-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kf-st { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--acc); }
.kf.compact .kf-st { font-size: 20px; }
.kf-sub { color: var(--mute); font-size: 14px; }
.kf.compact .kf-sub { font-size: 13px; }
/* akış yönü: boru içinde kayan noktalar; .rev geri akar; .on değilse durur */
.kf-flow { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; height: 18px; padding: 0 10px; border-radius: 999px; background: var(--s3); width: max-content; max-width: 100%; }
.kf-flow i { width: 5px; height: 5px; border-radius: 50%; background: var(--mute); opacity: .35; }
.kf-flow.on i { background: var(--acc); animation: kfflow 1.2s linear infinite; }
.kf-flow.on i:nth-child(2) { animation-delay: -.24s; } .kf-flow.on i:nth-child(3) { animation-delay: -.48s; } .kf-flow.on i:nth-child(4) { animation-delay: -.72s; } .kf-flow.on i:nth-child(5) { animation-delay: -.96s; }
.kf-flow.on.rev i { animation-direction: reverse; }
.kf-flow em { font-style: normal; font-size: 11px; color: var(--mute); margin-left: 6px; white-space: nowrap; }
@keyframes kfflow { 0% { transform: translateX(-6px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(6px); opacity: 0; } }

/* canlı ölçümler */
.kf-meas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.kf.compact .kf-meas { grid-template-columns: repeat(2, 1fr); }
.kf-meas div { background: var(--s2, var(--s3)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 8px; min-width: 0; }
.kf-meas span { display: block; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.kf-meas b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kf.compact .kf-meas b { font-size: 19px; }
.kf-meas b small { font-size: 11px; color: var(--mute); margin-left: 4px; font-weight: 500; letter-spacing: 0; }

/* kumanda */
.kf-ctl { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.kf-lbl { font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 6px; }
.kf-lbl:first-child { margin-top: 0; }
.kf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kf-chip { flex: 1; min-width: 64px; height: 38px; border: 0; border-radius: 11px; background: var(--s3); color: var(--fg); font: 600 14px "Host Grotesk", system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.kf.compact .kf-chip { height: 34px; font-size: 13px; min-width: 56px; }
.kf-chip:active { transform: scale(.97); }
.kf-chip.on { background: var(--cy); color: #04141a; }
.kf-row { display: grid; grid-template-columns: auto 52px 1fr 52px; align-items: center; gap: 10px; margin-top: 8px; }
.kf-row .kf-lbl { margin: 0; min-width: 44px; }
.kf-row b { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kf-row b small { font-size: 13px; color: var(--mute); margin-left: 4px; font-weight: 500; }
.kf-round { height: 52px; border: 0; border-radius: 14px; background: var(--s3); color: var(--fg); font: 700 26px/1 "Host Grotesk", system-ui, sans-serif; cursor: pointer; transition: transform .15s; }
.kf-round:active { transform: scale(.96); }
.kf.compact .kf-round { height: 42px; font-size: 22px; }
.kf-go { width: 100%; margin-top: 14px; height: 56px; border: 0; border-radius: 14px; background: var(--cy); color: #04141a; font: 700 16px "Host Grotesk", system-ui, sans-serif; cursor: pointer; transition: background .2s, transform .15s; }
.kf-go.on { background: rgba(255,77,77,.14); color: var(--rd); border: 1px solid rgba(255,77,77,.35); }
.kf-go:active { transform: scale(.985); }
.kf.compact .kf-go { height: 46px; font-size: 15px; }
.kf-note { margin: 12px 0 0; font-size: 13px; color: var(--mute); }
.kf-queue { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,212,0,.07); border: 1px dashed rgba(255,212,0,.35); font-size: 14px; color: var(--mute); }
.kf-queue b { color: var(--fg); }
.kf-queue .q-anim { display: inline-flex; gap: 4px; align-items: center; margin-top: 6px; }
.kf-queue .q-anim i { width: 6px; height: 6px; border-radius: 50%; background: var(--ye); opacity: .25; animation: kfqdot 1.5s infinite; }
.kf-queue .q-anim i:nth-child(2) { animation-delay: .25s; } .kf-queue .q-anim i:nth-child(3) { animation-delay: .5s; }
@keyframes kfqdot { 0%, 60%, 100% { opacity: .25; transform: translateX(0); } 30% { opacity: 1; transform: translateX(3px); } }
.kf.busy .kf-ctl { opacity: .55; pointer-events: none; }

/* proses grafiği kutusu (PWA .signal ve Kule .chart ile aynı boyut sınıflarını kullanır) */
.kf-chart .lbl { position: absolute; left: 16px; top: 14px; font-size: 13px; color: var(--mute); }
@media (max-width: 420px) { .kf-meas { grid-template-columns: repeat(2, 1fr); } .kf-state { grid-template-columns: 96px 1fr; } .kf-ring { width: 96px; height: 96px; } }
@media (prefers-reduced-motion: reduce) { .kf-flow.on i, .kf-sync.queued i, .kf-queue .q-anim i { animation: none; opacity: 1; } .kf-ring .fg { transition: none; } }

/* v2 (makine modeli): komut düğmeleri, sonuç satırı, seviye uyarısı */
.kf-cmds { display: grid; grid-template-columns: 1fr; gap: 8px; }
.kf-cmds:has(.kf-cmd + .kf-cmd) { grid-template-columns: 1fr 1fr; }
.kf-cmd { height: 52px; border: 1px solid var(--line); border-radius: 14px; background: var(--s3); color: var(--fg); font: 700 15px "Host Grotesk", system-ui, sans-serif; cursor: pointer; transition: background .2s, transform .15s; }
.kf-cmd:first-child:last-child { grid-column: 1 / -1; }
.kf-cmd.pri { background: var(--cy); color: #04141a; border-color: transparent; }
.kf-cmd.stop { background: rgba(255,77,77,.14); color: var(--rd); border-color: rgba(255,77,77,.35); }
.kf-cmd.warn { background: rgba(255,212,0,.14); color: var(--ye); border-color: rgba(255,212,0,.35); }
.kf-cmd:disabled { opacity: .45; cursor: default; }
.kf-cmd:active:not(:disabled) { transform: scale(.985); }
.kf.compact .kf-cmd { height: 44px; font-size: 14px; }
.kf-result { margin: 10px 0 0; font-size: 13px; color: var(--mute); font-family: "Bedstead", ui-monospace, monospace; letter-spacing: .02em; }
.kf-result.bad { color: var(--rd); }
.kf-meas b.bad { color: var(--rd); }
.kf-ring-in b.mono { font-size: 24px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.kf.compact .kf-ring-in b.mono { font-size: 20px; }
.kf-go.quiet { background: var(--s3); color: var(--mute); }
.kf-go:disabled { opacity: .45; cursor: default; }
.kf-round:disabled { opacity: .35; cursor: default; }

/* ayarlar katlanır; panel daha sıkı */
.kf-fold { margin-top: 10px; border-top: 1px dashed var(--line); }
.kf-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 10px 0 4px; font-weight: 700; font-size: 14px; }
.kf-fold > summary::-webkit-details-marker { display: none; }
.kf-fold > summary small { color: var(--mute); font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-fold > summary::after { content: "›"; margin-left: auto; color: var(--mute); transform: rotate(90deg); transition: transform .2s; }
.kf-fold[open] > summary::after { transform: rotate(-90deg); }
.kf { padding: 14px; } .kf-top { margin-bottom: 10px; } .kf-meas { margin-top: 10px; } .kf-ctl { margin-top: 10px; padding-top: 8px; }
.kf-state { grid-template-columns: 96px 1fr; } .kf-ring { width: 96px; height: 96px; } .kf-ring-in b { font-size: 28px; } .kf-st { font-size: 21px; }