/* Page content styles for all 26 pages, landings included.

   The shared header, footer, buttons and every design token live in
   chrome.css, which each page loads first. Nothing in this file may introduce
   a raw font size, spacing step or radius: tools/verify-layout.mjs resolves
   the tokens declared in chrome.css and fails on anything outside them.

   The two landings used to be built with the Tailwind CDN — a browser-side
   compiler the Tailwind team ships for prototyping only — while the other 24
   pages used hand-written CSS. That split produced two parallel design
   systems on one site. The landings now use the components below, several of
   which already existed here from an earlier hand-written landing and had
   been left as dead rules when the CDN went in. */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

/* User-agent margins on headings and lists are em-based, which is how the
   audit found spacing values like 19.92px and 13.76px in a system whose grid
   is 4px. Zero them, then put the rhythm back in tokens below. */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre) { margin: 0; }

::selection { background: var(--cactus-tint); color: var(--ink); }

/* `em` padding on inline code compounded off every context it appeared in and
   produced four different font sizes from one rule. */
code {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  background: var(--sand);
  padding: 0 var(--s-1);
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------- prose rhythm - */
/* The legal pages are bare <h2> and <p> inside main, with no wrapper class,
   so this keys to elements at zero specificity via :where(): any component
   class below overrides it without needing !important or a longer selector. */
main :where(h2) { margin-top: var(--s-10); margin-bottom: var(--s-3); }
main :where(h3) { margin-top: var(--s-6); margin-bottom: var(--s-2); }
main :where(p) { margin-top: var(--s-4); }
main :where(ul, ol) { margin-top: var(--s-4); padding-left: var(--s-5); }
main :where(li + li) { margin-top: var(--s-2); }
main :where(p, li) { color: var(--muted); }
main :where(strong) { color: var(--ink); font-weight: 600; }
main :where(p) a { color: var(--cactus); text-decoration: underline; text-underline-offset: 2px; }

/* A 1120px container holds about 150 characters of 16px text on a line, which
   is roughly twice a comfortable measure. Legal and reference pages opt into
   a reading column; the data pages keep the full width for tables. */
.prose { max-width: var(--measure); }
.measure { max-width: var(--measure); }

/* ------------------------------------------------------------- page head -

   The standing head above a page title. It used to be `text-transform:
   uppercase` in --cactus with 0.06em of tracking, which is the same object as
   the four `NASIL ÇALIŞIR` labels that were removed from the landing — the
   only difference being that here there is one per page rather than one per
   section. It is now the serif at caption size in sentence case, which is how
   a magazine sets a standing head, and it costs the page no colour.

   Losing the uppercase also loses a hazard: CSS-uppercasing Turkish depends on
   the browser honouring `lang="tr"` for i → İ, and a label that renders
   "NASIL" in one browser and "NASIL" with a dotless I in another is not
   something anybody was going to notice in review. */
.kicker {
  margin: 0 0 var(--s-3);
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: var(--t-caption);
  font-weight: 500;
}
/* Headings are the grotesk, at a width. Turkish headline setting is condensed
   sans — every newspaper on every pavement in Istanbul — and Archivo has the
   axis for it, so the heading is narrowed by the typeface rather than by
   tracking a normal-width face until the counters close up. The serif's job
   starts one level down, at .lede and .deck. */
h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
/* The lede was capped at 38rem — 608px — so on a 1440px screen the Track
   intro broke after little over half the container and left a short orphan
   line under a 68px heading, with 500px of empty paper beside it. Two things
   were wrong: the measure was set in rem, which does not track the font, and
   the heading above it was a display size on a data page. --measure is in
   `ch`, so one token gives 653px of 16px prose and 734px of 18px lede, both
   inside the comfortable 45–75 character band. */
/* The standfirst on all 26 pages, and the first place the serif speaks. A
   deck under a grotesk headline is the oldest arrangement in the trade and it
   is doing real work here: it marks the sentence under the title as something
   to read rather than as more interface. */
.lede {
  max-width: var(--measure);
  margin: var(--s-4) 0 0;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.6;
  text-wrap: pretty;
}
/* The landing's deck. Same face and same job as .lede, one step up the scale,
   because on the landing it is carrying the whole proposition. */
.deck {
  margin: 0;
  max-width: 44ch;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.4;
  text-wrap: pretty;
}
.note {
  margin: var(--s-3) 0 0;
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--t-caption);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
/* Long unbroken strings — a pasted URL, a German-length product name — must
   not push a column wider than its container. The browser-chrome row is
   deliberately not in this list: its URL truncates with an ellipsis and its
   price must stay whole, so allowing a break there is what made the demo
   card wrap at 390px. */
.hero-copy,
h1,
.lede,
.note,
.insight {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Why a watch has no recent price. Only the state the shopper has to act on is
   given weight: a watch that addresses no page stays broken until they replace
   it, so it carries --wait (6.5:1, already measured). The rest are ours to fix
   and read as --muted like any other note, because colouring an outage the same
   as a broken row is how a shopper comes to delete a watch that was going to
   start working again by itself. */
.watch-readable-unreadable {
  color: var(--wait);
  background: var(--wait-tint);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2, 6px);
}
.watch-readable-source-paused,
.watch-readable-unread,
.watch-readable-pending {
  color: var(--muted);
}

/* -------------------------------------------------------------- sections - */
.section { padding: var(--s-16) 0; }
.section h2,
.section-head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.14;
}
.section > h2 { margin-bottom: var(--s-6); }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-12) 0 var(--s-4);
}
.stack { display: grid; gap: var(--s-3); }
/* The sixteen `style="margin-top: 28px"` attributes these replace were the
   only reason 28px existed on the site. An inline style cannot be audited,
   overridden by a media query, or found by the token check. */
.stack-gap { margin-top: var(--s-8); }
/* Two sections that read as one block: the first keeps its heading close to
   the second's content instead of a full section gap between them. */
.section-joined { padding-bottom: var(--s-3); }
.section-continues { padding-top: var(--s-3); }

