/* static/css/satis.css — SATIŞ SAYFALARI
   ═══════════════════════════════════════════════════════════════════
   "SAHNE IŞIĞI" — onaylanan tasarım (Ağustos 2026).

   NE DEĞİŞTİ VE NEDEN
   ───────────────────
   Önceki dil ("DOSYA": solda kesintisiz kenar rayı, ağır kurallar, sola
   yaslı vaka dosyası) REDDEDİLDİ. Yedeği `design_previews/reddedilen-v3/`
   altında duruyor. Reddedilme sebebi tek cümleyle: sayfa bir DOSYA gibi
   duruyordu ama okunması gereken şey bir İDDİA.

   Yeni dilin üç kararı:

   1. ORTALI KOMPOZİSYON. Sayfanın varsayılan hizası `center`. Yalnızca
      çok satırlı listeler ve iki sütunlu kıyaslar sola dönüyor — orada
      hizasızlık okumayı bozardı. Ray kalktı; sayfayı taşıyan şey artık
      kenardaki çizgi değil, bölümlerin kendi ritmi.

   2. KESKİN GEÇİŞ YOK. Bölümlerin kendi arka planı YOK. Sayfanın tabanı
      tek sürekli yüzey (kâğıt). Koyu bölgeler, kendi kutusunun `--tuy`
      kadar DIŞINA taşan ve maske ile eriyen tek bir katman olarak
      basılıyor: her geçiş 2 × `--tuy` boyunca yumuşuyor, tek bir kesit
      çizgisi yok. Metin blokları geçiş bölgesine denk gelmiyor çünkü
      `--kat-dolgu` geçişin yarı genişliğinden büyük tutuluyor. İkisi
      birbirine bağlı — birini değiştirip ötekini bırakma.

   3. HAREKET ORKESTRE, DEKORATİF DEĞİL. Sayfa durur; bölüme varıldığında
      kısa, net, TEK SEFERLİK bir dizi çalışır ve durur. Süreler 280–620ms.
      Her başlangıç durumu (opacity:0 / translate) YALNIZCA
      `prefers-reduced-motion: no-preference` içinde VE YALNIZCA
      `.js-hareket` sınıfı varken tanımlı. Betik çalışmazsa da, hareket
      kısıtlıysa da içerik TAM GÖRÜNÜR. Bu pazarlıksız.

   PAZARLIKSIZ KURALLAR — bozulursa dil dağılır
   ─────────────────────────────────────────────
   1. ALTIN YOK, İKİNCİ RENK YOK. Tek aksan kırmızı iki tonda:
      `--s-aksan` kâğıtta metin (8.8:1) ve her yerde dolgu,
      `--s-aksan-isik` KOYU zeminde metin (4.85:1). İkisi AYNI kırmızı.
   2. FRAUNCES İTALİK (`.f`) TAM ALTI YERDE, hepsi kırmızı:
      kahraman "satırsın." · raf "Senin sektörün deyince?" ·
      raf "Son satır boşsa…" · bölümler "teşhis var." ·
      vakalar "Yapılmış işler." · kapanış "Gerisi sende."
      Yedincisini eklemeden önce birini çıkar.
   3. TİP ÖLÇEĞİ YEDİ BASAMAK (`--s-t1…--s-t7`). Sabit px `font-size` bu
      dosyada SIFIR. Yeni bir boyut gerekiyorsa ölçeği değiştir, yanına
      sekizinci bir sabit ekleme.
   4. SAYFANIN TEK DERİNLİK ANI raftaki BOŞ YUVA. Kart yok, yüzen kutu yok;
      gölge yalnızca satın alma düğmesinde (yükseklik) ve o boşlukta
      (oyuk) var.
   5. Renk YALNIZCA `:root` token bloğunda tanımlanır — `dogrula.py:5805`
      seçicisinde `:root` geçmeyen hiçbir kuralda `#hex` kabul etmiyor.
      `rgba()` ve `color-mix()` serbest; maskelerin "opak" rengi bile
      token üzerinden veriliyor.

   TEK TEMA: KÂĞIT
   ───────────────
   Satış sayfasının koyu TEMASI yok (Ağustos 2026). Sayfadaki koyu
   bölgeler tasarımın parçası, cihaz tercihinin sonucu değil. Sebebi
   ölçüm: `_belge.html` ORTAK dosya ve `color-scheme: light dark`
   basıyor; tema varsayılanı "Sistem" olduğu için telefonu koyu moddaki
   HER ziyaretçi sayfayı istenmeyen bir koyulukta görüyordu. Burada
   yerel olarak `color-scheme: light` konuyor. Panel (`app.css`) koyu
   temasını kullanmaya devam ediyor — `tema.js` ve `_belge.html`
   ORTAK dosyalar, onlara dokunulmadı.

   YÜZLER BU DOSYADA YÜKLENMEZ
   ───────────────────────────
   `@font-face` yok. PT Sans (400/700) ve Fraunces italic `app.css`'ten
   geliyor; burada yalnızca `--font-govde` ve `--font-baslik` token'ları
   tüketiliyor. İkinci bir yükleme aynı dosyaları iki kez indirtirdi.

   KABUKLA İLİŞKİ
   ──────────────
   `templates/genel/_kabuk.html` bu dosyanın tek tüketicisi. Kabuk üç şey
   getiriyor ve üçünün de stili aşağıda: künye şeridi (üst), yapışkan
   satın al şeridi (alt, `.s-serit`) ve altbilgi. Şerit VARSAYILAN
   GÖRÜNÜR; `satis.js` onu yalnızca GİZLER.

   🔴 `.s-serit` ADI ÇAKIŞIYORDU. Onaylanan taslakta kahramandaki güven
   metni satırı da `.s-serit` sınıfını taşıyordu; kabuktaki yapışkan
   şeritle aynı ad. Güven satırı `.s-guven` olarak yeniden adlandırıldı,
   `.s-serit` şeride bırakıldı. */


/* ═════════════════════════════════════════════════════════════
   1. TOKEN — tek yerde, tek palet
   ═════════════════════════════════════════════════════════════ */

:root {
  --s-zemin:        #FAF8F4;   /* sayfanın tabanı — tek sürekli yüzey */
  --s-murekkep:     #0B0C0D;   /* ana tip · koyu katların zemini */
  --s-ikincil:      #4E5257;   /* kâğıtta ikincil metin — 7.4:1 */
  --s-cizgi:        #8A867F;   /* koyuda ikincil metin · ince kural */
  --s-aksan:        #8E1218;   /* kâğıtta metin 8.8:1 · her yerde dolgu */
  --s-aksan-isik:   #DA4E55;   /* KOYUDA metin 4.85:1 — aynı kırmızı, açık ton */
  --s-aksan-uzeri:  #FFFFFF;   /* kırmızı dolgunun üstündeki yazı — 9.3:1 */

  /* Rafın boş yuvası: sayfanın tek OYUK'u. Renk değil derinlik taşıyor. */
  --s-golge-1: rgba(20, 18, 14, .06);
  --s-golge-2: rgba(20, 18, 14, .12);

  /* Kapak mockup'ının kendi zemini. Şeritteki küçük kapak bu yatağın
     üstünde duruyor; yatak birebir aynı olmazsa görselin kenarında
     dikiş görünür. */
  --s-yatak: #D7D7D7;

  /* Kabuk ölçüleri — künye, altbilgi ve yapışkan şerit aynı hattı tutar. */
  --s-en:  1180px;
  --s-yan: clamp(18px, 4vw, 44px);
}


/* ═════════════════════════════════════════════════════════════
   2. TABAN
   ═════════════════════════════════════════════════════════════
   Seçici `body.s-govde` DEĞİL: önizleme üreticisi her ekranı bir div
   içine koyup gövde sınıfını oraya taşıyor; etikete bağlı kural orada
   eşleşmez ve önizleme sayfayı yanlış zeminde gösterir. */

.s-govde {
  /* Ölçüm ve zamanlama (renk değil). TİP ÖLÇEĞİ YEDİ BASAMAK. */
  --s-t1: clamp(2.125rem, 5.6vw, 4rem);       /* kahraman başlık */
  --s-t2: clamp(1.5rem, 3.6vw, 2.25rem);      /* bölüm başlığı */
  --s-t3: clamp(1.125rem, 2.2vw, 1.375rem);   /* fiyat · alt başlık */
  --s-t4: clamp(1.0625rem, 1.7vw, 1.1875rem); /* lede */
  --s-t5: clamp(1rem, 1.35vw, 1.0625rem);     /* gövde */
  --s-t6: 0.9375rem;                          /* küçük */
  --s-t7: 0.75rem;                            /* etiket */
  --s-olcek: clamp(1rem, 2.1vw, 1.3125rem);   /* ritim birimi */

  /* Geçiş geometrisi — İKİSİ BİRBİRİNE BAĞLI, ayrı ayrı değiştirme.
     `--tuy` geçişin YARISI (erime = 2 × --tuy). `--kat-dolgu` ondan
     BÜYÜK olmak zorunda, yoksa metin geçişin içine düşer. */
  --tuy: 120px;
  --kat-dolgu: clamp(8rem, 9.8vw, 8.5rem);

  /* 3D kitabın genişliği. TOKEN, çünkü kitap iki sayfada iki BOYUTTA
     duruyor: landing'in kapanışında (karar öncesi, ürünü tanıtan) ve
     checkout özetinde (karar anı, yalnızca ne aldığını hatırlatan — daha
     küçük). `.s-yuva` bu değeri okuyor; checkout `.s-ozet` üzerinden
     eziyor. Sayıyı iki yerde tutmak ikisini ayrı ayrı eskitirdi. */
  --kitap-en: clamp(8.5rem, 17vw, 11.5rem);

  --e: cubic-bezier(.2, .7, .3, 1);   /* tek yumuşama eğrisi */

  /* Kademe indeksi. Değerini `satis.js` her diziye TEK TEK yazıyor;
     burada BAŞLANGIÇ DEĞERİ bildiriliyor. Betik çalışmazsa her öğe
     0. kademede kalır — yani hepsi aynı anda, gecikmesiz belirir.
     🔴 `var(--i, 0)` gibi satır içi yedek DEĞER YAZMA: aynı sayı iki
     yerde durur ve biri değişince öbürü sessizce eskir. Tanım burada. */
  --i: 0;

  margin: 0;
  background: var(--s-zemin);
  color: var(--s-murekkep);
  font-family: "PT Sans", var(--font-govde);
  font-weight: 400;
  font-size: var(--s-t5);
  line-height: 1.56;
  text-align: center;                 /* ORTALI KOMPOZİSYON — varsayılan bu */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Dikey taşma SERBEST kalmalı: koyu katlar kendi kutusunun dışına
     taşıyor. `hidden` yazılsaydı tarayıcı dikey ekseni de kırpardı;
     `clip` diğer ekseni `visible` bırakır. */
  overflow-x: clip;
  overflow-wrap: break-word;
  position: relative;
  isolation: isolate;
  color-scheme: light;
}
.s-govde *, .s-govde *::before, .s-govde *::after { box-sizing: border-box; }

