/* ============================================================
   SPORTS POPULAR — v2.0 redesign
   Açılı sportsbook geometrisi · neon yeşil marka dili
   Not: tournament/worldcup.css bu bileşeni .wc-main kapsamında
   gold temayla override eder — DOM yapısı oradakiyle ortak.
   ============================================================ */

:root {
    --sp-accent: #00ff87;
    --sp-accent-soft: rgba(0,255,135,0.15);
    --sp-accent-glow: rgba(0,255,135,0.35);

    --sp-bg-card: #12151f;
    --sp-bg-dark: #0d101a;

    --sp-border: rgba(255,255,255,0.07);
    --sp-text-main: #ffffff;
    --sp-text-muted: #7f8892;
    /* --sp-cut kaldırıldı: kesik köşe formu bırakıldı (kart artık --radius-md) */
}

/* ========================= */
/* FILTERS */
/* ========================= */
/* Eski köşeli .sp-filters/.sp-filter-btn (clip-path pill'ler) KALDIRILDI →
   paylaşılan segmented-control: .goji-segmented / .goji-segmented__chip
   (css/style.css, tek sliding thumb; JS: window.GojiSegmented).
   Burada sadece filter → kart iç boşluğu kalır; carousel kutusunun DIŞINDA durur ki
   kenar oklarının dikey merkezi kartla hizalı kalsın (Browse Games ile aynı desen). */
#sp-filters { margin-bottom: var(--space-6); }

/* ========================= */
/* CARD — tek bütün premium surface (kesik köşe + neon şerit KALDIRILDI) */
/* ========================= */

.sp-card {
    flex: 0 0 300px;                 /* 340 → 300: 1280'de 3 tam kart + peek */
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: var(--radius-md, 16px);   /* Goji radius token */
    background: var(--sp-bg-card);
    display: flex;
    flex-direction: column;
    height: 312px;                   /* 345 → 312 */
    cursor: pointer;
    /* subtle inner highlight (üstte 1px) + yumuşak derinlik — neon glow YOK */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 18px rgba(0,0,0,0.32);
    transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

/* hover sadece gerçek mouse'lu cihazlarda — dokunmatikte kart kaymasın */
@media (hover: hover) and (pointer: fine) {
    .sp-card:hover {
        transform: translateY(-3px);
        border-color: rgba(0,255,135,0.28);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 32px rgba(0,0,0,0.5);
    }
}

/* ========================= */
/* HEADER */
/* ========================= */

/* Ayrı kutu hissi yok: sert divider kaldırıldı, sadece çok hafif üst yüzey */
.sp-header {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}

/* competition SAKİN: uppercase + ağır letter-spacing kaldırıldı */
.sp-league-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sp-text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sp-league-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.sp-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}

.sp-match-date {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.34);
    letter-spacing: 0;
    text-transform: none;
}

/* time > competition: hiyerarşi burada */
.sp-match-time-top {
    font-size: 13px;
    font-weight: 700;
    font-family: 'Oxanium', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--sp-accent);
    letter-spacing: 0.01em;
}

/* canlı maç: yanıp sönen nokta — gerçek durum göstergesi */
.sp-match-time-top.sp-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff4d5e;
    letter-spacing: 0.1em;
}

.sp-match-time-top.sp-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff4d5e;
    box-shadow: 0 0 5px rgba(255,77,94,0.4);
    animation: sp-live-pulse 1.4s ease-in-out infinite;
}

@keyframes sp-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
    .sp-match-time-top.sp-live::before { animation: none; }
}

/* ========================= */
/* MATCH AREA */
/* ========================= */

.sp-match-area {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #0e1f14;
    overflow: hidden;
}

/* çim zemini — SAKİNLEŞTİRİLDİ: daha az doygun yeşil, daha zayıf vinyet/şerit */
.sp-match-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.010) 0 42px,
            transparent 42px 84px),
        linear-gradient(to right, rgba(0,0,0,0.14) 0%, transparent 50%, rgba(0,0,0,0.14) 100%),
        linear-gradient(180deg, #0a1611 0%, #0d1c15 50%, #0a1611 100%);
    pointer-events: none;
    z-index: 0;
}

