/*
  EKON public site — elle yazılmış CSS. Framework yok (CLAUDE.md §13).
  Sıra: font → reset → temel tipografi → düzen → katlama motifi → bileşenler → bölümler.
*/

/* ==========================================================================
   1. Font'lar — self-host (§3.2). Dosyalar wwwroot/fonts/ içine konur.
   Dosyalar gelmeden de site doğru okunur: fallback yığını metrik olarak yakın seçildi.
   ========================================================================== */

@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}

@font-face {
  font-family: "Urbanist";
  src: url("/fonts/urbanist-variable-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /*
    Zemin rengi gövdede değil kökte durur: gövdenin arka planı tuvale
    yayılsaydı, ortam katmanı (§14) her şeyin arkasında kalıp hiç görünmezdi.
  */
  background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* Saydam: kökteki zemin ve onun üstündeki ortam katmanı görünsün. */
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-16);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

/* Erişilebilirlik: varsayılan outline kaldırılmaz, özelleştirilir (§9). */
:focus-visible {
  outline: 2px solid var(--focus-ring, var(--flame-fold));
  outline-offset: 3px;
  border-radius: 2px;
}

/*
  Ters bantlar odak halkasını kendi aksanlarıyla çizer. Gerekçe: --flame-fold
  açık yüzeyde 5.1:1 ama koyu bant zemininde 2.91:1'e düşüyor ve odak
  göstergesinin 3:1 eşiğini tutmuyor (§9). --band-accent her iki temada da
  bandın kendi zemininde 4.5:1'in üstünde kalır.

  Liste bandı boyayan bölümlerin tamamı (bkz. --band-surface / --header-surface
  kullanımları); .hero ve .closing zaten .on-dark taşıyor, yine de burada
  duruyorlar ki bir view sınıfı atlarsa odak halkası okunmaz kalmasın.
*/
.on-dark,
.site-header,
.hero,
.quote,
.closing,
.site-footer,
.consent {
  --focus-ring: var(--band-accent);
}

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

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: var(--z-skip);
  padding: var(--space-12) var(--space-16);
  /*
    Temadan bağımsız: her iki temada da beyaz içerik üzerine düşer ve tek işi
    görünmek. Bant rollerine bağlansaydı açık temada açık zemin üzerinde açık
    bir çip olurdu.
  */
  background: var(--ink-deep);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-14);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--duration-ui) var(--ease-fold);
}

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

/* ==========================================================================
   3. Tipografi
   ========================================================================== */

.display,
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  font-stretch: 112%;
  text-wrap: balance;
}

h1 {
  font-size: clamp(var(--text-36), 6.5vw, var(--text-88));
  line-height: var(--leading-tight);
  font-weight: 800;
}

h2 {
  font-size: clamp(var(--text-28), 4vw, var(--text-48));
}

h3 {
  font-size: clamp(var(--text-22), 2.2vw, var(--text-28));
  font-weight: 600;
}

p {
  max-width: min(var(--measure), 100%);
}

a {
  color: var(--ink);
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.22em;
  transition: color var(--duration-ui) var(--ease-fold),
    text-decoration-color var(--duration-ui) var(--ease-fold);
}

a:hover {
  color: var(--flame-fold);
  text-decoration-color: currentColor;
}

/* Eyebrow — sektörün kendi dili: mono (§3.2) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.eyebrow::before {
  content: "";
  inline-size: 1.5rem;
  block-size: 2px;
  background: var(--flame);
  flex: none;
}

.lede {
  font-size: clamp(var(--text-18), 2vw, var(--text-22));
  line-height: 1.5;
  color: var(--ink-soft);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-soft);
}

/* Başlıkta turuncu vurgu — geniş zemin değil, tek kelime (§3.1) */
.highlight {
  color: var(--flame-fold);
}

.on-dark .highlight {
  color: var(--band-accent);
}

/* ==========================================================================
   4. Düzen
   ========================================================================== */

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

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

.section--surface {
  background: var(--surface);
}

.section__head {
  display: grid;
  gap: var(--space-16);
  margin-bottom: var(--space-48);
  max-width: 46rem;
}

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

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

  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .grid--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-64);
    align-items: start;
  }
}

.stack {
  display: grid;
  gap: var(--space-16);
  justify-items: start;
}

/*
  justify-items: start, grid öğelerini max-content genişliğine açar.
  ch cinsinden bir max-width taşıyan metin öğeleri bu yüzden dar ekranlarda
  kapsayıcıdan taşıyordu. Bu kural taşmayı kaynağında keser; yeni bir öğe
  eklendiğinde de aynı hatayı tekrarlatmaz.
*/
.stack > *,
.hero__copy > *,
.quote__body > *,
.empty-state > * {
  max-inline-size: 100%;
}

.hairline {
  border: 0;
  border-top: var(--hairline-width) solid var(--hairline);
  margin: 0;
}

/* ==========================================================================
   5. Katlama motifi (§3.3) — sitenin hatırlanacak tek öğesi
   ========================================================================== */

/*
  Bölüm geçişi düz yatay çizgi değil, tek yönlü 45° kesim.
  Yön site genelinde hep aynı: sol alttan sağ üste.
*/
.fold-top {
  clip-path: polygon(0 var(--fold-depth), 100% 0, 100% 100%, 0 100%);
  padding-block-start: calc(var(--section-space) + var(--fold-depth));
  margin-block-start: calc(var(--fold-depth) * -1);
}

.fold-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold-depth)), 0 100%);
  padding-block-end: calc(var(--section-space) + var(--fold-depth));
}

/*
  İki ucundan da katlanan bölüm. Tek clip-path olduğu için iki sınıf birleşince
  biri diğerini ezerdi; her iki kenarı da taşıyan poligon burada kurulur.
  Dolgu tarafında birleştirmeye gerek yok — ayrı özellikler, ikisi de uygulanır.
*/
.fold-top.fold-bottom {
  clip-path: polygon(
    0 var(--fold-depth),
    100% 0,
    100% calc(100% - var(--fold-depth)),
    0 100%
  );
}

/* Ters bant zemini — rengi temadan gelir (bkz. _tokens.css) */
.on-dark {
  background: var(--band-surface);
  color: var(--band-ink);
}

.on-dark h1,
.on-dark h2,
.on-dark h3 {
  color: var(--band-ink);
}

.on-dark p,
.on-dark .lede {
  color: var(--band-ink-soft);
}

.on-dark .eyebrow,
.consent .eyebrow {
  color: var(--band-ink-soft);
}

.on-dark .eyebrow::before,
.consent .eyebrow::before {
  background: var(--band-accent);
}

.on-dark a {
  color: var(--band-ink);
}

.on-dark a:hover {
  color: var(--band-accent);
}

.on-dark .hairline {
  border-top-color: var(--band-hairline);
}

/*
  Katlama şeridi: açık yüz --flame, gölge yüz --flame-fold.
  Gradyan yalnızca bu iki ton arasında ve yalnızca bu motifte kullanılır (§3.1).
*/
.fold-rule {
  inline-size: 4rem;
  block-size: 4px;
  border: 0;
  background: linear-gradient(var(--fold-angle), var(--flame) 0 50%, var(--flame-fold) 50% 100%);
}

/* ==========================================================================
   6. Bileşenler
   ========================================================================== */

/* --- Buton ---
   Birincil butonun zemini gölge yüz (--flame-fold): beyaz metinle 5.55:1.
   Açık yüz (--flame) katlama üçgeni olarak köşede durur — logonun kendi mantığı.
*/
.btn {
  --btn-chamfer: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-32);
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-16);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(
    0 0,
    calc(100% - var(--btn-chamfer)) 0,
    100% var(--btn-chamfer),
    100% 100%,
    0 100%
  );
  transition: background-color var(--duration-ui) var(--ease-fold),
    color var(--duration-ui) var(--ease-fold);
}

.btn--primary {
  background: var(--flame-fold);
  color: var(--paper);
}

/*
  Kesilen köşenin altında kalan "açık yüz".

  Üçgen kesik kenarın İÇ tarafına yatar: polygon(0 0, 100% 100%, 0 100%).
  Dışa yatırılan bir üçgen (0 0, 100% 0, 100% 100%) tam olarak ebeveynin
  clip-path'inin kestiği alana denk gelir ve hiç boyanmaz. Katlanan bir köşede
  görünen yüz kesiğin dışı değil içidir; kesik köşeli her bileşen bu yönü
  kullanır.
*/
.btn--primary::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--btn-chamfer);
  block-size: var(--btn-chamfer);
  background: var(--flame);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

/* Gölge yüzün bir basamak altı: aynı hue ailesinde, beyaz metinle 6.46:1. */
.btn--primary:hover {
  background: #a14000;
  color: var(--paper);
}

.btn--primary:hover::after {
  background: var(--flame-fold);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

.on-dark .btn--ghost,
.consent .btn--ghost {
  color: var(--band-ink);
  /* Çerçeve saçaktan belirgin: buton kenarı ayırıcı çizgiden güçlü durmalı. */
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-edge);
}

.on-dark .btn--ghost:hover,
.consent .btn--ghost:hover {
  background: var(--band-btn-bg);
  color: var(--band-btn-ink);
}

/* --- Kart ---
   Chamfer hep aynı köşede: sağ üst (§3.3).
*/
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  background: var(--paper);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  transition: box-shadow var(--duration-ui) var(--ease-fold),
    transform var(--duration-ui) var(--ease-fold);
}

.section--surface .card {
  background: var(--paper);
}

/* Katlanmış köşenin gölge yüzü */
.card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.card:hover {
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
}

.card:hover::after,
.card:focus-within::after {
  background: var(--flame);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-22);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.25;
}

.card__text {
  color: var(--ink-soft);
  font-size: var(--text-16);
}

/* Kartın tamamını tıklanabilir yapan bağlantı; klavye odağı gerçek <a>'da kalır. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__media {
  margin: calc(var(--space-32) * -1) calc(var(--space-32) * -1) 0;
  background: var(--surface);
  /* Açılışta görsel 1.06'dan oturur (§13); çerçevenin dışına taşmasın. */
  overflow: hidden;
}

.card__media img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* --- Çalışma alanı kartı ---
   Kartın kendisi katlama motifinin küçük ölçeği: sağ üstte chamfer, arkada
   45°'lik açık/gölge yüz, altta açılan aksan şeridi (§3.3).
   Turuncu yalnızca aksan yüzeyinde; zemin --paper kalır (§3.1).
*/
.solution-grid {
  display: grid;
  gap: var(--space-24);
}

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

@media (min-width: 64rem) {
  .solution-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.solution-card {
  position: relative;
  /*
    isolation: katlama yüzü z-index: -1 ile metnin altında kalır ama kartın
    kendi bağlamını terk edip bölüm zemininin arkasına düşmez.
  */
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  padding-block-end: var(--space-24);
  background: var(--paper);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  /*
    Reveal (opacity/transform) uzun süreyi kullanır; hover'ın kaldırması
    ayrı bir özellik olan `translate` üzerinden gittiği için kısa kalır.
  */
  transition: opacity var(--duration-reveal) var(--ease-fold),
    transform var(--duration-reveal) var(--ease-fold),
    box-shadow var(--duration-ui) var(--ease-fold),
    translate var(--duration-ui) var(--ease-fold);
}

/* Tek eksende açılma: kart üst kenarından katlanarak yerine oturur (§3.3). */
.solution-card[data-reveal] {
  opacity: 0;
  transform: perspective(60rem) rotateX(-12deg) translateY(1.5rem);
  transform-origin: 50% 0;
}

.solution-card[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.no-js .solution-card[data-reveal] {
  opacity: 1;
  transform: none;
}

/* Katlanmış köşenin gölge yüzü — hover'da açık yüze döner. */
.solution-card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

/* Alt kenarda soldan açılan aksan şeridi. */
.solution-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--flame), var(--flame-fold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--duration-reveal) var(--ease-fold);
}

/*
  Arkadaki katlama yüzü. İşaretçi yatayda kaydıkça şerit onu izler
  (--fold-shift'i solutionCards.js yazar); JS yoksa ortada durur.
*/
.solution-card__fold {
  position: absolute;
  z-index: -1;
  inset-block: -40%;
  inset-inline-start: 50%;
  inline-size: 40%;
  translate: calc(-50% + var(--fold-shift, 0px)) 0;
  rotate: var(--fold-angle);
  background: linear-gradient(180deg, var(--flame), var(--flame-fold));
  opacity: 0;
  transition: opacity var(--duration-ui) var(--ease-fold),
    translate var(--duration-ui) var(--ease-fold);
}

.solution-card:hover,
.solution-card:focus-within {
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
}

.solution-card:hover::after,
.solution-card:focus-within::after {
  background: var(--flame);
}

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

.solution-card:hover .solution-card__fold,
.solution-card:focus-within .solution-card__fold {
  /* Metin kontrastını bozmayacak kadar düşük: gövde metni --ink-soft kalır. */
  opacity: 0.1;
}

@media (hover: hover) {
  .solution-card:hover {
    translate: 0 -4px;
  }
}

.solution-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-block-end: var(--space-8);
}

.solution-card__icon {
  display: inline-flex;
  color: var(--ink);
}

.solution-card__icon svg {
  inline-size: 2rem;
  block-size: 2rem;
}

/* Kart göründüğünde ikon çizgileri çizilir, aksan yüzü sonra oturur. */
html:not(.no-js) .solution-icon__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

html:not(.no-js) .solution-icon__accent {
  opacity: 0;
}

.solution-icon__accent {
  fill: var(--flame);
  stroke: none;
}

.solution-card.is-revealed .solution-icon__line {
  animation: solution-icon-draw 720ms var(--ease-fold) forwards;
}

.solution-card.is-revealed .solution-icon__accent {
  animation: solution-icon-face 320ms var(--ease-fold) 480ms forwards;
}

@keyframes solution-icon-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes solution-icon-face {
  to {
    opacity: 1;
  }
}

.solution-card__counter {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-soft);
  transition: color var(--duration-ui) var(--ease-fold);
}

.solution-card:hover .solution-card__counter {
  color: var(--flame-fold);
}

.solution-card__title {
  font-family: var(--font-display);
  font-size: var(--text-22);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.25;
}

/* Alt çizgi hazır durmaz, hover'da soldan çizilir. */
.solution-card__link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--flame), var(--flame-fold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--duration-ui) var(--ease-fold);
}

.solution-card:hover .solution-card__link,
.solution-card__link:focus-visible {
  background-size: 100% 2px;
}

/* Kartın tamamı tıklanabilir; klavye odağı gerçek <a>'da kalır. */
.solution-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.solution-card__text {
  color: var(--ink-soft);
  font-size: var(--text-16);
}

.solution-card__cue {
  margin-block-start: auto;
  padding-block-start: var(--space-24);
  display: inline-flex;
  color: var(--ink-soft);
  transition: color var(--duration-ui) var(--ease-fold),
    translate var(--duration-ui) var(--ease-fold);
}

.solution-card__cue svg {
  inline-size: 1.5rem;
  block-size: 0.75rem;
}

.solution-card:hover .solution-card__cue,
.solution-card:focus-within .solution-card__cue {
  color: var(--flame-fold);
  translate: var(--space-8) 0;
}

/* §3.3: hareket kapanır, katlama geometrisi yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  .solution-card[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .solution-card,
  .solution-card__fold,
  .solution-card__cue {
    transition: none;
  }

  .solution-card::before {
    transform: scaleX(1);
    transition: none;
  }

  .solution-card.is-revealed .solution-icon__line,
  .solution-card.is-revealed .solution-icon__accent {
    animation: none;
  }

  html:not(.no-js) .solution-icon__line {
    stroke-dashoffset: 0;
  }

  html:not(.no-js) .solution-icon__accent {
    opacity: 1;
  }
}

/* --- Etiket --- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-soft);
  padding: var(--space-4) var(--space-8);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
}

/* --- Ürün defteri (/urunler) ---

   Neden kart ızgarası değil: ürünlerin kapak görseli yok (§11 içerik taşıması
   sürüyor). Görselin yerini tutan .card burada ince bir kutuya çöküyor ve altı
   ürünü de aynı ağırlıkta gösteriyordu. Bu düzende ağırlığı ürün adının
   tipografisi taşır, görsel gerekmez.

   Liste ayrıca ikiye ayrılır (IsFeatured): kendi sürdürdüğümüz platform
   ürünleri tam genişlikte satır, kurum adına yürüyen sistemler alttaki raf.
   Ayrım gerçek bir bilgi; düz ızgara altısını da aynı şey sanıyordu.

   İmza: adın bittiği yerde 45° yükselip sağ kenara koşan katlanmış cetvel.
   Kırılma noktasını adın uzunluğu belirler — ölçü CSS'te sabitlenmez, flex
   artığı ne kalırsa cetvel odur. Cesaret burada harcanır; satırın geri kalanı
   saçak ve boşluktur (§3.3). Sıra numarası kullanılmaz: ürünler bir dizi
   değil, aralarında okunacak bir sıra yok.
*/
.product-group {
  display: grid;
  justify-items: start;
  gap: var(--space-12);
  margin-block-end: var(--space-48);
}

.product-group__title {
  font-size: clamp(var(--text-22), 2.4vw, var(--text-28));
  font-weight: 600;
}

.product-group__note {
  color: var(--ink-soft);
  font-size: var(--text-16);
}

.product-ledger {
  display: grid;
  gap: var(--space-16);
}

.product-row {
  position: relative;
  /* Hover zemini adın arkasına geçer ama bölüm zemininin altına düşmez. */
  isolation: isolate;
  display: grid;
  /* Üst başlık ada yakın dursun; gövdenin payı ayrıca verilir. */
  gap: var(--space-12);
  /*
    Zemin kabın kenarına kadar uzansın, içerik hizası bozulmasın: iç dolgu
    kadar dışarı çekilir. Dar ekranda --space-24 ile --gutter eşit (24px),
    bu yüzden zemin tam ekran kenarına oturur, taşma olmaz.
  */
  padding: var(--space-32) var(--space-24);
  margin-inline: calc(var(--space-24) * -1);
}

.product-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--surface);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  opacity: 0;
  transition: opacity var(--duration-ui) var(--ease-fold);
}

.product-row:hover::before,
.product-row:focus-within::before {
  opacity: 1;
}

.product-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-16);
}

/* Satırın kendi ızgara aralığı boşluğu veriyor; eyebrow'un payı düşer. */
.product-row > .eyebrow {
  margin-block-end: 0;
}

.product-row__name {
  /* Sayfadaki en büyük ikinci tip: h1'den sonra ürün adı gelir. */
  font-size: clamp(var(--text-28), 4.5vw, var(--text-48));
  font-weight: 700;
  line-height: 1;
  /* Ada ne gerekiyorsa o kadar; artan genişlik cetvele kalır. */
  flex: 0 1 auto;
  min-inline-size: 0;
}

.product-row__link {
  color: var(--ink);
  text-decoration: none;
}

/* Satırın tamamı tıklanabilir; klavye odağı gerçek <a>'da kalır. */
.product-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/*
  Katlanmış cetvel — ürün sayfalarının imzası.
  Şerit soldan gelir, --fold-rise kadar yol boyunca 45° yükselir, sonra sağ
  kenara düz koşar: logonun kendi geometrisi. Poligon bandın dışını dolaşır —
  önce üst kenar (sol alttan sağ üste), sonra alt kenar geri.

  Liste satırında ada bitişik bir flex öğesi, detay sayfasında başlığın altında
  tam genişlikte bir blok. Geometri tek yerde tanımlı, ölçüyü kullanan yer verir.
*/
.fold-line {
  --fold-rise: clamp(1.25rem, 2vw, 2rem);
  --fold-weight: 3px;
  /*
    Duruştaki turuncu pay: yalnızca katlamanın kendisini boyar, sonrası saçak
    kalır. Turuncu böylece zemin değil aksan olur (§3.1).
  */
  --fold-lead: calc(var(--fold-rise) * 1.9);

  display: block;
  block-size: var(--fold-rise);

  background-color: var(--hairline);
  background-image: linear-gradient(90deg, var(--flame), var(--flame-fold));
  background-repeat: no-repeat;
  background-size: var(--fold-lead) 100%;

  clip-path: polygon(
    0 calc(var(--fold-rise) - var(--fold-weight)),
    var(--fold-rise) 0,
    100% 0,
    100% var(--fold-weight),
    var(--fold-rise) var(--fold-weight),
    0 var(--fold-rise)
  );

  /* Beliren değil çekilen çizgi — sitenin şerit dili (§13). */
  transition: background-size var(--duration-draw) var(--ease-fold);
}

.product-row__fold {
  flex: 1 1 4rem;
  /* Adın alt uzantıları (g, y, ş) için pay: cetvel taban çizgisine oturur. */
  margin-block-end: 0.2em;
}

.product-row:hover .product-row__fold,
.product-row:focus-within .product-row__fold {
  background-size: 100% 100%;
}

.product-row__body {
  display: grid;
  gap: var(--space-24);
  margin-block-start: var(--space-12);
}

@media (min-width: 64rem) {
  .product-row__body {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-32);
    align-items: start;
  }

  /*
    Meta boşlukta yüzmesin: özet kısa olduğunda iki kolon arasında okunmayan
    bir aralık kalıyordu. Saçak rayı ikisini tek kayda bağlar.
  */
  .product-row__meta {
    padding-inline-start: var(--space-32);
    border-inline-start: var(--hairline-width) solid var(--hairline);
  }
}

.product-row__lead {
  display: grid;
  justify-items: start;
  gap: var(--space-16);
}

.product-row__lead > * {
  max-inline-size: 100%;
}

.product-row__text {
  color: var(--ink-soft);
  font-size: clamp(var(--text-16), 1.4vw, var(--text-18));
}

.product-row__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--duration-ui) var(--ease-fold);
}

.product-row__cue svg {
  inline-size: 1.5rem;
  block-size: 0.75rem;
  flex: none;
  transition: translate var(--duration-ui) var(--ease-fold);
}

.product-row:hover .product-row__cue,
.product-row:focus-within .product-row__cue {
  color: var(--flame-fold);
}

.product-row:hover .product-row__cue svg,
.product-row:focus-within .product-row__cue svg {
  translate: var(--space-8) 0;
}

.product-row__meta {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-12);
}

.product-row__meta-label {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/*
  Dış bağlantı satır örtüsünün (product-row__link::after) üstünde durur;
  aksi hâlde tıklama detay sayfasına giderdi.
*/
.product-row__live {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 var(--hairline);
  transition: color var(--duration-ui) var(--ease-fold),
    box-shadow var(--duration-ui) var(--ease-fold);
}

.product-row__live:hover {
  color: var(--flame-fold);
  box-shadow: inset 0 -1px 0 0 currentColor;
}

.product-row__live svg {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  flex: none;
}

/* --- Kurum için geliştirilenler ---
   Bilinçli olarak satırdan sessiz: bu kayıtların tanıtım metni müşteri onayına
   bağlı (§10.7). Tasarım elinde olmayan içeriği büyütmez. Dolgu ve çerçeve yok,
   yalnızca üstte saçak — imza cetveli buraya inmez, tek yerde kalır.
*/
.product-shelf {
  display: grid;
  column-gap: var(--space-32);
  /* Satır arası boşluk yok: saçaklar bitişince raf olarak okunur. */
  row-gap: 0;
}

@media (min-width: 48rem) {
  .product-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .product-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-block: var(--space-24);
  border-block-start: var(--hairline-width) solid var(--hairline);
  transition: border-color var(--duration-ui) var(--ease-fold);
}

.product-entry:hover,
.product-entry:focus-within {
  border-block-start-color: var(--flame-ember);
}

.product-entry__name {
  font-size: var(--text-22);
  font-weight: 600;
  line-height: 1.25;
}

/* Alt çizgi hazır durmaz, hover'da soldan çizilir (çözüm kartıyla aynı dil). */
.product-entry__link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--flame), var(--flame-fold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--duration-ui) var(--ease-fold);
}

.product-entry:hover .product-entry__link,
.product-entry__link:focus-visible {
  background-size: 100% 2px;
}

.product-entry__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.product-entry__text {
  color: var(--ink-soft);
  font-size: var(--text-16);
}

.product-entry__cue {
  margin-block-start: auto;
  padding-block-start: var(--space-16);
  display: inline-flex;
  color: var(--ink-soft);
  transition: color var(--duration-ui) var(--ease-fold),
    translate var(--duration-ui) var(--ease-fold);
}

.product-entry__cue svg {
  inline-size: 1.5rem;
  block-size: 0.75rem;
}

.product-entry:hover .product-entry__cue,
.product-entry:focus-within .product-entry__cue {
  color: var(--flame-fold);
  translate: var(--space-8) 0;
}

/* §3.3: hareket kapanır, katlama geometrisi yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  .product-row::before,
  .product-row__fold,
  .product-row__cue,
  .product-row__cue svg,
  .product-row__live,
  .product-entry,
  .product-entry__link,
  .product-entry__cue {
    transition: none;
  }
}

/* --- Ürün detayı (/urunler/{slug}) ---

   Sayfa liste satırının açılmış hâli: aynı katlanmış cetvel başlığın altında
   devam eder, tıklanan satırla varılan sayfa tek bir hareket gibi okunur.

   Eski düzende iki sorun vardı: hero iki kolonlu şablon cevabıydı ve ana görsel
   .card__media ile küçük bir kart gibi çerçeveleniyordu; teknoloji/çözüm alanı
   ise sayfanın dibinde, footer bileşeniyle (.site-footer__list) çizilmiş
   sahipsiz bir bölümdü. İkisi de künyeye taşındı: iddia üstte, kanıtı yanında.
*/
.product-hero {
  /* Alt dolgu görsel bandına bırakılır; başlık ile görsel arası kopmasın. */
  padding-block-end: var(--space-48);
}

.product-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-block-end: var(--space-32);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--duration-ui) var(--ease-fold),
    translate var(--duration-ui) var(--ease-fold);
}

.product-hero__back svg {
  inline-size: 1.5rem;
  block-size: 0.75rem;
  flex: none;
}

.product-hero__back:hover {
  color: var(--flame-fold);
  /* Geri bağlantısı geri gider: ok yönüyle aynı tarafa kayar. */
  translate: calc(var(--space-8) * -1) 0;
}

/*
  Izgara: cetvel tam genişlikte bir satır olsun diye. Metin öğeleri kendi
  ölçüsüyle sınırlanır, cetvel kabın sağ kenarına ulaşır — liste satırındaki
  davranışın aynısı.
*/
.product-hero__main {
  display: grid;
  justify-items: start;
  gap: var(--space-24);
}

.product-hero__main > .eyebrow {
  /* Aralığı ızgara veriyor; eyebrow'un kendi payı üstüne binmesin. */
  margin-block-end: 0;
}

