/* ============================================================================
   film-story.css — Film & Motion (work/video-produksiyon.html)
   İki ayrı ray: yatay filmler 16:9, dikey kurgular 9:16. Yatay film dikey
   çerçeveye sıkıştırılmaz. Ortadaki kart vurgulanır, altındaki küçük
   kapaklardan doğrudan seçilir. Otomatik oynatma yok.
   system.css ve discovery.css'ten SONRA yüklenir.
   ============================================================================ */

.fs-section{padding-block:clamp(44px,6vw,74px)}
.fs-head{max-width:720px;margin-bottom:26px}
.fs-head .eyebrow{margin-bottom:14px}
.fs-head h2{font-size:clamp(30px,4vw,50px);font-weight:400;line-height:1.12;letter-spacing:-.04em;margin:0}
.fs-head p{font-size:16px;line-height:1.8;color:#c2bbaf;margin:14px 0 0;max-width:62ch}

/* ------------------------------------------------------------------- RAY */
.fs-rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:calc((100% - var(--fs-w))/2);
  padding:6px calc((100% - var(--fs-w))/2) 10px;
  overscroll-behavior-x:contain;scrollbar-width:none;box-sizing:border-box}
.fs-rail::-webkit-scrollbar{display:none}
.fs-rail figure{flex:0 0 var(--fs-w);width:var(--fs-w);margin:0;scroll-snap-align:center;
  opacity:.45;transform:scale(.95);transition:opacity .28s,transform .28s}
.fs-rail figure.is-active{opacity:1;transform:scale(1)}
.fs-rail video{display:block;width:100%;height:auto;background:#070908;border-radius:10px}
.fs-rail figcaption{padding:15px 2px 0;font-size:13px;line-height:1.6;color:#e2ddd3}
.fs-rail figcaption b{font-weight:400}
.fs-rail figcaption span{display:block;font-size:12px;color:#a49d92;margin-top:4px}

.fs-rail--yatay{--fs-w:clamp(300px,54vw,660px)}
.fs-rail--yatay video{aspect-ratio:16/9;object-fit:contain}
.fs-rail--dikey{--fs-w:clamp(210px,26vw,320px)}
.fs-rail--dikey video{aspect-ratio:9/16;object-fit:contain}

/* katkı etiketi — yalnız kanıtı olan filmlerde basılır */
.fs-rol{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.fs-rol i{font-style:normal;font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.08em;
  text-transform:uppercase;color:#b9b2a6;border:1px solid #ffffff2e;border-radius:20px;padding:5px 9px}
.fs-rol i.ai{color:#e8c8a0;border-color:#e8c8a055}

/* --------------------------------------------------------------- KONTROL */
.fs-kontrol{display:flex;align-items:center;justify-content:center;gap:20px;margin:18px 0 20px}
.fs-kontrol button{width:44px;height:44px;border:1px solid #ffffff3d;border-radius:50%;
  background:transparent;color:#eee;cursor:pointer;font-size:20px;line-height:1}
.fs-kontrol button:disabled{opacity:.25;cursor:default}
.fs-kontrol button:focus-visible{outline:2px solid #b80000;outline-offset:3px}
.fs-kontrol span{font:12px/1 'JetBrains Mono',monospace;color:#a49d92;min-width:56px;text-align:center}

/* ------------------------------------------------------------ KÜÇÜK KAPAK */
.fs-secki{display:flex;gap:10px;overflow-x:auto;justify-content:safe center;
  padding:2px 0 14px;margin:0;scrollbar-width:none}
.fs-secki::-webkit-scrollbar{display:none}
.fs-secki a{flex:none;text-decoration:none;color:#a49d92;min-width:0}
.fs-secki a>div{overflow:hidden;border:2px solid transparent;border-radius:6px;background:#14120f}
.fs-secki img{display:block;width:100%;height:100%;object-fit:cover}
.fs-secki a[aria-current]>div{border-color:#b80000}
.fs-secki a:focus-visible>div{outline:2px solid #b80000;outline-offset:2px}
.fs-secki--yatay a{width:112px}
.fs-secki--yatay a>div{aspect-ratio:16/9}
.fs-secki--dikey a{width:62px}
.fs-secki--dikey a>div{aspect-ratio:9/16}

/* ------------------------------------------------------------ ÇEKİM ARKASI */
.fs-arkasi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.fs-arkasi figure{margin:0}
.fs-arkasi img{display:block;width:100%;height:auto;border-radius:10px}
.fs-arkasi figcaption{font-size:12px;line-height:1.6;color:#a49d92;padding-top:9px}

.fs-not{font-size:12px;line-height:1.75;color:#9d968b;margin-top:22px;max-width:70ch}

@media(max-width:700px){
  .fs-rail{gap:14px}
  .fs-rail--yatay{--fs-w:86vw}
  .fs-rail--dikey{--fs-w:62vw}
  .fs-rail figcaption{font-size:12px;padding-top:12px}
  .fs-secki{justify-content:flex-start}
  .fs-secki--yatay a{width:92px}
  .fs-secki--dikey a{width:52px}
  .fs-head p{font-size:14.5px}
  .fs-arkasi{grid-template-columns:1fr 1fr;gap:10px}
  .fs-arkasi figcaption{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.fs-rail figure{transition:none}}

/* ============================================================ SERBEST ORAN
   LED panelleri, maket render'ları ve baskı fotoğrafları tek bir orana
   girmiyor: 0.32'lik dikey şeritten 7.53'lük kayan yazıya kadar. Her kart
   kendi oranında durur (--o), nominal yükseklik ortaktır; çok geniş olanlar
   genişlikten kapanıp kısalır. Kırpma ve siyah bant yok. */
.fs-rail--serbest{--fs-h:clamp(180px,29vh,330px);--fs-wmax:min(84vw,700px);
  align-items:center;scroll-snap-type:x proximity;
  padding-inline:max(18px,calc((100% - var(--fs-wmax))/2));
  scroll-padding-inline:max(18px,calc((100% - var(--fs-wmax))/2))}
.fs-rail--serbest figure{flex:0 0 auto;width:auto;max-width:var(--fs-wmax)}
.fs-rail--serbest :is(video,img){
  aspect-ratio:var(--o,1.78);
  width:min(var(--fs-wmax),calc(var(--fs-h) * var(--o,1.78)));
  height:auto;display:block;object-fit:contain;background:#070908;border-radius:10px}
.fs-rail--serbest figcaption{max-width:min(var(--fs-wmax),520px)}
.fs-secki--serbest a{width:auto;height:58px}
.fs-secki--serbest a>div{aspect-ratio:var(--o,1.78);height:58px;width:auto;max-width:132px}
.fs-secki--serbest img{object-fit:cover}
@media(max-width:700px){
  .fs-rail--serbest{--fs-h:clamp(150px,24vh,230px);--fs-wmax:88vw}
  .fs-secki--serbest a,.fs-secki--serbest a>div{height:46px}
}

.fs-rail:focus-visible{outline:2px solid #b80000;outline-offset:4px}.fs-secki--serbest img{object-fit:contain}