/* GENERATED by scripts/propagate-tokens.mjs — do not edit.
 * Source: packages/ekosistem-ui (theme.json → tokens → dist) + module "auction".
 * Regenerate:  node scripts/propagate-tokens.mjs auction
 * Migration step 1 of 4 (handoff screen 29). */

/* @kolay/ekosistem-ui — the whole system in one import.
 * Order matters: tokens, then base, then primitives, then patterns, then shell.
 * A module app additionally loads tokens/modules/<modul>.css AFTER this file. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

/* ── tokens/tokens.css ── */
/* GENERATED by scripts/build-tokens.mjs from theme.json — do not edit.
 * @kolay/ekosistem-ui · Industry design system.
 * Every colour, size, font and duration in the ecosystem comes from this file.
 * A raw hex/px/font-name in a consuming repo fails the `no-raw-value` lint. */

:root {

  /* ── Ground and role colours — screen 10 "Renk · rol jetonları" ── */
  --km-bg: #f2f2f3;
  --km-surface: #e9e9ea;
  --km-surface-2: #eeeeef;
  --km-paper: #ffffff;
  --km-text: #1d1f20;
  --km-text-2: #424244;
  --km-text-3: #5d5d60;
  --km-text-muted: color-mix(in srgb, #1d1f20 55%, transparent);
  --km-text-disabled: #a9a9ac;
  --km-accent: #5980a6;
  --km-accent-line: #416180;
  --km-accent-800: #2c455d;
  --km-accent-900: #1d2d3d;
  --km-tint: #eef6ff;
  --km-error: #7a2f2f;
  --km-banner: #1d2d3d;
  --km-accent-100: #eef6ff;
  --km-accent-200: #d6ebff;
  --km-accent-300: #b5d9fd;
  --km-accent-400: #94bce3;
  --km-accent-500: #749dc4;
  --km-accent-600: #597ea3;
  --km-accent-700: #416180;
  --km-neutral-100: #f5f5f8;
  --km-neutral-200: #e7e7ea;
  --km-neutral-300: #d4d4d7;
  --km-neutral-400: #b7b7ba;
  --km-neutral-500: #98989b;
  --km-neutral-600: #7a7a7d;
  --km-neutral-700: #5d5d60;
  --km-neutral-800: #424244;
  --km-neutral-900: #2b2b2d;

  /* ── Line weights — screen 10 "Çizgi ağırlıkları" (ink over transparent) ── */
  --km-hair: color-mix(in srgb, #1d1f20 14%, transparent);
  --km-line: color-mix(in srgb, #1d1f20 26%, transparent);
  --km-line-strong: color-mix(in srgb, #1d1f20 38%, transparent);
  --km-ink-4: color-mix(in srgb, #1d1f20 4%, transparent);
  --km-ink-7: color-mix(in srgb, #1d1f20 7%, transparent);
  --km-ink-8: color-mix(in srgb, #1d1f20 8%, transparent);
  --km-ink-10: color-mix(in srgb, #1d1f20 10%, transparent);
  --km-ink-12: color-mix(in srgb, #1d1f20 12%, transparent);
  --km-ink-14: color-mix(in srgb, #1d1f20 14%, transparent);
  --km-ink-18: color-mix(in srgb, #1d1f20 18%, transparent);
  --km-ink-20: color-mix(in srgb, #1d1f20 20%, transparent);
  --km-ink-22: color-mix(in srgb, #1d1f20 22%, transparent);
  --km-ink-30: color-mix(in srgb, #1d1f20 30%, transparent);
  --km-ink-34: color-mix(in srgb, #1d1f20 34%, transparent);
  --km-ink-45: color-mix(in srgb, #1d1f20 45%, transparent);
  --km-ink-55: color-mix(in srgb, #1d1f20 55%, transparent);
  --km-ink-72: color-mix(in srgb, #1d1f20 72%, transparent);

  /* ── Type — screen 10 "Tipografi ölçeği". Barlow Condensed over Barlow ── */
  --km-font-heading: "Barlow Condensed", system-ui, sans-serif;
  --km-font-body: "Barlow", system-ui, sans-serif;
  --km-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --km-font-heading-weight: 600;
  --km-label-tracking: 0.18em;
  --km-display: 56px;
  --km-display-lh: 0.94;
  --km-h1: 38px;
  --km-h1-lh: 1.0;
  --km-title: 26px;
  --km-title-lh: 1.05;
  --km-h2: 24px;
  --km-h2-lh: 1.06;
  --km-h3: 22px;
  --km-h3-lh: 1.1;
  --km-h4: 17px;
  --km-h4-lh: 1.25;
  --km-body: 16px;
  --km-body-lh: 1.65;
  --km-field: 15px;
  --km-field-lh: 1.5;
  --km-body-sm: 14px;
  --km-body-sm-lh: 1.55;
  --km-body-xs: 13px;
  --km-body-xs-lh: 1.5;
  --km-label: 11px;
  --km-label-lh: 1.2;
  --km-label-lg: 12px;
  --km-label-lg-lh: 1.2;

  /* ── Space, touch, shell — screen 10 "Boşluk ve dokunma" ── */
  --km-gap-xs: 10px;
  --km-gap-row: 14px;
  --km-gap-block: 24px;
  --km-gap-section: 72px;
  --km-ctl-sm: 40px;
  --km-ctl: 44px;
  --km-tap: 48px;
  --km-ctl-lg: 56px;
  --km-shell: 1340px;
  --km-pad-cell: 10px 12px;
  --km-pad-row: 14px 16px;
  --km-pad-panel: 22px;
  --km-gap-lg: 26px;
  --km-col-min: 260px;
  --km-measure: 560px;
  --km-pad-page: 40px 20px 56px;

  /* ── Motion — screen 30 ── */
  --m-instant: 80ms;
  --m-fast: 140ms;
  --m-base: 220ms;
  --m-panel: 300ms;
  --m-enter: 520ms;
  --m-stagger: 90ms;
  --e-in: cubic-bezier(.2,.7,.2,1);
  --e-out: cubic-bezier(.4,0,.7,.4);

  /* ── Shape and state — screens 25, 84 ── */
  --km-radius: 0;
  --km-focus-width: 2px;
  --km-focus-offset: 2px;
  --km-disabled-opacity: 0.45;
}


/* ── styles/base.css ── */
/* @kolay/ekosistem-ui · base.css
 * Reset, ground, type scale, the blueprint frame, duotone imagery, focus and motion.
 * Depends on tokens/tokens.css (load that first). Nothing here hard-codes a value.
 * Source: handoff screens 10, 25, 27, 30 + _ds/industry readme "Direction". */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--km-bg);
  color: var(--km-text);
  font-family: var(--km-font-body);
  font-size: var(--km-body-sm);
  line-height: var(--km-body-sm-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The system is a line drawing: nothing is rounded, nothing is filled by default. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  border-radius: var(--km-radius);
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--km-accent-800);
  text-decoration: none;
}

a:hover {
  color: var(--km-accent-900);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* ── Type ─────────────────────────────────────────────────────────────────
 * Barlow Condensed for headings and labels, Barlow for body. Screen 10's
 * scale is the only scale — a repo may not add a size (screen 29). */

h1,
h2,
h3,
h4,
h5,
h6,
.km-display,
.km-h1,
.km-h2,
.km-h3 {
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: -0.015em;
  margin: 0;
}

.km-display { font-size: var(--km-display); line-height: var(--km-display-lh); }
.km-h1      { font-size: var(--km-h1);      line-height: var(--km-h1-lh); }
/* Not a heading level — a role. `title` sits above h2 in size (26 vs 24) and
   is the step card titles, result titles and date stamps were reaching for
   when they wrote raw pixels. It exists because 24 → 38 was the widest jump
   in the ramp and everything that needed "bigger than h2, smaller than h1"
   had nowhere to land. */
.km-title   { font-size: var(--km-title);   line-height: var(--km-title-lh); }
.km-h2      { font-size: var(--km-h2);      line-height: var(--km-h2-lh); }
.km-h3      { font-size: var(--km-h3);      line-height: var(--km-h3-lh); }

h1 { font-size: var(--km-h1); line-height: var(--km-h1-lh); }
h2 { font-size: var(--km-h2); line-height: var(--km-h2-lh); }
h3 { font-size: var(--km-h3); line-height: var(--km-h3-lh); }

p {
  margin: 0 0 var(--km-gap-row);
  font-size: var(--km-body);
  line-height: var(--km-body-lh);
  color: var(--km-text-2);
  max-width: 68ch;
}

.km-body    { font-size: var(--km-body);    line-height: var(--km-body-lh); }
.km-body-sm { font-size: var(--km-body-sm); line-height: var(--km-body-sm-lh); color: var(--km-text-2); }
.km-body-xs { font-size: var(--km-body-xs); line-height: var(--km-body-xs-lh); color: var(--km-text-3); }

/* Kicker / eyebrow — the system's only decorative type device. */
.km-label {
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  line-height: var(--km-label-lh);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: var(--km-label-tracking);
  text-transform: uppercase;
  color: var(--km-accent-800);
}

.km-label--lg { font-size: var(--km-label-lg); letter-spacing: 0.22em; }
.km-label--muted { color: var(--km-text-3); letter-spacing: 0.16em; }

/* Every count, price, date and measurement. Screens 11, 85. */
.km-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.km-figure {
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  line-height: 1;
  color: var(--km-accent-900);
  font-variant-numeric: tabular-nums;
}

/* "No value" is a dash, never a fabricated number (screen 11 emptyGlyph). */
.km-empty-glyph { color: var(--km-neutral-500); }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.km-shell {
  width: 100%;
  max-width: var(--km-shell);
  margin-inline: auto;
}

/* The page plate: the 1px frame + four registration marks are the page edge at
 * ≥1340 and are dropped below 1024 — only the interior rules survive. */
.km-plate {
  background: var(--km-bg);
  border: 1px solid var(--km-line);
}

.km-section { padding-block: var(--km-gap-block); }
.km-stack   { display: flex; flex-direction: column; gap: var(--km-gap-row); }
.km-stack--block { gap: var(--km-gap-block); }
.km-row     { display: flex; align-items: center; gap: var(--km-gap-row); }

/* A grid whose 1px "gaps" are the rules — the deck's signature table look. */
.km-grid-ruled {
  display: grid;
  gap: 1px;
  background: var(--km-ink-20);
  border: 1px solid var(--km-ink-20);
}

.km-grid-ruled > * { background: var(--km-bg); }

/* ── Blueprint frame ─────────────────────────────────────────────────────
 * `.km-blueprint` + four `<i class="km-corner tl|tr|bl|br">`. Never drop a
 * mark from a framed element; never put marks on a list row, tag or input. */

.km-blueprint {
  position: relative;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
}

.km-blueprint.km-duotone { overflow: visible; }

.km-corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: var(--km-ink-55);
  pointer-events: none;
}

.km-corner::before,
.km-corner::after {
  content: '';
  position: absolute;
  background: currentColor;
}

.km-corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.km-corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.km-corner.tl { top: -6px; left: -6px; }
.km-corner.tr { top: -6px; right: -6px; }
.km-corner.bl { bottom: -6px; left: -6px; }
.km-corner.br { bottom: -6px; right: -6px; }

/* ── Imagery ─────────────────────────────────────────────────────────────
 * Every content photograph goes through .km-duotone: desaturated, then washed
 * in the accent — a screen print that re-colours with the module. */

.km-duotone {
  position: relative;
  overflow: hidden;
  background: var(--km-neutral-300);
}

.km-duotone > img,
.km-duotone > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.12);
}

.km-duotone::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--km-accent);
  mix-blend-mode: color;
}

.km-duotone--bg > img { filter: grayscale(1) contrast(1.08) brightness(1.1); }

.km-ratio-hero  { aspect-ratio: 21 / 8; }
.km-ratio-band  { aspect-ratio: 21 / 7; }
.km-ratio-wide  { aspect-ratio: 16 / 9; }
.km-ratio-card  { aspect-ratio: 4 / 3; }

/* Placeholder for a missing photograph — hatched, never a grey box with text. */
.km-photo-empty {
  background-image: repeating-linear-gradient(
    135deg,
    var(--km-surface-2) 0 11px,
    /* km-allow-raw: hatch geometry — the second stop is the repeat period, twice the band above it, not a spacing value */
    var(--km-surface) 11px 22px
  );
}

/* ── Focus, selection, disabled ──────────────────────────────────────────── */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--km-focus-width) solid var(--km-accent-900);
  outline-offset: var(--km-focus-offset);
}

::selection {
  background: var(--km-accent-200);
  color: var(--km-accent-900);
}

[disabled],
[aria-disabled='true'] {
  opacity: var(--km-disabled-opacity);
  cursor: not-allowed;
}

.km-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--km-accent-900);
  color: var(--km-bg);
  padding: var(--km-gap-xs) 16px;
  font-family: var(--km-font-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.km-skip:focus { left: 0; }

.km-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Motion ──────────────────────────────────────────────────────────────
 * Opacity, 4–12px translation and height/width only. No spring, no bounce,
 * no rotation; scale lives on the photograph layer alone (screen 30). */

@keyframes km-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes km-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes km-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes km-bar   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes km-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes km-pan   { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.2%, -0.8%, 0); } }
@keyframes km-slide-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes km-drop  { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

.km-rise { animation: km-rise var(--m-enter) var(--e-in) both; }
.km-sweep {
  transform-origin: left;
  animation: km-sweep 900ms var(--e-in) 240ms both;
}
.km-pulse { animation: km-pulse 3.2s ease-in-out infinite; }
.km-pan   { animation: km-pan 24s ease-in-out infinite alternate; }

/* Load stagger — at most six blocks, 90ms apart (screen 30). */
.km-stagger > * { animation: km-rise var(--m-enter) var(--e-in) both; }
.km-stagger > *:nth-child(1) { animation-delay: 0ms; }
.km-stagger > *:nth-child(2) { animation-delay: calc(var(--m-stagger) * 1); }
.km-stagger > *:nth-child(3) { animation-delay: calc(var(--m-stagger) * 2); }
.km-stagger > *:nth-child(4) { animation-delay: calc(var(--m-stagger) * 3); }
.km-stagger > *:nth-child(5) { animation-delay: calc(var(--m-stagger) * 4); }
.km-stagger > *:nth-child(6) { animation-delay: calc(var(--m-stagger) * 5); }
.km-stagger > *:nth-child(n + 7) { animation-delay: calc(var(--m-stagger) * 5); }

/* Reduced motion: every duration drops to 0 and translation/scale is removed.
 * Opacity survives at 80ms so a state change is still visible (screen 30). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--m-instant) !important;
    transition-property: opacity !important;
    scroll-behavior: auto !important;
  }

  .km-rise,
  .km-stagger > * { animation: km-fade var(--m-instant) linear both; }
}


/* ── styles/primitives.css ── */
/* @kolay/ekosistem-ui · primitives.css
 * Button, Field, Tag, Checkbox, Segment, Table, Dialog, Skeleton, Inline message.
 * Source: handoff screens 11, 25, 27, 84, 85, 86, 87 + _ds/industry component layer.
 * Every state is built in — a consuming repo never restyles a state (screen 28). */

/* ── Button ──────────────────────────────────────────────────────────────
 * The primary is the ONE solid object on the board: an accent fill that keeps
 * the square corners and wears tl+br registration marks. */

.km-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  min-height: var(--km-tap);
  padding: 0 18px;
  font-family: var(--km-font-heading);
  font-size: var(--km-body-sm);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--km-radius);
  transition: background var(--m-fast) var(--e-in), border-color var(--m-fast) var(--e-in),
    color var(--m-fast) var(--e-in);
}

/* km-allow-raw: small button height — one component */
.km-btn--sm { min-height: 36px; padding: 0 12px; font-size: var(--km-body-xs); letter-spacing: 0.12em; }
.km-btn--block { width: 100%; }

.km-btn--primary {
  background: var(--km-accent);
  color: var(--km-bg);
  border-color: var(--km-accent-900);
}

.km-btn--primary:hover { background: var(--km-accent-600); }
.km-btn--primary:active { background: var(--km-accent-700); }
.km-btn--primary:focus-visible { outline-color: var(--km-accent-900); }

.km-btn--secondary {
  background: transparent;
  color: var(--km-text);
  border-color: var(--km-line-strong);
}

.km-btn--secondary:hover { background: var(--km-ink-7); }
.km-btn--secondary:active { background: var(--km-ink-12); }
.km-btn--secondary:focus-visible { outline-color: var(--km-accent-line); }

.km-btn--ghost {
  background: transparent;
  color: var(--km-accent-800);
  border-color: transparent;
  padding-inline: 8px;
}

.km-btn--ghost:hover { background: var(--km-tint); }

/* Destructive confirm — deep ink, never a red fill (screen 87). */
.km-btn--danger {
  background: var(--km-banner);
  color: var(--km-bg);
  border-color: var(--km-banner);
}

.km-btn--icon {
  min-height: var(--km-tap);
  width: var(--km-tap);
  padding: 0;
  border-color: var(--km-line-strong);
}

/* A text action that reads as a rule under the label. */
.km-btn--link {
  min-height: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--km-accent-600);
  color: var(--km-accent-900);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.km-btn[disabled],
.km-btn[aria-disabled='true'] {
  background: transparent;
  color: var(--km-text-disabled);
  border-color: var(--km-ink-30);
  border-style: dashed;
}

.km-btn--primary[disabled],
.km-btn--primary[aria-disabled='true'] { background: var(--km-ink-12); }

/* Registration marks on the primary button: tl + br only. */
.km-btn > .km-corner { color: currentColor; }

/* ── Field ───────────────────────────────────────────────────────────────── */

.km-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.km-field > label,
.km-field-label {
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--km-text-3);
}

.km-input,
.km-select,
.km-textarea {
  min-height: var(--km-tap);
  padding: 0 12px;
  background: var(--km-paper);
  border: 1px solid var(--km-line-strong);
  border-radius: var(--km-radius);
  color: var(--km-text);
  font-family: var(--km-font-body);
  font-size: var(--km-field);
  transition: border-color var(--m-fast) var(--e-in), background var(--m-fast) var(--e-in);
}

/* km-allow-raw: textarea floor — roughly four body lines, one component */
.km-textarea { min-height: 96px; padding: var(--km-pad-cell); line-height: 1.55; resize: vertical; }

.km-input::placeholder,
.km-textarea::placeholder { color: var(--km-text-3); }

.km-input:hover,
.km-textarea:hover { border-color: var(--km-ink-45); }

.km-input:focus,
.km-textarea:focus,
.km-select:focus {
  border-color: var(--km-accent-900);
  outline: var(--km-focus-width) solid color-mix(in srgb, var(--km-accent-900) 40%, transparent);
  outline-offset: 1px;
}

.km-input[disabled],
.km-textarea[disabled] {
  background: transparent;
  border-style: dashed;
  border-color: var(--km-ink-30);
  color: var(--km-text-disabled);
}

/* Error is never colour alone: 2px border + icon + message (screens 84, 26). */
.km-field[data-state='error'] .km-input,
.km-field[data-state='error'] .km-textarea,
.km-input[aria-invalid='true'] {
  border-width: 2px;
  border-color: var(--km-error);
}

.km-field-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--km-body-xs);
  line-height: 1.45;
  color: var(--km-text-3);
}

.km-field[data-state='error'] .km-field-msg { color: var(--km-error); }

.km-field-hint { font-size: var(--km-body-xs); color: var(--km-text-3); }

.km-field-counter {
  margin-left: auto;
  font-size: var(--km-body-xs);
  color: var(--km-text-3);
  font-variant-numeric: tabular-nums;
}

/* ── Checkbox / radio ────────────────────────────────────────────────────── */

.km-check {
  display: inline-flex;
  align-items: center;
  gap: var(--km-gap-xs);
  min-height: var(--km-tap);
  cursor: pointer;
  font-size: var(--km-body-sm);
}

.km-check > input {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--km-ink-40);
  background: var(--km-paper);
  border-radius: var(--km-radius);
  display: grid;
  place-content: center;
  transition: border-color var(--m-instant) var(--e-in), background var(--m-instant) var(--e-in);
}

.km-check > input[type='radio'] { border-radius: 50%; }

.km-check > input::after {
  content: '';
  width: 8px;
  height: 8px;
  transform: scale(0);
  background: var(--km-bg);
  transition: transform var(--m-instant) var(--e-in);
}

.km-check > input[type='radio']::after { border-radius: 50%; }

.km-check > input:checked {
  background: var(--km-accent-line);
  border-color: var(--km-accent-line);
}

.km-check > input:checked::after { transform: scale(1); }
.km-check:hover > input { border-color: var(--km-accent-line); }

/* ── Segment ─────────────────────────────────────────────────────────────── */

.km-seg {
  display: inline-flex;
  border: 1px solid var(--km-line-strong);
  border-radius: var(--km-radius);
}

.km-seg-opt {
  min-height: var(--km-ctl-sm);
  padding: 0 14px;
  font-family: var(--km-font-heading);
  font-size: var(--km-body-xs);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--km-text-2);
  border-right: 1px solid var(--km-hair);
  transition: background var(--m-instant) var(--e-in), color var(--m-instant) var(--e-in);
}

.km-seg-opt:last-child { border-right: 0; }
.km-seg-opt:hover { background: var(--km-tint); }

.km-seg-opt[aria-pressed='true'],
.km-seg-opt[aria-selected='true'] {
  background: var(--km-accent-900);
  color: var(--km-bg);
}

/* ── Tag ─────────────────────────────────────────────────────────────────── */

.km-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--km-radius);
  white-space: nowrap;
}

