/* =========================================================================
   MutiScore — tasarım sistemi
   Koyu mor kurumsal kimlik · dark/light · mobil-öncelikli
   ========================================================================= */

/* ---- Tokens -------------------------------------------------------------- */
:root, [data-theme="dark"]{
  --bg:#0a0710; --bg-grad-1:#150a24; --bg-grad-2:#0a0710;
  --surface:#140d20; --surface-2:#1a1029; --surface-3:#221634;
  --elev:#1c1330; --glass:rgba(24,15,38,.72);
  --line:#2a1f3d; --line-2:#372a4d;
  --ink:#f3eefc; --soft:#c3b6da; --mut:#897aa6;
  --brand:#8b5cf6; --brand-2:#a855f7; --brand-3:#c084fc;
  --brand-ink:#ffffff; --brand-soft:rgba(139,92,246,.16); --brand-line:rgba(168,85,247,.34);
  --grad:linear-gradient(135deg,#7c3aed 0%,#a855f7 55%,#c026d3 100%);
  --grad-soft:linear-gradient(135deg,rgba(124,58,237,.22),rgba(192,38,211,.14));
  --gold:#f5c518; --gold-ink:#1a1206;
  --teal:#2dd4bf; --teal-soft:rgba(45,212,191,.15);
  --emre:#c084fc; --emre-soft:rgba(192,132,252,.16);
  --ok:#34d399; --ok-soft:rgba(52,211,153,.15);
  --warn:#fbbf24; --err:#fb7185; --err-soft:rgba(251,113,133,.14);
  --sc-high:#34d399; --sc-mid:#fbbf24; --sc-low:#fb923c; --sc-bad:#fb7185; --sc-none:#8b7da8;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow:0 12px 34px rgba(0,0,0,.45);
  --shadow-lg:0 28px 64px rgba(6,2,14,.6);
  --shadow-brand:0 14px 40px rgba(124,58,237,.4);
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-full:999px;
  --ff:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --step:clamp(16px,1.6vw,17px);
  --nav-h:66px; --wrap:1200px;
}
[data-theme="dark"]{ --mut:#897aa6; }
[data-theme="light"]{
  --bg:#f4f1fb; --bg-grad-1:#efe9fb; --bg-grad-2:#f7f5fc;
  --surface:#ffffff; --surface-2:#f7f4fd; --surface-3:#efe9fb;
  --elev:#ffffff; --glass:rgba(255,255,255,.82);
  --line:#e9e2f6; --line-2:#ded3f0;
  --ink:#1c1330; --soft:#5a4d73; --mut:#877a9e;
  --brand:#7c3aed; --brand-2:#9333ea; --brand-3:#a855f7;
  --brand-ink:#ffffff; --brand-soft:rgba(124,58,237,.1); --brand-line:rgba(124,58,237,.22);
  --grad:linear-gradient(135deg,#7c3aed 0%,#9333ea 55%,#c026d3 100%);
  --grad-soft:linear-gradient(135deg,rgba(124,58,237,.1),rgba(192,38,211,.06));
  --gold:#e0a800; --teal:#0d9488; --emre:#7c3aed; --emre-soft:rgba(124,58,237,.1);
  --shadow-sm:0 1px 4px rgba(60,40,100,.08);
  --shadow:0 12px 30px rgba(70,45,110,.12);
  --shadow-lg:0 28px 60px rgba(70,45,110,.16);
  --shadow-brand:0 14px 36px rgba(124,58,237,.26);
  --sc-none:#a99bc4;
}

/* ---- Reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  font-family:var(--ff); font-size:var(--step); line-height:1.6; color:var(--ink);
  background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
  background-image:radial-gradient(1100px 620px at 82% -8%,var(--brand-soft),transparent 60%),
                   radial-gradient(900px 560px at -10% 8%,rgba(192,38,211,.09),transparent 55%);
  background-attachment:fixed;
}
img,video{ max-width:100%; display:block }
svg{ display:block }
/* Satır içi ikonlar metinle hizalı olsun (KÖK DÜZELTME) */
svg.ic{ display:inline-block; vertical-align:middle; flex-shrink:0 }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
ul{ list-style:none }
::selection{ background:var(--brand); color:#fff }
:focus-visible{ outline:2px solid var(--brand-3); outline-offset:2px; border-radius:6px }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto } }

/* ---- Layout ------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,28px) }
.wrap-wide{ max-width:1360px }
.section{ padding-block:clamp(38px,6vw,66px) }
.stack>*+*{ margin-top:16px }
.grid{ display:grid; gap:clamp(14px,2vw,22px) }
.muted{ color:var(--mut) }
.soft{ color:var(--soft) }
.center{ text-align:center }
.flip{ transform:scaleX(-1) }

/* ---- Typography --------------------------------------------------------- */
h1,h2,h3,h4{ line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--ink) }
h1{ font-size:clamp(30px,5.4vw,52px) }
h2{ font-size:clamp(23px,3.4vw,34px) }
h3{ font-size:clamp(18px,2.2vw,22px) }
.eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-3) }
.lead{ font-size:clamp(16px,2vw,19px); color:var(--soft); line-height:1.7 }
.gradient-text{ background:linear-gradient(120deg,var(--brand-3),#f0abfc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }

/* ---- Header ------------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:60; backdrop-filter:blur(16px) saturate(140%);
  background:var(--glass); border-bottom:1px solid var(--line); }
.nav{ height:var(--nav-h); display:flex; align-items:center; gap:18px }
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; letter-spacing:-.02em; flex-shrink:0 }
.brand .logo{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--grad); box-shadow:var(--shadow-brand); color:#fff }
.brand .logo svg{ width:22px; height:22px }
.brand b{ background:linear-gradient(120deg,var(--ink),var(--brand-3)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:8px }
.nav-links a{ padding:9px 14px; border-radius:var(--r-sm); font-weight:600; font-size:15px; color:var(--soft);
  transition:background .16s,color .16s }
.nav-links a:hover{ background:var(--brand-soft); color:var(--ink) }
.nav-links a.active{ color:var(--ink); background:var(--brand-soft) }
.nav-spacer{ flex:1 }
.nav-actions{ display:flex; align-items:center; gap:8px }

.searchbox{ position:relative; display:flex; align-items:center }
.searchbox input{ width:210px; max-width:36vw; padding:10px 14px 10px 38px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-size:14.5px; transition:width .2s,border .2s }
.searchbox input:focus{ width:260px; border-color:var(--brand-line); outline:none }
.searchbox .si{ position:absolute; left:13px; color:var(--mut); pointer-events:none }

.icon-btn{ width:42px; height:42px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--soft); cursor:pointer; transition:.16s }
.icon-btn:hover{ color:var(--ink); border-color:var(--brand-line); background:var(--brand-soft) }
.theme-toggle .i-dark{ display:none } [data-theme="dark"] .theme-toggle .i-dark{ display:block }
[data-theme="dark"] .theme-toggle .i-light{ display:none }

.hamb{ display:none }

/* ---- Buttons ------------------------------------------------------------ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:11px 20px; border-radius:var(--r-full); font-weight:700; font-size:15px; border:1px solid transparent;
  background:var(--grad); color:#fff; box-shadow:var(--shadow-brand); transition:transform .14s,box-shadow .18s,filter .18s; white-space:nowrap }
.btn:hover{ transform:translateY(-2px); box-shadow:0 20px 46px rgba(124,58,237,.5) }
.btn:active{ transform:translateY(0) }
.btn.ghost{ background:var(--surface-2); color:var(--ink); border-color:var(--line); box-shadow:none }
.btn.ghost:hover{ border-color:var(--brand-line); background:var(--brand-soft); transform:translateY(-2px) }
.btn.outline{ background:transparent; color:var(--brand-3); border-color:var(--brand-line); box-shadow:none }
.btn.sm{ padding:8px 15px; font-size:13.5px }
.btn.lg{ padding:14px 26px; font-size:16px }
.btn.block{ width:100% }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none!important }
.btn-google{ background:#fff; color:#1f2733; border:1px solid var(--line); box-shadow:var(--shadow-sm) }
.btn-google:hover{ background:#fff; filter:brightness(.97); box-shadow:var(--shadow) }

.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--soft) }
.chip.brand{ background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-3) }

/* ---- Score badges ------------------------------------------------------- */
.score{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  border-radius:var(--r); padding:9px 12px; min-width:58px; font-variant-numeric:tabular-nums }
.score .val{ font-size:20px; font-weight:800; letter-spacing:-.02em }
.score .lab{ font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; opacity:.85 }
.score.emre{ background:var(--emre-soft); color:var(--emre); border:1px solid var(--brand-line) }
.score.imdb{ background:rgba(245,197,24,.15); color:var(--gold); border:1px solid rgba(245,197,24,.3) }
.score.comm{ background:var(--teal-soft); color:var(--teal); border:1px solid rgba(45,212,191,.3) }
.score.lg{ min-width:76px; padding:12px 14px } .score.lg .val{ font-size:28px }

.score-dot{ --c:var(--sc-none); display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:15px; color:var(--c) }
.score-dot::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c) }
.sc-high{ --c:var(--sc-high) } .sc-mid{ --c:var(--sc-mid) } .sc-low{ --c:var(--sc-low) } .sc-bad{ --c:var(--sc-bad) } .sc-none{ --c:var(--sc-none) }

