/* ==========================================================================
   filosim — one stylesheet, one system (PORT_PLAN §6.10, visual pass).
   Design language, shared with Novel's CAST console:
     - the page is a sheet: a faint 32px cell grid runs under everything
     - the signature frame is the broken bracket: a 2px ink rectangle whose
       top edge is interrupted by its own label
     - numbers are the content, so they get the monospace face, tabular
     - one accent (Novel blue) for controls and verdict marks, one warm
       colour for the hope line and for "tahmin" (estimate) tags
   Light is the design; dark is the same sheet printed in negative.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --ink: #0B0E12;
  --ink-2: #4A5560;
  --ink-3: #5F6B78; /* muted labels; 4.8:1 on --paper, the palest surface it sits on (WCAG AA) */
  --paper: #EDF0F3;
  --cell: #FFFFFF;
  --cell-2: #FAFBFC;
  --novel: #29ABE2;
  --novel-ink: #0C6E9C;
  --novel-wash: #E8F5FC;
  --rule: #D5DCE2;
  --rule-2: #E6EBEF;
  --ok: #16794E;
  --ok-wash: #E7F3EC;
  --err: #C0392F;
  --err-wash: #FBECEA;
  --warm: #96600F; /* also the 10px "tahmin" tag text: 5.3:1 on --cell */
  --warm-wash: #FBF1E2;
  --grid: rgba(11, 14, 18, 0.05);
  --shadow: 0 1px 0 rgba(11, 14, 18, 0.04), 0 12px 28px -18px rgba(11, 14, 18, 0.5);

  --pitch: 32px;
  --frame: 2px;
  --mast: 56px;

  --display: "Archivo", "Segoe UI", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --data: "JetBrains Mono", "Consolas", monospace;

  color-scheme: light dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Dark tokens. Two copies on purpose: the system theme (unless the user chose light) and
   the user's explicit choice. Keep them identical. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E8ECF0;
  --ink-2: #A7B1BB;
  --ink-3: #808B97;
  --paper: #0F1216;
  --cell: #171B20;
  --cell-2: #1C2127;
  --novel: #29ABE2;
  --novel-ink: #6CC6EC;
  --novel-wash: #10303F;
  --rule: #2B333C;
  --rule-2: #232A31;
  --ok: #4FBF86;
  --ok-wash: #122B1F;
  --err: #E4766A;
  --err-wash: #36201D;
  --warm: #E0A45A;
  --warm-wash: #332718;
  --grid: rgba(232, 236, 240, 0.045);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 12px 28px -18px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8ECF0;
    --ink-2: #A7B1BB;
    --ink-3: #808B97;
    --paper: #0F1216;
    --cell: #171B20;
    --cell-2: #1C2127;
    --novel: #29ABE2;
    --novel-ink: #6CC6EC;
    --novel-wash: #10303F;
    --rule: #2B333C;
    --rule-2: #232A31;
    --ok: #4FBF86;
    --ok-wash: #122B1F;
    --err: #E4766A;
    --err-wash: #36201D;
    --warm: #E0A45A;
    --warm-wash: #332718;
    --grid: rgba(232, 236, 240, 0.045);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 12px 28px -18px rgba(0, 0, 0, 0.8);
  }
}

/* ----------------------------------------------------------------- base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--pitch) var(--pitch);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--novel);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ typography -- */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 116;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.005em;
}

h1 {
  max-width: 26ch;
  font-size: clamp(26px, 20px + 1.2vw, 34px);
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--novel-ink);
}

.eyebrow {
  font-family: var(--data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 15px;
}

.mono {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- header -- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  min-height: var(--mast);
  background: var(--cell);
  border-bottom: var(--frame) solid var(--ink);
}

.masthead-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  color: var(--ink);
  text-decoration: none;
  border-right: 1px solid var(--rule);
}

.masthead-mark {
  display: block;
  width: 26px;
  height: 26px;
}

