/* Uretilmis dosya — elle duzenlenmez. Kaynak: assets-src/css/ + config/theme.php */
/* Yeniden uretmek icin: php bin/build-css.php */

/* Asagidaki blok config/theme.php dizisinden uretildi */
:root {
  --color-steel-900: #1B1F24;
  --color-steel-700: #2E353D;
  --color-steel-600: #4A535E;
  --color-steel-400: #8A939C;
  --color-steel-200: #D9DDE2;
  --color-steel-050: #F3F4F6;
  --color-paper: #FFFFFF;
  --color-brand: #335C94;
  --color-brand-deep: #23406A;
  --color-brand-tint: #EDF1F7;
  --color-brand-line: #B9C7DA;
  --color-brand-lift: #8FB0D9;
  --color-ok: #1F6B42;
  --color-ok-line: #9CC6AE;
  --color-ok-tint: #E7F3EC;
  --color-signal: #E8531E;
  --color-signal-deep: #C34A1F;
  --color-body-invert: #C4C5C6;
  --color-rule-invert: #4D5054;
  --color-draw-invert: #A8AAAC;
  --color-ral6005: #0F4336;
  --font-text: "IBM Plex Sans", "Plex Fallback", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --type-step--2: 0.8125rem;
  --type-step--1: 0.9375rem;
  --type-step-0: 1.0625rem;
  --type-step-1: 1.1875rem;
  --type-step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --type-step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --type-step-4: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-section: clamp(4rem, 3rem + 3vw, 6rem);
  --space-block: 2.5rem;
  --layout-measure: 64ch;
  --layout-wide: 75rem;
  --layout-narrow: 46rem;
  --layout-gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --control-touch: 44px;
  --control-gap: 8px;
  --control-focus-width: 3px;
  --control-focus-offset: 2px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
}


/* ---- 00-reset.css ---- */

/*
 * Temel sifirlama.
 *
 * Kucuk tutuluyor: normalize.css gibi bir katman yerine yalnizca bu sitede
 * gercekten ise yarayan kurallar. Her satirin bir karsiligi var.
 */

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

html {
  /*
   * Android'in zorunlu karanlik modu, beyan edilmemis sayfalarda renkleri
   * kendi basina ters ceviriyor ve marka mavisini bozuyor. Sayfa acik
   * temalidir; bunu hem meta hem burada soyluyoruz.
   */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ol,
ul {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/*
 * Tasma cesareti: gorsel, video ve gomulu icerik hicbir kosulda kapsayicidan
 * genis olmaz. 100vw kullanilmiyor — dikey kaydirma cubugu genisligi hesaba
 * katilmadigi icin yatay kaydirma uretiyor.
 */
img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

img,
video {
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
}

/*
 * Hareket kisitlamasi. Otomatik oynayan videoyu CSS durduramaz; onu
 * site.js ele aliyor. Burada yalnizca gecis ve animasyonlari kesiyoruz.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---- 05-roles.css ---- */

/*
 * Rol eslemeleri.
 *
 * config/theme.php OLCEK tasir (steel-900, brand, signal...). Buradaki
 * degiskenler o olcegin hangi ise bakti gini soyler. Hex yok: hepsi var()
 * ile olcege bagli, yani bir ton degisirse tek yerde degisiyor.
 *
 * Neden ayri bir dosya: "bu renk neden burada" sorusunun cevabi bir
 * bilesenin icinde degil, tek bir listede duruyor.
 */

:root {
  /* Metin */
  --color-ink: var(--color-steel-900);      /* baslik */
  --color-body: var(--color-steel-600);     /* govde */
  --color-muted: var(--color-steel-600);    /* ikincil metin, etiket */

  /* Yuzey */
  --color-surface: var(--color-steel-050);  /* ikincil zemin, olculu kullan */
  --color-dark: var(--color-steel-900);     /* koyu bant */

  /* Cizgi */
  --color-line: var(--color-steel-200);        /* derz, ayrac */
  --color-line-strong: var(--color-steel-400); /* arayuz kenarligi, 3:1 */

  /*
   * Odak halkasi turuncu: mavi cerceveli bir tablo basliginin veya mavi
   * bir baglantinin uzerinde mavi halka kayboluyor. Turuncu burada eylem
   * rengi olarak degil "simdi buradasin" isareti olarak kullaniliyor ve
   * sayfa basina uc turuncu OGE sinirina girmiyor: kalici degil.
   */
  --color-focus: var(--color-signal);
  --color-focus-invert: var(--color-paper);

  /* Baglanti rengi: logonun mavisi. Yapisal renk, eylem rengi degil. */
  --color-link: var(--color-brand);
  --color-link-invert: var(--color-brand-lift);

  /* Cizim (izometrik SVG) — baglama gore ayarlanir, bkz. 50-components. */
  --iso-line: var(--color-steel-600);
  --iso-fill: var(--color-paper);
  --iso-door: var(--color-brand);
  --iso-faint: var(--color-steel-400);
  /* Acik kapinin ardindaki ic bosluk: opak, cizgiden koyu. */
  --iso-void: var(--color-steel-200);
}


/* ---- 10-font.css ---- */

/*
 * Yazi tipi — CLAUDE.md §6a revize.
 *
 * Tek aile: IBM Plex Sans (400/500/600/700). Archivo KULLANILMIYOR;
 * genisletilmis 700 agirligi sayfayi bagiriyordu ve @font-face tanimi
 * buradan kaldirildi.
 *
 * IBM Plex Mono (400/500) YALNIZCA SAYI icin yukleniyor: olcu, agirlik,
 * telefon. Tablo basligi ve etiket mono degil.
 *
 * Hepsi yerelde /assets/fonts/ altinda; Google Fonts baglantisi yok, CDN
 * yok — harici istek sifir.
 *
 * IKI ALTKUME: latin ve latin-ext. Her ikisi de `unicode-range` ile
 * bildiriliyor.
 *
 * NEDEN: once yalnizca `latin` altkumesi yukluydu ve `unicode-range`
 * yazilmamisti. Bu, tarayiciya "bu dosya her karakteri kapsiyor" demek
 * oluyordu; kapsamayan karakterlerde (Turkce ğ U+011F, ş U+015F, Ş, Ğ)
 * tarayici HARF HARF sistem yazi tipine dusuyordu. Sonuc: "calistigi"
 * kelimesinin ortasinda yazi tipi degisiyordu — tek kelime iki fontla
 * yaziliyordu.
 *
 * `latin` araligi U+0131 (noktasiz i) iceriyor, ğ ve ş icermiyor; sorunun
 * neden yalnizca BAZI Turkce harflerde gorundugu bu.
 *
 * Araliklar Google Fonts'un yayinladigi altkume sinirlarinin aynisi.
 * Dosyalar da oradan alindi (IBM Plex, SIL Open Font License).
 */

/* --- Latin --------------------------------------------------------- */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Latin Extended ------------------------------------------------ */
/*
 * Turkce ğ ş Ğ Ş, Lehce, Cekce ve diger Orta Avrupa harfleri buradan
 * geliyor. Yalnizca bu araliktaki karakterler icin indiriliyor: Hollandaca
 * ya da Ingilizce gezen bir ziyaretci bu dosyalari HIC cekmiyor.
 */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-400-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-500-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-600-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-700-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Yedek yigin metrik hizalamasi.
 *
 * font-display: swap, Plex inene kadar sistem yazi tipini gosteriyor. Iki
 * ailenin satir kutusu farkli oldugu icin swap aninda basliklar ziplayip
 * CLS uretiyordu; asagidaki override Arial'in kutusunu Plex Sans'inkine
 * yaklastiriyor, degisim yalnizca harf bicimlerinde kaliyor.
 */
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 104%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}


/* ---- 20-base.css ---- */

/*
 * Tipografi ve temel ogeler — §6a revize.
 *
 * Hiyerarsi OLCEK'ten geliyor, agirliktan degil: baslik 600, gövde 400,
 * aradaki fark punto ve bosluk. Buyuk harf yok, etiket ustune etiket yok.
 *
 * Kirilma noktalari (CSS ozel ozelligi @media kosulunda gecersiz oldugu
 * icin adlandirilmis yorumla duruyor):
 *   40em — tablo satir yigininden gercek tabloya doner
 *   52em — iki kolon duzenleri, footer legal satiri
 *   62em — yatay menu, hero yan yana, hat basligi solda
 */

body {
  font-family: var(--font-text);
  font-size: var(--type-step-0);
  line-height: 1.55;
  color: var(--color-body);
  background: var(--color-paper);
  font-synthesis-weight: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--color-ink);
  text-wrap: balance;
  /*
   * Hollandaca bilesikler uzun: "gereedschapscontainer". <html lang>
   * dogru basildigi icin NL heceleme devreye giriyor; break-word yalnizca
   * hecelemenin yetmedigi durumda kiriyor.
   */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-size: var(--type-step-4);
}

