/* Gençler Online Films — Ortak Stil */

:root{
  --bg: #0C0A08;
  --surface: #17130F;
  --surface-2: #211A14;
  --ink: #F3ECE0;
  --ink-dim: #ABA095;
  --amber: #E3A23B;
  --clapper: #B23B27;
  --line: rgba(243,236,224,0.09);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--ink); font-family:'Work Sans', sans-serif; -webkit-font-smoothing:antialiased;}
img{display:block; width:100%; height:100%; object-fit:cover;}
a{color:inherit; text-decoration:none;}
.display{font-family:'Fraunces', serif;}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5vw;
  background:rgba(12,10,8,0.95);
  border-bottom:1px solid var(--line);
}
.brand{font-family:'Fraunces', serif; font-weight:600; font-size:1.3rem; display:flex; align-items:center;}
.logo-img{height:32px; width:auto; display:block;}
.brand .strike{color:var(--amber); font-style:italic; font-weight:500;}
.navlinks{display:flex; gap:38px; font-size:0.95rem; color:var(--ink-dim);}
.navlinks a:hover, .navlinks a.active{color:var(--ink);}
.navlinks a.active{border-bottom:1px solid var(--amber); padding-bottom:4px;}
.navright{display:flex; align-items:center; gap:22px;}
.search-icon{width:19px; height:19px; opacity:0.8;}
.btn-submit{font-size:0.85rem; padding:9px 18px; border:1px solid var(--ink-dim); border-radius:2px; transition:border-color 0.2s, background 0.2s;}
.btn-submit:hover{border-color:var(--amber); background:rgba(227,162,59,0.08);}

/* ---------- HERO (ana sayfa) ---------- */
.hero{position:relative; height:82vh; min-height:560px; display:flex; align-items:flex-end; margin-top:-84px;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{filter:saturate(0.9) brightness(0.72);}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(12,10,8,0.15) 42%, rgba(12,10,8,0.55) 100%),
    linear-gradient(to right, rgba(12,10,8,0.75) 0%, rgba(12,10,8,0.1) 55%);
}
.hero-content{position:relative; z-index:1; padding:0 5vw 64px; max-width:640px;}
.hero-eyebrow{font-size:0.85rem; color:var(--amber); margin-bottom:14px; font-weight:500;}
.hero-title{font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:600; line-height:0.98; margin-bottom:18px;}
.hero-meta{display:flex; gap:14px; align-items:center; color:var(--ink-dim); font-size:0.9rem; margin-bottom:20px;}
.hero-meta span:not(:last-child)::after{content:'/'; margin-left:14px; color:var(--line);}
.hero-desc{color:var(--ink-dim); font-size:1rem; line-height:1.6; margin-bottom:30px; max-width:480px;}
.hero-actions{display:flex; gap:14px;}
.btn-play{display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--bg); font-weight:600; font-size:0.95rem; padding:13px 26px; border-radius:2px;}
.btn-play svg{width:14px; height:14px;}
.btn-ghost{display:flex; align-items:center; background:rgba(243,236,224,0.08); color:var(--ink); font-weight:500; font-size:0.95rem; padding:13px 22px; border-radius:2px; border:1px solid var(--line);}

/* ---------- ROWS / GRID ---------- */
.rows{padding:70px 0 100px;}
.row{margin-bottom:64px;}
.row-head{display:flex; align-items:baseline; justify-content:space-between; padding:0 5vw; margin-bottom:20px;}
.row-title{font-family:'Fraunces', serif; font-weight:600; font-size:1.6rem;}
.row-sub{color:var(--ink-dim); font-size:0.88rem;}
.row-link{font-size:0.85rem; color:var(--ink-dim); border-bottom:1px solid transparent;}
.row-link:hover{color:var(--amber); border-color:var(--amber);}

.track{display:flex; gap:18px; overflow-x:auto; padding:4px 5vw 20px; scroll-snap-type:x proximity;}
.track::-webkit-scrollbar{height:4px;}
.track::-webkit-scrollbar-thumb{background:var(--line);}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:26px 22px; padding:0 5vw 100px;}

.film-card{position:relative; flex:0 0 auto; aspect-ratio:16/9; border-radius:3px; overflow:hidden; cursor:pointer; background:var(--surface);}
.track .film-card{width:min(340px, 72vw);}
.film-card img{transition:transform 0.5s ease;}
.film-card:hover img{transform:scale(1.045);}
.film-card .shade{position:absolute; inset:0; background:linear-gradient(to top, rgba(12,10,8,0.92) 0%, rgba(12,10,8,0.1) 55%, transparent 78%);}
.film-card .fc-body{position:absolute; left:0; right:0; bottom:0; padding:16px 18px;}
.fc-title{font-family:'Fraunces', serif; font-weight:600; font-size:1.1rem; margin-bottom:5px;}
.fc-meta{font-size:0.78rem; color:var(--ink-dim); display:flex; gap:10px;}
.fc-meta span:not(:last-child)::after{content:'/'; margin-left:10px; color:var(--line);}
.fc-bar{position:absolute; left:0; top:0; height:3px; width:0; background:var(--clapper); transition:width 0.4s ease;}
.film-card:hover .fc-bar{width:100%;}
.fc-new{position:absolute; top:12px; right:12px; font-size:0.7rem; font-weight:600; background:var(--clapper); color:var(--ink); padding:3px 9px; border-radius:2px;}

