/* ==========================================================================
   BuyOrBank (code name filosim) — one stylesheet, one system.
   Design language (redesign, Sep 2026): the road's own sign system.
     - the 2028 rule is a limit, so it is drawn as a limit sign: a red ring,
       a number inside (.limit-sign)
     - a car is its plate: a label that starts with a Turkish plate is drawn
       as a plate chip with the blue TR strip (.plate)
     - colour carries meaning only, as on the road: red = the limit or a loss,
       amber = later or an estimate, green = a gain, blue = information and
       every action
     - numbers are the content: Archivo, tabular by default, a little narrow
       when big; body text in IBM Plex Sans; labels in sentence case
     - corners follow the hierarchy: panel 14px, card 10px, field 8px, plate 4px
   Light is the design; dark is the same system on a night-road navy.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --ink: #16213A;
  --ink-2: #4B5872;
  --ink-3: #5E6A82; /* muted labels; 5:1 on --paper, the palest surface it sits on (WCAG AA) */
  --paper: #F3F5F8;
  --cell: #FFFFFF;
  --cell-2: #F8F9FB;
  --novel: #2F7BE0;
  --novel-ink: #1557B0;
  --novel-wash: #EAF1FC;
  --rule: #D8DEE8;
  --rule-2: #E8ECF2;
  --ok: #0E7A4E;
  --ok-wash: #E4F4EC;
  --err: #D0262D;
  --err-wash: #FCEAEA;
  --warm: #9A5B00; /* amber as text: 5.6:1 on --cell */
  --warm-wash: #FFF3DC;
  --amber: #F5A300; /* amber as a fill: bars, the "later" lane end */
  --band: #16213A; /* the band behind the order door: navy by day, sign blue at night */
  --band-ink: #FFFFFF;
  --on-fill: #FFFFFF; /* text on a sign-coloured fill: a button, a chosen chip, a badge, the rule-day pill */
  --grid: transparent;
  --shadow: 0 1px 2px rgba(22, 33, 58, 0.06), 0 10px 30px -14px rgba(22, 33, 58, 0.22);
  --tour-shade: rgba(22, 33, 58, 0.6); /* the walk-through's dimming around the spotlight */

  --pitch: 32px;
  --frame: 2px;
  --mast: 64px;
  --r-panel: 14px;
  --r-card: 10px;
  --r-field: 8px;

  --display: "Archivo", "Segoe UI", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --data: "Archivo", "Segoe UI", sans-serif; /* Archivo's digits are tabular by default */

  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: #E7ECF5;
  --ink-2: #A9B4C8;
  --ink-3: #8C98AE;
  --paper: #0D1424;
  --cell: #141D30;
  --cell-2: #19233A;
  --novel: #5B9BF0;
  --novel-ink: #8AB8F7;
  --novel-wash: #14284A;
  --rule: #28344D;
  --rule-2: #1F2A41;
  --ok: #45C08A;
  --ok-wash: #0F2C22;
  --err: #FF6B6B;
  --err-wash: #3A1A1F;
  --warm: #F2B45A;
  --warm-wash: #33260F;
  --amber: #F5A300;
  --band: #1A3F86;
  --band-ink: #FFFFFF;
  --on-fill: #0D1424;
  --grid: transparent;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
  --tour-shade: rgba(0, 0, 0, 0.66);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E7ECF5;
    --ink-2: #A9B4C8;
    --ink-3: #8C98AE;
    --paper: #0D1424;
    --cell: #141D30;
    --cell-2: #19233A;
    --novel: #5B9BF0;
    --novel-ink: #8AB8F7;
    --novel-wash: #14284A;
    --rule: #28344D;
    --rule-2: #1F2A41;
    --ok: #45C08A;
    --ok-wash: #0F2C22;
    --err: #FF6B6B;
    --err-wash: #3A1A1F;
    --warm: #F2B45A;
    --warm-wash: #33260F;
    --amber: #F5A300;
    --band: #1A3F86;
    --band-ink: #FFFFFF;
    --on-fill: #0D1424;
    --grid: transparent;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
    --tour-shade: rgba(0, 0, 0, 0.66);
  }
}

/* ----------------------------------------------------------------- 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: 16px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  -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" 104;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h1 {
  max-width: 24ch;
  font-size: clamp(32px, 18px + 2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--novel-ink);
  text-underline-offset: 3px;
}

/* A small line above or beside a heading: what the block is, in plain words and sentence case. */
.eyebrow {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.lede {
  max-width: 58ch;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.5;
}

/* --------------------------------------------------------------- header -- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  min-height: var(--mast);
  /* The bar's content lines up with the page's 1240px column on a wide screen. */
  padding: 0 max(24px, (100% - 1240px) / 2);
  background: color-mix(in srgb, var(--cell) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 28px;
  color: var(--ink);
  text-decoration: none;
}

.masthead-mark {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--novel-ink);
}

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

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

.masthead-desc {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-3);
}

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.navlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.16s, background-color 0.16s;
}

.navlink:hover,
.navlink[aria-current="page"] {
  color: var(--ink);
  background: var(--paper);
}

/* The rental company's door, in every page's bar: the one filled control up there. */
.navlink-primary,
.navlink-primary:hover,
.navlink-primary[aria-current="page"] {
  margin-left: 8px;
  color: var(--on-fill);
  background: var(--novel-ink);
}

a.navlink-primary:hover {
  background: var(--ink);
}

span.navlink {
  cursor: default;
}

/* "Öneri" (15 Oct 2026, suggest.js): an outlined pill between the plain toggles and the filled door, so it reads as a
   button on every page without competing with the door. */
