/* =====================================================================
   Flowen Logistics — site.css
   Tasarım sistemi (değişkenler) + bileşenler.
   Yazı tipi ve yerleşim yardımcıları dahil her şey bu dosyadadır; dış CDN yoktur.
   Tailwind yardımcı sınıfları dosyanın sonunda (bölüm 28), statik olarak üretilmiştir.
   ===================================================================== */

/* 0. Yazı tipleri — marka kılavuzundan, kendi sunucumuzdan -------------
   flowen-logo-seti/OKU-BENI.txt: gövde Onest, başlık Unbounded (ikisi de OFL).
   Google Fonts CDN'i kullanılmaz; woff2 dosyaları assets/fonts/ altındadır.
     Onest      — değişken 400-700, gövde ve arayüz
     Unbounded  — tek ağırlık 600, başlık ve marka
   Alt kümeler: latin, latin-ext, kiril, kiril-ext. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/onest-latin.woff2") format("woff2");
  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: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/onest-latin-ext.woff2") format("woff2");
  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: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/onest-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/unbounded-latin.woff2") format("woff2");
  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: "Unbounded";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/unbounded-latin-ext.woff2") format("woff2");
  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: "Unbounded";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/unbounded-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* 1. Değişkenler ------------------------------------------------------- */
:root {
  /* Palet — marka kılavuzundan (flowen-logo-seti/OKU-BENI.txt).
     Logo renkleri olduğu gibi kullanılır; koyu ve açık kademeler aynı üç
     renkten türetilmiştir, dördüncü bir renk yoktur. */
  --c-brand: #187082;      /* PETROL — logotip, halka, sevronlar; ana kurumsal renk */
  --c-navy: #185278;       /* GECE MAVİSİ — hız şeritleri */
  --c-mint: #20A098;       /* NANE — LOJİSTİK bandı, ikonlar */

  --c-white: #FFFFFF;      /* ana zemin */
  --c-paper: #F2F7F8;      /* petrole çalan kırık beyaz: ikincil bölüm zemini */
  --c-ink: #0D2C3D;        /* metin ve koyu bölümler — petrolün koyusu */
  --c-ink-800: #144055;    /* koyu yüzey (koyu zeminde kart), gradyanın üstü */
  --c-ink-900: #071D29;    /* en koyu: gradyanın dibi */
  --c-accent: var(--c-mint);       /* aksan: nane */
  --c-accent-deep: var(--c-brand); /* açık zeminde okunan koyu aksan: petrol */
  --c-mint-light: #4ECEC2; /* nanenin koyu zeminde okunan açığı */
  --c-gray-100: #EDF3F4;   /* gri 1: ikincil zemin */
  --c-gray-300: #D6E1E5;   /* gri 2: ince çizgiler */
  --c-gray-600: #54707D;   /* gri 3: ikincil metin */

  /* Koyu zeminde beyazın saydam kademeleri (yeni renk değildir) */
  --c-on-dark-muted: rgb(255 255 255 / 0.72);
  --c-on-dark-faint: rgb(255 255 255 / 0.52);
  --c-on-dark-line: rgb(255 255 255 / 0.14);
  --c-on-dark-grid: rgb(255 255 255 / 0.045);

  /* Tipografi — marka kılavuzu: gövde Onest, başlık Unbounded */
  --font-sans: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Unbounded", "Onest", ui-sans-serif, system-ui, sans-serif;
  --fs-body: 1rem;                                   /* 16px, md+ 17px */
  --lh-body: 1.65;
  --fs-lead: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-h1: clamp(1.75rem, 1.05rem + 2.6vw, 2.75rem);  /* 28 → 44px — Unbounded geniştir */
  --fs-h2: clamp(1.5rem, 1.08rem + 1.7vw, 2.25rem);   /* 24 → 36px */
  --fs-h3: 1.1875rem;                                /* 19px — Onest */
  --tracking-display: -0.025em;   /* Unbounded geniş; sıkılaştırılır */
  --tracking-heading: -0.022em;
  --tracking-tight: -0.011em;
  --tracking-caps: 0.14em;

  /* Yerleşim */
  --container: 1200px;
  --gutter: 1.25rem;
  --section-y: 96px;
  --header-h: 64px;
  --radius: 4px;
  --radius-lg: 6px;
  --line: 1px solid var(--c-gray-300);
  --line-dark: 1px solid var(--c-on-dark-line);

  /* Yükseklik — sakin kurumsal düzende gölge kullanılmaz. Yüzeyler ince
     çizgiyle ayrılır; değişkenler yerinde bırakıldı ki eski kurallar bozulmasın. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Hareket — yalnızca scroll-reveal */
  --reveal-duration: 400ms;
  --reveal-distance: 8px;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --fs-body: 1.0625rem;
    --fs-lead: 1.125rem;
    --gutter: 2rem;
    --section-y: 108px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-y: 120px;
    --header-h: 72px;
  }
}

