@layer sifirla, jeton, temel, duzen, parca, sahne, hareket;

@layer jeton {
  @property --ruzgar { syntax: "<number>"; inherits: true; initial-value: 0; }

  :root {
    --zeytin:    oklch(42% 0.058 140);
    --yaprak:    oklch(56% 0.088 143);
    --adacayi:   oklch(76% 0.032 146);
    --keten:     oklch(93% 0.024 84);
    --kemik:     oklch(97.5% 0.008 90);
    --kum:       oklch(88% 0.038 76);
    --deniz:     oklch(82% 0.064 197);
    --gok:       oklch(96% 0.016 214);
    --zakkum:    oklch(80% 0.075 20);
    --begonvil:  oklch(55% 0.19 350);

    --murekkep:   oklch(28% 0.024 146);
    --murekkep-2: oklch(43% 0.022 146);

    --gir:         cubic-bezier(0.16, 1, 0.3, 1);
    --gir-yumusak: cubic-bezier(0.22, 1, 0.36, 1);
    --kontrol:     cubic-bezier(0.4, 0, 0.2, 1);
    --kamera:      cubic-bezier(0.65, 0, 0.35, 1);

    --elyazi: "Pinyon Script", "Segoe Script", cursive;
    --serif: "Cormorant Garamond", "Didot", Georgia, serif;
    --sans:  "Lora", Georgia, serif;

    --olcu: min(100% - 2.75rem, 60ch);
    --guvenli-alt: env(safe-area-inset-bottom, 0px);
  }
}

@layer sifirla {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    -webkit-text-size-adjust: 100%;
    /* Tarayıcının kaydırma çubuğu davetiyenin sağ kenarında kutu gibi
       duruyordu; sayfa zaten tek yön kaydırılıyor ve ipucu var. */
    scrollbar-width: none;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
  body { margin: 0; }
  img, picture, svg, canvas { display: block; max-width: 100%; }
  h1, h2, p, ol, figure { margin: 0; }
  ol { padding: 0; list-style: none; }
  button { font: inherit; color: inherit; }
}

@layer temel {
  body {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(1.2rem, 1.06rem + .5vw, 1.4rem);
    line-height: 1.68;
    color: var(--murekkep);
    background: var(--gok);
    /* cinematic-audit-ignore: overflow-concealment — sahne zeminleri bilerek
       scale ile taşırılıyor; her .sahne kendi taşmasını overflow:clip ile kesiyor.
       320–1440 px arası ölçülen yatay taşma: 0.
       hidden DEĞİL clip: hidden, overflow-y'yi de auto'ya çevirip body'yi
       kaydırma kabı yapıyor ve içeride ikinci bir kaydırma çubuğu çıkıyordu. */
    overflow-x: clip;
  }

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

  .atla {
    position: absolute; left: 50%; top: 0; z-index: 70;
    translate: -50% -130%;
    padding: .8rem 1.3rem; background: var(--kemik); color: var(--murekkep);
    text-decoration: none; border-radius: 0 0 .55rem .55rem;
    transition: translate 180ms var(--kontrol);
  }
  .atla:focus-visible { translate: -50% 0; }

  .ustyazi {
    font-family: var(--serif); font-size: clamp(1.06rem, .92rem + .6vw, 1.32rem);
    font-weight: 500; letter-spacing: .34em; text-indent: .34em;
    /* Aralıklı büyük harfler ince kalıyor; ikincil mürekkeple ölçülen
       kontrast eşiğin altına düşüyordu. Tam mürekkep. */
    text-transform: uppercase; color: var(--murekkep);
  }

  .baslik {
    font-family: var(--elyazi); font-weight: 400;
    font-size: clamp(3.25rem, 2.05rem + 5.3vw, 6.4rem);
    line-height: 1.18; letter-spacing: .012em; max-width: 13ch;
    text-wrap: balance; color: var(--zeytin);
  }
  /* max-width geldiği için ortalanan başlığın kutusu da ortalanmalı:
     yoksa yazı dar kutunun içinde ortalanıp kutu solda kalıyor. */
  .baslik--orta { text-align: center; margin-inline: auto; }

  .metin {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(1.5rem, 1.12rem + 1.9vw, 2.15rem);
    line-height: 1.44; letter-spacing: .002em;
    max-width: 26ch; text-wrap: pretty;
  }
  .metin--dar { max-width: 22ch; margin-inline: auto; }

  /* Başlığın hemen altında duran kısa söz: cümle değil, nefes. */
  .alt-soz {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem);
    letter-spacing: .04em; color: var(--murekkep-2);
    margin-top: -.5rem;
  }
}