.navlink-suggest {
  margin-left: 4px;
  color: var(--novel-ink);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.navlink-suggest:hover {
  color: var(--novel-ink);
  background: var(--novel-wash);
}

/* A narrow bar keeps the logo, the theme and the rental company's door; the four text links wait for a wider screen
   (measured 2 Oct 2026: with "Bir araba" and "Filo planı" added, the calculator's bar ran into the logo at 900 px). */
@media (max-width: 999px) {
  .navlink-secondary {
    display: none;
  }
}

@media (max-width: 860px) {
  .masthead {
    padding: 0 16px;
  }

  .masthead-brand {
    margin-right: 12px;
  }
}

/* The theme and language toggles are icon-sized; their names stay for screen readers (aria-label). */
#theme-toggle,
#lang-toggle {
  min-width: 40px;
  justify-content: center;
  padding: 0 10px;
}

#theme-toggle .navlink-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.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;
}

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

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

/* ---------------------------------------------------------------- panels -- */
/* A form lives in one white panel on the paper: the largest corner of the system, the one shadow. */
.panel {
  position: relative;
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 28px 0;
}

.panel-label {
  font-family: var(--display);
  font-variation-settings: "wdth" 104;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ---------------------------------------------------- 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"
    "years years"
    "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-field="years"] { grid-area: years; padding: 12px 0 14px; border-bottom: 1px solid var(--rule-2); }
.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: 12px 28px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  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);
  border-radius: var(--r-card);
  overflow: hidden;
  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-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

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

.ask-choice[aria-checked="true"] {
  border-color: var(--novel-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: 14px;
  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: 12.5px;
  font-weight: 700;
  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(--display);
  font-variation-settings: "wdth" 104;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.sec-reset {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font-family: var(--data);
  font-size: 12.5px;
  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: 15px;
  font-weight: 600;
  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 10px;
  border: 1px solid;
  border-radius: 999px;
  background: none;
  font-family: var(--data);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  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: 46px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  background: var(--cell-2);
  transition: border-color 0.16s, background-color 0.16s, box-shadow 0.16s;
}

.control:hover {
  border-color: color-mix(in srgb, var(--novel-ink) 40%, var(--rule));
}

.control:focus-within {
  border-color: var(--novel-ink);
  background: var(--cell);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--novel) 22%, transparent);
}

.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: 16px;
  font-weight: 500;
  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: 16px;
}

.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: 13px;
  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 {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--cell);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 15px;
  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(--novel-ink);
  color: var(--novel-ink);
}

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

/* ---------------- 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: 12.5px;
  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: 12.5px;
  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: 14px;
  font-variant-numeric: tabular-nums;
}

.month-table th {
  padding: 4px 6px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
}

.month-table tbody th {
  font-size: 13.5px;
  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: 14px;
}

.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: 13px;
  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;
  min-height: 48px;
  padding: 12px 24px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--novel-ink);
  border-radius: var(--r-field);
  background: var(--novel-ink);
  color: var(--on-fill);
  cursor: pointer;
  transition: background-color 0.16s, color 0.16s, border-color 0.16s, transform 0.16s;
}

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

.btn:active {
  transform: translateY(1px);
}

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

.btn-ghost {
  background: var(--cell);
  color: var(--novel-ink);
  border-color: var(--rule);
}

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

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

.linkbtn {
  padding: 0;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  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: 18px 28px 20px;
  border-top: 1px solid var(--rule);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  background: color-mix(in srgb, var(--cell-2) 94%, transparent);
  backdrop-filter: blur(8px);
}

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

.status:empty {
  display: none;
}

/* The progress bar under the fleet pages' button while a calculation runs (regulation.js `progress`): a road with a dashed
   centre line; the driven part is sign blue with a ring at its front, like a lane's end; the time in words under it.
   While it runs, the status line above it is its headline. */
.status:has(+ .progress:not([hidden])) {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.progress {
  flex-basis: 100%;
  margin-top: -4px;
}

.progress-road {
  height: 14px;
  border-radius: 7px;
  background:
    repeating-linear-gradient(90deg, var(--cell) 0 14px, transparent 14px 28px) 0 50% / 100% 2px no-repeat,
    var(--rule);
}

.progress-done {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: 7px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--on-fill) 70%, transparent) 0 14px, transparent 14px 28px) 0 50% / 100% 2px no-repeat,
    var(--novel);
}

.progress-done::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 26px;
  height: 26px;
  border: 6px solid var(--novel);
  border-radius: 50%;
  background: var(--cell);
  transform: translate(50%, -50%);
}

.progress-time {
  margin: 10px 0 0;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .progress-done {
    transition: none !important;
  }
}

/* --------------------------------------------------------------- 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;
}

/* A result section: an open block on the paper — its question as a real heading, the cards under it. The cards are
   the white boxes; the section itself draws no frame, so no box sits inside another. */
.scenario {
  position: relative;
  margin: 0 0 56px;
}