/* ---- Cards / grid ------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:clamp(14px,2vw,22px) }
.card{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  border:1px solid var(--line); transition:transform .2s,box-shadow .2s,border-color .2s; will-change:transform }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--brand-line) }
.poster{ position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--surface-2) }
.poster img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.card:hover .poster img{ transform:scale(1.06) }
.poster-fallback{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
  background:linear-gradient(160deg,#2a1745,#150b24 70%); }
.poster-fallback::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 20% 0%,rgba(168,85,247,.35),transparent 60%); }
.poster-fallback .pf-title{ position:relative; font-weight:800; font-size:19px; line-height:1.2; color:#efe6ff; letter-spacing:-.01em }
.poster-fallback .pf-sub{ position:relative; color:#b9a7d8; font-size:13px; margin-top:6px }
.poster-fallback .pf-mark{ position:absolute; top:14px; left:14px; opacity:.5; color:#c084fc }
.poster .badge-emre{ position:absolute; top:10px; right:10px; z-index:2; backdrop-filter:blur(8px);
  background:rgba(15,9,25,.74); border:1px solid var(--brand-line); color:#efe2ff;
  border-radius:var(--r-full); padding:5px 11px 5px 9px; font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:5px; line-height:1 }
.poster .badge-emre svg{ color:var(--brand-3) }
.poster .overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(10,7,16,.6),transparent 46%);
  opacity:0; transition:opacity .25s; z-index:1 }
.card:hover .poster .overlay{ opacity:1 }
.card-body{ padding:12px 14px 14px }
.card-title{ font-weight:700; font-size:15.5px; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden }
.card-meta{ display:flex; align-items:center; gap:8px; margin-top:6px; color:var(--mut); font-size:13px; flex-wrap:wrap }
.card-scores{ display:flex; align-items:center; gap:7px; margin-top:10px; flex-wrap:wrap }
.cs{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:8px; line-height:1.5 }
.cs .cs-lab{ font-size:10px; font-weight:800; letter-spacing:.02em; opacity:.9 }
.cs-imdb{ background:rgba(245,197,24,.14); color:var(--gold) }
.cs-comm{ background:var(--teal-soft); color:var(--teal) }
.cs-none{ color:var(--mut); background:var(--surface-2) }
.card-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--mut) }

/* ---- Sıralı liste (En İyiler) ------------------------------------------- */
.ranklist{ display:flex; flex-direction:column; gap:10px; list-style:none; counter-reset:none }
.rankrow{ display:grid; grid-template-columns:54px 62px 1fr auto; gap:16px; align-items:center;
  padding:12px 18px 12px 8px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
  transition:border-color .18s,transform .18s,box-shadow .18s }
