/* ==========================================================================
   components.css — reusable UI components of the Ceyhan OSB site.
   Loaded after tokens.css, base.css and layout.css. Only design tokens are used
   (no raw colour values in this file). BEM naming, low specificity, no important-overrides,
   mobile-first (breakpoints 480 / 768 / 1024 / 1280 / 1440 / 1600), transitions use
   --dur-fast / --dur-base (they collapse under prefers-reduced-motion, see tokens.css).
   Reference and markup snippets: docs/components.md · live surface: /_styleguide.
   Sections:
     01 Scope helpers          08 Cards & tiles            15 Pagination · breadcrumb · pager
     02 Buttons · links        09 Date tile · list rows    16 Toast · dialog
     03 Eyebrow · headings     10 Documents               17 Lightbox · map viewer
     04 Chips · badges · tags  11 Tables                   18 Empty state · notes · CTA
     05 Tabs                   12 Facts · steps · lists    19 TOC · legal headings
     06 Media · skeleton       13 Accordion                20 Grids (container-driven)
     07 Stats · quotes         14 Forms                    21 Motion
     22 Home: hero slider · mosaic · logo marquee · partner logos · announcement panel · contact list · map placeholder
     23 Page patterns of the Kurumsal + Yatırım pages (phase 4)
   ========================================================================== */

/* ==========================================================================
   01 · Scope helpers
   ========================================================================== */

/* Navy surfaces: focus ring switches to the light accent so it stays visible. */
.on-dark {
  --focus-color: var(--color-sky-400);
  color: var(--color-on-image);
}

/* Small caption / meta text (dates, sizes, helper lines). */
.meta {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

/* Stretched link: makes a whole card clickable from one anchor inside it. */

/* Rich-text links must not restyle components placed inside .prose. */
.prose .button,
.prose .text-link,
.prose .chip,
.prose .file-chip {
  text-decoration: none;
}

.prose .button {
  color: var(--button-fg);
}

.prose .text-link {
  color: var(--text-link-color);
}

/* ==========================================================================
   02 · Buttons · text links
   .button + --primary(default) --secondary --ghost --on-dark --outline-on-dark
   sizes --sm --lg · --icon (square) --round · --block · .is-loading · :disabled
   ========================================================================== */

.button {
  --button-bg: var(--color-navy-800);
  --button-fg: var(--color-white);
  --button-border: var(--color-navy-800);
  --button-bg-hover: var(--color-navy-900);
  --button-fg-hover: var(--button-fg);
  --button-border-hover: var(--color-navy-900);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: var(--space-10) var(--space-20);
  border: 1px solid var(--button-border);
  border-radius: var(--radius-sm);
  background: var(--button-bg);
  color: var(--button-fg);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-button-lh);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.button:hover {
  border-color: var(--button-border-hover);
  background: var(--button-bg-hover);
  color: var(--button-fg-hover);
}

.button:active {
  transform: scale(0.98);
}

.button > .icon {
  --icon-size: 16px;
}

/* arrow icons nudge 3 px toward their direction on hover (never shifts layout) */
.button__arrow,
.text-link__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .button:hover .button__arrow,
  .text-link:hover .text-link__arrow {
    transform: translateX(3px);
  }
}

.button--primary {
  /* explicit alias of the default look */
  --button-bg: var(--color-navy-800);
}

.button--secondary {
  --button-bg: var(--color-white);
  --button-fg: var(--color-navy-800);
  --button-border: var(--color-control-border);
  --button-bg-hover: var(--color-surface);
  --button-border-hover: var(--color-navy-800);
}

.button--ghost {
  --button-bg: transparent;
  --button-fg: var(--color-navy-800);
  --button-border: transparent;
  --button-bg-hover: var(--color-surface);
  --button-border-hover: transparent;
}

/* white button on navy (header CTA, CTA bands) */
.button--on-dark {
  --button-bg: var(--color-white);
  --button-fg: var(--color-navy-800);
  --button-border: var(--color-white);
  --button-bg-hover: var(--color-on-image);
  --button-border-hover: var(--color-on-image);
  --focus-color: var(--color-sky-400);
}

.button--outline-on-dark {
  --button-bg: transparent;
  --button-fg: var(--color-white);
  --button-border: var(--color-on-dark-border);
  --button-bg-hover: var(--color-sheen);
  --button-border-hover: var(--color-on-dark);
  --focus-color: var(--color-sky-400);
}

.button--sm {
  min-height: 44px;
  padding: var(--space-8) calc(var(--space-12) + var(--space-2));
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.button--lg {
  min-height: 48px;
  padding: var(--space-12) var(--space-24);
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .button--sm {
    min-height: 36px;
  }
}

/* square icon-only button; --round for slider arrows */
.button--icon {
  width: 44px;
  padding: 0;
}

.button--icon.button--sm {
  width: 44px;
}

.button--icon.button--lg {
  width: 48px;
}

@media (min-width: 1024px) {
  .button--icon.button--sm {
    width: 36px;
  }
}

.button--icon > .icon {
  --icon-size: 18px;
}

.button--round {
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-control);
}

.button--block {
  display: flex;
  width: 100%;
}

/* states */
.button.is-loading,
.button[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
}

.button.is-loading > *,
.button[aria-busy="true"] > * {
  opacity: 0;
}

.button.is-loading::after,
.button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  border: 2px solid var(--button-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin 700ms linear infinite;
}

.button:disabled,
.button[aria-disabled="true"],
.button.is-disabled {
  --button-bg: var(--color-neutral-bg);
  --button-fg: var(--color-text-muted);
  --button-border: var(--color-border);
  --button-bg-hover: var(--color-neutral-bg);
  --button-border-hover: var(--color-border);
  cursor: not-allowed;
  transform: none;
}

.button--on-dark:disabled,
.button--outline-on-dark:disabled,
.button--on-dark.is-disabled,
.button--outline-on-dark.is-disabled {
  --button-bg: var(--color-sheen);
  --button-fg: var(--color-on-dark);
  --button-border: var(--color-on-dark-border);
  --button-bg-hover: var(--color-sheen);
  --button-border-hover: var(--color-on-dark-border);
}

/* forced-state helpers for the styleguide (real classes, no scripting) */
.button.is-hover {
  border-color: var(--button-border-hover);
  background: var(--button-bg-hover);
  color: var(--button-fg-hover);
}

.button.is-hover .button__arrow {
  transform: translateX(3px);
}

.button.is-focus {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* copy button (IBAN etc.) — behaviour: data-copy / data-copy-done, JS adds .is-copied */
.copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: var(--space-10) var(--space-20);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy-800);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-button-lh);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.copy-button:hover {
  border-color: var(--color-navy-800);
  background: var(--color-surface);
}

.copy-button--on-dark {
  --focus-color: var(--color-sky-400);
  border-color: var(--color-white);
}

.copy-button--on-dark:hover {
  border-color: var(--color-on-image);
  background: var(--color-on-image);
}

.copy-button > .icon {
  --icon-size: 16px;
}

.copy-button__icon--done {
  display: none;
}

.copy-button.is-copied,
.copy-button.is-copied:hover {
  border-color: var(--color-success-bg);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.copy-button.is-copied .copy-button__icon--idle {
  display: none;
}

.copy-button.is-copied .copy-button__icon--done {
  display: inline-block;
}

/* text link with arrow */
.text-link {
  --text-link-color: var(--color-navy-800);
  --text-link-hover: var(--color-blue-600);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  color: var(--text-link-color);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-button-lh);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.text-link:hover,
.text-link.is-hover {
  color: var(--text-link-hover);
}

.text-link > .icon {
  --icon-size: 16px;
}

.text-link--accent {
  --text-link-color: var(--color-blue-600);
  --text-link-hover: var(--color-navy-800);
}

.text-link--on-dark {
  --text-link-color: var(--color-white);
  --text-link-hover: var(--color-sky-400);
  --focus-color: var(--color-sky-400);
}

.text-link--sm {
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

@media (min-width: 1024px) {
  .text-link {
    min-height: 0;
  }
}

/* ==========================================================================
   03 · Eyebrow · section heading
   ========================================================================== */

.eyebrow {
  display: block;
  margin: 0;
  color: var(--color-blue-600);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}

.eyebrow--muted {
  color: var(--color-text-muted);
}

.eyebrow--on-dark {
  color: var(--color-sky-400);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.section-heading__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
  text-wrap: balance;
}

.section-heading__lead {
  max-width: 46rem;
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
}

/* smaller sub-section title: Figma 28/36 */
.section-heading--sm .section-heading__title {
  font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  line-height: 1.286;
}

.section-heading--center {
  align-items: center;
  text-align: center;
}

.section-heading--on-dark .section-heading__title {
  color: var(--color-white);
}

.section-heading--on-dark .section-heading__lead {
  color: var(--color-on-image);
}

/* title block on the left, action link on the right ("Diğer haberler … Tüm haberler →") */
.section-heading--split {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12) var(--space-24);
}

.section-heading__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

/* ==========================================================================
   04 · Chips · badges · tags · file-type chips
   ========================================================================== */

/* filter chip / choice chip — works on <a>, <button> and <label><input type=radio|checkbox> */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* one scrolling row on small screens (documents / announcement filters) */
.chip-list--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: var(--space-4);
  scrollbar-width: none;
}

.chip-list--scroll::-webkit-scrollbar {
  display: none;
}

.chip-list--scroll > * {
  flex: none;
  max-width: 85vw;
}

@media (min-width: 768px) {
  .chip-list--scroll {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .chip-list--scroll > * {
    flex: 0 1 auto;
    max-width: 100%;
  }
}

.chip {
  --chip-bg: var(--color-white);
  --chip-fg: var(--color-slate-600);
  --chip-border: var(--color-border);
  --chip-count: var(--color-text-muted);
  --chip-bg-hover: var(--color-white);
  --chip-border-hover: var(--color-control-border);
  --chip-fg-hover: var(--color-navy-800);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: calc(var(--space-10) - 1px) calc(var(--space-16) + var(--space-2) - 1px);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-button-lh);
  text-decoration: none;
  white-space: normal;   /* a chip only wraps when its label is wider than the row (a very long album or category name) */
  overflow-wrap: anywhere;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.chip:hover,
.chip.is-hover {
  border-color: var(--chip-border-hover);
  background: var(--chip-bg-hover);
  color: var(--chip-fg-hover);
}

.chip__count {
  color: var(--chip-count);
  font-size: var(--text-small-size);
  font-weight: var(--weight-regular);
  line-height: var(--text-small-lh);
  font-variant-numeric: tabular-nums;
}

/* selected state: class, aria, or a checked radio/checkbox inside the chip */
.chip.is-selected,
.chip[aria-pressed="true"],
.chip[aria-current="true"],
.chip[aria-current="page"],
.chip:has(.chip__input:checked) {
  --chip-bg: var(--color-navy-800);
  --chip-fg: var(--color-white);
  --chip-border: var(--color-navy-800);
  --chip-count: var(--color-on-dark);
  --chip-bg-hover: var(--color-navy-900);
  --chip-border-hover: var(--color-navy-900);
  --chip-fg-hover: var(--color-white);
}

.chip__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip:has(.chip__input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.chip.is-disabled,
.chip:disabled {
  --chip-fg: var(--color-text-muted);
  --chip-bg: var(--color-neutral-bg);
  --chip-border: var(--color-border);
  --chip-bg-hover: var(--color-neutral-bg);
  --chip-border-hover: var(--color-border);
  --chip-fg-hover: var(--color-text-muted);
  cursor: not-allowed;
}

.chip--sm {
  gap: var(--space-6);
  padding: calc(var(--space-8) - 1px) calc(var(--space-12) + var(--space-2) - 1px);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

@media (min-width: 1024px) {
  .chip {
    min-height: 0;
  }
}

.chip--on-dark {
  --chip-bg: transparent;
  --chip-fg: var(--color-on-image);
  --chip-border: var(--color-on-dark-border);
  --chip-count: var(--color-on-dark);
  --chip-bg-hover: var(--color-sheen);
  --chip-border-hover: var(--color-on-dark);
  --chip-fg-hover: var(--color-white);
  --focus-color: var(--color-sky-400);
}

.chip--on-dark.is-selected,
.chip--on-dark[aria-pressed="true"],
.chip--on-dark[aria-current="true"],
.chip--on-dark[aria-current="page"],
.chip--on-dark:has(.chip__input:checked) {
  --chip-bg: var(--color-white);
  --chip-fg: var(--color-navy-800);
  --chip-border: var(--color-white);
  --chip-count: var(--color-text-muted);
  --chip-bg-hover: var(--color-on-image);
  --chip-border-hover: var(--color-on-image);
  --chip-fg-hover: var(--color-navy-800);
}

/* badge: category / status label. Tones: neutral info success warning error navy */
.badge {
  --badge-bg: var(--color-neutral-bg);
  --badge-fg: var(--color-text-muted);
  --badge-dot: var(--color-slate-500);
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-xs);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-small-lh);
  white-space: nowrap;
}

.badge--neutral {
  --badge-bg: var(--color-neutral-bg);
  --badge-fg: var(--color-text-muted);
  --badge-dot: var(--color-slate-500);
}

.badge--info {
  --badge-bg: var(--color-info-bg);
  --badge-fg: var(--color-blue-600);
  --badge-dot: var(--color-blue-500);
}

.badge--success {
  --badge-bg: var(--color-success-bg);
  --badge-fg: var(--color-success-text);
  --badge-dot: var(--color-success);
}

.badge--warning {
  --badge-bg: var(--color-warning-bg);
  --badge-fg: var(--color-warning-text);
  --badge-dot: var(--color-warning);
}

.badge--error {
  --badge-bg: var(--color-error-bg);
  --badge-fg: var(--color-error-text);
  --badge-dot: var(--color-red);
}

.badge--navy {
  --badge-bg: color-mix(in srgb, var(--color-navy-800) 10%, var(--color-white));
  --badge-fg: var(--color-navy-800);
  --badge-dot: var(--color-navy-800);
}

.badge--dot::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--badge-dot);
}

/* status without a filled pill: dot + text */
.badge--plain {
  padding: 0;
  background: transparent;
}

.badge--lg {
  padding: var(--space-6) var(--space-12);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

/* tag list: founding partners, keywords */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: var(--space-10) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

a.tag:hover,
button.tag:hover {
  border-color: var(--color-control-border);
  background: var(--color-surface);
}

/* file-type chip: pdf red · doc blue · xls green · zip grey · generic; --link for external targets */
.file-chip {
  --file-bg: var(--color-neutral-bg);
  --file-fg: var(--color-slate-600);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--file-bg);
  color: var(--file-fg);
  font-size: var(--text-small-size);
  font-weight: var(--weight-bold);
  line-height: var(--text-small-lh);
  text-transform: uppercase;
  letter-spacing: 0;
}

.file-chip--pdf {
  --file-bg: var(--color-error-bg);
  --file-fg: var(--color-error-text);
}

.file-chip--doc,
.file-chip--docx {
  --file-bg: var(--color-info-bg);
  --file-fg: var(--color-blue-600);
}

.file-chip--xls,
.file-chip--xlsx {
  --file-bg: var(--color-success-bg);
  --file-fg: var(--color-success-text);
}

.file-chip--zip,
.file-chip--rar {
  --file-bg: var(--color-neutral-bg);
  --file-fg: var(--color-text-muted);
}

.file-chip--link {
  --file-bg: var(--color-info-bg);
  --file-fg: var(--color-blue-600);
}

.file-chip > .icon {
  --icon-size: 22px;
}

.file-chip--sm {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   05 · Tabs (markup contract: data-tabs > .tabs__list[role=tablist] > .tabs__tab[role=tab])
   default = chip-like tabs · --underline = home announcements panel · --on-dark
   ========================================================================== */

.tabs__list {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  --tab-bg: var(--color-white);
  --tab-fg: var(--color-slate-600);
  --tab-border: var(--color-border);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: calc(var(--space-10) - 1px) calc(var(--space-16) + var(--space-2) - 1px);
  border: 1px solid var(--tab-border);
  border-radius: var(--radius-sm);
  background: var(--tab-bg);
  color: var(--tab-fg);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-button-lh);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.tabs__tab:hover {
  border-color: var(--color-control-border);
  color: var(--color-navy-800);
}

.tabs__tab[aria-selected="true"],
.tabs__tab.is-selected {
  --tab-bg: var(--color-navy-800);
  --tab-fg: var(--color-white);
  --tab-border: var(--color-navy-800);
}

.tabs__tab[aria-selected="true"]:hover,
.tabs__tab.is-selected:hover {
  border-color: var(--color-navy-900);
  color: var(--color-white);
}

.tabs__panel {
  margin-top: var(--space-24);
}

.tabs__panel:focus-visible {
  outline-offset: var(--space-4);
}

@media (min-width: 1024px) {
  .tabs__tab {
    min-height: 0;
  }
}

/* underline tabs: text only, active tab carries a 2 px rule that overlaps the list rule */
.tabs--underline .tabs__list {
  gap: var(--space-24);
  padding-bottom: 0;
  border-bottom: 1px solid var(--color-border);
}

.tabs--underline .tabs__tab {
  --tab-fg: var(--color-text-muted);
  --tab-rule: transparent;
  min-height: 48px;
  padding: var(--space-12) 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid var(--tab-rule);
  border-radius: 0;
  background: transparent;
  color: var(--tab-fg);
  font-size: 1rem;
  line-height: 1.15;
}

.tabs--underline .tabs__tab:hover {
  --tab-fg: var(--color-navy-800);
  --tab-rule: var(--color-control-border);
  border-color: transparent transparent var(--tab-rule);
  color: var(--tab-fg);
}

/* the colour is set again here: the filled-tab rule .tabs__tab[aria-selected]:hover would make it white on white */
.tabs--underline .tabs__tab[aria-selected="true"],
.tabs--underline .tabs__tab.is-selected,
.tabs--underline .tabs__tab[aria-selected="true"]:hover,
.tabs--underline .tabs__tab.is-selected:hover {
  --tab-fg: var(--color-navy-800);
  --tab-rule: var(--color-navy-800);
  border-color: transparent transparent var(--tab-rule);
  color: var(--tab-fg);
  background: transparent;
}

.tabs--underline .tabs__panel {
  margin-top: var(--space-20);
}

@media (min-width: 1024px) {
  .tabs--underline .tabs__tab {
    min-height: 56px;
  }
}

.tabs--on-dark {
  --focus-color: var(--color-sky-400);
}

.tabs--on-dark .tabs__tab {
  --tab-bg: transparent;
  --tab-fg: var(--color-on-image);
  --tab-border: var(--color-on-dark-border);
}

.tabs--on-dark .tabs__tab:hover {
  border-color: var(--color-on-dark);
  color: var(--color-white);
}

.tabs--on-dark .tabs__tab[aria-selected="true"],
.tabs--on-dark .tabs__tab.is-selected {
  --tab-bg: var(--color-white);
  --tab-fg: var(--color-navy-800);
  --tab-border: var(--color-white);
}

.tabs--on-dark .tabs__tab[aria-selected="true"]:hover,
.tabs--on-dark .tabs__tab.is-selected:hover {
  border-color: var(--color-white);
  color: var(--color-navy-800);
}

.tabs--on-dark.tabs--underline .tabs__list {
  border-bottom-color: var(--color-on-dark-border);
}

.tabs--on-dark.tabs--underline .tabs__tab {
  --tab-fg: var(--color-on-dark);
  --tab-rule: transparent;
  background: transparent;
}

.tabs--on-dark.tabs--underline .tabs__tab:hover {
  --tab-fg: var(--color-white);
  --tab-rule: var(--color-on-dark-border);
  color: var(--tab-fg);
}

.tabs--on-dark.tabs--underline .tabs__tab[aria-selected="true"],
.tabs--on-dark.tabs--underline .tabs__tab.is-selected,
.tabs--on-dark.tabs--underline .tabs__tab[aria-selected="true"]:hover,
.tabs--on-dark.tabs--underline .tabs__tab.is-selected:hover {
  --tab-fg: var(--color-white);
  --tab-rule: var(--color-sky-400);
  color: var(--tab-fg);
  background: transparent;
}

/* ==========================================================================
   06 · Media slots · zoomable · skeleton · map embed
   .media + --3x2 --4x3 --16x9 --16x10 --1x1 --portrait --auto · --contain (posters)
   --rounded-lg / --rounded-sm · --overlay (+ .media__caption)
   Focal point: inline --focus-x / --focus-y (data-driven, e.g. "30%").
   ========================================================================== */

.media {
  --media-ratio: 3 / 2;
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: var(--media-ratio);
  border-radius: var(--radius-md);
  background: var(--color-placeholder);
}

.media > img,
.media > picture,
.media > picture > img,
.media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.media--3x2 { --media-ratio: 3 / 2; }
.media--4x3 { --media-ratio: 4 / 3; }
.media--16x9 { --media-ratio: 16 / 9; }
.media--16x10 { --media-ratio: 16 / 10; }
.media--1x1 { --media-ratio: 1 / 1; }
.media--portrait { --media-ratio: 203 / 230; }
.media--rounded-lg { border-radius: var(--radius-lg); }

/* poster / portrait artwork with baked-in text: never cropped, centred on the surface tint */
.media--contain {
  background: var(--color-surface);
}

.media--contain > img,
.media--contain > picture > img {
  object-fit: contain;
  object-position: center;
}

/* placeholder label (used while an image is missing) */
.media__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  text-align: center;
}

