/* ==========================================================================
   Emrun Petrol — "Yapım Aşamasında" sayfası
   TEMA: AÇIK (gündüz). Kurumsal lacivert + turkuaz, açık gökyüzü zemini.
   Uygulama: docs/tasarim-spesifikasyonu.md + docs/marka-kimligi.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN'LAR
   -------------------------------------------------------------------------- */

:root {
  /* --- Marka --- */
  --brand-primary:       #0B2B4A;
  --brand-primary-dark:  #061A2E;
  --brand-primary-light: #16416E;
  --brand-accent:        #0FBFA4;   /* grafik/vurgu — METİN OLARAK KULLANILMAZ */
  --brand-accent-dark:   #0A8E7A;   /* grafik nesne, ikon (≥3:1) */
  --brand-accent-metin:  #06695B;   /* açık zeminde okunabilir turkuaz (6.08:1) */

  /* --- Nötr skala: 050 en açık → 900 en koyu (tema bağımsız) --- */
  --ink-900: #0A1220;
  --ink-700: #1C2B3F;
  --ink-500: #5A6B80;
  --ink-300: #93A2B5;
  --ink-100: #D4DCE6;
  --ink-050: #EEF2F7;

  /* --- Yüzey (AÇIK tema) --- */
  --surface-base:    #F1F6FB;
  --surface-raised:  #FFFFFF;
  --surface-overlay: #FFFFFF;

  /* --- Çizgi --- */
  --line-soft:   #DCE6F0;
  --line-strong: #A9BFD6;

  /* --- Gökyüzü (gündüz) --- */
  --sky-top:     #BFDCF4;
  --sky-mid:     #DAEBF8;
  --sky-horizon: #F0F8FD;
  --brand-accent-glow: rgba(15, 191, 164, .30);

  /* --- Odak --- */
  --focus-ring:      #06695B;
  --focus-ring-halo: rgba(15, 191, 164, .28);

  /* --- Tipografi aileleri --- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* --- Tipografi ölçeği --- */
  --tip-eyebrow:  0.75rem;
  /* 390px'te 30px → 1440px'te 56px. Eskiden 36→72'ydi; küçültmek hem içerik
     bloğunu kısaltıyor hem başlığı 3 satırdan 2 satıra indiriyor. */
  --tip-display:  clamp(1.875rem, 1.271rem + 2.476vw, 3.5rem);
  --tip-lead:     clamp(1rem, 0.907rem + 0.381vw, 1.25rem);
  --tip-mono-lg:  clamp(0.9375rem, 0.868rem + 0.286vw, 1.125rem);
  --tip-etiket:   0.8125rem;
  --tip-mikro:    0.6875rem;
  --tip-alt:      0.75rem;

  /* --- Boşluk --- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* --- Container --- */
  --container-max: 1200px;
  --icerik-max:    720px;
  --olcum-max:     56ch;
  --kart-max:      420px;
  --sahne-max:     1900px;
  --gutter:        20px;

  /* --- Easing --- */
  --ease-out-quint:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mechanical:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-settle:      cubic-bezier(0.34, 1.28, 0.64, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-lineer:      linear;

  /* --- Süre --- */
  --sure-anlik:    90ms;
  --sure-hizli:    200ms;
  --sure-standart: 320ms;
  --sure-yavas:    520ms;
  --sure-sahne:    900ms;

  /* --- Atmosfer yoğunlukları (breakpoint'te ezilir) --- */
  --grain-opaklik:  0.022;
  --vinyet-opaklik: 0.40;
  --scrim-ust:      0.88;

  /* --- Parallax offset (JS yazar) --- */
  --px: 0px;
  --py: 0px;

  /* --- z-index haritası --- */
  --z-gokyuzu:  0;
  --z-sahne:    20;
  --z-huzme:    30;
  --z-scrim:    40;
  --z-vinyet:   50;
  --z-grain:    60;
  --z-icerik:   70;
  --z-altbilgi: 75;
  --z-bildirim: 90;
  --z-ust:      100;
}

/* --------------------------------------------------------------------------
   2. TEMEL
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Düzen sözleşmesi: içerik kendi doğal yüksekliğini alır (satır 1), sahne
   ARTAN alanı kaplar (satır 2). Sahne artık metnin arkasında sabit değil —
   bu yüzden yazıların ve e-posta kartının istasyonun üstüne gelmesi
   yapısal olarak imkânsız. Alt bilgi sahnenin dibine bindirilir. */
body {
  position: relative;
  margin: 0;
  /* KESİN yükseklik şart: yalnızca `min-height` verilseydi grid kabı içeriğe
     göre büyür ve `1fr` satırı "artan alan" yerine SVG'nin doğal yüksekliğini
     alırdı — sahne yine metnin altına taşardı. */
  min-height: 100vh;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface-base);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  hyphens: none;
  /* Yatayda asla kaydırma yok. Dikeyde normalde de kaydırma oluşmaz
     (düzen 100svh'ye oturur) — ama içerik bir şekilde sığmazsa (çok büyük
     tarayıcı yazı tipi, uzun çeviri metni) `hidden` onu sessizce keserdi.
     `auto` bir emniyet supabı: sığmadığında erişilebilir kalır. */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sayfa açılış fade'i — animasyon kapalıyken de korunur */
body { animation: k-sayfa-giris 240ms var(--ease-out-quint) both; }
@keyframes k-sayfa-giris { from { opacity: 0; } to { opacity: 1; } }

/* Sekans kapısı: fontlar hazır olana kadar her şey duraklatılır, sonra
   .hazir ile hepsi AYNI ANDA başlar. `.js` sınıfı head'deki satır içi
   betikle eklenir — JS kapalıysa kural hiç uygulanmaz ve sayfa normal akar. */
.js:not(.hazir) *,
.js:not(.hazir) *::before,
.js:not(.hazir) *::after {
  animation-play-state: paused !important;
}

h1, p { margin: 0; }

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

/* --------------------------------------------------------------------------
   3. ATMOSFER KATMANLARI
   -------------------------------------------------------------------------- */

.gokyuzu, .huzme, .scrim, .vinyet, .grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* 3.1 Gökyüzü — gündüz gradyanı, ufka doğru açılır */
.gokyuzu {
  z-index: var(--z-gokyuzu);
  background: linear-gradient(
    180deg,
    var(--sky-top)       0%,
    var(--sky-mid)      46%,
    var(--sky-horizon)  78%,
    var(--surface-base) 100%
  );
  animation: k-fade 700ms var(--ease-out-quint) both;
}

/* 3.2 Sahne — içerikten ARTAN alanı kaplar (grid satır 2).
   İçeriğe hiçbir koşulda binmez; ne kadar yer kalırsa o kadar büyür. */
.sahne {
  position: relative;
  grid-row: 2;
  min-height: 0;            /* grid öğesi içeriğinden küçülebilsin */
  z-index: var(--z-sahne);
  overflow: hidden;
  pointer-events: none;
}

/* SVG kutusu satırın tamamını kaplar; çizim `xMidYMax meet` ile bu kutuya
   ORANI KORUNARAK sığar ve alta-ortaya yaslanır. Yatayda asla kırpılmaz
   (vinç sağ kenarda, totem sol kenarda). Çizim kutudan darsa yanlarda kalan
   alanı, viewBox dışına uzatılmış zemin doldurur — kesik ufuk oluşmaz. */
.sahne svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 3.3 Zemin parlaması — açık temada `multiply` ile turkuaz tint bırakır */
.huzme {
  z-index: var(--z-huzme);
  background: radial-gradient(ellipse 110% 62% at 50% 82%,
              var(--brand-accent-glow) 0%, transparent 64%);
  opacity: .5;
  mix-blend-mode: multiply;
}

/* 3.4 Scrim — metin okunabilirliğinin sabit referans zemini.
   Açık temada AYDINLATIR: (a) içerik bloğunun arkasına oturan noktasal
   sis, (b) üstten/alttan gelen genel bant. */
.scrim {
  z-index: var(--z-scrim);
  background:
    radial-gradient(ellipse 62% 40% at 50% 34%,
      rgba(241, 246, 251, .93)  0%,
      rgba(241, 246, 251, .64) 55%,
      rgba(241, 246, 251, .22) 82%,
      rgba(241, 246, 251, 0)  100%),
    linear-gradient(180deg,
      rgba(241, 246, 251, var(--scrim-ust)) 0%,
      rgba(241, 246, 251, .46) 16%,
      rgba(241, 246, 251, 0)   38%,
      rgba(241, 246, 251, 0)   80%,
      rgba(241, 246, 251, .62) 100%   /* alt bilgi bandı okunabilir kalsın */
    );
}

/* 3.5 Vinyet — açık temada çok hafif lacivert kenar sönümü */
.vinyet {
  z-index: var(--z-vinyet);
  background: radial-gradient(ellipse 94% 86% at 50% 40%,
              transparent 48%, rgba(11, 43, 74, .30) 122%);
  opacity: var(--vinyet-opaklik);
  animation: k-fade 800ms 200ms var(--ease-out-quint) both;
}

/* 3.6 Grain — hareket etmez, kâğıt dokusu hissi */
.grain {
  z-index: var(--z-grain);
  opacity: var(--grain-opaklik);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: k-grain-giris 600ms 400ms var(--ease-lineer) both;
}

@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-grain-giris {
  from { opacity: 0; }
  to   { opacity: var(--grain-opaklik); }
}

/* --------------------------------------------------------------------------
   4. İÇERİK BLOĞU
   -------------------------------------------------------------------------- */

.icerik {
  position: relative;
  z-index: var(--z-icerik);
  width: 100%;
  max-width: var(--icerik-max);
  margin-inline: auto;
  padding: 24px var(--gutter) 0;
  text-align: center;
}

/* 4.1 Logo */
.logo {
  display: block;
  height: 26px;
  width: auto;
  margin-inline: auto;
  color: var(--brand-primary);
  --logo-mark: var(--brand-accent-dark);
  animation: k-logo-giris 520ms 240ms var(--ease-out-quint) both;
}

@keyframes k-logo-giris {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 4.2 Eyebrow — iki yanında çizgi olan etiket */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--tip-eyebrow);
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-accent-metin);
  animation: k-yumusak-yukselis 480ms 420ms var(--ease-out-quint) both;
}