h2 {
  font-size: var(--type-step-3);
}

h3 {
  font-size: var(--type-step-2);
  line-height: 1.16;
}

h4 {
  font-size: var(--type-step-1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/*
 * Odak. :focus-visible kullaniliyor ki fare ile tiklamada halka cikmasin
 * ama klavye ile gezinen herkes nerede oldugunu gorsun.
 */
:focus-visible {
  outline: var(--control-focus-width) solid var(--color-focus);
  outline-offset: var(--control-focus-offset);
}

/*
 * Sayi. white-space: nowrap BILINCLI OLARAK YOK: "2 945 × 2 135 × 2 065 mm"
 * 320 px'de satir kirma firsatina gercekten ihtiyac duyuyor. Sutun hizasini
 * tabular-nums sagliyor, nowrap degil.
 *
 * Mono YALNIZCA burada: sayi tasiyan hucre, telefon numarasi, olcu.
 */
.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.94em;
  letter-spacing: -0.01em;
}

/* Degeri henuz bilinmeyen hucre. Uydurma sayi yerine acik isaret. */
.unknown {
  color: var(--color-muted);
  font-size: var(--type-step--1);
}

/*
 * anywhere yalnizca kirilamayan uzun dizilerde: e-posta adresi, RAL kodu
 * ve form hata mesaji. Genel metne verilirse kelimeler ortasindan boluniyor.
 */
.break-any,
.field__error,
.site-footer__address a {
  overflow-wrap: anywhere;
}

.link-strong {
  font-weight: 600;
  color: var(--color-link);
}

/* Sayfadaki tek turuncu baglanti: teklif cagrisi. */
.link-signal {
  color: var(--color-signal-deep);
  font-weight: 600;
  text-decoration-thickness: 2px;
}

.link-quiet {
  color: var(--color-ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--layout-gutter);
  top: 0;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-dark);
  color: var(--color-paper);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* tabindex="-1" odaklandiginda kendi cercevesini cizmesin. */
.main:focus {
  outline: none;
}


/* ---- 30-layout.css ---- */

/*
 * Yerlesim.
 *
 * Sayfa tam genislikte BANT'lardan olusuyor; bantlarin icinde tek bir kap
 * (.wrap) var. Ayrim kart ve golgeyle degil derz cizgisi, zemin tonu ve
 * koyu/acik donusumuyle kuruluyor.
 *
 * Zemin tonu olculu kullaniliyor: sayfanin buyuk bolumu beyaz, tint
 * yalnizca bir bolumu komsusundan ayirmak gerektiginde.
 */

.wrap {
  width: 100%;
  max-width: var(--layout-wide);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.wrap--narrow {
  max-width: var(--layout-narrow);
}

/* .section ve .band ayni sey: eski sayfalar .section, ana sayfa .band. */
.section,
.band {
  padding-block: var(--space-section);
}

.section--tint,
.band--tint {
  background: var(--color-surface);
}

.section--line,
.band--ruled {
  border-top: 1px solid var(--color-line);
}

.section__head,
.band__head {
  max-width: var(--layout-measure);
  margin-bottom: var(--space-block);
}

.section__title + .section__intro,
.band__head h2 + .band__intro {
  margin-top: var(--space-xs);
}

.section__intro,
.band__intro {
  font-size: var(--type-step-1);
  color: var(--color-body);
}

.section__more {
  margin-top: var(--space-lg);
}

/* Sayfa basligi bloklari. */
.page-head {
  padding-block: var(--space-xl) var(--space-lg);
}

.page-head__lead {
  margin-top: var(--space-sm);
  max-width: var(--layout-measure);
  font-size: var(--type-step-1);
  color: var(--color-body);
}

.prose {
  max-width: var(--layout-measure);
}

.prose > * + * {
  margin-top: var(--space-sm);
}

.prose h2 {
  margin-top: var(--space-xl);
  font-size: var(--type-step-2);
}

.prose h3 {
  margin-top: var(--space-lg);
  font-size: var(--type-step-1);
}

.prose ul,
.prose ol {
  padding-left: var(--space-md);
}

.prose ul li {
  list-style: disc;
}

.prose ol li {
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--space-3xs);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin-block: var(--space-lg);
}

/*
 * Markdown govdesinden gelebilecek her oge burada karsilaniyor: icerik
 * dosyasina yarin eklenen bir <strong>, <code> veya kucuk bir tablo
 * tarayici varsayilaniyla cikmasin.
 */
.prose strong {
  font-weight: 600;
  color: var(--color-ink);
}

.prose em {
  font-style: italic;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.3em;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.prose blockquote {
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-brand-line);
  color: var(--color-body);
}

.prose table {
  width: 100%;
  border: 1px solid var(--color-line-strong);
  font-size: var(--type-step--1);
}

.prose th,
.prose td {
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--color-brand-tint);
  color: var(--color-ink);
  font-weight: 600;
}

.prose dl {
  display: grid;
  gap: var(--space-3xs);
}

.prose dt {
  font-weight: 600;
  color: var(--color-ink);
}

.prose dd {
  margin: 0;
}

/*
 * Derz izgarasi.
 *
 * Kart degil panel: ogeler arasinda bosluk yerine paylasilan cizgi var.
 * MEDIA QUERY YOK — auto-fit + minmax, 320 px'den 1440 px'e kadar kirilma
 * noktasina hic ugramadan cozuyor.
 */
.seam-grid {
  display: grid;
  gap: 1px;
  /* min() gerekcesi .seam-list ile ayni: taban iz kapsayiciyi asmasin. */
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/*
 * Derz cizgisi kapsayicinin zemininden DEGIL ogenin outline'indan geliyor.
 * Zemin yontemi son satir eksik kaldiginda bos hucreyi gri bir kutu olarak
 * gosteriyordu; outline yer kaplamadigi icin bos hucre gercekten bos kaliyor.
 */
.seam-grid > *,
.seam-list__item {
  outline: 1px solid var(--color-line);
}

.seam-grid > * {
  background: var(--color-paper);
  padding: var(--space-md);
}

.section--tint .seam-grid > * {
  background: var(--color-surface);
}

/*
 * Sikistirilmis derz izgarasi: tesis sayfasindaki teslim kapsami. Aciklama
 * degil yalnizca kalem adi tasiyor; sevk irsaliyesi gibi tek bakista
 * okunuyor.
 */
.seam-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.seam-grid--compact > * {
  display: flex;
  align-items: center;
  min-height: var(--control-touch);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink);
  font-weight: 500;
}

