/* faz1/faz1.css · Fernas Faz 1 shell (B1). Tokens (CONTRACT 8.3.2-8.3.3), shell layout (8.4), shared components and state classes.
 * Transitioned properties (disabled by #f1-app.f1-instant): #f1-stage grid-template-columns; .f1-strip opacity;
 * #f1-comments transform; buttons background-color, color, border-color; .f1-seg height, background-color.
 */

:root {
  --pro-bg: #ffffff; --pro-page: #f7f8fa; --pro-panel: #ffffff; --pro-ink: #202630; --pro-text2: #58616f; --pro-muted: #89919d;
  --pro-line: #e5e8ee; --pro-soft: #f7f8fa; --pro-accent: #5267d8; --pro-focus: #edf1ff; --pro-green: #218b6c; --f1e-line: #b8bfcb;
  --st-ok: #2a9d6f; --st-warn: #d9a000; --st-crit: #d23a2e; --st-wait: #89919d;
  --edge: #b9c2d0; --edge-branch: #bdac8b;
  --fam-work: #22508F; --fam-work-ink: #FFFFFF; --fam-root: #FFFFFF; --fam-day: #86ABD6; --fam-question: #D6A63C; --fam-vote: #C86A52; --fam-doc: #EFE9DC;
  --ring-ask: #E07F14; --ring-block: #D23A2E; --ring-risk: #D9A000; --ring-done: #2A9D6F; --arc: #27A37A;
  --k-mirror: #3478C0; --k-aggregate: #23946A; --k-propagate: #D18A06; --k-depend: #7755C8; --k-inherit: #1E97A6; --k-forward: #6F7C90;
  --k-summarize: #C2508A; --k-escalate: #D0453A; --k-family: #9AA1AB; --k-question: #E07F14; --k-reference: #6F7C90;
  --saffron: #C0691A; --chk-wait: #89919d; --chk-ok: #27A37A; --chk-warn: #D9A000; --chk-crit: #D23A2E;
  --f1-shadow: 0 1px 2px rgba(20,30,40,.06), 0 2px 8px rgba(20,30,40,.05);
  --kagit: #FBFAF6; --kagit-kenar: #E3DED4; --kagit-golge: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --baski: #1A1A1A; --baski-gri: #6B6B6B; --tukenmez-lacivert: #1E2466; --tarama-mavi: #3E5A6E; --tukenmez-siyah: #3A3B39;
  --damga-gri: #474B4D; --logo-bant: #C8C8C8; --esign: #1473E6; --kagit-filigran: rgba(0,0,0,.05);
  --serh-ink: #A3262A; --serh-bg: #FDECEA; --serh-line: #C8372D;
  --f1-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
  --f1-mono: ui-monospace, Consolas, "Cascadia Mono", monospace;
  --f1-kernel: cubic-bezier(.3,.7,.2,1);
  --f1-top-h: 0px; --f1-bar-h: 134px; --f1-head-h: 44px;
  --f1-tip-bg: #202630; --f1-tip-ink: #ffffff;
  color-scheme: light;
}
:root[data-film-theme="dark"] {
  --pro-bg: #101318; --pro-page: #101318; --pro-panel: #171b22; --pro-ink: #e4e8ef; --pro-text2: #9ca6b4; --pro-muted: #8b95a6;
  --pro-line: #303745; --pro-soft: #1e2530; --pro-accent: #94a6ff; --pro-focus: #28334d; --pro-green: #63c5a4; --f1e-line: #475063;
  --st-ok: #5ccb98; --st-warn: #e8b940; --st-crit: #f2665a; --st-wait: #6b7684;
  --edge: #576579; --edge-branch: #7a6f5a;
  --fam-work: #74A5EE; --fam-work-ink: #0E1520; --fam-root: #171D26; --fam-day: #5E7FA8; --fam-question: #DDB14E; --fam-vote: #D98069; --fam-doc: #4A4438;
  --ring-ask: #F29A3C; --ring-block: #F2665A; --ring-risk: #E8B940; --ring-done: #5CCB98; --arc: #5CCB98;
  --k-mirror: #6FA8E8; --k-aggregate: #57C79A; --k-propagate: #E8B040; --k-depend: #A78BF0; --k-inherit: #4FC4D2; --k-forward: #95A1B3;
  --k-summarize: #E27FB0; --k-escalate: #F2766B; --k-family: #6B7684; --k-question: #F29A3C; --k-reference: #95A1B3;
  --saffron: #E99A4B; --chk-wait: #6b7684; --chk-ok: #5CCB98; --chk-warn: #E8B940; --chk-crit: #F2665A;
  --f1-shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.25);
  --kagit: #ECEAE4; --serh-ink: #98222A; --serh-bg: #F8E0DC; --serh-line: #BE3329;
  --f1-tip-bg: #e4e8ef; --f1-tip-ink: #101318;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-film-theme]) {
    --pro-bg: #101318; --pro-page: #101318; --pro-panel: #171b22; --pro-ink: #e4e8ef; --pro-text2: #9ca6b4; --pro-muted: #8b95a6;
    --pro-line: #303745; --pro-soft: #1e2530; --pro-accent: #94a6ff; --pro-focus: #28334d; --pro-green: #63c5a4; --f1e-line: #475063;
    --st-ok: #5ccb98; --st-warn: #e8b940; --st-crit: #f2665a; --st-wait: #6b7684;
    --edge: #576579; --edge-branch: #7a6f5a;
    --fam-work: #74A5EE; --fam-work-ink: #0E1520; --fam-root: #171D26; --fam-day: #5E7FA8; --fam-question: #DDB14E; --fam-vote: #D98069; --fam-doc: #4A4438;
    --ring-ask: #F29A3C; --ring-block: #F2665A; --ring-risk: #E8B940; --ring-done: #5CCB98; --arc: #5CCB98;
    --k-mirror: #6FA8E8; --k-aggregate: #57C79A; --k-propagate: #E8B040; --k-depend: #A78BF0; --k-inherit: #4FC4D2; --k-forward: #95A1B3;
    --k-summarize: #E27FB0; --k-escalate: #F2766B; --k-family: #6B7684; --k-question: #F29A3C; --k-reference: #95A1B3;
    --saffron: #E99A4B; --chk-wait: #6b7684; --chk-ok: #5CCB98; --chk-warn: #E8B940; --chk-crit: #F2665A;
    --f1-shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.25);
    --kagit: #ECEAE4; --serh-ink: #98222A; --serh-bg: #F8E0DC; --serh-line: #BE3329;
    --f1-tip-bg: #e4e8ef; --f1-tip-ink: #101318;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base */
