/*
 * Lumout Theme Color Overrides v3.0
 * Tüm sabit kırmızı / hardcoded renkleri site renk temasına (--base) uyarlar.
 * Bu dosya color.php, main.css, custom.css ve play-video.css'ten SONRA yüklenmeli.
 */

/* ═══════════════════════════════════════════════════════
   1. PLAY VIDEO — Center Play butonu hover (play-video.css:176)
      Orijinal: rgba(255,0,0,.88) → hsl(var(--base))
═══════════════════════════════════════════════════════ */

.lumout-yt-thumb:hover .lumout-yt-center-play {
    background: hsl(var(--base) / 0.92) !important;
    transform: scale(1.1) !important;
    box-shadow:
        0 0 0 5px hsl(var(--base) / 0.2),
        0 8px 40px hsl(var(--base) / 0.5) !important;
}

/* ═══════════════════════════════════════════════════════
   2. SIDEBAR BADGE — HOT rozeti (custom.css:796-800 ve 4075)
      Orijinal: linear-gradient(135deg, #ff6b35, #f7001e) ve #ff2d2d
═══════════════════════════════════════════════════════ */

.sidebar-badge--hot {
    background: linear-gradient(
        135deg,
        hsl(var(--base)),
        hsl(var(--base-h, var(--base)) var(--base-s, 85%) calc(var(--base-l, 50%) - 15%))
    ) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px hsl(var(--base) / 0.45) !important;
}

/* ═══════════════════════════════════════════════════════
   3. SIDEBAR BADGE — LIVE rozeti (custom.css:817-821)
      Orijinal: #e50914 ve rgba(229,9,20,0.4)
═══════════════════════════════════════════════════════ */

.sidebar-badge--live {
    background: hsl(var(--base)) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px hsl(var(--base) / 0.45) !important;
    animation: sidebar-live-pulse 2s ease-in-out infinite !important;
}

@keyframes sidebar-live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 hsl(var(--base) / 0.5); }
    50% { opacity: 0.82; box-shadow: 0 0 0 4px hsl(var(--base) / 0); }
}

/* ═══════════════════════════════════════════════════════
   4. SIDEBAR BİLDİRİM SAYACI (custom.css:4077)
      Orijinal: #ff2d2d
═══════════════════════════════════════════════════════ */

.sidebar-notif-count {
    background: hsl(var(--base)) !important;
    color: #fff !important;
}