/* 2. Temel sıfırlama --------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid var(--c-gray-300);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
address { font-style: normal; }
strong { font-weight: 600; }
::selection { background: var(--c-accent); color: var(--c-ink); }

:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :focus-visible { outline-color: var(--c-accent); }

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--c-ink);
  color: var(--c-white);
  font-weight: 600;
  border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* 3. Yerleşim ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Izgara çocukları içeriğe göre şişmesin: uzun bir tablo ya da kırılamayan
   Rusça kelime, sütunu viewport'un dışına itiyordu. min-width:0 ile sütun
   sabit kalır, tablo kendi içinde (.table-wrap) yatay kayar. */
.grid > *,
.service-block__grid > *,
.route-list > * { min-width: 0; }

.section { padding-block: var(--section-y); }
.section--alt {
  position: relative;
  background: var(--c-paper);
  border-top: var(--line);
  border-bottom: var(--line);
}
/* Sevron dokusu 23 Eyl'de kaldırıldı: sakin kurumsal düzende ikincil bölüm
   düz kırık beyazdır, desen taşımaz. */
.section--alt > * { position: relative; }
.section--dark {
  position: relative;
  overflow: hidden;   /* amblem filigranı sağ kenardan taşıyor; sayfa kaymasın */
  background: var(--c-ink);
  color: var(--c-white);
}
/* Koyu şerit düz renktir: 23 Eyl'de parıltı animasyonu ve amblem filigranı
   kaldırıldı. Tek koyu yüzey kalır, dikkat metinde toplanır. */
.section--dark > * { position: relative; }

/* Koyu zeminde nane kendi tonunda yeterince okunmuyor; aynı rengin açığına
   geçer. Yeni renk değildir, aksanın koyu zemin karşılığıdır. */
.section--dark { --c-accent: var(--c-mint-light); }

.section-head {
  max-width: 46rem;
  margin-bottom: 48px;
}
.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
}
.section-head--split > :first-child { max-width: 46rem; }

@media (min-width: 768px) {
  .section-head { margin-bottom: 64px; }
}

/* 4. Tipografi --------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-gray-600);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--c-accent);
}
.hero .eyebrow { color: var(--c-brand); }
.section--dark .eyebrow { color: var(--c-accent); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

/* Unbounded geniş bir yazı tipi; dar ekranda kırılamayan uzun Rusça kelimeler
   başlığı taşırıyordu. Yalnız gerektiğinde kelime kırılır. */
.display,
.h2,
.h3 { overflow-wrap: break-word; }

.lead {
  margin-top: 22px;
  max-width: 40rem;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--c-gray-600);
}
.section--dark .lead { color: var(--c-on-dark-muted); }

.muted { color: var(--c-gray-600); }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* 5. Butonlar ve bağlantılar ------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color 160ms, border-color 160ms, color 160ms,
              box-shadow 160ms, transform 160ms;
}
.btn:active { transform: translateY(1px); }

/* Dar ekran: uzun buton metinleri (RU "Перевозчикам: предложить машину")
   tek satıra sığmıyor; sarılmasına izin verilir, sayfa kaymaz. */
@media (max-width: 400px) {
  .btn {
    padding-inline: 18px;
    white-space: normal;
    text-align: center;
  }
}
.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: var(--fs-small);
}

/* Tek birincil buton rengi: petrol. 23 Eyl'de lacivert buton da petrole
   çevrildi; sitede iki ayrı "ana buton" görünümü kalmadı. */