.rankrow:hover{ border-color:var(--brand-line); transform:translateX(4px); box-shadow:var(--shadow-sm) }
.rankrow .rank{ font-size:26px; font-weight:800; color:var(--mut); text-align:center; font-variant-numeric:tabular-nums; line-height:1 }
.rankrow.top3 .rank{ color:var(--gold) }
.rankrow .rposter{ width:62px; border-radius:9px; overflow:hidden; display:block }
.rankrow .rposter .poster{ aspect-ratio:2/3; border-radius:9px }
.rankrow .rinfo{ min-width:0 }
.rankrow .rinfo b{ font-size:16px; display:block; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rankrow .rinfo span{ color:var(--mut); font-size:13.5px }
.rankrow .rscores{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end }
.cs-muti{ background:var(--emre-soft); color:var(--emre) }
@media (max-width:680px){
  .rankrow{ grid-template-columns:34px 52px 1fr; gap:11px; padding:10px 12px 10px 6px }
  .rankrow .rank{ font-size:19px }
  .rankrow .rposter{ width:52px }
  .rankrow .rscores{ grid-column:2 / -1; justify-content:flex-start; margin-top:2px }
}

/* ---- Section header ----------------------------------------------------- */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap }
.sec-head .t h2{ margin-bottom:4px; display:flex; align-items:center; gap:9px }
.sec-head .t p{ color:var(--mut); font-size:15px }
.sec-head a.more{ color:var(--brand-3); font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; gap:5px }
.sec-head a.more:hover{ gap:8px }