.masthead-product {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.masthead-name {
  font-family: var(--display);
  font-variation-settings: "wdth" 122;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.masthead-desc {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.masthead-nav {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.navlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  font-family: var(--data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-left: 1px solid var(--rule);
  cursor: pointer;
  transition: color 0.16s, background-color 0.16s;
}

.navlink:hover {
  color: var(--ink);
  background: var(--paper);
}

.navlink svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ----------------------------------------------------------------- shell -- */
.shell {
  width: min(1240px, 100% - 48px);
  margin: 0 auto;
  padding: 32px 0 48px;
}

.pagehead {
  grid-area: head;
}

/* Why trust this: three cells of one strip, the same hairline grammar as the ledger. */
.pitch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--rule);
  background: var(--cell);
}

.pitch li {
  padding: 14px 16px 15px;
  border-right: 1px solid var(--rule);
}

.pitch li:last-child {
  border-right: 0;
}

.pitch-title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
}

.pitch-desc {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.pagehead-text > .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.pagehead-text > .lede {
  margin-top: 10px;
}

/* ------------------------------------------------- the broken bracket --- */
/* The Novel mark is a rectangle with a gap in its top edge. Panels here are
   built the same way: sides and bottom are a real border, the top edge is two
   rules drawn either side of the panel's own label. */
.panel {
  position: relative;
  margin-top: 11px;
  background: var(--cell);
  border: var(--frame) solid var(--ink);
  border-top: 0;
  box-shadow: var(--shadow);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -11px calc(var(--frame) * -1) 0;
}

.panel-head::before,
.panel-head::after {
  content: "";
  height: var(--frame);
  background: var(--ink);
}

.panel-head::before {
  width: 26px;
  flex: none;
}

.panel-head::after {
  flex: 1;
}

.panel-label {
  font-family: var(--data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
  white-space: nowrap;
}

.panel-label .brace {
  color: var(--novel);
  font-weight: 400;
}

/* ---------------------------------------------------- the parameter panel -- */
/* One column at every width, like the regulation page: the headline, the panel with every
   field in view (no inner scroll), then the answer. The panel's sections sit in two columns
   with fixed cells, so nothing jumps when a note opens or a section folds. */
.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "bar"
    "panel"
    "results";
  row-gap: 36px;
  max-width: 980px;
  margin: 0 auto;
}

.workbench > .panel {
  grid-area: panel;
}

.summary-bar {
  grid-area: bar;
}

.results {
  grid-area: results;
  min-width: 0;
  scroll-margin-top: calc(var(--mast) + 16px);
}

.panel-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "ask ask"
    "arac talep"
    "karar sabit"
    "degisken satis"
    "ekonomi ekonomi";
  column-gap: 44px;
  align-items: start;
  padding: 4px 28px 12px;
}

.panel-body > .ask { grid-area: ask; }
.panel-body > [data-section="arac"] { grid-area: arac; }
.panel-body > [data-section="talep"] { grid-area: talep; }
.panel-body > [data-section="karar"] { grid-area: karar; }
.panel-body > [data-section="sabit"] { grid-area: sabit; }
.panel-body > [data-section="degisken"] { grid-area: degisken; }
.panel-body > [data-section="satis"] { grid-area: satis; }
.panel-body > [data-section="ekonomi"] { grid-area: ekonomi; }

/* The custom scenario's numbers, two abreast, so no input runs the full panel width. */
.custom-editor > .field {
  max-width: 460px;
}

.custom-editor > [data-rows] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 44px;
}

/* Mode rail: two cells under the frame's top edge, like a step rail. */
.segmented {
  display: flex;
  margin-top: 12px;
  border-bottom: 1px solid var(--rule);
}

.seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 160px;
  padding: 11px 28px;
  font-family: var(--data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: 0;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  transition: color 0.16s, box-shadow 0.16s;
}

.seg:last-child {
  border-right: 0;
}

.seg:hover {
  color: var(--ink);
}

.seg.is-on {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--novel);
}

/* ------------------------------------------------------ the question chooser -- */
/* Three tiles abreast: the six questions take two rows, and the numbers start right under them. */
.ask {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 0 14px;
  border-bottom: 1px solid var(--rule-2);
}

.ask > .sec-title {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.ask-choice {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 12px 11px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--cell);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.16s, background-color 0.16s;
}

.ask-choice::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--novel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.ask-choice:hover {
  border-color: var(--ink);
}

.ask-choice[aria-checked="true"] {
  border-color: var(--ink);
  background: var(--novel-wash);
}

.ask-choice[aria-checked="true"]::after {
  transform: scaleX(1);
}

.ask-title {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}