.eyebrow-cizgi {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--line-strong);
  animation: k-cizgi-ac 640ms 540ms var(--ease-out-expo) both;
}
.eyebrow-cizgi--sol { transform-origin: right center; }
.eyebrow-cizgi--sag { transform-origin: left center; }

@keyframes k-cizgi-ac { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 4.3 H1 — kelime kelime mask reveal */
.baslik {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--tip-display);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--brand-primary-dark);
  text-wrap: balance;
}

/* Türkçe kritik: ğ/ş/ç kuyrukları ve İ noktası kırpılmasın */
.kelime {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .14em; margin-bottom: -.14em;
  padding-top: .06em;    margin-top: -.06em;
  vertical-align: bottom;
}
.kelime-ic {
  display: inline-block;
  animation: k-kelime-yukselis 620ms var(--ease-out-expo) both;
  animation-delay: var(--gecikme, 0ms);
}

@keyframes k-kelime-yukselis {
  from { opacity: 0; transform: translateY(112%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes k-yumusak-yukselis {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   5. E-POSTA BİLEŞENİ
   -------------------------------------------------------------------------- */

.eposta-etiket {
  margin-top: var(--space-8);
  font-size: var(--tip-etiket);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-700);
  animation: k-yumusak-yukselis-10 440ms 1260ms var(--ease-out-quint) both;
}
@keyframes k-yumusak-yukselis-10 {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* `width: 100%` şart: mobilde .icerik bir flex kolon ve `margin-inline: auto`
   taşıyan çocuklar esnek kutuda içerik genişliğine büzülüyor — max-width hiç
   devreye girmiyor. Genişliği açıkça vermek her iki düzende de doğru çalışır. */
.eposta-sarmal {
  position: relative;
  width: 100%;
  max-width: var(--kart-max);
  margin: var(--space-3) auto 0;
}

.eposta-kart {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  padding-inline: var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px rgba(11, 43, 74, .06);
  transition: border-color var(--sure-hizli) var(--ease-out-quint),
              transform 240ms var(--ease-out-quint);
  animation: k-kart-giris 520ms 1320ms var(--ease-settle) both;
}

@keyframes k-kart-giris {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gölge hazır katmanda bekler; yalnızca opacity açılır (box-shadow animasyonu yok) */
.eposta-kart::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 34px -10px rgba(11, 43, 74, .28),
              0 0 0 1px rgba(10, 142, 122, .18);
  opacity: 0;
  transition: opacity 240ms var(--ease-out-quint);
  pointer-events: none;
}

.eposta-kart:hover { border-color: var(--brand-accent-dark); transform: translateY(-2px); }
.eposta-kart:hover::before { opacity: 1; }

/* Link */
.eposta-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--tip-mono-lg);
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--sure-hizli) var(--ease-out-quint);
}

.eposta-link .metin { position: relative; }

.eposta-link .metin::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 240ms var(--ease-out-quint);
}