.scenario-title {
  display: block;
  margin: 0 0 18px;
  font-family: var(--display);
  font-variation-settings: "wdth" 104;
  font-size: clamp(22px, 18px + 0.6vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* The calculator's side-by-side strip holds a chart and a table directly: it keeps a box of its own. */
.scenario-compare {
  padding: 22px 0 8px;
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

.scenario-compare > .scenario-title {
  padding: 0 24px;
}

.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: 16px;
}

.card {
  min-width: 0;
  padding: 22px 24px 22px;
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

.card-q {
  margin-bottom: 10px;
  font-family: var(--display);
  font-variation-settings: "wdth" 100;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.card-a {
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* The hope line after a bad verdict: amber, the colour of "not yet". */
.card-hope {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--rule));
  background: linear-gradient(90deg, var(--warm-wash), var(--cell) 55%);
  box-shadow: inset 4px 0 0 var(--amber);
}

.card-lead {
  grid-column: 1 / -1;
  padding: 26px 28px 26px;
}

.card-lead .card-big-value {
  font-size: clamp(40px, 30px + 1.4vw, 56px);
}

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

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

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

.scenario-skeleton {
  padding: 28px;
  border: 1px dashed var(--rule);
  border-radius: var(--r-card);
}

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

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

.skeleton-lead {
  font-size: 16px;
  color: var(--ink-2);
}

/* A table inside a card sits on the card's own padding; only the side-by-side strip pads its own. */
.compare-wrap {
  margin-top: 16px;
  overflow-x: auto;
}

.scenario-compare > .compare-wrap {
  margin: 0;
  padding: 8px 24px 16px;
}

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

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

.compare thead th {
  padding-top: 0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  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: 600;
  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.97em;
  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: 190px;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  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: 2px 14px;
  margin: 4px 0 14px;
}

/* The answer's number: Archivo a little narrow and heavy, like a sign's figure. */
.card-big-value {
  font-family: var(--data);
  font-variation-settings: "wdth" 86;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.card-big-label {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}

/* The ledger under the big number (5 Sep 2026): the plain money behind the gain as ruled lines — the amount in one
   number column, right-aligned like an account statement, what it is beside it in sentence case, a lighter line for
   what is in it. The verdict above stays the only big, coloured figure; these are one step down, in ink. */
.card-ledger {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  /* Stretch, not baseline: both cells of a line start at the same top, so their rules meet in one line. */
  align-items: stretch;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--rule);
}

.card-ledger-row {
  display: contents;
}

.card-ledger-value,
.card-ledger-label {
  padding: 9px 0;
  border-top: 1px solid var(--rule-2);
}

.card-ledger-value {
  padding-right: 16px;
  font-family: var(--data);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.card-lead .card-ledger-value {
  font-size: 21px;
}

.card-ledger-label {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.card-ledger-note {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-3);
}

.meta {
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- footer -- */
.colophon {
  display: flex;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
  width: min(1240px, 100% - 48px);
  margin: 24px auto 0;
  padding: 28px 0 48px;
  border-top: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 14px;
  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: 8px;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.scenario-compare .chart {
  margin: 0;
  padding: 8px 24px 0;
}

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

.card-why-q {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  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. Wide enough for the car
   table to be one line per car (redesign, Sep 2026). */
.reg {
  max-width: 1180px;
  margin: 0 auto;
}

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

.reg-panel-body {
  padding: 18px 28px 12px;
}

.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;
  /* Two lines per car: what the car is (its name, year, km, value), then what it earns and how it counts. */
  grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.7fr) auto;
  grid-template-areas:
    "n label year km value value remove"
    "n daily rent fuel owned domestic remove"
    "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;
  /* The row is two lines tall: the tag sits beside the first line's boxes, under their labels. */
  align-self: start;
  padding-top: 32px;
  font-family: var(--data);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}

.reg-a-label { grid-area: label; }
.reg-a-daily { grid-area: daily; }
.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;
}

/* The estimate mark on a fleet-wide label (U2): the calculator's dashed tag as plain text, not a button. */
.reg-field-label .tag {
  margin-left: 8px;
  padding: 0 8px;
  font-size: 12px;
  cursor: default;
}
.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(--body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.reg-field .control {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
}

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

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

/* The name field is drawn as a plate: the blue TR strip, a white face, the letters in Archivo — in both themes, like a real one. */
.reg-a-label .control {
  padding-left: 0;
  overflow: hidden;
  border: 1.5px solid #16213A;
  background: #FFFFFF;
}

.reg-a-label .control::before {
  content: "TR";
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  margin-right: 10px;
  padding: 0 5px 5px;
  background: #1E4FB0;
  color: #FFFFFF;
  font: 700 10px/1 var(--body);
}

/* A UK plate's band says UK (the English one-car page, U2). */
html[lang="en"] .reg-a-label .control::before {
  content: "UK";
}

.reg-a-label .control input {
  color: #16213A;
  font-family: var(--display);
  font-variation-settings: "wdth" 92;
  font-weight: 600;
}

.reg-a-label .control input::placeholder {
  color: #6B7690;
  font-family: var(--body);
  font-weight: 400;
}

/* The column heads exist for the one-line table only. */
.reg-car-head {
  display: none;
}

.reg-head-cell {
  align-self: end;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-3);
}

/* A wide screen: every car one line, the heads above them once, the labels inside the rows kept for screen readers only. */
@media (min-width: 1200px) {
  .reg-car {
    grid-template-columns: 62px minmax(0, 1.8fr) minmax(0, 0.72fr) minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1.3fr) 60px 72px 30px;
    grid-template-areas:
      "n label year km value daily rent fuel owned domestic remove"
      "err err err err err err err err err err err";
    gap: 4px 8px;
    align-items: center;
    padding: 6px 0;
  }

  .reg-car-head {
    display: grid;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--rule);
  }

  .reg-car:not(.reg-car-head) .reg-field-label,
  .reg-car .reg-check > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .reg-car-n {
    align-self: center;
    padding-top: 0;
  }

  .reg-car .reg-field .control {
    padding: 0 10px;
  }

  .reg-car .reg-field:not(.reg-a-label) .control input,
  .reg-car .control select {
    font-size: 15px;
  }

  .reg-car .reg-check {
    justify-content: center;
  }

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

.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;
}

/* The one-car page (PORT_PLAN §6.19): one row without the fleet's cells — no number tag, no monthly rent, no "Şirket adına",
   no "Türkiye'de üretildi", no remove — in the row and in the head row (the same reg-a-* classes). The rent stays in the DOM
   with its pack value, so the request is the fleet check's. Each width gets its own areas, so no hidden cell leaves an empty column. */
.one .reg-car-n,
.one .reg-a-n,
.one .reg-a-rent,
.one .reg-a-owned,
.one .reg-a-domestic,
.one .reg-remove {
  display: none;
}

.one .reg-car {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "label label year km"
    "value daily fuel ."
    "err err err err";
}

@media (min-width: 1200px) {
  .one .reg-car {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.72fr) minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
    grid-template-areas:
      "label year km value daily fuel"
      "err err err err err err";
  }
}

/* A fleet without the age rule (the UK plan page, U3): regulation.js draws no "in the firm's name" or "made in Türkiye"
   cell, so each width gets its own areas and no empty column is left. */
.norule .reg-car {
  grid-template-areas:
    "n label year km value value remove"
    "n daily rent fuel . . remove"
    "err err err err err err err";
}

@media (min-width: 1200px) {
  .norule .reg-car {
    /* The remove column fits its word: "Remove" is twice as wide as the Turkish "Sil". */
    grid-template-columns: 62px minmax(0, 1.8fr) minmax(0, 0.72fr) minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1.3fr) auto;
    grid-template-areas:
      "n label year km value daily rent fuel remove"
      "err err err err err err err err 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);
}

/* The gap card's merge road, after the bays picture. */
.reg-merge-line {
  margin-top: 14px;
}

/* "Ne zaman ne yapmam gerekiyor?": the regulation's three dates, one ruled line each, the day in the ledger's figure font. */
.reg-dates {
  margin: 4px 0 12px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}

.reg-date {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 2px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-2);
}