@layer duzen {
  .sahne {
    position: relative; z-index: 1;
    min-height: 100svh;
    display: grid; align-content: center;
    padding-block: clamp(4.5rem, 13vh, 8rem);
    isolation: isolate;
    overflow: clip;
  }

  .sahne__ic {
    width: var(--olcu); margin-inline: auto;
    display: grid; gap: clamp(1.05rem, 2.6vh, 1.9rem);
    position: relative; z-index: 2;
  }
  .sahne__ic--orta { justify-items: center; text-align: center; }

  /* Arkadaki beyaz hâle kaldırıldı: resmi soldurUYordu ve hâlesiz de
     kontrast 28 ölçümde eşiğin altına inmiyor (en dar 3.85 / eşik 3).
     Yerine harflerin çevresine ince bir kontur: yalnız harfin sınırında
     ayrım yaratır, resmin hiçbir yerini yıkamaz.
     paint-order olmadan kontur harfin ortasına biner ve harfi inceltir;
     stroke-fill sırasıyla kontur dışarıda kalır, harf gövdesi bozulmaz. */
  .sahne__ic {
    paint-order: stroke fill;
    /* Kontur harfin boyuna göre ölçeklenmeli: aynı kalınlık büyük harfte
       zarif, küçük harfte harfi boğuyor. Taban çok ince. */
    -webkit-text-stroke: .35px oklch(99.5% .004 90 / .62);
  }
  /* Tek sahnenin içinde bile zemin çok değişken: ortada aydınlık gökyüzü
     boşluğu, kenarlarda koyu ağaçlar. Ne koyu ne açık tek yazı rengi her
     ikisinde birden ölçülebilir kontrast veriyor (denendi ve ölçüldü).
     Bu yüzden hâle geri kondu — ama eski büyük elips değil, yazı bloğunun
     kendisine yapışan dar ve hızlı sönen bir alan. */
  /* Beyaz pudramsı hâle kaldırıldı. Yolun ilk yarısı aydınlık: orada hiç
     plaka yok, koyu yazı ölçülen eşiği rahat geçiyor. İkinci yarı koyu
     ormana giriyor ve orta tonlu zeminde ne koyu ne açık yazı tek başına
     yetiyor (ölçüldü: en parlak sütun 126-190, kenarlar 44-117).
     Orada yumuşak koyu bir gölge ve krem yazı — ormanda doğal durur. */
  /* Gölge kaydırma eşiğine değil sahneye bağlı: hangi sahnenin buna
     ihtiyacı olduğu bakılarak belirlendi, eşik hep geç ya da erken
     kalıyordu. Kenarları blur ile yumuşatıldı — gradyanın kendi bitişi
     kutunun köşelerinde keskin bir sınır gibi okunuyordu. */
  .sahne--gece .sahne__ic::before {
    content: ""; position: absolute; inset: -14% -16%; z-index: -1;
    background: radial-gradient(ellipse 74% 76% at 50% 50%,
      oklch(20% .02 146 / .82) 0%, oklch(20% .02 146 / .58) 44%,
      oklch(20% .02 146 / .22) 68%, oklch(20% .02 146 / 0) 86%);
    filter: blur(26px);
    pointer-events: none;
  }
  /* orta boy */
  .sahne__ic :is(.metin, .alt-soz, .kapanis__soz, .tarih__yil) {
    -webkit-text-stroke-width: .7px;
  }
  /* gösterim boyu */
  .sahne__ic :is(.baslik, .isim, .tarih__gun, .tarih__ay, .mekan__ad,
                 .aile__ad, .kapanis__imza, .birim b) {
    -webkit-text-stroke-width: 1.6px;
  }



  /* ---- tek dünya ---- */
  .dunya { position: fixed; inset: 0; z-index: 0; overflow: clip; background: var(--gok); }
  /* Opaklık ve ölçek kaydırmadan sürülür: kademeler arası geçiş
     "kamera geri çekiliyor" olarak okunsun. */
  .dunya__kat {
    position: absolute; inset: 0; opacity: 0;
    /* will-change yok: 56 katmanın hepsini GPU'ya terfi ettirmek telefonda
       ~70 MB katman belleği demek. Baskı altında tarayıcı katmanı atıyor
       ve boş kare beyaz patlama gibi görünüyor. Aynı anda en çok iki
       katman görünür, ikisi de terfisiz akıcı. */
    transform-origin: 50% 55%;
  }
  .dunya__kat.aktif { opacity: 1; }
  /* Kaydırma sürücüsü yoksa (JS kapalı / reduced-motion) ilk kademe görünsün */
  .dunya:not([data-surulur]) .dunya__kat:first-child { opacity: 1; }
  /* JS yoksa da ilk kare görünsün */
  .dunya__kat:first-child { background-image: url("assets/kare/k-001.webp"); }
  /* Katmanlar dekoratif: <img> değil arka plan görseli. Böylece
     kaynaksız img "bozuk görsel" sayılmıyor ve alt metni gerekmiyor. */
  .dunya__kat {
    background: no-repeat center 55% / cover;
    /* Ölçeği JS yazıyor (rüzgâr terimi dahil). Burada taban vermek,
       JS'in yazdığı scale ile çakışıp iki kez büyütmeye yol açıyordu. */
  }
  /* Video sürüşü devredeyse dizi katmanları gizlenir. */
  .dunya__vid {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 55%; display: none;
  }
  .dunya[data-vid] .dunya__vid { display: block; }
  .dunya[data-vid] .dunya__kat { display: none; }

  /* Yazının her karede okunması için ölçülmüş tek perde */
  /* Tam ekran perde resmi yıkıyordu: ölçümde parlaklığı 45 birim kaldırıp
     ton aralığının %26'sını eziyordu. Okunabilirliği zaten metnin kendi
     yerel hâlesi sağlıyor (.sahne__ic::before). Perde yalnız kenarlarda
     çok hafif bir yumuşatma olarak kaldı. */
  .dunya__perde {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 82% 56% at 50% 50%, oklch(98% .008 200 / .10) 0%, oklch(98% .008 200 / .04) 66%, oklch(98% .008 200 / 0) 100%),
      linear-gradient(to bottom, oklch(98% .008 200 / .07), oklch(98% .008 200 / 0) 38%, oklch(98% .008 200 / .09));
  }

  .atmosfer {
    position: fixed; inset: 0; z-index: 3;
    width: 100%; height: 100%;
    pointer-events: none;
  }

  .dip {
    position: relative; z-index: 2;
    /* Kapanış sahnesinden altbilgiye sert kesme olmasın */
    mask-image: linear-gradient(to bottom, transparent 0, #000 3.2rem);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3.2rem);
    padding: 5rem 1.25rem calc(2.4rem + var(--guvenli-alt));
    text-align: center; font-size: .86rem; letter-spacing: .1em;
    color: var(--murekkep-2);
    background: linear-gradient(to bottom, oklch(97.5% .008 90 / 0), var(--kemik) 3.2rem);
  }
}

