/* faz1/deneysel.css · the Deneysel page (faz1/deneysel.js, docs/faz1/DENEYSEL.md). Selectors start with #f1-dn, .dn- or
 * #f1-dn-entry. The drawings reuse the film's tokens (faz1.css) and the scene classes (scenes.css: .f1sc-art, .f1sc-paper,
 * .f1sc-file, .f1sc-sub-c ...), so light and dark follow the film's theme.
 * Transitions: buttons only. The drawings move only from the player clock (deneysel.js), never by CSS.
 */

/* ------------------------------------------------------------------ the entry in the bottom bar (beside Sunum) */
#f1-dn-entry {
  height: 30px; padding: 0 10px; margin-left: 2px; border-radius: 9px; border: 1px dashed var(--pro-accent); background: var(--pro-panel);
  color: var(--pro-accent); font: 600 12.5px/1 var(--f1-sans); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; flex: none;
}
#f1-dn-entry:hover { background: var(--pro-focus); }
/* the bar's convention below 1600 px: the icon alone (its title says Deneysel), the timeline keeps its width */
@media (max-width: 1599px) { #f1-dn-entry { padding: 0 9px; } #f1-dn-entry > span { display: none; } }
#f1-dn-entry svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ the page */
#f1-dn {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--pro-page); color: var(--pro-ink); font: 14px/1.4 var(--f1-sans);
}
#f1-dn[hidden] { display: none; }
#f1-dn *, #f1-dn *::before, #f1-dn *::after { box-sizing: border-box; }
#f1-dn button { font: inherit; color: inherit; cursor: pointer; }
#f1-dn button:focus-visible { outline: 2px solid var(--pro-accent); outline-offset: 2px; }
.dn-btn {
  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;
}
.dn-btn:hover { border-color: var(--pro-accent); color: var(--pro-accent); }
a.dn-link { text-decoration: none; flex: none; }   /* /cuma and /karsilastirma (Leo 2026-10-17) */
.dn-btn svg { width: 14px; height: 14px; fill: currentColor; }
.dn-btn.dn-primary { background: var(--pro-accent); border-color: var(--pro-accent); color: #fff; font-weight: 650; }
:root[data-film-theme="dark"] .dn-btn.dn-primary { color: #101318; }
@media (prefers-color-scheme: dark) { :root:not([data-film-theme]) .dn-btn.dn-primary { color: #101318; } }
.dn-btn.dn-primary:hover { filter: brightness(1.07); color: #fff; }
:root[data-film-theme="dark"] .dn-btn.dn-primary:hover { color: #101318; }

.dn-head { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--pro-line); background: var(--pro-panel); min-width: 0; }
.dn-kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pro-accent); background: var(--pro-focus); padding: 3px 8px; border-radius: 6px; flex: none; }
.dn-head h1 { margin: 0; font-size: 16px; font-weight: 650; white-space: nowrap; }
.dn-head .dn-sub { color: var(--pro-text2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dn-sp { flex: 1 1 auto; }

.dn-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; }
@media (min-width: 1700px) { .dn-body { grid-template-columns: 340px minmax(0, 1fr); } }

/* the list of concepts */
.dn-list { overflow: auto; border-right: 1px solid var(--pro-line); background: var(--pro-panel); padding: 8px 8px 16px; }
.dn-group { margin: 6px 0 10px; }
.dn-group > h2 { margin: 4px 6px 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pro-text2); display: flex; gap: 6px; align-items: baseline; }
.dn-group > h2 b { color: var(--pro-accent); }
.dn-group > p { margin: 0 6px 6px; font-size: 11.5px; line-height: 1.35; color: var(--pro-muted); }
.dn-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; width: 100%; text-align: left;
  padding: 7px 8px; margin: 2px 0; border-radius: 9px; border: 1px solid transparent; background: none;
}
.dn-item:hover { background: var(--pro-soft); }
.dn-item[aria-current="true"] { background: var(--pro-focus); border-color: var(--pro-accent); }
.dn-no { font-size: 12px; font-weight: 700; color: var(--pro-accent); padding-top: 1px; }
.dn-it { min-width: 0; }
.dn-it b { display: block; font-size: 13px; font-weight: 650; line-height: 1.25; }
.dn-it span { display: block; font-size: 11.5px; line-height: 1.3; color: var(--pro-text2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dn-len { font-size: 11px; color: var(--pro-muted); font-variant-numeric: tabular-nums; padding-top: 2px; text-align: right; }
.dn-chosen { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: var(--st-ok); }
.dn-chosen[hidden] { display: none; }

/* the player */
.dn-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; padding: 10px 16px 10px; gap: 8px; }
.dn-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dn-titles { min-width: 0; flex: 1 1 auto; }
.dn-title { display: block; font-size: 16px; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-title i { font-style: normal; color: var(--pro-accent); margin-right: 6px; }
.dn-idea { margin: 2px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--pro-text2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dn-top .dn-choose { height: 36px; padding: 0 16px; font-size: 14px; flex: none; }
.dn-top .dn-choose svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dn-saved { font-size: 12px; font-weight: 650; color: var(--st-ok); white-space: nowrap; flex: none; }
.dn-saved[hidden] { display: none; }

.dn-wrap { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--pro-line); border-radius: 14px; background: var(--pro-panel); box-shadow: var(--f1-shadow); }
.dn-canvas { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; transform-origin: 0 0; overflow: hidden; }
.dn-svg { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; display: block; overflow: hidden; font-family: var(--f1-sans); }
.dn-html { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; pointer-events: none; }
.dn-badge { position: absolute; right: 10px; top: 8px; font-size: 11px; font-weight: 650; color: var(--pro-muted); background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 6px; padding: 2px 7px; pointer-events: none; }

.dn-cap { margin: 0; min-height: 2.7em; font-size: 16.5px; line-height: 1.35; color: var(--pro-ink); display: flex; align-items: center; }
@media (max-height: 820px) { .dn-cap { font-size: 15.5px; } }

.dn-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dn-ctl .dn-play { width: 92px; }
.dn-time { font-size: 12.5px; color: var(--pro-text2); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 82px; text-align: center; }
.dn-track { position: relative; flex: 1 1 auto; min-width: 120px; height: 28px; cursor: pointer; touch-action: none; }
.dn-track-bg { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--pro-line); }
.dn-track-fill { position: absolute; left: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--pro-accent); }
.dn-track-tick { position: absolute; top: 8px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--pro-panel); box-shadow: 0 0 0 1px var(--pro-line); }
.dn-track-knob { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--pro-accent); border: 2px solid var(--pro-panel); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.dn-ctl select { height: 32px; border-radius: 9px; border: 1px solid var(--pro-line); background: var(--pro-panel); color: var(--pro-ink); font: inherit; font-size: 13px; padding: 0 6px; }
.dn-ctl .dn-icon { width: 34px; padding: 0; }

/* ------------------------------------------------------------------ drawing classes (inside .dn-svg and .dn-html) */
:is(#f1-dn, .f1-nabiz) .dn-t { fill: var(--pro-ink); }
:is(#f1-dn, .f1-nabiz) .dn-t2 { fill: var(--pro-text2); }
:is(#f1-dn, .f1-nabiz) .dn-tm { fill: var(--pro-muted); }
:is(#f1-dn, .f1-nabiz) .dn-ta { fill: var(--pro-accent); }
:is(#f1-dn, .f1-nabiz) .dn-tok { fill: var(--st-ok); }
:is(#f1-dn, .f1-nabiz) .dn-twarn { fill: var(--f1sc-warn-ink, #8a6500); }
:is(#f1-dn, .f1-nabiz) .dn-tb { font-weight: 650; }
:is(#f1-dn, .f1-nabiz) .dn-halo { paint-order: stroke; stroke: var(--pro-panel); stroke-width: 6px; stroke-linejoin: round; }
:is(#f1-dn, .f1-nabiz) .dn-num { font-variant-numeric: tabular-nums; }
:is(#f1-dn, .f1-nabiz) .dn-card { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.4; }
:is(#f1-dn, .f1-nabiz) .dn-card2 { fill: var(--pro-soft); stroke: var(--pro-line); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-glass { fill: color-mix(in srgb, var(--pro-panel) 88%, transparent); stroke: var(--pro-line); stroke-width: 1.4; }
:is(#f1-dn, .f1-nabiz) .dn-shadow { filter: drop-shadow(0 8px 22px rgba(20, 30, 40, .14)); }
/* a person: their pencil portrait's round face on white paper in both themes (faz1/img/p-*-yuz.webp; never a vector figure) */
:is(#f1-dn, .f1-nabiz) .dn-pt-disc { fill: #ffffff; stroke: none; }
:is(#f1-dn, .f1-nabiz) .dn-pt-ring { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.3; }
:is(#f1-dn, .f1-nabiz) .dn-line { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.5; }
:is(#f1-dn, .f1-nabiz) .dn-dash { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.4; stroke-dasharray: 6 6; }
:is(#f1-dn, .f1-nabiz) .dn-acc { fill: none; stroke: var(--pro-accent); stroke-width: 2.2; }
:is(#f1-dn, .f1-nabiz) .dn-acc-thin { fill: none; stroke: var(--pro-accent); stroke-width: 1.4; }
:is(#f1-dn, .f1-nabiz) .dn-acc-fill { fill: color-mix(in srgb, var(--pro-accent) 9%, var(--pro-panel)); stroke: var(--pro-accent); stroke-width: 2; }
:is(#f1-dn, .f1-nabiz) .dn-cone { fill: color-mix(in srgb, var(--pro-accent) 7%, transparent); stroke: none; }
:is(#f1-dn, .f1-nabiz) .dn-ok { fill: none; stroke: var(--st-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:is(#f1-dn, .f1-nabiz) .dn-ok-fill { fill: color-mix(in srgb, var(--st-ok) 12%, var(--pro-panel)); stroke: var(--st-ok); stroke-width: 1.8; }
:is(#f1-dn, .f1-nabiz) .dn-warn-fill { fill: color-mix(in srgb, var(--st-warn) 14%, var(--pro-panel)); stroke: var(--st-warn); stroke-width: 1.8; }
:is(#f1-dn, .f1-nabiz) .dn-warn-ring { fill: var(--pro-panel); stroke: var(--st-warn); stroke-width: 2.2; stroke-dasharray: 5 4; }
:is(#f1-dn, .f1-nabiz) .dn-wait-ring { fill: var(--pro-panel); stroke: var(--st-wait); stroke-width: 1.8; stroke-dasharray: 4 4; }
:is(#f1-dn, .f1-nabiz) .dn-crit { fill: none; stroke: var(--st-crit); stroke-width: 1.5; stroke-dasharray: 5 4; }
:is(#f1-dn, .f1-nabiz) .dn-dot { fill: var(--f1sc-wire); }
:is(#f1-dn, .f1-nabiz) .dn-dot-out { fill: var(--f1sc-plate); stroke: var(--f1sc-wire); stroke-width: 1.3; }
:is(#f1-dn, .f1-nabiz) .dn-dot-acc { fill: var(--pro-accent); }
:is(#f1-dn, .f1-nabiz) .dn-flyer { fill: var(--pro-accent); stroke: var(--pro-panel); stroke-width: 2; }
:is(#f1-dn, .f1-nabiz) .dn-yz { fill: var(--f1sc-yz, #8a4fc1); }

/* a camera group (zooms of 0.3 to 5): lines keep their screen width */
:is(#f1-dn, .f1-nabiz) .dn-world :is(circle, rect, path, line, polygon, ellipse) { vector-effect: non-scaling-stroke; }
:is(#f1-dn, .f1-nabiz) .dn-world .dn-invoice :is(circle, rect, path) { vector-effect: none; }

/* the pulse of a highlight: one soft ring, once (Leo 17 Oct: one blink, not a blinking) */
:is(#f1-dn, .f1-nabiz) .dn-pulse { fill: none; stroke: var(--pro-accent); stroke-width: 2.4; }
:is(#f1-dn, .f1-nabiz) .dn-lit { stroke: var(--pro-accent) !important; }

/* the file circle (KSS's dosya dairesi) and its small circles; the base shapes are scenes.css .f1sc-file and .f1sc-sub-c */
:is(#f1-dn, .f1-nabiz) .dn-file-in { fill: color-mix(in srgb, var(--fam-work) 9%, var(--pro-panel)); stroke: var(--fam-work); stroke-width: 2.2; }
:is(#f1-dn, .f1-nabiz) .dn-file-big { fill: color-mix(in srgb, var(--fam-work) 4%, var(--pro-panel)); fill-opacity: .7; stroke: var(--fam-work); stroke-width: 1.8; }
:is(#f1-dn, .f1-nabiz) .dn-file-solid { fill: var(--fam-work); stroke: var(--pro-panel); stroke-width: 2; }
:is(#f1-dn, .f1-nabiz) .dn-file-solid-t { fill: var(--fam-work-ink); font-weight: 700; }
:is(#f1-dn, .f1-nabiz) .dn-sub-ok { fill: var(--st-ok) !important; stroke: var(--st-ok) !important; stroke-dasharray: none !important; }
:is(#f1-dn, .f1-nabiz) .dn-sub-wait { fill: var(--pro-panel) !important; stroke: var(--st-wait) !important; stroke-dasharray: 4 3 !important; stroke-width: 1.8 !important; }
:is(#f1-dn, .f1-nabiz) .dn-sub-warn { fill: var(--pro-panel) !important; stroke: var(--st-warn) !important; stroke-dasharray: 5 3 !important; stroke-width: 2.2 !important; }
:is(#f1-dn, .f1-nabiz) .dn-sub-lit { stroke: var(--pro-accent) !important; stroke-width: 3 !important; }
:is(#f1-dn, .f1-nabiz) .dn-tick { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* the small e-fatura thumbnails behind the circles (lines only, no print to read) */
:is(#f1-dn, .f1-nabiz) .dn-thumb-p { fill: var(--kagit); stroke: var(--kagit-kenar); stroke-width: 1; }
:is(#f1-dn, .f1-nabiz) .dn-thumb-l { fill: none; stroke: rgba(0, 0, 0, .22); stroke-width: 2; stroke-linecap: round; }
:is(#f1-dn, .f1-nabiz) .dn-thumb-h { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 3; stroke-linecap: round; }
:is(#f1-dn, .f1-nabiz) .dn-thumb-q { fill: none; stroke: rgba(0, 0, 0, .45); stroke-width: 1.4; }
:is(#f1-dn, .f1-nabiz) .dn-thumb-b { fill: rgba(0, 0, 0, .06); stroke: none; }
:is(#f1-dn, .f1-nabiz) .dn-paper-sh { filter: drop-shadow(0 3px 9px rgba(0, 0, 0, .14)); }
:is(#f1-dn, .f1-nabiz) .dn-field-lit { fill: color-mix(in srgb, var(--pro-accent) 16%, transparent); stroke: var(--pro-accent); stroke-width: 2.4; }
:is(#f1-dn, .f1-nabiz) .dn-field-ok { fill: color-mix(in srgb, var(--st-ok) 14%, transparent); stroke: var(--st-ok); stroke-width: 2.4; }

/* screens: the light monitor outline, the pano miniature, the film layout miniature, the phone */
:is(#f1-dn, .f1-nabiz) .dn-mon { fill: var(--f1sc-plate); stroke: var(--f1sc-edge); stroke-width: 1.6; }
:is(#f1-dn, .f1-nabiz) .dn-mon-in { fill: var(--pro-page); stroke: var(--f1sc-lo); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-mon-stand { fill: var(--f1sc-plate); stroke: var(--f1sc-edge); stroke-width: 1.4; }
:is(#f1-dn, .f1-nabiz) .dn-scr { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-tile { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-chip { fill: color-mix(in srgb, var(--st-ok) 10%, var(--pro-panel)); stroke: color-mix(in srgb, var(--st-ok) 60%, var(--pro-panel)); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-chip-a { fill: var(--pro-focus); stroke: var(--pro-accent); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-chip-w { fill: color-mix(in srgb, var(--st-warn) 16%, var(--pro-panel)); stroke: var(--st-warn); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-chip-c { fill: color-mix(in srgb, var(--st-crit) 10%, var(--pro-panel)); stroke: var(--st-crit); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-row { stroke: var(--pro-line); stroke-width: 1.1; fill: none; }
:is(#f1-dn, .f1-nabiz) .dn-panel { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.4; }
:is(#f1-dn, .f1-nabiz) .dn-panel-lit { fill: none; stroke: var(--pro-accent); stroke-width: 3; }
:is(#f1-dn, .f1-nabiz) .dn-bar { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-mini { fill: var(--pro-soft); stroke: var(--pro-line); stroke-width: 1; }
:is(#f1-dn, .f1-nabiz) .dn-mini-acc { fill: var(--pro-focus); stroke: var(--pro-accent); stroke-width: 1; }
:is(#f1-dn, .f1-nabiz) .dn-phone { fill: var(--f1sc-plate); stroke: var(--f1sc-edge); stroke-width: 1.6; }
:is(#f1-dn, .f1-nabiz) .dn-qr { fill: var(--pro-ink); }

/* flows: the summary column and the swimlane detail (the film's İş akışı look, flow-v1.css) */
:is(#f1-dn, .f1-nabiz) .dn-lane { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1; }
:is(#f1-dn, .f1-nabiz) .dn-lane-odd { fill: var(--pro-soft); }
:is(#f1-dn, .f1-nabiz) .dn-lane-head { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1; }
:is(#f1-dn, .f1-nabiz) .dn-node { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.4; }
:is(#f1-dn, .f1-nabiz) .dn-node-exc { stroke: var(--st-crit); stroke-dasharray: 5 3; }
:is(#f1-dn, .f1-nabiz) .dn-node-done { fill: color-mix(in srgb, var(--pro-green) 9%, var(--pro-panel)); stroke: color-mix(in srgb, var(--pro-green) 55%, var(--pro-line)); }
:is(#f1-dn, .f1-nabiz) .dn-node-lit { fill: var(--pro-focus); stroke: var(--pro-accent); stroke-width: 2.6; }
:is(#f1-dn, .f1-nabiz) .dn-node-t { fill: var(--pro-ink); font-weight: 550; }
:is(#f1-dn, .f1-nabiz) .dn-node-lit + .dn-node-t, :is(#f1-dn, .f1-nabiz) .dn-node-tl { fill: var(--pro-accent); }
:is(#f1-dn, .f1-nabiz) .dn-edge { fill: none; stroke: var(--edge); stroke-width: 2; }
:is(#f1-dn, .f1-nabiz) .dn-edge-ist { fill: none; stroke: var(--st-crit); stroke-width: 1.5; stroke-dasharray: 4 4; }
:is(#f1-dn, .f1-nabiz) .dn-edge-lit { stroke: var(--pro-accent); stroke-width: 2.4; }
:is(#f1-dn, .f1-nabiz) .dn-arrow { fill: var(--edge); }
:is(#f1-dn, .f1-nabiz) .dn-arrow-ist { fill: var(--st-crit); }
:is(#f1-dn, .f1-nabiz) .dn-veil { fill: var(--pro-page); stroke: none; }
:is(#f1-dn, .f1-nabiz) .dn-mag-head { fill: color-mix(in srgb, var(--pro-accent) 10%, var(--pro-panel)); stroke: none; }
:is(#f1-dn, .f1-nabiz) .dn-open-box { fill: color-mix(in srgb, var(--pro-accent) 5%, transparent); stroke: var(--pro-accent); stroke-width: 1.6; }
:is(#f1-dn, .f1-nabiz) .dn-sum-box { fill: none; stroke: var(--f1sc-edge); stroke-width: 1.3; stroke-dasharray: 5 4; }
:is(#f1-dn, .f1-nabiz) .dn-sum-band { fill: color-mix(in srgb, var(--pro-accent) 4%, transparent); stroke: none; }
:is(#f1-dn, .f1-nabiz) .dn-sum-item { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: 1.1; }
:is(#f1-dn, .f1-nabiz) .dn-sum-item.dn-on { fill: var(--pro-focus); stroke: var(--pro-accent); stroke-width: 2.4; }
:is(#f1-dn, .f1-nabiz) .dn-sum-no { fill: var(--pro-soft); stroke: none; }
:is(#f1-dn, .f1-nabiz) .dn-sum-item.dn-on + .dn-sum-no { fill: var(--pro-accent); }

/* Olaylar (the film's gantt look, gantt.css) */
:is(#f1-dn, .f1-nabiz) .dn-g-row { fill: var(--pro-panel); stroke: none; }
:is(#f1-dn, .f1-nabiz) .dn-g-row-odd { fill: var(--pro-soft); }
:is(#f1-dn, .f1-nabiz) .dn-g-grid { stroke: var(--pro-line); stroke-width: 1; }
:is(#f1-dn, .f1-nabiz) .dn-g-now { stroke: var(--saffron); stroke-width: 2; }
:is(#f1-dn, .f1-nabiz) .dn-g-nowt { fill: var(--saffron); font-weight: 650; }
:is(#f1-dn, .f1-nabiz) .dn-g-thread { fill: none; stroke: var(--f1sc-mid); stroke-width: 1.4; }
:is(#f1-dn, .f1-nabiz) .dn-g-thread-lit { fill: none; stroke: var(--pro-accent); stroke-width: 2.4; }
:is(#f1-dn, .f1-nabiz) .dn-bead { fill: var(--pro-panel); stroke: var(--st-ok); stroke-width: 2; }
:is(#f1-dn, .f1-nabiz) .dn-bead-m { fill: var(--pro-panel); stroke: var(--pro-accent); stroke-width: 2; }
:is(#f1-dn, .f1-nabiz) .dn-bead-d { fill: var(--pro-panel); stroke: var(--f1sc-edge); stroke-width: 2; }
:is(#f1-dn, .f1-nabiz) .dn-bead-s { fill: var(--pro-panel); stroke: var(--saffron); stroke-width: 2; }
:is(#f1-dn, .f1-nabiz) .dn-bead-ic { fill: none; stroke: var(--st-ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(#f1-dn, .f1-nabiz) .dn-bead-lit { fill: var(--pro-focus); stroke: var(--pro-accent); stroke-width: 3; }
:is(#f1-dn, .f1-nabiz) .dn-quiet { opacity: .5; }
:is(#f1-dn, .f1-nabiz) .dn-quiet :is(circle, path, rect) { stroke: var(--f1sc-mid) !important; }

/* the kapak (cover sheet) */
:is(#f1-dn, .f1-nabiz) .dn-kapak { fill: var(--kagit); stroke: var(--kagit-kenar); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-ink { fill: var(--baski, #1a1a1a); }
:is(#f1-dn, .f1-nabiz) .dn-ink2 { fill: var(--baski-gri, #6b6b6b); }
:is(#f1-dn, .f1-nabiz) .dn-ink-line { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-sigbox { fill: rgba(255, 255, 255, .5); stroke: rgba(0, 0, 0, .45); stroke-width: 1.2; }
:is(#f1-dn, .f1-nabiz) .dn-sigbox-wait { fill: none; stroke: var(--st-warn); stroke-width: 2; stroke-dasharray: 6 4; }

/* the 3D concept (B2): HTML layers in a perspective box */
:is(#f1-dn, .f1-nabiz) .dn-3d-box { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; perspective: 1700px; perspective-origin: 720px 380px; }
:is(#f1-dn, .f1-nabiz) .dn-3d-world { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; transform-style: preserve-3d; }
:is(#f1-dn, .f1-nabiz) .dn-3d-layer { position: absolute; left: 0; top: 0; transform-style: preserve-3d; backface-visibility: visible; }
:is(#f1-dn, .f1-nabiz) .dn-3d-layer > svg { display: block; overflow: visible; }
:is(#f1-dn, .f1-nabiz) .dn-ray { position: absolute; left: 0; top: 0; height: 2px; transform-origin: 0 50%; background: var(--pro-accent); opacity: 0; }
:is(#f1-dn, .f1-nabiz) .dn-ray-soft { background: color-mix(in srgb, var(--pro-accent) 45%, transparent); height: 1.5px; }