/* tariffs.css: the price cards and the idle fee card (tariffs.cards block and the tariffs page's price
   panels), the tariffs page (DESIGN-PLAN v1.2 §5.5) and the idle fee block (Y-12, the same story as the
   page). The "100 ₺ ile kaç km?" card of the tariffs.km-index block comes from blocks.css. */

/* ---------- Price cards and the idle fee card ----------
   Every card is three rows of its grid taken as a subgrid (navy top, body, foot): tops, bodies and
   footers line up across a row whatever their content, and the cards of a row are one height.
   Price card: the connector's single colour mark (MANIFEST connector-*-mark) as a watermark in the navy
   top, a CSS mask in navy-600 (the near layer of the page head band's city drawing: 1.3:1 against the
   band, so the price keeps 11.5:1 and the muted labels 7.3:1 where it passes under them), cropped by the
   card edge; the facts in a row; power chip, connector tag and validity date in the foot.
   Idle card: the car park scene across the navy top, the night window as a tag, the rule on a stepped
   meter with its three facts under it. */
.tariff-cards { align-items: stretch; }
.tariff-cards > * { grid-row: span 3; }
.price-card, .idle-card {
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
@supports not (grid-template-rows: subgrid) {
  .price-card, .idle-card { display: flex; flex-direction: column; }
  .price-body, .idle-body { flex: 1 0 auto; }
}
.price-top, .idle-top {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-height: 188px;
  padding: var(--sp-5);
  overflow: hidden;
  background: var(--band);
  color: var(--on-band-muted);
}
@media (min-width: 768px) { .price-top, .idle-top { min-height: 204px; padding: var(--sp-6); } .price-card--lg .price-top { min-height: 224px; } }
/* The top is the query container of its watermark (the card itself cannot be one: containment would
   turn its subgrid off). */
.price-top { container: ptop / inline-size; }
.price-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 26px; }
.price-name { color: var(--on-band-muted); font-size: .875rem; font-weight: var(--fw-semibold); line-height: 1.3; font-stretch: var(--stretch-text); letter-spacing: 0; }
/* "Hızlı şarj": a quiet tag on the navy (red is kept for actions and live state). */
.price-fast { background: rgba(255, 255, 255, .1); color: var(--on-band); box-shadow: inset 0 0 0 1px var(--on-band-line); }
.price-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--sp-3); }
.price-num { color: var(--on-band); font-size: var(--fs-price); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.01em; }
.price-unit { color: var(--on-band-muted); font-size: 1.25rem; font-weight: var(--fw-medium); }

/* The watermark: the mark grows with the card, its face sits at about 72 % of the card width, the grip
   and the cable run off the right and bottom edges. --fx/--fy: the face centre in the mark's box
   (400 x 320). */
.price-mark {
  --mh: clamp(232px, 62cqw, 360px);
  --mw: calc(var(--mh) * 1.25);
  --fx: .21;
  --fy: .37;
  position: absolute;
  z-index: -1;
  left: calc(72% - var(--fx) * var(--mw));
  top: calc(45% - var(--fy) * var(--mh));
  width: var(--mw);
  height: var(--mh);
  background: var(--band-hover);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  pointer-events: none;
}
.price-card--dc .price-mark { --fx: .27; --fy: .44; }
.price-card--lg .price-mark { --mh: clamp(248px, 66cqw, 380px); }
@media (forced-colors: active) { .price-mark { display: none; } }

/* Facts: a list on a narrow card, one row of columns on a wide one (--fact-cols from the server). The
   query container is the body, not the card: containment would turn the subgrid off. */