.product-hero__title {
  /*
    Genel h1 ölçeği 88px'e kadar çıkıyor. Ürün başlıkları bir kelime değil bir
    tanım ("Algolab — algoritmik işlem platformu"); o ölçekte üç satıra taşıyor.
  */
  font-size: clamp(var(--text-36), 5.5vw, var(--text-64));
  max-inline-size: 52rem;
}

.product-hero__fold {
  /* Tek tam genişlik öğe: justify-items: start bunu daraltmasın. */
  justify-self: stretch;
}

/* Birincil eylem özete yapışmasın: ızgara aralığının üstüne bir basamak. */
.product-hero__main .hero__actions {
  margin-block-start: var(--space-16);
}

/*
  Okuma bölümü: başlık solda rayda, gövde kendi ölçüsünde sağda. Tek kolonda
  gövde 68 karakterde kesiliyor ve bölümün sağ yarısı boş kalıyordu.
*/
.prose-split {
  display: grid;
  gap: var(--space-32);
}

@media (min-width: 64rem) {
  .prose-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-64);
    align-items: start;
  }

  .prose-split .section__head {
    margin-bottom: 0;
  }
}

/* --- Künye rayı --- */
.spec {
  display: grid;
  gap: var(--space-24);
  margin-block-start: var(--space-48);
  padding-block-start: var(--space-24);
  border-block-start: var(--hairline-width) solid var(--hairline);
}

@media (min-width: 48rem) {
  /*
    Kolonlar sola toplanır ve bir üst sınırı vardır. 1fr ile esnetildiğinde iki
    künye alanı ekranın iki ucuna savruluyor, aralarındaki bağ kopuyordu.
  */
  .spec {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 18rem));
    justify-content: start;
    gap: var(--space-48);
  }
}

.spec__item {
  display: grid;
  align-content: start;
  gap: var(--space-12);
}

.spec__label {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* dd reset'te yok; varsayılan girintisi künyeyi hizadan düşürüyordu. */
.spec__value {
  margin: 0;
}

.spec__links {
  display: grid;
  justify-items: start;
  gap: var(--space-8);
  font-size: var(--text-16);
}

/* --- Ekran görüntüsü çerçevesi --- */
.shot {
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

.shot img {
  inline-size: 100%;
}

/*
  Ana görsel bandı. Alt boşluk burada durur: ardından gelen bölüm .fold-top ise
  kendi negatif üst payıyla yukarı çekiliyor ve boşluk olmadan görselin üstüne
  biniyordu.
*/
.shot--lead {
  margin-block-end: var(--section-space);
}

.shot-grid {
  display: grid;
  gap: var(--space-24);
}

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

/* --- Özellikler ---
   Kart ızgarası değil künye listesi: özellikler bir dizi değil, aynı ürünün
   yan yana duran yetenekleri. Saçakla ayrılmış iki kolon hem daha çok metin
   taşır hem tarama sırasında göz tek eksende ilerler.
*/
.feature-list {
  display: grid;
}

.feature {
  position: relative;
  display: grid;
  gap: var(--space-12);
  padding-block: var(--space-32);
  border-block-start: var(--hairline-width) solid var(--hairline);
}

/* Saçağın başındaki aksan işareti — satırın nerede başladığını gösterir. */
.feature::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--hairline-width) * -1);
  inset-inline-start: 0;
  inline-size: 2rem;
  block-size: 3px;
  background: linear-gradient(90deg, var(--flame), var(--flame-fold));
}

@media (min-width: 64rem) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-48);
    align-items: start;
  }
}

.feature__title {
  font-size: clamp(var(--text-18), 1.8vw, var(--text-22));
  font-weight: 600;
  line-height: 1.3;
}

.feature__text {
  color: var(--ink-soft);
  font-size: var(--text-16);
}

/* --- Boş durum: bir davettir (§3.6) --- */
.empty-state {
  padding: var(--space-48);
  background: var(--surface);
  display: grid;
  gap: var(--space-16);
  justify-items: start;
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

/* --- Marka işareti: katlanarak kurulan vektör (§3.3) --- */
/*
  İşaretin karakteri katlanmış şerit. Hareket de bu: her yüz kendi menteşesinde
  tek eksende açılır — sayfanın reveal dilinin (§13) marka üzerindeki karşılığı.
  Sıra şeridin gerçek sırasıdır, rastgele bir gecikme merdiveni değil.

  Katlanma sayfa açık kaldığı sürece belli aralıklarla tekrarlanır; aralığı ve
  duraklamayı brandMark.js yönetir (bkz. --mark-fold-interval). Hareket ~0.9 sn
  sürer, arası uzundur: işaret zamanın büyük bölümünde hareketsiz durur.

  transform-box: fill-box menteşeyi her yüzün kendi sol kenarına taşır: E'de
  omurga (x = 0), K'de burun (x = 278) ve katlama tepesi. scaleX olduğu için
  menteşenin yalnızca x'i belirleyicidir.
*/
/*
  Orta yüzün tonu: marka kilidinde E artık tek tonda düz — öne katlanan yüzün
  açık grisi kaldırıldı. İşaret bunu izler, ama tam eşitlemez: yüzler birebir aynı
  renk olsaydı katlanma hareketi (aşağıdaki mark-unfold) görünmez olurdu, yani
  §3.3'ün imza motifi işaretin üzerinde okunmazdı. Bir basamak — OKLCH açıklıkta
  0.038 — bırakıldı: hero boyunda katlanmış bir yüz olarak okunuyor, header
  boyunda görünmüyor, yani işaret küçükken tek parça duruyor. Daha geniş
  basamaklar (0.066 ve üstü) orta yüzü ayrı bir gri gibi gösteriyordu.
  Basamak iki temada da aynı büyüklükte, yalnızca yönü değişir (koyu zeminde
  yüzeyler terslendiği için aşağı doğru).
*/
.brand-mark {
  --mark-back: var(--ink);
  --mark-front: color-mix(in oklab, var(--ink) 94%, var(--paper));
  --mark-flame: var(--flame);
  --mark-fold: var(--flame-fold);

  display: block;
}

/*
  Koyu zeminde gri yüzler, raster logonun "-light" varyantıyla aynı dönüşümden
  geçer (tools/brand-assets.ps1: 255 − 0.78 × parlaklık). Aynı ekranda header'da
  PNG, hero'da SVG duruyor; ton farkı yan yana görünürdü. Turuncu korunur (§3.1).
*/
.brand-mark--on-dark {
  --mark-back: var(--band-mark-back);
  /*
    Basamak her zaman bandın kendi zeminine doğru atılır. Sabit bir yön
    (ör. hep --ink-deep'e doğru) yalnızca tek temada doğru olurdu: koyu temada
    işaret açık, zemin koyudur; açık temada ikisi de terslenir. --band-surface
    her iki durumda da doğru tarafı gösterir, basamağın büyüklüğü aynı kalır.
  */
  --mark-front: color-mix(in oklab, var(--band-mark-back) 94%, var(--band-surface));
}

.brand-mark__face--back {
  fill: var(--mark-back);
}

.brand-mark__face--front {
  fill: var(--mark-front);
}

.brand-mark__face--flame {
  fill: var(--mark-flame);
}

/*
  Gölge yüzün dolgusu burada değil, işaretin kendi satır içi gradyanında
  (bkz. _BrandMark.cshtml). Buraya bir `fill` yazılamaz: CSS bildirimi SVG sunum
  niteliğini ezer, yani `fill="url(#...)"` hiç uygulanmaz ve yüz yine düz kalırdı.
  Renk yine de CSS'ten gelir — aşağıdaki duraklar üzerinden.
*/

/*
  Gradyan durakları diğer yüzler gibi CSS'ten renklenir, böylece koyu bant
  varyantı (.brand-mark--on-dark) turuncuyu olduğu gibi koruyup gri yüzleri
  çevirebiliyor — stop-color'ı SVG niteliğine gömseydik tema dışarıda kalırdı.
*/
.brand-mark__stop--fold {
  stop-color: var(--mark-fold);
}

.brand-mark__stop--flame {
  stop-color: var(--mark-flame);
}

/*
  Hareket varsayılan durum değil: işaret her zaman tam geometrisiyle çizilir,
  katlanma yalnızca brandMark.js sınıfı taktığında olur. JS yoksa ya da modül
  hata alırsa logo eksik değil, yalnızca hareketsizdir.
*/
.brand-mark.is-folding .brand-mark__face {
  transform-box: fill-box;
  transform-origin: left center;
  animation: mark-unfold var(--duration-mark-fold) var(--ease-fold) both;
}

/* Sıra şeridin gerçek sırası; gecikmeler döngünün her turunda korunur. */
.brand-mark.is-folding .brand-mark__face--e-front { animation-delay: 90ms; }
.brand-mark.is-folding .brand-mark__face--e-bottom { animation-delay: 180ms; }
.brand-mark.is-folding .brand-mark__face--k-lit { animation-delay: 300ms; }
.brand-mark.is-folding .brand-mark__face--k-fold { animation-delay: 390ms; }

@keyframes mark-unfold {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/*
  §3.3: hareket kapanır, katlama geometrisi olduğu gibi kalır. brandMark.js bu
  durumda sınıfı hiç takmıyor; kural yine de duruyor ki tercih sayfa açıkken
  değişirse (işletim sistemi ayarı) işaret anında donsun.
*/
@media (prefers-reduced-motion: reduce) {
  .brand-mark.is-folding .brand-mark__face {
    animation: none;
    transform: none;
  }
}

/*
  Yatay kilit: vektör işaret + raster kelime markası. Oranlar üretilmiş kilitten
  ölçüldü (_BrandLockup.cshtml). Yükseklik çağıran sınıftan gelir; genişlik
  aspect-ratio'dan türer, bu yüzden kilidin kendi ölçüsü yoktur.
*/
.brand-lockup {
  position: relative;
  display: block;
  aspect-ratio: 2.7203;
}

.brand-lockup__mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 100%;
  inline-size: 34.09%;
}

.brand-lockup__word {
  position: absolute;
  inset-block-start: 21.22%;
  inset-inline-start: 38.09%;
  inline-size: 61.91%;
  block-size: auto;
}

/*
  Bant üstündeki kilit her iki kelime markası varyantını da taşır; tema
  hangisinin çizileceğini seçer. Raster olduğu için renklendirme CSS'ten
  yapılamıyor (bkz. _BrandLockup.cshtml).
*/
:root:not([data-theme="light"]) .brand-lockup__word--for-light,
:root[data-theme="light"] .brand-lockup__word--for-dark {
  display: none;
}

/* ==========================================================================
   7. Başlık ve gezinme
   ========================================================================== */

/*
  Header hero ile kesintisiz devam eder, iç sayfalarda içeriğe karşı sabit bir
  çapa olur. Koyu temada hero ile aynı zemini paylaşır; açık temada --paper'a
  çıkar (--header-surface) ki beyaz içerik akarken sınırı saçak çizgisi versin.
*/
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--header-surface);
  color: var(--band-ink);
  border-block-end: var(--hairline-width) solid var(--band-hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-block-size: 4.5rem;
}

/*
  Kaydırma ilerlemesi ve yoğunlaşma — ikisi de kaydırma zaman çizelgesine
  bağlı, JS yok. Ana iş parçacığına scroll dinleyicisi eklenmez.

  Yükseklik hiç değişmiyor: sticky başlığın yüksekliği kaydırma sırasında
  değişirse belge boyu değişir ve sayfa altındaki içerik zıplar. Değişen
  yalnızca boyama — işaretin ölçeği ve alttaki saç teli.
*/
@supports (animation-timeline: scroll(root block)) {
  .site-header::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(
      to right,
      var(--flame) 0%,
      var(--flame-fold) 100%
    );
    transform: scaleX(0);
    transform-origin: left center;
    animation: header-progress linear both;
    animation-timeline: scroll(root block);
  }

  .brand__logo {
    transform-origin: left center;
    animation: header-condense linear both;
    animation-timeline: scroll(root block);
    /* Yalnızca ilk ekranın üçte birinde olup biter, sonra sabit kalır. */
    animation-range: 0 220px;
  }

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

  @keyframes header-condense {
    to {
      transform: scale(0.88);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::after {
    display: none;
  }

  .brand__logo {
    animation: none;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}

/*
  Kilit 32px'in altında "YAZILIM" satırı okunmaz hale geliyor;
  header yüksekliği buna göre 34/40px'te tutuluyor.
*/
.brand__logo {
  block-size: 2.125rem;
  inline-size: auto;
}

@media (min-width: 64rem) {
  .brand__logo {
    block-size: 2.5rem;
  }
}

.nav {
  display: none;
}

@media (min-width: 64rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-24);
  }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-8);
  font-size: var(--text-14);
  font-weight: 500;
  text-decoration: none;
  color: var(--band-ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--duration-ui) var(--ease-fold);
}

.nav__link:hover {
  color: var(--band-ink);
}

/* Açılır menü göstergesi — emoji kullanılmaz (§3.5) */
.nav__caret {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  flex: none;
  transition: transform var(--duration-ui) var(--ease-fold);
}

.nav__link[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

/* Aktif durum katlama şeridiyle işaretlenir */
.nav__link[aria-current="page"],
.nav__link[aria-expanded="true"] {
  color: var(--band-ink);
}

.nav__link[aria-current="page"]::after,
.nav__link[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  inset-block-end: -0.35rem;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(var(--fold-angle), var(--flame) 0 50%, var(--flame-fold) 50% 100%);
}

/* --- Mega menü (§3.5) --- */
.mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--z-menu);
  background: var(--paper);
  color: var(--ink);
  border-block-start: 2px solid var(--flame);
  border-block-end: var(--hairline-width) solid var(--hairline);
  box-shadow: 0 24px 48px -32px rgb(30 33 37 / 0.45);
}

.mega[hidden] {
  display: none;
}

/*
  Panel açılırken katlanarak iner: üst kenarındaki turuncu şerit sabit
  kalır, gövde onun altından çıkar. Kapanış animasyonu yok — menü tek
  karede gider, bekleme hissi vermez.
*/
.mega:not([hidden]) {
  animation: mega-open var(--duration-panel) var(--ease-fold) both;
  transform-origin: top center;
}

@keyframes mega-open {
  from {
    opacity: 0;
    transform: translate3d(0, -0.5rem, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega:not([hidden]) {
    animation: none;
  }
}

.mega__inner {
  display: grid;
  gap: var(--space-32);
  padding-block: var(--space-48);
}

@media (min-width: 64rem) {
  .mega__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mega__group-title {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-16);
}

.mega__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
  Panelde yalnızca ad var: açıklama satırı menüyü ekran boyu bir metin
  bloğuna çeviriyordu, kalem listesi olarak kalması okunurluğu artırıyor.
*/
.mega__link {
  display: block;
  text-decoration: none;
  padding: var(--space-8);
  margin-inline: calc(var(--space-8) * -1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-16);
}

.mega__link:hover {
  background: var(--surface);
}

/* --- Mobil menü --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: transparent;
  color: var(--band-ink);
  border: var(--hairline-width) solid var(--band-edge-soft);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  cursor: pointer;
}

@media (min-width: 64rem) {
  .nav-toggle {
    display: none;
  }
}

.mobile-nav {
  border-block-start: var(--hairline-width) solid var(--band-hairline);
  padding-block: var(--space-24);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav__link {
  display: block;
  padding: var(--space-12) 0;
  font-family: var(--font-display);
  font-size: var(--text-18);
  font-weight: 600;
  text-decoration: none;
  color: var(--band-ink);
  border-block-end: var(--hairline-width) solid var(--band-hairline);
}

.mobile-nav__link:hover {
  color: var(--band-accent);
}

/*
  --- Dil değiştirici ---
  Tek sütun: iki dil kodu yan yana durmaz, yalnızca geçilecek dil gösterilir.
  Görünen metin dil kodudur; eylemi erişilebilir ad (aria-label) söyler.

  Kutu çizgisi yerine hafif bir yüzey: koyu başlıkta 1px beyaz çerçeve, gezinme
  bağlantılarından daha yüksek kontrastta duruyor ve asıl menüden önce göze
  çarpıyordu. Yüzey + sağ üstte chamfer, öğeyi kartlarla ve butonla aynı
  geometriye bağlar (§3.3); turuncu yalnızca katlanmış köşede, hover'da belirir.
*/
.lang-switch,
.theme-toggle {
  --lang-chamfer: 0.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  font-family: var(--font-display);
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--band-ink-soft);
  background: var(--band-veil-1);
  clip-path: polygon(
    0 0,
    calc(100% - var(--lang-chamfer)) 0,
    100% var(--lang-chamfer),
    100% 100%,
    0 100%
  );
  transition:
    color var(--duration-ui) var(--ease-fold),
    background-color var(--duration-ui) var(--ease-fold);
}

/* Kesilen köşenin gölge yüzü; hover'da açık yüze (--flame) döner. */
.lang-switch::after,
.theme-toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--lang-chamfer);
  block-size: var(--lang-chamfer);
  background: var(--band-veil-3);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.lang-switch:hover,
.theme-toggle:hover {
  color: var(--band-ink);
  background: var(--band-veil-2);
}

.lang-switch:hover::after,
.theme-toggle:hover::after {
  background: var(--flame);
}

/*
  Odak halkası içeri çizilir: clip-path dış hatları da kestiği için pozitif
  offset'li outline görünmez kalırdı (§9 klavye odağı).
*/
.lang-switch:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--band-accent);
  outline-offset: -2px;
  color: var(--band-ink);
}

.lang-switch__glyph,
.theme-toggle__glyph {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  flex: none;
  opacity: 0.75;
}

.lang-switch:hover .lang-switch__glyph,
.lang-switch:focus-visible .lang-switch__glyph,
.theme-toggle:hover .theme-toggle__glyph,
.theme-toggle:focus-visible .theme-toggle__glyph {
  opacity: 1;
}

/* Son harfin harf aralığı sağ boşluğa ekleniyordu; optik olarak geri alınır. */
.lang-switch__code {
  margin-inline-end: calc(var(--tracking-mono) * -1);
}

/* Mobil menüde bağlantı listesinden ayrılır ve dokunma hedefi büyür. */
.mobile-nav .lang-switch,
.mobile-nav .theme-toggle {
  margin-block-start: var(--space-24);
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-14);
}

/*
  --- Tema anahtarı ---
  Güneş/ay yerine katlama motifi (§3.3): kare, 45°'de ikiye bölünmüş, bir yüzü
  dolu. Yüz açık temada ters döner — durum ikonun kendi geometrisinden okunur.
  Kutu dili dil değiştiriciyle ortak; ikisi başlıkta yan yana duruyor.

  Erişilebilir ad iki gizli etiketten gelir ve hangisinin görüneceğine CSS karar
  verir. Bilinçli: ad JS ile yazılsaydı modül yüklenene kadar yanlış eylemi
  söylerdi (theme-init.js gövde ayrıştırılmadan çalışır, düğme daha ortada
  yoktur). display:none olan etiket erişilebilirlik ağacından da düşer.
*/
.theme-toggle {
  border: 0;
  cursor: pointer;
}

.theme-toggle__glyph {
  transition: transform var(--duration-ui) var(--ease-fold);
}

:root[data-theme="light"] .theme-toggle__glyph {
  transform: rotate(180deg);
}

:root:not([data-theme="light"]) .theme-toggle__say--dark {
  display: none;
}

:root[data-theme="light"] .theme-toggle__say--light {
  display: none;
}

/* JS yoksa düğme iş görmez; yer kaplamasın (§9 aşamalı geliştirme). */
.no-js .theme-toggle {
  display: none;
}

/* ==========================================================================
   8. Hero (§3.4)
   Şablon cevabı yok: büyük sayı, sahte grafik, dekoratif gradyan kullanılmaz.
   Arka plan, katlama motifinden türeyen düşük kontrastlı açılı şeritler.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--band-surface);
  color: var(--band-ink);
  padding-block: clamp(3.5rem, 9vw, 7rem);
  isolation: isolate;
}

/*
  Hero arka plan görseli: panelden yüklendiğinde katlama dokusunun da altında durur.
  Opaklık düşük tutulur — bant koyu kalmalı ki başlık ve lede kontrast eşiğini tutsun (§9).
  Görsel yüklenmemişse bu katman hiç çizilmez, geometri tek başına kalır (§3.4).
*/
.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.26;
  pointer-events: none;
}

.hero__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Kayan katmanlar kutunun dışına taşmaz; maske kendi kutusunda kalır. */
  overflow: hidden;
  /* Şeritler kenarlara doğru söner; metin alanı temiz kalır. */
  mask-image: linear-gradient(115deg, transparent 4%, #000 38%, #000 76%, transparent 98%);
  pointer-events: none;
}

/*
  Doku tek yüzeyde değil iki katmanda: ince örgü ve turuncu şerit kendi
  temposunda kayar. Aradaki hız farkı derinlik verir — tek katmanda desen
  blok halinde kayar ve arka plan değil, kayan bir tabaka gibi okunur.

  İnce şerit dokusunun alfası temayla birlikte döner (--band-weave); turuncu
  şerit iki temada da aynı kalır, çünkü hem koyu hem açık zeminde
  görünürlüğün eşiğinde duracak şekilde seçilmişti.
*/
.hero__field::before,
.hero__field::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  /* Katman kayma yolu kadar geniş: sola süzülürken sağ kenarda boşluk açılmaz. */
  inline-size: calc(100% + var(--field-shift));
  animation: field-drift var(--field-duration) linear infinite;
  will-change: transform;
}

.hero__field::before {
  --field-shift: var(--field-weave-shift);
  --field-duration: var(--duration-field-weave);
  background-image: repeating-linear-gradient(
    var(--fold-angle),
    var(--band-weave) 0 1px,
    transparent 1px 14px
  );
}

.hero__field::after {
  --field-shift: var(--field-band-shift);
  --field-duration: var(--duration-field-band);
  background-image: repeating-linear-gradient(
    var(--fold-angle),
    rgb(253 107 1 / 0.16) 0 2px,
    transparent 2px 132px
  );
}

/*
  Bant dokularının ortak sürüklenmesi (hero ve kapanış). Yol, desenin yatay
  periyodunun tam katı olduğu için bitiş karesi başlangıçla çakışır; döngü
  başa sararken sıçrama görünmez. Yalnızca transform değişir — iş birleştirici
  katmanda kalır, her karede yeniden boyama olmaz.
*/
@keyframes field-drift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-1 * var(--field-shift)), 0, 0);
  }
}

/* §3.3: hareket kapalıyken katlama geometrisi yerinde durur, yalnızca akış biter. */
@media (prefers-reduced-motion: reduce) {
  .hero__field::before,
  .hero__field::after {
    animation: none;
    will-change: auto;
  }
}

/* İki kolon: solda tez, sağda katlama geometrisi. */
.hero__inner {
  display: grid;
  gap: var(--space-48);
  align-items: center;
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-64);
  }
}

.hero__copy {
  display: grid;
  gap: var(--space-24);
  justify-items: start;
  max-width: 36rem;
}

/*
  Hero girişi: satırlar sırayla yerine oturur. Kaydırmaya bağlı değil,
  sayfanın kendi açılışına ait — bu yüzden JS ve IntersectionObserver
  devrede değil, ilk boyada başlar.

  Başlık özel: yalnızca konum değişir, saydamlık değişmez. Gerekçe LCP —
  opacity: 0 ile başlayan bir öğe Chrome'da "boyandı" sayılmaz ve sayfanın
  en büyük içerik öğesi olan h1 açılma süresi kadar geç ölçülür (§9).
*/
.hero__copy > * {
  animation: hero-line-in 720ms var(--ease-fold) backwards;
}

.hero__copy > .hero__title {
  animation-name: hero-title-in;
}

.hero__copy > *:nth-child(2) {
  animation-delay: 70ms;
}

.hero__copy > *:nth-child(3) {
  animation-delay: 150ms;
}

.hero__copy > *:nth-child(4) {
  animation-delay: 230ms;
}

.hero__copy > *:nth-child(n + 5) {
  animation-delay: 310ms;
}

@keyframes hero-line-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
  }
}

