/* ============================================================
   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: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* ========================= */
/* FILTERS */
/* ========================= */
.sp-filters {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.sp-filters::-webkit-scrollbar { display: none; }

.sp-filter-btn {
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    font-weight: 800;
    font-family: 'Oxanium', 'Montserrat', sans-serif;
    letter-spacing: 0.07em;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-transform: uppercase;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.sp-filter-btn:hover {
    border-color: rgba(0,255,135,0.4);
    color: #00ff87;
    background: rgba(0,255,135,0.06);
}

.sp-filter-btn.active {
    background: #00ff87;
    border-color: #00ff87;
    color: #000;
}

/* ========================= */
/* CARD — açılı köşe, üst aksan çizgisi */
/* ========================= */

.sp-card {
    flex: 0 0 340px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
    display: flex;
    flex-direction: column;
    height: 345px;
    cursor: pointer;
    clip-path: var(--sp-cut);
    transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

/* üst neon aksan çizgisi */
.sp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sp-accent) 0%, rgba(0,255,135,0.25) 45%, transparent 80%);
    z-index: 3;
    pointer-events: none;
}

/* hover sadece gerçek mouse'lu cihazlarda — dokunmatikte kart kaymasın */
@media (hover: hover) and (pointer: fine) {
    .sp-card:hover {
        transform: translateY(-4px);
        border-color: rgba(0,255,135,0.35);
        box-shadow: 0 16px 44px rgba(0,0,0,0.55);
    }
}

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

.sp-header {
    padding: 11px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
}

.sp-league-tag {
    font-size: 10px;
    font-weight: 800;
    font-family: 'Oxanium', 'Montserrat', sans-serif;
    letter-spacing: .1em;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sp-league-icon {
    width: 24px;
    height: 24px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
}

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

.sp-match-date {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sp-match-time-top {
    font-size: 12px;
    font-weight: 800;
    font-family: 'Oxanium', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--sp-accent);
}

/* 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 8px rgba(255,77,94,0.8);
    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: koyu taban + biçme şeritleri + kenar vinyeti */
.sp-match-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.014) 0 42px,
            transparent 42px 84px),
        linear-gradient(to right, rgba(0,0,0,0.2) 0%, transparent 50%, rgba(0,0,0,0.2) 100%),
        linear-gradient(180deg, #071510 0%, #0c2014 50%, #071510 100%);
    pointer-events: none;
    z-index: 0;
}

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

/* orta yuvarlak — VS üstüne hizalı */
.sp-pitch-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    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) */
.sp-match-area .sp-league-bg {
    position: absolute;
    inset: 0;
    background-size: 110px 110px;
    background-repeat: no-repeat;
    background-position: center 44%;
    opacity: 0.22;
    pointer-events: none;
    z-index: 1;
}

.sp-league-bg.bg-cl         { background-image: url("images/ucl.svg"); }
.sp-league-bg.bg-el         { background-image: url("images/europa.svg"); }
.sp-league-bg.bg-ecl        { background-image: url("images/conference.svg"); }
.sp-league-bg.bg-superlig   { background-image: url("images/superlig.svg"); }
.sp-league-bg.bg-bundesliga { background-image: url("images/bundesliga.svg"); }
.sp-league-bg.bg-seriea     { background-image: url("images/seriea.svg"); }
.sp-league-bg.bg-laliga     { background-image: url("images/laliga.svg"); }
.sp-league-bg.bg-premier    { background-image: url("images/premier.svg"); }
.sp-league-bg.bg-nba        { background-image: url("images/nba.svg"); opacity: 0.18; }
.sp-league-bg.bg-rg         { background-image: url("images/roland-garros.svg"); opacity: 0.22; }
.sp-league-bg.bg-nations    { background-image: url("images/ucl.svg"); opacity: 0.15; }

/* WORLD CUP — kupa filigrani (hub'daki gibi) + hafif gold projektör */
.sp-league-bg.bg-worldcup {
    background-image: url("../tournament/wc.webp");
    background-size: auto 118px;
    background-position: center 42%;
    opacity: 0.13;
    filter: grayscale(35%) brightness(1.5);
}

.sp-match-area.bg-worldcup::after {
    background: radial-gradient(ellipse at center top, rgba(251,191,36,0.09) 0%, transparent 70%);
}

/* worldcup sayfasında .wc-main zaten kendi kupa filigranını basıyor — çift kupa olmasın */
.wc-main .sp-league-bg.bg-worldcup { display: none; }

/* 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% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 40%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(56,130,255,0.12) 0%, transparent 70%) !important;
}

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

.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;
    padding: 0 14px;
    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 */
/* ========================= */

.sp-odds-row {
    display: flex;
    width: 100%;
    background: var(--sp-bg-dark);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-odd-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 800;
    font-family: 'Oxanium', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--sp-text-main);
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background .2s ease, color .2s ease;
    position: relative;
}

.sp-odd-item::before {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
}

.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:last-child {
    border-right: none;
}

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

.sp-odd-max {
    color: var(--sp-accent);
    text-shadow:
        0 0 6px rgba(0,255,135,0.6),
        0 0 12px rgba(0,255,135,0.4);
}

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

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

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

.sp-team-name {
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.01em;
}

/* 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: 70px;
}

.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: 15px;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    word-break: break-word;
    hyphens: auto;
}

.sp-vs-divider {
    font-size: 12px;
    font-weight: 800;
    font-family: 'Oxanium', sans-serif;
    color: var(--sp-accent);
    letter-spacing: .2em;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 12px rgba(0,255,135,0.35);
}

/* ========================= */
/* FOOTER — LED kickoff şeridi */
/* ========================= */

.sp-footer {
    padding: 11px 14px;
    border-top: 1px solid rgba(0,255,135,0.16);
    background: rgba(0,255,135,0.04);
    text-align: center;
}

.sp-countdown-text {
    font-size: 10.5px;
    font-weight: 700;
    font-family: 'Oxanium', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sp-accent);
}