.btn--ink {
  background: var(--c-brand);
  color: var(--c-white);
}
.btn--ink:hover { background: #125C6B; }

/* Birincil buton petroldür: marka rengi, düz yüzey, gölge yok. */
.btn--accent {
  background: var(--c-brand);
  color: var(--c-white);
}
.btn--accent:hover { background: #125C6B; }
/* Koyu şeritte petrol okunmaz; aksanın açığına döner. */
.section--dark .btn--accent,
.site-footer .btn--accent {
  background: var(--c-mint-light);
  color: var(--c-ink-900);
}
.section--dark .btn--accent:hover,
.site-footer .btn--accent:hover { background: #6FDCD2; }

.btn--ghost {
  border-color: var(--c-gray-300);
  color: var(--c-ink);
  background: var(--c-white);
}
.btn--ghost:hover {
  border-color: var(--c-accent-deep);
  color: var(--c-accent-deep);
}

.btn-grubu {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero .btn--ghost-dark,
.foto-serit .btn--ghost-dark {
  border-color: var(--c-gray-300);
  color: var(--c-ink);
  background: var(--c-white);
}
.hero .btn--ghost-dark:hover,
.foto-serit .btn--ghost-dark:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: var(--c-white);
}

.btn--ghost-dark {
  border-color: rgb(255 255 255 / 0.28);
  color: var(--c-white);
  background: rgb(255 255 255 / 0.03);
}
.btn--ghost-dark:hover {
  border-color: rgb(255 255 255 / 0.55);
  background: rgb(255 255 255 / 0.08);
  color: var(--c-white);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--c-gray-300);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: border-color 160ms, color 160ms, gap 160ms;
}
.link-arrow:hover {
  border-color: var(--c-accent-deep);
  color: var(--c-accent-deep);
  gap: 12px;
}
.link-arrow .icon-arrow { transition: transform 160ms; }
.link-arrow:hover .icon-arrow { transform: translateX(2px); }

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

.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon .icon-accent { fill: var(--c-accent); }

/* 6. Header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--c-white); }
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
/* Marka işareti — logo setinden, renkleri değiştirilmez.
   Başlık çubuğunda bantsız (sade) sürüm, footer'da bantlı sürüm kullanılır;
   marka kılavuzu bantlı logoyu 300 px altında yasaklıyor. */
.brand__logo {
  width: 172px;
  height: auto;
}
.brand__logo--tam { width: 300px; }

/* Dar ekran: marka serif olduğu için genişledi; uzun CTA metinli dillerde
   (RU "Запросить ставку") başlık satırı 390 px'te taşıyordu. */
@media (max-width: 479px) {
  .site-header .brand__logo { width: 132px; }
  .site-header .btn--sm { padding: 0 12px; font-size: 0.8125rem; }
}
@media (max-width: 359px) {
  .site-header .btn--sm { display: none; }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mobil menü paneli */
.site-nav { display: none; }
.site-nav.is-open {
  display: block;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: var(--c-white);
  border-bottom: var(--line);
}
.site-nav__list { padding: 8px var(--gutter) 0; }
.site-nav__list a {
  display: block;
  padding: 14px 0;
  border-bottom: var(--line);
  font-size: 1.0625rem;
  font-weight: 500;
}
.site-nav__list a[aria-current="page"] { font-weight: 600; }

/* JS yoksa menü düz liste olarak görünür */
html:not(.js) .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 12px; }
html:not(.js) .site-nav { display: block; width: 100%; order: 3; }
html:not(.js) .nav-toggle { display: none; }

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: var(--radius);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--c-ink);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* Dil seçici */
.lang { display: flex; align-items: center; }
.lang li { display: flex; align-items: center; }
.lang li + li::before {
  content: "";
  width: 1px;
  height: 12px;
  background: var(--c-gray-300);
}
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-gray-600);
}
.lang a:hover,
.lang a[aria-current] { color: var(--c-ink); }
.lang--bar { display: none; }
.lang--panel { padding: 16px var(--gutter) 20px; margin-left: -10px; }

@media (min-width: 1024px) {
  .site-nav,
  .site-nav.is-open {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    border: 0;
    background: none;
  }
  .site-nav__list { display: flex; gap: 2px; padding: 0; }
  .site-nav__list a {
    position: relative;
    padding: 8px 12px;
    border: 0;
    font-size: 0.9375rem;
    color: var(--c-gray-600);
    transition: color 150ms;
  }
  .site-nav__list a:hover { color: var(--c-ink); }
  .site-nav__list a[aria-current="page"] { color: var(--c-ink); font-weight: 500; }
  .site-nav__list a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: var(--c-accent);
  }
  .site-nav { margin-right: 12px; }
  .lang--panel { display: none; }
  .lang--bar { display: flex; margin-right: 8px; }
  .nav-toggle { display: none; }
}

/* 7. Hero — sakin kurumsal -----------------------------------------------
   23 Eylül 2026 kararı: hero açık zemindir. Fotoğraf hero'nun arkasında
   değil, bölümler arasında tam genişlik bir bant olarak durur; böylece
   başlık her ekranda tam kontrastla okunur, metnin üstünde karartma gerekmez. */
.hero {
  position: relative;
  padding-block: 64px 44px;
  background: var(--c-white);
  color: var(--c-ink);
}
.hero::before,
.hero::after { content: none; }
.hero > .container { position: relative; }

