/* =========================================================================
   Çekici — tasarım dili: LEVHA (Türk karayolu işaretleme sistemi)
   -------------------------------------------------------------------------
   Yön, işin kendi dünyasından türetildi: yol levhası, ikaz şeridi, yol orta
   çizgisi, otoyol değişken mesaj panosu (VMS), araç plakası.

   RENK SEMANTİĞİ gerçek trafik işaretlemesinin kuralını izler:
     MAVİ    = yön / bilgi   → levha panelleri, "konum at", bölüm etiketi
     KEHRİBAR= eylem / uyarı → VMS panosu, ikaz şeridi, "hemen ara"
     ASFALT  = zemin         → siyah DEĞİL; ıslak asfaltın soğuk grisi
   Bu yüzden renk dekorasyon değil, okuma kılavuzudur.

   İMZA: sayfanın tepesindeki kehribar nokta-matris VMS panosu.
   Tipografi: Barlow Condensed (karayolu grotesk'i) + Barlow.
   ========================================================================= */

/* 1 ── TOKENS ─────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* asfalt yüzeyler */
  --bg:        oklch(23% 0.011 258);
  --bg-elev:   oklch(28% 0.013 258);
  --bg-sunken: oklch(18% 0.009 258);

  /* metin */
  --fg:        oklch(97% 0.004 258);
  --fg-muted:  oklch(80% 0.010 258);
  --fg-subtle: oklch(66% 0.012 258);

  /* levha mavisi — YÜZEY rengi. Asfalt üstünde metin olarak kullanılmaz. */
  --brand:        oklch(47% 0.145 252);
  --brand-strong: oklch(40% 0.150 252);
  --brand-soft:   oklch(47% 0.145 252 / 0.24);
  --brand-fg:     oklch(98% 0.004 252);

  /* kehribar — eylem/uyarı. VMS, ikaz şeridi, acil çağrı. */
  --accent:      oklch(82% 0.170 80);
  --accent-soft: oklch(82% 0.170 80 / 0.16);
  --accent-fg:   oklch(20% 0.040 80);

  /* çizgi & odak */
  --line:        oklch(100% 0 0 / 0.13);
  --line-strong: oklch(100% 0 0 / 0.26);
  --ring:        var(--accent);

  /* tipografi */
  --font-display: "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --weight-display:   700;
  --leading-display:  0.96;
  --tracking-display: 0.005em;

  /* geometri — levha köşesi: küçük ve tutarlı. 2 / 4 / 8 */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   8px;
  --radius-xl:   8px;
  --radius-full: 999px;
  --border-w: 1px;

  /* gölge dili: levhalar parlamaz, düşer. */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.35);
  --shadow-md: 0 14px 28px -18px oklch(0% 0 0 / 0.85);
  --shadow-lg: 0 34px 60px -30px oklch(0% 0 0 / 0.9);

  /* Ardışık bölümlerin dikey boşluğu üst üste bindiği için üst sınır
     8rem'den 6rem'e çekildi; aksi hâlde bölümler arası ölü alan oluşuyor. */
  --section-y: clamp(3rem, 2rem + 4.5vw, 6rem);

  --header-h: 4.25rem;
  --actionbar-h: 0px;
}

/* 2 ── GÖVDE ──────────────────────────────────────────────────────────── */

body { padding-block-end: var(--actionbar-h); }

/* asfalt dokusu — düz dijital gri yerine gerçek yüzey hissi */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--accent); color: var(--accent-fg); }

h1, h2 { text-transform: uppercase; }

/* ---- levha: dolu mavi panel + gerçek levhalardaki iç beyaz keyline ---- */
.levha {
  position: relative;
  background: var(--brand);
  color: var(--brand-fg);
  border-radius: var(--radius-md);
}
.levha::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid oklch(98% 0.004 252 / 0.8);
  border-radius: var(--radius-xs);
  pointer-events: none;
}

/* ---- keyline: asfalt üstündeki panel/fotoğraf için ince iç çizgi ----- */
.keyline { position: relative; }
.keyline::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid oklch(98% 0 0 / 0.30);
  border-radius: var(--radius-xs);
  pointer-events: none;
}

/* ---- ikaz şeridi — sayfada YALNIZCA bir kez, CTA'dan hemen önce ----- */
.hazard {
  height: 13px;
  background: repeating-linear-gradient(
    135deg,
    var(--accent) 0 16px,
    oklch(18% 0.009 258) 16px 32px
  );
}