.km-tag--accent  { background: var(--km-accent-200); color: var(--km-accent-900); }
.km-tag--solid   { background: var(--km-accent-line); color: var(--km-bg); }
.km-tag--neutral { background: var(--km-surface); color: var(--km-text-2); }
.km-tag--outline { border-color: var(--km-line); color: var(--km-text-2); }
.km-tag--muted   { border-style: dashed; border-color: var(--km-ink-30); color: var(--km-text-3); }

/* ── Table ───────────────────────────────────────────────────────────────
 * 24 rows per page, no infinite scroll; below 768 a row becomes a card. */

.km-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--km-body-xs);
}

.km-table thead th {
  background: var(--km-surface);
  padding: 8px 12px;
  text-align: left;
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--km-text-3);
  border-bottom: 1px solid var(--km-line);
  white-space: nowrap;
}

.km-table td {
  padding: var(--km-pad-cell);
  border-bottom: 1px solid var(--km-hair);
  vertical-align: middle;
}

.km-table tbody tr { transition: background var(--m-fast) var(--e-in); }
.km-table tbody tr:hover { background: var(--km-tint); }
.km-table [data-numeric] { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Dialog ──────────────────────────────────────────────────────────────── */

.km-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--km-accent-900) 62%, transparent);
  animation: km-fade var(--m-panel) var(--e-in) both;
}