.hero__title {
  max-width: 19ch;
  font-size: clamp(2rem, 1.05rem + 3.4vw, 3.25rem);  /* 32 → 52px */
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero__lead {
  margin-top: 24px;
  max-width: 44rem;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--c-gray-600);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

/* Hero fotoğrafı — metnin altında, sayfa genişliğinde; üstüne yazı binmez */
.hero__foto {
  display: block;
  width: 100%;
  height: clamp(210px, 32vw, 470px);
  margin-top: 72px;
  object-fit: cover;
  object-position: center 26%;   /* çekicinin tavanı kadrajda kalsın */
}

/* Künye satırı: dört rakam, ince çizgiyle ayrılmış, kutu değil */
.hero__facts {
  margin-top: 48px;
  border-top: var(--line);
}
.hero__facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: var(--line);
}
.hero__facts dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gray-600);
}
.hero__facts dd {
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: right;
  color: var(--c-ink);
}

@media (min-width: 640px) {
  .hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: var(--line);
  }
  .hero__facts > div {
    display: block;
    padding: 18px 20px 18px 0;
    border-bottom: 0;
  }
  .hero__facts dd {
    margin-top: 6px;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
  }
  .hero__facts > div:nth-child(even) {
    padding-right: 0;
    padding-left: 20px;
    border-left: var(--line);
  }
  .hero__facts > div:nth-child(n + 3) { border-top: var(--line); }
}

@media (min-width: 1024px) {
  .hero { padding-block: 88px 0; }
  .hero__foto { margin-top: 104px; }
  .hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__facts > div:nth-child(even) { border-left: 0; }
  .hero__facts > div:nth-child(n + 2) {
    padding-left: 28px;
    border-left: var(--line);
  }
  .hero__facts > div:nth-child(n + 3) { border-top: 0; }
  .hero__facts dd { font-size: 1rem; }
}

/* Eski fotoğraf bandı — fotoğraf 23 Eyl'de hero'ya taşındı; burada yalnız
   kırık beyaz zeminli, sade bir çağrı bölümü kaldı. */
.foto-serit {
  color: var(--c-ink);
  background: var(--c-paper);
  border-top: var(--line);
  border-bottom: var(--line);
  padding-block: var(--section-y);
}
.foto-serit__ic { max-width: calc(var(--container) + 2 * var(--gutter)); }
.foto-serit .h2 { max-width: 22ch; }
.foto-serit .lead { max-width: 46rem; color: var(--c-gray-600); }
.foto-serit__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Amblemli frigo TIR çizimi (assets/img/tir-frigo.svg) — hizmetler sayfasının
   başlığında durur; kendi animasyonunu taşır, prefers-reduced-motion SVG'de kapanır. */
.hero__gorsel { margin-top: 8px; }
.page-header__gorsel {
  margin-top: 40px;
  padding-top: 32px;
  border-top: var(--line);
}
.page-header__gorsel .hero__tir { max-width: 620px; margin-inline: 0; }
.page-header__gorsel-not {
  margin-top: 12px;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--c-gray-600);
}
.hero__tir {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
}
.hero__gorsel-not {
  margin-top: 14px;
  max-width: 46ch;
  font-size: var(--fs-xs);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--c-on-dark-faint);
}

@media (min-width: 1024px) {
  .hero__gorsel { margin-top: 0; }
  .hero__tir {
    max-width: none;
    width: 116%;         /* sağ kenara doğru hafif taşar, araç büyük durur */
    margin-left: auto;
  }
  .hero__gorsel-not { text-align: right; margin-left: auto; }
}

/* Hatlar bölümü: rozetler solda, şema sağda */
.hat-grid { display: grid; gap: 40px; }
.hat-grid__sema { width: 100%; max-width: 440px; margin-inline: auto; }

@media (min-width: 1024px) {
  .hat-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 56px;
  }
  .hat-grid__sema { margin-right: 0; }
}