/* ---- sign: levha yazısı (dar, büyük harf, geniş harf aralığı) -------- */
.tech {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--accent);
}
.tech--muted { color: var(--fg-subtle); }
.eyebrow { font-family: var(--font-display); letter-spacing: 0.17em; color: var(--accent); }

/* ---- plaka — gerçek araç plakası. Sayfada bir kez, künye olarak. ---- */
.plate {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  background: oklch(97% 0 0);
  border: 2px solid oklch(35% 0 0);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}
.plate__tr {
  display: grid;
  place-items: center;
  padding-inline: 0.4rem;
  background: var(--brand);
  color: var(--brand-fg);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
}
.plate__no {
  padding: 0.4rem 0.7rem;
  color: oklch(20% 0 0);
  font-size: var(--step-0);
  letter-spacing: 0.14em;
}

/* 3 ── VMS PANOSU (imza) ──────────────────────────────────────────────── */

.vms {
  position: relative;
  background: oklch(11% 0.004 258);
  border-block-end: var(--border-w) solid oklch(100% 0 0 / 0.08);
}
.vms__track { padding-block: 0.5rem; align-items: center; }
.vms__msg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.vms__msg--dim { color: oklch(82% 0.17 80 / 0.55); }
/* LED nokta dokusu: yazı, nokta ızgarasının içinden okunur */
.vms::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(oklch(8% 0 0 / 0.85) 0.85px, transparent 1.1px);
  background-size: 3px 3px;
}
.vms__lamp {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--accent);
  animation: lamp 2.6s steps(1, end) infinite;
}
@keyframes lamp {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.25; }
}

/* 4 ── HEADER ─────────────────────────────────────────────────────────── */

/* Header'da backdrop-filter YOK: filtreli bir ata, position:fixed alt öğeler
   için kapsayıcı blok oluşturur ve mobil menü paneli header'ın içine hapsolur.
   Levha dili zaten opak panel ister. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: var(--bg);
  border-block-end: var(--border-w) solid var(--line);
  transition: box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.site-header.is-scrolled {
  background: oklch(19% 0.010 258);
  box-shadow: 0 12px 24px -18px oklch(0% 0 0 / 0.9);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
}
.brand__text {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.brand__sub {
  display: block;
  margin-block-start: 0.15rem;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  white-space: nowrap;
}

.site-nav { margin-inline-start: auto; }
.site-nav__list { display: flex; gap: clamp(0.35rem, 0.9vw - 0.2rem, 1.25rem); }
.site-nav__list a {
  display: inline-block;
  padding-block: 0.35rem;
  padding-inline: 0.4rem;    /* kısa etiketlerde dokunma genişliği 44px+ */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-muted);
  border-block-end: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-nav__list a:hover { color: var(--fg); border-block-end-color: var(--accent); }

.site-header__cta { display: flex; align-items: center; gap: 0.5rem; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
}

@media (max-width: 68rem) {
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 55;            /* header (60) panelin üstünde kalır */
    background: var(--bg);
    padding: calc(var(--header-h) + 3.25rem) var(--gutter) var(--space-lg);
    transform: translateY(-102%);
    /* visibility olmadan panelin alt kenarı kapalıyken ekranda kalıyor:
       panel header'ın altından başladığı için -102% onu tamamen çıkarmıyor. */
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
    overflow-y: auto;
  }
  .site-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-base) var(--ease-out), visibility 0s;
  }
  /* Panel .site-header'ın ÇOCUĞU olduğu için ebeveynin z-index'i onu üstte
     tutmaya yetmez: marka ve butonlar panelin üstüne ayrıca çıkarılır,
     yoksa menü açıkken kapatma butonu tıklanamaz hâle gelir. */
  .site-header__inner > .brand,
  .site-header__cta { position: relative; z-index: 56; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding-block: 0.95rem; font-size: var(--step-2); border-block-end: 1px solid var(--line); }
  /* Mobilde .site-nav akıştan çıktığı (position:fixed) için margin-auto'yu
     taşıyamaz: logo solda kalsın diye itmeyi CTA grubu üstlenir. */
  .site-header__cta { margin-inline-start: auto; }
  .nav-toggle { display: inline-flex; }
}

/* Marka + metin menü + İKİ buton 1280px altına sığmıyor ve header yatay
   taşma yapıyordu. Metin menü 1088px'e kadar kalsın diye yalnızca ikinci
   buton (Konum At) erken gizlenir; tam hâli sabit alt eylem çubuğunda zaten var. */
@media (max-width: 80rem) {
  .site-header__cta .btn--desk { display: none; }
}