.km-dialog {
  background: var(--km-bg);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  /* km-allow-raw: dialog measure — a reading width, not a spacing step */
  max-width: 520px;
  /* km-allow-raw: dialog viewport inset — twice the page gutter */
  width: calc(100% - 32px);
  animation: km-drop var(--m-panel) var(--e-in) both;
}

.km-dialog-title {
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  font-size: var(--km-h4);
  padding: 16px 20px;
  border-bottom: 1px solid var(--km-line);
}

.km-dialog-body { padding: 20px; font-size: var(--km-body-sm); color: var(--km-text-2); }

.km-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--km-line);
}

/* ── Inline message / banner / toast ─────────────────────────────────────
 * Five feedback layers; the deck's rule is one layer per event (screen 87). */

.km-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--km-gap-xs);
  padding: 12px 14px;
  border-left: 3px solid var(--km-accent-line);
  background: var(--km-surface-2);
  font-size: var(--km-body-sm);
  color: var(--km-text-2);
}

.km-msg--error { border-left-color: var(--km-error); color: var(--km-error); }

.km-banner {
  background: var(--km-banner);
  color: var(--km-bg);
  padding: var(--km-gap-xs) 20px;
  font-size: var(--km-body-sm);
}

.km-banner a { color: var(--km-bg); border-bottom: 1px solid currentColor; }