/*
 * Derz listesi: kullanim alanlari. Tum blok tiklanabilir — dokunma hedefi
 * baglanti metninin kendisi kadar degil, satirin tamami.
 */
.seam-list {
  display: grid;
  gap: 1px;
  /*
   * min(19rem, 100%): sabit 19rem'lik taban izi 320 px'de kapsayicidan
   * genis kaliyordu ve sayfa 4 px yatay kayiyordu (olculdu: 324/320).
   * min() ile parca hicbir zaman kapsayicisini asmaz.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.seam-list__item {
  background: var(--color-paper);
}

.section--tint .seam-list__item {
  background: var(--color-surface);
}

.seam-list__link {
  display: block;
  min-height: var(--control-touch);
  padding: var(--space-md);
  text-decoration: none;
  color: inherit;
  /* Aktif satirin sol kenari: mavi, yapisal. */
  border-left: 3px solid transparent;
}

.seam-list__link:hover,
.seam-list__link:focus-visible {
  border-left-color: var(--color-brand);
}

.seam-list__link:hover .seam-list__name,
.seam-list__link:focus-visible .seam-list__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.seam-list__name {
  display: block;
  font-size: var(--type-step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.seam-list__summary {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--color-body);
}

/* Iki kolon: yalnizca yer varsa. 52em'in altinda tek kolon kalir. */
.split {
  display: grid;
  gap: var(--space-lg);
}

/*
 * Izgara ogesinin varsayilan min-width degeri auto: icindeki tablonun
 * min-content genisligi kolonu tasiyip sayfayi yatay kaydiriyordu (model
 * detay sayfasinda olculdu). Sifirlaninca tablo kendi sarmalayicisinda
 * kayiyor, sayfa kaymiyor.
 */
.split > * {
  min-width: 0;
}

@media (min-width: 52em) {
  .split {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

/*
 * Sayfa basligi kendi alt boslugunu tasiyor; hemen ardindan gelen bolumun
 * ust boslugu ustune eklenince aradaki bosluk ikiye katlaniyordu.
 */
.page-head + .section,
.page-head + .band {
  padding-top: var(--space-md);
}


/* ---- 40-header.css ---- */

/*
 * Site basligi — tek satir, yapisan, 64 px (§6a).
 *
 * JS kurali: navigasyon paneli ve dil listesi yalnizca <html class="js">
 * varken gizleniyor. Betik inmezse ikisi de acik haliyle duruyor —
 * erisilebilirlik JS'in calismasina bagli birakilmiyor.
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--control-gap);
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
}

.brand img {
  /* Logo 477x96 uretildi; dar ekranda oran korunarak kuculuyor. */
  width: auto;
  height: 1.75rem;
}

@media (min-width: 52em) {
  .brand img {
    height: 2.125rem;
  }
}

/* Menu dugmesi: cizgi + gorunmez etiket. Hedef 44x44'un altina inmiyor. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--control-touch);
  min-width: var(--control-touch);
  padding-inline: var(--space-2xs);
  background: none;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-weight: 500;
  cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
}

.menu-toggle__bars {
  position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__bars::before {
  top: -6px;
}

.menu-toggle__bars::after {
  top: 6px;
}

/* JS varsa panel kapali baslar. JS yoksa bu kural hic uygulanmaz. */
.js .site-nav {
  display: none;
}

/*
 * Panel acikken kendi icinde kayar.
 *
 * NEDEN: baslik position:sticky. Yapisan bir oge goruntu alanindan uzun
 * olursa ust kenara cakili kalir ve alt kismi HICBIR kaydirma konumunda
 * gorunmez. 375x640'ta menu + yedi dilli liste acikken baslik 764 px
 * oluyordu; son iki dil baglantisi erisilemezdi (olculdu). Max yukseklik
 * baslik satirini (4rem) dusuyor; dvh, adres cubugu acilip kapandikca
 * degismesin diye vh yerine tercih edildi.
 */
.js .site-nav.is-open {
  display: block;
  max-height: calc(100vh - 4rem);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-nav {
  flex-basis: 100%;
  padding-bottom: var(--space-sm);
}

.site-nav__list {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border-block: 1px solid var(--color-line);
  margin-bottom: var(--space-sm);
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--control-touch);
  padding: var(--space-2xs) var(--space-2xs);
  background: var(--color-paper);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  /* Aktif satir isareti icin yer: acik durumda da kaymasin. */
  border-left: 3px solid transparent;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.site-nav__link.is-current {
  color: var(--color-brand);
  border-left-color: var(--color-brand);
  font-weight: 600;
}

.site-nav__actions {
  display: grid;
  gap: var(--control-gap);
}

/* ---- Dil degistirici: acilan kutu (§6a revize) ---- */

.lang {
  position: relative;
}

.lang__button {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  width: 100%;
  min-height: var(--control-touch);
  padding-inline: var(--space-sm);
  background: var(--color-paper);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-weight: 500;
  cursor: pointer;
}

/* Dugme yalnizca betik calisiyorsa var: aksi halde islevsiz bir dugme olurdu. */
.js .lang__button {
  display: inline-flex;
}

.lang__caret {
  width: 0;
  height: 0;
  border-inline: 0.3125rem solid transparent;
  border-top: 0.375rem solid var(--color-brand);
}

.lang.is-open .lang__caret {
  border-top: 0;
  border-bottom: 0.375rem solid var(--color-brand);
}

.lang__panel {
  margin-top: var(--control-gap);
}

/* JS varsa panel kapali baslar. JS yoksa bu kural hic uygulanmaz. */
.js .lang__panel {
  display: none;
}

.js .lang.is-open .lang__panel {
  display: block;
  margin-top: 0;
}

.lang__list {
  display: grid;
  gap: var(--control-gap);
}

/* Acikken ogeler tek bir cerceve paylasir; ayri dugme gibi durmaz. */
.js .lang.is-open .lang__list {
  gap: 0;
}

.lang__link,
.lang__current {
  display: flex;
  align-items: center;
  min-height: var(--control-touch);
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
}

.lang__current {
  background: var(--color-brand-tint);
  border-color: var(--color-brand-line);
  color: var(--color-brand-deep);
}

.js .lang.is-open .lang__list li + li .lang__link,
.js .lang.is-open .lang__list li + li .lang__current {
  border-radius: 0;
  border-top-width: 0;
}

/*
 * 62em: menu yatayda acilir, dugme kaybolur, dil kutusu saga gider.
 *
 * Esik 52em degil 62em: alti NL menu baglantisi + teklif butonu + dil
 * kutusu 832 px'de logonun yanina sigmiyor, satir kayiyordu.
 */
@media (min-width: 62em) {
  .menu-toggle {
    display: none;
  }

  .js .site-nav,
  .site-nav {
    display: flex;
    flex-basis: auto;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
    padding-bottom: 0;
  }

  /*
   * Yatay menude kendi kaydirmasi olmaz: dil kutusu mutlak konumlu ve
   * overflow birakilirsa panel kirpilirdi. Ozgulluk .is-open ile esitleniyor.
   */
  .js .site-nav.is-open {
    max-height: none;
    overflow: visible;
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    background: none;
    border-block: 0;
    margin-bottom: 0;
  }

  .site-nav__link {
    background: none;
    padding-inline: 0;
    border-left: 0;
    /* Aktif isareti yatayda alt kenara gecer. */
    border-bottom: 3px solid transparent;
  }

  .site-nav__link.is-current {
    border-bottom-color: var(--color-brand);
  }

  .site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .lang__button {
    width: auto;
  }

  .js .lang.is-open .lang__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    z-index: 10;
    min-width: 100%;
    border: 1px solid var(--color-line-strong);
    background: var(--color-paper);
  }

  .js .lang.is-open .lang__list .lang__link,
  .js .lang.is-open .lang__list .lang__current {
    border-width: 0;
    white-space: nowrap;
  }

  .js .lang.is-open .lang__list li + li .lang__link,
  .js .lang.is-open .lang__list li + li .lang__current {
    border-top: 1px solid var(--color-line);
  }
}


/* ---- 50-components.css ---- */

/*
 * Bilesenler.
 *
 * Sayfanin tek cesur ogesi cerceveli veri tablosu ile izometrik urun
 * cizimi; geri kalan her sey sakin. Golge yok, degrade yok, giris
 * animasyonu yok, her basligin ustunde etiket yok.
 *
 * Renk isbolumu: MAVI yapisal (cerceve, isaret, baglanti, aktif durum),
 * TURUNCU yalnizca eylem (sayfa basina en fazla uc oge).
 */

/* ---- Butonlar ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Birincil: marka mavisi. Her sayfada duran menu cagrisi bu — turuncu
   olsaydi "en fazla uc turuncu oge" butun sayfalarda bir bastan yenirdi. */
.button--primary {
  background: var(--color-brand);
  color: var(--color-paper);
}

.button--primary:hover {
  background: var(--color-brand-deep);
}

/* Eylem: turuncu. Sayfanin asil donusum noktasinda, sayili yerde. */
.button--signal {
  background: var(--color-signal-deep);
  border-color: var(--color-signal-deep);
  color: var(--color-paper);
}

.button--signal:hover {
  background: var(--color-steel-900);
  border-color: var(--color-steel-900);
}

.button--ghost {
  background: var(--color-paper);
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

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

.button--invert {
  background: var(--color-paper);
  color: var(--color-brand-deep);
}

.button--ghost-invert {
  background: none;
  border-color: var(--color-brand-lift);
  color: var(--color-paper);
}

.button--ghost-invert:hover {
  border-color: var(--color-paper);
}

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

/* ---- Sayfa giris bandi (dealer, facility) ---- */

/*
 * page-head'den ayri duruyor cunku bu iki sayfa bir baslik degil bir
 * teklif aciyor: lead govde olcusunde degil step-2'de ve okunur satir
 * uzunlugunda. Zemin beyaz kaliyor, ayrimi alttaki mavi cizgi yapiyor.
 */
.page-hero {
  border-bottom: 3px solid var(--color-brand);
  padding-block: var(--space-xl);
}

.page-hero__inner {
  max-width: var(--layout-measure);
}

.page-hero__lead {
  margin-top: var(--space-sm);
  /* Buyuk punto uzun satiri kaldirmaz: yaklasik 36 karakter. */
  max-width: 36ch;
  font-size: var(--type-step-2);
  line-height: 1.3;
  color: var(--color-body);
  text-wrap: balance;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--control-gap);
  margin-top: var(--space-lg);
}

/* 375 px'de buton tam genislige gecer; genis ekranda icerigi kadar kalir. */
.page-hero__actions .button {
  flex: 1 1 14rem;
}

@media (min-width: 52em) {
  .page-hero__actions .button {
    flex: 0 0 auto;
  }
}

/* ---- Video ---- */

.video {
  position: relative;
  margin: 0;
  border: 1px solid var(--color-line);
}

.video__el {
  width: 100%;
  background: var(--color-surface);
}

/*
 * Dugme mutlak konumlu: akista yer kaplasaydi JS onu gosterdigi anda
 * altindaki her sey asagi kayardi (CLS).
 */
.video__toggle {
  position: absolute;
  right: var(--space-2xs);
  bottom: var(--space-2xs);
  min-height: var(--control-touch);
  min-width: var(--control-touch);
  padding-inline: var(--space-sm);
  background: var(--color-steel-900);
  color: var(--color-paper);
  border: 1px solid var(--color-paper);
  border-radius: var(--radius-sm);
  font-weight: 500;
  cursor: pointer;
}

.video__caption {
  margin-top: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--type-step--1);
}

/*
 * Dar ekranda hero videosu hic inmiyor (bkz. site.js). Poster kaliyor ve
 * altina tam videoya giden gorunur bir baglanti konuyor.
 */
.video__fulllink {
  display: flex;
  align-items: center;
  min-height: var(--control-touch);
  padding-block: var(--space-2xs);
  font-weight: 600;
}

@media (min-width: 52em) {
  .video__fulllink--narrow-only {
    display: none;
  }
}

/* ---- Iddia bloklari ---- */

.claim__title {
  font-size: var(--type-step-1);
}

.claim__text {
  margin-top: var(--space-2xs);
  color: var(--color-body);
}

/* ---- Model listesi panelleri ---- */

.line-block + .line-block {
  margin-top: var(--space-xl);
}

.line-block__title {
  font-size: var(--type-step-2);
}

.line-block__text {
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-md);
  max-width: var(--layout-measure);
  color: var(--color-body);
}