.media--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--color-overlay-navy) 0%, transparent 62%);
  pointer-events: none;
}

.media__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: var(--space-16) var(--space-20);
  color: var(--color-white);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

/* click-to-zoom trigger (poster viewer, gallery tiles): anchor or button wrapping a .media */
.zoomable {
  position: relative;
  display: block;
  width: 100%;
  border-radius: inherit;
  cursor: zoom-in;
}

.zoomable__badge {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-navy-800);
  box-shadow: var(--shadow-control);
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .zoomable:hover .zoomable__badge {
    transform: scale(1.08);
  }
}

/* poster frame: bordered white card around a portrait notice image + hint */
.poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.poster > .zoomable,
.poster > .media {
  max-width: 44rem;
}

.poster__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  text-align: center;
}

@media (min-width: 768px) {
  .poster {
    padding: var(--space-16);
  }
}

/* loading shimmer */
.skeleton {
  display: block;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-placeholder) 0%, var(--color-surface) 45%, var(--color-placeholder) 90%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1400ms linear infinite;
}

.skeleton--text {
  height: 1em;
  border-radius: var(--radius-xs);
}

@keyframes skeleton-shimmer {
  from {
    background-position: 220% 0;
  }

  to {
    background-position: -120% 0;
  }
}

/* lazy Google Maps iframe: skeleton behind the frame, hidden once .is-loaded is set */
.map-embed {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: var(--color-placeholder);
}

.map-embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-embed__skeleton {
  position: absolute;
  inset: 0;
  border-radius: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.map-embed.is-loaded .map-embed__skeleton {
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 768px) {
  .map-embed {
    aspect-ratio: 3 / 1;
    min-height: 380px;
  }
}

/* ==========================================================================
   07 · Stat tile · price card · phase card · quotes
   ========================================================================== */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  container-type: inline-size;
}

.stat__value {
  color: var(--color-navy-800);
  /* scales with the tile so long values ("5.000 m³") never overflow; Figma 44/52/300 */
  font-size: clamp(1.75rem, 25cqi, var(--text-number-size));
  font-weight: var(--text-number-weight);
  line-height: var(--text-number-lh);
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}

.stat__label {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.stat--sm .stat__value {
  font-size: clamp(1.5rem, 20cqi, 2.125rem);
  line-height: 1.235;
}

.stat--wide {
  padding-inline: var(--space-28);
}

.stat--navy {
  border-color: var(--color-navy-800);
  background: var(--color-navy-800);
}

.stat--navy .stat__value {
  color: var(--color-white);
}

.stat--navy .stat__label {
  color: var(--color-on-dark);
}

/* price group card (A–D) */
.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.price-card__price {
  margin: 0;
  color: var(--color-navy-800);
  font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);
  font-weight: var(--weight-regular);
  line-height: 1.25;
  font-variant-numeric: lining-nums;
}

.price-card__unit {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.price-card__rows {
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.price-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-12);
  padding-top: var(--space-6);
}

.price-card__row dt {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.price-card__row dd {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

/* phase card (parcel status): label + badge, big value, note, progress */
.phase-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-12) + var(--space-2));
  min-width: 0;
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.phase-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.phase-card__value {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-number-size);
  font-weight: var(--text-number-weight);
  line-height: var(--text-number-lh);
}

.phase-card__note {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

@media (min-width: 768px) {
  .phase-card {
    padding: var(--space-32);
  }
}

/* pull quote: light accent bar + large light text (news detail highlight) */
.quote {
  margin: 0;
  padding: var(--space-8) 0 var(--space-8) var(--space-20);
  border-left: 4px solid var(--color-blue-500);
  color: var(--color-navy-800);
}

.quote__text {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: var(--weight-light);
  line-height: 1.36;
}

.quote__author {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-16);
}

.quote__name {
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

.quote__role {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

/* quote card: navy panel with a sky bar (Hakkımızda chairman quote) */
.quote--card {
  display: flex;
  gap: var(--space-20);
  padding: var(--space-28);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-navy-800);
  color: var(--color-white);
}

.quote--card::before {
  content: "";
  flex: none;
  align-self: stretch;
  width: 4px;
  border-radius: var(--radius-full);
  background: var(--color-sky-400);
}

.quote--card > div {
  flex: 1;
  min-width: 0;
}

.quote--card .quote__text {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.333;
}

.quote--card .quote__name {
  color: var(--color-white);
}

.quote--card .quote__role {
  color: var(--color-on-dark);
}

@media (min-width: 768px) {
  .quote--card {
    gap: var(--space-24);
    padding: var(--space-48);
  }
}

/* ==========================================================================
   08 · Cards & tiles
   .card (bordered white by default) + --bordered (alias) --flat --surface --navy --shadow
   --interactive --bar (32×3 accent bar) --pad-sm --pad-lg --pad-xl
   ========================================================================== */

.card {
  --card-pad: var(--space-24);
  --card-gap: var(--space-10);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-slate-600);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.card__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.card__text {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.card--surface {
  border-color: transparent;
  background: var(--color-surface);
}

.card--navy {
  --focus-color: var(--color-sky-400);
  border-color: var(--color-navy-800);
  background: var(--color-navy-800);
  color: var(--color-on-image);
}

.card--navy .card__title {
  color: var(--color-white);
}

.card--navy .card__text {
  color: var(--color-on-image);
}

.card--shadow {
  box-shadow: var(--shadow-soft);
}

.card--pad-sm {
  --card-pad: var(--space-16);
}

.card--pad-lg {
  --card-pad: var(--space-28);
}

@media (min-width: 768px) {
  .card--pad-lg {
    --card-pad: var(--space-32);
  }

  
}

/* location-card style: 32×3 accent bar above the content */
.card--bar {
  --card-pad: var(--space-24);
}

.card--bar::before {
  content: "";
  flex: none;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-blue-500);
}

@media (min-width: 768px) {
  .card--bar {
    --card-pad: var(--space-28);
  }
}

/* interactive: border colour + 2 px lift + soft shadow — no layout shift */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover,
.card--interactive.is-hover {
  border-color: var(--color-control-border);
  box-shadow: var(--shadow-soft);
}

@media (hover: hover) {
  .card--interactive:hover,
  .card--interactive.is-hover {
    transform: translateY(-2px);
  }
}

.card--navy.card--interactive:hover {
  border-color: var(--color-sky-400);
}

/* --- info card: label + value (contact tiles, tender info, neighbours) ---- */
.info-card {
  --card-pad: var(--space-20);
  --card-gap: var(--space-6);
}

@media (min-width: 768px) {
  .info-card {
    --card-pad: calc(var(--space-20) + var(--space-2)) var(--space-24);
  }
}

.info-card__label {
  margin: 0;
  color: var(--color-blue-600);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}

.info-card__label--muted {
  color: var(--color-text-muted);
}

.info-card__value {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  overflow-wrap: anywhere;
}

a.info-card__value:hover {
  color: var(--color-blue-600);
}

.info-card__text {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

/* --- statement card (mission / vision) ------------------------------------ */
.statement-card {
  --card-pad: var(--space-24);
  --card-gap: var(--space-16);
}

@media (min-width: 768px) {
  .statement-card {
    --card-pad: calc(var(--space-32) + var(--space-4));
  }
}

.statement-card__lead {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.statement-card__list {
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.card--navy .statement-card__lead {
  color: var(--color-white);
}

.card--navy .statement-card__list {
  border-top-color: var(--color-on-dark-border);
}

/* --- service card (infrastructure): title + status column, details column -- */
.service-card {
  --card-pad: var(--space-24);
  --card-gap: var(--space-20);
}

.service-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.service-card__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  font-weight: var(--weight-medium);
  line-height: 1.286;
  letter-spacing: -0.3px;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.service-card__lead {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

@media (min-width: 768px) {
  .service-card {
    --card-pad: var(--space-32);
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: var(--space-32);
    align-items: start;
  }
}

/* --- person / board card ---------------------------------------------------- */
.person-card {
  --card-pad: var(--space-12) var(--space-12) var(--space-20);
  --card-gap: var(--space-4);
}

.person-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-8) 0;
}

.person-card__name {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.person-card__role {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.person-card__role--accent {
  color: var(--color-blue-600);
}

.person-card__title {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
}

/* chairman: centred card, photo on top, left-aligned name and title underneath like the member cards (Figma 55:265) */
.person-card--featured {
  --card-pad: var(--space-16) var(--space-16) var(--space-24);
  gap: var(--space-20);
  width: 100%;
  max-width: 22.5rem;
  margin-inline: auto;
}

.person-card--featured .person-card__body {
  gap: var(--space-8);
  padding: var(--space-8);
  justify-content: center;
}

.person-card--featured .person-card__name {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
}

.person-card--featured .person-card__photo {
  --media-ratio: 310 / 340;
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .person-card--featured {
    --card-pad: var(--space-24) var(--space-24) var(--space-32);
  }
}

/* --- news: vertical card · featured (horizontal) · row -------------------- */
.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.news-card__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  transition: color var(--dur-fast) var(--ease-out);
}

.news-card__excerpt {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.news-card:hover .news-card__title,
.news-card.is-hover .news-card__title {
  color: var(--color-blue-600);
}

.news-card__media {
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.news-card:hover .news-card__media {
  box-shadow: var(--shadow-soft);
}

/* home featured story: larger ink title, 402×297 picture (Figma 46:200) */
.news-card--lg {
  gap: var(--space-16);
}

.news-card--lg .news-card__media {
  --media-ratio: 402 / 297;
}

.news-card--lg .news-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.news-card--lg .news-card__title {
  color: var(--color-ink);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.375;
}

/* news page featured card: horizontal, soft shadow */
.news-card--featured {
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  gap: var(--space-16);
}

.news-card--featured .news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-8) var(--space-8);
}

.news-card--featured .news-card__title {
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  line-height: 1.286;
  letter-spacing: -0.3px;
}

@media (min-width: 768px) {
  .news-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-32);
    padding: var(--space-16) var(--space-32) var(--space-16) var(--space-16);
  }

  .news-card--featured .news-card__body {
    padding: 0;
    gap: calc(var(--space-12) + var(--space-2));
  }
}

.news-list {
  display: flex;
  flex-direction: column;
}

.news-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
}

.news-row__media {
  --media-ratio: 200 / 130;
  flex: none;
  width: 112px;
}

.news-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.news-row__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  transition: color var(--dur-fast) var(--ease-out);
}

.news-row__arrow {
  flex: none;
  color: var(--color-blue-500);
  transition: transform var(--dur-fast) var(--ease-out);
}

.news-row:hover .news-row__title,
.news-row.is-hover .news-row__title {
  color: var(--color-blue-600);
}

@media (hover: hover) {
  .news-row:hover .news-row__arrow {
    transform: translateX(3px);
  }
}

@media (min-width: 768px) {
  .news-row {
    gap: var(--space-24);
    padding: var(--space-20) 0;
  }

  .news-row__media {
    width: 200px;
  }
}

/* compact row for the home news column: 132×100 thumb, ink title, no arrow */
.news-row--sm {
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-20) 0;
}

.news-row--sm .news-row__media {
  --media-ratio: 132 / 100;
  width: 96px;
  border-radius: var(--radius-sm);
}

.news-row--sm .news-row__title {
  color: var(--color-ink);
  font-size: 1.0625rem;
  line-height: 1.47;
}

.news-row--sm .news-row__arrow {
  display: none;
}

@media (min-width: 768px) {
  .news-row--sm .news-row__media {
    width: 132px;
  }
}

/* home carousel card (Figma 234:194): bordered tile, flush 394×300 picture, date + ink title (no excerpt) */
.news-card--tile {
  flex: 1;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.news-card--tile .news-card__media {
  --media-ratio: 394 / 300;
  border-radius: 0;
}

.news-card--tile .news-card__media > img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.news-card--tile:hover .news-card__media {
  box-shadow: none;
}

.news-card--tile .news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24) var(--space-24) var(--space-28);
}

.news-card--tile .news-card__date {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.429;
}

.news-card--tile .news-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;      /* Figma draws three lines at 1440; the 334 px cards of 768 and 1280 need a fourth */
  line-clamp: 4;
  color: var(--color-ink);
  font-size: 1.375rem;
  line-height: 1.32;
}

@media (hover: hover) {
  .news-card--tile:hover {
    box-shadow: var(--shadow-soft);
  }

  .news-card--tile:hover .news-card__media > img {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-card--tile:hover .news-card__media > img {
    transform: none;
  }
}

/* --- news carousel (home, 768 px up · Figma 234:193): native horizontal scroll with snap, two cards per page ------
   Markup: .news-carousel[data-news-carousel] > ul.news-carousel__track[data-news-track] > li.news-carousel__item > a.news-card--tile,
           then .news-carousel__controls[data-news-controls][hidden] (prev · dots · next). home.js scrolls page by page and
           reveals the controls; without it the track keeps a native scrollbar. The padding/negative margin pair gives the
           card shadow and the focus ring room inside the scroll box without moving the cards. */
.news-carousel {
  min-width: 0;
}

.news-carousel__track {
  display: grid;
  grid-auto-columns: calc((100% - var(--space-28)) / 2);
  grid-auto-flow: column;
  gap: var(--space-28);
  margin: calc(var(--space-6) * -1) calc(var(--space-8) * -1) calc(var(--space-22) * -1);
  padding: var(--space-6) var(--space-8) var(--space-22);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-8);
  list-style: none;
}

.js .news-carousel__track {
  scrollbar-width: none;
}

.js .news-carousel__track::-webkit-scrollbar {
  display: none;
}

.news-carousel__item {
  display: flex;
  min-width: 0;
  scroll-snap-align: start;
}

.news-carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  margin-top: var(--space-28);
}

.news-carousel__controls[hidden] {
  display: none;
}

.news-carousel__button.button--icon > .icon {
  width: 10px;
  height: 16px;
}

.news-carousel__dots {
  display: flex;
  align-items: center;
}

/* 18 px wide hit areas keep the Figma rhythm (10 px between dots); the arrows are the full-size alternative (WCAG 2.5.8) */
.news-carousel__dot {
  position: relative;
  flex: none;
  width: 18px;
  height: 44px;
  cursor: pointer;
}

.news-carousel__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: var(--radius-full);
  background: var(--color-tile);
  transition:
    width var(--dur-base) var(--ease-out),
    height var(--dur-base) var(--ease-out),
    margin var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.news-carousel__dot:hover::before {
  background: var(--color-slate-500);
}

.news-carousel__dot[aria-current="true"]::before {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--color-navy-800);
}

/* --- logo card (companies / stakeholders) ---------------------------------- */
.logo-card {
  --card-pad: var(--space-16) var(--space-16) var(--space-20);
  --card-gap: var(--space-16);
}

.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: var(--space-16);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.logo-tile > img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* CSS-only monogram fallback (initials in a circle) */
.logo-tile__initials {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-navy-800);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.logo-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 var(--space-4);
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

.logo-card__arrow {
  flex: none;
  color: var(--color-blue-500);
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .logo-card:hover .logo-card__arrow {
    transform: translateX(3px);
  }
}

/* --- bank card (navy) -------------------------------------------------------- */
.bank-card {
  --focus-color: var(--color-sky-400);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-navy-800);
  color: var(--color-white);
}

.bank-card__head,
.bank-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
}

.bank-card__head {
  align-items: flex-start;
}

.bank-card__bank {
  margin: var(--space-4) 0 0;
  color: var(--color-white);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.bank-card__currency {
  padding: var(--space-6) var(--space-12);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  color: var(--color-on-image);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-small-lh);
}

.bank-card__label {
  margin: 0;
  color: var(--color-on-dark);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}

.bank-card__number {
  margin: var(--space-6) 0 0;
  color: var(--color-white);
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  font-weight: var(--weight-regular);
  line-height: 1.444;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.bank-card__value {
  margin: var(--space-4) 0 0;
  color: var(--color-white);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

@media (min-width: 768px) {
  .bank-card {
    gap: var(--space-28);
    padding: var(--space-40);
  }
}

/* ==========================================================================
   09 · Date tile · list rows · list cards
   ========================================================================== */

.date-tile {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  min-height: 92px;
  padding: var(--space-10) 0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}

.date-tile__day {
  color: var(--color-blue-600);
  font-size: 1.875rem;
  font-weight: var(--weight-regular);
  line-height: 1.133;
  font-variant-numeric: lining-nums;
}

.date-tile__month {
  color: var(--color-navy-800);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-small-lh);
  text-transform: uppercase;
}

.date-tile__year {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

/* plain large numerals without a tile (home announcements panel) */
.date-tile--plain {
  width: 58px;
  min-height: 0;
  padding: 0;
  background: transparent;
}

.date-tile--plain .date-tile__day {
  font-size: 2.5rem;
  line-height: 1.15;
}

.date-tile--plain .date-tile__month,
.date-tile--plain .date-tile__year {
  color: var(--color-blue-600);
  font-size: 1.25rem;
  line-height: 1.15;
}

/* announcement list: one bordered panel, hairline separated rows */
.list-panel {
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

@media (min-width: 768px) {
  .list-panel {
    padding: var(--space-8) var(--space-28);
  }
}

.list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
}

.list-panel > .list-row:last-child,
.list-panel > :last-child .list-row:last-child {
  border-bottom: 0;
}

.list-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
}

.list-row__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  transition: color var(--dur-fast) var(--ease-out);
}

.list-row__arrow {
  flex: none;
  color: var(--color-blue-500);
  transition: transform var(--dur-fast) var(--ease-out);
}

.list-row:hover .list-row__title,
.list-row.is-hover .list-row__title {
  color: var(--color-blue-600);
}

@media (hover: hover) {
  .list-row:hover .list-row__arrow {
    transform: translateX(3px);
  }
}

@media (min-width: 768px) {
  .list-row {
    gap: var(--space-24);
    padding: var(--space-20) 0;
  }
}

