/* bolum-film.css — kaydırmayla geçişli video bölümü
   Uzun bir bölüm; içinde ekran yüksekliğinde yapışkan bir sahne.
   Kaydırdıkça klipler birbirine erir ve yavaşça büyür.

   Kaynak videolar DİKEY (Instagram 720x1280). Yatay sahneye cover ile
   basınca karenin %65'i kayboluyor ve aşırı yakın çekim kalıyordu
   (ölçüldü). Bu yüzden: bulanık poster tam ekran fon + kadrajın tamamını
   gösteren dikey panel. */

.film {
  position: relative;
  height: calc(var(--klip-adedi, 5) * 88svh + 100svh);

  /* Bu bölüm İKİ TEMADA DA koyu. Sinematik bant koyu olur; ayrıca açık
     zeminde videonun üstündeki metin okunmuyordu.
     Değerler matbu paletiyle hizalandı: eski lacivert/altın kalıntısı,
     siyah-kırmızı sayfanın ortasında mavi bir bant bırakıyordu. */
  --film-zemin: #0C0B09;
  --film-metin: #F4F1EA;
  --film-vurgu: #F5675A;
  background: var(--film-zemin);
  color: var(--film-metin);
}

.film-sahne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* --- klipler --- */
.film-kat { position: absolute; inset: 0; z-index: 0; }

.film-oge {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}

/* tam ekran bulanık fon: posterden, ucuz ve pürüzsüz */
.film-fon {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(38px) saturate(0.5) brightness(0.34);
  transform: scale(var(--olcek, 1.05));
  transform-origin: center;
  will-change: transform;
}

/* asıl kadraj: dikey panel, sağ tarafta */
.film-panel {
  position: absolute;
  inset-block: 0;
  /* Saga YANASIK ama yapisik degil; sol kenar serbest birakilinca kutu
     iceriginin genisligine buzusur ve video gercekten saga oturur.
     Onceki halde sol kenar da 0 idi, video sahnenin ortasina dusuyordu. */
  inset-inline-end: max(var(--kenar), 4.5vw);
  inset-inline-start: auto;
  display: grid;
  place-items: center;
}
/* Sarmal: sesi ac dugmesinin konum dayanagi. */
.film-panel-ic { position: relative; display: block; line-height: 0; }
.film-panel video {
  width: auto;
  height: min(74svh, 46rem);
  max-width: 42vw;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--kose);
  border: 2px solid var(--film-vurgu);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
  filter: saturate(0.82) contrast(1.04) brightness(0.86);
  transform: scale(var(--olcek-panel, 1));
  transform-origin: center;
  will-change: transform;
}

/* --- üstteki perde: kenarları zemine karıştırır --- */
.film-sahne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--film-zemin) 0%, transparent 18%,
                    transparent 74%, var(--film-zemin) 100%),
    linear-gradient(to right, var(--film-zemin) 4%,
                    rgb(6 16 32 / 0.55) 42%, transparent 70%);
}