.model-panel {
  display: flex;
  flex-direction: column;
}

.model-panel__name a {
  color: var(--color-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
}

.model-panel__name a:hover,
.model-panel__name a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.model-panel__summary {
  color: var(--color-body);
}

.model-panel__facts {
  margin-top: var(--space-sm);
  font-size: var(--type-step--1);
}

.model-panel__facts > div + div {
  margin-top: var(--space-3xs);
}

.model-panel__facts dt {
  color: var(--color-muted);
}

.model-panel__facts dd {
  margin: 0;
  color: var(--color-ink);
}

.model-panel__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--control-touch);
  margin-top: auto;
  padding-top: var(--space-sm);
  font-weight: 600;
}

/* ---- Adimlar: dikey zaman cizgisi ---- */

/*
 * Dort sutunlu izgara YOK (§6a): adimlar bir sira, sira da dikey bir
 * cizgiyle gosteriliyor. Numara ikincil; sirayi tasiyan asil sey <ol>.
 */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-bottom: var(--space-block);
}

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

/* Adimlari birlestiren dikey cizgi; son adimdan sonra devam etmiyor. */
.steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: 0;
  width: 1px;
  background: var(--color-brand-line);
}

.steps__mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  padding-bottom: var(--space-3xs);
  background: var(--color-paper);
  color: var(--color-brand);
}

.section--tint .steps__mark,
.band--tint .steps__mark {
  background: var(--color-surface);
}

.steps__mark svg {
  width: 2.5rem;
  height: 2.5rem;
}

.steps__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-step--2);
  color: var(--color-muted);
}

.steps__body h3 {
  font-size: var(--type-step-2);
}

.steps__text {
  margin-top: var(--space-2xs);
  max-width: var(--layout-measure);
}

.steps__more {
  margin-top: var(--space-block);
}

/* ---- Teklif cagrisi bandi ---- */

.cta-band {
  background: var(--color-dark);
  color: var(--color-body-invert);
  padding-block: var(--space-xl);
}

.cta-band a {
  color: var(--color-link-invert);
}

.cta-band :focus-visible {
  outline-color: var(--color-focus-invert);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

.cta-band__title {
  color: var(--color-paper);
  font-size: var(--type-step-3);
}

.cta-band__text p {
  margin-top: var(--space-2xs);
  max-width: var(--layout-measure);
  color: var(--color-body-invert);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--control-gap) var(--space-md);
}

