/*
  İhya tanıtım sitesi — biçim.

  Sayfanın tamamı üç boyutlu bir sahnede duruyor: arka planda derinliğe
  yerleşmiş katmanlar, kahramanda geriye doğru uzayan bir işaret tüneli,
  bölümlerde kaydırmaya bağlı yatan/doğrulan yüzeyler. Hepsi CSS'in kendi
  3B'siyle (perspective + preserve-3d + translateZ) yapılıyor; dışarıdan
  hiçbir şey yüklenmiyor çünkü sunucunun CSP başlığı `default-src 'none'`
  ve CDN'e izin vermiyor.

  İKİ AYRI PERSPEKTİF KULLANIMI VAR, sebebi ayrı:

  · Kapsayıcıda `perspective` — kahraman tüneli ve döngü destesi gibi bir
    ARADA duran, ortak kaçış noktası paylaşması gereken öbeklerde. Orada
    kutuların birbirine göre derinliği anlamlı.
  · Dönüşümün içinde `perspective()` — yatay kayan şeritlerde. Kapsayıcıya
    verilseydi kaçış noktası kutunun ortasında sabit kalır, kayan kart ekranın
    ortasına geldiğinde eğrilerek görünürdü. Her kart kendi merkezinden
    bakılıyor; kaydırma nereye giderse gitsin eğim simetrik kalıyor.

  Hareketin tamamı `prefers-reduced-motion: reduce` altında kapanır: geçiş
  de, animasyon da, kaydırmaya bağlı eğim de. Dosyanın sonundaki blok bunu
  tek yerden yapıyor.
*/

@font-face {
  font-family: 'Amiri';
  src: url('fonts/amiri-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amiri';
  src: url('fonts/amiri-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── renkler ───────────────────────────────────────────────────────────────
   Uygulamanın kendi paletinden: neredeyse siyah zemin, altın vurgu, krem
   metin. Açık tema ayrı bir tasarım değil, aynı tasarımın ters çevrilmişi;
   altın orada koyulaşıyor çünkü krem zeminde açık altın okunmuyor. */

:root {
  color-scheme: dark light;

  --zemin: #08090b;
  --zemin-2: #0d0f12;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.06);
  --tel: rgba(255, 255, 255, 0.10);
  --tel-guclu: rgba(255, 255, 255, 0.18);
  --murekkep: #ece7dd;
  --soluk: #9c968b;
  --altin: #d8b46a;
  --altin-sonuk: rgba(216, 180, 106, 0.16);
  --golge: rgba(0, 0, 0, 0.55);
  --desen-renk: #ffffff;
  --desen-opaklik: 0.055;
  --cam: rgba(10, 11, 14, 0.72);

  --kabuk-en: 1120px;
  --kenar: clamp(20px, 5.5vw, 44px);
  --bolum-bosluk: clamp(76px, 15vw, 148px);
  --yay: cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    /* Açık temada kart ile zemin arasındaki fark koyu temadakinden AZ
       olur: beyaz üstüne beyaz ayrışmıyor. Bu yüzden zemin biraz
       koyulaştırıldı, kart tam beyaza çekildi ve tel çizgiler
       kalınlaştırıldı — yoksa kartların kenarı hiç görünmüyordu. */
    --zemin: #f1ebe0;
    --zemin-2: #fffdf9;
    --panel: rgba(255, 255, 255, 0.78);
    --panel-2: rgba(255, 255, 255, 0.95);
    --tel: rgba(40, 32, 18, 0.17);
    --tel-guclu: rgba(40, 32, 18, 0.32);
    --murekkep: #1c1a16;
    --soluk: #6d665a;
    --altin: #8f6f28;
    --altin-sonuk: rgba(143, 111, 40, 0.14);
    --golge: rgba(60, 48, 25, 0.16);
    --desen-renk: #4a3a16;
    --desen-opaklik: 0.07;
    --cam: rgba(250, 246, 238, 0.78);
  }
}

/* ─── temel ─────────────────────────────────────────────────────────────── */

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

html {
  /* Bağ ile bölüme atlarken başlık sabit üst çubuğun altında kalmasın. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Sayfa gövdesi arayüz yazısıyla, başlıklar Amiri ile. Amiri bir kitap
     keskisi; gövdede de kullanılınca satırlar uzun ve gri okunuyordu. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--murekkep);
  background: var(--zemin);
  /* Yatay kayma OLMAYACAK: sayfadaki 3B dönüşümler kutuları kendi
     kutularının dışına taşırıyor ve taşan taraf telefonda kaydırma
     çubuğu doğuruyordu. */
  overflow-x: clip;
}

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

a {
  color: var(--altin);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

::selection {
  background: var(--altin);
  color: var(--zemin);
}

:focus-visible {
  outline: 2px solid var(--altin);
  outline-offset: 3px;
  border-radius: 4px;
}

.kabuk {
  width: 100%;
  max-width: var(--kabuk-en);
  margin: 0 auto;
  padding-inline: var(--kenar);
}

.atla {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--altin);
  color: #17130a;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.atla:focus {
  transform: none;
}

/* ─── sahne: arka plandaki derinlik ─────────────────────────────────────────
   Sabit duran, üç ayrı derinliğe yerleşmiş katmanlar. Kaydırırken hepsi
   aynı 3B kutu içinde birlikte kayıyor; perspektif bölmesi sayesinde
   öndeki katman arkadakinden hızlı geçiyor. Parallaks taklit edilmiyor,
   gerçekten derinlikten doğuyor.

   ⚠ AŞAĞIDAKİ SAYILARIN TAMAMI hareket.js'in başındaki `SAHNE` tablosunda da
   yazılıdır ve TABLO ASILDIR. Sahne uygulamanın açılışına da taşınacak;
   taşıyan taraf oradan okuyor. Buradaki bir değeri değiştiren, tablodaki
   eşini de değiştirmeli — hangi bildirimin hangi satırın eşi olduğu tablonun
   `bicim` bölümünde tek tek yazılı. */

.sahne {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  perspective: 800px;
  perspective-origin: 50% 42%;
  pointer-events: none;
}

.sahne-derinlik {
  position: absolute;
  inset: -30%;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--sahne-egim, 0) * 1deg))
    translate3d(0, calc(var(--sahne-kay, 0) * 1px), 0);
}

