/* ===== LİDERLİK TABLOSU — PROFESYONEL TASARIM ===== */

.ldr-wrap {
    padding-bottom: 60px;
    min-height: 70vh;
}

/* === HERO === */
.ldr-hero {
    background:
        radial-gradient(circle at 80% 20%, rgba(108,60,225,.14) 0%, transparent 50%),
        linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    padding: 14px 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
}
.ldr-hero .container {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}
.ldr-hero-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F59E0B, #FB923C);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(245,158,11,.35);
}
.ldr-hero-baslik { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ldr-hero-ust { display: none; }
.ldr-hero-baslik h1 {
    font-size: clamp(17px, 2.4vw, 22px);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    color: #fff;
}
.ldr-hero-baslik p {
    font-size: 12px;
    margin: 0;
    opacity: .7;
    color: #cbd5e1;
}

/* === BÖLÜM BAŞLIĞI === */
.ldr-bolum-baslik {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ee-border);
    flex-wrap: wrap;
}
.ldr-bolum-baslik > i {
    font-size: 18px;
    color: #F59E0B;
    align-self: center;
}
.ldr-bolum-baslik h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--ee-text);
}
.ldr-bolum-baslik > span {
    font-size: 12px;
    color: var(--ee-text-muted);
}
.ldr-bolum-baslik-alt { margin-top: 30px; }
.ldr-bolum-baslik-alt > i { color: #22c55e; }

/* === DÖNEM SEKMELERİ === */
.ldr-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 26px;
    background: var(--ee-card-bg);
    border: 1px solid var(--ee-border);
    padding: 4px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.ldr-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ee-text-muted);
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.ldr-tab:hover {
    color: var(--ee-text);
    background: rgba(108,60,225,.06);
}
.ldr-tab.active {
    background: linear-gradient(135deg, #6C3CE1, #EC4899);
    color: #fff;
    box-shadow: 0 4px 12px rgba(108,60,225,.3);
}
.ldr-tab i { font-size: 16px; }

/* === GRID === */
.ldr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}