.cta-band__actions .button {
  flex: 1 1 14rem;
}

/* Telefon duz metin: ikinci bir buton tek donusum noktasini bolerdi. */
.cta-band__phone {
  /*
   * Telefon baglantisi mobilde gercek bir eylem (tel:) — satir ici metin
   * degil. Kendi haline birakildiginda 26 px yuksekligindeydi; dokunma
   * hedefi 44 px'e cikariliyor, gorsel boyut degismiyor.
   */
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-paper);
}

@media (min-width: 52em) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xl);
  }

  .cta-band__actions .button {
    flex: 0 0 auto;
  }
}

/* ---- Kirilma yolu ---- */

.breadcrumb {
  border-bottom: 1px solid var(--color-line);
  font-size: var(--type-step--1);
}

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

.breadcrumb__item {
  display: flex;
  align-items: center;
}

/* Ayirici isaret CSS'te: metin icinde ortanokta dizilmiyor. */
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: var(--control-gap);
  color: var(--color-line-strong);
}

.breadcrumb__item a,
.breadcrumb__item span {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
}

.breadcrumb__item span {
  color: var(--color-muted);
}

/* ---- Ruhsat bilgi blogu ---- */

/*
 * "Mag dat zomaar?" Hollandali ziyaretcinin ilk uc sorusundan biri. Kutu
 * degil duz bir bolum: bulunabilir ama CTA'yi bastirmiyor. Tek isaret
 * soldaki mavi cizgi.
 */
.permit {
  margin-top: var(--space-xl);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-brand-line);
  max-width: var(--layout-measure);
}

.permit__title {
  font-size: var(--type-step-1);
}

.permit__text {
  margin-top: var(--space-2xs);
}

.permit__note {
  margin-top: var(--space-2xs);
  font-size: var(--type-step--1);
  color: var(--color-muted);
}

/* ---- Bilgi notu / form hata seridi ---- */

.notice {
  padding: var(--space-sm);
  border: 1px solid var(--color-brand-line);
  border-left-width: 3px;
  border-left-color: var(--color-brand);
  background: var(--color-brand-tint);
  color: var(--color-ink);
}

.notice--error {
  border-color: var(--color-line-strong);
  border-left-color: var(--color-signal-deep);
  background: var(--color-surface);
}

/* ---- Sema ve izometrik cizim ---- */

/*
 * Fotograf gelmeden once cizim kullaniyoruz. Urunun farki duz paket
 * gelmesi; patlatma ve montaj semasi bunu bir fotograftan iyi anlatiyor.
 * Olcu etiketleri bilincli olarak "—": sayi gelince doldurulacak.
 */
.schema {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  padding: var(--space-md);
}

.schema svg {
  width: 100%;
  height: auto;
  display: block;
}

.schema__caption {
  margin-top: var(--space-2xs);
  font-size: var(--type-step--1);
  color: var(--color-muted);
}

.schema-line {
  stroke: var(--color-ink);
  fill: none;
  stroke-width: 1.5;
}

.schema-line--thin {
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.schema-face {
  fill: var(--color-brand-tint);
  stroke: var(--color-ink);
  stroke-width: 1.5;
}

.schema-face--deep {
  fill: var(--color-brand-line);
}

.schema-label {
  fill: var(--color-muted);
  font-family: var(--font-text);
  font-size: 12px;
}

/*
 * Izometrik urun cizimi.
 *
 * Cizgi rengi ve YUZ DOLGUSU baglama gore degisiyor: koyu bantta dolgu
 * koyu, acik zeminde beyaz. Dolgu currentColor OLAMAZ — yuzler opak
 * doldurulmazsa arka kenarlar gorunuyor ve Necker kubu etkisi cikiyor.
 */
.iso {
  margin: 0;
  color: var(--iso-line);
}

.iso svg {
  width: 100%;
  height: auto;
  display: block;
}

.iso__face {
  fill: var(--iso-fill);
}

.iso__door {
  stroke: var(--iso-door);
}

.iso__void {
  fill: var(--iso-void);
}

/* Acik zeminde cizim: cerceve icinde, kendi yuzeyinde. */
.iso--framed {
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  padding: var(--space-md);
}

.section--tint .iso--framed,
.band--tint .iso--framed {
  background: var(--color-paper);
}

/* Koyu bantta cizim: cizgi acik, dolgu koyu, kapi turuncu. */
.iso--invert {
  --iso-line: var(--color-draw-invert);
  --iso-fill: var(--color-steel-900);
  --iso-void: var(--color-steel-700);
  --iso-door: var(--color-signal);
}

/* ---- Adres ---- */

.address {
  font-style: normal;
  display: grid;
  gap: var(--space-3xs);
  margin-top: var(--space-sm);
}

/* Bayi sayfasindaki hat blogunun cizimi: metnin altinda, olculu buyuklukte. */
.line-block__figure {
  margin-top: var(--space-sm);
  max-width: 18rem;
}

/* Karsilastirma tablosunun kendi basligi: tablodan once, ayni ritimde. */
.section__more h3 {
  margin-bottom: var(--space-md);
  font-size: var(--type-step-1);
}

/*
 * Basarili islem bildirimi. Tanimsizdi ve notice ile birebir ayni
 * goruntuyu veriyordu: "siparisiniz alindi" notu notr bir bilgi
 * gibi okunuyordu. Hata bildiriminin karsiligi.
 */
.notice--ok {
  border-color: var(--color-ok-line);
  border-left-color: var(--color-ok);
  background: var(--color-ok-tint);
}

/* ---- Cerez onay cubugu ---- */

/*
 * Sayfanin altinda koyu bir bant. §6a: golge yok, degrade yok — ayrim
 * ust kenardaki cizgi ve zemin farkiyla kuruluyor.
 *
 * Turuncu KULLANILMIYOR. Kabul dugmesi signal olsaydi cubuk her sayfaya
 * dorduncu bir turuncu oge eklerdi (§6a: sayfa basina en fazla uc).
 * Iki dugme de ters zeminde: biri dolu, digeri cerceveli.
 *
 * position: fixed ve alt kenar; icerik kaydirilirken ustte kalir ama
 * sayfa akisindan cikmadigi icin footer'in uzerine binebilir. Kabul ya
 * da reddetten sonra DOM'dan tamamen kaldiriliyor, kalici ortu yok.
 */
.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  background: var(--color-dark);
  /*
   * Ust cizgi TURUNCU DEGIL. Turuncu eylem rengi ve sayfa basina en
   * fazla uc oge (§6a); cubuk her sayfada gorundugu icin bu cizgi
   * ana sayfada kontenjani dorde cikariyordu. Ayirma isini marka
   * mavisinin acik tonu da yapiyor.
   */
  border-top: 2px solid var(--color-brand-lift);
  color: var(--color-paper);
}

.consent[hidden] {
  display: none;
}