.km-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  background: var(--km-bg);
  border: 1px solid var(--km-ink-34);
  padding: 12px 16px;
  font-size: var(--km-body-sm);
  animation: km-drop var(--m-base) var(--e-in) both;
}

/* ── Skeleton ────────────────────────────────────────────────────────────
 * Blocks at the real size of the content they replace — never a spinner
 * where a shape is known (screen 27). No shimmer: opacity pulse only. */

.km-skeleton {
  background: var(--km-ink-12);
  animation: km-pulse 1.4s ease-in-out infinite;
}

.km-skeleton--line { height: 12px; }
.km-skeleton--title { height: var(--km-h3); }
.km-skeleton--image { background: var(--km-ink-10); }

/* ── Empty state ─────────────────────────────────────────────────────────── */

.km-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--km-gap-xs);
  /* km-allow-raw: empty-state inset — one component */
  padding: 28px;
  border: 1px dashed var(--km-ink-30);
  color: var(--km-text-2);
}

.km-empty-title {
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  font-size: var(--km-h4);
  color: var(--km-text);
}

/* ── Icons ───────────────────────────────────────────────────────────────
 * Lucide, 24-box, no fill, stroke 1.5, currentColor. Never thicker. */

.km-icon {
  flex: none;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.km-icon--sm { width: 13px; height: 13px; }
.km-icon--lg { width: 20px; height: 20px; }
.km-icon--xl { width: 24px; height: 24px; }
.km-icon--accent { color: var(--km-accent-line); }


/* ── styles/patterns.css ── */
/* @kolay/ekosistem-ui · patterns.css
 * Search · FacetPanel · ResultRow · EventRow · MetricStrip · ActionCard ·
 * GuideBlock · Gallery · Pagination · Hero · Breadcrumb · StatGrid.
 * Source: handoff screens 02, 03, 04, 07, 09, 11, 12, 15, 23, 51, 62.
 * The 18/52/30 search layout is locked — a repo may not override it (screen 29). */

/* ── Search ──────────────────────────────────────────────────────────────── */

.km-search {
  display: flex;
  align-items: stretch;
  min-height: var(--km-ctl);
  background: var(--km-paper);
  border: 1px solid var(--km-accent-line);
  border-radius: var(--km-radius);
}

.km-search[data-state='odakta'],
.km-search:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--km-accent-line) 18%, transparent); }

.km-search[data-state='servis hatası'] { border-style: dashed; border-color: var(--km-ink-34); }

/* Scope prefix — "Tüm ekosistem", an il/ilçe chip. */
.km-search-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--km-gap-xs);
  border-right: 1px solid var(--km-ink-20);
  font-family: var(--km-font-heading);
  font-size: var(--km-label-lg);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--km-accent-800);
  white-space: nowrap;
}

.km-search-input {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--km-gap-xs);
  padding: 0 12px;
}

.km-search-input > input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--km-field);
  color: var(--km-text);
}

.km-search-clear {
  margin-left: auto;
  /* km-allow-raw: icon button box — sized to the 16px glyph plus its hit area */
  width: 28px;
  /* km-allow-raw: icon button box — sized to the 16px glyph plus its hit area */
  height: 28px;
  display: grid;
  place-content: center;
  color: var(--km-text-3);
}

.km-search-clear:hover { background: var(--km-ink-8); }

.km-search-submit {
  padding: 0 20px;
  background: var(--km-accent);
  color: var(--km-bg);
  font-family: var(--km-font-heading);
  font-size: var(--km-body-sm);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--m-fast) var(--e-in);
}

.km-search-submit:hover { background: var(--km-accent-600); }

/* Suggestion list — opacity + 4px down, --m-base (screen 30). */
.km-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 70;
  background: var(--km-paper);
  border: 1px solid var(--km-line);
  animation: km-drop var(--m-base) var(--e-in) both;
}

.km-suggest-item {
  display: flex;
  align-items: center;
  gap: var(--km-gap-xs);
  width: 100%;
  min-height: var(--km-ctl-sm);
  padding: 0 12px;
  text-align: left;
  font-size: var(--km-body-sm);
  border-bottom: 1px solid var(--km-hair);
}

.km-suggest-item:last-child { border-bottom: 0; }
.km-suggest-item:hover,
.km-suggest-item[aria-selected='true'] { background: var(--km-tint); }

.km-suggest-type {
  margin-left: auto;
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--km-text-3);
}

/* ── Search page layout — 18 / 52 / 30, locked ───────────────────────────── */

.km-searchpage {
  display: grid;
  grid-template-columns: 18% 52% 30%;
}

.km-searchpage > .km-facets { border-right: 1px solid var(--km-line); background: var(--km-surface-2); padding: 20px 16px; }
.km-searchpage > .km-results { border-right: 1px solid var(--km-line); padding: 20px; }
.km-searchpage > .km-rail { background: var(--km-surface-2); padding: 20px 20px 24px; }

.km-rail-inner {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── FacetPanel ──────────────────────────────────────────────────────────── */

.km-facet-group { margin-bottom: 18px; }

.km-facet-group > .km-label { margin-bottom: 6px; }

.km-facet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  /* km-allow-raw: facet row height — the densest interactive row, one component */
  min-height: 32px;
  padding: 0 8px;
  text-align: left;
  font-size: var(--km-body-sm);
  color: var(--km-text-2);
  border-left: 2px solid transparent;
  transition: background var(--m-fast) var(--e-in), border-color var(--m-fast) var(--e-in);
}

.km-facet-row:hover { background: var(--km-ink-6, var(--km-ink-7)); }

.km-facet-row[aria-pressed='true'],
.km-facet-row[data-selected='true'] {
  background: var(--km-tint);
  border-left-color: var(--km-accent-line);
  color: var(--km-accent-900);
  font-weight: 600;
}

.km-facet-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--km-text-3);
}

/* A facet with 0 matches is shown, disabled — never hidden (screen 62). */
.km-facet-row[data-count='0'] { opacity: var(--km-disabled-opacity); pointer-events: none; }

.km-facet-active {
  border: 1px solid var(--km-line);
  background: var(--km-bg);
  padding: var(--km-gap-xs);
  margin-bottom: 18px;
}

.km-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--km-accent-600);
  background: var(--km-tint);
  color: var(--km-accent-900);
  font-size: var(--km-label-lg);
  font-weight: 600;
}

.km-chip > .km-icon { stroke-width: 2; width: 11px; height: 11px; }

/* ── ResultRow ───────────────────────────────────────────────────────────── */

