/* ============================================================
   kültfilmler — LİSTELER (index) + LİSTE DETAY (user_list)
   Tasarım: özel tasarım
   (kendine yeterli; kart ailesini de içerir)
   ============================================================ */

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

/* TITLE ROW (index) */
.titlerow{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-top:24px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.titlerow h1{ font-family:var(--display); font-weight:700; letter-spacing:-.4px; font-size:26px; color:#f3f3f3; }
.titlerow .sub{ font-size:12.5px; color:var(--faint); margin-top:5px; }

/* SORT DROPDOWN */
.drop{ position:relative; }
.drop .btn{ display:flex; align-items:center; gap:9px; height:38px; padding:0 13px; border-radius:8px; 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; white-space:nowrap; }
.drop .btn:hover, .drop.open .btn{ border-color:var(--line-2); background:var(--card); }
.drop .btn .dico{ color:var(--faint); display:flex; }
.drop .btn .chev{ margin-left:2px; color:var(--faint); transition:transform .18s; }
.drop.open .btn .chev{ transform:rotate(180deg); }
.fmenu{ position:absolute; z-index:30; top:calc(100% + 6px); right:0; min-width:100%; padding:5px; border-radius:9px; background:#202024; border:1px solid var(--line-2); box-shadow:0 18px 40px -12px rgba(0,0,0,.7); opacity:0; visibility:hidden; transform:translateY(-4px); transition:.15s; }
.drop.open .fmenu{ opacity:1; visibility:visible; transform:translateY(0); }
.fmenu a{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:8px 11px; border-radius:6px; color:var(--muted); font-size:12.5px; font-weight:500; white-space:nowrap; transition:.12s; }
.fmenu a:hover{ background:var(--card-2); color:var(--ink); }
.fmenu a.on{ color:#fff; }
.fmenu a.on::after{ content:"✓"; color:var(--orange); font-weight:700; }

/* LIST GRID */
.lgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px 18px; padding-top:26px; align-items:start; }
.lcard{ background:var(--bg-2); border:1px solid var(--line); border-radius:11px; overflow:hidden; cursor:pointer; transition:transform .22s ease, border-color .22s, box-shadow .22s; display:block; }
.lcard:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 18px 36px -18px rgba(0,0,0,.75); }
.lcollage{ position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; background:var(--line); }
.lp{ position:relative; aspect-ratio:2/3; overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px), radial-gradient(130% 100% at 50% -10%, var(--t,rgba(150,95,72,.45)), transparent 60%), linear-gradient(158deg, #2b211f, #14100e); }
.lp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lp em{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; font-family:var(--serif); font-style:italic; font-size:11px; line-height:1.25; color:rgba(236,228,224,.62); text-shadow:0 1px 6px rgba(0,0,0,.5); }
.lcollage::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,14,12,.5), transparent 38%); pointer-events:none; }
.lbody{ padding:14px 15px 13px; }
.lbody h3{ font-family:var(--sans); font-size:14px; font-weight:700; line-height:1.32; color:#f1f1f2; min-height:2.64em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lmeta{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.lcurator{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--muted); min-width:0; }
.lcurator span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lcurator .dot{ width:18px; height:18px; flex:none; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,var(--orange),var(--orange-deep)); color:#241a09; }
.lcurator .dot svg{ width:11px; height:11px; }
.lcount{ font-size:12px; font-weight:700; color:var(--orange); white-space:nowrap; flex:none; }

/* PAGINATION */
.pager{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:34px; flex-wrap:wrap; }
.pager a, .pager span.cur{ min-width:36px; height:36px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:var(--bg-2); color:var(--muted); font-size:12.5px; font-weight:600; transition:.15s; display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.pager a:hover{ color:var(--ink); border-color:var(--line-2); }
.pager span.cur{ background:linear-gradient(180deg,var(--orange),var(--orange-deep)); color:#241a09; border-color:transparent; }
.pager .gap{ color:var(--faint); padding:0 2px; }

/* LIST HERO (detay) */
.lhero{ position:relative; margin-top:14px; border-radius:11px; overflow:hidden; border:1px solid var(--line); }
.lhero-bg{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); filter:blur(3px); transform:scale(1.08); opacity:.5; }
.lhero-bg div{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px), radial-gradient(130% 100% at 50% -10%, var(--t), transparent 60%), linear-gradient(158deg, #2b211f, #14100e); }
.lhero-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,14,18,.94) 0%, rgba(16,14,18,.82) 100%); }
.lhero-body{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 26px; }
.lhero h1{ font-family:var(--display); font-weight:700; letter-spacing:-.4px; font-size:22px; line-height:1.25; color:#fff; }
.lhero .right{ display:flex; align-items:center; gap:20px; flex:none; }
.creator{ display:flex; align-items:center; gap:11px; }
.creator .av{ width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center; background:linear-gradient(180deg,var(--orange),var(--orange-deep)); color:#241a09; }
.creator .ct .lbl{ font-size:9.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--faint); font-weight:700; white-space:nowrap; }
.creator .ct .nm{ font-size:13.5px; font-weight:700; color:#ececed; margin-top:1px; white-space:nowrap; }
.creator .ct a.nm{ text-decoration:none; transition:color .15s; }
.creator .ct a.nm:hover{ color:var(--orange); }
.socials{ display:flex; gap:8px; }
.socials a{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; transition:.15s; }
.socials a:hover{ filter:brightness(1.12); transform:translateY(-2px); }
.socials .fb{ background:#1877f2; }
.socials .tw{ background:#111114; border:1px solid var(--line-2); }
.socials .ig{ background:radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 70%, #285AEB 110%); }

/* FILMS SECTION (detay) */
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:34px; margin-bottom:18px; }
.sec-head h2{ font-family:var(--display); font-weight:700; letter-spacing:-.4px; font-size:20px; color:#f2f2f3; }
.sec-head .num{ font-size:12px; color:var(--faint); font-family:var(--sans); font-weight:500; }
.sec-head .order{ font-size:11.5px; color:var(--faint); }

/* Liste sahibi araç çubuğu (başlık yanında, tema çipleri) + film çıkar (×) */
.sh-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.lowner{ display:inline-flex; align-items:center; gap:7px; }
.lo-btn{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:var(--bg-2); color:var(--muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap; }
.lo-btn svg{ opacity:.8; }
.lo-btn:hover{ color:var(--ink); border-color:var(--line-2); background:var(--card); }
.lo-btn:disabled{ opacity:.55; cursor:default; }
.lo-del{ color:#d68a9c; }
.lo-del:hover{ color:#f0a3b5; background:rgba(216,83,107,.14); border-color:rgba(216,83,107,.45); }
.lwrap{ position:relative; min-width:0; } /* min-width:0 ŞART: grid item'ın min-content (uzun başlık) yüzünden kolonu genişletmesini engeller — .mcard'daki overflow:hidden'ın yaptığını .lwrap için yapar → sahip/misafir eşit kolon */
.lremove{ position:absolute; top:8px; right:8px; z-index:7; width:28px; height:28px; border:1px solid var(--line-2); border-radius:8px; background:rgba(10,8,8,.78); color:#fff; cursor:pointer; display:grid; place-items:center; opacity:0; transform:scale(.9); transition:.15s; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.lwrap:hover .lremove{ opacity:1; transform:scale(1); }
.lremove:hover{ background:#d8536b; border-color:transparent; }

/* FİLM KARTI (paylaşılan) — tek satırda 6 film. Posterler aspect-ratio 2/3 ile EŞİT;
   yükseklik bağımlılığı (height:100%/stretch) YOK → .lwrap sarmalı (sahip modu) layout'u
   etkileyemez, sahip+misafir birebir aynı, altta boşluk oluşmaz. */
.grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px 14px; align-items:start; }
.mcard{ position:relative; cursor:pointer; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:transform .22s ease, border-color .22s, box-shadow .22s; display:block; }
.mcard:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 16px 34px -18px rgba(0,0,0,.75); }
.rankbadge{ position:absolute; top:9px; left:9px; z-index:5; width:24px; height:24px; border-radius:7px; background:rgba(14,10,9,.75); border:1px solid var(--line-2); backdrop-filter:blur(3px); display:grid; place-items:center; font-size:11.5px; font-weight:800; color:#f3d39b; }
.poster{ position:relative; height:0; padding-bottom:150%; overflow:hidden; /* 150% = 2:3 oran (aspect-ratio yerine: .lwrap sarmalı/flex/tarayıcı quirk'inden bağımsız KESİN) */
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 9px), radial-gradient(125% 100% at 50% -12%, var(--tint,rgba(150,95,72,.3)), transparent 58%), linear-gradient(158deg, #2b211f 0%, #181210 100%); }
.poster .pimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.poster .pscrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,6,6,.7), transparent 34%); z-index:2; }
.pcenter{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:8px; text-align:center; }
.pcenter svg{ color:rgba(255,255,255,.26); }
.pcenter em{ font-family:var(--serif); font-style:italic; font-size:14px; color:rgba(232,222,217,.5); }
.pfoot{ position:absolute; left:11px; right:11px; bottom:10px; z-index:3; display:flex; align-items:flex-end; justify-content:space-between; }
.plang{ font-size:10px; font-weight:600; color:rgba(238,232,229,.82); }
.pyear{ font-size:12px; font-weight:700; color:#f1edeb; }
.pplay{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; opacity:0; background:rgba(10,8,8,.28); transition:.18s; }
.mcard:hover .pplay{ opacity:1; }
.pplay span{ width:42px; height:42px; border-radius:50%; background:rgba(232,162,60,.95); color:#241a09; display:grid; place-items:center; box-shadow:0 6px 18px -4px rgba(0,0,0,.6); }
.mbody{ padding:11px 12px 12px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.mbody h3{ font-family:var(--sans); font-size:13.5px; font-weight:700; letter-spacing:.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#f1f1f2; }
.mbody .gen{ font-size:11px; color:var(--faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mtx{ flex:1; min-width:0; }
.mscore{ flex:none; text-align:center; line-height:1; padding-top:2px; }
.mscore b{ display:block; font-size:18px; font-weight:800; color:var(--orange); }
.mscore small{ font-size:7.5px; font-weight:800; letter-spacing:.5px; color:var(--faint); }
.imdb-tag{ display:inline-grid; place-items:center; height:15px; padding:0 4px; border-radius:3px; background:var(--orange); color:#241a09; font-size:9px; font-weight:800; letter-spacing:.3px; line-height:1; }

.empty{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:12px; padding:70px 0; text-align:center; color:var(--faint); }
.empty svg{ opacity:.5; }

@media (max-width:1380px){ .grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:1140px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1000px){
  .lgrid{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lhero h1{ font-size:19px; }
}
@media (max-width:680px){
  .lgrid{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .titlerow{ flex-direction:column; align-items:stretch; gap:14px; }
  .titlerow h1{ font-size:24px; }
  .titlerow .drop .btn{ width:100%; justify-content:space-between; }
  .lhero-body{ flex-direction:column; align-items:flex-start; gap:18px; padding:20px; }
  .lhero h1{ font-size:18px; }
  .lhero .right{ width:100%; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
  .creator{ min-width:0; flex:1; } .creator .ct{ min-width:0; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:6px; margin-top:26px; }
  .sec-head h2{ font-size:18px; }
  .sh-left{ width:100%; gap:9px; flex-wrap:nowrap; } /* başlık + ikon butonlar tek satır */
  .sh-left h2{ margin-right:auto; }
  .lowner{ gap:6px; }
  .lo-btn{ width:34px; padding:0; justify-content:center; } /* mobilde ikon-only */
  .lo-btn span{ display:none; }
  .grid .mcard{ position:relative; }
  .grid .mcard .mscore{ position:absolute; top:7px; right:7px; z-index:6; display:flex; align-items:center; gap:4px; padding:3px 7px; border-radius:7px; background:rgba(10,8,8,.74); border:1px solid var(--line-2); backdrop-filter:blur(3px); }
  .grid .mcard .mscore b{ display:inline; font-size:12.5px; }
  .grid .mcard .mscore small{ font-size:7px; }
  .lremove{ opacity:1; transform:none; } /* dokunmatik: çıkar düğmesi hep görünür */
}