html, body { margin: 0; height: 100%; }
body { background: var(--pro-page); color: var(--pro-ink); font: 14px/1.4 var(--f1-sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
:where(#f1-app) *, :where(#f1-app) *::before, :where(#f1-app) *::after { box-sizing: border-box; }
:where(#f1-app) button { font: inherit; color: inherit; cursor: pointer; }
#f1-app.f1-instant, #f1-app.f1-instant *, #f1-app.f1-instant *::before, #f1-app.f1-instant *::after { transition: none !important; animation: none !important; }
#f1-app [hidden] { display: none !important; }

#f1-app {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) var(--f1-bar-h);
  height: 100vh; width: 100vw; overflow: hidden; background: var(--pro-page);
}

/* shared controls */
.f1-btn, #f1-controls > button, .f1-panel-tools button, #f1-return {
  height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--pro-line); background: var(--pro-panel); color: var(--pro-ink);
  font-size: 13px; font-weight: 550; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.f1-btn:hover, #f1-bar-head .f1-tools > button:hover, #f1-controls > button:hover, .f1-panel-tools button:hover { border-color: var(--pro-accent); color: var(--pro-accent); }
.f1-btn:focus-visible, #f1-app button:focus-visible { outline: 2px solid var(--pro-accent); outline-offset: 2px; }
.f1-btn.f1-primary, #f1-controls > button[data-testid="f1-play"] { background: var(--pro-accent); color: #fff; border-color: var(--pro-accent); }
:root[data-film-theme="dark"] .f1-btn.f1-primary, :root[data-film-theme="dark"] #f1-controls > button[data-testid="f1-play"] { color: #101318; }
@media (prefers-color-scheme: dark) { :root:not([data-film-theme]) .f1-btn.f1-primary, :root:not([data-film-theme]) #f1-controls > button[data-testid="f1-play"] { color: #101318; } }
.f1-btn.f1-primary:hover, #f1-controls > button[data-testid="f1-play"]:hover { color: #fff; filter: brightness(1.08); }
.f1-btn[aria-pressed="true"], .f1-panel-tools button[aria-pressed="true"], #f1-controls > button[aria-pressed="true"] { background: var(--pro-focus); border-color: var(--pro-accent); color: var(--pro-accent); }
.f1-btn svg, #f1-controls svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.f1-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 550;
  background: var(--pro-soft); color: var(--pro-text2); border: 1px solid var(--pro-line); white-space: nowrap;
}
.f1-chip[data-tone="accent"] { background: var(--pro-focus); color: var(--pro-accent); border-color: transparent; }
.f1-chip[data-tone="ok"] { color: var(--st-ok); border-color: currentColor; background: transparent; }
.f1-chip[data-tone="warn"] { color: var(--pro-ink); border-color: var(--st-warn); background: color-mix(in srgb, var(--st-warn) 16%, transparent); }
.f1-chip[data-tone="crit"] { color: var(--st-crit); border-color: currentColor; background: color-mix(in srgb, var(--st-crit) 10%, transparent); }
.f1-chip[data-tone="muted"] { color: var(--pro-text2); }
.f1-badge { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--pro-focus); color: var(--pro-accent); vertical-align: 2px; }
.f1-table { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.f1-table th, .f1-table td { padding: 4px 8px; border-bottom: 1px solid var(--pro-line); text-align: left; }
.f1-table th { color: var(--pro-text2); font-weight: 600; }

/* shared state classes (8.3.1) */
.f1-cue { --f1-cue-on: 1; }
svg .f1-cue > rect, svg .f1-cue > path.f1-shape, svg rect.f1-cue { fill: var(--pro-focus); stroke: var(--pro-accent); stroke-width: 2.5; }
.f1-hover { --f1-hover-on: 1; }
.f1-dim { opacity: .4; }
.f1-sel { outline: 2px solid var(--saffron); outline-offset: 2px; }
.f1-has-comment { position: relative; }
.f1-has-comment:not(g):not(rect):not(path)::after { content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 2px var(--pro-panel); pointer-events: none; }

/* ------------------------------------------------------------------ bar head (was the top bar; Leo 2026-10-15, H13g)
   one row above the narration: the breadcrumb (part chip, the chapter as the chapter menu, the step) on the left, the
   top chips in the middle, the story clock and the tools on the right, right above the timeline */
.f1-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#f1-bar-head { display: flex; align-items: center; gap: 10px; min-width: 0; height: 26px; }
#f1-bar-head #f1-speaker { flex: 0 1 auto; }
#f1-top-chips { display: flex; flex: 1 1 0; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
#f1-top-chips .f1-chip { cursor: default; display: inline-block; flex: 0 1 auto; min-width: 0; height: 20px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a note with no free place beside its thing, in the bar (app.js noteChips, 18 Oct 2026 evening): a note's own weight; the
   step title gives way to it (the words of the moment come first; the step's name stays in the breadcrumb's title) */
#f1-top-chips .f1-chip.f1-chip-note { font-weight: 650; }
#f1-bar-head:has(#f1-top-chips .f1-chip-note) .f1-crumb-step { display: none; }
#f1-clock { flex: none; display: flex; align-items: center; gap: 7px; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 10px; border-left: 1px solid var(--pro-line); }
#f1-clock:empty { display: none; }
#f1-clock .f1-clock-label { color: var(--pro-text2); font-size: 11.5px; }
#f1-clock .f1-clock-text { font-weight: 600; }
/* many chips: the step title gives way first (its name stays in the breadcrumb title and the chapter menu) */
#f1-bar-head:has(#f1-top-chips .f1-chip:nth-child(3)) .f1-crumb-step { display: none; }
#f1-bar-head .f1-tools { flex: none; display: flex; align-items: center; gap: 6px; }
#f1-bar-head .f1-tools > button {
  height: 26px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--pro-line); background: var(--pro-panel); color: var(--pro-ink);
  font-size: 12px; font-weight: 550; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
#f1-bar-head .f1-tools > button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* tool icons (shown alone below 1600 px, the words stay in the title and the aria label) */
.f1-ti { display: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ti) center / contain no-repeat; mask: var(--ti) center / contain no-repeat; }
#f1-illus-btn .f1-ti { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='2' y='3' width='12' height='10' rx='1.5'/%3E%3Cpath d='M2.5 11.5l3.5-3.5 3 3 2-2 2.5 2.5'/%3E%3Ccircle cx='10.5' cy='6' r='1'/%3E%3C/svg%3E"); }
#f1-feedback-btn .f1-ti { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M3 4h10M3 8h10M3 12h6'/%3E%3C/svg%3E"); }
#f1-comments-btn .f1-ti { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z'/%3E%3C/svg%3E"); }
/* the chapter menu in the breadcrumb, drawn as the old chapter button (Leo 2026-10-16: plain text did not look changeable):
   a bordered button with the part's colour on its left edge and a ▾ */
#f1-speaker .f1-crumb-ch {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 9px 0 10px; border: 1px solid var(--pro-line); border-radius: 8px;
  background: var(--pro-panel); color: var(--pro-ink); font: inherit; font-size: 12.5px; font-weight: 600; vertical-align: top; cursor: pointer;
  box-shadow: inset 3px 0 0 var(--part-c, var(--pro-line)); transition: border-color .15s, color .15s, background-color .15s;
}
#f1-speaker .f1-crumb-ch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#f1-speaker .f1-crumb-ch i { font-style: normal; color: var(--pro-text2); font-size: 11px; margin-left: 2px; }
#f1-speaker .f1-crumb-ch:hover, #f1-speaker .f1-crumb-ch:focus-visible { border-color: var(--pro-accent); color: var(--pro-accent); }
#f1-speaker .f1-crumb-ch:hover i { color: var(--pro-accent); }
#film-theme, #f1-fullscreen { width: 28px; padding: 0 !important; font-size: 14px; }
#f1-voice-slot:empty { display: none; }

