/* ============================================================
   ELVORA GLOBAL — Tasarım Sistemi
   6 sayfanın TEK stil kaynağı. Modül sayfaları arasında
   bileşen sapmasını önlemek için hiçbir sayfada inline stil yok.
   ============================================================ */

/* ---------- 1. TOKEN'LAR ----------
   leftflow.ai referansı: paper/ink açık tema. Elvora'nın vermilion'u zaten
   leftflow'un kendi kırmızısıyla birebir aynıydı (#e8442e) — marka kimliği
   korunuyor, yalnızca zemin/metin rolleri koyu temadan açık temaya dönüyor. */
:root {
  /* Yüzey katmanları: base → elevated → floating (artık açık/"paper") */
  --ink-base: #f2efe7;
  --ink-elevated: #ffffff;
  --ink-floating: #fffcf6;

  /* Mürekkep metin skalası (koyu, açık zemin üstünde) */
  --bone: #14130f;
  --bone-dim: rgba(20, 19, 15, 0.66);
  --bone-faint: rgba(20, 19, 15, 0.42);
  --bone-hair: rgba(20, 19, 15, 0.12);

  /* Aksan — vermilion (leftflow ile birebir aynı kırmızı) */
  --vermilion: #e8442e;
  --vermilion-hot: #ff5a42;
  --vermilion-deep: #8f2a1c;
  --vermilion-wash: rgba(232, 68, 46, 0.08);

  /* Tipografi */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-sans: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing token'ları — rastgele adım yok */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 160px;

  /* Katmanlı, vermilion-tinted gölgeler — açık zeminde düşük opaklık,
     düz shadow-md yok */
  --shadow-card:
    0 1px 2px rgba(20, 19, 15, 0.04),
    0 10px 24px -8px rgba(20, 19, 15, 0.12),
    0 24px 48px -16px rgba(232, 68, 46, 0.08);
  --shadow-lift:
    0 2px 6px rgba(20, 19, 15, 0.08),
    0 20px 40px -12px rgba(20, 19, 15, 0.16),
    0 36px 72px -20px rgba(232, 68, 46, 0.14);
  --shadow-btn:
    0 1px 2px rgba(20, 19, 15, 0.16),
    0 10px 24px -6px rgba(232, 68, 46, 0.38);

  /* Spring easing — tek geçiş dili */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-pill: 999px;
  /* leftflow referansı: dolgun/çembere yakın köşe yerine daha keskin,
     resmi bir dil — kart/panel köşeleri belirgin şekilde küçültüldü. */
  --radius-card: 8px;
  --edge: 1.5px solid rgba(20, 19, 15, 0.14);
  --measure: 1320px;

  /* Kağıt hissi: leftflow.ai'nin gerçek CSS'inden çıkarıldı (lf-grain /
     lf-grid-l / lf-grid-d). Açık zeminde multiply (dokuyu koyulaştırıp
     sarıya kaçan bir kağıt lifi hissi verir), koyu zeminde screen
     (çok düşük opaklıkla hafifçe aydınlatır). */
  --grain-blend: multiply;
  --grain-opacity: 0.28;
  --grid-line: rgba(20, 19, 15, 0.05);
}

/* ---------- 2. RESET & TEMEL ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Her sayfanın ilk gördüğü şey koyu masthead+hero — sayfalar arası geçişte
     (tam sayfa yeniden yükleme) beyaz/krem çakma yerine bu koyu zemin görünsün.
     Token yerine sabit değer: burada amaç herhangi bir section'ın rengini
     yansıtmak değil, yükleme anındaki "boş" zeminin her zaman koyu olması. */
  background: #14130f;
  /* Kaydırma çubuğu için her zaman yer ayır. Aksi halde preloader
     kilidi (.is-loading → overflow:hidden) kalkınca çubuk birden
     belirir, sayfa genişliği değişir ve hero içeriği kayar — canlıda
     ölçülen 0.394 CLS'in asıl nedeni buydu (font-swap değil). */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  background: #14130f;
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `hidden` (bir eksende) tarayıcıda diğer ekseni örtük olarak `auto`
     kaydırma kutusuna çeviriyor — bu da içerideki position:sticky
     öğelerinin (ör. iletişim formunun yanındaki sabit metin) referans
     aldığı kaydırma bağlamını bozup onları sabitlenmeden kaydırıyordu.
     `clip` aynı görsel taşma-gizleme etkisini verir, bu yan etkisi yok. */
  overflow-x: clip;
  /* Her sayfa yüklemesinde hafif giriş — reduced-motion global kural
     tarafından animation-duration: 0.01ms'e indirilir, ayrı bir override
     gerekmez. */
  animation: page-fade-in 0.5s var(--ease-out) both;
  /* Zemine derinlik veren katmanlı radial gradient'ler */
  background-image:
    radial-gradient(ellipse 900px 600px at 12% -5%, rgba(232, 68, 46, 0.09), transparent 70%),
    radial-gradient(ellipse 700px 500px at 88% 8%, rgba(143, 42, 28, 0.1), transparent 68%),
    radial-gradient(ellipse 1100px 700px at 50% 105%, rgba(232, 68, 46, 0.05), transparent 72%);
  background-attachment: fixed;
}

/* ---------- KAĞIT DOKUSU (.grain) + IZGARA (.grid-lines) ----------
   leftflow.ai'nin gerçek CSS'inden birebir çıkarıldı: feTurbulence noise
   + blend-mode. .tone-dark/.tone-paper2 içindeki --grain-*/--grid-line
   token override'larıyla otomatik doğru tona uyuyor — section'a eklenen
   tek class yeterli, sıfırdan hesap gerekmiyor. */
.grain { isolation: isolate; position: relative; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ::before overlay (değil doğrudan background-image) — böylece .footer/.cta-band
   gibi kendi `background` shorthand'ını geç tanımlayan sınıflarla birleşince
   ezilmiyor; kaynak sırasından bağımsız her zaman görünür kalıyor. */
.grid-lines { isolation: isolate; position: relative; }
.grid-lines::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
}

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

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

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

::selection {
  background: var(--vermilion);
  color: #fff;
}

/* Erişilebilirlik: hareketi azalt tercihi */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  z-index: 10000;
  background: var(--vermilion);
  color: #fff;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus-visible { left: var(--s-3); }

/* ---------- 3. TİPOGRAFİ ---------- */
.display-xl,
.display-l,
.display-m {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-wrap: balance;
}

/* clamp() ile akışkan skala — mobile-first, taşma yok */
.display-xl { font-size: clamp(2.75rem, 8.5vw, 7.25rem); }
.display-l  { font-size: clamp(2.25rem, 5.6vw, 4.5rem); }
.display-m  { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1; }

/* Serif italik — editorial vurgu */
.accent-italic {
  font-style: italic;
  color: var(--vermilion);
}

/* Mono mikro-etiket — bölüm numaraları, kicker'lar */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.label--accent { color: var(--vermilion); }

.label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.label--bare::before { display: none; }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--bone-dim);
  max-width: 62ch;
}

.body-text {
  color: var(--bone-dim);
  line-height: 1.7;
  max-width: 68ch;
}

/* ---------- 4. LAYOUT ---------- */
.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--s-3);
}
@media (min-width: 768px) {
  .shell { padding-inline: var(--s-4); }
}

.section {
  /* Body zemini (üstteki koyu masthead/hero ile aynı, sayfa geçişinde
     flaş olmasın diye) sabit koyu — tone-dark/tone-paper2 taşımayan
     bölümler bunu miras almasın diye kendi açık zeminini burada tanımlar. */
  background: var(--ink-base);
  padding-block: var(--s-6);
  position: relative;
}
@media (min-width: 768px) {
  .section { padding-block: var(--s-7); }
}

.section--tight { padding-block: var(--s-5); }

/* Bölüm ayıracı — görüş alanına girince soldan vermilion bir iz çizilir */
.rule {
  height: 1px;
  background: var(--bone-hair);
  border: 0;
  position: relative;
  overflow: hidden;
}
.rule::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Tam güçte vermilion çizgi bölüm aralarını kırmızı barlara çeviriyordu —
     kısa ve yarı saydam bir iz olarak bırakıldı. */
  background: linear-gradient(90deg, rgba(232, 68, 46, 0.6), transparent 34%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s var(--ease-out);
}
.js .rule.is-in::after { transform: scaleX(1); }
/* JS yoksa iz hiç çizilmez — ayıraç yine görünür durumda kalır */

/* Bölüm başlığı — mono numara üstte, başlık altında.
   Sola hizalı: hero, kartlar ve gövde metniyle aynı optik kenarda durur. */
.section-head {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  margin-bottom: var(--s-5);
}
/* ch birimi başlığın kendi fontuna göre ölçülür — display-l üzerinde uygula,
   container'da uygulanırsa sans 16px'e göre hesaplanıp aşırı daralır. */
.section-head .display-l { max-width: 22ch; }

/* leftflow referansı: başlık solda, açıklama sağda yan yana — karşılaştırma
   tablosu gibi geniş içerikli bölümlerde dikey stack yerine kullanılır. */
.section-head--split {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  margin-bottom: var(--s-5);
}
.section-head--split .body-text { max-width: 46ch; color: var(--bone-dim); }
@media (min-width: 860px) {
  .section-head--split {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
  }
  .section-head--split .body-text { justify-self: end; text-align: left; }
}

/* Bölüm içi ikincil başlık — ana başlıktan sonra gelen alt gruplar için */
.section-head--sub {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
}
.section-head--sub .display-m { max-width: 26ch; }