.reg-date-day {
  font-family: var(--data);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.reg-date-text {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.55;
}

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

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

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

/* The order card's door (5 Sep 2026): one button and the terms beside it; the form itself is the dialog below. */
.reg-order-door {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 16px;
}

.reg-order-terms {
  font-size: 13px;
  color: var(--ink-2);
}

/* The order dialog: the walk-through's centred panel — bracket frame, the sheet's shadow — over the same shade.
   The dialog carries no padding: a click that lands on it is a click on the shade (regulation.js closes on it). */
.reg-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: var(--frame) solid var(--ink);
  background: var(--cell);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: auto;
}

.reg-dialog::backdrop {
  background: rgba(11, 14, 18, 0.58);
}

.reg-dialog[open] {
  animation: dialog-in 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reg-dialog[open]::backdrop {
  animation: shade-in 0.2s;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes shade-in {
  from {
    opacity: 0;
  }
}

.reg-dialog-panel {
  padding: 22px 26px 24px;
}

.reg-dialog-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.reg-dialog-lead {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* The form: one column, each field with its label, control, note and error line; the honeypot off-screen. */
.reg-order-form {
  display: grid;
  gap: 14px;
}

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

.reg-order-form .reg-field > .note {
  margin-top: 2px;
}

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

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

.reg-order-done .btn {
  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;
}

/* The suggestion window (suggest.js) is the order dialog with a message box: the field's frame grows with the box's rows. */
.reg-field .control.suggest-text {
  height: auto;
  padding: 10px 12px;
  align-items: stretch;
}

.suggest-text textarea {
  flex: 1;
  min-width: 0;
  min-height: 7.5em;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}

.suggest-text textarea:focus {
  outline: none;
}

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

/* ============================================ the fleet pictures (redesign, Sep 2026) ==
   The rule as limit signs, a car as its plate, the exit as lanes, the licence as parking
   spaces, a car's roads side by side, and the report's door as the page's one dark band. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The fleet page's head: the question on the left, the rule as two signs on the right. */
.reg-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 64px;
  align-items: center;
  margin-bottom: 40px;
}

.reg-head h1 {
  max-width: 21ch;
}

.reg-head .lede {
  margin-top: 16px;
}

.reg-rule {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.reg-rule .reg-rule-summary {
  max-width: 300px;
  margin: 0;
  font-size: 14.5px;
  text-align: center;
}

.reg-rule-summary summary {
  font-weight: 600;
  color: var(--ink);
}

/* The limit sign: a white disc, a red ring, the number — the rule as every driver reads it. Fixed colours: a sign is
   the same sign at night. */
.limit-signs {
  display: flex;
  gap: 18px;
}

.limit-sign {
  --size: 128px;
  display: grid;
  place-content: center;
  justify-items: center;
  width: var(--size);
  height: var(--size);
  border: calc(var(--size) * 0.115) solid #D0262D;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 2px #FFFFFF, 0 14px 28px -14px rgba(208, 38, 45, 0.6);
  color: #16213A;
  line-height: 1;
}

.limit-sign b {
  font-family: var(--display);
  font-variation-settings: "wdth" 78;
  font-weight: 700;
  font-size: calc(var(--size) * 0.4);
  letter-spacing: -0.03em;
}

.limit-sign small {
  margin-top: 3px;
  font: 600 calc(var(--size) * 0.1) / 1 var(--body);
}

/* A car's name: the plate chip (blue strip, white face — fixed colours, like a real plate) and the model beside it. */
.car-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

.plate {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  height: 28px;
  overflow: hidden;
  border: 1.5px solid #16213A;
  border-radius: 4px;
  background: #FFFFFF;
  color: #16213A;
}

.plate-tr {
  display: flex;
  align-items: flex-end;
  padding: 0 4px 3px;
  background: #1E4FB0;
  color: #FFFFFF;
  font: 700 9px/1 var(--body);
}

.plate-no {
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-family: var(--display);
  font-variation-settings: "wdth" 86;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.car-model {
  font-weight: 600;
}

.car-tag {
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--cell-2);
  font-weight: 600;
}

.car-meta {
  flex-basis: 100%;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* The lanes: the car's name, its road to the limit, the status in words. The rule day is one red line through them. */
.lanes {
  display: grid;
  margin-top: 22px;
}

.lane {
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) minmax(150px, 210px);
  gap: 8px 22px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--rule-2);
}

.lane-axis {
  padding: 0 0 8px;
  border-top: 0;
}

.lane-track {
  position: relative;
  height: 26px;
}

/* The red line of the rule day, drawn as a border so it prints; it reaches into the row padding to join its neighbours. */
.lane-track::before {
  content: "";
  position: absolute;
  top: -13px;
  bottom: -13px;
  left: var(--rule-x);
  border-left: 2px solid var(--err);
}

/* A plan without the age rule (the UK, U3) has no rule day to draw. */
.lanes.no-rule .lane-track::before {
  content: none;
}

.lane-scale {
  height: 22px;
}

.lane-scale::before {
  top: 22px;
  bottom: -9px;
}

.lane-year {
  position: absolute;
  top: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  transform: translateX(-50%);
}

.lane-year.is-today {
  left: 0;
  transform: none;
  color: var(--novel-ink);
  font-weight: 600;
}

.lane-year.is-rule {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--err);
  color: var(--on-fill);
  font-weight: 700;
}

.lane-year.is-last {
  transform: translateX(-100%);
}

/* The bar is a thick top border (it prints); the end is a ring like the limit sign, an arrow when the car stays. */
.lane-bar {
  position: absolute;
  top: 9px;
  left: 0;
  right: calc(100% - var(--to));
  border-top: 8px solid color-mix(in srgb, var(--lane) 38%, transparent);
  border-radius: 4px;
}

.lane-end {
  position: absolute;
  top: 50%;
  left: var(--to);
  width: 20px;
  height: 20px;
  border: 5px solid var(--lane);
  border-radius: 50%;
  background: var(--cell);
  transform: translate(-50%, -50%);
}

.lane.is-out { --lane: var(--err); }
.lane.is-later { --lane: var(--amber); }
.lane.is-in { --lane: var(--ok); }

.lane.is-in .lane-end {
  width: 0;
  height: 0;
  border-width: 9px 0 9px 13px;
  border-color: transparent transparent transparent var(--ok);
  border-radius: 0;
  background: none;
  transform: translate(-100%, -50%);
}

.lane-status {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.lane.is-out .lane-status { color: var(--err); }
.lane.is-later .lane-status { color: var(--warm); }
.lane.is-in .lane-status { color: var(--ok); }

.lane-reason {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}

/* The parking spaces the licence asks for: taken by a car that stays, dashed and empty for a car to buy. */
.bays {
  margin-top: 22px;
}

.bay-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
}

.bay {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 78px;
  border-left: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
}

.bay:last-child {
  border-right: 2px solid var(--ink-3);
}

.bay-car {
  width: 26px;
  height: 46px;
  color: var(--novel-ink);
}

.bay.is-free::after {
  content: "";
  position: absolute;
  inset: 9px 9px 9px;
  border: 2px dashed var(--err);
  border-radius: 7px;
}

.bay.is-free::before {
  content: "+";
  font: 700 22px/1 var(--display);
  color: var(--err);
}

.bay.is-hybrid::after {
  border-color: var(--ok);
}

.bay.is-hybrid::before {
  color: var(--ok);
}

.bay-tag {
  width: min-content;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--ok);
}

