/* İletişim Akademisi · YAYINDA prototipi
   22.10: "fazla karanlık" geri bildirimiyle açık zemine geçildi (logo beyaz zemin için çizilmiş). Zemin açık arduvaz grisi,
   yazı arduvaz (#344750), ışık mercan (#df6755). Mercan yalnız "yanan" şeylerde: lamba, ana ışık, canlı kamera, alt yazı bandı.
   Köşeler logodaki çapraz köşe kuralıyla: sol üst ve sağ alt yuvarlak. */

:root {
  --zemin: #eef1f3;
  --zemin-2: #e3e9ec;
  --yazi: #344750;
  --arduvaz: #344750;
  --arduvaz-2: #24323a;
  --mercan: #df6755;
  --beyaz: #f7f6f3;
  --soluk: rgba(52, 71, 80, .7);
  --cizgi: rgba(52, 71, 80, .14);
  --kose: 14px 0 14px 0;
  --vurgu: #b5493b;          /* küçük yazıda mercan: açık zeminde 4,6:1 */
}
* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 450 17px/1.5 Urbanist, system-ui, sans-serif; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; }

/* ---------- Üst çubuk ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px clamp(18px, 4vw, 56px); }
.bar__logo { display: grid; }
.bar__logo img { grid-area: 1 / 1; height: 36px; width: auto; transition: opacity .35s; }
.bar__logo-beyaz { opacity: 0; }
.bar__nav { transition: color .35s; }
/* açılışta koyu fotoğrafın üstü: beyaz logo, açık menü, koyu üst gradyan */
.ustte .bar__logo-renkli { opacity: 0; }
.ustte .bar__logo-beyaz { opacity: 1; }
.ustte .bar__nav { color: #fff; }
.ustte .bar::before { background: linear-gradient(rgba(31, 43, 50, .45), rgba(31, 43, 50, 0)); }
.bar__nav { justify-self: end; display: flex; gap: 26px; align-items: center; font-size: 15px; font-weight: 550; }
.bar__nav a:not(.bar__cta) { opacity: .8; transition: opacity .3s; }
.bar__nav a:hover { opacity: 1; }
.bar__cta { height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: var(--kose); background: var(--arduvaz); color: #fff; font-weight: 650;
  transition: background .4s, opacity .35s, translate .45s cubic-bezier(.2, .8, .2, 1), visibility .35s; }
/* 25.10: mercan üst çubukta yalnız lambada. Açılışta fotoğrafın üstünde iki mercan "Başvur" vardı (çubukta ve yazının altında):
   çubuktaki gizlenir, açılış yazısı kendi Başvur'uyla sönerken çubuğa arduvaz olarak iner (yayinda.js "ustte"). Yer tutar, çubuk kaymaz. */
.ustte .bar__cta { opacity: 0; translate: 0 -8px; visibility: hidden; }

/* YAYINDA lambası */
.lamba { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 8px 0 8px 0;
  border: 1.5px solid rgba(223, 103, 85, .45); color: rgba(52, 71, 80, .4);
  font-size: 12px; font-weight: 750; letter-spacing: .22em; text-transform: uppercase;
  transition: background .12s, color .12s, box-shadow .3s; }
/* 24.10: geniş parıltı "neon" duruyordu; yanınca yalnız dar, yumuşak bir ışık */
.lamba.is-acik { background: var(--mercan); border-color: var(--mercan); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px -5px rgba(223, 103, 85, .55); text-shadow: none; }
.lamba--buyuk { height: 44px; padding: 0 22px; font-size: 15px; }

/* ---------- Açılış: stüdyo ---------- */
.studyo { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate;
  --parlak: .08; --isik: 0; --lx: 64%; --ly: 38%; }
/* Vitrin: kurslardan temsilî siyah-beyaz fotoğraflar (Codex ile üretildi, künyede "Temsilî görsel"). Sabit katman: kaydırınca yerinde söner,
   arkadan 3B sahnenin açık fonu çıkar. Kişiler karenin ortasında; solda yazı için koyu arduvaz gradyan, sağda işaretin altında açık bir hale. */
.vitrin { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--arduvaz-2); opacity: var(--vitrin, 1); }
/* 24.10: kayan resimde filtre her karede yeniden hesaplanıyor, akış takılıyordu. Karanlık artık üstteki siyah örtüde (::before);
   resim yalnız saydamlık ve ölçekle oynar (ekran kartında). Kesme yerine 0,8 sn çözünme; yaklaşma, karartma bitince sıfırlanır. */
.vitrin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--odak, 50% 50%); opacity: 0;
  will-change: opacity, scale; transform-origin: var(--yon, 50% 40%); transition: opacity .8s ease, scale 0s linear .8s; }