/* ------------------------------------------------------------------ stage and panels */
#f1-stage {
  position: relative; overflow: hidden; display: grid; column-gap: 12px; padding: 12px 16px; min-height: 0;
  grid-template-columns: 35fr 30fr 35fr; grid-template-rows: minmax(0, 1fr);
  transition: grid-template-columns 500ms var(--f1-kernel);
}
#f1-app[data-layout="dashboard-wide"] #f1-stage { column-gap: 0; }
.f1-panel {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 14px; overflow: hidden; box-shadow: var(--f1-shadow);
}
.f1-panel-head {
  position: relative; z-index: 3; flex: none; height: var(--f1-head-h); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--pro-line); background: var(--pro-panel); min-width: 0;
}
.f1-panel-head h2 { margin: 0; font-size: 14px; font-weight: 650; white-space: nowrap; }
.f1-panel-sub { flex: 1 1 auto; min-width: 0; color: var(--pro-text2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f1-panel-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.f1-panel-tools button { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
.f1-seg-group { display: inline-flex; border: 1px solid var(--pro-line); border-radius: 8px; overflow: hidden; }
.f1-seg-group button { border: 0 !important; border-radius: 0 !important; height: 26px; }
.f1-seg-group button + button { border-left: 1px solid var(--pro-line) !important; }
.f1-max { width: 28px; height: 28px; flex: none; border: 1px solid transparent; border-radius: 8px; background: transparent; display: grid; place-items: center; color: var(--pro-text2); }
.f1-max:hover { border-color: var(--pro-line); color: var(--pro-accent); }
.f1-max svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.f1-panel-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* a side panel that made way for a c23 window (faz1/app.js btLend, SENARYO-ILKELERI 47): its content steps aside while the
   window is open; the window opens there (it covers nothing) */
/* the same for a story card that found no free place (app.js ovLend, 18 Oct 2026 evening): the card stands in the panel, large.
   (every descendant too: the Varlıklar map's level layers set visibility: visible of their own, entities.css .f1e-lv, and
   stayed on screen in a panel that had made way, 18 Oct 2026 evening) */
/* a panel whose content was not on screen when a played position began (a document or a stage scene covered it, it had made
   way, it was folded) waits hidden until the position's overlays part has decided whether it makes way (app.js holdHidden,
   SENARYO-ILKELERI 50, Leo 19 Oct 2026, H13e.1) */
.f1-panel.f1-bt-yer > .f1-panel-body, .f1-panel.f1-bt-yer > .f1-panel-body *,
.f1-panel.f1-ov-bekle > .f1-panel-body, .f1-panel.f1-ov-bekle > .f1-panel-body *,
.f1-panel.f1-ov-yer > .f1-panel-body, .f1-panel.f1-ov-yer > .f1-panel-body * { visibility: hidden !important; }
.f1-strip {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 16px 0; border: 0; background: var(--pro-panel); color: var(--pro-text2); opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--f1-kernel); font-weight: 650 !important; font-size: 13px !important;
}
.f1-strip .f1-strip-label { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.f1-strip .f1-strip-status { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 400; font-size: 11.5px; color: var(--pro-muted); overflow: hidden; max-height: 70%; text-overflow: ellipsis; }
.f1-strip:hover { color: var(--pro-accent); }
#f1-app[data-layout="max-left"] #f1-panel-mid .f1-strip, #f1-app[data-layout="max-left"] #f1-panel-right .f1-strip,
#f1-app[data-layout="max-mid"] #f1-panel-left .f1-strip, #f1-app[data-layout="max-mid"] #f1-panel-right .f1-strip,
#f1-app[data-layout="max-right"] #f1-panel-left .f1-strip, #f1-app[data-layout="max-right"] #f1-panel-mid .f1-strip { opacity: 1; pointer-events: auto; }
#f1-app[data-layout="dashboard-wide"] #f1-panel-left, #f1-app[data-layout="dashboard-wide"] #f1-panel-mid { border-width: 0; box-shadow: none; }

/* stub boxes (§6.0) */
.f1-stub { position: absolute; inset: 0; overflow: auto; padding: 14px; background: repeating-linear-gradient(135deg, var(--pro-soft) 0 10px, transparent 10px 20px); color: var(--pro-text2); font-size: 11px; }
.f1-stub-title { font-size: 13px; font-weight: 650; color: var(--pro-muted); margin: 0 0 8px; }
.f1-stub-sec { margin: 8px 0 3px; font-weight: 650; font-size: 11px; color: var(--pro-text2); }
.f1-stub-list { display: flex; flex-wrap: wrap; gap: 3px; }
.f1-stub-item { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; min-height: 16px; border: 1px solid var(--pro-line); border-radius: 4px; background: var(--pro-panel); max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f1-stub-item.f1-cue { border-color: var(--pro-accent); background: var(--pro-focus); color: var(--pro-accent); }
.f1-stub-tray { display: inline-block; width: 34px; height: 14px; border: 1px dashed var(--pro-muted); border-radius: 7px; flex: none; }
.f1-stub-doc { position: absolute; inset: 0; background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 12px; overflow: auto; box-shadow: var(--f1-shadow); }

/* ------------------------------------------------------------------ layers inside the stage (8.2) */
.f1-layer { position: absolute; }
#f1-doc { z-index: 20; }
#f1-circles { z-index: 30; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#f1-overlays { z-index: 34; left: 0; top: 0; width: 0; height: 0; }
#f1-notes { z-index: 35; left: 0; top: 0; width: 0; height: 0; }
#f1-illus { z-index: 40; }
#f1-cursor { z-index: 45; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; }
#f1-inspector { z-index: 46; }
#f1-return {
  position: absolute; z-index: 46; left: 50%; bottom: 22px; transform: translateX(-50%); height: 36px; padding: 0 18px;
  background: var(--pro-accent) !important; color: #fff !important; border-color: var(--pro-accent) !important; box-shadow: 0 6px 20px rgba(40,50,120,.25);
}
:root[data-film-theme="dark"] #f1-return { color: #101318 !important; }

/* notes and ghost cards (4.3) */
.f1-note {
  position: absolute; left: 0; top: 0; max-width: 260px; padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 650; line-height: 1.35;
  background: var(--pro-panel); color: var(--pro-ink); border: 1px solid var(--pro-line); box-shadow: var(--f1-shadow); white-space: normal; width: max-content; pointer-events: none;
}
.f1-note[data-tone="accent"] { background: var(--pro-accent); color: #fff; border-color: var(--pro-accent); }
:root[data-film-theme="dark"] .f1-note[data-tone="accent"] { color: #101318; }
.f1-note[data-tone="muted"] { color: var(--pro-text2); font-weight: 550; }
.f1-note[data-tone="warn"] { border-color: var(--st-warn); background: color-mix(in srgb, var(--st-warn) 18%, var(--pro-panel)); }
.f1-note[data-tone="crit"] { border-color: var(--st-crit); color: var(--st-crit); }
.f1-note.f1-ghost { white-space: normal; width: 230px; padding: 9px 11px; border: 1.5px dashed var(--pro-muted); background: color-mix(in srgb, var(--pro-panel) 88%, transparent); font-weight: 550; }
.f1-note.f1-ghost b { display: block; margin-bottom: 4px; font-size: 12.5px; }
.f1-note.f1-ghost span { display: block; font-weight: 400; color: var(--pro-text2); font-size: 11.5px; }
.f1-note::before { content: ''; position: absolute; width: 7px; height: 7px; background: inherit; border: inherit; border-width: 0 0 1px 1px; }
/* the pointer meets the thing's middle: a note slid along its side to free space (SENARYO-ILKELERI 47) moves its pointer (--f1-nt-at) */
.f1-note[data-side="right"]::before { left: -4.5px; top: calc(var(--f1-nt-at, 50%) - 3.5px); transform: rotate(45deg); }
.f1-note[data-side="left"]::before { right: -4.5px; top: calc(var(--f1-nt-at, 50%) - 3.5px); transform: rotate(-135deg); }
.f1-note[data-side="top"]::before { bottom: -4.5px; left: calc(var(--f1-nt-at, 50%) - 3.5px); transform: rotate(-45deg); }
.f1-note[data-side="bottom"]::before { top: -4.5px; left: calc(var(--f1-nt-at, 50%) - 3.5px); transform: rotate(135deg); }
.f1-note[data-side="inside"]::before, .f1-note[data-side="leader"]::before { display: none; }
/* a note in the nearest free place joined to its thing by a thin line (SENARYO-ILKELERI 47) */
.f1-note-leader { position: absolute; height: 0; border-top: 1.5px solid var(--pro-accent); transform-origin: 0 50%; pointer-events: none; }
.f1-note[data-tone="crit"] > .f1-note-leader { border-top-color: var(--st-crit); }
.f1-note[data-tone="warn"] > .f1-note-leader { border-top-color: var(--st-warn); }
.f1-note[data-tone="muted"] > .f1-note-leader { border-top-color: var(--pro-muted); }
.f1-note.f1-ghost::before { display: none; }

/* overlay cards (Revision 5, FILM-METNI-v2 YENİ items; app.js overlaysApply): plain, black-and-white friendly, both themes */
.f1-ovl {
  position: absolute; left: 0; top: 0; padding: 9px 12px 10px; border-radius: 10px; background: var(--pro-panel); color: var(--pro-ink);
  border: 1px solid var(--pro-line); border-left: 3px solid var(--pro-accent); box-shadow: 0 6px 22px rgba(20,30,40,.13); pointer-events: none;
  font-size: 12.5px; line-height: 1.35; overflow: hidden;
}
.f1-ovl[data-tone="crit"] { border-left-color: var(--st-crit); }
/* a card standing in a panel that made way for it (app.js ovLend): the panel's picture of the moment, read from afar */
.f1-ovl.f1-ovl-yer { padding: 13px 16px 14px; font-size: 13.5px; }
.f1-ovl.f1-ovl-yer > header b { font-size: 15px; }
.f1-ovl.f1-ovl-yer .f1-ovl-box { font-size: 12.5px; max-width: 150px; }
.f1-ovl.f1-ovl-yer .f1-ovl-arrow em { font-size: 12px; }
.f1-ovl.f1-ovl-yer .f1-ovl-foot { font-size: 12.5px; }
.f1-ovl[data-tone="warn"] { border-left-color: var(--st-warn); }
.f1-ovl[data-tone="ok"] { border-left-color: var(--st-ok); }
.f1-ovl > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.f1-ovl > header b { font-size: 13px; font-weight: 700; }
.f1-ovl-tag { flex: none; font-size: 10.5px; font-weight: 650; color: var(--pro-text2); border: 1px solid var(--pro-line); border-radius: 6px; padding: 0 5px; text-transform: uppercase; letter-spacing: .04em; }
.f1-ovl-foot { margin: 7px 0 0; color: var(--pro-text2); font-size: 11.5px; }
.f1-ovl-lines p { margin: 0 0 2px; color: var(--pro-text2); }
.f1-ovl-lines p:first-child { color: var(--pro-ink); font-weight: 600; }
/* people strip: six chips, name · role · unit */
.f1-ovl-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.f1-ovl-person { display: flex; flex-direction: column; min-width: 0; padding: 5px 8px; border: 1px solid var(--pro-line); border-radius: 8px; background: var(--pro-soft); }
.f1-ovl-person.f1-on { border-color: var(--pro-accent); background: var(--pro-focus); box-shadow: inset 0 0 0 1px var(--pro-accent); }
.f1-ovl-person.f1-on b { color: var(--pro-accent); }
.f1-ovl-person b { font-size: 13px; }
.f1-ovl-person span, .f1-ovl-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1-ovl-person span { color: var(--pro-ink); font-size: 11.5px; }
.f1-ovl-person small { color: var(--pro-text2); font-size: 11px; }
/* key/meaning table (LOGO status letters); the current letter is lit */
.f1-ovl-table { display: grid; gap: 3px; }
.f1-ovl-trow { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 6px; }
.f1-ovl-trow b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--pro-ink); border-radius: 5px; font-family: var(--f1-mono); font-size: 12.5px; }
.f1-ovl-trow.f1-on { background: var(--pro-focus); color: var(--pro-accent); font-weight: 650; }
.f1-ovl-trow.f1-on b { border-color: var(--pro-accent); background: var(--pro-accent); color: var(--pro-panel); }
.f1-ovl-small { padding: 7px 9px 8px; font-size: 11.5px; }
.f1-ovl-small > header { margin-bottom: 4px; }
.f1-ovl-small > header b { font-size: 12px; }
.f1-ovl-small .f1-ovl-trow { grid-template-columns: 20px 1fr; gap: 6px; padding: 1px 3px; }
.f1-ovl-small .f1-ovl-trow b { width: 18px; height: 18px; font-size: 11px; }
/* mini diagram: [box] -label-> [box]; .f1-back turns the arrow around */
.f1-ovl-diagram { display: grid; gap: 7px; }
.f1-ovl-drow { display: grid; grid-template-columns: minmax(0, auto) 1fr minmax(0, auto); align-items: center; gap: 6px; }
.f1-ovl-box { padding: 4px 7px; border: 1.5px solid var(--pro-ink); border-radius: 7px; font-weight: 650; font-size: 11.5px; text-align: center; max-width: 110px; overflow-wrap: anywhere; }
.f1-ovl-arrow { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.f1-ovl-arrow em { font-style: normal; font-size: 11px; line-height: 1.25; text-align: center; color: var(--pro-text2); margin-bottom: 3px; }
.f1-ovl-arrow i { position: relative; display: block; width: 100%; height: 0; border-top: 2px solid var(--pro-ink); }
.f1-ovl-arrow i::after { content: ''; position: absolute; right: -1px; top: -6px; border: 5px solid transparent; border-left: 8px solid var(--pro-ink); border-right: 0; }
.f1-back .f1-ovl-arrow i::after { right: auto; left: -1px; border-left: 0; border-right: 8px solid var(--pro-ink); }
.f1-ovl-drow[data-tone="crit"] .f1-ovl-arrow i, .f1-ovl-drow[data-tone="crit"] .f1-ovl-box { border-color: var(--st-crit); }
.f1-ovl-drow[data-tone="crit"] .f1-ovl-arrow i::after { border-left-color: var(--st-crit); }
.f1-ovl-drow[data-tone="crit"] .f1-ovl-arrow em { color: var(--st-crit); }
.f1-ovl-drow[data-tone="ok"] .f1-ovl-arrow i, .f1-ovl-drow[data-tone="ok"] .f1-ovl-box { border-color: var(--st-ok); }
.f1-ovl-drow[data-tone="ok"] .f1-ovl-arrow i::after { border-left-color: var(--st-ok); }
.f1-back[data-tone="crit"] .f1-ovl-arrow i::after { border-right-color: var(--st-crit); }

/* illustration card (8.7) */
#f1-illus { background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(20,30,40,.14); overflow: hidden; }
#f1-illus .f1-illus-img { display: block; width: 100%; border-radius: 6px; object-fit: cover; background: var(--pro-soft); }
#f1-illus .f1-illus-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--pro-soft) 0 8px, transparent 8px 16px); border: 1px dashed var(--pro-line); color: var(--pro-text2); font-size: 12px; }
#f1-illus .f1-illus-ph svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#f1-illus .f1-illus-cap { margin: 7px 2px 1px; font-size: 12px; color: var(--pro-text2); line-height: 1.35; }
#f1-illus { cursor: zoom-out; transition: width 220ms var(--f1-kernel), left 220ms var(--f1-kernel), top 220ms var(--f1-kernel); }
#f1-illus.f1-illus-min { padding: 4px; border-radius: 9px; cursor: zoom-in; box-shadow: 0 4px 14px rgba(20,30,40,.14); }
#f1-illus.f1-illus-min .f1-illus-cap { display: none; }
#f1-illus.f1-illus-min .f1-illus-ph em, #f1-illus.f1-illus-min .f1-illus-ph span { display: none; }
#f1-illus .f1-illus-ph em { font-style: normal; }
#f1-illus .f1-illus-x {
  position: absolute; top: 5px; right: 5px; z-index: 1; width: 22px; height: 22px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--pro-line); background: var(--pro-panel); color: var(--pro-ink); font-size: 11px; line-height: 1; cursor: pointer; opacity: .92;
}
#f1-illus .f1-illus-x:hover { border-color: var(--pro-accent); color: var(--pro-accent); opacity: 1; }
#f1-illus.f1-illus-min .f1-illus-x { top: 2px; right: 2px; width: 18px; height: 18px; font-size: 9.5px; }

/* c23 büyüteç (Leo 2026-10-18, notes 7 and 8; frame.buyutec, faz1/app.js btDraw, docs/faz1/SCENES.md "c23 büyüteç"):
   the thing is framed, thin lines go from its corners to the window's, the space between is lightly tinted; the window
   grows out of the thing. Positions and sizes are written by app.js (transform, width, height); no CSS transitions. */
#f1-buyutec { z-index: 33; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#f1-buyutec .f1-bt-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#f1-buyutec .f1-bt-veil { fill: var(--pro-page); stroke: none; }
#f1-buyutec .f1-bt-cone { fill: color-mix(in srgb, var(--pro-accent) 7%, transparent); stroke: none; }
#f1-buyutec .f1-bt-line { fill: none; stroke: var(--pro-accent); stroke-width: 1.4; stroke-linecap: round; }
#f1-buyutec .f1-bt-src { fill: color-mix(in srgb, var(--pro-accent) 6%, transparent); stroke: var(--pro-accent); stroke-width: 2.2; }
#f1-buyutec .f1-bt-win {
  position: absolute; left: 0; top: 0; box-sizing: border-box; transform-origin: 0 0; padding: 0 6px 6px; overflow: hidden; pointer-events: auto;
  background: var(--pro-panel); border: 1.5px solid var(--pro-accent); border-radius: 12px; box-shadow: 0 10px 30px rgba(20,30,40,.16);
  display: flex; flex-direction: column;
}
:root[data-film-theme="dark"] #f1-buyutec .f1-bt-win { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#f1-buyutec .f1-bt-head { flex: none; height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 4px; color: var(--pro-ink); font-size: 13.5px; line-height: 1.2; min-width: 0; }
#f1-buyutec .f1-bt-head b { font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
#f1-buyutec .f1-bt-glyph { flex: none; width: 15px; height: 15px; color: var(--pro-accent); }
#f1-buyutec .f1-bt-glyph svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#f1-buyutec .f1-bt-body { flex: 1 1 auto; min-height: 0; display: flex; }
#f1-buyutec .f1-bt-img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 7px; background: #fff; }
/* 20 Oct 2026 (Leo, B7/B8 draft): buyutec.lens, the workflow diagram itself zoomed in (a copy of the İş akışı drawing) with
   the lane names over it, in the diagram's own style */
#f1-buyutec .f1-bt-lens { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 7px; overflow: hidden; background: var(--pro-panel); }
#f1-buyutec .f1-bt-lens-lanes { position: relative; flex: none; height: 22px; border-bottom: 1px solid var(--pro-line); }
#f1-buyutec .f1-bt-lens-lanes span { position: absolute; top: 0; height: 22px; line-height: 22px; text-align: center; font-size: 11.5px; font-weight: 650; color: var(--pro-text2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#f1-buyutec .f1-bt-lens svg.f1f-world { position: static; flex: 1; width: 100%; height: auto; min-height: 0; }
#f1-buyutec .f1-bt-ph { width: 100%; display: grid; place-items: center; border-radius: 7px; border: 1px dashed var(--pro-line); color: var(--pro-text2); font-size: 12px; background: repeating-linear-gradient(135deg, var(--pro-soft) 0 8px, transparent 8px 16px); }
#f1-buyutec .f1-bt-ph em { font-style: normal; }
/* the subflow: steps in boxes (like the İş akışı steps), lanes as soft bands, the lit steps and arrows in the accent colour */
#f1-buyutec .f1-bt-sub { display: block; width: 100%; height: 100%; overflow: visible; }
#f1-buyutec .f1-bt-lane { fill: var(--pro-soft); stroke: var(--pro-line); stroke-width: 1; }
#f1-buyutec .f1-bt-lane-t { fill: var(--pro-text2); font: 650 13px var(--f1-sans); }
#f1-buyutec .f1-bt-box { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.4; }
#f1-buyutec .f1-bt-st { fill: var(--pro-ink); font: 600 16px var(--f1-sans); text-anchor: middle; }
#f1-buyutec .f1-bt-alt { fill: var(--pro-text2); font: 500 13px var(--f1-sans); text-anchor: middle; }
#f1-buyutec .f1-bt-edge { fill: none; stroke: var(--edge); stroke-width: 2; stroke-linejoin: round; }
#f1-buyutec .f1-bt-edge.f1-bt-elit { stroke: var(--pro-accent); stroke-width: 2.4; }
#f1-buyutec .f1-bt-arh { fill: var(--edge); }
#f1-buyutec .f1-bt-arh-lit { fill: var(--pro-accent); }
#f1-buyutec .f1-bt-step.f1-bt-lit .f1-bt-box { fill: var(--pro-focus); stroke: var(--pro-accent); stroke-width: 2.2; }
#f1-buyutec .f1-bt-step.f1-bt-cur .f1-bt-box { stroke-width: 3; }
#f1-buyutec .f1-bt-step.f1-bt-lit .f1-bt-st { fill: var(--pro-accent); }
#f1-buyutec .f1-bt-dot { fill: var(--pro-accent); stroke: var(--pro-panel); stroke-width: 2; }

/* fake cursor (8.7) */
#f1-cursor svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
#f1-cursor .f1-ripple { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--pro-accent); opacity: 0; }
/* a tap on a phone screen (Leo 19 Oct 2026, H13f; SENARYO-ILKELERI 51): a thumb-sized, half-transparent circle, never the
   mouse pointer. Its size (--f1-touch-d) follows the phone (app.js touchApply); grey with a light rim reads on a light and a
   dark screen alike, as a phone's own touch indicator does */
#f1-touch { z-index: 45; left: 0; top: 0; width: var(--f1-touch-d, 40px); height: var(--f1-touch-d, 40px); pointer-events: none; }
#f1-touch .f1-touch-dot { position: absolute; inset: 0; border-radius: 50%; background: rgba(60, 64, 76, .34); border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 1px 6px rgba(0, 0, 0, .28); }
#f1-touch .f1-touch-ripple { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(60, 64, 76, .55); opacity: 0; }

/* hover card (8.7, was the click inspector): beside the hovered item, never on it, no close button */
#f1-inspector {
  position: fixed; z-index: 85; left: 0; top: 0; max-width: 320px; min-width: 180px; pointer-events: none;
  background: var(--pro-panel); border: 1px solid var(--pro-accent); border-radius: 10px; padding: 9px 12px 8px; color: var(--pro-ink);
  box-shadow: 0 10px 28px rgba(0,0,0,.16); font-size: 12.5px; line-height: 1.45;
}
#f1-inspector h3 { font-size: 13.5px; margin: 0 0 4px; }
#f1-inspector .f1-insp-lead { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
#f1-inspector ul { margin: 0 0 6px; padding-left: 17px; }
#f1-inspector li { margin: 1px 0; }
#f1-inspector .f1-insp-hint { font-size: 11px; color: var(--pro-accent); margin-top: 2px; }
#f1-inspector .f1-insp-ref { font-family: var(--f1-mono); font-size: 10.5px; color: var(--pro-muted); margin-top: 3px; }