.kat {
  position: absolute;
  inset: 0;
}

/* En derindeki katman: ufuktaki altın hâle. Tek renk bir zeminde durursa
   sayfanın nereye baktığı belli olmuyordu. */
.kat-ufuk {
  transform: translateZ(-700px) scale(1.875);
  background:
    radial-gradient(120% 70% at 50% 8%, var(--altin-sonuk), transparent 62%),
    radial-gradient(90% 60% at 15% 95%, rgba(120, 150, 190, 0.10), transparent 60%);
}

/* Ortadaki katman: gülbezek dokusu. Çizimi hareket.js yapıyor (bkz. orada);
   burada yalnız derinliğe konuyor. Ölçek perspektif bölmesini geri alıyor:
   800/(800+380) tersi. */
.kat-desen {
  transform: translateZ(-380px) scale(1.475);
}

.desen {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.85;
}

/* En öndeki katman: seyrek rub'ul hizb işaretleri. Kaydırırken en hızlı
   geçen katman bu; derinliğin okunmasını sağlayan da o hız farkı. */
.kat-yildiz {
  transform: translateZ(-90px) scale(1.1125);
  /* Geniş ekranda karo sayısı arttığı için doku duvar kâğıdına yaklaşıyor;
     bu yüzden sönük. Derinliği veren şey motifin görünürlüğü değil, en önde
     duran katman olarak en hızlı geçmesi. */
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23c9a45e' stroke-width='0.7' d='M50 31.5 53.35 34.85H58.1V39.6L61.45 43 58.1 46.35V51.1H53.35L50 54.45 46.65 51.1H41.9V46.35L38.55 43 41.9 39.6V34.85H46.65Z'/%3E%3C/svg%3E");
  background-size: 210px 210px;
}

/* Kenarları karartan/açan perde: 3B katmanlar ekran kenarına doğru
   sertleşiyordu, sahne kutunun içinde bitmiş gibi görünüyordu. */
.perde {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 30%, transparent 38%, var(--zemin) 100%);
}

/* ─── kaydırma ilerlemesi ──────────────────────────────────────────────── */

.ilerleme {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 55;
  transform-origin: 0 50%;
  transform: scaleX(var(--ilerleme, 0));
  background: linear-gradient(90deg, transparent, var(--altin));
}