/* ----------------------------------------------------------------- cards - */
.split { display: grid; gap: var(--s-5); }
.card {
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-lg);
  font-weight: 600;
}
.card p { margin: 0; color: var(--muted); }
.card > * + .actions { margin-top: var(--s-4); }

.tools { display: grid; gap: var(--s-3); }
.tool {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
a.tool:hover { border-color: var(--control-line); box-shadow: var(--shadow-md); }
.tool.soon-card { opacity: 0.72; }
.tool h3 { margin: 0; font-size: var(--t-body); font-weight: 600; }
.tool p { margin: 0; color: var(--muted); font-size: var(--t-sm); }

.benefits { margin: 0; padding: 0; list-style: none; }
.benefits li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: var(--s-3);
  align-items: start;
  margin: 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
.benefits li:first-child { border-top: 0; }
.benefits .mark { color: var(--cactus); font-weight: 700; }

details.testers {
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
details.testers summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details.testers ol { margin: var(--s-3) 0 0; padding-left: var(--s-5); color: var(--muted); }

/* ---------------------------------------------------------------- badges - */
.soon,
.live {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--muted);
  font-size: var(--t-nano);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.live {
  border-color: var(--cactus);
  background: var(--cactus-tint);
  color: var(--cactus);
}

/* ==========================================================================
   THE PRICE TABLE — the surface a shopper opens every day, and the closest
   thing here to Keepa's core screen.

   It reads in this order, which is the order a shopper cares about:
     1. what is it            product title, --ink, the only medium weight
     2. what does it cost     price, --ink, 600, right-aligned, tabular
     3. where and when        marketplace, timestamp, --muted and quiet
   Numbers are right-aligned and tabular so a column of prices can be scanned
   vertically — the decimal points line up and the eye compares magnitudes
   instead of re-reading each row. Left-aligned proportional figures in a
   price column are the single clearest tell of an unfinished data product.

   The wrapper is a card, not a bare overflow box. Ten columns of data sitting
   directly on the page background had nothing to say where the dataset began
   or ended.
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
/* Scrolling a table sideways is only discoverable if the region can be reached,
   so tableScroll() makes the wrapper focusable — which needs a visible ring. */
.table-wrap:focus-visible { outline: 2px solid var(--cactus); outline-offset: 2px; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  /* every figure in every table, so nothing has to opt in and be forgotten */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--s-3) var(--s-4);
  background: var(--sand);
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--muted);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color 0.12s var(--ease); }
.table tbody tr:hover { background: var(--sand); }

/* the product is the row's subject: the one thing in --ink */
.table .cell-title {
  color: var(--ink);
  font-weight: 500;
  min-width: 200px;
}
.table .cell-title a { color: inherit; text-decoration: none; }
.table .cell-title a:hover { color: var(--cactus); text-decoration: underline; text-underline-offset: 2px; }

/* money and counts: right-aligned so the column is comparable at a glance */
.table .num {
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
}
.table th.num { text-align: right; color: var(--muted); font-weight: 600; }
/* a superseded price sits under the current one, quiet and struck through */
.table .num .empty {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: var(--t-micro);
}
/* An action at the end of a row is a control, not prose: 18px of text in a
   67px row is an 18px target. The row already has the height, so the link
   claims it and the negative inline margin keeps the column edge where it
   was. Links inside a sentence are left alone — WCAG exempts those, and
   padding a word in a paragraph wrecks the line it sits on. */
.table td:last-child > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-1);
  margin-inline: calc(var(--s-1) * -1);
}

/* timestamps are reference, not headline */
.table .when { color: var(--muted); font-size: var(--t-micro); white-space: nowrap; }
.table a:not(.cell-title a) { color: var(--cactus); }
.table code { background: none; padding: 0; color: var(--muted); font-size: var(--t-micro); }
.empty { color: var(--muted); }

/* An empty table container is a designed moment, not a missing table. It is
   the first thing a signed-out shopper sees on Track, and .table-wrap dressed
   as a card around a single line of text reads as a disabled input: a solid
   1px border, 40px tall, text against the left edge. Centring it, letting it
   breathe and dashing the border says "nothing here yet" instead. */
.table-wrap:has(> .empty) {
  padding: var(--s-10) var(--s-6);
  border-style: dashed;
  box-shadow: none;
  text-align: center;
}
.table-wrap > .empty {
  margin: 0 auto;
  max-width: 46ch;
  font-size: var(--t-body);
}
/* The call to action is the point of the panel, so it stops being a word at
   the end of a sentence and becomes the thing under it you press. */
.table-wrap > .empty a {
  display: block;
  width: fit-content;
  margin: var(--s-4) auto 0;
  padding: 0 var(--s-4);
  min-height: 44px;
  line-height: 44px;
  border-radius: var(--r-sm);
  background: var(--cactus);
  color: var(--on-cactus);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.table-wrap > .empty a:hover { background: var(--cactus-deep); }

/* a price fell — the whole proposition of the product, so it gets the colour */
.drop {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-full);
  background: var(--cactus-tint);
  color: var(--buy);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.drop.up { background: var(--wait-tint); color: var(--wait); }

/* Ten data columns squeezed into a 1120px container gave the product title
   about 200px, so every title wrapped to four or five lines and each row stood
   90px tall — a list of twenty products became a page of scrolling. Give the
   columns the width they need and let the scroll region do its job, then clamp
   the title to two lines so a row height is predictable either way. */
.table-products { min-width: 1080px; }
.table .clamp-2,
.table-deals td:nth-child(1) strong,
.table-bestsellers td:nth-child(2) strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: inherit;
}

/* --------------------------------------------------------------------------
   Which column is a number, a title or a timestamp is a property of the table,
   so it is declared here rather than by threading a class through every
   renderer and every translated column array. Each table carries one modifier
   class and the roles are mapped by position below.
   -------------------------------------------------------------------------- */