@keyframes hero-title-in {
  from {
    transform: translate3d(0, 0.75rem, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy > * {
    animation: none;
  }
}

/*
  Hero başlığı genel h1'den bir kademe küçük: 88px'lik üst sınır geniş
  ekranda iki kolonlu hero'da sağdaki yörüngeyi eziyordu. Üst sınır 64px,
  eğim 5vw — 1280px'te tam 64'e oturur, altında ölçekle iner.
*/
.hero__title {
  margin: 0;
  font-size: clamp(var(--text-36), 5vw, var(--text-64));
}

/*
  Dönen vurgu (heroRotator.js). İfade her zaman tek satır: nowrap sarmayı
  kapatır, genişlik en uzun ifadeye göre rezerve edilir (yoksa her geçişte
  satır sonu kayar) ve satır sığmıyorsa punto --rotate-fit oranıyla küçülür.
  Oran JS'te ölçülür, tüm ifadeler için ortaktır — kelime değişirken punto
  oynamaz, dar ekranda yatay taşma olmaz.

  Sınıf yalnızca JS döngüyü kurunca eklenir; hareket azaltılmışsa ya da JS
  yoksa vurgu normal satır içi metin olarak kalır.
*/
.hero__title .highlight.is-rotating {
  display: inline-block;
  white-space: nowrap;
  min-width: var(--rotate-width, 0px);
  font-size: calc(1em * var(--rotate-fit, 1));
  will-change: contents;
}

/*
  Ton basamakları: her ifade sıradaki tonu alır. Dördü de --flame ailesinin aynı
  hue'sundan (45.3°), ama hiçbiri ham marka rengi değil — merdiven bandın kendi
  iki aksanı arasına kuruluyor. Gerekçe: ham --flame açık bantta 2.64:1,
  ham --flame-fold koyu bantta 2.91:1 kalıyor; ikisi de tek bir temada §9'un
  büyük metin için istediği 3:1'i tutmuyor. Uçlar tema ile döndüğü için
  ara basamaklar da her iki temada uçların arasında kalır:
  koyu bantta 5.60:1 → 10.6:1, açık bantta 5.08:1 → 3.86:1.
  Renk geçiş süresi karışma süresiyle aynı: renk de harflerle birlikte akar.
*/
.hero__title .highlight.is-rotating {
  transition: color 640ms ease;
}

.hero__title .highlight[data-tone="1"] {
  color: var(--band-accent);
}

.hero__title .highlight[data-tone="2"] {
  color: color-mix(in oklab, var(--band-accent) 67%, var(--band-accent-soft));
}

.hero__title .highlight[data-tone="3"] {
  color: color-mix(in oklab, var(--band-accent) 33%, var(--band-accent-soft));
}

.hero__title .highlight[data-tone="4"] {
  color: var(--band-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .highlight.is-rotating {
    transition: none;
  }
}

.hero .lede {
  color: var(--band-ink-soft);
}

.hero .eyebrow {
  color: var(--band-ink-soft);
  margin: 0;
}

.hero .eyebrow::before {
  background: var(--flame);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-block-start: var(--space-8);
}

/* Hero altındaki güven satırı — rozet kolajı değil, düz bir cümle (§3.5) */
.hero__note {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-block-start: var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  color: var(--band-ink-soft);
}

/* --- Sağ kolon: teknoloji yörüngesi ---
   Merkezde marka işareti, çevresinde kullandığımız yığın. Dar ekranda
   gizlenir: hero'nun ilk ekranda yapacak tek işi başlık ve CTA (§9, LCP).
*/
.hero__figure {
  position: relative;
  display: none;
}

@media (min-width: 48rem) {
  .hero__figure {
    display: block;
  }
}

/*
  Teknoloji yörüngesi — düz eşmerkezli halkalar değil, eğik bir yörünge
  düzlemi. Gövdeler gerçekten çekirdeğin arkasından geçer: derinlik
  perspektiften gelir, boyanmış gölgeden değil.

    .orbit          3B sahne (perspective + preserve-3d)
    .orbit__core    merkezdeki yıldız — eğilmez, z = 0
    .orbit__plane   eğik düzlem, kendi hızıyla döner
    .orbit__path    yörünge izi
    .orbit__node    düzlem üzerindeki faz açısı
    .orbit__body    düzlemin eğimini ve dönüşünü geri alır, kameraya bakar
*/
.orbit {
  position: relative;
  /*
    Sistem kolonundan taşacak kadar geniş; negatif kenar boşluğu ortalar
    (`margin-inline: auto` taşan blokta sağa kaçırırdı). Hero `overflow:
    hidden` olduğu için taşma sayfayı yatay kaydırmaz.
  */
  --orbit-size: min(108%, 32rem);
  inline-size: var(--orbit-size);
  margin-inline: calc((100% - var(--orbit-size)) / 2);
  /* Sistem yatık olduğu için kutu kareden alçak: üstte altta boşluk kalmaz. */
  aspect-ratio: 1 / 0.88;

  /* Eğimin kosinüsü yörüngenin basıklığını verir (43° ≈ 0.73). */
  --tilt: 43deg;
  --planet: 3.25rem;

  /* İçten dışa yavaşlar; derinlik hissi buradan gelir. */
  --dur-1: 42s;
  --dur-2: 64s;
  --dur-3: 92s;

  perspective: 1150px;
  /*
    İmlecin sisteme dokunduğu dört değişken. Hepsi orbit.js tarafından
    yumuşatılarak sürülür; JS yoksa sistem tam karşıdan, kendi temposunda döner.

      --lean-x/y             kaçış noktası (bakış yönü)
      --turn-x/y + --turn-a  sistemin kameraya göre çevrilmesi, eksen + açı
      --drift-x/y            çekirdeğin ters yöne kayması (yakın cisim paralaksı)

    Çevirme tek bir eksen–açı dönüşüdür: eksenin x bileşeni imlecin dikey,
    y bileşeni yatay konumundan gelir. Böylece tersi de tek bir işlemdir
    (aynı eksen, negatif açı) ve gövdeler tam olarak geri döndürülebilir.

    Yumuşatma JS'te olduğu için burada `transition` yok: ikisi üst üste
    binseydi imleç ile sistem arasında görünür bir gecikme kalırdı.
  */
  --turn-x: 0;
  --turn-y: 0;
  --turn-a: 0deg;
  --drift-x: 0px;
  --drift-y: 0px;
  perspective-origin: calc(50% + var(--lean-x, 0px)) calc(50% + var(--lean-y, 0px));
  transform-style: preserve-3d;
}

@media (min-width: 64rem) {
  .orbit {
    --orbit-size: min(116%, 40rem);
    --planet: 3.75rem;
  }
}

.orbit__core,
.orbit__plane {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  aspect-ratio: 1;
}

/* --- Çekirdek: yıldız --- */
.orbit__core {
  inline-size: 23%;
  display: grid;
  place-items: center;
  /* Çekirdek imlecin tersine kayar: yakın cisim, arkadaki yörüngelerden ayrışır. */
  transform: translate(calc(-50% + var(--drift-x)), calc(-50% + var(--drift-y)));
}

.orbit__corona {
  position: absolute;
  inset: -64%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(253 107 1 / 0.38) 0%,
    rgb(253 107 1 / 0.14) 40%,
    rgb(253 107 1 / 0.03) 62%,
    transparent 74%
  );
  animation: orbit-breathe 7s var(--ease-fold) infinite alternate;
  pointer-events: none;
}

/*
  Çekirdek küresel bir gövde: ışık sol üstten gelir, sağ alt kenar gölgede
  kalır. Yüzey gradyanı marka turuncusu değil nötr antrasit — turuncu yalnızca
  kenar ışığında (§3.1).
*/
.orbit__plate {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 28%,
    #333941 0%,
    #23272c 44%,
    #15171a 100%
  );
  box-shadow:
    0 20px 48px rgb(0 0 0 / 0.68),
    inset 0 2px 2px rgb(255 255 255 / 0.10),
    inset 0 -16px 26px rgb(0 0 0 / 0.55),
    0 0 34px rgb(253 107 1 / 0.20);
}

/*
  Gündüz–gece sınırı: kürenin aydınlık yüzünü kesen turuncu kenar ışığı.
  Katlama motifinin küre üzerindeki karşılığı — açık yüz --flame, sönerken
  --flame-fold (§3.3).
*/
.orbit__plate::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(
    from 196deg,
    transparent 0 4%,
    rgb(196 49 0 / 0.5) 12%,
    var(--flame) 24%,
    var(--band-accent) 30%,
    var(--flame) 36%,
    rgb(196 49 0 / 0.5) 46%,
    transparent 56% 100%
  );
  mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  pointer-events: none;
}

/*
  Küre iki temada da koyu kalır (kendi malzemesi var, bant değil); üstündeki
  işaret bu yüzden bant rollerini izlemez, koyu yüzey rollerine sabitlenir.
  İzleseydi açık temada koyu küre üzerinde koyu bir işaret kalırdı.
*/
.orbit__mark {
  position: relative;
  block-size: 44%;
  inline-size: auto;
}

.orbit__mark.brand-mark--on-dark {
  --mark-back: var(--on-deep-back);
  /*
    Orta yüzün basamağı işaretin geri kalanıyla aynı büyüklükte tutulur. Burada
    yön sabit (küre her iki temada da koyu), o yüzden bant değil --ink-deep
    hedeflenir. --on-deep-front kullanılmıyor: o, bant üstündeki gövde metni için
    ayarlanmış daha geniş bir basamak ve işarette ayrı bir gri gibi okunuyordu.
  */
  --mark-front: color-mix(in oklab, var(--on-deep-back) 94%, var(--ink-deep));
}

/* --- Yörünge düzlemleri --- */
/*
  Ortalama ve imleç çevirmesi ayrı `translate` / `rotate` özelliklerinde durur,
  `transform` içinde değil: zincirde ikisi de `transform`'dan önce uygulanır
  (translate → rotate → transform), yani sistem önce yerine oturur, sonra
  kameraya döner, en sonda kendi eğimiyle döner.

  Ayrı tutulmalarının asıl nedeni: `transform`'u çalışan animasyon devralıyor.
  Çevirme orada olsaydı animasyonun keyframe'ine yazılması gerekirdi ve çalışan
  bir animasyonun keyframe'indeki var() güncellemesi tarayıcılar arasında
  güvenilir değil — imleç bazı tarayıcılarda hiç iş görmezdi.
*/
.orbit__plane {
  border-radius: 50%;
  transform-style: preserve-3d;
  translate: -50% -50%;
  /* Eksenin z bileşeni sıfır olamaz: imleç tam merkezdeyken (x = y = 0)
     sıfır uzunluklu eksen dönüşü geçersiz kılardı. */
  rotate: var(--turn-x) var(--turn-y) 0.0001 var(--turn-a);
  transform: rotateX(var(--tilt));
  animation: orbit-turn var(--dur) linear infinite;
  pointer-events: none;
}

.orbit__plane--1 {
  inline-size: 48%;
  --dur: var(--dur-1);
}

.orbit__plane--2 {
  inline-size: 72%;
  --dur: var(--dur-2);
}

.orbit__plane--3 {
  inline-size: 96%;
  --dur: var(--dur-3);
}

/* Orta düzlem ters yöne döner; katmanlar birbirine kilitlenmez. */
.orbit__plane--2,
.orbit__plane--2 .orbit__body {
  animation-direction: reverse;
}

.orbit__path {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--band-trace);
}

/*
  İmza: dış yörünge katlanmış bir şerittir. Kameraya bakan yüz ışıklı
  (--flame), uzaklaşan yüz gölgede (--flame-fold). Süs değil — hangi
  gövdenin önde olduğunu okutan işaret.
*/
.orbit__plane--3 .orbit__path {
  border: 0;
  background: conic-gradient(
    from 0deg,
    rgb(196 49 0 / 0.20) 0 14%,
    rgb(253 107 1 / 0.70) 30% 70%,
    rgb(196 49 0 / 0.20) 86% 100%
  );
  mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
}

/*
  --- Adsız gövdeler ---
  Yörüngede yalnızca altı ikon dönmüyor: aralarında küçük, isimsiz nesneler
  de var. Süs değil, ölçek işareti — sistem altı rozetten ibaret görünmesin.

  Renk paletten çıkmaz (§3.1): ayrım hue ile değil parlaklık, boyut ve
  yarıçap kayması ile kurulur.

  Gövdeler kameraya döndürülmez — eğimin altında hafifçe yassılmaları
  yörünge düzleminde durduklarını okutur ve altı sonsuz `orbit-face`
  animasyonundan daha kurtarır.
*/
.orbit__mote {
  position: absolute;
  /* Tam yörünge izi üzerinde: düzlemle aynı yarıçapı paylaşırlar. */
  inset: 0;
  border-radius: 50%;
  transform: rotate(var(--phase));
  pointer-events: none;

  --mote-size: 0.42rem;
  --mote-color: var(--band-accent);
  --mote-alpha: 0.8;
  --mote-beat: 5.5s;
}

.orbit__mote::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: var(--mote-size);
  block-size: var(--mote-size);
  /* Gezegenlerle aynı gerekçe: merkezleme kenar boşluğuyla, transform ile değil. */
  margin-block-start: calc(var(--mote-size) / -2);
  margin-inline-start: calc(var(--mote-size) / -2);
  border-radius: 50%;
  background: var(--mote-color);
  box-shadow: 0 0 calc(var(--mote-size) * 1.8) var(--mote-color);
  opacity: var(--mote-alpha);
  /*
    Sönüp parlama yalnızca opacity üzerinden: compositor'da kalır, layout'a
    dokunmaz. Negatif gecikme hepsini farklı fazdan başlatır.
  */
  animation: mote-twinkle var(--mote-beat) var(--ease-fold) infinite alternate;
  animation-delay: calc(var(--i) * -1.7s);
}

/* Faz açıları gezegenlerin fazlarından uzak seçildi; üst üste binmezler. */
.orbit__mote--m1 { --phase:  34deg; --i: 1; --mote-size: 0.5rem;  --mote-color: var(--flame); }
.orbit__mote--m2 { --phase: 147deg; --i: 2; --mote-size: 0.34rem; --mote-color: var(--band-spark); --mote-alpha: 0.6; --mote-beat: 7s; }
.orbit__mote--m3 { --phase: 263deg; --i: 3; --mote-size: 0.42rem; --mote-color: var(--band-accent); --mote-beat: 4.2s; }

.orbit__mote--m4 { --phase:  16deg; --i: 4; --mote-size: 0.38rem; --mote-color: var(--flame-fold); --mote-alpha: 0.9; }
.orbit__mote--m5 { --phase: 118deg; --i: 5; --mote-size: 0.56rem; --mote-color: var(--flame); --mote-beat: 6.4s; }
.orbit__mote--m6 { --phase: 196deg; --i: 6; --mote-size: 0.3rem;  --mote-color: var(--band-spark); --mote-alpha: 0.55; --mote-beat: 4.8s; }
.orbit__mote--m7 { --phase: 312deg; --i: 7; --mote-size: 0.44rem; --mote-color: var(--band-accent); --mote-alpha: 0.8; }

.orbit__mote--m8  { --phase:  44deg; --i:  8; --mote-size: 0.36rem; --mote-color: var(--band-accent); --mote-beat: 6.8s; }
.orbit__mote--m9  { --phase: 100deg; --i:  9; --mote-size: 0.5rem;  --mote-color: var(--flame); --mote-alpha: 0.85; }
.orbit__mote--m10 { --phase: 172deg; --i: 10; --mote-size: 0.32rem; --mote-color: var(--band-spark); --mote-alpha: 0.55; --mote-beat: 5.1s; }
.orbit__mote--m11 { --phase: 238deg; --i: 11; --mote-size: 0.6rem;  --mote-color: var(--flame-fold); --mote-alpha: 0.95; --mote-beat: 7.6s; }
.orbit__mote--m12 { --phase: 350deg; --i: 12; --mote-size: 0.38rem; --mote-color: var(--band-accent); --mote-alpha: 0.75; --mote-beat: 4.5s; }

/* --- Gövdeler --- */
.orbit__node {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotate(var(--phase));
}

/*
  Merkezleme transform ile değil negatif kenar boşluğu ile yapılır: transform
  kullanılsaydı kaydırma dönen eksende hesaplanır, gövde yörünge çizgisi
  etrafında salınırdı.
*/
.orbit__body {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: var(--planet);
  block-size: var(--planet);
  margin-block-start: calc(var(--planet) / -2);
  margin-inline-start: calc(var(--planet) / -2);
  transform: rotate(calc(var(--phase) * -1)) rotateX(calc(var(--tilt) * -1));
  /* İmlecin çevirmesi gövdenin içinde, gezegen düzeyinde geri alınır. Gövde
     yassı kalsaydı geri alma 3B'de değil kağıt üzerinde yapılır, gezegen
     dönmek yerine ezilirdi. */
  transform-style: preserve-3d;
  animation: orbit-face var(--dur) linear infinite;
}

.orbit__plane--3 .orbit__body {
  --planet: 3.25rem;
}

.orbit__planet {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  /* Düzlemin çevirmesinin tam tersi: aynı eksen, negatif açı. Gezegen imleç
     nereye giderse gitsin kameraya bakmaya devam eder. */
  rotate: var(--turn-x) var(--turn-y) 0.0001 calc(var(--turn-a) * -1);
  scale: 1;
  animation: planet-in 620ms var(--ease-fold) backwards;
  animation-delay: calc(var(--i) * 55ms);
  transition: scale var(--duration-ui) var(--ease-fold),
              filter var(--duration-ui) var(--ease-fold);
  /* Düzlem `pointer-events: none`; imleci yalnızca gezegen karşılar. */
  pointer-events: auto;
}

.orbit__planet:hover {
  scale: 1.16;
  filter: drop-shadow(0 0 18px rgb(253 107 1 / 0.6));
}

/*
  Faz açıları ve giriş sırası. Her halkada iki gövde karşılıklı durur;
  halkalar arası ofset kaydırıldı ki hiçbiri aynı hizaya gelmesin.
  Geometri CSS'te tutulur, CSP inline stile izin vermez (§9).
*/
.orbit__node--p1 { --phase:   0deg; --i: 1; }
.orbit__node--p2 { --phase: 180deg; --i: 2; }

.orbit__node--p3 { --phase:  75deg; --i: 3; }
.orbit__node--p4 { --phase: 255deg; --i: 4; }

.orbit__node--p5 { --phase: 130deg; --i: 5; }
.orbit__node--p6 { --phase: 310deg; --i: 6; }

/* Ortalama artık `translate` özelliğinde; keyframe yalnızca dönüşü taşır. */
@keyframes orbit-turn {
  from {
    transform: rotateX(var(--tilt)) rotate(0deg);
  }
  to {
    transform: rotateX(var(--tilt)) rotate(360deg);
  }
}

/* Düzlemin dönüşü ve eğimi geri alınır; gövde her an kameraya bakar. */
@keyframes orbit-face {
  from {
    transform: rotate(calc(var(--phase) * -1)) rotateX(calc(var(--tilt) * -1));
  }
  to {
    transform: rotate(calc(var(--phase) * -1 - 360deg)) rotateX(calc(var(--tilt) * -1));
  }
}

@keyframes orbit-breathe {
  from {
    opacity: 0.5;
    transform: scale(0.96);
  }
  to {
    opacity: 0.95;
    transform: scale(1.04);
  }
}

/* Uzak gövde sönüp parlar; tabanı kendi durgun opaklığının oranıdır. */
@keyframes mote-twinkle {
  from {
    opacity: calc(var(--mote-alpha) * 0.3);
  }
  to {
    opacity: var(--mote-alpha);
  }
}

@keyframes planet-in {
  from {
    opacity: 0;
    scale: 0.35;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

/*
  §3.3: hareket kapanır, katlama geometrisi yerinde kalır. Düzlemler eğimini,
  gövdeler kameraya dönük duruşunu korur — sistem donmuş bir takımyıldıza düşer.
*/
@media (prefers-reduced-motion: reduce) {
  .orbit,
  .orbit__plane,
  .orbit__body,
  .orbit__planet,
  .orbit__corona,
  .orbit__mote::after {
    animation: none;
    transition: none;
  }
}

/* ==========================================================================
   9. Bölümler
   ========================================================================== */

/* --- Referans şeridi ---
   Durağan ızgara yerine tek yönde akan şerit: "emir akışı" motifinin
   (§3.4) bölüm ölçeğindeki karşılığı. Şerit tam genişlikte akar,
   kenarlarda kesilmez — zemine soluyarak biter.

   Hareket JS tarafından kurulur (`is-marquee`). JS yoksa veya
   prefers-reduced-motion açıksa aynı işaretler ortalanmış statik sıra
   olarak kalır; hiçbir içerik gizlenmez (§3.3). */
.logo-band {
  --logo-band-gap: var(--space-16);
  /* Hücre ölçüsü sabit: şeridin ritmini işaret dosyalarının boyu değil bu belirler. */
  --logo-band-cell-w: 13rem;
  --logo-band-cell-h: 5.5rem;
  --logo-band-pad-block: var(--space-16);
  --logo-band-pad-inline: var(--space-32);
  /*
    İşaretin kutusu: genişliği hücreden artan yer verir, yüksekliği bu sınır.
    Yatay yazı işareti genişliğe, yığılmış ya da kare işaret bu yüksekliğe
    oturur — biri diğerinin iki katı ağırlıkta görünmesin.
  */
  --logo-band-mark-h: 3rem;
  /* JS ölçer: tek turun genişliği ve sabit hızdan türeyen süre. */
  --logo-band-shift: 0px;
  --logo-band-duration: 40s;
  --logo-band-bg: var(--paper);
  --logo-band-bg-fade: rgb(255 255 255 / 0);
  --logo-band-cell: var(--surface);
  --logo-band-line: var(--hairline);

  position: relative;
  overflow: hidden;
  padding-block: var(--space-24);
  border-block: var(--hairline-width) solid var(--logo-band-line);
}

/* Şeridin uçları: kesik kenar yerine zemine karışan geçiş. */
.logo-band::before,
.logo-band::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 1;
  inline-size: clamp(2rem, 10vw, 8rem);
  pointer-events: none;
}

.logo-band::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, var(--logo-band-bg), var(--logo-band-bg-fade));
}

.logo-band::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, var(--logo-band-bg), var(--logo-band-bg-fade));
}

/* Üst hairline üzerinde geçen aksan — katlamanın akan hâli, dekor değil işaret. */
.logo-band__pulse {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.logo-band__pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    rgb(253 107 1 / 0),
    var(--flame) 50%,
    rgb(196 49 0 / 0)
  );
  background-repeat: no-repeat;
  background-size: 22% 100%;
  background-position: -30% 0;
  animation: logo-band-pulse 9s linear infinite;
}

.logo-band__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--logo-band-gap);
  margin: 0;
  padding-inline: var(--gutter);
  list-style: none;
}

.logo-band.is-marquee .logo-band__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  inline-size: max-content;
  padding-inline: 0;
  animation: logo-band-scroll var(--logo-band-duration) linear infinite;
  will-change: transform;
}

/* Okumak isteyen dursun: imleç veya klavye odağı şeridi durdurur. */
.logo-band.is-marquee:hover .logo-band__track,
.logo-band.is-marquee:focus-within .logo-band__track {
  animation-play-state: paused;
}

.logo-band__item {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  /*
    Ölçü `min-*` değil sabit: hücre yüklenen dosyaya göre büyüyüp küçülürse
    şeridin ritmi bozulur ve marquee ölçümü tur başına değişir.
  */
  inline-size: var(--logo-band-cell-w);
  block-size: var(--logo-band-cell-h);
  padding: var(--logo-band-pad-block) var(--logo-band-pad-inline);
  background: var(--logo-band-cell);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--logo-band-line);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  transition: background-color var(--duration-ui) var(--ease-fold),
    box-shadow var(--duration-ui) var(--ease-fold),
    transform var(--duration-ui) var(--ease-fold);
}

/* Katlanmış köşenin gölge yüzü — karttaki motifin aynısı. */
.logo-band__item::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--logo-band-line);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.logo-band__item:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
}

.logo-band__item:hover::after {
  background: var(--flame);
}

.logo-band__item img {
  /*
    İşaret dosyanın piksel ölçüsünde değil hücrenin ölçüsünde çizilir: küçük
    dosya büyütülür, büyük dosya küçültülür, en/boy oranı `contain` ile korunur.
    Böylece hangi boyutta yüklenirse yüklensin şeritteki bütün işaretler aynı
    kutuyu doldurur. Kutunun oranı (~3:1) tipik kurumsal yazı işaretine göre
    seçildi: geniş yazı işareti genişliğe, kare işaret yüksekliğe oturur.
  */
  inline-size: 100%;
  block-size: 100%;
  max-block-size: var(--logo-band-mark-h);
  object-fit: contain;
  object-position: center;
  /* Kurumsal logolar tek düzlemde okunsun; hover'da kendi rengine döner. */
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--duration-ui) var(--ease-fold), opacity var(--duration-ui) var(--ease-fold);
}

.logo-band__item:hover img {
  filter: none;
  opacity: 1;
}

.logo-band__name {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-soft);
  text-align: center;
  /* Hücre artık sabit genişlikte: uzun kurum adı taşmak yerine sarar. */
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  transition: color var(--duration-ui) var(--ease-fold);
}

.logo-band__item:hover .logo-band__name {
  color: var(--ink);
}

/* Ters bantta şerit: hücre ve saçak bandın kendi zemininden türer. */
.on-dark .logo-band {
  --logo-band-bg: var(--band-surface);
  --logo-band-bg-fade: var(--band-surface-fade);
  --logo-band-cell: var(--band-veil-1);
  --logo-band-line: var(--band-hairline);
}

.on-dark .logo-band__item:hover {
  background: var(--band-veil-1);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-edge-soft);
}

/*
  Logo tersine çevirme yalnızca koyu temada geçerli: açık temada ters bant da
  açık bir yüzeydir, orada beyaza çevrilmiş bir işaret kaybolurdu. Açık temada
  bu kural hiç uygulanmaz ve şeridin taban davranışı (gri tonlama) devralır.
*/
:root:not([data-theme="light"]) .on-dark .logo-band__item img {
  /* Koyu zeminde renkli logo okunmaz; tersine çevrilip tek düzleme alınır. */
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.66;
}

:root:not([data-theme="light"]) .on-dark .logo-band__item:hover img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 1;
}

.on-dark .logo-band__name {
  color: var(--band-ink-soft);
}

.on-dark .logo-band__item:hover .logo-band__name {
  color: var(--band-ink);
}

/*
  Şerit görünür olduğunda işaretler sırayla yerine oturur.
  `backwards` dolgusu yalnızca gecikme boyunca geçerli; animasyon bitince
  öğe normal durumuna döner, böylece hover dönüşümü bloke olmaz.
*/
.logo-band.is-revealed .logo-band__item {
  animation: logo-band-item-in var(--duration-reveal) var(--ease-fold) backwards;
}

.logo-band.is-revealed .logo-band__item:nth-child(2) {
  animation-delay: 60ms;
}

.logo-band.is-revealed .logo-band__item:nth-child(3) {
  animation-delay: 120ms;
}

.logo-band.is-revealed .logo-band__item:nth-child(4) {
  animation-delay: 180ms;
}

.logo-band.is-revealed .logo-band__item:nth-child(5) {
  animation-delay: 240ms;
}

.logo-band.is-revealed .logo-band__item:nth-child(n + 6) {
  animation-delay: 300ms;
}

@keyframes logo-band-scroll {
  to {
    transform: translate3d(calc(var(--logo-band-shift) * -1), 0, 0);
  }
}

@keyframes logo-band-pulse {
  to {
    background-position: 130% 0;
  }
}

@keyframes logo-band-item-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

/* §3.3: hareket kapanır, katlama geometrisi yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  .logo-band__pulse {
    display: none;
  }

  .logo-band.is-revealed .logo-band__item {
    animation: none;
  }

  /*
    Emniyet: hareket tercihi sayfa açıldıktan sonra değişirse şerit
    akmayı bırakır ama gizli kalmaz — statik sıraya döner.
  */
  .logo-band.is-marquee .logo-band__track {
    flex-wrap: wrap;
    justify-content: center;
    inline-size: auto;
    padding-inline: var(--gutter);
    animation: none;
  }
}

/* ==========================================================================
   Referanslar sayfası
   ==========================================================================

   Sayfa bir kart ızgarası değil, bir "kurum defteri". Gerekçe: kart ızgarası
   her kuruma aynı ağırlığı verir ve sektör bilgisini kartların içine dağıtır;
   okuyucu müşteri tabanının şeklini göremez. Satır düzeninde sektör kendi
   sütununda hizalanır ve tek bakışta taranır. Kurum sayısı az olduğunda
   satırlar dolu durur, çoğaldığında liste hâlâ okunur — ızgara ikisinde de
   bozuluyordu.
   ========================================================================== */

/* --- Sayfa başlığı + sektör dizini ---
   Dizin süs değil bilgi: yalnızca girilmiş sektörlerden türer ve birden fazla
   sektör varsa çizilir (bkz. Views/References/Index.cshtml). */
.page-head {
  display: grid;
  gap: var(--space-32);
  margin-bottom: var(--space-48);
}

/* Başlık bloğu kendi alt boşluğunu bırakır; burada boşluğu kapsayıcı verir. */
.page-head .section__head {
  margin-bottom: 0;
}

@media (min-width: 64rem) {
  .page-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    gap: var(--space-64);
    align-items: end;
  }
}

.sector-index {
  display: grid;
  gap: var(--space-12);
  align-content: end;
  padding-block-start: var(--space-16);
  /* Doğrulanmış metrik şeridiyle aynı işaret: turuncu üst kural. */
  border-block-start: 2px solid var(--flame);
}