/* tender row card: date tile + type line/title + action */
.list-card {
  --card-pad: var(--space-16);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.list-card__body {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.list-card__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.list-card__action {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .list-card {
    --card-pad: var(--space-24);
    flex-wrap: nowrap;
    gap: var(--space-24);
  }

  .list-card__body {
    flex-basis: 0;
  }

  .list-card__action {
    flex: none;
  }
}

/* ==========================================================================
   10 · Documents: .doc-row (+ file-chip) · .doc-group
   ========================================================================== */

.doc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.doc-row:hover,
.doc-row.is-hover {
  border-color: var(--color-control-border);
  box-shadow: var(--shadow-soft);
}

.doc-row__body {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.doc-row__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  overflow-wrap: anywhere;
}

.doc-row__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.doc-row__action {
  flex: 1 1 100%;
}

@media (min-width: 480px) {
  .doc-row {
    flex-wrap: nowrap;
    gap: var(--space-20);
    padding: var(--space-20);
  }

  .doc-row__body {
    flex-basis: 0;
  }

  .doc-row__action {
    flex: none;
  }
}

/* compact row inside a document group card: hairline separated, text-link download */
.doc-row--compact {
  gap: var(--space-12);
  padding: var(--space-16) 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.doc-row--compact:hover,
.doc-row--compact.is-hover {
  border-color: var(--color-border);
  box-shadow: none;
}

.doc-row--compact .doc-row__title {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.doc-row--compact .doc-row__action {
  flex: none;
  min-height: 44px;
  padding-inline: var(--space-4);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  --text-link-color: var(--color-blue-600);
  --text-link-hover: var(--color-navy-800);
}

.doc-row--compact .doc-row__body {
  flex-basis: 0;
}

.doc-row--compact.doc-row {
  flex-wrap: nowrap;
}

/* external target (e.g. mevzuat.gov.tr): external icon chip, "view" action */
.doc-row--external .file-chip {
  --file-bg: var(--color-info-bg);
  --file-fg: var(--color-blue-600);
}

/* document group card (Başvuru Evrakları sections) */
.doc-group {
  padding: var(--space-20) var(--space-16) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  scroll-margin-top: var(--space-96);
}

.doc-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8) var(--space-16);
  padding-bottom: var(--space-8);
}

.doc-group__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: var(--weight-medium);
  line-height: 1.31;
  letter-spacing: -0.3px;
}

.doc-group__count {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.doc-group__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-40);
}

@media (min-width: 768px) {
  .doc-group {
    padding: var(--space-28) var(--space-32) var(--space-12);
  }
}

@media (min-width: 1280px) {
  .doc-group__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   11 · Tables: .table-wrap > .table · --stacked (labelled cards below 768)
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  text-align: left;
}

.table caption {
  padding: var(--space-16) var(--space-24) var(--space-8);
  color: var(--color-navy-800);
  font-weight: var(--weight-medium);
  text-align: left;
}

.table th {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-small-lh);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

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

/* row header cell inside <tbody> keeps body styling */
.table tbody th {
  background: transparent;
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
  text-transform: none;
  white-space: normal;
}

.table__strong {
  color: var(--color-navy-800);
  font-weight: var(--weight-medium);
}

.table__medium {
  font-weight: var(--weight-medium);
}

.table tbody tr:hover td,
.table tbody tr.is-hover td {
  background: var(--color-surface);
}

@media (min-width: 1024px) {
  .table th {
    padding: calc(var(--space-12) + var(--space-2)) var(--space-24);
  }

  .table td {
    padding: calc(var(--space-16) + var(--space-2)) var(--space-24);
  }
}

/* below 768: each row becomes a card, cells show their data-label */
@media (max-width: 767px) {
  .table-wrap--stacked {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .table--stacked {
    min-width: 0;
  }

  .table--stacked,
  .table--stacked tbody,
  .table--stacked tr {
    display: block;
  }

  .table--stacked thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table--stacked tbody tr {
    margin-bottom: var(--space-12);
    padding: var(--space-4) var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
  }

  .table--stacked tbody tr:last-child {
    margin-bottom: 0;
  }

  .table--stacked td,
  .table--stacked tbody th {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: var(--space-12);
    padding: var(--space-12) 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
  }

  .table--stacked tbody tr:last-child td:last-child,
  .table--stacked tbody tr td:last-child {
    border-bottom: 0;
  }

  .table--stacked td::before,
  .table--stacked tbody th::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: var(--text-small-size);
    font-weight: var(--weight-medium);
    line-height: var(--text-body-sm-lh);
    text-transform: uppercase;
  }

  .table--stacked tbody tr:hover td {
    background: transparent;
  }
}

/* ==========================================================================
   12 · Fact grid · numbered lists · steps · progress · legend · bullet list · definition list
   ========================================================================== */

/* key facts: 3×3 boxes, first row usually --highlight (navy) */
.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-20) calc(var(--space-20) + var(--space-2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.fact__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}

.fact__value {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  overflow-wrap: anywhere;
}

.fact--highlight {
  border-color: var(--color-navy-800);
  background: var(--color-navy-800);
}

.fact--highlight .fact__label {
  color: var(--color-sky-400);
}

.fact--highlight .fact__value {
  color: var(--color-white);
}

/* numbered list: CSS counters — editors only add items.
   default = numeral column (01, 02 …) with title + text
   --letters = small letter badges (a, b, c …), one line each
   --cards   = bordered cards with big light numerals (values 01–07) */
.numbered-list {
  --list-counter-style: decimal-leading-zero;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin: 0;
  padding: var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  counter-reset: numbered;
  list-style: none;
}

.numbered-list__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-12);
  counter-increment: numbered;
}

.numbered-list__item::before {
  content: counter(numbered, var(--list-counter-style));
  color: var(--color-blue-600);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  font-variant-numeric: tabular-nums;
}

.numbered-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.numbered-list__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

.numbered-list__text {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

@media (min-width: 768px) {
  .numbered-list {
    gap: calc(var(--space-16) + var(--space-2));
    padding: var(--space-28);
  }

  .numbered-list__item {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-16);
  }
}

.numbered-list--letters {
  --list-counter-style: lower-alpha;
  gap: calc(var(--space-12) + var(--space-2));
}

.numbered-list--letters .numbered-list__item {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--space-12) + var(--space-2));
}

.numbered-list--letters .numbered-list__item::before {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-small-size);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.numbered-list--letters .numbered-list__text {
  color: var(--color-ink);
  padding-top: var(--space-2);
}

.numbered-list--cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--grid-gap, var(--space-16));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  container-type: inline-size;
}

.numbered-list--cards .numbered-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.numbered-list--cards .numbered-list__item::before {
  color: var(--color-blue-600);
  font-size: var(--text-number-size);
  font-weight: var(--weight-light);
  line-height: var(--text-number-lh);
}

.numbered-list--cards .numbered-list__title {
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
}

/* steps: --cards (default: numbered circle cards, application steps) · --timeline (payment plan) */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap, var(--space-16));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
  container-type: inline-size;
}

.steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-width: 0;
  padding: var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  counter-increment: steps;
}

.steps__item::before {
  content: counter(steps);
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-navy-800);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: 1;
}

.steps__item.is-current::before {
  background: var(--color-navy-800);
  color: var(--color-white);
}

.steps__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.steps__text {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

@media (min-width: 768px) {
  .steps__item {
    padding: var(--space-24);
  }
}

/* timeline: dot + connector, big percentage, label, caption */
.steps--timeline {
  gap: 0;
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.steps--timeline .steps__item {
  flex: 1 1 100%;
  gap: var(--space-4);
  padding: 0 0 var(--space-24) var(--space-32);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.steps--timeline .steps__item:last-child {
  padding-bottom: 0;
}

/* dot */
.steps--timeline .steps__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-blue-500);
  border-radius: var(--radius-full);
  background: var(--color-white);
}

.steps--timeline .steps__item.is-current::before {
  background: var(--color-blue-500);
}

/* connector */
.steps--timeline .steps__item::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 2px;
  left: 6px;
  width: 2px;
  background: var(--color-on-image);
}

.steps--timeline .steps__item:last-child::after {
  display: none;
}

.steps__value {
  color: var(--color-navy-800);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
  font-weight: var(--weight-light);
  line-height: 1.235;
}

.steps--timeline .steps__item.is-current .steps__value {
  color: var(--color-blue-600);
}

.steps__caption {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.steps--timeline .steps__title {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

@media (min-width: 768px) {
  .steps--timeline {
    flex-wrap: nowrap;
    padding: var(--space-32);
  }

  .steps--timeline .steps__item {
    flex: 1 1 0;
    padding: var(--space-24) var(--space-16) 0 0;
  }

  .steps--timeline .steps__item:last-child {
    padding-bottom: 0;
  }

  .steps--timeline .steps__item::before {
    top: 0;
  }

  .steps--timeline .steps__item::after {
    top: 6px;
    right: 0;
    bottom: auto;
    left: 14px;
    width: auto;
    height: 2px;
  }
}

/* progress bar: --progress is a data-driven inline value, e.g. style="--progress:97%" */
.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.progress__value {
  color: var(--color-navy-800);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.progress__track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--color-border);
}

.progress__fill {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: var(--radius-xs);
  background: var(--color-blue-500);
  transition: width var(--dur-slow) var(--ease-out);
}

.progress--muted .progress__fill {
  background: var(--color-control-border);
}

/* legend (map keys) */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-slate-600);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.legend__swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--legend-color, var(--color-navy-800));
}

.legend__swatch--navy {
  --legend-color: var(--color-navy-800);
}

.legend__swatch--blue {
  --legend-color: var(--color-blue-500);
}

.legend__swatch--grey {
  --legend-color: var(--color-control-border);
}

/* dot bullet list */
.bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bullet-list > li {
  position: relative;
  padding-left: var(--space-20);
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.bullet-list > li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-blue-500);
}

.bullet-list--roomy {
  gap: var(--space-16);
}

.card--navy .bullet-list > li {
  color: var(--color-on-image);
}

.card--navy .bullet-list > li::before {
  background: var(--color-sky-400);
}

/* definition list: label / value rows */
.def-list {
  margin: 0;
}

.def-list__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border);
}

.def-list__row:last-child {
  border-bottom: 0;
}

.def-list dt {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-small-lh);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}

.def-list dd {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.def-list--strong dd {
  color: var(--color-navy-800);
  font-weight: var(--weight-medium);
}

@media (min-width: 768px) {
  .def-list--inline .def-list__row {
    display: grid;
    grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-16);
  }
}

/* ==========================================================================
   13 · Accordion (native <details>; JS only for single-open mode)
   ========================================================================== */

.accordion {
  padding: var(--space-4) var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

@media (min-width: 768px) {
  .accordion {
    padding: var(--space-8) var(--space-32);
  }
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__item:last-child {
  border-bottom: 0;
}

.accordion__trigger {
  --accordion-pad: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 44px;
  padding: var(--accordion-pad) 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.accordion__trigger::-webkit-details-marker {
  display: none;
}

.accordion__trigger:hover {
  color: var(--color-blue-600);
}

/* plus / minus drawn with two gradients so it needs no icon file */
.accordion__trigger::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--color-blue-500);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: background-size var(--dur-fast) var(--ease-out);
}

.accordion__item[open] > .accordion__trigger::after,
.accordion__item.is-open > .accordion__trigger::after {
  background-size: 100% 2px, 2px 0;
}

/* open item: 12 px between question and answer (Figma), then the item padding again */
.accordion__item[open] > .accordion__trigger {
  padding-bottom: var(--space-8);
}

.accordion__panel {
  padding: 0 0 var(--space-16);
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.accordion__panel > * + * {
  margin-top: var(--space-12);
}

.accordion__item[open] > .accordion__panel {
  animation: accordion-open var(--dur-base) var(--ease-out);
}

@media (min-width: 768px) {
  .accordion__trigger {
    --accordion-pad: calc(var(--space-20) + var(--space-2));
  }

  .accordion__item[open] > .accordion__trigger {
    padding-bottom: var(--space-12);
  }

  .accordion__panel {
    padding-bottom: calc(var(--space-20) + var(--space-2));
  }
}

@keyframes accordion-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   14 · Forms
   .field > .field__label (+ .field__required) + control + .field__hint / .field__error
   controls: .input .select(+.select-wrap) .textarea · .checkbox · .radio · .switch · .search-field
   states: .is-error [aria-invalid=true] · .is-success · :disabled · .form-grid · .hp-field
   ========================================================================== */

.form-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 768px) {
  .form-panel {
    padding: var(--space-40);
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-20) var(--space-16);
}

.form-grid__full {
  grid-column: 1 / -1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.field__label {
  color: var(--color-slate-600);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-small-lh);
}

.field__required {
  margin-left: var(--space-2);
  color: var(--color-error-text);
  text-decoration: none;
}

.field__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin: 0;
  color: var(--color-error-text);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-small-lh);
}

.field__error > .icon {
  --icon-size: 16px;
  margin-top: 1px;
}

.field__success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin: 0;
  color: var(--color-success-text);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-small-lh);
}

.field__success > .icon {
  --icon-size: 16px;
  margin-top: 1px;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: calc(var(--space-12) + var(--space-2)) var(--space-16);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.input:hover,
.select:hover,
.textarea:hover,
.input.is-hover,
.select.is-hover,
.textarea.is-hover {
  border-color: var(--color-slate-500);
}

.input:focus,
.select:focus,
.textarea:focus,
.input.is-focus,
.select.is-focus,
.textarea.is-focus {
  border-color: var(--color-blue-500);
}

.input.is-focus,
.select.is-focus,
.textarea.is-focus {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.textarea {
  min-height: 140px;
  resize: vertical;
}

.input.is-error,
.select.is-error,
.textarea.is-error,
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-error-text);
  box-shadow: inset 0 0 0 1px var(--color-error-text);
}

.input.is-success,
.select.is-success,
.textarea.is-success {
  border-color: var(--color-success-text);
}

.input:disabled,
.select:disabled,
.textarea:disabled,
.input.is-disabled,
.select.is-disabled,
.textarea.is-disabled {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.input[readonly] {
  background: var(--color-surface);
}

/* select showing its empty placeholder option looks like a placeholder */
.select:has(option[value=""]:checked) {
  color: var(--color-text-muted);
}

/* select: wrapper draws the chevron so no icon file or data-URI is needed */
.select-wrap {
  position: relative;
}

.select {
  padding-right: var(--space-48);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-20);
  width: 8px;
  height: 8px;
  border: solid var(--color-slate-600);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* search field: leading icon + input */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text-muted);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.search-field:hover {
  border-color: var(--color-slate-500);
}

.search-field:focus-within {
  border-color: var(--color-blue-500);
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.search-field > .icon {
  --icon-size: 18px;
  margin-left: var(--space-16);
  pointer-events: none;
}

.search-field__input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-10);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.search-field__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.search-field__input:focus,
.search-field__input:focus-visible {
  outline: none;
}

.search-field--lg .search-field__input {
  min-height: 60px;
  font-size: var(--text-body-size);
}

/* checkbox / radio: label wraps a visually hidden native input + a drawn box */
.checkbox,
.radio {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  min-height: 44px;
  padding-block: var(--space-12);
  cursor: pointer;
}

.checkbox__input,
.radio__input {
  position: absolute;
  top: var(--space-12);
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.checkbox__box,
.radio__box {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--color-control-border);
  background: var(--color-white);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    border-width var(--dur-fast) var(--ease-out);
}

.checkbox__box {
  border-radius: var(--radius-xs);
}

.radio__box {
  border-radius: var(--radius-full);
}

.checkbox__box::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  margin: 1px auto 0;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.8);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.checkbox:hover .checkbox__box,
.radio:hover .radio__box {
  border-color: var(--color-slate-500);
}

.checkbox__input:checked + .checkbox__box{
  border-color: var(--color-navy-800);
  background: var(--color-navy-800);
}

.checkbox__input:checked + .checkbox__box::after{
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* radio: 5 px accent ring when selected (Figma) */
.radio__input:checked + .radio__box{
  border-width: 5px;
  border-color: var(--color-blue-500);
}

.checkbox__input:focus-visible + .checkbox__box,
.radio__input:focus-visible + .radio__box {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.checkbox__input[aria-invalid="true"] + .checkbox__box,
.radio__input[aria-invalid="true"] + .radio__box,
.checkbox.is-error .checkbox__box {
  border-color: var(--color-error-text);
}

.checkbox__input:disabled + .checkbox__box,
.radio__input:disabled + .radio__box,
.checkbox.is-disabled .checkbox__box,
.radio.is-disabled .radio__box {
  border-color: var(--color-border);
  background: var(--color-surface);
  cursor: not-allowed;
}

.checkbox.is-disabled,
.radio.is-disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.checkbox__label {
  color: var(--color-slate-600);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.radio__label {
  color: var(--color-ink);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.checkbox__label a {
  color: var(--color-blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-24);
}

@media (min-width: 1024px) {
  .checkbox,
  .radio {
    min-height: 0;
    padding-block: var(--space-4);
  }

  .checkbox__input,
  .radio__input {
    top: var(--space-4);
  }
}

/* switch (cookie preferences) */
.switch {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-12) 0;
  cursor: pointer;
}

.switch__input {
  position: absolute;
  top: var(--space-12);
  left: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch__track {
  position: relative;
  flex: none;
  order: 2;
  width: 44px;
  height: 24px;
  margin-left: auto;
  border-radius: var(--radius-full);
  background: var(--color-slate-500);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: var(--shadow-control);
  transition: transform var(--dur-fast) var(--ease-out);
}

.switch__input:checked ~ .switch__track{
  background: var(--color-navy-800);
}

.switch__input:checked ~ .switch__track::after{
  transform: translateX(20px);
}

.switch__input:focus-visible ~ .switch__track {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.switch__input:disabled ~ .switch__track,
.switch.is-disabled .switch__track {
  opacity: 0.6;
}

.switch.is-disabled,
.switch__input:disabled ~ .switch__text {
  cursor: not-allowed;
}

.switch__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.switch__title {
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

.switch__desc {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

/* honeypot: hidden from people and assistive tech (also add aria-hidden + tabindex=-1 in markup) */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-16);
}

.form-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.form-note a {
  color: var(--color-blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   15 · Pagination · breadcrumb · previous/next · meta bar · share
   ========================================================================== */

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .pagination__list {
    gap: var(--space-8);
  }
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy-800);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-button-lh);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.pagination__link:hover,
.pagination__link.is-hover {
  border-color: var(--color-control-border);
  background: var(--color-surface);
}

.pagination__link[aria-current="page"],
.pagination__link.is-current {
  border-color: var(--color-navy-800);
  background: var(--color-navy-800);
  color: var(--color-white);
}

.pagination__link[aria-disabled="true"],
.pagination__link.is-disabled {
  border-color: var(--color-border);
  background: var(--color-neutral-bg);
  color: var(--color-text-muted);
  pointer-events: none;
}

.pagination__link > .icon {
  --icon-size: 16px;
}

.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 44px;
  color: var(--color-text-muted);
  font-size: var(--text-button-size);
}

/* prev / next show their word from 768 up; compact view: only prev, current, next + "Sayfa 2 / 6" */
.pagination__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pagination__item--far {
  display: none;
}

.pagination__status {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .pagination__list {
    justify-content: flex-start;
  }

  .pagination__link {
    min-width: 40px;
    height: 40px;
  }

  .pagination__ellipsis {
    height: 40px;
  }

  .pagination__item--far {
    display: block;
  }

  .pagination__status {
    display: none;
  }

  .pagination__link--prev,
  .pagination__link--next {
    padding: 0 var(--space-16);
  }

  .pagination__link--prev .pagination__label,
  .pagination__link--next .pagination__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
  }
}

/* breadcrumb: light background by default, --on-dark for the navy page hero */
.breadcrumb {
  --crumb-link: var(--color-text-muted);
  --crumb-link-hover: var(--color-navy-800);
  --crumb-current: var(--color-navy-800);
  --crumb-sep: var(--color-control-border);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-10);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  color: var(--crumb-link);
}

.breadcrumb__item:not(:last-child)::after {
  content: "/";
  color: var(--crumb-sep);
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--crumb-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.breadcrumb__link:hover {
  color: var(--crumb-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb [aria-current="page"] {
  color: var(--crumb-current);
}

.breadcrumb--on-dark {
  --crumb-link: var(--color-on-dark);
  --crumb-link-hover: var(--color-white);
  --crumb-current: var(--color-white);
  --crumb-sep: var(--color-on-dark-border);
  --focus-color: var(--color-sky-400);
}

/* previous / next navigation between details */
.prev-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}

.prev-next__link {
  --card-pad: var(--space-16) var(--space-20);
  --card-gap: var(--space-6);
}

.prev-next__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-small-lh);
}

.prev-next__label > .icon {
  --icon-size: 14px;
}

.prev-next__title {
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

.prev-next__link--next {
  text-align: right;
}

.prev-next__link--next .prev-next__label {
  justify-content: flex-end;
}

@media (min-width: 640px) {
  .prev-next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
  }

  .prev-next__link {
    --card-pad: var(--space-20) var(--space-24);
  }
}

/* meta bar above a detail: badge + date on the left, actions on the right */
.meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12) var(--space-16);
}

