/* ==========================================================================
   Erhan Alkan — Zemin Etüt & Geoteknik Mühendislik
   Tasarım sistemi. Apple HIG ilkeleri (renk, tipografi, yerleşim,
   erişilebilirlik, hareket) + Tesla.com'un tam ekran, görsel odaklı düzeni.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokenlar
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Tipografi — miras taşıyan bir serif başlıklarda, nötr bir grotesk
     arayüzde. Kurumsal yayıncılığın klasik ayrımı: ses serifte, işlev
     sansta. */
  --font-serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
    monospace;

  /* HIG: mobilde 17pt gövde varsayılanı, 11pt altına asla inme.
     Serif başlıklar biraz daha büyük: Garamond'un x-yüksekliği düşük,
     aynı punto sansa göre küçük görünür. */
  --text-display: clamp(3rem, 7.8vw, 5.75rem);
  --text-h1: clamp(2.375rem, 5vw, 3.875rem);
  --text-h2: clamp(1.875rem, 3.4vw, 2.75rem);
  --text-h3: clamp(1.375rem, 2vw, 1.625rem);
  --text-h4: 1.1875rem;
  --text-lede: clamp(1.0625rem, 1.5vw, 1.3125rem);
  --text-body: 1.0625rem; /* 17px */
  --text-small: 0.9375rem; /* 15px */
  --text-caption: 0.8125rem; /* 13px */

  --leading-tight: 1.06;
  --leading-snug: 1.22;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  /* Serif başlıklar sıkıştırma istemez; asıl daraltma sansta gerekiyor */
  --tracking-tight: -0.012em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-label: 0.16em;

  /* Ölçek ve yerleşim */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --nav-h: 56px;
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(64px, 9vw, 128px);

  /* Köşeler neredeyse keskin. Yuvarlaklık yazılım ürünü hissi veriyor;
     basılı kurumsal dilde kenarlar düz, ayrımı çizgi yapıyor. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 2px;

  /* Hareket — HIG: kısa, kesin, amaca hizmet eden */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* Sonunda hafif aşarak yerine oturur; dokunma geri bildirimini
     mekanik değil canlı gösteriyor. */
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 460ms;

  /* Renk — açık mod temel değerler (light-dark() desteklemeyen tarayıcılar).
     Palet nötr gri değil sıcak: parşömen, mürekkep ve pirinç. Doygun renk
     yalnızca vurguda; geri kalanı kağıt ve mürekkep. */
  --bg: #faf8f3;
  --bg-secondary: #f2ede3;
  --bg-tertiary: #e7e0d1;
  --bg-inverse: #16150f;
  --surface: #fffefa;
  --surface-raised: #fffefa;
  --text: #1c1b16;
  --text-secondary: #4b463d;
  --text-tertiary: #6f6a5e;
  --text-on-accent: #fdfbf6;
  --border: rgba(28, 27, 22, 0.14);
  --border-strong: rgba(28, 27, 22, 0.3);
  --accent: #7a5c2b;
  --accent-hover: #5b431d;
  --accent-soft: rgba(122, 92, 43, 0.1);
  --terra: #8c4a26;
  --success: #1d5c39;
  --danger: #9c2c22;
  /* Gölge yerine saç teli çizgi: basılı kurumsal dilde kağıt havada
     durmaz. Kalan gölgeler yalnızca üst üste binen katmanlar için. */
  --shadow-sm: 0 1px 2px rgba(28, 27, 22, 0.05);
  --shadow-md: 0 1px 2px rgba(28, 27, 22, 0.06),
    0 10px 28px rgba(28, 27, 22, 0.07);
  --glass-bg: rgba(250, 248, 243, 0.82);
  --glass-border: rgba(28, 27, 22, 0.1);
  --scrim: rgba(18, 17, 13, 0.58);
}

/* light-dark() destegi SART. Custom property degerleri ayristirma aninda
   dogrulanmaz: destegi olmayan tarayici bu bildirimleri kabul eder ama
   deger kullanildigi anda gecersizlesir. O durumda color-mix(var(--bg)...)
   ile kurulan fotograf perdesi tamamen saydam kalir ve metin ciplak
   fotografin ustune duser. @supports olmadan yukaridaki duz renk yedegi
   hic devreye girmiyordu. */