.sector-index__label {
  margin: 0;
}

.sector-index__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--ink);
}

/* --- Ok bağlantısı ---
   İşaret _ArrowMark partial'ından gelir; yönü orada seçilir. Buradaki iş
   yalnızca boyut, renk ve hareket. Ok marka tonunda durur, metin mürekkep
   renginde kalır: vurgu okun kendisinde. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-14);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

/* Açık zeminde marka turuncusunun kendisi 2.6:1'de kalıyor; 1.5px'lik bir çizgi
   için fazla soluk. Aksan açık yüzey basamağına iner, hover yine gölge yüze. */
.arrow-mark {
  flex: none;
  inline-size: 1.5rem;
  block-size: 0.75rem;
  color: var(--flame-ember);
  transition: color var(--duration-ui) var(--ease-fold),
    translate var(--duration-ui) var(--ease-fold);
}

.arrow-mark--out {
  inline-size: 0.75rem;
}

.arrow-link:hover {
  color: var(--flame-fold);
}

.arrow-link:hover .arrow-mark {
  color: var(--flame-fold);
  translate: var(--space-8) 0;
}

/* Dış bağlantının oku kendi yönünde ilerler. */
.arrow-link--out:hover .arrow-mark {
  translate: var(--space-4) calc(var(--space-4) * -1);
}

/* --- Kurum defteri ---
   Kurum işaretleri farklı en/boy ve farklı iç boşlukla gelir; ham <img>
   kendi doğal boyutunda çizilirse satırlar bozulur. Bu yüzden logo sabit
   oranlı bir "levha" içinde ortalanır: işaretler aynı optik ölçekte durur.

   Beyaz/açık işaretler: bir logo açık zeminde kaybolabilir. logoContrast.js
   her işaretin gerçek parlaklığını ölçüp levhaya data-logo-mark="light"
   yazar; levha o satırda koyu yüzeye döner. Ölçüm yapılamazsa (JS kapalı,
   çapraz kaynak görsel) satır adı ve sektörüyle okunur kalır — hiçbir bilgi
   yalnızca logoya bağlı değildir.
   ------------------------------------------------------------------------- */
.ledger {
  display: grid;
  border-block-start: var(--hairline-width) solid var(--hairline);
}

.ledger__row {
  --ledger-fold: clamp(0.75rem, 1.4vw, 1.125rem);
  position: relative;
  display: grid;
  gap: var(--space-16) var(--space-32);
  align-items: start;
  padding-block: var(--space-32);
  /* Sol dolgu şeridi geçer: metin şeridin üstüne binmez. */
  padding-inline: calc(var(--ledger-fold) + var(--space-24)) var(--space-8);
  border-block-end: var(--hairline-width) solid var(--hairline);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

@media (min-width: 64rem) {
  .ledger__row {
    grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 13rem);
    align-items: center;
  }
}

.ledger__row:hover,
.ledger__row:focus-within {
  background: var(--surface);
}

/*
  Sayfanın imzası (§3.3). Şerit satır yüksekliğinin tamamını kaplar; satırlar
  bitişik olduğu için üst üste gelen şeritler defteri ciltleyen tek bir katlanmış
  bant gibi okunur. Durağan hâlde saçak tonunda; etkin satırda logonun açık ve
  gölge yüzüne döner. Yanan katman ayrı bir kaplama: background-image geçişi
  animasyon almaz, opaklık alır.
*/
.ledger__fold {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--ledger-fold);
  background: repeating-linear-gradient(
    var(--fold-angle),
    var(--hairline) 0 6px,
    var(--paper) 6px 12px
  );
}

.ledger__fold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    var(--fold-angle),
    var(--flame) 0 6px,
    var(--flame-fold) 6px 12px
  );
  opacity: 0;
  transition: opacity var(--duration-ui) var(--ease-fold);
}

.ledger__row:hover .ledger__fold::after,
.ledger__row:focus-within .ledger__fold::after {
  opacity: 1;
}

.ledger__plate {
  display: grid;
  place-items: center;
  margin: 0;
  /* Levha oranı sabit: en geniş yatay logo da, kare işaret de aynı kutuya oturur. */
  inline-size: 100%;
  max-inline-size: 13rem;
  aspect-ratio: 5 / 2;
  padding: var(--space-16);
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  /* Chamfer hep aynı köşede: sağ üst (§3.3). */
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  transition: background-color var(--duration-ui) var(--ease-fold);
}

/* Satır zemini yükselince levha ters yöne gider: işaret öne çıkar. */
.ledger__row:hover .ledger__plate,
.ledger__row:focus-within .ledger__plate {
  background: var(--paper);
}

.ledger__plate img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

/* Açık işaret koyu levhaya alınır — ölçüm sonucu, tahmin değil. */
.ledger__plate:has(img[data-logo-mark="light"]),
.ledger__row:hover .ledger__plate:has(img[data-logo-mark="light"]),
.ledger__row:focus-within .ledger__plate:has(img[data-logo-mark="light"]) {
  background: var(--ink);
}

/* Logosu olmayan kurum: boş levha yerine baş harfleri. */
.ledger__initials {
  font-family: var(--font-mono);
  font-size: var(--text-22);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-soft);
}

.ledger__body {
  display: grid;
  gap: var(--space-8);
  justify-items: start;
}

/*
  justify-items: start öğeleri max-content genişliğine açar; ch cinsinden
  ölçü taşıyan metin dar ekranda kapsayıcıdan taşardı (bkz. .stack yanındaki
  aynı gerekçe).
*/
.ledger__body > * {
  max-inline-size: 100%;
}

.ledger__name {
  font-family: var(--font-display);
  font-size: clamp(var(--text-22), 2.4vw, var(--text-28));
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
}

.ledger__text {
  max-inline-size: var(--measure);
  font-size: var(--text-16);
  color: var(--ink-soft);
}

.ledger__case {
  margin-block-start: var(--space-4);
}

/*
  Dar ekranda sağ sütun diye bir şey yok: kutu çözülür, çocukları satırın
  kendi ızgarasına girer ve sektör doğrudan kurum adının altına oturur —
  bağlantıların arasında kalmaz. Geniş ekranda kutu geri gelir, ikisi sağ
  sütunda birlikte hizalanır.
*/
.ledger__aside {
  display: contents;
}

.ledger__plate {
  order: 1;
}

.ledger__sector {
  order: 2;
}

.ledger__body {
  order: 3;
}

.ledger__site {
  order: 4;
  justify-self: start;
}

@media (min-width: 64rem) {
  .ledger__aside {
    display: grid;
    gap: var(--space-12);
    align-content: start;
    justify-items: end;
    text-align: end;
  }

  .ledger__plate,
  .ledger__sector,
  .ledger__body,
  .ledger__site {
    order: 0;
  }

  .ledger__site {
    justify-self: auto;
  }
}

/* Taranabilir sütun: aynı hizada, aynı ağırlıkta, hep büyük harf. */
.ledger__sector {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Boş durum kutusu --surface zeminli; aynı renkte bölümde kaybolmasın. */
.section--surface .empty-state {
  background: var(--paper);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
}

/* Açık zeminli şeritte beyaz işaret kaybolur; kendi hücresi koyulaşır. */
.logo-band__item:has(img[data-logo-mark="light"]) {
  background: var(--ink);
}

.logo-band__item img[data-logo-mark="light"] {
  filter: none;
  opacity: 0.9;
}

/*
  Koyu temanın ters bandında hücre zaten koyu; açık işaret ters çevrilmeden
  olduğu gibi durur. Açık temada bu bant da açık olduğu için kural devreye
  girmez ve işaret yukarıdaki koyu hücre muamelesini görür.
*/
:root:not([data-theme="light"]) .on-dark .logo-band__item:has(img[data-logo-mark="light"]) {
  background: var(--logo-band-cell);
}

:root:not([data-theme="light"]) .on-dark .logo-band__item:has(img[data-logo-mark="light"]):hover {
  background: var(--band-veil-1);
}

:root:not([data-theme="light"]) .on-dark .logo-band__item img[data-logo-mark="light"],
:root:not([data-theme="light"]) .on-dark .logo-band__item:hover img[data-logo-mark="light"] {
  filter: none;
}

/* --- Ortalanmış bölüm başlığı (referans yapısı) --- */
.section__head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.section__head--center .eyebrow {
  justify-content: center;
}

.section__head--center p {
  margin-inline: auto;
}

/* --- Teslim döngüsü ---
   Süreç düz bir hat değil kapalı bir halka: izlemeden çıkan bulgu yeni keşfi
   başlatır. Halkanın altı dilimi katlama motifinin kendisi — ileri bakan uç
   bir sonrakinin çentiğine oturur (geometri: _ProcessWheel.cshtml).

   Halkada tek bir sinyal döner. Turu taşıyan sayı --spin: bir turda 0'dan
   adım sayısına kadar doğrusal artar, sonra başa sarar. Her dilim kendi
   sırasına olan uzaklığından (--x) yanma oranını (--lit) türetir; aynı sayıyı
   listedeki satır da kullanır, böylece çark ve metin tek kaynaktan aydınlanır.

   Dikiş: --spin başa sardığı anda sinyal son dilimden çıkıp ilkine giriyor
   olmalı. Bu yüzden --lit üç turdan hesaplanır (önceki, bu, sonraki) ve en
   büyüğü alınır — aksi hâlde her turda son dilim bir karede sönüyordu.

   Zamanlamanın tamamı CSS'te. JS'in tek işi bölüm ekran dışındayken turu
   duraklatmak (processFlow.js): özel değer animasyonu compositor'a
   devredilemiyor, görünmeyen bir yerde dönmesi için sebep yok.
   ------------------------------------------------------------------------- */
@property --spin {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.cycle {
  /* Adım sayısı: dilim, tur uzunluğu ve dikiş hesabı bu sayıdan türer. */
  --steps: 6;
  /*
    Bir tam tur. Altıya bölününce dilim başına 2s: sinyalin halkayı dolaştığı
    tek bakışta görülür, adımlar arasında bekleme hissi kalmaz.
  */
  --cycle-time: 12s;
  /*
    Animasyon kurulmadığında (reduced-motion, @property'yi tanımayan tarayıcı)
    geçerli olan değer: sinyal ilk dilimin ortasında durur. Tam 0'da bir önceki
    dilim devir teslimin son anında yarı yanık kalıyordu — hareket yokken bu
    ikinci turuncu, kararsız bir kare gibi görünüyor.
  */
  --spin: 0.4;

  display: grid;
  /* Sütun içeriğe göre değil kapsayıcıya göre ölçülür — dar ekranda taşma yok. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-48);
  animation: cycle-spin var(--cycle-time) linear infinite;
}

/* Bölüm ekran dışındayken tur durur. */
.cycle.is-idle {
  animation-play-state: paused;
}

/*
  Yanma oranı. --x, sinyalin bu adıma olan uzaklığı: 0'da tam üstünde.

  Geçiş kasıtlı olarak dik (çarpan 7): adım, sinyalin ucu sınırı geçerken
  ~0.15 adımda (0.3s) yanar ve bir sonraki sınıra varılırken aynı hızda söner.
  Yumuşak rampada iki üç dilim aynı anda yarı yanık kalıyordu — hangi aşamada
  olduğumuz okunmuyordu. Uçlardaki küçük bindirme (0.9 → 1.06) devir teslimi
  gösterir: biri sönerken diğeri yanar.

  Aynı hesap hem dilim hem satır için — ikisi tek sayıyı paylaşır.
*/
.cycle__seg,
.cycle__step {
  --x: calc(var(--spin) - var(--step));
  --x-back: calc(var(--x) + var(--steps));
  --x-fore: calc(var(--x) - var(--steps));

  --lit: clamp(
    0,
    max(
      clamp(0, (var(--x) + 0.06) * 7, 1) - clamp(0, (var(--x) - 0.9) * 7, 1),
      clamp(0, (var(--x-back) + 0.06) * 7, 1) - clamp(0, (var(--x-back) - 0.9) * 7, 1),
      clamp(0, (var(--x-fore) + 0.06) * 7, 1) - clamp(0, (var(--x-fore) - 0.9) * 7, 1)
    ),
    1
  );
}

/*
  Dilimin dolum oranı: sinyal dilimin içinde ilerledikçe 0 → 1.

  Normalde clamp(0, --x, 1) yeterli; tek istisna tur başa sardıktan sonra hâlâ
  sönmekte olan son dilimler. Onlarda --x çoktan eksiye düşmüş olur, oysa yay
  dolu görünmeli. --wrapped bu durumu ayırır: --x belirgin şekilde eksideyse
  (< -1) bir önceki turun değeri geçerlidir. İkisini max ile birleştirmek
  olmuyor — o zaman her dilim turun başında dolu başlıyor.
*/
.cycle__seg {
  --wrapped: clamp(0, (-1 * var(--x) - 1) * 100, 1);
  --fill: clamp(
    0,
    clamp(0, var(--x), 1) + var(--wrapped) * clamp(0, var(--x-back), 1),
    1
  );
}

/* Adımın halkadaki sırası — inline stil yok (CSP: style-src 'self'). */
.cycle__seg--1,
.cycle__step--1 {
  --step: 0;
}
.cycle__seg--2,
.cycle__step--2 {
  --step: 1;
}
.cycle__seg--3,
.cycle__step--3 {
  --step: 2;
}
.cycle__seg--4,
.cycle__step--4 {
  --step: 3;
}
.cycle__seg--5,
.cycle__step--5 {
  --step: 4;
}
.cycle__seg--6,
.cycle__step--6 {
  --step: 5;
}

/* --- Çark --- */
.cycle__ring {
  position: relative;
  inline-size: 100%;
  max-inline-size: 26rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.cycle__wheel {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/*
  Dilim. Her renk --lit üzerinden iki uç arasında geçer; color-mix'i tanımayan
  tarayıcı bir önceki bildirimde kalır: sönük ama okunur bir halka.
  Turuncu burada zemin değil, altıda bir dilimlik vurgu (§3.1).
*/
.cycle__plate {
  fill: var(--band-veil-1);
  fill: color-mix(in oklab, var(--band-veil-1), var(--flame) calc(var(--lit) * 30%));
  stroke: var(--band-veil-3);
  stroke: color-mix(in oklab, var(--band-veil-3), var(--flame) calc(var(--lit) * 100%));
  stroke-width: 1;
  stroke-linejoin: round;
}

/*
  Yanan dilim halkanın merkezinden dışa doğru bir tık kalkar. Ölçek merkezi
  viewBox'ın ortası: dilim kendi ekseninde değil, halkadan dışarı doğru açılır.
  transform-box'ı tanımayan tarayıcıda dilim kendi ortasında büyür — hareket
  küçüldüğü için bozulma değil, sönük bir varyant.
*/
.cycle__seg {
  transform-box: view-box;
  transform-origin: 130px 130px;
  transform: scale(calc(1 + var(--lit) * 0.04));
}

.cycle__icon {
  color: var(--band-ink-soft);
  color: color-mix(in oklab, var(--band-ink-soft), var(--band-ink) calc(var(--lit) * 100%));
}

.cycle__number {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--band-ink-soft);
  fill: color-mix(in oklab, var(--band-ink-soft), var(--band-ink) calc(var(--lit) * 100%));
}

/*
  İkonlar çark ekrana girdiğinde sırayla çizilir: halka kendi yönünde kurulur.
  pathLength="1" her yolu 0–1'e normalize ettiği için tek kural yetiyor
  (bkz. _ProcessIcon).

  Çizim bilinçli olarak --lit'e değil reveal'e bağlı: iki hareketin işi ayrı.
  Reveal girişi anlatır, --spin ilerlemeyi. --lit'e bağlansaydı kullanıcı
  bölüme geldiğinde beş dilim ikonsuz kalırdı — eksik görünür, gecikmiş değil.
*/
.cycle__icon svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--duration-draw) var(--ease-fold);
  transition-delay: calc(var(--reveal-delay, 0ms) + 120ms + var(--step) * 90ms);
}

.cycle__ring.is-revealed .cycle__icon svg > * {
  stroke-dashoffset: 0;
}

.no-js .cycle__icon svg > * {
  stroke-dashoffset: 0;
}

/* --- İlerleme bandı ---
   Hareket halkanın dışında serbest gezen bir ışık değil, yanan dilimin kendi
   dış yayı: adım sürerken yay soldan sağa dolar, dilim sönerken yay da söner
   ve sıra bir sonrakine geçer. Böylece hareket "şu an bu adımdayız ve şurasına
   geldik" diyor; halkanın dışında duran bir çizgi bunu söylemiyordu.

   Dolum oranı --fill, dilimin yanma oranı --lit ile aynı sayıdan (--x) türer;
   ikisi tek animasyondan sürülür. */
.cycle__edge {
  fill: none;
  stroke: var(--band-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* pathLength="1": yayın gerçek uzunluğu ne olursa olsun 0–1'e normalize. */
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--fill));
  opacity: var(--lit);
}

/* Halkanın göbeği: döngünün adı. Genişlik iç dairenin içinde kalacak kadar. */
.cycle__hub {
  position: relative;
  inline-size: 44%;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: var(--text-18);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--band-ink);
}

/* --- Adım listesi ---
   Halkadaki dilimin metin karşılığı. Sinyal geçerken satırın kenar çubuğu ve
   numarası yanar; başlık ve gövde sabit kalır — okunacak metin yanıp sönmez. */
.cycle__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  inline-size: 100%;
  /* Çark üstte kaldığında satır uzunluğu tablet genişliğinde de okunur kalsın. */
  max-inline-size: 44rem;
  display: grid;
}

.cycle__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-16);
  align-items: baseline;
  padding-block: var(--space-16);
  padding-inline-start: var(--space-16);
  border-block-start: var(--hairline-width) solid var(--band-hairline);
}

.cycle__step:first-child {
  border-block-start: 0;
}

/* Satırın kenar çubuğu: sinyal geçerken hem yanar hem kalınlaşır. */
.cycle__step::before {
  content: "";
  position: absolute;
  inset-block: var(--space-12);
  inset-inline-start: 0;
  inline-size: calc(2px + var(--lit) * 2px);
  background: var(--band-veil-2);
  background: color-mix(in oklab, var(--band-veil-2), var(--flame) calc(var(--lit) * 100%));
}

.cycle__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums;
  color: var(--band-ink-soft);
  color: color-mix(in oklab, var(--band-ink-soft), var(--band-accent) calc(var(--lit) * 100%));
}

.cycle__body {
  display: grid;
  gap: var(--space-4);
}

.cycle__title {
  font-size: var(--text-18);
  line-height: var(--leading-snug);
}

.cycle__text {
  font-size: var(--text-14);
  color: var(--band-ink-soft);
  max-width: 58ch;
}

.cycle__actions {
  margin-block-start: var(--space-48);
}

/*
  Geniş ekranda çark solda durur, adımlar yanında okunur. Metin sütunu 44rem'de
  kapanıp ikili blok ortalanır: kalan genişliğe yayılınca satırlar okunur
  uzunluğu (§3.2: en çok 68 karakter) aşıyor ve çark listeden kopuyordu.
*/
@media (min-width: 64rem) {
  .cycle {
    grid-template-columns: minmax(0, 26rem) minmax(0, 44rem);
    align-items: center;
    justify-content: center;
    justify-items: stretch;
    gap: var(--space-64);
  }
}

/* Turun ritmi: sinyal ilk dilimden başlar, halkayı bir kez dolaşır, başa sarar. */
@keyframes cycle-spin {
  from {
    --spin: 0;
  }
  to {
    /* --steps ile aynı sayı: adım eklenirse burası da değişir. */
    --spin: 6;
  }
}

/* §3.3: hareket kapanır, katlama geometrisi yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  .cycle {
    animation: none;
  }
}

/* --- Vaka çalışması alıntısı --- */
.quote {
  display: grid;
  gap: 0;
  background: var(--band-surface);
  color: var(--band-ink);
  clip-path: polygon(
    0 0,
    calc(100% - var(--fold-depth)) 0,
    100% var(--fold-depth),
    100% 100%,
    0 100%
  );
  overflow: hidden;
}

@media (min-width: 64rem) {
  .quote {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  /* Görsel yokken tek sütun; alıntı daha geniş bir ölçüde nefes alır. */
  .quote--textonly {
    grid-template-columns: minmax(0, 1fr);
  }
}

.quote--textonly .quote__text {
  max-width: min(32ch, 100%);
}

.quote__media {
  background: var(--ink);
  min-block-size: 14rem;
}

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

.quote__body {
  display: grid;
  gap: var(--space-24);
  justify-items: start;
  padding: clamp(var(--space-32), 5vw, var(--space-64));
}

.quote__text {
  font-family: var(--font-display);
  font-size: clamp(var(--text-22), 2.4vw, var(--text-36));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  color: var(--band-ink);
  max-width: min(24ch, 100%);
}

.quote__attribution {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  color: var(--band-ink-soft);
  line-height: 1.7;
}

/* --- Doğrulanmış metrik şeridi ---
   Yalnızca kaynağı girilmiş rakamlar bu bileşene ulaşır (CLAUDE.md §5, §13).
   Veri yoksa bölüm hiç çizilmez; boş kutu ya da uydurma rakam gösterilmez. */
.stat-band {
  display: grid;
  gap: var(--space-32);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.stat-item {
  display: grid;
  gap: var(--space-8);
  padding-block-start: var(--space-16);
  border-block-start: 2px solid var(--flame);
}

.stat-item__value {
  font-family: var(--font-display);
  font-size: clamp(var(--text-36), 4vw, var(--text-64));
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  /* §3.2: rakam hizası gereken yerde tabular. Alt alta gelen değerler kayar. */
  font-variant-numeric: tabular-nums;
}

.stat-item__label {
  font-size: var(--text-14);
  color: var(--ink-soft);
}

.on-dark .stat-item__label {
  color: var(--band-ink-soft);
}

/* --- Kapanış CTA bandı ---
   Referanstaki mercan zeminin karşılığı: turuncu geniş zemin olarak
   kullanılmaz (§3.1), koyu zemin + katlama aksanı ile kurulur. */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--band-surface);
  color: var(--band-ink);
  isolation: isolate;
}

.closing__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  mask-image: linear-gradient(75deg, #000 0%, transparent 62%);
  pointer-events: none;
}

/* Hero'daki akışın tek katmanlı karşılığı: aynı yön, aynı tempo (field-drift). */
.closing__field::before {
  --field-shift: var(--field-closing-shift);
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(100% + var(--field-shift));
  background-image: repeating-linear-gradient(
    var(--fold-angle),
    rgb(253 107 1 / 0.14) 0 3px,
    transparent 3px 84px
  );
  animation: field-drift var(--duration-field-band) linear infinite;
  will-change: transform;
}

/*
  Kural hero'nunkiyle aynı (§3.3) ama burada tekrarlanıyor: kaynak sırasında
  .closing__field::before tanımı hero bloğundan sonra geldiği için, oradaki
  ortak kapatma bu kuralın altında kalıp etkisiz kalıyordu.
*/
@media (prefers-reduced-motion: reduce) {
  .closing__field::before {
    animation: none;
    will-change: auto;
  }
}

.closing__inner {
  display: grid;
  gap: var(--space-32);
  align-items: center;
  padding-block: clamp(var(--space-48), 7vw, var(--space-96));
}

/* Katlama geçişi zaten üst boşluğu veriyor; iç dolgu tekrar eklemesin. */
.closing.fold-top .closing__inner {
  padding-block-start: 0;
}

@media (min-width: 64rem) {
  .closing__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-64);
  }
}

/* Bölüm sonu tek CTA (§3.5) */
.cta-band {
  display: grid;
  gap: var(--space-24);
  align-items: center;
}

@media (min-width: 64rem) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-64);
  }
}

/* --- Ekip ---
   Kart yalnızca ad, unvan ve LinkedIn taşır; biyografi profil penceresinde durur.
   Gerekçe: kadro bir tarama ekranıdır, okuma ekranı değil — yüzler yan yana
   karşılaştırılabilsin diye kart yüksekliği sabit ve kısa tutulur.
*/

/* Gruplar arası atlama bağlantıları */
.roster-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-block-end: var(--space-48);
}

.roster-nav__link {
  --nav-chamfer: 0.5rem;
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--text-14);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--nav-chamfer)) 0,
    100% var(--nav-chamfer),
    100% 100%,
    0 100%
  );
  transition: background-color var(--duration-ui) var(--ease-fold),
    color var(--duration-ui) var(--ease-fold);
}

.roster-nav__link:hover {
  background: var(--ink);
  color: var(--paper);
}

.roster-group {
  /* Sticky header atlama bağlantısında başlığın üstünü örtmesin. */
  scroll-margin-block-start: 6rem;
}

.roster-group + .roster-group {
  margin-block-start: var(--space-96);
}

.roster-group__head {
  display: grid;
  gap: var(--space-16);
  margin-block-end: var(--space-48);
  max-width: 46rem;
}

/*
  hr'ın tarayıcı varsayılanı margin-inline: auto — grid hücresinde şerit
  ortalanıyor. Katlama şeridi başlığın hizasında, solda durur.
*/
.roster-group__head .fold-rule,
.person-dialog .fold-rule {
  margin-inline: 0;
}

.roster {
  display: grid;
  gap: var(--space-32) var(--space-24);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .roster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .roster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.person {
  /*
    Katlama paneli geometrisi: sol kenarda --person-fold yüksekliğinden başlar,
    sağ kenarda --person-rise kadar yükselir. Yön site genelindeki kesimle aynı —
    sol alttan sağ üste (§3.3).
  */
  --person-fold: 62%;
  --person-rise: 14%;
  --person-motion: 460ms;

  position: relative;
  display: grid;
  gap: var(--space-12);
  align-content: start;
}

/* Fotoğraf çerçevesi: chamfer hep sağ üstte, kare oran — kart yüksekliği sabit kalır. */
.person__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

.person__photo {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--person-motion) var(--ease-fold);
}

/*
  İkinci kare birincinin üstünde durur ve hover'da çapraz geçişle görünür.
  Kayıtta ikinci fotoğraf yoksa öğe hiç basılmaz; kart tek kareyle çalışır.
*/
.person__photo--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--person-motion) var(--ease-fold),
    transform var(--person-motion) var(--ease-fold);
}

.person--twoshot:hover .person__photo--hover,
.person--twoshot:focus-within .person__photo--hover {
  opacity: 1;
}

/* Fotoğrafsız kayıt: baş harfler + arkada katlama dokusu. */
.person__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--text-36);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--ink-soft);
  background-image: repeating-linear-gradient(
    var(--fold-angle),
    var(--hairline) 0 1px,
    transparent 1px 14px
  );
}