/* === BLOK === */
.ldr-blok {
    background: var(--ee-card-bg);
    border: 1px solid var(--ee-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.ldr-blok-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ee-border);
    background: var(--ee-bg);
}
.ldr-blok-head h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--ee-text);
}
.ldr-blok-ikon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}
/* Kategori renkleri */
.ldr-cat-oku .ldr-blok-ikon { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.ldr-cat-yorum .ldr-blok-ikon { background: linear-gradient(135deg, #6C3CE1, #4C1D95); }
.ldr-cat-tebrik .ldr-blok-ikon { background: linear-gradient(135deg, #EC4899, #BE185D); }
.ldr-cat-okuyan .ldr-blok-ikon { background: linear-gradient(135deg, #22c55e, #15803d); }
.ldr-cat-yorumlayan .ldr-blok-ikon { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.ldr-cat-tebrikeden .ldr-blok-ikon { background: linear-gradient(135deg, #F59E0B, #B45309); }

/* === CAROUSEL === */
.ldr-carousel {
    position: relative;
    margin-bottom: 8px;
    padding: 0 38px; /* okların yer kaplaması için yan padding */
}
.ldr-car-viewport {
    overflow: hidden;
    border-radius: 16px;
}
.ldr-car-track {
    display: flex;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}
.ldr-car-slide {
    flex: 0 0 100%;
    min-width: 0;
}
.ldr-car-slide > .ldr-blok { margin: 0; }
.ldr-car-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ee-card-bg);
    border: 1px solid var(--ee-border);
    color: var(--ee-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transition: background .15s, border-color .15s, color .15s, transform .15s;
    z-index: 2;
}
.ldr-car-arrow i { font-size: 20px; line-height: 1; }
.ldr-car-arrow:hover { background: var(--ee-primary); border-color: var(--ee-primary); color: #fff; transform: translateY(-50%) scale(1.08); }
.ldr-car-prev { left: 0; }
.ldr-car-next { right: 0; }
.ldr-car-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.ldr-car-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: var(--ee-border);
    cursor: pointer;
    transition: width .25s, background .25s;
}
.ldr-car-dots button.active {
    width: 24px;
    background: var(--ee-primary);
}
/* Mobilde carousel devre dışı — bloklar alt alta normal akar */
@media (max-width: 768px) {
    .ldr-carousel { padding: 0; }
    .ldr-car-viewport { overflow: visible; border-radius: 0; }
    .ldr-car-track {
        display: block;
        transform: none !important;   /* JS inline transform'unu da iptal et */
        transition: none;
    }
    .ldr-car-slide {
        flex: none;
        width: 100%;
        margin-bottom: 28px;
    }
    .ldr-car-slide:last-child { margin-bottom: 0; }
    .ldr-car-arrow, .ldr-car-dots { display: none; }
}

/* === PODYUM (Top 3) === */
.ldr-podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 8px;
    align-items: end;
    padding: 22px 14px 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(245,158,11,.04) 0%, transparent 50%),
        var(--ee-card-bg);
    border-bottom: 1px solid var(--ee-border);
}
.ldr-pod {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ee-text);
    transition: transform .15s, box-shadow .15s;
    position: relative;
}
.ldr-pod:hover {
    color: var(--ee-text);
    transform: translateY(-3px);
}
.ldr-pod-top {
    background: linear-gradient(180deg, rgba(245,158,11,.08), rgba(245,158,11,.02));
    border: 1px solid rgba(245,158,11,.3);
    padding-top: 18px;
}
.ldr-pod-mid {
    background: linear-gradient(180deg, rgba(156,163,175,.06), transparent);
    border: 1px solid rgba(156,163,175,.25);
}
.ldr-pod-low {
    background: linear-gradient(180deg, rgba(234,88,12,.06), transparent);
    border: 1px solid rgba(234,88,12,.25);
}
.ldr-pod-bos {
    background: transparent;
    border: 1px dashed var(--ee-border);
    border-radius: 10px;
    opacity: .4;
    min-height: 100px;
}

.ldr-pod-rozet {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    border: 2px solid var(--ee-card-bg);
}
.ldr-gold .ldr-pod-rozet { background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #7C2D12; }
.ldr-silver .ldr-pod-rozet { background: linear-gradient(135deg, #E5E7EB, #9CA3AF); color: #374151; }
.ldr-bronze .ldr-pod-rozet { background: linear-gradient(135deg, #FDBA74, #EA580C); }

.ldr-pod-avatar-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 8px 0 8px;
}
.ldr-pod-top .ldr-pod-avatar-wrap { width: 68px; height: 68px; }

.ldr-pod-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--ee-card-bg);
}
.ldr-gold .ldr-pod-avatar { box-shadow: 0 0 0 2px #F59E0B; }
.ldr-silver .ldr-pod-avatar { box-shadow: 0 0 0 2px #9CA3AF; }
.ldr-bronze .ldr-pod-avatar { box-shadow: 0 0 0 2px #EA580C; }

.ldr-pod-crown {
    position: absolute;
    top: -6px;
    right: -4px;
    color: #F59E0B;
    font-size: 16px;
    background: var(--ee-card-bg);
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.ldr-pod-nick {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    margin-top: 2px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ldr-pod-top .ldr-pod-nick { font-size: 13px; }

.ldr-pod-deger {
    font-size: 11px;
    color: var(--ee-text-muted);
    margin-top: 3px;
    text-align: center;
}
.ldr-pod-deger strong {
    display: block;
    font-size: 14px;
    color: var(--ee-text);
    font-weight: 800;
}
.ldr-gold .ldr-pod-deger strong { color: #F59E0B; }

/* === LİSTE (4-10) === */
.ldr-liste {
    padding: 6px;
}
.ldr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ee-text);
    transition: background .15s, transform .15s;
}
.ldr-item:hover {
    background: rgba(108,60,225,.05);
    color: var(--ee-text);
    transform: translateX(2px);
}
.ldr-item-sira {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ee-bg);
    color: var(--ee-text-muted);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ldr-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--ee-border);
}
.ldr-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ldr-item-nick {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ldr-item-deger {
    font-size: 11px;
    color: var(--ee-text-muted);
}
.ldr-item-ok {
    color: var(--ee-text-muted);
    font-size: 16px;
    opacity: 0;
    transition: opacity .15s;
}
.ldr-item:hover .ldr-item-ok { opacity: 1; }
.ldr-crown { color: #F59E0B; font-size: 11px; margin-left: 3px; }

/* === BOŞ DURUM === */
.ldr-empty {
    text-align: center;
    padding: 50px 24px;
    color: var(--ee-text-muted);
}
.ldr-empty i { font-size: 36px; opacity: .4; display: block; margin-bottom: 8px; }
.ldr-empty p { font-size: 13px; margin: 0; }

/* === MOBİL === */
@media (max-width: 1100px) {
    .ldr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .ldr-grid { grid-template-columns: 1fr; }
    .ldr-tab span { display: none; }
    .ldr-tab { padding: 10px 14px; }
    .ldr-tab.active span { display: inline; }
    .ldr-hero { padding: 12px 0; }
    .ldr-hero .container { gap: 10px; }
    .ldr-hero-icon { width: 34px; height: 34px; font-size: 16px; border-radius: 8px; }
    .ldr-hero-baslik h1 { font-size: 16px; }
    .ldr-hero-baslik p { font-size: 11px; }
    .ldr-bolum-baslik h2 { font-size: 15px; }
}