.eposta-kart:hover .eposta-link { color: var(--brand-accent-metin); }
.eposta-kart:hover .eposta-link .metin::after {
  transform: scaleX(1);
  transform-origin: left center;
  transition-duration: var(--sure-standart);
}

.ikon { flex: none; width: 20px; height: 20px; }
.eposta-link .ikon {
  width: 18px; height: 18px;
  color: var(--brand-accent-dark);
  transition: transform 260ms var(--ease-settle);
}
.eposta-kart:hover .eposta-link .ikon { transform: translateX(2px) rotate(-6deg); }

/* Kopyalama butonu — dokunma hedefi 44x44 */
.kopya-btn {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: calc(var(--space-3) * -1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-500);
  cursor: pointer;
  border-radius: 10px;
  transition: color var(--sure-hizli) var(--ease-out-quint),
              transform var(--sure-hizli) var(--ease-out-quint);
}
.kopya-btn:hover  { color: var(--brand-accent-metin); transform: scale(1.06); }
.kopya-btn:active { transform: scale(.94); transition-duration: var(--sure-anlik); }

.kopya-btn .ikon { grid-area: 1 / 1; }
.kopya-btn .ikon--tik { opacity: 0; transform: scale(.6); color: var(--brand-accent-metin); }

.kopya-btn.basarili .ikon--kopya { animation: k-ikon-cikis 140ms var(--ease-in-out-quad) both; }
.kopya-btn.basarili .ikon--tik   { animation: k-ikon-giris 260ms 140ms var(--ease-settle) both; }
.kopya-btn.basarili::after       { animation: k-kopya-halka 520ms var(--ease-out-expo) both; }