.meta-bar__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.meta-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* share row */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-border);
}

.share__label {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.share__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* ==========================================================================
   16 · Toast · dialog
   ========================================================================== */

/* toast region: fixed stack, bottom-right on desktop, above the mobile action bar below 1024 */
.toast-region {
  position: fixed;
  right: var(--space-16);
  bottom: calc(var(--bottom-bar-height) + var(--space-16) + env(safe-area-inset-bottom, 0px));
  left: var(--space-16);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-12);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .toast-region {
    right: var(--space-24);
    bottom: var(--space-24);
    left: auto;
    align-items: flex-end;
    width: min(26rem, calc(100vw - var(--space-48)));
  }
}

.toast {
  --toast-accent: var(--color-blue-500);
  --toast-icon: var(--color-blue-600);
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--toast-accent);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-slate-600);
  box-shadow: var(--shadow-dropdown);
  pointer-events: auto;
  animation: toast-in var(--dur-base) var(--ease-out) both;
}

.toast--success {
  --toast-accent: var(--color-success);
  --toast-icon: var(--color-success-text);
}

.toast--error {
  --toast-accent: var(--color-red);
  --toast-icon: var(--color-error-text);
}

.toast--info {
  --toast-accent: var(--color-blue-500);
  --toast-icon: var(--color-blue-600);
}

.toast__icon {
  flex: none;
  margin-top: var(--space-2);
  color: var(--toast-icon);
}

.toast__icon > .icon {
  --icon-size: 20px;
}

.toast__text {
  flex: 1;
  min-width: 0;
  padding-block: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.toast__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: calc(var(--space-10) * -1) 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.toast__close:hover {
  background: var(--color-surface);
  color: var(--color-navy-800);
}

.toast__close > .icon {
  --icon-size: 16px;
}

.toast.is-leaving {
  animation: toast-out var(--dur-fast) var(--ease-out) forwards;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* dialog on native <dialog>: the element is a transparent full-viewport frame, .dialog__panel is the box.
   Clicking the frame (outside the panel) is the backdrop click handled by main.js. */
.dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-16);
  border: 0;
  background: transparent;
  color: var(--color-slate-600);
  overflow: hidden;
}

.dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog::backdrop {
  background: var(--color-scrim);
  animation: dialog-backdrop-in var(--dur-base) var(--ease-out) both;
}

.dialog__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100dvh - var(--space-32));
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-dropdown);
  animation: dialog-panel-in var(--dur-base) var(--ease-out) both;
}

.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.dialog__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.dialog__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.dialog__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-slate-600);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.dialog__close:hover {
  background: var(--color-surface);
  color: var(--color-navy-800);
}

.dialog__close > .icon {
  --icon-size: 20px;
}

.dialog__body {
  flex: 1;
  min-height: 0;
  padding: var(--space-20);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialog__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .dialog {
    padding: var(--space-24);
  }

  .dialog__body {
    padding: var(--space-24);
  }

  .dialog__footer {
    padding: var(--space-16) var(--space-24);
  }
}

.dialog--wide .dialog__panel {
  max-width: 56rem;
}

/* anchored near the top (search dialog) */
.dialog--top[open] {
  align-items: flex-start;
  padding-top: max(var(--space-16), 10vh);
}

/* full-screen viewer (parcel map, Figma 92:61): translucent navy title bar over an edge-to-edge body.
   Below 768 px the bar sits above the map (two rows); from 768 px it overlays it (one row, 83 px). */
.dialog--fullscreen {
  --focus-color: var(--color-sky-400);
  --viewer-bar-height: 83px;
  padding: 0;
}

.dialog--fullscreen .dialog__panel {
  position: relative;
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 0;
  background: var(--color-navy-900);
  animation-name: dialog-backdrop-in;   /* fade only: a scaled full-screen surface reads as a glitch */
}

.dialog--fullscreen .dialog__header {
  position: relative;
  z-index: 3;
  flex: none;
  padding: var(--space-12) var(--space-16);
  border-bottom: 0;
  background: color-mix(in srgb, var(--color-navy-900) 92%, transparent);
}

.dialog--fullscreen .dialog__title {
  color: var(--color-white);
}

.dialog--fullscreen .dialog__subtitle {
  color: var(--color-on-dark);
}

.dialog--fullscreen .dialog__close {
  border-radius: var(--radius-full);
  background: var(--color-sheen);
  color: var(--color-white);
}

.dialog--fullscreen .dialog__close:hover {
  background: var(--color-on-dark-border);
  color: var(--color-white);
}

.dialog--fullscreen .dialog__body {
  position: relative;
  padding: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .dialog--fullscreen .dialog__header {
    position: absolute;
    inset: 0 0 auto;
    min-height: var(--viewer-bar-height);
    padding: var(--space-16) var(--space-24) var(--space-16) var(--space-32);
  }

  .dialog--fullscreen .dialog__body {
    position: absolute;
    inset: 0;
  }
}

/* static preview of a dialog inside the page (styleguide) */
.dialog--inline {
  position: static;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
}

.dialog--inline[open] {
  display: block;
}

.dialog--inline .dialog__panel {
  max-width: 34rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  animation: none;
}

.dialog--inline.dialog--wide .dialog__panel {
  max-width: 56rem;
}

@keyframes dialog-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dialog-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ==========================================================================
   17 · Lightbox shell · map viewer chrome
   ========================================================================== */

.lightbox {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: 100%;
  height: 100%;
  background: var(--color-navy-900);
  color: var(--color-white);
  --focus-color: var(--color-sky-400);
}

dialog.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
}

dialog.lightbox:not([open]) {
  display: none;
}

dialog.lightbox::backdrop {
  background: var(--color-navy-900);
}

.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-20);
}

.lightbox__counter {
  color: var(--color-on-dark);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  font-variant-numeric: tabular-nums;
}

.lightbox__close,
.lightbox__nav {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-sheen);
  color: var(--color-white);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--color-on-dark-border);
}

.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 var(--space-16);
  touch-action: pan-y pinch-zoom;
}

.lightbox__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
}

.lightbox__figure > img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  background: var(--color-overlay-navy);
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: var(--space-8);
}

.lightbox__nav--next {
  right: var(--space-8);
}

.lightbox__nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

.lightbox__caption {
  margin: 0;
  padding: var(--space-12) var(--space-24) var(--space-16);
  color: var(--color-on-image);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  text-align: center;
}

.lightbox__thumbs {
  display: none;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16) var(--space-16);
  overflow-x: auto;
}

.lightbox__thumb {
  flex: none;
  width: 72px;
  height: 54px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  opacity: 0.6;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.lightbox__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox__thumb:hover {
  opacity: 0.9;
}

.lightbox__thumb.is-active,
.lightbox__thumb[aria-current="true"] {
  border-color: var(--color-sky-400);
  opacity: 1;
}

@media (min-width: 768px) {
  .lightbox__thumbs {
    display: flex;
  }

  .lightbox__stage {
    padding: 0 var(--space-64);
  }

  .lightbox__nav--prev {
    left: var(--space-16);
  }

  .lightbox__nav--next {
    right: var(--space-16);
  }
}

/* in-page preview (styleguide) */
.lightbox--inline {
  position: relative;
  height: 26rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* map viewer chrome (parcel map, site plan): stage + floating controls + hint + minimap + full-screen bar.
   Markup: parts/map-viewer.php · behaviour: assets/js/map-viewer.js. Figma 57:338 (inline) and 92:61 (full screen).
   The Figma offsets are measured from the outer edge of the 1 px frame, so the inline inset is 15 px inside it. */
.map-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.map-viewer__fallback {
  margin: 0;
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.map-viewer.is-enhanced .map-viewer__fallback {
  display: none;
}

.viewer {
  --viewer-inset: calc(var(--space-16) - 1px);
  --viewer-float-shadow: 0 4px 16px color-mix(in srgb, var(--color-navy-800) 12%, transparent);
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--viewer-ratio, 6 / 7);
  min-height: 20rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .viewer {
    aspect-ratio: auto;
    height: 35rem;
  }
}

/* fills its parent (full-screen dialog body) */
.viewer.viewer--fill {
  --viewer-inset: var(--space-16);
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

@media (min-width: 768px) {
  .viewer.viewer--fill {
    --viewer-inset: var(--space-24);
  }
}

.viewer__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* inline and not zoomed in: a one-finger swipe scrolls the page; pinching still belongs to the map */
.viewer__stage.is-page-scroll {
  touch-action: pan-y;
}

/* the inline stage must NOT contain overscroll: at a zoom limit the wheel goes on to scroll the page (map-viewer.js
   only cancels the events it uses); in the full-screen dialog there is no page behind it to chain to */
.viewer--fill .viewer__stage {
  overscroll-behavior: contain;
}

.viewer__stage:focus-visible {
  outline-offset: calc(-2 * var(--focus-width));
}

.viewer.is-dragging .viewer__stage {
  cursor: grabbing;
}

/* the canvas is the image at its natural size; map-viewer.js sets width, height and one transform.
   Before the script runs it already shows the initial view (image as wide as the stage, centred), so nothing jumps. */
.viewer__canvas {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  transform-origin: 0 0;
}

.no-js .viewer__canvas {
  top: 0;
  height: 100%;
  transform: none;
}

.map-viewer.is-enhanced .viewer__canvas {
  top: 0;
}

.viewer__canvas.is-interacting {
  will-change: transform;
}

.viewer__image,
.viewer__preview {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.viewer__image {
  width: 100%;
  height: auto;
}

.viewer__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* without JavaScript the whole map is shown inside the frame */
.no-js .viewer__image,
.no-js .viewer__preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.no-js .viewer__image {
  position: relative;
}

.map-viewer.is-enhanced .viewer__image {
  height: 100%;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* blur-up: the small preview is shown (blurred) until the full image is decoded, then they cross-fade */
.map-viewer.is-enhanced:not(.is-loaded, .is-error) .viewer__image {
  opacity: 0;
}

.map-viewer.is-enhanced:not(.is-loaded, .is-error) .viewer__preview {
  transform: scale(1.03);
  filter: blur(8px);
}

.map-viewer.is-loaded .viewer__preview {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.map-viewer.is-error .viewer__image {
  visibility: hidden;
}

.viewer__status {
  position: absolute;
  top: var(--viewer-inset);
  left: var(--viewer-inset);
  z-index: 2;
  max-width: calc(100% - 2 * var(--viewer-inset));
  margin: 0;
  padding: var(--space-8) calc(var(--space-12) + var(--space-2));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-navy-800) 85%, transparent);
  color: var(--color-white);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  pointer-events: none;
}

.viewer__status:empty {
  display: none;
}

.viewer__status--error {
  background: var(--color-error-text);
}

.viewer--fill .viewer__status {
  top: calc(var(--viewer-inset) + var(--viewer-bar-height, 0px));
}

@media (max-width: 767.98px) {
  .viewer--fill .viewer__status {
    top: var(--viewer-inset);
  }
}

.viewer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-navy-800);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-button-lh);
  box-shadow: var(--viewer-float-shadow);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.viewer__button:hover {
  border-color: var(--color-control-border);
  background: var(--color-surface);
}

.viewer__button[aria-disabled="true"] {
  color: var(--color-slate-500);
  cursor: default;
}

.viewer__button[aria-disabled="true"]:hover {
  border-color: var(--color-border);
  background: var(--color-white);
}

.viewer__button > .icon {
  --icon-size: 18px;
}

.viewer__button--text {
  padding: 0 18px 0 16px;
}

.viewer__button--text > .icon {
  --icon-size: 16px;
}

.viewer__zoom {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--viewer-float-shadow);
}

.viewer__zoom .viewer__button {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.viewer__zoom .viewer__button:focus-visible {
  outline-offset: -3px;
}

.viewer__zoom-value {
  display: grid;
  place-items: center;
  height: 34px;
  border-block: 1px solid var(--color-border);
  color: var(--color-slate-600);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.viewer__controls {
  position: absolute;
  right: var(--viewer-inset);
  bottom: var(--viewer-inset);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.viewer__top {
  position: absolute;
  top: var(--viewer-inset);
  right: var(--viewer-inset);
  z-index: 2;
}

.viewer__hint {
  position: absolute;
  bottom: var(--viewer-inset);
  left: var(--viewer-inset);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  max-width: calc(100% - 2 * var(--viewer-inset) - 44px - var(--space-12));
  margin: 0;
  padding: var(--space-8) calc(var(--space-12) + var(--space-2)) var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-navy-800) 85%, transparent);
  color: var(--color-white);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
}

.viewer__hint-text--touch {
  display: none;
}

@media (pointer: coarse) {
  .viewer__hint-text--pointer {
    display: none;
  }

  .viewer__hint-text--touch {
    display: inline;
  }
}

/* the hint has done its job once the visitor has used the map */
.map-viewer.has-interacted .viewer__hint {
  visibility: hidden;
  opacity: 0;
}

.viewer__legend {
  position: absolute;
  bottom: var(--viewer-inset);
  left: var(--viewer-inset);
  z-index: 2;
  max-width: calc(100% - 2 * var(--viewer-inset));
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-ink) 25%, transparent);
}

.viewer__legend .legend {
  gap: var(--space-4) var(--space-16);
}

@media (min-width: 768px) {
  .viewer__legend {
    padding: var(--space-12) var(--space-16);
  }

  .viewer__legend .legend {
    flex-wrap: nowrap;
    gap: var(--space-8) var(--space-20);
  }
}

.minimap {
  position: absolute;
  right: var(--viewer-inset);
  bottom: var(--viewer-inset);
  z-index: 2;
  width: 220px;
  aspect-ratio: var(--minimap-ratio, 220 / 128);
  overflow: hidden;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-ink) 30%, transparent);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* a portrait map keeps its proportions: the box is as tall as the landscape one is wide, scaled down */
.minimap--portrait {
  width: auto;
  height: 168px;
}

.minimap__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}

.minimap__view {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid var(--color-blue-500);
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-blue-500) 15%, transparent);
  pointer-events: none;
}

/* the minimap would cover the useful part of a small screen */
@media (max-width: 479.98px), (max-height: 599.98px) {
  .minimap {
    display: none;
  }
}

/* keep the legend clear of the minimap (portrait box 145 px, landscape box 220 px, plus insets) */
@media (min-width: 480px) and (min-height: 600px) {
  .minimap--portrait ~ .viewer__legend {
    max-width: calc(100% - 3 * var(--viewer-inset) - 145px);
  }

  .minimap:not(.minimap--portrait) ~ .viewer__legend {
    max-width: calc(100% - 3 * var(--viewer-inset) - 220px);
  }
}

/* ---- full-screen bar: title left, zoom group, fit, download, close (Figma 92:61) ---------------------------------- */
.dialog--fullscreen .viewer-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title close"
    "actions actions";
  align-items: center;
  gap: var(--space-12) var(--space-16);
}

.viewer-bar__title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.viewer-bar__title > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-bar__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.viewer-bar__close {
  grid-area: close;
}

@media (min-width: 768px) {
  .dialog--fullscreen .viewer-bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "title actions close";
    gap: var(--space-16);
  }

  .viewer-bar__actions {
    gap: var(--space-16);
  }
}

.viewer-bar__zoom {
  display: flex;
  align-items: stretch;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-md);
  color: var(--color-white);
}

.viewer-bar__zoom-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.viewer-bar__zoom-button:hover {
  background: var(--color-sheen);
}

.viewer-bar__zoom-button[aria-disabled="true"] {
  color: var(--color-on-dark-border);
  cursor: default;
}

.viewer-bar__zoom-button[aria-disabled="true"]:hover {
  background: transparent;
}

.viewer-bar__zoom-button:focus-visible {
  outline-offset: -3px;
}

.viewer-bar__zoom-value {
  display: grid;
  place-items: center;
  width: 56px;
  border-inline: 1px solid var(--color-on-dark-border);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 480px) {
  .viewer-bar__zoom-value {
    width: 66px;
  }
}

.viewer-bar__button {
  padding-inline: var(--space-16);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.viewer-bar__button[data-viewer-reset] > .icon {
  --icon-size: 20px;
}

/* "Indir ↓": the arrow sits right after the word, like the glyph in Figma */
.viewer-bar__button:not([data-viewer-reset]) {
  gap: var(--space-2);
}

.viewer-bar__button:not([data-viewer-reset]) > .icon {
  --icon-size: 12px;
}

/* icon only on the smallest screens; the text stays available to assistive technology */
@media (max-width: 479.98px) {
  .viewer-bar__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .viewer-bar__button:has(.viewer-bar__label) {
    width: 44px;
    padding-inline: 0;
  }
}

/* ==========================================================================
   18 · Empty state · info note · CTA band · search highlight
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-40) var(--space-16);
  text-align: center;
}

.empty-state__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-navy-800);
}

.empty-state__icon > .icon {
  --icon-size: 28px;
}

/* huge decorative numeral for the 404 page; the digits come from data-code through ::before so
   assistive tech and contrast checkers ignore them (the real message is the title next to it) */
.empty-state__code {
  margin: 0;
  color: var(--color-placeholder);
  font-size: clamp(7rem, 5rem + 10vw, 12.5rem);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
}

.empty-state__code::before {
  content: attr(data-code);
}

.empty-state__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  text-wrap: balance;
}

.empty-state__text {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.empty-state--boxed {
  width: 100%;
  max-width: none;
  border: 1px dashed var(--color-control-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

/* info note: round "i" + text; tones info (default) warning success error */
.info-note {
  --note-bg: var(--color-surface);
  --note-icon-bg: var(--color-info-bg);
  --note-icon: var(--color-blue-600);
  --note-fg: var(--color-slate-600);
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--note-bg);
  color: var(--note-fg);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.info-note__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--note-icon-bg);
  color: var(--note-icon);
}

.info-note__icon > .icon {
  --icon-size: 16px;
}

.info-note__body {
  flex: 1;
  min-width: 0;
  padding-top: var(--space-2);
}

.info-note__title {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-navy-800);
  font-weight: var(--weight-medium);
}

.info-note__body > p {
  margin: 0;
}

.info-note__body > p + p {
  margin-top: var(--space-8);
}

.info-note a {
  color: var(--color-blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.info-note--warning {
  --note-bg: var(--color-warning-bg);
  --note-icon-bg: var(--color-white);
  --note-icon: var(--color-warning-text);
  --note-fg: var(--color-warning-text);
}

.info-note--warning .info-note__title,
.info-note--warning a {
  color: var(--color-warning-text);
}

.info-note--success {
  --note-bg: var(--color-success-bg);
  --note-icon-bg: var(--color-white);
  --note-icon: var(--color-success-text);
  --note-fg: var(--color-success-text);
}

.info-note--success .info-note__title,
.info-note--success a {
  color: var(--color-success-text);
}

.info-note--error {
  --note-bg: var(--color-error-bg);
  --note-icon-bg: var(--color-white);
  --note-icon: var(--color-error-text);
  --note-fg: var(--color-error-text);
}

.info-note--error .info-note__title,
.info-note--error a {
  color: var(--color-error-text);
}

@media (min-width: 768px) {
  .info-note {
    padding: var(--space-20) var(--space-28);
  }
}

/* CTA band: navy box with title, text, actions and a quiet decorative ring.
   --stacked = large panel (eyebrow, h2, lead, actions) · --light = surface variant · --plain = no ring */
.cta-band {
  --focus-color: var(--color-sky-400);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  overflow: hidden;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-navy-800);
  color: var(--color-on-dark);
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  top: -5rem;
  right: -4rem;
  z-index: -1;
  width: 15rem;
  height: 15rem;
  border: 1px solid var(--color-footer-rule);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2.5rem color-mix(in srgb, var(--color-footer-rule) 22%, transparent);
  pointer-events: none;
}

.cta-band--plain::before {
  display: none;
}

.cta-band__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.cta-band__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.cta-band__text {
  margin: 0;
  color: var(--color-on-dark);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

@media (min-width: 768px) {
  .cta-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding: var(--space-32) var(--space-40);
  }

  .cta-band__actions {
    flex: none;
  }
}

.cta-band--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-24);
}

