/* ═══════════════════════════════════════════════════════════════════════
   Softto Plus · SCROLL SİNEMASI

   Sayfa kaydıkça sahnenin katmanları farklı hızda kayıyor, bölümler
   görünür alana girerken yumuşakça açılıyor, editoryal başlıklar satır
   satır yükseliyor, bölüm araları soldan sağa çiziliyor.

   ── ÜÇ KURAL ─────────────────────────────────────────────────────────
   1) BÜTÜN başlangıç gizlemeleri `html.sinema` altında tanımlı. Bu
      sınıfı sinema.js ekliyor ve YALNIZ hareket tercihi açıkken
      ekliyor. JS kapalıysa ya da `prefers-reduced-motion: reduce` ise
      sınıf hiç eklenmiyor → hiçbir şey gizlenmiyor, sayfa olduğu gibi
      duruyor. ("Gizle sonra göster" kalıbının klasik tuzağı: JS
      düşünce içerik görünmez kalıyor. Burada düşmüyor.)

   2) Gizleme SEÇİCİYLE yapılıyor, JS'in koyduğu bir işaretle değil.
      Öğeleri JS işaretlese, işaret DOMContentLoaded'da düşerdi ve
      tarayıcı bölümleri bir kare görünür çizip sonra gizlerdi — göze
      çarpan bir titreme. Bu yüzden gizleme `:not([data-gorunur="1"])`
      üzerinden: sayfa daha çizilirken yürürlükte, açılınca kalkıyor.
      Yan fayda: hiçbir yerde özgüllük yarışı yok, hepsi aynı seviyede.

   3) Beliriş TRANSITION değil ANIMATION ile veriliyor. main.css içinde
      .urun-satir, .lotion-kart gibi öğelerin kendi `transition`
      tanımları var; aynı öğeye transition yazmak onları eziyordu.
      `animation-fill-mode: backwards` sayesinde animasyon bitince öğe
      normal stiline dönüyor ve hover geçişleri sağ kalıyor.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --sinema-egri:cubic-bezier(.22,.61,.36,1);
  --sinema-sure:820ms;
  --sinema-yol:18px;
}


/* ═══ 1. BÖLÜM GİRİŞİ ═══════════════════════════════════════════════
   .detay / .bolum / .urun-satir / .lotion-kart görünür alana girince
   yumuşakça yukarı kayarak açılıyor. Bir kez — JS gözlemi bırakıyor.
   `.anlatim` listede YOK: orayı anlatim.js yönetiyor. */

.sinema .detay:not([data-gorunur="1"]),
.sinema .bolum:not([data-gorunur="1"]),
.sinema .lotion .bolum-bas:not([data-gorunur="1"]),
.sinema .urun-satir:not([data-gorunur="1"]),
.sinema .lotion-kart:not([data-gorunur="1"]){opacity:0}

.sinema [data-sinema="bolum"][data-gorunur="1"]{
  animation:sinema-gir var(--sinema-sure) var(--sinema-egri)
            var(--sinema-gec,0ms) backwards;
}
@keyframes sinema-gir{
  from{opacity:0; transform:translate3d(0,var(--sinema-yol),0)}
  to  {opacity:1; transform:none}
}

/* Satır/kart taşıyan bölümler YALNIZ soluyor, kaymıyor: içindekiler
   zaten kendi kaymalarıyla geliyor, ikisi üst üste binince bölüm
   "iki kere hareket ediyor" gibi okunuyordu. Bayrağı sinema.js koyuyor. */
.sinema [data-sinema="bolum"][data-ic-hareket]{--sinema-yol:0px}

/* Izgara/liste öğeleri biraz daha kısa sürede, biraz daha az yoldan.
   (Kendi kuralı şart: yukarıdaki 0px bayrağı kalıtımla buraya iner.) */
.sinema .urun-satir[data-sinema],
.sinema .lotion-kart[data-sinema]{--sinema-sure:740ms; --sinema-yol:14px}