/* ---- Hero --------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(40px,7vw,84px) }
.hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,54px); align-items:center }
.hero h1{ margin-bottom:18px }
.hero .lead{ max-width:52ch; margin-bottom:26px }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px }
.hero-stats{ display:flex; gap:26px; flex-wrap:wrap }
.hero-stats .st b{ font-size:26px; font-weight:800; display:block; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.hero-stats .st span{ color:var(--mut); font-size:13px; font-weight:600 }
.hero-collage{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; transform:rotate(-3deg) }
.hero-collage .card{ animation:floaty 6s ease-in-out infinite }
.hero-collage .card:nth-child(2){ transform:translateY(26px); animation-delay:-2s }
.hero-collage .card:nth-child(3){ animation-delay:-4s }
.hero-collage .card:nth-child(5){ transform:translateY(26px); animation-delay:-1s }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.hero-glow{ position:absolute; z-index:-1; width:520px; height:520px; right:-6%; top:-14%; border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.28),transparent 62%); filter:blur(20px) }

/* ---- Host banner (Mustafa Emre) ---------------------------------------- */
.host-card{ display:flex; align-items:center; gap:18px; padding:20px 22px; border-radius:var(--r-xl);
  background:var(--grad-soft); border:1px solid var(--brand-line) }
.host-card .ava{ width:64px; height:64px; border-radius:50%; flex-shrink:0; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:24px; box-shadow:var(--shadow-brand) }
.host-card .info b{ font-size:18px } .host-card .info p{ color:var(--soft); font-size:14.5px }

/* ---- "Nasıl çalışır" kartları ------------------------------------------- */
.how-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
.how{ padding:22px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); transition:border-color .18s,transform .18s }
.how:hover{ border-color:var(--brand-line); transform:translateY(-3px) }
.how .hi{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:13px }
.how b{ display:block; font-size:16.5px; margin-bottom:6px }
.how p{ color:var(--soft); font-size:14.5px; line-height:1.65 }