/* Dar ekranda header'da marka + tek ikon buton + menü kalır; çağrı ve konum
   butonlarının tam hâli zaten sabit alt eylem çubuğunda duruyor. */
@media (max-width: 44rem) {
  .site-header__inner { gap: var(--space-sm); }
  .brand { min-width: 0; }
  .brand__text { font-size: var(--step-0); white-space: nowrap; }
  .site-header__cta .btn--call { padding-inline: 0.8rem; }
  .site-header__cta .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}
@media (max-width: 34rem) { .brand__sub { display: none; } }

/* 5 ── BUTON ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  background: transparent;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { border-color: var(--fg-subtle); }
.btn--lg { min-height: 3.4rem; padding: 0.85rem 1.6rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

/* EYLEM: acil çağrı — kehribar */
.btn--call { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn--call:hover { background: oklch(88% 0.16 82); border-color: oklch(88% 0.16 82); }

/* YÖN: konum bildirimi — levha mavisi */
.btn--loc { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.btn--loc:hover { background: oklch(54% 0.15 252); border-color: oklch(54% 0.15 252); }

.btn--ghost { background: transparent; }

/* 6 ── BREADCRUMB ─────────────────────────────────────────────────────── */

.crumbs { border-block-end: var(--border-w) solid var(--line); background: var(--bg-sunken); }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.2rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.crumbs__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.crumbs a {
  display: inline-block;
  padding-block: 0.6rem;     /* dokunma hedefi 44px'e çıkar */
  transition: color var(--dur-fast) var(--ease);
}
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { color: var(--line-strong); }

/* 7 ── HERO ───────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(2.75rem, 1.8rem + 4vw, 5.5rem); }
.hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 64rem) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.35rem;
  margin-block-end: var(--space-md);
  background: var(--brand);
  color: var(--brand-fg);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero__title { font-size: var(--step-6); margin-block-end: var(--space-md); }
.hero__lead { max-width: 52ch; color: var(--fg-muted); }
.hero__actions { margin-block-start: var(--space-lg); gap: 0.7rem; }

/* hero ölçü paneli — levha altındaki bilgi tabelası */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px;
  margin-block-start: var(--space-xl);
  background: var(--line);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.readout__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 6rem;
  background: var(--bg-elev);
  padding: 0.8rem 1rem;
}
.readout__k {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.readout__v {
  margin-block-start: 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--fg);
}

.hero__figure { position: relative; margin: 0; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  filter: saturate(0.82) contrast(1.08) brightness(0.94);
}
.hero__figure figcaption {
  position: absolute;
  inset-block-end: 1.15rem;
  inset-inline-start: 1.15rem;
  z-index: 1;
  padding: 0.35rem 0.7rem 0.3rem;
  border-radius: var(--radius-xs);
  background: oklch(11% 0.004 258 / 0.88);
  color: var(--accent);
}

/* 8 ── SAYI ŞERİDİ ────────────────────────────────────────────────────── */

.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: var(--border-w) solid var(--line);
}
.statgrid__cell {
  position: relative;
  background: var(--bg-sunken);
  padding: var(--space-lg) var(--space-md);
}
.statgrid__cell::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--accent);
}
.statgrid__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 0.95;
  color: var(--fg);
}
.statgrid__l {
  margin-block-start: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* 9 ── BÖLÜM BAŞLIĞI ──────────────────────────────────────────────────── */

.sechead { max-width: 60ch; margin-block-end: var(--space-xl); }
/* bölüm etiketi = küçük mavi levha */
.sechead .tech {
  padding: 0.3rem 0.7rem 0.25rem;
  background: var(--brand);
  color: var(--brand-fg);
  border-radius: var(--radius-xs);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
}
.sechead__title { font-size: var(--step-4); margin-block-start: 0.75rem; }
.sechead__note { margin-block-start: 0.9rem; color: var(--fg-muted); }

/* 10 ── SÜREÇ: yol orta çizgisi omurgası ─────────────────────────────── */

.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 3.7rem;
  inset-inline-start: 1.6rem;
  width: 4px;
  background: repeating-linear-gradient(
    oklch(97% 0 0 / 0.38) 0 20px,
    transparent 20px 38px
  );
}
.timeline__row {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.4rem var(--space-lg);
  padding-block: var(--space-lg);
  align-items: start;
}
.timeline__step {
  grid-row: span 2;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  background: var(--brand);
  color: var(--brand-fg);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1;
}
.timeline__title { font-size: var(--step-2); }
.timeline__text { color: var(--fg-muted); max-width: 62ch; }