@layer parca {
  .dugme {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding-inline: 1.7rem;
    border-radius: 999px; border: 1px solid transparent;
    font-family: var(--sans); font-size: .95rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms var(--kontrol), border-color 180ms var(--kontrol),
                translate 180ms var(--kontrol);
  }
  .dugme--birincil { background: var(--zeytin); color: var(--kemik); }
  .dugme--sade { background: oklch(99% .004 90 / .55); color: var(--zeytin); border-color: var(--adacayi); }
  @media (pointer: fine) and (hover: hover) {
    .dugme--birincil:hover { background: var(--yaprak); translate: 0 -1px; }
    .dugme--sade:hover { border-color: var(--zeytin); translate: 0 -1px; }
  }

  .isim {
    font-family: var(--elyazi); font-weight: 400;
    font-size: clamp(3.6rem, 1.4rem + 12vw, 8rem);
    line-height: 1.12; letter-spacing: .01em; color: var(--zeytin);
    display: grid; gap: 0; justify-items: center;
  }
  .isim__ve { font-family: var(--serif); font-style: italic; font-weight: 400;
              font-size: .22em; color: var(--murekkep); }
  .aileler { display: grid; gap: 1.15rem; justify-items: center; margin-top: .3rem; }
  .aile__ad { font-family: var(--elyazi); font-weight: 400; font-size: clamp(2.35rem, 1.7rem + 2.7vw, 3.5rem); line-height: 1.22; color: var(--zeytin); }
  .aile__ad .ve { font-family: var(--serif); font-style: italic; font-size: .52em;
              padding-inline: .1em; }
  .aile__rol { font-family: var(--sans); font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; color: var(--murekkep); }
  .aile__dal {
    width: 4.5rem; height: 9px;
    background: no-repeat center/contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 9'%3E%3Cpath d='M2 4.5h68' stroke='%237e9679' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M36 4.5c-3-3-6-3-8 0 2 3 5 3 8 0zM36 4.5c3-3 6-3 8 0-2 3-5 3-8 0z' fill='%236d8a66'/%3E%3C/svg%3E");
  }

  .tarih { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--zeytin); display: grid; justify-items: center; line-height: .94; }
  .tarih__gun { font-family: var(--serif); font-size: clamp(6.8rem, 2.1rem + 22vw, 14.5rem);
                font-weight: 600; letter-spacing: -.02em; line-height: .92; }
  .tarih__ay  { font-family: var(--elyazi); font-size: clamp(2.7rem, 1.5rem + 5vw, 4.6rem); margin-top: -.06em; line-height: 1.15; }
  .tarih__yil { font-size: clamp(1.2rem, .95rem + 1.3vw, 1.75rem); letter-spacing: .38em; padding-left: .42em; margin-top: .35em; }
  .tarih__alt { font-family: var(--sans); font-size: 1.02rem; letter-spacing: .16em; color: var(--murekkep); text-transform: uppercase; color: var(--murekkep-2); }

  .mekan__ad { font-family: var(--elyazi); font-weight: 400; font-size: clamp(3.1rem, 1.9rem + 5vw, 5.2rem); color: var(--zeytin); line-height: 1.18; }
  .mekan__yer { font-family: var(--sans); font-size: .86rem; letter-spacing: .26em; text-transform: uppercase; color: var(--murekkep-2); }

  /* Tek satır dağınık kalıyordu: rakamlar sarıyor, ayraçlar kazara duruyordu.
     Artık gravür bir levha — dört sütun, aralarında ince çizgiler, üstte ve
     altta birer kural. Kutu değil, çizgi. */
  .sayim {
    display: grid; grid-template-columns: repeat(4, 1fr);
    width: 100%; max-width: 23rem; margin-inline: auto;
    padding-block: clamp(.7rem, 2vh, 1.1rem);
    border-block: 1px solid oklch(99% .006 90 / .42);
  }
  .birim { display: grid; justify-items: center; gap: .1rem; }
  .birim + .birim { border-left: 1px solid oklch(99% .006 90 / .28); }
  .birim b {
    font-family: var(--sans); font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    font-size: clamp(2.05rem, 1.35rem + 3vw, 3.4rem); line-height: 1.06;
    color: var(--zeytin);
    display: inline-block; transform-origin: 50% 88%;
  }
  .birim i { font-style: normal; font-family: var(--sans); font-size: .76rem;
             letter-spacing: .18em; text-indent: .18em;
             text-transform: uppercase; color: var(--murekkep-2); }
  .sayim__dal { margin-top: .1rem; opacity: .9; }
  .sayim__not { font-size: .86rem; letter-spacing: .06em; color: var(--murekkep-2); }

  /* Sayfadaki başka hiçbir şey kutu içinde değil; program da olmamalı.
     Tören sırası gibi: saat küçük etiket, olay asıl satır, çizgi yok. */
  .program {
    display: grid; gap: clamp(1.5rem, 3.4vh, 2.4rem);
    width: 100%; max-width: 30rem; margin-inline: auto;
  }
  .program__satir { display: grid; justify-items: center; gap: .1rem; text-align: center; }
  .program__saat {
    font-family: var(--sans); font-size: .88rem; font-weight: 500;
    letter-spacing: .26em; text-indent: .26em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--murekkep-2);
  }
  .program__is {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(1.35rem, 1.05rem + 1.5vw, 1.95rem);
    line-height: 1.3; color: var(--zeytin);
    max-width: 20ch; text-wrap: balance;
  }
  /* Satırlar arasında ince bir nokta: çizgi yerine nefes */
  .program__satir + .program__satir::before {
    content: ""; width: 3px; height: 3px; border-radius: 50%;
    background: oklch(42% .058 140 / .34);
    margin-bottom: clamp(1.5rem, 3.4vh, 2.4rem);
  }

  /* Sayfadaki tek kutu buydu; bulanık cam levha ormanın üstünde leke gibi
     duruyordu. Program listesiyle aynı dil: kutu yok, yalnız çizgi. */
  .lcv {
    width: 100%; max-width: 22rem; margin-inline: auto;
    display: grid; gap: .55rem; justify-items: center;
    padding-block: clamp(1rem, 2.6vh, 1.5rem);
    border-block: 1px solid oklch(99% .006 90 / .42);
  }
  .lcv__baslik {
    font-family: var(--serif); font-size: 1rem; font-weight: 500;
    letter-spacing: .32em; text-indent: .32em; text-transform: uppercase;
    color: var(--zeytin);
  }
  .lcv__dal { opacity: .9; }
  .lcv__kurum {
    font-family: var(--serif); font-style: italic;
    font-size: 1.24rem; color: var(--murekkep-2);
  }
  /* Numara dokunulabilir: telefonda tıklayınca arama açılır. Rakamlar
     satır rakamı ve sabit genişlikte, aralık okunurluğu artırıyor. */
  .lcv__ara {
    font-family: var(--sans); font-size: 1.06rem; font-weight: 500;
    letter-spacing: .1em; text-indent: .1em;
    font-variant-numeric: lining-nums tabular-nums;
    padding-inline: 1.5rem;
  }
  .lcv__sonTarih {
    font-family: var(--sans); font-size: .92rem; letter-spacing: .04em;
    color: var(--murekkep-2); text-align: center;
  }
  .lcv__sonTarih b { font-weight: 500; color: var(--murekkep); }

  .ses {
    position: fixed; z-index: 55;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(1rem + var(--guvenli-alt));
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 48px; padding: 0 1.05rem;
    /* Cam hap sayfadaki tek "arayüz" öğesiydi ve her şey gravür çizgilerle
       konuşurken yabancı kalıyordu. Aynı dil: dolgu yok, ince çizgi var. */
    border-radius: 999px;
    border: 1px solid oklch(99% .006 90 / .55);
    background: oklch(28% .024 146 / .18);
    color: oklch(98% .008 95); cursor: pointer;
    box-shadow: none;
  }
  .ses[hidden] { display: none; }
  .ses__yazi { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
  .ses__ikon {
    width: 9px; height: 9px; border-radius: 50%; background: oklch(98% .008 95 / .85);
    transition: background-color 200ms var(--kontrol), scale 200ms var(--gir);
  }
  .ses[aria-pressed="true"] .ses__ikon { background: var(--begonvil); scale: 1.18; }
    @media (max-width: 420px) {
    .ses { transition: width 520ms var(--gir), padding 520ms var(--gir); }
    .ses__yazi { max-width: 8rem; overflow: hidden; white-space: nowrap;
                 transition: max-width 460ms var(--gir), opacity 300ms var(--kontrol); }
    .ses.daral { padding: 0; width: 48px; justify-content: center; }
    .ses.daral .ses__yazi { max-width: 0; opacity: 0; margin: 0; }
  }
}