/* right-panel hosts (6.6) */
#f1-ui { display: grid; grid-template-columns: minmax(0, 1fr); }
/* split: the phone column is as wide as the scaled phone (ui-phone.js caps it at 40 % of the panel), the pano takes the rest */
#f1-ui.f1-ui-split { grid-template-columns: auto minmax(0, 1fr); }
#f1-ui > .f1p-host, #f1-ui > .f1d-host, #f1-ui > .f1s-desktop-host, #f1-ui > .f1-rate-host, #f1-ui > .f1-ui-empty { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#f1-ui.f1-ui-split > .f1p-host { border-right: 1px solid var(--pro-line); }
.f1-ui-empty { display: grid; place-items: center; color: var(--pro-muted); font-size: 13px; }

/* rating form (10) */
.f1-rate { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.f1-rate-host .f1-rate { position: absolute; inset: 0; margin: auto; height: fit-content; max-width: 520px; padding: 28px; border: 1px solid var(--pro-line); border-radius: 16px; background: var(--pro-panel); box-shadow: var(--f1-shadow); }
.f1-rate h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.f1-rate-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.f1-rate-scale button { height: 40px; border-radius: 10px; border: 1px solid var(--pro-line); background: var(--pro-soft); font-weight: 650; font-size: 15px; }
.f1-rate-scale button[aria-pressed="true"] { background: var(--pro-accent); color: #fff; border-color: var(--pro-accent); }
.f1-rate label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--pro-text2); }
.f1-rate textarea, #f1-modal textarea { font: inherit; font-size: 14px; color: var(--pro-ink); background: var(--pro-bg); border: 1px solid var(--pro-line); border-radius: 10px; padding: 9px 11px; min-height: 84px; resize: vertical; }
.f1-rate .f1-rate-foot { display: flex; justify-content: flex-end; }