.km-result {
  display: grid;
  /* km-allow-raw: thumbnail column — a 4:3 image measure, not a spacing step */
  grid-template-columns: 148px 1fr;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--km-line);
  color: inherit;
  transition: background var(--m-fast) var(--e-in), border-color var(--m-fast) var(--e-in);
}

.km-result:hover { background: var(--km-tint); border-color: var(--km-accent-line); }

.km-result-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.km-result-title {
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  font-size: var(--km-title);
  line-height: var(--km-title-lh);
  color: var(--km-text);
  margin-top: 2px;
}

.km-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--km-gap-xs);
  align-items: center;
  font-size: var(--km-body-sm);
  color: var(--km-text-2);
}

.km-result-meta > .km-sep { width: 1px; height: 12px; background: var(--km-ink-22); }

.km-result-tags { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2px; }

.km-badge-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--km-accent-line);
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--km-accent-900);
}

/* No photograph: a hatched, dashed frame that says so. Never a grey block. */
.km-thumb-empty {
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  border: 1px dashed var(--km-ink-30);
  background: repeating-linear-gradient(135deg, var(--km-ink-7) 0 6px, transparent 6px 12px);
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--km-text-3);
}

/* ── EventRow ────────────────────────────────────────────────────────────
 * date | title+meta | action. Title clips at two lines; access is a word,
 * not a colour; a missing date drops the column rather than inventing one. */

.km-event {
  display: grid;
  /* km-allow-raw: date column — sized to the widest rendered date, not a spacing step */
  grid-template-columns: 88px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--km-hair);
  transition: background var(--m-fast) var(--e-in);
}

.km-event:hover { background: var(--km-tint); }
.km-event:last-child { border-bottom: 0; }

.km-event-date {
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  font-size: var(--km-title);
  line-height: 1;
  color: var(--km-text);
  font-variant-numeric: tabular-nums;
}

.km-event-title {
  font-size: var(--km-h4);
  font-weight: 500;
  color: var(--km-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.km-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 5px;
  font-size: var(--km-body-sm);
  color: var(--km-text-2);
}

.km-event-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--km-tap);
  padding: 0 4px;
  font-family: var(--km-font-heading);
  font-size: var(--km-label-lg);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--km-accent-900);
}

.km-event[data-state='dolu'] .km-event-action { color: var(--km-text-3); }
.km-event[data-state='iskelet'] { pointer-events: none; }

/* ── MetricStrip ─────────────────────────────────────────────────────────
 * 4 columns at ≥1340, 3 at 1024, 2 at 768. All-empty → the strip is hidden
 * by the component, never rendered as a row of dashes. */

.km-metrics {
  display: grid;
  grid-template-columns: repeat(var(--km-metric-cols, 4), 1fr);
  gap: 1px;
  background: var(--km-ink-22);
  border: 1px solid var(--km-line);
}

.km-metric { background: var(--km-bg); padding: 16px; }

.km-metric-value {
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  /* Up to h1, not down to title: a metric value is the loudest thing on its
     card, and 26 would have flattened it into the label beside it. */
  font-size: var(--km-h1);
  line-height: 1;
  color: var(--km-accent-900);
  font-variant-numeric: tabular-nums;
}

.km-metric-label {
  display: block;
  margin-top: 6px;
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--km-text-2);
}

.km-metric[data-empty='true'] .km-metric-value { color: var(--km-neutral-500); }

/* ── ActionCard ──────────────────────────────────────────────────────────
 * The conversion object. Blueprint frame with tl + br marks only. Six CTA
 * states (screen 04): açık · üyelere · dolu · bekleme · kapalı · bilinmiyor. */

.km-action {
  position: sticky;
  top: 16px;
  padding: 20px;
  background: var(--km-bg);
  border: 1px solid var(--km-ink-30);
}

.km-action-title {
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  font-size: var(--km-title);
  line-height: var(--km-title-lh);
  color: var(--km-text);
}

.km-action-when {
  margin-top: 4px;
  font-family: var(--km-font-heading);
  font-size: var(--km-field);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--km-text-2);
}

.km-action-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--km-ink-22);
  border: 1px solid var(--km-line);
  margin: 16px 0;
}

.km-action-fact { background: var(--km-bg); padding: 12px; }

.km-action-fact > b {
  display: block;
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  font-size: 24px;
  line-height: 1;
  color: var(--km-accent-900);
  font-variant-numeric: tabular-nums;
}

.km-action-fact > span {
  display: block;
  margin-top: 4px;
  font-size: var(--km-label-lg);
  line-height: 1.4;
  color: var(--km-text-3);
}

.km-action-note { margin-bottom: 14px; font-size: var(--km-body-sm); line-height: 1.5; color: var(--km-text-2); }

.km-action-state {
  margin-top: 12px;
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--km-text-3);
}

/* Price row disappears when there is no price — it is never "0 ₺". */
.km-action[data-price='none'] .km-action-price { display: none; }

/* ── GuideBlock ──────────────────────────────────────────────────────────── */

.km-guide {
  background: var(--km-surface-2);
  border: 1px solid var(--km-line);
  padding: 20px;
}

.km-guide-list { display: flex; flex-direction: column; }

.km-guide-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--km-ctl);
  padding: 0 8px;
  border-top: 1px solid var(--km-ink-22);
  font-size: var(--km-body-sm);
  transition: background var(--m-fast) var(--e-in);
}

.km-guide-row:hover { background: var(--km-tint); }

/* Province / district bar figure — scaleX in, 720ms, 70ms per index. */
.km-bar {
  height: 8px;
  background: var(--km-accent-500);
  transform-origin: left;
  animation: km-bar 720ms var(--e-in) both;
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */

.km-gallery {
  display: grid;
  /* km-allow-raw: gallery tile floor — the auto-fill wrap threshold, not a spacing step */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--km-ink-22);
  border: 1px solid var(--km-line);
}

.km-gallery > * { background: var(--km-bg); }

.km-gallery-layer {
  position: fixed;
  inset: 0;
  z-index: 92;
  background: color-mix(in srgb, var(--km-accent-900) 88%, transparent);
  display: grid;
  place-items: center;
  animation: km-fade var(--m-panel) var(--e-in) both;
}

.km-gallery-layer img { animation: km-fade var(--m-panel) var(--e-in) both; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.km-hero {
  display: grid;
  grid-template-columns: 60% 40%;
  border-bottom: 1px solid var(--km-line);
  position: relative;
}

/* km-allow-raw: hero copy inset — a page gutter, not a spacing step */
.km-hero-copy { padding: 48px 24px; border-right: 1px solid var(--km-line); }

.km-hero-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--km-accent);
  transform-origin: left;
  animation: km-sweep 900ms var(--e-in) 240ms both;
}

.km-hero-caption {
  position: absolute;
  left: 20px;
  bottom: 16px;
  padding: 5px var(--km-gap-xs);
  background: color-mix(in srgb, var(--km-accent-900) 78%, transparent);
  color: var(--km-bg);
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── StatGrid, Breadcrumb, Pagination ────────────────────────────────────── */

.km-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--km-ink-22);
  border: 1px solid var(--km-line);
}

.km-stats > * {
  background: var(--km-bg);
  padding: 14px;
  text-align: left;
  transition: background var(--m-fast) var(--e-in);
}

.km-stats > a:hover,
.km-stats > button:hover { background: var(--km-tint); }

.km-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: var(--km-body-sm);
  color: var(--km-text-3);
}

.km-breadcrumb a { color: var(--km-text-2); }
.km-breadcrumb [aria-current='page'] { color: var(--km-text); font-weight: 500; }

/* 24 rows a page, an explicit control, no infinite scroll (screen 85). */
.km-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--km-ink-20);
  font-size: var(--km-body-sm);
  color: var(--km-text-3);
}