/* İki kolonlu gövde metni — .section-head'i bu iş için kullanmak yerine */
.prose-duo {
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 900px) {
  .prose-duo {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }
}

/* 01/Sorun bölümü: problem metni bir tarafta, çözüm kutusu diğer tarafta —
   ikisi üst üste yığılıp dağınık durmasın diye yan yana konumlanıyor. */
.sorun-layout {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}
@media (min-width: 900px) {
  .sorun-layout { grid-template-columns: 1fr 380px; gap: var(--s-5); }
}
.sorun-layout__text {
  display: grid;
  gap: var(--s-3);
}
/* Çözüm kutusu satırın tepesine sabitlensin — metin daha uzun olduğunda
   kutu aşağı kaymasın, her zaman başlıkla hizalı dursun. */
.sorun-layout > .pitch { align-self: start; }

/* ---------- 5. BUTONLAR — tek stil, iki varyant ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 15px var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--vermilion);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  /* Yalnız transform + opacity animasyonu (+ renk geçişleri) */
  transition:
    transform 0.45s var(--ease-spring),
    opacity 0.25s linear,
    background-color 0.25s linear,
    border-color 0.25s linear,
    box-shadow 0.45s var(--ease-spring);
}
.btn:hover {
  background: var(--vermilion-hot);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}
.btn:active {
  transform: translateY(0) scale(0.985);
  background: var(--vermilion-deep);
}

.btn__arrow {
  transition: transform 0.45s var(--ease-spring);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* İkincil varyant */
.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--bone-faint);
  box-shadow: none;
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--vermilion);
  color: var(--vermilion);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn--ghost:active {
  background: var(--vermilion-wash);
  transform: translateY(0) scale(0.985);
}

/* Metin linki — alt çizgi büyüyen */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  padding-block: 4px;
  position: relative;
  transition: color 0.25s linear;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.45s var(--ease-spring);
}
.link-arrow:hover { color: var(--vermilion); }
.link-arrow:hover::after { transform: scaleX(0.72); }
.link-arrow:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 4px;
  border-radius: 2px;
}
.link-arrow:active { opacity: 0.7; }

/* ---------- 6. KART — tek stil, hover'da açılır ---------- */
.card-grid {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Yatay kaydırmalı kart şeridi — ana sayfa Sistemler önizlemesi için.
   Dikey grid yerine kartlar arası kaydırma hissi: sayfa bütünlüğünü bozan
   "alt alta" yığılma yerine yana doğru akan bir şerit. */
.card-scroll {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  padding-inline: var(--s-3);
  padding-bottom: var(--s-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bone-hair) transparent;
}
@media (min-width: 768px) {
  .card-scroll {
    scroll-padding-inline: var(--s-4);
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
  }
}
.card-scroll::-webkit-scrollbar { height: 6px; }
.card-scroll::-webkit-scrollbar-track { background: transparent; }
.card-scroll::-webkit-scrollbar-thumb { background: var(--bone-hair); border-radius: 3px; }
.card-scroll .card {
  flex: 0 0 272px;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .card-scroll .card { flex: 0 0 310px; }
}

/* Kart içi ince akış çizgileri — hero'daki .aura__flow ile aynı dil, minyatür
   ölçekte. isolation:isolate + z-index:-1 sayesinde metnin her zaman üstünde
   kalması garanti; salt dekoratif katman. */
.card__flow {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  /* Sabit yükseklik dayatmıyor — .card-scroll'un flex satırı zaten en
     uzun karta göre eşit boy veriyor, içerik kısa diye ortada boşluk
     açılmasın diye burada zorlama yok. */
  padding: var(--s-3);
  background: var(--ink-elevated);
  border: var(--edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.55s var(--ease-spring),
    background-color 0.3s linear,
    box-shadow 0.55s var(--ease-spring);
}
@media (min-width: 768px) {
  .card { padding: var(--s-4) var(--s-3); }
}

/* Hover'da imleci takip eden vermilion ışıma — --x/--y elvora.js'te
   cardSpotlight() tarafından güncellenir, JS yoksa üstten merkezi kalır. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px circle at var(--x, 50%) var(--y, 0%), var(--vermilion-wash), transparent 70%);
  opacity: 0;
  transition: opacity 0.55s var(--ease-spring);
}

/* Sabit border rengi kalır (border-color flip dated hissettiriyordu),
   ama sıcak/derin bir gölge + kalkış + spotlight birlikte konuşuyor. */
.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  background: var(--ink-floating);
  box-shadow: var(--shadow-lift);
}
.card:hover::before,
.card:focus-within::before { opacity: 1; }

.card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--vermilion);
}

.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.card__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--bone-dim);
}

/* Açıklama her zaman görünür — kartın doğal akışında, üstteki fiyat/süre
   etiketlerinden sabit bir aralıkla ayrılıyor (auto-margin yok, kartın
   ortasında boşluk açılmasın diye). */
.card__reveal { margin-top: 0; }

/* Kart içi sahte link — hit alanı kartın tamamı, bu yalnız görsel ipucu.
   Artık hover beklemiyor: her kart durağan halde de nereye tıklanacağını
   söylüyor, hover/focus yalnız vermilion renk vurgusu ekliyor. */
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-block: 4px;
  position: relative;
  transition: color 0.25s linear;
}
.card__cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.45s var(--ease-spring);
}
.card:hover .card__cta,
.card:focus-within .card__cta { color: var(--vermilion); }
.card:hover .card__cta::after,
.card:focus-within .card__cta::after { transform: scaleX(0.72); }

/* "Yeni modüller" placeholder kartı — kesikli, boş durum */
.card--soon {
  background: transparent;
  border-style: dashed;
  border-color: var(--bone-faint);
  box-shadow: none;
  /* Kardeş kartlarla aynı dikey ritim — kendi hizalamasını kurmaz */
}
.card--soon:hover {
  background: transparent;
  border-color: var(--vermilion);
  box-shadow: none;
}

/* Tıklanabilir kartın tamamını kaplayan görünmez link */
.card__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.card__hit:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: -2px;
}

/* ---------- 7. LİSTE / ADIM DÜZENİ ---------- */
.steps {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); } }

.step {
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--bone-faint);
  position: relative;
  transition: border-color 0.3s linear;
}
.step:hover { border-color: var(--vermilion); }

/* Adımlar arası ilerleme oku — leftflow referansı, yalnız tek satıra
   dizildiği masaüstünde anlamlı; HTML değişikliği gerekmez. */
@media (min-width: 1080px) {
  .step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: calc(var(--s-3) + 21px);
    right: calc(var(--s-3) / -2);
    transform: translate(50%, -50%);
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--bone-faint);
    pointer-events: none;
  }
}

/* Üst kenarda görüş alanına girince soldan dolan vermilion pay */
.step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 68, 46, 0.75), transparent 78%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}
.js .step.is-in::before { transform: scaleX(1); }

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--vermilion);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--s-2);
  transition: transform 0.5s var(--ease-spring);
}
.step:hover .step__num { transform: translateX(var(--s-1)); }
.step__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-1);
}
.step__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--bone-dim);
}

/* Mono etiketli madde listesi */
.spec-list { list-style: none; display: grid; gap: 0; }
.spec-list > li {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--bone-hair);
  position: relative;
  transition: transform 0.5s var(--ease-spring);
}
/* Satır üzerine gelince soldan vermilion bir kılavuz belirir */
.spec-list > li::before {
  content: '';
  position: absolute;
  left: calc(var(--s-3) * -1);
  top: var(--s-3);
  bottom: var(--s-3);
  width: 2px;
  background: var(--vermilion);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-spring);
}
@media (hover: hover) {
  .spec-list > li:hover { transform: translateX(var(--s-1)); }
  .spec-list > li:hover::before { transform: scaleY(1); }
}
@media (min-width: 700px) {
  .spec-list > li {
    grid-template-columns: 180px 1fr;
    gap: var(--s-4);
    align-items: baseline;
  }
}
.spec-list__key {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermilion);
}
.spec-list__val { color: var(--bone-dim); line-height: 1.7; }

/* ---------- 8. HEADER ---------- */
/* leftflow referansı: header en üstte tamamen şeffaf, yalnız kaydırılınca
   koyu frosted zemin kazanıyor (elvora.js masthead .is-stuck ekliyor).
   Header artık her sayfada tone-dark — metin/ikonlar her zaman açık renk. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.3s linear,
    background-color 0.3s linear,
    backdrop-filter 0.3s linear;
}
/* leftflow referansı: kaydırılınca header koyu kalmaz, açık/beyaz zemine
   döner — metin ve dropdown panelleri de buna göre koyulaşır. */
.masthead.is-stuck {
  border-bottom-color: rgba(20, 19, 15, 0.1);
  background: rgba(242, 239, 231, 0.92);
  /* Zemin zaten %92 opak — büyük blur yarıçapı görsel olarak neredeyse
     fark edilmiyor ama her scroll frame'inde arka planı yeniden
     örneklemek zorunda kalıyor (backdrop-filter'ın en pahalı kısmı).
     8px, sabit header'ın kaydırma sırasında sürekli aktif olan bu
     maliyetini gözle görülür şekilde düşürüyor. */
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  --ink-base: #f2efe7;
  --ink-elevated: #ffffff;
  --ink-floating: #fffdf8;
  --bone: #14130f;
  --bone-dim: rgba(20, 19, 15, 0.66);
  --bone-faint: rgba(20, 19, 15, 0.4);
  --bone-hair: rgba(20, 19, 15, 0.12);
}
.masthead.is-stuck .btn {
  border-color: rgba(20, 19, 15, 0.3);
  color: #14130f;
}
.masthead.is-stuck .btn:hover {
  background: #14130f;
  color: #f2efe7;
  border-color: #14130f;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 76px;
}
/* Mobilde nav+btn gizlenince yalnız wordmark/lang/burger kalıyor —
   space-between dil seçiciyi ortada bırakıyordu. Burger'a yasla. */