.price-body { container: pbody / inline-size; display: flex; align-items: center; min-width: 0; padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.price-checks { display: grid; gap: var(--sp-3); width: 100%; margin: 0; padding: 0; list-style: none; }
/* The facts in the body size with 28 px check discs, the foot in the small size with taller chips
   (owner 13.10.2026: "the texts in the lower part are too small"). */
.price-checks li { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.4; }
.price-checks .i { flex: none; box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 50%; background: var(--bg-tint); color: var(--ink); stroke-width: 2.25; }
@container pbody (min-width: 330px) {
  .price-checks { grid-template-columns: repeat(var(--fact-cols, 3), minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
  .price-checks li { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}
.price-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); max-width: none; margin: 0 var(--sp-5); padding: var(--sp-4) 0 var(--sp-5); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.price-meta .ptag { height: 30px; padding: 0 12px 0 8px; gap: 6px; font-size: var(--fs-small); }
.price-meta .tag { height: 30px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-small); }
.price-valid { flex-basis: 100%; color: var(--muted); }
@media (min-width: 768px) {
  .price-body, .idle-body { padding-inline: var(--sp-6); }
  .price-meta, .idle-foot { margin-inline: var(--sp-6); padding-bottom: var(--sp-6); }
}

/* Idle fee card (owner, 30.09.2026). Navy top: the title, and the car park scene standing on a floor in
   the watermark tone so it sits in the panel. The scene is in the flow under the title row (a wrapped
   title row pushes it down), centred, the parking plate running off the bottom edge like the watermarks:
   the drawing starts about 15 % below the top of its box and the plate ends near 85 %, so the box is
   pulled up into the row gap and let out under the edge. */
.idle-top { padding-bottom: 0; }
.idle-top::before { content: ""; position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: 34%; background: var(--band-raised); }
.idle-scene { --sh: 208px; position: relative; z-index: -1; align-self: center; width: calc(var(--sh) * 4 / 3); height: var(--sh); margin: calc(var(--sh) * -.13) 0 calc(var(--sh) * -.2); pointer-events: none; }
@media (min-width: 768px) { .idle-scene { --sh: 224px; } }
.idle-scene .il { display: block; width: 100%; height: 100%; }
.idle-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: var(--sp-5) var(--sp-5) var(--sp-4); }
/* The rule as one stat row: values in tabular figures over small muted labels, hairlines between the
   columns, and the stepped meter (logo bar rhythm 13 : 5) under its values: light under the free minutes,
   navy under the rates, navy ending on the cap post under the cap. Schematic, not to scale. */
ol.idle-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
ol.idle-stats:not(:has(.idle-stat--free)) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.idle-stat { position: relative; display: grid; grid-template-rows: 1fr auto; row-gap: var(--sp-3); min-width: 0; padding: 0 var(--sp-3); }
.idle-stat:first-child { padding-left: 0; }
.idle-stat:last-child { padding-right: 0; }
.idle-stat + .idle-stat::before { content: ""; position: absolute; top: 2px; bottom: 22px; left: 0; width: 1px; background: var(--line); }
.idle-stat-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.idle-stat--cap .idle-stat-text { align-items: flex-end; text-align: right; }
.idle-stat-value { color: var(--ink); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.idle-stat-rates { display: flex; flex-direction: column; gap: 6px; }
.idle-stat-rates .idle-stat-value { font-size: var(--fs-h4); }
.idle-stat-label { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-medium); line-height: 1.33; }
.idle-rate { display: flex; align-items: center; gap: 6px; }
.idle-stat-bar { position: relative; display: block; height: 6px; margin-inline: calc(var(--sp-3) * -1); background: linear-gradient(90deg, var(--c, var(--ink)) 13px, transparent 13px) 0 0 / 18px 100% repeat-x; }
.idle-stat:first-child .idle-stat-bar { margin-left: 0; }
.idle-stat:last-child .idle-stat-bar { margin-right: 0; }
.idle-stat--free .idle-stat-bar { --c: var(--line-hover); }
.idle-stat--cap .idle-stat-bar { margin-right: 0; }
.idle-stat--cap .idle-stat-bar::after { content: ""; position: absolute; top: -5px; right: 0; width: 4px; height: 16px; border-radius: 1px; background: var(--ink); }
/* Foot, on the price cards' foot lines: the night exemption where their chips sit (24 px), the link where
   their validity dates sit. */
.idle-foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); max-width: none; margin: 0 var(--sp-5); padding: var(--sp-4) 0 var(--sp-5); border-top: 1px solid var(--line); }
.idle-foot .idle-more { gap: 6px; font-size: var(--fs-small); line-height: 16px; }
/* The night exemption (shared with the tariffs page): the moon in a soft rounded square, the label muted,
   the window bright in tabular figures. */