/* The "+" and the tag stack in the middle together, so they cannot meet when the space shrinks (phone, print). */
.bay.is-hybrid {
  align-content: center;
}

.bay-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--ink-2);
}

.bay-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bay-key::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.bay-key.is-taken::before { background: var(--novel-ink); }
.bay-key.is-free::before { border: 2px dashed var(--err); }
.bay-key.is-min::before { border-left: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); border-radius: 0; }

/* One car: plate and status on top, the best road in one sentence, the roads side by side, one fold. */
.car-list > .car-block + .car-block {
  margin-top: 18px;
}

.car-block {
  padding: 22px 26px 20px;
  background: var(--cell);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--car-tone);
  border-radius: var(--r-panel);
}

.car-block.is-err { --car-tone: var(--err); }
.car-block.is-warm { --car-tone: var(--amber); }
.car-block.is-ok { --car-tone: var(--ok); }

.car-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
}

.car-head .car-meta {
  flex-basis: auto;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.status-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.car-best {
  margin: 16px 0 18px;
  font-size: 17px;
  line-height: 1.45;
}

.car-best .num {
  font-family: var(--data);
  font-weight: 700;
  color: var(--ok);
}

.car-block .cards {
  gap: 14px;
}

.cards.roads {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.road {
  position: relative;
  padding: 20px 20px 14px;
  background: var(--cell-2);
  border-color: var(--rule-2);
}

.road .card-q {
  font-size: 16px;
}

.road .card-big-value {
  font-size: clamp(26px, 20px + 0.8vw, 32px);
}

.road .card-big-label {
  font-size: 14px;
}

.road .card-ledger-value {
  font-size: 16px;
}

.road .card-ledger-label {
  font-size: 13.5px;
}

.road.is-best {
  border: 2px solid var(--ok);
  background: color-mix(in srgb, var(--ok-wash) 70%, var(--cell));
}

.road-badge {
  position: absolute;
  top: -12px;
  left: 18px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--ok);
  color: var(--on-fill);
  font-size: 13px;
  font-weight: 700;
}

.car-block .card-why {
  margin-top: 16px;
}

/* A car that stays: one card without its own frame, the number on the left and the plain money on the right. */
.car-block .keep-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 36px;
  align-items: start;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
}