/* ---- Filter bar --------------------------------------------------------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); margin-bottom:24px }
.filters select,.filters input{ padding:9px 13px; border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink); font-size:14px; cursor:pointer }
.filters select:focus,.filters input:focus{ border-color:var(--brand-line); outline:none }
.genre-pills{ display:flex; gap:8px; flex-wrap:wrap }
.genre-pills a{ padding:7px 14px; border-radius:var(--r-full); background:var(--surface-2); border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--soft); transition:.15s }
.genre-pills a:hover,.genre-pills a.active{ background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-3) }

/* ---- Movie detail ------------------------------------------------------- */
.movie-hero{ position:relative; overflow:hidden; isolation:isolate }
.movie-backdrop{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center 20%; filter:saturate(1.1) opacity(.85) }
.movie-backdrop::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(10,7,16,.72),var(--bg) 92%),linear-gradient(to right,rgba(10,7,16,.85),transparent) }
[data-theme="light"] .movie-backdrop::after{ background:linear-gradient(to bottom,rgba(244,241,251,.82),var(--bg) 92%) }
.movie-top{ display:grid; grid-template-columns:300px 1fr; gap:clamp(22px,4vw,44px); padding-block:clamp(28px,4vw,44px); align-items:start }
.movie-poster{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line-2); position:sticky; top:84px }
.movie-poster .poster{ aspect-ratio:2/3 }
.movie-info h1{ margin-bottom:8px }
.movie-tagline{ color:var(--brand-3); font-style:italic; font-size:17px; margin-bottom:16px }
.meta-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--soft); font-size:14.5px; margin-bottom:20px }
.meta-row .pill{ padding:4px 12px; border-radius:var(--r-full); background:var(--surface-2); border:1px solid var(--line); font-weight:600 }
.scores-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px }
.big-score{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); min-width:150px }
.big-score .ring{ position:relative; width:56px; height:56px; flex-shrink:0 }
.big-score .num{ font-size:26px; font-weight:800; line-height:1 }
.big-score .cap{ font-size:12px; color:var(--mut); font-weight:700; text-transform:uppercase; letter-spacing:.06em }
.big-score .sub{ font-size:12.5px; color:var(--soft); margin-top:2px }
.big-score.is-emre{ background:var(--emre-soft); border-color:var(--brand-line) }
.big-score.is-emre .num{ color:var(--emre) }
.big-score.is-imdb .num{ color:var(--gold) }
.big-score.is-comm .num{ color:var(--teal) }

.plot{ font-size:16.5px; line-height:1.75; color:var(--soft); margin-bottom:22px }
.credits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px 22px; margin-bottom:24px }
.credit b{ display:block; color:var(--mut); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px }
.credit span{ color:var(--ink); font-weight:600 }
.actions-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px }

/* Fragman oynatıcı — sabit oran, yerinde oynatır, layout kaymaz */
.trailer{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden;
  background:#05030a; border:1px solid var(--line-2); box-shadow:var(--shadow); margin-block:6px }
.trailer .t-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.trailer .t-play{ position:absolute; inset:0; display:grid; place-items:center; border:none; cursor:pointer;
  background:linear-gradient(to top,rgba(5,3,10,.6),rgba(5,3,10,.12)); transition:background .2s; z-index:2 }
.trailer .t-play:hover{ background:rgba(5,3,10,.34) }
.trailer .t-play .pbtn{ width:74px; height:74px; border-radius:50%; background:var(--grad); display:grid; place-items:center;
  color:#fff; box-shadow:var(--shadow-brand); transition:transform .18s }
.trailer .t-play:hover .pbtn{ transform:scale(1.09) }
.trailer .t-play .pbtn svg{ margin-left:4px }
.trailer .t-label{ position:absolute; top:14px; left:16px; z-index:3; color:#fff; font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:7px; text-shadow:0 2px 10px rgba(0,0,0,.7) }
.trailer .t-fs{ position:absolute; top:12px; right:12px; z-index:3; width:40px; height:40px; border-radius:11px;
  background:rgba(5,3,10,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:.15s }
.trailer .t-fs:hover{ background:rgba(5,3,10,.82) }
.trailer iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1 }
.trailer:fullscreen{ border-radius:0; border:none }

/* ---- Emre review block -------------------------------------------------- */
.review-block{ padding:24px; border-radius:var(--r-xl); background:var(--grad-soft); border:1px solid var(--brand-line); margin-block:26px }
.review-block .rb-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px }
.review-block .verdict{ font-size:19px; font-weight:800; line-height:1.35; margin-bottom:12px; color:var(--ink) }
.review-block .body{ color:var(--soft); line-height:1.75 }
.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px }
.pc{ padding:14px 16px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line) }
.pc h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; display:flex; align-items:center; gap:6px }
.pc.pro h4{ color:var(--ok) } .pc.con h4{ color:var(--err) }
.pc p{ font-size:14.5px; color:var(--soft) }

/* ---- AI panels ---------------------------------------------------------- */
.ai-panel{ border-radius:var(--r-xl); border:1px solid var(--brand-line); overflow:hidden; margin-block:22px;
  background:linear-gradient(180deg,var(--brand-soft),transparent) }