.cta-band--stacked .cta-band__body {
  gap: var(--space-16);
}

.cta-band--stacked .cta-band__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
  text-wrap: balance;
}

.cta-band--stacked .cta-band__text {
  color: var(--color-on-image);
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
}

.cta-band__display {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: var(--weight-regular);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .cta-band--stacked {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-48);
  }
}

.cta-band--light {
  --focus-color: var(--color-blue-500);
  background: var(--color-surface);
  color: var(--color-slate-600);
}

.cta-band--light::before {
  display: none;
}

.cta-band--light .cta-band__title {
  color: var(--color-navy-800);
}

.cta-band--light .cta-band__text {
  color: var(--color-slate-600);
}

/* search-term highlight */
mark,
.mark {
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-warning-bg);
  box-shadow: 0 0 0 1px var(--color-warning);
  color: var(--color-ink);
}

/* ==========================================================================
   19 · Table of contents · legal headings
   ========================================================================== */

.toc {
  padding: var(--space-16) var(--space-8) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  counter-reset: toc;
}

.toc__title {
  margin: 0;
  padding: 0 var(--space-16) var(--space-10);
  color: var(--color-text-muted);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toc__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  min-height: 44px;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-md);
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  text-decoration: none;
  counter-increment: toc;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.toc__link::before {
  content: counter(toc, var(--toc-counter-style, upper-alpha));
  flex: none;
  min-width: 1ch;
  color: var(--color-blue-600);
  font-weight: var(--weight-bold);
}

.toc__link:hover {
  background: var(--color-surface);
  color: var(--color-navy-800);
}

.toc__link.is-active,
.toc__link[aria-current="true"],
.toc__link[aria-current="location"] {
  background: var(--color-surface);
  color: var(--color-navy-800);
  font-weight: var(--weight-medium);
}

@media (min-width: 1024px) {
  

  .toc__link {
    min-height: 0;
  }
}

/* legal heading: navy letter/number badge + title (letters come from a CSS counter on the article) */
.legal-doc {
  counter-reset: legal;
}

.legal-heading {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  scroll-margin-top: var(--space-96);
  counter-increment: legal;
}

.legal-heading::before {
  content: counter(legal, var(--legal-counter-style, upper-alpha));
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-navy-800);
  color: var(--color-white);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: 1;
}

.legal-doc--numeric {
  --legal-counter-style: decimal;
}

/* ==========================================================================
   20 · Grids — column count follows the width of the grid's own container, not the viewport,
   so the same markup works with or without a sidebar. Children get equal widths; rows are
   left-aligned like a CSS grid. Set --cols-* on the grid to change the counts:
     --cols-base (<30rem)  --cols-md (≥30rem)  --cols-lg (≥52rem)  --grid-gap
   ========================================================================== */

.card-grid,
.stat-grid,
.logo-grid,
.person-grid,
.price-grid,
.fact-grid,
.steps:not(.steps--timeline),
.numbered-list--cards {
  --grid-gap: var(--space-16);
  --cols: var(--cols-base, 1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  container-type: inline-size;
}

.card-grid > *,
.stat-grid > *,
.logo-grid > *,
.person-grid > *,
.price-grid > *,
.fact-grid > *,
.steps:not(.steps--timeline) > *,
.numbered-list--cards > * {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols));
  min-width: 0;
}

@container (min-width: 30rem) {
  .card-grid > *,
  .stat-grid > *,
  .logo-grid > *,
  .person-grid > *,
  .price-grid > *,
  .fact-grid > *,
  .steps:not(.steps--timeline) > *,
  .numbered-list--cards > * {
    --cols: var(--cols-md, 2);
  }
}

@container (min-width: 52rem) {
  .card-grid > *,
  .stat-grid > *,
  .logo-grid > *,
  .person-grid > *,
  .price-grid > *,
  .fact-grid > *,
  .steps:not(.steps--timeline) > *,
  .numbered-list--cards > * {
    --cols: var(--cols-lg, 3);
  }
}

/* defaults per family: base / md / lg */
.card-grid {
  --cols-base: 1;
  --cols-md: 2;
  --cols-lg: 2;
}

.card-grid--3 {
  --cols-lg: 3;
}

.stat-grid {
  --cols-base: 2;
  --cols-md: 2;
  --cols-lg: 4;
}

.stat-grid--3 {
  --cols-base: 1;
  --cols-md: 3;
  --cols-lg: 3;
}

.stat-grid--2 {
  --cols-base: 1;
  --cols-md: 2;
  --cols-lg: 2;
}

.logo-grid {
  --cols-base: 2;
  --cols-md: 2;
  --cols-lg: 3;
}

.person-grid {
  --cols-base: 2;
  --cols-md: 2;
  --cols-lg: 4;
}

.price-grid {
  --cols-base: 2;
  --cols-md: 2;
  --cols-lg: 4;
}

.fact-grid {
  --cols-base: 1;
  --cols-md: 2;
  --cols-lg: 3;
}

.steps:not(.steps--timeline) {
  --cols-base: 1;
  --cols-md: 2;
  --cols-lg: 4;
}

.numbered-list--cards {
  --cols-base: 1;
  --cols-md: 2;
  --cols-lg: 3;
}

/* ==========================================================================
   21 · Motion safety net
   Token durations already collapse under prefers-reduced-motion; keyframe loops below
   use fixed durations, so they are switched off explicitly.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }

  .button.is-loading::after,
  .button[aria-busy="true"]::after {
    animation-duration: 1600ms;
  }

  .card--interactive:hover,
  .card--interactive.is-hover {
    transform: none;
  }

  .button:active {
    transform: none;
  }
}

/* ---- touch targets (phase-2 integration) ---------------------------------------------------------
   Compact links inside components reach a 44 px hit box on small screens without changing the layout. */
.button {
  min-width: 44px;
}

@media (max-width: 1023.98px) {
  .breadcrumb__link {
    min-height: 44px;
    margin-block: calc(-1 * var(--space-10));
    padding-inline: var(--space-6);
    margin-inline: calc(-1 * var(--space-6));
  }

  a.info-card__value {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* a rich-text paragraph that is nothing but a link (e.g. the MEYDİP application address in allocation notices) */
  .prose p > a:only-child,
  .prose li > a:only-child {
    display: inline-block;
    padding-block: 13px;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   22 · Home components — hero slider · mosaic tiles · logo marquee · partner logos ·
        announcement panel · contact list · map placeholder (Figma 46:200)
   ========================================================================== */

/* ---- hero slider (perspective) ----------------------------------------------------------------------------------
   Desktop ≥ 768: the centre slide is 878×511 (Figma px at a 1440 wide stage), the previous / next slides sit behind it,
   dimmed and turned in perspective. Every size is expressed in --u = one Figma pixel at the current stage width
   (container query units), so the whole composition scales with the stage (max 1440 px).
   States are set by main JS on [data-slide]: current · prev · next · off (behind the centre). Below 768 only the
   current slide is shown, full width; with reduced motion the slides cross-fade.
   Markup: .hero-slider > .hero-slider__stage > .hero-slider__track > .hero-slider__slide[data-state]
           > .hero-slider__frame (+ __link, __image, __shade, __sheen) + .hero-slider__floor ; then __controls.       */
.hero-slider {
  --hero-slider-top: var(--space-24);
  padding-top: var(--hero-slider-top);
}

.hero-slider__stage {
  position: relative;
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  aspect-ratio: 878 / 511;
  container-type: inline-size;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.hero-slider__track {
  position: absolute;
  inset: 0;
}

.hero-slider__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.hero-slider__slide[data-state="current"] {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
}

.hero-slider__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-slide);
  background: var(--color-navy-800);
  box-shadow: var(--shadow-slide);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}

.hero-slider__link,
.hero-slider__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slider__image {
  object-fit: cover;
  -webkit-user-drag: none;
}

/* banners with baked-in text that do not fit the slot (§12.3): never cropped, blurred copy fills the letterbox */
.hero-slider__slide--contain .hero-slider__image {
  object-fit: contain;
}

.hero-slider__slide--contain .hero-slider__frame::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--slide-image) center / cover;
  filter: blur(24px) saturate(1.15);
  opacity: 0.85;
}

.hero-slider__link:focus-visible {
  outline: 3px solid var(--color-sky-400);
  outline-offset: -6px;
}

/* dark perspective gradient (side slides only) and the light sheen (Figma "Perspektif karartma" / "Işık") */
.hero-slider__shade,
.hero-slider__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-slider__shade {
  opacity: 0;
  background: linear-gradient(to right, var(--color-overlay-navy), var(--color-overlay-navy-soft));
  transition: opacity var(--dur-slow) var(--ease-out);
}

.hero-slider__slide[data-state="next"] .hero-slider__shade {
  background: linear-gradient(to right, var(--color-overlay-navy-soft), var(--color-overlay-navy));
}

.hero-slider__sheen {
  background: linear-gradient(135deg, var(--color-sheen), transparent 60%);
}

/* floor shadow (Figma "Zemin gölgesi"): blurred ellipse 78 % of the slide width, just below it */
.hero-slider__floor {
  position: absolute;
  top: calc(100% + 10px);
  left: 11%;
  width: 78%;
  height: 26px;
  border-radius: 50%;
  background: var(--color-navy-800);
  opacity: 0.12;
  filter: blur(18px);
  pointer-events: none;
}

/* controls sit on the white part of the page: the light focus ring of the navy band would not be visible there */
.hero-slider__controls :focus-visible {
  outline-color: var(--focus-color);
}

/* controls: round arrows + dots (+ a small pause button, WCAG 2.2.2) */
.hero-slider__controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: fit-content;
  max-width: 100%;
  margin: var(--space-24) auto 0;
}

.hero-slider__dots {
  display: flex;
  align-items: center;
}

.hero-slider__dot {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
}

.hero-slider__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: var(--radius-xs);
  background: var(--color-control-border);
  transition:
    width var(--dur-base) var(--ease-out),
    margin var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.hero-slider__dot:hover::before {
  background: var(--color-slate-500);
}

.hero-slider__dot[aria-current="true"] {
  width: 52px;
}

.hero-slider__dot[aria-current="true"]::before {
  width: 32px;
  margin-left: -16px;
  background: var(--color-navy-800);
}

.hero-slider__toggle {
  flex: none;
}

.hero-slider__toggle[aria-pressed="true"] .hero-slider__toggle-pause,
.hero-slider__toggle[aria-pressed="false"] .hero-slider__toggle-play {
  display: none;
}

/* no JavaScript: the composition is static, the controls would do nothing */
.no-js .hero-slider__controls {
  display: none;
}

/* phones: one full-width slide, the neighbours peek in from both sides (Figma 202:188). The picture is never cropped: it keeps its
   878:511 ratio and the text baked into it is read through the "enlarge" link (shared lightbox). */
@keyframes hero-slide-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-slider__slide.is-entering {
  animation: hero-slide-in var(--dur-slow) var(--ease-out);
}

@media (max-width: 767.98px) {
  .hero-slider {
    overflow: hidden;
    --hero-slider-top: var(--space-16);
  }

  .hero-slider__stage {
    width: calc(100% - 2 * (var(--gutter) + var(--space-8)));
    overflow: visible;
  }

  /* slide positions are percentages of the slide's own width: centre of the neighbour = ±(½ + 12 px gap + ½ of its 0.86 scale) */
  .hero-slider__slide {
    transition:
      transform var(--dur-slow) var(--ease-out),
      opacity var(--dur-slow) var(--ease-out);
  }

  .hero-slider__slide[data-state="prev"],
  .hero-slider__slide[data-state="next"] {
    z-index: 2;
    opacity: 1;
  }

  .hero-slider__slide[data-state="prev"] {
    transform: translateX(calc(-93% - 12px)) scale(0.86);
  }

  .hero-slider__slide[data-state="next"] {
    transform: translateX(calc(93% + 12px)) scale(0.86);
  }

  .hero-slider__slide[data-state="prev"] .hero-slider__shade,
  .hero-slider__slide[data-state="next"] .hero-slider__shade {
    opacity: 1;
  }

  .hero-slider__slide[data-state="off"] {
    display: none;
  }
}

@media (min-width: 768px) {
  .hero-slider {
    --hero-slider-top: var(--space-32);
  }

  .hero-slider__stage {
    --u: calc(100cqw / 1440);
    width: 100%;
    max-width: 1440px;
    aspect-ratio: 1440 / 511;
  }

  .hero-slider__slide {
    inset: auto;
    top: 0;
    left: calc(var(--u) * 281);
    width: calc(var(--u) * 878);
    height: calc(var(--u) * 511);
    /* one transform list for every state so the browser interpolates function by function */
    transform: translateX(0) perspective(calc(var(--u) * 1779)) rotateY(0deg) scale(0.7);
    transition:
      transform var(--dur-slow) var(--ease-out),
      opacity var(--dur-slow) var(--ease-out);
    backface-visibility: hidden;
  }

  .hero-slider__slide[data-state="current"] {
    transform: translateX(0) perspective(calc(var(--u) * 1779)) rotateY(0deg) scale(1);
  }

  /* side slides: 380×420 at 16 px from the stage edge, the outer edge 25 % shorter (Figma 46:200) */
  .hero-slider__slide[data-state="prev"],
  .hero-slider__slide[data-state="next"] {
    z-index: 2;
    opacity: 1;
  }

  .hero-slider__slide[data-state="prev"] {
    transform: translateX(calc(var(--u) * -540)) perspective(calc(var(--u) * 1779)) rotateY(-53deg) scale(0.707);
  }

  .hero-slider__slide[data-state="next"] {
    transform: translateX(calc(var(--u) * 540)) perspective(calc(var(--u) * 1779)) rotateY(53deg) scale(0.707);
  }

  .hero-slider__slide[data-state="prev"] .hero-slider__shade,
  .hero-slider__slide[data-state="next"] .hero-slider__shade {
    opacity: 1;
  }

  .hero-slider__slide[data-state="prev"] .hero-slider__sheen,
  .hero-slider__slide[data-state="next"] .hero-slider__sheen {
    opacity: 0.5;
  }

  .hero-slider__slide[data-state="prev"] .hero-slider__frame,
  .hero-slider__slide[data-state="next"] .hero-slider__frame {
    box-shadow: var(--shadow-slide-side);
  }

  .hero-slider__slide[data-state="prev"] .hero-slider__floor,
  .hero-slider__slide[data-state="next"] .hero-slider__floor {
    opacity: 0.06;
  }

  .hero-slider__floor {
    top: calc(100% + var(--u) * 10);
    height: calc(var(--u) * 26);
    filter: blur(calc(var(--u) * 18));
  }

  .hero-slider__controls {
    gap: var(--space-24);
    margin-top: calc(var(--space-32) + var(--space-4));
  }

  .hero-slider__dot {
    width: 24px;
  }

  .hero-slider__dot[aria-current="true"] {
    width: 40px;
  }

  .hero-slider__toggle {
    position: absolute;
    top: 50%;
    left: calc(100% + var(--space-16));
    margin-top: -22px;
  }
}

@media (min-width: 1024px) {
  .hero-slider {
    --hero-slider-top: var(--space-48);
  }
}

/* reduced motion: no travelling slides, a plain cross-fade (250 ms is set explicitly because the duration tokens collapse) */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide,
  .hero-slider__slide[data-state="prev"],
  .hero-slider__slide[data-state="next"],
  .hero-slider__slide[data-state="off"] {
    transform: none;
    opacity: 0;
    transition: opacity 250ms linear;
  }

  .hero-slider__slide[data-state="current"] {
    transform: none;
    opacity: 1;
  }

  .hero-slider__slide.is-entering {
    animation: none;
  }
}

/* ---- mosaic (quick access tiles) --------------------------------------------------------------------------------
   Edge to edge, 2 px gutters. ≥ 1024: 2 large tiles (720×440) + up to 4 small sharing the second row (4 × 360×340,
   2 × 720×340 …, class mosaic--row-N); below: 2-column grid, large tiles full width. Whole tile is the link; image zoom on hover, gradient + title + description + arrow at the bottom.     */
.mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.mosaic__tile {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  background: var(--color-tile);
  color: var(--color-white);
  text-decoration: none;
}

.mosaic__tile--large {
  grid-column: 1 / -1;
  aspect-ratio: 720 / 440;
}

.mosaic__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.mosaic__tile::after {
  content: "";
  position: absolute;
  inset: 22% 0 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--color-overlay-navy-strong));
  pointer-events: none;
}

.mosaic__label {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 0 var(--space-16) var(--space-16);
}

.mosaic__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.mosaic__title {
  color: var(--color-white);
  font-size: 1.1875rem;
  font-weight: var(--weight-medium);
  line-height: 1.37;
}

.mosaic__desc {
  color: var(--color-on-image);
  font-size: var(--text-small-size);
  line-height: 1.54;
}

.mosaic__arrow {
  --icon-size: 22px;
  flex: none;
  color: var(--color-white);
  transition: transform var(--dur-fast) var(--ease-out);
}

.mosaic__tile:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: -6px;
}

@media (hover: hover) {
  .mosaic__tile:hover .mosaic__image {
    transform: scale(1.05);
  }

  .mosaic__tile:hover .mosaic__arrow {
    transform: translate(2px, -2px);
  }
}

@media (min-width: 768px) {
  .mosaic__label {
    padding: 0 var(--space-24) var(--space-22);
  }
}