@layer sahne {
  .kapi {
    position: fixed; inset: 0; z-index: 45;
    display: grid; place-items: center;
    background: var(--gok); overflow: clip;
  }
  .kapi[hidden] { display: none; }

  .kapi__sahne { position: absolute; inset: 0; }
  .kapi__poster, .kapi__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 55%;
  }
  /* Video hazır olana kadar poster durur; hazır olunca poster çekilir. */
  .kapi__video { opacity: 0; transition: opacity 260ms linear; }
  .kapi.oynuyor .kapi__video { opacity: 1; }
  .kapi.oynuyor .kapi__poster { opacity: 0; transition: opacity 260ms linear 160ms; }

  .kapi__sahne .kare img { width: 100%; height: 100%; object-fit: cover; }
  .kapi__ic {
    position: relative; z-index: 2;
    display: grid; justify-items: center; gap: 1.15rem;
    padding: 2rem 1.5rem calc(2rem + var(--guvenli-alt));
    text-align: center;
    transition: opacity 700ms var(--kamera), translate 1100ms var(--gir);
  }
  .kapi__ic::before {
    content: ""; position: absolute; inset: -16% -10%; z-index: -1;
    background: radial-gradient(ellipse at center, oklch(97% .01 88 / .84) 34%, oklch(97% .01 88 / 0) 74%);
  }
  .kapi__isim {
    font-family: var(--elyazi); font-weight: 400; color: var(--zeytin);
    font-size: clamp(3.1rem, 1.2rem + 10.5vw, 6.4rem); line-height: 1.14;
    display: grid; justify-items: center;
  }
  .kapi__isim i { font-family: var(--serif); font-style: italic; font-size: .22em; color: var(--murekkep-2); }
  .kapi__tarih { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--murekkep-2); }

  .kapi.aciliyor .kapi__ic { opacity: 0; translate: 0 -1.8rem; }

  body.kapali { overflow: hidden; }

  /* İpucu fazla siliktı: küçük, ikincil mürekkep ve yarı saydam nefes.
     Büyüdü, tam mürekkebe geçti ve altına ince bir ok kondu — bu bir
     yazı değil, davranış işareti. */
  .kaydir {
    position: absolute; bottom: calc(1.6rem + var(--guvenli-alt)); left: 50%;
    translate: -50% 0; z-index: 2;
    font-size: .88rem; letter-spacing: .3em; text-indent: .3em;
    text-transform: uppercase; color: var(--murekkep);
    text-shadow: 0 0 10px oklch(99% .006 90 / .75), 0 0 3px oklch(99% .006 90 / .9);
  }
  .kaydir span { display: block; animation: nefes 2600ms ease-in-out infinite; }
  .kaydir span::after {
    content: ""; display: block;
    width: 11px; height: 11px; margin: .55rem auto 0;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    rotate: 45deg;
  }
  @keyframes nefes { 0%, 100% { translate: 0 0; opacity: .72; } 50% { translate: 0 .55rem; opacity: 1; } }

  /* Kapanış: metin alt yarıda, kemer üstte kalsın */
  /* Kaydırma ipucu dar ekranda isimlere sokuluyordu. */
  .sahne--acilis { padding-bottom: clamp(7rem, 17vh, 10rem); }
  .sahne--kapanis { align-content: end; padding-bottom: clamp(3.5rem, 11vh, 7rem); }
  .kapanis__soz {
    font-family: var(--serif); font-weight: 400; font-style: italic;
    font-size: clamp(1.75rem, 1.2rem + 2.9vw, 3rem);
    line-height: 1.36; color: var(--zeytin); text-wrap: balance;
  }
  .kapanis__imza {
    font-family: var(--elyazi); font-size: clamp(2rem, 1.2rem + 3.4vw, 3.2rem);
    letter-spacing: .01em; color: var(--zeytin); margin-top: .2rem; line-height: 1.2;
  }
  .kapanis__dal { margin-block: .35rem .1rem; opacity: 1; width: 5.5rem; }
  .kapanis__yer { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--murekkep-2); }
}