.ai-panel .ai-head{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line) }
.ai-panel .ai-ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--grad); color:#fff; flex-shrink:0 }
.ai-panel .ai-head b{ font-size:16px } .ai-panel .ai-head span{ font-size:13px; color:var(--mut); display:block }
.ai-panel .ai-body{ padding:20px }
.ai-panel .ai-body p{ color:var(--soft); line-height:1.75 }
.ai-out{ white-space:pre-wrap; line-height:1.8; color:var(--ink) }
.ai-badge{ margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-3); background:var(--surface); border:1px solid var(--brand-line); padding:4px 10px; border-radius:var(--r-full) }
.spinner{ width:18px; height:18px; border:2.5px solid var(--brand-soft); border-top-color:var(--brand); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:-3px }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---- Rating widget ------------------------------------------------------ */
.rate-box{ padding:20px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); margin-block:22px }
.rate-box h3{ margin-bottom:6px; display:flex; align-items:center; gap:9px }
.stars{ display:flex; gap:4px; margin-top:12px; flex-wrap:wrap; max-width:100% }
.stars button{ background:none; border:none; cursor:pointer; color:var(--line-2); padding:2px; transition:transform .1s,color .1s; flex:0 0 auto; line-height:0 }
.stars button svg{ width:clamp(22px,6.4vw,30px); height:clamp(22px,6.4vw,30px); fill:currentColor }
.stars button:hover{ transform:scale(1.18) }
.stars.on button.lit{ color:var(--gold) }
.rate-val{ font-size:15px; font-weight:700; color:var(--gold); min-width:52px }

/* ---- Comments ----------------------------------------------------------- */
.comment-form textarea{ width:100%; min-height:96px; padding:14px; border-radius:var(--r); resize:vertical;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-size:15px; line-height:1.6 }
.comment-form textarea:focus{ border-color:var(--brand-line); outline:none }
.comment{ display:flex; gap:13px; padding:16px 0; border-bottom:1px solid var(--line) }
.comment .ava{ width:42px; height:42px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#fff; font-weight:700; overflow:hidden }
.comment .ava img{ width:100%; height:100%; object-fit:cover }
.comment .c-body b{ font-size:14.5px } .comment .c-body .when{ color:var(--mut); font-size:12.5px; margin-left:8px }
.comment .c-body p{ margin-top:5px; color:var(--soft); line-height:1.65 }

/* ---- Auth chip / dropdown ---------------------------------------------- */
.user-chip{ display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--line); cursor:pointer }
.user-chip img,.user-chip .ava{ width:30px; height:30px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:var(--grad); color:#fff; font-weight:700; font-size:13px }
.user-chip span{ font-size:14px; font-weight:600; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ---- Empty / toast ------------------------------------------------------ */
.empty{ text-align:center; padding:60px 20px; color:var(--mut) }
.empty svg{ margin:0 auto 14px; color:var(--brand-3); opacity:.6 }
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(120px); z-index:200;
  background:var(--elev); border:1px solid var(--brand-line); color:var(--ink); padding:13px 20px; border-radius:var(--r-full);
  box-shadow:var(--shadow-lg); font-weight:600; font-size:14.5px; transition:transform .3s cubic-bezier(.2,.9,.3,1.3); display:flex; gap:9px; align-items:center }
.toast.show{ transform:translateX(-50%) translateY(0) }
.toast.err{ border-color:var(--err) }

/* ---- Footer ------------------------------------------------------------- */
.site-footer{ margin-top:60px; border-top:1px solid var(--line); background:var(--surface); padding-block:44px 28px }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px }
.foot-grid h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); margin-bottom:14px }
.foot-grid a{ display:block; color:var(--soft); font-size:14.5px; padding:5px 0; transition:color .15s }
.foot-grid a:hover{ color:var(--brand-3) }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:22px; color:var(--mut); font-size:13.5px }