.table-products td:nth-child(1),
.table-alerts td:nth-child(2),
.table-watches td:nth-child(1),
.table-deals td:nth-child(1),
.table-bestsellers td:nth-child(2),
.table-seller-products td:nth-child(1) {
  color: var(--ink);
  font-weight: 500;
  min-width: 200px;
}
.table-products td:nth-child(1) a,
.table-alerts td:nth-child(2) a,
.table-watches td:nth-child(1) a,
.table-deals td:nth-child(1) a,
.table-bestsellers td:nth-child(2) a,
.table-seller-products td:nth-child(1) a {
  color: inherit;
  text-decoration: none;
}
.table-products td:nth-child(1) a:hover,
.table-watches td:nth-child(1) a:hover,
.table-seller-products td:nth-child(1) a:hover {
  color: var(--cactus);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* money and counts, right-aligned so a column can be compared vertically */
.table-products :is(th, td):nth-child(4),
.table-history :is(th, td):nth-child(2),
.table-buybox :is(th, td):nth-child(3),
.table-alerts :is(th, td):nth-child(3),
.table-watches :is(th, td):nth-child(4),
.table-deals :is(th, td):nth-child(2),
.table-deals :is(th, td):nth-child(3),
.table-deals :is(th, td):nth-child(4),
.table-bestsellers :is(th, td):nth-child(1),
.table-bestsellers :is(th, td):nth-child(3),
.table-seller-products :is(th, td):nth-child(2) {
  text-align: right;
  white-space: nowrap;
}
.table-products td:nth-child(4),
.table-history td:nth-child(2),
.table-buybox td:nth-child(3),
.table-alerts td:nth-child(3),
.table-watches td:nth-child(4),
.table-deals td:nth-child(3),
.table-bestsellers td:nth-child(3),
.table-seller-products td:nth-child(2) {
  color: var(--ink);
  font-weight: 600;
}
/* the superseded price on Deals is reference, and reads as struck-through */
.table-deals td:nth-child(2) {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* the size of the drop is the entire proposition of the Deals page */
.table-deals td:nth-child(4) { color: var(--buy); font-weight: 600; }
/* a rank is an index, not a measurement: quiet and narrow */
.table-bestsellers :is(th, td):nth-child(1) { width: 1%; color: var(--muted); font-variant-numeric: tabular-nums; }

/* timestamps are reference, not headline */
.table-products td:nth-child(6),
.table-products td:nth-child(10),
.table-history td:nth-child(1),
.table-buybox td:nth-child(1),
.table-alerts td:nth-child(1),
.table-deals td:nth-child(6),
.table-seller-products td:nth-child(3) {
  color: var(--muted);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.buybox-panel { margin-top: var(--s-8); }

/* ----------------------------------------------------------------- pager - */
.pager {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-4);
}
.pager .btn { color: var(--ink); }
.pager .btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ----------------------------------------------------------------- forms - */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-end;
  margin-bottom: var(--s-5);
}
.field {
  display: grid;
  gap: var(--s-1);
  min-width: 140px;
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: 600;
}
.field.grow { flex: 1 1 220px; }
.field-row {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.field input,
.field select,
.watch-form input {
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--control-line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 400;
}
.field select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field input::placeholder,
.watch-form input::placeholder { color: var(--muted); opacity: 0.75; }
.field input:hover,
.field select:hover,
.watch-form input:hover { border-color: var(--ink); }

.watch-form {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-10) 0 0;
  padding: var(--s-5);
  max-width: 36rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.watch-form h2 { margin: 0; font-family: var(--font-serif); font-size: var(--t-lg); font-weight: 600; }
.watch-form .note { margin: 0; }
.watch-form label {
  display: grid;
  gap: var(--s-1);
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: 600;
}
.watch-form .btn { justify-self: start; }

.auth-card {
  margin: var(--s-10) 0 0;
  padding: var(--s-5);
  max-width: 36rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.auth-card .watch-form {
  margin: 0;
  padding: 0;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* `.watch-form { display: grid }` would otherwise override the hidden
   attribute (0-1-0 vs the UA rule), stacking both reset forms in one card. */
.watch-form[hidden],
.auth-card [hidden],
.btn[hidden],
button.btn[hidden] {
  display: none;
}
.password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: stretch;
}
.password-field .password-toggle {
  justify-self: stretch;
  min-width: 5.5rem;
}
.watch-form .hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: 400;
}
.watch-form .field-error,
.field .field-error,
#seller-form .field-error {
  margin: 0;
  color: var(--wait);
  font-size: var(--t-caption);
  font-weight: 400;
}
.watch-form input[aria-invalid='true'],
.field input[aria-invalid='true'],
#seller-form input[aria-invalid='true'] {
  border-color: var(--wait);
}
.auth-back {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
}
.auth-back a {
  color: var(--cactus);
}
.reset-alert {
  margin: 0 0 var(--s-4);
}
.auth-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.auth-tabs .btn[aria-selected="true"] {
  background: var(--cactus);
  border-color: var(--cactus);
  color: var(--on-cactus);
}
button.linkish {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cactus);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}


.switcher,
.history-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.history-ranges { margin: var(--s-3) 0; }
.switcher .btn[aria-pressed="true"],
.history-ranges .btn[aria-pressed="true"] {
  background: var(--cactus);
  border-color: var(--cactus);
  color: var(--on-cactus);
}