.ask-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* A sub-group inside a section ("Kredi" under "Araç"): quieter than a section title. */
.group-title {
  margin: 14px 0 0;
  font-family: var(--data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- sections -- */
.sec {
  border-top: 1px solid var(--rule-2);
}

.sec:first-child {
  border-top: 0;
}

.sec > summary,
.sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 8px;
  list-style: none;
  cursor: pointer;
}

.sec-head {
  cursor: default;
}

.sec > summary::-webkit-details-marker {
  display: none;
}

.sec > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 4px 3px 0;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.sec:not([open]) > summary::after {
  transform: rotate(-45deg);
  margin-bottom: -2px;
}

.sec-title {
  flex: 1;
  font-family: var(--data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.sec-reset {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--novel-ink);
  cursor: pointer;
}

.sec-reset:hover {
  color: var(--ink);
}

.sec-body {
  padding: 0 0 10px;
}

/* Quick mode: the groups stay, the detailed rows and sections disappear. */
.mode-quick [data-detail] {
  display: none !important;
}

/* ---------------------------------------------------------------- fields -- */
.field {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label tag"
    "control control"
    "note note"
    "error error";
  gap: 6px 8px;
  align-items: center;
  padding: 9px 0;
}

.field-label {
  grid-area: label;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

/* The warm dot marks a value the user changed from the pack default. */
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 7px 2px 0;
  background: var(--warm);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.changed > .field-label .dot,
.field.changed .dot {
  opacity: 1;
}

/* Source tags: S = from the pack (solid), E = our estimate (dashed, warm). */
.tag {
  grid-area: tag;
  padding: 3px 8px;
  border: 1px solid;
  background: none;
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.tag-s {
  color: var(--novel-ink);
  border-color: var(--novel-ink);
}

.tag-e {
  color: var(--warm);
  border-color: var(--warm);
  border-style: dashed;
}

.tag[aria-expanded="true"].tag-s {
  background: var(--novel-wash);
}

.tag[aria-expanded="true"].tag-e {
  background: var(--warm-wash);
}

.control {
  grid-area: control;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: border-color 0.16s, background-color 0.16s, box-shadow 0.16s;
}

.control:focus-within {
  border-color: var(--ink);
  background: var(--cell);
  box-shadow: inset 0 -2px 0 var(--novel);
}

.control input,
.control select {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: right;
  font-family: var(--data);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.control input:focus,
.control select:focus {
  outline: none;
}

.control select {
  text-align: left;
}

.control input[type="text"]:not([inputmode]) {
  text-align: left;
  font-family: var(--body);
  font-size: 14px;
}

.control input[readonly],
.control input:disabled {
  color: var(--ink-2);
}

/* Read-only in this version (ufuk, gelecek sayısı): looks like a fact, not a field. */
.control:has(input[readonly]) {
  border-style: dashed;
  background: transparent;
}

.control input::placeholder {
  color: var(--ink-3);
}

.unit {
  margin-left: 8px;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
}

.unit-lead {
  margin: 0 8px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

.note {
  grid-area: note;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.field-error {
  grid-area: error;
  font-size: 13px;
  color: var(--err);
}

.has-error .control {
  border-color: var(--err);
}

.has-error .control:focus-within {
  box-shadow: inset 0 -2px 0 var(--err);
}

.is-empty .control {
  border-style: dashed;
  background: transparent;
}

.hint {
  margin: 2px 0 8px;
  font-size: 13px;
  color: var(--ink-2);
}

/* ----------------------------------------------------------------- chips -- */
.field-chips {
  grid-template-areas:
    "label label"
    "control control"
    "note note";
}

.chips {
  grid-area: control;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 7px 13px;
  border: 1px solid var(--rule);
  background: var(--cell);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}

.chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.chip[aria-checked="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------------- the year strip (signature): 12 months, the cap at 30 ---- */
.control-days {
  gap: 10px;
}

.control-days input[type="range"] {
  flex: 1;
  height: auto;
  accent-color: var(--ink);
  cursor: pointer;
}

.num-short {
  flex: 0 0 4.5ch;
}

.strip {
  margin: 0 0 6px;
}

.strip-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  height: 70px;
  padding-top: 12px;
  align-items: end;
  border-bottom: 1px solid var(--ink);
}

.bar {
  position: relative;
  height: 100%;
}

.bar-full,
.bar-eff {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  transition: height 0.12s ease;
}

.bar-full {
  height: calc(var(--full) * 100%);
  background: var(--novel-wash);
}

.bar-eff {
  height: calc(var(--eff) * 100%);
  background: var(--novel);
}

/* A summer shock: the demand lost above the effective bar is drawn as hatching in the
   accent colour at half strength — visible in both themes, quiet next to the solid bar. */
.bar.is-ghost .bar-full {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--novel) 50%, transparent) 0 3px, transparent 3px 6px);
}

.bar.is-capped .bar-eff {
  background: var(--novel-ink);
}

.strip-cap {
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  border-top: 1px dashed var(--ink-3);
  pointer-events: none;
}

.strip-cap-label {
  position: absolute;
  top: -13px;
  right: 0;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.strip-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  margin-top: 4px;
  font-family: var(--data);
  font-size: 10px;
  text-align: center;
  color: var(--ink-3);
}

/* ------------------------------------------------- month table (detailed) -- */
.month-table table {
  width: 100%;
  margin: 6px 0 4px;
  border-collapse: collapse;
  font-family: var(--data);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.month-table th {
  padding: 4px 6px;
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.month-table tbody th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.month-table td {
  padding: 2px 3px;
}

.month-table td input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  text-align: right;
  font-family: var(--data);
  font-size: 12.5px;
}

.month-table td input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--cell);
  box-shadow: inset 0 -2px 0 var(--novel);
}

.month-table td input.is-invalid {
  border-color: var(--err);
}

.month-table .field-error {
  margin-top: 4px;
}

/* -------------------------------------------------------- scenario block -- */
.chips-scenario {
  margin-bottom: 10px;
}

.macro-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.macro {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px dashed var(--rule);
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.macro.is-on {
  border-style: solid;
  border-color: var(--ink);
  opacity: 1;
}

.macro-name {
  font-size: 13px;
  font-weight: 600;
}

.macro-facts {
  font-family: var(--data);
  font-size: 11.5px;
  color: var(--ink-2);
}

.custom-editor {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--novel);
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--frame) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.16s, color 0.16s, border-color 0.16s;
}

.btn:hover {
  background: var(--novel-ink);
  border-color: var(--novel-ink);
  color: var(--paper);
}

.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.btn--ghost,
.btn-ghost {
  padding: 8px 14px;
  background: transparent;
  color: var(--ink);
  border-width: 1px;
  border-color: var(--rule);
}

.btn-ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

.btn:disabled {
  cursor: progress;
  background: var(--rule);
  border-color: var(--rule);
  color: var(--ink-3);
}

.linkbtn {
  padding: 0;
  font-family: var(--data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--novel-ink);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.linkbtn:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------- actions -- */
/* Sticks to the bottom of the screen while the panel is on it: "Hesapla" is always in reach. */
.actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 16px 28px 18px;
  border-top: 1px solid var(--rule);
  background: var(--cell-2);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
}

.status {
  flex-basis: 100%;
  min-height: 1.2em;
  font-family: var(--data);
  font-size: 11.5px;
  color: var(--ink-2);
}

.status:empty {
  display: none;
}

/* --------------------------------------------------------------- results -- */
.results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  margin-bottom: 10px;
}

.error-banner {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--err-wash);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--err);
  color: var(--err);
  font-size: 14px;
}