@media (min-width: 1024px) {
  .mosaic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .mosaic__tile {
    grid-column: span 3;
    aspect-ratio: 360 / 340;
  }

  .mosaic__tile--large {
    grid-column: span 6;
    aspect-ratio: 720 / 440;
  }

  /* fewer than four small tiles share the second row evenly (two tiles: 720 × 340, Figma 46:200 of 7 Oct 2026) */
  .mosaic--row-1 .mosaic__tile:not(.mosaic__tile--large) {
    grid-column: 1 / -1;
    aspect-ratio: 1440 / 340;
  }

  .mosaic--row-2 .mosaic__tile:not(.mosaic__tile--large) {
    grid-column: span 6;
    aspect-ratio: 720 / 340;
  }

  .mosaic--row-3 .mosaic__tile:not(.mosaic__tile--large) {
    grid-column: span 4;
    aspect-ratio: 480 / 340;
  }

  .mosaic__tile::after {
    inset: 47% 0 0;
  }

  .mosaic__tile--large::after {
    inset: 50% 0 0;
  }

  .mosaic__tile--large .mosaic__label {
    padding: 0 var(--space-32) var(--space-28);
  }

  .mosaic__tile--large .mosaic__title {
    font-size: 1.625rem;
    line-height: 1.31;
  }

  .mosaic__tile--large .mosaic__desc {
    font-size: var(--text-body-sm-size);
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mosaic__tile:hover .mosaic__image,
  .mosaic__tile:hover .mosaic__arrow {
    transform: none;
  }
}

/* ---- logo marquee ------------------------------------------------------------------------------------------------
   Two identical tracks side by side, the pair slides left by exactly one track (seamless loop). Pauses on hover and
   keyboard focus; with reduced motion it becomes a static, wrapping grid (the second track and repeats are hidden).
   --marquee-items (data-driven, inline) = logos per track incl. repeats → 5 s per logo.                              */
.logo-marquee {
  --marquee-fade: 48px;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-ink) var(--marquee-fade), var(--color-ink) calc(100% - var(--marquee-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, var(--color-ink) var(--marquee-fade), var(--color-ink) calc(100% - var(--marquee-fade)), transparent);
}

.logo-marquee__inner {
  display: flex;
  width: max-content;
  animation: logo-marquee calc(var(--marquee-items, 10) * 5s) linear infinite;
}

.logo-marquee:hover .logo-marquee__inner,
.logo-marquee:focus-within .logo-marquee__inner {
  animation-play-state: paused;
}

.logo-marquee__track {
  display: flex;
  flex: none;
  gap: var(--space-16);
  margin: 0;
  padding: 0 var(--space-16) 0 0;
  list-style: none;
}

.logo-marquee__item {
  display: grid;
  flex: none;
  place-items: center;
  width: 168px;
  height: 92px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.logo-marquee__item img {
  width: auto;
  max-width: 116px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

.logo-marquee__link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

@keyframes logo-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) {
  .logo-marquee__item {
    width: 208px;
    height: 112px;
  }

  .logo-marquee__item img {
    max-width: 148px;
    max-height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .logo-marquee__inner {
    width: auto;
    animation: none;
  }

  .logo-marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }

  .logo-marquee__track[aria-hidden="true"]{
    display: none;
  }
}

/* ---- partner logos (stakeholders): natural width, fixed height, linked to the partner's site -----------------------*/
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-24) var(--space-40);
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-logos__image {
  width: auto;
  height: 88px;
}

.partner-logos__link {
  display: block;
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .partner-logos__link:hover {
    transform: translateY(-2px);
  }
}

@media (min-width: 1024px) {
  .partner-logos {
    gap: var(--space-32) 70px;
  }

  .partner-logos__image {
    height: 120px;
  }
}

/* ---- announcement panel (home): underline tabs + dated rows; a shadowed card on phones, a plain column from 768 ------
   Markup: .announce-panel > .tabs.tabs--underline[data-tabs] > .tabs__panel > ul.announce-list > li > a.announce-row
           (+ time.date-tile.date-tile--plain, .announce-row__body > __title + __unit), then a.text-link.announce-panel__all */
.announce-panel {
  min-width: 0;
  padding: var(--space-4) var(--space-20) var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.announce-panel .tabs__tab[aria-selected="true"] {
  font-weight: var(--weight-bold);
}

.announce-panel__empty {
  margin: 0;
  padding: var(--space-24) 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.announce-list {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  list-style: none;
}

.announce-list > li + li {
  border-top: 1px solid var(--color-border);
}

.announce-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-20);
  padding: var(--space-20) 0;
  color: var(--color-indigo);
  text-decoration: none;
}

.announce-list > li:first-child .announce-row {
  padding-top: 0;
}

.announce-row .date-tile--plain {
  width: 46px;
  min-height: 106px;
}

.announce-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: 0;
  padding-block: var(--space-4);
}

.announce-row__title,
.announce-row__unit {
  font-size: 1rem;
  font-weight: var(--weight-medium);
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease-out);
}

.announce-row:hover .announce-row__title {
  color: var(--color-blue-600);
}

.announce-panel__all {
  margin-top: 0;
  padding-top: var(--space-16);
}

/* phones keep the three-row card of Figma 202:188; the fourth row is the 768 px-and-up list */
@media (max-width: 767.98px) {
  .announce-list > li:nth-child(n + 4) {
    display: none;
  }
}

/* 768 px up (Figma 234:218, 5 Oct 2026): no card. 22 px tabs with a 3 px rule, four rows, a 76×84 date box without the
   year, a hairline under each row's text. The "all" links stay a phone-only affordance (the phone design keeps them). */
@media (min-width: 768px) {
  .announce-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .announce-panel .tabs--underline .tabs__list {
    gap: var(--space-32);
  }

  .announce-panel .tabs--underline .tabs__tab {
    min-height: 48px;
    padding-block: var(--space-10);
    border-bottom-width: 3px;
    font-size: 1.375rem;
    line-height: 1.15;
  }

  .announce-panel .tabs--underline .tabs__panel {
    margin-top: var(--space-28);
  }

  .announce-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    border-bottom: 0;
  }

  .announce-list > li + li {
    border-top: 0;
  }

  .announce-row,
  .announce-list > li:first-child .announce-row {
    align-items: center;
    gap: var(--space-24);
    padding: 0;
  }

  .announce-row .date-tile--plain {
    gap: var(--space-2);
    width: 76px;
    min-height: 84px;
    border: 1px solid var(--color-tile);
    border-radius: var(--radius-sm);
    background: var(--color-white);
  }

  .announce-row .date-tile--plain .date-tile__day {
    font-size: 2rem;
    font-weight: var(--weight-medium);
    line-height: 1.125;
  }

  .announce-row .date-tile--plain .date-tile__month {
    font-size: 0.875rem;
    line-height: 1.286;
  }

  .announce-row .date-tile__year {
    display: none;
  }

  /* Figma rows are 111 px high whatever the title length, so the list ends with the news cards */
  .announce-row__body {
    justify-content: center;
    gap: var(--space-6);
    min-height: 111px;
    padding-block: var(--space-20);
    border-bottom: 1px solid var(--color-border);
  }

  .announce-row__title {
    color: var(--color-ink);
    font-size: 1.0625rem;
    line-height: 1.353;
  }

  .announce-row__unit {
    color: var(--color-text-muted);
    font-size: var(--text-small-size);
    font-weight: var(--weight-regular);
    line-height: var(--text-small-lh);
  }

  .announce-panel__all {
    display: none;
  }
}

/* ---- contact list: label / large value rows between hairlines (home contact section) ----------------------------- */
.contact-list {
  margin: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.contact-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-16) 0;
}

.contact-list__row + .contact-list__row {
  border-top: 1px solid var(--color-border);
}