/* Hat şeması (çizgi grafiği) */
.route-map { width: 100%; max-width: 520px; }
.route-map__svg { width: 100%; height: auto; overflow: visible; }
.rm-ring { fill: none; stroke: var(--c-on-dark-line); stroke-dasharray: 2 6; }
.rm-route {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rm-route--sea { stroke-dasharray: 4 5; }
.rm-node { fill: var(--c-ink); stroke: var(--c-white); stroke-width: 1.5; }
.rm-origin { fill: var(--c-accent); }
.rm-origin-ring { fill: none; stroke: var(--c-accent); stroke-opacity: 0.4; }
.rm-label { fill: var(--c-on-dark-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; }
.rm-sub { fill: var(--c-on-dark-faint); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; }
.rm-origin-label { fill: var(--c-white); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }
.route-map__caption {
  margin-top: 12px;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--c-on-dark-faint);
}

/* 8. Ne yapıyoruz ------------------------------------------------------ */
.services {
  display: grid;
  gap: 48px;
}
.service {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  border-top: 2px solid var(--c-ink);
}
.service__num {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.service__title { margin-top: 14px; }
.service__text { margin-top: 12px; color: var(--c-gray-600); }
.service__more { margin-top: auto; padding-top: 26px; }

@media (min-width: 1024px) {
  .service { padding-top: 24px; }
}

@media (min-width: 768px) {
  .services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* 9. Filomuz ----------------------------------------------------------- */
.table-wrap {
  background: var(--c-white);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Dar ekranda tablo kendi içinde yatay kayar; sayfa kaymaz.
     (Uzun RU başlıkları 390 px'te taşırıyordu.) */
  overflow-x: auto;
  overflow-y: hidden;
}

.fleet-table th,
.fleet-table td {
  padding: 15px 20px;
  border-bottom: var(--line);
  text-align: left;
  vertical-align: baseline;
}
.fleet-table thead th {
  padding-block: 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gray-600);
  background: var(--c-gray-100);
}
.fleet-table tbody th { font-weight: 500; }
.fleet-table td,
.fleet-table thead th:last-child {
  text-align: right;
  white-space: nowrap;
}
.fleet-table td {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fleet-table .unit {
  margin-left: 4px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-gray-600);
}
.fleet-table .is-child th {
  padding-left: 40px;
  font-weight: 400;
  color: var(--c-gray-600);
}
.fleet-table .is-child td { font-weight: 500; color: var(--c-gray-600); }
.fleet-table .is-total th,
.fleet-table .is-total td { font-weight: 600; }
.fleet-table .is-total td {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.005em;
}
.fleet-table .is-total-first th,
.fleet-table .is-total-first td { border-top: 1px solid var(--c-ink); }
.fleet-table tr:last-child th,
.fleet-table tr:last-child td { border-bottom: 0; }
.fleet-table .is-extra th,
.fleet-table .is-extra td { background: var(--c-gray-100); }
.fleet-table .is-extra td {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-gray-600);
  white-space: normal;   /* uzun açıklama hücresi sarılabilsin */
}

.table-note {
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--c-gray-600);
}

.growth {
  margin-top: 40px;
  padding-top: 28px;
  border-top: var(--line);
}
.growth__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-gray-600);
}
.growth__text { margin-top: 10px; }
.growth__compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  margin-top: 24px;
}
.growth__compare dt {
  font-size: var(--fs-small);
  color: var(--c-gray-600);
  font-variant-numeric: tabular-nums;
}
.growth__compare dd {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.growth__arrow {
  max-width: none;
  margin-bottom: 6px;
  color: var(--c-gray-600);
}

/* Çok dar ekran: üç sütunlu karşılaştırma sığmıyor (RU'da 320 px'te taşıyordu),
   alt alta dizilir ve ok aşağı döner. */
@media (max-width: 420px) {
  .growth__compare {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    gap: 10px;
  }
  .growth__arrow {
    margin: 0 0 0 4px;
    transform: rotate(90deg);
  }
}

/* 10. Hat şeridi ------------------------------------------------------- */
.route-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.route-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--c-white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}
.route-tag::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.route-tag__sub {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-gray-600);
}
.routes-note {
  margin-top: 28px;
  max-width: 44rem;
  color: var(--c-gray-600);
}

/* 11. Neden Flowen ----------------------------------------------------- */
.features {
  display: grid;
  gap: 16px;
}
.feature {
  padding: 28px 24px 32px;
  background: var(--c-white);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms, border-color 200ms;
}
.feature:hover {
  border-color: var(--c-brand);
  box-shadow: var(--shadow-md);
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--c-ink);
  background: linear-gradient(160deg, rgb(24 112 130 / 0.22), rgb(24 112 130 / 0.06));
  border: 1px solid rgb(24 112 130 / 0.45);
  border-radius: var(--radius);
}
.feature__title { margin-top: 24px; }
.feature__text { margin-top: 10px; font-size: 1rem; color: var(--c-gray-600); }

@media (min-width: 640px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature { padding: 32px 28px 36px; }
}