#calc-results {
  transition: opacity 0.2s ease;
}

#calc-results[aria-busy="true"] {
  opacity: 0.45;
}

/* Each scenario is a bracket panel; its title sits in the gap of the top edge. */
.scenario {
  position: relative;
  margin: 11px 0 36px;
  background: var(--cell);
  border: var(--frame) solid var(--ink);
  border-top: 0;
  box-shadow: var(--shadow);
}

.scenario-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -11px calc(var(--frame) * -1) 0;
  font-family: var(--data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.scenario-title::before,
.scenario-title::after {
  content: "";
  height: var(--frame);
  background: var(--ink);
}

.scenario-title::before {
  width: 26px;
  flex: none;
}

.scenario-title::after {
  flex: 1;
  min-width: 26px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* A full-width chart card would leave a half card alone; dense packing fills the gap. */
  grid-auto-flow: dense;
  gap: 1px;
  padding: 18px 22px 22px;
}

/* Cards are cells of one sheet: hairline rules between them, not floating boxes. */
.card {
  padding: 18px 20px 20px;
  outline: 1px solid var(--rule);
  background: var(--cell);
}

.card-q {
  margin-bottom: 8px;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 17px;
}

.card-a {
  font-size: 14.5px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.card-hope {
  box-shadow: inset 3px 0 0 var(--warm);
}

.card-lead {
  grid-column: 1 / -1;
  padding: 20px 24px 22px;
}

.card-lead .card-big-value {
  font-size: 34px;
}

.card-footnote {
  grid-column: 1 / -1;
  outline-style: dashed;
  background: transparent;
}

.card-footnote .card-q {
  font-family: var(--data);
  font-variation-settings: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.card-footnote .card-a {
  font-size: 13.5px;
  color: var(--ink-2);
}

.scenario-skeleton {
  border-style: dashed;
  box-shadow: none;
}

.scenario-skeleton::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: var(--frame) dashed var(--ink);
}

.card-skeleton {
  outline-style: dashed;
  background: transparent;
}

.card-skeleton .card-q {
  font-weight: 500;
  color: var(--ink-2);
}

.skeleton-line {
  width: 70%;
  height: 12px;
  background: var(--rule-2);
}

.skeleton-lead {
  padding: 18px 22px 0;
  font-size: 14px;
  color: var(--ink-2);
}

.compare-wrap {
  padding: 18px 22px 22px;
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.compare th,
.compare td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule-2);
}

.compare thead th {
  padding-top: 0;
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--rule);
}