/* 🔴 `:where()` ŞART — sıfır özgüllük, sonraki bileşen sınıfları kazanır.
   Düz yazılsaydı `.s-govde p` (0,1,1) olur ve tek sınıflı her bileşenin
   kendi boşluğunu sessizce ezerdi. Bu bir kez yaşandı. */
.s-govde :where(p, h1, h2, h3, ol, ul, li, figure, details, summary) { margin: 0; padding: 0; }
.s-govde :where(ol, ul) { list-style: none; }
.s-govde :where(img) { max-width: 100%; display: block; }

/* 🔴 YATAY KIRPMA GÖVDEDE DEĞİL, SAYFA SARMALAYICISINDA YAPILIR.
   ÖLÇÜLDÜ: kapanış sahnesinin hüzmesi ve ışık havuzu (`.s-huzme`,
   `.s-havuz`) bilerek kendi kabından taşıyor — 390px'te sağa 74px.
   Onaylanan taslakta `.s-govde` bir `<div>`'di ve `overflow-x:clip`
   orada normal bir kutu gibi kırpıyordu. Canlı sayfada `.s-govde`
   `<body>`; gövdenin taşması GÖRÜNÜM ALANINA devrolur ve Chromium bu
   devirde kırpmıyor — sayfa gerçekten 74px yana kayıyordu (denendi:
   `window.scrollTo(500,0)` → `scrollX = 74`).
   `.s-sayfa` sıradan bir blok, kırpma orada beklendiği gibi çalışıyor.

   `hidden` DEĞİL `clip`: `hidden` diğer ekseni de `auto`ya çevirip
   kaydırma kabı yaratır ve koyu katların DİKEY taşmasını (geçişlerin
   tamamı ona dayanıyor) keserdi. `clip` öbür ekseni `visible` bırakır.
   Yapışkan şerit `position:fixed` olduğu için kapsayıcı bloğu görünüm
   alanı — bu kırpmadan etkilenmiyor (denendi). */
.s-sayfa { overflow-x: clip; }


/* ═════════════════════════════════════════════════════════════
   3. KABUK — önizleme şeridi · künye · altbilgi
   ═════════════════════════════════════════════════════════════
   Künye ve altbilgi koyu: ilk kat (kahraman) ve son kat (kapanış) da
   koyu olduğu için sayfa üstten ve alttan KESİNTİSİZ başlıyor/bitiyor.
   Logo asla ters çevrilmez — sağ ucunda fotogerçekçi bir işaret var,
   `filter: invert()` onu negatife dönüştürürdü. */

.s-onizleme {
  background: var(--s-aksan);
  color: var(--s-aksan-uzeri);
  padding: 7px var(--s-yan);
  font-family: "PT Sans", var(--font-govde);
  font-size: var(--s-t7);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

.s-ust { background: var(--s-murekkep); }
.s-ust-ic {
  max-width: var(--s-en);
  margin-inline: auto;
  padding: 11px var(--s-yan);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--s-zemin);
  text-align: left;
}
.s-marka { display: flex; align-items: center; gap: 12px; min-width: 0; }
.s-marka img { height: 32px; width: auto; display: block; }
.s-marka-ad {
  font-weight: 700;
  font-size: var(--s-t6);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s-marka-ad span {
  display: block;
  font-weight: 400;
  font-size: var(--s-t7);
  letter-spacing: .13em;
  color: var(--s-cizgi);
}

.s-alt {
  background: var(--s-murekkep);
  /* Yapışkan şerit içeriği örtmesin. Boşluk ALTBİLGİYE veriliyor,
     `.s-sayfa`'ya değil: sayfanın tabanı artık kâğıt rengi olduğu için
     `.s-sayfa`'ya konsaydı koyu altbilgi ile koyu şerit arasında açık
     renk bir bant kalırdı. */
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
.s-alt-ic {
  max-width: var(--s-en);
  margin-inline: auto;
  padding: 18px var(--s-yan);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-weight: 700;
  font-size: var(--s-t7); letter-spacing: .1em; text-transform: uppercase;
  color: var(--s-cizgi);
  text-align: left;
}


/* ═════════════════════════════════════════════════════════════
   4. TON KATLARI — sayfanın arka planı BURADA, bölümlerde DEĞİL
   ═════════════════════════════════════════════════════════════
   Bir kat, ardışık ve aynı tonlu bölümlerin ORTAK zeminidir. Koyu kat
   kendi kutusunun `--tuy` kadar dışına taşar ve maske ile erir; böylece
   koyu ile kâğıt arasında SINIR ÇİZGİSİ oluşmaz. */

.s-kat { position: relative; padding-block: var(--kat-dolgu); }
.s-kat > * { position: relative; z-index: 1; }
.s-kat.koyu { color: var(--s-zemin); }
.s-kat.kagit { color: var(--s-murekkep); }

.s-kat.koyu::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-inline: 0;
  top: calc(-1 * var(--tuy));
  bottom: calc(-1 * var(--tuy));
  background: var(--s-murekkep);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb, var(--s-murekkep) 6%, transparent) calc(var(--tuy) * .5),
    color-mix(in srgb, var(--s-murekkep) 42%, transparent) var(--tuy),
    color-mix(in srgb, var(--s-murekkep) 88%, transparent) calc(var(--tuy) * 1.5),
    var(--s-murekkep) calc(var(--tuy) * 2),
    var(--s-murekkep) calc(100% - var(--tuy) * 2),
    color-mix(in srgb, var(--s-murekkep) 88%, transparent) calc(100% - var(--tuy) * 1.5),
    color-mix(in srgb, var(--s-murekkep) 42%, transparent) calc(100% - var(--tuy)),
    color-mix(in srgb, var(--s-murekkep) 6%, transparent) calc(100% - var(--tuy) * .5),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb, var(--s-murekkep) 6%, transparent) calc(var(--tuy) * .5),
    color-mix(in srgb, var(--s-murekkep) 42%, transparent) var(--tuy),
    color-mix(in srgb, var(--s-murekkep) 88%, transparent) calc(var(--tuy) * 1.5),
    var(--s-murekkep) calc(var(--tuy) * 2),
    var(--s-murekkep) calc(100% - var(--tuy) * 2),
    color-mix(in srgb, var(--s-murekkep) 88%, transparent) calc(100% - var(--tuy) * 1.5),
    color-mix(in srgb, var(--s-murekkep) 42%, transparent) calc(100% - var(--tuy)),
    color-mix(in srgb, var(--s-murekkep) 6%, transparent) calc(100% - var(--tuy) * .5),
    transparent 100%);
}
/* Sayfanın ilk katı tepeden TAM koyu başlar (üstünde künye şeridi var),
   sonuncusu altta TAM koyu biter (altında altbilgi var). */
.s-kat.koyu.ilk::before {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, var(--s-murekkep) calc(100% - var(--tuy) * 2),
    color-mix(in srgb, var(--s-murekkep) 88%, transparent) calc(100% - var(--tuy) * 1.5),
    color-mix(in srgb, var(--s-murekkep) 42%, transparent) calc(100% - var(--tuy)),
    color-mix(in srgb, var(--s-murekkep) 6%, transparent) calc(100% - var(--tuy) * .5),
    transparent 100%);
  mask-image: linear-gradient(to bottom, var(--s-murekkep) calc(100% - var(--tuy) * 2),
    color-mix(in srgb, var(--s-murekkep) 88%, transparent) calc(100% - var(--tuy) * 1.5),
    color-mix(in srgb, var(--s-murekkep) 42%, transparent) calc(100% - var(--tuy)),
    color-mix(in srgb, var(--s-murekkep) 6%, transparent) calc(100% - var(--tuy) * .5),
    transparent 100%);
}
.s-kat.koyu.son::before {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0,
    color-mix(in srgb, var(--s-murekkep) 6%, transparent) calc(var(--tuy) * .5),
    color-mix(in srgb, var(--s-murekkep) 42%, transparent) var(--tuy),
    color-mix(in srgb, var(--s-murekkep) 88%, transparent) calc(var(--tuy) * 1.5),
    var(--s-murekkep) calc(var(--tuy) * 2));
  mask-image: linear-gradient(to bottom, transparent 0,
    color-mix(in srgb, var(--s-murekkep) 6%, transparent) calc(var(--tuy) * .5),
    color-mix(in srgb, var(--s-murekkep) 42%, transparent) var(--tuy),
    color-mix(in srgb, var(--s-murekkep) 88%, transparent) calc(var(--tuy) * 1.5),
    var(--s-murekkep) calc(var(--tuy) * 2));
}
/* Sahne ışığı — koyu katın üstünden inen tek hüzme. Atmosfer, levha değil. */
.s-kat.koyu::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-inline: 0; top: 0; height: min(52rem, 70%);
  background: radial-gradient(115% 100% at 50% 0%,
    color-mix(in srgb, var(--s-zemin) 11%, transparent) 0%,
    color-mix(in srgb, var(--s-zemin) 3%, transparent) 45%,
    transparent 76%);
}
.s-kat.ilk { padding-top: clamp(2.5rem, 4.5vw, 3.5rem); }
.s-kat.son { padding-bottom: clamp(3.25rem, 5.5vw, 4.5rem); }