/*
  Açık yüz (şerit) ve gölge yüz (panel) birlikte aşağıdan katlanır.
  Panel şeridin 3px altından başlar; görünen o 3px katlama çizgisidir.
*/
.person__fold,
.person__veil {
  position: absolute;
  inset: 0;
  transform: translateY(101%);
  transition: transform var(--person-motion) var(--ease-fold);
  pointer-events: none;
}

.person__fold {
  background: linear-gradient(var(--fold-angle), var(--flame) 0 50%, var(--flame-fold) 50% 100%);
  clip-path: polygon(
    0 var(--person-fold),
    100% calc(var(--person-fold) - var(--person-rise)),
    100% 100%,
    0 100%
  );
}

.person__veil {
  background: linear-gradient(to top, rgb(30 33 37 / 0.94) 45%, rgb(30 33 37 / 0.55));
  clip-path: polygon(
    0 calc(var(--person-fold) + 3px),
    100% calc(var(--person-fold) - var(--person-rise) + 3px),
    100% 100%,
    0 100%
  );
}

.person__cue {
  position: absolute;
  inset-inline: var(--space-16);
  inset-block-end: var(--space-16);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--band-ink);
  opacity: 0;
  transform: translateY(var(--space-12));
  transition: opacity 240ms var(--ease-fold) 120ms,
    transform 240ms var(--ease-fold) 120ms;
  pointer-events: none;
}

.person__cue svg {
  inline-size: 1.25rem;
  flex: none;
}

.person--openable:hover .person__fold,
.person--openable:hover .person__veil,
.person--openable:focus-within .person__fold,
.person--openable:focus-within .person__veil {
  transform: translateY(0);
}

.person--openable:hover .person__cue,
.person--openable:focus-within .person__cue {
  opacity: 1;
  transform: translateY(0);
}

.person--openable:hover .person__photo,
.person--openable:focus-within .person__photo {
  transform: scale(1.04);
}

/*
  Dar ekranda ad zaten iki satıra düşüyor; LinkedIn işareti aynı satıra
  girerse metin sütunu 100px'e iner. Orada işaret alt satıra geçer.
*/
.person__body {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.person__linkedin {
  margin-block-start: var(--space-4);
}

@media (min-width: 48rem) {
  .person__body {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-12);
    align-items: start;
  }

  .person__linkedin {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-block-start: 0;
  }
}

.person__name {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--text-18);
  font-weight: 600;
  line-height: 1.25;
}

.person__title {
  grid-column: 1;
  font-size: var(--text-14);
  color: var(--ink-soft);
}

/* Kartın tamamı tıklanabilir; klavye odağı gerçek <button>'da kalır. */
.person__open {
  appearance: none;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: color var(--duration-ui) var(--ease-fold);
}

.person__open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.person--openable:hover .person__open {
  color: var(--flame-fold);
}

.person__linkedin {
  --mark-chamfer: 0.375rem;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--mark-chamfer)) 0,
    100% var(--mark-chamfer),
    100% 100%,
    0 100%
  );
  transition: background-color var(--duration-ui) var(--ease-fold),
    color var(--duration-ui) var(--ease-fold);
}

.person__linkedin svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.person__linkedin:hover {
  background: var(--flame-fold);
  color: var(--paper);
}

/* --- Profil penceresi --- */
.person-dialog {
  margin: auto;
  padding: 0;
  border: 0;
  inline-size: min(44rem, calc(100vw - var(--gutter) * 2));
  max-block-size: min(85vh, 46rem);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

.person-dialog::backdrop {
  background: rgb(30 33 37 / 0.76);
}

.person-dialog[open] {
  animation: person-dialog-in var(--duration-reveal) var(--ease-fold) both;
}

@keyframes person-dialog-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-24));
  }
}

.person-dialog__inner {
  display: grid;
  gap: var(--space-24);
  justify-items: start;
  padding: clamp(var(--space-24), 4vw, var(--space-48));
  max-block-size: min(85vh, 46rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.person-dialog__inner > * {
  max-inline-size: 100%;
}

.person-dialog__close {
  position: absolute;
  inset-block-start: var(--space-16);
  inset-inline-end: var(--space-16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  background: var(--paper);
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--duration-ui) var(--ease-fold);
}

.person-dialog__close:hover {
  color: var(--flame-fold);
}

.person-dialog__close svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/*
  Dar ekranda ad, fotoğrafın yanındaki 160px'lik sütunda üç satıra düşüyordu:
  kimlik satırı orada fotoğrafın altına iner, ad tam genişliği kullanır.
*/
.person-dialog__head {
  display: grid;
  gap: var(--space-16);
  align-items: start;
  /* Kapatma düğmesinin altına girmesin. */
  padding-inline-end: var(--space-48);
}

@media (min-width: 30rem) {
  .person-dialog__head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-24);
  }
}

.person-dialog__photo {
  inline-size: clamp(5rem, 14vw, 7rem);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--surface);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

.person-dialog__identity .eyebrow {
  margin-block-end: var(--space-8);
}

.person-dialog__name {
  font-size: var(--text-22);
}

@media (min-width: 30rem) {
  .person-dialog__name {
    font-size: var(--text-28);
  }
}

.person-dialog__title {
  color: var(--ink-soft);
}

.person-dialog__bio {
  display: grid;
  gap: var(--space-16);
  color: var(--ink-soft);
}

.person-dialog__block {
  display: grid;
  gap: var(--space-12);
}

.person-dialog__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: 600;
  text-decoration-color: var(--hairline);
}

.person-dialog__link svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
}

/* Pencere açıkken arka plan kaymaz. */
.is-dialog-open,
.is-dialog-open body {
  overflow: hidden;
}

/*
  JS yoksa ya da <dialog> desteklenmiyorsa pencere açılamaz: aynı içerik kartın
  altında düz metin olarak kalır. Kimlik satırı kartta zaten var, tekrarlanmaz.
*/
:is(.no-js, .no-dialog) .person-dialog {
  display: block;
  position: static;
  inline-size: auto;
  max-block-size: none;
  overflow: visible;
  background: none;
  clip-path: none;
}

:is(.no-js, .no-dialog) .person-dialog__inner {
  gap: var(--space-16);
  padding: 0;
  max-block-size: none;
  overflow: visible;
}

:is(.no-js, .no-dialog) .person-dialog__head,
:is(.no-js, .no-dialog) .person-dialog__close,
:is(.no-js, .no-dialog) .person-dialog__link,
:is(.no-js, .no-dialog) .person__cue {
  display: none;
}

:is(.no-js, .no-dialog) .person__open {
  cursor: default;
  pointer-events: none;
}

/*
  Dokunmatik girdide hover durumu hiç oluşmaz. Panel yerine yalnızca açık yüz
  kalır: fotoğrafın altında ince bir katlama kaması. Yüzü örtmez, kartın
  sıradan bir görsel olmadığını söyler.
*/
@media (hover: none) {
  .person--openable {
    --person-fold: 100%;
    --person-rise: 16%;
  }

  .person--openable .person__fold {
    transform: translateY(0);
  }

  .person--openable .person__veil,
  .person--openable .person__cue {
    display: none;
  }
}

/* §3.3: reveal ve gradyan hareketi kapanır, katlama geometrisi yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  .person__photo,
  .person__fold,
  .person__veil,
  .person__cue {
    transition-duration: 0ms;
    transition-delay: 0ms;
  }

  .person--openable:hover .person__photo,
  .person--openable:focus-within .person__photo {
    transform: none;
  }
}

/* --- Hakkımızda: açılış ---
   Solda tez, sağda künye. Şablon cevabı (büyük rakam + küçük etiket) yerine
   doğrulanabilir kurumsal veri konur (§3.4): plaka rakam değil kayıt gösterir.
*/
.about-open__inner {
  display: grid;
  gap: var(--space-48);
  align-items: start;
}

/*
  Tez sütunu künyeden belirgin şekilde geniş: ikisi eşit olsa sayfa "iki kutu"
  gibi okunuyor, künye tezle yarışıyordu. Künye referans plakası, ana ifade değil.
*/
@media (min-width: 64rem) {
  .about-open__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: var(--space-64);
  }
}

.about-open__copy {
  gap: var(--space-24);
}

/*
  Başlık h1 varsayılanından (88px'e kadar) daha ölçülü: bu bir hero değil,
  tanım cümlesi. Tam ölçekte cümle üç satıra yayılıyor ve künye plakası
  yanında dengede durmuyordu.
*/
.about-open__title {
  font-size: clamp(var(--text-36), 4.6vw, var(--text-64));
}

/* Künye plakası — chamfer hep aynı köşede: sağ üst (§3.3). */
.colophon {
  position: relative;
  padding: clamp(var(--space-24), 3vw, var(--space-32));
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

/* Katlanmış köşenin gölge yüzü — kartla aynı dil, aynı yön. */
.colophon::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/*
  Plakanın adı. h2 olarak işaretli (aside'ın erişilebilir adı buradan gelir)
  ama display boyunda değil: kayıt başlığı, bölüm başlığı değil.
*/
.colophon__label {
  margin: 0 0 var(--space-24);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink);
}

.colophon__list {
  display: grid;
  margin: 0;
}

.colophon__row {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-16);
  border-block-start: var(--hairline-width) solid var(--hairline);
}

.colophon__key {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.colophon__value {
  margin: 0;
  font-size: var(--text-16);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  /* Adres ve e-posta dar plakada kutuyu taşırmasın (360px). */
  overflow-wrap: anywhere;
}

/* --- Hakkımızda: kabuller (sayfanın imzası) ---
   Logonun karakteri iki yüzlü bir katlama (§3.3). Burada geometri anlam taşıyor:
   plaka 45°'lik bir kırımla ikiye ayrılır, üstteki açık yüz taahhüdü söyler,
   altındaki gölge yüz o taahhüdün bize yüklediği bedeli. Kırım bölüm
   geçişlerindeki (.fold-top) kesimin bileşen ölçeğindeki hâli — aynı yön,
   sol alttan sağ üste.

   Maddeler numaralandırılmıyor: aralarında sıra yok, hepsi aynı anda geçerli.
   (Ana sayfadaki teslim döngüsünde sıra gerçekten bilgi taşıdığı için orada
   numara var — burada olsa süs olurdu.)
*/
.tenets {
  --tenet-crease: clamp(1.25rem, 2.4vw, 2rem);
  display: grid;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .tenets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-32);
  }
}

.tenet {
  position: relative;
  display: grid;
  /*
    Açık yüz kalan yüksekliği alır, gölge yüz içeriği kadar. Yan yana duran iki
    plakada bedel metinleri farklı uzunlukta; kırım çizgisi ikisinde de aynı
    hizada olmasın diye değil, taahhüt satırı ne olursa olsun üstte kalsın diye.
  */
  grid-template-rows: 1fr auto;
  /* Gölge yüz bandın kendi zemini: açık yüzden bir basamak koyu. */
  background: transparent;
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  transition: box-shadow var(--duration-ui) var(--ease-fold);
}

.tenet:hover {
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-edge-soft);
}

/* Katlanmış köşenin gölge yüzü */
.tenet::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--band-hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/*
  Açık yüz. Alt kenarı kırım çizgisi: .fold-bottom ile aynı poligon, bileşen
  ölçeğinde. Dolgu kırımın derinliğini de kapsar ki başlık çizgiye yaklaşmasın.
*/
.tenet__face {
  position: relative;
  padding: clamp(var(--space-24), 2.6vw, var(--space-32));
  padding-block-end: calc(var(--space-24) + var(--tenet-crease));
  background: var(--band-veil-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tenet-crease)), 0 100%);
}

/*
  Kırım çizgisi — sayfadaki tek gradyan (§3.1: yalnızca --flame → --flame-fold
  ve yalnızca katlama motifinde). Kenarın 1px içinde durur: tam kenara oturunca
  ana poligonun kırpması kenar yumuşatmasında çizgiyi yiyordu.
*/
.tenet__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--fold-angle), var(--flame) 0 50%, var(--flame-fold) 50% 100%);
  clip-path: polygon(
    0 calc(100% - 4px),
    100% calc(100% - var(--tenet-crease) - 4px),
    100% calc(100% - var(--tenet-crease) - 1px),
    0 calc(100% - 1px)
  );
  opacity: 0.55;
  transition: opacity var(--duration-ui) var(--ease-fold);
}

.tenet:hover .tenet__face::after {
  opacity: 1;
}

/* Rengi .on-dark h3'ten gelir; burada yalnızca ölçü ve ağırlık ayarlanır. */
.tenet__claim {
  font-size: clamp(var(--text-22), 2vw, var(--text-28));
  font-weight: 600;
  /* Taahhüt iki satırda okunsun; tek uzun satır olarak akmasın. */
  max-inline-size: 22ch;
}

.tenet__cost {
  display: grid;
  gap: var(--space-8);
  padding: 0 clamp(var(--space-24), 2.6vw, var(--space-32))
    clamp(var(--space-24), 2.6vw, var(--space-32));
}

/*
  .on-dark seçicisiyle birlikte yazılır: `.on-dark p` tüm bant paragraflarını
  --band-ink-soft'a çekiyor ve tek sınıflı bir kural onu geçemiyor.
  --band-accent gövde eşiğini karşılar (≥4.5:1), etiket boyunda güvenli.
*/
.on-dark .tenet__label {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--band-accent);
}

.tenet__text {
  font-size: var(--text-16);
  line-height: var(--leading-body);
  color: var(--band-ink-soft);
}

/* §3.3: hareket kapanır, katlama geometrisi yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  .tenet,
  .tenet__face::after {
    transition-duration: 0ms;
  }
}

/* Yazı gövdesi */
.prose {
  display: grid;
  gap: var(--space-24);
  max-width: min(var(--measure), 100%);
}

.prose h2 {
  font-size: var(--text-28);
  margin-block-start: var(--space-16);
}

.prose h3 {
  font-size: var(--text-22);
}

.prose ul,
.prose ol {
  display: grid;
  gap: var(--space-8);
  padding-inline-start: var(--space-24);
}

.prose img {
  inline-size: 100%;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  padding: 0.1em 0.3em;
}

/* --- Çözümler sayfası: katlama merdiveni ---
   Ana sayfadaki ızgara bir tanıtım vitrinidir; bu sayfa listenin kendisidir.
   Bu yüzden kart kullanılmaz: her alan satır boyu bir şerittir, başlığı
   display puntosunda durur, tanımı kendi kolonunda okunur.

   Sayfanın tek jesti sol kenardaki omurga. Koyu bantta doğar, katlama
   kesimine dalar, merdivende aynı x'te devam eder. Her şeridin ön köşesi
   45° kesilir; kenar böylece katlanmış bir şeridin profili gibi çentiklenir
   (§3.3). Kaydırmada omurga şerit şerit çizilir — çizimi reveal.js'in
   eklediği .is-revealed tetikler, ayrı bir modül gerekmez.

   Turuncu bütçesi tek yerde harcanır: yalnızca işaretçinin/odağın durduğu
   şeritte açık yüz (--flame) ve omurga (--flame-fold) yanar (§3.1).

   Sıra numarası yok: alanların gerçek bir sırası yok, DisplayOrder editörün
   tercihi. Numara bilgi taşımadığı yerde süs olur.
*/

/*
  Metnin omurgadan içeri kaçması. Hero ile merdiven aynı değeri kullanır ki
  iki bölümde de hat aynı x'te dursun.
*/
.solutions-hero,
.solution-ladder,
.solution-body {
  --solution-inset: clamp(var(--space-16), 3vw, var(--space-32));
}

/*
  Şeridin ön köşesindeki kesik, kart chamfer'ının bir buçuk katı. Gerekçe:
  burada kesik bir köşe yumuşatması değil sayfanın imzası — çentik omurga
  boyunca tekrarlanınca okunacak kadar derin olmalı.
*/
.solution-ladder {
  --row-fold: calc(var(--chamfer) * 1.5);
}

/*
  Hero'nun dikey dolgusu .hero'dakiyle aynı değer, burada bir custom
  property'ye alındı: omurga bandın alt kenarına kadar uzayabilmek için bu
  ölçüyü bilmek zorunda.
*/
.solutions-hero {
  --hero-pad: clamp(3.5rem, 9vw, 7rem);
  padding-block: var(--hero-pad);
}

/* Omurganın konumu kabuğun içerik kenarına göre ölçülür. */
.solutions-hero__inner {
  position: relative;
}

.solutions-hero__copy {
  padding-inline-start: var(--solution-inset);
  /* Tek kolonlu bir sayfa üstünde başlığa .hero__copy'nin 36rem'inden fazla yer var. */
  max-width: 42rem;
}

/*
  Omurganın başı: banttan sönerek doğar, alt kenarda tam açık yüze döner.
  Kapsayıcı .container olduğu için hero'nun alt dolgusunda kalıyordu; negatif
  inset onu bandın kenarına taşır, .hero'nun overflow: hidden'ı orada keser.
*/
.solutions-hero__spine {
  position: absolute;
  inset-block-end: calc(var(--hero-pad) * -1);
  inset-inline-start: var(--gutter);
  inline-size: 2px;
  block-size: clamp(3rem, 10vw, 6rem);
  /* Gradyan yalnızca katlama motifinde ve --flame → --flame-fold arasında (§3.1). */
  background: linear-gradient(
    180deg,
    var(--band-surface-fade),
    var(--flame-fold) 55%,
    var(--flame)
  );
  pointer-events: none;
}

/*
  Üst dolgu bölümün varsayılanından kısa: omurga kesimin ardından erken
  görünsün, hat kopmuş gibi durmasın. .fold-top ile aynı özgüllükte olduğu
  için iki sınıf birlikte yazıldı — kaynak sırası değişse de bu kural kazanır.
*/
.section.solutions-stack {
  padding-block-start: calc(var(--space-48) + var(--fold-depth));
}

.solution-ladder {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Son şeridin kreşini kapatır; şeritlerin kendisi üst kenardan çizilir. */
  border-block-end: var(--hairline-width) solid var(--hairline);
}

.solution-row {
  position: relative;
  /* Hover zemini z-index: -1 ile içeriğin altında kalır, bölüm zeminine düşmez. */
  isolation: isolate;
  display: grid;
  gap: var(--space-16) var(--space-32);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "mark"
    "head"
    "text"
    "cue";
  align-items: start;
  padding-block: clamp(var(--space-32), 4vw, var(--space-48));
  padding-inline-start: var(--solution-inset);
  /* Kreş çizgisi: üst kenardaki hairline ile ön köşedeki katlama yüzü birlikte okunur. */
  border-block-start: var(--hairline-width) solid var(--hairline);
}

/*
  Orta genişlikte başlık ve tanım alt alta. İşaret ile ok iki satırı da
  kapsar: yalnızca ilk satıra bırakılsalar o satır kendi boylarına şişer ve
  başlıkla tanım arasında --space-16 yerine iki katı boşluk kalır.
*/
@media (min-width: 48rem) {
  .solution-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "mark head cue"
      "mark text cue";
  }

  .solution-row__mark {
    align-self: start;
  }
}

/*
  Geniş ekranda başlık ve tanım yan yana: altı başlık tek bakışta taranan bir
  dikey ritim kurar, ayrıntı sağda durur.
*/
@media (min-width: 64rem) {
  .solution-row {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr) auto;
    grid-template-areas: "mark head text cue";
  }
}

/*
  Hover zemini ayrı bir katmanda: [data-reveal] kendi transition'ını aynı
  özgüllükte ve daha sonra tanımlıyor, şeridin kendi transition'ı ezilirdi.
  Pseudo-element bu çakışmanın dışında kalır.
*/
.solution-row::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--surface);
  opacity: 0;
  transition: opacity var(--duration-ui) var(--ease-fold);
}

.solution-row:hover::after,
.solution-row:focus-within::after {
  opacity: 1;
}

/*
  Omurga şeridi. Çentiğin altından başlar, şeridin sonuna kadar iner;
  şerit göründüğünde yukarıdan aşağı çizilir.
*/
.solution-row::before {
  content: "";
  position: absolute;
  inset-block: var(--row-fold) 0;
  inset-inline-start: 0;
  inline-size: 2px;
  background-color: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--duration-draw) var(--ease-fold)
      calc(var(--reveal-delay, 0ms) + 120ms),
    background-color var(--duration-ui) var(--ease-fold),
    inline-size var(--duration-ui) var(--ease-fold);
}

.solution-row.is-revealed::before {
  transform: none;
}

/* Yanan tek şerit: omurga gölge yüze, çentik açık yüze döner. */
.solution-row:hover::before,
.solution-row:focus-within::before {
  inline-size: 3px;
  background-color: var(--flame-fold);
}

/* Katlamanın açık yüzü: hipotenüs sol alttan sağ üste, site geneliyle aynı yön. */
.solution-row__fold {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--row-fold);
  block-size: var(--row-fold);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.solution-row:hover .solution-row__fold,
.solution-row:focus-within .solution-row__fold {
  background: var(--flame);
}

/*
  Alan işareti zeminsiz durur. Plaka denendi ve kaldırıldı: --surface bir
  --paper zeminde neredeyse görünmüyordu, chamfer'ı da şeridin ön köşesindeki
  katlamayla yarışan ikinci bir kesik oluyordu. Şeritte tek bir katlama var.
*/
.solution-row__mark {
  grid-area: mark;
  display: inline-flex;
  inline-size: 2.25rem;
  color: var(--ink);
}

.solution-row__mark svg {
  inline-size: 2.25rem;
  block-size: 2.25rem;
}

/* Şerit göründüğünde ikon çizgileri çizilir, aksan yüzü sonra oturur. */
.solution-row.is-revealed .solution-icon__line {
  animation: solution-icon-draw 720ms var(--ease-fold) forwards;
}

.solution-row.is-revealed .solution-icon__accent {
  animation: solution-icon-face 320ms var(--ease-fold) 480ms forwards;
}

.solution-row__head {
  grid-area: head;
  display: grid;
  gap: var(--space-8);
  align-content: start;
}

.solution-row__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/*
  Genel h2'den bir kademe küçük: altı başlık üst üste durduğunda 48px'lik üst
  sınır sayfayı başlık listesine çeviriyordu.
*/
.solution-row__title {
  margin: 0;
  font-size: clamp(var(--text-22), 2.6vw, var(--text-36));
  line-height: 1.15;
}

/* Alt çizgi hazır durmaz, hover'da soldan çizilir. */
.solution-row__link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--flame), var(--flame-fold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--duration-ui) var(--ease-fold);
}

.solution-row:hover .solution-row__link,
.solution-row__link:focus-visible {
  background-size: 100% 2px;
}

/* Şeridin tamamı tıklanabilir; klavye odağı gerçek <a>'da kalır. */
.solution-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.solution-row__text {
  grid-area: text;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-18);
}

.solution-row__cue {
  grid-area: cue;
  align-self: center;
  display: inline-flex;
  color: var(--ink-soft);
  transition: color var(--duration-ui) var(--ease-fold),
    translate var(--duration-ui) var(--ease-fold);
}

.solution-row__cue svg {
  inline-size: 2rem;
  block-size: 1rem;
}

.solution-row:hover .solution-row__cue,
.solution-row:focus-within .solution-row__cue {
  color: var(--flame-fold);
  translate: var(--space-8) 0;
}

/* JS yoksa omurga çizilmeyi bekleyemez: hat yerinde durur. */
.no-js .solution-row::before {
  transform: none;
}

/* §3.3: hareket kapanır, katlama geometrisi yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  .solution-row::before,
  .solution-row::after,
  .solution-row__fold,
  .solution-row__link,
  .solution-row__cue {
    transition: none;
  }

  .solution-row::before {
    transform: none;
  }

  .solution-row.is-revealed .solution-icon__line,
  .solution-row.is-revealed .solution-icon__accent {
    animation: none;
  }
}

/* --- Çözüm alanı detay sayfası ---
   Merdivenden gelen okur aynı sistemin içinde kaldığını sol kenardaki
   omurgadan anlar: sayfa üstü koyu bant, omurga aynı x'te, alanın işareti
   listede olduğu gibi burada da başlığın üstünde.

   Sayfada üç levha tipi var (görsel, ürün, komşu alan) ve üçü de aynı dili
   konuşur: kesik hep sağ üstte, kesiğin iç yüzü hover'da --flame'e döner.
   Ayrı ayrı icat edilmiş üç etkileşim değil, tek bir sistem (§3.3).
*/

.solutions-hero--detail {
  /* Detay başlığı hero ölçeğinde değil: tez listede, burada alanın adı var. */
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.hero__title.solution-detail__title {
  font-size: clamp(var(--text-28), 3.6vw, var(--text-48));
}

/*
  Görsel varsa bant iki kolona ayrılır. Omurga mutlak konumlu olduğu için
  ızgaraya girmez, hizası bozulmaz.
*/
@media (min-width: 64rem) {
  .solutions-hero__inner--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-64);
    align-items: center;
  }
}

/* Geri bağlantı: .on-dark a'yı yenmek için iki sınıf gerekiyor. */
.on-dark .solution-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--band-ink-soft);
}

.solution-back svg {
  inline-size: 1.5rem;
  block-size: 0.75rem;
  flex: none;
  transition: translate var(--duration-ui) var(--ease-fold);
}

/* Ok geldiği yönü gösterir: merdivene doğru geri kayar. */
.solution-back:hover svg,
.solution-back:focus-visible svg {
  translate: calc(var(--space-8) * -1) 0;
}

/* --- Ana görsel: katlanmış plaka --- */
.solution-figure {
  position: relative;
  margin: 0;
  background: var(--band-veil-1);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

.solution-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/*
  Katlamanın açık yüzü. Üçgen kesiğin *iç* tarafında duruyor — dış tarafta
  kalsa figürün kendi clip-path'i onu tümüyle silerdi.
*/
.solution-figure__fold {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--flame);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* --- İçerik bölgesi: omurgadan sarkan tanım ve ürünler --- */
.solution-body {
  position: relative;
  display: grid;
  gap: var(--space-64);
  padding-inline-start: var(--solution-inset);
}

.solution-body__part {
  display: grid;
  gap: var(--space-24);
}

/* Izgara boşluğu zaten var; eyebrow'un kendi alt payı ikiye katlıyordu. */
.solution-body .eyebrow {
  margin-block-end: 0;
}

.solution-body::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 2px;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--duration-draw) var(--ease-fold)
    calc(var(--reveal-delay, 0ms) + 120ms);
}

.solution-body.is-revealed::before {
  transform: none;
}

.no-js .solution-body::before {
  transform: none;
}

/* --- Bu alandaki ürünler ---
   auto-fit + üst sınır: tek ürün tam genişlikte bir bara dönüşmez, altı ürün
   de sıkışmaz. Eski 3'lü ızgarada tek ürün yalnız bir hücrede kalıyordu.
*/
.solution-products {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-24);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 22rem));
}

.solution-product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  background: var(--paper);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  /*
    Levhalar kendi reveal kancasını taşımıyor: giriş .solution-body'nin
    açılışına ait, burada yalnızca hover geçişi var.
  */
  transition: box-shadow var(--duration-ui) var(--ease-fold);
}