.km-url-echo {
  font-family: var(--km-font-mono);
  font-size: var(--km-label-lg);
  color: var(--km-text-3);
}

/* ── Map ─────────────────────────────────────────────────────────────────
 * Click to load: a static image stands in until the user asks for the map,
 * markers are one system colour, no Google red (screen 47). */

.km-map-static { position: relative; border: 1px solid var(--km-line); }

.km-map-static > button {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  background: color-mix(in srgb, var(--km-accent-900) 24%, transparent);
  color: var(--km-bg);
  font-family: var(--km-font-heading);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.km-map-marker { color: var(--km-accent-line); }

/* ── Responsive ladder ───────────────────────────────────────────────────
 * 1340 shell · 1024 rail dissolves, metrics → 3 · 768 facets become a drawer,
 * tables become row cards · 480 thumbs drop out · 390 design floor. */

/* km-allow-raw: media condition — var() is not legal here; 1339 = theme.json shell 1340 minus one */
@media (max-width: 1339px) {
  /* km-allow-raw: facet rail width below the shell breakpoint — a layout measure */
  .km-searchpage { grid-template-columns: 224px 1fr; }
  .km-searchpage > .km-rail { grid-column: 1 / -1; }
  .km-metrics { --km-metric-cols: 3; }
  .km-action { position: static; }
}

/* km-allow-raw: media condition — var() is not legal here; 1023 = theme.json laptop 1024 minus one */
@media (max-width: 1023px) {
  .km-hero { grid-template-columns: 1fr; }
  /* Stacked, the photograph would otherwise take its intrinsic height and push
     the whole page down; the band ratio keeps the fold where the design puts it. */
  .km-hero .km-duotone { aspect-ratio: 21 / 9; }
  /* km-allow-raw: hero copy inset when the split stacks */
  .km-hero-copy { border-right: 0; border-bottom: 1px solid var(--km-line); padding: 32px 20px; }
  .km-searchpage { grid-template-columns: 1fr; }
  .km-searchpage > .km-facets { display: none; }
  .km-searchpage > .km-results { border-right: 0; }
  .km-metrics { --km-metric-cols: 2; }
}

/* km-allow-raw: media condition — var() is not legal here; 767 = theme.json tablet 768 minus one */
@media (max-width: 767px) {
  .km-result { grid-template-columns: 1fr; }
  .km-event { grid-template-columns: 1fr; gap: 8px; }
  .km-event-action { justify-content: flex-start; }
  .km-action-facts { grid-template-columns: 1fr; }
}

/* km-allow-raw: media condition — var() is not legal here; 479 = theme.json compact 480 minus one */
@media (max-width: 479px) {
  .km-result > .km-duotone,
  .km-result > .km-thumb-empty { display: none; }
  .km-result-title { font-size: var(--km-h3); }
}

/* The facet drawer at ≤768: slides from the left, traps focus, --m-panel. */
.km-facet-drawer {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: color-mix(in srgb, var(--km-accent-900) 46%, transparent);
}

.km-facet-drawer > div {
  height: 100%;
  /* km-allow-raw: facet drawer width — a viewport-capped panel measure */
  width: min(360px, 88vw);
  background: var(--km-surface-2);
  overflow-y: auto;
  animation: km-slide-left var(--m-panel) var(--e-in) both;
}


/* ── styles/shell.css ── */
/* @kolay/ekosistem-ui · shell.css
 * UtilityBar · Header · EcosystemDrawer · Footer · BottomNav.
 * Source: handoff screens 01, 02, 05, 08, 13, 24, 45.
 * The shell is not overridable per repo — only the wordmark, the accent and the
 * entity dictionary change (screen 29). */

/* ── Utility bar — the thin line above the header (apex only) ────────────── */

.km-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* km-allow-raw: utility bar height — one component */
  min-height: 34px;
  padding: 0 24px;
  background: var(--km-surface);
  border-bottom: 1px solid var(--km-ink-20);
  font-size: var(--km-label-lg);
  color: var(--km-text-3);
}

.km-utility nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--km-font-heading);
  font-size: var(--km-label-lg);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.km-utility nav a { color: var(--km-neutral-900); }

.km-freshness {
  display: flex;
  align-items: center;
  gap: 8px;
}

.km-freshness::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--km-accent-line);
  animation: km-pulse 3.2s ease-in-out infinite;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.km-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--km-bg);
  border-bottom: 1px solid var(--km-line);
}

.km-header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  /* km-allow-raw: header bar height — one component */
  min-height: 60px;
  padding: var(--km-gap-xs) 24px;
  max-width: var(--km-shell);
  margin-inline: auto;
}

.km-wordmark {
  font-family: var(--km-font-heading);
  font-weight: 700;
  font-size: var(--km-h3);
  letter-spacing: 0.01em;
  color: var(--km-text);
  white-space: nowrap;
}

.km-wordmark > span { color: var(--km-accent); }

.km-ecosystem-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--km-ctl-sm);
  padding: 0 12px;
  border: 1px solid var(--km-line-strong);
  font-family: var(--km-font-heading);
  font-size: var(--km-label-lg);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--km-text);
  transition: background var(--m-fast) var(--e-in);
}

.km-ecosystem-btn:hover { background: var(--km-ink-7); }

.km-header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  font-family: var(--km-font-heading);
  font-size: var(--km-body-sm);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.km-header-nav a { color: var(--km-neutral-900); }

.km-header-nav a[aria-current] {
  color: var(--km-accent-900);
  border-bottom: 2px solid var(--km-accent);
  padding-bottom: 3px;
}

/* km-allow-raw: header search measure — a reading width, not a spacing step */
.km-header-search { flex: 1; max-width: 600px; }

/* ── EcosystemDrawer — 12px drop + scrim, --m-panel ──────────────────────── */

.km-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--km-accent-900) 46%, transparent);
  animation: km-fade var(--m-panel) var(--e-in) both;
}

.km-drawer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 100%;
  overflow-y: auto;
  background: var(--km-bg);
  border-bottom: 1px solid var(--km-line);
  animation: km-drop var(--m-panel) var(--e-in) both;
}

.km-drawer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: var(--km-accent-900);
  color: var(--km-bg);
}

.km-drawer-head .km-label { color: color-mix(in srgb, var(--km-bg) 72%, transparent); }

.km-drawer-body {
  max-width: var(--km-shell);
  margin-inline: auto;
  /* km-allow-raw: drawer body inset — a page gutter */
  padding: 20px 24px 32px;
}

.km-drawer-cat {
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--km-text-3);
  padding: 14px 0 6px;
}

.km-drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--km-ink-20);
  border: 1px solid var(--km-ink-20);
}

.km-drawer-item {
  background: var(--km-bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  text-align: left;
  transition: background var(--m-fast) var(--e-in), box-shadow var(--m-fast) var(--e-in);
}

.km-drawer-item:hover { background: var(--km-tint); box-shadow: inset 0 -3px 0 var(--km-accent); }

.km-drawer-item[aria-current='true'] { box-shadow: inset 0 -3px 0 var(--km-accent-line); }

.km-drawer-name {
  font-family: var(--km-font-heading);
  font-weight: var(--km-font-heading-weight);
  font-size: var(--km-h3);
  line-height: 1;
  color: var(--km-text);
}

/* km-allow-raw: media condition — var() is not legal here; 1023 = theme.json laptop 1024 minus one */
@media (max-width: 1023px) { .km-drawer-grid { grid-template-columns: repeat(2, 1fr); } }
/* km-allow-raw: media condition — var() is not legal here; 599 has no counterpart in theme.json breakpoints */
@media (max-width: 599px) { .km-drawer-grid { grid-template-columns: 1fr; } }

/* ── Footer — the one dark field. Steel as ground, type reversed to paper.
 * Secondary text never exceeds 72% opacity (screen 45). ─────────────────── */

.km-footer {
  margin-top: auto;
  background: var(--km-accent-900);
  color: color-mix(in srgb, var(--km-bg) 84%, transparent);
  /* km-allow-raw: footer inset — a page gutter */
  padding: 40px 24px 28px;
}

.km-footer-grid {
  max-width: var(--km-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: var(--km-gap-lg);
}

.km-footer h4 {
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--km-bg) 62%, transparent);
  margin-bottom: var(--km-gap-xs);
}