/* ------------------------------------------------------------------ bar (9) */
#f1-bar {
  z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 18px; row-gap: 6px;
  padding: 8px 16px 10px; background: var(--pro-panel); border-top: 1px solid var(--pro-line); min-width: 0;
}
/* caption: a one-line breadcrumb (part › chapter › step, Leo 2026-10-14; replaced the "Anlatıcı" label) above the narration */
#f1-caption { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; overflow: hidden; }
#f1-speaker {
  display: block; min-width: 0; max-width: 100%; height: 26px; line-height: 26px; font-size: 12px; font-weight: 550; color: var(--pro-text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#f1-speaker:empty { display: none; }
#f1-speaker > :is(span, button) + :is(span, button)::before { content: '\203A'; margin: 0 6px; color: var(--pro-muted); font-weight: 400; }
#f1-speaker > .f1-crumb-ch + span::before { margin-left: 4px; }
#f1-speaker .f1-crumb-part {
  display: inline-block; height: 18px; line-height: 16px; margin-top: 1px; padding: 0 7px; border-radius: 9px; border: 1px solid var(--pro-line); vertical-align: top;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pro-text2); background: var(--pro-soft);
}
#f1-speaker .f1-crumb-part + :is(span, button)::before { margin-left: 7px; }
#f1-speaker .f1-crumb-part + .f1-crumb-ch::before { content: none; }
#f1-speaker .f1-crumb-part + .f1-crumb-ch { margin-left: 8px; }
#f1-speaker .f1-crumb-part { margin-top: 4px; }
#f1-speaker .f1-crumb-step { color: var(--pro-ink); font-weight: 600; }
#f1-caption-text { flex: none; margin: 0; font-size: 17px; line-height: 1.4; color: var(--pro-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* parts: today (warm) and ideal (green); intro and closing stay neutral. Same colours on the timeline and in the menu */
:root { --part-bugun: #c26a12; --part-ideal: #1f8a5c; --part-kurulum: #4a56c9; --part-yz: #8a4fc1; }
/* Kurulum planı (Leo 2026-10-15): the second film, after the closing, in its own blue */
:root[data-film-theme="dark"] { --part-bugun: #f0a254; --part-ideal: #5ccb98; --part-kurulum: #9aa3ff; --part-yz: #c49bf0; }
@media (prefers-color-scheme: dark) { :root:not([data-film-theme]) { --part-bugun: #f0a254; --part-ideal: #5ccb98; --part-kurulum: #9aa3ff; --part-yz: #c49bf0; } }
[data-part="bugun"] { --part-c: var(--part-bugun); }
[data-part="ideal"] { --part-c: var(--part-ideal); }
[data-part="kurulum"] { --part-c: var(--part-kurulum); }
/* İleri yapay zekâ (Leo 2026-10-16): the third film, violet; the scenes of this part use the same colour for the AI */
[data-part="yz"] { --part-c: var(--part-yz); }
#f1-speaker .f1-crumb-part[data-part="bugun"], #f1-speaker .f1-crumb-part[data-part="ideal"], #f1-speaker .f1-crumb-part[data-part="kurulum"], #f1-speaker .f1-crumb-part[data-part="yz"] {
  color: var(--part-c); border-color: var(--part-c); background: color-mix(in srgb, var(--part-c) 12%, var(--pro-panel));
}
#f1-app.f1-nocaptions #f1-caption-text { display: none; }
#f1-controls { display: flex; align-items: center; gap: 6px; }
#f1-controls > button { height: 32px; padding: 0 9px; min-width: 34px; }
#f1-controls > button[data-testid="f1-play"] { min-width: 96px; }
#f1-time { font-size: 12.5px; color: var(--pro-text2); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 6px; }
.f1-audio-badge { font-size: 11px; color: var(--pro-text2); border: 1px dashed var(--pro-line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
/* story timeline (Leo 2026-10-15, "the chapter lines overlap"): parts side by side, each with its label in a row of its
   own above a track of chapter blocks; the sentences inside a block touch and have no minimum width, so nothing spills
   into the next part at 1366. Unplayed sentences are a light tint of their part's colour, played ones the full colour,
   the current one the accent; the block holding it stands a little taller. */
#f1-timeline { position: relative; display: flex; align-items: stretch; gap: 8px; height: 26px; min-width: 0; cursor: pointer; touch-action: none; }
.f1-tl-part { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; flex: 1 1 0; min-width: 6px; }
.f1-tl-plabel {
  display: block; height: 10px; overflow: hidden; white-space: nowrap; pointer-events: none;
  font-size: 9.5px; line-height: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--part-c, var(--pro-text2));
}
/* a label wider than its part reaches left over the free end of the previous part's label row */
.f1-tl-plabel.f1-tl-pl-end { display: flex; justify-content: flex-end; overflow: visible; }
.f1-tl-track { display: flex; align-items: center; gap: 2px; height: 12px; min-width: 0; }
.f1-tl-ch { display: flex; flex: 1 1 0; min-width: 3px; height: 8px; transition: height .15s; }
.f1-tl-ch:has(.f1-active), .f1-tl-ch:hover { height: 12px; }
.f1-seg { flex: 1 1 0; min-width: 0; height: 100%; border: 0; padding: 0; border-radius: 0; background: color-mix(in srgb, var(--part-c, var(--pro-muted)) 24%, var(--pro-line)); transition: background-color .15s; }
.f1-tl-ch > .f1-seg:first-child { border-radius: 3px 0 0 3px; }
.f1-tl-ch > .f1-seg:last-child { border-radius: 0 3px 3px 0; }
.f1-tl-ch > .f1-seg:only-child { border-radius: 3px; }
.f1-seg.f1-past { background: color-mix(in srgb, var(--part-c, var(--pro-muted)) 72%, var(--pro-panel)); }
.f1-seg.f1-active, .f1-seg.f1-active[data-part] { background: var(--pro-accent); }
.f1-seg:hover { background: color-mix(in srgb, var(--pro-accent) 55%, var(--pro-panel)); }
.f1-seg.f1-has-comment::after { top: -6px; right: auto; left: 50%; }
.f1-tl-part .f1-seg { position: relative; z-index: 1; }
.f1-tip .f1-tip-part { display: inline-block; margin-bottom: 3px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--part-c, rgba(127,127,127,.35)); color: #fff; }
.f1-tip {
  position: fixed; z-index: 80; max-width: 380px; padding: 7px 10px; border-radius: 8px; background: var(--f1-tip-bg); color: var(--f1-tip-ink);
  font-size: 12px; line-height: 1.4; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.f1-tip b { display: block; margin-bottom: 2px; }

/* chapter menu */
.f1-menu { position: fixed; z-index: 75; min-width: 340px; max-height: 70vh; overflow: auto; padding: 6px; border-radius: 12px; border: 1px solid var(--pro-line); background: var(--pro-panel); box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.f1-menu button { display: flex; width: 100%; align-items: baseline; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.f1-menu button:hover, .f1-menu button[aria-current="true"] { background: var(--pro-focus); }
.f1-menu .f1-menu-no { flex: none; width: 64px; color: var(--pro-text2); font-size: 12px; }
.f1-menu .f1-menu-title { flex: 1; font-weight: 600; }
.f1-menu .f1-menu-range { flex: none; color: var(--pro-text2); font-size: 12px; font-variant-numeric: tabular-nums; }
.f1-menu .f1-menu-part { margin: 8px 6px 3px; padding-top: 6px; border-top: 1px solid var(--pro-line); font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--part-c, var(--pro-text2)); }
.f1-menu .f1-menu-part:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }
.f1-menu button[data-part="bugun"], .f1-menu button[data-part="ideal"], .f1-menu button[data-part="kurulum"], .f1-menu button[data-part="yz"] { box-shadow: inset 3px 0 0 var(--part-c); }

/* word-picture flash (Leo 2026-10-14): a ring pulses on what the narrator names (app.js flashApply) */
/* Leo 2026-10-14 evening: the pulse is on the element itself and follows its shape, never a bounding box.
   HTML: a ring inside the element's own outline (rounded corners, rotation and the scroll box come with the element).
   SVG: a glow along the element's own stroke and fill (a line glows as a line); --f1-flk undoes the camera zoom. */
@property --f1-fl { syntax: '<number>'; inherits: false; initial-value: 0; }
.f1-flash-el {
  outline: 3px solid color-mix(in srgb, var(--pro-accent) calc(var(--f1-fl) * 100%), transparent) !important; outline-offset: -2px !important;
  animation: f1-flash-beat 1000ms ease-out both;
}
.f1-flash-svg {
  filter: drop-shadow(0 0 calc(var(--f1-flk, 1) * 1.4px) color-mix(in srgb, var(--pro-accent) calc(var(--f1-fl) * 100%), transparent))
          drop-shadow(0 0 calc(var(--f1-flk, 1) * 1.4px) color-mix(in srgb, var(--pro-accent) calc(var(--f1-fl) * 100%), transparent))
          drop-shadow(0 0 calc(var(--f1-flk, 1) * 7px) color-mix(in srgb, var(--pro-accent) calc(var(--f1-fl) * 70%), transparent));
  animation: f1-flash-beat 1000ms ease-out both;
}
@keyframes f1-flash-beat {
  /* one blink (Leo 2026-10-17, H39a: "tek bir kere blink yapacak; öbür türlü bağırıyor gibi"; 16 Oct: two, before: three):
     it comes up, stays a moment, fades out */
  0% { --f1-fl: 0; } 18% { --f1-fl: 1; } 50% { --f1-fl: 1; } 100% { --f1-fl: 0; }
}
#f1-top-chips .f1-chip.f1-chip-flash { animation: f1-chip-pulse 1000ms ease-out; }
/* pano tiles and form fields the film lights (ptile:, prow: form fields) */
.f1d-tile.f1-cue, .f1d-field.f1-cue { outline: 2.5px solid var(--pro-accent); outline-offset: -1px; background: var(--pro-focus); }
.f1d-table th.f1-cue { color: var(--pro-accent); background: var(--pro-focus); box-shadow: inset 0 -2.5px 0 var(--pro-accent); }
/* Leo 2026-10-16 (H27a, ui:f1-top-chips): the ring sits inside the pill (inset), so it is the pill's own shape; an outer
   ring was cut flat by the chip row's overflow and read as a rounded rectangle around the pill. Two blinks. */
@keyframes f1-chip-pulse {
  /* one blink (Leo 2026-10-17, H39a) */
  0% { box-shadow: inset 0 0 0 0 transparent; }
  18%, 50% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pro-accent) 80%, transparent); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* ------------------------------------------------------------------ comments drawer, toast, modal */
:is(#f1-comments, #f1-feedback) {
  position: absolute; z-index: 60; top: 0; right: 0; bottom: var(--f1-bar-h); width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--pro-panel); border-left: 1px solid var(--pro-line); box-shadow: -10px 0 30px rgba(0,0,0,.1);
}
/* two rows: the title and the close button on top (always in view), the filter and the actions below (Leo 2026-10-16) */
:is(#f1-comments, #f1-feedback) header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--pro-line); }
:is(#f1-comments, #f1-feedback) header h2 { margin: 0; font-size: 15px; flex: 1 1 auto; order: 0; }
:is(#f1-comments, #f1-feedback) header .f1-drawer-x { order: 1; flex: none; }
:is(#f1-comments, #f1-feedback) header > :not(h2):not(.f1-drawer-x) { order: 2; }
#f1-feedback header select { flex: 1 1 140px; min-width: 0; max-width: 100%; }
:is(#f1-comments, #f1-feedback) header h2 { flex-basis: calc(100% - 110px); }
:is(#f1-comments, #f1-feedback) .f1-c-list { flex: 1; overflow: auto; padding: 8px 14px 16px; }
:is(#f1-comments, #f1-feedback) .f1-c-step { margin: 14px 0 6px; font-size: 12px; font-weight: 650; color: var(--pro-text2); }
:is(#f1-comments, #f1-feedback) .f1-c-item { border: 1px solid var(--pro-line); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; }
:is(#f1-comments, #f1-feedback) .f1-c-meta { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--pro-text2); }
:is(#f1-comments, #f1-feedback) .f1-c-meta b { color: var(--pro-ink); font-size: 12.5px; }
:is(#f1-comments, #f1-feedback) .f1-c-anchor { font-size: 11.5px; color: var(--pro-accent); margin: 3px 0; }
:is(#f1-comments, #f1-feedback) .f1-c-body { white-space: pre-wrap; margin: 4px 0 6px; }
:is(#f1-comments, #f1-feedback) .f1-c-actions { display: flex; gap: 6px; }
:is(#f1-comments, #f1-feedback) .f1-c-empty { color: var(--pro-text2); padding: 20px 0; }
/* Leo 2026-10-14 evening: inside the canvases the pointer is always the arrow (no hand, no grab, no magnifier) */
#f1-app .f1e-root, #f1-app .f1e-root *, #f1-app .f1f-root, #f1-app .f1f-root *, #f1-app #f1-circles, #f1-app #f1-circles * { cursor: default !important; }
#f1-app.f1-picking, #f1-app.f1-picking * { cursor: crosshair !important; }
#f1-app.f1-picking [data-ref]:hover { outline: 2px dashed var(--saffron); outline-offset: 1px; }

#f1-toast {
  position: absolute; z-index: 65; left: 50%; bottom: calc(var(--f1-bar-h) + 18px); transform: translateX(-50%); max-width: 640px;
  padding: 10px 16px; border-radius: 10px; background: var(--f1-tip-bg); color: var(--f1-tip-ink); font-size: 13.5px; box-shadow: 0 8px 26px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none;
}
#f1-toast:empty { display: none; }
#f1-toast[data-tone="warn"] { box-shadow: inset 4px 0 0 var(--st-warn), 0 8px 26px rgba(0,0,0,.22); }
#f1-toast[data-tone="crit"] { box-shadow: inset 4px 0 0 var(--st-crit), 0 8px 26px rgba(0,0,0,.22); }
#f1-toast[data-tone="ok"] { box-shadow: inset 4px 0 0 var(--st-ok), 0 8px 26px rgba(0,0,0,.22); }

#f1-modal { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(16,19,24,.38); }
#f1-modal .f1-modal-card { width: min(560px, calc(100vw - 32px)); max-height: 86vh; overflow: auto; background: var(--pro-panel); color: var(--pro-ink); border: 1px solid var(--pro-line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
#f1-modal h2 { margin: 0 0 12px; font-size: 17px; }
#f1-modal .f1-modal-body { font-size: 14px; line-height: 1.5; }
#f1-modal .f1-modal-body textarea { width: 100%; }
#f1-modal .f1-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* debug overlay (?debug) */
.f1-debug { position: fixed; z-index: 90; right: 8px; top: 56px; width: 300px; max-height: 50vh; overflow: auto; padding: 8px; border-radius: 8px; background: rgba(0,0,0,.78); color: #d9f99d; font: 11px/1.35 var(--f1-mono); pointer-events: none; white-space: pre-wrap; }

/* ------------------------------------------------------------------ sizes (8.4 smaller screens) */
@media (max-width: 1599px) {
  :root { --f1-bar-h: 106px; --f1-head-h: 34px; }
  #f1-caption-text { font-size: 15.5px; -webkit-line-clamp: 1; }
  #f1-clock .f1-clock-label { display: none; }
  #f1-bar-head .f1-tools > button:not(#film-theme):not(#f1-fullscreen) { width: 26px; padding: 0; }
  #f1-bar-head .f1-tools > button > span { display: none; }
  .f1-ti { display: block; }
  /* the icon row sits tighter so the İlkeler gear (faz1/principles.css) costs the chips no room (1366: 0 shortened chips) */
  #f1-bar-head .f1-tools { gap: 3px; }
  #film-theme, #f1-fullscreen { width: 26px; }
}
#f1-app[data-layout="dashboard-wide"] { --f1-bar-h: 56px; }
#f1-app[data-layout="dashboard-wide"] #f1-bar { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; padding: 6px 16px; }
#f1-app[data-layout="dashboard-wide"] #f1-caption { grid-column: auto; }
#f1-app[data-layout="dashboard-wide"] #f1-caption-text { font-size: 14px; -webkit-line-clamp: 1; }
@media (max-width: 999px) {
  body { overflow: auto; }
  #f1-app { height: auto; min-height: 100vh; grid-template-rows: auto auto auto; }
  #f1-stage { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: 70vh; row-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #f1-app *, #f1-app *::before, #f1-app *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ Leo 2026-10-13: interaction layer */
/* captions off: the bar becomes one slim row and the stage takes its height */
/* the head row (breadcrumb, chapter menu, clock, tools) stays: it is navigation, not narration */
#f1-app.f1-nocaptions { --f1-bar-h: 84px; }
#f1-app.f1-nocaptions #f1-bar { row-gap: 6px; }

/* speed */
#f1-speed {
  height: 32px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--pro-line); background: var(--pro-panel); color: var(--pro-ink);
  font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer;
}
#f1-speed:hover, #f1-speed:focus-visible { border-color: var(--pro-accent); color: var(--pro-accent); }

/* the page's own controls as story anchors (ui:<data-testid>) */
#f1-notes-ui { position: fixed; z-index: 72; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
#f1-app .f1-cue-ui { outline: 2.5px solid var(--pro-accent); outline-offset: 2px; }
/* Leo 2026-10-17 (H02b): "sinema" after 10 s of playback when the browser refuses fullscreen (app.js autoFullscreen): the
   tools step back while the film plays and come back on hover over the bar; a small button offers real fullscreen */
:root.f1-sinema #f1-bar-head .f1-tools > button:not(#f1-fullscreen),
:root.f1-sinema #f1-controls > #f1-kumanda-btn, :root.f1-sinema #f1-controls > #f1-kp-share-btn, :root.f1-sinema #f1-sunum-slot,
:root.f1-sinema .f1-panel-tools { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
:root.f1-sinema #f1-bar:hover #f1-bar-head .f1-tools > button, :root.f1-sinema #f1-bar:hover #f1-controls > *, :root.f1-sinema #f1-bar:hover #f1-sunum-slot,
:root.f1-sinema .f1-panel:hover .f1-panel-tools { opacity: 1; pointer-events: auto; }
#f1-fs-offer { position: fixed; z-index: 2147479000; top: 12px; right: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px;
  border: 1px solid var(--pro-line); background: var(--pro-panel); box-shadow: 0 6px 22px rgba(16,24,40,.18); }
#f1-fs-offer[hidden] { display: none; }
#f1-fs-offer button { height: 30px; border: 0; border-radius: 7px; background: none; color: var(--pro-ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
#f1-fs-offer .f1-fs-go { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--pro-accent); color: #fff; }
:root[data-film-theme="dark"] #f1-fs-offer .f1-fs-go { color: #101318; }
#f1-fs-offer .f1-fs-go i { display: inline-flex; width: 14px; height: 14px; }
#f1-fs-offer .f1-fs-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#f1-fs-offer .f1-fs-x { width: 28px; color: var(--pro-text2); }
#f1-fs-offer .f1-fs-x:hover { color: var(--pro-ink); }
/* Leo 2026-10-17 (H01b): the ring of a lit control is drawn in the top layer (app.js HLT), never cropped by a front layer */
#f1-app .f1-cue-ui.f1-cue-top { outline: none !important; }
#f1-hl-top { position: fixed; inset: 0; z-index: 2147480000; pointer-events: none; }
#f1-hl-top .f1-hl-ring { position: fixed; box-sizing: border-box; border: 2.5px solid var(--pro-accent); pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pro-panel) 70%, transparent); }
#f1-hl-top .f1-hl-ring[hidden] { display: none; }
:root[data-giris="kilitli"] #f1-hl-top, :root.f1q-open #f1-hl-top { display: none; }
#f1-app .f1-panel.f1-cue-ui { outline-offset: -2px; }
/* a pano rail button the story lights (ui:f1d-rail-<id>, Bölüm 40): the rail clips, so the light sits inside the button */
#f1-app .f1d-ri.f1-cue-ui { outline-offset: -2.5px; border-radius: 6px; background: var(--pro-focus, #edf1ff); color: var(--pro-accent, #5267d8) !important; }

/* toolbar toggles */
#f1-illus-btn[aria-pressed="false"] { color: var(--pro-muted); text-decoration: line-through; text-decoration-thickness: 1px; }

/* soft gate card (faz1/gate.js) */
#f1-gate {
  position: fixed; z-index: 95; top: calc(var(--f1-top-h) + 8px); right: 16px; width: 320px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 12px; border-radius: 14px; border: 1px solid var(--pro-line);
  background: var(--pro-panel); color: var(--pro-ink); box-shadow: 0 14px 40px rgba(0,0,0,.18); font-size: 13px;
}
#f1-gate b { font-size: 14.5px; }
#f1-gate .f1-gate-why { margin: 0; color: var(--pro-text2); line-height: 1.45; }
#f1-gate label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--pro-text2); }
#f1-gate input {
  font: inherit; font-size: 14px; color: var(--pro-ink); background: var(--pro-bg); border: 1px solid var(--pro-line); border-radius: 9px; padding: 7px 10px;
}
#f1-gate input:focus { outline: 2px solid var(--pro-focus); border-color: var(--pro-accent); }
#f1-gate .f1-gate-err { margin: 0; min-height: 1.2em; font-size: 12px; color: var(--st-crit, #c8473d); }
#f1-gate .f1-gate-foot { display: flex; justify-content: flex-end; gap: 8px; }
#f1-gate.f1-gate-shake { animation: f1-shake 320ms ease-in-out; }
@keyframes f1-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* right-click feedback popover */
#f1-fb-pop {
  position: fixed; z-index: 90; width: 340px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 10px;
  border-radius: 12px; border: 1px solid var(--pro-accent); background: var(--pro-panel); color: var(--pro-ink); box-shadow: 0 14px 36px rgba(0,0,0,.2); font-size: 12.5px;
}
#f1-fb-pop .f1-fb-head { display: flex; flex-direction: column; gap: 1px; }
#f1-fb-pop .f1-fb-head b { font-size: 13.5px; }
#f1-fb-pop .f1-fb-where { color: var(--pro-text2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#f1-fb-pop .f1-fb-sentence { color: var(--pro-text2); font-size: 11.5px; font-style: italic; line-height: 1.35; margin-top: 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#f1-fb-pop textarea, .f1-fb-editbox textarea {
  font: inherit; font-size: 13.5px; color: var(--pro-ink); background: var(--pro-bg); border: 1px solid var(--pro-line); border-radius: 9px;
  padding: 8px 10px; min-height: 86px; resize: vertical;
}
#f1-fb-pop textarea:focus, .f1-fb-editbox textarea:focus { outline: 2px solid var(--pro-focus); border-color: var(--pro-accent); }
.f1-fb-editbox { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.f1-fb-editbox textarea { width: 100%; box-sizing: border-box; }
#f1-fb-pop .f1-fb-foot { display: flex; align-items: center; gap: 8px; }
#f1-fb-pop .f1-fb-foot small { flex: 1; color: var(--pro-muted); font-size: 11px; }

/* feedback list (shares the comments drawer look) */
#f1-feedback header select {
  max-width: 170px; height: 30px; border-radius: 8px; border: 1px solid var(--pro-line); background: var(--pro-panel); color: var(--pro-ink); font: inherit; font-size: 12px;
}
#f1-feedback .f1-fb-who { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--pro-line); font-size: 12px; color: var(--pro-text2); }
#f1-feedback .f1-fb-tip { color: var(--pro-muted); }
#f1-feedback .f1-fb-el { font-size: 11.5px; color: var(--pro-muted); margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#f1-feedback .f1-fb-moment { font-size: 12px; font-weight: 650; color: var(--pro-accent); margin: 1px 0 2px; }
#f1-feedback .f1-fb-go { cursor: pointer; }
#f1-feedback .f1-fb-go:hover { background: var(--pro-soft); }
.f1-link { border: 0; background: none; padding: 0; color: var(--pro-accent); font: inherit; text-decoration: underline; cursor: pointer; }

/* the flow navigator over the İş akışı panel: the whole flow, "Buradasınız" on the module the story is in, its stages and
   the current stage's steps in one card (Leo 2026-10-15 Adımlar, 16-17 Oct Akışın tamamı; one card since 17 Oct evening,
   H09c). faz1/app.js navApply / navPlace; forms: full, short (no steps), closed (one line). */
#f1-nav { position: absolute; left: 0; top: 0; z-index: 33; width: 276px; box-sizing: border-box; pointer-events: auto;
  background: color-mix(in srgb, var(--pro-panel) 96%, transparent); border: 1px solid var(--pro-line); border-radius: 10px; box-shadow: 0 4px 16px rgba(16,24,40,.16);
  font: 12.5px/1.3 var(--f1-sans); color: var(--pro-ink); padding: 8px 10px 9px; transition: transform 260ms var(--f1-kernel); }
#f1-nav[hidden] { display: none; }
#f1-nav header { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
#f1-nav header b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; }
#f1-nav .f1-nv-fold { border: 0; background: none; color: var(--pro-text2); padding: 0 3px; font-size: 13px; cursor: pointer; }
#f1-nav ol, #f1-nav ul { list-style: none; margin: 0; padding: 0; }
#f1-nav .f1-nv-mods { position: relative; display: flex; flex-direction: column; gap: 4px; }
/* the flow's direction: a line down the left side of the modules, ending in an arrow head */
#f1-nav .f1-nv-mods::before { content: ""; position: absolute; left: 5px; top: 9px; bottom: 9px; width: 1.5px; background: var(--pro-line); }
#f1-nav .f1-nv-mods::after { content: ""; position: absolute; left: 1.75px; bottom: 2px; border: 4px solid transparent; border-top: 6px solid var(--pro-muted); border-bottom: 0; }
#f1-nav .f1-nv-mod { position: relative; padding-left: 17px; }
#f1-nav .f1-nv-mod::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--pro-panel); border: 1.5px solid var(--pro-muted); box-sizing: border-box; }
#f1-nav .f1-nv-m { display: flex; align-items: center; gap: 6px; min-height: 23px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--pro-line); background: var(--pro-soft); font-weight: 600; color: var(--pro-text2); }
#f1-nav .f1-nv-mt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#f1-nav .f1-nv-here::before { background: var(--pro-accent); border-color: var(--pro-accent); }
#f1-nav .f1-nv-here > .f1-nv-m { border-color: var(--pro-accent); background: var(--pro-focus); color: var(--pro-accent); }
#f1-nav .f1-nv-you { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--pro-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
#f1-nav .f1-nv-sts { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px 6px; }
#f1-nav .f1-nv-row { display: flex; align-items: center; gap: 6px; min-height: 21px; padding: 0 6px; border-radius: 5px; color: var(--pro-text2); }
#f1-nav .f1-nv-row b { flex: none; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--pro-soft); font-size: 10.5px; color: var(--pro-text2); }
#f1-nav .f1-nv-row span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#f1-nav .f1-nv-on > .f1-nv-row { background: var(--pro-accent); color: #fff; font-weight: 650; }
#f1-nav .f1-nv-on > .f1-nv-row b { background: #fff; color: var(--pro-accent); }
#f1-nav .f1-nv-steps { margin: 3px 0 3px 15px; padding: 0 0 0 8px; border-left: 2px solid color-mix(in srgb, var(--pro-accent) 35%, var(--pro-line)); font-size: 12px; }
#f1-nav .f1-nv-steps li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pro-text2); line-height: 1.5; }
#f1-nav .f1-nv-steps li.f1-nv-done::before { content: "✓ "; color: var(--st-ok); }
#f1-nav .f1-nv-steps li.f1-nv-cur { color: var(--pro-accent); font-weight: 650; }
#f1-nav .f1-nv-steps li.f1-nv-cur::before { content: "● "; }
#f1-nav .f1-nv-steps li.f1-nv-more { color: var(--pro-muted); font-size: 11px; }
:root[data-film-theme="dark"] #f1-nav .f1-nv-you, :root[data-film-theme="dark"] #f1-nav .f1-nv-on > .f1-nv-row { color: #101318; }
:root[data-film-theme="dark"] #f1-nav .f1-nv-on > .f1-nv-row b { background: #101318; }
#f1-nav.f1-nv-short .f1-nv-steps { display: none; }
#f1-nav .f1-nv-pill { display: none; }
#f1-nav.f1-nv-closed { width: auto !important; padding: 4px 8px; }
#f1-nav.f1-nv-closed > :not(.f1-nv-pill) { display: none; }
#f1-nav.f1-nv-closed .f1-nv-pill { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; font: 600 12px/1.3 var(--f1-sans); color: var(--pro-text2); white-space: nowrap; }
#f1-nav .f1-nv-pill b { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--pro-accent); color: #fff; font-size: 11px; }
:root[data-film-theme="dark"] #f1-nav .f1-nv-pill b { color: #101318; }
#f1-nav .f1-nv-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#f1-nav .f1-nv-pill i { font-style: normal; color: var(--pro-accent); }

/* (17 Oct 2026: the locked part's dashed block, locked menu entry and prompt are gone; SUNUM-MODLARI.md) */

/* voice recording in the note box and the list (Leo 2026-10-16) */
#f1-fb-pop .f1-fb-rec { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
/* Leo 2026-10-17 (H25b): "Kaydı sil? Evet, sil / Hayır" inside the box, in place of its buttons (app.js fbConfirm) */
#f1-fb-pop .f1-fb-foot[hidden] { display: none; }
#f1-fb-pop .f1-fb-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--st-crit) 45%, var(--pro-line)); background: color-mix(in srgb, var(--st-crit) 7%, var(--pro-panel)); }
#f1-fb-pop .f1-fb-confirm { justify-content: flex-end; }
#f1-fb-pop .f1-fb-confirm > span { flex: 1 1 100%; font-size: 13px; font-weight: 600; color: var(--pro-ink); }
#f1-fb-pop .f1-fb-confirm .f1-fb-confirm-yes { border-color: var(--st-crit); color: var(--st-crit); }
#f1-fb-pop .f1-fb-rec-btn { height: 30px; padding: 0 10px; }
#f1-fb-pop .f1-fb-rec-btn svg { width: 15px; height: 15px; }
#f1-fb-pop .f1-fb-rec[data-state="recording"] .f1-fb-rec-btn { border-color: var(--st-crit); color: var(--st-crit); background: color-mix(in srgb, var(--st-crit) 9%, var(--pro-panel)); }
#f1-fb-pop .f1-fb-rec[data-state="wait"] .f1-fb-rec-btn, #f1-fb-pop .f1-fb-rec[data-state="stopping"] .f1-fb-rec-btn { color: var(--pro-text2); }
#f1-fb-pop .f1-fb-rec-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--st-crit); animation: f1-rec-pulse 1s ease-in-out infinite; }
#f1-fb-pop .f1-fb-rec-dot[hidden], #f1-fb-pop .f1-fb-rec-time[hidden], #f1-fb-pop .f1-fb-take[hidden], #f1-fb-pop .f1-fb-rec-msg[hidden] { display: none; }
#f1-fb-pop .f1-fb-rec-time { font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: left; }
#f1-fb-pop .f1-fb-take { display: inline-flex; align-items: center; gap: 6px; }
#f1-fb-pop .f1-fb-take .f1-btn, #f1-feedback .f1-fb-play { height: 28px; padding: 0 9px; font-size: 12.5px; }
#f1-fb-pop .f1-fb-take svg, #f1-feedback .f1-fb-play svg { width: 13px; height: 13px; }
.f1-fb-alen { color: var(--pro-text2); font-variant-numeric: tabular-nums; font-weight: 500; }
.f1-fb-play[data-state="playing"] .f1-fb-alen, .f1-fb-play[data-state="loading"] .f1-fb-alen { color: inherit; }
#f1-fb-pop .f1-fb-rec-msg { margin: -2px 0 0; font-size: 12px; line-height: 1.35; color: var(--st-crit); }
#f1-feedback .f1-fb-audio { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
#f1-feedback .f1-fb-tr { margin: 0 0 6px; padding: 6px 9px; border-radius: 8px; background: var(--pro-soft); font-size: 12.5px; line-height: 1.4; white-space: pre-wrap; }
#f1-feedback .f1-fb-tr small { display: block; font-size: 11px; color: var(--pro-text2); margin-bottom: 2px; }
#f1-feedback .f1-fb-tr-wait { color: var(--pro-text2); font-style: italic; }
@keyframes f1-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { #f1-fb-pop .f1-fb-rec-dot { animation: none; } }
/* a picture of the right-click comment box (Leo 2026-10-16, H01b): where, an example, recording, Vazgeç and Kaydet */
.f1-note.f1-note-yorum { display: flex; flex-direction: column; gap: 5px; width: 250px; padding: 9px 11px; white-space: normal; text-align: left; background: var(--pro-panel); color: var(--pro-ink); border: 1px solid var(--pro-accent); box-shadow: 0 6px 20px rgba(16,24,40,.18); }
.f1-note-yorum > b { font-size: 12px; color: var(--pro-accent); }
.f1-note-yorum .f1-ny-in { display: block; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--pro-line); background: var(--pro-soft); font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.f1-note-yorum .f1-ny-row { display: flex; gap: 6px; justify-content: flex-end; }
.f1-note-yorum .f1-ny-row i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--pro-line); color: var(--pro-text2); }
.f1-note-yorum .f1-ny-row .f1-ny-mic { margin-right: auto; }
.f1-note-yorum .f1-ny-row .f1-ny-mic.f1-on { color: #fff; background: var(--st-crit, #d23a2e); border-color: transparent; }
.f1-note-yorum .f1-ny-row .f1-ny-ok { color: #fff; background: var(--pro-accent); border-color: transparent; }

/* Osman Bey 2026-10-16 (H07o): which system is on screen, in words and as a sign, next to the chapter in the bottom bar:
   old system (today) = a sheet of paper, new system (KSS) = the circle, KSS's own file format; the part's own colour */
#f1-speaker .f1-crumb-part[data-part="bugun"]::before, #f1-speaker .f1-crumb-part[data-part="ideal"]::before {
  content: ''; display: inline-block; vertical-align: -1px; margin-right: 5px; box-sizing: border-box; }
#f1-speaker .f1-crumb-part[data-part="bugun"]::before { width: 9px; height: 11px; border: 1.5px solid var(--part-bugun); border-radius: 1.5px;
  background: linear-gradient(var(--part-bugun), var(--part-bugun)) 1.5px 2.5px / 3.5px 1.2px no-repeat, linear-gradient(var(--part-bugun), var(--part-bugun)) 1.5px 5px / 3.5px 1.2px no-repeat; }
#f1-speaker .f1-crumb-part[data-part="ideal"]::before { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--part-ideal);
  background: radial-gradient(circle, var(--part-ideal) 0 2px, transparent 2.4px); }

/* the admin page's "Konuş kayıtları" window (faz1/konus-log.js, 21 Oct 2026) */
.f1kl-body { max-height: 70vh; overflow: auto; width: min(1100px, 88vw); }
.f1kl-tools { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.f1kl-conv { margin: 6px 0; border: 1px solid var(--pro-line, #d9dde3); border-radius: 6px; padding: 6px 8px; }
.f1kl-conv > summary { cursor: pointer; font-weight: 600; }
.f1kl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.f1kl-table th, .f1kl-table td { border-top: 1px solid var(--pro-line, #e3e6ea); padding: 3px 6px; vertical-align: top; text-align: left; }
.f1kl-screen { color: var(--pro-muted, #5b6470); font-size: 11.5px; }