/* ---- Modal (login) ------------------------------------------------------ */
.modal-back{ position:fixed; inset:0; z-index:120; background:rgba(6,2,14,.66); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px }
.modal-back.open{ display:flex; animation:fade .2s }
@keyframes fade{ from{ opacity:0 } }
.modal{ width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-2xl);
  padding:34px 30px; box-shadow:var(--shadow-lg); text-align:center; animation:pop .25s cubic-bezier(.2,.9,.3,1.2) }
@keyframes pop{ from{ transform:scale(.94) translateY(10px); opacity:0 } }
.modal .logo{ width:56px; height:56px; border-radius:16px; background:var(--grad); display:grid; place-items:center; margin:0 auto 16px; box-shadow:var(--shadow-brand); color:#fff }
.modal h3{ margin-bottom:6px } .modal p{ color:var(--mut); margin-bottom:24px; font-size:14.5px }
.modal .x{ position:absolute; top:16px; right:16px }

/* ---- Pagination --------------------------------------------------------- */
.pager{ display:flex; justify-content:center; gap:8px; margin-top:34px }
.pager a,.pager span{ min-width:42px; height:42px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line); font-weight:600; color:var(--soft) }
.pager a:hover{ border-color:var(--brand-line); color:var(--ink) }
.pager .cur{ background:var(--grad); color:#fff; border-color:transparent }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr } .hero-collage{ display:none }
  .movie-top{ grid-template-columns:200px 1fr }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .nav-links{ display:none }
  .hamb{ display:grid }
}
@media (max-width:680px){
  .searchbox{ display:none }
  .nav{ gap:10px } .nav-actions{ gap:6px } .brand{ font-size:18px } .brand .logo{ width:34px; height:34px }
  .movie-top{ grid-template-columns:1fr } .movie-poster{ position:static; max-width:230px; margin-inline:auto }
  .pros-cons{ grid-template-columns:1fr } .credits{ grid-template-columns:1fr 1fr }
  .cards{ grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:13px }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .user-chip span{ display:none }
  h1{ font-size:clamp(26px,7vw,40px) }
}
@media (max-width:460px){
  .cards{ grid-template-columns:1fr 1fr; gap:11px }
  .credits{ grid-template-columns:1fr }
  .scores-row .big-score{ min-width:calc(50% - 7px); flex:1 }
  .foot-grid{ grid-template-columns:1fr }
}

/* ---- Mobile drawer ------------------------------------------------------ */
.drawer{ position:fixed; inset:0; z-index:100; display:none }
.drawer.open{ display:block }
.drawer .scrim{ position:absolute; inset:0; background:rgba(6,2,14,.6); backdrop-filter:blur(4px) }
.drawer .panel{ position:absolute; top:0; right:0; bottom:0; width:min(84vw,320px); background:var(--surface);
  border-left:1px solid var(--line); padding:22px; display:flex; flex-direction:column; gap:6px; animation:slideIn .25s ease }
@keyframes slideIn{ from{ transform:translateX(100%) } }
.drawer .panel a{ padding:13px 14px; border-radius:var(--r-sm); font-weight:600; color:var(--soft) }
.drawer .panel a:hover{ background:var(--brand-soft); color:var(--ink) }
.drawer .panel .dhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }

/* ---- Paylaş: buton mobil taşma koruması --------------------------------- */
@media (max-width:560px){
  .actions-row{ gap:9px }
  .actions-row .btn{ flex:1 1 auto; justify-content:center; min-width:0 }
  .actions-row .btn span, .actions-row .btn{ white-space:nowrap }
}

/* ---- Paylaş sayfası (modal) --------------------------------------------- */
.share-sheet{ max-width:440px; text-align:left }
.share-sheet h3{ display:flex; align-items:center; gap:9px }
.share-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
.share-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:15px 16px;
  border:1px solid var(--line-2); border-radius:var(--r-xl); background:var(--surface-2); color:var(--ink);
  text-align:left; cursor:pointer; transition:transform .15s, border-color .15s; -webkit-tap-highlight-color:transparent }
