/* faz1/scenes.css · the scenes (faz1/scenes.js, docs/faz1/SCENES.md). Every selector starts with #f1-scene, an .f1sc- class
 * or #f1-app.f1sc-*. Line drawings follow the hypermonk network figure: thin grey hairlines, white plates, one accent.
 * Transitions: .f1sc-dim opacity (disabled by #f1-app.f1-instant like every other transition).
 */
:root {
  --f1sc-plate: var(--pro-panel, #ffffff); --f1sc-hi: #26292f; --f1sc-edge: #9b9ca5; --f1sc-mid: #b7b8c0; --f1sc-lo: #dadbe0;
  --f1sc-wire: #3a3f48; --f1sc-doc-ink: #1a1a1a; --f1sc-doc-stroke: #1a1a1a; --f1sc-ear: #d8cfbb;
  --f1sc-warn-ink: #8a6500;
}
:root[data-film-theme="dark"] {
  --f1sc-hi: #e4e8ef; --f1sc-edge: #8a95a6; --f1sc-mid: #677184; --f1sc-lo: #3d4553;
  --f1sc-wire: #c3cad6; --f1sc-doc-ink: #ecebe6; --f1sc-doc-stroke: #b9b2a2; --f1sc-ear: #6c6352; --f1sc-warn-ink: #f0c75a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-film-theme]) {
    --f1sc-hi: #e4e8ef; --f1sc-edge: #8a95a6; --f1sc-mid: #677184; --f1sc-lo: #3d4553;
    --f1sc-wire: #c3cad6; --f1sc-doc-ink: #ecebe6; --f1sc-doc-stroke: #b9b2a2; --f1sc-ear: #6c6352; --f1sc-warn-ink: #f0c75a;
  }
}

/* ------------------------------------------------------------------ hosts */
#f1-scene.f1sc-stage {
  position: absolute; z-index: 33; inset: 12px 16px; display: flex; flex-direction: column;
  background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 14px; box-shadow: 0 12px 36px rgba(20, 30, 40, .16); overflow: hidden;
}
.f1sc-head { flex: none; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--pro-line); }
.f1sc-kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pro-accent); background: var(--pro-focus); padding: 2px 8px; border-radius: 6px; }
.f1sc-title { font-size: 15px; font-weight: 650; color: var(--pro-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f1sc-sub { color: var(--pro-text2); font-size: 12.5px; }
#f1-scene .f1sc-close {
  margin-left: auto; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--pro-line); background: var(--pro-panel);
  color: var(--pro-text2); font-size: 13px; font-weight: 550; display: inline-flex; align-items: center; gap: 6px;
}
#f1-scene .f1sc-close:hover { border-color: var(--pro-accent); color: var(--pro-accent); }
.f1sc-body { position: relative; flex: 1 1 auto; min-height: 0; }
.f1sc-root { position: absolute; inset: 0; padding: 10px 14px 12px; overflow: hidden; }
.f1sc-svg { width: 100%; height: 100%; display: block; overflow: hidden; font-family: var(--f1-sans); font-size: 17px; }
/* 24 Oct 2026, H16e (SCENES.md 3.25): a live drawing (Deneysel G1, faz1/deneysel-pulse.js) lies under the scene's SVG, which
   holds only the parts' frames; the host is placed over the SVG's picture box by faz1/scenes.js (liveLayout) */
.f1sc-root > .f1sc-live { position: absolute; left: 0; top: 0; pointer-events: none; }
.f1sc-svg.f1sc-live-svg { position: relative; }
.f1sc-right { position: absolute; inset: 0; z-index: 5; background: var(--pro-panel); }
.f1sc-right .f1sc-root { padding: 2px 3px 3px; }
#f1-app.f1sc-right-on #f1-ui > :not(.f1sc-right) { display: none !important; }
#f1-app.f1sc-stage-on #f1-nav { visibility: hidden; }
/* the stage card is the picture of the moment: an illustration card would lie on it (SENARYO-ILKELERI: nothing covers the focal thing) */
#f1-app.f1sc-stage-on #f1-illus { display: none !important; }
/* the stage card has fully come in over the three panels: their bodies are not styled, laid out or painted under it (their DOM
   still follows the story; layout reads still answer). Leo 19 Oct 2026, H31b.3:2 (note 18): every beat restyled the hidden
   map, flow and dashboard, 70-300 ms frames (scenes.js coverPanels) */
#f1-app.f1sc-stage-cover .f1-panel > .f1-panel-body { content-visibility: hidden; }
/* the closed scene's way back: a button in the bottom bar (21 Oct 2026, Leo H07t.1: floating over the stage it covered the
   Arayüz panel's own switch); only outside the bar (no bar: a test host) it floats in the stage's corner */
.f1sc-reopen {
  position: absolute; z-index: 33; right: 28px; top: 20px; height: 30px; padding: 0 14px; border-radius: 15px;
  border: 1px solid var(--pro-accent); background: var(--pro-focus); color: var(--pro-accent); font-size: 12.5px; font-weight: 650; box-shadow: var(--f1-shadow);
}
#f1-controls > .f1sc-reopen { position: static; z-index: auto; height: auto; box-shadow: none; border-color: var(--pro-accent); color: var(--pro-accent); }
#f1-controls > .f1sc-reopen[hidden] { display: none; }