/* 25.10: yavaş yaklaşma belirgin ama sakin (%7,5 / 10 sn, kişilere doğru); açılışta ilk ışık yanana dek kamera durur (isik-bekle) */
.vitrin img.is-canli { opacity: 1; scale: 1.075; transition: opacity .8s ease, scale 10s linear; }
.isik-bekle .vitrin img { scale: 1 !important; transition: opacity .8s ease !important; }
.vitrin::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #000; opacity: calc(1 - var(--parlak) / .9); }
.vitrin::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(0deg, rgba(31, 43, 50, .86) 0, rgba(31, 43, 50, .62) 30%, rgba(31, 43, 50, 0) 58%),
    linear-gradient(90deg, rgba(31, 43, 50, .55) 0, rgba(31, 43, 50, .25) 30%, rgba(31, 43, 50, 0) 50%),
    linear-gradient(180deg, rgba(31, 43, 50, .5) 0, rgba(31, 43, 50, 0) 17%); }
.vitrin__kunye { position: absolute; z-index: 2; right: clamp(18px, 4vw, 56px); bottom: 22px; max-width: 60vw; font-size: 13px; font-weight: 550;
  color: rgba(247, 246, 243, .82); text-shadow: 0 1px 10px rgba(20, 28, 33, .45); opacity: var(--vitrin, 1); }
/* 25.10 açılış (yayinda.js ac): ışık önce kişilerin üstünde toplanır (havuzun ortası açık, kenarı karanlık), sonra havuz büyüyerek
   sönünce bütün kareye yayılır. Yalnız ölçek ve saydamlık: ekran kartında, her karede yeniden boyama yok.
   İşaretin arkasındaki açık hale de ışıkla gelir (önceden karanlıkta gri bir leke gibi duruyordu). */