.solution-product:hover,
.solution-product:focus-within {
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
}

.solution-product__fold {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.solution-product:hover .solution-product__fold,
.solution-product:focus-within .solution-product__fold {
  background: var(--flame);
}

.solution-product__name {
  margin: 0;
  font-size: var(--text-22);
  line-height: 1.2;
}

.solution-product__link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--flame), var(--flame-fold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--duration-ui) var(--ease-fold);
}

.solution-product:hover .solution-product__link,
.solution-product__link:focus-visible {
  background-size: 100% 2px;
}

/* Levhanın tamamı tıklanabilir; klavye odağı gerçek <a>'da kalır. */
.solution-product__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.solution-product__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-16);
}

.solution-product__cue {
  margin-block-start: auto;
  padding-block-start: var(--space-16);
  display: inline-flex;
  color: var(--ink-soft);
  transition: color var(--duration-ui) var(--ease-fold),
    translate var(--duration-ui) var(--ease-fold);
}

.solution-product__cue svg {
  inline-size: 1.5rem;
  block-size: 0.75rem;
}

.solution-product:hover .solution-product__cue,
.solution-product:focus-within .solution-product__cue {
  color: var(--flame-fold);
  translate: var(--space-8) 0;
}

/* --- Diğer çalışma alanları ---
   Sayfanın konusu değil çıkışı: aynı levha dili, bir kademe sessiz ölçek.
   Dolgusu da bir içerik bölümünün değil bir şeridin dolgusu.
*/
.section.solution-exit {
  padding-block: clamp(var(--space-48), 5vw, var(--space-64));
}

.solution-exit .eyebrow {
  margin-block-end: var(--space-24);
}

/*
  Dar ekranda levhalar tek kolonda ve tam genişlikte: içeriğine göre büzülen
  levhalar alt alta gelince sol kenar düzgün, sağ kenar tırtıklı kalıyordu.
  Genişlik yetince sarmalı bir şeride döner.
*/
.solution-siblings {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .solution-siblings {
    display: flex;
    flex-wrap: wrap;
  }
}

.solution-sibling {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-24) var(--space-12) var(--space-16);
  background: var(--paper);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  color: var(--ink);
  text-decoration: none;
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  transition: box-shadow var(--duration-ui) var(--ease-fold);
}

.solution-sibling:hover,
.solution-sibling:focus-visible {
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
  color: var(--ink);
}

.solution-sibling__fold {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.solution-sibling:hover .solution-sibling__fold,
.solution-sibling:focus-visible .solution-sibling__fold {
  background: var(--flame);
}

.solution-sibling__mark {
  display: inline-flex;
  flex: none;
  color: var(--ink);
}

.solution-sibling__mark svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/*
  Komşu işaretleri sessiz kalır: çizim animasyonu yok, doğrudan görünür.
  Üç sınıf gerekiyor — global kural html:not(.no-js) .solution-icon__line
  ile (0,2,1) özgüllüğünde, iki sınıflı bir seçici onu yenemiyor.
*/
.solution-siblings .solution-sibling__mark .solution-icon__line {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.solution-siblings .solution-sibling__mark .solution-icon__accent {
  opacity: 1;
}

.solution-sibling__name {
  font-family: var(--font-display);
  font-size: var(--text-16);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
}

/* §3.3: hareket kapanır, katlama geometrisi yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  .solution-back svg,
  .solution-product__fold,
  .solution-product__cue,
  .solution-product__link,
  .solution-sibling,
  .solution-sibling__fold {
    transition: none;
  }

  .solution-body::before {
    transform: none;
    transition: none;
  }

  .solution-detail__mark .solution-icon__line,
  .solution-detail__mark .solution-icon__accent {
    animation: none;
  }
}

/* ==========================================================================
   10. Form ve iletişim sayfası (§3.6)
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-24);
  max-width: 40rem;
}

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

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

.field__hint {
  font-size: var(--text-12);
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  padding: var(--space-12) var(--space-16);
  background: var(--paper);
  border: var(--hairline-width) solid var(--hairline);
  border-radius: 0;
  transition: border-color var(--duration-ui) var(--ease-fold);
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--ink-soft);
}

.field textarea {
  min-block-size: 9rem;
  resize: vertical;
}

.field--invalid input,
.field--invalid textarea,
.field--invalid select {
  border-color: var(--flame-fold);
  border-inline-start-width: 3px;
}

.field__error {
  font-size: var(--text-14);
  color: var(--flame-fold);
}

.field--consent {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-12);
}

.field--consent input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.25rem;
  accent-color: var(--flame-fold);
}

/* Honeypot: gerçek kullanıcı görmez, ekran okuyucu da odaklanmaz. */
.honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__status {
  padding: var(--space-16) var(--space-24);
  background: var(--surface);
  border-inline-start: 3px solid var(--flame);
}

.form__status--error {
  border-inline-start-color: var(--flame-fold);
}

/* --- İletişim sayfası ---
   Sayfanın işi bir talebi doğru ekibe ulaştırmak. Cesaret tek yerde harcanır:
   "talep hattı" — form levhasının ön kenarında akan katlama omurgası ve o hat
   boyunca canlanan alanlar. Geri kalan her şey sakin (§3.3).
*/

/*
  Sayfa üstü ana sayfadakinden alçak: sağda yörünge yok, aynı yükseklikte
  dursaydı boş bir koyu blok olurdu. Burası bir kapak değil, formun başlığı.
*/
.contact-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* Başlık tek kolonda durur; sağda geometri yok, bu yüzden hero'dan geniş. */
.contact-hero__copy {
  max-width: 46rem;
}

.intake {
  display: grid;
  gap: var(--space-48);
}

/* Izgara boşluğu zaten aralığı veriyor; eyebrow'un kendi alt boşluğu eklenmez. */
.intake .eyebrow {
  margin: 0;
}

@media (min-width: 64rem) {
  .intake {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: var(--space-64);
    align-items: start;
  }

  /*
    Ray form boyunca yanda kalır: uzun formda iletişim bilgisi ekrandan
    çıkmasın. Üst boşluk yapışkan başlığın yüksekliği kadar (§7).
  */
  .intake__rail {
    position: sticky;
    inset-block-start: calc(4.5rem + var(--space-32));
  }
}

.intake__rail-inner {
  display: grid;
  gap: var(--space-24);
  align-content: start;
}

/* --- Doğrudan kanallar --- */
.channels {
  display: grid;
  gap: var(--space-12);
}

/* Kesik köşe hep sağ üstte; karttaki motifin küçük ölçeği. */
.channel {
  position: relative;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-16) var(--space-24);
  background: var(--paper);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  transition: box-shadow var(--duration-ui) var(--ease-fold);
}

/* Katlanmış köşenin gölge yüzü — odakta açık yüze döner. */
.channel::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.channel:hover,
.channel:focus-within {
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
}

.channel:hover::after,
.channel:focus-within::after {
  background: var(--flame);
}

.channel__label {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.channel__value {
  font-family: var(--font-display);
  font-size: var(--text-18);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  /* Uzun e-posta adresi 360px'te hücreden taşmasın. */
  overflow-wrap: anywhere;
}

.channel__address {
  font-size: var(--text-16);
  line-height: var(--leading-body);
}

.channel__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-block-start: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}

.channel__action svg {
  inline-size: 1.25rem;
  transition: transform var(--duration-ui) var(--ease-fold);
}

.channel__action:hover svg {
  transform: translateX(0.25rem);
}

/* --- Ofis haritası ---
   Plakanın kesik köşesi zaten katlamayı taşıyor; harita çerçevesi ikinci bir
   chamfer almaz, düz bir pencere olarak durur. Kutu harita gelmeden de aynı
   yeri kaplar — yüklenince sayfa zıplamaz (§9: layout shift yok).
*/
.map {
  position: relative;
  justify-self: stretch;
  aspect-ratio: 4 / 3;
  margin-block-start: var(--space-8);
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  overflow: hidden;
}

/* JS yoksa çerçeve hiç kurulamaz; adres ve "Google Maps'te aç" bağlantısı kalır. */
.no-js .map {
  display: none;
}

.map iframe {
  display: block;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* Harita gelene kadarki istem: ne olacağını söyler, kararı kullanıcıya bırakır. */
.map__prompt {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  text-align: center;
}

.map__note {
  font-size: var(--text-12);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Ray dar; buton varsayılan ölçüsünde hücreyi eziyordu. */
.map__button {
  --btn-chamfer: 0.5rem;
  padding: var(--space-8) var(--space-16);
  font-size: var(--text-14);
}

/* --- Ray notları --- */
.intake__note {
  display: grid;
  gap: var(--space-8);
  justify-items: start;
}

.intake__note-title {
  font-family: var(--font-display);
  font-size: var(--text-16);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.intake__note-text {
  font-size: var(--text-14);
  color: var(--ink-soft);
}

.intake__note-link {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-block-end: var(--hairline-width) solid var(--hairline);
}

.intake__note-link:hover {
  color: var(--flame-fold);
  border-block-end-color: currentColor;
}

/* --- Talep levhası --- */
.intake__panel {
  --panel-pad: clamp(var(--space-16), 4vw, var(--space-48));
  position: relative;
  display: grid;
  gap: var(--space-32);
  align-content: start;
  padding: var(--panel-pad);
  /* Ön kenarda omurga duruyor; metin ona yaslanmasın. */
  padding-inline-start: calc(var(--panel-pad) + var(--space-12));
  background: var(--paper);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

/* Levhanın kesik köşesi: form kullanımdayken açık yüze döner. */
.intake__panel::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.intake__panel:focus-within::after,
.intake__panel--done::after {
  background: var(--flame);
}

/*
  Talep hattının omurgası. Gradyan yalnızca --flame → --flame-fold arasında
  ve yalnızca katlama motifinde (§3.1); açık yüz üstte, gölge yüz altta.
*/
.intake__spine {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background: linear-gradient(
    var(--fold-angle),
    var(--flame) 0 50%,
    var(--flame-fold) 50% 100%
  );
}

.intake__head {
  display: grid;
  gap: var(--space-12);
  justify-items: start;
}

.intake__head .eyebrow {
  margin: 0;
}

/* Levha içinde form kendi genişlik sınırını değil kolonun genişliğini alır. */
.form--intake {
  max-width: none;
}

@media (min-width: 48rem) {
  .form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
  }
}

/* Dar ekranda satır kavramı yok: alanlar formun kendi ızgarasına döner. */
@media (max-width: 47.99rem) {
  .form__row {
    display: contents;
  }
}

.form__consent {
  display: grid;
  gap: var(--space-8);
}

.form__submit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/*
  Alanlar hattın düğümleri: durgunken zeminden bir ton ayrılır, ön kenarları
  kalın. Odaklanınca kâğıda döner ve kenar açık yüze (--flame) geçer —
  hattın hangi noktasının canlı olduğunu gösterir.

  Geçersiz alan bunun dışında tutulur: onun kenarı gölge yüz (--flame-fold)
  olarak kalmalı, iki işaret birbirini ezmesin.
*/
.intake__panel .field input:not([type="checkbox"]),
.intake__panel .field textarea {
  background: var(--surface);
  border-inline-start-width: 3px;
}

.intake__panel .field:not(.field--invalid) input:not([type="checkbox"]):focus-visible,
.intake__panel .field:not(.field--invalid) textarea:focus-visible {
  background: var(--paper);
  border-inline-start-color: var(--flame-ember);
}

.field__label .field__hint {
  margin-inline-start: var(--space-8);
  font-weight: 400;
}

/* --- Konu kısayolları --- */
.subject-presets {
  display: grid;
  gap: var(--space-8);
  margin-block-end: var(--space-4);
}

/* Kısayol alanın yerine geçmez; JS yoksa hiç çizilmez. */
.no-js .subject-presets {
  display: none;
}

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

.chip {
  --chip-chamfer: 0.5rem;
  position: relative;
  padding: var(--space-8) var(--space-16);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: var(--text-14);
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  border: 0;
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  cursor: pointer;
  clip-path: polygon(
    0 0,
    calc(100% - var(--chip-chamfer)) 0,
    100% var(--chip-chamfer),
    100% 100%,
    0 100%
  );
  transition: color var(--duration-ui) var(--ease-fold),
    background-color var(--duration-ui) var(--ease-fold),
    box-shadow var(--duration-ui) var(--ease-fold);
}

.chip::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chip-chamfer);
  block-size: var(--chip-chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.chip:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink-soft);
}

/*
  Çip bir bağlantı da olabilir (kaynaklar sayfasındaki tür filtresi). Buton olarak
  seçili durum aria-pressed, bağlantı olarak aria-current taşır; ikisi aynı görünür.
*/
a.chip {
  display: inline-block;
  text-decoration: none;
}

/* Seçili başlık: koyu yüzey, katlanmış köşede açık yüz. */
.chip[aria-pressed="true"],
.chip[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
}

.chip[aria-pressed="true"]::after,
.chip[aria-current="page"]::after {
  background: var(--flame);
}

/* Liste filtresi: çip sırası. Konu kısayollarıyla aynı düzen, ayrı bağlam. */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-block-end: var(--space-32);
}

/* --- Gönderim sonrası: sırada ne var --- */
.intake__next-title {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/*
  Levha içindeki dikey boşluk 32px; başlık ile listesi arasında o kadar
  boşluk olmasın diye ikisi birbirine çekilir.
*/
.intake__panel--done .fold-rule + .intake__next-title {
  margin-block-start: calc(var(--space-16) * -1);
}

.next {
  display: grid;
  gap: var(--space-24);
}

.next__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

/* Sıra numarası bilgi taşır: adımların gerçekten bir sırası var. */
.next__index {
  font-family: var(--font-mono);
  font-size: var(--text-14);
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  color: var(--flame-fold);
  font-variant-numeric: tabular-nums;
  padding-block-start: 0.15em;
}

.next__body {
  display: grid;
  gap: var(--space-4);
}

.next__title {
  font-family: var(--font-display);
  font-size: var(--text-18);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.next__text {
  font-size: var(--text-14);
  color: var(--ink-soft);
}

.intake__panel--done .btn {
  justify-self: start;
}

/* ==========================================================================
   10b. Kariyer sayfaları (§4: /kariyer, /kariyer/{slug})
   ==========================================================================

   İki sayfa tek bir işi yapıyor: iyi bir mühendisi ilan metninden başvuru
   formuna götürmek. Bu yüzden sayfalar kendi bileşenlerini icat etmiyor,
   sitedeki dilin kariyerdeki karşılığını kuruyor:

     · Liste bir künye levhası ızgarası. Çözüm merdiveni (.solution-ladder)
       burada seyrek duruyordu — açık ilan sayısı azdır, satır boyu şerit
       yarısı boş kalıyordu. Levha üç künye alanıyla dolu durur: lokasyon,
       çalışma şekli, çalışma modeli. Adayın ilanı açmadan önce baktığı üçü.

     · Detay sayfasındaki başvuru bölümü iletişim sayfasıyla aynı bileşeni
       kullanır (.intake, .intake__panel, .next). İki sayfa da bir talebi
       alıyor; ayrı ayrı icat edilmiş iki form değil, tek bir sistem (§3.3).

   Bu bölümün kendine ait tek yeni öğesi özgeçmiş yuvası: sayfadaki en kritik
   ve en kolay bozulan kontrol. Cesaret orada harcanır (.resume).

   Turuncu bütçesi listede tek yerde: yalnızca işaretçinin/odağın durduğu
   levhada katlanmış köşe ve omurga yanar (§3.1).
*/

/* --- Sayfa üstü --- */

.careers-hero__copy {
  /* Tek kolonlu bir bant: başlığa .hero__copy'nin 36rem'inden fazla yer var. */
  max-width: 46rem;
}

/*
  Açık ilan sayısı. Sayfadaki tek rakam ve veriden geliyor (§3.4: uydurma
  metrik yok). Şablon cevabından ayrılan yer: rakam hero'nun ana ifadesi değil,
  tezin altındaki bir künye satırı — punto başlığın değil ledenin ölçeğinde.
*/
.careers-hero__count {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.careers-hero__number {
  font-family: var(--font-display);
  font-size: var(--text-28);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  /* Display eşiği: bu basamak bant zeminlerinde 3:1'in üstünde (§3.1). */
  color: var(--band-accent-soft);
  font-variant-numeric: tabular-nums;
}

/* Detay bandı listedekinden alçak: burada tez değil ilan başlığı duruyor. */
.careers-hero--detail {
  padding-block: clamp(var(--space-48), 7vw, var(--space-96));
}

.careers-hero__title {
  /*
    İlan başlığı bir kelime değil bir tanım ("Kıdemli .NET geliştirici —
    algoritmik işlem"); hero'nun 64px üst sınırında üç satıra taşıyordu.
  */
  font-size: clamp(var(--text-28), 4vw, var(--text-48));
  max-inline-size: 40rem;
}

/*
  Geri bağlantısı. Ürün detayındakiyle (.product-hero__back) aynı dil; ayrı
  yazılmasının sebebi o kuralın açık zemin için tanımlı olması — bu bant koyu.
*/
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-block-end: var(--space-32);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-ui) var(--ease-fold),
    translate var(--duration-ui) var(--ease-fold);
}

.back-link svg {
  inline-size: 1.5rem;
  block-size: 0.75rem;
  flex: none;
}

/* .on-dark a rengi ezmesin diye bant içinde iki sınıflı yazıldı. */
.on-dark .back-link {
  color: var(--band-ink-soft);
}

.on-dark .back-link:hover {
  color: var(--band-accent);
  /* Geri bağlantısı geri gider: ok yönüyle aynı tarafa kayar. */
  translate: calc(var(--space-8) * -1) 0;
}

/* --- İlan durumu ---
   Değer ClosesAt'ten hesaplanır, editör elle girmez. İşaret kare değil
   katlanmış üçgen: motifin token ölçeğindeki hâli (§3.3).
*/
.posting-state {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.posting-state__fold {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  flex: none;
  background: var(--band-edge);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Yalnızca son günlerde aksan yanar; açık ve kapalı ilan sakin durur (§3.1). */
.careers-hero .posting-state--closingsoon {
  color: var(--band-accent);
}

.careers-hero .posting-state--closingsoon .posting-state__fold {
  background: var(--band-accent);
}

.careers-hero .posting-state--closed .posting-state__fold {
  background: var(--band-veil-3);
}

/* Kalan gün sayısı durumun kendisi değil ayrıntısı; bir ton geride durur. */
.posting-state__count {
  color: var(--band-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Künye rayı (koyu bant) ---
   .spec açık zemin için tanımlı; bantta ayırıcı ve etiket rolleri temadan gelir.
*/
.careers-spec {
  border-block-start-color: var(--band-hairline);
}

.careers-spec .spec__label {
  color: var(--band-ink-soft);
}

.careers-spec .spec__value {
  font-family: var(--font-display);
  font-size: var(--text-18);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* §3.2: rakam hizası gereken yerde tabular figürler. */
.careers-spec .spec__value--date {
  font-variant-numeric: tabular-nums;
}

/*
  Künyede dört alan var (ürün künyesinde iki); .spec'in 18rem'lik kolon üst
  sınırı dördüncüsünü tek başına alt satıra düşürüyordu.
*/
@media (min-width: 64rem) {
  .careers-spec {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 15rem));
    gap: var(--space-32);
  }
}

/* --- Çalışma koşulları ---
   Yan hak listesi değil: üçü de doğrulanabilir çalışma biçimi (§13).
   Numaralandırılmazlar — maddelerin gerçek bir sırası yok, numara bilgi
   taşımadığı yerde süs olur.
*/
.terms {
  display: grid;
  gap: var(--space-32);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .terms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-48);
  }
}

.term {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-12);
}

/*
  Maddenin işareti .fold-rule'un kısası: şerit maddeyle birlikte çizilir
  (§13'teki [data-reveal] .fold-rule kuralı bunu zaten yönetiyor).
*/
.term__rule {
  inline-size: 3rem;
  block-size: 3px;
  margin-block-end: var(--space-4);
}

.term__claim {
  font-family: var(--font-display);
  font-size: clamp(var(--text-18), 1.8vw, var(--text-22));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.term__text {
  color: var(--ink-soft);
  font-size: var(--text-16);
}

/* --- Açık pozisyon levhaları --- */

/* Ad .roster değil: o sınıf ekip sayfasının kadro ızgarası (bkz. .person). */
.openings {
  display: grid;
  gap: var(--space-24);
}

/*
  İki kolon geç açılır: levha üç künye alanını yan yana taşıyor, dar kolonda
  alanlar tek tek alt alta düşüp levhayı uzatıyordu.
*/
@media (min-width: 56rem) {
  .openings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-32);
  }

  /* Tek ilan yarım kolonda asılı kalıyordu; satırın tamamını kaplar. */
  .openings--single {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
    Levha genişleyince künye alanları ekranın iki ucuna savruluyor ve
    aralarındaki bağ kopuyordu; sola toplu bir küme olarak kalırlar.
  */
  .openings--single .posting__spec {
    grid-template-columns: repeat(3, minmax(8rem, 16rem));
    justify-content: start;
    gap: var(--space-48);
  }
}

.posting {
  --posting-pad: clamp(var(--space-24), 3vw, var(--space-32));

  position: relative;
  /* Çerçeve katmanı z-index: -1 ile içeriğin altında kalır, bölüm zeminine düşmez. */
  isolation: isolate;
  display: grid;
  /* Künye ortada esner: iki levha yan yana dururken tabanları aynı hizada kalır. */
  grid-template-rows: auto 1fr auto;
  gap: var(--space-24);
  padding: var(--posting-pad);
  /* Ön kenarda omurga duruyor; metin ona yaslanmasın. */
  padding-inline-start: calc(var(--posting-pad) + var(--space-12));
  background: var(--paper);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

/*
  Çerçeve ayrı bir katmanda: levha [data-reveal] taşıyor ve o kural kendi
  transition'ını aynı özgüllükte, daha sonra tanımlıyor — levhanın kendi
  geçişi ezilirdi. Pseudo-element bu çakışmanın dışında kalır.
*/
.posting::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  transition: box-shadow var(--duration-ui) var(--ease-fold);
}

.posting:hover::before,
.posting:focus-within::before {
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
}

/* Katlanmış köşenin arkada kalan yüzü; yön .btn--primary::after ile aynı. */
.posting::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.posting:hover::after,
.posting:focus-within::after {
  background: var(--flame);
}

/*
  Omurga levha göründüğünde yukarıdan aşağı çizilir — beliren değil çekilen
  çizgi (§13). Durgunken mürekkep; yalnızca etkin levhada katlamanın iki yüzü
  (açık üstte, gölge altta) yanar.
*/
.posting__spine {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background-color: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--duration-draw) var(--ease-fold)
      calc(var(--reveal-delay, 0ms) + 120ms),
    background-color var(--duration-ui) var(--ease-fold);
}

.posting.is-revealed .posting__spine {
  transform: none;
}

.posting:hover .posting__spine,
.posting:focus-within .posting__spine {
  background-color: transparent;
  background-image: linear-gradient(
    var(--fold-angle),
    var(--flame) 0 50%,
    var(--flame-fold) 50% 100%
  );
}

/* JS yoksa omurga çizilmeyi bekleyemez: hat yerinde durur. */
.no-js .posting__spine {
  transform: none;
}

.posting__head {
  display: grid;
  align-content: start;
  gap: var(--space-12);
}

.posting__title {
  margin: 0;
  font-size: clamp(var(--text-22), 2vw, var(--text-28));
  line-height: 1.2;
}

/* Alt çizgi hazır durmaz, hover'da soldan çizilir (bkz. .solution-row__link). */
.posting__link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--flame), var(--flame-fold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--duration-ui) var(--ease-fold);
}

.posting:hover .posting__link,
.posting__link:focus-visible {
  background-size: 100% 2px;
}

/* Levhanın tamamı tıklanabilir; klavye odağı gerçek <a>'da kalır. */
.posting__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.posting__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-16);
}

/*
  Künye: adayın ilanı açmadan önce baktığı üç alan. auto-fit ile kendi
  genişliğine göre 1–3 kolona oturur; ayrı bir kırılma noktası gerekmez.
*/
.posting__spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-16);
  margin: 0;
  padding-block-start: var(--space-16);
  border-block-start: var(--hairline-width) solid var(--hairline);
}

.posting__fact {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.posting__label {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* dd reset'te yok; varsayılan girintisi künyeyi hizadan düşürüyordu. */
.posting__value {
  margin: 0;
  font-size: var(--text-14);
  font-weight: 600;
  /* Uzun lokasyon adı 360px'te hücreden taşmasın. */
  overflow-wrap: anywhere;
}

.posting__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin: 0;
  /* p'nin 68ch sınırı satırı erken kesip oku içeri çekiyordu. */
  max-width: none;
}

/* İlanın ne zaman açıldığı adayın ilk sorularından biri; veriden geliyor. */
.posting__posted {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Bağlantı başlıkta; ok yalnızca yönü gösterir. */
.posting__cue {
  display: inline-flex;
  flex: none;
}

.posting__cue .arrow-mark {
  inline-size: 2rem;
  block-size: 1rem;
  color: var(--ink-soft);
}

.posting:hover .posting__cue .arrow-mark,
.posting:focus-within .posting__cue .arrow-mark {
  color: var(--flame-fold);
  translate: var(--space-8) 0;
}

/* --- Başvuru levhası ---
   Levha, ray ve süreç listesi iletişim sayfasının bileşenleri (.intake*, .next).
   Burada yalnızca başvuruya özgü iki ekleme var.
*/
.apply__lede {
  color: var(--ink-soft);
  font-size: var(--text-16);
}

/* --- Özgeçmiş yuvası ---
   Sayfanın imzası ve en kritik kontrolü. Çıplak dosya girdisi seçilen dosyanın
   adını ve boyutunu göstermiyordu; aday "yükledim mi" diye tereddüt ediyordu.

   Yuva bir levha: durgunken zeminden bir basamak çukur (--surface), dosya
   seçilince katlanmış köşe açık yüze döner ve ad ile boyut okunur hâle gelir.
   Girdi görsel olarak gizli ama odaklanabilir; levha <label> olduğu için
   sürükle-bırak (resumeField.js) olmasa da tıklanır.
*/
.resume {
  --resume-chamfer: calc(var(--chamfer) * 1.25);
  position: relative;
}

/*
  Girdi .field input kurallarını da alıyor; iki sınıflı yazıldı ki genişlik ve
  dolgu oradan sızmasın. display: none değil — gizlenen girdi odaklanamaz.
*/
.resume .resume__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.resume__face {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  background: var(--surface);
  cursor: pointer;
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--resume-chamfer)) 0,
    100% var(--resume-chamfer),
    100% 100%,
    0 100%
  );
  transition: background-color var(--duration-ui) var(--ease-fold),
    box-shadow var(--duration-ui) var(--ease-fold);
}