/* ─── üst çubuk ─────────────────────────────────────────────────────────────
   Dar ekranda beş bağ yan yana sığmıyordu ve sonuncusu ("Destek") kesiliyordu.

   Çözüm açılır menü DEĞİL: beş bağ da beş kısa kelime, hepsi ekranda
   durabilir. Yer, markanın yazısı 620 pikselin altında gizlenerek açılıyor
   — işaret zaten markayı taşıyor ve ana sayfada adı hemen altında duruyor.
   Açılır menü bir dokunuş daha isterdi ve sayfaların hepsini gizlerdi. */

.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cam);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--tel);
}

.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 58px;
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--murekkep);
  text-decoration: none;
  font-family: 'Amiri', Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.marka svg {
  width: 24px;
  height: 24px;
  color: var(--altin);
  flex: none;
}

@media (max-width: 619px) {
  .marka span {
    display: none;
  }
}

.gezinme {
  display: flex;
  align-items: center;
  gap: clamp(1px, 1.4vw, 10px);
}

/* Ölçüler 360 pikselde beş bağın toplamı kabuğa sığacak şekilde seçildi;
   biri büyütülürse "Destek" yine kesilir. */
.gezinme a {
  padding: 7px clamp(1px, 1vw, 10px);
  border-radius: 8px;
  color: var(--soluk);
  text-decoration: none;
  font-size: clamp(0.68rem, 2.9vw, 0.86rem);
  white-space: nowrap;
  transition: color 0.2s;
}

.gezinme a:hover {
  color: var(--murekkep);
}

.gezinme a[aria-current='page'] {
  color: var(--altin);
}

/* ─── kahraman ──────────────────────────────────────────────────────────────
   Sayfanın ilk ekranı. Ortada uygulamanın işareti, ama düz bir logo olarak
   değil: aynı işaret yedi kez, her biri bir öncekinden 120 piksel geride,
   yani geriye doğru uzayan bir tünel. Halkalar farklı hızlarda dönüyor,
   bu yüzden tünel burgulu görünüyor.

   Tünelin adı da bir gerekçe: uygulamanın ezber döngüsü aynı şeyin
   aralıklarla geri gelmesi. */

.kahraman {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(96svh, 780px);
  padding: clamp(40px, 10vw, 90px) var(--kenar) clamp(60px, 12vw, 110px);
  text-align: center;
  /* Bu bölümde kutusundan taşan iki şey var: dönen halkanın köşegeni ve
     yazının arkasındaki perde. İkisi de bilerek taşıyor, ama kırpılmazsa
     gövde yatayda kayıyor — telefonda sayfa sağa sola gidiyordu. Kırpma tam
     ekran kenarında olduğu için görünürde bir kayıp yok. */
  overflow: hidden;
}

.oyma {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 620px;
  pointer-events: none;
  /* Tünel yazının ARKASINDA kalır. Aynı parlaklıkta bırakıldığında
     çizgileri harflerin üstünden geçiyor ve ad okunmuyordu. */
  opacity: calc(0.82 - var(--kahraman-p, 0) * 0.75);
}

.oyma-derinlik {
  width: min(94vw, 540px);
  aspect-ratio: 1;
  position: relative;
  transform-style: preserve-3d;
  /* DURURKEN EĞİM YOK. Sekiz derecelik bir taban eğimi denendi ve tünel
     dağıldı: 660 piksel derinlikteki halka o eğimle doksan piksel aşağı
     kayıyor, halkalar eşmerkezli olmaktan çıkıp aşağıya doğru bir yumağa
     dönüşüyordu. Duruşta tünel tam karşıdan görünüyor; eğimi kaydırma
     veriyor ve o sırada zaten geriye çekilip sönüyor. */
  transform: rotateX(calc(var(--kahraman-p, 0) * 40deg))
    translateZ(calc(var(--kahraman-p, 0) * -460px));
}

.halka {
  position: absolute;
  inset: 0;
  animation: halka-don 60s linear infinite;
}

/* Bir halka = TEK KARE. Önce her halkaya sekiz köşeli yıldızın tamamı
   (üst üste binen iki kare) konmuştu; yedi yıldız iç içe girince tünel
   okunmaz bir karalamaya dönüştü. Rub'ul hizb zaten iki kareden doğuyor,
   yani öndeki iki halka o yıldızı kendiliğinden kuruyor; arkadakiler de
   sekizgen bir tünel olarak açılıyor. */
.halka i {
  position: absolute;
  inset: 17%;
  border: 1.5px solid var(--altin);
  border-radius: 3px;
}

