/* Ana sayfa "Aktif İzleyiciler" modülü (yeni tasarım, 2026-10) */
.ai{
	--kir1:#d72f2a; --kir2:#960d0d;
	position:relative; width:980px; margin:20px auto 10px; color:#c0c0c0;
}
.ai *{box-sizing:border-box;}
/* style.css'teki a:link/a:visited kuralını ezmek için a.sınıf */
.ai a.ai-tum{position:absolute; right:4px; top:9px; font-size:12px; font-weight:bold; color:#ccc; text-decoration:none;}
.ai a.ai-tum:hover{color:#fff; text-decoration:underline;}

/* liste: iki sütun, sıra yukarıdan aşağı */
.ai-liste{
	display:grid; grid-auto-flow:column; grid-template-columns:1fr 1fr; grid-template-rows:repeat(var(--satir,12),auto);
	gap:5px 12px; margin:0; padding:0 0 0 13px; list-style:none; transition:opacity .2s;
	font-family:"Segoe UI","Open Sans",Tahoma,Arial,sans-serif;
}
.ai-liste.yukleniyor{opacity:.6;}

/* kanal kartı: logo | (pay çubuğu + oran) / (yayındaki program) */
.ai-k{
	position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) auto; grid-template-rows:20px 19px; column-gap:8px;
	align-items:center; min-width:0; padding:3px 9px 3px 3px;
	background:linear-gradient(#1f1f1f,#151515); border:1px solid #2a2a2a; border-radius:5px; transition:border-color .15s,background .15s;
}
.ai-k:hover{border-color:#c8202a; background:linear-gradient(#2a1719,#180c0d);}
.ai-k:hover .ai-prog{color:#fff;}
.ai a.ai-kanal{display:contents;}
.ai-kanal::after{content:""; position:absolute; inset:0; border-radius:5px;} /* kartın tamamı tıklanır */
.ai-kanal img{grid-row:1 / 3; width:52px; height:39px; border-radius:3px; background:#fff; display:block;}

/* izleyici payı */
.ai-pay{display:block; height:15px; background:#2b2b2b; border-radius:5px; overflow:hidden;}
.ai-pay span{display:block; height:100%; min-width:8px; border-radius:5px; background:linear-gradient(var(--kir1),var(--kir2));}
.ai-oran{min-width:46px; text-align:right; font-size:13px; font-weight:700; color:#fff; white-space:nowrap;}

/* yayındaki program */
.ai-prog{grid-column:2 / 4; display:flex; gap:8px; min-width:0; font-size:12px; line-height:19px; white-space:nowrap; color:#e6e6e6;}
.ai-ad{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.ai-prog em{flex-shrink:0; font-style:normal; font-size:11.5px; color:#8f959f;}
.ai-ad::before{content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#ff1f1f; vertical-align:1px; animation:ai-nabiz 1.6s ease-in-out infinite;}
.ai-yok{color:#6f747d;}
@keyframes ai-nabiz{50%{opacity:.35;}}
@media (prefers-reduced-motion:reduce){.ai-ad::before{animation:none;} .ai-liste{transition:none;}}