.kopya-btn::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--brand-accent-dark);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

@keyframes k-ikon-cikis  { from { opacity: 1; transform: scale(1); }  to { opacity: 0; transform: scale(.6); } }
@keyframes k-ikon-giris  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes k-kopya-halka {
  from { opacity: .5; transform: scale(.9); }
  to   { opacity: 0;  transform: scale(1.7); }
}

/* Bildirim (toast) */
.bildirim {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: var(--z-bildirim);
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 8px 22px -8px rgba(11, 43, 74, .3);
  font-family: var(--font-mono);
  font-size: var(--tip-mikro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-primary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
}

.bildirim.gorunur {
  visibility: visible;
  animation: k-bildirim-giris 260ms var(--ease-settle) both,
             k-bildirim-cikis 200ms 1860ms var(--ease-in-out-quad) both;
}

@keyframes k-bildirim-giris {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes k-bildirim-cikis {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* --------------------------------------------------------------------------
   6. İLERLEME GÖSTERGESİ (belirsiz / indeterminate)
   -------------------------------------------------------------------------- */

/* Alt başlık kaldırıldıktan sonra bu blok sayfanın ikinci odağı oldu:
   etiket ve bar belirgin şekilde büyütüldü. */
.ilerleme {
  width: 100%;                 /* bkz. .eposta-sarmal'daki flex notu */
  max-width: 576px;
  margin: var(--space-8) auto 0;
  animation: k-yumusak-yukselis-12 480ms 1120ms var(--ease-out-quint) both;
}
@keyframes k-yumusak-yukselis-12 {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ilerleme-etiket {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 0.924rem + 0.516vw, 1.35rem);
  line-height: 1;
  letter-spacing: .36em;
  /* Harf aralığı son harften SONRA da boşluk bırakır; ortalanmış metin bu
     yüzden yarım aralık kadar sola kayar. Soldan .36em padding, dar kalan
     kutuda metni tam olarak .18em sağa taşıyıp optik ortalamayı düzeltir. */
  padding-left: .36em;
  color: var(--brand-primary-dark);
}

/* Ray koyu lacivert: açık gri rayda (1.74:1) hem gösterge silik kalıyordu hem
   WCAG 1.4.11'in grafik nesneler için istediği 3:1 sağlanmıyordu. Koyu ray
   zemine karşı 11.9:1 veriyor ve turkuaz tarama üzerinde 5.8:1 ile net okunuyor. */
.ilerleme-yol {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--brand-primary);
  overflow: hidden;
}

.ilerleme-dolgu {
  position: absolute;
  inset: 0;
  width: 34%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(15, 191, 164, 0) 0%,
    var(--brand-accent) 45%,
    var(--brand-accent) 55%,
    rgba(15, 191, 164, 0) 100%);
  will-change: transform;
  animation: k-bar-belirsiz 2200ms 2200ms cubic-bezier(0.65, 0, 0.35, 1) infinite both;
}

@keyframes k-bar-belirsiz {
  from { transform: translateX(-120%); }
  to   { transform: translateX(420%); }
}

/* --------------------------------------------------------------------------
   7. ALT BİLGİ
   -------------------------------------------------------------------------- */

/* Akış dışı: sahnenin dibine bindirilir, böylece grid satırlarını tüketmez
   ve zemin alt bilginin arkasında kesintisiz devam eder. Okunabilirliği
   scrim'in alt bandı sağlar. */
.alt-bilgi {
  position: absolute;
  inset: auto 0 0;
  z-index: var(--z-altbilgi);
  padding: var(--space-6) var(--gutter);
  text-align: center;
  font-size: var(--tip-alt);
  letter-spacing: .02em;
  color: var(--ink-700);
  /* Sayfanın SON öğesi olduğu için aşağıdan yükselemez: `translateY(8px)`
     giriş boyunca belgeyi 8 px uzatıp kısa süreli bir kaydırma çubuğu
     doğuruyordu. Yönü çevirdik — yukarıdan iner, taşma oluşmaz. */
  animation: k-altbilgi-giris 480ms 1520ms var(--ease-out-quint) both;
}

@keyframes k-altbilgi-giris {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   8. ODAK
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 12px;
  box-shadow: 0 0 0 4px var(--focus-ring-halo);
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */

/* İçerik ile sahne arasındaki nefes payı. İçerik artık sahnenin üstünde
   ayrı bir grid satırında olduğu için bu boşluk ikisini birbirinden ayırır. */
.icerik { padding-bottom: var(--space-6); }

@media (min-width: 768px) { .icerik { padding-bottom: var(--space-8); } }

/* Mobil: sahne dar ekranda GENİŞLİKLE sınırlı (390px → 227px yükseklik), bu
   yüzden "artan alanı kapla" mantığı satırda büyük bir boş gökyüzü bırakıyordu.
   Dar ekranda sahneye doğal oranını veriyor, içeriği kalan alanda ortalıyoruz. */
@media (max-width: 767px) {
  body { grid-template-rows: minmax(0, 1fr) auto; }
  .sahne { aspect-ratio: 12 / 7; }
  .icerik {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;   /* sığmazsa üstten taşıp erişilemez olmasın */
  }
}

/* Küçük DİKEY telefon (320×568, 360×640 …): içerik tek ekrana sığmıyordu.
   Öğe gizlemek yerine dikey ritmi sıkıştırıyoruz — hiçbir bilgi kaybolmaz. */
@media (max-width: 767px) and (max-height: 700px) {
  .icerik        { padding-top: 16px; padding-bottom: var(--space-4); }
  .eyebrow       { margin-top: var(--space-6); }
  .baslik        { margin-top: var(--space-4); }
  .ilerleme      { margin-top: var(--space-6); }
  .ilerleme-etiket { margin-bottom: var(--space-2); }
  .eposta-etiket { margin-top: var(--space-6); }
  .alt-bilgi     { padding-block: var(--space-3); }
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --grain-opaklik: 0.026;
    --vinyet-opaklik: 0.45;
    --scrim-ust: 0.84;
  }
  .icerik { padding-top: 32px; }
  .logo { height: 30px; }
  .eyebrow-cizgi { width: 56px; }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --grain-opaklik: 0.030;
    --vinyet-opaklik: 0.50;
    --scrim-ust: 0.80;
  }
  .icerik { padding-top: 36px; }
  .logo { height: 32px; }
}