/* tepe projektör ışığı — kontrollü */
.sp-match-area::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 64%;
    height: 76px;
    background: radial-gradient(ellipse at center top, rgba(0,255,135,0.055) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* orta yuvarlak — VS üstüne hizalı, filigranla yarışmasın */
.sp-pitch-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.07);
    pointer-events: none;
    z-index: 0;
}

.sp-pitch-circle::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    width: 1px;
    height: 60px;
    background: rgba(255,255,255,0.09);
}

.sp-pitch-circle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 1px;
    height: 60px;
    background: rgba(255,255,255,0.09);
}

/* LEAGUE LOGO WATERMARK
   Selector .sp-match-area ile birlikte: aşağıdaki ".sp-match-area > *"
   kuralı position:relative dayatıyor, specificity bunu ezmek için gerekli
   (yoksa div 0 yükseklikte kalıp filigran hiç görünmüyor) */
/* COMPETITION FİLİGRANI — takımların ARKASINDA (z:1), takım logoları/VS (z:2) önde.
   background-image / opacity / size artık JS'teki COMPETITIONS config'inden inline gelir
   (tek merkez; her key için ayrı CSS kuralı yok). Burada sadece ortak yerleşim durur. */
.sp-match-area .sp-league-bg {
    position: absolute;
    inset: 0;
    background-size: 96px 96px;
    background-repeat: no-repeat;
    background-position: center 46%;
    opacity: 0.16;                 /* premium watermark — takım logolarıyla yarışmaz */
    pointer-events: none;
    z-index: 1;
}

/* WORLD CUP (bg-worldcup) kuralları KALDIRILDI (2026-07-20): kampanya bitti,
   competition mapping'inden çıkarıldı → bu class hiçbir kartta emit edilmiyor. */

/* VOLLEYBALL — 3 sarı çizgi */
.sp-match-area.bg-volleyball::before {
    background:
        linear-gradient(90deg,
            transparent calc(50% - 1.5px),
            rgba(255,252,180,0.75) calc(50% - 1.5px),
            rgba(255,252,180,0.75) calc(50% + 1.5px),
            transparent calc(50% + 1.5px)),
        linear-gradient(90deg,
            transparent calc(30% - 0.5px),
            rgba(255,252,180,0.3) calc(30% - 0.5px),
            rgba(255,252,180,0.3) calc(30% + 0.5px),
            transparent calc(30% + 0.5px)),
        linear-gradient(90deg,
            transparent calc(70% - 0.5px),
            rgba(255,252,180,0.3) calc(70% - 0.5px),
            rgba(255,252,180,0.3) calc(70% + 0.5px),
            transparent calc(70% + 0.5px)),
        linear-gradient(180deg, #2a1d00 0%, #3d2b00 50%, #2a1d00 100%) !important;
}

.sp-match-area.bg-volleyball .sp-pitch-circle { display: none; }

.sp-volleyball-icon { display: none; }

.sp-sport-emoji {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

/* ========================= */
/* BASKETBALL — HARDWOOD COURT
   sport_alias bazlı: NBA dışı basket ligleri de parke alır */
/* ========================= */

.sp-match-area.bg-nba,
.sp-match-area.sp-sport-basketball {
    background: #130800;
}

.sp-match-area.bg-nba::before,
.sp-match-area.sp-sport-basketball::before {
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 17px,
            rgba(255,110,20,0.03) 17px,
            rgba(255,110,20,0.03) 19px
        ),
        linear-gradient(to right, rgba(0,0,0,0.28) 0%, transparent 50%, rgba(0,0,0,0.28) 100%),
        linear-gradient(180deg, #0d0501 0%, #1e0d03 50%, #0d0501 100%);
}

.sp-match-area.bg-nba::after,
.sp-match-area.sp-sport-basketball::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 110%;
    background: radial-gradient(ellipse at center, rgba(255,90,10,0.14) 0%, transparent 60%);
}

.sp-match-area.bg-nba .sp-pitch-circle,
.sp-match-area.sp-sport-basketball .sp-pitch-circle {
    border-color: rgba(255,140,40,0.28);
    width: 66px;
    height: 66px;
}

.sp-match-area.bg-nba .sp-pitch-circle::before,
.sp-match-area.bg-nba .sp-pitch-circle::after,
.sp-match-area.sp-sport-basketball .sp-pitch-circle::before,
.sp-match-area.sp-sport-basketball .sp-pitch-circle::after {
    background: rgba(255,140,40,0.14);
    height: 52px;
}

/* ========================= */
/* TENNIS — BLUE HARD COURT
   sport_alias bazlı: ATP/WTA dahil tüm tenis maçları kort alır */
/* ========================= */

.sp-match-area.bg-rg,
.sp-match-area.sp-sport-tennis {
    background: #0d2050 !important;
}

.sp-match-area.bg-rg::before,
.sp-match-area.sp-sport-tennis::before {
    background:
        linear-gradient(90deg,
            transparent calc(50% - 1.5px),
            rgba(255,255,255,0.55) calc(50% - 1.5px),
            rgba(255,255,255,0.55) calc(50% + 1.5px),
            transparent calc(50% + 1.5px)),
        linear-gradient(90deg,
            transparent calc(26% - 0.5px),
            rgba(255,255,255,0.22) calc(26% - 0.5px),
            rgba(255,255,255,0.22) calc(26% + 0.5px),
            transparent calc(26% + 0.5px)),
        linear-gradient(90deg,
            transparent calc(74% - 0.5px),
            rgba(255,255,255,0.22) calc(74% - 0.5px),
            rgba(255,255,255,0.22) calc(74% + 0.5px),
            transparent calc(74% + 0.5px)),
        linear-gradient(180deg, #0a1a40 0%, #183570 50%, #0a1a40 100%) !important;
}

.sp-match-area.bg-rg::after,
.sp-match-area.sp-sport-tennis::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(56,130,255,0.12) 0%, transparent 70%);
}