/* ═══ 2. EDİTORYAL BAŞLIK: SATIR SATIR ══════════════════════════════
   .detay h2 kelimelere bölünüyor (sinema.js), her kelime kendi
   maskesinden yükseliyor, gecikme SATIR indeksinden geliyor — böylece
   kütüphanesiz bir SplitText etkisi çıkıyor.

   PAY MESELESİ: maske `overflow:hidden` demek. Payı olmayan bir maske
   "geliştirildi" kelimesindeki g'nin kuyruğunu ve italik harflerin
   sağa taşmasını DURUŞTA da kesiyor. Her yöne pay verilip aynı
   miktarda negatif kenar boşluğuyla geri alınıyor: nefes açılıyor,
   satır yüksekliği ve kelime aralığı hiç değişmiyor.

   KIRPMA `clip-path` İLE, `overflow` İLE DEĞİL: overflow'u görünür
   olmaktan çıkarmak bir inline-block'un temel çizgisini metnin taban
   çizgisinden ALT KENAR BOŞLUĞUNA taşıyor (CSS'in kendi kuralı). Kelime
   satıra farklı oturunca satır kutusu büyüyor — ölçüldü: her .detay h2
   satırı 12,3 px uzuyor, yani sarmalayıcı yalnız var olduğu için başlık
   yer değiştiriyordu. clip-path düzene hiç dokunmuyor ve kırptığı alan
   birebir aynı: overflow da dolgu kutusunda keser, inset(0) da. */
.sinema-kelime{
  display:inline-block;
  clip-path:inset(0);
  padding:.18em .1em .28em;
  margin:-.18em -.1em -.28em;
}
/* will-change YOK: bir başlıkta 5–8 kelime, sayfada 4–5 başlık var.
   Kalıcı will-change her kelimeye ayrı katman açardı; transform
   animasyonu zaten çalışırken kendi katmanına alınıyor. */
.sinema-ic{display:inline-block}

.sinema .detay h2:not([data-gorunur="1"]) .sinema-ic{
  opacity:0; transform:translateY(138%);
}
.sinema [data-sinema="bas"][data-gorunur="1"] .sinema-ic{
  animation:sinema-satir 940ms cubic-bezier(.19,.92,.28,1)
            var(--g,0ms) backwards;
}
@keyframes sinema-satir{
  from{opacity:0; transform:translateY(138%)}
  to  {opacity:1; transform:none}
}


/* ═══ 3. ALTIN AYRAÇ: SOLDAN SAĞA ═══════════════════════════════════
   Çizim `clip-path` ile, `transform:scaleX()` ile DEĞİL. Ayraç 1 px
   yüksekliğinde; scaleX(0) kutusunun genişliğini de sıfırlıyor ve
   IntersectionObserver alansız bir hedefi ölçmek zorunda kalıyor —
   tarayıcıya göre değişen, kırılgan bir zemin. clip-path yalnız
   boyamayı kısıyor, kutu olduğu yerde ve tam boyunda duruyor. */
.sinema .ayrac:not([data-gorunur="1"]){clip-path:inset(0 100% 0 0)}
.sinema [data-sinema="ayrac"][data-gorunur="1"]{
  animation:sinema-cizil 1150ms var(--sinema-egri) backwards;
}
@keyframes sinema-cizil{
  from{clip-path:inset(0 100% 0 0)}
  to  {clip-path:inset(0 0 0 0)}
}


/* ═══ 4. PARALAKS ═══════════════════════════════════════════════════
   Sahnedeki katmanlar farklı hızda kayıyor. Toplam kayma 6–20 px:
   niyet "sayfa uçuşsun" değil, şişenin arkasındaki dev adın ve dokunun
   bir adım geride durduğunun hissedilmesi.

   KAYMA `translate` ÖZELLİĞİYLE veriliyor, `transform` ile DEĞİL.
   .ust-etiket ve .kunye çevresindeki öğeler zaten
   `transform:translate(-50%)` taşıyor; transform'a yazmak onları
   ekranın yarısı kadar yerinden ederdi. `translate` ayrı bir CSS
   özelliği ve transform'dan ÖNCE uygulanıyor — ikisi çakışmadan üst
   üste biniyor. */
.sinema [data-paralaks]{will-change:translate}


/* ═══ 5. HAREKET TERCİHİ ════════════════════════════════════════════
   `html.sinema` hareket tercihi kapalıyken zaten hiç eklenmiyor; bu
   blok ikinci emniyet — tercih sayfa açıkken değişirse (JS yeniden
   yüklenmiyor) ekranda gizli kalan bir bölüm ya da asılı bir animasyon
   kalmasın. */
@media (prefers-reduced-motion:reduce){
  .sinema .detay,
  .sinema .bolum,
  .sinema .lotion .bolum-bas,
  .sinema .urun-satir,
  .sinema .lotion-kart,
  .sinema .ayrac,
  .sinema .sinema-ic{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
  .sinema .ayrac{clip-path:none !important}
  .sinema [data-paralaks]{translate:none !important}
}