.km-footer a,
.km-footer button {
  display: block;
  padding: var(--km-gap-xs) 0;
  text-align: left;
  font-size: var(--km-body-sm);
  color: color-mix(in srgb, var(--km-bg) 84%, transparent);
}

.km-footer a:hover { color: var(--km-bg); }

.km-footer p,
.km-footer-legal {
  font-size: var(--km-body-xs);
  line-height: 1.55;
  color: color-mix(in srgb, var(--km-bg) 72%, transparent);
}

.km-footer-rule {
  max-width: var(--km-shell);
  margin: var(--km-gap-lg) auto 0;
  padding-top: var(--km-pad-panel);
  border-top: 1px solid color-mix(in srgb, var(--km-bg) 20%, transparent);
}

.km-footer .km-btn--secondary {
  border-color: color-mix(in srgb, var(--km-bg) 34%, transparent);
  color: var(--km-bg);
}

/* km-allow-raw: media condition — var() is not legal here; 1023 = theme.json laptop 1024 minus one */
@media (max-width: 1023px) { .km-footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
/* km-allow-raw: media condition — var() is not legal here; 599 has no counterpart in theme.json breakpoints */
@media (max-width: 599px) { .km-footer-grid { grid-template-columns: 1fr; } }

/* ── Mobile: bottom nav + drawer triggers ────────────────────────────────── */

.km-bottom-nav { display: none; }

/* km-allow-raw: media condition — var() is not legal here; 920 has no counterpart in theme.json breakpoints */
@media (max-width: 920px) {
  .km-header-nav,
  .km-header-search { display: none; }

  /* Sign-in and Panel move to the bottom bar and the drawer; keeping them in the
     app bar overflows the 390 floor (the design's narrowest supported width). */
  .km-header-bar > .km-btn { display: none; }
  .km-header-bar { gap: var(--km-gap-xs); padding: 8px 16px; }
  .km-wordmark { font-size: 18px; }

  .km-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 58;
    display: flex;
    align-items: stretch;
    background: var(--km-bg);
    border-top: 1px solid var(--km-line);
  }

  .km-bottom-nav > * {
    flex: 1;
    /* km-allow-raw: bottom-nav height on mobile — one component */
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: var(--km-font-heading);
    font-size: var(--km-label-lg);
    font-weight: var(--km-font-heading-weight);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--km-text-3);
  }

  .km-bottom-nav > [aria-current] {
    color: var(--km-accent-900);
    box-shadow: inset 0 2px 0 var(--km-accent);
  }

  /* km-allow-raw: clearance for the fixed bottom nav above it */
  main { padding-bottom: 92px; }
}


/* ── styles/panel.css ── */
/* @kolay/ekosistem-ui · panel.css
 * The club/vendor panel: PanelNav, work-list tables, bulk actions, wizard,
 * status vocabulary, attendance, first-run.
 * Source: handoff screens 05b, 06, 17, 18, 19, 22, 24, 53, 54, 56, 57, 71–83.
 * The panel is migration step 4 — the permission model is verified per repo. */

.km-panel {
  display: grid;
  /* km-allow-raw: PanelNav rail width — a layout measure, not a spacing step */
  grid-template-columns: 216px 1fr;
  min-height: 100dvh;
  background: var(--km-bg);
}

.km-panel-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--km-ctl-lg);
  padding: 0 20px;
  background: var(--km-surface);
  border-bottom: 1px solid var(--km-line);
}

/* ── PanelNav ────────────────────────────────────────────────────────────── */

.km-panel-nav {
  border-right: 1px solid var(--km-line);
  padding: 12px 0;
  background: var(--km-surface-2);
}

.km-panel-nav a,
.km-panel-nav button {
  display: flex;
  align-items: center;
  gap: var(--km-gap-xs);
  width: 100%;
  min-height: var(--km-ctl);
  padding: 0 16px;
  text-align: left;
  font-size: var(--km-body-sm);
  color: var(--km-text-2);
  border-left: 3px solid transparent;
  transition: background var(--m-fast) var(--e-in), border-color var(--m-fast) var(--e-in);
}

.km-panel-nav a:hover,
.km-panel-nav button:hover { background: var(--km-tint); }

.km-panel-nav [aria-current] {
  background: var(--km-tint);
  border-left-color: var(--km-accent);
  color: var(--km-accent-900);
  font-weight: 600;
}

.km-panel-nav-group {
  padding: 16px 16px 6px;
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--km-text-3);
}

.km-panel-nav-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--km-text-3);
}

/* km-allow-raw: panel content inset — a page gutter, not a spacing step */
.km-panel-main { padding: 20px 24px 48px; min-width: 0; }

/* ── Work list — the panel is a queue, not a dashboard (screen 78) ───────── */

.km-worklist {
  border: 1px solid var(--km-line);
  background: var(--km-paper);
}

.km-worklist-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--km-gap-xs) 14px;
  background: var(--km-surface);
  border-bottom: 1px solid var(--km-line);
}

.km-worklist-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.km-datarow {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: var(--km-ctl-lg);
  padding: 0 14px;
  border-bottom: 1px solid var(--km-hair);
  font-size: var(--km-body-xs);
  transition: background var(--m-fast) var(--e-in);
}

.km-datarow:hover { background: var(--km-tint); }
.km-datarow[data-selected='true'] { background: var(--km-tint); box-shadow: inset 3px 0 0 var(--km-accent-line); }

/* Canonical column templates (screens 18, 73, 75). Each width is sized to the
 * content of its column — a date, a status word, a currency amount — so none of
 * them is a design step and none has a token. */
/* km-allow-raw: column template — widths sized to column content */
.km-cols-attendees { grid-template-columns: 36px 1fr 150px 118px 132px 140px 104px; }
/* km-allow-raw: column template — widths sized to column content */
.km-cols-events    { grid-template-columns: 36px 1fr 120px 120px 110px 120px; }
/* km-allow-raw: column template — widths sized to column content */
.km-cols-payments  { grid-template-columns: 1fr 130px 120px 120px 120px; }

/* ── Bulk action bar ─────────────────────────────────────────────────────── */

.km-bulkbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--km-banner);
  color: var(--km-bg);
  font-size: var(--km-body-sm);
  animation: km-drop var(--m-base) var(--e-in) both;
}

.km-bulkbar button {
  font-family: var(--km-font-heading);
  font-size: var(--km-label-lg);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--km-bg);
  padding: 8px var(--km-gap-xs);
}

.km-bulkbar button:hover { background: color-mix(in srgb, var(--km-bg) 12%, transparent); }

/* ── Status vocabulary — one word set across the whole panel ─────────────
 * taslak · yayında · dolu · iptal · ertelendi · beklemede · onaylı · iade.
 * A status is a word with a shape, never a colour alone. */

.km-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--km-font-heading);
  font-size: var(--km-label);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--km-line);
  color: var(--km-text-2);
  white-space: nowrap;
}

.km-status[data-status='yayında'],
.km-status[data-status='onaylı'] { background: var(--km-accent-line); border-color: var(--km-accent-line); color: var(--km-bg); }

.km-status[data-status='taslak'],
.km-status[data-status='beklemede'] { border-style: dashed; border-color: var(--km-ink-30); color: var(--km-text-3); }

.km-status[data-status='iptal'],
.km-status[data-status='iade'] { border-color: var(--km-error); color: var(--km-error); }