.compare tbody th {
  font-weight: 500;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare .num {
  text-align: right;
  white-space: nowrap;
}

/* The long column names may wrap; the numbers under them never do. */
.compare thead th.num {
  white-space: normal;
}

.compare td.num {
  font-family: var(--data);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ the verdict and its field -- */
/* The key number of every sentence, set in the data face. */
.card-a .num {
  font-family: var(--data);
  font-weight: 700;
  font-size: 0.93em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tone-ok {
  color: var(--ok);
}

.tone-err {
  color: var(--err);
}

.tone-warm {
  color: var(--warm);
}

/* Card 1 spans the panel: the verdict word, the sentence, and the field of futures. */
.card-verdict {
  grid-column: 1 / -1;
  padding: 20px 24px 22px;
}

.verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 40px;
  align-items: center;
}

.verdict-text {
  min-width: 0;
}

.verdict-word {
  margin: 4px 0 12px;
  font-family: var(--display);
  font-variation-settings: "wdth" 122;
  font-weight: 700;
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.card-skeleton .verdict-word {
  color: var(--rule);
}

.verdict .card-a {
  max-width: 46ch;
}

/* 100 cells, each a hundredth of the futures. Filled = the car beat the deposit there.
   Hollow cells say "no" without a wall of red, and the figure stays readable without colour. */
.futures {
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: end;
}

.futures-grid {
  display: grid;
  grid-template-columns: repeat(10, 12px);
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--rule);
}

.futures-cell {
  width: 12px;
  height: 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.futures-cell.is-win {
  background: currentColor;
  box-shadow: none;
  animation: cell-in 0.3s ease both;
  animation-delay: calc(var(--i) * 5ms);
}

.futures-cap {
  max-width: 170px;
  font-family: var(--data);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-3);
}

@keyframes cell-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* Card 2: the typical gain leads, the spread follows. */
.card-big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 2px 0 10px;
}

.card-big-value {
  font-family: var(--data);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.card-big-label {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.meta {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- footer -- */
.colophon {
  display: flex;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
  width: min(1240px, 100% - 48px);
  margin: 0 auto;
  padding: 16px 0 40px;
  border-top: 1px solid var(--rule);
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* --------------------------------- summary bar (mobile, after the first result) -- */
.summary-bar {
  display: none;
}

/* ------------------------------------------------------- charts (P4) -- */
/* A card with a chart takes the full sheet width: 36 months need room. */
.card-chart {
  grid-column: 1 / -1;
}

.chart {
  margin: 14px 0 0;
}

.chart-plot {
  width: 100%;
  height: 200px;
}

.chart-monthly .chart-plot {
  height: 230px;
}

.chart-compare .chart-plot {
  height: 132px;
}

.chart-cap {
  margin-top: 6px;
  font-family: var(--data);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.scenario-compare .chart {
  margin: 0;
  padding: 18px 22px 0;
}

/* ------------------------------------------------- "Bu ne demek?" fold -- */
.card-why {
  margin-top: 12px;
  border-top: 1px dashed var(--rule);
  padding-top: 8px;
}

.card-why-q {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-family: var(--data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--novel-ink);
}

.card-why-q::-webkit-details-marker {
  display: none;
}

.card-why-q::before {
  content: "+";
  display: inline-block;
  width: 12px;
  font-weight: 500;
}

.card-why[open] .card-why-q::before {
  content: "−";
}

.card-why-q:hover {
  color: var(--ink);
}

.card-why-a {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* The same fold under a form field: the explanation waits behind "Bu ne demek?". */
.note-fold {
  margin-top: 8px;
}

.note-fold[open] > .card-why-q::before {
  content: "−";
}

.note-fold > .note {
  margin: 8px 0 0;
}

.field > .note-fold,
.reg-fleet .note-fold {
  grid-area: note;
}

/* --------------------------------------------------- economy tabs (P4) -- */
.scenario-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.scenario-tab {
  padding: 7px 13px;
  border: 1px solid var(--rule);
  background: var(--cell);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}

.scenario-tab:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.scenario-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* The print header: hidden on screen, the inputs summary on paper. */
.print-head {
  display: none;
}

/* ------------------------------------------------------------- responsive -- */
/* ------------------------------------------------- the regulation page -- */
/* One column: the fleet panel, then the answer. Cards, panels and chips are the calculator's. */
.reg {
  max-width: 980px;
  margin: 0 auto;
}

.reg .pagehead {
  margin-bottom: 24px;
}

.reg-panel {
  margin-bottom: 36px;
}

.reg-panel-body {
  padding: 14px 22px 8px;
}

.reg-block {
  padding: 9px 0;
}

.reg-block > .field-label {
  display: block;
  margin-bottom: 8px;
}

.reg-block > .note {
  margin-top: 8px;
}

.reg-cars {
  display: grid;
  gap: 4px;
}

.reg-car {
  display: grid;
  grid-template-columns: auto minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr) auto auto auto;
  grid-template-areas:
    "n year km value rent fuel owned domestic remove"
    "err err err err err err err err err";
  gap: 6px 10px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-2);
}

.reg-car-n {
  grid-area: n;
  padding-bottom: 11px;
  font-family: var(--data);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}

.reg-a-year { grid-area: year; }
.reg-a-km { grid-area: km; }
.reg-a-value { grid-area: value; }
.reg-a-rent { grid-area: rent; }
.reg-a-fuel { grid-area: fuel; }

/* The two fleet-wide long-term fields under the car rows (P11): label, control, note. */
.reg-fleet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.reg-fleet .reg-field {
  grid-template-areas:
    "label"
    "control"
    "note";
  align-content: start;
}

.reg-fleet .note-fold {
  margin-top: 2px;
}
.reg-a-owned { grid-area: owned; }
.reg-a-domestic { grid-area: domestic; }

.reg-field {
  display: grid;
  grid-template-areas:
    "label"
    "control";
  gap: 4px;
  min-width: 0;
}

.reg-field-label {
  grid-area: label;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.reg-field .control {
  min-width: 0;
  height: 36px;
  padding: 0 10px;
}

.reg-check {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}

.reg-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--ink);
}

.reg-remove {
  grid-area: remove;
  padding-bottom: 11px;
}

.reg-remove:disabled {
  color: var(--ink-3);
  border-color: transparent;
  cursor: default;
}

.reg-car .field-error {
  grid-area: err;
}

.reg-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 10px 0 4px;
}

/* The example line above the rows: the warm colour of an estimate, gone once a row is touched. */
.reg-block > .reg-example {
  margin: 0 0 10px;
  color: var(--warm);
}

.reg-exit {
  margin-top: 14px;
}

.reg-exit td {
  white-space: normal;
}

.reg-order {
  margin-top: 14px;
}

/* The order form inside the card (P15 slice 2): two columns of fields, the wish chips across, the honeypot off-screen. */
.reg-order-form {
  margin-top: 16px;
}

.reg-order-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.reg-order-form .reg-field {
  grid-template-areas:
    "label"
    "control"
    "error";
  align-content: start;
}

.reg-order-form .reg-order-wish {
  grid-column: 1 / -1;
}

.reg-order-form .control input[type="email"],
.reg-order-form .control input[type="tel"] {
  text-align: left;
  font-family: var(--body);
}

.reg-order-form .note-fold {
  margin-top: 12px;
}

.reg-order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 16px;
}

.reg-order-error {
  margin-top: 8px;
}

.reg-order-sent {
  margin-top: 14px;
  font-weight: 600;
  color: var(--ok);
}

.reg-order-fallback {
  margin-top: 14px;
}

.reg-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#fleet-results[aria-busy="true"] {
  opacity: 0.45;
}

/* ------------------------------------------------- the fleet report page -- */
/* A document, not a dashboard: every card takes the full width, in print order; the tables are the exit table's. */
.rep .cards {
  grid-template-columns: 1fr;
}

.rep-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

.rep-table {
  margin-top: 14px;
}

.rep-table td {
  white-space: normal;
}

.rep-table td.num {
  white-space: nowrap;
}

.rep-best {
  color: var(--ok);
}

#rep-results[aria-busy="true"] {
  opacity: 0.45;
}