.consent__inner {
  max-width: var(--layout-wide);
  margin-inline: auto;
  padding: var(--space-md) var(--layout-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.consent__text {
  flex: 1 1 28rem;
}

/*
 * BASLIK RENGI DEVRALINIR. 20-base.css'teki `h1..h4 { color: ink }`
 * kurali eleman seciciyle dogrudan esleyip .consent'in verdigi acik
 * rengi yeniyordu; --color-ink ile --color-dark AYNI hex oldugu icin
 * baslik koyu zeminde tamamen kayboluyordu. DOM'da metin vardi,
 * ekranda yoktu — ve aria-labelledby o gorunmez baslige isaret
 * ediyordu, yani ekran okuyucu "Cookies" derken goren kullanici
 * hicbir baslik gormuyordu.
 *
 * Ayni sorunu .cta-band__title zaten cozmustu; cubuk o satiri atlamis.
 */
.consent__title {
  color: inherit;
  margin: 0 0 var(--space-3xs);
  font-size: var(--type-step-0);
  font-weight: 600;
  line-height: 1.2;
}

.consent__body {
  margin: 0;
  font-size: var(--type-step--1);
  line-height: 1.5;
  max-width: 60ch;
}

.consent__link {
  color: var(--color-link-invert);
}

/*
 * Dugmeler dar ekranda tam genisligi paylasir. Ust uste binmeleri yerine
 * yan yana kalmalari dogru: ikisi esit agirlikta secenek ve alt alta
 * dizilince ustteki "asil secenek" gibi okunuyor.
 */
.consent__actions {
  display: flex;
  gap: var(--space-2xs);
  flex: 0 0 auto;
}

@media (max-width: 34rem) {
  .consent__actions {
    width: 100%;
  }

  .consent__actions .button {
    flex: 1 1 0;
    justify-content: center;
  }
}


/* ---- 60-tables.css ---- */

/*
 * Tablolar — sayfanin en cok bakilan ogesi.
 *
 * Karar (§6a revize): tablo BEYAZ BOSLUKTA YUZMEZ. Cerceve icine alinir,
 * baslik satiri mavi tint zeminlidir, alt kenari marka mavisiyle vurgulanir,
 * satirlar ayracla bolunur. Derinlik golgeyle degil cizgi ve zeminle.
 *
 * Sutun basliklari Plex Sans 500, kucuk punto, steel-600 — MONO DEGIL.
 * Mono yalnizca sayi tasiyan hucrede; orada tabular-nums ve saga hizali.
 *
 * Baslik metni kisa tutulur ("Buitenmaat"); "(l × b × h)" gibi ekler
 * tablonun altina tek satir not olur (.dtable__note).
 */

.dtable__frame {
  border: 1px solid var(--color-line-strong);
  background: var(--color-paper);
}

.dtable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.dtable caption {
  /* Gorunur baslik bolumun kendi h3'u; buradaki yalnizca ekran okuyucuya. */
  text-align: left;
}

.dtable__note {
  margin-top: var(--space-2xs);
  font-size: var(--type-step--2);
  color: var(--color-muted);
}

/* ---- Dar ekran: satir bazli okuma (yatay kaydirma yok) ---- */

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

.dtable tbody tr {
  display: block;
  padding: var(--space-sm) var(--space-md);
}

.dtable tbody tr + tr {
  border-top: 1px solid var(--color-line);
}

.dtable__name {
  display: block;
  font-size: var(--type-step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  /* "Snelbox XL" iki satira kirilmaz. */
  white-space: nowrap;
}

.dtable__name a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
}

.dtable__name a:hover,
.dtable__name a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.dtable__cell {
  display: block;
  padding-top: var(--space-3xs);
}

/* Dar ekranda etiket gorunur; genis ekranda isi <th scope="col"> devralir. */
.dtable__label {
  display: block;
  font-size: var(--type-step--1);
  font-weight: 500;
  color: var(--color-muted);
}

.dtable__value {
  display: block;
  color: var(--color-ink);
}

/* Deger metni baslik ve model adindan kucuk: tablo bir veri sayfasi. */
.dtable tbody .dtable__value {
  font-size: var(--type-step--1);
  line-height: 1.35;
}

.dtable__value--num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.94em;
}

/* ---- 40em: gercek tablo yerlesimi ---- */

@media (min-width: 40em) {
  /*
   * Sabit kolon genisligi: "Dubbele deur aan de korte zijde" gibi uzun bir
   * deger sardiginda kolonlar yeniden hesaplanip satirlar ziplamasin diye.
   * Deur kolonu en genis olan, cunku en uzun metni o tasiyor.
   */
  .dtable {
    table-layout: fixed;
  }

  .dtable thead th:nth-child(1) {
    width: 18%;
  }

  .dtable thead th:nth-child(2) {
    width: 30%;
  }

  .dtable thead th:nth-child(3) {
    width: 22%;
  }

  .dtable thead th:nth-child(4) {
    width: 30%;
  }

  .dtable thead {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .dtable thead th {
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-brand-tint);
    border-bottom: 2px solid var(--color-brand);
    font-size: var(--type-step--1);
    font-weight: 500;
    color: var(--color-steel-600);
    letter-spacing: 0.005em;
    vertical-align: bottom;
  }

  .dtable thead th + th {
    border-left: 1px solid var(--color-paper);
  }

  /* Sayi sutunu basligi da degeriyle ayni kenara hizalanir. */
  .dtable thead th.is-num {
    text-align: right;
  }

  .dtable tbody tr {
    display: table-row;
    padding: 0;
    border-top: 0;
  }

  .dtable tbody tr + tr .dtable__name,
  .dtable tbody tr + tr .dtable__cell {
    border-top: 1px solid var(--color-line);
  }

  .dtable__name,
  .dtable__cell {
    display: table-cell;
    /* Satir yuksekligi tabanli: iki satirlik deger de ayni ritmi bozmuyor. */
    height: 4rem;
    /* Yatay bosluk dar: dort sutun 700 px'lik bir alani paylasiyor. */
    padding: var(--space-xs) var(--space-sm);
    vertical-align: middle;
  }

  .dtable__label {
    display: none;
  }

  .dtable__value--num {
    display: block;
    text-align: right;
  }

  .dtable__cell.is-num {
    text-align: right;
    white-space: nowrap;
  }
}

/* ---- Karsilastirma tablosu: modeller sutun, ozellikler satir ---- */

/*
 * Yon bilincli: dort model yan yana dar sutunlara siger, onalti ozellik
 * sigmaz. Ayrica karsilastirma "ayni ozelligi modeller arasinda okumak"
 * demek; o okuma bu yonde yatay ve dogal.
 */

.compare {
  /*
   * Konumlandirilmis: icerideki gorsel olarak gizlenmis <caption> mutlak
   * konumlu. Kaydirma kutusu konumlandirilmamis olursa o caption'in
   * kapsayici blogu sayfanin kendisi olur, kirpilmaz ve belgenin yatay
   * kaydirma genisligini buyutur (portal tablolarinda 375 px'de sayfa
   * 573 px'e cikiyordu — olculdu).
   */
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--color-line-strong);
  background: var(--color-paper);
}

.compare:focus-visible {
  outline: var(--control-focus-width) solid var(--color-focus);
  outline-offset: 0;
}

.compare + .compare {
  margin-top: var(--space-xl);
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-step--1);
}

.compare__table caption {
  /* Bolumun kendi basligi zaten var; bu satir ekran okuyucu icin. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.compare__table th,
.compare__table td {
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: middle;
  height: 3rem;
}

.compare__table thead th {
  background: var(--color-brand-tint);
  border-bottom: 2px solid var(--color-brand);
  color: var(--color-ink);
  font-weight: 600;
  white-space: nowrap;
}

.compare__table thead th:first-child {
  font-weight: 500;
  color: var(--color-steel-600);
}

.compare__table thead th a {
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
}

.compare__table tbody th {
  font-weight: 500;
  color: var(--color-steel-600);
  background: var(--color-paper);
}

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

.compare__table td {
  color: var(--color-ink);
  background: var(--color-paper);
}

/*
 * Ilk sutun 52em altinda yapisiyor ki hangi ozelligi okudugun kaybolmasin.
 * Kenar isareti golge degil gercek kenarlik: golge yasak (§6a).
 */
@media (max-width: 51.999em) {
  .compare__table tbody th,
  .compare__table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 9.5rem;
    min-width: 9.5rem;
    border-right: 1px solid var(--color-line-strong);
  }

  .compare__table td {
    min-width: 8.5rem;
  }
}