/* Bölüm artık yalnızca RİTİM taşıyor, arka plan taşımıyor. Katın ilk ve
   son bölümü kendi dış boşluğunu bırakıyor — kat dolgusuyla üst üste
   binmesin diye. */
.s-bolum { position: relative; padding-block: clamp(1.75rem, 3vw, 2.375rem); }
.s-kat > .s-bolum:first-child { padding-top: 0; }
.s-kat > .s-bolum:last-child { padding-bottom: 0; }

.s-ic { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.s-dar { max-width: 44rem; margin-inline: auto; }
.s-daracik { max-width: 34rem; margin-inline: auto; }


/* ═════════════════════════════════════════════════════════════
   5. TİPOGRAFİ
   ═════════════════════════════════════════════════════════════ */

.s-etiket {
  font-size: var(--s-t7);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--s-ikincil);                     /* kâğıtta 7.4:1 */
  margin-bottom: calc(var(--s-olcek) * .85);
}
.s-kat.koyu .s-etiket { color: var(--s-cizgi); }   /* koyuda 5.4:1 */

.s-h1 { font-size: var(--s-t1); font-weight: 700; line-height: 1.02;
  letter-spacing: -.028em; text-wrap: balance; overflow-wrap: break-word; }
.s-h2 { font-size: var(--s-t2); font-weight: 700; line-height: 1.1;
  letter-spacing: -.022em; text-wrap: balance; overflow-wrap: break-word; }
.s-h3 { font-size: var(--s-t3); font-weight: 700; line-height: 1.2;
  letter-spacing: -.015em; }

.s-lede {
  font-size: var(--s-t4); line-height: 1.45;
  color: var(--s-cizgi);
  margin-top: calc(var(--s-olcek) * 1.05);
  text-wrap: pretty;
}
.s-kat.kagit .s-lede { color: var(--s-ikincil); }

/* 🔴 FRAUNCES İTALİK — TAM ALTI YERDE, HEPSİ KIRMIZI. Kâğıtta
   `--s-aksan` (8.8:1), koyuda `--s-aksan-isik` (4.85:1). İkisi de AYNI
   kırmızı; karıştırma yok. */
.s-govde .f {
  font-family: var(--font-baslik);
  font-style: italic; font-weight: 400; font-size: 1.045em;
  letter-spacing: -.004em;
  color: var(--s-aksan);
}
.s-kat.koyu .f { color: var(--s-aksan-isik); }

.s-cizili {
  text-decoration-line: line-through;
  text-decoration-color: var(--s-aksan-isik);
  text-decoration-thickness: .07em;
  text-underline-offset: 0;
  color: var(--s-cizgi);
}
.s-kat.kagit .s-cizili { text-decoration-color: var(--s-aksan); }

/* PT Sans ile yapılan vurgu — Fraunces DEĞİL, altı yerlik kuralı bozmasın. */
.s-vurgu { font-weight: 700; color: var(--s-zemin); }
.s-kat.kagit .s-vurgu { color: var(--s-murekkep); }


/* ═════════════════════════════════════════════════════════════
   6. SATIN ALMA — fiyat · düğme · form · güven satırı
   ═════════════════════════════════════════════════════════════ */

.s-satin { margin-top: calc(var(--s-olcek) * 1.25); }
.s-fiyat { font-size: var(--s-t3); font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }

.s-cagri {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px;
  padding-inline: clamp(1.75rem, 6vw, 3.5rem);
  max-width: 100%;
  background: var(--s-aksan);
  color: var(--s-aksan-uzeri);
  font-family: inherit; font-size: var(--s-t4); font-weight: 700;
  letter-spacing: -.005em; line-height: 1.2;
  text-align: center;
  text-decoration: none;
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 4px;
  cursor: pointer;
  /* Yumuşak derinlik: içten ışık + iki katmanlı yumuşak gölge.
     Ucuz gradyan yok. */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--s-aksan-uzeri) 22%, transparent),
    0 2px 4px -1px color-mix(in srgb, var(--s-murekkep) 45%, transparent),
    0 14px 30px -12px color-mix(in srgb, var(--s-aksan) 75%, transparent);
}
/* Koyu zeminde düğmenin kenarı kaybolmasın: 3:1 geçen ince halka. */
.s-kat.koyu .s-cagri {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--s-aksan-isik) 70%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--s-aksan-uzeri) 22%, transparent),
    0 16px 34px -14px color-mix(in srgb, var(--s-aksan-isik) 60%, transparent);
}
.s-cagri::after {                     /* ışık süzülmesi — hover'da geçer */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 32%,
    color-mix(in srgb, var(--s-aksan-uzeri) 26%, transparent) 48%,
    transparent 64%);
  transform: translateX(-130%);
}
.s-cagri:focus-visible { outline: 3px solid var(--s-aksan); outline-offset: 4px; }
.s-kat.koyu .s-cagri:focus-visible { outline-color: var(--s-aksan-isik); }
.s-cagri-buyuk { min-height: 64px; font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  margin-top: calc(var(--s-olcek) * 1.15); }

.s-mikro { margin: calc(var(--s-olcek) * .8) auto 0; max-width: 28rem;
  font-size: var(--s-t6); color: var(--s-cizgi); text-wrap: balance; }
.s-kat.kagit .s-mikro { color: var(--s-ikincil); }

/* Güven satırı — kahramanın ve kapanışın altındaki büyük harfli hat.
   ⚠️ Bu sınıf bir zamanlar `.s-serit` idi ve kabuktaki YAPIŞKAN ŞERİTLE
   aynı adı taşıyordu. Ad çakışması iki bileşeni birbirinin stiline
   maruz bırakır; ayrıldı. */
.s-guven { margin-top: calc(var(--s-olcek) * .8); font-size: var(--s-t7);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--s-cizgi); }

/* 🔴 E-POSTA FORMU YALNIZCA ÜCRETSİZ ÜRÜNDE BASILIR. Ücretlide landing
   form taşımaz, checkout adımına götürür — order bump orada yaşıyor.
   Alan koyu zeminde duruyor: kutu değil, altı çizili bir form satırı. */
.s-form { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end;
  justify-content: center; }
.s-eposta {
  flex: 1 1 16rem;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--s-cizgi);
  border-radius: 0;
  color: var(--s-zemin);
  font-family: inherit;
  font-size: var(--s-t4);
  padding: .7rem .15rem;
}
.s-eposta::placeholder { color: var(--s-cizgi); opacity: 1; }
.s-eposta:focus { outline: 0; border-bottom-color: var(--s-aksan-isik); }
.s-eposta:focus-visible { outline: 3px solid var(--s-aksan-isik); outline-offset: 3px; }

.s-hata {
  margin: 0 auto calc(var(--s-olcek) * .8);
  max-width: 34rem;
  padding: .7rem 1rem;
  border-left: 4px solid var(--s-aksan-isik);
  background: color-mix(in srgb, var(--s-aksan) 22%, transparent);
  color: var(--s-zemin);
  font-size: var(--s-t6);
  text-align: left;
}


/* ═════════════════════════════════════════════════════════════
   7. §01 KAHRAMAN — VSL
   ═════════════════════════════════════════════════════════════
   Sıra: etiket → başlık → lede → VİDEO → düğme → fiyat.
   Başlık satırları maskeden yukarı doğru sürülüyor; maske dolgusu
   negatif kenar boşluğuyla telafi ediliyor ki inen harfler kırpılmasın. */

.s-satir-mask { display: block; overflow: hidden;
  padding: .02em .1em .1em; margin: -.02em -.1em -.1em; }
.s-satir-ic { display: block; }

.s-vsl { margin-top: calc(var(--s-olcek) * 1.25); }
.s-vsl-etiket {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--s-t7); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--s-aksan-isik);
  margin-bottom: calc(var(--s-olcek) * .7);
}
.s-vsl-etiket::before {               /* oynat üçgeni — küçük, sessiz */
  content: ""; width: 0; height: 0;
  border-left: 8px solid var(--s-aksan-isik);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
/* 🔴 16:9 YUVA VİDEO YOKKEN DE KORUNUR. Yuvayı hiç göstermemek, ID
   geldiği gün düzeni kaydırırdı; kırık bir oynatıcı göstermek ise
   satış sayfasında en kötü seçenek. */
.s-video {
  position: relative;
  width: min(100%, 42rem); margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 6px;
  background: color-mix(in srgb, var(--s-murekkep) 72%, var(--s-zemin));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--s-zemin) 16%, transparent),
    0 34px 70px -28px color-mix(in srgb, var(--s-murekkep) 90%, transparent);
}
.s-video iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; }
.s-video-bekle {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: color-mix(in srgb, var(--s-zemin) 60%, transparent);
  font-size: var(--s-t7); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.s-vsl-alt { margin: calc(var(--s-olcek) * .8) auto 0; max-width: 34rem;
  font-size: var(--s-t6); color: var(--s-cizgi); text-wrap: balance; }


/* ═════════════════════════════════════════════════════════════
   8. §02 ACI — blok ortalı, İÇİ HİZALI
   ═════════════════════════════════════════════════════════════ */

.s-aci {
  display: grid;
  gap: clamp(.85rem, 2vw, 1.15rem) clamp(1.5rem, 3.5vw, 2.75rem);
  margin-top: clamp(1.35rem, 2.7vw, 1.9rem);
  text-align: left;
}
@media (min-width: 44rem) { .s-aci { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .s-aci { grid-template-columns: repeat(3, 1fr); } }
.s-aci li {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: start;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--s-cizgi) 45%, transparent);
  color: var(--s-ikincil);
}
.s-isaret-x { color: var(--s-aksan); font-weight: 700; line-height: 1.56; }
.s-aci-son {
  margin: clamp(1.35rem, 2.7vw, 1.9rem) auto 0; max-width: 40rem;
  font-size: var(--s-t4); color: var(--s-ikincil); text-wrap: balance;
}