.colophon-link {
  color: var(--novel-ink);
}

@media (max-width: 767px) {
  .reg-car {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "n remove"
      "year km"
      "value rent"
      "fuel fuel"
      "owned domestic"
      "err err";
    align-items: center;
  }

  .reg-fleet,
  .reg-order-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-car-n,
  .reg-remove {
    padding-bottom: 0;
  }

  .reg-remove {
    justify-self: end;
  }
}

/* ------------------------------------------------------- the home page -- */
/* The same sheet, one step louder: the question in Archivo a size up, and the calculator's
   own verdict cards inside a bracket panel as the hero. Everything below the hero is the
   hairline grammar of the pitch strip; no shadows, no rounded cards. */
.home {
  display: grid;
  gap: 64px;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 32px 64px;
  align-items: start;
}

.home-hero h1 {
  max-width: 18ch;
  font-size: clamp(30px, 22px + 1.8vw, 46px);
}

.home-hero .lede {
  max-width: 52ch;
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.55;
}

/* The nine questions as a drum, the loud thing on this page after the headline. Each rolls up
   from below the stage, turned away, small and light; it turns to face the reader, grows and
   its letters get heavier and wider (Archivo's weight and width axes animate); it holds two
   seconds, still slowly growing, then rolls away over the top while the next one is already
   coming. The items share one grid cell, so the stage is as tall as the longest question and
   nothing below it moves; the stage clips, so the drum has edges. home.js moves `.is-on` and
   `.is-off`; the timing lives in the two keyframe rules. */
.asked {
  margin-top: 30px;
}

.asked-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
}

.asked-label .brace {
  color: var(--novel);
  font-weight: 400;
}

.asked-list {
  display: grid;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  perspective: 900px;
  overflow: clip;
}

/* At rest the settings equal the hold's, so the (invisible) resting items size the cell for the
   widest state: an arriving item, narrower and lighter, can never need an extra line. */