/* Header bildirim sayacı */
.notification__count {
    background: hsl(var(--base)) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   5. ÇIKIŞ LİNKİ HOVER (custom.css:3300-3310)
      Orijinal: rgba(255,50,50,.08) ve #ff6b6b
      Tema rengiyle hafif uyarı vurgusu
═══════════════════════════════════════════════════════ */

.list__link[href*="logout"]:hover {
    background: hsl(var(--base) / 0.08) !important;
    color: hsl(var(--base)) !important;
}

.list__link[href*="logout"]:hover i {
    color: hsl(var(--base)) !important;
}

.list__link[href*="logout"]:hover::before {
    background: hsl(var(--base)) !important;
}

/* ═══════════════════════════════════════════════════════
   6. SHORT ROZETİ — Tüm sayfalarda
      lumout-short-badge, s-short-badge vb.
═══════════════════════════════════════════════════════ */

.lumout-short-badge,
span.lumout-short-badge,
.video-item .lumout-short-badge,
.video-wrapper .lumout-short-badge,
.s-short-badge {
    background: linear-gradient(
        135deg,
        hsl(var(--base)),
        hsl(var(--base-h, var(--base)) var(--base-s, 85%) calc(var(--base-l, 50%) - 15%))
    ) !important;
    box-shadow: 0 2px 8px hsl(var(--base) / 0.45) !important;
}

/* ═══════════════════════════════════════════════════════
   7. ARAMA SAYFASI — Shorts bölüm başlığı ikon
═══════════════════════════════════════════════════════ */

.s-section-title svg,
.s-section-title .section-icon {
    color: hsl(var(--base)) !important;
}

/* ═══════════════════════════════════════════════════════
   8. HOME — Shorts bölüm başlığı ikon
═══════════════════════════════════════════════════════ */

.yt-shorts-header__icon,
.yt-shorts-section .yt-shorts-header__icon,
.yt-shorts-section .yt-shorts-header__left .yt-shorts-header__icon {
    color: hsl(var(--base)) !important;
}

/* Shorts nav ok butonları hover */
.yt-shorts-nav:hover {
    background: hsl(var(--base)) !important;
    color: #fff !important;
}

[data-theme="light"] .yt-shorts-nav:hover {
    background: hsl(var(--base)) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   9. VİDEO HOVER PROGRESS BAR
═══════════════════════════════════════════════════════ */

.lumout-hover-bar-fill {
    background: hsl(var(--base)) !important;
}

/* ═══════════════════════════════════════════════════════
   10. SPINNER İKONU
═══════════════════════════════════════════════════════ */

.spinner i,
#loading-spinner i {
    color: hsl(var(--base)) !important;
}

/* ═══════════════════════════════════════════════════════
   11. SEARCH FILTER — Aktif chip ve radio
═══════════════════════════════════════════════════════ */

.form--radio:has(.form-check-input:checked),
.form--check:has(.form-check-input:checked) {
    color: hsl(var(--base)) !important;
}

.categories-tag .form--check:has(.form-check-input:checked) {
    background: hsl(var(--base)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════
   12. AUTONEXT VE MİNİ PLAYER — ilerleme çubuğu
═══════════════════════════════════════════════════════ */

.lumout-autonext-fill {
    background: hsl(var(--base)) !important;
}

.lumout-autonext-btn {
    background: hsl(var(--base)) !important;
}

.lumout-autonext-btn:hover {
    background: hsl(var(--base) / 0.88) !important;
}

/* ═══════════════════════════════════════════════════════
   13. FON'TAN ODAK STİLLERİ
═══════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible {
    outline-color: hsl(var(--base)) !important;
}

/* ═══════════════════════════════════════════════════════
   14. VIDEO KATEGORİ ETİKETİ — Arama sayfası
═══════════════════════════════════════════════════════ */

.s-video-cat-tag {
    color: hsl(var(--base)) !important;
    background: hsl(var(--base) / 0.12) !important;
    border-color: hsl(var(--base) / 0.25) !important;
}

.s-video-cat-tag:hover {
    background: hsl(var(--base) / 0.22) !important;
    color: hsl(var(--base)) !important;
}

/* ═══════════════════════════════════════════════════════
   15. PLAY PAGE — "Şu an oynuyor" rozeti
═══════════════════════════════════════════════════════ */

.rv-now-playing-badge {
    color: hsl(var(--base)) !important;
    background: hsl(var(--base) / 0.12) !important;
    border-color: hsl(var(--base) / 0.3) !important;
}

/* ═══════════════════════════════════════════════════════
   16. RV KATEGORİ BAŞLIĞI — sağ panel
═══════════════════════════════════════════════════════ */

.rv-category-header {
    border-bottom-color: hsl(var(--base) / 0.3) !important;
}

.rv-category-header__link {
    color: hsl(var(--base)) !important;
}

/* ═══════════════════════════════════════════════════════
   17. PLAY PAGE — Kategori rozeti
═══════════════════════════════════════════════════════ */

.rv-cat-badge {
    color: hsl(var(--base)) !important;
    background: hsl(var(--base) / 0.1) !important;
    border-color: hsl(var(--base) / 0.2) !important;
}

.rv-cat-badge:hover {
    background: hsl(var(--base) / 0.2) !important;
    color: hsl(var(--base)) !important;
}

/* ═══════════════════════════════════════════════════════
   18. REKLAM İLERLEME ÇUBUĞU — sarı → tema rengi
═══════════════════════════════════════════════════════ */

/* Not: Reklam progress çubuğu kasıtlı sarı (#ffcc00) bırakılabilir
   Ancak kullanıcı isteğine göre tema rengiyle de uyarlanabilir. */

/* ═══════════════════════════════════════════════════════
   19. SEÇİLMİŞ/AKTİF DURUMLAR — Genel
═══════════════════════════════════════════════════════ */

.tag-item.active,
.s-tab.active {
    background: var(--yt-text, #f1f1f1) !important;
    color: var(--yt-bg, #0f0f0f) !important;
}

[data-theme="light"] .tag-item.active,
[data-theme="light"] .s-tab.active {
    background: #0f0f0f !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   20. YT SHORTS RAF — Kategori bağlantısı
═══════════════════════════════════════════════════════ */

.yt-shorts-header__view-all {
    color: hsl(var(--base)) !important;
    border-color: hsl(var(--base) / 0.35) !important;
}

.yt-shorts-header__view-all:hover {
    background: hsl(var(--base) / 0.12) !important;
    color: hsl(var(--base)) !important;
}