/* ═════════════════════════════════════════════════════════════
   9. §03 RAF TESTİ — sayfanın imza anı
   ═════════════════════════════════════════════════════════════ */

.s-giris { margin-top: calc(var(--s-olcek) * .9); font-size: var(--s-t4);
  color: var(--s-ikincil); }
.s-raf {
  width: min(100%, 40rem);
  margin: clamp(1.35rem, 2.7vw, 1.9rem) auto 0;
  text-align: left;                   /* blok ortalandı, içerik hizalı */
  border-top: 1px solid var(--s-cizgi);
}
.s-satir {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(.75rem, 3vw, 2rem);
  align-items: baseline;
  padding-block: clamp(.7rem, 1.9vw, .95rem);
  border-bottom: 1px solid var(--s-cizgi);
  min-height: 48px;
}
.s-soru { font-size: var(--s-t4); color: var(--s-ikincil); }
.s-cevap { font-size: var(--s-t4); font-weight: 700; letter-spacing: .05em;
  white-space: nowrap; text-align: right; color: var(--s-murekkep); }
.s-satir.son { align-items: center; border-bottom-color: var(--s-murekkep); }
.s-satir.son .s-soru { color: var(--s-murekkep); }
/* SAYFANIN TEK DERİNLİK ANI: raftaki boş yuva. Cevap GERÇEKTEN boş —
   soru işareti yok, alt tire yok, imleç yok. */
.s-bos {
  display: block; width: clamp(7.5rem, 30vw, 12rem); height: 2.25rem;
  background: var(--s-golge-1);
  box-shadow: inset 0 3px 7px var(--s-golge-2), inset 0 -1px 0 var(--s-golge-1);
}
.s-hukum { margin: clamp(1.35rem, 2.7vw, 1.9rem) auto 0; max-width: 36rem;
  font-size: var(--s-t4); color: var(--s-ikincil); text-wrap: balance; }
.s-hukum-vurgu { margin-top: clamp(1rem, 2.2vw, 1.5rem); font-size: var(--s-t2);
  line-height: 1.14; text-wrap: balance; }
.s-hukum-son { margin-top: clamp(1rem, 2.2vw, 1.5rem); font-size: var(--s-t4);
  color: var(--s-ikincil); }


/* ═════════════════════════════════════════════════════════════
   10. §04 YALANLAR
   ═════════════════════════════════════════════════════════════ */

.s-yalanlar {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem) clamp(1.75rem, 4vw, 3rem);
  margin-top: clamp(1.35rem, 2.7vw, 1.9rem);
  text-align: left;
}
@media (min-width: 48rem) { .s-yalanlar { grid-template-columns: 1fr 1fr; } }
.s-yalan-iddia {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  font-size: var(--s-t4); font-weight: 700; color: var(--s-murekkep);
  padding-bottom: .5rem;
}
.s-yalan-cevap { color: var(--s-ikincil); text-wrap: pretty;
  padding-top: .6rem;
  border-top: 1px solid color-mix(in srgb, var(--s-cizgi) 45%, transparent); }


/* ═════════════════════════════════════════════════════════════
   11. §05 İKİ YOL — kıyas yan yanalıktan doğar
   ═════════════════════════════════════════════════════════════ */

.s-yollar {
  display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: clamp(1.35rem, 2.7vw, 1.9rem);
  text-align: left;
}
@media (min-width: 48rem) { .s-yollar { grid-template-columns: 1fr 1fr; } }
.s-yol { padding-top: 1rem; border-top: 2px solid var(--s-cizgi); }
.s-yol.kisa { border-top-color: var(--s-aksan); }
.s-yol-ust { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: calc(var(--s-olcek) * .7); }
.s-yol-ad { font-size: var(--s-t3); font-weight: 700; letter-spacing: -.015em; }
.s-yol-etiket { font-size: var(--s-t7); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--s-ikincil); }
.s-yol.kisa .s-yol-etiket { color: var(--s-aksan); }
.s-yol li {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: baseline;
  padding-block: .3rem; color: var(--s-ikincil);
}
.s-yol li::before { content: ""; width: .4rem; height: .4rem;
  background: var(--s-cizgi); transform: translateY(-.15em); }
.s-yol.kisa li::before { background: var(--s-aksan); }
.s-yol-sonuc {
  margin-top: calc(var(--s-olcek) * .8); padding-top: calc(var(--s-olcek) * .7);
  border-top: 1px solid color-mix(in srgb, var(--s-cizgi) 45%, transparent);
  font-size: var(--s-t4); font-weight: 700; color: var(--s-ikincil);
  text-wrap: pretty;
}
.s-yol.kisa .s-yol-sonuc { color: var(--s-murekkep); }


/* ═════════════════════════════════════════════════════════════
   12. §06 BÖLÜMLER — dört ayrı ışık lekesi
   ═════════════════════════════════════════════════════════════ */

.s-bolumler {
  display: grid;
  gap: clamp(1.6rem, 3.4vw, 2.25rem) clamp(2rem, 5vw, 4rem);
  margin-top: clamp(1.4rem, 3vw, 2.1rem);
}
@media (min-width: 56rem) { .s-bolumler { grid-template-columns: 1fr 1fr; } }
.s-perde { position: relative; padding-top: 1.25rem; }
.s-perde::before {
  content: ""; position: absolute; z-index: 0;
  top: -1.25rem; left: 50%; transform: translateX(-50%);
  width: min(120%, 26rem); aspect-ratio: 1.6;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--s-zemin) 9%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.s-perde > * { position: relative; z-index: 1; }
.s-no { display: block; font-size: var(--s-t3); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
  color: var(--s-aksan-isik); margin-bottom: .5rem; }
.s-perde .s-h3 { margin-bottom: calc(var(--s-olcek) * .6); }
.s-perde-metin { max-width: 26rem; margin-inline: auto; color: var(--s-cizgi);
  text-wrap: pretty; }
.s-kanca {
  max-width: 24rem; margin: calc(var(--s-olcek) * .75) auto 0;
  padding-top: calc(var(--s-olcek) * .75);
  border-top: 1px solid color-mix(in srgb, var(--s-aksan-isik) 50%, transparent);
  font-size: var(--s-t6); color: var(--s-zemin);
}


/* ═════════════════════════════════════════════════════════════
   13. §07 VAKALAR
   ═════════════════════════════════════════════════════════════ */

.s-vakalar { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(1.4rem, 3vw, 2.1rem); }
@media (min-width: 56rem) { .s-vakalar { grid-template-columns: repeat(3, 1fr); } }
.s-vaka {
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--s-cizgi) 55%, transparent);
  background: color-mix(in srgb, var(--s-zemin) 4%, transparent);
}
.s-vaka-etiket { font-size: var(--s-t7); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--s-cizgi);
  margin-bottom: calc(var(--s-olcek) * .8); }
.s-once { font-size: var(--s-t4); color: var(--s-cizgi); }
.s-ok { font-size: var(--s-t4); line-height: 1; color: var(--s-aksan-isik);
  margin-block: .35rem; }
.s-sonra { font-size: var(--s-t3); font-weight: 700; letter-spacing: -.015em; }
.s-vaka-metin {
  margin-top: calc(var(--s-olcek) * .85); padding-top: calc(var(--s-olcek) * .85);
  border-top: 1px solid color-mix(in srgb, var(--s-cizgi) 55%, transparent);
  font-size: var(--s-t6); color: var(--s-cizgi); text-wrap: pretty;
}


/* ═════════════════════════════════════════════════════════════
   14. §08 YAZAR
   ═════════════════════════════════════════════════════════════ */

.s-sayilar {
  display: grid; gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(1.35rem, 2.7vw, 1.9rem);
  text-align: left;
}
@media (min-width: 40rem) { .s-sayilar { grid-template-columns: 1fr 1fr; } }
.s-sayi-kutu { padding-top: .9rem; border-top: 2px solid var(--s-cizgi); }
.s-sayi { display: block; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700;
  line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--s-aksan); }
.s-sayi-alt { font-size: var(--s-t6); color: var(--s-ikincil); text-wrap: pretty; }
.s-yazar-metin {
  max-width: 42rem; margin: clamp(1.2rem, 2.4vw, 1.75rem) auto 0;
  color: var(--s-ikincil); text-wrap: pretty;
}
/* İkinci paragraf birinciye daha yakın durur — aynı düşüncenin devamı.
   Bitişik kardeş seçicisi boşluksuz yazılı: aynı sınıfın kendi kendini
   ayarlaması "bileşen içine sızma" değildir, ama boşluklu yazılınca
   `dogrula.py`'nin sızıntı tarayıcısına öyle görünür. */
.s-yazar-metin+.s-yazar-metin { margin-top: calc(var(--s-olcek) * .8); }
.s-alinti {
  max-width: 40rem; margin: clamp(1.35rem, 2.7vw, 1.9rem) auto 0;
  padding-top: clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: 1px solid var(--s-cizgi);
  font-size: var(--s-t4); font-weight: 700; color: var(--s-murekkep);
  text-wrap: balance;
}


/* ═════════════════════════════════════════════════════════════
   15. §09 KİMİN İÇİN — evet/hayır karşıtlığı
   ═════════════════════════════════════════════════════════════ */

.s-uygun {
  display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: clamp(1.35rem, 2.7vw, 1.9rem);
  text-align: left;
}
@media (min-width: 48rem) { .s-uygun { grid-template-columns: 1fr 1fr; } }
.s-uygun-blok { padding-top: 1rem; border-top: 2px solid var(--s-cizgi); }
.s-uygun-blok.evet { border-top-color: var(--s-murekkep); }
.s-uygun-blok.hayir { border-top-color: var(--s-aksan); }
.s-uygun-baslik { font-size: var(--s-t3); font-weight: 700; letter-spacing: -.015em;
  margin-bottom: calc(var(--s-olcek) * .7); }
.s-uygun-blok li {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding-block: .35rem; color: var(--s-ikincil);
}
.s-isaret-v { color: var(--s-murekkep); font-weight: 700; }