/* 12. Süreç ------------------------------------------------------------ */
.process { display: grid; }
.process__step {
  position: relative;
  padding: 0 0 36px 56px;
}
.process__step::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: var(--c-gray-300);
}
.process__step:last-child { padding-bottom: 0; }
.process__step:last-child::before { display: none; }
.process__num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-gray-300);
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.process__step:last-child .process__num {
  background: var(--c-ink);
  color: var(--c-white);
}
.process__title { padding-top: 3px; }
.process__text { margin-top: 8px; font-size: 1rem; color: var(--c-gray-600); }

@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .process__step { padding: 56px 28px 0 0; }
  .process__step:last-child { padding-right: 0; }
  .process__step::before {
    left: 32px;
    right: 0;
    top: 16px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .process__title { padding-top: 0; }
}

/* 13. İletişim şeridi -------------------------------------------------- */
.contact__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.contact__list { border-top: var(--line-dark); }
.contact__item {
  padding: 20px 0;
  border-bottom: var(--line-dark);
}
.contact__item dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-on-dark-faint);
}
.contact__item dd {
  margin-top: 8px;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.contact__item a {
  border-bottom: 1px solid var(--c-on-dark-line);
  transition: color 150ms, border-color 150ms;
}
.contact__item a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.contact__meta { display: block; font-size: var(--fs-small); color: var(--c-on-dark-muted); }

@media (min-width: 640px) {
  .contact__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

/* 14. Footer ----------------------------------------------------------- */
.site-footer {
  padding: 80px 0 32px;
  background: var(--c-paper);
  border-top: var(--line);
  font-size: 0.9375rem;
}
.footer-title {
  margin-bottom: 16px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-gray-600);
}
.site-footer__about {
  margin-top: 20px;
  max-width: 26rem;
  color: var(--c-gray-600);
}
.footer-links li + li { margin-top: 10px; }
.footer-links a:hover,
.footer-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-contact p + p { margin-top: 10px; }

.registry {
  margin-top: 56px;
  padding: 24px;
  background: var(--c-white);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.registry__list {
  display: grid;
  gap: 20px 32px;
}
.registry__list dt {
  font-size: var(--fs-small);
  color: var(--c-gray-600);
}
.registry__list dd {
  margin-top: 5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.registry__meta {
  display: block;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-gray-600);
}

@media (min-width: 640px) {
  .registry__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registry__item--wide { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .registry { padding: 28px 32px; }
  .registry__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: var(--line);
  font-size: 0.8125rem;
  color: var(--c-gray-600);
}

/* 15. İskelet sayfalar ------------------------------------------------- */
.page-intro { border-bottom: var(--line); }

/* 16. Scroll-reveal (tek hareket) -------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn, .link-arrow, .site-nav__list a, .contact__item a { transition: none; }
}

/* =====================================================================
   İç sayfa bileşenleri
   Aynı değişkenler, aynı kurallar: başlıklar serif, gövde Inter,
   tek aksan rengi, yükseklik yalnız --shadow-* kademelerinden,
   tek hareket scroll-reveal.
   ===================================================================== */

/* 17. Sayfa başlığı ve sayfa içi gezinme --------------------------------- */
.page-header {
  position: relative;
  padding-block: clamp(60px, 6vw, 92px) clamp(48px, 5vw, 72px);
  background: var(--c-white);
  border-bottom: var(--line);
}
.page-header .display { font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.75rem); }
.page-header__title { max-width: 24ch; }
.page-header .lead { margin-top: 20px; }

.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}
.jump-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 16px;
  background: var(--c-white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-gray-600);
  transition: color 160ms, border-color 160ms, box-shadow 160ms;
}
.jump-nav a:hover {
  color: var(--c-ink);
  border-color: rgb(24 112 130 / 0.85);
  box-shadow: var(--shadow-md);
}

/* 18. Uzun metin --------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h3 {
  margin-top: 2.1em;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
}
.prose h4 {
  margin-top: 1.8em;
  font-size: 1rem;
  font-weight: 600;
}
.prose li { position: relative; padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.prose ol { counter-reset: prose-item; }
.prose ol > li { counter-increment: prose-item; }
.prose ol > li::before {
  content: counter(prose-item) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-gray-600);
}
.prose a {
  border-bottom: 1px solid var(--c-gray-300);
  font-weight: 500;
  transition: border-color 160ms, color 160ms;
}
.prose a:hover { color: var(--c-accent-deep); border-color: var(--c-accent-deep); }
.prose dt { font-weight: 600; margin-top: 1.1em; }

/* 19. Künye listesi ------------------------------------------------------ */
.spec-list { border-top: var(--line); }
.spec-list__row {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: var(--line);
}
.spec-list dt {
  font-size: var(--fs-small);
  color: var(--c-gray-600);
}
.spec-list dd { font-weight: 500; color: var(--c-ink); }
.spec-list--compact .spec-list__row { padding: 11px 0; }
.spec-list--compact dd { font-size: 0.9375rem; }