.sp-match-area.bg-rg .sp-pitch-circle,
.sp-match-area.sp-sport-tennis .sp-pitch-circle {
    display: none;
}

.sp-match-area > * {
    position: relative;
    z-index: 2;
}

/* üst bölüm (takımlar) */
.sp-match-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    position: relative;
}

/* eski 1X2 etiket satırı — etiketler artık oran butonlarının içinde */
.sp-odds-label-row { display: none; }

/* ========================= */
/* ODDS — tek satır birleşik butonlar: solda etiket, sağda oran */
/* ========================= */

/* Tek strip: 3 ayrı ağır kutu ve sert divider YOK. Etiket üstte, oran altta. */
.sp-odds-row {
    display: flex;
    gap: 2px;
    width: 100%;
    padding: 6px;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid rgba(255,255,255,0.05);
}

.sp-odd-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 4px;
    border-radius: var(--radius-sm, 8px);
    font-size: 14px;
    font-weight: 700;
    font-family: 'Oxanium', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--sp-text-main);
    transition: background .2s ease, color .2s ease;
    position: relative;
}

/* 1 / X / 2 etiketi (içerik kuralları değişmedi) */
.sp-odd-item::before {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.34);
}

.sp-odd-item:first-child::before { content: '1'; }
.sp-odd-item:nth-child(2):not(:last-child)::before { content: 'X'; }
.sp-odd-item:last-child::before { content: '2'; }

.sp-odd-item:hover,
.sp-odd-item:focus-visible {
    background: rgba(255,255,255,0.05);
}

/* best odds — kontrollü accent: sadece değer neon, etiket kısık */
.sp-odd-max { color: var(--sp-accent); }
.sp-odd-max::before { color: rgba(0,255,135,0.5); }

/* ========================= */
/* TEAM */
/* ========================= */

.sp-team-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 38%;
    min-width: 0;
}

.sp-team-unit img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}

/* isimler düzgün wrap — taşma yok, 2 satıra kadar */
.sp-team-name {
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Tennis player name badge */
.sp-player-unit {
    justify-content: center;
}

.sp-player-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 8px 6px;
    min-height: 58px;
}

.sp-player-first {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
}

.sp-player-last {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    word-break: break-word;
    hyphens: auto;
}

/* VS: net ama baskın değil — filigranın önünde okunur kalır */
.sp-vs-divider {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Oxanium', sans-serif;
    color: rgba(255,255,255,0.55);
    letter-spacing: .16em;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

/* ========================= */
/* FOOTER — kompakt, doğal kart altı (ayrı neon LED şerit DEĞİL) */
/* ========================= */

.sp-footer {
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: transparent;
    text-align: center;
}

.sp-countdown-text {
    font-size: 10px;
    font-weight: 600;
    font-family: 'Oxanium', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0,255,135,0.72);   /* kontrollü accent */
}