@media (min-width: 1440px) {
  :root { --gutter: 64px; }
  .icerik { padding-top: 40px; }
  .logo { height: 36px; }
}

/* YATAY mobil — yalnızca kısa VE yatay ekranlar.
   `orientation: landscape` şart: bu kural olmadan 320×568 veya 360×640 gibi
   küçük DİKEY telefonlar da yakalanıyor ve sayfanın ana mesajı olan
   "YAPIM AŞAMASINDA" etiketi ile ilerleme göstergesi gereksiz yere gizleniyordu. */
@media (max-height: 640px) and (orientation: landscape) {
  .eyebrow { display: none; }
  .icerik { padding-top: var(--space-3); }
  .baslik { margin-top: 0; font-size: min(var(--tip-display), 40px); }
  .ilerleme { margin-top: var(--space-4); }
  .ilerleme-etiket { margin-bottom: var(--space-2); font-size: 0.975rem; }
  .eposta-etiket { margin-top: var(--space-4); }
  .alt-bilgi { padding-block: var(--space-2); }
  .icerik { padding-bottom: var(--space-4); }
}

/* Yüksek kontrast tercihi */
@media (prefers-contrast: more) {
  :root {
    --line-soft: var(--ink-700);
    --line-strong: var(--ink-700);
    --ink-500: var(--ink-700);
    --scrim-ust: 0.96;
    --grain-opaklik: 0;
  }
}

