/* ==========================================================================
   Sekans sahnesi — kaydırmaya bağlı JPG dizisi

   Ayrı dosya, çünkü bölüm bir bütün: HTML bloğu + sekans.js + bu dosya.
   Üçünü birden kaldırınca site eskisi gibi çalışır, stil.css'te iz kalmaz.

   Sahne AÇIK zeminli. Tost sahnesi siyahtı ve kendi paletini getiriyordu;
   buradaki karelerin zemini zaten fildişi, o yüzden sahne sitenin
   paletinin içinde kalıyor: erik mürekkep yazı, gül ve erik vurgu.

   DİKKAT: yapışık katman 100vw DEĞİL %100 genişlikte. Sağdaki fırça şeridi
   şu an kapalı (--ray-alan: 0) ama şerit geri açılırsa body'nin sağ boşluğu
   da geri gelir; 100vw yazılmış olsaydı sahne o boşluğun altına taşar ve
   yatay kaydırma açılırdı. %100 her iki durumda da doğru.
   ========================================================================== */

.sahne{
  --sp:0;                       /* kaydırma ilerlemesi 0…1, sekans.js yazıyor */
  position:relative;
  height:420svh;                /* yapışık katmanın yürüyeceği yol */
  background:#FAF6F5;           /* kareler gelene kadarki zemin (near-white) */
}

.sahne.yok{ display:none; }

/* YAPIŞIK KATMAN ÜST ÇUBUĞUN ALTINDAN BAŞLIYOR — her ekran boyutunda.

   Çubuk da sticky ve top:0; ikisi üst üste gelince çubuk (z-index:30)
   tuvalin tepesini örtüyor. Elin parmak uçları karenin en üstünde olduğu
   için "kaydırırken el navbarın altına giriyor" görüntüsü çıkıyordu.

   Önce yalnız dar ekranda çözülmüştü; geniş ekranda tam kanama (çubuğun
   yarı saydam camının arkasından geçen el) bilinçli bir tercihti ama
   işletme bunu hata olarak gördü, o yüzden kural her yere alındı.
   Yükseklik --ust-yuk kadar kısaltılıyor ki sahne ekrandan taşmasın. */
.sahne-yapisik{
  position:sticky;
  top:var(--ust-yuk);
  height:calc(100svh - var(--ust-yuk));
  overflow:hidden;
  /* .ust (z-index:30) bunun üstünde kalmalı */
  z-index:0;
}

/* Tuvalin ölçüsünü BU kutu belirliyor; sekans.js clientWidth/clientHeight'ı
   buradan okuyor. Tuvalin kendi ölçüsünü JS yazdığı için doğrudan onu ölçmek
   geri besleme döngüsü kurardı. */
.sahne-tuval-alan{ position:absolute; inset:0; }

/* Karelerin zemini stüdyo fildişisi (#F5E9D9 → #B1A191); sitenin zemini artık
   pudra pembe. İkisi yan yana durunca fotoğraf sayfadan kopuk görünüyordu.
   Çok ince bir gül örtü ikisini aynı ailede tutuyor. Oran bilerek düşük —
   %6'nın üstünde ten rengi bozuluyor. */
.sahne-tuval-alan::after{
  content:""; position:absolute; inset:0;
  pointer-events:none;
  background:rgba(166,46,86,.10);
}

.sahne-tuval{
  width:100%; height:100%;
  display:block;
  /* Kareler soluk bir stüdyo çekimi; bordo oje sayfanın en canlı rengi
     olması gerekirken sönük kalıyordu. Süzgeç ucuz (GPU'da tek geçiş),
     her karede yeniden çizilse bile maliyeti fark edilmiyor. */
  filter:saturate(1.14) contrast(1.02);
  opacity:0;
  transition:opacity .5s ease;
}
.sahne.hazir .sahne-tuval{ opacity:1; }

/* Yazının okunduğu sol sütunu açmak için ince bir fildişi perde.
   Kareler zaten solda boş olduğu için perde çok hafif — amaç kontrastı
   garantiye almak, görüntüyü karartmak değil. */
.sahne-perde{
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(
    100deg,
    rgba(242,220,213,.94) 0%,
    rgba(242,220,213,.78) 24%,
    rgba(242,220,213,.28) 42%,
    rgba(242,220,213,0)   58%
  );
}


/* ————————————————————————— Yazılar ————————————————————————— */

.sahne-yazilar{ position:absolute; inset:0; pointer-events:none; }

.sahne-yazi{
  position:absolute;
  left:clamp(20px, 6.5vw, 92px);
  width:min(46%, 500px);
  visibility:hidden;            /* sekans.js açıyor */
  opacity:0;
  will-change:opacity, transform, filter;
}
.sahne-yazi > *{ pointer-events:auto; }

/* .ortala olanlara sekans.js translateY(-50% …) uyguluyor */
.sahne-yazi.ortala{ top:50%; }
.yazi-renk{ top:20%; }
.yazi-detay{ bottom:15%; }