.share-opt:hover{ border-color:var(--brand); transform:translateY(-2px) }
.share-opt .so-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-3); margin-bottom:9px }
.share-opt b{ font-size:14.5px; font-weight:700 }
.share-opt small{ color:var(--mut); font-size:12px }
.share-opt.is-primary{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:14px;
  background:var(--grad); color:#fff; border:none; box-shadow:var(--shadow-brand) }
.share-opt.is-primary .so-ic{ background:rgba(255,255,255,.22); color:#fff; margin-bottom:0; flex:0 0 auto }
.share-opt.is-primary small{ color:rgba(255,255,255,.88) }
.share-opt[aria-busy="true"]{ opacity:.6; pointer-events:none }
.share-status{ margin-top:16px; padding:11px 14px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600;
  background:var(--brand-soft); color:var(--brand-3); display:flex; align-items:center; gap:8px }
.share-spin{ width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; display:inline-block; animation:spin .7s linear infinite; flex:0 0 auto }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---- Story şablonu — 1080×1920, Instagram güvenli alanı (html2canvas) --- */
#story-stage{ position:absolute; left:-99999px; top:0; width:1080px; height:1920px; pointer-events:none; z-index:-1 }
.story-card{ position:relative; width:1080px; height:1920px; overflow:hidden;
  background:#0a0710; color:#fff; font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif }
.story-card .st-photo{ position:absolute; inset:0; background-size:cover; background-position:center }
.story-card .st-grad{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,7,16,.72) 0%, rgba(10,7,16,.12) 15%, rgba(10,7,16,0) 30%, rgba(10,7,16,.4) 46%, rgba(10,7,16,.9) 62%, #0a0710 76%, #0a0710 100%) }
/* İçerik güvenli alanda: üstte ~520px foto, altta ~300px boşluk (IG arayüzü) */
.story-card .st-content{ position:absolute; left:0; right:0; bottom:300px; padding:0 84px }
.story-card .st-head{ display:flex; align-items:flex-end; gap:44px; margin-bottom:56px }
.story-card .st-poster{ flex:0 0 300px; width:300px; height:450px; border-radius:26px;
  background-size:cover; background-position:center; border:2px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.7) }
.story-card .st-titlewrap{ padding-bottom:10px; min-width:0 }
.story-card .st-title{ font-size:88px; line-height:1.03; font-weight:800; letter-spacing:-1.5px;
  text-shadow:0 4px 30px rgba(0,0,0,.55) }
.story-card .st-meta{ font-size:37px; font-weight:600; color:#cbbfe0; margin-top:24px }
.story-card .st-scores{ display:flex; gap:44px; margin-bottom:56px }
.story-card .st-score{ text-align:center }
.story-card .st-score b{ box-sizing:border-box; display:block; width:176px; height:176px; line-height:164px;
  text-align:center; border-radius:50%; font-size:70px; font-weight:800; border:6px solid; background:rgba(255,255,255,.05) }
.story-card .st-score span{ display:block; margin-top:18px; font-size:31px; font-weight:700; color:#bcaed6 }
.story-card .st-score.muti b{ border-color:#a855f7; color:#dcc0ff }
.story-card .st-score.imdb b{ border-color:#f5c518; color:#ffe483 }
.story-card .st-score.comm b{ border-color:#2dd4bf; color:#9ff3e8 }
.story-card .st-verdict{ font-size:46px; line-height:1.34; font-weight:600; font-style:italic; color:#efe6fb;
  margin-bottom:56px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.story-card .st-brand{ display:flex; align-items:center; gap:18px; font-size:40px; font-weight:800; letter-spacing:3px }
.story-card .st-logo{ width:68px; height:68px; border-radius:19px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#8b5cf6,#c084fc); box-shadow:0 8px 30px rgba(139,92,246,.55) }
.story-card .st-logo svg{ width:36px; height:36px }

/* ---- Story önizleme (modal içi: oluşan görsel + Kaydet/Paylaş) --------- */
.share-sheet{ max-height:90vh; overflow-y:auto }
.story-result{ text-align:center }
.story-img{ display:block; width:auto; max-width:100%; max-height:56vh; margin:0 auto 16px;
  border-radius:14px; border:1px solid var(--line-2); box-shadow:0 18px 50px rgba(0,0,0,.4) }
.story-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.story-actions .btn{ flex:1 1 auto; justify-content:center; min-width:104px }
.story-hint{ margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--mut) }