@layer hareket {
  .ac-1, .ac-2, .ac-3, .ac-4,
  .sahne .baslik, .sahne .metin, .sahne .aileler,
  .sahne .tarih, .sahne .tarih__alt, .sahne .mekan__ad, .sahne .mekan__yer,
  .sahne .sayim, .sahne .sayim__not, .sahne .program__satir, .sahne .lcv, .sahne .dugme,
  .sahne .ustyazi, .sahne .alt-soz, .sahne .aile__ad, .sahne .aile__rol {
    opacity: 0; translate: 0 1.2rem; clip-path: inset(0 0 14% 0);
  }
  .sahne.gorunur :is(.ac-1, .ac-2, .ac-3, .ac-4, .baslik, .metin, .aileler, .tarih,
    .tarih__alt, .mekan__ad, .mekan__yer, .sayim, .sayim__not, .program__satir,
    .lcv, .dugme, .ustyazi, .alt-soz, .aile__ad, .aile__rol) {
    opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0);
    transition:
      opacity 760ms var(--gir-yumusak) var(--gecikme, 0ms),
      translate 900ms var(--gir) var(--gecikme, 0ms),
      clip-path 900ms var(--gir) var(--gecikme, 0ms);
  }
  /* Elyazısı satırlarda alt kırpma yerine soldan sağa silme: yazı
     yazılıyormuş gibi görünsün. Bağlantılı harflerde tek tek soldurmak
     kopuk durur, kalem gidişi doğru okuma. */
  .sahne .baslik, .sahne .aile__ad, .sahne .mekan__ad, .sahne .tarih__ay,
  .kapanis__imza, .isim__ad {
    clip-path: inset(-.4em 100% -.4em -.12em);
  }
  .sahne.gorunur :is(.baslik, .aile__ad, .mekan__ad, .tarih__ay, .kapanis__imza, .isim__ad) {
    clip-path: inset(-.4em -.12em -.4em -.12em);
    transition-duration: 1500ms, 900ms, 1500ms;
    transition-timing-function: var(--gir-yumusak), var(--gir), cubic-bezier(.28,.7,.25,1);
  }
  .sahne .aile__ad { --gecikme: 300ms; }
  .sahne .mekan__ad { --gecikme: 150ms; }
  .sahne .tarih__ay { --gecikme: 220ms; }

  /* İpucu ilk kaydırmadan sonra sönsün. Açılış kuralı (.sahne.gorunur .ac-4)
     bu katmanda ve daha güçlü; sönüş de burada ve ondan sonra olmalı. */
  .sahne .kaydir.gitti {
    opacity: 0; translate: -50% .6rem; pointer-events: none;
    transition: opacity 700ms var(--kontrol), translate 700ms var(--gir);
  }

  .ac-1 { --gecikme: 0ms; } .ac-2 { --gecikme: 110ms; }
  .ac-3 { --gecikme: 230ms; } .ac-4 { --gecikme: 360ms; }
  .sahne .ustyazi { --gecikme: 0ms; }
  .sahne .baslik  { --gecikme: 80ms; }
  .sahne .metin   { --gecikme: 190ms; }
  .sahne .alt-soz { --gecikme: 200ms; }
  .sahne .aile__rol { --gecikme: 420ms; }
  .sahne .aileler { --gecikme: 280ms; }
  .sahne .dugme   { --gecikme: 340ms; }
  .sahne .program__satir:nth-child(1) { --gecikme: 120ms; }
  .sahne .program__satir:nth-child(2) { --gecikme: 210ms; }
  .sahne .program__satir:nth-child(3) { --gecikme: 300ms; }
  .sahne .program__satir:nth-child(4) { --gecikme: 390ms; }

  /* Zeminler tek rüzgâr alanında yavaşça nefes alır — resim döndürülmez. */
  .sahne__zemin img {
    transform-origin: 50% 62%;
    scale: calc(1.045 + var(--ruzgar) * .0012);
    translate: calc(var(--ruzgar) * .09px) 0;
  }
  .kapi__sahne .kare img { scale: calc(1.02 + var(--ruzgar) * .001); }
  /* Kapı açılırken kamera da çok hafif ileri gitsin: kareler yerinde
     erirken kamera duruyordu, sahne yassı kalıyordu.
     Kamera ayrı bir öğede: rüzgâr her karede --ruzgar'ı değiştirdiği için
     aynı özellikte geçiş hedefi sürekli yenilenir ve hiç ilerlemez. */
  /* Kamera itişi kaldırıldı: açılış videosu kamerayı zaten taşıyor,
     üstüne CSS ölçeği bindirmek ikinci bir kamera olurdu. */

  .birim b.tik { animation: tik 460ms steps(6, end); }
  @keyframes tik { 0% { translate: 0 -.11em; opacity: .5; } 100% { translate: 0 0; opacity: 1; } }

  @media (prefers-reduced-motion: reduce) {
    .sahne :is(.ac-1, .ac-2, .ac-3, .ac-4, .baslik, .metin, .aileler, .tarih, .tarih__alt,
      .mekan__ad, .mekan__yer, .sayim, .sayim__not, .program__satir, .lcv, .dugme, .ustyazi) {
      opacity: 1; translate: none; clip-path: none; transition: none;
    }
    .sahne .baslik, .sahne .aile__ad, .sahne .mekan__ad, .sahne .tarih__ay,
    .kapanis__imza, .isim__ad, .sahne .alt-soz, .sahne .aile__rol {
      clip-path: none; opacity: 1; translate: none; transition: none;
    }
    .sahne__zemin img, .kapi__sahne .kare img { scale: 1.02; translate: none; }
    .kapi__ic { transition: opacity 200ms linear; }
    .kaydir span { animation: none; opacity: .8; }
    .ses, .ses__yazi { transition: none; }
    .birim b.tik { animation: none; }
    .atla { transition: none; }
    .atmosfer { display: none; }
  }
}