/* ------------------------------------------------------------------ states, focus, highlight */
.f1sc-svg [data-part], .f1sc-svg [data-of] { transition: opacity .35s ease; }
.f1sc-svg .f1sc-dim { opacity: .22; }
/* a c23 window opens out of a focused part: the dimmed parts step aside for it (scenes.js apply, SENARYO-ILKELERI 47) */
.f1sc-svg.f1sc-yer .f1sc-dim { visibility: hidden; }
.f1sc-svg .f1sc-off { visibility: hidden; opacity: 0; }
.f1sc-svg .f1sc-off.f1sc-gone { display: none; }   /* out of the box measure too (the camera move) */
.f1sc-hl { fill: none; stroke: none; pointer-events: visible; }
.f1sc-svg [data-part].f1-cue > .f1sc-hl { fill: color-mix(in srgb, var(--pro-accent) 7%, transparent); stroke: var(--pro-accent); stroke-width: 2.2; }
/* a part that is a line (the match lines) is lit along the line itself, not by a box around it */
.f1sc-hl.f1sc-hl-line { pointer-events: stroke; stroke-width: 14; }
.f1sc-svg [data-part].f1-cue > .f1sc-hl.f1sc-hl-line { fill: none; stroke: color-mix(in srgb, var(--pro-accent) 28%, transparent); stroke-width: 12; stroke-linecap: round; }
/* a drawing is measured once after it is built (scenes.js fitHl: a lit frame never crosses a neighbouring part) */
#f1-app > .f1sc-measure-host { position: absolute; left: -30000px; top: 0; width: 1600px; height: 800px; visibility: hidden; pointer-events: none; overflow: hidden; }
.f1sc-svg[data-state="icine-gir"] .f1sc-cam { transform: var(--f1sc-zoom); }

/* ------------------------------------------------------------------ text */
.f1sc-t { fill: var(--pro-ink); }
.f1sc-t2 { fill: var(--pro-text2); }
.f1sc-svg text.f1sc-t:not([font-size]) { font-size: 17px; }
.f1sc-svg text.f1sc-t2:not([font-size]) { font-size: 14.5px; }
.f1sc-tb { font-weight: 650; }
.f1sc-it { font-style: italic; }
.f1sc-lab text, .f1sc-it, .f1sc-bound-t { paint-order: stroke; stroke: var(--f1sc-plate); stroke-width: 5px; stroke-linejoin: round; }
.f1sc-warn-t { fill: var(--f1sc-warn-ink); }
.f1sc-ok-t { fill: var(--st-ok); }