@media (max-width: 959.98px) {
  .masthead__inner { justify-content: flex-start; }
  .lang { margin-left: auto; }
}

/* Wordmark — gerçek logo brand_assets/'e gelince değiştirilir */
.wordmark {
  font-family: var(--font-display);
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  transition: opacity 0.25s linear;
}
.wordmark:hover { opacity: 0.72; }
.wordmark:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 6px;
  border-radius: 2px;
}
.wordmark:active { opacity: 0.55; }
.wordmark__dot { color: var(--vermilion); }
.wordmark__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-left: var(--s-1);
  align-self: center;
}

.nav {
  display: none;
  align-items: center;
  gap: 2px;
}
@media (min-width: 1240px) { .nav { display: flex; } }

/* leftflow referansı: mono/uppercase/altı çizili değil — sans, küçük,
   sıkı tracking, düz opaklık geçişi. */
.nav__link {
  position: relative;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bone-dim);
  padding: 8px 14px;
  transition: color 0.25s linear;
}
.nav__link:hover { color: var(--bone); }
.nav__link:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: -2px;
  border-radius: 2px;
}
.nav__link:active { opacity: 0.6; }
.nav__link[aria-current='page'] { color: var(--bone); }

/* ---------- NAV DROPDOWN — "Çözümler" tek girişte toplanır ----------
   Beş ayrı üst menü linki (Studio/Vision/Identity/Flow/CVO) tek bir
   açılır panele indirildi. Görünürlük visibility+opacity ile yönetilir
   (display:none yerine) ki transform/opacity geçişi çalışsın ve panel
   kapalıyken klavye ile odaklanılamasın. */
/* padding-bottom + negatif margin: trigger ile panel arasındaki boşluk
   görsel olarak kalıyor ama hoverable kutu kesintisiz — imleç panele
   giderken boşlukta hover kaybolup menü kapanmıyor. */
.nav__dropdown {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: -18px;
}

.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.nav__chevron {
  width: 9px;
  height: 9px;
  transition: transform 0.35s var(--ease-spring);
}
.nav__dropdown.is-open .nav__chevron { transform: rotate(180deg); }
.nav__dropdown.is-open .nav__dropdown-trigger { color: var(--bone); }

.nav__dropdown-panel {
  position: absolute;
  /* .nav__dropdown'ın padding-bottom'u zaten 18px boşluk bırakıyor */
  top: 100%;
  left: 50%;
  translate: -50% -6px;
  z-index: 110;
  width: max-content;
  min-width: 260px;
  padding: var(--s-1);
  border: var(--edge);
  border-radius: var(--radius-card);
  background: var(--ink-elevated);
  box-shadow: var(--shadow-lift);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease-out),
    translate 0.4s var(--ease-spring),
    visibility 0s linear 0.3s;
}
/* leftflow referansı: imleç değince anında açılır — .is-open (tık/klavye)
   JS'siz de çalışan bir yedek, hover ise fare için gecikmesiz tetikleyici. */
.nav__dropdown:hover .nav__dropdown-panel,
.nav__dropdown.is-open .nav__dropdown-panel {
  visibility: visible;
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
  transition:
    opacity 0.3s var(--ease-out),
    translate 0.4s var(--ease-spring),
    visibility 0s linear;
}

.nav__dropdown-item {
  display: grid;
  gap: 2px;
  padding: 10px var(--s-2);
  border-radius: 3px;
  transition: background-color 0.2s linear;
}
.nav__dropdown-item:hover,
.nav__dropdown-item:focus-visible { background: var(--ink-floating); }
.nav__dropdown-item:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: -2px;
}
.nav__dropdown-item:active { opacity: 0.7; }
.nav__dropdown-name {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bone);
}

/* leftflow referansı: Endüstriler paneli tek sütun liste değil, 3 sütunlu
   düz isim grid'i — modül alt yazısı yok, sade. */
.nav__dropdown-panel--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: max-content;
  min-width: 420px;
}
.nav__dropdown-panel--grid .nav__dropdown-item { padding: 9px 14px; }
.nav__dropdown-item[aria-current='page'] .nav__dropdown-name { color: var(--vermilion); }
.nav__dropdown-desc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* leftflow referansı: header CTA'sı dolu vermilion hap değil, keskin
   köşeli, ince çerçeveli bir ghost buton — hover'da dolu beyaza döner. */
.masthead .btn {
  display: none;
  padding: 8px 20px;
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(242, 239, 231, 0.3);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  box-shadow: none;
}
.masthead .btn:hover {
  background: var(--bone);
  color: #14130f;
  border-color: var(--bone);
  transform: none;
  box-shadow: none;
}
.masthead .btn:active { background: rgba(242, 239, 231, 0.85); transform: none; }
@media (min-width: 1240px) { .masthead .btn { display: inline-flex; } }

/* Mobil menü aç/kapa — her zaman fark edilir bir "chip" zemini var, artık
   yalnızca ince çizgilere (kolayca kaybolan) güvenmiyor. Açıkken vermilion
   dolgu + X'e dönüşüm. */
.burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--bone-hair);
  border: 1px solid var(--bone-hair);
  border-radius: 12px;
  cursor: pointer;
  transition:
    background-color 0.3s linear,
    border-color 0.3s linear,
    transform 0.45s var(--ease-spring);
}
@media (min-width: 1240px) { .burger { display: none; } }
.burger:hover { border-color: var(--bone-faint); }
.burger:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }
.burger:active { transform: scale(0.94); }
.burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--bone);
  transition: transform 0.45s var(--ease-spring), opacity 0.25s linear, background-color 0.3s linear;
}
.burger[aria-expanded='true'] {
  background: var(--vermilion);
  border-color: var(--vermilion);
}
.burger[aria-expanded='true'] span { background: #fff; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Panel artık sayfayı aşağı itmiyor — sağdan kayan, arka planı karartan
   bir "drawer". ::before backdrop'u ayrı bir DOM öğesi gerektirmiyor, bu
   yüzden her sayfada aynı markup'a dokunmadan çalışıyor. JS önce hidden'ı
   kaldırır, sonra .is-open ekler (bkz. mobileNav()); kapanışta body kilidi
   de aynı anda kalkıyor. */
.mobile-nav {
  position: fixed;
  top: 76px;
  right: 0;
  /* .masthead'in (100) altında kalmalı: panel kendi stacking context'ini
     kurduğu için z-index:-1 olan ::before backdrop'u da (context'in İÇİNDE
     kalsa bile, dışarıdan bakıldığında context'in kendi seviyesinde
     davranır) header'ın üstüne biner — açıkken burger/X'e dokunulamaz
     hale gelirdi. */
  z-index: 90;
  display: grid;
  align-content: start;
  gap: 2px;
  width: min(88vw, 400px);
  /* `bottom: 0` yerine açık yükseklik: mobil tarayıcılarda adres çubuğu
     gösterilip gizlendikçe "layout viewport" ile gerçekte görünen alan
     birbirinden ayrışıyor, `bottom:0` o zaman panelin alt kısmını (CTA
     butonu dahil) ekranın dışına/tarayıcı arayüzünün altına itebiliyor.
     `dvh` gerçek görünür yüksekliği izler — desteklemeyen tarayıcılar
     için `vh` satırı geriye dönük yedek. */
  height: calc(100vh - 76px);
  height: calc(100dvh - 76px);
  padding: var(--s-4) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--ink-elevated);
  /* --shadow-lift'in geniş, bulanık kırmızı-katmanlı gölgesi panelin sol
     kenarında karartılmış arka planla karışıp beyazı grimsi gösteriyordu.
     Kenar zaten koyu backdrop'a karşı kendini net tanımlıyor — tek,
     dar bir gölge kenarı belirginlik için yeterli. */
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  translate: 100% 0;
  transition: translate 0.5s var(--ease-spring);
}
.mobile-nav.is-open { translate: 0 0; }
.mobile-nav[hidden] { display: none; }

/* Karartma katmanı artık ::before değil, gerçek ayrı bir öğe (elvora.js
   ekliyor). Sebep: negatif z-index'li bir pseudo-element, ebeveyninin
   KENDİ arka planının ARKASINA değil ÖNÜNE boyanıyor (CSS boyama sırası:
   1. kurucu öğenin arka planı, 2. negatif z-index'li torunlar) — bu
   yüzden panel beyaz olsa da üstüne %60 karartma binip griye
   dönüştürüyordu (ölçüldü: rgb(255,255,255) + %60 rgba(8,7,5) = tam
   gözlenen rgb(107,106,105)). Ayrı, panelden ÖNCE gelen bir kardeş öğe
   olunca artık panelin arkasında kalıyor. */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(8, 7, 5, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.mobile-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1240px) { .mobile-nav { display: none !important; } }

/* Üst seviye ögeler kademeli belirir — alt-menüdeki linkler bu kademeye
   dahil değil. */
