/* ============================================================
   kültfilmler — FİLM (single movie / izleme)
   Tasarım: Claude Design "Film.html" — birebir
   ============================================================ */

.crumb{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--faint); padding-top:16px; }
.crumb a:hover{ color:var(--muted); }
.crumb svg{ opacity:.6; }

/* TITLE */
.vhead{ padding-top:18px; }
.vtitle{ font-family:var(--display); font-weight:700; letter-spacing:-.4px; font-size:26px; line-height:1.15; color:#fff; }
.vtitle .alt{ font-family:var(--sans); font-weight:400; font-size:14px; color:var(--muted); }
.vsub{ font-size:14px; color:var(--muted); margin-top:5px; }

/* TOP: poster + player */
.top{ display:grid; grid-template-columns:212px 1fr; gap:28px; padding-top:16px; align-items:start; }
.pcol{ display:flex; flex-direction:column; gap:10px; }
.poster{ position:relative; aspect-ratio:2/3; border-radius:9px; overflow:hidden; border:1px solid var(--line);
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px), radial-gradient(120% 90% at 50% -8%, hsla(212,34%,40%,.5), transparent 60%), linear-gradient(160deg,#26303f,#12161d); }
.poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.poster .plabel{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:16px; }
.poster .plabel .pk{ font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; }
.poster .plabel .pt{ font-family:var(--display); font-weight:700; letter-spacing:-.4px; font-size:19px; line-height:1.12; color:rgba(255,255,255,.92); }
.poster .plabel .ps{ font-size:9.5px; letter-spacing:3px; text-transform:uppercase; color:var(--orange); font-weight:700; }

/* action buttons */
.acts{ display:flex; flex-direction:column; gap:7px; }
.act{ display:flex; align-items:center; gap:10px; height:38px; padding:0 13px; border-radius:7px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s; }
.act:hover{ border-color:var(--line-2); background:var(--card); }
.act .ck{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line-2); flex:none; display:grid; place-items:center; transition:.15s; }
.act .ck svg{ width:11px; height:11px; opacity:0; transition:.15s; }
.act.on{ border-color:rgba(232,162,60,.5); background:rgba(232,162,60,.1); color:#f3d39b; }
.act.on .ck{ background:var(--orange); border-color:var(--orange); color:#241a09; }
.act.on .ck svg{ opacity:1; }
.act.fav.on .ck{ background:#d8536b; border-color:#d8536b; }
.act.fav.on{ border-color:rgba(216,83,107,.5); background:rgba(216,83,107,.1); color:#eab3bf; }

/* trailer card */
.trailer{ display:flex; align-items:center; gap:11px; padding:9px; border-radius:8px; background:var(--bg-2); border:1px solid var(--line); cursor:pointer; transition:.15s; }
.trailer:hover{ border-color:var(--line-2); background:var(--card); }
.trailer .tth{ width:52px; height:36px; flex:none; border-radius:5px; overflow:hidden; position:relative; border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%, hsla(212,34%,40%,.6), transparent 60%), linear-gradient(160deg,#26303f,#12161d); display:grid; place-items:center; }
.trailer .tth svg{ color:#fff; opacity:.9; }
.trailer .tinfo{ min-width:0; flex:1; }
.trailer .tinfo h4{ font-size:11.5px; font-weight:600; line-height:1.25; }
.trailer .tinfo p{ font-size:10.5px; color:var(--faint); margin-top:2px; }
.trailer .ext{ color:var(--faint); flex:none; }

/* player column */
.vcol{ min-width:0; }
.player{ position:relative; aspect-ratio:16/9; border-radius:11px; overflow:hidden; border:1px solid var(--line);
  background:radial-gradient(80% 80% at 50% 38%, #1b1d22, #0c0d10 80%); display:grid; place-items:center; }
.player::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 10px); pointer-events:none; }
.player iframe, .player video, .player embed{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.player.playing::after, .player.playing .pcenter{ display:none; }
.pcenter{ display:flex; flex-direction:column; align-items:center; gap:13px; z-index:2; }
.playbtn{ width:66px; height:66px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(180deg,var(--orange),var(--orange-deep)); color:#241a09; display:grid; place-items:center; box-shadow:0 12px 34px -10px rgba(232,162,60,.5); transition:.18s; }
.playbtn:hover{ transform:scale(1.06); }
.pcenter .ptxt{ font-size:12.5px; color:var(--muted); }
.pcenter .ptxt b{ color:var(--ink); font-weight:600; }

.srcbar{ margin-top:11px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.srcgroup{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.srclabel{ font-size:11px; color:var(--faint); font-weight:600; margin-right:2px; }
.srcchip{ height:30px; padding:0 13px; border-radius:7px; background:var(--bg-2); border:1px solid var(--line); color:var(--muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:.14s; }
.srcchip:hover{ color:var(--ink); border-color:var(--line-2); }
.srcchip.on{ background:var(--card-2); color:#fff; border-color:var(--line-2); }
.dubtabs{ display:flex; gap:3px; padding:3px; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.dubtabs button{ height:26px; padding:0 13px; border:none; border-radius:6px; background:transparent; color:var(--muted); font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; transition:.14s; }
.dubtabs button.on{ background:var(--card-2); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); }

/* DIVIDER */
.hr{ height:1px; background:var(--line); margin:30px 0; }

/* LOWER: content + info */
.lower{ display:grid; grid-template-columns:1fr 268px; gap:36px; align-items:start; }
.sec-h{ font-family:var(--display); font-weight:700; letter-spacing:-.4px; font-size:18px; color:#f2f2f3; margin-bottom:13px; }
.desc{ font-size:13px; line-height:1.7; color:var(--muted); }
.desc p{ margin:0 0 10px; } .desc p:last-child{ margin-bottom:0; }
.desc.clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.more-btn{ margin-top:10px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12px; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; font-family:inherit; transition:.15s; }
.more-btn:hover{ color:var(--orange); }
.more-btn svg{ transition:transform .2s; }
.more-btn.open svg{ transform:rotate(180deg); }

/* cast */
.cast-wrap{ margin-top:30px; }
.cast{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 18px; }
.cmember{ display:flex; align-items:center; gap:11px; }
.cmember .av{ width:44px; height:44px; flex:none; border-radius:50%; overflow:hidden; border:1px solid var(--line); display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; }
.cmember h5{ font-size:12.5px; font-weight:600; }
.cmember p{ font-size:11px; color:var(--faint); margin-top:1px; }

/* NOT: Yorum stilleri (.cmts/.cmt-write/.cmt/.replies/.cmt-more …) artık TAMAMEN theme.css'te
   (Claude Design "Film - Yorumlar.html" birebir, film/dizi/bölüm ortak). Burada tekrar tanımlanmaz
   — aksi halde watch.css theme.css'ten SONRA yüklendiği için yeni tasarımı ezerdi. */

/* INFO CARD */
.info{ background:var(--bg-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.irow{ padding:14px 16px; border-bottom:1px solid var(--line); }
.irow:last-child{ border-bottom:none; }
.ilabel{ font-size:11px; color:var(--faint); font-weight:600; letter-spacing:.2px; margin-bottom:7px; }
.imdb{ display:flex; align-items:center; gap:10px; }
.imdb .badge{ height:24px; padding:0 7px; border-radius:4px; background:var(--orange); color:#241a09; font-weight:800; font-size:11px; letter-spacing:.5px; display:grid; place-items:center; }
.imdb .score{ font-size:17px; font-weight:700; color:#fff; }
.imdb .votes{ font-size:11.5px; color:var(--faint); margin-left:auto; }
.ivalue{ font-size:13px; color:var(--ink); font-weight:500; }
.genres{ display:flex; flex-wrap:wrap; gap:7px; }
.genres a{ font-size:12px; font-weight:600; color:var(--muted); padding:5px 12px; border-radius:6px; background:var(--bg); border-left:2px solid var(--line-2); transition:.14s; }
.genres a:hover, .genres a.on{ color:#fff; border-left-color:var(--orange); background:var(--card-2); }
.views{ display:flex; align-items:baseline; gap:7px; }
.views b{ font-size:17px; font-weight:700; color:#fff; }
.views span{ font-size:12px; color:var(--faint); }

@media (max-width:1000px){
  .top{ grid-template-columns:180px 1fr; gap:20px; }
  .lower{ grid-template-columns:1fr; }
  .cast{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .top{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .player .ptxt{ white-space:normal; padding:0 14px; }
  .vcol{ order:1; }
  .pcol{ order:2; max-width:none; }
  .pcol .poster{ display:none; }
  .srcbar{ display:block; margin-top:12px; }
  .srcgroup{ display:none; }
  .dubtabs{ display:flex; width:100%; gap:4px; padding:4px; }
  .dubtabs button{ flex:1; height:40px; font-size:13px; }
  .acts{ flex-direction:row; overflow-x:auto; gap:9px; padding-bottom:3px; -webkit-overflow-scrolling:touch; }
  .acts::-webkit-scrollbar{ display:none; }
  .act{ flex:none; white-space:nowrap; border-radius:10px; height:42px; }
  .cast{ grid-template-columns:1fr; }
  .lower{ display:flex; flex-direction:column; gap:0; }
  .lower main{ display:contents; }
  .lower aside{ order:1; margin:14px 0 22px; width:100%; }
  .cast-wrap{ order:2; }
  .cmts{ order:3; }
  .lower main > *, .lower > aside{ min-width:0; max-width:100%; width:100%; }
  .cmts, .info{ min-width:0; }
  .info .irow{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; }
  .info .ilabel{ margin-bottom:0; flex:none; }
  .info .imdb{ justify-content:flex-end; flex:1; }
  .info .imdb .votes{ margin-left:0; }
  .info .genres{ justify-content:flex-end; flex-wrap:wrap; }
  .info .ivalue, .info .views{ text-align:right; }
}