/* 11 ── PANEL / USP ───────────────────────────────────────────────────── */

.panel { padding: var(--space-lg); }
.panel--sunken {
  background: var(--bg-sunken);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-md);
}
.panel__label { margin-block-end: var(--space-md); }
.panel__note  { margin-block-start: var(--space-md); }

.usp-list { display: grid; gap: var(--space-md); }
.usp {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: var(--space-sm);
  padding-block-end: var(--space-md);
  border-block-end: var(--border-w) solid var(--line);
}
.usp:last-child { border-block-end: 0; padding-block-end: 0; }
.usp__icon { color: var(--accent); padding-block-start: 0.15rem; }
.usp__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.usp__text { font-size: var(--step--1); color: var(--fg-muted); margin-block-start: 0.25rem; }
.usp__title--card { margin-block-start: var(--space-sm); }
.uspgrid { margin-block-start: var(--space-xl); }

/* 12 ── HİZMET KARTLARI (bento) ───────────────────────────────────────── */
/* Geniş hücreler mavi levha, dar hücreler asfalt panel: gri alanın içinde
   mavi levhalar yol tabelası ritmi kurar. */

.svc {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: var(--space-md);
  background: var(--bg-elev);
  border-radius: var(--radius-md);
  border: var(--border-w) solid var(--line);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.svc:hover { border-color: var(--accent); }
.svc__icon { color: var(--accent); }
.svc__title { font-size: var(--step-1); }
.svc__text { color: var(--fg-muted); font-size: var(--step--1); }

.svc--sign {
  position: relative;
  background: var(--brand);
  border-color: transparent;
  color: var(--brand-fg);
  padding: var(--space-lg);
}
.svc--sign::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid oklch(98% 0.004 252 / 0.55);
  border-radius: var(--radius-xs);
  pointer-events: none;
}
.svc--sign:hover { background: oklch(51% 0.15 252); border-color: transparent; }
.svc--sign .svc__icon { color: var(--brand-fg); }
.svc--sign .svc__title { font-size: var(--step-3); }
.svc--sign .svc__text { color: oklch(98% 0.004 252 / 0.88); font-size: var(--step-0); max-width: 48ch; }

/* 13 ── FİLO GALERİSİ ─────────────────────────────────────────────────── */

.fleet { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.fleet--lg { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
.fleet__item {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-sunken);
}
.fleet__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  filter: saturate(0.8) contrast(1.06) brightness(0.94);
  transition: filter var(--dur-base) var(--ease);
}
.fleet__item:hover img { filter: none; }
.fleet__item figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  padding: 1.6rem 0.9rem 0.8rem;
  background: linear-gradient(transparent, oklch(10% 0.004 258 / 0.92));
}
/* Portre fotoğraf da aynı orana kırpılır; aracın kaldığı bölge korunur. */
.fleet__item--tall img { object-position: center 68%; }
@media (min-width: 48rem) { .fleet { grid-template-columns: repeat(2, 1fr); } }

/* 14 ── REFERANSLAR ───────────────────────────────────────────────────── */

.quote {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--bg-sunken);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
}
/* statgrid ile aynı çentik: dekorasyon değil, tekrar eden sistem aygıtı */
.quote::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--accent);
}
.quote__text { color: var(--fg-muted); }
.quote__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.quote__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg);
}
.quote__stars { display: inline-flex; gap: 2px; color: var(--accent); }

/* 15 ── SSS ───────────────────────────────────────────────────────────── */