/* --------------------------------------------------------------------------
   10. PARALLAX KATMANLARI
   Offseti JS yalnızca --px/--py olarak yazar; derinlik çarpanı burada.
   Parallax DIŞ sarmalayıcıda, animasyon içeride — birbirini ezmez.
   -------------------------------------------------------------------------- */

#kat-uzak  { transform: translate3d(calc(var(--px) * .25), calc(var(--py) * .25), 0); }
#kat-orta  { transform: translate3d(calc(var(--px) * .60), calc(var(--py) * .60), 0); }
#kat-yakin { transform: translate3d(var(--px), var(--py), 0); }

/* --------------------------------------------------------------------------
   11. HAREKET KISITI — arayüz katmanı
   Sahneye ait kurallar assets/sahne.css §7'de.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .logo, .eyebrow, .eyebrow-cizgi, .kelime-ic,
  .eposta-etiket, .eposta-kart, .ilerleme, .alt-bilgi,
  .gokyuzu, .vinyet {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .grain { animation: none !important; opacity: var(--grain-opaklik) !important; }

  /* Sayfa açılış fade'i korunur (yer değiştirme yok) */
  body { animation: k-sayfa-giris 240ms linear both !important; }

  /* İlerleme: tarama durur ama gösterge BELİRSİZ kalır.
     Sabit %72'lik bir dolgu göstermiyoruz — o sayı uydurma olurdu ve
     `aria-valuenow`'suz bir progressbar ile çelişirdi. Yerine hareketsiz
     bir tarama deseni "sürüyor" bilgisini sayı vermeden taşır. */
  .ilerleme-dolgu { display: none; }

  .ilerleme-yol {
    background: repeating-linear-gradient(
      -45deg,
      var(--brand-accent) 0 7px,
      var(--brand-primary) 7px 14px
    );
  }

  /* Hover/active'te yalnızca renk kalır */
  .eposta-kart:hover, .kopya-btn:hover, .kopya-btn:active,
  .eposta-kart:hover .eposta-link .ikon {
    transform: none !important;
  }
  .eposta-kart:hover .eposta-link .metin::after { transform: scaleX(1) !important; }

  /* Bildirim: yalnızca opaklık */
  .bildirim.gorunur {
    animation: k-bildirim-fade 160ms linear both,
               k-bildirim-fade-cikis 160ms 1900ms linear both;
  }
  @keyframes k-bildirim-fade       { from { opacity: 0; } to { opacity: 1; } }
  @keyframes k-bildirim-fade-cikis { from { opacity: 1; } to { opacity: 0; } }

  .kopya-btn.basarili .ikon--kopya { animation: none !important; opacity: 0; }
  .kopya-btn.basarili .ikon--tik   { animation: none !important; opacity: 1; transform: none; }
  .kopya-btn.basarili::after       { animation: none !important; opacity: 0; }

  /* Parallax katmanları sabit (JS zaten döngüyü başlatmaz) */
  #kat-uzak, #kat-orta, #kat-yakin { transform: none !important; }
}