/*
  DÖNME `rotate`, DERİNLİK `translate` — ikisi de ayrı özellik, `transform`
  değil. Sebebi bir hata: dönme `transform: rotate()` diye yazılınca animasyon
  `transform`un tamamını devralıyor ve halkaların derinliği siliniyordu.
  Tünel o hâlde tek bir yamuk yıldıza çöküyordu. Ayrı özellikler birbirini
  ezmeden birleşiyor.
*/
@keyframes halka-don {
  to {
    rotate: 360deg;
  }
}

/*
  Halkaların hepsi AYNI hız ve yönde dönüyor; aralarındaki fark yalnız faz.
  Tur altmış saniye, sekizde biri 7,5 saniye — yani her halkaya 7,5 saniyelik
  eksi gecikme vermek onu bir öncekinden 45 derece ileri alıyor. Öndeki iki
  halka böylece daima rub'ul hizb işaretini kuruyor, tünelin tamamı da tek
  parça hâlinde burguluyor. Ayrı hızlar denendi: halkalar birbirinden bağımsız
  dönünce derinlik gitti, ekranda dönen yedi ayrı kare kaldı.

  Küçülmeyi perspektifin kendisi yapıyor, elle ölçek verilmiyor. Sayı sabit
  (yedi) olduğu için `nth-child` — satır içi stil sunucunun CSP başlığında
  zaten yasak (`style-src 'self'`).
*/
.halka:nth-child(1) { translate: 0 0 0;      opacity: 0.9;  animation-delay: 0s; }
.halka:nth-child(2) { translate: 0 0 -120px; opacity: 0.7;  animation-delay: -7.5s; }
.halka:nth-child(3) { translate: 0 0 -240px; opacity: 0.54; animation-delay: -15s; }
.halka:nth-child(4) { translate: 0 0 -360px; opacity: 0.4;  animation-delay: -22.5s; }
.halka:nth-child(5) { translate: 0 0 -480px; opacity: 0.29; animation-delay: -30s; }
.halka:nth-child(6) { translate: 0 0 -600px; opacity: 0.2;  animation-delay: -37.5s; }
.halka:nth-child(7) { translate: 0 0 -720px; opacity: 0.11; animation-delay: -45s; }

/* Tünelin dibindeki ışık. Uzayıp giden bir boşluk yerine bir yere varıyor. */
.oyma-dip {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  translate: 0 0 -820px;
  background: radial-gradient(circle, rgba(216, 180, 106, 0.9), transparent 66%);
  filter: blur(10px);
}

.kahraman-yazi {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
  transform: translateY(calc(var(--kahraman-p, 0) * -40px));
}

.kahraman-yazi::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -18% -30%;
  background: radial-gradient(64% 56% at 50% 47%, var(--zemin) 40%, transparent 78%);
}

.ad {
  margin: 0;
  font-family: 'Amiri', Georgia, serif;
  font-weight: 700;
  font-size: clamp(3.4rem, 19vw, 8.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--murekkep) 30%, var(--altin));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tez {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.12rem, 4.4vw, 1.5rem);
  line-height: 1.45;
}

.kucuk {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--soluk);
}

.rozetler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--tel);
  border-radius: 14px;
  background: var(--panel);
  text-align: left;
}

.rozet svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--soluk);
}

.rozet b {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
}

.rozet small {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soluk);
}

/* ─── bölüm ortak ──────────────────────────────────────────────────────── */

.bolum {
  position: relative;
  padding-block: var(--bolum-bosluk);
}

.ustyazi {
  margin: 0 0 10px;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--altin);
}

.baslik {
  margin: 0 0 18px;
  font-family: 'Amiri', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 1.1;
}

.giris-metni {
  margin: 0 0 34px;
  max-width: 52ch;
  color: var(--soluk);
  font-size: 1.02rem;
}

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

.dugme {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  border: 1px solid var(--tel-guclu);
  border-radius: 12px;
  color: var(--murekkep);
  text-decoration: none;
  font-size: 0.95rem;
  transition: transform 0.25s var(--yay), border-color 0.25s;
}

.dugme:hover {
  transform: translateY(-2px);
  border-color: var(--altin);
}

.dugme-ana {
  background: var(--altin);
  border-color: var(--altin);
  color: #17130a;
  font-weight: 600;
}