@media (min-width: 640px) {
  .spec-list__row {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
  .spec-list--compact .spec-list__row { grid-template-columns: 1fr; gap: 2px; }
}

/* 20. Hizmet bloğu ------------------------------------------------------- */
.service-block + .service-block { border-top: var(--line); }
.service-block__grid { display: grid; gap: 32px; }
.service-block__aside .spec-list { margin-top: 20px; }
.service-block__body .callout { margin-top: 28px; }
.service-block__cta { margin-top: 32px; }

@media (min-width: 1024px) {
  .service-block__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
  }
  .service-block__aside {
    grid-column: span 4;
    position: sticky;
    top: calc(var(--header-h) + 32px);
    align-self: start;
  }
  .service-block__body { grid-column: span 8; }
}

/* 21. Not kutusu --------------------------------------------------------- */
.callout {
  padding: 22px 24px;
  background: var(--c-paper);
  border: 0;
  border-left: 2px solid var(--c-brand);
  border-radius: var(--radius);
}
.callout > * + * { margin-top: 10px; }

/* 22. Hat kayıtları ------------------------------------------------------ */
.route-list {
  display: grid;
  gap: 16px;
}
.route-entry {
  padding: 26px 24px 28px;
  background: var(--c-white);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms, border-color 200ms;
}
.route-entry:hover {
  border-color: var(--c-brand);
  box-shadow: var(--shadow-md);
}
.route-entry__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.route-entry__head .h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.008em;
}
.route-entry__code {
  padding: 3px 8px;
  background: var(--c-gray-100);
  border: var(--line);
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-gray-600);
}
.route-entry__body > p { max-width: 62ch; }
.route-entry__body .spec-list,
.route-entry__body .route-tags { margin-top: 16px; }

@media (min-width: 768px) {
  .route-entry {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: 36px;
    padding: 30px 32px 32px;
  }
  .route-entry__head { display: block; }
  .route-entry__code { display: inline-block; margin-top: 10px; }
}

