/* AÇILIŞ SİNEMATİĞİ — üst katman: letterbox bantları, plan etiketi, başlık, portre kartı, atla. (FAZ 9) */
#sinematik { position: fixed; inset: 0; z-index: 40; pointer-events: none; font-family: var(--t-mono, monospace); color: #efe6d2; opacity: 0; transition: opacity .42s ease; }
#sinematik.acik { opacity: 1; pointer-events: auto; cursor: pointer; }
#sinematik .sin-bant { position: absolute; left: 0; right: 0; height: 0; background: #030305; transition: height .6s cubic-bezier(.2,.7,.2,1); }
#sinematik .sin-bant.ust { top: 0; } #sinematik .sin-bant.alt { bottom: 0; }
#sinematik.acik .sin-bant { height: 9vh; }
#sinematik .sin-etiket { position: absolute; left: 28px; bottom: calc(9vh + 18px); display: flex; align-items: baseline; gap: 12px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(239,230,210,.82); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
#sinematik .sin-etiket b { font-size: 22px; letter-spacing: 0; color: #f0d68c; font-weight: 600; }
#sinematik .sin-etiket i { font-style: normal; color: rgba(239,230,210,.5); }
#sinematik .sin-baslik { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-46%); text-align: center; opacity: 0; transition: opacity .55s ease, transform .55s ease; }
#sinematik .sin-baslik.acik { opacity: 1; transform: translateY(-50%); }
#sinematik .sin-baslik h1 { font-size: clamp(30px, 5.2vw, 64px); letter-spacing: .18em; color: #f0d68c; font-weight: 600; text-shadow: 0 0 34px rgba(240,214,140,.35), 0 2px 12px rgba(0,0,0,.9); }
#sinematik .sin-baslik h1 span { color: #fff; }
#sinematik .sin-baslik p { margin-top: 12px; font-size: clamp(11px, 1.2vw, 14px); letter-spacing: .28em; text-transform: uppercase; color: rgba(239,230,210,.78); }
#sinematik .sin-kart { position: absolute; left: 50%; bottom: calc(9vh + 24px); transform: translate(-50%, 14px); display: flex; align-items: center; gap: 14px; padding: 10px 20px 10px 10px; background: rgba(8,9,14,.78); border: 1px solid rgba(240,214,140,.28); border-left: 3px solid var(--c, #f0d68c); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity .4s ease, transform .4s ease; }
#sinematik .sin-kart.acik { opacity: 1; transform: translate(-50%, 0); }
#sinematik .sin-portre { position: relative; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: #0d0b0f; display: grid; place-items: center; }
#sinematik .sin-portre img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); }
#sinematik .sin-portre img[hidden] { display: none; }
#sinematik .sin-portre em { position: absolute; font-style: normal; font-size: 30px; opacity: .9; }
#sinematik .sin-portre img:not([hidden]) + em { display: none; }
#sinematik .sin-kim b { display: block; font-size: 17px; letter-spacing: .06em; color: #fff; }
#sinematik .sin-kim small { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .12em; color: var(--c, #f0d68c); opacity: .9; }
#sinematik .sin-durum { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(9vh + 76px); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(239,230,210,.7); }
#sinematik .sin-durum:empty { display: none; }
#sinematik .sin-atla { position: absolute; right: 28px; bottom: calc(9vh + 16px); background: rgba(8,9,14,.72); color: #efe6d2; border: 1px solid rgba(240,214,140,.35); padding: 9px 16px; font: inherit; font-size: 12px; letter-spacing: .14em; cursor: pointer; pointer-events: auto; }
#sinematik .sin-atla small { color: rgba(239,230,210,.5); font-size: 10px; margin-left: 6px; letter-spacing: .1em; }
#sinematik .sin-atla:hover, #sinematik .sin-atla:focus-visible { background: rgba(240,214,140,.16); border-color: #f0d68c; outline: none; }
#sinematik .sin-ilerleme { position: absolute; left: 0; right: 0; bottom: 9vh; height: 2px; background: rgba(255,255,255,.08); }
#sinematik .sin-ilerleme i { display: block; height: 100%; width: 0; background: #f0d68c; transition: width .15s linear; }
/* Sinematik sürerken HUD sessizce çekilir; devirde geri gelir */
body.sinematik #topbar, body.sinematik #sol-kolon, body.sinematik #sag-kolon, body.sinematik #band, body.sinematik #watch-strip,
body.sinematik #y-kartlar, body.sinematik #lower-third, body.sinematik #pot-pill, body.sinematik #yayin, body.sinematik #mjoy,
body.sinematik #sunum-serit, body.sinematik #sunum-cikis, body.sinematik #toast { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) {
  #sinematik, #sinematik .sin-bant, #sinematik .sin-baslik, #sinematik .sin-kart, #sinematik .sin-ilerleme i { transition: none; }
}
@media (max-width: 720px) {
  #sinematik .sin-etiket { left: 14px; font-size: 9px; } #sinematik .sin-etiket b { font-size: 16px; }
  #sinematik .sin-atla { right: 14px; padding: 8px 12px; font-size: 11px; }
  #sinematik .sin-kart { padding: 8px 14px 8px 8px; } #sinematik .sin-portre { width: 56px; height: 56px; }
}