.vitrin { --havuz-yer: 36% 40%; }
.vitrin__havuz, .vitrin__hale { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
.vitrin__havuz { z-index: 1; opacity: var(--havuz, 0); will-change: opacity, transform;
  transform: scale(var(--havuz-olcek, 1)); transform-origin: var(--havuz-yer);
  background: radial-gradient(circle at var(--havuz-yer), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 9vmax, rgba(0, 0, 0, .9) 46vmax); }
.vitrin__hale { z-index: 3; opacity: var(--isik, 0);
  background: radial-gradient(circle at var(--isaret-x, 74%) var(--isaret-y, 52%), rgba(238, 241, 243, .5) 0, rgba(238, 241, 243, .26) calc(var(--isaret-r, 16vw) * .55), rgba(238, 241, 243, 0) var(--isaret-r, 16vw)); }
/* ilk karede üst çubuk ve künye yok (index.html başındaki küçük betik "aciliyor" der); yayın grafikleri gibi en son gelirler */
.aciliyor .bar, .aciliyor .vitrin__kunye { opacity: 0; }
.aciliyor:not(.uc-boyut) .dugme { opacity: 0; }   /* işaret 3B sahnenin yerine oturmadan görünmesin (3B yoksa açılış sonunda gelir) */
/* ad: her satır kendi maskesinden yükselir; pay İ'nin noktası ve ş'nin çengeli kesilmesin diye */
.studyo__baslik .satir { display: block; overflow: hidden; padding: .16em .08em .14em 0; margin: -.16em -.08em -.14em 0; }
.studyo__baslik .satir > span { display: inline-block; }

/* logonun işareti: ⏻ düğmesi */
.dugme { position: absolute; z-index: 2; right: clamp(24px, 9vw, 160px); top: 50%; translate: 0 -54%;
  width: min(34vh, 30vw); aspect-ratio: 340 / 397; padding: 0; border: 0; background: none; cursor: pointer; }
.dugme__halka, .dugme__i { position: absolute; inset: 0; background: center / contain no-repeat; transition: opacity .4s, filter .4s; }
.dugme__halka { background-image: url(img/halka-renkli.png); opacity: var(--halka, .22); }
.dugme__i { background-image: url(img/i.png); opacity: var(--i, .3); }   /* 24.10: etrafındaki mercan parıltı "neon" bulundu; yanma yalnız belirmeyle */
.dugme:focus-visible { outline: 2px solid var(--mercan); outline-offset: 10px; border-radius: 20px; }

/* masaüstünde başlık solda, işaretle aynı yükseklikte; telefonda altta (aşağıda) */
/* yazı haber sitelerindeki gibi sol altta: fotoğraftaki yüzler karenin üst-ortasında kalır */
.studyo__metin { position: absolute; z-index: 2; left: clamp(18px, 6vw, 96px); bottom: clamp(56px, 10vh, 112px); max-width: min(40rem, 40vw); color: var(--beyaz); }
/* ad logodaki gibi iki satır: "İletişim" mercan, "Akademisi" açık */
.studyo__baslik { font-size: clamp(56px, 7.2vw, 148px); font-weight: 750; line-height: .92; letter-spacing: -.045em; }
.studyo__ilk { display: block; color: var(--mercan); }
.studyo__alt { margin-top: clamp(20px, 2vw, 32px); max-width: 38ch; font-size: clamp(17px, 1.35vw, 21px); color: rgba(247, 246, 243, .86); }
.studyo__eylem { display: flex; gap: 12px; margin-top: 28px; }
.hap { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: var(--kose);
  border: 1.5px solid rgba(52, 71, 80, .3); font-weight: 650; transition: background .3s, border-color .3s; }
.hap:hover { border-color: var(--yazi); }
.hap--mercan { background: var(--mercan); border-color: var(--mercan); color: #fff; }
.hap--mercan:hover { background: #e8775f; border-color: #e8775f; }
.studyo .hap:not(.hap--mercan) { border-color: rgba(247, 246, 243, .5); color: #fff; }
.studyo .hap:not(.hap--mercan):hover { border-color: #fff; }

/* ---------- Reji: kamera kamera kurslar ---------- */
/* 25.10: kaydırmaya bağlı kamera geçişi ve zaman kodu kalktı ("burada kaydırmaya gerek yok, direk aşağı insin").
   Bölüm ekrana oturunca ~80vh kaydırma boyunca durur ("hiç kalmıyor"), sonra yayın akışı üstüne kayar (akis: margin-top -100svh).
   Kamera tıklayınca/üstüne gelince değişir. */
.reji { position: relative; height: 280svh; }
.reji__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 18px;
  padding: 96px clamp(18px, 4vw, 56px) 28px; }
.reji__ust { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.reji__baslik { font-size: clamp(30px, 3.2vw, 48px); font-weight: 700; letter-spacing: -.03em; }
.pgm { position: relative; min-height: 0; height: 100%; aspect-ratio: 16 / 9; max-width: 100%; justify-self: center;
  border-radius: 12px 0 12px 0; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--cizgi), 0 40px 80px -40px rgba(52, 71, 80, .55); }
/* 25.10: canlı kamera yavaşça kişilere yaklaşır (önceden uzaklaşıyordu); reji ekrana gelmeden başlamaz (yayinda.js is-gor) */
.pgm__kat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: 50% 40%; }
.pgm__kat img.is-canli { opacity: 1; transform: scale(1.07); }
.reji:not(.is-gor) .pgm__kat img { transform: none; }
.pgm::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 40%); }
.pgm__canli { position: absolute; z-index: 2; left: 18px; top: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.pgm__canli i { width: 10px; height: 10px; border-radius: 50%; background: var(--mercan); box-shadow: 0 0 12px var(--mercan); }
/* alt yazı bandı (KJ) */
.kj { position: absolute; z-index: 2; left: 4%; bottom: 8%; max-width: 70%; }
/* 24.10: sert silme yerine yavaş açılan maske + hafif yükselme + belirme; çıkışı kısa ve sessiz */
.kj p { width: fit-content; opacity: 0; transform: translateY(6px); clip-path: inset(0 100% 0 0);
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1), clip-path .3s cubic-bezier(.22, 1, .36, 1); }
.kj.is-acik p { opacity: 1; transform: none; clip-path: inset(0 0 0 0);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), clip-path 1.05s cubic-bezier(.22, 1, .36, 1); }
.kj.is-acik .kj__alt { transition-delay: .14s; }
.kj__ust { padding: 9px 18px 10px; background: var(--mercan); color: #fff; font-size: clamp(20px, 2.2vw, 32px); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; border-radius: 10px 0 0 0; }
.kj__alt { padding: 8px 18px 9px; background: rgba(52, 71, 80, .94); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.4; color: #fff; border-radius: 0 0 10px 0; }
/* çoklu görüntü: altı kamera */
.kameralar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kamera { position: relative; }
.kamera button { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.kamera button:focus-visible figure { box-shadow: 0 0 0 2px var(--yazi); }
.kamera figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px 0 8px 0; background: #000; box-shadow: 0 0 0 1px var(--cizgi); }
.kamera img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .3s; }
.kamera p { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kamera p::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(52, 71, 80, .22); transition: background .15s, box-shadow .15s; }
.kamera:hover img { opacity: .8; }
.kamera.is-canli img { opacity: 1; }
.kamera.is-canli figure { box-shadow: 0 0 0 2px var(--mercan); }
.kamera.is-canli p { color: var(--yazi); }
.kamera.is-canli p::before { background: var(--mercan); box-shadow: 0 0 10px var(--mercan); }

/* ---------- Yayın akışı ---------- */
.akis { padding: 140px clamp(18px, 6vw, 96px) 80px; }
.akis__baslik { font-size: clamp(40px, 6vw, 96px); font-weight: 750; letter-spacing: -.04em; margin-bottom: 40px; }
.akis__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi); }
.akis__satir { position: relative; display: grid; grid-template-columns: minmax(130px, 1fr) 4fr auto; gap: 12px 32px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--cizgi); }
.akis__gun { font-size: 18px; font-weight: 650; }
.akis__gun small { display: block; font-size: 14px; font-weight: 450; color: var(--soluk); }
.akis__ad { font-size: clamp(24px, 2.6vw, 38px); font-weight: 650; letter-spacing: -.025em; line-height: 1.1; transition: color .3s; }
.akis__ad small { display: block; margin-top: 6px; font-size: 15px; font-weight: 450; color: var(--soluk); letter-spacing: 0; }
.akis__ucret { font-size: 16px; color: var(--soluk); text-align: right; }
.akis__ucret b { color: var(--yazi); font-weight: 650; }
.akis__ucret .bedava { color: var(--vurgu); }
.akis__kare { position: absolute; right: 18%; top: 50%; width: 260px; aspect-ratio: 16 / 9; translate: 0 -50%; border-radius: 10px 0 10px 0; overflow: hidden;
  opacity: 0; scale: .92; transition: opacity .35s, scale .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.akis__kare img { width: 100%; height: 100%; object-fit: cover; }
.akis__satir:hover .akis__kare { opacity: 1; scale: 1; }
.akis__satir:hover .akis__ad { color: var(--vurgu); }

/* ---------- Son ---------- */
.son { padding: 120px clamp(18px, 6vw, 96px) 120px; text-align: center; display: grid; justify-items: center; gap: 22px;
  background: radial-gradient(circle at 50% 0%, rgba(223, 103, 85, .22), transparent 55%); }
.son__baslik { font-size: clamp(48px, 8vw, 128px); font-weight: 750; letter-spacing: -.045em; line-height: .95; }
.son__alt { max-width: 44ch; color: var(--soluk); font-size: 19px; }
.kunye { margin-top: 40px; font-size: 13px; color: rgba(52, 71, 80, .5); }

@media (min-width: 861px) and (max-height: 760px) {
  .set__panel { gap: 10px; padding: 12px 12px 10px; }
  .kart a { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; padding: 8px 10px 8px 8px; }
  .kart__foto { width: 76px; }
  .kart__ad { font-size: 17px; }
  .set__kj .kj__ust { font-size: 20px; }
}
@media (max-width: 860px) {
  .bar { grid-template-columns: auto 1fr auto; }
  .bar__nav a:not(.bar__cta) { display: none; }
  .lamba { justify-self: center; }
  .kameralar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }   /* altısı da: kaydırma yok, ekranlar dokunarak seçiliyor */
  .pgm { height: auto; width: 100%; align-self: center; }
  .akis__satir { grid-template-columns: 1fr; }
  .akis__ucret { text-align: left; }
  .akis__kare { display: none; }
}
/* açılışın telefon düzeni yalnız dikeyde; yatay telefonda masaüstü düzeni (işaret sağda) + "Yatay telefon" bloğu */
@media (max-width: 860px) and (orientation: portrait) {
  .dugme { right: 50%; translate: 50% -82%; width: 40vw; }
  .studyo__metin { top: auto; bottom: clamp(52px, 9vh, 88px); translate: none; right: 18px; max-width: none; }
  .vitrin img { top: var(--kay-tel, 8%); object-position: var(--odak-tel, 50% 50%);   /* yüzler küçük işaretin altında kalsın (yayinda.js VITRIN) */
    -webkit-mask-image: linear-gradient(transparent 0, #000 14%); mask-image: linear-gradient(transparent 0, #000 14%); }   /* aşağı itilen fotoğrafın üst kenarı çizgi gibi görünmesin */
  .vitrin { --havuz-yer: 50% 46%; }
  .vitrin__hale { background: radial-gradient(circle at var(--isaret-x, 50%) var(--isaret-y, 26%), rgba(238, 241, 243, .5) 0, rgba(238, 241, 243, .26) calc(var(--isaret-r, 30vw) * .55), rgba(238, 241, 243, 0) var(--isaret-r, 30vw)); }
  .vitrin::after { background:
    linear-gradient(0deg, rgba(31, 43, 50, .92) 0, rgba(31, 43, 50, .72) 34%, rgba(31, 43, 50, 0) 60%),
    linear-gradient(180deg, rgba(31, 43, 50, .5) 0, rgba(31, 43, 50, 0) 16%); }
  .vitrin__kunye { left: 18px; right: 18px; bottom: 16px; max-width: none; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studyo { --parlak: .9; --isik: 1; }
  .kj p { clip-path: none !important; transition: none !important; }
  .pgm__kat img, .pgm__kat img.is-canli { transition: none !important; transform: none; }
  .vitrin img.is-canli { scale: 1; }
}

/* ---------- 3B sahne ---------- */
.sahne3b { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; opacity: 0; transition: opacity .8s; }
.uc-boyut .sahne3b { opacity: 1; }
main, .bar { position: relative; z-index: 1; }
.bar { position: fixed; z-index: 20; }
.reji, .akis, .son { background-color: var(--zemin); }
/* 3B'de işaret önce düz PNG'dir; düğmenin yeri ve boyu 3B işaretin ekrandaki yerine eşitlenir (sahne3b.js), kaydırınca söner ve 3B kalınlaşır */
.uc-boyut .dugme { position: fixed; right: auto; translate: none; transition: opacity .15s; }   /* sabit: kayarken açılış bölümünün kenarında kesilmesin */
.set { display: none; }
.uc-boyut .set { display: block; position: relative; height: 620vh; }
.set__pin { position: sticky; top: 0; height: 100svh; pointer-events: none; }
.set__pin > * { pointer-events: auto; }
.set__sayac { font-size: 15px; color: rgba(52, 71, 80, .85); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.set__sayac b { color: var(--vurgu); font-weight: 700; margin-right: 6px; }
/* 24.10: program numarası yuvarlanarak değişir; yanında beş çizgi, içinde bulunulan kaydırdıkça dolar (--ilerleme: sahne3b.js) */
.set__no { display: inline-grid; height: 1.3em; line-height: 1.3; overflow: hidden; vertical-align: bottom; }
.set__no i { grid-area: 1 / 1; font-style: normal; animation: noGir .35s cubic-bezier(.2, .8, .2, 1) both; }
.set__no i.eski { animation-name: noCik; }
@keyframes noGir { from { translate: 0 calc(var(--yon, 1) * 100%); } }
@keyframes noCik { to { translate: 0 calc(var(--yon, 1) * -100%); } }
.set__adim { display: inline-flex; gap: 4px; margin-left: 12px; vertical-align: middle; }
.set__adim i { width: 18px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(52, 71, 80, .16); }
.set__adim i::after { content: ""; display: block; height: 100%; background: var(--mercan); transform-origin: left;
  transform: scaleX(clamp(0, calc(var(--ilerleme, 0) - var(--k)), 1)); }
@media (max-width: 860px) {
}

/* ---------- Perde: her bölüm bir öncekinin üstüne kayar (Saff'taki deste, bölüm ölçeğinde) ----------
   Geride kalan küçülüp kararır (yayinda.js "Perde"). Kayan bölümün sol üst köşesi logodaki çapraz köşe gibi yuvarlak. */
.reji, .akis, .son { border-radius: 44px 0 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 -40px 80px -30px rgba(52, 71, 80, .35); }
.reji { z-index: 2; }
.akis { position: sticky; z-index: 3; margin-top: -100svh; }   /* top: yayinda.js, alt kenarı ekrana oturunca yapışır */
.son { position: relative; z-index: 4; min-height: 100svh; align-content: center; }
.uc-boyut .set { height: 860vh; }   /* 24.10: istasyon başına ~120vh: panel okunmadan bir sonraki programa geçmesin */
.uc-boyut .reji { margin-top: -100svh; }
.sahne3b, .set__pin, .reji__pin, .akis { transform-origin: 50% 30%; }
@media (max-width: 860px) { .reji, .akis, .son { border-radius: 28px 0 0 0; } }
/* kayan bölümlerin yazısı logonun arkasından geçerken karışmasın */
.bar::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(238, 241, 243, .85), rgba(238, 241, 243, 0));
  opacity: var(--bar-isik, 1); }   /* stüdyo karanlıkken açık şerit kalmasın */

/* ---------- Set paneli: programın kursları ----------
   Masaüstünde sağ sütun (sahne sola kayar), telefonda altta yana kayan şerit (sahne yukarı kayar). */
.set__panel { position: absolute; right: clamp(18px, 4vw, 64px); top: 54%; translate: 0 -50%; width: min(480px, 36vw); display: grid; gap: 14px;
  max-height: calc(100svh - 128px); overflow-y: auto; scrollbar-width: thin;   /* kısa ekranda panel üst çubuğun altına ve ekran dışına taşmasın */
  overscroll-behavior: contain;   /* panelin sonuna gelince kaydırma sayfaya geçmesin */
  padding: 16px 16px 14px; border-radius: 18px 0 18px 0; background: rgba(238, 241, 243, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(52, 71, 80, .05); }   /* kelimenin üstünde sakin bir zemin: yazı okunsun */
.set__panel.is-bos { opacity: 0; pointer-events: none; }   /* istasyon yokken boş kutu görünmesin */
.set__panel { transition: opacity .35s; }
/* 25.10: fareyle perspektif: panel 3B sahneyle aynı dünyada bir kart gibi eğilir ve hafifçe kayar (sahne3b.js --ex, --ey, --px, --py) */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .set__panel { transform: perspective(1400px) translate3d(var(--px, 0px), var(--py, 0px), 0) rotateX(var(--ex, 0deg)) rotateY(var(--ey, 0deg)); }
}
.set__kj { position: relative; left: auto; bottom: auto; max-width: none; margin-bottom: 4px; }
.set__kj .kj__alt { max-width: 40ch; }
/* 25.10: panelde program adı bandı mercan değil koyu arduvaz; açıklama açık zeminde (rejideki canlı alt yazı bandı mercan kalır) */
.set__kj .kj__ust { background: var(--arduvaz-2); }
.set__kj .kj__alt { background: rgba(52, 71, 80, .08); color: var(--yazi); }
.set__kartlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kart a { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 14px 0 14px 0;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(52, 71, 80, .06), 0 18px 40px -26px rgba(52, 71, 80, .55); transition: translate .3s, box-shadow .3s; }
.kart a:hover { translate: -4px 0; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(223, 103, 85, .35), 0 22px 44px -24px rgba(52, 71, 80, .6); }
.kart__foto { display: block; width: 104px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px 0 8px 0; }
.kart__foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: scale .5s cubic-bezier(.2, .8, .2, 1); }
.kart a:hover .kart__foto img { scale: 1.04; }
.kart__tarih { font-size: 14px; font-weight: 650; color: var(--yazi); }   /* 25.10: tarih ve Ücretsiz nötr; mercan panelde yalnız ilerleme çizgisinde */
.kart__ad { margin: 2px 0 0; font-size: 19px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.kart__alt { margin-top: 4px; font-size: 14.5px; color: rgba(52, 71, 80, .84); }
.kart__ucret { align-self: start; padding: 4px 9px; border-radius: 6px 0 6px 0; background: var(--zemin-2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.kart__ucret.bedava { background: var(--zemin-2); color: inherit; }
/* sıradaki programa geçince kartlar sağdan sırayla gelir */
.kart { opacity: 0; translate: 48px 0; transition: opacity .45s, translate .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--s) * 80ms + 140ms); }
.set__panel.is-acik .kart { opacity: 1; translate: 0 0; }
/* fotoğraf soldan sağa açılır, içinde hafifçe geri çekilir (yalnız giriş; sonra üstüne gelince yaklaşır) */
.set__panel.is-acik .kart__foto { animation: fotoAc .45s cubic-bezier(.65, 0, .35, 1) calc(var(--s) * 60ms + 200ms) backwards; }
.set__panel.is-acik .kart__foto img { animation: fotoYaklas .7s cubic-bezier(.2, .8, .2, 1) calc(var(--s) * 60ms + 200ms) backwards; }
@keyframes fotoAc { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fotoYaklas { from { scale: 1.08; } }
/* program değişince eski kartlar sola çekilip söner, alt yazı bandı sağa silinir; sonra yenileri gelir (sahne3b.js istasyonYaz) */
.set__panel.is-gidiyor .kart { opacity: 0; translate: -12px 0; transition: opacity .16s, translate .18s cubic-bezier(.5, 0, .75, 0); }
.set__panel.is-gidiyor .kj p { clip-path: inset(0 0 0 100%); transition: clip-path .18s cubic-bezier(.5, 0, .75, 0); }
.set__tumu { justify-self: start; margin-top: 4px; padding-bottom: 2px; font-size: 15px; font-weight: 650; border-bottom: 1.5px solid var(--mercan); }
@media (max-width: 860px) and (orientation: portrait) {   /* yatay telefonda panel masaüstündeki gibi sağda (sahne3b.js telefon()) */
  .set__panel { left: 18px; right: 0; top: auto; bottom: 20px; translate: none; width: auto; gap: 10px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .set__sayac { position: fixed; top: 86px; right: 18px; }
  .set__kj { margin-right: 18px; }
  /* 25.10: panel zemini telefonda yok; uçuşan logo parçaları açıklamanın arkasından geçerken yazı okunmuyordu: masaüstü paneli gibi buzlu */
  .set__kj .kj__alt { background: rgba(238, 241, 243, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(52, 71, 80, .06); }
  .set__kartlar { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 18px 14px 0; scrollbar-width: none; }
  .set__kartlar::-webkit-scrollbar { display: none; }
  .kart { scroll-snap-align: start; }
  .kart a { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .kart__foto { width: 72px; }
  .kart__ucret { grid-column: 2; justify-self: start; margin-top: -6px; }
  .set__tumu { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kart { transition: none; opacity: 1; translate: none; }
  .kart__foto, .kart__foto img, .set__no i { animation: none !important; } .set__no i.eski { display: none; } }

/* ---------- 24.10 Site kabuğu: menü düğmesi, başvuru bağlantıları ----------
   Menü yaprağı ve alt bilgi kabuk.css + ortak.js'ten gelir. Menü düğmesi dar ekranda bağlantıların yerini alır. */
.bar__menu { display: none; height: 40px; padding: 0 16px; border: 0; border-radius: 12px 0 12px 0; background: rgba(52, 71, 80, .08); color: inherit; font: 600 15px Urbanist, sans-serif; cursor: pointer; }
.ustte .bar__menu { background: rgba(255, 255, 255, .16); }
.son__eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.son .hap:not(.hap--mercan) { color: var(--yazi); }
@media (max-width: 860px) {
  .bar__menu { display: inline-flex; align-items: center; }
  .bar__nav { gap: 8px; }
}
.akis__bag { position: absolute; inset: 0; z-index: 1; border-radius: 4px; }
.akis__bag:focus-visible { outline: 2px solid var(--mercan); outline-offset: 2px; }

:root { interpolate-size: allow-keywords; }   /* açılan cevabın yüksekliği yumuşakça değişsin */
/* ---------- Sorular (24.10) ----------
   Yayın akışının üstüne kayan bölüm; başvuru bölümü de bunun üstüne kayar. Cevap açılınca yumuşakça genişler. */
.sorular { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 2fr; gap: 24px 48px; align-items: start;
  min-height: 100svh; padding: 140px clamp(18px, 6vw, 96px) 120px; background: var(--zemin);
  border-radius: 44px 0 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 -40px 80px -30px rgba(52, 71, 80, .35); }
.sorular__baslik { font-size: clamp(40px, 6vw, 96px); font-weight: 750; letter-spacing: -.04em; line-height: .95; }
.sss { border-top: 1px solid var(--cizgi); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(21px, 2.2vw, 30px); font-weight: 650; letter-spacing: -.02em; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; flex: none; font-weight: 400; color: var(--soluk); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.sss summary:hover { color: var(--vurgu); }
.sss details[open] summary::after { transform: rotate(45deg); }
.sss p { padding: 0 0 24px; max-width: 52ch; color: var(--soluk); font-size: 18px; }
.sss details::details-content { block-size: 0; overflow: clip; transition: block-size .45s cubic-bezier(.2, .7, .1, 1), content-visibility .45s allow-discrete; }
.sss details[open]::details-content { block-size: auto; }
.son { z-index: 5; }
@media (max-width: 860px) {
  .sorular { grid-template-columns: 1fr; border-radius: 28px 0 0 0; padding-top: 110px; }
}
@media (max-width: 600px) { .bar .lamba { display: none; } }   /* dar ekranda logo + Başvur + Menü; lamba sığmıyordu */
.lamba { white-space: nowrap; }

/* ---------- 24.10 Akış (Saff Medya'daki gibi yumuşak) ----------
   Eğri Saff'ınki: cubic-bezier(.22, 1, .36, 1). Başlık kelimeleri maskeden yükselir (İ'nin noktası kesilmesin diye üst boşluklu maske);
   satırlar 40 px aşağıdan belirir; kamera bölümünde fotoğraflar kesme yerine çözünür. Perde yalnız ölçek + saydamlık. */
:root { --e-yum: cubic-bezier(.22, 1, .36, 1); --e-acil: cubic-bezier(.16, 1, .3, 1); }
.akis-hareket [data-belir] { opacity: 0; transform: translateY(40px); }
.akis-hareket [data-belir].is-in { opacity: 1; transform: none; transition: opacity 1s var(--e-yum), transform 1.2s var(--e-yum); transition-delay: calc(var(--s, 0) * 70ms); }
.bolum-baslik .k { display: inline-block; overflow: hidden; vertical-align: top; padding: .2em 0 .1em; margin: -.2em 0 -.1em; }
.bolum-baslik .k > span { display: inline-block; transform: translateY(115%); }
.bolum-baslik.is-in .k > span { transform: none; transition: transform 1.25s var(--e-acil); transition-delay: calc(var(--s, 0) * 70ms); }
.pgm__kat img { transition: opacity .8s var(--e-yum), transform 0s linear .8s; }   /* söndükten sonra başa döner */
.pgm__kat img.is-canli { transition: opacity .8s var(--e-yum), transform 12s linear; }
.sahne3b, .set__pin, .reji__pin, .akis, .sorular { will-change: transform, opacity; }
.akis__satir { transition: background-color .4s var(--e-yum); }
@media (prefers-reduced-motion: reduce) { .akis-hareket [data-belir], .bolum-baslik .k > span { opacity: 1; transform: none; } }

/* 24.10: kamera bölümündeki alt yazı bandı "aşırı büyük" bulundu: yaklaşık üçte bir küçük, ince kenar boşluklu */
.pgm .kj { left: 3%; bottom: 6%; }
.pgm .kj__ust { padding: 6px 13px 7px; font-size: clamp(14.5px, 1.25vw, 20px); font-weight: 700; letter-spacing: -.01em; border-radius: 8px 0 0 0; }
.pgm .kj__alt { padding: 5px 13px 6px; font-size: clamp(12px, .92vw, 14px); line-height: 1.35; border-radius: 0 0 8px 0; }
/* 25.10: 860–1180 px arasında bağlantılar lambaya dayanıyor, "Yayın akışı" iki satıra kırılıyordu.
   Bu aralıkta da menü düğmesi bağlantıların yerini alır; lamba ortada kalır. */
.bar { column-gap: 24px; }
.bar__nav a { white-space: nowrap; }
@media (max-width: 1180px) {
  .bar__nav a:not(.bar__cta) { display: none; }
  .bar__menu { display: inline-flex; align-items: center; }
  .bar__nav { gap: 8px; }
}
/* 25.10: dar pencerede (861–1100 px) panel 36vw'ye iniyor, kartın metin sütunu 150 px'e düşüp tarih, ad ve saat kelime kelime kırılıyordu.
   Panel en az 380 px; kart kendi panel genişliğine bakar: dar panelde fotoğraf küçülür, ücret metnin altına iner. */
.set__panel { width: clamp(380px, 36vw, 480px); container-type: inline-size; }
@container (max-width: 440px) {
  .kart a { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .kart__foto { width: 84px; }
  .kart__ad { font-size: 17.5px; }
  .kart__ucret { grid-column: 2; justify-self: start; margin-top: -4px; }
}
@media (max-width: 860px) and (orientation: portrait) { .set__panel { width: auto; } }

/* ---------- 25.10 Telefon ----------
   Reji: 16:9 ekran telefonda üstünde ve altında yarım ekran boşluk bırakıyordu; dikey kadraj boşluğu doldurur, kişiler
   (fotoğrafların sol-orta kısmında) kadrajda kalır. Kamera etiketleri "Kamera 2 · Röpo…" diye kesiliyordu: yalnız ad.
   Son bölüm: tam ekran yüksekliği düğmelerle alt bilgi arasında boş bir ekran bırakıyordu. */
@media (max-width: 860px) {
  .kamera__no { display: none; }
  .kamera p { margin-top: 6px; }
  .son { min-height: auto; padding: 104px 18px 88px; }
}
@media (max-width: 860px) and (orientation: portrait) {
  .reji__pin { grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: 88px 18px 22px; }
  .pgm { aspect-ratio: 4 / 5; width: 100%; height: auto; max-height: 100%; }
  .pgm__kat img { object-position: 40% 50%; }
}
/* Yatay telefon (ör. 812×375): açılış 620 px'lik en az yükseklikle ekrandan taşıyor, yazı görünmeden kaydırmayla sönüyordu;
   rejide 16:9 ekranın yüksekliği sıfıra iniyordu. Açılış ekrana sığar (açıklama gizli), rejide ekran solda, kameralar sağda. */
@media (max-width: 860px) and (orientation: landscape) {
  .studyo { min-height: 0; }
  .studyo__metin { bottom: 24px; }
  .studyo__alt { display: none; }
  .studyo__eylem { margin-top: 16px; }
  .reji__pin { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-rows: auto minmax(0, 1fr); gap: 12px 18px; padding: 76px 18px 16px; }
  .reji__ust { grid-column: 1 / -1; }
  .pgm { height: 100%; width: auto; max-width: 100%; align-self: start; justify-self: start; }
  .kameralar { align-content: start; gap: 8px; }
  .kamera p { font-size: 12px; margin-top: 4px; }
}