/*
 * Kaydirilabilirlik ipucu. Gradyan maskesi yerine gorunur metin: ekran
 * okuyucuya da, yuksek kontrast modunda da ayni bilgiyi veriyor.
 */
.compare__hint {
  margin-top: var(--space-2xs);
  font-size: var(--type-step--2);
  color: var(--color-muted);
}

@media (min-width: 52em) {
  .compare__hint {
    display: none;
  }
}

/* ---- Teknik tablo (model detay): ozellik / deger ---- */

.spec-wrap {
  /* position: relative gerekcesi .compare ile ayni. */
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--color-line-strong);
  background: var(--color-paper);
}

/* Klavyeyle kaydirilabilen tablo bolgesi: odak gorunur olmali. */
.spec-wrap:focus-visible {
  outline: var(--control-focus-width) solid var(--color-focus);
  outline-offset: 0;
}

/*
 * Kaydirilabilirlik ipucu (portal tablolari). Gradyan maskesi degil gorunur
 * metin: ekran okuyucu ve yuksek kontrast modunda da ayni bilgi.
 */
.spec-hint {
  margin-top: var(--space-2xs);
  font-size: var(--type-step--2);
  color: var(--color-muted);
}

@media (min-width: 52em) {
  .spec-hint {
    display: none;
  }
}

/*
 * Model detay tablosu yalnizca en dar ekranlarda kayiyor: 375 px'den
 * itibaren sarmalayicisina siginiyor (olculdu). Ipucu da sadece orada
 * gorunuyor — sigan bir tablonun altinda "yana kaydirabilirsiniz" yazmak
 * yanlis bilgi olurdu.
 */
/* 23.4em ≈ 375 px: olcumde tablonun sarmalayicisina sigdigi ilk genislik. */
@media (min-width: 23.4em) {
  .spec-hint--narrow {
    display: none;
  }
}

/*
 * Tablo icindeki eylem baglantisi (ornegin siparisi acma): satir yuksekligi
 * 44 px'in altinda kaliyordu, dokunma hedefi olarak kucuktu.
 */
.spec td a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
}

/*
 * Tablo icindeki adet alani.
 *
 * Kendi kurali olmadan tarayici varsayilaniyla 58x31 px ve 16 px'in altinda
 * yazi ile geliyordu (olculdu): iOS alana odaklaninca sayfayi yakinlastirir
 * ve hedef 44 px kuralini kirar. Genislik uc haneye (max=999) gore.
 */
.qty {
  width: 5rem;
  min-height: var(--control-touch);
  padding: var(--space-2xs) var(--space-2xs);
  font-family: var(--font-text);
  font-size: var(--type-step-0);
  text-align: right;
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
}

.qty:focus-visible {
  outline: var(--control-focus-width) solid var(--color-focus);
  outline-offset: var(--control-focus-offset);
  border-color: var(--color-signal-deep);
}

.spec {
  width: 100%;
  border-collapse: collapse;
}

/*
 * Yatay dolgu akiskan, kirilma noktasi yok.
 *
 * NEDEN: iki sutunda 4 x 24 px sabit dolgu, kirilmayan olcu degerinin
 * ("2945 × 2135 × 2065 mm") yanina dar ekranda yer birakmiyordu; tablo
 * 375 px'de sarmalayicisinin icinde 54 px kayiyordu (olculdu). clamp ile
 * 320 px'de 8 px, 1440 px'de yine 24 px.
 */
.spec th,
.spec td {
  padding: var(--space-xs) clamp(0.5rem, 0.2rem + 1.5vw, 1.5rem);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

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

.spec th {
  width: 42%;
  font-weight: 500;
  font-size: var(--type-step--1);
  color: var(--color-steel-600);
  background: var(--color-brand-tint);
  border-right: 1px solid var(--color-paper);
}

.spec td {
  color: var(--color-ink);
}

/* ---- Zeecontainer karsilastirmasi ---- */

/*
 * Hollandali alicinin kafasinda "zeecontainer" ile "demontabele container"
 * farkli sey. Bu fark satis argumaninin kendisi, bu yuzden susleme degil
 * gercek bir tablo olarak duruyor.
 */
.contrast {
  overflow-x: auto;
  border: 1px solid var(--color-line-strong);
  background: var(--color-paper);
}

.contrast__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-step--1);
}

.contrast__table caption {
  text-align: left;
  padding: var(--space-2xs) var(--space-md);
  color: var(--color-muted);
  font-size: var(--type-step--2);
  border-bottom: 1px solid var(--color-line);
}

.contrast__table th,
.contrast__table td {
  padding: var(--space-2xs) var(--space-md);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

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

.contrast__table thead th {
  background: var(--color-brand-tint);
  border-bottom: 2px solid var(--color-brand);
  color: var(--color-ink);
  font-weight: 600;
}

.contrast__table tbody th {
  font-weight: 500;
  color: var(--color-steel-600);
}

/* Bizim sutunumuz isaretli: renk degil, kenar cizgisi ile. */
.contrast__table .is-ours {
  border-left: 3px solid var(--color-brand);
  color: var(--color-ink);
  font-weight: 600;
}


/* ---- 70-forms.css ---- */

/*
 * Formlar.
 *
 * Tek kolon, tam genislik — mobilde iki kolonlu form yok. Kontrol yazi
 * boyutu var(--type-step-0), yani 17 px: iOS 16 px altindaki her degerde
 * alana odaklanildiginda sayfayi yakinlastiriyor. step--1 bir input'a asla
 * verilmez.
 *
 * Form bir veri bloğudur: tablolarla ayni dili konusuyor — cerceve var,
 * golge yok.
 */

/*
 * Form da bir veri blogu: beyaz boslukta yuzen alan dizisi yerine cerceve
 * icinde duruyor. Kenarligi tablolarla ayni (§6a revize: "bakimli katalog"),
 * golge yok.
 */
.form {
  max-width: var(--layout-narrow);
  border: 1px solid var(--color-line-strong);
  padding: var(--space-md);
}

@media (min-width: 34em) {
  .form {
    padding: var(--space-lg);
  }
}

.form__intro {
  margin-bottom: var(--space-md);
  max-width: var(--layout-measure);
  color: var(--color-body);
}

.form > * + * {
  margin-top: var(--space-md);
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field__label {
  font-weight: 600;
  color: var(--color-ink);
}

.field__optional {
  font-weight: 400;
  font-size: var(--type-step--1);
  color: var(--color-muted);
}

.field__hint {
  font-size: var(--type-step--1);
  color: var(--color-muted);
}

.field__control {
  width: 100%;
  min-height: var(--control-touch);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--type-step-0);
  font-family: var(--font-text);
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
}

.field__control:hover {
  border-color: var(--color-brand);
}

textarea.field__control {
  min-height: 8rem;
  resize: vertical;
}

/*
 * <select> tarayicinin kendi oku ile kaliyor. Onceki surum oku iki renk
 * gecisiyle ciziyordu; renk gecisi §6a'da yasak ve yerel ok zaten her
 * platformda tanidik duruyor.
 */
select.field__control {
  appearance: auto;
  padding-right: var(--space-2xs);
}

.field__control:focus-visible {
  outline: var(--control-focus-width) solid var(--color-focus);
  outline-offset: var(--control-focus-offset);
  border-color: var(--color-signal-deep);
}

.field__control[aria-invalid="true"] {
  border-color: var(--color-signal-deep);
  border-left-width: 3px;
}

/* Hata mesaji alanin hemen altinda; aria-describedby ile alana bagli. */
.field__error {
  font-size: var(--type-step--1);
  font-weight: 600;
  color: var(--color-signal-deep);
}

/* Onay kutusu: etiket dahil tiklama alani 44 px yuksekliginde. */
.field--check {
  display: block;
}

.field--check .field__box {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--control-touch);
  cursor: pointer;
}