.mobile-nav > * {
  opacity: 0;
  translate: 16px 0;
  transition: opacity 0.35s var(--ease-out), translate 0.4s var(--ease-spring);
}
.mobile-nav.is-open > * { opacity: 1; translate: 0 0; }
.mobile-nav > *:nth-child(1) { transition-delay: 0.05s; }
.mobile-nav > *:nth-child(2) { transition-delay: 0.09s; }
.mobile-nav > *:nth-child(3) { transition-delay: 0.13s; }
.mobile-nav > *:nth-child(4) { transition-delay: 0.17s; }
.mobile-nav > *:nth-child(5) { transition-delay: 0.21s; }
.mobile-nav > *:nth-child(6) { transition-delay: 0.25s; }
.mobile-nav > *:nth-child(7) { transition-delay: 0.29s; }
.mobile-nav > *:nth-child(8) { transition-delay: 0.33s; }

/* Sekmeler artık okunaklı bir menü satırı gibi — küçük mono/uppercase
   "spec sheet" hissi yerine gerçek uygulama tipografisi. */
.mobile-nav a {
  display: flex;
  align-items: center;
  padding-block: 15px;
  border-bottom: 1px solid var(--bone-hair);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bone);
  transition: color 0.25s linear, padding-left 0.3s var(--ease-spring);
}
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--vermilion); padding-left: var(--s-1); }
.mobile-nav a:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
.mobile-nav a:active { opacity: 0.6; }
/* Masaüstü header'ındaki ghost CTA'nın (.masthead .btn) birebir aynısı —
   dolu vermilion hap değil, ince çerçeveli/şeffaf buton. Sabit renk yerine
   token kullanılıyor (--bone/--bone-faint) çünkü bu buton panelin kendi
   tone-dark/açık geçişiyle birlikte otomatik doğru kontrasta geçmeli. */
.mobile-nav .btn {
  display: flex;
  margin-top: var(--s-4);
  width: 100%;
  justify-content: center;
  padding: 15px var(--s-4);
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--bone-faint);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  box-shadow: none;
}
.mobile-nav .btn:hover {
  background: var(--bone);
  color: var(--ink-elevated);
  border-color: var(--bone);
  transform: none;
  box-shadow: none;
}
.mobile-nav .btn:active { opacity: 0.85; transform: none; }

/* "Çözümler" alt-akordeonu — ürün linkleri Hakkımızda/İletişim'den ayrı */
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 15px;
  border: 0;
  border-bottom: 1px solid var(--bone-hair);
  background: none;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bone);
  cursor: pointer;
  transition: color 0.25s linear;
}
.mobile-nav__toggle:hover { color: var(--vermilion); }
.mobile-nav__toggle:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
.mobile-nav__group.is-open .mobile-nav__toggle { color: var(--vermilion); }

.mobile-nav__chevron { width: 11px; height: 11px; flex: none; transition: transform 0.35s var(--ease-spring); }
.mobile-nav__group.is-open .mobile-nav__chevron { transform: rotate(180deg); }

.mobile-nav__submenu {
  display: grid;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s var(--ease-spring), opacity 0.3s var(--ease-out);
}
.mobile-nav__group.is-open .mobile-nav__submenu { max-height: 480px; opacity: 1; }
.mobile-nav__submenu a {
  padding-block: 13px;
  padding-left: var(--s-3);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--bone-dim);
}
.mobile-nav__submenu a:hover { color: var(--vermilion); }

/* ---------- 8.5 YAY ALANI (hero + CTA arka planı) ----------
   Açılış ekranındaki dönen vermilion yayların büyük ölçekli hâli.
   Kareler rastgele hücre seçtiği için kompozisyonu yoktu; yaylar
   sabit bir merkeze demirlenir, yalnız döner. Tamamen CSS —
   JS gerekmez, dolayısıyla script çökse de arka plan durur. */
.aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Yay kümesi: hero'nun boş sağ tarafına demirlenir */
.aura__field {
  position: absolute;
  top: 50%;
  left: 74%;
  width: clamp(560px, 82vw, 1180px);
  aspect-ratio: 1;
  /* --parallax-y: JS scroll'a göre günceller (elvora.js auraParallax) */
  translate: -50% calc(-50% + var(--parallax-y, 0px));
  /* Metnin olduğu sola doğru sönümlenir, kenarlarda vinyet */
  mask-image:
    linear-gradient(to right, transparent 14%, rgba(0, 0, 0, 0.4) 42%, #000 72%),
    radial-gradient(closest-side, #000 58%, transparent 96%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 14%, rgba(0, 0, 0, 0.4) 42%, #000 72%),
    radial-gradient(closest-side, #000 58%, transparent 96%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  /* Bütün kümede çok yavaş nefes */
  animation: aura-breathe 17s ease-in-out infinite;
}

.aura__svg { width: 100%; height: 100%; overflow: visible; }

.aura__ring {
  fill: none;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

/* Her halka farklı hız ve yönde — desen sürekli yeniden kurulur */
.aura__ring--1 {
  stroke: var(--vermilion);
  stroke-width: 1.5;
  stroke-opacity: 0.55;
  stroke-dasharray: 300 130 70 190;
  animation: aura-spin 34s linear infinite;
}
.aura__ring--2 {
  stroke: var(--vermilion-hot);
  stroke-width: 1.25;
  stroke-opacity: 0.4;
  stroke-dasharray: 150 250 44 96;
  animation: aura-spin-back 46s linear infinite;
}
.aura__ring--3 {
  stroke: var(--vermilion);
  stroke-width: 1;
  stroke-opacity: 0.28;
  stroke-dasharray: 470 170 80 230;
  animation: aura-spin 58s linear infinite;
}
.aura__ring--4 {
  stroke: var(--vermilion);
  stroke-width: 0.9;
  stroke-opacity: 0.18;
  stroke-dasharray: 96 430;
  animation: aura-spin-back 74s linear infinite;
}
/* İnce noktalı iç halka — dokuyu kırar */
.aura__ring--dot {
  stroke: var(--bone);
  stroke-width: 1;
  stroke-opacity: 0.1;
  stroke-dasharray: 2 22;
  animation: aura-spin 96s linear infinite;
}

/* Yaylar üzerinde dolanan iki düğüm — açılış ekranındaki noktanın yankısı */
.aura__orbit {
  transform-box: fill-box;
  transform-origin: center;
}
.aura__orbit--a { animation: aura-spin 20s linear infinite; }
.aura__orbit--b { animation: aura-spin-back 28s linear infinite; }
.aura__orbit--c { animation: aura-spin 16s linear infinite; }
.aura__node { fill: var(--vermilion-hot); }
.aura__node--soft { fill: var(--vermilion); opacity: 0.5; }

/* Arkada yavaş nabız atan sıcak ışıma */
.aura__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(232, 68, 46, 0.16), transparent 72%);
  animation: aura-pulse 11s ease-in-out infinite;
}

/* ---------- Akan çizgiler — leftflow.ai referansı, ikinci geçiş ----------
   Aurora (bulanık dönen daire) karmaşık bulundu ve overflow:hidden + blur
   birleşiminde hero/ticker sınırında bir karartı kesiği yaratıyordu — o
   yaklaşım tamamen kaldırıldı. leftflow'un GERÇEK oranına dönüldü: 5
   çizginin 4'ü çok soluk krem (~%13 opaklık), yalnız BİRİ vermilion aksan.
   Önceki iki denemede birden fazla renkli çizgi vardı, o yüzden "karmaşık"
   okunuyordu — tek aksan kuralı bu sefer bilinçli olarak korunuyor. */
.aura__flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.aura__flow-line {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 600 600;
  animation: aura-flow 9s linear infinite;
}
@keyframes aura-flow { from { stroke-dashoffset: 1200px; } to { stroke-dashoffset: 0; } }

@keyframes aura-spin      { to { rotate: 360deg; } }
@keyframes aura-spin-back { to { rotate: -360deg; } }
@keyframes aura-breathe   { 50% { scale: 1.03; } }
@keyframes aura-pulse     { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------- Hero ağ katmanı — elvora.js auraNetwork() enjekte eder ----------
   "AI ekosistemi" mesajını somutlaştırır: sabit yaylara ek olarak birbirine
   bağlı düğümler — bağlantılar sırayla çizilip söner, düğümler parıldar.
   Yalnız hero'da (bkz. JS seçici); CTA bandı sakin kalıyor. */
.aura__network {
  transform-box: view-box;
  transform-origin: 500px 500px;
  animation: aura-spin 260s linear infinite;
}
.aura__net-line {
  fill: none;
  stroke: var(--vermilion-hot);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0;
  animation: aura-net-pulse 8s ease-in-out infinite;
}
.aura__net-node {
  fill: var(--vermilion-hot);
  transform-box: fill-box;
  transform-origin: center;
  animation: aura-net-twinkle 5s ease-in-out infinite;
}
@keyframes aura-net-pulse {
  0%, 100% { opacity: 0; stroke-dashoffset: var(--len, 0); }
  22% { opacity: 0.6; stroke-dashoffset: 0; }
  68% { opacity: 0.6; stroke-dashoffset: 0; }
  88% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes aura-net-twinkle {
  0%, 100% { opacity: 0.35; scale: 1; }
  50% { opacity: 1; scale: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .aura__network { animation: none; }
}

/* Ekran dışına çıkan aura/card__flow bloklarını dondur (bkz. elvora.js
   pauseOffscreenAnimations) — bu bloklardaki halkalar/düğümler/çizgiler
   sürekli dönen ve stroke-dashoffset animasyonu (compositor'a taşınamaz,
   her karede yeniden boyanır) kullanan onlarca eleman içeriyor. Sayfa
   başına 2 aura + kart başına 2 çizgi × 6 kart derken görünmeseler bile
   arka planda boyamaya devam ediyorlardı — asıl "FPS düşük" hissinin
   kaynağı buydu. */
.is-offscreen,
.is-offscreen * {
  animation-play-state: paused !important;
}

/* CTA bandı: küçük ve sakin, sağ alt köşeye demirli */
.cta-band .aura__field {
  top: 66%;
  left: 80%;
  width: clamp(460px, 68vw, 940px);
  animation-duration: 23s;
}
.cta-band .aura__ring { stroke-opacity: 0.3; }
.cta-band .aura__ring--dot { stroke-opacity: 0.08; }
.cta-band .aura__glow { display: none; }

/* Mobil: kümeyi ortala, biraz kıs */
@media (max-width: 700px) {
  .aura__field {
    left: 62%;
    top: 44%;
    width: 132vw;
  }
  .aura__field {
    mask-image: radial-gradient(closest-side, #000 45%, transparent 92%);
    -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 92%);
  }
  .aura__ring { stroke-opacity: 0.22; }
  .cta-band .aura__field { left: 74%; top: 82%; width: 118vw; }
}

/* Hareket azaltma: yaylar durur ama görünür kalır */
@media (prefers-reduced-motion: reduce) {
  .aura__field,
  .aura__ring,
  .aura__orbit,
  .aura__glow,
  .aura__flow-line { animation: none; stroke-dashoffset: 0; }
}
/* ---------- 9. HERO ---------- */
.hero {
  position: relative;
  padding-block: var(--s-6) var(--s-6);
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero { padding-block: var(--s-7) var(--s-6); }
}

/* Modül sayfalarında hero daha kısa — ana sayfanın ağırlığını tekrar etmez */
.hero--module { padding-block: var(--s-5) var(--s-6); }
@media (min-width: 768px) {
  .hero--module { padding-block: var(--s-6) var(--s-6); }
}

/* Yalnız ana sayfanın hero'su: leftflow'un kendi koyusuna (#0d0d0c) daha
   yakın bir zemin — grain+grid ile birlikte griye kaçıyordu, yazı daha az
   öne çıkıyordu. Bilinçli olarak yalnız burada; sitenin geri kalanındaki
   --ink-base/tone-dark değişmiyor. */
.hero--deep.tone-dark { --ink-base: #0d0d0c; }
.hero--module .hero__title { max-width: 16ch; }

/* Izgara arkada kalsın diye içerik kendi katmanına çıkar */
.hero__inner { display: grid; gap: var(--s-4); position: relative; z-index: 1; }

.hero__title { max-width: 20ch; }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

/* Kayan istatistik şeridi */
.ticker {
  border-block: 1px solid var(--bone-hair);
  overflow: hidden;
  padding-block: var(--s-3);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  width: max-content;
  animation: ticker-slide 38s linear infinite;
  /* Kenarlarda yumuşak sönme — zeminde değil, yalnız kayan içerikte.
     .ticker'ın kendi arka planı (tone-dark) tam kenara kadar dolu kalır. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  white-space: nowrap;
}
.ticker__figure {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.ticker__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ---------- 10. CTA BANDI ----------
   Önceki hâli dolgu vermilion gradyanlı, yuvarlak köşeli, kayan bir "blok"
   idi — sitenin geri kalanı leftflow'un koyu/grain/grid diline geçince bu
   eski hâl kimlikten kopuk kaldı. leftflow'un kendi kapanışı da böyle:
   dolgu renk değil, koyu zemin + doku; vermilion yalnız aksan (buton, üst
   çizgi, italик vurgu). Full-bleed — artık ayrı bir "kart" gibi durmuyor,
   sitenin diğer koyu bölümleriyle aynı aileden. */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink-base);
}
.cta-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--vermilion);
  z-index: 2;
}

.cta-band__inner {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding-block: var(--s-6);
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .cta-band__inner { padding-block: var(--s-7); }
}
.cta-band__title { max-width: 24ch; }

/* ---------- 11. FORM — tek stil ---------- */
/* İletişim sayfası düzeni: açıklama solda, form sağda */
.form-layout {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 900px) {
  .form-layout {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--s-6);
    align-items: start;
  }
  /* Form uzun, açıklama kısa — yanında ölü alan bırakmasın diye sabitlenir */
  .form-layout .section-head {
    margin-bottom: 0;
    position: sticky;
    top: calc(76px + var(--s-4));
  }
}

/* Form önceden düz zeminde çıplak alt-çizgili input'lardı — sayfanın en
   yüksek niyetli anına (form doldurma) hiçbir görsel ağırlık verilmiyordu.
   .card ile aynı "yüzen kart" dili (kenarlık + gölge + kırık beyaz zemin)
   forma da uygulanıyor, böylece CTA'ya kadar gelen ziyaretçi burada
   "bitmemiş" bir sayfaya düşmüyor. */
.form-panel {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, var(--vermilion-wash), transparent 65%),
    var(--ink-elevated);
  border: var(--edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-4) var(--s-3);
  max-width: 680px;
}
@media (min-width: 768px) {
  .form-panel { padding: var(--s-5) var(--s-4); }
}

/* Sol sütundaki boşluğu dolduran güven listesi — formu doldurmadan önce
   "ne olacak" sorusunu cevaplar, terk oranını azaltmak için. */
.form-reassure {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--bone-hair);
}
.form-reassure strong { color: var(--bone); }