/* ------------------------------------------------------- data highlights - */
.metrics {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.metric {
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.metric dt {
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.metric dd {
  margin: var(--s-2) 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-stat);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* A formatted timestamp is far wider than a count and overflowed the card on a
   phone at the display size. It is a phrase, not a number, so it drops to the
   sans at heading size rather than being a 30px serif date. */
.metric dd.metric-when {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

.facts {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0;
}
.facts dt {
  color: var(--muted);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.facts dd {
  margin: var(--s-1) 0 0;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.facts .low { color: var(--buy); }
.facts .high { color: var(--wait); }

/* ------------------------------------------------------ history + chart - */
.history-panel {
  margin-top: var(--s-8);
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.history-panel h3 { margin: 0 0 var(--s-2); font-family: var(--font-serif); font-size: var(--t-lg); font-weight: 600; }
.history-marks { margin: 0 0 var(--s-3); color: var(--muted); font-size: var(--t-caption); }
.price-chart { margin: var(--s-2) 0 var(--s-3); }
.price-chart-svg { display: block; width: 100%; height: auto; max-height: 220px; }
/* The chart used five colours that appear nowhere else on the site — a teal
   grid, a slate label, a rust marker. It now draws from the palette. */
.price-chart-line { stroke: var(--cactus); stroke-width: 2; fill: none; stroke-linejoin: round; }
.price-chart-area { fill: var(--cactus); opacity: 0.07; stroke: none; }
.price-chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.price-chart-now { fill: var(--gold); stroke: var(--cactus-deep); stroke-width: 1.5; }
.price-chart-label {
  fill: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--t-nano);
  font-variant-numeric: tabular-nums;
}
.price-chart-buybox-marker { fill: var(--wait); stroke: var(--card); stroke-width: 1; }
.price-chart-markers .price-chart-buybox-marker:hover { fill: var(--gold); }

/* ---------------------------------------------------------------- states - */
/* Empty, loading and error are designed moments. Showing the same em dash for
   all three left people unable to tell broken from slow. */
.empty-state,
.error-state {
  padding: var(--s-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
}
.empty-state h2,
.empty-state h3,
.error-state h2,
.error-state h3 {
  margin: 0 0 var(--s-2);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  font-weight: 600;
}
.empty-state p,
.error-state p { margin: 0 0 var(--s-3); max-width: var(--measure); }
.empty-state p:last-child,
.error-state p:last-child { margin-bottom: 0; }
.empty-state .btn { margin-top: var(--s-1); }
.error-state { border-color: var(--wait); background: var(--wait-tint); }
.error-state h2,
.error-state h3 { color: var(--wait); }

/* ------------------------------------------------------------ categories - */
.category-tree,
.category-children { margin: 0; padding: 0; list-style: none; }
.category-children { margin-left: var(--s-5); }
.category-node { margin: 0; padding: var(--s-2) 0; }
.category-node[data-root] {
  font-weight: 600;
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
}
.category-node[data-root] .category-node { font-weight: 400; border: 0; padding-top: var(--s-2); margin-top: 0; }

/* ------------------------------------------------------------------ code - */
.code {
  margin: 0;
  padding: var(--s-5);
  overflow: auto;
  background: var(--ink);
  border-radius: var(--r-md);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  line-height: 1.55;
}
.code code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ==========================================================================
   THE LANDING PAGES.

   WHAT THIS REPLACED, AND WHY

   The two landings were assembled from nine components that appear together
   on every generated startup page of the last two years: a pill badge over
   the headline, a fake macOS window with three traffic-light dots around an
   invented chart, a filled CTA beside a ghost CTA, a four-column strip of
   one-word value props, `01 / 02 / 03` in three equal rounded boxes with
   hairline borders, an all-caps micro-label over every section, cream plus
   exactly one green, everything in one centred column with the same gap
   between every band, and a geometric sans throughout.

   None of them are here now. What carries the page instead is a twelve-column
   grid, a scale that runs from 12px to 104px, rules of two weights, and — the
   thing the rest of it exists to frame — fourteen prices out of our own
   catalogue with the hour each one was read printed beside it.

   RULES INSTEAD OF BOXES

   Three weights, and the weight is the meaning:
     2px --ink    a section begins here. The heaviest thing on the page.
     1px --line   one row of a list, one item of a definition.
     none         everything else.
   There is no filled panel and no rounded panel anywhere below the masthead.
   A box says "these things are together" and says it four times in a row
   until it means nothing.

   The board is the one exception and is not a panel: it is an instrument
   inset into the page, on its own ground, with square corners. It earns the
   exception by being the only object here that carries evidence rather than
   claims.

   THE GRID

   `repeat(12, 1fr)` on the existing 1120px container. Nothing spans all
   twelve except the dateline rule at the very top. Below 1024px every one of
   these collapses to a single column, because an asymmetric grid on a 390px
   phone is just a narrow column with opinions.

   TURKISH TYPOGRAPHY

   No `text-transform: uppercase` survives on these pages. CSS case mapping is
   locale-aware and does get `i` → `İ` right when `lang` is set, but it is one
   missing attribute away from printing TÜRKIYE at a Turkish shopper, and none
   of those labels were carrying information. Figures are tabular throughout:
   a price column whose decimal separators do not line up is the detail that
   makes a price site look unfinished.

   WHAT ORDER THE PAGE IS IN, AND WHY IT IS NOT THE OBVIOUS ONE

   Masthead, then the board, then the explanation. The standfirst that used to
   sit under the headline is now the `.beyan` sentence *below* the board.

   This is the one place the combined page disagrees with both of the designs
   it came from, and it was settled by measurement rather than taste. At 390px
   a three-sentence deck above the board costs about 140px, and the board's
   own opening — the note that dates the prices — costs another hundred. With
   the deck above, the first price row starts below the fold on a 390px phone,
   which is precisely the failure the density brief names. With it below, the
   first two rows are on the first screen.

   It is also the better reading. The headline is an imperative, the board is
   the evidence for it, and the deck explains what you have just been shown.
   Akakçe does not print a paragraph before its prices either.
   ========================================================================== */
:root {
  /* Type for the board. Three names, here rather than in chrome.css because
     nothing outside the two landings sets numbers this large;
     tools/verify-layout.mjs picks up any `:root` block and admits these to
     the allowlist it enforces on all 26 pages. */
  --t-board-scale: clamp(26px, 3vw, 40px);
  --t-board-gap: clamp(25px, 2.6vw, 36px);
  --t-board-price: clamp(17px, 1.4vw, 21px);

  /* The board has its own ground, and that is the point: the page is paper,
     the board is an instrument inset into it. Every pairing below is measured
     against --board-ground by tools/verify-landing-a11y.mjs, on the painted
     colour rather than on the token. */
  --board-ground: #14120e;
  --board-rule: #38321f;
  --board-ink: #f6f1e8; /* 16.4:1  AAA */
  --board-muted: #b4a992; /*  8.4:1  AAA */
  --board-cheap: #7fdba6; /* 11.4:1  the cheaper of the two */
  --board-dear: #f0a882; /*  8.9:1  the dearer of the two */
  --board-figure: #f4c95d; /* 12.1:1  the gap itself */
}

/* ---- the masthead -----------------------------------------------------

   One 2px rule across all twelve columns with the four marketplaces set along
   it, then the headline across nine, then the one thing to press. The top
   right of the grid is left empty, which is the one thing a template will
   never do. */
.manset {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-6);
  row-gap: var(--s-4);
  padding: var(--s-10) 0 var(--s-10);
}
/* A dateline, not a badge. The pill it replaced said "TÜRKİYE İÇİN FİYAT
   ASİSTANI" — a claim in a capsule, which is the shape an advertisement
   takes. This is the four shops Kelly actually reads, set small on the rule
   that opens the page, which is where a newspaper puts its places. */
.manset-hat {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--s-2);
  border-top: 2px solid var(--ink);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.manset-baslik {
  grid-column: 1 / span 9;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-display);
  /* 800 at 88% width. "Pahalıya alma." is an imperative and it is the best
     thing on the page, so it is set the way a front page sets the only
     sentence that matters: heavy, narrow, and tight enough that the two words
     read as one object. -0.04em is as far as Archivo's spacing will go at
     this weight before the `l` and the `m` touch. Tighter than this also
     starts closing the gap between the dot of İ and the cap above it, which
     is the first thing that goes wrong when a display face meets Turkish. */
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-wrap: balance;
}
.manset-spot { grid-column: 1 / span 6; margin-top: var(--s-6); }
/* One CTA. The ghost button beside it is gone: two buttons of equal size side
   by side is a page asking the visitor to make its decision for it, and the
   thing the second one opened — a modal with a second invented chart — was
   the least true object on the site. */
.manset-eylem { margin: 0; }
/* The conditions run as separate flex items rather than one string of text
   with literal middots, so that a narrow measure breaks it between conditions
   instead of inside one. At 390px the run is 349px wide in a 350px measure —
   under a metric-matched fallback that is 0.4% wide it wrapped, and unwrapped
   again when the real face arrived, which was the whole of the page's layout
   shift. Breaking at item boundaries leaves every line ~130px of slack. */
.manset-kosul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  margin: var(--s-3) 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
}
/* The separator hangs off the end of the condition before it, not the start of
   the one after, so that a wrap leaves it at the end of a line the way a
   continued line reads — and so that it is not inside the underline of the
   link, which is where the first attempt put it. */
.manset-kosul > *:not(:last-child)::after {
  content: '·';
  margin-inline-start: var(--s-2);
  color: var(--muted);
}
.manset-kosul a { color: var(--cactus); text-decoration: underline; text-underline-offset: 2px; }

/* ---- the board ---------------------------------------------------------

   Everything between the `board:start` / `board:end` markers is generated by
   tools/build-price-board.mjs from the live API and re-generated in the
   browser by price-board.js; both call the same `boardMarkup()`. So the
   selectors below have exactly one shape to style, and the live swap cannot
   reflow the page into a different one.

   No radius anywhere in here. A departures board has square corners, and
   rounding it would put back the one thing the boxes it replaced had. */
.pano {
  padding-bottom: var(--s-16);
}
.pano-head {
  margin: 0 0 var(--s-5);
  padding-top: var(--s-5);
  border-top: 2px solid var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.14;
}
.pano-head em { font-style: normal; color: var(--cactus); }

.price-board {
  padding: var(--s-6);
  background: var(--board-ground);
  color: var(--board-ink);
}
/* The prose defaults in this file colour every `p` and `li` inside main; the
   board sets its own two greys and must win without needing !important. */
.price-board :is(p, li, dt, dd) { color: inherit; }
/* --cactus on near-black is a 1.3:1 outline, which is to say no outline at
   all. The focus work already landed and this keeps it visible on the one
   dark surface on the site. */
.price-board :focus-visible { outline-color: var(--board-figure); }

/* The line that says how old these numbers are. It is never absent and never
   the same sentence twice: `snapshot` when it came out of the build, `live`
   when the browser re-read it, `stale` when the browser tried and failed.

   The min-height is load-bearing rather than cosmetic. The three sentences
   are different lengths, so without a floor the swap from one to another
   would reflow the table underneath it — which is the "every click changes
   the layout" complaint, produced by the very mechanism meant to prove the
   page is honest.

   The reserve is the longest of the three at that width, measured rather than
   guessed. It began at three lines below 768px, because the snapshot note ran
   to three and the live note to one, which reserved two lines of white space
   above the first price on the screen with the least of it to spare. The
   sentences were evened up instead — every state says two things now, the
   second the same promise in all three — so the tallest of the three is two
   lines at 390px and one line above 1024px, and the reserve is that. Reserving
   one line, which is what this used to do at 768px, cost 21px of movement on
   every refresh; the figures are in tools/shoot-landing.mjs. */
.pb-state {
  margin: 0 0 var(--s-5);
  min-height: 3.2em;
  color: var(--board-muted);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: 1.6;
}
[data-board-state='stale'] .pb-state { color: var(--board-dear); }

.pb-wrap { min-width: 0; }
.pb-table {
  width: 100%;
  border-collapse: collapse;
  /* Fixed, so the columns are decided by the header and not by whichever
     product title happens to be longest in today's data. The live swap then
     cannot move a column edge. */
  table-layout: fixed;
}
.pb-table th {
  padding: 0 var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--board-rule);
  color: var(--board-muted);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  text-align: left;
}
.pb-table td {
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--board-rule);
  vertical-align: top;
}
.pb-table tbody tr:last-child td { border-bottom: 0; }
.pb-table :is(th, td):first-child { padding-left: 0; }
.pb-table :is(th, td):last-child { padding-right: 0; }
.pb-c-product { width: 38%; }
.pb-c-cheap,
.pb-c-dear { width: 20%; }
.pb-c-gap { width: 22%; text-align: right; }

/* Two lines is enough to tell a Roborock S8 Pro from an S8 Pro Ultra. The
   rest of a marketplace title is keyword stuffing, and left to run it would
   be the thing setting the row heights instead of the data. */
.pb-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.pb-venue {
  display: block;
  color: var(--board-muted);
  font-family: var(--font-sans);
  font-size: var(--t-nano);
}
a.pb-venue { text-decoration: underline; text-underline-offset: 2px; }
a.pb-venue:hover { color: var(--board-ink); }
/* Every figure on the board is Literata on true tabular numerals. It is the
   reason the serif is Literata rather than Fraunces: a column of prices has
   to align on the decimal, and Fraunces ships no `tnum` at all. The lira sign
   is drawn by the face rather than substituted — proved per character in
   tools/verify-font.mjs. */
.pb-price,
.pb-gap,
.pb-scale dd,
.pb-fig dd {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* The read-at stamps and the percentages stack in columns of their own — one
   stamp under every price, one percentage under every gap — so they align on
   the same terms. They were missed until the figure check stopped measuring a
   list of selector names and started measuring the columns the page has. */
.pb-when,
.pb-gap-pct {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.pb-price {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-board-price);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pb-c-cheap .pb-price { color: var(--board-cheap); }
.pb-c-dear .pb-price { color: var(--board-muted); }
/* The lira sign is a currency mark, not a digit: at figure weight and size it
   competes with the number it belongs to. */
.pb-cur {
  margin-left: var(--s-1);
  font-size: var(--t-caption);
  font-weight: 400;
  opacity: 0.75;
}
/* The read time, on every price, always. A price without one is a claim about
   now that we cannot make. */
.pb-when {
  display: block;
  margin-top: var(--s-1);
  color: var(--board-muted);
  font-family: var(--font-sans);
  font-size: var(--t-nano);
  line-height: 1.4;
}
/* The gap is the whole gesture, so it is the biggest thing in the row. */
.pb-gap {
  display: block;
  color: var(--board-figure);
  font-size: var(--t-board-gap);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  white-space: nowrap;
}
.pb-gap .pb-cur { font-size: var(--t-sm); }
.pb-gap-pct {
  display: block;
  margin-top: var(--s-1);
  color: var(--board-muted);
  font-family: var(--font-sans);
  font-size: var(--t-nano);
}

/* ---- the one drawn series -------------------------------------------- */
.pb-chart {
  margin: var(--s-8) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--board-rule);
}
.pb-chart-head { display: grid; gap: var(--s-1); }
.pb-chart-title {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
}
.pb-chart-meta { color: var(--board-muted); font-family: var(--font-sans); font-size: var(--t-nano); }
/* The viewBox keeps its aspect ratio: stretching it would turn the reading
   markers into ellipses and, worse, flatten or exaggerate a real price move
   depending on the width of the window. */
.pb-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--s-5);
}
.pb-chart-line {
  fill: none;
  stroke: var(--board-figure);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pb-chart-area { fill: var(--board-figure); opacity: 0.09; stroke: none; }
.pb-chart-dots circle {
  fill: var(--board-ground);
  stroke: var(--board-figure);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.pb-figs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
}
.pb-fig { min-width: 0; }
.pb-fig dt { color: var(--board-muted); font-family: var(--font-sans); font-size: var(--t-nano); }
.pb-fig dd {
  margin-top: var(--s-1);
  font-size: var(--t-lg);
  font-weight: 600;
  white-space: nowrap;
}
.pb-fig.is-low dd { color: var(--board-cheap); }
.pb-fig.is-high dd { color: var(--board-dear); }
.pb-fig.is-spread dd { color: var(--board-figure); }

/* ---- what the catalogue is, at the foot of the board -------------------

   These three figures used to open the board. They are about the instrument
   rather than about any price, so they read as a colophon and belong under
   the evidence, not over it — and putting them here is most of what buys the
   first price row its place on a 390px screen. */
.pb-scale {
  display: grid;
  /* Three tracks, declared, whichever way the block was built. The seven-day
     reading count is only emitted on the live path — see `scaleMarkup` — so
     the baked block has two cells and the live one has three, and stacked on a
     phone that difference is 67px of the page moving under the reader at the
     moment the refresh lands. An explicit third track is sized even when
     nothing is placed in it, so the two states occupy the same box. Reset to
     one row at 768px, where the cells sit side by side and the count is free. */
  grid-template-rows: repeat(3, minmax(3.4em, auto));
  gap: var(--s-5);
  margin: var(--s-8) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--board-rule);
}
.pb-scale-cell { min-width: 0; }
/* The timestamp is set a step down from the counts: it is the same kind of
   fact but it is eleven characters longer, and at the same size it becomes
   the widest thing on the board and outranks the catalogue it is dating. */
.pb-scale-cell.is-when dd { font-size: var(--t-lg); letter-spacing: -0.01em; }
.pb-scale dd {
  margin: 0;
  font-size: var(--t-board-scale);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.pb-scale dt {
  margin-top: var(--s-1);
  color: var(--board-muted);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
}

/* ---- the standfirst ----------------------------------------------------

   The four-column strip of one-word value props — ₺0 / Yerinde / 4 site /
   Tek cümle — as running prose, and under it the sentence that used to sit
   above the fold as a deck. All the facts survived; what went was the idea
   that a fact needs a column and a heading to be read. Indented three columns
   because it is subordinate to what is above it, which is the whole reason to
   have a grid. */
.beyan {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-6);
  padding-bottom: var(--s-16);
}
.beyan .deck {
  grid-column: 3 / span 9;
  max-width: none;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.beyan p + p {
  grid-column: 3 / span 9;
  margin: var(--s-5) 0 0;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.6;
  text-wrap: pretty;
}
.beyan b { color: var(--ink); font-weight: 600; }

/* ---- how it works ----------------------------------------------------

   `01 / 02 / 03` in three equal rounded boxes, replaced by three figures
   hanging in the margin. The boxes only ever existed to say "these are steps
   in order"; the numerals are how you read a three-step sequence and they
   stay, because that is a different claim from the boxes. The numeral is
   aria-hidden because the <ol> already numbers itself and nobody needs to
   hear "1" twice. */
.adimlar {
  margin: var(--s-10) 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}
.adimlar li {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-6);
  margin: 0;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
.adim-no {
  grid-column: 1 / span 2;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-price);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.adim-govde { grid-column: 3 / span 8; }
.adim-govde h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 600;
}
.adim-govde p {
  margin: var(--s-2) 0 0;
  max-width: var(--measure);
  color: var(--muted);
  font-family: var(--font-serif);
  line-height: 1.6;
}

/* ---- what Kelly does ------------------------------------------------

   Four bordered panes, one of them with an accent border, replaced by a
   definition list on rules. The term is the grotesk and the answer is the
   serif, which is a stronger separation than a 1px border ever was, and the
   two columns are divided by a hairline instead of by four card edges. */
.tanimlar {
  margin: var(--s-10) 0 0;
  border-top: 2px solid var(--ink);
  display: grid;
  gap: 0 var(--s-10);
}
.tanim {
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
.tanim dt {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 600;
  font-stretch: 94%;
}
.tanim dd {
  margin: var(--s-3) 0 0;
  color: var(--muted);
  font-family: var(--font-serif);
  line-height: 1.6;
}
/* The three things Kelly can say, and one of the two places on this page
   below the board with a colour in it. They are not in capsules: a verdict is
   a sentence, and --buy and --wait already carry the meaning that the border
   and the tinted background were repeating. */
.kararlar {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}
.kararlar li {
  margin: 0;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.karar-al { color: var(--buy); }
.karar-bekle { color: var(--wait); }
.karar-baska { color: var(--ink); }

/* ---- without / with -------------------------------------------------

   Two cards, one of them filled solid green, replaced by a balance sheet:
   one 2px rule down the middle, the old way muted on the left and the new way
   in ink on the right. The comparison is made by weight and position, which
   is how a financial page makes one, rather than by painting the column you
   are supposed to prefer. */
.bilanco {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 2px solid var(--ink);
}
.bilanco h3 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bilanco-once h3 { color: var(--muted); }
.bilanco-sonra h3 { color: var(--ink); }
.bilanco ul { margin: 0; padding: 0; list-style: none; }
.bilanco li {
  margin: 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.bilanco-once li { color: var(--muted); }
.bilanco-sonra li { color: var(--ink); }

/* ---- pricing --------------------------------------------------------

   Two plan cards — the second one a solid green block with white text —
   replaced by a rate table. The amount hangs in the first three columns and
   the terms sit in the next eight, which is how a tariff has been printed
   since before anybody had a landing page. Nothing is filled in: the free
   plan is not less important because it has no background. */
.tarife {
  margin-top: var(--s-10);
  border-top: 2px solid var(--ink);
}
.tarife-satir {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-6);
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--line);
}
.tarife-tutar {
  grid-column: 1 / span 3;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-price);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarife-govde { grid-column: 4 / span 8; }
.tarife-govde h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 600;
}
.tarife-govde ul { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.tarife-govde li {
  margin: 0;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.tarife-eylem { margin: var(--s-5) 0 0; }

/* ---- FAQ ------------------------------------------------------------

   The heading moves out of the way of the list and into the margin, three
   columns wide, which is where a magazine puts a standing head. It used to
   sit centred over a 720px column in the middle of a 1120px page, with the
   same gap above it as every other band. */
.sss {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-6);
}
.sss > h2 { grid-column: 1 / span 3; margin: 0; }
.sss > .faq { grid-column: 5 / span 8; margin-top: 0; }

/* ---- the colophon ---------------------------------------------------

   The install steps, under a heavy rule at the foot of the page in small
   type, which is where a printed thing puts its production notes. It was a
   bordered card with a shadow, which made a two-step chore look like the most
   important object on the page. */
.kunye {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-6);
  padding: var(--s-12) 0 var(--s-16);
}
.kunye > h2 {
  grid-column: 1 / span 4;
  margin: 0;
  padding-top: var(--s-6);
  border-top: 2px solid var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.14;
}
.kunye-govde {
  grid-column: 6 / span 7;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.kunye-govde .note { margin: 0; max-width: var(--measure); font-family: var(--font-serif); }
.kunye-govde ol {
  margin: var(--s-5) 0;
  padding-left: var(--s-5);
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.kunye-govde li { margin: 0 0 var(--s-3); }
.kunye-govde li:last-child { margin-bottom: 0; }

/* a full-bleed band on a different stock, for the section that changes the
   page's rhythm. --sand is 1.18:1 against --paper: enough to read as another
   sheet, not enough to read as a coloured box. */
.band {
  padding: var(--s-16) 0;
  background: var(--sand);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

/* Sections that continue the block above rather than starting a new one keep
   their bottom padding and drop the top. */
.section-tight { padding-top: 0; }

/* ---- FAQ ------------------------------------------------------------- */
.faq { margin-top: var(--s-8); border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 44px;
  padding: var(--s-4) 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
/* Kept as a marker rather than restyled away: it is the only affordance
   saying these rows open, and tools/verify-layout.mjs exempts it by name from
   the 44px rule because it is decoration inside a target, not a target. */
.faq-plus {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s var(--ease);
}
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item > p {
  margin: 0 0 var(--s-5);
  max-width: var(--measure);
  color: var(--muted);
  font-family: var(--font-serif);
  line-height: 1.65;
}

/* ==========================================================================
   BREAKPOINTS

   The twelve-column grid is declared unconditionally above and every landing
   block therefore has to be collapsed back to one column below 1024px. That
   is the right way round: the narrow layout is the one that must be plainly
   readable, and it is what you get by not asking for anything, while the
   asymmetry is an enhancement that only arrives when there is room for it.
   ========================================================================== */
@media (max-width: 1023px) {
  .manset,
  .beyan,
  .adimlar li,
  .tarife-satir,
  .sss,
  .kunye {
    grid-template-columns: 1fr;
  }
  .manset-hat,
  .manset-baslik,
  .manset-spot,
  .beyan .deck,
  .beyan p + p,
  .adim-no,
  .adim-govde,
  .tarife-tutar,
  .tarife-govde,
  .sss > h2,
  .sss > .faq,
  .kunye > h2,
  .kunye-govde {
    grid-column: 1;
  }
  /* Stacked, the figure and the amount sit directly above the thing they
     label and need the gap the column gutter used to give them sideways. */
  .adim-no { margin-bottom: var(--s-2); font-size: var(--t-stat); }
  .tarife-tutar { margin-bottom: var(--s-3); }
  .sss > .faq { margin-top: var(--s-6); }
  .kunye-govde { margin-top: var(--s-6); }
  .kunye > h2 { font-size: var(--t-h2); }
  /* One column: there is no middle for a rule to run down, so the second half
     of the balance sheet keeps its rule on top like everything else. */
  .bilanco-sonra { padding-top: var(--s-6); border-top: 2px solid var(--ink); }
}

@media (min-width: 768px) {
  .tanimlar { grid-template-columns: 1fr 1fr; }
  /* The hairline between the two columns of definitions. Only ever drawn on
     the right-hand column, and only when there are two. */
  .tanim:nth-child(even) {
    border-inline-start: 1px solid var(--line);
    padding-inline-start: var(--s-10);
  }
  .bilanco { grid-template-columns: 1fr 1fr; gap: 0 var(--s-10); }
  /* The one heavy vertical rule on the page: without / with, divided the way
     a balance sheet divides. */
  .bilanco-sonra {
    border-inline-start: 2px solid var(--ink);
    padding-inline-start: var(--s-10);
  }
  .tools { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: repeat(3, 1fr); }
  /* Baseline, not top: the three figures are different sizes and a board
     reads as a board only when its figures sit on one line. */
  .pb-scale {
    grid-template-columns: repeat(3, auto);
    grid-template-rows: auto;
    justify-content: start;
    align-items: baseline;
    gap: var(--s-16);
  }
  .pb-figs { grid-template-columns: repeat(4, 1fr); }
  .price-board { padding: var(--s-8); }
}

@media (min-width: 1024px) {
  .manset { padding-top: var(--s-12); }
  .pb-state { min-height: 1.6em; }
  /* The CTA hangs off the headline's own column rather than starting a new
     block, which is what stops the two reading as unrelated. */
  .manset-spot { margin-top: var(--s-8); }
}

/* --------------------------------------------------------------------------
   THE PHONE, WHERE THE DENSITY ARGUMENT IS ACTUALLY DECIDED.

   The board must show real price rows on the first screen at 390px. That is
   asserted by measurement in tools/shoot-landing.mjs, which fails the build if
   the first row's prices fall below the fold — the comparison that produced
   this page found a first screen spent entirely on a hero and three catalogue
   statistics, with not one price on it, and "the owner asked for density" is
   not satisfied by density that only exists at 1280px.

   Three things buy the room, and none of them cuts a word of copy: the
   standfirst moved below the board, the catalogue statistics moved to the
   foot of the board, and the row reflows into a two-up grid instead of
   scrolling sideways.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .section { padding: var(--s-12) 0; }
  .manset { padding: var(--s-6) 0 var(--s-8); }
  .manset-baslik { line-height: 0.92; }
  .manset-spot { margin-top: var(--s-5); }
  /* The install CTA is the page's only job on a phone, so it takes the width
     rather than sitting at its label's length in the middle of the screen. */
  .manset-eylem .btn { width: 100%; }
  .pano { padding-bottom: var(--s-12); }
  .pano-head { margin-bottom: var(--s-4); padding-top: var(--s-4); }
  .beyan { padding-bottom: var(--s-12); }
  .kunye { padding: var(--s-10) 0 var(--s-12); }

  /* On a phone the board bleeds to the edges. Inset in a gutter it reads as
     one more card on a stack of cards; edge to edge it reads as the
     instrument the rest of the page is talking about. */
  .price-board {
    margin-inline: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-top: var(--s-5);
  }

  /* The board reflows instead of scrolling sideways: the title takes the full
     width, the two stores sit side by side under it, and the gap gets its own
     line. `role` is written on every table part in the markup because setting
     `display` here removes the implicit table semantics in Chrome and Safari,
     and a board that stops being announced as a table at 390px would be a
     regression nobody would see. */
  .pb-table thead { display: none; }
  .pb-table,
  .pb-table tbody { display: block; }
  .pb-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--board-rule);
  }
  .pb-table tbody tr:last-child { border-bottom: 0; }
  .pb-table td { display: block; padding: 0; border: 0; }
  .pb-c-product,
  .pb-c-gap { grid-column: 1 / -1; }
  .pb-c-product,
  .pb-c-cheap,
  .pb-c-dear,
  .pb-c-gap { width: auto; }
  .pb-c-gap {
    padding-top: var(--s-2);
    border-top: 1px dashed var(--board-rule);
    text-align: left;
  }
  /* The column heads are gone, so each cell carries its own. */
  .pb-c-cheap::before,
  .pb-c-dear::before,
  .pb-c-gap::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--s-1);
    color: var(--board-muted);
    font-family: var(--font-sans);
    font-size: var(--t-nano);
  }
  .pb-gap { display: inline; }
  .pb-gap-pct { display: inline; margin-left: var(--s-2); }
  .pb-scale { margin-top: var(--s-6); gap: var(--s-4); }
}