/* ═════════════════════════════════════════════════════════════
   16. §10 SSS — JS'siz açılır kapanır
   ═════════════════════════════════════════════════════════════ */

.s-sss {
  width: min(100%, 46rem); margin: clamp(1.35rem, 2.7vw, 1.9rem) auto 0;
  text-align: left; border-top: 1px solid var(--s-cizgi);
}
.s-sss details { border-bottom: 1px solid color-mix(in srgb, var(--s-cizgi) 55%, transparent); }
.s-sss summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding-block: .9rem;
  font-size: var(--s-t4); font-weight: 700; color: var(--s-murekkep);
  cursor: pointer; list-style: none;
}
.s-sss summary::-webkit-details-marker { display: none; }
.s-sss summary:focus-visible { outline: 3px solid var(--s-aksan); outline-offset: 2px; }
.s-arti { position: relative; flex: none; width: 20px; height: 20px; }
.s-arti::before, .s-arti::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--s-aksan);
}
.s-arti::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.s-arti::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.s-sss-cevap { padding-bottom: 1.1rem; color: var(--s-ikincil); text-wrap: pretty;
  max-width: 44rem; }


/* ═════════════════════════════════════════════════════════════
   17. §11 KAYIP
   ═════════════════════════════════════════════════════════════ */

.s-kayip-metin { max-width: 40rem; margin: clamp(1.2rem, 2.4vw, 1.75rem) auto 0;
  color: var(--s-cizgi); text-wrap: pretty; }
.s-kayip-vurgu {
  max-width: 36rem; margin: clamp(1.2rem, 2.4vw, 1.75rem) auto 0;
  padding-top: clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: 1px solid color-mix(in srgb, var(--s-aksan-isik) 50%, transparent);
  font-size: var(--s-t3); font-weight: 700; line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--s-zemin); text-wrap: balance;
}


/* ═════════════════════════════════════════════════════════════
   18. §12 KAPANIŞ — 3D kitap, KÜÇÜK
   ═════════════════════════════════════════════════════════════
   Kahramandaki dev kitap kalktı; kitap yalnızca burada ve küçük.
   Hüzme + havuz atmosfer, `.s-temas` ise kitabın zemine değdiği yer. */

.s-sahne {
  position: relative; margin: 0 auto;
  width: min(100%, 30rem);
  display: grid; place-items: center;
  padding-block: clamp(.6rem, 1.6vw, 1.1rem);
}
.s-huzme, .s-havuz { position: absolute; pointer-events: none; z-index: 0; }
.s-huzme {
  top: -18%; left: 50%; transform: translateX(-50%);
  width: min(130%, 30rem); height: 82%;
  clip-path: polygon(44% 0, 56% 0, 88% 100%, 12% 100%);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--s-zemin) 8%, transparent),
    color-mix(in srgb, var(--s-zemin) 2%, transparent) 46%,
    transparent 82%);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--s-murekkep) 46%, var(--s-murekkep) 54%, transparent),
    linear-gradient(to bottom, transparent, var(--s-murekkep) 34%);
  mask-image: linear-gradient(to right, transparent, var(--s-murekkep) 46%, var(--s-murekkep) 54%, transparent),
    linear-gradient(to bottom, transparent, var(--s-murekkep) 34%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  filter: blur(34px);
}
.s-havuz {
  top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: min(150%, 34rem); aspect-ratio: 1.35;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--s-zemin) 22%, transparent) 0%,
    color-mix(in srgb, var(--s-zemin) 6%, transparent) 46%,
    transparent 78%);
}
/* 🔴 KİTABIN ALTI OYNAK DEĞERİ BURADA TANIMLI, `satis.js` YALNIZCA
   GÜNCELLİYOR. Aşağıdaki değerler kitabın DURGUN hâli: betik hiç
   çalışmazsa (hareket kısıtlı, JS kapalı, eski tarayıcı) kapak kendi
   taban açısında, düzgün ışıklı ve gölgeli durur — hiçbir şey kaybolmaz.
   Satır içi yedek (`var(--x, deger)`) yazılmıyor: aynı sayı iki yerde
   dururdu ve biri değişince öbürü sessizce eskirdi. */
.s-yuva {
  --golge-kay: 0px;   /* temas gölgesinin yana kayması */
  --golge-en: 1;      /* temas gölgesinin yatay gerilmesi */
  position: relative; z-index: 1;
  perspective: 1400px; perspective-origin: 50% 42%;
  width: var(--kitap-en);
}
.s-oturt { transform-style: preserve-3d; }
.s-kitap {
  --taban-y: 13deg;   /* kitabın duruş açısı — hareketten bağımsız */
  --eg-x: 1.5deg;     /* imleç eğimi, dikey */
  --eg-y: 0deg;       /* imleç eğimi, yatay */
  --don: 0deg;        /* kaydırma dönüşü */
  --parlak: 46%;      /* kapaktaki parlama bandının yeri */
  position: relative; width: 100%; aspect-ratio: 1000 / 1414;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--eg-x))
    rotateY(calc(var(--taban-y) + var(--don) + var(--eg-y)));
  transform-origin: 50% 55%;
  will-change: transform;
}
.s-yuz {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--s-murekkep) 88%, var(--s-zemin)),
    var(--s-murekkep) 58%,
    color-mix(in srgb, var(--s-murekkep) 94%, var(--s-aksan)));
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, var(--s-zemin) 10%, transparent),
    0 34px 64px color-mix(in srgb, var(--s-murekkep) 60%, transparent);
}
/* `<picture>` satır içi bir kutu: blok yapılmazsa görselin altında
   satır kutusu boşluğu kalır ve kapak yüzü tam oturmaz. */
.s-yuz picture { display: block; width: 100%; height: 100%; }
.s-yuz img { width: 100%; height: 100%; object-fit: cover; }
.s-parlak {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%,
    color-mix(in srgb, var(--s-zemin) 22%, transparent) calc(var(--parlak) - 14%),
    color-mix(in srgb, var(--s-zemin) 5%, transparent) calc(var(--parlak) + 6%),
    transparent 78%);
  mix-blend-mode: screen;
}
.s-sirt {
  position: absolute; top: 0; left: 0; height: 100%;
  width: clamp(10px, 2.4vw, 18px);
  transform-origin: left center; transform: rotateY(90deg);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--s-murekkep) 62%, var(--s-zemin)),
    var(--s-murekkep) 78%);
  border-top: 1px solid color-mix(in srgb, var(--s-aksan-isik) 55%, transparent);
}
.s-temas {
  position: absolute; z-index: 0; left: 50%; bottom: -5%; width: 96%; height: 9%;
  transform: translate(calc(-50% + var(--golge-kay)), 0) scaleX(var(--golge-en));
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--s-murekkep) 92%, transparent) 0%,
    color-mix(in srgb, var(--s-murekkep) 45%, transparent) 45%,
    transparent 78%);
  filter: blur(8px);
}
.s-kapak-alt {
  margin: clamp(1.25rem, 2.6vw, 1.75rem) auto 0; max-width: 28rem;
  font-size: var(--s-t6); color: var(--s-cizgi); text-wrap: balance;
}
.s-final .s-h2 { margin-top: clamp(1.1rem, 2.2vw, 1.6rem); }
.s-not {
  margin: clamp(1.75rem, 3.6vw, 2.5rem) auto 0; max-width: 40rem;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--s-cizgi) 60%, transparent);
}
.s-not-baslik { font-size: var(--s-t7); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--s-aksan-isik);
  margin-bottom: calc(var(--s-olcek) * .6); }
.s-not-metin { color: var(--s-cizgi); text-wrap: pretty; }


/* ═════════════════════════════════════════════════════════════
   19. YAPIŞKAN SATIN AL ŞERİDİ
   ═════════════════════════════════════════════════════════════
   🔴 VARSAYILAN GÖRÜNÜR. `satis.js` yalnızca kahramandaki çağrı
   ekrandayken şeridi GİZLİYOR — tersi değil. Varsayılan gizli olsaydı ve
   betik yüklenemeseydi (ağ hatası, eklenti, eski tarayıcı) sayfanın
   kalıcı satın alma düğmesi tamamen kaybolurdu. Bu yönde kurulunca en
   kötü ihtimalde şerit hep görünür kalır: çirkin değil, daha az zarif.

   🔴 ÇIPLAK `.s-dugme{width:100%}` YAZMA. Bir kez yazıldı ve şeridin
   düğmesini de yakaladı: düğme `flex:none` olduğu için küçülmüyor,
   `width:100%` ile flex kabının tamamı kadar genişliyor, kapak ve fiyat
   sıkışıyor, `.s-serit-yazi` (`min-width:0`) sıfır genişliğe düşüp fiyat
   taşıyordu. Şerit `position:fixed` olduğu için BELGE KAYDIRMA ÇUBUĞU
   OLUŞMUYOR — yatay taşma denetimine bile takılmıyordu, hata yalnızca
   gözle görülebiliyordu. Bu yüzden `.s-dugme`'nin çıplak kuralı hiç
   YOK; düğme yalnızca şeridin içinde tanımlı. */

.s-serit {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--s-murekkep);
  color: var(--s-zemin);
  border-top: 2px solid var(--s-aksan);
  transform: translateY(0);
  transition: transform .22s var(--e);
}
.s-serit[data-gizli="1"] { transform: translateY(105%); }

/* 🔴 `safe-area-inset-bottom` — iPhone'un home indicator alanı şeridin
   alt kenarını kesiyordu. Altbilginin dolgusu bunu telafi etmez;
   etmesi de gerekmez, şerit `position:fixed`. */