.form-alt-contact { margin-top: var(--s-3); }

.form {
  display: grid;
  gap: var(--s-4);
}
/* Grid içinde buton varsayılan olarak sütunu doldurur — pill formu bozulmasın */
.form .btn { justify-self: start; }

.form-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.field { display: grid; gap: var(--s-1); }

.field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.field__req { color: var(--vermilion); }

.field__input {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bone-faint);
  border-radius: 0;
  color: var(--bone);
  font-size: 16px;
  transition: border-color 0.25s linear, transform 0.45s var(--ease-spring);
}
.field__input::placeholder { color: var(--bone-faint); }
.field__input:hover { border-bottom-color: var(--bone-dim); }
.field__input:focus {
  outline: none;
  border-bottom-color: var(--vermilion);
}
.field__input:focus-visible {
  outline: none;
  border-bottom-color: var(--vermilion);
}

textarea.field__input {
  resize: vertical;
  min-height: 128px;
  line-height: 1.6;
}

/* Select — native oku gizle, kendi okumuzu koy */
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: var(--s-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23e8442e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
select.field__input option {
  background: var(--ink-floating);
  color: var(--bone);
}

/* Hata hali */
.field__error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vermilion-hot);
  min-height: 16px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s linear, transform 0.4s var(--ease-spring);
}
.field.is-invalid .field__error { opacity: 1; transform: translateY(0); }
.field.is-invalid .field__input { border-bottom-color: var(--vermilion-hot); }

/* Bot tuzağı (_gotcha) — ekranda ve klavye akışında yok, DOM'da var */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* KVKK onay kutusu */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: start;
  cursor: pointer;
}
.consent__box {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: none;
  background: transparent;
  border: 1px solid var(--bone-faint);
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color 0.25s linear, background-color 0.25s linear;
}
.consent__box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  rotate: -45deg;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.consent:hover .consent__box { border-color: var(--bone-dim); }
.consent__box:checked {
  background: var(--vermilion);
  border-color: var(--vermilion);
}
.consent__box:checked::after { opacity: 1; }
.consent__box:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 3px;
}
.consent__box:active { scale: 0.94; }

.consent__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-dim);
}
.consent__text a {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s linear;
}
.consent__text a:hover { color: var(--vermilion); }
.consent__text a:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 2px;
  border-radius: 2px;
}

.field--consent.is-invalid .consent__box { border-color: var(--vermilion-hot); }

/* Metin içi link */
.link-inline {
  color: var(--vermilion);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s linear;
}
.link-inline:hover { color: var(--vermilion-hot); }
.link-inline:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Başarı hali */
.form-success {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  max-width: 640px;
  padding: var(--s-4);
  border: 1px solid var(--vermilion);
  border-radius: var(--radius-card);
  background: var(--vermilion-wash);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-spring);
}
.form-success[hidden] { display: none; }
.form-success.is-shown { opacity: 1; transform: translateY(0); }

/* Hata hali — başarı bloğuyla aynı yapı, uyarı rengi */
.form-fail {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  max-width: 640px;
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--vermilion-hot);
  border-radius: var(--radius-card);
  background: rgba(249, 83, 56, 0.1);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-spring);
}
.form-fail[hidden] { display: none; }
.form-fail.is-shown { opacity: 1; transform: translateY(0); }

/* ---------- 11.4 ÖNCESİ / SONRASI KARŞILAŞTIRMA ---------- */
.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: var(--edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  --pos: 50%;
}
/* Dikey kadrajlı karşılaştırmalar (moda, ürün) için */
.compare--portrait { aspect-ratio: 4 / 5; }
.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* Sonraki görsel, sürgü konumuna göre kırpılır */
.compare__img--after { clip-path: inset(0 0 0 var(--pos)); }

.compare__label {
  position: absolute;
  bottom: var(--s-2);
  z-index: 3;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(12, 12, 11, 0.78);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  pointer-events: none;
}
.compare__label--before { left: var(--s-2); }
.compare__label--after { right: var(--s-2); color: var(--vermilion-hot); }

