/* Kanal listesi bileşenleri — index.html (#kanallar) ve kanallar.html ortak kullanır.
   Renk/font token'ları (--fg, --surface, --f-display …) sayfanın kendisinden gelir. */

.ch-root{--g-dram:#8826FF;--g-komedi:#CCFA00;--g-romantik:#FF4F8B;--g-aksiyon:#FF7A1A;--g-tarih:#E3B23C;
  --g-aile:#22D3B6;--g-eglence:#3D7BFF;--g-film:#C9C2DE;--g-diger:#6E6987;--g-yok:transparent}
:root[data-theme="light"] .ch-root{--g-komedi:#8DB000;--g-tarih:#C9921A;--g-film:#8C84A6}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .ch-root{--g-komedi:#8DB000;--g-tarih:#C9921A;--g-film:#8C84A6}}

/* sekmeler (index.html'deki .tabs ile aynı görünüm; kanallar.html'de de çalışsın diye burada) */
.ch-root .tabs{display:flex;padding:4px;gap:4px;border:1px solid var(--line-strong)}
.ch-root .tab{height:46px;padding:0 18px;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--fg);font:inherit;font-weight:600;cursor:pointer;transition:background-color .16s,color .16s}
.ch-root .tab small{font-family:var(--f-mono);font-size:12px;font-weight:400;opacity:.65}
.ch-root .tab[aria-selected="true"]{background:var(--fg);color:var(--bg)}
@media (max-width:560px){.ch-root .tabs{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.ch-root .tab{justify-content:center;padding:0 8px;font-size:14px}}

/* tür dağılımı */
.ch-dist{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.ch-bar{display:flex;gap:2px;height:14px}
.ch-bar span{min-width:3px;background:var(--gc);transition:opacity .2s,flex-grow .45s cubic-bezier(.2,.8,.2,1)}
.ch-bar span.is-yok{background:repeating-linear-gradient(135deg,var(--line-strong) 0 4px,transparent 4px 8px)}
.ch-bar.has-sel span:not(.on){opacity:.22}
.ch-legend{display:flex;flex-wrap:wrap;gap:8px}
.ch-legend button,.ch-langs button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);font:inherit;font-size:13px;cursor:pointer;transition:background-color .15s,border-color .15s}
.ch-legend i{width:10px;height:10px;background:var(--gc);flex:none}
.ch-legend .is-yok i{background:none;border:1px dashed var(--muted)}
.ch-legend small,.ch-langs small{font-family:var(--f-mono);font-size:11px;opacity:.6}
.ch-legend button:hover{border-color:var(--gc,var(--hover))}
.ch-legend button[aria-pressed="true"]{border-color:var(--gc);background:color-mix(in srgb,var(--gc) 20%,transparent)}
.ch-legend .is-yok[aria-pressed="true"]{border-color:var(--muted);background:var(--surface2)}

/* araçlar */
.ch-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px}
.ch-search{flex:1 1 240px;min-height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--line-strong);color:var(--fg);font:inherit;font-size:15px}
.ch-search:focus-visible,.ch-sort select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ch-langs{display:flex;flex-wrap:wrap;gap:6px}
.ch-langs button{min-height:36px;padding:0 10px;border-color:var(--line);color:var(--muted);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}
.ch-langs button:hover{color:var(--fg);border-color:var(--line-strong)}
.ch-langs button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ch-sort{display:flex;align-items:center;gap:8px;margin-left:auto}
.ch-sort .mono{font-size:11px;color:var(--muted)}
.ch-sort select{min-height:38px;padding:0 10px;background:var(--surface);color:var(--fg);border:1px solid var(--line-strong);font:inherit;font-size:14px}

/* öne çıkanlar */
.ch-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.ch-feat:empty{display:none}
.ch-fcard{position:relative;isolation:isolate;display:flex;align-items:flex-end;height:clamp(132px,11vw,168px);min-width:0;padding:14px;overflow:hidden;
  background:radial-gradient(120% 140% at 85% 0%,color-mix(in srgb,var(--gc) 45%,transparent),transparent 60%),var(--surface2);
  color:#fff;text-decoration:none;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 8px,100% 100%,0 100%)}
.ch-fbg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.ch-fbg.is-in{opacity:1}
.ch-fbg.is-av{filter:blur(26px) saturate(1.3);transform:scale(1.5)}
.ch-fbg.is-av.is-in{opacity:.6}
.ch-fcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,3,14,.9) 0%,rgba(6,3,14,.45) 50%,rgba(6,3,14,.08) 100%);transition:opacity .2s}
.ch-fcard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gc)}
.ch-fcard:hover{color:#fff} .ch-fcard:hover::before{opacity:.8}
.ch-fcard .ch-av{width:48px;height:48px;outline:2px solid rgba(255,255,255,.85)}
.ch-fin{display:flex;align-items:center;gap:12px;min-width:0}
.ch-fin .ch-name{font-family:var(--f-display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:15px;line-height:1.1;-webkit-line-clamp:1}
.ch-fin .ch-meta{color:rgba(255,255,255,.82)}
/* dar ekranda yatay kaydırma yok: tablette 2, telefonda 1 kart */
@media (max-width:900px){.ch-feat{grid-template-columns:repeat(2,minmax(0,1fr))}.ch-fcard:nth-child(3){display:none}}
@media (max-width:560px){.ch-feat{grid-template-columns:minmax(0,1fr)}.ch-fcard:nth-child(2){display:none}.ch-fcard{height:150px}}

/* kart ızgarası */
.ch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px}
.ch-count{margin:0;font-size:12px;color:var(--muted)}
.ch-all{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;text-decoration:none;color:var(--fg);border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.ch-all:hover{color:var(--hover);border-color:var(--hover)}
.ch-grid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.ch-grid li{min-width:0}
.ch-card{display:flex;align-items:center;gap:12px;height:100%;min-height:70px;padding:10px 12px 10px 10px;background:var(--surface);border-left:3px solid var(--gc);color:var(--fg);text-decoration:none;transition:background-color .15s}
.ch-card.is-yok{border-left-color:var(--line-strong)}
.ch-none{color:var(--muted)}
.ch-card:hover{background:var(--surface2);color:var(--fg)}
.ch-card:hover .ch-name{color:var(--hover)}
.ch-av{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:color-mix(in srgb,var(--gc) 32%,var(--surface2));color:var(--fg);font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:15px}
.is-yok .ch-av{background:var(--surface2);color:var(--muted)}
.ch-av img{width:100%;height:100%;object-fit:cover;display:block}
.ch-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ch-name{font-weight:600;font-size:14px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color .15s}
.ch-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--muted)}
.ch-ps{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;padding:2px 5px;background:var(--violet);color:var(--on-brand)}
.ch-em{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;padding:2px 5px;border:1px solid var(--line-strong);color:var(--text2)}
.ch-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line-strong)}
@media (max-width:560px){.ch-sort{margin-left:0}.ch-grid{grid-template-columns:minmax(0,1fr)}}

