/* sahne-zemin.css — SAYFA BAŞLIĞI ARKASINDAKİ SAHNE ZEMİNİ
   ============================================================================
   TEK KAYNAK. Aynı desen birden çok sayfada kullanılıyor (/nasil-calisir ·
   /vitrin · …). Her sayfaya kopyalansaydı ilk düzeltmede birbirlerinden
   ayrılırlardı; bu depoda "aynı şey iki yerde" bir numaralı hata sınıfı.

   KULLANIM — kabın içine, içerikten ÖNCE. Görsel MARKUP'TA DEĞİL, değişkende:

     <div class="ta-sahne" aria-hidden="true" style="
          --sk:  url('/assets/sahne/X.webp');
          --skm: url('/assets/sahne/X-m.webp');
          --sa:  url('/assets/sahne/X-acik.webp');
          --sam: url('/assets/sahne/X-acik-m.webp');"></div>

   Kap `.ta-sahne-kap` sınıfını alır. Aydınlık karşılığı yoksa --sa/--sam
   verilmez; kaba `ta-sahne-koyuya-ozel` eklenir ve zemin aydınlıkta gizlenir.

   ──────────────────────────────────────────────────────────────────────────
   NEDEN <img> DEĞİL DE CSS ZEMİNİ (27.08, ölçüldü)

   Önce iki <img> vardı (koyu + aydınlık) ve gereksiz olan `display:none` ile
   kapatılıyordu. Yorumuna "gizli olan indirilmez" diye yazmıştım — YANLIŞ.
   Tarayıcı `display:none` bir <img>'in src/srcset'ini yine de çeker. Ağ
   kaydında ölçüldü: her ziyaretçi HER İKİ takımı birden indiriyordu, yani
   tema desteğinin bedeli bant genişliğinin iki katıydı.

   CSS zemininde ise yalnız KAZANAN kuralın URL'i çözülür ve yalnız o iner.
   Zemin zaten `aria-hidden` bir dekor; <img> olmasının bir faydası yoktu.
   ──────────────────────────────────────────────────────────────────────────

   DİĞER ÖLÇÜLMÜŞ KARARLAR

   1) `isolation:isolate` + POZİTİF katmanlar. İlk sürümde zemine `z-index:-1`
      verilmişti ve görsel HİÇ GÖRÜNMÜYORDU: negatif katmanlı bir çocuk, kendi
      yığın bağlamını kuran bir ata yoksa gövdenin ZEMİNİNİN ARKASINA düşer.

   2) `overflow:clip` ŞART. Zemin sağda kabın dışına taşacak şekilde konumlanır;
      kırpılmazsa sayfa yana kayar (1280px'de 63 px ölçüldü). `hidden` yerine
      `clip`: hidden bir kaydırma bağlamı yaratıp sticky/odak davranışını
      bozabilir.

   3) DÖRT KENAR DA ERİR. Başlık alanı kısa olduğu için görsel ekranda SERT
      KENARLI BİR DİKDÖRTGEN olarak duruyordu.

   4) Erime rengi temayla değişir. Koyu bir gradyanla açık bir görseli eritmek
      görselin kenarına KİR gibi bir gölge bırakır.
   ============================================================================ */

.ta-sahne-kap { position: relative; isolation: isolate; overflow: clip; }
/* Kabın doğrudan çocukları zeminin ÜSTÜNDE kalır. */
.ta-sahne-kap > * { position: relative; z-index: 1; }

.ta-sahne {
  position: absolute; top: 0; right: calc(-1 * clamp(16px, 4vw, 40px));
  width: min(64%, 780px); height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden; border-radius: 2px;
}

/* ── görsel katmanı ── */
.ta-sahne::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--sk);
  background-size: cover; background-position: 70% center; background-repeat: no-repeat;
  opacity: .62; filter: brightness(.86) saturate(1.02);
}
html[data-theme="light"] .ta-sahne::before {
  background-image: var(--sa, var(--sk));
  /* Aydınlık sahneler zaten parlak; koyudaki karartma burada tersine çalışır
     (soluk, yıkanmış görünür). Kendi ayarı: karartma yok. */
  opacity: .72; filter: saturate(1.04) contrast(1.02);
}

/* ── erime payları ──
   `--sahne-void` / `--sahne-acik-zemin` sayfanın kendi zemin rengiyle
   eşleşmeli; verilmezse sitenin varsayılanlarına düşer. */
.ta-sahne::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--sahne-void, #03050b) 0%, rgba(3,5,11,.80) 20%, rgba(3,5,11,.14) 60%, transparent 100%),
    linear-gradient(to top, var(--sahne-void, #03050b) 0%, rgba(3,5,11,.55) 22%, transparent 58%),
    linear-gradient(to bottom, var(--sahne-void, #03050b) 0%, transparent 26%);
}
html[data-theme="light"] .ta-sahne::after {
  background:
    linear-gradient(90deg, var(--sahne-acik-zemin, #f8f6f2) 0%, rgba(248,246,242,.84) 20%, rgba(248,246,242,.16) 60%, transparent 100%),
    linear-gradient(to top, var(--sahne-acik-zemin, #f8f6f2) 0%, rgba(248,246,242,.55) 22%, transparent 58%),
    linear-gradient(to bottom, var(--sahne-acik-zemin, #f8f6f2) 0%, transparent 26%);
}

@media (max-width: 820px) {
  /* Dar ekranda görsel metnin ALTINA girer: tam genişliğe yayılır, belirgin
     şekilde soluklaşır ve MOBİL DOSYA iner (900px sürüm). */
  .ta-sahne { width: 100%; right: 0; left: 0; }
  .ta-sahne::before { background-image: var(--skm, var(--sk)); background-position: 64% center; opacity: .34; }
  html[data-theme="light"] .ta-sahne::before { background-image: var(--sam, var(--sa, var(--skm, var(--sk)))); opacity: .42; }
}

/* Aydınlık karşılığı OLMAYAN sahne için kaçış: uydurma bir eşleştirme
   yapmaktansa o sayfada zemini hiç göstermemek doğrusu. */
html[data-theme="light"] .ta-sahne-koyuya-ozel .ta-sahne { display: none; }