.idle-sq { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--bg-tint); color: var(--ink); }
.idle-sq .i { width: 14px; height: 14px; stroke-width: 2; }
.idle-night { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.idle-night-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.idle-night-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); min-height: 24px; }
.idle-night-label { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); line-height: 1.33; }
.idle-night-time { color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: .01em; }
/* Three cards (AC, DC, idle fee) on tablets: the idle fee card takes the whole second row. */
@media (min-width: 768px) and (max-width: 1023.98px) { .tariff-cards > .idle-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ======================================================================
   Tariffs page (owner, 30.09.2026): one idea per section, each with one strong picture and little text.
   Prices (first screen) · idle fee story · km road (navy) · AC or DC · payment · records.
   ====================================================================== */

/* ---------- Prices: two tall navy panels, the facts once for both, the two tools as picture links.
   From 1280 px the tools stand in a third column beside the panels, so the first screen is the band,
   the prices with their tools, and the facts. ---------- */
.tf-hero { padding-block: var(--sp-8) var(--sp-12); }
@media (min-width: 1024px) { .tf-hero { padding-top: var(--sp-10); } }
.tf-hero-grid { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .tf-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-hero-grid > .tf-facts, .tf-hero-grid > .tf-tools, .tf-hero-grid > .tf-empty { grid-column: 1 / -1; }
  .tf-hero-grid > .price-card:only-of-type { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .tf-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, .62fr); }
  .tf-hero-grid > .tf-facts { grid-column: 1 / 3; }
  .tf-hero-grid > .tf-tools { grid-column: 3; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); }
  .tf-hero-grid > .price-card:only-of-type { grid-column: 1 / 3; }
}
.tf-empty { color: var(--muted); }

/* The hero panel: the price card's navy top alone and taller, the chips and the date inside it. The DC
   chip and the CCS2 tag are navy themselves, so on the panel they carry a light hairline. */
.price-card--hero { border: 0; }
.price-card--hero .price-top { min-height: 272px; gap: var(--sp-2); padding: var(--sp-6); }
@media (min-width: 768px) { .price-card--hero .price-top { min-height: 316px; padding: var(--sp-8); } }
.price-card--hero .price-name { color: var(--on-band); font-size: var(--fs-h4); }
.price-card--hero .price-num { font-size: clamp(3.5rem, 1.9rem + 4.4vw, 6rem); letter-spacing: -.02em; }
.price-card--hero .price-unit { font-size: clamp(1.25rem, 1.05rem + .55vw, 1.5rem); }
.price-card--hero .price-value { gap: 10px; }
.price-card--hero .price-meta { margin: var(--sp-3) 0 0; padding: 0; border: 0; color: var(--on-band-subtle); }
.price-card--hero .price-valid { flex-basis: auto; }
.price-card--hero :is(.ptag--dc, .tag--dc) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.price-card--hero .price-mark { --mh: clamp(280px, 64cqw, 460px); top: calc(40% - var(--fy) * var(--mh)); }

/* What the price includes, once for both prices: icon and two or three words. */
ul.tf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: var(--sp-5); list-style: none; border-radius: var(--r-lg); background: var(--bg-alt); }
.tf-facts li { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1.3; }
.tf-fact-ico { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--ink); }
@media (min-width: 1024px) {
  ul.tf-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: var(--sp-4) 0; }
  .tf-facts li { justify-content: center; padding: 0 var(--sp-5); font-size: var(--fs-body); }
  .tf-facts li + li { border-left: 1px solid var(--line); }
}

/* Tool links: the whole card is the link (card--link). The title and the arrow in the left column, the
   picture in the right column, whole: the car on its floor shade, the small road with its two cars. */