.s-serit-ic {
  max-width: var(--s-en);
  margin-inline: auto;
  padding: 10px var(--s-yan);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
  text-align: left;
}
/* Küçük kapak — ürünün ne olduğu her an görünür. */
.s-serit-kapak {
  flex: none;
  height: 46px; width: auto;
  background: var(--s-yatak);
  display: block;
}
.s-serit-yazi { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.s-serit-ad {
  display: block;
  font-weight: 700; font-size: var(--s-t6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s-serit-fiyat {
  display: block;
  font-size: var(--s-t7);
  font-variant-numeric: tabular-nums;
  color: var(--s-cizgi);
}
.s-serit .s-dugme {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 clamp(.9rem, 3vw, 1.4rem);
  background: var(--s-aksan);
  color: var(--s-aksan-uzeri);
  font-family: inherit; font-weight: 700; font-size: var(--s-t6);
  line-height: 1.2; text-align: center; text-decoration: none;
  border: 0; border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--s-aksan-isik) 70%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--s-aksan-uzeri) 22%, transparent);
}
.s-serit .s-dugme:focus-visible { outline: 3px solid var(--s-aksan-isik);
  outline-offset: 3px; }

@media (max-width: 560px) {
  .s-serit-ic {
    padding-block: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 11px;
  }
  .s-serit-kapak { height: 40px; }
  /* 🔴 ÜRÜN ADI DAR EKRANDA DÜŞÜYOR — sıkışıp okunmaz hale gelmesin diye
     BİLEREK. Şeritteki iş "fiyat + eylem"; adı zaten sayfanın kendisi
     söylüyor ve kapak görseli ürünü tanıtıyor. Kırpılmış bir başlık
     göstermek, hiç göstermemekten kötü. */
  .s-serit-ad { display: none; }
  .s-serit-fiyat { font-size: var(--s-t5); font-weight: 700; color: var(--s-zemin); }
  .s-serit .s-dugme { padding: 0 .9rem; font-size: var(--s-t7); letter-spacing: .03em; }
  .s-alt { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}


/* ═════════════════════════════════════════════════════════════
   20. HAREKET — ORKESTRE / KESKİN ZAMANLAMA
   ═════════════════════════════════════════════════════════════
   Sayfa DURUR. Bölüme varıldığında kısa, net, tek seferlik bir dizi
   çalışır ve durur. Süreler 280–620ms, gecikmeler 45–90ms.

   🔴 PAZARLIKSIZ: her başlangıç durumu (opacity:0 / translate) YALNIZCA
   `no-preference` içinde ve YALNIZCA `.js-hareket` sınıfı varken tanımlı.
   Betik çalışmazsa da, hareket kısıtlıysa da içerik TAM GÖRÜNÜR. */

@media (prefers-reduced-motion: no-preference) {

  /* — genel beliriş — */
  .js-hareket .s-adim { opacity: 0; transform: translateY(14px); }
  .js-hareket .gor .s-adim {
    opacity: 1; transform: none;
    transition: opacity .44s var(--e), transform .44s var(--e);
    transition-delay: calc(var(--i) * 70ms);
  }

  /* — açılış dizisi: etiket → başlık satırları → lede → video → düğme — */
  .js-hareket .s-acilis .s-adim {
    animation: s-belir .5s var(--e) both;
    animation-delay: calc(.06s + var(--i) * .075s);
  }
  .js-hareket .s-acilis .s-satir-ic {
    transform: translateY(106%);
    animation: s-satir .62s var(--e) both;
  }
  .js-hareket .s-acilis .s-satir-mask:nth-of-type(1) .s-satir-ic { animation-delay: .13s; }
  .js-hareket .s-acilis .s-satir-mask:nth-of-type(2) .s-satir-ic { animation-delay: .21s; }
  @keyframes s-belir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes s-satir { from { transform: translateY(106%); } to { transform: translateY(0); } }

  /* — sahne ışığı: koyu kat görünürken hüzme süzülüyor — */
  .js-hareket .s-kat.koyu::after { opacity: 0; transition: opacity 1.1s var(--e); }
  .js-hareket .s-kat.koyu.gor::after { opacity: 1; }
  .js-hareket .s-perde::before { opacity: 0; transition: opacity .9s var(--e) .15s; }
  .js-hareket .gor .s-perde::before { opacity: 1; }

  /* — RAF TESTİ: cevaplar sırayla ve HIZLI oturur, boş yuva son vurur — */
  .js-hareket .s-raf .s-satir { opacity: 0; transform: translateY(9px); }
  .js-hareket .s-raf.gor .s-satir {
    opacity: 1; transform: none;
    transition: opacity .3s var(--e), transform .3s var(--e);
    transition-delay: calc(var(--i) * 90ms);
  }
  .js-hareket .s-raf .s-cevap { opacity: 0; transform: scale(1.1); }
  .js-hareket .s-raf.gor .s-cevap {
    opacity: 1; transform: none;
    transition: opacity .22s var(--e), transform .3s var(--e);
    transition-delay: calc(var(--i) * 90ms + 130ms);
  }
  .js-hareket .s-raf.gor .s-bos { animation: s-bos-vur .78s var(--e) .58s both; }
  @keyframes s-bos-vur {
    0%   { box-shadow: inset 0 0 0 var(--s-golge-1), inset 0 -1px 0 var(--s-golge-1); transform: none; }
    42%  { box-shadow: inset 0 7px 18px var(--s-golge-2), inset 0 -1px 0 var(--s-golge-1); transform: translateY(-1px); }
    100% { box-shadow: inset 0 3px 7px var(--s-golge-2), inset 0 -1px 0 var(--s-golge-1); transform: none; }
  }

  /* — İKİ YOL: uzun yol AĞIR (90ms), kısa yol ÇABUK (45ms). Zamanlama
       kıyasın kendisi: biri sürünüyor, öbürü oturuyor. — */
  .js-hareket .s-yol li { opacity: 0; transform: translateX(-8px); }
  .js-hareket .gor .s-yol.uzun li {
    opacity: 1; transform: none;
    transition: opacity .38s var(--e), transform .38s var(--e);
    transition-delay: calc(var(--i) * 90ms + 120ms);
  }
  .js-hareket .gor .s-yol.kisa li {
    opacity: 1; transform: none;
    transition: opacity .3s var(--e), transform .3s var(--e);
    transition-delay: calc(var(--i) * 45ms + 120ms);
  }

  /* — VAKALAR: ok kayar, sonuç oturur — */
  .js-hareket .s-vaka .s-ok { opacity: 0; transform: translateY(-6px); }
  .js-hareket .gor .s-vaka .s-ok {
    opacity: 1; transform: none;
    transition: opacity .3s var(--e), transform .34s var(--e);
    transition-delay: calc(var(--i) * 70ms + 180ms);
  }
  .js-hareket .s-vaka .s-sonra { opacity: 0; transform: scale(.94); }
  .js-hareket .gor .s-vaka .s-sonra {
    opacity: 1; transform: none;
    transition: opacity .28s var(--e), transform .38s var(--e);
    transition-delay: calc(var(--i) * 70ms + 300ms);
  }

  /* — KAPANIŞ: kitap 3D'de yerine oturur — */
  .js-hareket .s-oturt { opacity: 0; transform: rotateY(26deg) translateZ(-60px); }
  .js-hareket .gor .s-oturt {
    opacity: 1; transform: none;
    transition: opacity .5s var(--e), transform .82s cubic-bezier(.2, .8, .25, 1);
  }
  .s-kitap { transition: transform .12s linear; }

  /* — MİKRO ETKİLEŞİMLER — */
  .s-cagri { transition: transform .28s var(--e), box-shadow .28s var(--e); }
  .s-cagri:hover { transform: translateY(-2px); }
  .s-cagri:hover::after { transform: translateX(130%);
    transition: transform .68s cubic-bezier(.3, .6, .2, 1); }
  .s-cagri:active { transform: translateY(0) scale(.994); transition-duration: .09s; }
  .s-serit .s-dugme { transition: background-color .18s var(--e); }
  .s-serit .s-dugme:hover { background: color-mix(in srgb, var(--s-aksan) 82%, var(--s-murekkep)); }
  .s-arti::before, .s-arti::after { transition: transform .3s var(--e), opacity .3s var(--e); }
  details[open] .s-arti::before { transform: translate(-50%, -50%) rotate(180deg); }
  details[open] .s-arti::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
  details[open] .s-sss-cevap { animation: s-ac .34s var(--e) both; }
  @keyframes s-ac { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
  .s-sss summary { transition: color .2s var(--e); }
  .s-sss summary:hover { color: var(--s-aksan); }
}

@media (prefers-reduced-motion: reduce) {
  .s-govde * { animation: none !important; transition: none !important; }
}


/* ═════════════════════════════════════════════════════════════
   21. 390px — yatay taşma SIFIR, dokunma hedefi ≥44px
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 26rem) {
  .s-govde { --s-olcek: 1.05rem; --kat-dolgu: 8.75rem; }
  .s-ic { width: calc(100% - 2rem); }
  .s-satir { gap: .7rem; }
  .s-soru, .s-cevap { font-size: 1.0625rem; }
  .s-cagri { width: 100%; padding-inline: 1rem; font-size: 1.0625rem; }
  .s-form { flex-direction: column; align-items: stretch; }
  .s-huzme { filter: blur(6px); }
  .s-video { border-radius: 4px; }
  .s-ust-ic { padding-block: 9px; }
  .s-marka img { height: 26px; }
}


/* ═════════════════════════════════════════════════════════════
   22. CHECKOUT — lambanın altındaki masa
   ═════════════════════════════════════════════════════════════
   `templates/genel/checkout.html`. Landing SAHNEYDİ: geniş, sinematik,
   beş ton katı. Burası YAKIN ve ODAKLI — TEK kat (koyu), tek bölüm, tek
   ışık havuzu. Kararın kendisiyle yarışan hiçbir şey yok.

   İKİ İMZA FİKRİ
   ──────────────
   1. ORDER BUMP, SAYFADAKİ TEK AYDINLATILMIŞ YÜZEY. Landing'in "kart yok"
      kuralı burada da geçerli; tek istisna bump. Kutu olmayı HAK EDİYOR
      çünkü gözün yakalaması gereken tek şey o: ince kırmızı çerçeve +
      İÇERİDEN gelen ışık (üstüne düşen ışık değil — kutunun kendi kaynağı
      var, o yüzden gradyan yukarıdan aşağı SÖNÜYOR).
   2. KUTUCUK İŞARETLENİNCE IŞIK HAVUZUNA İKİNCİ NESNE GİRİYOR. `.s-nesne`
      kitabın yanına süzülüyor, `.s-nesneler` de ona yer açmak için hafifçe
      sola kayıyor. Aynı perspektif (1400px), aynı taban açısı (13deg),
      aynı yumuşama eğrisi (`--e`). Ne satın aldığın görsel olarak
      kanıtlanıyor; işaret kalkınca geri çıkıyor.

   🔴 DURUM CSS'TE, JS'TE DEĞİL. `.s-sayfa:has(.s-bump-giris:checked)` altı
   token'ı birden çeviriyor; kutu, tik, ışık, ikinci nesne ve İKİ AYRI YERDEKİ
   toplam (sayfanın kendi satırı + yapışkan şerit) hep aynı kaynaktan
   besleniyor. JS kapalıyken de, hareket kısıtlıyken de doğru rakam görünür;
   `satis.js` yalnızca aradaki YOLU (sayma animasyonunu) gösteriyor.

   🔴 ÖZELLİK EZME YOK, TOKEN ÇEVİRME VAR. İşaretli durum hiçbir yerde
   `.kap .bilesen { ... }` biçiminde yazılmadı: durum bir ANA token'a
   yazılıyor, bileşen onu okuyor. Böylece hem `dogrula.py`'nin sızıntı
   taraması temiz kalıyor hem de "bu kural nereden geliyor" sorusu tek
   yerde cevaplanıyor. */

/* ── Durum bloğu: kutucuk işaretli mi? ────────────────────────
   `.s-sayfa` seçilmesinin sebebi kapsam: hem `<main>` (toplam satırı) hem
   de yapışkan şerit (`.s-serit`) onun altında. `.s-masa` seçilseydi şerit
   kapsam dışında kalır ve ekranın altında YANLIŞ fiyat asılı kalırdı. */
.s-sayfa {
  --bump: 0;                 /* 0 · 1 — sayısal, hesaba giriyor */
  --tutar-tek: inline;       /* hangi tutar görünecek */
  --tutar-cift: none;
  --tik-dolgu: transparent;
  --tik-kenar: color-mix(in srgb, var(--s-aksan-isik) 60%, transparent);
  --bump-isik: color-mix(in srgb, var(--s-aksan-isik) 9%, transparent);
}
.s-sayfa:has(.s-bump-giris:checked) {
  --bump: 1;
  --tutar-tek: none;
  --tutar-cift: inline;
  --tik-dolgu: var(--s-aksan);
  --tik-kenar: var(--s-aksan);
  --bump-isik: color-mix(in srgb, var(--s-aksan-isik) 26%, transparent);
}

/* Checkout TEK KATTAN oluşuyor: üstünde koyu künye, altında koyu altbilgi.
   Erime yapacak kâğıt komşu YOK, o yüzden maske tamamen kalkıyor. Landing'de
   `ilk` ve `son` hiçbir zaman aynı katta birleşmiyor — bu kural yalnızca
   checkout'ta eşleşir. */
.s-kat.koyu.ilk.son::before {
  top: 0; bottom: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

/* `--lamba`: ışık havuzunun açılışı. VARSAYILAN 1 — betik yoksa da hareket
   kısıtlıyken de havuz görünür. Sıfıra yalnızca `.js-hareket` varken ve
   yalnızca hareket bloğunun içinde iniyor. */
.s-odeme { --lamba: 1; }

/* ── Masa: mobilde ÖZET ÜSTTE, masaüstünde sağda yapışkan ──── */
.s-masa {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  /* `.s-ic`'ten (68rem) DAHA DAR. Landing'in bölümleri sayfanın tam
     genişliğini kullanıyor çünkü orada okunacak bir şey var; burada iki
     alan ve bir düğme var. Geniş bir kap kararı seyreltir — masa lambanın
     altında, odanın ortasında değil. */
  max-width: 54rem;
  margin: clamp(1.6rem, 3.4vw, 2.4rem) auto 0;
  text-align: left;
}

/* ── ÖZET ──────────────────────────────────────────────────── */
.s-ozet {
  /* Kitap landing'in kapanışındakinden de KÜÇÜK: orada ürün kararın
     sebebiydi, burada yalnızca ne aldığının hatırlatması. */
  --kitap-en: clamp(5.25rem, 11vw, 6.75rem);
  text-align: center;
}
.s-ozet-etiket {
  font-size: var(--s-t7); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--s-cizgi);
}
.s-ozet-ad {
  margin-top: clamp(.9rem, 2vw, 1.25rem);
  font-size: var(--s-t4); font-weight: 700; line-height: 1.25;
  letter-spacing: -.012em; text-wrap: balance;
}
.s-ozet-rozet {
  margin-top: .4rem;
  font-size: var(--s-t7); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s-aksan-isik);
}

/* ── LAMBA — tek ışık havuzu ────────────────────────────────
   Hüzme ve havuz sözde öğe; ayrı sınıf açmak iki isim daha getirirdi ve
   ikisi de yalnızca atmosfer taşıyor. */
.s-lamba {
  position: relative;
  margin-top: clamp(.9rem, 2vw, 1.25rem);
  padding-block: clamp(1.4rem, 3.2vw, 2.2rem);
  display: grid; place-items: center;
}
.s-lamba::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -8%; left: 50%; transform: translateX(-50%);
  width: min(126%, 20rem); height: 80%;
  clip-path: polygon(42% 0, 58% 0, 90% 100%, 10% 100%);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--s-zemin) 10%, transparent),
    color-mix(in srgb, var(--s-zemin) 3%, transparent) 48%,
    transparent 84%);
  filter: blur(20px);
  opacity: var(--lamba);
}
.s-lamba::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%, -44%);
  width: min(150%, 24rem); aspect-ratio: 1.35;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--s-zemin) 21%, transparent) 0%,
    color-mix(in srgb, var(--s-zemin) 6%, transparent) 46%,
    transparent 78%);
  opacity: var(--lamba);
}
/* Kitap akışta ve ORTALI kalır; ikinci nesne mutlak konumlu, yoksa
   işaretsiz durumda yer kaplayıp kitabı merkezden kaydırırdı. */