/* Ayırıcı çizgi ve tutamak */
.compare__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: var(--vermilion);
  pointer-events: none;
}
.compare__bar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border: 2px solid var(--vermilion);
  border-radius: 50%;
  background: rgba(12, 12, 11, 0.7);
  backdrop-filter: blur(6px);
}

/* Görünmez range: sürükleme + klavye erişimi tek öğeden gelir */
.compare__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.compare__range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}
.compare__range::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}
.compare__range:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }

/* ---------- 11.45 VİTRİN (konsept + gerçek iş) ---------- */
.work {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--ink-elevated);
  border: var(--edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) {
  .work { padding: var(--s-4); }
  .work--split { grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
}

.work__head { display: grid; gap: var(--s-1); justify-items: start; }
.work__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.work__text { color: var(--bone-dim); font-size: 15px; line-height: 1.7; }

/* Konsept / gerçek ayrımı — dürüstlük etiketi, gizlenmez */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tag--konsept {
  border: 1px dashed var(--bone-faint);
  color: var(--bone-dim);
}
.tag--gercek {
  border: 1px solid var(--vermilion);
  background: var(--vermilion-wash);
  color: var(--vermilion-hot);
}

/* Varyant gridi — aynı ürün, farklı kumaş */
.variants {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-1);
}
@media (min-width: 620px) { .variants { grid-template-columns: repeat(3, 1fr); } }
.variant { position: relative; overflow: hidden; border-radius: var(--radius-card); }
.variant img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* CLAUDE.md: görsellere gradient overlay + renk katmanı */
  transition: scale 0.6s var(--ease-spring);
}
.variant::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  pointer-events: none;
}
.variant:hover img { scale: 1.04; }
.variant__name {
  position: absolute;
  left: var(--s-2);
  bottom: var(--s-2);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
}

/* Vitrin satırı — konsept işlere giden kartlar */
.work-row {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .work-row { grid-template-columns: repeat(3, 1fr); } }

/* Mobilde dikey yığın yerine küçük, yatay kaydırmalı bir şerit —
   .card-scroll ile aynı dil (bkz. Sistemler önizlemesi). Üç tam-genişlik
   kart alt alta telefon ekranının çoğunu kaplıyordu; bu kartlar birincil
   CTA değil, "kanıt" — kaydırırken bu kadar yer tutmamalı. */
@media (max-width: 699.98px) {
  .work-row {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-3);
    margin-inline: calc(var(--s-3) * -1);
    padding-inline: var(--s-3);
    padding-bottom: var(--s-2);
    -webkit-overflow-scrolling: touch;
  }
  .work-row .work-link {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }
  /* Kare oranı 4:3'ten daha fazla görsel yüksekliği veriyor — metin bloğu
     aynı kalınca küçük kartta görselin çoğunu kapatıyordu. */
  .work-row .work-link img { aspect-ratio: 1 / 1; }
  .work-row .work-link__body { padding: var(--s-2); gap: 4px; }
  .work-row .work-link__name { font-size: 1.0625rem; line-height: 1.15; }
}

.work-link {
  position: relative;
  display: grid;
  overflow: hidden;
  border: var(--edge);
  border-radius: var(--radius-card);
  background: var(--ink-elevated);
  box-shadow: var(--shadow-card);
  transition: transform 0.55s var(--ease-spring), box-shadow 0.55s var(--ease-spring);
}
.work-link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: scale 0.7s var(--ease-spring);
}
/* CLAUDE.md: görsel üstüne gradient overlay */
.work-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(12, 12, 11, 0.92) 26%, rgba(12, 12, 11, 0.15));
  pointer-events: none;
}
/* İmleci takip eden ışık — --x/--y elvora.js'te cardSpotlight() günceller */
.work-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(220px circle at var(--x, 50%) var(--y, 50%), rgba(232, 68, 46, 0.16), transparent 70%);
  opacity: 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.work-link:hover::after,
.work-link:focus-within::after { opacity: 1; }

/* Sabit border rengi kalır, ama sıcak gölge + kalkış + görsel yakınlaşma +
   spotlight birlikte konuşuyor — iklipseworld'ün sıcak/cesur derinliği */
.work-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.work-link:hover img { scale: 1.05; }
.work-link:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }
.work-link:active { transform: translateY(0) scale(0.99); }

.work-link__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: var(--s-3);
}
.work-link__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bone);
}
.work-link__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* Yatay kaydırmalı şeritlerin altına elvora.js'in eklediği ince ilerleme
   çubuğu — [data-scroll-progress] taşıyan herhangi bir kaydırma
   kutusunun hemen ardına ekleniyor. İçerik taşmıyorsa (ör. work-row
   masaüstünde grid'e döner) JS otomatik gizliyor, media query gerekmez. */
.scroll-progress {
  display: none;
  height: 3px;
  margin-top: var(--s-2);
  background: var(--bone-hair);
  border-radius: 2px;
  overflow: hidden;
}
.scroll-progress.is-visible { display: block; }
.scroll-progress__bar {
  height: 100%;
  min-width: 28px;
  background: var(--vermilion);
  border-radius: 2px;
}

/* ---------- ENTEGRASYON LOGOLARI ----------
   Marka logoları farklı renklerde ve bir kısmı siyah (Notion gibi) — koyu
   zeminde kaybolurlar. Hepsini monokrom beyaza indirip tek dile getiriyoruz. */
.tools {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.tool {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 10px var(--s-2);
  border: var(--edge);
  border-radius: var(--radius-pill);
  background: var(--ink-elevated);
  transition:
    transform 0.45s var(--ease-spring),
    border-color 0.3s linear;
}
.tool img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.3s linear;
}
.tool span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.3s linear;
}
@media (hover: hover) {
  .tool:hover { transform: translateY(-2px); border-color: var(--vermilion); }
  .tool:hover img { opacity: 1; }
  .tool:hover span { color: var(--bone); }
}

/* ---------- DİL SEÇİCİ ---------- */
.lang {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--bone-faint);
  border-radius: var(--radius-pill);
  flex: none;
}
.lang__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--bone-faint);
  cursor: pointer;
  transition: color 0.25s linear, background-color 0.25s linear;
}
.lang__btn:hover { color: var(--bone); }
.lang__btn:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
.lang__btn[aria-pressed='true'] {
  background: var(--vermilion);
  color: #fff;
}

/* ---------- KURUCU ---------- */
.founder {
  display: grid;
  gap: var(--s-3);
  align-items: center;
}
@media (min-width: 700px) {
  .founder { grid-template-columns: 180px 1fr; gap: var(--s-4); align-items: start; }
}

/* Gerçek fotoğraf gelene kadar monogram — boş kutu yerine kasıtlı bir işaret */
.founder__mark {
  position: relative;
  width: 140px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--bone-faint);
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse 90% 90% at 60% 20%, var(--vermilion-wash), transparent 70%),
    var(--ink-elevated);
  overflow: hidden;
}
@media (min-width: 700px) { .founder__mark { width: 100%; } }

/* Fotoğraf konulduğunda monogramın yerini alır */
.founder__mark img { width: 100%; height: 100%; object-fit: cover; }

.founder__initials {
  font-family: var(--font-display);
  font-size: 2.75rem;
  letter-spacing: -0.02em;
  color: var(--bone);
  line-height: 1;
}
.founder__initials span { color: var(--vermilion); }

.founder__body { display: grid; gap: var(--s-1); justify-items: start; }
.founder__role {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermilion);
}
.founder__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--bone);
}
.founder__bio {
  color: var(--bone-dim);
  line-height: 1.7;
  max-width: 56ch;
  margin-top: var(--s-1);
}
.founder__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

/* ---------- ÜRÜN VİTRİNİ (CV Optimizer AI) ----------
   Kendi marka rengiyle görünsün diye yerel bir aksan tanımlanıyor;
   Elvora'nın vermilion'u bozulmadan ürünün kimliği okunuyor. */
.product {
  --brand: #2563eb;
  --brand-soft: rgba(37, 99, 235, 0.14);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-3);
  border: 1px solid rgba(37, 99, 235, 0.34);
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse 90% 120% at 88% 0%, var(--brand-soft), transparent 68%),
    var(--ink-elevated);
  box-shadow:
    0 1px 2px rgba(37, 99, 235, 0.1),
    0 16px 40px -12px rgba(20, 19, 15, 0.22),
    0 40px 90px rgba(37, 99, 235, 0.1);
}
@media (min-width: 768px) { .product { padding: var(--s-5) var(--s-4); } }

.product__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.product__logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex: none;
}
.product__id { display: grid; gap: 2px; }
.product__name {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.product__url {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bone-faint);
}
.tag--urun {
  margin-left: auto;
  border: 1px solid var(--brand);
  background: var(--brand-soft);
  color: #93b4fb;
}
.tag--stat {
  border: 1.5px solid var(--bone-faint);
  background: var(--ink-elevated);
  color: var(--bone);
  font-weight: 600;
}

/* 04/Teknoloji logo satırı — tag--stat pillerinin yerini alan gerçek marka
   logoları. f2efe7 (--bone) ile renklendirilmiş, koyu zeminde okunaklı. */
.tech-logo {
  height: 28px;
  width: auto;
  opacity: 0.88;
  transition: opacity 0.25s linear;
}
.tech-logo:hover { opacity: 1; }

/* ---------- FLOW TANITIMI (ana sayfa) ----------
   leftflow.ai referansındaki gibi: iddialı başlık + istatistik rozetleri +
   entegrasyon logoları. Kart gridine benzemesin diye kendi düzeni var. */
