/* Sıralamalar sayfası (page-rankings.php).
   Mobil öncelikli yazıldı: temel düzen tek sütun, geniş ekran kuralları
   aşağıdaki medya sorgularında. Renk/boşluk/yuvarlaklık değerleri temanın
   :root değişkenlerinden geliyor, sabit renk kullanılmadı — tema rengi
   değişince bu sayfa da birlikte değişsin. */

.rk-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-16);
}

/* ---------- Başlık ---------- */

.rk-hero {
    text-align: center;
    margin-bottom: var(--space-6);
}

.rk-hero-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin: 0 0 var(--space-2);
    background: linear-gradient(135deg, var(--color-text-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rk-hero-sub {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

/* ---------- Sekmeler ----------
   Mobilde yatay kaydırılabilir; kaydırma çubuğu gizli ama dokunmayla
   kaydırma çalışıyor. */

.rk-tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
}

.rk-tabs::-webkit-scrollbar { display: none; }

.rk-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-base, 0.2s);
}

.rk-tab:hover { border-color: var(--color-border-light); color: var(--color-text-primary); }

.rk-tab.is-active {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

.rk-tab i { font-size: 0.85em; opacity: 0.9; }

/* ---------- Araç çubuğu ---------- */

.rk-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-6);
}

.rk-search-wrap {
    position: relative;
    flex: 1 1 100%;
}

.rk-search-wrap i {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.rk-search {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.rk-search:focus {
    outline: none;
    border-color: var(--color-primary-hover);
}

.rk-filter {
    flex: 1 1 calc(50% - var(--space-1));
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
}

.rk-filter:focus { outline: none; border-color: var(--color-primary-hover); }

.rk-result-count {
    flex: 1 1 100%;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* ---------- Paneller ---------- */

.rk-panel { display: none; }
.rk-panel.is-active { display: block; }

/* ---------- Podyum (ilk 3) ----------
   Mobilde tek sütun; 1. sıra üstte ve biraz daha belirgin. */

.rk-podium {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.rk-podium-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

/* Madalya renkleri yalnızca ince bir kenar vurgusu olarak — kart zemini
   temanın rengi olarak kalıyor, sayfa alacalı görünmüyor. */
.rk-podium-item.rk-rank-1 { border-color: #fbbf24; }
.rk-podium-item.rk-rank-2 { border-color: #cbd5e1; }
.rk-podium-item.rk-rank-3 { border-color: #d97706; }

.rk-podium-item::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}
.rk-podium-item.rk-rank-1::before { background: #fbbf24; }
.rk-podium-item.rk-rank-2::before { background: #cbd5e1; }
.rk-podium-item.rk-rank-3::before { background: #d97706; }

.rk-podium-cover {
    position: relative;
    flex: 0 0 82px;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-tertiary);
    aspect-ratio: 2 / 3;
}

.rk-podium-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rk-medal {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 800;
    color: #111;
}
.rk-rank-1 .rk-medal { background: #fbbf24; }
.rk-rank-2 .rk-medal { background: #cbd5e1; }
.rk-rank-3 .rk-medal { background: #d97706; color: #fff; }

.rk-podium-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.rk-podium-title {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.rk-podium-title a { color: var(--color-text-primary); text-decoration: none; }
.rk-podium-title a:hover { color: var(--color-primary-light); }

.rk-podium-author,
.rk-row-author {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rk-podium-stat { margin: var(--space-1) 0 0; display: flex; align-items: baseline; gap: var(--space-1); }
.rk-podium-stat strong { font-size: var(--text-lg); font-weight: 800; color: var(--color-primary-light); }
.rk-podium-stat span { font-size: var(--text-xs); color: var(--color-text-muted); }

.rk-podium-meta { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------- Liste (4. sıradan sonrası) ---------- */

.rk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.rk-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    transition: background var(--transition-base, 0.2s), border-color var(--transition-base, 0.2s);
}

.rk-row:hover { background: var(--color-bg-tertiary); border-color: var(--color-border); }

.rk-row-rank {
    flex: 0 0 1.75rem;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--color-text-disabled);
    font-variant-numeric: tabular-nums;
}

.rk-row-cover {
    flex: 0 0 38px;
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-tertiary);
    aspect-ratio: 2 / 3;
}

.rk-row-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rk-row-info { flex: 1 1 auto; min-width: 0; }

.rk-row-title {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rk-row-title:hover { color: var(--color-primary-light); }

.rk-row-meta {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.rk-row-stat { flex: 0 0 auto; text-align: right; line-height: 1.2; }
.rk-row-stat strong { display: block; font-size: var(--text-sm); font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.rk-row-stat span { font-size: 0.65rem; color: var(--color-text-muted); }

/* ---------- Ortak küçük parçalar ---------- */

.rk-status {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.rk-status-ongoing   { background: color-mix(in srgb, var(--color-ongoing) 18%, transparent);   color: var(--color-ongoing); }
.rk-status-completed { background: color-mix(in srgb, var(--color-completed) 18%, transparent); color: var(--color-completed); }
.rk-status-hiatus    { background: color-mix(in srgb, var(--color-hiatus) 18%, transparent);    color: var(--color-hiatus); }
.rk-status-abandoned { background: color-mix(in srgb, var(--color-abandoned) 18%, transparent); color: var(--color-abandoned); }

.rk-chapters {
    flex: 0 0 auto;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Mobilde satır zaten dar — yazar adı tek başına yeterli, durum ve bölüm
   sayısı geniş ekranda geri geliyor. */
.rk-row-meta .rk-status,
.rk-row-meta .rk-chapters { display: none; }

.rk-nocover { display: block; width: 100%; height: 100%; background: var(--color-bg-tertiary); }

.rk-no-match,
.rk-empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-10) var(--space-4);
}

.rk-empty-state i { font-size: 2rem; opacity: 0.4; display: block; margin-bottom: var(--space-3); }

/* Filtrelenip gizlenen kayıtlar */
.rk-row[hidden],
.rk-podium-item[hidden] { display: none !important; }

/* ---------- Geniş ekran ---------- */

@media (min-width: 640px) {
    .rk-search-wrap { flex: 1 1 260px; }
    .rk-filter { flex: 0 1 170px; }
    .rk-result-count { flex: 0 0 auto; margin-left: auto; }

    .rk-podium { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

    .rk-podium-item { flex-direction: column; text-align: center; padding: var(--space-5); }
    .rk-podium-cover { flex: 0 0 auto; width: 110px; margin: 0 auto; }
    .rk-podium-body { align-items: center; }
    .rk-podium-stat { justify-content: center; }
    .rk-podium-meta { justify-content: center; }

    .rk-row-meta .rk-status,
    .rk-row-meta .rk-chapters { display: inline-block; }

    .rk-row { padding: var(--space-3); gap: var(--space-4); }
    .rk-row-cover { flex: 0 0 46px; }
    .rk-row-rank { flex: 0 0 2.25rem; font-size: var(--text-base); }
}

@media (min-width: 1024px) {
    .rk-page { padding-top: var(--space-10); }
    .rk-podium-cover { width: 130px; }
    .rk-podium-title { font-size: var(--text-lg); }
}

/* Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce) {
    .rk-tab, .rk-row { transition: none; }
}