.faq { border-block-start: var(--border-w) solid var(--line); }
@media (min-width: 64rem) {
  .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); border-block-start: 0; }
  .faq__item { border-block-start: var(--border-w) solid var(--line); }
}
.faq__item { border-block-end: var(--border-w) solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  transition: color var(--dur-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { font: inherit; letter-spacing: inherit; text-transform: none; display: inline; }
.faq__q:hover { color: var(--accent); }
.faq__sign { color: var(--accent); transition: transform var(--dur-base) var(--ease); }
.faq__item[open] .faq__sign { transform: rotate(180deg); }
.faq__a { padding-block-end: var(--space-md); color: var(--fg-muted); max-width: 68ch; }

/* 16 ── KONUM LİSTELERİ ───────────────────────────────────────────────── */

.places { columns: 14rem auto; column-gap: var(--space-lg); }
.places li { break-inside: avoid; }
.places a {
  display: block;
  padding-block: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-block-end: var(--border-w) solid var(--line);
  transition: color var(--dur-fast) var(--ease), padding-inline-start var(--dur-fast) var(--ease);
}
.places a:hover { color: var(--accent); padding-inline-start: 0.4rem; }

/* yön çipleri — küçük levhalar */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips a, .chips__static {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: transparent;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-xs);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chips a:hover { color: var(--brand-fg); background: var(--brand); border-color: var(--brand); }

/* 17 ── CTA — VMS panosu dili ────────────────────────────────────────── */

.section--cta { padding-block-start: var(--space-xl); }

.terminal {
  background: oklch(11% 0.004 258);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.terminal__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: oklch(8% 0.003 258);
  border-block-end: var(--border-w) solid oklch(100% 0 0 / 0.07);
}
.terminal__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(oklch(8% 0 0 / 0.85) 0.85px, transparent 1.1px);
  background-size: 3px 3px;
}
.terminal__body { padding: var(--space-xl) var(--space-lg); }
.terminal__title { font-size: var(--step-4); max-width: 18ch; color: var(--fg); }
.terminal__text { margin-block-start: var(--space-sm); color: var(--fg-muted); max-width: 56ch; }
.terminal__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.terminal__actions { margin-block-start: var(--space-lg); gap: 0.7rem; }

/* 18 ── BLOG ──────────────────────────────────────────────────────────── */

.post {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  background: var(--bg-sunken);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.post__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.8) brightness(0.94); }
.post__body { display: grid; gap: 0.55rem; padding: var(--space-md); }
.post__title { font-size: var(--step-2); }
.post__sum { color: var(--fg-muted); font-size: var(--step--1); }
.post:hover .post__title { color: var(--accent); }

.article__body { max-width: 68ch; }
.article__body h2 { font-size: var(--step-3); margin-block-start: 2em; }
.article__cover { position: relative; margin-block: var(--space-lg); }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); filter: saturate(0.82) brightness(0.94); }
@media (min-width: 60rem) {
  .article__split > aside { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
}

/* 19 ── FOOTER ────────────────────────────────────────────────────────── */

.site-footer { margin-block-start: var(--space-2xl); background: var(--bg-sunken); border-block-start: var(--border-w) solid var(--line); }
.site-footer__grid { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl); }
@media (min-width: 58rem) { .site-footer__grid { grid-template-columns: 1.35fr 1fr 1fr; } }
.footer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: var(--space-sm);
}
.footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.62rem;    /* dokunma hedefi 44px */
  color: var(--fg-muted);
  font-size: var(--step--1);
}
.footer__list a:hover { color: var(--fg); }
.footer__about { margin-block-start: var(--space-md); max-width: 44ch; font-size: var(--step--1); }
.footer__actions { margin-block-start: var(--space-lg); gap: 0.6rem; }
.footer__hours { margin-block-start: var(--space-md); }
.footer__plate { margin-block-start: var(--space-lg); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-md);
  border-block-start: var(--border-w) solid var(--line);
  font-size: var(--step--2);
  color: var(--fg-subtle);
}

/* 20 ── SABİT MOBİL EYLEM ÇUBUĞU ──────────────────────────────────────── */

.actionbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem;
  background: oklch(14% 0.006 258 / 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-block-start: 3px solid var(--accent);
  padding-block-end: max(0.5rem, env(safe-area-inset-bottom));
}
@media (max-width: 68rem) { :root { --actionbar-h: 4.4rem; } }
@media (min-width: 68.01rem) { .actionbar { display: none; } }

/* 21 ── 404 ───────────────────────────────────────────────────────────── */

.notfound { min-height: 58svh; display: grid; align-content: center; gap: var(--space-lg); }
.notfound__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-7);
  line-height: 0.9;
  color: var(--accent);
}

/* 22 ── YARDIMCILAR ───────────────────────────────────────────────────── */

.linkline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.linkline:hover { text-decoration: underline; text-underline-offset: 4px; }

.levha-card {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: var(--space-md) var(--space-lg);
  transition: transform var(--dur-fast) var(--ease);
}
.levha-card:hover { transform: translateY(-2px); }
.levha-card .tech--muted { color: oklch(98% 0.004 252 / 0.7); }
.levha-card .linkline { color: var(--brand-fg); }
.featured__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1;
  text-transform: uppercase;
}

.prose { color: var(--fg-muted); }
.prose strong { color: var(--fg); }
.prose a { color: var(--accent); }
.prose--flush { max-width: var(--container-prose); margin-inline: 0; }