/* ============================================

   Tahminler Sayfası

   ============================================ */



.tahminler-header {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    padding: 2rem 0 3rem;

    border-bottom: 1px solid #2d3748;

    margin-bottom: 2rem;

}



.tahminler-header-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3);

}



.tahminler-header-icon i {

    font-size: 36px;

    color: #ffffff;

}



.tahminler-header-content {

    flex: 1;

}



.tahminler-title {

    font-size: 32px;

    font-weight: 700;

    color: #ffffff;

    margin: 0 0 0.5rem 0;

}



.tahminler-subtitle {

    color: #94a3b8;

    font-size: 16px;

    margin: 0;

}



/* Filtre Butonları */

.tahminler-filters {

    display: flex;

    gap: 1rem;

    margin-bottom: 2rem;

    flex-wrap: wrap;

}



.tahmin-filter-btn {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.875rem 1.5rem;

    background: #1e293b;

    border: 1px solid #334155;

    border-radius: 12px;

    color: #94a3b8;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

}



.tahmin-filter-btn:hover {

    background: #334155;

    border-color: #4f7cff;

    color: #ffffff;

}



.tahmin-filter-btn.active {

    background: linear-gradient(135deg, #4f7cff 0%, #00d4aa 100%);

    border-color: #4f7cff;

    color: #ffffff;

    box-shadow: 0 4px 16px rgba(79, 124, 255, 0.3);

}



.tahmin-filter-btn i {

    font-size: 14px;

}



/* Tahmin Grid */

.tahminler-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

    gap: 2rem;

}



/* Tahmin Kartı */

.tahmin-card {

    background: #1e293b;

    border: 2px solid #334155;

    border-radius: 16px;

    overflow: hidden;

    transition: all 0.3s ease;

}



.tahmin-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);

}



.tahmin-card.won {

    border-color: #10b981;

}



.tahmin-card.lost {

    border-color: #ef4444;

}



.tahmin-card.pending {

    border-color: #f59e0b;

}



/* Kart Header */

.tahmin-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1.5rem;

    background: rgba(0, 0, 0, 0.2);

    border-bottom: 1px solid #334155;

}



.tahmin-header-left {

    display: flex;

    gap: 0.75rem;

}



.tahmin-header-right {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.tahmin-type-badge {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

}



.tahmin-type-badge.vip {

    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);

    color: #1a2332;

    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);

}



.tahmin-type-badge.member {

    background: rgba(139, 92, 246, 0.2);

    color: #a78bfa;

    border: 1px solid #8b5cf6;

}



.tahmin-type-badge.free {

    background: rgba(59, 130, 246, 0.2);

    color: #60a5fa;

    border: 1px solid #3b82f6;

}



.tahmin-status-badge {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

}



.tahmin-status-badge.kazandi {

    background: rgba(16, 185, 129, 0.3);

    color: #10b981;

    font-weight: 700;

    border: 1px solid #10b981;

}



.tahmin-status-badge.kaybetti {

    background: rgba(239, 68, 68, 0.3);

    color: #ef4444;

    font-weight: 700;

    border: 1px solid #ef4444;

}



.tahmin-status-badge.bekliyor {

    background: rgba(245, 158, 11, 0.2);

    color: #fbbf24;

}



.tahmin-date {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: #64748b;

    font-size: 13px;

}



.tahmin-date i {

    color: #4f7cff;

}



/* Kart Body */

.tahmin-card-body {

    padding: 1.5rem;

}



/* VIP Locked Content */

.vip-locked-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 3rem 2rem;

    background: linear-gradient(135deg, rgba(79, 124, 255, 0.1) 0%, rgba(0, 212, 170, 0.1) 100%);

    border: 2px dashed #4f7cff;

    border-radius: 12px;

    text-align: center;

    margin-top: 1rem;

}



.vip-lock-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.5rem;

    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.3);

}



.vip-lock-icon i {

    font-size: 36px;

    color: #1a2332;

}



.vip-lock-title {

    color: #ffffff;

    font-size: 22px;

    font-weight: 700;

    margin: 0 0 0.75rem 0;

}



.vip-lock-text {

    color: #94a3b8;

    font-size: 15px;

    margin: 0 0 1.5rem 0;

    line-height: 1.6;

}



.vip-lock-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 1rem 2rem;

    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);

    border: none;

    border-radius: 12px;

    color: #1a2332;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);

}



.vip-lock-btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.5);

}



.vip-lock-btn i {

    font-size: 18px;

}



.tahmin-title {

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;

    margin: 0 0 0.5rem 0;

}



.tahmin-description {

    color: #94a3b8;

    font-size: 14px;

    margin: 0 0 1.5rem 0;

    line-height: 1.6;

}



/* İstatistikler */

.tahmin-stats {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1rem;

    margin-bottom: 1.5rem;

    padding: 1rem;

    background: #0f172a;

    border-radius: 12px;

}



.tahmin-stat-item {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    text-align: center;

}



.stat-label {

    color: #64748b;

    font-size: 12px;

    font-weight: 500;

}



.stat-value {

    color: #ffffff;

    font-size: 18px;

    font-weight: 700;

}



.stat-value.kazandi {

    color: #10b981;

    font-weight: 800;

}