.s-nesneler {
  position: relative; z-index: 1;
  display: grid; justify-items: center;
  transform: translateX(calc(var(--bump) * -1.05rem));
}

/* ── İKİNCİ NESNE — video ─────────────────────────────────── */
.s-nesne {
  position: absolute; z-index: 2;
  left: 50%; bottom: 2%;
  width: calc(var(--kitap-en) * .68);
  margin-left: calc(var(--kitap-en) * .2);
  perspective: 1400px; perspective-origin: 50% 42%;
  pointer-events: none;
  /* Kutucuk işaretli değilken görünmemesi bir HAREKET BAŞLANGICI değil,
     bir DURUM: hareket kısıtlıyken de JS kapalıyken de doğru davranış
     nesnenin orada olmaması. */
  opacity: var(--bump);
  transform: translateX(calc((1 - var(--bump)) * 30px));
}
.s-nesne-3d {
  --taban-y: 13deg;   /* kitapla AYNI duruş açısı */
  --eg-x: 1.5deg;
  --eg-y: 0deg;
  --don: 0deg;
  --parlak: 46%;
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--eg-x))
    rotateY(calc(var(--taban-y) + var(--don) + var(--eg-y)));
  transform-origin: 50% 55%;
}
.s-nesne-yuz {
  position: absolute; inset: 0; overflow: hidden;
  display: grid; place-items: center;
  border-radius: 3px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--s-murekkep) 72%, var(--s-zemin)),
    var(--s-murekkep) 60%,
    color-mix(in srgb, var(--s-murekkep) 90%, var(--s-aksan)));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--s-zemin) 15%, transparent),
    0 20px 38px color-mix(in srgb, var(--s-murekkep) 62%, transparent);
}
.s-nesne-yuz::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%,
    color-mix(in srgb, var(--s-zemin) 20%, transparent) calc(var(--parlak) - 14%),
    color-mix(in srgb, var(--s-zemin) 5%, transparent) calc(var(--parlak) + 6%),
    transparent 78%);
  mix-blend-mode: screen;
}
.s-nesne-oynat {
  position: relative; z-index: 1;
  width: 0; height: 0;
  border-left: .8rem solid var(--s-aksan-isik);
  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent;
}
.s-nesne-sirt {
  position: absolute; top: 0; left: 0; height: 100%;
  width: clamp(5px, 1.2vw, 9px);
  transform-origin: left center; transform: rotateY(90deg);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--s-murekkep) 60%, var(--s-zemin)),
    var(--s-murekkep) 78%);
  border-top: 1px solid color-mix(in srgb, var(--s-aksan-isik) 55%, transparent);
}

/* ── FORM ALANLARI ──────────────────────────────────────────
   Kutu değil, altı çizili satır — landing'in ücretsiz akış formuyla aynı
   dil. `.s-eposta` yeniden KULLANILMADI: o alan yatay bir flex satırında
   yaşıyor (`flex: 1 1 16rem`), buradaki alanlar tam genişlikte ve
   etiketli. İki farklı iş, iki ayrı sınıf. */
.s-alan-kutu { margin-top: clamp(1.1rem, 2.4vw, 1.5rem); }
.s-alan-etiket {
  display: block; margin-bottom: .35rem;
  font-size: var(--s-t7); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s-cizgi);
}
/* "isteğe bağlı" AYNI RENKTE, farklı AĞIRLIKTA. İkincil bir renk daha
   açmak koyu zeminde kontrast eşiğini zorlardı. */
.s-alan-not {
  font-weight: 400; letter-spacing: .06em; text-transform: none;
}
.s-alan {
  display: block; width: 100%;
  min-height: 52px;
  padding: .65rem .15rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--s-cizgi);
  border-radius: 0;
  appearance: none; -webkit-appearance: none;
  color: var(--s-zemin);
  font-family: inherit;
  font-size: var(--s-t4);
}
.s-alan:focus { outline: 0; border-bottom-color: var(--s-aksan-isik); }
.s-alan:focus-visible { outline: 3px solid var(--s-aksan-isik); outline-offset: 3px; }