/* ------------------------------------------------------------------ the hypermonk line drawings */
.f1sc-art :is(path, polygon, ellipse, line) { fill: var(--f1sc-plate); stroke: var(--f1sc-mid); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.f1sc-art .a-nf { fill: none; }
.f1sc-art .a-sil { stroke: var(--f1sc-edge); }
.f1sc-art .a-hi { stroke: var(--f1sc-hi); }
.f1sc-art .a-lo { stroke: var(--f1sc-lo); }
.f1sc-art .a-fo { stroke: var(--f1sc-lo); }
.f1sc-art .a-dot { stroke: none; fill: var(--f1sc-hi); }
.f1sc-art .a-dot.a-off { fill: var(--f1sc-lo); }
.f1sc-art .a-dot.a-m { fill: var(--f1sc-edge); }
.f1sc-faded { opacity: .5; }
.f1sc-strike { stroke: var(--st-crit); stroke-width: 2.2; stroke-linecap: round; opacity: .55; fill: none; }
.f1sc-mini { opacity: .9; }

/* wires and their flowing dots */
.f1sc-cable { fill: none; stroke: var(--f1sc-wire); stroke-width: 1.1; }
.f1sc-wire-dash .f1sc-cable { stroke: var(--f1sc-edge); stroke-dasharray: 3 6; stroke-width: 1.3; }
.f1sc-pulse { fill: var(--f1sc-wire); }
/* a dot leaving KSS is a ring, a dot coming into KSS is filled (a both-ways wire shows both, in two lanes) */
.f1sc-pulse[data-way="out"] { fill: var(--f1sc-plate); stroke: var(--f1sc-wire); stroke-width: 1.3; }
.f1sc-flow .f1sc-cable { stroke: var(--f1sc-edge); stroke-width: 1.4; }
.f1sc-flow .f1sc-pulse { fill: var(--pro-accent); }

/* the network boundary, the program boxes, the server's rooms */
.f1sc-bound { fill: color-mix(in srgb, var(--pro-accent) 3%, transparent); stroke: var(--pro-accent); stroke-width: 1.5; stroke-dasharray: 8 7; }
.f1sc-bound-t { fill: var(--pro-accent); font-size: 16px; }
.f1sc-box { fill: var(--f1sc-plate); stroke: var(--f1sc-edge); stroke-width: 1.2; }
.f1sc-box-bar { stroke: var(--f1sc-lo); stroke-width: 1.2; fill: none; }
.f1sc-box-dot { fill: var(--f1sc-mid); }
.f1sc-face { fill: color-mix(in srgb, var(--pro-accent) 8%, var(--f1sc-plate)); stroke: var(--pro-accent); stroke-width: .5; }
.f1sc-room { fill: var(--f1sc-plate); stroke: var(--pro-accent); stroke-width: .45; }

/* ------------------------------------------------------------------ sunucu-ici */
.f1sc-kasa { fill: color-mix(in srgb, var(--pro-soft) 75%, var(--pro-panel)); stroke: var(--f1sc-edge); stroke-width: 1.4; }
.f1sc-room-box { fill: var(--pro-panel); stroke: var(--f1sc-edge); stroke-width: 1.2; }
.f1sc-ic { fill: none; stroke: var(--f1sc-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.f1sc-ic-lo { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.4; stroke-linecap: round; }
.f1sc-ic-acc { fill: none; stroke: var(--pro-accent); stroke-width: 2.4; stroke-linecap: round; }
.f1sc-ic-acc-f { fill: color-mix(in srgb, var(--pro-accent) 18%, transparent); stroke: var(--pro-accent); stroke-width: 1.5; stroke-linejoin: round; }
.f1sc-ic-file { fill: color-mix(in srgb, var(--fam-work) 12%, transparent); stroke: var(--fam-work); stroke-width: 1.8; }
.f1sc-ic-doc { fill: var(--fam-doc); stroke: var(--f1sc-doc-stroke); stroke-width: 1; }
.f1sc-ic-ok { fill: none; stroke: var(--st-ok); stroke-width: 2.2; stroke-linecap: round; }

/* ------------------------------------------------------------------ tarama: the page, the scan, the fields, the file circle */
.f1sc-paper { fill: var(--kagit); stroke: var(--kagit-kenar); stroke-width: 1; filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .14)); }
.f1sc-paper-head { fill: rgba(0, 0, 0, .06); }
.f1sc-paper-line { fill: none; stroke: rgba(0, 0, 0, .2); stroke-width: .8; }
.f1sc-paper-box { fill: none; stroke: rgba(0, 0, 0, .4); stroke-width: .9; }
.f1sc-ink { fill: var(--baski, #1a1a1a); }
.f1sc-ink2 { fill: var(--baski-gri, #6b6b6b); }
.f1sc-sig { fill: none; stroke: var(--tukenmez-lacivert, #1e2466); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.f1sc-sig-t { fill: var(--tukenmez-lacivert, #1e2466); font-style: italic; }
.f1sc-field { fill: none; stroke: var(--pro-accent); stroke-width: 1.6; }
.f1sc-svg:not([data-state="tara"]) .f1sc-field { fill: color-mix(in srgb, var(--pro-accent) 13%, transparent); stroke-width: 2; }
.f1sc-svg[data-state="imza-bekliyor"] [data-part="imza"] .f1sc-field { stroke: var(--st-warn); fill: color-mix(in srgb, var(--st-warn) 16%, transparent); stroke-width: 2.4; }
.f1sc-svg[data-state="imzalandi"] [data-part="imza"] .f1sc-field { stroke: var(--st-ok); fill: color-mix(in srgb, var(--st-ok) 12%, transparent); }
.f1sc-scan { pointer-events: none; }
.f1sc-scan-band { fill: color-mix(in srgb, var(--pro-accent) 14%, transparent); }
.f1sc-scan-line { stroke: var(--pro-accent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pro-accent) 80%, transparent)); }
.f1sc-leader { fill: none; stroke: var(--pro-accent); stroke-width: 1.3; opacity: .75; }
.f1sc-leader-dot { fill: var(--pro-accent); }
.f1sc-tag-box { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.3; }
.f1sc-tag-n { fill: var(--pro-accent); }
.f1sc-svg[data-state="imza-bekliyor"] [data-part="imza"] .f1sc-tag-box { stroke: var(--st-warn); stroke-width: 2; }
.f1sc-svg[data-state="imzalandi"] [data-part="imza"] .f1sc-tag-box { stroke: var(--st-ok); stroke-width: 2; }
.f1sc-file { fill: color-mix(in srgb, var(--fam-work) 9%, var(--pro-panel)); stroke: var(--fam-work); stroke-width: 2.2; }
.f1sc-fmark { fill: var(--fam-work); stroke: var(--pro-panel); stroke-width: 2; }
.f1sc-fmark-t { fill: var(--fam-work-ink); font-weight: 700; }
.f1sc-sub-c { fill: var(--fam-doc); stroke: var(--f1sc-doc-stroke); stroke-width: 1.1; }
.f1sc-sub-ear { fill: var(--f1sc-ear); }
.f1sc-sub-code { fill: var(--f1sc-doc-ink); font-weight: 700; letter-spacing: .02em; }
.f1sc-sub-imza .f1sc-sub-c { fill: var(--pro-panel); stroke: var(--st-wait); stroke-width: 1.8; stroke-dasharray: 4 3; }
.f1sc-sub-imza .f1sc-sub-code { fill: var(--pro-muted); }
.f1sc-svg[data-state="imza-bekliyor"] .f1sc-sub-imza .f1sc-sub-c { stroke: var(--st-warn); stroke-width: 2.4; }
.f1sc-svg[data-state="imzalandi"] .f1sc-sub-imza .f1sc-sub-c { fill: var(--st-ok); stroke: var(--st-ok); stroke-dasharray: none; }
.f1sc-check { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.f1sc-flyer { fill: var(--pro-accent); stroke: var(--pro-panel); stroke-width: 2; }
.f1sc-flyer-b { fill: var(--saffron); }

/* ------------------------------------------------------------------ iletisim */
.f1sc-bubble { fill: var(--pro-panel); stroke: var(--pro-accent); stroke-width: 1.5; filter: drop-shadow(0 3px 8px rgba(20, 30, 40, .1)); }
.f1sc-pill { fill: var(--pro-focus); stroke: var(--pro-accent); stroke-width: 1.4; }
.f1sc-card { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.3; }
.f1sc-wavebars path { stroke: var(--f1sc-hi); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.f1sc-acc-bars path { stroke: var(--pro-accent); }
.f1sc-table { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.3; }
.f1sc-rowline { stroke: var(--pro-line); stroke-width: 1.2; fill: none; }
.f1sc-colhl { fill: color-mix(in srgb, var(--pro-accent) 9%, transparent); stroke: var(--pro-accent); stroke-width: 1.5; }
.f1sc-mini-file { fill: var(--fam-work); }
.f1sc-mini-file-t { fill: var(--fam-work-ink); font-weight: 700; }
.f1sc-svg[data-state="kayit"] .f1sc-file-t { fill: var(--pro-accent); font-weight: 650; }
.f1sc-logline { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.4; stroke-dasharray: 4 5; }

/* ------------------------------------------------------------------ yaziya-dokme */
.f1sc-bars path { stroke-linecap: round; fill: none; }
.f1sc-seg-a .f1sc-bars path { stroke: var(--fam-work); }
.f1sc-seg-b .f1sc-bars path { stroke: var(--saffron); }
.f1sc-seg-a .f1sc-seg-who, .f1sc-who.f1sc-seg-a { fill: var(--fam-work); }
.f1sc-seg-b .f1sc-seg-who, .f1sc-who.f1sc-seg-b { fill: var(--saffron); }
.f1sc-svg[data-state="metin"] .f1sc-bars { opacity: .5; }
.f1sc-thread { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.3; }

/* ------------------------------------------------------------------ karsilastir */
.f1sc-match-l { fill: none; stroke: var(--st-ok); stroke-width: 2.6; stroke-linecap: round; }
.f1sc-okdot { fill: var(--st-ok); stroke: var(--pro-panel); stroke-width: 2; }
.f1sc-okdot-t { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.f1sc-svg:is([data-state="eksik"], [data-state="oneri"]) .f1sc-card-m3 { stroke: var(--st-warn); stroke-width: 2.6; fill: color-mix(in srgb, var(--st-warn) 8%, var(--pro-panel)); }
.f1sc-warn-tag { fill: color-mix(in srgb, var(--st-warn) 22%, var(--pro-panel)); stroke: var(--st-warn); stroke-width: 1.5; }
.f1sc-sugg { fill: var(--pro-panel); stroke: var(--pro-accent); stroke-width: 1.8; filter: drop-shadow(0 6px 18px rgba(20, 30, 40, .14)); }
.f1sc-chip { fill: var(--pro-focus); }
.f1sc-chip-dot { fill: var(--pro-accent); }
.f1sc-btn { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.3; }
.f1sc-btn-p { fill: var(--pro-focus); stroke: var(--pro-accent); }

/* ------------------------------------------------------------------ İleri yapay zekâ (SCENES.md 3.7-3.13)
 * One accent per meaning: green (--st-ok) done/same, amber (--st-warn) waiting/difference/off-rule,
 * purple (--part-yz, defined in faz1.css) AI/KSS speaking, grey faded/outside. Thin lines, no heavy shadows.
 */
:root { --f1sc-yz: var(--part-yz, #8a4fc1); }
:root[data-film-theme="dark"] { --f1sc-yz: var(--part-yz, #b892e6); }
@media (prefers-color-scheme: dark) { :root:not([data-film-theme]) { --f1sc-yz: var(--part-yz, #b892e6); } }
.f1sc-yz-t { fill: var(--f1sc-yz); }
.f1sc-p-t { fill: var(--saffron); }
.f1sc-num { font-variant-numeric: tabular-nums; }
.f1sc-svg .f1sc-faint { opacity: .45; }
.f1sc-yz-dot { fill: var(--f1sc-yz); }
.f1sc-axis { fill: none; stroke: var(--f1sc-lo); stroke-width: 1.3; }
.f1sc-svg text.f1sc-halo { stroke-width: 9px; }

/* chat bubbles: a person on the left, KSS on the right with a purple edge; faces */
.f1sc-cb { stroke-width: 1.3; }
.f1sc-cb-p { fill: var(--pro-soft); stroke: color-mix(in srgb, var(--f1sc-edge) 55%, var(--pro-panel)); }
.f1sc-cb-k { fill: color-mix(in srgb, var(--f1sc-yz) 7%, var(--pro-panel)); stroke: color-mix(in srgb, var(--f1sc-yz) 60%, var(--pro-panel)); stroke-width: 1.5; }
.f1sc-av { fill: var(--pro-panel); stroke: var(--f1sc-edge); stroke-width: 1.3; }
.f1sc-av-k { fill: color-mix(in srgb, var(--f1sc-yz) 10%, var(--pro-panel)); stroke: var(--f1sc-yz); stroke-width: 1.6; }
.f1sc-av-dot { fill: var(--f1sc-yz); }

/* pills, links, arrows */
.f1sc-pillo { fill: var(--pro-panel); stroke: color-mix(in srgb, var(--f1sc-edge) 55%, var(--pro-panel)); stroke-width: 1.3; }
.f1sc-pill-ok { fill: color-mix(in srgb, var(--st-ok) 9%, var(--pro-panel)); stroke: color-mix(in srgb, var(--st-ok) 65%, var(--pro-panel)); }
.f1sc-pill-warn { fill: color-mix(in srgb, var(--st-warn) 14%, var(--pro-panel)); stroke: var(--st-warn); }
.f1sc-pill-yz { fill: color-mix(in srgb, var(--f1sc-yz) 7%, var(--pro-panel)); stroke: color-mix(in srgb, var(--f1sc-yz) 55%, var(--pro-panel)); }
.f1sc-tick-ok { fill: none; stroke: var(--st-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.f1sc-link { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.4; stroke-dasharray: 4 5; }
.f1sc-link-solid { stroke-dasharray: none; }
.f1sc-link-arrow { stroke: var(--f1sc-hi); stroke-width: 1.6; stroke-dasharray: 6 5; }
.f1sc-link-warn { stroke: var(--st-warn); stroke-width: 1.6; }
.f1sc-link-dot { fill: var(--f1sc-edge); }
.f1sc-arrowhead { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f1sc-modarrows .f1sc-arrowhead { stroke: var(--f1sc-hi); }
.f1sc-arrowhead-ok { stroke: var(--st-ok); }

/* stage strip */
.f1sc-stg-l { fill: none; stroke: var(--f1sc-lo); stroke-width: 2.5; stroke-linecap: round; }
.f1sc-stg-l-done { stroke: var(--st-ok); }
.f1sc-stg { stroke: var(--pro-panel); stroke-width: 2.5; }
.f1sc-stg-done { fill: var(--st-ok); }
.f1sc-stg-cur { fill: var(--st-warn); }
.f1sc-stg-next { fill: var(--pro-panel); stroke: var(--f1sc-mid); stroke-width: 1.6; }
.f1sc-stg-tick { fill: none; stroke: var(--pro-panel); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.f1sc-stg-nt { fill: var(--pro-muted); }

/* destek: the paper, its corner, the open files */
.f1sc-ppr { fill: var(--kagit); stroke: var(--kagit-kenar); stroke-width: 1.2; }
.f1sc-ppr-l { fill: none; stroke: rgba(0, 0, 0, .2); stroke-width: 2; stroke-linecap: round; }
.f1sc-ppr-l2 { stroke: rgba(0, 0, 0, .42); }
.f1sc-kose { fill: color-mix(in srgb, var(--st-warn) 14%, transparent); stroke: var(--st-warn); stroke-width: 2.2; }
.f1sc-dt { fill: color-mix(in srgb, var(--fam-work) 78%, var(--pro-panel)); }
.f1sc-svg[data-scene="destek"]:is([data-state="kisi"], [data-state="sag-ust"]) .f1sc-dt-rest { opacity: .13; }

/* yeni-kural */
.f1sc-card-warn { fill: color-mix(in srgb, var(--st-warn) 7%, var(--pro-panel)); stroke: var(--st-warn); stroke-width: 1.8; }
.f1sc-flag { fill: color-mix(in srgb, var(--st-warn) 30%, transparent); stroke: var(--st-warn); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f1sc-fbox { fill: var(--pro-panel); stroke: var(--f1sc-edge); stroke-width: 1.3; }
.f1sc-fbox-new { fill: color-mix(in srgb, var(--st-ok) 9%, var(--pro-panel)); stroke: var(--st-ok); stroke-width: 2; }
.f1sc-vline { fill: none; stroke: color-mix(in srgb, var(--st-ok) 60%, var(--pro-panel)); stroke-width: 2; }
.f1sc-svg[data-scene="yeni-kural"][data-state="yeni-akis"] [data-part="onayla"] .f1sc-btn { fill: color-mix(in srgb, var(--st-ok) 14%, var(--pro-panel)); stroke: var(--st-ok); }
.f1sc-svg[data-scene="yeni-kural"][data-state="yeni-akis"] [data-part="onayla"] text { fill: var(--st-ok); }

/* charts: quiet grey bars, one amber or green or purple bar where it means something */
.f1sc-bar { fill: var(--f1sc-mid); }
.f1sc-bar-warn { fill: var(--st-warn); }
.f1sc-bar-ok { fill: var(--st-ok); }
.f1sc-bar-yz { fill: var(--f1sc-yz); }
.f1sc-bar-p { fill: color-mix(in srgb, var(--pro-ink) 36%, var(--pro-panel)); }
.f1sc-heat { stroke: none; }
.f1sc-heat-t { fill: #1a1a1a; font-weight: 700; }
.f1sc-wv-p path { stroke: var(--saffron); stroke-linecap: round; fill: none; }
.f1sc-wv-k path { stroke: var(--f1sc-yz); stroke-linecap: round; fill: none; }

/* kutuphane: cards, the player, the progress */
.f1sc-play { fill: var(--pro-focus); }
.f1sc-play-t { fill: var(--pro-accent); }
.f1sc-play-on { fill: color-mix(in srgb, var(--pro-panel) 92%, transparent); stroke: color-mix(in srgb, var(--pro-accent) 45%, var(--pro-panel)); stroke-width: 1.3; }
.f1sc-thumb { fill: var(--pro-soft); stroke: var(--pro-line); stroke-width: 1.2; }
.f1sc-tick-dot { fill: var(--f1sc-lo); }
.f1sc-sel .f1sc-card { stroke: var(--pro-accent); stroke-width: 2; }
.f1sc-screen { fill: var(--pro-soft); stroke: var(--pro-line); stroke-width: 1.3; }
.f1sc-minip { fill: var(--pro-panel); stroke: var(--f1sc-lo); stroke-width: 1; }
.f1sc-minic { fill: color-mix(in srgb, var(--fam-work) 28%, var(--pro-panel)); }
.f1sc-minic-on { fill: var(--fam-work); }
.f1sc-minib { fill: var(--pro-panel); stroke: var(--f1sc-mid); stroke-width: 1; }
.f1sc-minib-on { fill: color-mix(in srgb, var(--st-warn) 20%, var(--pro-panel)); stroke: var(--st-warn); }
.f1sc-minil { fill: none; stroke: var(--f1sc-mid); stroke-width: 1; }
.f1sc-pz-c { fill: color-mix(in srgb, var(--pro-panel) 90%, transparent); stroke: var(--f1sc-edge); stroke-width: 1.3; }
.f1sc-pause-t { fill: none; stroke: var(--pro-ink); stroke-width: 5; stroke-linecap: round; }
.f1sc-pause-s { fill: none; stroke: var(--pro-ink); stroke-width: 3.2; stroke-linecap: round; }
.f1sc-play-s { fill: var(--pro-ink); }
.f1sc-track { fill: none; stroke: var(--f1sc-lo); stroke-width: 4; stroke-linecap: round; }
.f1sc-track-on { fill: none; stroke: var(--pro-accent); stroke-width: 4; stroke-linecap: round; }
.f1sc-knob { fill: var(--pro-accent); stroke: var(--pro-panel); stroke-width: 2; }

/* moduller: the programs fade when the modules are there; the legal links get thicker */
.f1sc-mod { fill: color-mix(in srgb, var(--pro-accent) 8%, var(--pro-panel)); stroke: var(--pro-accent); stroke-width: 1.6; }
.f1sc-ic-acc2 { stroke: var(--pro-accent); }
.f1sc-svg[data-scene="moduller"][data-state="bagimsiz"] .f1sc-prog { opacity: .32; }
.f1sc-svg[data-scene="moduller"][data-state="bagimsiz"] .f1sc-prog .f1sc-box { stroke-dasharray: 5 4; }
.f1sc-svg[data-scene="moduller"][data-state="bagimsiz"] .f1sc-legal .f1sc-cable { stroke-width: 3.2; }

/* ikiz: lanes, invoices, the 10 x 10 grid, the role cards */
.f1sc-lane { fill: color-mix(in srgb, var(--pro-soft) 70%, var(--pro-panel)); stroke: var(--f1sc-lo); stroke-width: 1.2; }
.f1sc-lane-k { fill: color-mix(in srgb, var(--f1sc-yz) 5%, var(--pro-panel)); stroke: color-mix(in srgb, var(--f1sc-yz) 40%, var(--pro-panel)); }
.f1sc-pic > path:first-child { fill: var(--kagit); stroke: var(--f1sc-edge); stroke-width: 1.1; stroke-linejoin: round; }
.f1sc-pic-l { fill: none; stroke: var(--f1sc-mid); stroke-width: 1.2; stroke-linecap: round; }
.f1sc-dot-ok { fill: var(--st-ok); }
.f1sc-dot-warn { fill: var(--st-warn); }
.f1sc-ring { fill: none; stroke: var(--st-warn); stroke-width: 2.2; }
.f1sc-track-r { fill: var(--f1sc-lo); }
.f1sc-track-ok { fill: var(--st-ok); }

/* ------------------------------------------------------------------ Dinamik iş akışları (SCENES.md 3.17-3.19)
 * The engine is a quiet plate with the accent's thin edge; the library's blocks are white tiles, the blocks a flow uses
 * get the accent edge; a missing block is red and dashed (--st-crit), a just-built one green; people are pencil sketches.
 */
.f1sc-crit-t { fill: var(--st-crit); }
.f1sc-acc-t { fill: var(--pro-accent); }
.f1sc-svg[data-scene="motor"][data-state="genel"] .f1sc-mshift { transform: var(--f1sc-mshift); }
.f1sc-eng { fill: color-mix(in srgb, var(--pro-accent) 3%, var(--pro-panel)); stroke: color-mix(in srgb, var(--pro-accent) 55%, var(--pro-panel)); stroke-width: 1.4; }
.f1sc-eng-t { fill: var(--pro-accent); }
.f1sc-lib { fill: var(--pro-panel); stroke: var(--f1sc-lo); stroke-width: 1.2; }
.f1sc-yt { stroke: color-mix(in srgb, var(--f1sc-edge) 70%, var(--pro-panel)); stroke-width: 1.1; }
.f1sc-yt-on { fill: color-mix(in srgb, var(--pro-accent) 9%, transparent); stroke: var(--pro-accent); stroke-width: 1.8; }
.f1sc-yt-yok, .f1sc-step-yok { fill: color-mix(in srgb, var(--st-crit) 8%, var(--pro-panel)); stroke: var(--st-crit); stroke-width: 2; stroke-dasharray: 5 4; }
.f1sc-yt-yeni { fill: color-mix(in srgb, var(--st-ok) 10%, var(--pro-panel)); stroke: var(--st-ok); stroke-width: 1.8; }
.f1sc-mk circle { stroke: var(--pro-panel); stroke-width: 1.5; }
.f1sc-mk path { fill: none; stroke: #ffffff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.f1sc-mk-yok circle { fill: var(--st-crit); }
.f1sc-mk-yeni circle, .f1sc-mk-ok circle { fill: var(--st-ok); }
.f1sc-libic * { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.f1sc-libic-yz path { fill: color-mix(in srgb, var(--f1sc-yz) 35%, var(--pro-panel)); stroke: var(--f1sc-yz); }
.f1sc-link-crit { stroke: var(--st-crit); stroke-width: 1.7; stroke-dasharray: 5 4; }
.f1sc-arrowhead-crit { stroke: var(--st-crit); }
.f1sc-link-ok { stroke: var(--st-ok); stroke-width: 1.8; }
.f1sc-link-okd { stroke: var(--st-ok); stroke-width: 1.7; stroke-dasharray: 5 4; }
.f1sc-empty-r { fill: none; stroke: var(--f1sc-mid); stroke-width: 1.4; stroke-dasharray: 7 6; }
.f1sc-mini-blk { fill: var(--pro-panel); stroke: color-mix(in srgb, var(--pro-accent) 60%, var(--pro-panel)); stroke-width: 1.2; }
.f1sc-mini-arr { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.2; }
.f1sc-chip-ok { fill: color-mix(in srgb, var(--st-ok) 14%, var(--pro-panel)); stroke: var(--st-ok); stroke-width: 1.4; }
.f1sc-ok-dot { fill: var(--st-ok); }
.f1sc-ok-on { fill: var(--st-ok); }
.f1sc-res { stroke: color-mix(in srgb, var(--st-ok) 60%, var(--pro-panel)); stroke-width: 1.6; }
.f1sc-svg[data-scene="motor"][data-state="gecildi"] .f1sc-col-alternatif { opacity: .42; }
/* people: pencil portraits (faz1/img/p-*.webp, faz1/tools/build-portraits.mjs; never a vector figure, SENARYO-ILKELERI 49).
 * The drawing sits on white paper in both themes (its own background is white): a card for the bust, a disc for the face */
.f1sc-pt-card { fill: #ffffff; stroke: color-mix(in srgb, var(--f1sc-edge) 70%, #ffffff); stroke-width: 1.2; }
.f1sc-pt-disc { fill: #ffffff; stroke: none; }
.f1sc-pt-ring { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.3; }
.f1sc-pt-ring-warn { stroke: var(--st-warn); stroke-width: 1.8; }
.f1sc-pt-ring-ok { stroke: var(--st-ok); stroke-width: 1.8; }
.f1sc-pt-ini { fill: #5f6168; font-weight: 600; }
/* a phone seen from the front (istisare, oneri) */
.f1sc-phf { fill: var(--pro-panel); stroke: var(--f1sc-hi); stroke-width: 1.5; }
.f1sc-phs { fill: color-mix(in srgb, var(--pro-soft) 60%, var(--pro-panel)); stroke: var(--f1sc-lo); stroke-width: 1; }
.f1sc-phn { fill: var(--f1sc-lo); }
/* istisare: the call, the table lens, the summary and its button */
.f1sc-stg-acc { fill: var(--pro-accent); }
.f1sc-ring-k { fill: none; stroke: var(--f1sc-yz); stroke-width: 2; opacity: .55; }
.f1sc-callno { fill: var(--st-crit); }
.f1sc-callok { fill: var(--st-ok); }
.f1sc-minil-r { fill: var(--f1sc-lo); }
.f1sc-lens { fill: color-mix(in srgb, var(--pro-accent) 6%, transparent); stroke: color-mix(in srgb, var(--pro-accent) 35%, transparent); stroke-width: 1; }
.f1sc-tab { stroke: color-mix(in srgb, var(--pro-accent) 55%, var(--pro-panel)); stroke-width: 1.5; }
.f1sc-app { fill: var(--pro-panel); }
.f1sc-btn-on { fill: var(--pro-accent); stroke: var(--pro-accent); stroke-width: 1.3; }
.f1sc-spk { fill: none; stroke: var(--pro-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.f1sc-spk-on { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.f1sc-on-t { fill: #ffffff; }
/* oneri: the route's nodes, the warning sign, the permission rows, the notification */
.f1sc-node-aday { fill: color-mix(in srgb, var(--st-warn) 7%, var(--pro-panel)); stroke: var(--st-warn); stroke-width: 1.8; stroke-dasharray: 6 4; }
.f1sc-node-new { fill: color-mix(in srgb, var(--st-ok) 9%, var(--pro-panel)); stroke: var(--st-ok); stroke-width: 2; }
.f1sc-node-end { stroke: color-mix(in srgb, var(--st-ok) 60%, var(--pro-panel)); }
.f1sc-ic-warn { stroke: var(--st-warn); }
.f1sc-ic-okl { stroke: var(--st-ok); }
.f1sc-warn-tri { fill: var(--st-warn); stroke: var(--pro-panel); stroke-width: 1.2; stroke-linejoin: round; }
.f1sc-warn-mk { fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; }
.f1sc-row-warn { fill: color-mix(in srgb, var(--st-warn) 12%, var(--pro-panel)); stroke: var(--st-warn); stroke-width: 1.3; }
.f1sc-notif { stroke: color-mix(in srgb, var(--st-ok) 60%, var(--pro-panel)); stroke-width: 1.6; filter: drop-shadow(0 4px 12px rgba(20, 30, 40, .12)); }
.f1sc-notif-bar { fill: var(--st-ok); }
.f1sc-pkt { stroke: color-mix(in srgb, var(--saffron) 65%, var(--pro-panel)); stroke-width: 1.6; }
/* 19 Oct 2026 (SCENES.md 3.21-3.23): hukuk, replika, destek-modulleri */
.f1sc-loop .f1sc-ic { stroke: var(--pro-accent); stroke-width: 2.2; }
.f1sc-plate-r { fill: var(--pro-panel); stroke: none; }
.f1sc-stack { fill: none; stroke: color-mix(in srgb, var(--pro-line) 80%, var(--pro-panel)); stroke-width: 1.3; }
.f1sc-loop .f1sc-arrowhead { stroke: var(--pro-accent); stroke-width: 2.2; }
.f1sc-huk-arr .f1sc-arrowhead { stroke: var(--f1sc-edge); }
.f1sc-rep { stroke: var(--pro-accent); stroke-width: 1.5; }
.f1sc-svg[data-scene="replika"][data-state="kopyalaniyor"] .f1sc-rep { stroke-dasharray: 5 4; }
.f1sc-svg[data-scene="destek-modulleri"][data-state="hepsi"] .f1sc-dm-box { stroke: var(--pro-accent); stroke-width: 2; }

@media (prefers-reduced-motion: reduce) { .f1sc-svg [data-part], .f1sc-svg [data-of] { transition: none; } }

/* 20 Oct 2026 (Leo B3): tarama cesitler and onde-arkada, scene odeme-dairesi */
.f1sc-pic-bg { fill: var(--kagit); }
.f1sc-pic-rim { fill: none; stroke: var(--fam-doc-strong, var(--fam-work)); stroke-width: 3; }
.f1sc-legend3 .f1sc-pic-rim { fill: var(--kagit); }
.f1sc-b2-paper { opacity: .92; }
.f1sc-b2-front { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18)); }
.f1sc-ray { fill: none; stroke: var(--pro-accent); stroke-width: 1.1; opacity: .45; stroke-dasharray: 4 3; }
.f1sc-ray-on { opacity: .95; stroke-width: 2; stroke-dasharray: none; }
.f1sc-ray-dot { fill: var(--pro-accent); }
.f1sc-field-on { fill: color-mix(in srgb, var(--pro-accent) 18%, transparent); stroke: var(--pro-accent); stroke-width: 2.4; }
.f1sc-od-big { stroke-width: 2.6; }
.f1sc-od-node { fill: var(--f1sc-plate); }
.f1sc-od-arrow { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.6; marker-end: none; }
.f1sc-odyol-l { fill: none; stroke: var(--fam-work); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .8; }
.f1sc-od-inv { fill: color-mix(in srgb, var(--fam-work) 22%, var(--pro-panel)); stroke: var(--fam-work); }
.f1sc-od-k { fill: var(--fam-doc); }
.f1sc-od-ok .f1sc-sub-c { fill: var(--st-ok); stroke: var(--st-ok); stroke-dasharray: none; }
.f1sc-od-seal-c { fill: var(--st-ok); stroke: var(--pro-panel); stroke-width: 2; }
.f1sc-b2-edge { fill: color-mix(in srgb, var(--kagit-kenar, #c9c3b4) 70%, #8a8478); stroke: var(--kagit-kenar, #c9c3b4); stroke-width: .8; }
.f1sc-hl-shape { fill: none; }
.f1sc-clipc { fill: #fff; }

/* the file's circles refer to documents and fields with hairlines (22 Oct 2026, Leo H07t.3:3; scenes.js buildTaramaB3) */
.f1sc-ref { fill: none; stroke: var(--f1sc-mid); stroke-width: 1; opacity: .7; }
.f1sc-ref-dot { fill: var(--f1sc-mid); opacity: .8; }
.f1sc-svg [data-part]:not([data-part="k-dosya"]).f1-cue .f1sc-ref, .f1sc-ref-on { stroke: var(--pro-accent); stroke-width: 1.8; opacity: 1; }
.f1sc-svg [data-part]:not([data-part="k-dosya"]).f1-cue .f1sc-ref-dot { fill: var(--pro-accent); opacity: 1; }
.f1sc-sub-doc > .f1sc-sub-c { stroke-width: 2.2; }