.stat-value.kaybetti {

    color: #ef4444;

    font-weight: 800;

}



.stat-value.bekliyor {

    color: #fbbf24;

    font-weight: 700;

}



.stat-value.stat-oran {

    color: #fbbf24;

    font-weight: 800;

    font-size: 20px;

}



/* Maçlar */

.tahmin-matches {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.tahmin-match {

    display: grid;

    grid-template-columns: 40px 1fr auto auto;

    gap: 1rem;

    align-items: center;

    padding: 1rem;

    background: #0f172a;

    border: 1px solid #334155;

    border-radius: 12px;

    transition: all 0.3s ease;

}



.tahmin-match:hover {

    background: #1a2332;

    border-color: #4f7cff;

}



.match-sport-icon {

    width: 40px;

    height: 40px;

    background: linear-gradient(135deg, #4f7cff 0%, #00d4aa 100%);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 18px;

}



.match-sport-icon.basketball {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

}



.match-info {

    flex: 1;

}



.match-teams {

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 0.25rem;

}



.match-league {

    color: #64748b;

    font-size: 12px;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.match-datetime {

    display: inline-flex;

    align-items: center;

    gap: 0.375rem;

    color: #94a3b8;

    font-size: 11px;

}



.match-datetime i {

    color: #4f7cff;

    font-size: 10px;

}



.match-prediction {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.prediction-type {

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;

    padding: 0.25rem 0.625rem;

    background: rgba(79, 124, 255, 0.2);

    border: 1px solid rgba(79, 124, 255, 0.3);

    border-radius: 4px;

}



.prediction-odds {

    color: #fbbf24;

    font-size: 13px;

    font-weight: 700;

    padding: 0.25rem 0.5rem;

    background: rgba(251, 191, 36, 0.1);

    border: 1px solid rgba(251, 191, 36, 0.3);

    border-radius: 4px;

}



.match-status {

    display: flex;

    align-items: center;

    gap: 0.375rem;

    padding: 0.25rem 0.625rem;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

}



.match-status.kazandi {

    background: rgba(16, 185, 129, 0.2);

    color: #10b981;

    border: 1px solid rgba(16, 185, 129, 0.4);

}



.match-status.kaybetti {

    background: rgba(239, 68, 68, 0.2);

    color: #ef4444;

    border: 1px solid rgba(239, 68, 68, 0.4);

}



.match-status.bekliyor {

    background: rgba(245, 158, 11, 0.15);

    color: #fbbf24;

    border: 1px solid rgba(245, 158, 11, 0.3);

}



.match-status i {

    font-size: 12px;

}



/* Pagination */

.pagination-wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    padding: 3rem 0 2rem;

}



.pagination-btn {

    width: 44px;

    height: 44px;

    background: #1e293b;

    border: 1px solid #334155;

    border-radius: 10px;

    color: #94a3b8;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    font-size: 14px;

}



.pagination-btn:hover {

    background: #334155;

    border-color: #4f7cff;

    color: #ffffff;

}



.pagination-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.pagination-numbers {

    display: flex;

    gap: 0.5rem;

}



.pagination-number {

    width: 44px;

    height: 44px;

    background: #1e293b;

    border: 1px solid #334155;

    border-radius: 10px;

    color: #94a3b8;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    font-size: 15px;

    font-weight: 600;

}



.pagination-number:hover {

    background: #334155;

    border-color: #4f7cff;

    color: #ffffff;

}



.pagination-number.active {

    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    border-color: #fbbf24;

    color: #0f172a;

    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);

}



.pagination-dots {

    display: flex;

    align-items: center;

    color: #64748b;

    font-size: 18px;

    font-weight: 700;

    padding: 0 0.5rem;

    user-select: none;

}



/* Responsive */

@media (max-width: 768px) {

    .tahminler-header {

        flex-direction: column;

        text-align: center;

        padding: 1.5rem 0 2rem;

    }

    

    .tahminler-header-icon {

        width: 64px;

        height: 64px;

    }

    

    .tahminler-header-icon i {

        font-size: 28px;

    }

    

    .tahminler-title {

        font-size: 24px;

    }

    

    .tahminler-subtitle {

        font-size: 14px;

    }

    

    .tahminler-filters {

        flex-direction: row;

        flex-wrap: nowrap;

        overflow-x: auto;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        -ms-overflow-style: none;

        padding-bottom: 0.5rem;

    }

    

    .tahminler-filters::-webkit-scrollbar {

        display: none;

    }

    

    .tahmin-filter-btn {

        flex-shrink: 0;

        white-space: nowrap;

    }

    

    .tahminler-grid {

        grid-template-columns: 1fr;

    }

    

    .tahmin-stats {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .tahmin-match {

        grid-template-columns: 1fr;

        gap: 0.75rem;

    }

    

    .match-sport-icon {

        justify-self: center;

    }

    

    .match-info {

        text-align: center;

    }

    

    .match-prediction {

        align-items: center;

    }

    

    .match-status {

        justify-content: center;

    }

    

    .pagination-wrapper {

        gap: 0.5rem;

        padding: 2rem 0;

    }

    

    .pagination-btn,

    .pagination-number {

        width: 40px;

        height: 40px;

        font-size: 13px;

    }

}