/* ── KART ALANLARI — GÖRSEL YER TUTUCU ─────────────────────
   🔴 İçinde `<input>` YOK. Odaklanan, yazı kabul eden ama hiçbir yere
   gitmeyen sahte bir kart alanı klavyede tuzak olur ve ziyaretçiye
   çalıştığını söyler. Burada yalnızca yerleşim tutuluyor; kesikli çerçeve
   ve rozet "bu henüz gerçek değil" diyor. Faz 2'de Stripe'ın kendi
   alanları bu kutunun içine gelecek ve düzen kaymayacak. */
.s-kart {
  margin-top: clamp(1.5rem, 3.2vw, 2rem);
  padding: clamp(.9rem, 2.4vw, 1.2rem);
  border: 1px dashed color-mix(in srgb, var(--s-cizgi) 55%, transparent);
  border-radius: 5px;
}
.s-kart-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.s-kart-etiket {
  font-size: var(--s-t7); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--s-cizgi);
}
.s-kart-rozet {
  padding: .2rem .5rem;
  border: 1px solid color-mix(in srgb, var(--s-cizgi) 60%, transparent);
  font-size: var(--s-t7); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--s-cizgi);
}
.s-kart-hatlar { display: grid; gap: .55rem; margin-top: .85rem; }
.s-kart-hat {
  display: flex; align-items: center;
  min-height: 44px; padding-inline: .7rem;
  border: 1px solid color-mix(in srgb, var(--s-cizgi) 38%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--s-murekkep) 45%, transparent);
}
.s-kart-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.s-kart-yer {
  font-size: var(--s-t6);
  color: color-mix(in srgb, var(--s-cizgi) 72%, transparent);
}
.s-kart-not {
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid color-mix(in srgb, var(--s-cizgi) 32%, transparent);
  font-size: var(--s-t6); color: var(--s-cizgi); text-wrap: pretty;
}

/* ── ORDER BUMP — sayfadaki TEK aydınlatılmış yüzey ────────── */
.s-bump {
  position: relative;
  margin-top: clamp(1.5rem, 3.2vw, 2rem);
  padding: clamp(1rem, 2.6vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--s-aksan-isik) 45%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--s-zemin) 3%, transparent);
}
/* İÇERİDEN GELEN IŞIK. Gradyan yukarıdan aşağı SÖNÜYOR: kutunun kendi
   kaynağı var, üstüne düşen bir spot değil. Şiddeti `--bump-isik`
   token'ından — işaretlenince artıyor. */
.s-bump::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(128% 90% at 50% 0%,
    var(--bump-isik) 0%, transparent 74%);
}
.s-bump > * { position: relative; }
.s-bump:has(.s-bump-giris:checked) {
  border-color: color-mix(in srgb, var(--s-aksan-isik) 92%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--s-aksan-isik) 78%, transparent);
}
/* Odak halkası KUTUNUN TAMAMINDA. Gerçek kutucuk görsel olarak gizli;
   halkayı yalnızca küçük tik karesine koymak klavyeyle gezen ziyaretçiye
   sayfanın en önemli kararını 24px'lik bir kareyle gösterirdi. */
.s-bump:has(.s-bump-giris:focus-visible) {
  outline: 3px solid var(--s-aksan-isik); outline-offset: 3px;
}
/* 🔴 GÖRSEL OLARAK GİZLİ AMA ODAKLANABİLİR. `display:none` ya da
   `visibility:hidden` kutucuğu klavyeden ve ekran okuyucudan tamamen
   çıkarır — sayfanın tek kararı erişilemez olurdu. `opacity:0` da
   kullanılmadı: hareket kuralıyla karışır. */
.s-bump-giris {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.s-bump-tik {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem .85rem;
  align-items: start;
  min-height: 44px;
  cursor: pointer;
}
.s-bump-isaret {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 2px;
  display: grid; place-items: center;
  border: 2px solid var(--tik-kenar);
  border-radius: 3px;
  background: var(--tik-dolgu);
}
.s-bump-isaret::after {
  content: "✓";
  color: var(--s-aksan-uzeri);
  font-size: var(--s-t6); font-weight: 700; line-height: 1;
  opacity: var(--bump);
  transform: scale(calc(.5 + var(--bump) * .5));
}
.s-bump-metin { display: block; min-width: 0; }
.s-bump-etiket {
  display: block;
  font-size: var(--s-t7); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--s-aksan-isik);
}
.s-bump-baslik {
  display: block; margin-top: .3rem;
  font-size: var(--s-t4); font-weight: 700; line-height: 1.25;
  letter-spacing: -.012em; color: var(--s-zemin);
}
.s-bump-aciklama {
  display: block; margin-top: .45rem;
  font-size: var(--s-t6); color: var(--s-cizgi); text-wrap: pretty;
}
.s-bump-fiyat {
  align-self: start;
  font-size: var(--s-t4); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--s-zemin);
}
.s-bump-maddeler {
  display: grid; gap: .3rem;
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid color-mix(in srgb, var(--s-aksan-isik) 30%, transparent);
}
.s-bump-maddeler li {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  align-items: baseline;
  font-size: var(--s-t6); color: var(--s-cizgi);
}
.s-bump-tire {
  width: .55rem; height: 1px;
  background: var(--s-aksan-isik);
  transform: translateY(-.3em);
}
/* TEŞHİS ROZETİ — satış metni değil. `satis_metni.BUMP["yer_tutucu"]`
   True olduğu sürece basılıyor: kullanıcı bu teklifin fiyatına karar
   vermedi ve sessizce yayına almak yerine ekranda söylüyoruz. */
.s-bump-rozet {
  display: inline-block; margin-top: .9rem;
  padding: .28rem .6rem;
  border: 1px dashed color-mix(in srgb, var(--s-cizgi) 70%, transparent);
  font-size: var(--s-t7); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s-cizgi);
}

/* ── TOPLAM ────────────────────────────────────────────────
   İki tutar da SUNUCUDAN basılı; hangisinin görüneceğine `--tutar-*`
   token'ları karar veriyor. Aynı token çifti yapışkan şeridin fiyatını da
   çeviriyor — sayfa 294 derken alttaki çubuk 197 diyemez. */
.s-toplam {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3.2vw, 2rem);
  padding-top: clamp(1rem, 2.2vw, 1.4rem);
  border-top: 1px solid var(--s-cizgi);
}
.s-toplam-etiket {
  font-size: var(--s-t7); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--s-cizgi);
}
.s-toplam-tutar {
  font-size: var(--s-t2); font-weight: 700; line-height: 1.05;
  letter-spacing: -.028em;
  font-variant-numeric: tabular-nums;
  color: var(--s-zemin);
}
.s-tutar-tek { display: var(--tutar-tek); }
.s-tutar-cift { display: var(--tutar-cift); }

/* Düğme sarmalayıcısı. Izgara olmasının sebebi `.s-cagri`'nin çıplak
   kuralına dokunmamak: `inline-flex` düğme ızgara hücresinde kendiliğinden
   geriliyor, hiçbir yerde `width:100%` yazmak gerekmiyor (o kural bir kez
   yazıldı ve yapışkan şeridin düğmesini de yakalamıştı). */
.s-onay { display: grid; }

/* Güven cümlesi kolonun soluna hizalanıyor — `.s-mikro` sayfanın geri
   kalanında ORTALI bir bloktu, burada sol hizalı bir sütunun içinde.
   `dogrula.py` GOZDEN_GECIRILMIS listesinde zaten kayıtlı. */
.s-karar .s-mikro { margin-inline: 0; text-align: left; }

/* ── Masaüstü: özet sağda ve yapışkan ─────────────────────── */
@media (min-width: 56rem) {
  .s-masa {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
    gap: clamp(2rem, 4.5vw, 3.25rem);
    align-items: start;
  }
  /* DOM sırası mobil sırası (özet önce); masaüstünde ızgara ikisini
     yerine koyuyor. Klavye sırası iki düzende de aynı çünkü özet
     odaklanabilir öğe taşımıyor. */
  .s-karar { grid-column: 1; grid-row: 1; }
  .s-ozet {
    grid-column: 2; grid-row: 1;
    position: sticky; top: clamp(1.5rem, 5vh, 3rem);
  }
}

/* ── 390px ─────────────────────────────────────────────────── */
@media (max-width: 26rem) {
  /* Fiyat başlığın yanında sıkışmasın: kendi satırına, metnin altına. */
  .s-bump-tik { grid-template-columns: auto minmax(0, 1fr); }
  .s-bump-fiyat { grid-column: 2; }
}

/* ── HAREKET — landing ile AYNI dil ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* Açılış: ışık havuzu açılır, sonra `.s-adim` dizisi (70ms aralık,
     genel kural). Havuz yalnızca BETİK VARKEN sönük başlıyor. */
  .js-hareket .s-odeme { --lamba: 0; }
  .js-hareket .gor .s-odeme { --lamba: 1; }
  .s-lamba::before, .s-lamba::after { transition: opacity 1s var(--e); }

  /* Kutucuk: kart kalkar, ışık süzülür, tik oturur. */
  .s-bump { transition: transform .3s var(--e), border-color .3s var(--e),
            box-shadow .3s var(--e); }
  .s-bump::before { transition: background .38s var(--e); }
  .s-bump-isaret { transition: background-color .22s var(--e),
                   border-color .22s var(--e); }
  .s-bump-isaret::after { transition: opacity .2s var(--e),
                          transform .26s var(--e); }

  /* İkinci nesne süzülerek girer; kitap ona yer açar. Süreler kasıtlı
     olarak farklı: nesne önce belirir, yerleşmesi biraz daha sürer. */
  .s-nesne { transition: opacity .4s var(--e), transform .56s var(--e); }
  .s-nesneler { transition: transform .56s var(--e); }
  /* Kitapla AYNI takip süresi — ikisi tek nesne gibi hareket etsin. */
  .s-nesne-3d { transition: transform .12s linear; }

  .s-alan { transition: border-color .2s var(--e); }
}