/* 23. Formlar ------------------------------------------------------------ */
.form { margin-top: 32px; max-width: 48rem; }
.form__grid { display: grid; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: var(--fs-small); font-weight: 500; }
.field__label .req { color: var(--c-gray-600); font-weight: 400; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  font: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgb(12 27 43 / 0.04);
  transition: border-color 160ms, box-shadow 160ms;
}
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--c-gray-600); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-accent-deep);
  box-shadow: 0 0 0 3px rgb(24 112 130 / 0.32);
}
.input::placeholder,
.textarea::placeholder { color: var(--c-gray-600); }
.textarea { min-height: 120px; line-height: 1.6; resize: vertical; }
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230C1B2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  font-size: 0.9375rem;
  line-height: 1.6;
  cursor: pointer;
}
.consent__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--c-ink);
}
.consent__text a {
  border-bottom: 1px solid var(--c-gray-300);
  font-weight: 500;
}
.consent__text a:hover { border-color: var(--c-ink); }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: 28px;
}
.form__note {
  max-width: 34rem;
  font-size: var(--fs-small);
  color: var(--c-gray-600);
}
.btn[disabled] {
  background: var(--c-gray-300);
  color: var(--c-gray-600);
  border-color: transparent;
  cursor: not-allowed;
}
.form__status {
  margin-top: 20px;
  padding: 15px 17px;
  background: linear-gradient(180deg, rgb(24 112 130 / 0.08), rgb(24 112 130 / 0.02));
  border: var(--line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}
.form__status[hidden] { display: none; }

@media (min-width: 640px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

/* 24. CTA şeridi --------------------------------------------------------- */
.cta-band__inner { display: grid; gap: 32px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 1024px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 48px;
  }
  .cta-band__actions { justify-content: flex-end; }
}

/* 25. Belge altı bilgi --------------------------------------------------- */
.doc-meta {
  margin-top: 48px;
  padding-top: 20px;
  border-top: var(--line);
  font-size: var(--fs-small);
  color: var(--c-gray-600);
}

/* 26. Hat şemasının açık zemin sürümü ------------------------------------ */
.route-map--light .rm-ring { stroke: var(--c-gray-300); }
.route-map--light .rm-route { stroke: var(--c-ink); }
.route-map--light .rm-node { fill: var(--c-white); stroke: var(--c-ink); }
.route-map--light .rm-origin { fill: var(--c-accent); stroke: var(--c-ink); stroke-width: 1; }
.route-map--light .rm-origin-ring { stroke: var(--c-ink); stroke-opacity: 0.25; }
.route-map--light .rm-label { fill: var(--c-ink); }
.route-map--light .rm-sub { fill: var(--c-gray-600); }
.route-map--light .rm-origin-label { fill: var(--c-ink); }
.route-map--light .route-map__caption { color: var(--c-gray-600); }

/* 27. Footer yasal bağlantıları ------------------------------------------ */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 22b. Hat kaydı künye satırları — uzun satırların okunabilirliği */
.route-entry__body .spec-list dd { max-width: 74ch; }
/* Kartın içinde son satırın alt çizgisi, kart kenarlığıyla üst üste binmesin */
.route-entry__body .spec-list__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* 6b. Dil seçici — geçerli dil bağlantı değildir, işaretli durur */
.lang a:not([href]) { cursor: default; }
.lang a:not([href]):hover { color: var(--c-gray-600); }

/* 29. WhatsApp ------------------------------------------------------------
   Hat: +90 532 052 34 63 (sitede zaten yayımlanan yetkili numarası).
   WhatsApp yeşili (#25D366) YALNIZ sabit butonda kullanılır — orası üçüncü
   taraf işareti gibi okunur ve tanınırlığı tıklamayı artırır. Metin içi
   bağlantılar marka paletinde kalır, dördüncü bir renk siteye yayılmaz. */
.wa-ikon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

/* Her sayfada sağ altta duran buton */
.wa-sabit {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25D366;
  color: #08351B;
  box-shadow: 0 1px 3px rgb(7 29 41 / 0.2);
  transition: transform 180ms, box-shadow 180ms, background-color 180ms;
}
/* Yalnız simge: etiketli hap, hero künye satırının ve kart metinlerinin
   üstünü kapatıyordu. Erişilebilirlik aria-label ve title ile sağlanır. */
.wa-sabit__yazi {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.wa-sabit .wa-ikon { width: 18px; height: 18px; }
.wa-sabit:hover {
  background: #1FBE5B;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgb(7 29 41 / 0.24);
}
.wa-sabit:active { transform: translateY(0); }

@media (max-width: 559px) {
  .wa-sabit { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-sabit { transition: none; }
  .wa-sabit:hover { transform: none; }
}

/* Hero'daki üçüncü buton — açık zeminde sessiz metin butonu, yeşil kullanılmaz */
.btn--wa {
  gap: 10px;
  padding-inline: 4px;
  border-color: transparent;
  background: none;
  color: var(--c-gray-600);
}
.btn--wa:hover { color: var(--c-brand); }
.btn--wa .wa-ikon { width: 19px; height: 19px; }

/* İletişim sayfası künyesi */
.wa-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  border-bottom: 1px solid var(--c-gray-300);
  transition: color 160ms, border-color 160ms;
}
.wa-baglanti:hover {
  color: var(--c-accent-deep);
  border-color: var(--c-accent-deep);
}
.wa-not {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--c-gray-600);
}

/* Footer iletişim satırı */
.footer-wa a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-wa a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 28. Yerleşim yardımcı sınıfları (Tailwind 3.4.17 çıktısı) --------------
   Eskiden cdn.tailwindcss.com betiğiyle tarayıcıda üretiliyordu. Sayfalarda
   fiilen kullanılan yardımcı sınıflar bunlardır; statik üretilip buraya alındı.
   Yeniden üretim: _kaynak/tailwind.config.js (bkz. _kaynak/OKU.md).
   Sıra önemli: bu blok bileşen kurallarından SONRA gelir. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0
}

.fixed {
  position: fixed
}

.block {
  display: block
}

.table {
  display: table
}

.grid {
  display: grid
}

.hidden {
  display: none
}

.items-center {
  align-items: center
}

.gap-10 {
  gap: 2.5rem
}

.gap-12 {
  gap: 3rem
}

.gap-14 {
  gap: 3.5rem
}

.gap-3 {
  gap: 0.75rem
}

.border {
  border-width: 1px
}

@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .lg\:gap-10 {
    gap: 2.5rem
  }

  .lg\:gap-12 {
    gap: 3rem
  }

  .lg\:gap-16 {
    gap: 4rem
  }

  .lg\:gap-8 {
    gap: 2rem
  }

  .lg\:justify-self-end {
    justify-self: end
  }
}