/* --- yazı --- */
.film-yazi {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  translate: 0 -50%;
  /* Video saga yanastigi icin metin blogu da bir tik saga alindi ve
     genisletildi; onceki halde ikisinin arasinda 1009px bos kaliyordu. */
  inset-inline-start: max(var(--kenar), 9vw);
  max-width: min(38ch, 32vw);
  pointer-events: none;
}
/* Baslik en fazla dort satir; uzunsa kirpilir. */
.film-baslik {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.film-alt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.film-etiket {
  font-size: var(--ol-3xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--film-vurgu);
  margin-bottom: var(--bos-4);
  display: flex; align-items: center; gap: var(--bos-3);
}
.film-etiket::before {
  content: ""; width: clamp(1.5rem, 4vw, 3rem); height: 1px;
  background: currentColor; opacity: 0.7;
}
.film-baslik {
  font-family: var(--yazi-baslik);
  font-weight: 400;
  /* Baslik BUYUK olacak ama EKRANA SIGACAK. Sabit punto ikisini birden
     veremiyor: --ol-2xl uzun baslikta sahneyi tasiriyordu, --ol-l ise
     patronun dedigi gibi fazla kucuktu. Cozum: punto baslik UZUNLUGUNA
     gore olcekleniyor (film.js --film-olcek yaziyor), taban buyuk.
     Ayrica yukseklik sahneye gore sinirli: 1 satir ~1.06em, en cok 5. */
  font-size: calc(clamp(1.9rem, 1.1rem + 2.6vw, 3.9rem) * var(--film-olcek, 1));
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  min-height: 1em;
  color: var(--film-metin);
  text-wrap: balance;
}
.film-baslik { overflow-wrap: anywhere; }
.film-baslik .kelime { max-width: 100%; 
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 520ms cubic-bezier(0.22,0.61,0.36,1),
              transform 520ms cubic-bezier(0.22,0.61,0.36,1);
}
.film-baslik .kelime[data-gorunur="evet"] { opacity: 1; transform: none; }

.film-alt {
  margin-top: var(--bos-5);
  font-size: var(--ol-xs);
  color: rgb(242 239 233 / 0.66);
  min-height: 1.5em;
}

/* --- ilerleme çubuğu --- */
.film-ilerleme {
  position: absolute;
  z-index: 3;
  inset-block-end: clamp(1.5rem, 4vw, 3rem);
  inset-inline: max(var(--kenar), 6vw);
  display: flex;
  gap: var(--bos-3);
  pointer-events: none;
}
.film-ilerleme span {
  flex: 1; height: 2px;
  background: rgb(242 239 233 / 0.18);
  overflow: hidden;
}
.film-ilerleme span::after {
  content: ""; display: block; height: 100%;
  background: var(--film-vurgu);
  transform: scaleX(var(--dolu, 0));
  transform-origin: left;
}

/* --- dar ekran: panel ortada, yazı altta --- */
@media (max-width: 60rem) {
  .film-panel { inset-inline: 0; align-items: start; padding-top: 8svh; }
  .film-panel video { height: min(56svh, 34rem); max-width: 78vw; }
  .film-yazi {
    inset-block-start: auto;
    inset-block-end: 14svh;
    translate: none;
    inset-inline: var(--kenar);
    max-width: none;
    text-align: center;
  }
  .film-etiket { justify-content: center; }
  .film-sahne::after {
    background:
      linear-gradient(to bottom, var(--film-zemin) 0%, transparent 16%,
                      rgb(6 16 32 / 0.72) 62%, var(--film-zemin) 100%);
  }
}

/* Betik çalışmazsa bölüm boş kalmasın */
.js-var .film-oge:first-child { opacity: 0; }
.film-oge:first-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .film { height: auto; padding-block: var(--bolum-bos); }
  .film-sahne { position: static; height: auto; }
  .film-oge { position: static; opacity: 1; }
  .film-fon { display: none; }
  .film-panel { position: static; display: block; }
  .film-panel video { height: auto; max-width: min(100%, 22rem); margin-inline: auto; }
  .film-yazi { position: static; translate: none; max-width: none; margin-bottom: var(--bos-6); }
  .film-sahne::after { display: none; }
  .film-ilerleme { display: none; }
}

/* Kâğıtta kaydırma yoktur: film.js her klibe SATIR İÇİ `opacity` yazdığı için
   yazdırma görünümünde 5 klibin 4'ü opacity:0 kalıyor, üstelik bölüm 5400px
   yüksekliğinde. Ölçüldü — index.pdf'in 11 sayfasının ~3,5'i tamamen boş
   lacivert çıkıyordu. Bölüm, az-hareket düzeniyle aynı şekilde düzleştirilir.
   `!important` şart: satır içi stiller başka türlü ezilemez. */
@media print {
  .film { height: auto !important; padding-block: var(--bolum-bos); }
  .film-sahne { position: static !important; height: auto !important; overflow: visible; }
  .film-oge { position: static !important; opacity: 1 !important; }
  .film-fon { display: none !important; }
  .film-panel { position: static !important; display: block; }
  .film-panel video {
    height: auto !important;
    max-width: min(100%, 18rem);
    margin-inline: auto;
  }
  .film-yazi {
    position: static !important;
    translate: none !important;
    max-width: none;
    margin-bottom: var(--bos-6);
  }
  .film-sahne::after { display: none !important; }
  .film-ilerleme { display: none !important; }
}


/* ---------- sesi aç düğmesi ----------
   Önceki hal sayfa başında bir uyarı cümlesiydi ("tıklayınca ses açılır").
   Uyarı yerine eylem: düğme videonun kendi üstünde duruyor. */
/* Dugme videonun kendi sarmalina gore konumlanir. Onceki hal
   `.film-panel { position: relative }` idi ve panelin position:absolute
   kuralini EZIYORDU: panel yuksekligini kaybedip sahnenin ustune
   yapisiyordu (olculdu: video ustten 13px, alttan 357px). */
.ses-dugme {
  position: absolute;
  inset-block-start: var(--bos-4);
  inset-inline-end: var(--bos-4);
  z-index: 4;
  display: inline-flex; align-items: center; gap: var(--bos-2);
  padding: var(--bos-2) var(--bos-4);
  font-size: var(--ol-3xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--film-metin);
  background: rgb(0 0 0 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--gecis-hizli), border-color var(--gecis-hizli);
}
.ses-dugme:hover, .ses-dugme:focus-visible {
  background: rgb(0 0 0 / 0.78);
  border-color: var(--film-vurgu);
}
.ses-dugme[aria-pressed="true"] { border-color: var(--film-vurgu); color: var(--film-vurgu); }