.tf-tools { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .tf-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-tool {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-areas: "title art" "go art";
  grid-template-rows: 1fr auto;
  column-gap: var(--sp-3);
  min-height: 136px;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.tf-tool-title { grid-area: title; position: relative; z-index: 1; font-size: var(--fs-h4); line-height: 1.3; font-weight: var(--fw-bold); }
.tf-tool-go { grid-area: go; position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--secondary); color: var(--on-band); transition: transform var(--dur-2) var(--ease); }
.tf-tool:hover .tf-tool-go { transform: translateX(3px); }
.tf-tool-art { grid-area: art; position: relative; display: block; min-height: 96px; pointer-events: none; }
/* The car stands whole on a soft floor shade (DESIGN.md shadow vocabulary), headlight and plate kept. */
.tf-tool-photo, .tf-tool-drawing { position: absolute; right: 0; bottom: 6px; z-index: 1; width: min(100%, 260px); height: auto; }
.tf-tool--time .tf-tool-art::after { content: ""; position: absolute; right: 2%; bottom: 0; width: min(96%, 250px); height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--shadow-tint), .22), transparent); }
/* Savings: a small road straight on the card, two cars at their "100 ₺" distances (Epsis AC ahead,
   petrol behind). The dashes stop behind each car. */
.tf-mini { --w: 76px; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-2); }
.tf-mini-lane { position: relative; display: block; height: calc(var(--w) * .5); overflow: hidden; }
.tf-mini-lane::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--line-hover); }
.tf-mini-run { position: absolute; inset: 0; transform: translateX(calc((var(--k) - 1) * 100%)); }
.tf-mini-run::before { content: ""; position: absolute; left: 0; right: calc(var(--w) * .8); bottom: 2px; height: 3px; background: linear-gradient(90deg, var(--ink) 13px, transparent 13px) 0 0 / 18px 100% repeat-x; }
.tf-mini-lane--fuel .tf-mini-run::before { background-image: linear-gradient(90deg, var(--line-strong) 13px, transparent 13px); opacity: .7; }
.tf-mini-img { position: absolute; right: calc(var(--w) * -.125); bottom: 0; width: var(--w); height: auto; }
.tf-mini-lane--fuel .tf-mini-img { opacity: .75; }
/* In the third column (1280 px and up) the card stands taller: the title and the arrow on top, the
   picture across the card under them, the car scaled to the picture's height. */