.contact-list dt {
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.contact-list dd {
  margin: 0;
  min-width: 0;
}

.contact-list__value {
  display: inline-block;
  color: var(--color-navy-800);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  font-weight: var(--weight-medium);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.contact-list__value:hover {
  color: var(--color-blue-600);
}

.contact-list__address {
  color: var(--color-ink);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.625;
}

@media (max-width: 1023.98px) {
  .contact-list__value {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (min-width: 768px) {
  .contact-list__row {
    grid-template-columns: minmax(6rem, 40%) minmax(0, 1fr);
    align-items: center;
    padding: var(--space-20) 0;
  }
}

@media (min-width: 1280px) {
  .contact-list__row {
    grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  }
}

/* ---- map placeholder: shown until the lazy Google Maps iframe has loaded (JS adds .is-loaded) --------------------- */
.map-embed__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-16);
  color: var(--color-slate-600);
  text-align: center;
  transition: opacity var(--dur-base) var(--ease-out);
}

.map-embed__pin {
  margin-bottom: var(--space-4);
  color: var(--color-slate-500);
}

.map-embed__placeholder-title,
.map-embed__placeholder-caption {
  margin: 0;
}

.map-embed__placeholder-title {
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: 1.15;
}

.map-embed__placeholder-caption {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.map-embed.is-loaded .map-embed__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* consent-gated embed: "Haritayı göster" (JS un-hides it) + the plain "open in Google Maps" link + the third-party note */
.map-embed__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-16);
  margin-top: var(--space-8);
}

.map-embed__open {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.map-embed__note {
  max-width: 46ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.map-embed__note a {
  white-space: nowrap;
}

/* ==========================================================================
   23 · Kurumsal + Yatırım page patterns (phase 4) — shared by 13 routes: page sections, figures, document list, info strip,
   note card, table columns, plus the small corrections that make the phase 2 components match Figma (bullet indent, values grid,
   timeline rhythm, chairman card). Partials: parts/{section-heading,stat-grid,doc-list,info-note,price-cards,phase-cards}.php.
   Shown on /_styleguide#pages. Tokens only, BEM, mobile-first.
   ========================================================================== */

/* vertical rhythm of the main column: every section / block is 32 px (phones) → 40 px (Figma) apart */
.page-sections,
.page-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

/* eyebrow + title, then the content — 24 px instead of 40 px (Hakkımızda "Stratejik konum") */
.page-section--tight {
  gap: var(--space-24);
}

.section-heading--loose {
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .page-sections,
  .page-section {
    gap: var(--space-40);
  }

  .page-section--tight {
    gap: var(--space-24);
  }
}

/* main-column introduction: eyebrow, then the panel text (first <h2> = title, paragraphs) with 20 px between everything */
.page-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.page-intro .prose h2 + * {
  margin-top: var(--space-20);
}

/* long sentence titles wrap naturally (Figma), the balanced wrapping of headings would break them earlier */
.page-intro .prose > h2:first-child {
  text-wrap: pretty;
}

/* figure with a fixed-ratio media box or a map embed (Figma 964×420 / 964×460 / 964×480 at desktop) */
.page-figure {
  margin: 0;
}

.page-figure__media {
  --media-ratio: 16 / 10;
}

.page-figure__link {
  display: block;
  border-radius: var(--radius-lg);
}

.page-figure__map {
  aspect-ratio: 16 / 10;
  min-height: 0;
}

@media (min-width: 768px) {
  .page-figure__media {
    --media-ratio: 964 / 420;
  }

  .page-figure--map .page-figure__media {
    --media-ratio: 964 / 460;
  }

  .page-figure__map {
    aspect-ratio: 964 / 480;
  }
}

/* document rows (legislation, incentives, application form): 12 px apart */
.doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* "Ödeme planı  1/4'ü peşin …": label + one line of text on a surface strip */
.info-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-16);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.info-strip__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}

.info-strip__text {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

@media (min-width: 768px) {
  .info-strip {
    padding: var(--space-20) var(--space-28);
  }
}

/* "Ödeme yaparken" note under the bank card: surface card with a title and one paragraph */
.note-card {
  --card-pad: var(--space-20);
  --card-gap: var(--space-8);
}

.note-card__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

@media (min-width: 768px) {
  .note-card {
    --card-pad: var(--space-24) var(--space-28);
  }
}

/* founding stakeholders box: 28 px padding, 16 px between label and chips (Figma 54:2) */
.card--gap-lg {
  --card-pad: var(--space-24);
  --card-gap: var(--space-16);
}

@media (min-width: 768px) {
  .card--gap-lg {
    --card-pad: var(--space-28);
  }
}

/* mission / vision: two cards side by side from 52 rem of container width, stacked below */
.card-grid--statements > * {
  --cols-md: 1;
  --cols-lg: 2;
}

/* values grid: the last card takes the whole row when it would sit alone (3 → 7th of 7; 2 → odd counts) */
@container (min-width: 30rem) {
  .numbered-list--cards > :last-child:nth-child(odd) {
    flex-basis: 100%;
  }
}

@container (min-width: 52rem) {
  .numbered-list--cards > :last-child:nth-child(odd) {
    flex-basis: calc((100% - 2 * var(--grid-gap)) / 3);
  }

  .numbered-list--cards > :last-child:nth-child(3n + 1) {
    flex-basis: 100%;
  }
}

/* values grid cards: 24 px padding, big accent numeral (large text: the accent blue-500 passes 3:1) */
.numbered-list--cards .numbered-list__item {
  gap: calc(var(--space-12) + var(--space-2));
  padding: var(--space-24);
}

.numbered-list--cards .numbered-list__item::before {
  color: var(--color-blue-500);
}

/* neighbour / direction cards: label + name, 24 px padding, 8 px gap, names wrap naturally (Figma 81:365) */
.info-card--roomy {
  --card-pad: var(--space-24);
  --card-gap: var(--space-8);
}

.info-card--roomy .info-card__value {
  text-wrap: pretty;
}

/* card and step titles wrap like the Figma text boxes (no balancing) */
.steps__title,
.card__title,
.numbered-list__title {
  text-wrap: pretty;
}

/* payment timeline: 10 px between value, label and caption */
@media (min-width: 768px) {
  .steps--timeline .steps__item {
    gap: var(--space-10);
  }
}

/* bank card: currency chip centred against the bank block, first label in sky (Figma 56:285) */
.bank-card__head {
  align-items: center;
}

.bank-card__label--accent {
  color: var(--color-sky-400);
}

/* compact CTA strip (FAQ "Bize yazın"): 28 px padding all around; tall = 36 px above and below (Parsel Durumu, 133 px) */
@media (min-width: 768px) {
  .cta-band--compact {
    padding: var(--space-28);
  }

  .cta-band--tall {
    padding-block: calc(var(--space-32) + var(--space-4));
  }
}

/* payment plan strip: label in accent (Figma 81:19) */
.info-strip__label {
  color: var(--color-blue-600);
}

/* parcels table: fixed column proportions of the Figma table (text starts at x = 24 · 110 · 306 · 492 · 708 px inside the 964 px card) */
@media (min-width: 768px) {
  .table--parcels {
    table-layout: fixed;
  }

  .table--parcels th,
  .table--parcels td {
    padding-inline: var(--space-8);
  }

  .table--parcels th:first-child,
  .table--parcels td:first-child {
    padding-left: var(--space-24);
  }

  .table--parcels th:last-child,
  .table--parcels td:last-child {
    padding-right: var(--space-24);
  }

  .table--parcels th:nth-child(1) { width: 10.6%; }
  .table--parcels th:nth-child(2) { width: 20.4%; }
  .table--parcels th:nth-child(3) { width: 19.3%; }
  .table--parcels th:nth-child(4) { width: 22.5%; }
}

/* the bullet list of a statement card keeps its divider padding (.bullet-list resets padding and is declared later) */
.bullet-list.statement-card__list {
  padding-top: var(--space-16);
}

/* chairman card: the text block has no padding of its own (Figma 55:265) */
.person-card--featured .person-card__body {
  padding: 0;
}

/* service card: 220 px title column, 32 px gap (Figma 57:2) */
@media (min-width: 768px) {
  .service-card {
    grid-template-columns: minmax(10rem, 13.75rem) 1fr;
  }
}

/* bullet: 6 px dot + 12 px gap = 18 px text indent (Figma 55:297 · 57:2) */
.bullet-list > li {
  padding-left: calc(var(--space-16) + var(--space-2));
}

/* info note with the plain "i" glyph (Figma "Bilgi notu": accent bold 18/31 "i", 16 px gap, 20 × 28 padding) */
.info-note--glyph {
  align-items: center;
}

.info-note__glyph {
  flex: none;
  color: var(--color-blue-600);
  font-size: var(--text-title-size);
  font-weight: var(--weight-bold);
  line-height: var(--text-title-lh);
}

.info-note--glyph .info-note__body {
  padding-top: 0;
}

/* ==========================================================================
   Phase 5 · stream A · lists — components
   ========================================================================== */

/* stream A · lists — components
   Güncel: news, announcements, tenders, details. Partials: parts/{news-item,notice-row,tender-item,list-chips,list-empty,notice-meta,
   notice-facts,notice-poster,notice-docs,post-nav,post-share,photo-grid}.php. Shown on /_styleguide#p5-lists. Tokens only, BEM, mobile-first. */

/* ---- list plumbing: lists are real <ul>s, the rows keep the phase-2 row components ---- */
.news-list,
.list-panel,
.news-more__grid,
.photo-grid {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.news-list > li,
.news-more__grid > li,
.photo-grid > li {
  min-width: 0;
}

/* the hairline under the last row of the news list is Figma's (60:2) — kept */
.list-filter {
  min-width: 0;
}

/* ---- announcement / notice list (Figma 61:2): the bordered panel is a <ul> ---- */
.list-panel {
  padding: var(--space-4) var(--space-16);
}

@media (min-width: 768px) {
  .list-panel {
    padding: var(--space-8) var(--space-28);
  }
}

/* ---- tender cards (Figma 61:362): 16 px apart, the action stays beside the title from 768 px ---- */
.tender-list {
  gap: var(--space-24);
}

.tender-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.list-card__action {
  align-self: stretch;
}

@media (min-width: 768px) {
  .list-card__action {
    align-self: center;
  }
}

/* ---- empty state on a surface panel (Figma 83:682 / 83:958): "0" disc, title, text, two buttons ---- */
.empty-state--panel {
  width: 100%;
  max-width: none;
  gap: calc(var(--space-12) + var(--space-2));
  padding: var(--space-40) var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.empty-state__icon--numeral {
  background: var(--color-white);
  color: var(--color-blue-600);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  font-variant-numeric: lining-nums;
}

.empty-state--panel .empty-state__text {
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .empty-state--panel {
    padding: var(--space-72) var(--space-28);
  }
}

/* ---- notice meta bar: issuing unit next to the date ---- */
.notice-meta__unit {
  color: var(--color-text-muted);
}

.notice-meta__unit-label {
  font-weight: var(--weight-medium);
}

/* the previous / next pair keeps its column when only one neighbour exists */
@media (min-width: 640px) {
  .prev-next__link--next:only-child {
    grid-column: 2;
  }
}

.notice-back {
  margin: 0;
}

.print-only {
  display: none;
}

/* ---- notice lead + body (Figma 82:306): 18/31 ink lead, sections 40 px apart ---- */
.notice-lead {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
}

.notice-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

@media (min-width: 768px) {
  .notice-body {
    gap: var(--space-40);
  }
}

.notice-body .notice-lead {
  margin: 0;
}

.notice-prose {
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.notice-prose > * + * {
  margin-top: var(--space-16);
}

.notice-heading {
  gap: var(--space-12);
}

/* bullet list inside a card (Figma "Yapılacak işler") */
.notice-card {
  padding: var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.notice-card .prose {
  color: var(--color-ink);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.notice-card .prose li + li {
  margin-top: var(--space-12);
}

@media (min-width: 768px) {
  .notice-card {
    padding: var(--space-28);
  }
}

/* callout: surface box for a remark ("Değerlendirme", "Birden fazla başvuru"; the panel's quote button) */
.notice-callout {
  padding: var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.notice-callout .prose {
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.notice-callout .prose strong {
  color: var(--color-navy-800);
  font-weight: var(--weight-medium);
}

.notice-callout .prose > * + * {
  margin-top: var(--space-8);
}

.notice-callout .prose blockquote {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
}

@media (min-width: 768px) {
  .notice-callout {
    padding: var(--space-24) var(--space-28);
  }
}

/* numbered lists of a notice: the marker comes from the source (letters, skipped numbers) through data-marker */
.numbered-list--marked .numbered-list__item::before {
  content: attr(data-marker);
}

.numbered-list--conditions .numbered-list__text a,
.numbered-list--marked .numbered-list__text a {
  color: var(--color-blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.numbered-list--conditions .numbered-list__text strong,
.numbered-list--marked .numbered-list__text strong {
  color: var(--color-navy-800);
  font-weight: var(--weight-medium);
}

/* condition list of a notice (Figma 83:19): the numeral column is as wide as "01", the text starts 36 px in */
.numbered-list--conditions .numbered-list__item {
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-12);
}

/* tables of a notice: table component + the scroll region; the hidden caption names the region */
.notice-body .table-wrap {
  margin: 0;
}

/* ---- poster / notice picture (Figma 82:19): natural aspect, never cropped, centred; the zoom badge sits on the picture ---- */
.notice-poster > .zoomable {
  max-width: none;
  text-align: center;
}

.notice-poster__frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  line-height: 0;
}

.notice-poster__frame--portrait {
  max-width: min(100%, 42.5rem);
}

/* the picture size is known: the frame gets its width before the picture arrives, so nothing below it moves when the picture does */
.notice-poster__frame--sized {
  width: var(--poster-width);
}

.notice-poster__frame--sized .notice-poster__image {
  width: 100%;
}

.notice-poster__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-placeholder);
}

/* ---- documents strip of a tender notice (Figma 83:19 "İhale belgeleri") ---- */
.notice-docs {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.notice-docs__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.notice-docs__lead {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.notice-docs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.notice-docs__actions .button {
  max-width: 100%;
  white-space: normal;
}

/* the strip is a row only when its column is wide (beside the sidebar the column is 588 px at 1024, 704 px at 768) */
.notice-page {
  container-type: inline-size;
}

@container (min-width: 46rem) {
  .notice-docs {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-24) var(--space-28);
  }

  .notice-docs__text {
    flex: 1 1 14rem;
    min-width: 0;
  }

  .notice-docs__actions {
    flex: 0 1 auto;
    justify-content: flex-end;
  }
}

/* ---- share row: copy button state, native share button ---- */
.share__copy > .icon {
  --icon-size: 16px;
}

.share__copy.is-copied,
.share__copy.is-copied:hover {
  border-color: var(--color-success-bg);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.share__native[hidden] {
  display: none;
}

/* ---- featured news card (Figma 60:2): horizontal only when its column is wide enough. The phase-2 rule switches at a 768 px
   VIEWPORT, but beside the sidebar the column is 588 px at 1024 and 704 px at 768 — the text would get 26 / 142 px. So the layout follows the
   width of the column: stacked below 52 rem, picture and text 50/50 up to 60 rem, the Figma 480 px picture from 60 rem (964 px column). ---- */
.news-feature {
  container-type: inline-size;
}

@container (max-width: 51.99rem) {
  .news-feature .news-card--featured {
    display: flex;
    align-items: stretch;
    gap: var(--space-16);
    padding: var(--space-12);
  }

  .news-feature .news-card--featured .news-card__body {
    gap: var(--space-12);
    padding: var(--space-4) var(--space-8) var(--space-8);
  }
}

@container (min-width: 52rem) and (max-width: 59.99rem) {
  .news-feature .news-card--featured {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-24);
    padding-right: var(--space-24);
  }
}

/* ---- news detail: cover, lead paragraph, photo grid, "Diğer haberler" ---- */
.news-cover {
  display: flex;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.news-cover__image {
  display: block;
  max-width: 100%;
  height: auto;
}

.news-body {
  color: var(--color-slate-600);
}

.news-body > p:first-child {
  color: var(--color-ink);
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
}

.news-body li {
  color: var(--color-ink);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-12);
}

.photo-grid__link {
  border-radius: var(--radius-lg);
}

.photo-grid__link .media {
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .photo-grid__link:hover .media {
    box-shadow: var(--shadow-soft);
  }
}

.news-more {
  container-type: inline-size;
}

.news-more__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-24) var(--space-16);
}

@container (min-width: 30rem) {
  .news-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 52rem) {
  .news-more__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

/* ---- tender facts in a two-column container: the first (highlighted) fact spans the row, so the three highlighted boxes stay symmetric ---- */
@container (min-width: 30rem) and (max-width: 51.99rem) {
  .notice-facts .fact-grid > .fact--highlight:first-child {
    flex-basis: 100%;
  }
}

/* ---- phones: a smaller date tile gives the titles more room ---- */
@media (max-width: 479px) {
  .list-row .date-tile,
  .list-card .date-tile {
    width: 64px;
    min-height: 80px;
  }

  .list-row .date-tile__day,
  .list-card .date-tile__day {
    font-size: 1.625rem;
  }
}

/* ==========================================================================
   Phase 5 · stream B · hub — components
   ========================================================================== */

/* stream B · hub — components */

/* ---- lightbox polish (behaviour: assets/js/gallery.js, markup: parts/lightbox.php) ---- */

/* entrance: a short fade — the viewer is opened now and then, never repeatedly like a keyboard action */
dialog.lightbox[open] {
  animation: lightbox-in var(--dur-base) var(--ease-out);
}

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

  to {
    opacity: 1;
  }
}

/* notches and rounded corners: the bar and the arrows keep clear of the safe areas */
.lightbox__top {
  padding-top: max(var(--space-8), env(safe-area-inset-top));
  padding-right: max(var(--space-8), env(safe-area-inset-right));
  padding-left: max(var(--space-20), env(safe-area-inset-left));
}

.lightbox__thumbs,
.lightbox__caption {
  padding-bottom: max(var(--space-16), env(safe-area-inset-bottom));
}

.lightbox__figure {
  position: relative;
}

.lightbox__figure > img {
  user-select: none;
  -webkit-user-drag: none;
}

/* the arrows stay in the tab order at both ends (aria-disabled instead of disabled: focus is never lost) */
.lightbox__nav[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .lightbox__nav:not([aria-disabled="true"]):hover {
    background: var(--color-on-dark-border);
  }
}

.lightbox__close:active,
.lightbox__nav:not([aria-disabled="true"]):active {
  transform: scale(0.96);
}

.lightbox__nav:not([aria-disabled="true"]):active {
  transform: translateY(-50%) scale(0.96);
}

/* a picture that arrives after a click or a swipe slides in from the side it came from */
.lightbox__figure > img.is-enter-next {
  animation: lightbox-slide-next 220ms var(--ease-out);
}

.lightbox__figure > img.is-enter-prev {
  animation: lightbox-slide-prev 220ms var(--ease-out);
}

@keyframes lightbox-slide-next {
  from {
    opacity: 0;
    transform: translate3d(28px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lightbox-slide-prev {
  from {
    opacity: 0;
    transform: translate3d(-28px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* slow picture: the old one dims and a small ring turns above it (only after 160 ms, so cached pictures never flash) */
.lightbox__figure.is-loading > img {
  opacity: 0.45;
  transition: opacity var(--dur-base) var(--ease-out);
}

.lightbox__figure.is-loading::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid var(--color-hover-on-dark);
  border-top-color: var(--color-sky-400);
  border-radius: var(--radius-full);
  content: "";
  animation: lightbox-spin 700ms linear infinite;
}

@keyframes lightbox-spin {
  to {
    transform: rotate(360deg);
  }
}

.lightbox__error {
  max-width: 28rem;
  margin: 0;
  padding: var(--space-16) var(--space-20);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-lg);
  color: var(--color-on-image);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  text-align: center;
}

.lightbox__caption[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  dialog.lightbox[open],
  .lightbox__figure > img.is-enter-next,
  .lightbox__figure > img.is-enter-prev {
    animation: none;
  }

  .lightbox__figure.is-loading::after {
    animation: none;
  }
}

/* ---- gallery: album chips, photo grid + tile (Figma 64:2: two columns of 652 x 440 tiles, 16 px gaps, radius 12) ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
  }
}

/* long albums (7 photos and more): smaller tiles, two columns on phones and three from 768 px */
.gallery-grid--dense {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

@media (min-width: 480px) {
  .gallery-grid--dense {
    gap: var(--space-12);
  }
}

@media (min-width: 768px) {
  .gallery-grid--dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16);
  }
}

.gallery-tile {
  position: relative;
  display: block;
  aspect-ratio: 652 / 440;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: var(--color-placeholder);
  cursor: zoom-in;
}

.gallery-tile__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms var(--ease-out);
}

/* portrait or very wide photos are never cropped (contract 12.3): centred on the tint */
.gallery-tile__image--contain {
  object-fit: contain;
}

.gallery-tile__badge {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-navy-800);
  box-shadow: var(--shadow-control);
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.gallery-tile:focus-visible .gallery-tile__badge {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-tile:hover .gallery-tile__image {
    transform: scale(1.03);
  }

  .gallery-tile:hover .gallery-tile__badge {
    opacity: 1;
    transform: none;
  }
}

/* ---- company filter: search + live count, logo grid items, no-results state (Figma 62:2) ---- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

@media (min-width: 640px) {
  .filter-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
  }
}

.filter-bar__search {
  flex: 1 1 auto;
  width: 100%;
  max-width: 22.5rem;
}

/* Figma: field 57 px high with its border */
.filter-bar__search .search-field__input {
  min-height: 55px;
}

.filter-bar__count {
  flex: none;
  margin: 0 0 0 auto;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  font-variant-numeric: tabular-nums;
}

/* without JavaScript the field would do nothing: only the count stays */
.no-js .filter-bar__search {
  display: none;
}

.company-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-grid__item {
  display: flex;
}

.company-grid__item > .logo-card {
  flex: 1 1 auto;
}

.logo-card--static {
  transition: none;
}

/* ---- plan card: white frame around the map viewer + caption row with the download button (Figma 62:376) ---- */
.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

/*
 * The frame follows the proportions of the plan from 768 px, so the whole plan is the initial view (the viewer part sets --viewer-ratio).
 * On phones it is square: the plan (landscape) leaves a band above and below, and the viewer's own controls and hint sit in those
 * bands instead of on top of the drawing.
 */
.plan-card .viewer {
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .plan-card .viewer {
    aspect-ratio: var(--viewer-ratio, 3509 / 2480);
  }
}

.plan-card__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12) var(--space-16);
  padding: 0 var(--space-4) var(--space-4);
}

.plan-card__caption {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

@media (min-width: 768px) {
  .plan-card {
    gap: var(--space-16);
    padding: var(--space-16);
  }

  .plan-card__tools {
    padding: 0 var(--space-8);
  }
}

/* ---- employment: CV card = cta-band --stacked with the address and the mail button in one row (Figma 62:653) ---- */
.cta-band--apply .cta-band__body {
  max-width: 54rem;
}

.cta-band--apply .cta-band__text p + p {
  margin-top: var(--space-12);
}

.cta-band__apply {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-16);
  min-width: 0;
  padding-top: var(--space-4);
}

a.cta-band__display {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  text-underline-offset: 0.18em;
}

@media (hover: hover) {
  a.cta-band__display:hover {
    text-decoration: underline;
  }
}

.tips-card {
  --card-pad: var(--space-20);
  --card-gap: var(--space-12);
}

@media (min-width: 768px) {
  .tips-card {
    --card-pad: var(--space-28);
  }
}

/* ---- application documents: chip index + group grid (Figma 63:2) ---- */
/*
 * Groups are laid out by size, not by position: a group with COSB_DOC_GROUP_WIDE_FROM (4) rows or more is "wide" (whole row, two-column
 * list from 1024 px), a smaller one is "compact" and shares a row (1 column < 1024 px, 2 columns 1024-1279, 3 columns from 1280).
 * Groups an editor adds later are appended by creation date and take whichever slot their size asks for.
 */
.doc-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-16);
  min-width: 0;
}

@media (min-width: 768px) {
  .doc-groups {
    gap: var(--space-40) var(--space-16);
  }
}

@media (min-width: 1024px) {
  .doc-groups {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .doc-group--wide {
    grid-column: 1 / -1;
  }

  .doc-group--compact {
    grid-column: span 3;
  }

  .doc-group--wide .doc-group__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .doc-group--compact {
    grid-column: span 2;
  }

  /* two compact groups alone between wide ones share the row half and half (7 Oct 2026: Kiralama group added) */
  .doc-group--run-2 {
    grid-column: span 3;
  }
}

@media (min-width: 1024px) {
  /* a single compact group between wide ones takes the whole row (its list stays one column) */
  .doc-group--run-1 {
    grid-column: 1 / -1;
  }
}

.doc-group--compact .doc-group__list {
  grid-template-columns: minmax(0, 1fr);
}

.doc-group {
  scroll-margin-top: var(--space-56);
}

@media (min-width: 1024px) {
  .doc-group {
    scroll-margin-top: 0;
  }
}

.doc-group:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--space-4);
}

/* Figma: the head of a group is followed by a hairline; rows carry their own rule */
.doc-group__head {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-16);
}

.doc-group__list > li:last-child > .doc-row--compact {
  border-bottom-color: transparent;
}

.doc-row--compact .doc-row__meta {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Phase 5 · stream C · forms — components
   ========================================================================== */

/* stream C · forms — components
   Reusable form patterns of the contact and information-request pages (Figma 64:272, 85:330), loaded after components.css:
   request form container, two-column form grid + field sets, segmented (radio) switch, reply-preference row, error summary,
   result box, "no JavaScript" note, inline field action, info-card row of the request page.
   Built on the existing form components (docs/components.md §12) — tokens only, BEM, mobile-first. */

/* ---- request form: the container the field grid measures itself against ------------------------------------------------ */
/* Vertical rhythm by margins, not by a flex gap: the empty live region of the error summary must not add a gap of its own. */
.request-form {
  container: form / inline-size;
  min-width: 0;
}

.request-form > .form-nojs,
.request-form > .segmented,
.form-summary {
  margin-bottom: var(--space-20);
}

.request-form > .form-status,
.request-form > .form-actions {
  margin-top: var(--space-20);
}

/* heading of a form panel (Figma 64:272): 8 px between eyebrow and title, title 30 / 38 */
.section-heading--form {
  gap: var(--space-8);
}

.section-heading--form .section-heading__title {
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
  line-height: 1.267;
}

/* desktop checkbox rows are exactly one text line high (Figma), touch sizes keep their 44 px */
@media (min-width: 1024px) {
  .request-form .checkbox,
  .request-form .radio {
    padding-block: 0;
  }
}

/* Figma: information-request form panel has 36 px padding (contact 40, the default) */
.form-panel--compact {
  padding: var(--space-24);
}

@media (min-width: 768px) {
  .form-panel--compact {
    padding: calc(var(--space-32) + var(--space-4));
  }
}

/* ---- two-column field grid: one column on phones, two from 30 rem of FORM width (works beside the 300 px sidebar too) ---- */
.form-grid--pair {
  grid-template-columns: minmax(0, 1fr);
}

@container form (min-width: 30rem) {
  .form-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* a field set that is shown or hidden as a whole (individual / legal entity, postal address): its fields join the parent grid */
.form-grid__set {
  display: contents;
}

/* ---- segmented switch: radio inputs drawn as two buttons (Figma "Başvuran türü") ------------------------------------------ */
.segmented {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.segmented__options {
  display: flex;
  gap: var(--space-8);
}

.segmented__option {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-10) calc(var(--space-16) + var(--space-2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-slate-600);
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-button-lh);
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.segmented__option:hover {
  border-color: var(--color-slate-500);
  color: var(--color-navy-800);
}

.segmented__option:active {
  transform: scale(0.98);
}

.segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented__option:has(.segmented__input:checked) {
  border-color: var(--color-navy-800);
  background: var(--color-navy-800);
  color: var(--color-white);
}

.segmented__option:has(.segmented__input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

@media (min-width: 480px) {
  .segmented__options {
    display: inline-flex;
  }

  .segmented__option {
    flex: 0 0 auto;
  }
}

@media (min-width: 1024px) {
  .segmented__option {
    min-height: 42px;
  }
}

/* ---- reply preference: label and radios on one line from tablet width (Figma "Yanıt tercihi") ------------------------------- */
.reply-field {
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .reply-field {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-24);
  }
}

/* Figma: 8 px between the ring and its label in this row (the shared radio uses 12) */
.reply-field .radio {
  gap: var(--space-8);
}

/* a text-style button under a field (copy the address above) */
.field__action {
  align-self: flex-start;
}

/* ---- error summary + result box: both are .info-note (error / success), these are their additions ------------------------- */
.form-summary:focus-visible,
.form-status:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.form-summary__intro {
  margin: 0 0 var(--space-8);
}

.form-summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-summary__list a {
  display: inline-block;
  padding-block: var(--space-10);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-summary__list a:hover {
  text-decoration-thickness: 2px;
}

.form-status__detail {
  margin-top: var(--space-8);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .form-summary__intro {
    display: none;
  }
}

@media (min-width: 1024px) {
  .form-summary__list a {
    padding-block: var(--space-2);
  }
}

/* appearing messages: a 4 px slide-fade, ease-out, under 200 ms (no motion at all when the person asks for none) */
@keyframes form-message-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.form-summary:not([hidden]),
.form-status:not([hidden]),
.request-form .field__error:not([hidden]) {
  animation: form-message-in var(--dur-fast) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .form-summary:not([hidden]),
  .form-status:not([hidden]),
  .request-form .field__error:not([hidden]) {
    animation: none;
  }
}

/* ---- no JavaScript: the form cannot be sent, so the note replaces the promise --------------------------------------------- */
.form-nojs {
  display: none;
}

.no-js .form-nojs,
.form-nojs--preview {
  display: flex;
}

/* ---- info cards of the request page: 1 → 2 (+ the odd one across) → 3 columns, measured on the grid itself ------------------ */
.request-info > .info-card {
  --card-pad: var(--space-20);
  --card-gap: var(--space-8);
}

@container (min-width: 30rem) {
  .request-info > :last-child:nth-child(odd) {
    flex-basis: 100%;
  }
}

@container (min-width: 52rem) {
  .request-info > :last-child:nth-child(odd) {
    flex-basis: calc((100% - 2 * var(--grid-gap)) / 3);
  }
}

@media (min-width: 768px) {
  .request-info > .info-card {
    --card-pad: var(--space-22);
  }
}

/* ==========================================================================
   Phase 5 · stream D · search — components
   ========================================================================== */

/* stream D · search — components (loaded after components.css; merged into it at the end of phase 5)
   Search field in the page hero, search result rows, result panel, start / empty state, link cards, legal document
   (lettered headings, download block, table-of-contents states), cookie table, cookie preferences card.
   No new design tokens: every value comes from tokens.css. */

/* ---- lettered legal headings: Turkish alphabet (Ç Ğ İ Ö Ş Ü) for tr, A–Z elsewhere ---- */
@counter-style cosb-alpha-tr {
  system: alphabetic;
  symbols: "A" "B" "C" "Ç" "D" "E" "F" "G" "Ğ" "H" "I" "İ" "J" "K" "L" "M" "N" "O" "Ö" "P" "R" "S" "Ş" "T" "U" "Ü" "V" "Y" "Z";
  suffix: "";
}

/* ---- hero search field (Figma 84:19: white box, magnifier, input, accent button) ---- */
.hero-search {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 760px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.hero-search:focus-within {
  box-shadow: 0 0 0 3px var(--color-sky-400);
}

.hero-search__field {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.hero-search__icon {
  --icon-size: 16px;
  position: absolute;
  left: var(--space-16);
  color: var(--color-slate-500);
  pointer-events: none;
}

.hero-search__input {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: var(--space-12) var(--space-12) var(--space-12) calc(var(--space-16) + 16px + var(--space-10));
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
  appearance: none;
}

.hero-search__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.hero-search__input:focus,
.hero-search__input:focus-visible {
  outline: none;
}

.hero-search__input[aria-invalid="true"] {
  color: var(--color-error-text);
}

.hero-search__button {
  flex: none;
  min-width: 72px;
  padding: 0 var(--space-20);
  border: 0;
  background: var(--color-blue-600);   /* A11Y: Figma #008FCC gives 3.6:1 with the white label */
  color: var(--color-white);
  font: inherit;
  font-size: var(--text-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-button-lh);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hero-search__button:hover {
    background: var(--color-navy-800);
  }
}

.hero-search__button:active {
  background: var(--color-navy-800);
  transform: scale(0.97);
}

.hero-search__button:focus-visible {
  outline: var(--focus-width) solid var(--color-navy-800);
  outline-offset: -4px;
}

.hero-search__message {
  margin: 0;
  color: var(--color-white);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

@media (min-width: 768px) {
  .hero-search__input {
    min-height: 63px;
    padding-left: calc(var(--space-20) + 16px + var(--space-8));
  }

  .hero-search__icon {
    left: var(--space-20);
  }

  .hero-search__button {
    min-width: 81px;
    padding: 0 var(--space-28);
  }
}

/* ---- summary line + type chips ---- */
.search-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}

.search-summary__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
  overflow-wrap: anywhere;
}

.search-summary__filters {
  min-width: 0;
}

@media (min-width: 1024px) {
  .search-summary {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    margin-bottom: var(--space-40);
  }

  .search-summary {
    min-height: 36px;
  }

  .search-summary__filters {
    flex: none;
  }
}

.chip-list--center {
  justify-content: center;
}

/* pager under the result panel */
.search-panel + .pagination {
  margin-top: var(--space-32);
}

/* ---- result panel and rows (Figma "Sonuçlar": bordered white panel, hairlines between rows) ---- */
.search-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  padding: var(--space-4) var(--space-16);
}

.search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-result {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-20) 0;
}

.search-result + .search-result {
  border-top: 1px solid var(--color-border);
}

.search-result__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-12);
}

.search-result__meta {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.search-result__sep {
  padding-inline: var(--space-2);
}

.search-result__title {
  margin: 0;
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.search-result__link {
  /* 7 px padding cancelled by the negative margin: the link box is ≥ 44 px tall on one line, the layout does not move */
  display: block;
  margin-block: -7px;
  padding-block: 7px;
  color: var(--color-navy-800);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-out);
}

/* the whole row is one big target (title link stretched over the row) */
.search-result__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .search-result:hover .search-result__link {
    color: var(--color-blue-600);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}

.search-result__link:focus-visible {
  outline: none;
}

.search-result__link:focus-visible::after {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(-1 * var(--focus-width));
  border-radius: var(--radius-md);
}

.search-result__excerpt {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  overflow-wrap: anywhere;
}

/* highlight: accent text on a light wash (Figma colours the term blue; the wash keeps it visible without colour perception) */
.search-result mark {
  padding: 0;
  border-radius: var(--radius-xs);
  background: var(--color-info-bg);
  box-shadow: none;
  color: var(--color-blue-600);
  box-decoration-break: clone;
}

@media (min-width: 768px) {
  .search-panel {
    padding: var(--space-8) var(--space-32);
  }

  .search-result {
    padding-block: var(--space-24);
  }
}

/* ---- notices, start state, empty state ---- */
.search-notices:empty {
  display: none;
}

.search-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin: 0 0 var(--space-24);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.search-notice > .icon {
  margin-top: var(--space-4);
  color: var(--color-blue-600);
}

.search-start {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.search-start__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
}

.search-start__text {
  max-width: 44rem;
  margin: calc(-1 * var(--space-8)) 0 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

.search-start__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.search-empty {
  width: 100%;
  max-width: none;
  padding: var(--space-48) var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.search-empty .empty-state__icon {
  background: var(--color-white);
  color: var(--color-blue-600);
}

.search-empty .empty-state__title {
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
}

.search-empty .empty-state__text {
  max-width: 30rem;
  color: var(--color-text-muted);
}

.search-empty__suggest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-16);
}

@media (min-width: 768px) {
  .search-empty {
    padding: var(--space-72) var(--space-28);
  }
}

/* ---- link cards (search start state; same look as the 404 quick links) ---- */
.quick-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  height: 100%;
  padding: var(--space-22);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .quick-link:hover {
    border-color: var(--color-control-border);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
  }

  .quick-link:hover .quick-link__title .icon {
    transform: translateX(3px);
  }
}

.quick-link:active {
  transform: scale(0.98);
}

.quick-link__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

.quick-link__title .icon {
  color: var(--color-blue-500);
  transition: transform var(--dur-fast) var(--ease-out);
}

.quick-link__text {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

@media (min-width: 480px) {
  .quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .quick-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- legal document (Figma 65:2 / 85:19) ---- */
.legal-doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

/* one-pixel marker after the text: legal.js watches it to know that the end of the page was reached */
.legal-doc__sentinel {
  display: block;
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}

/* letters of the privacy notice: A B C Ç D … in Turkish, A B C D E … otherwise (the table of contents is rendered with the same alphabet) */
.legal-doc--alpha:lang(tr) {
  --legal-counter-style: cosb-alpha-tr;
}

.legal-doc__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.legal-doc__head--titled {
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border);
}

.legal-doc__updated {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.legal-doc__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  font-weight: var(--weight-medium);
  line-height: 1.333;
  letter-spacing: -0.3px;
}

/* heading = navy letter / number badge + title; the badge stays beside the first line of a long heading.
   The selectors carry the extra class of .legal-doc__body.prose so they win over `.prose h2` */
.legal-doc__body.prose .legal-heading {
  align-items: flex-start;
  margin-top: var(--space-40);
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
  letter-spacing: 0;
}

.legal-doc .legal-doc__body.prose > .legal-heading:first-child {
  margin-top: 0;
}

/* the html element already reserves 88 px for the sticky bar: a heading reached through the table of contents lands 16 px below that */
.legal-doc__body.prose .legal-heading {
  scroll-margin-top: var(--space-16);
}

.legal-doc__body.prose .legal-heading + * {
  margin-top: var(--space-16);
}

.legal-doc__body.prose .legal-heading__text {
  min-width: 0;
  padding-block: calc((40px - var(--text-title-size) * 1.722) / 2);
  overflow-wrap: anywhere;
}

.legal-doc__body.prose h3 {
  margin-top: var(--space-24);
  color: var(--color-navy-800);
  font-size: var(--text-body-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-lh);
}

.legal-doc__body.prose h3 + * {
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .legal-doc {
    gap: var(--space-40);
  }

  .legal-doc--alpha {
    gap: var(--space-48);
  }

  .legal-doc__head--titled {
    padding-bottom: var(--space-32);
  }

  .legal-doc__body.prose .legal-heading {
    margin-top: var(--space-40);
  }

  .legal-doc--alpha .legal-doc__body.prose .legal-heading {
    margin-top: var(--space-48);
  }
}

/* PDF download / print block */
.legal-download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.legal-download[hidden] {
  display: none;
}

.legal-download__text {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.legal-download__meta {
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .legal-download {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-24) var(--space-28);
  }
}

/* table of contents (privacy sidebar, ≥ 1024 px): Figma 65:2 metrics (card padding 20 / 8 / 8, title 18 px line, rows 12 / 16 with 24 px lines) */
@media (min-width: 1024px) {
  .sidebar-toc {
    padding: var(--space-20) var(--space-8) var(--space-8);
  }

  .sidebar-toc__title {
    align-items: flex-start;
    min-height: 28px;
    margin-bottom: var(--space-2);
    padding: 1px var(--space-16) var(--space-10);
    line-height: var(--text-eyebrow-lh);
  }

  .sidebar-toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
  }

  .sidebar-toc__link {
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-md);
    line-height: var(--text-body-sm-lh);
  }
}

/* below 1024 px the list is a collapsible <details>: a chevron says so and turns when it opens */
@media (max-width: 1023.98px) {
  .sidebar-toc__title::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border: solid var(--color-slate-500);
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .sidebar-toc__details[open] > .sidebar-toc__title::after {
    transform: translateY(2px) rotate(-135deg);
  }
}

/* current section (scroll-spy) */
.sidebar-toc__link.is-active,
.sidebar-toc__link[aria-current="location"] {
  background: var(--color-surface);
  color: var(--color-navy-800);
  font-weight: var(--weight-medium);
}

.sidebar-toc__index {
  min-width: 0;
  font-weight: var(--weight-bold);
}

/* ---- cookie table (columns: name · type · purpose · duration · required) ---- */
.legal-doc .table--cookies th,
.legal-doc .table--cookies td {
  border-width: 0 0 1px;
}

.legal-doc .table--cookies {
  min-width: 0;
}

.cookie-name {
  color: var(--color-navy-800);
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

/* the table keeps its columns while its wrapper is at least 40 rem wide: names never break inside a word (they set the first column),
   the purpose column takes the rest */
.cookie-table {
  container-type: inline-size;
}

.table--cookies .cookie-name {
  white-space: nowrap;
}

.table--cookies th:nth-child(3),
.table--cookies td:nth-child(3) {
  width: 42%;
}

.table--cookies th:nth-child(4),
.table--cookies td:nth-child(4),
.table--cookies th:nth-child(5),
.table--cookies td:nth-child(5) {
  width: 1%;
  min-width: 6.5rem;
}

/* narrow wrapper (phones, 1024–1279 px beside the sidebar): every row is a card, every cell shows its column label */
@container (max-width: 39.99rem) {
  .cookie-table .table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .table--cookies,
  .table--cookies tbody,
  .table--cookies tr {
    display: block;
  }

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

  .table--cookies tbody tr {
    margin-bottom: var(--space-12);
    padding: var(--space-4) var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
  }

  .table--cookies tbody tr:last-child {
    margin-bottom: 0;
  }

  .legal-doc .table--cookies td,
  .legal-doc .table--cookies tbody th {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: var(--space-12);
    width: auto;
    min-width: 0;
    padding: var(--space-12) 0;
    border-width: 0 0 1px;
    background: transparent;
  }

  /* components.css removes every border of the last row; the cells of a card keep their hairlines except the last one */
  .legal-doc .table--cookies tbody tr:last-child td,
  .legal-doc .table--cookies tbody tr:last-child th {
    border-bottom: 1px solid var(--color-border);
  }

  .legal-doc .table--cookies tbody tr td:last-child,
  .legal-doc .table--cookies tbody tr:last-child td:last-child {
    border-bottom: 0;
  }

  .table--cookies td::before,
  .table--cookies tbody th::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: var(--text-small-size);
    font-weight: var(--weight-medium);
    line-height: var(--text-body-sm-lh);
    text-transform: uppercase;
  }

  .table--cookies tbody tr:hover td {
    background: transparent;
  }

  .table--cookies .cookie-name {
    white-space: normal;
  }
}

/* ---- cookie preferences card (cookie policy) ---- */
.cookie-manage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.cookie-manage__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.cookie-manage__body > * {
  margin: 0;
}

.cookie-manage__title {
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

.cookie-manage__status {
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.cookie-manage__note {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.cookie-manage__nojs {
  display: none;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

/* without JavaScript the button cannot open the dialog: hide it and point to the browser settings */
.no-js .cookie-manage__button {
  display: none;
}

.no-js .cookie-manage__nojs {
  display: block;
}

@media (min-width: 768px) {
  .cookie-manage {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding: var(--space-24) var(--space-28);
  }

  .cookie-manage__button {
    flex: none;
  }
}

/* ---- print: the buttons of these pages do nothing on paper ---- */
@media print {
  .hero-search,
  .search-summary__filters,
  .legal-download,
  .cookie-manage__button,
  .cookie-manage__nojs {
    display: none;
  }

  .search-panel,
  .cookie-manage {
    border-color: var(--color-control-border);
    box-shadow: none;
  }

  .search-result {
    break-inside: avoid;
  }
}

/* ==========================================================================
   24 · Phase 6 — text wrap policy and touch metrics (whole-site consistency pass)
   ========================================================================== */

/* Short blocks never end on a lone word: `pretty` only re-flows the last lines (Chromium, Safari 26; other engines ignore
   it and wrap as before). Headings keep `balance` (base.css). Text blocks hyphenate with the page language (<html lang>,
   `lang` on foreign spans); links, e-mail, phone, code and anything marked translate="no" (IBAN, brand names) never do. */
p,
li,
dd,
blockquote,
figcaption,
.news-card__title,
.card__title,
.info-card__value,
.info-card__label,
.steps__title,
.numbered-list__title {
  text-wrap: pretty;
}

/* two- and three-line captions of the stat tiles read best balanced */
.stat__label {
  text-wrap: balance;
}

p,
li,
dd,
blockquote,
figcaption {
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
}

a,
code,
address,
[translate="no"] {
  hyphens: manual;
}

/* Titles and names never push a box wider: a long word (a 35-letter Turkish compound, an e-mail address) breaks inside the box, and
   headings and card titles hyphenate with the page language first. */
h1,
h2,
h3,
h4,
[class*="__title"],
[class*="__name"],
[class*="__value"],
[class*="__label"] {
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4,
[class*="__title"] {
  hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
}

/* Fine-pointer metrics from Figma (36 / 40 px controls) never apply to a coarse pointer: 44 px hit boxes there. */
@media (pointer: coarse) {
  .button--sm {
    min-height: 44px;
  }

  .pagination__link {
    min-width: 44px;
    height: 44px;
  }

  .pagination__ellipsis {
    height: 44px;
  }

  .hero-slider__dot {
    width: 44px;
  }

  .hero-slider__dot[aria-current="true"] {
    width: 52px;
  }
}

/* application form: online form card + process PDF card side by side (Figma 58:629 · 187:198) */
.apply-options {
  display: grid;
  gap: var(--space-16);
}

.apply-card {
  --card-pad: var(--space-24);
  --card-gap: var(--space-20);
  align-items: flex-start;
}

.apply-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-8);
}

.apply-card__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.apply-card__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

.apply-card--online .file-chip {
  --file-bg: var(--color-sheen);
  --file-fg: var(--color-on-dark);
}

.apply-card--online .apply-card__title {
  color: var(--color-white);
}

.apply-card--online .apply-card__text {
  color: var(--color-on-dark);
}

.apply-card__action[aria-disabled="true"] {
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .apply-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .apply-card {
    --card-pad: var(--space-28);
  }
}

/* brand identity page: approved logo versions, download rows, short rules (Figma 195:184) */
.brand-kit {
  display: grid;
  gap: var(--space-16);
}

.brand-kit__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  min-height: 15.75rem;
  margin: 0;
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.brand-kit__tile--dark {
  border-color: var(--color-navy-800);
  background: var(--color-navy-800);
}

.brand-kit__logo {
  width: 15.5rem;
  max-width: 100%;
  height: auto;
}

.brand-kit__caption {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  text-align: center;
}

.brand-kit__tile--dark .brand-kit__caption {
  color: var(--color-on-dark);
}

.file-chip--soft {
  --file-bg: var(--color-info-bg);
  --file-fg: var(--color-blue-600);
}

.brand-rules {
  display: grid;
  gap: var(--space-16);
}

.brand-rule {
  --card-pad: var(--space-24);
  --card-gap: var(--space-10);
}

.brand-rule__title {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.brand-rule__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

.brand-swatches {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-swatch {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

.brand-swatch::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--swatch);
}

.brand-swatch--navy { --swatch: #003376; }
.brand-swatch--blue { --swatch: #008fcc; }
.brand-swatch--sky { --swatch: #41bde8; }

@media (min-width: 768px) {
  .brand-kit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* org chart page (Figma 248:188 desktop · 250:188 phone): chain of levels, then the units. The layout follows the
   chart's own width: vertical trunk with branches (phones) → units grid on a panel → one column per unit (tree). */
.org-chart {
  --org-line: var(--color-control-border);
  --org-gap: var(--space-20);
  container: org-chart / inline-size;
}

.org-chart__chain,
.org-chart__units,
.org-unit__duties {
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-chart__chain {
  display: flex;
  flex-direction: column;
  gap: var(--org-gap);
}

.org-chart__level {
  position: relative;
  padding: var(--space-16) var(--space-20);
  border: 2px solid var(--level-bg);
  border-radius: var(--radius-lg);
  background: var(--level-bg);
  box-shadow: var(--shadow-soft);
  color: var(--level-fg);
  font-size: 1.0625rem;
  font-weight: var(--weight-medium);
  line-height: 1.412;
  text-align: center;
  --level-bg: var(--color-navy-800);
  --level-fg: var(--color-white);
}

.org-chart__level:first-child {
  --level-bg: var(--color-navy-900);
}

.org-chart__level:nth-child(3) {
  --level-bg: var(--color-navy-700);
}

/* the last level (deputy director) is outlined when the chain has more than one level */
.org-chart__level:last-child:not(:first-child) {
  border-color: var(--color-blue-500);
  background: var(--color-white);
  --level-fg: var(--color-navy-800);
}

/* connector between two levels */
.org-chart__level + .org-chart__level::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  height: calc(var(--org-gap) + 2px);
  background: var(--org-line);
  transform: translateX(-50%);
}

/* phones: trunk from under the last level down the left side, one branch per unit card */
.org-chart__units {
  --trunk-x: var(--space-20);
  --arm: var(--space-16);
  --stub-y: 29px;      /* centre of the unit name row: 4 px accent + 14 px padding + half of the 22 px line */
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--org-gap) 0 0 calc(var(--trunk-x) + var(--arm));
}

.org-chart__branch--root .org-chart__units {
  padding-top: 0;
}

.org-unit {
  position: relative;
  min-width: 0;
}

.org-unit::before,
.org-unit::after {
  content: "";
  position: absolute;
  background: var(--org-line);
}

/* trunk segment: from the previous unit (or the chain) down to this unit, continuing below except on the last one */
.org-unit::before {
  top: calc(-1 * var(--space-12));
  bottom: 0;
  left: calc(-1 * var(--arm) - 1px);
  width: 2px;
}

.org-unit:first-child::before {
  top: calc(-1 * var(--org-gap));
}

.org-unit:last-child::before {
  bottom: auto;
  height: calc(var(--space-12) + var(--stub-y) + 1px);
}

.org-unit:only-child::before {
  height: calc(var(--org-gap) + var(--stub-y) + 1px);
}

.org-chart__branch--root .org-unit::before,
.org-chart__branch--root .org-unit::after {
  display: none;
}

.org-unit::after {
  top: calc(var(--stub-y) - 1px);
  left: calc(-1 * var(--arm) - 1px);
  width: calc(var(--arm) + 1px);
  height: 2px;
}

.org-unit__card {
  overflow: hidden;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.org-unit__card::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--color-blue-500);
}

.org-unit__name {
  margin: 0;
  padding: 14px var(--space-16);
  color: var(--color-navy-800);
  font-size: var(--text-body-size);
  font-weight: var(--weight-medium);
  line-height: 1.375;
}

.org-unit__duties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16) var(--space-16);
  border-top: 1px solid var(--color-border);
}

.org-unit__duty {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-slate-600);
  font-size: 0.875rem;
  line-height: 1.429;
}

/* middle range: chain centred, units in a grid on a panel that hangs from the last level */
@container org-chart (min-width: 520px) {
  .org-chart__chain {
    align-items: center;
  }

  .org-chart__level {
    width: min(100%, 21.25rem);
    padding: var(--space-20) var(--space-28);
    font-size: var(--text-title-size);
    line-height: 1.333;
  }

  .org-chart__branch {
    position: relative;
    margin-top: 28px;
  }

  .org-chart__branch::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 2px;
    height: 28px;
    background: var(--org-line);
    transform: translateX(-50%);
  }

  .org-chart__branch--root {
    margin-top: 0;
  }

  .org-chart__branch--root::before {
    display: none;
  }

  .org-chart__units {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
    align-items: start;
    gap: var(--space-12);
    padding: var(--space-20);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .org-chart__branch--root .org-chart__units {
    padding-top: var(--space-20);
  }

  .org-unit::before,
  .org-unit::after {
    display: none;
  }
}

/* wide: one column per unit under a horizontal bar, as in Figma 248:188 */
@container org-chart (min-width: 900px) {
  .org-chart--tree .org-chart__units {
    --col: calc((100% - (var(--org-units) - 1) * var(--space-12)) / var(--org-units));
    position: relative;
    grid-template-columns: repeat(var(--org-units), minmax(0, 1fr));
    padding: var(--space-24) 0 0;
    border-radius: 0;
    background: none;
  }

  /* the bar between the centres of the first and the last column */
  .org-chart--tree .org-chart__units::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--col) / 2 - 1px);
    left: calc(var(--col) / 2 - 1px);
    height: 2px;
    background: var(--org-line);
  }

  .org-chart--tree .org-unit::before {
    display: block;
    top: calc(-1 * var(--space-24));
    bottom: auto;
    left: 50%;
    width: 2px;
    height: var(--space-24);
    transform: translateX(-50%);
  }

  .org-chart--tree .org-unit__name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    padding: 14px var(--space-12);
    font-size: var(--text-body-sm-size);
    line-height: 1.333;
    text-align: center;
    hyphens: auto;
  }

  /* English unit names carry longer single words ("Administrative") than the columns of the Turkish design */
  .org-chart--tree .org-unit__name:lang(en) {
    padding-inline: var(--space-8);
    font-size: 0.875rem;
  }

  .org-chart--tree .org-unit__duties {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-6);
    padding: var(--space-12) var(--space-10);
  }

  .org-chart--tree .org-unit__duty {
    padding: 9px var(--space-8);
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    text-align: center;
  }
}