.keep-card > .card-q,
.keep-card > .card-why,
.keep-card > .car-note {
  grid-column: 1 / -1;
}

.car-note {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--r-field);
  background: var(--warm-wash);
  font-size: 14.5px;
}

/* The one-car page's rule line (one-car.js): a row of its own under the three cards; green when the car stays (colour = meaning). */
.cards > .one-rule {
  grid-column: 1 / -1;
  margin-top: 0;
}

.car-note.is-ok {
  background: var(--ok-wash);
}

/* The report's door: the page's one dark band. The plan's number in light green, the two doors under it. The dialog
   inside keeps the ordinary look: every rule here reaches only the band's own children. */
.card-cta {
  padding: 32px 34px;
  border-color: var(--band);
  background: var(--band);
  color: var(--band-ink);
}

.card-cta > .card-q {
  max-width: 34ch;
  font-size: clamp(21px, 17px + 0.6vw, 26px);
  color: #FFFFFF;
}

.card-cta > .card-big .card-big-value {
  font-size: clamp(44px, 32px + 1.8vw, 64px);
}

.card-cta > .card-big .tone-ok,
.card-cta > .card-big.tone-ok {
  color: #6EE7A8;
}

.card-cta > .card-big .card-big-label,
.card-cta > .card-a,
.card-cta .card-ledger-label,
.card-cta > .card-why .card-why-a {
  color: rgba(255, 255, 255, 0.8);
}

.card-cta > .card-a .num,
.card-cta .card-ledger-value {
  color: #FFFFFF;
}