@layer hareket {
  /* Satır maskesi: metin alttan yukarı "basılır" gibi açılır, opaklıkla değil. */
  /* overflow: hidden satır aşağıdan gelirken taşmayı gizlemek içindi ama
     elyazısının alt uzantılarını da kesiyordu (Açelya'nın y'si). Yatayda
     kesmeye devam, dikeyde serbest. */
  /* overflow-x: hidden + overflow-y: visible OLMAZ: CSS, visible olanı
     auto'ya çeviriyor ve öğe kaydırılabilir hâle geliyor — elyazısının
     alt uzantıları taştığı için isimlerin yanında kaydırma çubuğu
     çıkıyordu. clip ile visible aynı aileden, çubuk üretmiyor. */
  .satir { display: block; overflow-x: clip; overflow-y: visible; }
  .satir > * { display: inline-block; translate: 0 105%; }
  .sahne.gorunur .satir > * {
    translate: 0 0;
    transition: translate 900ms var(--gir) var(--satirGecikme, 0ms);
  }
  .satir:nth-child(1) > * { --satirGecikme: 60ms; }
  .satir:nth-child(2) > * { --satirGecikme: 190ms; }
  .satir:nth-child(3) > * { --satirGecikme: 320ms; }

  /* Satır sarmalayıcı varken üst öğe kendi kırpmasını yapmasın */
  .isim, .kapanis__soz { clip-path: none !important; }

  @media (prefers-reduced-motion: reduce) {
    .satir > * { translate: none !important; transition: none !important; }
  }

  /* Gece paleti burada, en son katmanda: .kapanis__soz gibi renkler
     @layer sahne'de tanımlı ve sonraki katman önceki katmanı ezdiği
     için parca katmanındaki hâli hiç uygulanmıyordu. */
  .sahne--gece .sahne__ic { -webkit-text-stroke-color: oklch(20% .02 146 / .55); }
  .sahne--gece .sahne__ic :is(.baslik, .isim, .metin, .alt-soz, .aile__ad, .mekan__ad,
      .tarih, .tarih__gun, .tarih__ay, .tarih__yil, .kapanis__soz, .kapanis__imza,
      .program__is, .birim b, .lcv__baslik, .lcv__sonTarih b) { color: oklch(97.5% .012 95); }
  .sahne--gece .sahne__ic :is(.ustyazi, .aile__rol, .mekan__yer, .tarih__alt,
      .sayim__not, .birim i, .program__saat, .kapanis__yer,
      .lcv__kurum, .lcv__sonTarih) { color: oklch(97% .012 95); }
  .sahne--gece :is(.sayim, .lcv) { border-block-color: oklch(97% .012 95 / .40); }
  .sahne--gece .birim + .birim { border-left-color: oklch(97% .012 95 / .28); }
  .sahne--gece .program__satir + .program__satir::before { background: oklch(97% .012 95 / .5); }
  .sahne--gece .dugme--sade { background: oklch(20% .02 146 / .38); color: oklch(97% .012 95);
                           border-color: oklch(97% .012 95 / .5); }
}