/* Podcast cards */
.pod-card{position:relative; flex:0 0 auto; width:150px; scroll-snap-align:start; cursor:pointer;}
.pod-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:22px 18px;}
.pod-art{position:relative; width:100%; aspect-ratio:1/1; border-radius:3px; overflow:hidden; background:var(--surface-2);}
.track .pod-art{width:150px; height:150px;}
.pod-art img{filter:saturate(0.92);}
.pod-play{position:absolute; right:9px; bottom:9px; width:30px; height:30px; border-radius:50%; background:rgba(12,10,8,0.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(4px); transition:opacity 0.2s, transform 0.2s;}
.pod-card:hover .pod-play{opacity:1; transform:translateY(0);}
.pod-play svg{width:11px; height:11px; fill:var(--ink);}
.pod-name{font-size:0.85rem; font-weight:500; margin-top:10px; line-height:1.3;}
.pod-ep{font-size:0.76rem; color:var(--ink-dim); margin-top:3px;}

/* ---------- PAGE HEADER (Filmler / Podcastler) ---------- */
.page-head{padding:52px 5vw 30px; max-width:700px;}
.page-head h1{font-family:'Fraunces', serif; font-weight:600; font-size:2.4rem; margin-bottom:12px;}
.page-head p{color:var(--ink-dim); line-height:1.6; font-size:1rem;}

.filters{display:flex; gap:10px; padding:0 5vw 40px; flex-wrap:wrap;}
.chip{padding:9px 18px; border-radius:2px; border:1px solid var(--line); font-size:0.85rem; color:var(--ink-dim); cursor:pointer;}
.chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:500;}

/* ---------- FILM DETAIL / PLAYER ---------- */
.player-wrap{margin-top:-84px; position:relative; height:78vh; min-height:520px; background:#000;}
.player-wrap img{filter:brightness(0.55);}
.player-shade{position:absolute; inset:0; background:linear-gradient(to top, var(--bg) 0%, rgba(12,10,8,0.05) 45%);}
.player-embed{position:absolute; inset:0; width:100%; height:100%; border:0;}

.info{display:grid; grid-template-columns:1.6fr 1fr; gap:60px; padding:44px 5vw 20px; max-width:1400px; margin:0 auto;}
.info-title{font-family:'Fraunces', serif; font-weight:600; font-size:2.4rem; margin-bottom:14px;}
.info-meta{display:flex; gap:12px; align-items:center; color:var(--ink-dim); font-size:0.9rem; margin-bottom:22px;}
.info-meta span:not(:last-child)::after{content:'/'; margin-left:12px; color:var(--line);}
.badge{border:1px solid var(--line); padding:2px 8px; border-radius:2px; font-size:0.78rem;}
.info-desc{color:var(--ink-dim); line-height:1.7; font-size:1rem; max-width:600px; margin-bottom:28px;}

.credits{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:28px 26px; height:fit-content;}
.credits h4{font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; margin-bottom:18px;}
.credit-row{display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line); font-size:0.88rem;}
.credit-row:first-of-type{border-top:none;}
.credit-role{color:var(--ink-dim);}
.credit-name{text-align:right; max-width:60%;}

/* ---------- FEATURED PODCAST STRIP ---------- */
.featured{margin:0 5vw 46px; padding:26px; border-radius:4px; background:var(--surface); border:1px solid var(--line); display:flex; gap:22px; align-items:center;}
.featured .art{width:96px; height:96px; border-radius:3px; overflow:hidden; flex:0 0 auto;}
.featured .txt{flex:1;}
.featured .eyebrow{font-size:0.78rem; color:var(--amber); margin-bottom:6px;}
.featured h3{font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600; margin-bottom:4px;}
.featured p{color:var(--ink-dim); font-size:0.85rem;}

.show-block{padding:0 5vw 44px;}
.show-head{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.show-head .dot{width:8px; height:8px; border-radius:50%; background:var(--clapper);}
.show-head h2{font-family:'Fraunces', serif; font-weight:600; font-size:1.4rem;}
.show-head span{color:var(--ink-dim); font-size:0.85rem;}

/* ---------- SUBMIT BANNER ---------- */
.submit-banner{margin:0 5vw 90px; padding:52px 6%; border-radius:4px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:40px;}
.sb-text h3{font-family:'Fraunces', serif; font-size:1.7rem; font-weight:600; margin-bottom:10px;}
.sb-text p{color:var(--ink-dim); font-size:0.95rem; max-width:440px; line-height:1.55;}
.sb-cta{flex:0 0 auto; background:var(--clapper); color:var(--ink); font-weight:600; padding:15px 30px; border-radius:2px; font-size:0.95rem; white-space:nowrap;}

/* ---------- FORM PAGE (Film Gönder) ---------- */
.form-page{padding:60px 5vw 100px; max-width:640px; margin:0 auto;}
.form-page h1{font-family:'Fraunces', serif; font-size:2.2rem; margin-bottom:14px;}
.form-page p{color:var(--ink-dim); line-height:1.6; margin-bottom:30px;}
.tally-embed{width:100%; min-height:600px; border:1px solid var(--line); border-radius:4px;}

/* ---------- FOOTER ---------- */
footer{padding:40px 5vw 50px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--ink-dim); font-size:0.85rem;}

/* ---------- EMPTY STATE ---------- */
.empty-state{padding:60px 5vw; color:var(--ink-dim); text-align:center;}

@media (max-width:860px){
  .info{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .navlinks{display:none;}
  .grid{grid-template-columns:1fr;}
  .submit-banner{flex-direction:column; align-items:flex-start;}
  footer{flex-direction:column; gap:20px;}
}