/* ============================================================
   "Eng sara va ko'p ko'rilgan kurslar" karuseli (mustaqil blok)
   Faqat .tcs* selektorlari — saytning qolgan uslublariga tegmaydi.
   Ranglar mavjud CSS o'zgaruvchilaridan olinadi => dark/light mos.
   ============================================================ */
.tcs{
  position:relative; padding:56px 0 64px; overflow:hidden;
  border-top:1px solid var(--line);
  background:
    radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
    var(--bg-soft);
}
.tcs__head{ text-align:center; margin-bottom:26px }
.tcs__head h2{ margin:0 0 8px; font-size:clamp(22px,3.4vw,30px); letter-spacing:-.02em; color:var(--ink) }
.tcs__head p{ margin:0 auto; max-width:640px; color:var(--ink-2); font-size:15px }

.tcs__rail{
  width:100%; overflow:hidden; padding:10px 0;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.tcs__rail + .tcs__rail{ padding-top:0 }

.tcs-track{ display:flex; gap:20px; width:max-content; animation:tcs-scroll 42s linear infinite }
.tcs-track--rev{ animation-name:tcs-scroll-rev; animation-duration:48s }
.tcs__rail:hover .tcs-track{ animation-play-state:paused }

@keyframes tcs-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes tcs-scroll-rev{ from{transform:translateX(-50%)} to{transform:translateX(0)} }

.tcs-item{
  position:relative; flex:0 0 auto; width:200px; height:200px;
  border-radius:16px; overflow:hidden; text-decoration:none;
  border:1px solid var(--line); background:var(--bg);
  box-shadow:var(--shadow-s);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.tcs-item img{ width:100%; height:100%; object-fit:cover }
.tcs-item:hover{ transform:scale(1.05); box-shadow:var(--shadow-m); filter:brightness(1.06) }
.tcs-item__cap{
  position:absolute; inset:auto 0 0 0; padding:26px 12px 10px;
  color:#fff; font-size:13px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  background:linear-gradient(to top, rgba(6,10,20,.88), rgba(6,10,20,.55) 55%, transparent);
}
.tcs__foot{ margin-top:28px; display:flex; justify-content:center }

@media (min-width:768px){ .tcs-item{ width:248px; height:248px } }
@media (max-width:520px){ .tcs-item{ width:160px; height:160px } .tcs-track{ gap:14px } }
@media (prefers-reduced-motion:reduce){
  .tcs-track{ animation:none }
  .tcs__rail{ overflow-x:auto; -webkit-mask:none; mask:none }
}