/* jenerik.css — sinematik giriş perdesi
   Oturumda bir kez oynar. Atlanabilir. prefers-reduced-motion varsa hiç açılmaz.
   İçerik altta hazır bekler; perde yalnız üstünü örter — LCP'yi geciktirmez. */

.jenerik {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--zemin-derin);
  overflow: hidden;
  /* JS açmazsa (betik hatası, eski tarayıcı) perde hiç görünmesin */
  visibility: hidden;
}
.jenerik[data-durum="oynuyor"] { visibility: visible; }
.jenerik[data-durum="bitti"] { visibility: hidden; pointer-events: none; }

/* perde iki kanattan açılır */
.jenerik-perde {
  position: absolute; inset-inline: 0; height: 50.5%;
  background: var(--zemin-derin);
  z-index: 2;
  will-change: transform;
}
.jenerik-perde[data-yon="ust"] { top: 0; }
.jenerik-perde[data-yon="alt"] { bottom: 0; }

/* arkada çok yavaş dönen altın hale */
.jenerik-hale {
  position: absolute;
  width: min(120vw, 90rem); aspect-ratio: 1;
  background: radial-gradient(circle,
              var(--hale-yogun) 0%,
              color-mix(in srgb, var(--hale-yogun) 32%, transparent) 35%,
              transparent 68%);
  opacity: 0;
  z-index: 3;
}

.jenerik-ic {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bos-5);
  padding-inline: var(--kenar);
  text-align: center;
}

.jenerik-ust {
  font-size: var(--ol-3xs);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--vurgu);
  opacity: 0;
  text-indent: 0.5em; /* letter-spacing sağ boşluğunu dengeler */
}

.jenerik-ad {
  font-family: var(--yazi-baslik);
  font-size: clamp(2.2rem, 1rem + 6.4vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.28em;
}
.jenerik-ad .kelime { display: inline-flex; overflow: hidden; padding-block: 0.06em; }
.jenerik-ad .harf { display: inline-block; transform: translateY(110%); }

.jenerik-cizgi {
  width: min(28rem, 62vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--vurgu), transparent);
  transform: scaleX(0);
}

.jenerik-alt {
  font-size: var(--ol-2xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--metin-sonuk);
  opacity: 0;
  text-indent: 0.34em;
}

.jenerik-atla {
  position: absolute;
  inset-block-end: clamp(1.5rem, 4vw, 3rem);
  inset-inline-end: var(--kenar);
  z-index: 5;
  background: none;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  color: var(--metin-sonuk);
  padding: var(--bos-3) var(--bos-5);
  font-size: var(--ol-3xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli);
}
.jenerik-atla:hover { color: var(--metin); border-color: var(--vurgu); }

/* perde açıkken sayfa kaydırılmasın */
body[data-jenerik="oynuyor"] { overflow: hidden; }

/* ---------- girişte sağdan büyüyen fotoğraf ----------
   Kenarları maskeyle eritilir; dikdörtgen sınırı hiç görünmez.
   Perdenin (z-index 2) üstünde, metnin (4) altında durur. */
.jenerik-foto {
  position: absolute;
  z-index: 3;
  inset-block: -8%;
  inset-inline-end: -5%;
  width: min(54vw, 48rem);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.jenerik-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 24%;
  transform: scale(1.02);
  transform-origin: 62% 45%;
  /* metin okunakli kalsin diye gorsel bilincli olarak koyu:
     opaklik yerine parlaklik dusuruluyor, boylece kenar erimesi bozulmuyor */
  filter: saturate(0.34) contrast(1.10) brightness(0.52);
  /* TEK maske katmani. Iki katmani mask-composite ile birlestirmek
     Chrome'da -webkit-mask-composite ile catisip maskeyi bosaltiyordu
     (olculdu: gorsel hic gorunmedi). Elips zaten her kenari eritiyor. */
  -webkit-mask-image: radial-gradient(ellipse 56% 64% at 68% 42%,
      #000 0%, rgb(0 0 0 / 0.82) 28%, rgb(0 0 0 / 0.34) 54%, transparent 76%);
  mask-image: radial-gradient(ellipse 56% 64% at 68% 42%,
      #000 0%, rgb(0 0 0 / 0.82) 28%, rgb(0 0 0 / 0.34) 54%, transparent 76%);
}

@media (max-width: 48rem) {
  .jenerik-foto { inset-inline-end: -18%; width: 118vw; opacity: 0; }
}

/* Açık temada perde krem; koyulaştırılmış fotoğraf orada leke gibi durur.
   Aynı yumuşama, ters yönde parlaklık. */
:root[data-tema="acik"] .jenerik-foto img {
  filter: saturate(0.30) contrast(0.98) brightness(1.12);
}