.pitch {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  border: var(--edge);
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse 85% 100% at 12% 0%, var(--vermilion-wash), transparent 65%),
    var(--ink-elevated);
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .pitch { padding: var(--s-4) var(--s-4); } }

.pitch__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.pitch__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--bone-hair);
}

.product__lede {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.65;
  color: var(--bone-dim);
  max-width: 62ch;
}

/* Ekran görüntüleri — gerçek ürün, üretilmiş görsel değil */
.shots {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .shots { grid-template-columns: 1.35fr 1fr; } }
.shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bone-hair);
  border-radius: var(--radius-card);
  background: #0a0a0a;
}
.shot img { width: 100%; display: block; transition: scale 0.7s var(--ease-spring); }
.shot:hover img { scale: 1.03; }
.shot__cap {
  position: absolute;
  left: var(--s-2);
  bottom: var(--s-2);
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.shots__stack { display: grid; gap: var(--s-2); }

/* Ürün metriklerinde kendi marka rengi */
.product .metric { border-top-color: rgba(37, 99, 235, 0.3); }
.product .metric__num { color: var(--bone); }

/* Grid item olarak gerilen link, alt çizgisini kart genişliğine yayıyordu */
.product > .link-arrow { justify-self: start; }

/* Sayısal kanıt şeridi */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
@media (min-width: 700px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric { padding-top: var(--s-2); border-top: 1px solid var(--bone-hair); }
.metric__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  color: var(--bone);
  line-height: 1.1;
}
.metric__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-top: 4px;
}
/* Rakamların kaynağını belirten dipnot — iddiayı doğrulanabilir kılar */
.metrics__note {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ---------- 11.5 YASAL METİN SAYFALARI ---------- */
.legal {
  max-width: 72ch;
  color: var(--bone-dim);
  line-height: 1.75;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}
.legal p { margin-bottom: var(--s-2); }
.legal ul {
  margin: 0 0 var(--s-3) var(--s-3);
  display: grid;
  gap: var(--s-1);
}
.legal li { padding-left: var(--s-1); }
.legal li::marker { color: var(--vermilion); }
.legal strong { color: var(--bone); font-weight: 500; }

.legal__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: var(--s-3);
}

/* Doldurulmayı bekleyen alanlar için uyarı bloğu */
.legal__notice {
  padding: var(--s-3);
  margin-bottom: var(--s-4);
  border: 1px dashed var(--vermilion);
  border-radius: var(--radius-card);
  background: var(--vermilion-wash);
  font-size: 15px;
}
.legal__notice strong { color: var(--vermilion-hot); }

.legal__back { margin-top: var(--s-5); }

/* ---------- 12. FOOTER ---------- */
/* iklipseworld referansı: footer'da sıcak bir ışıma yukarıdan aşağı süzülür
   — düz zemin yerine, markanın vermilion'unu son notada bir kez daha konuşturur. */
.footer {
  border-top: 1px solid var(--bone-hair);
  padding-block: var(--s-5) var(--s-4);
  background:
    radial-gradient(ellipse 1200px 480px at 50% 0%, rgba(232, 68, 46, 0.12), transparent 70%),
    var(--ink-base);
}
.footer__grid {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-5); }
}
.footer__col { display: grid; gap: var(--s-2); align-content: start; }
.footer__blurb { font-size: 15px; }

/* Footer iletişim — form dışı çıkış yolu */
.footer__contact {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-top: var(--s-2);
}
.footer__contact .footer__link { font-size: 14px; }
.footer__heading {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: var(--s-1);
}
.footer__link {
  color: var(--bone-dim);
  font-size: 15px;
  width: fit-content;
  transition: color 0.25s linear, transform 0.45s var(--ease-spring);
}
.footer__link:hover { color: var(--vermilion); transform: translateX(3px); }
.footer__link:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 3px;
  border-radius: 2px;
}
.footer__link:active { opacity: 0.6; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-3);
  border-top: 1px solid var(--bone-hair);
}
.footer__fine-group { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.footer__fine {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* "Yukarı çık" — tek etkileşimli öge, footer__link ile aynı dil */
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.25s linear, transform 0.45s var(--ease-spring);
}
.footer__top span { transition: transform 0.45s var(--ease-spring); }
.footer__top:hover { color: var(--vermilion); }
.footer__top:hover span { transform: translateY(-2px); }
.footer__top:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 3px;
  border-radius: 2px;
}
.footer__top:active { opacity: 0.6; }

/* ---------- DEV İMZA — footer altında ortalanmış marka wordmark'ı ----------
   Salt dekoratif — aria-hidden, tıklanamaz. Genişlik vw tabanlı clamp ile
   ölçekleniyor; hiçbir ekran genişliğinde yatay taşmaya yol açmaz. */
.footer__signature {
  overflow: hidden;
  padding-block: var(--s-6) var(--s-5);
  line-height: 0.85;
  text-align: center;
}
.footer__signature-text {
  display: block;
  padding-inline: var(--s-3);
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 24vw, 24rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  /* Üst bardaki wordmark'la aynı ton — önceki %55 opaklık çok soluktu */
  color: var(--bone);
  white-space: nowrap;
  user-select: none;
}
.footer__signature-dot { color: var(--vermilion); opacity: 0.8; }

/* ---------- 13. AÇILIŞ EKRANI (yalnız ana sayfa) ----------
   Dayanıklılık notu: kapanışı CSS animasyonu yürütür (forwards ile).
   JS hiç çalışmasa bile perde kalkar ve site kullanılabilir kalır —
   JS yalnızca düğümü DOM'dan temizler ve scroll kilidini açar. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  /* place-items yalnız hücre içi hizalar; iki satırlı grid (mark+label)
     bütün olarak ortalanmak için align/justify-content da gerekiyor —
     eksik olduğunda çift satır viewport'un üstüne yaslanıyordu. */
  place-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--s-3);
  background: var(--ink-base);
  animation: preloader-out 0.6s var(--ease-out) 1.7s forwards;
}

/* Perde kalkarken tıklamayı ve okuyucuyu engellemesin */
@keyframes preloader-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.preloader__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(200px, 46vw, 300px);
  aspect-ratio: 1;
  /* Perde açılırken işaret hafifçe öne gelir */
  animation: preloader-mark-in 0.9s var(--ease-spring) both;
}
@keyframes preloader-mark-in {
  from { opacity: 0; scale: 0.88; }
  to   { opacity: 1; scale: 1; }
}

/* E. işareti — favicon'daki markanın büyütülmüş hali. Geometrik merkez artık
   çevresindeki tek halkayla aynı — ayrı bir optik-ağırlık düzeltmesi yok. */
.preloader__logo {
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 10vw, 6rem);
  line-height: 1;
  color: var(--bone);
  letter-spacing: -0.03em;
  user-select: none;
}
.preloader__dot { color: var(--vermilion); }

/* Mark'ın altında beliren ince marka etiketi */
.preloader__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-faint);
  animation: preloader-label-in 0.9s var(--ease-out) 0.35s both;
}
@keyframes preloader-label-in {
  from { opacity: 0; translate: 0 6px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Dönen / büyüyüp küçülen turuncu çizgiler */
.preloader__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.preloader__rings circle {
  fill: none;
  stroke-linecap: round;
  /* rotate ve scale ayrı CSS özellikleri — farklı sürelerde
     birbirini ezmeden bileşenlenirler (tek transform ile olmaz) */
  transform-box: fill-box;
  transform-origin: center;
}

.ring--1 {
  stroke: var(--vermilion);
  stroke-width: 2;
  stroke-dasharray: 54 190;
  animation:
    ring-spin 2.6s linear infinite,
    ring-breathe 1.9s ease-in-out infinite;
}

@keyframes ring-spin      { to { rotate: 360deg; } }
@keyframes ring-spin-back { to { rotate: -360deg; } }
@keyframes ring-breathe   { 50% { scale: 1.12; } }

/* Perde açıkken sayfa kaydırılmasın (sınıfı JS ekler/kaldırır) */
.is-loading, .is-loading body { overflow: hidden; }

/* Hareket azaltma tercihi: açılış ekranını tamamen atla.
   Global reduce-motion kuralı süreyi kısaltır ama gecikmeyi sıfırlamaz —
   bu yüzden perdeyi burada açıkça kaldırıyoruz. */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  .is-loading, .is-loading body { overflow: visible; }
}

/* ---------- 14. SCROLL REVEAL ---------- */
/* JS'siz de içerik görünür kalır — .reveal yalnız JS varsa gizler.

   ÖNEMLİ: Kaydırma açılışı `transform` değil `translate` kullanır.
   `.js .reveal.is-in` (0,3,0) özgüllüğü `.card:hover` (0,1,1) gibi kuralları
   eziyordu; kartların, CTA butonunun ve liste satırlarının hover'da
   yükselmesi bu yüzden hiç çalışmıyordu. `translate` ayrı bir CSS özelliği
   olduğu için `transform` ile çakışmadan birlikte uygulanır. */
.js .reveal {
  opacity: 0;
  translate: 0 20px;
  scale: 0.98;
  transition:
    opacity 0.7s var(--ease-out),
    translate 0.8s var(--ease-spring),
    scale 0.8s var(--ease-spring);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; translate: none; scale: none; }
}

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

/* Dahili linkte kısa geçiş örtüsü — elvora.js pageTransitions() ekler/kaldırır */
.page-fade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out);
}
.page-fade.is-active { opacity: 1; pointer-events: auto; }

