/* js/viz/esfr-check.js — ESFR kesiti (tavan, sprinkler, serbest mesafe, depolama) ve 12 sprinklerlik tasarım alanı */
.esf-ctl { display: grid; gap: 10px; margin-bottom: 12px; }
.esf-g { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; align-items: start; }
.esf-gl { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; padding-top: 7px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.02em; }
.esf-g .cviz-chips { gap: 6px; }
.esf-g .cviz-chips button { font-size: 12px; padding: 5px 10px; }
.esf-sec svg, .esf-plan svg { display: block; width: 100%; height: auto; }
.esf-plan { margin-top: 4px; border-top: 1px solid var(--border, oklch(1 0 0 / 0.08)); padding-top: 6px; }
.esf-out { font-size: 0.86rem; }
.esf-t { fill: oklch(1 0 0 / 0.78); font-size: 12px; font-family: inherit; }
.esf-title { fill: var(--foreground, #fff); font-size: 13px; font-weight: 600; }
.esf-sm { font-size: 10.5px; font-family: var(--font-mono); }
.esf-dl, .esf-k, .esf-pl { fill: var(--accent); }
.esf-dim-t { fill: oklch(1 0 0 / 0.55); }
.esf-roof { fill: oklch(1 0 0 / 0.10); stroke: oklch(1 0 0 / 0.35); stroke-width: 1; transition: y .5s; }
.esf-floor { stroke: oklch(1 0 0 / 0.35); stroke-width: 1.5; }
.esf-load { fill: oklch(0.80 0.15 62 / 0.16); stroke: oklch(0.80 0.15 62 / 0.45); stroke-width: 0.8; }
.esf-beam { stroke: oklch(1 0 0 / 0.22); stroke-width: 1; }
.esf-drop { stroke: oklch(0.88 0.05 215 / 0.7); stroke-width: 2; }
.esf-defl { stroke: oklch(1 0 0 / 0.85); stroke-width: 2; stroke-linecap: round; }
.esf-bulb { fill: oklch(0.72 0.17 25); transition: opacity .25s; }
.esf-head.is-main .esf-bulb { animation: esf-pulse 0.7s ease-in-out infinite alternate; }
.is-open .esf-head.is-main .esf-bulb { opacity: 0; animation: none; }
.esf-cone { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0.15); transition: opacity .5s, transform .7s cubic-bezier(.2,.7,.2,1); }
.is-open .esf-cone { opacity: 1; transform: none; }
.esf-drop-l { stroke: var(--water, oklch(0.88 0.05 215)); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.is-open .esf-drop-l { animation: esf-fall 0.9s linear infinite; }
@keyframes esf-fall { from { transform: translate(0, 0); opacity: 0.9; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes esf-pulse { from { opacity: 0.55; } to { opacity: 1; } }
.esf-fire { transition: transform 1s ease, opacity 1s ease; animation: esf-flick 0.45s ease-in-out infinite alternate; }
.esf-flame { fill: oklch(0.70 0.19 40 / 0.85); }
.esf-flame-in { fill: oklch(0.88 0.15 85 / 0.9); }
@keyframes esf-flick { from { transform: scale(0.94, 0.98); } to { transform: scale(1.04, 1.06); } }
.is-sup .esf-fire { animation: none; transform: scale(0.28); opacity: 0.25; }
.esf-dim { stroke: oklch(1 0 0 / 0.5); stroke-width: 1; fill: none; }
.esf-dim.is-ok { stroke: var(--c-ok); }
.esf-dim.is-bad { stroke: var(--c-bad); }
.esf-t.is-ok { fill: var(--c-ok); }
.esf-t.is-bad { fill: var(--c-bad); font-weight: 600; }
.esf-br { stroke: oklch(0.88 0.05 215 / 0.45); stroke-width: 2; stroke-linecap: round; }
.esf-ph { fill: oklch(1 0 0 / 0.3); transition: fill .3s; }
.esf-ph.is-on { fill: var(--water, oklch(0.88 0.05 215)); }
.is-ban .esf-head, .is-ban .esf-load, .is-ban .esf-ph { opacity: 0.45; }
.is-ban .esf-head.is-main .esf-bulb { animation: none; }
.esf-ban { fill: oklch(0.2 0.04 25 / 0.96); stroke: var(--c-bad); stroke-width: 1.2; }
.esf-bant { fill: var(--c-bad); font-weight: 600; font-size: 12px; }
@media (max-width: 560px) {
  .esf-g { grid-template-columns: 1fr; gap: 4px; }
  .esf-gl { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .esf-fire, .esf-head.is-main .esf-bulb, .is-open .esf-drop-l { animation: none; }
  .esf-cone, .esf-fire, .esf-ph, .esf-roof { transition: none; }
}
.cviz-stage.is-still .esf-ctl { display: none; }
.cviz-stage.is-still .esf-fire, .cviz-stage.is-still .esf-drop-l, .cviz-stage.is-still .esf-bulb { animation: none; }
.cviz-stage.is-still .esf-cone, .cviz-stage.is-still .esf-fire { transition: none; }