.km-status[data-status='dolu'],
.km-status[data-status='ertelendi'] { background: var(--km-surface); }

/* ── Wizard — horizontal 8px step move, direction-aware (screen 22) ──────── */

.km-wizard-steps {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--km-ink-20);
  border: 1px solid var(--km-line);
  margin-bottom: var(--km-gap-block);
}

.km-wizard-step {
  flex: 1;
  background: var(--km-bg);
  padding: var(--km-gap-xs) 14px;
  font-family: var(--km-font-heading);
  font-size: var(--km-label-lg);
  font-weight: var(--km-font-heading-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--km-text-3);
}

.km-wizard-step[aria-current='step'] {
  background: var(--km-tint);
  color: var(--km-accent-900);
  box-shadow: inset 0 -3px 0 var(--km-accent);
}

.km-wizard-step[data-done='true'] { color: var(--km-text-2); }

.km-wizard-panel { animation: km-fade var(--m-base) var(--e-in) both; }

/* ── Attendance (screen 53) — one tap per person, --km-tap targets ───────── */

.km-attend-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: var(--km-tap);
  padding: 0 12px;
  border-bottom: 1px solid var(--km-hair);
}

.km-attend-row[data-present='true'] { background: var(--km-tint); }

/* ── First run / onboarding checklist (screen 76) ────────────────────────── */

.km-checklist { border: 1px solid var(--km-line); background: var(--km-bg); }

.km-checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--km-ctl-lg);
  padding: 0 16px;
  border-bottom: 1px solid var(--km-hair);
}

.km-checklist-item[data-done='true'] { color: var(--km-text-3); }

/* ── Panel at 768 and below: nav becomes a bottom bar, rows become cards ─── */

/* km-allow-raw: media condition — var() is not legal here; 1023 = theme.json laptop 1024 minus one */
@media (max-width: 1023px) {
  .km-panel { grid-template-columns: 1fr; }
  .km-panel-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 58;
    display: flex;
    padding: 0;
    border-right: 0;
    border-top: 1px solid var(--km-line);
    background: var(--km-bg);
  }
  .km-panel-nav-group { display: none; }
  .km-panel-nav a,
  .km-panel-nav button {
    flex: 1;
    /* km-allow-raw: bottom-nav height on the mobile panel — one component */
    min-height: 64px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 4px;
    border-left: 0;
    font-size: var(--km-label-lg);
    text-align: center;
  }
  .km-panel-nav [aria-current] { box-shadow: inset 0 2px 0 var(--km-accent); }
  /* km-allow-raw: clearance for the fixed bottom nav above it */
  .km-panel-main { padding-bottom: 92px; }
}

/* km-allow-raw: media condition — var() is not legal here; 767 = theme.json tablet 768 minus one */
@media (max-width: 767px) {
  .km-datarow {
    grid-template-columns: 1fr !important;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
  }
  .km-datarow > [data-col-label]::before {
    content: attr(data-col-label);
    display: block;
    font-family: var(--km-font-heading);
    font-size: var(--km-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--km-text-3);
  }
}



/* ── module accent ── */
/* GENERATED by scripts/build-tokens.mjs from theme.json — do not edit.
 * @kolay/ekosistem-ui · Industry design system.
 * Every colour, size, font and duration in the ecosystem comes from this file.
 * A raw hex/px/font-name in a consuming repo fails the `no-raw-value` lint. */

/* Module accent override — auction · kolayacikarttirma.com
 * The ONE repo-specific line (screen 29). The ramp below is derived from the accent in OKLCH, not hand-picked.
 * Source: muted from #37474F. Load AFTER tokens.css. */
:root {
  --km-accent: #4b849f;
  --km-accent-line: #34657b;
  --km-tint: #ebf7fd;
  --km-accent-100: #ebf7fd;
  --km-accent-200: #d1edfc;
  --km-accent-300: #a9ddf8;
  --km-accent-400: #87c1dd;
  --km-accent-500: #66a2be;
  --km-accent-600: #4a839e;
  --km-accent-700: #34657b;
  --km-accent-800: #22485a;
  --km-accent-900: #162f3b;
}


/* ══════════════════════════════════════════════════════════════════════════
   LEGACY COMPAT — the pre-Industry token names, repointed at the new system.
   Migration step 1 (screen 29): a repo drops its own palette and takes this
   file. Nothing below introduces a value; every line resolves to an Industry
   token. Remove this block once the repo has completed step 3 (arama) and no
   view references an old name.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Ink scale → the neutral ramp, same perceptual ladder. */
  --km-ink-900: var(--km-text);
  --km-ink-700: var(--km-neutral-900);
  --km-ink-600: var(--km-text-2);
  --km-ink-500: var(--km-text-3);
  --km-ink-400: var(--km-neutral-600);
  --km-ink-300: var(--km-neutral-400);
  --km-ink-200: var(--km-neutral-300);

  /* Paper → the ground. The system's page is #f2f2f3, not white; white is kept
     only for data surfaces (inputs, result tables), which is what --km-paper
     meant in practice. */
  --km-paper-2: var(--km-bg);
  --km-paper-3: var(--km-surface-2);

  /* Brand "derin deniz" → the accent ramp's deep steps. */
  --km-deep: var(--km-accent-line);
  --km-deep-2: var(--km-accent);
  --km-deep-3: var(--km-accent-900);
  --km-deep-soft: var(--km-tint);

  /* The amber CTA is gone: the ecosystem has one accent and it is steel. */
  --km-accent-2: var(--km-accent-600);
  --km-accent-soft: var(--km-tint);
  --km-mod: var(--km-accent);

  /* Semantic colours. The system carries no green/amber/red palette — status is
     a word plus a shape (screen 26). These resolve to ink so a stale reference
     degrades to neutral instead of to an off-system hue. */
  --km-good: var(--km-accent-line);
  --km-good-soft: var(--km-tint);
  --km-warn: var(--km-text-2);
  --km-warn-soft: var(--km-surface);
  --km-bad: var(--km-error);
  --km-bad-soft: var(--km-surface);
  --km-soft: var(--km-surface-2);

  /* Spacing → the system ladder (density 0.85 is already baked in). */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 20px;
  --s-6: var(--km-gap-block); --s-8: 32px; --s-10: 40px; --s-12: var(--km-tap); --s-16: 64px;

  /* Radius → 0. Industry has no rounded object. */
  --r-1: var(--km-radius); --r-2: var(--km-radius); --r-3: var(--km-radius);
  --r-4: var(--km-radius); --r-pill: var(--km-radius);

  /* Type scale → the system scale. */
  --t-12: var(--km-label-lg); --t-13: var(--km-body-xs); --t-14: var(--km-body-sm);
  --t-16: var(--km-body);     --t-18: 18px;              --t-22: var(--km-h3);
  --t-28: 28px;               --t-36: var(--km-h1);

  /* Elevation → none. The system is a line drawing; only the dialog layer lifts. */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 3px 10px color-mix(in srgb, var(--km-text) 16%, transparent);
  --shadow-4: 0 12px 32px color-mix(in srgb, var(--km-text) 22%, transparent);

  /* Fonts. */
  --font-sans: var(--km-font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* De-rounding. Legacy views set border-radius inline (`border-radius:10px`), so a
   token cannot reach them — only a rule can. This is the one !important in the
   system and it exists because "do not round cards, figures or buttons" is a
   hard rule of the design. It stops being needed the moment a view is rewritten
   against the new component classes, and it is scoped away from third-party
   widgets (maps, embeds) that legitimately draw their own chrome. */
body :not([class*='gm-']):not([class*='maplibre']):not([class*='leaflet']) {
  border-radius: 0 !important;
}

/* Headings adopt the condensed face even in views that still use --font-sans. */
h1, h2, h3, h4, h5, h6 { font-family: var(--km-font-heading); }