.field--check input[type="checkbox"] {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
  accent-color: var(--color-brand);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--control-gap);
  padding-top: var(--space-2xs);
}

.form__actions .button {
  flex: 1 1 16rem;
}

@media (min-width: 34em) {
  .form__actions .button {
    flex: 0 0 auto;
  }
}

.form__note {
  font-size: var(--type-step--1);
  color: var(--color-muted);
}

/*
 * Bal kupu.
 *
 * display: none DEGIL: bazi botlar gizli alani atlamayi ogrendi ve bazi
 * otomatik doldurma motorlari display:none alani gormezden gelmiyor. Alan
 * gorsel olarak yok ama DOM'da duruyor; sekme sirasindan tabindex="-1" ile,
 * ekran okuyucudan aria-hidden ile cikariliyor.
 */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---- 80-footer.css ---- */

/*
 * Alt bilgi.
 *
 * Sayfa koyu bir bantla kapaniyor. Ustundeki CTA bandi da koyu oldugu icin
 * ikisi arasinda marka mavisi bir cizgi var: bant degisimi goruluyor ama
 * ikinci bir zemin rengi uydurulmuyor.
 *
 * Footer'in uc sutunu §6a'daki tek istisna: esit sutunlu kart satiri yasagi
 * icerik bolumleri icin gecerli, alt bilgi icin degil.
 */

.site-footer {
  background: var(--color-dark);
  color: var(--color-body-invert);
  border-top: 3px solid var(--color-brand);
  padding-block: var(--space-xl) var(--space-md);
}

.site-footer a {
  color: var(--color-paper);
}

.site-footer :focus-visible {
  outline-color: var(--color-focus-invert);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 34em) {
  .site-footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.site-footer__brand img {
  /* Ters zemin surumu 478x96. */
  width: auto;
  height: 2rem;
}

.site-footer__claim {
  margin-top: var(--space-sm);
  max-width: 28ch;
}

.site-footer__heading {
  font-size: var(--type-step-0);
  font-weight: 600;
  color: var(--color-paper);
  margin-bottom: var(--space-2xs);
}

.site-footer__nav a,
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
}

.site-footer__address {
  font-style: normal;
  display: grid;
}

.site-footer__address span {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
}

.site-footer__address a {
  min-height: var(--control-touch);
  display: inline-flex;
  align-items: center;
}

.site-footer__ids {
  margin-top: var(--space-2xs);
  font-size: var(--type-step--1);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3xs) var(--space-2xs);
}

.site-footer__ids dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.site-footer__legal {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-rule-invert);
  display: grid;
  gap: var(--control-gap);
  font-size: var(--type-step--1);
}

.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

@media (min-width: 52em) {
  .site-footer__legal {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}


/* ---- 90-home.css ---- */

/*
 * Ana sayfaya ozel bolumler.
 *
 * Ayri bir dosya ama ayri bir SISTEM degil: ayni belirtecler, ayni
 * bilesenler. Burada yalnizca ana sayfada gecen duzenler duruyor.
 */

/* ---- Hero: koyu zemin, solda metin, sagda izometrik cizim ---- */

.hero {
  background: var(--color-dark);
  color: var(--color-body-invert);
  padding-block: var(--space-section) 0;
}

.hero a {
  color: var(--color-link-invert);
}

.hero :focus-visible {
  outline-color: var(--color-focus-invert);
}

.hero__grid {
  display: grid;
  /*
   * minmax(0,1fr): izgara ogesinin varsayilan min-width auto degeri
   * SVG'nin oznitelik genisligini tasiyip dar ekranda yatay kaydirma
   * uretiyordu.
   */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-block);
  align-items: center;
}

.hero__title {
  color: var(--color-paper);
  /* §6a iki satirlik baslik istiyor; olcu ve punto birlikte ayarlandi. */
  max-width: 20ch;
}

.hero__lead {
  margin-top: var(--space-sm);
  max-width: 40ch;
  font-size: var(--type-step-1);
}

.hero__action {
  margin-top: var(--space-block);
}

.hero__figure {
  /*
   * Dar ekranda cizim metnin altina dusuyor ve tek basina kaliyor. Sola
   * dayali birakinca sagda olu bosluk olusuyor; ortalayinca kolon dengeli
   * duruyor.
   */
  display: flex;
  justify-content: center;
}

.hero__figure svg {
  width: 100%;
  height: auto;
  /* Cok dar ekranda cizim tum genisligi kaplayinca ezik goruniyor. */
  max-width: 22rem;
}

.hero__strip {
  margin-top: var(--space-block);
  padding-block: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-rule-invert);
  display: flex;
  flex-wrap: wrap;
  color: var(--color-body-invert);
  font-weight: 500;
}

/* Ayirici CSS'te: metnin icinde orta nokta dizilmiyor. */
.hero__strip li + li::before {
  content: "·";
  margin-inline: 0.6em;
  color: var(--color-brand-lift);
}

@media (min-width: 62em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .hero__figure {
    display: block;
  }

  .hero__figure svg {
    max-width: none;
  }
}

/* ---- Model hatlari: solda baslik ve cizim, sagda tablo ---- */

.line + .line {
  margin-top: var(--space-section);
}

.line__head {
  max-width: var(--layout-measure);
}

.line__text {
  margin-top: var(--space-2xs);
}

/*
 * Hattin izometrik cizimi. Sol sutunun altindaki bosluk bununla doluyor:
 * once ne anlattigi yaziyor, altinda o hattin urun konfigurasyonu
 * goruluyor, sagda olculeri duruyor.
 */
.line__figure {
  margin-top: var(--space-md);
  max-width: 20rem;
}

.line__table {
  margin-top: var(--space-block);
}

.models__actions {
  margin-top: var(--space-block);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-xl);
}

.models__actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
}

@media (min-width: 62em) {
  .line {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .line__table {
    margin-top: 0;
  }

  .line__figure {
    max-width: none;
  }
}

/* ---- Kullanim alanlari: cizim + metin, donusumlu sol/sag ---- */

/*
 * Esit sutunlu kart satiri degil: her alan kendi satirini aliyor ve cizim
 * yon degistirerek sayfanin ritmini kuruyor. En fazla dort tane.
 *
 * Cizimler ORTAMI degil URUN KONFIGURASYONUNU gosteriyor: bouwplaats'ta
 * kapi acik, opslag'da iki unite ustuste, tuin'de pencereli kabin,
 * evenementen'de servis kapagi acik.
 */
.uses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-section);
}

.use {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
}

.use__title {
  font-size: var(--type-step-2);
}

.use__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.use__title a:hover,
.use__title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.use__text {
  margin-top: var(--space-2xs);
  max-width: var(--layout-measure);
}

.use__more {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-touch);
  margin-top: var(--space-2xs);
  font-weight: 600;
}

@media (min-width: 62em) {
  .use {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--space-xl);
  }

  .use:nth-child(even) .use__figure {
    order: 2;
  }
}