@supports (color: light-dark(#000, #fff)) {
/* Aynı tokenlar semantik light-dark() ile — tek kaynaktan iki görünüm */
:root {
  --bg: light-dark(#faf8f3, #12120e);
  --bg-secondary: light-dark(#f2ede3, #1a1915);
  --bg-tertiary: light-dark(#e7e0d1, #24231d);
  --bg-inverse: light-dark(#16150f, #f4f1e8);
  --surface: light-dark(#fffefa, #1a1915);
  --surface-raised: light-dark(#fffefa, #222118);
  --text: light-dark(#1c1b16, #f4f1e8);
  --text-secondary: light-dark(#4b463d, #b6b0a3);
  --text-tertiary: light-dark(#6f6a5e, #8c877a);
  --text-on-accent: light-dark(#fdfbf6, #17150f);
  --border: light-dark(rgba(28, 27, 22, 0.14), rgba(244, 241, 232, 0.15));
  --border-strong: light-dark(
    rgba(28, 27, 22, 0.3),
    rgba(244, 241, 232, 0.32)
  );
  --accent: light-dark(#7a5c2b, #cdac6d);
  --accent-hover: light-dark(#5b431d, #e0c48d);
  --accent-soft: light-dark(rgba(122, 92, 43, 0.1), rgba(205, 172, 109, 0.15));
  --terra: light-dark(#8c4a26, #cf8a5c);
  --success: light-dark(#1d5c39, #6cc292);
  --danger: light-dark(#9c2c22, #f08c80);
  --glass-bg: light-dark(rgba(250, 248, 243, 0.82), rgba(20, 20, 16, 0.78));
  --glass-border: light-dark(
    rgba(28, 27, 22, 0.1),
    rgba(244, 241, 232, 0.12)
  );

  /* Jeolojik tabaka rampası — üst toprak, kil, kum, silt, ayrışmış kaya,
     anakaya. Çizimlerde sabit renk yerine bu tokenlar kullanılıyor; iki
     nedenle: tabakaların üzerine gelen metin her temada okunur kalıyor,
     ve palet soğuk griye kaçmıyor. */
  --strata-1: light-dark(#ded2b8, #4a4030);
  --strata-2: light-dark(#d5c6a6, #423929);
  --strata-3: light-dark(#cab894, #3a3223);
  --strata-4: light-dark(#bda981, #322b1e);
  --strata-5: light-dark(#af9a6e, #2a2418);
  --strata-6: light-dark(#9f8a5c, #221d13);
}
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Derin bölümler (kahraman, öne çıkan panel, çağrı bandı)

   Bunlar sayfanın geri kalanından bir ton koyu/ağır duran bloklar. Önemli
   olan: temayı DİNLERLER. Açık temada mürekkep yazılı taş rengi bir zemin,
   koyu temada krem yazılı mürekkep zemin olurlar. Eskiden sabit koyu
   değerlere kilitliydiler; bu yüzden tema düğmesi ekranın en büyük parçasını
   hiç değiştirmiyor, kullanıcıya "çalışmıyor" gibi görünüyordu.
   -------------------------------------------------------------------------- */

.section-deep {
  --bg: light-dark(#e5ddcb, #14140f);
  --bg-secondary: light-dark(#ddd3bd, #1c1b15);
  --surface: light-dark(#f1ece0, #1f1e17);
  --surface-raised: light-dark(#f7f3ea, #26241c);
  --text: light-dark(#1a190f, #f6f3ea);
  --text-secondary: light-dark(#443f31, #c0bbad);
  --text-tertiary: light-dark(#635d4c, #948f80);
  --border: light-dark(rgba(26, 25, 15, 0.18), rgba(246, 243, 234, 0.16));
  --border-strong: light-dark(
    rgba(26, 25, 15, 0.34),
    rgba(246, 243, 234, 0.32)
  );
  --accent: light-dark(#6d5023, #d5b678);
  --accent-hover: light-dark(#513a15, #e6cb98);
  --accent-soft: light-dark(rgba(109, 80, 35, 0.12), rgba(213, 182, 120, 0.16));
  --terra: light-dark(#7d3f1e, #d9976a);
  --glass-bg: light-dark(rgba(241, 236, 224, 0.7), rgba(22, 22, 17, 0.62));
  --glass-border: light-dark(
    rgba(26, 25, 15, 0.14),
    rgba(246, 243, 234, 0.14)
  );
  color: var(--text);
}

/* --------------------------------------------------------------------------
   2. Sıfırlama ve temel
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

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

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

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

a {
  color: inherit;
  text-decoration: none;
}

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

/* HIG — Erişilebilirlik: klavye odağı her zaman görünür olmalı */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

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

/* --------------------------------------------------------------------------
   3. Tipografi
   -------------------------------------------------------------------------- */

/* Başlıklar serifte. Ağırlık 600 değil 500: Garamond'da yarı kalın
   zaten dolgun duruyor, daha fazlası kaba görünüyor. */
.display,
.h1,
.h2,
.h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.display {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}
.h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
}
.h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
}
.h3 {
  font-size: var(--text-h3);
  line-height: 1.35;
  letter-spacing: -0.012em;
}
/* Kart başlıkları da serifte. Garamond bu boyutta yarı kalınla dolgun
   durduğu için 600 kullanılıyor. */
.h4 {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.lede {
  font-size: var(--text-lede);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.body-text {
  color: var(--text-secondary);
  line-height: var(--leading-loose);
  text-wrap: pretty;
}

.small {
  font-size: var(--text-small);
  line-height: 1.55;
}

.caption {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* Bölüm etiketi: küçük, seyrek harfli, tümü büyük harf. Kurumsal basılı
   dilin en tanıdık işareti — başlığı bağırmadan konumlandırıyor.
   11px'in altına inmiyoruz (HIG alt sınırı). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: 1px;
  background: var(--accent);
  opacity: 0.9;
}

.text-link {
  color: var(--accent);
  font-weight: 500;
  text-underline-offset: 4px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.text-link:hover {
  color: var(--accent-hover);
}

/* Okuma satır uzunluğu — HIG yerleşim: metni okunabilir genişlikte tut */
.measure {
  max-inline-size: 68ch;
}
.measure-narrow {
  max-inline-size: 54ch;
}

/* --------------------------------------------------------------------------
   4. Yerleşim
   -------------------------------------------------------------------------- */

.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  inline-size: 100%;
  max-inline-size: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(48px, 6vw, 80px);
}

.section--alt {
  background: var(--bg-secondary);
}

.section--dark {
  background: var(--bg-inverse);
}

.section-head {
  display: grid;
  gap: var(--space-4);
  margin-block-end: clamp(32px, 5vw, 64px);
}

.section-head--center {
  justify-items: center;
  text-align: center;
}

.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

/* Sütun sayısı açıkça tanımlı: auto-fit, "grid--2"nin geniş ekranda
   üç sütuna dönmesi gibi beklenmedik sonuçlar üretiyordu. */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (min-width: 1000px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.split {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--wide-start {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .split--wide-end {
    grid-template-columns: 0.85fr 1.15fr;
  }
  .split__media--first {
    order: -1;
  }
}

.stack {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}
.stack--center {
  justify-items: center;
  text-align: center;
}

.divider {
  border: 0;
  border-block-start: 1px solid var(--border);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Düğmeler — Tesla'nın pill formu, HIG'in ≥44px dokunma hedefi
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--bg-inverse);
  --btn-fg: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 46px;
  min-inline-size: 168px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.012em;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

/* Ölçülü geri bildirim: kalkıp gölge bırakmak yerine sadece bir tık
   koyulaşıyor. Yüksek kaldırma ve büyük gölge yazılım ürünü hissi
   veriyordu. */
.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(0.99);
}

.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--text-on-accent);
}
.btn--accent:hover {
  --btn-bg: var(--accent-hover);
  opacity: 1;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background: var(--bg-secondary);
  opacity: 1;
}

/* Görsel üstünde duran cam düğmeler */
/* Derin bölümlerin üzerindeki düğmeler. Artık sabit açık/koyu değer
   taşımıyorlar; bulundukları bölümün tokenlarını kullandıkları için
   tema değiştiğinde birlikte dönüyorlar. */
.btn--glass {
  --btn-bg: var(--surface-raised);
  --btn-fg: var(--text);
  border-color: var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.btn--glass-dark {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.btn--glass-dark:hover {
  --btn-bg: color-mix(in srgb, currentColor 8%, transparent);
}

.btn--sm {
  min-block-size: 44px;
  min-inline-size: 0;
  padding: 0 20px;
  font-size: var(--text-caption);
}

.btn--block {
  inline-size: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.btn-row--center {
  justify-content: center;
}

/* Metin bağlantısı + ok (Tesla'nın "Learn more →" örüntüsü) */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--accent);
}
.arrow-link svg {
  transition: transform var(--dur-base) var(--ease-out);
}
.arrow-link:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Üst gezinme — Tesla düzeni, HIG "materials" cam katmanı
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-small);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
}

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  block-size: var(--nav-h);
  transition: background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  block-size: 100%;
  max-inline-size: 1600px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

/* Derin bölümler artık temayı dinlediği için çubuğun metin rengini
   duruma göre ters çevirmesi gerekmiyor: her iki zemin de aynı temanın
   içinde, `--text` iki yerde de yeterli kontrastı veriyor. Kalan tek iş
   zemini değiştirmek. */
.nav.is-solid {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 -1px 0 var(--glass-border);
}

/* -- Marka: E/A amblem + wordmark ---------------------------------------
   Amblem kullanıcının logosu (beyaz zemin silindi). SVG `currentColor`
   ile boyanır: açık zeminde mürekkep, koyu zeminde parşömen. En-boy
   464:262; nav'da yükseklik eski mühürle aynı, genişlik orantılı. */
.brand__mark {
  display: block;
  inline-size: 46px;
  block-size: 26px;
  flex: none;
}

.brand__word {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.brand__word em {
  font-style: normal;
  color: var(--accent);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding: 0 6px;
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* Alt bilgideki mühür: telif satırının başında, küçük */
.footer__brand {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
}
.footer__brand .brand__mark {
  inline-size: 36px;
  block-size: 20px;
  opacity: 0.75;
}

.nav__links {
  display: none;
  flex: 1;
  justify-content: center;
  gap: 2px;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.nav__link[aria-current="page"] {
  color: var(--accent);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.icon-btn svg {
  inline-size: 20px;
  block-size: 20px;
}

.theme-toggle .theme-toggle__moon {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon,
.section-deep .theme-toggle .theme-toggle__moon {
  display: block;
}
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__sun {
    display: none;
  }
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__moon {
    display: block;
  }
}

.nav__cta {
  display: none;
}

@media (min-width: 1080px) {
  :root {
    --nav-h: 64px;
  }
  .nav__links {
    display: flex;
  }
  .nav__cta {
    display: inline-flex;
  }
  .nav__burger {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Mobil menü paneli
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
}
.menu.is-open {
  visibility: visible;
}

.menu__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.menu.is-open .menu__scrim {
  opacity: 1;
}

.menu__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(420px, 100%);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-7);
  background: var(--surface);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.28);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open .menu__panel {
  transform: translateX(0);
}

.menu__top {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--space-4);
}

.menu__list {
  display: grid;
  gap: 2px;
}

.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: 1.0625rem;
  font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.menu__link:hover {
  background: var(--bg-secondary);
}
.menu__link[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
}
.menu__link svg {
  opacity: 0.4;
}

.menu__footer {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

/* Telefon ve e-posta bağlantıları. `justify-items: start` olmadan tam
   genişliğe yayılıyorlar; 44 piksel yükseklik de mobil menüde parmakla
   isabet için şart — burası sitenin en çok dokunulan yeri. */
.menu__footer a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* --------------------------------------------------------------------------
   8. Kahraman bölümleri ve tam ekran paneller (Tesla düzeni)
   -------------------------------------------------------------------------- */

/* Ana sayfada nazik kaydırma yakalaması. "proximity" seçildi:
   "mandatory" klavye ve ekran okuyucu gezinmesini bozabiliyor. */
html.is-snap {
  scroll-snap-type: y proximity;
}

.panel {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-block-size: 100svh;
  padding-block: calc(var(--nav-h) + 40px) clamp(32px, 6vh, 64px);
  padding-inline: var(--gutter);
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
}

.panel__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.panel__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.panel__head {
  position: relative;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  align-content: start;
  max-inline-size: 900px;
  margin-inline: auto;
}

.panel__foot {
  position: relative;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.panel--left .panel__head,
.panel--left .panel__foot {
  justify-items: start;
  text-align: start;
  margin-inline: 0;
}

/* Alt blok tabaka çiziminin üzerine biniyor. Çizimi tamamen kapatmadan
   metni okunur tutmak için arkasına yumuşak bir perde koyuyoruz; yalnız
   renk zayıflatmak yetmiyordu, tabakaların tonu boyunca değişiyor. */
.panel__foot::before {
  content: "";
  position: absolute;
  inset: -32px -50vw -100vh;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 72%, transparent) 45%,
    transparent 100%
  );
}

.panel__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}
.panel__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.panel__stats {
  inline-size: 100%;
  text-align: start;
}

/* Dekoratif nokta yerine sac teli ayrac. Nokta her maddeye anlamsiz bir
   durum isareti koyuyordu; ayrac yalnizca maddeleri birbirinden ayiriyor,
   bu yuzden ilk maddede yok. */
.panel__meta li + li::before {
  content: "";
  inline-size: 1px;
  block-size: 12px;
  background: var(--border-strong);
  margin-inline-end: var(--space-1);
}

/* Zemin katmanı gradyanları — toprak profilini çağrıştırır */
/* Derin bölüm zeminleri. Üç varyant da temayı dinliyor: açık temada
   parşömenin bir ton koyusu (taş, kum, kil), koyu temada mürekkebin
   sıcak tonları. Renk adları jeolojik tabakayı anlatıyor. */

.bg-strata-dark {
  background: light-dark(
    radial-gradient(120% 90% at 50% -10%, #efe8d8 0%, #e3dac6 45%, #d6cbb3 100%),
    radial-gradient(120% 90% at 50% -10%, #26251c 0%, #1a1913 45%, #100f0b 100%)
  );
}

.bg-strata-terra {
  background: light-dark(
    radial-gradient(100% 80% at 20% 0%, #f0e5d3 0%, #e4d5bd 50%, #d5c3a6 100%),
    radial-gradient(100% 80% at 20% 0%, #2e2419 0%, #1f1811 50%, #110d09 100%)
  );
}

.bg-strata-blue {
  background: light-dark(
    radial-gradient(110% 85% at 80% 5%, #e8e6d9 0%, #dbd9c8 55%, #cdcbb6 100%),
    radial-gradient(110% 85% at 80% 5%, #1e2620 0%, #161b16 55%, #0d100d 100%)
  );
}

.bg-light {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
}

/* Eş yükselti (topografi) çizgi dokusu — maske ile her iki temada çalışır */
.topo {
  position: absolute;
  inset: -10% -5%;
  background-color: currentColor;
  opacity: 0.14;
  mask-image: url("../img/topo.svg");
  -webkit-mask-image: url("../img/topo.svg");
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.topo--soft {
  opacity: 0.08;
}

/* İnce grenli kağıt dokusu.

   İki iş yapıyor: geniş gradyanlarda oluşan bantlanmayı kırıyor ve yüzeye
   basılı kağıt hissi veriyor — parşömen paletinin karşılığı ekranda ancak
   dokuyla tamamlanıyor, düz renk plastik duruyor.

   Doku ARTIK OTOMATİK: her arka plan katmanının `::before`'una biniyor.
   Önceden yalnızca bir sınıf olarak tanımlıydı ve hiçbir HTML'de
   kullanılmıyordu, yani ölü koddu. `::after` zaten aurora katmanına ait,
   o yüzden gren `::before`'a yerleşti.

   Opaklık düşük (0.06–0.1): fark edilmemesi gerekiyor. Fark edilirse
   gürültü olur, fark edilmezse kağıt olur. */
.grain,
:is(.bg-strata-dark, .bg-strata-terra, .bg-strata-blue, .bg-light)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: light-dark(0.055, 0.09);
  mix-blend-mode: light-dark(multiply, overlay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Saydamlık azaltma tercihi: doku bir katman daha demek, kaldırıyoruz */
@media (prefers-reduced-transparency: reduce) {
  .grain,
  :is(.bg-strata-dark, .bg-strata-terra, .bg-strata-blue, .bg-light)::before {
    display: none;
  }
}

/* Sayfa başlığı (iç sayfalar) */
.page-hero {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--space-4);
  min-block-size: min(78svh, 640px);
  padding-block: calc(var(--nav-h) + clamp(48px, 10vw, 120px))
    clamp(40px, 7vw, 88px);
  padding-inline: var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

/* Araç sayfaları için kısa başlık bandı */
.page-hero--compact {
  min-block-size: 0;
  padding-block: calc(var(--nav-h) + clamp(36px, 6vw, 72px)) clamp(32px, 5vw, 64px);
}

.page-hero__inner {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

/* 404 sayfasının boş kuyusu. `panel__art` zaten mutlak ve tıklanamaz
   olduğu için bu da yerleşime karışmıyor; başlığın sağında duruyor.
   Metnin sığdığı genişlik daraldığında gizleniyor — dar ekranda başlığın
   arkasına düşüp okunurluğu bozmasını istemiyoruz. */
.art-void {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: clamp(24px, 8vw, 160px);
  transform: translateY(-50%);
  block-size: min(72%, 420px);
  inline-size: auto;
  color: var(--text);
  opacity: 0.5;
}

@media (max-width: 899px) {
  .art-void {
    display: none;
  }
}

.js-anim .void-rod,
.js-anim .void-tip {
  transform-box: view-box;
  transform-origin: 75px 10px;
  animation: void-hang 6.4s var(--ease-in-out) infinite;
}

/* Tij boşlukta hafifçe sallanıyor: durmuş bir sahne değil, sonuçsuz bir
   sahne. Genlik bilerek 4px — arka plan hareketi dikkat çekmemeli. */
@keyframes void-hang {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

.scroll-hint {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}
.scroll-hint__line {
  inline-size: 1px;
  block-size: 40px;
  background: linear-gradient(180deg, currentColor, transparent);
  animation: hint 2.4s var(--ease-in-out) infinite;
}
@keyframes hint {
  0%,
  100% {
    opacity: 0.25;
    transform: scaleY(0.6);
    transform-origin: top;
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* --------------------------------------------------------------------------
   8b. Bölüm çizimleri (SVG) — hepsi dekoratif, aria-hidden
   -------------------------------------------------------------------------- */

/* Zemin profili: panelin alt kenarına yerleşen kesit */
.art-strata {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  inline-size: 100%;
  block-size: clamp(260px, 58%, 640px);
}

/* Yan çizim.

   Genişlik %46 değil %40: metin sütunu 560 pikselde sabitlendiği için
   %46'da ikisi 1080–1110 arasında birbirine giriyordu. %40'ta en dar
   bölünmüş düzende bile aralarında ~48 piksel boşluk kalıyor.

   Bölünmüş düzenin eşiği 900 değil 1080 piksel — üst çubuğun bağlantıları
   açtığı yerle aynı. Aradaki 900–1080 bandı hem metni daraltıyor hem
   çizime yer bırakmıyordu. */
.art-side {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  transform: translateY(-50%);
  inline-size: min(40%, 540px);
  block-size: auto;
}

/* Dar ekranda çizim metnin ARKASINDAN çıkıp KENDİ satırına geçiyor.

   Eskiden tam genişlikte %24 opaklıkla arkaya itiliyordu; o çözüm ikisini
   de kaybediyordu — çizim okunmuyordu çünkü üstünde metin vardı, metin de
   rahatsızdı çünkü arkasında yoğun bir grafik vardı. Mutlak konumu elle
   ayarlamak da yetmedi: başlık kaç satıra sarıyor bilinmediği için CSS'ten
   doğru bandı hesaplamak mümkün değil, her genişlikte biraz binmeye devam
   ediyordu.

   Çözüm çakışmayı yapısal olarak imkansız kılmak: panel üç satırlık
   ızgaraya dönüyor (başlık / çizim / alt blok), çizim ortadaki satırı
   kaplıyor. `minmax(0, 1fr)` orta satırın taşmasını engelliyor.

   `.panel__art` bilinçli olarak `position: static`: böylece içindeki
   `.topo` en yakın konumlu ata olarak `.panel`'i görüyor ve eşyükselti
   dokusu tek satıra sıkışmak yerine tüm paneli kaplamaya devam ediyor.

   Yalnızca `--split` panellerde: 1. ve 6. panelin çizimi tam kanama
   (full-bleed) tabaka kesiti, o zaten metinle çakışmıyor. */
@media (max-width: 1079px) {
  .panel--split {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .panel--split .panel__art {
    position: static;
    display: grid;
    place-items: center;
    grid-row: 2;
    z-index: -1;
    min-block-size: 0;
    padding-block: var(--space-4);
  }

  .panel--split .art-side {
    position: static;
    transform: none;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 100%;
    opacity: 0.72;
  }
}

/* Geniş ekranda metni sola sabitleyen panel varyantı */
@media (min-width: 1080px) {
  .panel--split .panel__head,
  .panel--split .panel__foot {
    justify-items: start;
    text-align: start;
    max-inline-size: 560px;
    margin-inline: 0;
  }
  .panel--split .panel__meta {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   9. Kartlar ve içerik bileşenleri
   -------------------------------------------------------------------------- */

/* Kart değil, çerçeveli bir sütun. Gölge yerine saç teli çizgi, keskin
   köşe ve kağıt yüzey: basılı kurumsal dosya hissi. */
.card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-slow) var(--ease-out);
}

/* Üst kenarda pirinç bir çizgi, yalnızca üzerine gelindiğinde çekiliyor */
.card--link::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  block-size: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card--link:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card--link:hover::after,
.card--link:focus-within::after {
  transform: scaleX(1);
}

.card__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.card__icon svg {
  inline-size: 22px;
  block-size: 22px;
}

.card__link-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__tag {
  align-self: start;
  justify-self: start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--text-secondary);
}

/* Numaralı liste — süreç adımları */
.steps {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  counter-reset: step;
}

@media (min-width: 760px) {
  .steps--row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }
}

.step {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--border);
  counter-increment: step;
}

.step::before {
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* İstatistik şeridi */
.stats {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 860px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat {
  display: grid;
  gap: var(--space-1);
}

/* Etiket DOM'da önce gelir (ekran okuyucu için doğru sıra),
   görsel olarak büyük değer üstte durur. */
/* Rakamlar da serifte, sabit genişlikli sayı figürleriyle: sütunlar
   hizalı kalıyor ve sayı bir istatistik değil bir kayıt gibi duruyor. */
.stat__value {
  order: -1;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4vw, 3.375rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.stat__label {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

/* Özellik listesi — onay işareti + metin */
.check-list {
  display: grid;
  gap: var(--space-3);
}
.check-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-3);
  align-items: start;
  color: var(--text-secondary);
}
.check-list svg {
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 2px;
  color: var(--accent);
}

/* Tanım listesi — teknik künye */
.spec-list {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--border);
}
.spec-list > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--border);
}
@media (min-width: 640px) {
  .spec-list > div {
    grid-template-columns: 240px 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}
.spec-list dt {
  font-size: var(--text-small);
  font-weight: 600;
}
.spec-list dd {
  color: var(--text-secondary);
  font-size: var(--text-small);
}

/* İmza yetkilisi kartı.

   Fotoğraf yok — bir tanıtım örneğinde uydurma portre kullanmak, güven
   kazanmak için var olan bölümün amacını bozar. Yerine serif monogram:
   kurumsal basılı gelenekte kişiyi temsil eden en eski işaret, ve iki
   temada da bozulmadan çalışıyor. */
.person {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--border);
}

.person__monogram {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.person__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
}

.person__role {
  margin-block-start: 2px;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.person__meta {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}
/* Etiket değerin ÜSTÜNDE, yanında değil. Sabit genişlikte bir etiket
   sütunu denendi ama "SORUMLULUK" gibi uzun etiketler harf aralığıyla
   birlikte 84 pikseli aşıp değerin üzerine biniyordu; kart genişliği üç
   sütunlu ızgarada ~350 piksel olduğu için sütunu büyütmek de değere yer
   bırakmıyor. Yığmak ikisini de kurtarıyor. */
.person__meta > div {
  display: grid;
  gap: 1px;
}
.person__meta dt {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.person__meta dd {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

/* Belge kartı: mühürlü evrak grafiği + numara ve geçerlilik */
.cert {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.cert > div {
  display: flex;
  flex-direction: column;
}

.cert__sheet {
  inline-size: 84px;
  block-size: auto;
  color: var(--text);
}

/* Belge numarası ve geçerlilik satırları kartın altına yapışıyor: açıklama
   metni iki ya da üç satır olabildiği için `auto` bırakılırsa üç kartın
   künyesi farklı hizada duruyor, tablo gibi okunmuyor. */
.cert__meta {
  display: grid;
  gap: var(--space-2);
  margin-block: auto var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
}
.cert__meta > div {
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: baseline;
}
.cert__meta dt {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cert__meta dd {
  font-size: var(--text-small);
  font-weight: 500;
}

/* Rapor yığını çizimi */
.doc-stack {
  inline-size: 100%;
  max-inline-size: 460px;
  block-size: auto;
  color: var(--text);
}

/* Hizmet bölgeleri haritası */
.map-figure {
  margin-block-end: clamp(32px, 5vw, 56px);
}

.map-tr {
  inline-size: 100%;
  block-size: auto;
  color: var(--text);
}

.map-tr__land path {
  fill: color-mix(in srgb, var(--text) 7%, transparent);
  stroke: color-mix(in srgb, var(--text) 26%, transparent);
  stroke-width: 1.2;
}

.map-tr__hub circle {
  fill: var(--accent);
}
.map-tr__hub .map-tr__pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  opacity: 0.5;
}

.map-tr__pins circle {
  fill: color-mix(in srgb, var(--accent) 70%, var(--text));
  fill-opacity: 0.85;
}

.map-tr__labels text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  fill: currentColor;
  fill-opacity: 0.72;
}

.map-figure__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-block-start: var(--space-4);
}

.map-key {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}
.map-key::before {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.map-key--hub::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.map-key--pin::before {
  inline-size: 7px;
  block-size: 7px;
  background: color-mix(in srgb, var(--accent) 70%, var(--text));
}

/* Bağlantı: ok işareti üzerine gelince ilerliyor */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  font-weight: 500;
  color: var(--accent);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover::after {
  transform: translateX(3px);
}

/* Tablo */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

caption {
  padding: var(--space-4) var(--space-5);
  text-align: start;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  border-block-end: 1px solid var(--border);
}

th,
td {
  padding: var(--space-4) var(--space-5);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border);
}

thead th {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  background: var(--bg-secondary);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-block-end: 0;
}

td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Açılır kapanır (SSS) — native <details>, ekran okuyucu uyumlu */
.faq {
  display: grid;
  border-block-start: 1px solid var(--border);
}

.faq__item {
  border-block-end: 1px solid var(--border);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 64px;
  padding-block: var(--space-4);
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "";
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  border-inline-end: 2px solid var(--text-tertiary);
  border-block-end: 2px solid var(--text-tertiary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.faq__answer {
  padding-block-end: var(--space-5);
  color: var(--text-secondary);
  max-inline-size: 72ch;
}

/* Alıntı */
.quote {
  display: grid;
  gap: var(--space-5);
  max-inline-size: 60ch;
}
/* Müşteri sözü serifte ve italikte. Kurumsal basılı dilde alıntı, gövde
   metninden ses olarak ayrılır — sansta kaldığında paragraftan farkı
   yoktu, dolayısıyla ağırlık taşımıyordu. */
.quote blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: 0;
  text-wrap: pretty;
}
.quote figcaption {
  font-size: var(--text-small);
  color: var(--text-tertiary);
}

/* Çağrı bandı */
.cta-band {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  padding-inline: var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.cta-band__inner {
  position: relative;
  max-inline-size: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  text-align: center;
}

/* Logo / referans şeridi */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) clamp(24px, 5vw, 56px);
  align-items: center;
  justify-content: center;
}
.logo-strip li {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Medya çerçevesi (SVG çizimleri için) */
.figure {
  display: grid;
  gap: var(--space-3);
}
.figure__frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  overflow: hidden;
}
.figure__frame svg {
  inline-size: 100%;
  block-size: auto;
}
.figure figcaption {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   10. Formlar ve teklif yapılandırıcı
   -------------------------------------------------------------------------- */

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

.field__label {
  font-size: var(--text-small);
  font-weight: 500;
}

.field__hint {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

.req {
  color: var(--danger);
  margin-inline-start: 2px;
}

.input,
.select,
.textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.textarea {
  min-block-size: 132px;
  resize: vertical;
  line-height: 1.55;
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 44px;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

/* HIG — Erişilebilirlik: hata sadece renkle değil, metin + simgeyle bildirilir */
.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--danger);
}
.field__error.is-visible {
  display: flex;
}
.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.form-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 700px) {
  .form-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .span-2 {
    grid-column: 1 / -1;
  }
}

.form-status {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  font-size: var(--text-small);
}
.form-status:empty {
  display: none;
}
.form-status.is-success {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
}
.form-status.is-error {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
}

/* Seçim kartları (radyo/onay kutusu) */
.choice-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
}

.choice {
  position: relative;
  display: grid;
  gap: var(--space-1);
  align-content: start;
  min-block-size: 88px;
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.choice:hover {
  border-color: var(--accent);
}
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice__title {
  font-size: var(--text-small);
  font-weight: 600;
}
.choice__note {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}
/* Seçili durum: renk + kalın kenar + onay simgesi (renk tek gösterge değil) */
.choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-soft);
}
.choice__mark {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  inline-size: 18px;
  block-size: 18px;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.choice:has(input:checked) .choice__mark {
  opacity: 1;
}
.choice:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Kaydırıcı */
.range {
  inline-size: 100%;
  block-size: 44px;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  block-size: 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.range::-webkit-slider-thumb {
  appearance: none;
  margin-block-start: -9px;
  inline-size: 24px;
  block-size: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.range::-moz-range-track {
  block-size: 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.range::-moz-range-thumb {
  inline-size: 24px;
  block-size: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}

.range-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.range-value {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Yapılandırıcı düzeni */
.config {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 1000px) {
  .config {
    grid-template-columns: 1fr 400px;
  }
  .config__summary {
    position: sticky;
    inset-block-start: calc(var(--nav-h) + 24px);
  }
}

.config__group {
  position: relative;
  display: block;
  padding-block: clamp(28px, 4vw, 40px);
}
.config__group:first-child {
  padding-block-start: 0;
}

/* Ayırıcı çizgi kenarlık değil sözde eleman: fieldset kenarlığı
   legend etrafında boşluk bırakıp çizgiyi kırıyordu. */
.config__group + .config__group::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--border);
}

/* Radyo/onay grupları anlamsal olarak fieldset; görsel sıfırlama */
fieldset.config__group {
  min-inline-size: 0;
  margin: 0;
  padding-inline: 0;
  border: 0;
}
/* legend, kenarlık hizasına oturduğu için üst dolguyu ve ayırıcı çizgiyi
   yok sayıyor. float ile normal akışa döner. */
.config__group legend {
  float: left;
  inline-size: 100%;
  padding-inline: 0;
}
.config__group legend ~ * {
  clear: both;
}
.config__group > p {
  margin-block-start: var(--space-2);
  max-inline-size: 62ch;
}

/* Metin ile hizalı tek onay kutusu */
.check-inline {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  line-height: 1.5;
  cursor: pointer;
}
.check-inline input {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 3px;
  accent-color: var(--accent);
}

.config__summary {
  display: grid;
  gap: var(--space-4);
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.summary-rows {
  display: grid;
  gap: var(--space-3);
}
.summary-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-small);
}
.summary-rows dt {
  color: var(--text-secondary);
}
.summary-rows dd {
  font-weight: 600;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.summary-total {
  display: grid;
  gap: var(--space-1);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
}
.summary-total__value {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Alt bilgi
   -------------------------------------------------------------------------- */

.footer {
  padding-block: clamp(48px, 6vw, 80px) var(--space-6);
  padding-inline: var(--gutter);
  border-block-start: 1px solid var(--border);
  background: var(--bg);
}

.footer__inner {
  max-inline-size: var(--container);
  margin-inline: auto;
}

.footer__cols {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-block-end: clamp(32px, 5vw, 56px);
}

/* Sutun basliklari h2 degil: gorsel olarak baslik gibi duruyorlar ama
   belge ana hattina 11 sayfada dorder bos h2 ekliyorlardi ve gercek icerik
   h2lerini seyreltiyorlardi. Bicim ayni, semantik yuk kalkti. */
.footer__col-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.footer__col li a,
.footer__col li span {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--text-small);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col li a:hover {
  color: var(--text);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: center;
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  text-align: center;
}
.footer__bottom a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}
.footer__bottom a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   12. Hareket — HIG: amaçlı, kısa, iptal edilebilir, opsiyonel
   -------------------------------------------------------------------------- */

/* Animasyonların tamamı `js-anim` sınıfına bağlı. Bu sınıfı sayfa başındaki
   küçük betik ekliyor ve yalnızca hareket azaltma tercihi kapalıysa ekliyor.
   Böylece JavaScript çalışmazsa ya da kullanıcı hareket istemiyorsa içerik
   hiçbir zaman gizli bir başlangıç durumunda kalmaz. */

.js-anim .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-anim .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* -- Hareket yaşam döngüsü ----------------------------------------------
   Görüş alanı dışındaki sahnenin bütün animasyonları duraklar. Sınıfı
   main.js'teki kalıcı IntersectionObserver ekleyip kaldırıyor.

   `*` sözde öğeleri (pseudo-element) kapsamadığı için ::before ve ::after
   ayrıca yazılmak zorunda — arka plandaki aurora katmanı tam olarak orada
   yaşıyor, atlanırsa duraklamanın asıl kazancı kaybolur.

   `paused` durdurmuyor, donduruyor: sahne geri geldiğinde döngü kaldığı
   karede devam eder, baştan sıçramaz. */
.js-anim :is(.panel, .page-hero, .cta-band):not(.is-onscreen) *,
.js-anim :is(.panel, .page-hero, .cta-band):not(.is-onscreen) *::before,
.js-anim :is(.panel, .page-hero, .cta-band):not(.is-onscreen) *::after,
.js-anim :is(.panel, .page-hero, .cta-band):not(.is-onscreen)::before,
.js-anim :is(.panel, .page-hero, .cta-band):not(.is-onscreen)::after {
  animation-play-state: paused;
}

/* -- Sahne koreografisi -------------------------------------------------
   Panel, sayfa başlığı ve çağrı bantları görüş alanına girdiğinde
   içindeki bloklar sırayla belirir. Sıralama okuma yönünü izler:
   üst metin bloğu, sonra alttaki eylemler. */

.js-anim
  :is(.panel__head, .panel__foot, .page-hero__inner, .cta-band__inner)
  > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--step, 0ms);
}

.js-anim
  .is-active
  :is(.panel__head, .panel__foot, .page-hero__inner, .cta-band__inner)
  > * {
  opacity: 1;
  transform: none;
}

.js-anim :is(.panel__head, .page-hero__inner, .cta-band__inner) > * {
  --step: 0ms;
}
.js-anim
  :is(.panel__head, .page-hero__inner, .cta-band__inner)
  > *:nth-child(2) {
  --step: 90ms;
}
.js-anim
  :is(.panel__head, .page-hero__inner, .cta-band__inner)
  > *:nth-child(3) {
  --step: 180ms;
}
.js-anim
  :is(.panel__head, .page-hero__inner, .cta-band__inner)
  > *:nth-child(4) {
  --step: 270ms;
}
.js-anim
  :is(.panel__head, .page-hero__inner, .cta-band__inner)
  > *:nth-child(n + 5) {
  --step: 360ms;
}

/* Alt blok metinden sonra gelir */
.js-anim .panel__foot > *:nth-child(1) {
  --step: 340ms;
}
.js-anim .panel__foot > *:nth-child(2) {
  --step: 430ms;
}
.js-anim .panel__foot > *:nth-child(n + 3) {
  --step: 520ms;
}

/* Arka plan çizimi metinden önce, daha yavaş belirir */
.js-anim .panel__art {
  opacity: 0;
  transition: opacity 1100ms var(--ease-out);
}
.js-anim .is-active .panel__art {
  opacity: 1;
}

/* Açılışta zaten ekranda olan ilk sahne JavaScript'i beklemez: girişini
   kaydırma gözlemcisi yerine sayfa yüklenince başlayan bir animasyonla
   yapar. Böylece betik gecikirse ya da hiç çalışmazsa bile ilk ekranda
   boş bir alan görünmez. `both` dolgusu animasyonu kazandırdığı için
   yukarıdaki gizli başlangıç değerleri devreye girmez. */
.js-anim
  main
  > :is(.panel, .page-hero):first-child
  :is(.panel__head, .panel__foot, .page-hero__inner)
  > * {
  animation: scene-rise 700ms var(--ease-out) var(--step, 0ms) both;
}

.js-anim main > :is(.panel, .page-hero):first-child .panel__art {
  animation: scene-fade 1100ms var(--ease-out) both;
}

@keyframes scene-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes scene-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Sondaj kuyusu çizgisi yukarıdan aşağıya çizilir */
.js-anim .draw-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1700ms var(--ease-out) 350ms;
}
.js-anim .is-active .draw-line {
  stroke-dashoffset: 0;
}

/* Matkap ucu, çizgi dibe ulaştığında belirir */
.js-anim .drill-tip {
  opacity: 0;
  transition: opacity 400ms var(--ease-out) 1900ms;
}
.js-anim .is-active .drill-tip {
  opacity: 1;
}

/* Numune işaretleri çizgi ilerledikçe sırayla görünür */
.js-anim .spt-mark > * {
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  transition-delay: var(--step, 0ms);
}
.js-anim .is-active .spt-mark > * {
  opacity: 1;
}
.js-anim .spt-mark > *:nth-child(1) {
  --step: 700ms;
}
.js-anim .spt-mark > *:nth-child(2) {
  --step: 900ms;
}
.js-anim .spt-mark > *:nth-child(3) {
  --step: 1100ms;
}
.js-anim .spt-mark > *:nth-child(4) {
  --step: 1300ms;
}
.js-anim .spt-mark > *:nth-child(5) {
  --step: 1500ms;
}

/* -- Kaydırmaya bağlı yumuşak kayma (paralaks) --------------------------
   Doku katmanı zaten kenarlardan %10 taşıyor, bu yüzden boşluk açmadan
   hareket edebilir. Yalnızca scroll-timeline destekleyen tarayıcılarda. */

/* Doku katmanının kendi sürekli çevrimi var (bkz. topo-breathe), bu yüzden
   kaydırmaya bağlı kayma yalnızca yan çizimlere uygulanıyor. İkisi de
   `transform` yazdığı için aynı öğede birleşemezler. */
/* Yalnızca 1080 pikselden geniş ekranda: `side-drift` kare başına
   `translateY(calc(-50% ± 22px))` yazıyor ve o -%50 çizimin dikey
   ortalanmasının bir parçası. Dar ekranda çizim mutlak konumdan çıkıp
   kendi ızgara satırına geçtiği için ortalamayı ızgara yapıyor; aynı
   dönüşüm orada çizimi satırından yukarı fırlatıp başlığın üzerine
   bindiriyordu. Paralaks zaten geniş ekranın etkisi, dar ekranda
   kaybı yok. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1080px) {
    .js-anim .art-side {
      animation: side-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes side-drift {
  from {
    transform: translateY(calc(-50% + 22px));
  }
  to {
    transform: translateY(calc(-50% - 22px));
  }
}

/* -- Sismik kayıt: sürekli akan dalga treni -----------------------------
   Bütün döngü 3,2 saniye üzerine kurulu ve fiziksel sırayı izliyor:
   kaynak vurur, dalga cepheleri dışa doğru ilerler, jeofonlar sırayla
   kaydeder. Aynı ritim, hareketin süsleme değil anlatım olmasını sağlıyor. */

.js-anim .seis-wave {
  animation: seis-scroll var(--speed) linear infinite;
}

.js-anim .seis-wave--1 {
  --period: 120px;
  --speed: 6s;
}
.js-anim .seis-wave--2 {
  --period: 140px;
  --speed: 7.6s;
}
.js-anim .seis-wave--3 {
  --period: 160px;
  --speed: 9.4s;
}
.js-anim .seis-wave--4 {
  --period: 180px;
  --speed: 11.5s;
}

@keyframes seis-scroll {
  to {
    transform: translateX(var(--period));
  }
}

/* Dalga cepheleri: kaynaktan dışa doğru gerçekten ilerleyen cepheler.

   Önceki hali yerinde nabız atıyordu (scale 1 → 1.04) — README "dışa doğru
   yayılır" dediği halde görüntü titreşimden ibaretti, jeofizikten anlayan
   biri bunu fark eder. Şimdi her halka kendi yarıçapından bir sonrakinin
   yarıçapına kadar büyüyüp sönümleniyor; halkalar 640 ms arayla
   başladığı için sürekli rejimde beş cephe aynı anda farklı mesafede
   yol alıyor. Bakıldığında tek bir şey görünüyor: dışa akan bir cephe
   dizisi.

   `--to` her halkada farklı, çünkü yarıçaplar eşit aralıklı değil
   (48, 96, 150, 208, 270): oranı bir sonraki halkanın yarıçapı belirliyor.
   Süre sabit olduğu için cepheler dışa gittikçe hızlanıyor gibi durmuyor,
   aksine yavaşlıyor — sönümlenen bir dalga için doğru okuma. */
.js-anim .seis-ring > * {
  transform-box: view-box;
  transform-origin: 110px 120px;
  animation: seis-ripple 3.2s linear infinite;
  animation-delay: var(--step, 0ms);
}
.js-anim .seis-ring > *:nth-child(1) {
  --to: 2;
}
.js-anim .seis-ring > *:nth-child(2) {
  --step: 640ms;
  --to: 1.5625;
}
.js-anim .seis-ring > *:nth-child(3) {
  --step: 1280ms;
  --to: 1.387;
}
.js-anim .seis-ring > *:nth-child(4) {
  --step: 1920ms;
  --to: 1.298;
}
.js-anim .seis-ring > *:nth-child(5) {
  --step: 2560ms;
  --to: 1.26;
}

@keyframes seis-ripple {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  14% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: scale(var(--to, 1.5));
  }
}

/* Kaynak vuruşu */
.js-anim .seis-source {
  transform-box: view-box;
  transform-origin: 110px 120px;
  animation: seis-source 3.2s var(--ease-out) infinite;
}

@keyframes seis-source {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  6% {
    opacity: 1;
    transform: scale(1.55);
  }
  28% {
    opacity: 0.85;
    transform: scale(1);
  }
}

/* Jeofonlar: dalga geldikçe uzaklık sırasına göre tepki verir */
.js-anim .geophone > * {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: geophone-hit 3.2s var(--ease-out) infinite;
  animation-delay: var(--step, 0ms);
}
.js-anim .geophone > *:nth-child(1) {
  --step: 180ms;
}
.js-anim .geophone > *:nth-child(2) {
  --step: 340ms;
}
.js-anim .geophone > *:nth-child(3) {
  --step: 500ms;
}
.js-anim .geophone > *:nth-child(4) {
  --step: 660ms;
}
.js-anim .geophone > *:nth-child(5) {
  --step: 820ms;
}
.js-anim .geophone > *:nth-child(6) {
  --step: 980ms;
}

@keyframes geophone-hit {
  0%,
  70%,
  100% {
    opacity: 0.65;
    transform: scaleY(1);
  }
  12% {
    opacity: 1;
    transform: scaleY(1.6);
  }
  40% {
    opacity: 0.8;
    transform: scaleY(1.1);
  }
}

/* -- Ortam ışığı --------------------------------------------------------
   Koyu bölümlerin arkasında çok yavaş sürüklenen iki ışık kümesi. Düz
   gradyanın durgunluğunu kırıp bölümü canlı tutuyor. Sözde öğe olduğu
   için hiçbir sayfaya ek işaretleme gerekmiyor. */

.js-anim
  :is(.bg-strata-dark, .bg-strata-blue, .bg-strata-terra, .bg-light)::after {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(
      38% 38% at 28% 30%,
      color-mix(in srgb, var(--accent) 22%, transparent),
      transparent 70%
    ),
    radial-gradient(
      34% 34% at 72% 66%,
      color-mix(in srgb, var(--terra) 16%, transparent),
      transparent 70%
    );
  animation: aurora 26s ease-in-out infinite alternate;
}

/* Açık zeminde aynı ışık çok daha kısık: kağıt lekeli görünmesin */
.js-anim .bg-light::after {
  opacity: 0.5;
}

@keyframes aurora {
  from {
    transform: translate3d(-4%, -3%, 0) scale(1);
  }
  to {
    transform: translate3d(5%, 4%, 0) scale(1.14);
  }
}

/* -- Topografya dokusu: her yerde çok yavaş bir sürüklenme -------------
   Kaydırmaya bağlı paralaks yalnızca kaydırırken çalışıyordu; sayfa
   durduğunda doku da duruyordu. Bu çevrim durgunluğu kaldırıyor. */

.js-anim .topo {
  animation: topo-breathe 40s ease-in-out infinite alternate;
}

@keyframes topo-breathe {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1.04);
  }
  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.1);
  }
}

/* -- Kuyu logu: aşağı inen ölçüm bandı ----------------------------------
   Gradyan durakları CSS'ten renk alıyor: `--accent` iki temada da doğru
   maviyi veriyor, SVG niteliğine gömülü sabit renk vermeye gerek yok. */

.scan-core,
.scan-edge {
  stop-color: var(--accent);
}

.js-anim .log-scan {
  animation: log-scan 5.5s var(--ease-out) infinite;
}

@keyframes log-scan {
  0% {
    transform: translateY(40px);
  }
  70%,
  100% {
    transform: translateY(452px);
  }
}

/* Bandın geçtiği derinlikteki numune noktaları tepki verir */
.js-anim .log-node > * {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: node-hit 5.5s var(--ease-out) infinite;
  animation-delay: var(--step, 0ms);
}
.js-anim .log-node > *:nth-child(1) {
  --step: 100ms;
}
.js-anim .log-node > *:nth-child(2) {
  --step: 1300ms;
}
.js-anim .log-node > *:nth-child(3) {
  --step: 2200ms;
}
.js-anim .log-node > *:nth-child(4) {
  --step: 2900ms;
}

@keyframes node-hit {
  0%,
  22%,
  100% {
    transform: scale(1);
  }
  6% {
    transform: scale(2);
  }
}

/* -- Laboratuvar: yürüyen tire, piston ve Mohr daireleri ---------------- */

/* -- Yeniden kullanılabilir hareket araçları -----------------------------
   Bu üçü sitenin her yerindeki teknik çizimlerde kullanılıyor. Amaç her
   çizime tek tek animasyon yazmak yerine, çizimin anlattığı işe uygun
   olanı seçip sınıf olarak vermek. */

/* Yürüyen tire. Dikişsiz kapanması için tam iki tire periyodu ötelenir,
   bu yüzden periyot çizimden `--dash-period` ile bildiriliyor. */
.js-anim .march {
  animation: march var(--march-dur, 2.6s) linear infinite;
}

@keyframes march {
  to {
    stroke-dashoffset: calc(-2 * var(--dash-period, 11));
  }
}

/* Çubuk dizisinden aşağı inen parlama dalgası: ölçümün derinlikle
   ilerlediğini anlatıyor. */
.js-anim .bar-cascade > * {
  animation: bar-wave 4.8s var(--ease-in-out) infinite;
  animation-delay: var(--step, 0ms);
}
.js-anim .bar-cascade > *:nth-child(1) {
  --step: 0ms;
}
.js-anim .bar-cascade > *:nth-child(2) {
  --step: 160ms;
}
.js-anim .bar-cascade > *:nth-child(3) {
  --step: 320ms;
}
.js-anim .bar-cascade > *:nth-child(4) {
  --step: 480ms;
}
.js-anim .bar-cascade > *:nth-child(5) {
  --step: 640ms;
}
.js-anim .bar-cascade > *:nth-child(6) {
  --step: 800ms;
}
.js-anim .bar-cascade > *:nth-child(7) {
  --step: 960ms;
}
.js-anim .bar-cascade > *:nth-child(8) {
  --step: 1120ms;
}
.js-anim .bar-cascade > *:nth-child(9) {
  --step: 1280ms;
}
.js-anim .bar-cascade > *:nth-child(10) {
  --step: 1440ms;
}

@keyframes bar-wave {
  0%,
  45%,
  100% {
    opacity: 0.62;
  }
  14% {
    opacity: 1;
  }
}

/* Eğri boyunca ilerleyen ölçüm noktası. Yol verisi çizimin yanında
   kalsın diye `offset-path` satır içi stilde veriliyor. */
.js-anim .trace-dot {
  animation: trace var(--trace-dur, 9s) var(--ease-in-out) infinite;
  offset-rotate: 0deg;
}

@keyframes trace {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  8%,
  88% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* Nokta yalnızca gerçekten hareket edebiliyorsa görünür. Hareket kısıtlı
   ya da offset-path desteklenmiyorsa eğrinin başında duran anlamsız bir
   işaret bırakmasın. */
html:not(.js-anim) .trace-dot {
  display: none;
}

@supports not (offset-path: path("M0 0 L1 1")) {
  .trace-dot {
    display: none;
  }
}

.js-anim .piston {
  animation: piston 4.2s var(--ease-in-out) infinite;
}

@keyframes piston {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(5px);
  }
}

.js-anim .mohr > * {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mohr-grow 4.2s var(--ease-out) infinite;
  animation-delay: var(--step, 0ms);
}
.js-anim .mohr > *:nth-child(2) {
  --step: 320ms;
}
.js-anim .mohr > *:nth-child(3) {
  --step: 640ms;
}

@keyframes mohr-grow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* -- Haritadaki merkez ------------------------------------------------
   Merkez ofisten dışa açılan tek halka. Panelin sismik cepheleriyle aynı
   dil, ama tek örnek ve yavaş: harita bir grafik, gösteri değil. */

.js-anim .map-tr__pulse {
  /* Merkez ofisin harita uzerindeki konumu. hakkimizda sayfasindaki
     map-tr__hub cember koordinatiyla ayni olmali; ayrilirsa halka
     buyurken merkezden kayar ve haritanin disina tasar. */
  transform-box: view-box;
  transform-origin: 259.4px 41.9px;
  animation: map-pulse 4.6s var(--ease-out) infinite;
}

@keyframes map-pulse {
  0% {
    opacity: 0.55;
    transform: scale(0.7);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

/* -- İmza atılıyor -----------------------------------------------------
   Sahne görünür olunca iki imza sırayla çiziliyor, sonra öyle kalıyor.
   Sonsuz döngü değil: bir raporun altına imza bir kez atılır. */

.js-anim .doc-sign {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  transition: stroke-dashoffset 1100ms var(--ease-out);
  transition-delay: var(--step, 400ms);
}

/* Tetik `.reveal.is-in`: bu çizim panelde değil normal bir bölümde
   duruyor, dolayısıyla sahne sınıfı `.is-active` buraya hiç gelmiyor.
   Animasyon değil geçiş kullanılıyor — kardeşi `.draw-line` ile aynı
   kalıp, ayrıca duraklatma kuralı geçişlere dokunmadığı için bir kez
   çizilen imza ekran dışına çıkıp dönünce silinip yeniden çizilmiyor. */
.js-anim .reveal.is-in .doc-sign {
  stroke-dashoffset: 0;
}

/* -- Rapor kartı üzerinden geçen ışık ----------------------------------- */

.js-anim .doc-sheen {
  animation: doc-sheen 7s var(--ease-out) infinite;
}

@keyframes doc-sheen {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  64% {
    opacity: 0;
  }
  100% {
    transform: translateX(500px);
    opacity: 0;
  }
}

/* -- Sayfa üstü okuma göstergesi --------------------------------------- */

.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 101;
  block-size: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Süre verilmeyen bir animasyon desteklenmeyen tarayıcıda anında bitiş
   karesine atlayıp çubuğu dolu gösterir; bu yüzden koşul zorunlu. */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scroll-progress linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes scroll-progress {
  to {
    transform: scaleX(1);
  }
}

/* -- Ana sayfa panel göstergesi ---------------------------------------- */

.panel-nav {
  position: fixed;
  inset-inline-end: clamp(10px, 1.6vw, 26px);
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 2px;
  color: var(--text-tertiary);
}

@media (min-width: 1120px) {
  .panel-nav {
    display: flex;
  }
}

.panel-nav__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-block-size: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
}

.panel-nav__label {
  font-size: var(--text-caption);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.panel-nav:hover .panel-nav__label,
.panel-nav__link:focus-visible .panel-nav__label,
.panel-nav__link[aria-current="true"] .panel-nav__label {
  opacity: 1;
  transform: none;
}

.panel-nav__dot {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.panel-nav__link:hover .panel-nav__dot {
  opacity: 0.8;
}

.panel-nav__link[aria-current="true"] .panel-nav__dot {
  opacity: 1;
  transform: scale(1.5);
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  html.is-snap {
    scroll-snap-type: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Şeffaflığı azalt ayarı açıkken cam yüzeyleri opaklaştır */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-solid,
  .btn--glass,
  .btn--glass-dark {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.is-solid {
    background: var(--bg);
  }
}

/* Yüksek kontrast tercihi. Kontrastı sıcak hue'nun ÜZERİNDE artırıyoruz:
   ikincil metni koyulaştırıp kenarlıkları belirginleştiriyor, ama rengi
   nötr griye çevirmiyor. Aksi halde erişilebilirlik tercihi olan kullanıcı
   bambaşka bir marka görüyordu. */
@media (prefers-contrast: more) {
  :root {
    --text-secondary: light-dark(#33302a, #e4e0d6);
    --text-tertiary: light-dark(#453f36, #cfcabd);
    --border: light-dark(rgba(28, 27, 22, 0.42), rgba(244, 241, 232, 0.46));
    --border-strong: light-dark(
      rgba(28, 27, 22, 0.72),
      rgba(244, 241, 232, 0.72)
    );
    /* Vurgu da bir tık koyulaşıyor: pirinç, kağıt üzerinde daha kesin dursun */
    --accent: light-dark(#63481f, #dcc08a);
  }

  .section-deep {
    --text-secondary: light-dark(#2f2b20, #e6e2d8);
    --text-tertiary: light-dark(#413b2c, #d0cbbe);
    --border: light-dark(rgba(26, 25, 15, 0.44), rgba(246, 243, 234, 0.46));
    --accent: light-dark(#573d16, #e2c795);
  }
}

/* --------------------------------------------------------------------------
   13. Yardımcı sınıflar
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}
.text-secondary {
  color: var(--text-secondary);
}
.text-tertiary {
  color: var(--text-tertiary);
}
.full-bleed {
  grid-column: 1 / -1;
}

.mt-4 {
  margin-block-start: var(--space-4);
}
.mt-5 {
  margin-block-start: var(--space-5);
}
.mt-6 {
  margin-block-start: var(--space-6);
}
.mt-7 {
  margin-block-start: var(--space-7);
}
.mb-4 {
  margin-block-end: var(--space-4);
}
.mb-6 {
  margin-block-end: var(--space-6);
}

/* --------------------------------------------------------------------------
   WhatsApp: sağ alt sabit düğme + iletişim paneli
   Yeşil daire bilinçli bir istisna — WhatsApp logosu başka renkte
   tanınmıyor. Panel ise sitenin kağıt/mürekkep dilinde.
   -------------------------------------------------------------------------- */

.wa {
  position: fixed;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  inset-block-end: max(16px, env(safe-area-inset-bottom));
  z-index: 140;
}

.wa__scrim {
  position: fixed;
  inset: 0;
  z-index: 139;
  background: color-mix(in srgb, var(--text) 28%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.wa.is-open .wa__scrim {
  opacity: 1;
  pointer-events: auto;
}

.wa__launch {
  position: relative;
  z-index: 141;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(18, 18, 14, 0.22);
  transition: transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.wa__launch:hover {
  background: #1ebe57;
}

.wa__launch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wa.is-open .wa__launch {
  background: #128c7e;
}

.wa__launch svg {
  inline-size: 30px;
  block-size: 30px;
}

.wa__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: calc(56px + 12px);
  z-index: 141;
  display: none;
  inline-size: min(calc(100vw - 32px), 380px);
  max-block-size: min(78vh, 640px);
  overflow: auto;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-md);
}

.wa.is-open .wa__panel {
  display: grid;
  gap: var(--space-4);
}

.wa__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.wa__head h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.2;
}

.wa__close {
  flex: none;
}

.wa__panel .input[readonly] {
  color: var(--text-secondary);
  background: var(--bg-secondary);
  cursor: default;
}

.wa__panel .select:disabled {
  color: var(--text-secondary);
  background: var(--bg-secondary);
  cursor: not-allowed;
}

.wa__panel .form-grid {
  gap: var(--space-4);
}

.wa__panel .form-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.wa__panel .form-grid .span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 419px) {
  .wa__panel .form-grid--2 {
    grid-template-columns: 1fr;
  }
}

body.is-locked .wa {
  visibility: hidden;
}

@media print {
  .nav,
  .menu,
  .scroll-hint,
  .btn,
  .wa,
  .wa__scrim {
    display: none !important;
  }
  .panel {
    min-block-size: auto;
    page-break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   Panel varyantı: deney matrisi

   Zigzag kuralı üst üste en fazla iki "çizim + metin" bölümü kabul ediyor;
   Sondaj ve Jeofizik panelleri o ikisini kullanıyor. Laboratuvar paneli
   zaten tek bir fikir değil, gruplanabilir bir deney listesi taşıyor. Bu
   yüzden split yerine kümelenmiş matris olarak duruyor: aynı destede kalıp
   kompozisyonu değiştiriyoruz, araya yarım boy bir bölüm sokmuyoruz.

   Kart kullanılmıyor. Kümeleri saç teli çizgi ayırıyor; kutu içine alınmış
   üç eşit kart, kırmak istediğimiz kalıbın ta kendisi olurdu.
   -------------------------------------------------------------------------- */

.panel--matrix .panel__head {
  justify-items: start;
  text-align: start;
  max-inline-size: var(--container);
  inline-size: 100%;
}

/* Çizim burada yan sütun değil, arkada duran soluk bir doku. Matris tüm
   genişliği kullandığı için çizimin okunurluğu metnin önüne geçmemeli. */
.panel--matrix .art-side {
  inline-size: min(38%, 440px);
  opacity: 0.14;
}

.deney-matris {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  inline-size: 100%;
  margin-block-start: var(--space-2);
}

.deney-grup__ad {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.deney-grup__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* Standart ve süre teknik künye: mono yüz, sayı hizası tabakalı. */
.deney-grup__kunye {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

@media (min-width: 900px) {
  .deney-matris {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .deney-grup {
    padding-inline: var(--space-6);
  }
  .deney-grup:first-child {
    padding-inline-start: 0;
  }
  .deney-grup + .deney-grup {
    border-inline-start: 1px solid var(--border);
  }
}

/* Dar ekranda deney adları alt alta değil, virgülle akan tek blok. Beş
   satırlık üç küme paneli destenin ritminden 280px taşırıyordu; akan blok
   aynı bilgiyi üçte bir yükseklikte veriyor. Ayraç virgül olarak metne
   giriyor, ekran okuyucu da doğal bir liste duyuyor. */
@media (max-width: 899px) {
  .deney-matris {
    gap: var(--space-4);
  }
  .deney-grup__ad {
    margin-block-end: var(--space-1);
  }
  .deney-grup__liste {
    display: block;
  }
  .deney-grup__liste li {
    display: inline;
  }
  /* Virgul ::after ile geliyor: ::before kullaninca <li>ler arasindaki
     kaynak bosluğu virgulden ONCE dusuyor ve "ad , ad" gibi okunuyordu. */
  .deney-grup__liste li::after {
    content: ",";
  }
  .deney-grup__liste li:last-child::after {
    content: "";
  }
  .deney-grup__kunye {
    margin-block-start: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   Panel fotoğrafı

   Deste baştan tam ekran ve görsel odaklı kurulmuştu ama fotoğraf hiç
   konmamış, tüm görsel yükü elle çizilmiş SVG'ler taşıyordu. Fotoğraf
   katmanı `.panel__bg`'nin hemen ardından geliyor: ikisi de z-index -2,
   DOM'da sonra geldiği için gradyanın üstüne boyanıyor. Çizim (-1) hâlâ
   fotoğrafın üstünde duruyor; teknik şema gerçek sahanın üzerine düşen bir
   anotasyon gibi okunuyor, ki zemin etüt raporunun kendi dili de bu.
   -------------------------------------------------------------------------- */

.panel__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.panel__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Perde tek renkten değil `--bg` tokeninden türüyor, böylece açık temada
   parşömen, koyu temada mürekkep oluyor; iki tema için iki kural yazmıyoruz.
   Metin solda durduğu için perde solda opak, sağda fotoğrafı serbest bırakıyor. */
.panel__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Duraklar yuzde degil PIKSEL: metin sutunu --gutter (en fazla 40px) +
     560px = 600px genisliginde ve bu deger viewport ile degismiyor. Yuzdeye
     baglayinca 1080-1230px arasinda perde metnin sag kenarinda %61e dusuyor
     ve koyu temada kontrast AA altina iniyordu (olculen 3,53:1). 640px lik
     sabit durak metni her genislikte >=%90 perdenin altinda tutuyor. */
  background: linear-gradient(
    to right,
    var(--bg) 0px,
    color-mix(in srgb, var(--bg) 90%, transparent) 640px,
    color-mix(in srgb, var(--bg) 45%, transparent) 78%,
    color-mix(in srgb, var(--bg) 24%, transparent) 100%
  );
}

/* Matris panelinde metin tüm genişliği kullanıyor, yönlü perde işe yaramaz:
   yukarıdan aşağı zayıflayan düz perde. */
.panel--matrix .panel__photo::after {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 86%, transparent) 55%,
    color-mix(in srgb, var(--bg) 94%, transparent) 100%
  );
}

/* Fotoğraf gelen panellerde teknik çizim tamamen kaldırıldı. Anotasyon
   gibi durur diye yarı saydam bırakılmıştı ama fotoğrafın önünde okunmuyor,
   iki görsel katman birbirini kirletiyordu. Görsel yükü artık fotoğraf
   taşıyor; çizimler kendi alt sayfalarında tam opaklıkta duruyor. */
.panel--foto .art-side {
  display: none;
}

.panel--foto .topo {
  opacity: 0.35;
}

/* Dar ekranda `--split` çizimi kendi satırına geçiyor ve fotoğrafın önünde
   duruyor; orada perdeyi düzleştirip çizimi biraz daha geri çekiyoruz. */
@media (max-width: 1079px) {
  .panel__photo::after {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 90%, transparent) 0%,
      color-mix(in srgb, var(--bg) 80%, transparent) 50%,
      color-mix(in srgb, var(--bg) 92%, transparent) 100%
    );
  }
  /* Çizim gizlendi; sanat satırı boş kalmasın diye mutlak konuma dönüyor,
     yoksa grid'in 1fr satırını işgal edip içeriği ortadan ayırıyordu. */
  .panel--foto.panel--split .panel__art {
    position: absolute;
    padding-block: 0;
  }
  /* Çizim satırdan çıkınca üç satırlık şablonda ayak '1fr' satırına kayıp
     esniyordu (butonlar kare gibi uzuyordu). Fotoğraflı panelde şablon
     temel iki satıra dönüyor: içerik üstte, ayak altta. */
  .panel--foto.panel--split {
    grid-template-rows: 1fr auto;
  }
}

/* color-mix desteklemeyen tarayıcı: perde düz renge düşsün, metin her
   koşulda okunur kalsın. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .panel__photo::after {
    background: var(--bg);
    opacity: 0.86;
  }
}