/* yüklenirken iskelet: veri gelince yerini gerçek kartlar alır, sayfa zıplamaz */
.ch-skel{height:70px;background:linear-gradient(90deg,var(--surface) 0%,var(--surface2) 50%,var(--surface) 100%);background-size:200% 100%;animation:chSkel 1.4s linear infinite}
@keyframes chSkel{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.ch-skel{animation:none}}

/* sayfalama */
.ch-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:22px}
.ch-pager:empty{display:none}
.ch-pager button{min-width:42px;height:42px;padding:0 10px;border:1px solid var(--line);background:transparent;color:var(--fg);font-family:var(--f-mono);font-size:13px;cursor:pointer;transition:border-color .15s,background-color .15s}
.ch-pager button:hover:not(:disabled):not([aria-current]){border-color:var(--hover);color:var(--hover)}
.ch-pager button[aria-current="page"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ch-pager button:disabled{opacity:.35;cursor:default}
.ch-pager .gap{min-width:24px;text-align:center;color:var(--muted);font-family:var(--f-mono)}

/* tablo görünümü (kanallar.html) */
.ch-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
.ch-table th{position:sticky;top:var(--ch-sticky,0px);z-index:2;background:var(--bg);text-align:left;font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:12px 10px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.ch-table th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ch-table th button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ch-table th button::after{content:"↕";opacity:.35}
.ch-table th[aria-sort="ascending"] button::after{content:"↑";opacity:1;color:var(--fg)}
.ch-table th[aria-sort="descending"] button::after{content:"↓";opacity:1;color:var(--fg)}
.ch-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.ch-table tbody tr{transition:background-color .12s}
.ch-table tbody tr:hover{background:var(--surface)}
.ch-table .num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-tname{display:flex;align-items:center;gap:12px;min-width:0;color:var(--fg);text-decoration:none}
.ch-tname .ch-av{width:40px;height:40px;font-size:13px}
.ch-tname:hover .ch-name{color:var(--hover)}
.ch-gchip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ch-gchip i{width:9px;height:9px;background:var(--gc)}
.ch-gchip.is-yok i{background:none;border:1px dashed var(--muted)}
.ch-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ch-yt{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line-strong);color:var(--fg)}
.ch-yt:hover{border-color:var(--hover);color:var(--hover)}
.ch-badges{display:flex;gap:4px;flex-wrap:wrap}
@media (max-width:720px){
  .ch-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ch-table,.ch-table tbody{display:block}
  /* satır: üstte ad + YouTube tuşu, altta tür · dil · kitle · abone · format (sığmazsa alta kayar) */
  .ch-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 0;border-bottom:1px solid var(--line)}
  .ch-table td{display:block;padding:0;border:0;font-size:13px}
  .ch-table td.c-name{order:1;flex:1 1 calc(100% - 60px);min-width:0}
  .ch-table td.c-yt{order:2;flex:none}
  .ch-table td.c-genre{order:3;padding-left:52px}
  .ch-table td.c-lang{order:4;color:var(--muted)}
  .ch-table td.c-aud{order:5;color:var(--text2)}
  .ch-table td.c-subs{order:6}
  .ch-table td.c-sale{order:7;margin-left:auto}
  .ch-table td.c-subs::after{content:" " attr(data-u);font-family:var(--f-body);color:var(--muted)}
  .ch-table td.c-genre .ch-sub{display:none}
  .ch-table .num{text-align:left}
  .ch-table .ch-empty{flex:1 1 100%}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ch-legend .ch-clear{border-style:dashed;color:var(--muted)}
.ch-legend .ch-clear:hover{color:var(--fg);border-color:var(--hover)}

/* kitle bilgisi (kadın oranı · yaş · Türkiye payı) ve kitle filtreleri */
.ch-aud{font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:var(--text2)}
.ch-fin .ch-aud{color:rgba(255,255,255,.75)}
.ch-table td.c-aud{font-family:var(--f-mono);font-size:12px;color:var(--text2);white-space:nowrap}
.ch-tools-aud{margin-top:12px}
.ch-lbl{font-size:11px;color:var(--muted);margin-right:2px}