.card-cta .card-ledger-value,
.card-cta .card-ledger-label {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.card-cta .card-ledger {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.card-cta > .card-why {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.card-cta > .card-why .card-why-q {
  color: #A9C8FF;
}

.card-cta .reg-order-door > .btn {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: #16213A;
}

.card-cta .reg-order-door > .btn:hover {
  background: #DCE8FF;
  border-color: #DCE8FF;
}

.card-cta .reg-order-door > .btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #FFFFFF;
}

.card-cta .reg-order-door > .btn-ghost:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

.card-cta .reg-order-door > .reg-order-terms {
  color: rgba(255, 255, 255, 0.72);
}

.card-cta .reg-order-door > .reg-order-sent {
  color: #6EE7A8;
}

@media (max-width: 1023px) {
  .reg-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-rule {
    justify-items: start;
  }

  .reg-rule .reg-rule-summary {
    text-align: left;
  }

  .lane {
    grid-template-columns: minmax(0, 1fr) minmax(130px, auto);
    grid-template-areas:
      "name status"
      "track track";
  }

  .lane > .car-name { grid-area: name; }
  .lane > .lane-track { grid-area: track; }
  .lane > .lane-status { grid-area: status; text-align: right; }

  .lane-axis {
    grid-template-areas: "track track";
  }

  .lane-axis > span:not(.lane-track) {
    display: none;
  }
}

@media (max-width: 767px) {
  .limit-sign {
    --size: 92px;
  }

  .cards.roads,
  .car-block .keep-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .road + .road {
    margin-top: 8px;
  }

  .car-block {
    padding: 18px 16px 16px;
  }

  .card-cta {
    padding: 24px 20px;
  }

  .bay {
    width: 46px;
    height: 66px;
  }

  .bay-car {
    width: 22px;
    height: 38px;
  }

  .bay-tag {
    font-size: 9.5px;
  }
}

/* A phone: the status beside the name squeezed the name into four lines. One column: the name, the status, the lane. */
@media (max-width: 560px) {
  .lane {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "status"
      "track";
    gap: 6px;
  }

  .lane > .lane-status {
    text-align: left;
  }

  /* The status sits right above the lane now: the red line would cut through its reason. */
  .lane-track:not(.lane-scale)::before {
    top: 0;
  }

  .lane-axis {
    grid-template-areas: "track";
  }

  /* The dates card: the day above its sentence, the sentence the full width. */
  .reg-date {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------- 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: minmax(0, 1fr);
}

/* A grid item's default min-width is its content: the compare tables would widen the column past a phone
   screen. Zero lets the card shrink and the table scroll inside its wrap. */
.rep .card {
  min-width: 0;
}

/* The report's section titles are whole questions; the calculator's nowrap title would run off a phone. */
.rep .scenario-title {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Wraps, so the status line and the progress bar (fleet-cards.js) take their own lines under the print button. */
.rep-tools {
  display: flex;
  flex-wrap: wrap;
  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);
}

/* The breakdown tables: plain numbers on the item rows, the subtotals bold above a rule. */
.rep-lines td.num {
  font-weight: 500;
}

.rep-lines tr.rep-sum th,
.rep-lines tr.rep-sum td {
  font-weight: 700;
  border-top: 1px solid var(--rule);
}

/* A lighter second line inside a report cell: the net cash under a plan's gain, a road's gain under its name, a plan's one-line note. */
.rep-sub {
  display: block;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: normal;
}

/* The plan tables read as sentences: the row heads and the cells wrap. */
.rep-plans th,
.rep-joint th,
.rep-plan-roads td,
.rep-cash td {
  white-space: normal;
}

.rep-buy th,
.rep-buy td {
  border-top: 1px solid var(--rule);
}

/* The locked tier (22 Sep 2026): a withheld cell, the door under a locked table, the banner under the title. */
.rep-lock {
  font-family: var(--data);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
}

.rep-lock svg {
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A preview car's row in the locked tier: the brand wash behind it and a bar on the name cell, so the open answers
   read as "yours to see" among the padlocks. The bar is a border, so it prints without background graphics. */
.rep-preview th,
.rep-preview td {
  background: var(--novel-wash);
}

.rep-preview th {
  border-left: 3px solid var(--novel);
}

.rep-lock-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}

.rep-lock-banner {
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px dashed var(--ink-3);
  font-size: 14px;
}

.rep-lock-banner p {
  margin: 0;
}

.rep-lock-banner .rep-lock-note {
  margin-top: 6px;
}

/* The locked report's watermark: the company name across every screen and, being fixed, on every printed page. */
.rep-watermark {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* three across: the middle column lands on the content on a wide screen */
  grid-auto-rows: 1fr;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.rep-watermark span {
  font-family: var(--data);
  font-size: 34px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.07;
  transform: rotate(-28deg);
}

.chart-fleet-cash .chart-plot {
  height: 240px;
}

#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"
      "label label"
      "year km"
      "value fuel"
      "daily rent"
      "owned domestic"
      "err err";
    align-items: center;
  }

  .one .reg-car {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "label label"
      "year km"
      "value value"
      "daily fuel"
      "err err";
  }

  .norule .reg-car {
    grid-template-areas:
      "n remove"
      "label label"
      "year km"
      "value fuel"
      "daily rent"
      "err err";
  }

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

  /* The order dialog is a sheet from the bottom of the screen, like the walk-through's card. */
  .reg-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  .reg-dialog-panel {
    padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  }

  .reg-dialog-title {
    font-size: 21px;
  }

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

  .reg-car-n {
    align-self: center;
    padding-top: 0;
  }

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

/* ------------------------------------------------------- the home page -- */
/* The home page's layout, sizes and spacing live in clarity.css (the Sep 2026 redesign), which loads after
   this sheet; only what it does not set stays here. */
.home {
  display: grid;
}

.home-hero {
  display: grid;
}

.home-fine {
  max-width: 44ch;
  line-height: 1.5;
}

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

/* 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) {
  .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;
    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;
  }

  .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);
  }
}

/* "Öneri" keeps its word on a phone and drops its bubble (Can, 15 Oct 2026): with the bubble the calculator's bar ran
   33 px into the logo at 360 px; this leaves a 14 px gap. */
@media (max-width: 419px) {
  .navlink-suggest {
    margin-left: 0;
    padding: 0 10px;
  }

  .navlink-suggest svg {
    display: none;
  }

  .navlink-primary {
    padding: 0 12px;
  }
}

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

/* ------------------------------------------------------------- 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);
}

/* `.post .post-meta`: the date line is a <p>, and `.post p` (the article's 19 px) would win over a plain class. */
.blog-date,
.post .post-meta,
.post-crumbs {
  font-family: var(--data);
  font-size: 13px;
  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: 13px;
  font-weight: 500;
  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);
  border-radius: var(--r-card);
  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;
}

/* The post's one call to action: the sign-blue look of a chosen answer, because blue is every action. */
.post-cta {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin: 28px 0 8px;
  padding: 18px 20px;
  border: 1px solid var(--novel-ink);
  border-radius: var(--r-card);
  background: var(--novel-wash);
}

.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,
  .results-tools,
  .rep-tools,
  .reg-order-door,
  .reg-order-fallback,
  .scenario-tabs,
  .colophon,
  .meta {
    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;
  }

  /* The fleet report is a document: sections and cards flow across pages (a whole card that jumps to the
     next page left half of every page empty, 39 pages for 8 cars). Only a heading, a big number and a table
     row stay whole, each with what follows it. The tables stop scrolling and tighten, so the nine-column
     inputs table fits A4 instead of being cut at the edge. */
  .rep .scenario,
  .rep .card {
    break-inside: auto;
    page-break-inside: auto;
  }

  .rep .scenario-title,
  .rep .card-q,
  .rep .card-big,
  .rep .card-why-q {
    break-inside: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    page-break-after: avoid;
  }

  /* The report's cards stack in one column anyway; as plain blocks Chrome can walk back to an earlier
     break when a heading would be left alone (its grid layout cannot). */
  .rep .cards {
    display: block;
  }

  .rep .card + .card {
    margin-top: 1px;
  }

  /* Chrome keeps a heading with what follows only when the break would fall exactly between the two
     boxes. A break one step inside the next box (after the card list's padding, before the first card's
     first line, or after the table wrap's padding) escapes the rule, so the "avoid" chain continues into
     those boxes and Chrome walks back to the break before the section or before the table. */
  .rep .scenario-title + *,
  .rep .scenario-title + * > :first-child,
  .rep .scenario-title + * > :first-child > :first-child {
    break-before: avoid;
    page-break-before: avoid;
  }

  /* A footnote stays whole (Chrome splits a paragraph 3 + 2 lines rather than honour widows); the summary's
     long, multi-paragraph footnote may break between its paragraphs. */
  .rep .card-why,
  .rep .card-why-long .card-why-a {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .rep .card-why-long {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* Every car of the appendix starts on a new page, like a chapter: after a car's pages-long ledger, the next car's
     heading halfway down a page was easy to miss. */
  .rep .rep-car {
    break-before: page;
    page-break-before: always;
  }

  /* The car's ledger opens its own page too: its tall table cannot follow the roads card, so its question and
     first sentence stood alone at the foot of the car's first page above a blank. */
  .rep .rep-ledger {
    break-before: page;
    page-break-before: always;
  }

  /* A long fold's label keeps its first paragraph: the avoid on the first paragraph reaches the fold's inner content
     box, so Chrome breaks before the label instead of leaving it alone at the foot of a page. */
  .rep .card-why-long .card-why-q + .card-why-a {
    break-before: avoid;
    page-break-before: avoid;
  }

  .rep .compare-wrap {
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }

  .rep .compare {
    font-size: 12px;
  }

  .rep .compare th,
  .rep .compare td {
    padding: 7px 8px;
  }

  /* A car's plate and its model-year line shrink with the table's 12 px (their screen sizes are fixed px, so the
     model name printed smaller than the line under it). */
  .rep .compare .plate {
    height: 22px;
  }

  .rep .compare .plate-no {
    padding: 0 6px;
    font-size: 12.5px;
  }

  .rep .compare .car-meta {
    font-size: 11px;
  }

  .rep .compare tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .rep .compare thead {
    display: table-header-group;
  }

  /* No table starts or ends with a lone row on a page: the header keeps the first row, the total row
     keeps the row above it. */
  .rep .compare thead,
  .rep .compare tbody tr:first-child {
    break-after: avoid;
    page-break-after: avoid;
  }

  .rep .compare tbody tr:last-child {
    break-before: avoid;
    page-break-before: avoid;
  }

  .rep .rep-inputs {
    font-size: 11px;
  }

  .rep .rep-inputs th,
  .rep .rep-inputs td {
    padding: 6px 5px;
  }

  /* The fleet pictures: a car's lane never splits (its ring was cut in half), the year axis keeps the first
     car, the parking spaces stay whole with their legend. The one-column grid turns into a block so Chrome
     can walk back to the break before a lane. */
  .lanes {
    display: block;
  }

  .lane,
  .bays {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .lane-axis {
    break-after: avoid;
    page-break-after: avoid;
  }

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

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

/* ------------------------------------------------- the walk-through (tour.js) -- */
/* A spotlight over the real page: the framed element is the illustration, the card says one
   thing about it. The dimming is the hole's own shadow, so it travels with the hole between stops. */
.tour-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  min-height: 44px;
  padding: 8px 18px 8px 14px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}

.tour-button:hover {
  border-color: var(--novel-ink);
}

.tour-button-mark {
  width: 0;
  height: 0;
  border-left: 9px solid var(--novel);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.tour-button-time {
  padding-left: 10px;
  border-left: 1px solid var(--rule);
  font-weight: 500;
  color: var(--ink-3);
}

.tour {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.25s;
}

.tour.is-open {
  opacity: 1;
}

.tour-shade {
  position: absolute;
  inset: 0;
  background: transparent; /* blocks clicks; the hole's shadow does the dimming */
}

.tour.is-shaded .tour-shade {
  background: var(--tour-shade);
}

.tour-hole {
  position: fixed;
  z-index: 1;
  border: var(--frame) solid var(--novel);
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--cell), 0 0 0 200vmax var(--tour-shade);
  pointer-events: none;
  transition: top 0.4s, left 0.4s, width 0.4s, height 0.4s;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tour-card {
  position: fixed;
  z-index: 2;
  width: min(440px, calc(100vw - 32px));
  padding: 16px 22px 20px;
  background: var(--cell);
  border: var(--frame) solid var(--ink);
  box-shadow: var(--shadow);
}

.tour-card.is-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  padding: 20px 26px 24px;
}

.tour-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.tour-count {
  font-family: var(--data);
  font-size: 13px;
  font-weight: 700;
  color: var(--novel-ink);
}

.tour-big {
  margin: 0 0 8px;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tour-card.is-center .tour-big {
  font-size: 28px;
}

.tour-small {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.tour-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

/* The opening card's picture: the verdict card's 100 squares, filling one by one. */
.tour-art {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 2px 0 16px;
}

.tour-grid {
  display: grid;
  grid-template-columns: repeat(10, 9px);
  gap: 2px;
  flex: none;
}

.tour-grid i {
  display: block;
  width: 9px;
  height: 9px;
  background: var(--cell-2);
  border: 1px solid var(--rule);
  transition: background 0.18s, border-color 0.18s;
}

.tour-grid i.is-on {
  background: var(--novel);
  border-color: var(--novel);
}

.tour-legend {
  max-width: 28ch;
  margin: 0;
  font-family: var(--data);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

@media (max-width: 767px) {
  /* The card is a sheet at the bottom of the screen; tour.js scrolls the framed element above it. */
  .tour-card:not(.is-center) {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  .tour-card.is-top {
    top: 0;
    bottom: auto;
    padding: calc(14px + env(safe-area-inset-top)) 18px 18px;
    border-top: 0;
    border-bottom: var(--frame) solid var(--ink);
  }

  .tour-big {
    font-size: 21px;
  }

  .tour-card.is-center .tour-big {
    font-size: 23px;
  }

  .tour-art {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour,
  .tour-hole,
  .tour-grid i {
    transition: none;
  }
}

@media print {
  .tour,
  .tour-button {
    display: none;
  }
}