/*
 * DOSYA YOLU : /module/reco/assets/rc.css   (YENİ DOSYA)
 * AÇIKLAMA   : Ana sayfa öneri rafları (önek: rc-): yatay kaydırmalı raf, "İzlemeye devam et" kartı ve ilerleme çubuğu.
 *              Video kartları ana sayfanın db- stillerini kullanır. Sadece core.css / yt.css değişkenlerine (--st-*) bağlıdır.
 */
.rc-shelf { padding: 8px 12px 6px; }
.rc-shelf[hidden] { display: none; }
.rc-shelf__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rc-shelf__head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.rc-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.rc-row::-webkit-scrollbar { display: none; }
.rc-row > .db-card, .rc-row > .rc-card { flex: none; width: 250px; scroll-snap-align: start; }
@media (min-width: 768px) {
  .rc-shelf { padding: 12px 24px 6px; }
  .rc-row { gap: 16px; }
  .rc-row > .db-card, .rc-row > .rc-card { width: 290px; }
}

/* ---------- İzlemeye devam et kartı ---------- */
.rc-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--st-surface-2); }
.rc-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rc-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, hsl(var(--rc-h, 260), 62%, 42%), hsl(calc(var(--rc-h, 260) + 55), 68%, 28%)); }
.rc-dur { position: absolute; right: 4px; bottom: 8px; padding: 1px 4px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 16px; color: #fff; background: rgba(0, 0, 0, .8); }
.rc-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .3); }
.rc-prog i { display: block; width: 0; height: 100%; background: #f03; }
.rc-card__t { font-size: 16px; font-weight: 500; line-height: 22px; }
.rc-card__t a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-card__by { margin-top: -4px; font-size: 14px; line-height: 20px; color: var(--st-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .12s, background .12s; }
.rc-x:hover { background: rgba(0, 0, 0, .85); }
.rc-card:hover .rc-x, .rc-x:focus-visible { opacity: 1; }
@media (hover: none) { .rc-x { opacity: .85; } }