/* AÇILIŞ KAŞI — sayfada kalan TEK altın büyük-harf üst etiket.
   Yalnız sahnenin ilk yazısında (işletmenin adı) kullanılıyor; oradaki işi
   gerçek: sahne markayla açılıyor. §8 "her bölümü küçük altın büyük-harf bir
   kelimeyle açma" kuralı bu tek kullanımı bilerek bırakıyor. ARTIRMA. */
.sahne-kas{
  margin:0 0 14px;
  font-family:var(--govde);
  font-size:.79rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--altin);
}
.sahne-kas i{ font-style:normal; color:var(--gul); }

/* Sahnedeki DİĞER üst satırlar artık kaş değil. Beş yazının dördü aynı altın
   büyük-harf etiketle açılınca sahne bir şablon dizisi gibi okunuyordu —
   içerik taşısalar bile. Satırlar gerçek bilgi ("Saç hizmetleri",
   "Her gün · 08:30–21:00") olduğu için SİLİNMEDİ, etiket kılığından
   çıkarılıp normal satıra döndürüldü; kahramandaki .tepe .kas ile aynı karar.

   Ölçü .sahne-kas ile aynı hizada tutuldu (margin 0 0 14px, punto .95rem —
   .tepe .kas ile aynı): sahne geometrisi yazı bloğunun yüksekliğine bağlı,
   bkz. AGENTS.md §5. */
.sahne-ust{
  margin:0 0 14px;
  font-family:var(--govde);
  font-size:.95rem; font-weight:600;
  letter-spacing:.02em;
  color:var(--sis);
}

/* Bu başlık FOTOĞRAFIN ÜZERİNDE duruyor. Cormorant döneminde 500 ağırlık
   şarttı, aksi hâlde eriyordu; Bodoni Moda'nın saç inceliğindeki tırnakları
   fotoğraf dokusunda daha da eridiği için 10 Eylül 2026'da 600'e çıkarıldı.
   Negatif harf aralığı da 0'a alındı (Didone'de tırnaklar değiyor). */
.sahne-baslik{
  margin:0;
  font-family:var(--govde);
  font-weight:700;
  font-size:clamp(2.5rem, 6.2vw, 5rem);
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--tebesir);
}
.sahne-baslik .ince{ font-style:italic; color:var(--gul); }

.sahne-eylem{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }

.sahne-not{
  margin:16px 0 0;
  font-family:var(--govde);
  font-size:.90rem; line-height:1.6;
  color:var(--sis-2);
  max-width:32ch;
}


/* ————————————————————————— Kaydır ipucu ————————————————————————— */

.sahne-ipucu{
  position:absolute; left:50%; bottom:26px;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  font-family:var(--govde);
  font-size:.73rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sis-2);
  pointer-events:none;
}
.sahne-ipucu i{
  width:1px; height:26px;
  background:linear-gradient(180deg, var(--cizgi-ac), transparent);
  animation:sahne-in 1.9s ease-in-out infinite;
}
@keyframes sahne-in{
  0%,100%{ transform:translateY(-4px); opacity:.35; }
  50%    { transform:translateY(4px);  opacity:1; }
}


/* ————————————————————————— Dar ekran —————————————————————————
   Geniş ekranda kare bütün ekranı kaplıyor ve yazı boş sol yarıya oturuyor.
   Dik bir telefonda bu mümkün değil: 16:9 bir kare 390×800'ü kaplayınca
   yatayda yalnız ~%24'ü görünür kalıyor ve asıl konu — tırnaklar — kadrajın
   dışına taşıyor.

   Bu yüzden düzen değişiyor: tuval üstte bir blok, yazı onun altındaki
   alanda. Yazı artık fotoğrafın üstünde değil yanında okunuyor.

   BLOK YÜKSEKLİĞİ 60svh — ölçümle çıktı, üç turda oturdu:

   Karede el yatayda ~0.52–0.83 (genişlik 0.31), dikeyde ~0.03–1.00 arasında.
   Yani el DAR VE UZUN, oranı ~0.57. Kaplama kuralı dar ekranda yüksekliğe
   göre çalıştığı için tuvalin en/boy oranı ne kadar ele yaklaşırsa görünen
   kare penceresi o kadar daralıyor ve yanlardaki boşluk o kadar azalıyor.

   46svh'de tuval neredeyse kareydi: elin tamamı dikeyde sığıyordu ama
   yatayda karenin %54'ü görünüyor, yanlarda boşluk kalıyordu. Yakınlaştırma
   ile kapatmak denendi — bu sefer elin ALTI (bilek) kesildi.

   60svh'de ikisi birden çözülüyor: z=1.00'de görüntünün yüksekliği tuvalin
   yüksekliğine eşit oluyor (dikeyde HİÇ kırpma yok, el baştan sona görünür)
   ve görünen pencere %45'e iniyor, el tuvalin ~%15–%85'ini kaplıyor.

   Bu değeri değiştirirsen ikisi birden bozulur: küçültürsen yanlarda boşluk
   açılır, büyütürsen yazı alanı yetmez. */