/* ─── belirme ───────────────────────────────────────────────────────────────
   Bloklar düz solmuyor: geriye yatmış bir yüzeyken doğrulup öne geliyorlar.
   Gizleme yalnız `data-hareket` işareti varken, yani hareket.js kurulduğunu
   bildirdiğinde geçerli — betik hiç çalışmazsa hiçbir metin kaybolmaz. */

@media (prefers-reduced-motion: no-preference) {
  [data-hareket] .belirir {
    opacity: 0;
    transform: perspective(900px) rotateX(14deg) translate3d(0, 26px, -60px);
    transition:
      opacity 0.7s var(--yay) var(--gecikme, 0ms),
      transform 0.8s var(--yay) var(--gecikme, 0ms);
  }

  [data-hareket] .belirir.gorundu {
    opacity: 1;
    transform: none;
  }
}

/* ─── döngü destesi ─────────────────────────────────────────────────────────
   Sayfanın "kaydırdıkça sahne değişsin" isteğinin karşılığı. Üç kart aynı
   yerde, üst üste ve ayrı derinliklerde duruyor. Bölüm yapışkan kaldığı
   sürece kaydırma ilerlemesi `--asama` değişkenine yazılıyor; kart kendi
   sırasıyla o değerin farkına bakıp öne geliyor ya da geriye gömülüyor.

   Kartlar mutlak konumlu DEĞİL, ızgarada aynı hücrede: mutlak olsalardı
   bölümün yüksekliği en uzun kartı tutmaz, dar ekranda metin taşardı. */

.deste-bolum {
  position: relative;
}

.deste-giris {
  padding-top: var(--bolum-bosluk);
}

/* Yolun boyu kart sayısına bağlı: yapışkan blok bir ekran, kalan iki ekran
   da iki geçiş demek. Kart eklenirse burası da uzamalı, yoksa geçişler
   birbirine biner. */
.deste-yol {
  height: 320vh;
}

.deste-yapisan {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 26px;
  padding-block: 70px 40px;
}

/*
  KARTLAR ÇAPRAZ SOLMUYOR, KAYIYOR.

  Önce hepsi aynı yerde durup derinlikte yer değiştiriyordu: öndeki opak,
  arkadakiler sönük. Öyle olmadı — tarayıcı bu kartları derinliğe göre
  SIRALAMIYOR, belge sırasına göre boyuyor. Yani arkadaki kart öndekinin
  opak zemininin üstüne düşüyor ve iki yazı üst üste okunuyordu.

  Boyama sırasıyla çekişmek yerine ona uyuldu: kartlar dikeyde diziliyor,
  sıradaki kart alttan yukarı kayıp öndekinin ÜSTÜNÜ örtüyor. Belge sırası
  zaten bunu istiyor. Derinlik duruyor — kayan kart aynı anda geriye gömülüp
  eğiliyor — ama artık iki yazı hiçbir anda aynı yerde olmuyor.
*/
.deste {
  perspective: 900px;
  perspective-origin: 50% 45%;
  /* Kayıp giden kart sahnenin dışında görünmesin. Solma zaten kenara
     varmadan bitiyor; kırpma yalnız emniyet. */
  overflow: hidden;
}

.deste-ic {
  display: grid;
  transform-style: preserve-3d;
}

.kart {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  min-height: min(46svh, 340px);
  padding: clamp(26px, 7vw, 44px);
  border: 1px solid var(--tel);
  border-radius: 22px;
  background: var(--zemin-2);
  box-shadow: 0 30px 80px var(--golge);
  /* --u: kartın sırası ile şu anki aşama arasındaki işaretli fark.
     Negatifse kart geçildi (yukarı çıkar), pozitifse sırası gelmedi
     (aşağıda bekler). */
  --u: calc(var(--sira) - var(--asama, 0));
  --mutlak: max(var(--u), calc(var(--u) * -1));
  transform:
    translateY(calc(var(--u) * 112%))
    translateZ(calc(var(--mutlak) * -190px))
    rotateX(calc(var(--u) * -14deg));
  opacity: calc(1 - var(--mutlak) * 1.15);
  transition: transform 0.18s linear, opacity 0.18s linear;
}

.kart:nth-child(1) { --sira: 0; }
.kart:nth-child(2) { --sira: 1; }
.kart:nth-child(3) { --sira: 2; }

.kart h3 {
  margin: 0 0 10px;
  font-family: 'Amiri', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  line-height: 1.12;
}

.kart p {
  margin: 0;
  color: var(--soluk);
  max-width: 40ch;
  font-size: clamp(1rem, 4.2vw, 1.15rem);
}

