/*
 * DOSYA YOLU : /module/queue/assets/qu.css   (YENİ DOSYA)
 * AÇIKLAMA   : Oynatma listesi paneli, "Otomatik oynat" çubuğu ve oynatıcı üstündeki "Sıradaki video" kartı (önek: qu-).
 *              Sadece core.css / yt.css değişkenlerine (--st-*) bağlıdır.
 */
.qu-wrap { margin-bottom: 14px; }
.vw-main > .qu-wrap { padding: 12px 12px 0; }
@media (min-width: 768px) and (max-width: 999px) { .vw-main > .qu-wrap { padding: 12px 0 0; } }

/* ---------- Liste paneli ---------- */
.qu { overflow: hidden; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-surface); }
.qu__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px 10px 14px; background: var(--st-surface-2); }
.qu__ttl { display: flex; flex-direction: column; min-width: 0; }
.qu__ttl strong { font-size: 16px; font-weight: 600; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qu__ttl span { font-size: 12px; line-height: 18px; color: var(--st-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qu__ttl b { font-weight: 500; color: var(--st-text); }
.qu__btns { display: flex; flex: none; align-items: center; }
.qu__ib { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--st-text-2); transition: background .12s, color .12s; }
.qu__ib:hover { background: var(--st-surface-3); color: var(--st-text); }
.qu__ib.is-on { color: var(--st-accent); background: var(--st-accent-soft); }
.qu__fold svg { transition: transform .2s; }
.qu.is-fold .qu__fold svg { transform: rotate(180deg); }
.qu.is-fold .qu__list { display: none; }
.qu__list { position: relative; max-height: 404px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; scrollbar-width: thin; }

.qu-it { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 4px; }
.qu-it:hover { background: var(--st-surface-2); }
.qu-it.is-current { background: var(--st-surface-3); }
.qu-it__n { flex: none; display: grid; place-items: center; width: 24px; font-size: 12px; color: var(--st-text-2); font-variant-numeric: tabular-nums; }
.qu-it.is-current .qu-it__n { color: var(--st-text); }
.qu-it__th { position: relative; flex: none; width: 100px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--st-surface-3); }
.qu-it__th img { width: 100%; height: 100%; object-fit: cover; }
.qu-it__th b { position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px; font-size: 11px; font-weight: 500; line-height: 16px; color: #fff; background: rgba(0, 0, 0, .8); }
.qu-it__t { display: flex; flex-direction: column; min-width: 0; }
.qu-it__t strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; }
.qu-it__t small { font-size: 12px; line-height: 18px; color: var(--st-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Otomatik oynat çubuğu ---------- */
.qu-auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--st-surface-2); }
.qu-auto__t { display: flex; flex-direction: column; min-width: 0; }
.qu-auto__t strong { font-size: 14px; font-weight: 500; }
.qu-auto__t small { font-size: 12px; color: var(--st-text-2); }

/* ---------- Oynatıcı üstündeki "Sıradaki video" kartı ---------- */
.qu-next { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, .82); color: #fff; }
.qu-next__card { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; text-align: center; }
.qu-next__lbl { font-size: 13px; color: #cfcfcf; }
.qu-next__img { width: min(240px, 60vw); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.qu-next__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; font-weight: 500; line-height: 22px; }
.qu-next__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.qu-next__ring { display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: qu-spin 1s linear infinite; }
.qu-next__ring b { font-size: 14px; font-weight: 500; animation: qu-spin-r 1s linear infinite; }
.qu-btn { height: 36px; padding: 0 16px; border-radius: 18px; font-size: 14px; font-weight: 500; color: #fff; background: rgba(255, 255, 255, .16); }
.qu-btn:hover { background: rgba(255, 255, 255, .26); }
.qu-btn--primary { color: #0f0f0f; background: #fff; }
.qu-btn--primary:hover { background: #e6e6e6; }
@media (max-width: 599px) { .qu-next__img { display: none; } .qu-next__card { gap: 8px; } }
@keyframes qu-spin { to { transform: rotate(360deg); } }
@keyframes qu-spin-r { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .qu-next__ring, .qu-next__ring b { animation: none; } }