@media (max-width:860px){
  .sahne{ height:340svh; }

  /* Yapışık katmanın çubuk altından başlaması artık ana kuralda — burada
     tekrarlanmasına gerek yok. */
  .sahne-tuval-alan{ inset:0 0 auto 0; height:60svh; }

  /* Perde artık okunurluk için değil; yalnız tuvalin alt kenarını zemine
     bağlayan ince bir geçiş.

     ÜSTTEN konumlanıyor, alttan değil. Eskiden `inset:auto 0 54svh 0` idi,
     yani yapışık katmanın ALTINDAN ölçülüyordu; katman üst çubuk kadar
     kısaltılınca (top:var(--ust-yuk)) perde tuvalin 64 piksel yukarısına
     kaydı ve fotoğrafın ortasında bir şerit gibi göründü. Üstten ölçülünce
     katmanın yüksekliği ne olursa olsun tam tuvalin alt kenarına oturuyor. */
  .sahne-perde{
    inset:calc(60svh - 70px) 0 auto 0;
    height:70px;
    background:linear-gradient(180deg, rgba(242,220,213,0), var(--kok));
  }

  /* YAZI ALANININ ZEMİNİ AÇIKÇA --kok.
     Aksi hâlde bu alan .sahne'nin placeholder rengini (#DACCBC, grişi)
     gösteriyordu; perde ise --kok'e (neredeyse beyaz) soluyordu. İkisinin
     buluştuğu yerde — tam bileğin üzerinde — sert bir yatay çizgi
     oluşuyordu. Aynı renk olunca geçiş görünmez oluyor. */
  .sahne-yazilar{ top:60svh; background:var(--kok); }

  /* Yazı alanının ortasına — hepsi .ortala gibi davranıyor,
     sekans.js dar ekranda -50% kaymayı zaten uyguluyor. */
  .sahne-yazi,
  .sahne-yazi.ortala,
  .yazi-renk,
  .yazi-detay{
    top:50%;
    bottom:auto;
    left:clamp(18px, 6vw, 40px);
    right:clamp(18px, 6vw, 40px);
    width:auto;
  }
  .sahne-baslik{ font-size:clamp(2.2rem, 9.5vw, 3.1rem); }
  .sahne-ipucu{ display:none; }

  /* SAHNENİN SON DÜĞMESİ DAR EKRANDA GİZLİ.
     Kahraman küçültüldükten sonra sahnenin finali ile kahraman aynı ekrana
     düşüyor ve iki tane "Randevu al" alt alta geliyordu; alt eylem çubuğu
     da üçüncüsünü taşıyor. Geniş ekranda kahraman bir ekran aşağıda
     kaldığı için orada tekrar hissi yok, düğme duruyor. */
  .yazi-final .sahne-eylem{ display:none; }
  .yazi-final .sahne-not{ margin-top:20px; }
}


/* ————————————————————————— Durağan sahne —————————————————————————
   Sahne yapışmayı bırakıyor: tek bir son kare ve altında yazıların
   tamamı normal akışta. Sekans süs değil içerik olduğu için tamamen
   kaldırılmıyor, donduruluyor.

   İKİ DURUMDA DEVREYE GİRİYOR:
     1. prefers-reduced-motion: reduce
     2. .sahne.sabit — sekans.js sayaçlı/yavaş bağlantıda bu sınıfı ekliyor
        ve 191 kareyi hiç indirmiyor.

   İkincisi olmadan tasarruf modunda tek kare çizilir ama 420svh'lik yapışık
   düzen ayakta kalırdı: kullanıcı dev bir boş kaydırma yolunda dolaşırdı. */

.sahne.sabit{ height:auto; background:var(--kok); }
.sahne.sabit .sahne-yapisik{ position:static; height:auto; overflow:visible; }
.sahne.sabit .sahne-tuval-alan{ position:static; inset:auto; height:auto; }
.sahne.sabit .sahne-tuval{
  width:100%; height:auto;
  border-radius:12px;
  border:1px solid var(--cizgi);
}
.sahne.sabit .sahne-perde,
.sahne.sabit .sahne-ipucu{ display:none; }
.sahne.sabit .sahne-yazilar{
  position:static;
  display:grid; gap:44px;
  padding:44px 0 8px;
}
.sahne.sabit .sahne-yazi{
  position:static !important;
  inset:auto !important;
  width:auto !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

@media (prefers-reduced-motion: reduce){
  .sahne{ height:auto; background:var(--kok); }
  .sahne-yapisik{ position:static; height:auto; overflow:visible; }

  .sahne-tuval-alan{ position:static; inset:auto; height:auto; }
  .sahne-tuval{
    width:100%; height:auto;
    border-radius:12px;
    border:1px solid var(--cizgi);
  }

  .sahne-perde,
  .sahne-ipucu{ display:none; }

  .sahne-yazilar{
    position:static;
    display:grid; gap:44px;
    padding:44px 0 8px;
  }
  .sahne-yazi{
    position:static !important;
    inset:auto !important;
    width:auto !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .sahne-baslik{ font-size:clamp(2.2rem, 6vw, 3.4rem); }
}