/* ---------- 15. PAKET / KARŞILAŞTIRMA / SSS ----------
   leftflow.ai referansı: fiyatlı paket kartları, "neden biz" karşılaştırma
   tablosu ve SSS akordeonu. Mevcut token'lar ve .card/.tag dilinden
   sapmadan, üç küçük yeni bileşen. */

/* Fiyat rozeti — .tag'in vermilion dolu varyantı, .tag--stat'tan daha vurgulu */
.tag--price {
  border: 1px solid var(--vermilion);
  background: var(--vermilion);
  color: var(--bone);
  font-weight: 600;
}

/* Paket kartı içi teslim listesi — .card__text altında sade bir liste */
.pkg-list {
  list-style: none;
  display: grid;
  gap: 7px;
  margin-top: var(--s-1);
}
.pkg-list li {
  position: relative;
  padding-left: var(--s-2);
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-dim);
}
.pkg-list li::before {
  /* Yuvarlak nokta yerine keskin köşeli kare — .mark--yes ile aynı
     "dahil/teslim edildi" dili, listeyi daha kesin/iddialı gösteriyor. */
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--vermilion);
}

/* Yan yana metin + halka kutusu — Flow sistem detay sayfalarının boş yan alanı için.
   Sitenin genelindeki .card kutu diline (kenarlık + gölge + doku) bilinçli olarak
   yaklaştırılıyor, böylece ince bir dekor değil dolu bir yüzey gibi okunuyor. */
.split-row {
  display: grid;
  gap: var(--s-5);
  align-items: stretch;
}
@media (min-width: 900px) {
  .split-row { grid-template-columns: 1fr 360px; }
}
.split-row__visual { display: none; }
@media (min-width: 900px) {
  .split-row__visual { display: block; }
}
.side-orbit {
  /* Site genelindeki .card/.pitch/.work-link diliyle aynı kenarlık +
     köşe + gölge + vermilion wash — animasyon havadar kalsın diye
     kutu opak değil, ama artık sayfaya yapıştırılmış ayrı bir widget
     gibi değil, kart ailesinin bir parçası gibi duruyor. */
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--edge);
  border-radius: var(--radius-card);
  background: radial-gradient(ellipse 70% 70% at 50% 35%, var(--vermilion-wash), transparent 70%);
  box-shadow: var(--shadow-card);
}
.side-orbit__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(84px, 11vw, 140px);
  line-height: 1;
  color: var(--ink-base);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}
.side-orbit__svg { width: 100%; height: 100%; overflow: visible; }
.side-orbit__tag {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
}

/* İki hat / iki yol yan yana — .pitch'i tekil düzenden çıkarır */
.pitch-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .pitch-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}
.pitch-grid .pitch { height: 100%; }

/* Karşılaştırma tablosu — "Neden Elvora?" */
.compare-table__scroll {
  overflow-x: auto;
  margin-inline: calc(var(--s-3) * -1);
  padding-inline: var(--s-3);
}
.compare-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}
.compare-table th,
.compare-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--bone-hair);
  font-size: 14px;
  white-space: nowrap;
}
.compare-table th:first-child,
.compare-table td:first-child { padding-left: 0; white-space: normal; }
.compare-table td:not(:first-child) { text-align: center; }
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--bone);
}
.compare-table tbody th,
.compare-table tbody td { border-bottom-color: var(--bone-hair); }
.compare-table tbody th {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--bone);
}
.compare-table td { color: var(--bone-faint); }
/* Öne çıkan (Elvora) sütunun koyu dolgusu ve vermilion üst çizgisi
   aşağıda "18. KARŞILAŞTIRMA İŞARETİ" bloğunda tanımlı. */

/* Destek seviyesi kartları — .card-grid--3 üzerinde çalışır, ekstra kural gerekmez */
.tier__price {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  color: var(--bone);
}

/* SSS akordeonu — native <details>/<summary>, JS gerekmez */
.faq { display: grid; gap: var(--s-2); }
.faq__item {
  border: var(--edge);
  border-radius: var(--radius-card);
  background: var(--ink-elevated);
  overflow: hidden;
  transition: border-color 0.3s linear, background-color 0.3s linear;
}
.faq__item[open] { border-color: var(--vermilion); background: var(--ink-floating); }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 400;
  color: var(--bone);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--vermilion); outline-offset: -2px; }
.faq__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--bone-faint);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--vermilion);
  transition: transform 0.4s var(--ease-spring), border-color 0.3s linear;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); border-color: var(--vermilion); }
.faq__a {
  padding: 0 var(--s-3) var(--s-3);
  color: var(--bone-dim);
  line-height: 1.7;
  max-width: 68ch;
}

/* Hero altı gerçek-veri şeridi — sayı uydurmaz, yayınlanmış gerçekleri tekrarlar */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--bone-hair);
}
.hero__stat { display: grid; gap: 2px; }
.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  color: var(--bone);
  letter-spacing: -0.01em;
}
.hero__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ---------- 16. KOYU/PAPER-2 TON BLOKLARI ----------
   leftflow.ai referansı: sayfa tek düze açık değil, bölüm bölüm koyu/açık
   dönüyor. Token'lar seçici içinde yeniden tanımlanınca (CSS custom
   property scoping) tüm alt bileşenler — .card, .tag, .step, metinler —
   otomatik uyum sağlıyor; sıfırdan koyu varyant yazmaya gerek yok. */
.tone-dark {
  --ink-base: #14130f;
  --ink-elevated: #1c1b17;
  --ink-floating: #232019;
  --bone: #f2efe7;
  --bone-dim: rgba(242, 239, 231, 0.66);
  --bone-faint: rgba(242, 239, 231, 0.4);
  --bone-hair: rgba(242, 239, 231, 0.14);
  --grain-blend: screen;
  --grain-opacity: 0.05;
  --grid-line: rgba(242, 239, 231, 0.045);
  background: var(--ink-base);
  color: var(--bone);
}
.tone-paper2 {
  /* Paper2 açık kalır ama bir tık daha belirgin dokuyla — "ikinci" kağıt tonu */
  --grain-opacity: 0.32;
  --ink-base: #e9e5d9;
  --ink-elevated: #f2efe7;
  --ink-floating: #ffffff;
  background: var(--ink-base);
}

/* İki Hat kartları: Danışmanlık şeffaf/çerçeveli, Flow koyu dolgulu —
   leftflow'daki Advisory-açık / Systems-koyu eşleşmesiyle birebir. */
.pitch--outline {
  background: transparent;
  border: 1.5px solid var(--bone-faint);
  box-shadow: none;
}
.pitch--dark {
  --ink-base: #14130f;
  --ink-elevated: #1c1b17;
  --bone: #f2efe7;
  --bone-dim: rgba(242, 239, 231, 0.66);
  --bone-faint: rgba(242, 239, 231, 0.4);
  --bone-hair: rgba(242, 239, 231, 0.14);
  background: var(--ink-base);
  color: var(--bone);
  border-color: transparent;
}

/* ---------- 17. ENDÜSTRİLER — hairline grid ----------
   leftflow deseni: grid gap 1px + container zemini çizgi rengi, hücreler
   dolu renk — ayrı kart-gölge yerine kesintisiz çizgili tablo hissi. */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--bone-hair);
  border: 1px solid var(--bone-hair);
}
@media (min-width: 700px) { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
.industry-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-height: 168px;
  padding: var(--s-4) var(--s-3);
  background: var(--ink-base);
  color: var(--bone);
  transition: background-color 0.3s linear, color 0.3s linear;
}
.industry-cell__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  letter-spacing: -0.01em;
}
.industry-cell__desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bone-dim);
  transition: color 0.3s linear;
}
@media (hover: hover) {
  .industry-cell:hover { background: var(--vermilion); color: #fff; }
  .industry-cell:hover .industry-cell__desc { color: rgba(255, 255, 255, 0.82); }
}

/* ---------- 18. KARŞILAŞTIRMA İŞARETİ ----------
   Metin ("Evet/Bazen/Hayır") yerine leftflow'daki gibi üç ayrı işaret:
   dolu kare (var), çapraz çizgili kare (kısmen), düz çizgi (yok). Keskin
   köşeler — bu tabloda hiçbir yuvarlatma kullanılmıyor, bilinçli olarak. */
.mark { display: inline-block; vertical-align: middle; }
.mark--yes { width: 13px; height: 13px; background: var(--vermilion); }
.mark--partial {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--bone-faint);
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--bone-faint) calc(50% - 1px), var(--bone-faint) calc(50% + 1px), transparent calc(50% + 1px));
}
.mark--no { width: 12px; height: 1.5px; background: var(--bone-faint); }

/* Karşılaştırma tablosunda öne çıkan sütun: koyu dolgu + üstte vermilion
   çizgi + diğerlerine göre bir tık daha geniş, "Elvora" yazısı bir tık
   daha büyük/kalın — abartmadan göze çarpsın diye. */
.compare-table__brand {
  background: #14130f;
  color: #f2efe7;
  --bone-faint: rgba(242, 239, 231, 0.4);
}
.compare-table th.compare-table__brand,
.compare-table td.compare-table__brand {
  padding-inline: calc(var(--s-3) + 6px);
}
.compare-table thead th.compare-table__brand {
  position: relative;
  color: #f2efe7;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.compare-table thead th.compare-table__brand::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--vermilion);
}
.compare-table td.compare-table__brand,
.compare-table thead th.compare-table__brand {
  border-bottom-color: rgba(242, 239, 231, 0.16);
}