.asked-list li {
  grid-area: 1 / 1;
  font-family: var(--display);
  font-variation-settings: "wdth" 116, "wght" 700;
  font-weight: 700;
  font-size: clamp(27px, 20px + 1.3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(60px) rotateX(70deg) scale(0.72);
  transform-origin: 0 50%;
  backface-visibility: hidden;
  pointer-events: none;
}

.asked-list li.is-on {
  animation: asked-in 3000ms cubic-bezier(0.45, 0.2, 0.25, 1) forwards;
  pointer-events: auto;
}

.asked-list li.is-off {
  animation: asked-out 450ms cubic-bezier(0.3, 0, 0.6, 1) forwards;
}

/* 0–33 % is the arrival (1 s); the rest is the hold, growing from 1 to 1.04. */
@keyframes asked-in {
  from {
    opacity: 0;
    transform: translateY(60px) rotateX(70deg) scale(0.72);
    font-variation-settings: "wdth" 96, "wght" 400;
  }

  33% {
    opacity: 1;
    transform: none;
    font-variation-settings: "wdth" 116, "wght" 700;
    animation-timing-function: linear;
  }

  to {
    opacity: 1;
    transform: scale(1.04);
    font-variation-settings: "wdth" 116, "wght" 700;
  }
}

@keyframes asked-out {
  from {
    opacity: 1;
    transform: scale(1.04);
    font-variation-settings: "wdth" 116, "wght" 700;
  }

  to {
    opacity: 0;
    transform: translateY(-60px) rotateX(-70deg) scale(1.1);
    font-variation-settings: "wdth" 116, "wght" 700;
  }
}

.asked-q {
  color: var(--novel);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

/* The second door beside the primary button: the same frame and height, transparent inside. */
.home-alt {
  padding: 12px 22px;
  border-width: var(--frame);
  border-color: var(--ink);
}

.home-fine {
  margin-top: 22px;
  max-width: 44ch;
  font-family: var(--data);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* The hero panel: the report's cards stacked, the bracket label above them. */
.home-demo {
  margin-top: 11px;
}

.demo-cards {
  display: grid;
}

.demo-cards .card {
  outline: 0;
  border-top: 1px solid var(--rule);
}

.demo-cards .card:first-child {
  border-top: 0;
}

.demo-cards .card-verdict {
  padding: 20px 22px 22px;
}

.demo-cards .verdict {
  gap: 16px 24px;
}

.demo-foot {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--data);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* The regulation band: the site's second audience, first in position, right under the hero. The
   panel grammar; the deadline is the number, one sentence, one door. Quiet in style, unmissable in place. */
.reg-band-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px 44px;
  align-items: center;
  padding: 22px 26px 26px;
}

.reg-band-date {
  margin: 0;
}

.reg-band-day {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 116;
  font-weight: 700;
  font-size: clamp(28px, 22px + 1vw, 36px);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.reg-band-sub {
  display: block;
  margin-top: 8px;
  font-family: var(--data);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.reg-band-text {
  max-width: 62ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
}

.home-section > h2 {
  max-width: 28ch;
  margin-bottom: 22px;
  font-size: clamp(22px, 18px + 0.8vw, 28px);
  text-wrap: balance;
}

/* How it works: a real sequence, so the steps are numbered; the digit is data, so it is monospace. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border: 1px solid var(--rule);
  background: var(--cell);
}

.steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  padding: 20px 22px 22px;
  border-right: 1px solid var(--rule);
}

.steps li:last-child {
  border-right: 0;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  grid-row: 1 / 3;
  font-family: var(--data);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--novel-ink);
  font-variant-numeric: tabular-nums;
}

.step-title {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

.step-desc {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* The two doors: bracket panels, the calculator's own frame. */
.doors {
  display: grid;
  /* Two or three doors (the consign door exists only with the pack's consign block): as many columns as fit. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  /* The row's height is the tallest door's; every door fills it and parks its button at the bottom,
     so the three buttons sit on one line (Can, 4 Sep 2026: "same size please"). */
  align-items: stretch;
}

.door {
  display: flex;
  flex-direction: column;
}

.door-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 24px 24px;
}

.door-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

.door-lede {
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.55;
}

.door-list {
  margin: 14px 0 22px;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Who it is for, why trust it: plain definition lists, no boxes. */
.plainlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px 40px;
  margin: 0;
}

.plainlist dt {
  margin-bottom: 6px;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

.plainlist dd {
  margin: 0;
  max-width: 40ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* The questions people search for: native <details>, so they print open and need no script. */
.faq {
  max-width: 76ch;
  border-top: 1px solid var(--rule);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item summary {
  padding: 14px 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
}

.faq-item summary:hover {
  color: var(--novel-ink);
}

.faq-item p {
  max-width: 70ch;
  padding: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 1023px) {
  .home {
    gap: 52px;
  }

  .home-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-band-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .steps,
  .doors {
    grid-template-columns: minmax(0, 1fr);
  }

  .doors {
    gap: 28px;
  }

  .steps li {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .steps li:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .home-hero h1 {
    font-size: 29px;
  }

  .demo-cards .card-verdict,
  .demo-cards .card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .demo-cards .verdict {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-cards .futures {
    justify-items: start;
  }
}

@media (max-width: 1023px) {
  .shell {
    width: min(1240px, 100% - 32px);
    padding-top: 24px;
  }

  .masthead-brand {
    padding: 0 16px;
  }

  .navlink {
    padding: 0 16px;
  }

  .workbench {
    row-gap: 20px;
  }

  /* One column inside the panel too: the question tiles and the sections stack. */
  .panel-body {
    display: block;
    padding: 4px 16px 10px;
  }

  .ask {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .seg {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 22px;
  }

  .custom-editor > .field {
    max-width: none;
  }

  .custom-editor > [data-rows] {
    display: block;
  }

  .actions {
    padding: 12px 16px 14px;
  }

  body.panel-collapsed .panel {
    display: none;
  }

  .results {
    scroll-margin-top: calc(var(--mast) + 64px); /* keeps "Sonuç" visible under the sticky summary bar */
  }

  body.panel-collapsed .summary-bar {
    position: sticky;
    /* Flush under the masthead: any air here is a slit the tabs scroll through. */
    top: var(--mast);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ink);
    background: var(--cell);
    box-shadow: var(--shadow);
    text-align: left;
    cursor: pointer;
  }

  .summary-chips {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    font-family: var(--data);
    font-size: 12px;
  }

  .summary-chip + .summary-chip::before {
    content: "·";
    margin: 0 6px;
    color: var(--ink-3);
  }

  .summary-edit {
    font-family: var(--data);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--novel-ink);
    white-space: nowrap;
  }

  .cards {
    grid-template-columns: 1fr;
    padding: 14px 16px 16px;
  }

  .skeleton-lead,
  .compare-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .scenario-compare .chart {
    padding-left: 16px;
    padding-right: 16px;
  }

  .chart-plot,
  .chart-monthly .chart-plot {
    height: 180px;
  }

  .scenario-tab {
    padding: 6px 10px;
    font-size: 12.5px;
  }

  .card-verdict,
  .card-lead {
    padding: 16px 18px 18px;
  }

  .pitch {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .pitch li {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .pitch li:last-child {
    border-bottom: 0;
  }

  .verdict {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .futures {
    justify-items: start;
  }

  .futures-cap {
    text-align: left;
    max-width: none;
  }

  .colophon {
    width: min(1240px, 100% - 32px);
  }
}

@media (max-width: 480px) {
  .masthead-product {
    display: none;
  }

  .navlink-text {
    display: none;
  }

  .shell {
    width: min(1240px, 100% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* No motion and paper: the home stage shows all nine questions as a plain list. */
@media print, (prefers-reduced-motion: reduce) {
  .asked-list {
    gap: 6px;
    perspective: none;
  }

  .asked-list li {
    grid-area: auto;
    font-variation-settings: "wdth" 112, "wght" 600;
    font-size: 17px;
    line-height: 1.25;
    opacity: 1;
    transform: none;
    animation: none !important;
    pointer-events: auto;
  }
}

/* ------------------------------------------------------------- the blog -- */
/* One reading column (PORT_PLAN §6.15): the site's type, the home page's FAQ folds, tables ruled
   like the ledger, and the bracket frame around the one call to action. No script beyond the theme. */
.blog,
.post {
  max-width: 780px;
  margin: 0 auto;
}

.blog .pagehead {
  margin-bottom: 28px;
}

.blog-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.blog-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}

.blog-date,
.post-meta,
.post-crumbs {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* The same list on the home page, the FAQ's width, with the "Bütün yazılar" link under it. */
.home .blog-list {
  max-width: 780px;
}

.home .blog-list + .linkbtn {
  display: inline-block;
  margin-top: 14px;
}

.blog-title {
  margin: 6px 0 8px;
  font-size: 20px;
}

.blog-title a {
  color: inherit;
  text-decoration: none;
}

.blog-title a:hover {
  color: var(--novel-ink);
}

.blog-desc {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

.post-crumbs {
  display: block;
  margin-bottom: 14px;
}

.post-crumbs a {
  color: inherit;
}

.post-head h1 {
  max-width: 30ch;
}

.post-meta {
  margin-top: 12px;
}

.post-head .lede {
  max-width: 760px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
}

.post h2 {
  margin: 40px 0 12px;
  font-size: 24px;
}

.post p,
.post li {
  font-size: 19px;
  line-height: 1.65;
}

.post :is(p, ul, ol, table) + p {
  margin-top: 12px;
}

.post ul,
.post ol {
  margin: 12px 0 0;
  padding-left: 22px;
}

.post li + li {
  margin-top: 6px;
}

.post table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

.post th,
.post td {
  padding: 8px 12px 8px 0;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}

.post th {
  font-family: var(--data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The short answer: the facts an answer engine or a hurried reader takes, before the article. */
.post-brief {
  margin: 28px 0 8px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  background: var(--cell);
}

.post-brief .eyebrow {
  display: block;
  margin-bottom: 8px;
}

.post-brief ul {
  margin: 0;
  padding-left: 20px;
}

.post-brief li {
  font-size: 16px;
  line-height: 1.55;
}

.post-cta {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin: 28px 0 8px;
  padding: 18px 20px;
  border: var(--frame) solid var(--ink);
  background: var(--cell);
}

.post-cta-text {
  font-size: 16px;
}

.post-faq,
.post-sources,
.post-others {
  margin-top: 40px;
}

.post-faq .faq-item:first-of-type {
  border-top: 1px solid var(--rule);
}

.post-faq .faq-item summary {
  font-size: 18px;
}

.post-faq .faq-item p {
  max-width: none;
  font-size: 17px;
}

.post-sources li,
.post-sources p {
  font-size: 15px;
  color: var(--ink-2);
}

.post-sources a {
  word-break: break-word;
}

.post-sources .note {
  margin-top: 14px;
}

.post-others {
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.post-others h2 {
  margin-top: 0;
  font-size: 16px;
}

.post-others li {
  font-size: 16px;
}

/* ------------------------------------------------------------- print -- */
@media print {
  :root,
  :root[data-theme="dark"] {
    --ink: #0B0E12;
    --ink-2: #4A5560;
    --ink-3: #5F6B78;
    --paper: #FFFFFF;
    --cell: #FFFFFF;
    --cell-2: #FFFFFF;
    --rule: #C9D0D6;
    --grid: transparent;
    --shadow: none;
  }

  body {
    background: #FFFFFF;
  }

  .masthead,
  .panel,
  .summary-bar,
  .pitch,
  .results-tools,
  .rep-tools,
  .reg-order-form,
  .reg-order-fallback,
  .scenario-tabs,
  .colophon,
  .meta,
  .skip-link {
    display: none !important;
  }

  .shell,
  .workbench {
    display: block;
    width: auto;
    padding: 0;
  }

  .results {
    width: auto;
  }

  .print-head {
    display: block;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink);
  }

  .print-title {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
  }

  .print-inputs,
  .print-note {
    margin-top: 4px;
    font-family: var(--data);
    font-size: 11px;
    color: var(--ink-2);
  }

  .scenario[hidden] {
    display: block;
  }

  .scenario {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .card {
    break-inside: avoid;
    page-break-inside: avoid;
    outline-color: #C9D0D6;
  }

  .card-why {
    border-top-color: #C9D0D6;
  }

  .card-why-q::before {
    content: "";
    width: 0;
  }

  .chart-plot {
    height: 180px;
  }
}