@media (min-width: 1280px) {
  .tf-tool { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title go" "art art"; grid-template-rows: auto 1fr; row-gap: var(--sp-4); min-height: 0; }
  .tf-tool-go { align-self: start; }
  .tf-tool-art { min-height: 92px; }
  .tf-tool-photo, .tf-tool-drawing { top: 0; bottom: 6px; width: auto; height: calc(100% - 6px); max-width: 100%; object-fit: contain; object-position: right bottom; }
  .tf-mini { --w: 84px; }
}

/* ---------- Idle fee: the scene beside the timeline, then the calculator beside two receipts, one
   height for the three cards ---------- */
.idle-wrap { display: grid; gap: var(--grid-gap); }
.idle-story { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.idle-story-art { display: grid; place-items: center; padding: var(--sp-4) var(--sp-4) 0; background: var(--bg-tint); }
.idle-story-art .il { display: block; width: min(100%, 400px); height: auto; }
.idle-story-body { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); min-width: 0; padding: var(--sp-6) var(--sp-5); }
@media (min-width: 768px) { .idle-story-body { padding: var(--sp-8); } }
@media (min-width: 1024px) {
  .idle-story { grid-template-columns: minmax(300px, 30%) minmax(0, 1fr); }
  .idle-story-art { padding: var(--sp-6); }
  .idle-story-body { padding: var(--sp-10) var(--sp-10) var(--sp-8); }
}
@media (min-width: 1600px) { .idle-story { grid-template-columns: minmax(360px, 26%) minmax(0, 1fr); } }

/* The timeline: the home idle card's stepped meter at full width (logo bar rhythm 13 : 5). A start node,
   light steps while waiting is free, navy steps once each minute is billed, an end node for the cap.
   Phones read it downwards (the track on the left), wider screens across. */
.idle-line { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.idle-phase { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: 2px; padding-bottom: var(--sp-5); }
.idle-phase:last-child { padding-bottom: 0; }
.idle-seg { position: relative; grid-row: 1 / span 3; grid-column: 1; align-self: stretch; min-height: 40px; }
.idle-seg::after { content: ""; position: absolute; top: 0; bottom: calc(var(--sp-5) * -1); left: 17px; width: 6px; background: linear-gradient(180deg, var(--c, var(--line-hover)) 13px, transparent 13px) 0 0 / 100% 18px repeat-y; }
.idle-phase--start .idle-seg::after { top: 46px; }
.idle-phase--fee .idle-seg, .idle-phase--cap .idle-seg { --c: var(--ink); }
.idle-phase--cap .idle-seg::after { display: none; }
.idle-node { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--on-band); }
.idle-phase--start .idle-node { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.idle-phase-title { grid-column: 2; align-self: center; min-height: 40px; display: flex; align-items: center; color: var(--ink); font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.3; }
.idle-phase-text { grid-column: 2; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.idle-rates { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.idle-rates .idle-rate { display: inline-flex; color: var(--ink); font-weight: var(--fw-bold); }
@media (min-width: 768px) {
  .idle-line { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
  .idle-phase { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0; }
  .idle-seg { display: flex; align-items: center; height: 40px; margin-bottom: var(--sp-3); }
  .idle-seg::after { top: 17px; bottom: auto; left: 0; right: 0; width: auto; height: 6px; background: linear-gradient(90deg, var(--c, var(--line-hover)) 13px, transparent 13px) 0 0 / 18px 100% repeat-x; }
  .idle-phase--start .idle-seg::after { top: 17px; left: 46px; }
  .idle-phase--cap .idle-seg { justify-content: flex-end; }
  .idle-phase--cap .idle-seg::after { display: block; right: 46px; }
  .idle-phase-title { align-self: auto; min-height: 0; }
  .idle-phase > :not(.idle-seg) { padding-right: var(--sp-5); }
  .idle-phase--start > :not(.idle-seg) { padding-right: var(--sp-8); }
  .idle-phase--cap { align-items: flex-end; text-align: right; }
  .idle-phase--cap > :not(.idle-seg) { padding-right: 0; padding-left: var(--sp-5); }
}
/* Notes under the track, each with its icon in a soft square: where the time starts and how it is counted
   (DECISIONS 29.09.2026), and the night exemption as a label and a window over its sentence. */
ul.idle-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin: 0; padding: var(--sp-5) 0 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { ul.idle-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); } }
.idle-note { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.idle-note .idle-night { gap: var(--sp-3); }
.idle-note-text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.idle-note > .idle-note-text { padding-top: 2px; }

/* Tools: the calculator, then the two worked examples. From 1280 px side by side: the examples stack
   beside the calculator as two statements, share its height and end on its foot line. */
.idle-tools { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 1280px) { .idle-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1600px) { .idle-tools { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.idle-wrap--compact .idle-tools { grid-template-columns: minmax(0, 1fr); }

/* Calculator: the controls, then the estimate on a navy panel (like the price panels): the fee and its one
   line breakdown at the top, the minutes meter at the panel's foot. Side by side when the card is wide. */
.idle-calc { container: icalc / inline-size; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.idle-calc-in { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }
.idle-calc-main { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); }
.idle-calc-side { display: flex; flex-direction: column; padding: var(--sp-6) var(--sp-5); background: var(--band); color: var(--on-band-muted); }
@media (min-width: 768px) { .idle-calc-main, .idle-calc-side { padding: var(--sp-6); } }
@container icalc (min-width: 560px) { .idle-calc-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.idle-calc-title { font-size: var(--fs-h4); line-height: 1.33; }
.idle-calc-fields { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.idle-calc .fld-label { font-size: var(--fs-small); }
.fld-row { display: flex; align-items: center; gap: var(--sp-2); }
.fld-unit { color: var(--muted); font-weight: var(--fw-semibold); }
.idle-calc .segctl { background: var(--bg-tint); }
.idle-calc .segctl-opt input:checked + span { background: var(--secondary); color: var(--on-band); box-shadow: none; }
/* The time field in the site's own colours: the empty "--:--" muted (tariffs.js sets .is-empty), the
   browser's clock button replaced by the icon set's clock in the text colour. */
.idle-calc input[type="time"] { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.idle-calc input[type="time"].is-empty { color: var(--muted); }
.idle-calc input[type="time"]::-webkit-datetime-edit-text { padding: 0 2px; color: inherit; }
.idle-calc input[type="time"]::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  background: var(--ink);
  opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.idle-calc input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.idle-calc-out { display: flex; flex-direction: column; gap: var(--sp-3); }
.idle-calc-fee { display: flex; flex-direction: column; gap: var(--sp-1); color: var(--on-band-muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.idle-calc-fee b { color: var(--on-band); font-size: var(--fs-price); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.01em; }
.idle-calc-side > .idle-strip { margin-top: auto; padding-top: var(--sp-6); }
@container icalc (min-width: 560px) { .idle-calc-fee b { font-size: 4.5rem; } }
.idle-calc-detail { color: var(--on-band); font-size: var(--fs-small); line-height: 1.5; }

/* The minutes meter: the minutes after charging ends in the logo bar rhythm (13 : 5), each part as long
   as its minutes (whole bars only: the rhythm is rounded to the width); billed minutes dark, the free waiting
   time and the night minutes light, a post where the cap is reached. Between the two ends (clock times, or
   0 and the minutes). */
.idle-strip { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.idle-strip-at { flex: none; color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }
.idle-mm { position: relative; flex: 1; min-width: var(--sp-8); height: 6px; }
.idle-mm-bar { display: flex; height: 100%; background: var(--mm-free, var(--line-hover)); -webkit-mask: linear-gradient(90deg, #000 13px, transparent 13px) 0 0 / 18px 100% round; mask: linear-gradient(90deg, #000 13px, transparent 13px) 0 0 / 18px 100% round; }
.idle-mm-part { flex: var(--n) 1 0%; min-width: 0; }
.idle-mm-part.is-billed { background: var(--mm-billed, var(--ink)); }
.idle-mm-post { position: absolute; top: -5px; left: var(--at); width: 3px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--mm-billed, var(--ink)); }
.idle-calc-side .idle-strip { --mm-free: var(--on-band-line); --mm-billed: var(--on-band); }
.idle-calc-side .idle-strip-at { color: var(--on-band-muted); }

/* The two worked examples as bills on flat bordered cards. Phones: the title, the minutes meter between
   the end and the exit time, the lines (each with a small bar in its meter tone) with dotted leaders, the
   total on a hairline foot. From 640 px each is a statement: the title over the total on the left, the
   meter and the lines on the right of a hairline; the two are one height. */
.idle-examples { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
.idle-receipt { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "b" "s"; gap: var(--sp-5); padding: var(--sp-6) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.idle-example-title { grid-area: t; font-size: var(--fs-h4); line-height: 1.33; }
.idle-breakdown { grid-area: b; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; margin: 0; }
.idle-when { margin-bottom: var(--sp-3); }
.idle-when dd { margin: 0; }
.idle-row { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-small); }
.idle-row dt { display: flex; flex: 1; align-items: baseline; gap: var(--sp-2); min-width: 0; color: var(--ink-2); }
.idle-row dt::before { content: ""; flex: none; align-self: center; width: 13px; height: 6px; border-radius: 1px; background: var(--line-hover); }
.idle-row--billed dt::before { background: var(--ink); }
.idle-row--cap dt::before { width: 3px; height: 12px; margin-inline: 5px; background: var(--ink); }
.idle-row dt::after { content: ""; flex: 1; min-width: var(--sp-4); border-bottom: 1px dotted var(--line-strong); transform: translateY(-3px); }
.idle-row dd { margin: 0; color: var(--ink); font-weight: var(--fw-semibold); text-align: right; white-space: nowrap; }
.idle-sum { grid-area: s; margin: 0; }
.idle-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.idle-total dt { color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.idle-total dd { margin: 0; color: var(--ink); font-size: var(--fs-stat); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap; }
@media (min-width: 640px) {
  .idle-examples { grid-auto-rows: 1fr; }
  .idle-receipt { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "t b" "s b"; gap: var(--sp-4) 0; padding: var(--sp-5) var(--sp-6); }
  .idle-example-title { padding-right: var(--sp-6); }
  .idle-breakdown { justify-content: center; padding-left: var(--sp-6); border-left: 1px solid var(--line); }
  .idle-sum { align-self: end; padding-right: var(--sp-6); }
  .idle-total { flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding-top: 0; border-top: 0; }
  .idle-total dt { color: var(--muted); }
}

/* ---------- "100 ₺ ile Kaç km?": a road on navy. One lane per energy with the same drawn car, parked at
   its distance on a km axis, on a soft floor shade; the km in their own column, the names and figures on
   the road line. The cars drive in with the scroll: the lane's run is the whole track wide and moves by
   (--p x --k - 1) of itself (transform only), so at --p 1 (no motion, no JavaScript) every car stands at
   its distance. The dashes (logo bar rhythm) stop behind each car. The fuel lanes are the quieter
   context. ---------- */
.tf-road { --car-w: 96px; margin-top: var(--sp-2); }
@media (min-width: 768px) { .tf-road { --car-w: 132px; } }
@media (min-width: 1600px) { .tf-road { --car-w: 148px; } }
.tf-lanes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--on-band-line); }
.tf-lane { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name km" "way way"; align-items: center; column-gap: var(--sp-4); padding: var(--sp-3) 0 0; border-bottom: 1px solid var(--on-band-line); }
.tf-lane-name { grid-area: name; color: var(--on-band); font-weight: var(--fw-semibold); }
.tf-lane-km { grid-area: km; color: var(--on-band); font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; }
.tf-lane-km b { font-size: var(--fs-stat); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.01em; }
.tf-lane-way { grid-area: way; position: relative; display: block; height: calc(var(--car-w) * .5); overflow: hidden; }
.tf-lane-way::before { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--on-band-line); }
.tf-lane-run { position: absolute; inset: 0; transform: translate3d(calc((var(--p, 1) * var(--k) - 1) * 100%), 0, 0); }
.tf-lane-run::before { content: ""; position: absolute; left: 0; right: calc(var(--car-w) * .8); bottom: 4px; height: 4px; background: linear-gradient(90deg, var(--on-band) 13px, transparent 13px) 0 0 / 18px 100% repeat-x; }
.tf-lane-run::after { content: ""; position: absolute; right: calc(var(--car-w) * .08); bottom: 1px; width: calc(var(--car-w) * .8); height: 9px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .42), transparent); }
.tf-lane-run .il { position: absolute; z-index: 1; right: calc(var(--car-w) * -.125); bottom: 0; width: var(--car-w); height: auto; }
.tf-lane--fuel .tf-lane-name, .tf-lane--fuel .tf-lane-km { color: var(--on-band-subtle); }
.tf-lane--fuel .tf-lane-run::before { background-image: linear-gradient(90deg, var(--on-band-subtle) 13px, transparent 13px); opacity: .55; }
.tf-lane--fuel .tf-lane-run .il { opacity: .7; }
.tf-road-axis { display: none; }
@media (min-width: 768px) {
  .tf-lane { grid-template-columns: 9.5rem minmax(0, 1fr) 7.5rem; grid-template-areas: "name way km"; align-items: end; column-gap: var(--sp-6); padding: var(--sp-5) 0 0; }
  .tf-lane-name { line-height: 1; padding-bottom: 6px; }
  .tf-lane-km { justify-self: end; padding-bottom: 6px; }
  .tf-road-axis { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 7.5rem; column-gap: var(--sp-6); padding-top: var(--sp-2); }
  .tf-road-ticks { grid-column: 2; position: relative; display: block; height: 20px; }
  .tf-road-ticks span { position: absolute; left: calc(var(--k) * 100%); transform: translateX(-50%); color: var(--on-band-subtle); font-size: var(--fs-micro); font-variant-numeric: tabular-nums lining-nums; }
  .tf-road-ticks span:first-child { transform: none; }
}
@media (min-width: 1600px) { .tf-lane, .tf-road-axis { grid-template-columns: 11rem minmax(0, 1fr) 9rem; } }
.tf-road-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4) var(--sp-10); margin-top: var(--sp-8); }
.tf-road-sec .index-note { max-width: 78ch; color: var(--on-band-subtle); font-size: var(--fs-micro); line-height: 1.6; }
.tf-road-more { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3) var(--sp-8); font-size: var(--fs-small); }
.tf-road-sec .index-table summary { color: var(--on-band); }
.tf-road-sec .index-table table { min-width: min(100%, 420px); }
.tf-road-sec .index-table :is(th, td) { border-bottom-color: var(--on-band-line); color: var(--on-band-muted); }
.tf-road-sec .index-table thead th { color: var(--on-band-subtle); }
.tf-road-sec .index-table td { color: var(--on-band); }
/* The table disclosure with the icon set's chevron instead of the browser's marker (also in the
   "100 ₺ ile kaç km?" card of the tariffs.km-index block). */
.index-table summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.index-table summary::-webkit-details-marker { display: none; }
.index-table-chev { transition: transform var(--dur-2) var(--ease); }
.index-table[open] .index-table-chev { transform: rotate(180deg); }

/* ---------- AC or DC: two cards, the plug and the vehicle inlet on a light stage (plug drawings are for
   light grounds), sized by the stage's width; the class in the heading, one line, the facts only this card
   has as chips. From 1280 px each card sets the stage beside its text; the text starts at the top and the
   chips stack, so both headings stay on one line across the pair whatever wraps. ---------- */
.tf-acdc-cols { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .tf-acdc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-kind { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
@media (min-width: 1280px) { .tf-kind { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.tf-kind-stage { container: tstage / inline-size; display: flex; align-items: center; justify-content: center; gap: 2cqw; padding: var(--sp-5) var(--sp-4); background: var(--bg-tint); }
.tf-kind-stage .il { display: block; width: min(46cqw, 280px); height: auto; }
.tf-kind-body { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-3); min-width: 0; padding: var(--sp-6) var(--sp-5); }
@media (min-width: 768px) { .tf-kind-body { padding: var(--sp-8); } }
.tf-kind-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-h3); }
.tf-kind-use { color: var(--ink-2); }
.tf-kind-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 0; padding: 0; list-style: none; }
@media (min-width: 1280px) { .tf-kind-chips { flex-direction: column; align-items: flex-start; } }
.tf-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: var(--fs-micro); font-weight: var(--fw-semibold); white-space: nowrap; }
.tf-chip .i { flex: none; }

/* ---------- Payment: one calm band. The heading alone on the left, the accepted cards as a tidy
   grayscale strip on the right (logo tiles; brand names without a logo as one line text tiles in the same
   frame; the column count follows the strip's width, page.js writes the count that leaves no lone tile),
   how the card is charged as a quiet line under the strip. ---------- */
.tf-pay-sec { padding-block: clamp(48px, 1.5rem + 3vw, 88px); }
.tf-pay { display: grid; gap: var(--sp-6) var(--grid-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .tf-pay { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } }
.tf-pay-title { line-height: 1; }
.tf-pay-logos { container: tf-pay / inline-size; min-width: 0; }
.tf-pay-list { --pc: var(--pc-s, 3); display: grid; grid-template-columns: repeat(var(--pc), minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
@container tf-pay (min-width: 440px) { .tf-pay-list { --pc: var(--pc-m, 4); } }
@container tf-pay (min-width: 640px) { .tf-pay-list { --pc: var(--pc-l, 6); } }
@container tf-pay (min-width: 1240px) { .tf-pay-list { --pc: var(--pc-xl, 8); } }
.tf-pay-tile { display: flex; align-items: center; justify-content: center; min-width: 0; height: 64px; border-radius: var(--r-md); background: var(--surface); text-align: center; }
.tf-pay-tile img { flex: none; width: var(--lw, 70%); height: var(--lh, 50%); max-width: 70%; max-height: 50%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.tf-pay-tile:hover img { filter: none; opacity: 1; }
.tf-pay-tile--text { padding: 0 var(--sp-2); }
/* Muted like the grayscale logos beside it, so a name reads as one more mark and not as a gap. */
.tf-pay-brand { max-width: 100%; color: var(--muted); font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.2; transition: color var(--dur-2) var(--ease); }
.tf-pay-tile--text:hover .tf-pay-brand { color: var(--ink); }
.tf-pay-note { max-width: none; margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }

/* ---------- Notes: the tariff notes as fine print over the full width at the end of the page, in up to
   three columns. Past prices are not shown publicly and no photo credit is printed here (owner,
   30.09.2026). ---------- */
.tf-small-title { margin-bottom: var(--sp-5); font-size: var(--fs-h3); line-height: var(--lh-h3); font-stretch: var(--stretch-text); letter-spacing: 0; }
ul.tf-info-list { margin: 0; padding: 0; list-style: none; columns: 3 300px; column-gap: var(--sp-10); color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.tf-info-list li { break-inside: avoid; margin-bottom: var(--sp-3); }