.kart-sira {
  display: block;
  margin-bottom: 14px;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--altin);
}

.asamalar {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.asama-nokta {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--tel-guclu);
  transition: background 0.3s;
}

.asama-nokta.etkin {
  background: var(--altin);
}

/* ─── vitrin: yatay kayan 3B şerit ──────────────────────────────────────────
   Ekran görüntüleri bir ızgaraya dizilmiyor; parmakla kaydırılan bir şeritte
   duruyorlar ve ortadan uzaklaştıkça kendi eksenlerinde dönüyorlar. Eğimi
   hareket.js her karta `--uzak` olarak yazıyor (ortadaki 0, sağdaki +1...).

   `perspective()` dönüşümün İÇİNDE: dosyanın başındaki gerekçe. */

.vitrin {
  display: flex;
  gap: clamp(14px, 4vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 30px calc(50% - min(38vw, 190px)) 40px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vitrin::-webkit-scrollbar {
  display: none;
}

.vitrin-oge {
  flex: none;
  width: min(76vw, 380px);
  margin: 0;
  scroll-snap-align: center;
  --mutlak: max(var(--uzak, 0), calc(var(--uzak, 0) * -1));
  transform:
    perspective(1100px)
    rotateY(calc(var(--uzak, 0) * -34deg))
    translateZ(calc(var(--mutlak) * -140px))
    scale(calc(1 - var(--mutlak) * 0.06));
  transition: transform 0.12s linear, opacity 0.12s linear;
  opacity: calc(1 - var(--mutlak) * 0.35);
}

.vitrin-oge figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--soluk);
}

/* Telefon çerçevesi CSS ile çiziliyor; çerçeve görseli indirilmiyor.
   Tek bir PNG çerçeve bile sayfadaki kırk WebP'nin toplamından büyük olur
   ve açık/koyu temaya uymazdı. */
.telefon {
  position: relative;
  padding: 8px;
  border: 1px solid var(--tel-guclu);
  border-radius: 34px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow: 0 30px 70px var(--golge);
}

.telefon-govde {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #000;
  aspect-ratio: 600 / 1067;
}

.telefon-govde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.telefon-centik {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 74px;
  height: 5px;
  margin-left: -37px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 1;
}

/* ─── ölçüler ──────────────────────────────────────────────────────────── */

.olculer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border: 1px solid var(--tel);
  border-radius: 18px;
  overflow: hidden;
}

/* Tel çizgiler hücrenin KENDİ gölgesinden; kabın zemini boşluklardan
   sızarak değil. Boşluk yöntemiyle çiziliyordu ve beş ölçü çift sütuna
   sığmadığı için son satırda boş bir hücre kalıyor, orası açık gri bir
   levha olarak görünüyordu. Gölge yalnız var olan hücrenin etrafında. */
.olcu {
  padding: 24px 16px;
  text-align: center;
  background: var(--zemin);
  box-shadow: 0 0 0 0.5px var(--tel);
}

.sayi {
  display: block;
  font-family: 'Amiri', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 2.7rem);
  line-height: 1;
  color: var(--altin);
  font-variant-numeric: tabular-nums;
}

.ad-etiket {
  display: block;
  margin-top: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soluk);
}

.olcu-not {
  margin: 18px 0 0;
  font-size: 0.86rem;
  color: var(--soluk);
  max-width: 54ch;
}

/* ─── özellik ızgarası ─────────────────────────────────────────────────── */

.ozellikler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
}

.ozellik {
  padding: 24px;
  border: 1px solid var(--tel);
  border-radius: 16px;
  background: var(--panel);
  transition: transform 0.3s var(--yay), border-color 0.3s;
}

.ozellik:hover {
  transform: perspective(800px) translateZ(24px);
  border-color: var(--tel-guclu);
}

.ozellik h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 600;
}

.ozellik p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--soluk);
}

/* ─── yokluk ───────────────────────────────────────────────────────────── */

.yokluk-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.yokluk-liste li {
  padding: 9px 18px;
  border: 1px solid var(--tel);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--soluk);
}

.yokluk-metin {
  margin: 0;
  max-width: 58ch;
  color: var(--soluk);
}

/* ─── kullanım sayfası ─────────────────────────────────────────────────── */

.icindekiler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.icindekiler a {
  padding: 9px 16px;
  border: 1px solid var(--tel);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--murekkep);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s var(--yay);
}