/* Katlanmış köşenin gölge yüzü; yön gerekçesi .posting::after'da. */
.resume__face::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--resume-chamfer);
  block-size: var(--resume-chamfer);
  background: var(--hairline);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.resume:hover .resume__face,
.resume.is-filled .resume__face {
  background: var(--paper);
}

/* Dosya yuvaya oturdu: köşe açık yüze döner — sitedeki "dolu/etkin" işareti. */
.resume.is-filled .resume__face::after,
.resume:hover .resume__face::after {
  background: var(--flame);
}

/*
  Odak halkası dış çizgi olarak çizilemez: levhanın clip-path'i outline'ı da
  kırpar ve halka kaybolurdu. İç gölge kırpmanın içinde kalır.
  --flame-fold, --surface üzerinde 5.08:1 (§9: gösterge için 3:1 yeter).
*/
.resume .resume__input:focus-visible + .resume__face {
  box-shadow: inset 0 0 0 2px var(--focus-ring, var(--flame-fold));
}

/* Dosya levhanın üstünde: hedefin canlı olduğunu zemin ve kenar birlikte söyler. */
.resume.is-dragging .resume__face {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--flame-ember);
}

.resume__mark {
  display: inline-flex;
  color: var(--ink-soft);
  transition: color var(--duration-ui) var(--ease-fold);
}

.resume__mark svg {
  inline-size: 2rem;
  block-size: 2rem;
}

.resume.is-filled .resume__mark {
  color: var(--flame-fold);
}

.resume__body {
  display: grid;
  gap: var(--space-4);
  min-inline-size: 0;
}

.resume__name {
  font-family: var(--font-display);
  font-size: var(--text-16);
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Uzun dosya adı 360px'te levhadan taşmasın. */
  overflow-wrap: anywhere;
}

.resume__hint {
  font-size: var(--text-12);
  color: var(--ink-soft);
}

/*
  Reddedilen dosya: hata metni ipucunun yerini alır. Mesaj özür dilemez, ne
  olduğunu ve nasıl düzeltileceğini söyler (§3.6).
*/
.resume.is-rejected .resume__hint {
  color: var(--flame-fold);
}

.resume.is-rejected .resume__face {
  box-shadow: inset 0 0 0 var(--hairline-width) var(--flame-fold);
}

.resume__action {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  border-block-end: 2px solid var(--hairline);
  transition: border-color var(--duration-ui) var(--ease-fold);
}

.resume:hover .resume__action {
  border-block-end-color: var(--flame-fold);
}

/* Sunucu doğrulaması alanı geçersiz döndürdüyse: kenar gölge yüze döner. */
.field--invalid .resume__face {
  box-shadow: inset 3px 0 0 0 var(--flame-fold),
    inset 0 0 0 var(--hairline-width) var(--flame-fold);
}

/* Dar levhada eylem etiketi ikinci satıra düşmesin: ikon ile metin yeter. */
@media (max-width: 26rem) {
  .resume__face {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-12);
    padding-inline: var(--space-16);
  }

  .resume__action {
    display: none;
  }
}

/* §3.3: hareket kapanır, katlama geometrisi yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  .posting::before,
  .posting::after,
  .posting__spine,
  .posting__link,
  .posting__cue .arrow-mark,
  .resume__face,
  .resume__face::after,
  .resume__mark,
  .resume__action,
  .back-link {
    transition: none;
  }

  .posting__spine {
    transform: none;
  }
}


/* --- Hukuk belgesi (/gizlilik-politikasi, /kullanim-kosullari) ---
   Bu sayfa bir yazı değil, dosyalanmış bir belge. Okuyucunun işi düz baştan
   sona okumak değil, aradığı maddeyi bulup harekete geçmek; yapı da bunu
   anlatır: künye, madde dizini, numaralı maddeler.

   Sayfanın imzası "dosya sekmesi": madde numarası metin kolonunun dışında,
   sayfa payında duran kesik köşeli bir plakadır. Aynı plaka dizin rayında da
   var ve okunan maddede açık yüze döner — dizin ile gövde, aynı katlanmış
   şeridin iki yüzü (§3.3). Rayın omurgası okuma ilerlemesiyle dolar; uzun bir
   hukuk metninde bu süs değil, "ne kadar kaldı" sorusunun cevabı.
*/

/*
  Künye bandı ana sayfadaki hero'dan alçak: sağda geometri yok, aynı yükseklikte
  dursaydı boş bir koyu blok olurdu. Burası bir kapak değil, belgenin başlığı.
*/
.legal-masthead {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.legal-masthead__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-24);
  max-width: 46rem;
}

.legal-masthead__copy > * {
  max-inline-size: 100%;
}

/*
  Belge başlığı hero başlığından bir basamak alçak. Gerekçe: h1'in üst ucu (88px)
  bir tez cümlesi için ölçülmüştü; "Gizlilik Politikası ve KVKK Aydınlatma Metni"
  gibi uzun bir belge adı o puntoda üç satıra yayılıp bağırıyor. Burada başlık
  bir iddia değil, dosyanın adı.
*/
.legal-masthead h1 {
  font-size: clamp(var(--text-28), 4.4vw, var(--text-64));
}

/* --- Belge künyesi: yürürlük tarihi + ikiz belge --- */
.legal-file {
  display: grid;
  gap: var(--space-24);
  margin-block-start: var(--space-48);
  padding-block-start: var(--space-24);
  border-block-start: var(--hairline-width) solid var(--band-hairline);
}

@media (min-width: 48rem) {
  .legal-file {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-48);
  }
}

.legal-file__stamp {
  display: grid;
  align-content: start;
  gap: var(--space-8);
}

/* .on-dark p (0,1,1) rengi ezmesin diye iki sınıflı yazıldı. */
.legal-masthead .legal-file__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--band-ink-soft);
}

.legal-masthead .legal-file__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-18);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--band-ink);
}

/*
  İkiz belgeye geçiş. Hukuk metinleri çift gelir: kullanım koşullarını okuyan
  kişi çoğu zaman gizlilik metnini de arar, menüye dönmek zorunda kalmasın.
  Kesik köşe hep sağ üstte; gölge yüz odakta açık yüze döner (§3.3).
*/
.legal-file__switch {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  min-inline-size: min(17rem, 100%);
  text-decoration: none;
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-edge-soft);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
  transition: box-shadow var(--duration-ui) var(--ease-fold);
}

.legal-file__switch::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--band-veil-2);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: background-color var(--duration-ui) var(--ease-fold);
}

.legal-file__switch:hover,
.legal-file__switch:focus-visible {
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-edge);
}

.legal-file__switch:hover::after,
.legal-file__switch:focus-visible::after {
  background: var(--band-accent);
}

.legal-file__switch-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-display);
  font-size: var(--text-18);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* .arrow-mark varsayılanı açık zemin için (--flame-ember); bant koyu. */
.legal-file__switch .arrow-mark {
  color: var(--band-accent);
}

.legal-file__switch:hover .arrow-mark {
  translate: var(--space-8) 0;
}

/* --- Belge tabakası: dizin rayı + maddeler --- */
.legal-sheet__grid {
  display: grid;
  gap: var(--space-48);
  align-items: start;
}

@media (min-width: 64rem) {
  /*
    Ray dar ve sabit oranlı: içindekiler bir kolon değil bir kenar çubuğudur.
    Aradaki boşluk madde plakalarının asıldığı pay — bu yüzden dar tutulmuyor,
    plaka rayın üstüne binmesin.
  */
  .legal-sheet__grid {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--space-64);
  }

  /* Ray metin boyunca yanda kalır. Üst boşluk yapışkan başlığın yüksekliği kadar. */
  .legal-index {
    position: sticky;
    inset-block-start: calc(4.5rem + var(--space-32));
  }
}

.legal-index__inner {
  display: grid;
  align-content: start;
  gap: var(--space-24);
}

.legal-index__label {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Okuma omurgası ---
   Ray boyunca inen hairline; okunan yere kadarki kısmı katlama şeridinin
   kendisiyle dolar. JS yoksa dolgu hiç çizilmez, çizgi yerinde kalır.
*/
.legal-index__track {
  position: relative;
  padding-inline-start: var(--space-24);
}

.legal-index__spine {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 2px;
  background: var(--hairline);
  overflow: hidden;
}

.legal-index__spine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--fold-angle), var(--flame) 0 50%, var(--flame-fold) 50% 100%);
  transform-origin: top center;
  transform: scaleY(var(--legal-progress, 0));
  transition: transform var(--duration-ui) linear;
}

.legal-index__list {
  display: grid;
  gap: var(--space-4);
}

.legal-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-12);
  padding-block: var(--space-8);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--duration-ui) var(--ease-fold);
}

.legal-index__title {
  font-size: var(--text-14);
  line-height: 1.45;
}

.legal-index__link:hover,
.legal-index__link:focus-visible {
  color: var(--ink);
}

/*
  Okunan madde: plaka gölge yüzden açık yüze döner. Zemin --flame-fold,
  yazı beyaz — 5.55:1 (§3.1: turuncu açık zeminde metin rengi değildir,
  dolu zeminde beyazla kullanılır).
*/
.legal-index__link.is-current {
  color: var(--ink);
}

.legal-index__link.is-current .legal-index__title {
  font-weight: 600;
}

/* --- Madde plakası ---
   Dizinde ve gövdede aynı nesne. Kesik köşe sağ üstte, numara tabular.
*/
.legal-index__index,
.legal-article__index {
  --plate-chamfer: 0.375rem;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 1.625rem;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--plate-chamfer)) 0,
    100% var(--plate-chamfer),
    100% 100%,
    0 100%
  );
  transition: background-color var(--duration-ui) var(--ease-fold),
    color var(--duration-ui) var(--ease-fold),
    box-shadow var(--duration-ui) var(--ease-fold);
}

.legal-index__link:hover .legal-index__index,
.legal-index__link:focus-visible .legal-index__index {
  color: var(--ink);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--ink);
}

.legal-index__link.is-current .legal-index__index,
.legal-body .legal-article__heading:target .legal-article__index {
  background: var(--flame-fold);
  color: var(--paper);
  box-shadow: none;
}

/* --- Yazdırma eylemi ---
   Hukuk metni dosyalanır; yazdırma gerçek bir iş. Buton JS kurulduğunda
   görünür olur (legalDocument.js hidden'ı kaldırır).
*/
.legal-index__print {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--duration-ui) var(--ease-fold);
}

.legal-index__print svg {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
}

.legal-index__print:hover {
  color: var(--flame-fold);
}

/* --- Maddeler --- */

/*
  .prose h2 (0,1,1) buradaki kuralları eziyordu; hepsi iki sınıflı yazıldı.
  Başlık düz bir metin değil bir madde girişi: üstünde ayırıcı, yanında plaka.
*/
.legal-body .legal-article__heading {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-12);
  margin-block-start: var(--space-32);
  padding-block-start: var(--space-24);
  font-size: clamp(var(--text-22), 2.4vw, var(--text-28));
  /* Yapışkan başlık, çapaya inen okuyucunun madde başlığını örtmesin. */
  scroll-margin-block-start: 6rem;
}

/*
  Maddeler arasındaki ayırıcı. Kenar değil sözde öğe: geniş ekranda plakanın
  asıldığı paya kadar sola uzanıp dosya ayracının çizgisi gibi okunuyor.
*/
.legal-body .legal-article__heading::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--hairline-width);
  background: var(--hairline);
}

.legal-body .legal-article__heading:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
}

.legal-body .legal-article__heading:first-child::before {
  display: none;
}

@media (min-width: 64rem) {
  /*
    İmza: plaka metin kolonunun dışına, sayfa payına asılır. Yalnızca dizinli
    düzende — dizin yokken gövde kabuğun tam genişliğindedir ve plaka dışarı
    taşıp yatay kaydırma açardı.
  */
  .legal-sheet__grid .legal-article__index {
    position: absolute;
    inset-block-start: var(--space-24);
    inset-inline-end: calc(100% + var(--space-16));
  }

  .legal-sheet__grid .legal-article__heading:first-child .legal-article__index {
    inset-block-start: 0;
  }

  .legal-sheet__grid .legal-article__heading::before {
    inset-inline-start: calc(-1 * var(--space-48));
  }
}

/* --- Sayfa sonu --- */
.legal-ask__actions {
  display: grid;
  justify-items: start;
  gap: var(--space-16);
}

.legal-ask__mail {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  /* Uzun e-posta adresi 360px'te hücreden taşmasın. */
  overflow-wrap: anywhere;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
  background: var(--band-surface);
  color: var(--band-ink);
  padding-block: var(--space-64) var(--space-32);
}

.site-footer a {
  color: var(--band-ink-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--band-accent);
}

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

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-48);
  }
}

@media (min-width: 64rem) {
  .site-footer__grid {
    /* Marka kolonu geniş, ardından dört bağlantı kolonu (referans yapısı). */
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
    gap: var(--space-48);
  }
}

.site-footer__brand {
  display: grid;
  gap: var(--space-16);
  justify-items: start;
}

.site-footer__logo {
  block-size: 2.75rem;
  inline-size: auto;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.site-footer__title {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--band-ink-soft);
  margin-bottom: var(--space-16);
}

.site-footer__list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-14);
}

.site-footer__legal-name {
  max-width: min(28ch, 100%);
}

.fold-rule--spaced {
  margin-block-start: var(--space-24);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--space-48);
  padding-block-start: var(--space-24);
  border-block-start: var(--hairline-width) solid var(--band-veil-2);
  font-size: var(--text-12);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--band-ink-soft);
}

/* ==========================================================================
   12. Çerez onayı (§9 KVKK) — gerçek kategori kontrolü, sahte toggle yok
   ==========================================================================

   Panel bir bant yüzeyidir (--band-*) ama modal değildir: sayfayı karartmaz,
   odağı çalmaz, sağ alta yaslanır. Gerekçe: ortalanmış tam genişlik bir şerit
   içeriğin üstünü örter ve ziyaretçiyi karar vermeye zorlar; köşedeki kart
   okumayı sürdürmeye izin verir.

   Kategori satırları anahtarla açılır. Anahtar yuvarlak değil dikdörtgen:
   sistemde köşe yarıçapı yok ve hareket eden yüz logonun kesik köşesini
   taşır (§3.3). Zorunlu çerezlerde anahtar hiç çizilmez — kapatılamayan bir
   kontrolü tıklanabilir göstermek sahte toggle olurdu (§9).
   ========================================================================== */

.consent {
  position: fixed;
  inset-block-end: var(--space-24);
  inset-inline-end: var(--space-24);
  z-index: var(--z-consent);
  inline-size: min(27rem, calc(100% - var(--space-48)));
  padding: var(--space-24);
  /*
    Yüzey banttan bir basamak yukarıda: panel çoğu zaman kendi rengindeki bir
    bandın (hero, kapanış) üstüne düşüyor ve --band-surface ile zeminden
    ayrılamıyordu.

    Yükseklik filtreyle veriliyor: clip-path dış gölgeyi de kestiği için
    box-shadow katlanmış siluetin dışında hiç boyanmıyordu. drop-shadow kesimden
    sonra uygulanır, gölge chamfer'ı izler.
  */
  background: var(--band-raised);
  color: var(--band-ink);
  filter: drop-shadow(0 12px 28px var(--band-raised-shadow));
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-hairline);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

/* Katlanan köşenin açık yüzü. Üçgen kesiğin İÇ tarafına yatar; dışa yatan bir
   üçgen ebeveynin clip-path'inin kestiği alana denk gelir ve hiç boyanmaz. */
.consent::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--chamfer);
  block-size: var(--chamfer);
  background: var(--band-accent);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.consent[hidden] {
  display: none;
}

/* Bant aşağıdan gelir; sayfanın üstüne düşmez, altından yükselir. Süre panel
   ölçeğinde: bildirim beklenen bir şey değil, gecikmesi rahatsız eder. */
.consent:not([hidden]) {
  animation: consent-in var(--duration-panel) var(--ease-fold) both;
}

@keyframes consent-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent:not([hidden]) {
    animation: none;
  }
}

/* --- Başlık --- */

.consent__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-16);
}

.consent .eyebrow {
  margin-block-end: var(--space-8);
}

.consent__title {
  font-family: var(--font-display);
  font-size: var(--text-22);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  color: var(--band-ink);
}

.consent__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  /* Chamfer en fazla 24px; buton 20px'ten başlar, kesiğe girmez. */
  margin-block-start: calc(var(--space-4) * -1);
  margin-inline-end: calc(var(--space-8) * -1);
  padding: 0;
  background: none;
  border: 0;
  color: var(--band-ink-soft);
  cursor: pointer;
  transition: color var(--duration-ui) var(--ease-fold);
}

.consent__close[hidden] {
  display: none;
}

.consent__close:hover {
  color: var(--band-accent);
}

.consent__close svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.consent__text {
  margin-block-start: var(--space-12);
  font-size: var(--text-14);
  line-height: var(--leading-body);
  color: var(--band-ink-soft);
}

.consent__link {
  color: var(--band-ink);
  text-decoration-color: var(--band-edge-soft);
  white-space: nowrap;
}

.consent__link:hover {
  /*
    Aksan burada metin rengi değil: --flame koyu temada yükseltilmiş yüzeyin
    (--ink) üstünde 4.41:1, gövde metninin 4.5:1 eşiğini tutmuyor (§3.1).
    Vurgu alt çizgiye taşınır, metin tam güce çıkar.
  */
  color: var(--band-ink);
  text-decoration-color: var(--band-accent);
}

/* --- Kategoriler --- */

/*
  Liste kendi içinde kayar. Panel position: fixed olduğu için kısa ekranda
  (yatay telefon, 640px'lik cihaz) taşan yükseklik kırpılırdı ve eylemler
  erişilemez kalırdı; büyüyen tek parça bu liste olduğu için sınır burada.
*/
.consent__options {
  margin-block: var(--space-16) var(--space-24);
  max-block-size: min(22rem, 40dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-block: var(--hairline-width) solid var(--band-hairline);
}

.consent__option {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-block-size: 3rem;
  padding-block: var(--space-12);
}

.consent__option + .consent__option {
  border-block-start: var(--hairline-width) solid var(--band-hairline);
}

/* Satırın metin bloğu etikettir: anahtarın kendi yüzeyi tek dokunma hedefi
   olarak kalmasın (§9, 360px'te parmak hedefi). */
.consent__option-body {
  display: grid;
  gap: 0.125rem;
  flex: 1 1 auto;
  min-inline-size: 0;
}

label.consent__option-body {
  cursor: pointer;
}

.consent__option-name {
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--band-ink);
}

.consent__option-note {
  font-size: var(--text-14);
  line-height: 1.4;
  color: var(--band-ink-soft);
}

/* Değişmez durum: kontrol değil, bildirimdir. */
.consent__lock {
  flex: none;
  align-self: center;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-12);
  font-weight: 500;
  color: var(--band-ink-soft);
  background: var(--band-veil-1);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-hairline);
  white-space: nowrap;
}

/* --- Anahtar ---
   Native checkbox'ın üstünde durur: klavye, form ve ekran okuyucu semantiği
   olduğu gibi kalır, yalnızca boyası değişir (role="switch" markup'ta).
*/
.consent__switch {
  --switch-inline: 3.25rem;
  --switch-block: 1.75rem;
  --switch-pad: 0.25rem;
  --switch-thumb: 1.25rem;

  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  inline-size: var(--switch-inline);
  block-size: var(--switch-block);
  margin: 0;
  background: var(--band-veil-2);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-edge);
  cursor: pointer;
  transition: background-color var(--duration-ui) var(--ease-fold),
    box-shadow var(--duration-ui) var(--ease-fold);
}

/* Hareket eden yüz; kesik köşe burada da sağ üstte (§3.3). */
.consent__switch::after {
  content: "";
  position: absolute;
  inset-block: var(--switch-pad);
  inset-inline-start: var(--switch-pad);
  inline-size: var(--switch-thumb);
  background: var(--band-ink-soft);
  clip-path: polygon(0 0, calc(100% - 0.375rem) 0, 100% 0.375rem, 100% 100%, 0 100%);
  transition: transform var(--duration-ui) var(--ease-fold),
    background-color var(--duration-ui) var(--ease-fold);
}

.consent__switch:hover {
  background: var(--band-veil-3);
}

/* Açık durum aksanın meşru kullanımı (§3.1): 52×28px'lik bir kontrol yüzeyi,
   geniş turuncu zemin değil. Yüz zemin rengine döner, delinmiş gibi okunur. */
.consent__switch:checked {
  background: var(--band-accent);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-accent);
}

.consent__switch:checked::after {
  background: var(--band-raised);
  transform: translateX(
    calc(var(--switch-inline) - var(--switch-thumb) - var(--switch-pad) * 2)
  );
}

/* --- Eylemler ---
   "Yalnızca zorunlu" kabul ile aynı ölçüde: reddetmek kabul etmekten zor
   olmamalı (§9 KVKK). İki sütun 360px'te de duruyor (panelin iç genişliği
   296px, sütun 142px); auto-fit denenmedi değil — grid-column: 1 / -1 taşıyan
   üçüncü buton yüzünden tek sütuna düşüyordu.
*/
.consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.consent .btn {
  --btn-chamfer: 0.5rem;
  justify-content: center;
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-14);
  text-align: center;
}

/*
  Anahtarlarla eşleşen eylem. Üç eşit ağırlıkta buton hiyerarşiyi yok ediyordu;
  bu yüzden kullanıcı bir kategoriye dokunana kadar sessiz durur. Dokunulduğu
  anda kenarı aksana döner ve kaydedilmemiş bir seçim olduğunu söyler.
*/
.consent__save {
  grid-column: 1 / -1;
  background: transparent;
  color: var(--band-ink-soft);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-veil-3);
}

.consent__save:hover {
  color: var(--band-ink);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-edge);
}

.consent.is-dirty .consent__save {
  color: var(--band-ink);
  box-shadow: inset 0 0 0 var(--hairline-width) var(--band-accent);
}

/* Dar ekranda köşe kartı yok: panel alt kenara oturur. */
@media (max-width: 47.99rem) {
  .consent {
    inset-inline: var(--space-16);
    inset-block-end: var(--space-16);
    inline-size: auto;
    padding: var(--space-24) var(--space-16);
  }
}

/* Altbilgideki "çerez tercihleri" bağlantısı: verilen karar geri alınabilmeli. */
.consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--band-hairline);
  text-underline-offset: 0.22em;
  cursor: pointer;
  transition: color var(--duration-ui) var(--ease-fold),
    text-decoration-color var(--duration-ui) var(--ease-fold);
}

.consent-reopen:hover {
  color: var(--band-accent);
  text-decoration-color: currentColor;
}

/* ==========================================================================
   13. Scroll reveal — tek eksende "açılma" (§3.3)
   ========================================================================== */

/*
  Üç varyant, tek mekanizma:

    [data-reveal]          yükselerek gelir — varsayılan, metin blokları ve kartlar
    [data-reveal="fold"]   çapraz kenarla açılır — bölüm başlıkları, katlama motifi
    [data-reveal="side"]   katlama yönünden yanaşır — iki kolonlu düzenin sağ yarısı

  [data-reveal-children] bir kapsayıcıya konur; doğrudan çocukları sırayla
  açılır. Gizleme JS'e bırakılmaz, ilk boyada CSS ile olur — aksi hâlde içerik
  görünüp sonra kaybolurdu.

  Gecikme --reveal-delay ile taşınır (CSP inline stile izin vermez ama
  element.style güvenli; yine de tek bir custom property'de toplanır).
*/
[data-reveal],
[data-reveal-children] > * {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition: opacity var(--reveal-duration, var(--duration-reveal)) var(--ease-fold)
      var(--reveal-delay, 0ms),
    transform var(--reveal-duration, var(--duration-reveal)) var(--ease-fold) var(--reveal-delay, 0ms),
    mask-position var(--reveal-duration, var(--duration-reveal)) var(--ease-fold)
      var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed,
[data-reveal-children] > .is-revealed {
  opacity: 1;
  transform: none;
}

/*
  Çapraz açılma: içerik sol alttan başlayıp 45°'lik bir kenarla sağ üste
  doğru açılır — perdenin (§15) küçük ölçekli akrabası.

  Maske kullanılır, clip-path değil: clip-path ile gizlenen bir öğe
  IntersectionObserver'a "kesişmiyor" olarak raporlanır ve kendi tetikleyicisini
  öldürür — blok sayfada boş kalırdı. Maske yalnızca boyamayı etkiler,
  öğenin geometrisi yerinde durur.
*/
[data-reveal="fold"] {
  transform: translate3d(0, 0.75rem, 0);
  /*
    Maske kutunun dört katı: kutu, gradyanın yalnızca dörtte birlik bir
    dilimini görür. Duraklar buna göre seçildi — açık uçta (%0–30) kutunun
    tamamı opak, kapalı uçta (%70–100) tamamı saydam. Aradaki geniş geçiş
    kenarı yumuşatır; sert bir kesim değil, ışığın yüzeyden geçişi.
  */
  mask-image: linear-gradient(var(--fold-angle), #000 0 30%, transparent 70% 100%);
  mask-size: 400% 400%;
  mask-repeat: no-repeat;
  /* Kutu, maskenin saydam ucunu görüyor. */
  mask-position: 100% 0%;
}

/* Kutu, maskenin opak ucuna kayar: kenar sol alttan sağ üste süpürür. */
[data-reveal="fold"].is-revealed {
  mask-position: 0% 100%;
}

/* Katlama yönü site genelinde aynı: içerik sol alttan yanaşır (§3.3). */
[data-reveal="side"] {
  transform: translate3d(-1.5rem, 0.5rem, 0);
}

/*
  Açılan bloğun içindeki ikincil hareketler. Blok geldikten hemen sonra
  başlarlar — ayrı bir olay değil, aynı hareketin devamı.

  1. Katlama şeridi soldan çizilir. Şerit sitenin imzası; bir yerde
     "beliren" değil "çekilen" bir çizgi olarak durması gerekiyor.
  2. Kart ve kapak görselleri hafifçe oturur (1.06 → 1). Kırpma kartın
     kendi katlama poligonundan gelir, görsel çerçevenin dışına taşmaz.
*/
[data-reveal] .fold-rule,
[data-reveal-children] > * .fold-rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-draw) var(--ease-fold)
    calc(var(--reveal-delay, 0ms) + 120ms);
}

[data-reveal].is-revealed .fold-rule,
[data-reveal-children] > .is-revealed .fold-rule {
  transform: none;
}

[data-reveal] .card__media img,
[data-reveal-children] > * .card__media img {
  transform: scale(1.06);
  transition: transform var(--duration-media) var(--ease-fold) var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed .card__media img,
[data-reveal-children] > .is-revealed .card__media img {
  transform: none;
}

/* JS yoksa içerik gizli kalmasın. */
.no-js [data-reveal],
.no-js [data-reveal-children] > * {
  opacity: 1;
  transform: none;
  mask-image: none;
}

.no-js [data-reveal] .fold-rule,
.no-js [data-reveal-children] > * .fold-rule,
.no-js [data-reveal] .card__media img,
.no-js [data-reveal-children] > * .card__media img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-children] > *,
  [data-reveal] .fold-rule,
  [data-reveal-children] > * .fold-rule,
  [data-reveal] .card__media img,
  [data-reveal-children] > * .card__media img {
    opacity: 1;
    transform: none;
    mask-image: none;
    transition: none;
  }
}

/* ==========================================================================
   14. Ortam katmanı — sayfanın arkasındaki katlama dokusu

   Sayfanın arkasında sabit duran tek bir katman. İki iş yapıyor:

     .ambient__weave   45°'lik saç teli dokusu — sayfa kaydıkça yer değiştirir
     .ambient__band    logonun katlanmış şeridi, dev ölçekte ve neredeyse
                       görünmez; kendi temposunda salınır

   Neden bu ikisi ayrı: doku kaydırmaya bağlıdır (okuyucu ilerledikçe zemin
   de ilerler), şerit zamana. Bir öğe tek bir zaman çizelgesine bağlanabildiği
   için ikisi tek elemanda toplanamaz.

   Kural: alfa değerleri eşiğin altında tutulur, renk değişmez, hiçbir şey
   yanıp sönmez. Arka plan dikkat istemez; istediği anda yorucu olur.
   ========================================================================== */

.ambient {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  overflow: hidden;
  pointer-events: none;
  /* Katman yalnız kendi kutusunu boyar: sayfa yerleşimini hiç etkilemez. */
  contain: strict;
  /*
    Maske kapsayıcıda durur, hareket eden çocukta değil: ekranın ortası —
    metnin okunduğu yer — her karede aynı ölçüde sakin kalır, desen altında
    kayarken merkez kaymaz.
  */
  mask-image: radial-gradient(115% 85% at 50% 42%, transparent 0%, #000 72%);
}

.ambient__weave,
.ambient__band {
  position: absolute;
  display: block;
  will-change: transform;
}

/* Şeridi taşıyan katman: konumlandırmayı değiştirmez, yalnızca kaydırır. */
.ambient__drift {
  position: absolute;
  inset: 0;
  display: block;
}

/*
  Doku görünür alandan geniştir: kayma yolunun her noktasında ekranı tam
  örter, kenarda boşluk açılmaz (sol -1, sağ +3 periyot pay).
*/
.ambient__weave {
  inset-block: -14vmax;
  inset-inline-start: calc(-1 * var(--ambient-weave-shift));
  inline-size: calc(100% + 4 * var(--ambient-weave-shift));
  background-image: repeating-linear-gradient(
    var(--fold-angle),
    var(--ambient-line) 0 1px,
    transparent 1px var(--ambient-weave-gap)
  );
  animation: ambient-weave var(--duration-ambient-weave) linear infinite;
}

/*
  Şerit: logonun "<" işareti. Üst yüz ışık alır, katlanan alt yüz gölgede
  kalır — iki yüz tek elemanda, %50'de bölünmüş bir gradyanla (§3.3).
  Uçlar maskeyle söner; şerit başlamaz ve bitmez, sadece geçer.
*/
.ambient__band {
  inline-size: 62vmax;
  block-size: 26vmax;
  background-image: linear-gradient(
    to bottom,
    var(--ambient-lit) 0 50%,
    var(--ambient-fold) 50% 100%
  );
  clip-path: polygon(0 52%, 22% 0, 100% 0, 78% 52%, 100% 100%, 22% 100%);
  /*
    Maske her yönde söner: şeridin dış hatları hiçbir kenarda düz bir çizgi
    olarak bitmez. Kesik kenar yalnızca merkeze yakın, en yoğun yerde
    seziliyor — arka planda "bir şey duruyor" hissi değil, kâğıdın dokusu.
  */
  mask-image: radial-gradient(closest-side at 50% 50%, #000 8%, transparent 100%);
  animation-duration: var(--duration-ambient-band);
  animation-timing-function: var(--ease-drift);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ambient__band--near {
  inset-block-start: 6vh;
  inset-inline-start: -18vmax;
  animation-name: ambient-band-near;
}

.ambient__band--far {
  inset-block-start: 58vh;
  inset-inline-start: 24vmax;
  block-size: 18vmax;
  /* Uzaktaki şerit daha yavaş ve daha kısa yol alır: derinlik buradan gelir. */
  animation-name: ambient-band-far;
  animation-duration: calc(var(--duration-ambient-band) * 1.55);
}

@keyframes ambient-weave {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-1 * var(--ambient-weave-shift)), 0, 0);
  }
}

@keyframes ambient-band-near {
  from {
    transform: translate3d(-6vmax, 0, 0);
  }

  to {
    transform: translate3d(10vmax, -4vh, 0);
  }
}

@keyframes ambient-band-far {
  from {
    transform: translate3d(4vmax, 2vh, 0);
  }

  to {
    transform: translate3d(-8vmax, -3vh, 0);
  }
}

/*
  Kaydırmaya bağlı zaman çizelgesi olan tarayıcılarda doku saati değil
  sayfayı takip eder: aşağı indikçe zemin de kayar, durunca durur. Ana iş
  parçacığına dokunmaz — JS ile scroll dinlemenin aksine kaydırmayı yavaşlatmaz.
  Desteklemeyen tarayıcıda yukarıdaki zamana bağlı sürüklenme geçerli kalır.
*/
@supports (animation-timeline: scroll(root block)) {
  .ambient__weave {
    animation-name: ambient-weave-scroll;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }

  @keyframes ambient-weave-scroll {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(calc(-3 * var(--ambient-weave-shift)), 4vh, 0);
    }
  }

  /*
    Şeritler kaydırmaya doku kadar tepki vermez: yakındaki biraz, uzaktaki
    daha az yol alır. Aradaki fark derinlik duygusunu veren tek şey —
    ölçek, bulanıklık veya gölge kullanılmıyor.
  */
  .ambient__drift {
    animation: ambient-drift-near linear both;
    animation-timeline: scroll(root block);
    will-change: transform;
  }

  .ambient__drift--far {
    animation-name: ambient-drift-far;
  }

  @keyframes ambient-drift-near {
    to {
      transform: translate3d(0, -9vh, 0);
    }
  }

  @keyframes ambient-drift-far {
    to {
      transform: translate3d(0, -3vh, 0);
    }
  }
}

/* Dar ekranda tek şerit: pil ve dolgu oranı için ikincisi gereksiz. */
@media (max-width: 47.99rem) {
  .ambient__drift--far {
    display: none;
  }
}

/*
  §3.3: hareket kapalıyken katlama geometrisi statik kalır — doku ve şerit
  yerinde durur, yalnızca hareket biter.
*/
@media (prefers-reduced-motion: reduce) {
  .ambient__weave,
  .ambient__band,
  .ambient__drift {
    animation: none;
    will-change: auto;
  }
}

/* ==========================================================================
   15. Sayfa perdesi (§3.3)

   Perde logonun katlanmış şeridinden gelir ama malzemesi değişti: zemin
   --ink-deep, turuncu yalnızca ön kenarda ince bir aksan şeridi. Önceki
   sürümde perdenin tamamı doygun --flame'di ve her gezinmede viewport'un
   tamamını ~1 sn boyunca turuncuya boyuyordu; §3.1 turuncuyu zemin değil
   aksan olarak tanımlıyor ve tekrar tekrar bakıldığında yoran da buydu.
   Koyu gri zemin aynı "sayfa kapandı" jestini taşır, gözü yormaz ve iki
   temada da okunur: içerik bölümleri her iki temada --paper/--surface
   üzerinde durduğu için --ink-deep her koşulda perdeyi belli eder.

   Perde her zaman TEK yöne, sola gider: ayrılırken sağdan girip örter, yeni
   sayfa açılırken aynı yönde devam edip soldan çıkar. Ziyaretçi iki ayrı
   animasyon değil, sayfanın önünden geçen tek bir şerit görür.

   Açılış yarısı saf CSS: perde ilk boyada zaten örtüyor ve JS'i beklemeden
   çekiliyor. Ayrılış yarısını pageTransition.js yapar.
   ========================================================================== */

.page-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  overflow: hidden;
  /*
    Perde hiçbir koşulda tıklamayı yutmaz. Önceki sürüm kapanırken
    pointer-events: auto alıyordu; gezinme başlamadığında ekranı örten katman
    tıklamayı da yuttuğu için sayfa kilitlenmiş gibi görünüyordu. Süsleme
    kilitlenemez: en kötü ihtimalle görünür, hiçbir zaman engel olmaz.
  */
  pointer-events: none;
}

/*
  Şerit görünür alandan iki kesim boyu geniştir: örttüğü anda her y değerinde
  tam genişliği kaplar, eğik kenarın açtığı üçgende boşluk kalmaz.
*/
.page-veil__band {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(-1 * var(--veil-bevel));
  inline-size: calc(100% + 2 * var(--veil-bevel));
  /*
    Varsayılan: geçiş bittikten sonraki hâl — solda ve görünmez. visibility
    animasyonun son karesinde kapanır; sayfanın kalan ömrü boyunca tam ekran
    bir birleştirme katmanı canlı kalmasın.
  */
  transform: translate3d(-100%, 0, 0);
  visibility: hidden;
  animation: page-veil-enter var(--duration-page) var(--ease-blade) both;
}

.page-veil.is-leaving .page-veil__band {
  animation: page-veil-leave var(--duration-page-leave) var(--ease-blade) both;
}

/*
  İki katman aynı kesimi taşır; aksan katmanı bir şerit boyu önde durduğu için
  perdenin ön kenarında turuncu bir katlama çizgisi olarak görünür. Turuncu
  yalnızca bu kalınlıkta: geri kalan her yer koyu gri.
*/
.page-veil__panel,
.page-veil__edge {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: polygon(var(--veil-bevel) 0, 100% 0, 100% 100%, 0 100%);
}

.page-veil__edge {
  background: var(--flame);
  transform: translate3d(calc(-1 * var(--veil-edge)), 0, 0);
}

.page-veil__panel {
  background: var(--ink-deep);
}

/*
  Sayfa açılışı: perde örtüyor, sola kayıp çıkıyor.
  visibility kesikli değişir; %99 durağı olmadan yolun yarısında kapanırdı.
*/
@keyframes page-veil-enter {
  from {
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  99% {
    visibility: visible;
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

/* Sayfadan ayrılış: perde sağdan girip örtüyor ve orada kalıyor. */
@keyframes page-veil-leave {
  from {
    visibility: visible;
    transform: translate3d(100%, 0, 0);
  }

  to {
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
}

/*
  §3.3: reduced-motion altında hareket tamamen kapanır. Perde hiç çizilmez —
  pageTransition.js de bu durumda bağlantılara dokunmaz, gezinme tarayıcının
  kendi davranışıyla kalır.
*/
@media (prefers-reduced-motion: reduce) {
  .page-veil {
    display: none;
  }
}

/* ==========================================================================
   Hata sayfası (§4: /hata) — katlanan ağız
   ==========================================================================

   Sayfanın tezi tek cümle: aranan adres yok, marka işaretindeki K onu yiyor.
   Şaka için eklenmiş bir figür değil, motifin kendisi — logodaki K iki
   katlanmış yüzden oluşuyor ve iki yüz katlama tepesinde birleşiyor. O tepe
   bir menteşe; yüzler menteşe etrafında dönünce şeklin kendisi bir ağza
   dönüşüyor. Sitedeki tek cesur öğe zaten bu katlanma (§3.3); burada bir kez
   daha ve en açık hâliyle kullanılıyor.

   Yenen şey neden yardım metni değil adres: ziyaretçinin burada iki işi var —
   ne olduğunu anlamak ve devam edecek bir yer bulmak. İkisini de taşıyan metin
   (h1 + lede + yol listesi) yerinde duruyor; yenen şey ziyaretçinin isteyip de
   bulamadığı adres. Böylece hareket bilgiyi silmiyor, bilginin kendisini
   söylüyor: bu yol tükendi. Adres ekran okuyucuda ayrıca tek cümle olarak
   geçiyor (bkz. Views/Shared/Error.cshtml), lane oradan gizli — harf harf
   okunan bir adres kimseye bir şey anlatmaz.

   Lane üç katmandan kurulu:
     · .chomp__food — hücrelere bölünmüş adres. Her hücre tam olarak
       --chomp-cell genişliğinde, yani harfler eşit aralıklı bir şerit üstünde
       duruyor. Bu bilinçli: ağzın konumu da hücrenin konumu da aynı çarpımdan
       (sıra × hücre) türüyor, ikisi hiç kaymıyor.
     · .chomp__food::before / ::after — hücrelerin altındaki ray ve ağzın
       arkasında bıraktığı iz. İz turla aynı süre ve aynı doğrusal tempoda uzar.
     · .chomp__runner — ağzın kendisi. Sağa doğru --chomp-count × --chomp-cell
       kadar yol alır ve her hücrede bir kez kapanır.

   Zamanlama tek bir değerden türer: --chomp-step, bir hücrenin süresi. Turun
   uzunluğu da çenenin dönüş sayısı da hücre sayısıyla çarpılarak bulunur.
   Hücre sayısı ve sırası JS'ten geliyor (chomp.js): işaretlemeye style
   özniteliği yazmak CSP'ye takılıyor.

   Tur bir kere oynar. Sonunda ağız yolun sonunda açık bekler, şerit boşalır ve
   sayfada okunacak metin tek başına kalır — istenen de bu. Hareket kapalıysa
   ya da JS çalışmıyorsa hiç oynamaz: adres tam, ağız laneın başında durur.
   ========================================================================== */

.section--error {
  display: grid;
  align-content: center;
  /* Hata sayfası bir bant; başlıkla altbilgi arasına sıkışmış bir paragraf değil. */
  min-block-size: clamp(30rem, 70vh, 46rem);
}

.error-page {
  display: grid;
  justify-items: start;
  gap: var(--space-24);
  max-inline-size: 46rem;
}

/* .stack ile aynı gerekçe: justify-items:start öğeleri max-content'e açıyor. */
.error-page > * {
  max-inline-size: 100%;
}

/* --- Lane --- */

.chomp {
  /*
    Hücre ölçüsü tip ölçeğinden alınır (§3.2), ara değer uydurulmaz.
    360px'te 20 hücre × 14px = 280px; kenar boşluğuyla birlikte sığıyor.
    Hücre sayısının üst sınırı sunucuda (ErrorViewModel.FoodCellLimit).
  */
  --chomp-cell: 0.875rem;
  /* Bir hücrenin süresi. Turun uzunluğu ve ısırık sayısı bundan türer. */
  --chomp-step: 150ms;
  /*
    Çenenin dönüş açısı. Ağzın toplam açıklığı 87°, iki çene 34°'şer dönünce
    19°'ye iniyor: yenen harf tam kapanmadan kalan boşluktan küçük, yani ısırık
    harfi gerçekten örtüyor. Tam kapanma (43.6°) şeklin ucunu kaynak kutunun
    dışına taşırıyor (bkz. _ChompMark.cshtml).
  */
  --chomp-bite: 34deg;
  /* Perde çekilmeden başlamasın (§15): arkasında yenen şey görülmezdi. */
  --chomp-lead: var(--duration-page);
  --chomp-run: calc(var(--chomp-count, 1) * var(--chomp-step));

  inline-size: 100%;
}

.chomp__lane {
  /* Genişliği hücreler verir; ağız laneın sağından taşabilsin diye kırpma yok. */
  inline-size: max-content;
  max-inline-size: 100%;
  /* Ağız harf satırından yüksek: üstteki payı lane, alttakini şeridin rayı verir. */
  padding-block-start: var(--chomp-cell);
}

.chomp__food {
  position: relative;
  display: flex;
  /* Rayın ve izin yeri; ağzın alt yarısı da bu paya oturur. */
  padding-block-end: var(--chomp-cell);
  line-height: 1;
}

.chomp__food::before,
.chomp__food::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
}

/* Ray: adresin üzerinde durduğu şerit. */
.chomp__food::before {
  background: var(--band-hairline);
}

/*
  Ağzın arkasında kalan iz. Ölçek `transform` yerine `scale` özelliğinde:
  hareket kapatılırken `transform: none` yazmak izi bir anda tam boy açardı.
  Ayrı özellik, ayrı sıfırlama.
*/
.chomp__food::after {
  background: var(--band-accent);
  transform-origin: left center;
  scale: 0 1;
}

.chomp__bit {
  flex: 0 0 auto;
  inline-size: var(--chomp-cell);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--band-ink);
  font-variant-numeric: tabular-nums;
}

.chomp__runner {
  position: absolute;
  /*
    Dikey: ağzın ortası harf satırının ortasına denk gelir. Kapsayıcı dolgu
    kutusu olduğu için rayın payı (bir hücre) çıkarılır. Kutunun dikey
    %48.7'si ağız açıklığının ortasıdır — işaretin kendi geometrisinden.
  */
  inset-block-start: calc(50% - var(--chomp-cell) * 0.5);
  translate: 0 -47.4%;
  /*
    Yatay başlangıç: hücrenin ortası ağzın köşesinden 0.75 hücre içeride dursun
    diye. Değerler işaretin kendi geometrisinden türüyor — ağzın köşesi kutu
    yüksekliğinin 118/478'i kadar sağda ve 226.7/478'i kadar aşağıda
    (_ChompMark.cshtml). Yükseklik 2.6 hücre olduğu için köşe 0.64 hücre sağda
    kalıyor; hücre ortası 0.5 hücrede, aradaki fark bu iki değeri veriyor.

    Neden 0.75 hücre: ağız köşesinde sıfır açıklıkla başlıyor, açıklık
    uzaklıkla büyüyor. Harf köşeye çok yakın dururken çenelerin arasına
    sığmıyor ve görünmez oluyordu.
  */
  inset-inline-start: calc(var(--chomp-cell) * -0.89);
  block-size: calc(var(--chomp-cell) * 2.6);
}

.chomp-mark {
  display: block;
  block-size: 100%;
  inline-size: auto;
  aspect-ratio: 400 / 478;
}

/*
  Çeneler katlama tepesinde döner. Menteşe noktası yol verisiyle aynı düzlemde
  okunsun diye kutu viewBox'ın başlangıcına taşındı (bkz. _ChompMark.cshtml);
  transform-box: view-box'ın referans kutusu da orası.
*/
.chomp-mark__jaw {
  transform-box: view-box;
  transform-origin: 29.9px 307.5px;
}

/*
  Renkler marka işaretiyle aynı: açık yüz --flame, gölge yüz gradyanla
  --flame-fold'a iner. Bant zeminine göre çevrilmiyorlar, çünkü aynı sayfadaki
  header logosu da çevrilmiyor — iki turuncu yan yana ayrışırdı. Gradyan yine
  §3.1'in izin verdiği tek yerde: katlama motifinde.
*/
.chomp-mark__jaw--lit {
  fill: var(--flame);
}

.chomp-mark__stop--fold {
  stop-color: var(--flame-fold);
}

.chomp-mark__stop--flame {
  stop-color: var(--flame);
}

/* --- Tur ---
   Sınıfı chomp.js takar. Takılmazsa lane olduğu gibi durur. */

.chomp.is-eating .chomp__runner {
  animation-name: chomp-travel;
  animation-duration: var(--chomp-run);
  animation-timing-function: linear;
  animation-delay: var(--chomp-lead);
  animation-fill-mode: both;
}

.chomp.is-eating .chomp__food::after {
  animation-name: chomp-trail;
  animation-duration: var(--chomp-run);
  animation-timing-function: linear;
  animation-delay: var(--chomp-lead);
  animation-fill-mode: both;
}

/*
  Çene her hücrede bir kez kapanıp açılır: süre bir hücre. Yarım hücrelik geri
  kaydırma ısırığın hücrenin üstüne denk gelmesi için — kapanma devrenin
  ortasında.

  Tekrar sayısı hücre sayısı kadar, yani tur bittiğinde ağız açık kalır.
  Yarım devir eklenip kapalı bitirmek denendi ve geri alındı: çeneler menteşede
  34°'şer dönünce şekil tanınmaz bir kamaya çöküyor ve kütlesi menteşenin
  yönüne, yani yukarı kayıyor. Logodaki K açık olanı; sayfada kalıcı duran
  kare de o olmalı.
*/
.chomp.is-eating .chomp-mark__jaw {
  animation-duration: var(--chomp-step);
  animation-timing-function: var(--ease-drift);
  animation-delay: calc(var(--chomp-lead) - var(--chomp-step) / 2);
  animation-iteration-count: var(--chomp-count, 1);
  animation-fill-mode: both;
}

.chomp.is-eating .chomp-mark__jaw--lit {
  animation-name: chomp-bite-lit;
}

.chomp.is-eating .chomp-mark__jaw--fold {
  animation-name: chomp-bite-fold;
}

/*
  Hücre, ağız üstüne geldiği anda katlanarak kapanır: scaleX(0) — sitedeki
  açılma hareketinin (mark-unfold) tersi, aynı eksen ve aynı eğri.
*/
.chomp.is-eating .chomp__bit {
  animation-name: chomp-eat;
  animation-duration: calc(var(--chomp-step) * 0.6);
  animation-timing-function: var(--ease-fold);
  animation-delay: calc(var(--chomp-lead) + var(--chomp-index, 0) * var(--chomp-step));
  animation-fill-mode: both;
}

@keyframes chomp-travel {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(var(--chomp-count, 1) * var(--chomp-cell)));
  }
}

@keyframes chomp-trail {
  from {
    scale: 0 1;
  }

  to {
    scale: 1 1;
  }
}

@keyframes chomp-bite-lit {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(var(--chomp-bite));
  }
}

@keyframes chomp-bite-fold {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(calc(var(--chomp-bite) * -1));
  }
}

@keyframes chomp-eat {
  from {
    opacity: 1;
    transform: scaleX(1);
  }

  to {
    opacity: 0;
    transform: scaleX(0);
  }
}

@media (min-width: 40rem) {
  .chomp {
    --chomp-cell: 1.25rem;
  }

  .chomp__bit {
    font-size: var(--text-16);
  }
}

@media (min-width: 64rem) {
  .chomp {
    --chomp-cell: 1.75rem;
  }

  .chomp__bit {
    font-size: var(--text-22);
  }
}

/*
  §3.3: hareket kapanır, katlama geometrisi olduğu gibi kalır. chomp.js bu
  durumda sınıfı hiç takmıyor; kural yine de duruyor ki tercih sayfa açıkken
  değişirse (işletim sistemi ayarı) tur anında dursun ve adres geri gelsin.
*/
@media (prefers-reduced-motion: reduce) {
  .chomp.is-eating .chomp__runner,
  .chomp.is-eating .chomp__food::after,
  .chomp.is-eating .chomp-mark__jaw,
  .chomp.is-eating .chomp__bit {
    animation: none;
  }
}

/* --- Buradan devam edin ---
   404'te ziyaretçi bir yer arıyordu. İki butonun yanına sitenin ana durakları
   da konur: "geri dön" tek seçenek olmasın. */

.error-map {
  inline-size: 100%;
  display: grid;
  gap: var(--space-16);
  padding-block-start: var(--space-24);
  border-block-start: var(--hairline-width) solid var(--band-hairline);
}

.error-map__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.error-map__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-32);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* .arrow-mark varsayılanı açık zemin için (--flame-ember); bant koyu. */
.error-map .arrow-mark {
  color: var(--band-accent);
}

.error-map .arrow-link:hover .arrow-mark {
  color: var(--band-accent);
}

@media print {
  /* Kâğıtta tur yok: adres tam kalır, ağız çizilmez. */
  .chomp__runner,
  .chomp__food::after {
    display: none;
  }

  .chomp.is-eating .chomp__bit {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Ters bandın zemini kâğıda basılmaz; metin siyaha döner. */
  .section--error {
    background: none;
    min-block-size: 0;
  }

  .section--error h1,
  .section--error p,
  .section--error .lede,
  .section--error .eyebrow,
  .section--error .chomp__bit,
  .section--error .arrow-link {
    color: #000;
  }
}

/* ==========================================================================
   16. Yazdırma
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .consent,
  .hero__field,
  .ambient,
  .page-veil {
    display: none;
  }

  body {
    color: #000;
  }

  /*
    Scroll reveal bir süslemedir. Yazdırmada kaydırma diye bir şey yok;
    IntersectionObserver hiç tetiklenmeyeceği için içerik boş sayfa olarak çıkardı.
  */
  [data-reveal],
  [data-reveal-children] > *,
  [data-reveal] .fold-rule,
  [data-reveal] .card__media img,
  [data-reveal-children] > * .fold-rule,
  [data-reveal-children] > * .card__media img {
    opacity: 1 !important;
    transform: none !important;
    mask-image: none !important;
  }
}

/*
  Hukuk belgesi yazdırması. Bu iki sayfa gerçekten dosyalanıyor: ekranda işe
  yarayan dizin rayı ve kapanış çağrısı kâğıtta yalnızca mürekkep harcar,
  koyu bant da öyle. Kâğıtta kalan şey belgenin kendisi.
*/
@media print {
  .legal-index,
  .legal-ask {
    display: none;
  }

  /* Koyu bant kâğıtta düz metne döner. */
  .legal-masthead {
    background: none;
    color: #000;
    padding-block: 0 var(--space-24);
  }

  /*
    .on-dark .lede / .on-dark p (0,2,0) buradaki rengi eziyordu; kâğıtta açık
    gri metin okunmuyor, o yüzden kurallar aynı ağırlıkta yazıldı.
  */
  .legal-masthead h1,
  .legal-masthead p,
  .legal-masthead .lede,
  .legal-masthead .eyebrow,
  .legal-masthead .legal-file__label,
  .legal-masthead .legal-file__value,
  .legal-masthead time {
    color: #000;
  }

  .legal-file {
    border-block-start-color: #999;
  }

  /* İkiz belgeye geçiş bir gezinme öğesi; kâğıtta karşılığı yok. */
  .legal-file__switch {
    display: none;
  }

  /* Katlama kesimi sayfa kenarını yiyor; kâğıtta düz kalır. */
  .legal .fold-top {
    clip-path: none;
    margin-block-start: 0;
    padding-block-start: var(--space-32);
  }

  .legal-sheet__grid {
    display: block;
  }

  /* Plaka payda asılı durmaz, başlığın önünde satır içi kalır. */
  .legal-sheet__grid .legal-article__index {
    position: static;
  }

  /* Madde başlığı sayfanın dibinde tek başına kalmasın. */
  .legal-body .legal-article__heading {
    break-after: avoid;
    page-break-after: avoid;
  }
}