.icindekiler a:hover {
  border-color: var(--altin);
  transform: translateY(-2px);
}

.akis {
  padding-block: clamp(52px, 10vw, 96px);
  border-top: 1px solid var(--tel);
}

.serit {
  display: flex;
  gap: clamp(14px, 4vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 26px 0 0;
  padding: 24px calc(50% - min(38vw, 175px)) 34px;
  list-style: none;
  scrollbar-width: none;
}

.serit::-webkit-scrollbar {
  display: none;
}

.adim {
  flex: none;
  width: min(76vw, 350px);
  scroll-snap-align: center;
  --mutlak: max(var(--uzak, 0), calc(var(--uzak, 0) * -1));
  transform:
    perspective(1100px)
    rotateY(calc(var(--uzak, 0) * -26deg))
    translateZ(calc(var(--mutlak) * -110px));
  transition: transform 0.12s linear, opacity 0.12s linear;
  opacity: calc(1 - var(--mutlak) * 0.3);
}

.adim-yazi {
  margin-top: 16px;
}

.adim-no {
  display: block;
  margin-bottom: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: var(--altin);
}

.adim-yazi p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--soluk);
}

/* ─── yazı sayfaları (gizlilik, kaynaklar, destek) ─────────────────────── */

.yazi {
  padding-block: clamp(48px, 10vw, 96px);
  max-width: 760px;
}

.yazi h1 {
  margin: 0 0 8px;
  font-family: 'Amiri', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 8vw, 3.2rem);
  line-height: 1.1;
}

.yazi h2 {
  margin: 52px 0 14px;
  font-family: 'Amiri', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  line-height: 1.2;
}

.yazi h3 {
  margin: 40px 0 12px;
  font-family: 'Amiri', Georgia, serif;
  font-weight: 700;
  font-size: 1.35rem;
}

.yazi h4 {
  margin: 26px 0 8px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--altin);
}

.yazi p,
.yazi li,
.yazi td,
.yazi th {
  /* Gizlilik metninde bölünmeyen uzun bir dize var (künye satırı); dar
     ekranda gövdeyi yatayda taşırıyordu. */
  overflow-wrap: anywhere;
}

.yazi p,
.yazi li {
  color: var(--soluk);
}

.yazi li {
  margin-bottom: 8px;
}

.yazi hr {
  margin: 44px 0;
  border: 0;
  border-top: 1px solid var(--tel);
}

.yazi code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--panel-2);
  font-size: 0.88em;
}

.yazi blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--altin);
}

.tarih-serit {
  margin: 0 0 28px;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--altin);
}

.tablo-sarma {
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid var(--tel);
  border-radius: 12px;
}

.yazi table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.yazi th,
.yazi td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid var(--tel);
}

.yazi th {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--altin);
  font-weight: 600;
}

.yazi tbody tr:last-child td {
  border-bottom: 0;
}

/* ─── alt ──────────────────────────────────────────────────────────────── */

.alt {
  border-top: 1px solid var(--tel);
  padding-block: 44px 56px;
  background: var(--zemin-2);
}

.alt-kunye {
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: var(--soluk);
}

.alt-baglar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 20px;
}

.alt-baglar a {
  font-size: 0.9rem;
  color: var(--murekkep);
  text-decoration: none;
}

.alt-baglar a:hover {
  color: var(--altin);
}

.alt-yapimci {
  margin: 0;
  font-size: 0.8rem;
  color: var(--soluk);
}

/* ─── hareketi azaltma ──────────────────────────────────────────────────────
   Tek yerden kapanır. Kaydırmaya bağlı değişkenleri hareket.js zaten
   yazmıyor; burada duran şey CSS'in kendi animasyon ve geçişleri, bir de
   3B eğimlerin sıfırlanması. Hiçbir bilgi kaybolmuyor, yalnız hareket. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .oyma-derinlik,
  .sahne-derinlik,
  .kahraman-yazi {
    transform: none;
  }

  .kart {
    transform: none;
    opacity: 1;
  }

  .deste-yol {
    height: auto;
  }

  .deste-yapisan {
    position: static;
    min-height: 0;
    padding-block: var(--bolum-bosluk) 0;
  }

  .deste-ic {
    gap: 14px;
  }

  .kart {
    grid-area: auto;
  }

  .asamalar {
    display: none;
  }

  .vitrin-oge,
  .adim {
    transform: none;
    opacity: 1;
  }
}