/* Spor kategori sayfası (/spor/): takım şeridi adları, puan durumu lig seçimi, canlı maçlar şeridi,
   canlı anlatım ve 3'lü haber ızgarası. category.css'ten sonra yüklenir. */

.hbCatPage.sport,
.hbCatPage.takim {
    --sp-turuncu: #ff5a1f;
    --sp-kirmizi: #e3001b;
    --sp-yesil: #2da187;
    --sp-cizgi: #e6e6e6;
    --sp-metin: #222;
    --sp-soluk: #7a7a7a;
}

/* Takım şeridi: amblem altında takım adı */
.hbCatPage.sport .hbTeamsOrder .hbtoImg {
    width: 58px;
    padding: 6px 1px;
}

    .hbCatPage.sport .hbTeamsOrder .hbtoImg a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: #555;
    }

    .hbCatPage.sport .hbTeamsOrder .hbtoImg img {
        width: 36px;
        height: 36px;
    }

.hbCatPage.sport .hbTeamsOrder .hbtoAd {
    display: block;
    max-width: 56px;
    font-size: 10px;
    line-height: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sitenin sabit başlığı ile menü arası ~55px; yarısına indirilir. Üst boşluk ebeveynin 160px
   margin-top'u ile birleştiği (margin collapse) için negatif değer gerekir: 160 - 28 = 132. */
@media only screen and (min-width: 768px) {
    .hbCatPage.sport:not(.spPencereKok) {
        margin-top: -28px;
    }
}

/* Spor dalları menüsü: sayfanın en üstünde, başta sayfa başlığı (h1) */
.hbCatPage .spAltMenu {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    background: var(--sp-turuncu);
    border-radius: 4px;
}

.hbCatPage .spAltBaslik {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 18px;
    border-right: 1px solid rgba(255, 255, 255, .4);
    font-size: 20px;
    font-weight: 700;   /* eski sayfa başlığıyla (h1.title) aynı; 800 Windows'ta Segoe UI Black'e düşüyor */
    line-height: 26px;
    color: #fff;
    white-space: nowrap;
}

    .hbCatPage .spAltMenu > ul {
        flex: 1 1 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        margin: 0;
        padding: 0 8px;
        list-style: none;
    }

    .hbCatPage .spAltMenu li {
        position: relative;
    }

    .hbCatPage .spAltMenu > ul > li > a,
    .hbCatPage .spAltMenu > ul > li > button {
        display: block;
        padding: 12px 16px;
        border: 0;
        background: none;
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        color: #fff;
        cursor: pointer;
        white-space: nowrap;
    }

        .hbCatPage .spAltMenu > ul > li > a:hover,
        .hbCatPage .spAltMenu > ul > li > button:hover,
        .hbCatPage .spAltAcilir:focus-within > button {
            background: rgba(0, 0, 0, .12);
        }

    .hbCatPage .spAltAcilir > button::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin: 0 0 3px 8px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
    }

    /* Açılır menü: masaüstünde üzerine gelince, dokunmatikte butona dokununca (focus) açılır */
    .hbCatPage .spAltAcilir > ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 180px;
        margin: 0;
        padding: 6px 0;
        list-style: none;
        background: #fff;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    }

    .hbCatPage .spAltAcilir:hover > ul,
    .hbCatPage .spAltAcilir:focus-within > ul {
        display: block;
    }

    .hbCatPage .spAltAcilir > ul a {
        display: block;
        padding: 9px 16px;
        font-size: 14px;
        color: var(--sp-metin);
    }

        .hbCatPage .spAltAcilir > ul a:hover {
            background: #fff1eb;
            color: var(--sp-turuncu);
        }

    .hbCatPage .spAltMenu .spAltSag {
        margin-left: auto;
    }

/* Puan durumu / fikstür: lig seçimi ve takım amblemleri */
.hbCatPage .spPuanKutusu .hbssStandingsFixture .hbssTexts.active {
    border-top-color: var(--sp-turuncu);
    color: var(--sp-turuncu);
}

/* Kutu slider ile aynı yükseklikte kalsın diye (slider ~524px) satırlar sıkı; kutu kısa kalırsa
   ScoreColumn slider boyuna uzar ve fark tablo satırlarına dağılır. */
.hbCatPage .spPuanKutusu .hbssStandingsFixture .hbssTexts {
    padding: 8px 0;
    font-size: 14px;
    background: #f0f0f0;
}

    .hbCatPage .spPuanKutusu .hbssStandingsFixture .hbssTexts.active {
        background: #fff;
    }

.hbCatPage .spPuanKutusu thead th {
    padding: 8px 4px 2px;
    font-size: 13px;
}

.hbCatPage .spPuanKutusu tbody td {
    padding: 6px 4px 5px;
    font-size: 13px;
}

.hbCatPage .spPuanKutusu .hbssAllMoreScope {
    padding: 9px 0;
}

    .hbCatPage .spPuanKutusu .hbssAllMoreScope .hbssAllMore a {
        font-size: 13px;
    }

.hbCatPage .spPuanKutusu .spLigSecim {
    padding: 6px 10px;
    border-bottom: 1px solid var(--sp-cizgi);
}

    .hbCatPage .spPuanKutusu .spLigSecim select {
        width: 100%;
        height: 30px;
        padding: 0 10px;
        border: 1px solid #d5d5d5;
        border-radius: 4px;
        background: #fff;
        font-size: 14px;
        font-weight: 600;
        color: var(--sp-metin);
        cursor: pointer;
    }

/* Takım sayfasında tek lig: açılır liste yerine lig adı */
.hbCatPage .spPuanKutusu .spLigAdi {
    height: 30px;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    color: var(--sp-metin);
    text-align: center;
}

/* Takım sayfasında takımın kendi satırı */
.hbCatPage .spPuanKutusu tbody tr.spVurgu td {
    background: #fff1eb;
    font-weight: 700;
    color: var(--sp-metin);
}

    .hbCatPage .spPuanKutusu tbody tr.spVurgu td a {
        font-weight: 700;
        color: var(--sp-metin);
    }

/* Fikstür başlığı: ‹ hafta › */
.hbCatPage .spPuanKutusu .spFikBaslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.hbCatPage .spFikOk {
    flex: 0 0 26px;
    width: 26px;
    height: 24px;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}

    .hbCatPage .spFikOk::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 7px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: translate(-65%, -50%) rotate(45deg);
    }

    .hbCatPage .spFikOk.geri::before {
        transform: translate(-35%, -50%) rotate(-135deg);
    }

    .hbCatPage .spFikOk:disabled {
        opacity: .35;
        cursor: default;
    }

.hbCatPage .spFikstur.yukleniyor .spFikIcerik {
    opacity: .4;
}

.hbCatPage .spPuanKutusu .spFikstur.expanded .hbwmMatchsLineScope.hbssMore {
    display: block;
}

.hbCatPage .spPuanKutusu tbody td.spTakim img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
}

.hbCatPage .spPuanKutusu tbody tr:nth-child(-n+3) td:nth-child(2) a {
    color: var(--sp-metin);
}

.hbCatPage .spPuanKutusu tbody tr:nth-child(-n+3) td:first-child {
    color: var(--sp-turuncu);
    font-weight: 700;
}

.hbCatPage .spPuanKutusu .hbssLeagueWeekMatchTitle {
    background: var(--sp-turuncu);
}

.hbCatPage .spPuanKutusu .hbwmDateLine {
    background: #fff1eb;
}

.hbCatPage .spPuanKutusu .hbwmMatchs .hbwmClock {
    border-color: var(--sp-turuncu);
    color: var(--sp-turuncu);
}

    .hbCatPage .spPuanKutusu .hbwmMatchs .hbwmClock.canli {
        background: var(--sp-kirmizi);
        border-color: var(--sp-kirmizi);
        color: #fff;
    }

.hbCatPage .spPuanKutusu .hbssAllMoreScope {
    border-bottom-color: var(--sp-turuncu);
}

/* Bölüm başlığı */
/* Başlık üstte, lig sekmeleri altında tam genişlik tek satır (hepsi sığar) */
.hbCatPage .spBolumBaslik {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 12px;
}

    .hbCatPage .spBolumBaslik h2 {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 22px;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--sp-metin);
    }

.hbCatPage .spNokta {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sp-kirmizi);
    animation: spNabiz 1.6s ease-in-out infinite;
}

@keyframes spNabiz {
    50% { opacity: .35; }
}

/* Lig sekmeleri */
.hbCatPage .spLigSekmeler {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    scrollbar-width: none;
}

    .hbCatPage .spLigSekmeler::-webkit-scrollbar {
        display: none;
    }

    .hbCatPage .spLigSekmeler button {
        flex: 0 0 auto;
        padding: 6px 10px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        font-size: 12.5px;
        font-weight: 700;
        text-transform: uppercase;
        color: #555;
        cursor: pointer;
        white-space: nowrap;
    }

        .hbCatPage .spLigSekmeler button:hover {
            color: var(--sp-turuncu);
        }

        .hbCatPage .spLigSekmeler button.active {
            background: var(--sp-turuncu);
            color: #fff;
        }

    /* Diğer Ligler: yabancı ligler açılır menüde */
    .hbCatPage .spDigerLig {
        position: relative;
        flex: 0 0 auto;
    }

        .hbCatPage .spLigSekmeler .spDigerAc::after {
            content: "";
            display: inline-block;
            width: 5px;
            height: 5px;
            margin-left: 7px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
            vertical-align: 3px;
            transition: transform .15s;
        }

        .hbCatPage .spDigerLig.acik .spDigerAc::after {
            transform: rotate(-135deg);
            vertical-align: -1px;
        }

    .hbCatPage .spDigerMenu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 30;
        display: none;
        min-width: 170px;
        padding: 6px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    }

    .hbCatPage .spDigerLig.acik .spDigerMenu {
        display: block;
    }

        .hbCatPage .spLigSekmeler .spDigerMenu button {
            display: block;
            width: 100%;
            padding: 9px 12px;
            text-align: left;
        }

            .hbCatPage .spLigSekmeler .spDigerMenu button:hover:not(.active) {
                background: #f5f5f5;
            }

/* Canlı maçlar şeridi: gri zemin üzerinde beyaz kartlar */
.hbCatPage .spCanliMaclar {
    margin-bottom: 20px;
    padding: 12px 14px 14px;
    background: #f2f2f2;
    border-radius: 6px;
}

/* Oklar kartların üstüne biner; şerit kutunun iki kenarına kadar uzanır */
.hbCatPage .spSeritKapsam {
    position: relative;
    display: flex;
    align-items: center;
}

.hbCatPage .spSerit {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 104px;
    display: flex;
    gap: 12px;
    padding: 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

    .hbCatPage .spSerit::-webkit-scrollbar {
        display: none;
    }

.hbCatPage .spOk {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}

    .hbCatPage .spOk.geri {
        left: -12px;   /* kartın kenarına yarı yarıya biner, içeriği az kapatır */
    }

    .hbCatPage .spOk.ileri {
        right: -12px;   /* kartın kenarına yarı yarıya biner, içeriği az kapatır */
    }

    .hbCatPage .spOk::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        transform: translate(-65%, -50%) rotate(45deg);
    }

    .hbCatPage .spOk.geri::before {
        transform: translate(-35%, -50%) rotate(-135deg);
    }

    /* Kaydırılacak yer yoksa ok kartın üstünde soluk durmasın: tamamen gizlenir */
    .hbCatPage .spOk:disabled {
        visibility: hidden;
    }

/* Görünen alana tam 5 kart sığar; yarım kart kalmaz */
.hbCatPage .spMac {
    flex: 0 0 calc((100% - 48px) / 5);
    min-width: 0;   /* uzun takım adı kartı genişletmesin, "…" ile kısalsın */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--sp-cizgi);
    border-radius: 6px;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

    .hbCatPage .spMac:hover {
        border-color: #c8c8c8;
    }

    /* Canlı anlatımı olan (Süper Lig) maç kartında sağ üst etiket */
    .hbCatPage .spMac {
        position: relative;
    }

.hbCatPage .spMacEtiket {
    position: absolute;
    top: 9px;
    right: 9px;
    padding: 1px 5px 1px 11px;
    border-radius: 3px;
    background: rgba(227, 0, 27, .1);   /* anlatım rozetinin kırmızısı, şeffaf */
    color: var(--sp-kirmizi);
    font-size: 9px;
    font-weight: 700;
    line-height: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

    .hbCatPage .spMacEtiket::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 4px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--sp-kirmizi);
    }

/* Maç oynanırken etiketteki nokta yanıp söner */
.hbCatPage .spMac.canli .spMacEtiket::before {
    animation: spNabiz 1.6s ease-in-out infinite;
}

    /* Canlı anlatımı olmayan (Süper Lig dışı) maç: yalnızca bilgi */
    .hbCatPage .spMac.bilgi {
        cursor: default;
    }

        .hbCatPage .spMac.bilgi:hover {
            border-color: var(--sp-cizgi);
        }

    .hbCatPage .spMac.secili {
        border-color: var(--sp-turuncu);
        box-shadow: 0 0 0 1px var(--sp-turuncu);
    }

.hbCatPage .spMacUst {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 15px;
}

.hbCatPage .spMacLig {
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hbCatPage .spMacZaman {
    color: var(--sp-soluk);
}

.hbCatPage .spMac.canli .spMacZaman {
    color: var(--sp-kirmizi);
    font-weight: 700;
}

.hbCatPage .spMacTakim {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sp-metin);
}

    .hbCatPage .spMacTakim img {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .hbCatPage .spMacTakim span {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hbCatPage .spMacTakim b {
        flex: 0 0 auto;
        font-weight: 700;
    }

.hbCatPage .spMac.canli .spMacTakim b {
    color: var(--sp-kirmizi);
}

.hbCatPage .spSeritBos {
    padding: 24px 0;
    color: var(--sp-soluk);
    font-size: 14px;
}

/* Canlı anlatım */
.hbCatPage .spAnlatim {
    display: flex;
    min-height: 230px;
    margin-bottom: 36px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    overflow: hidden;
}

    .hbCatPage .spAnlatim.bos {
        display: none;
    }

.hbCatPage .spAnlSol {
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
    padding: 14px 20px 16px;
    border-right: 1px solid var(--sp-cizgi);
}

.hbCatPage .spAnlUst {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
    color: #555;
}

.hbCatPage .spAnlRozet {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 3px;
    background: var(--sp-kirmizi);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.hbCatPage .spAnlLig {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--sp-metin);
}

.hbCatPage .spAnlStat {
    min-width: 0;
    padding-left: 10px;
    border-left: 1px solid #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stadyum: ligin altında kendi satırında; kutu ve skor satırı aynı genişlikte olduğundan skorun tam üstünde ortalı */
.hbCatPage .spAnlStadyum {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hbCatPage .spAnlSkor {
    flex: 1 1 auto;
    display: flex;
    /* Takımlar üstten hizalı: golcü listesi uzun olan takımın logosu yukarı kaymaz */
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0 10px;
}

.hbCatPage .spAnlTakim {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--sp-metin);
}

    .hbCatPage .spAnlTakim img {
        width: 56px;
        height: 56px;
        object-fit: contain;
    }

a.spAnlTakim:hover span {
    text-decoration: underline;
}

.hbCatPage .spAnlOrta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Skor logoların hizasında: (logo 56 - skor 38) / 2 */
    padding-top: 9px;
}

.hbCatPage .spAnlSonuc {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    color: var(--sp-metin);
    white-space: nowrap;
}

.hbCatPage .spAnlDurum {
    padding: 4px 10px;
    border-radius: 4px;
    background: #f0f0f0;
    color: #555;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

    .hbCatPage .spAnlDurum.canli {
        background: var(--sp-kirmizi);
        color: #fff;
    }

/* Zaman çizgisi: dolu kısım maç dakikası, işaretler goller */
.hbCatPage .spAnlCizgi {
    position: relative;
    height: 6px;
    margin: 14px 0 6px;
    border-radius: 3px;
    background: #e3e3e3;
}

.hbCatPage .spAnlDolu {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: var(--sp-turuncu);
}

.hbCatPage .spAnlIsaret {
    position: absolute;
    top: -12px;
    font-size: 11px;
    line-height: 1;
    transform: translateX(-50%);
}

.hbCatPage .spAnlCizgiAlt {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--sp-soluk);
}

.hbCatPage .spAnlSag {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hbCatPage .spAnlSekmeler {
    display: flex;
    background: #f2f2f2;
    border-bottom: 1px solid var(--sp-cizgi);
    overflow-x: auto;
    scrollbar-width: none;
}

    .hbCatPage .spAnlSekmeler::-webkit-scrollbar {
        display: none;
    }

    .hbCatPage .spAnlSekmeler button {
        flex: 0 0 auto;
        padding: 12px 11px 10px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        color: #555;
        cursor: pointer;
    }

        .hbCatPage .spAnlSekmeler button.active {
            border-bottom-color: var(--sp-turuncu);
            color: var(--sp-turuncu);
        }

.hbCatPage .spAnlOlaylar {
    flex: 1 1 auto;
    max-height: 196px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
}

    /* İki satır: üstte olay başlığı, altında metnin tamamı; dakika ve ikon iki satırın ortasında */
    .hbCatPage .spAnlOlaylar li {
        display: grid;
        grid-template-columns: 48px 24px minmax(0, 1fr);
        align-items: center;
        gap: 2px 10px;
        padding: 9px 16px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 13px;
        color: #555;
    }

    .hbCatPage .spAnlOlaylar .spDk,
    .hbCatPage .spAnlOlaylar .spIk {
        grid-row: 1 / span 2;
    }

    .hbCatPage .spAnlOlaylar .spDk {
        justify-self: start;
        min-width: 38px;
        padding: 3px 6px;
        border-radius: 3px;
        background: #f2f2f2;
        text-align: center;
        font-weight: 700;
        color: var(--sp-metin);
    }

    .hbCatPage .spAnlOlaylar b {
        grid-column: 3;
        font-weight: 700;
        color: var(--sp-metin);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hbCatPage .spAnlOlaylar .spMetin {
        grid-column: 3;
        line-height: 18px;
    }

    .hbCatPage .spAnlOlaylar .spBos {
        display: block;
        padding: 28px 16px;
        border: 0;
        text-align: center;
        color: var(--sp-soluk);
    }

/* "Tüm canlı maç anlatımı" kutusu (açılır pencereyi açar) */
.hbCatPage .spAnlTumu {
    flex: 0 0 164px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 14px;
    padding: 18px 14px;
    border: 1.5px solid var(--sp-turuncu);
    border-radius: 6px;
    background: #fff;
    color: var(--sp-turuncu);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease;
}

    .hbCatPage .spAnlTumu:hover {
        background: #fff6f2;
    }

.hbCatPage .spAnlTumuIk {
    flex: 0 0 auto;
    display: block;
}

.hbCatPage .spAnlTumuYazi::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    vertical-align: 1px;
}

/* Tüm anlatım penceresi */
/* Kaydırma çubuğu kalkınca sayfa 15px genişleyip kayıyordu; boşluğu koru */
html.spPencereAcik {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.hbCatPage.spPencereKok {
    margin: 0;
}

.hbCatPage .spPencere {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .55);
}

    .hbCatPage .spPencere.acik {
        display: flex;
    }

.hbCatPage .spPenKutu {
    width: 680px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

.hbCatPage .spPenUst {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f2f2f2;
    font-size: 14px;
    color: #555;
}

    .hbCatPage .spPenUst .spAnlStat {
        flex: 1 1 auto;
    }

.hbCatPage .spPenKapat {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
}

    .hbCatPage .spPenKapat::before,
    .hbCatPage .spPenKapat::after {
        content: "";
        position: absolute;
        top: 15px;
        left: 8px;
        width: 16px;
        height: 2px;
        background: #333;
        transform: rotate(45deg);
    }

    .hbCatPage .spPenKapat::after {
        transform: rotate(-45deg);
    }

.hbCatPage .spPenSkor {
    flex: 0 0 auto;
    padding: 16px 24px;
}

.hbCatPage .spPenIy {
    font-size: 12px;
    color: var(--sp-soluk);
}

.hbCatPage .spPenSekmeler {
    display: flex;
    border-top: 1px solid var(--sp-cizgi);
    border-bottom: 1px solid var(--sp-cizgi);
}

    .hbCatPage .spPenSekmeler button {
        flex: 1 1 0;
        padding: 12px 0;
        border: 0;
        border-bottom: 3px solid transparent;
        background: #f7f7f7;
        font-size: 14px;
        font-weight: 700;
        color: #555;
        cursor: pointer;
    }

        .hbCatPage .spPenSekmeler button.active {
            background: #fff;
            border-bottom-color: var(--sp-turuncu);
            color: var(--sp-turuncu);
        }

.hbCatPage .spPenIcerik {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Pencerede olay metinleri kesilmez */
.hbCatPage .spPenOlaylar {
    max-height: none;
    overflow: visible;
}

    .hbCatPage .spPenOlaylar li {
        grid-template-columns: 48px 24px minmax(0, 1fr);
        align-items: start;
    }

    .hbCatPage .spPenOlaylar b {
        grid-column: 3;
        white-space: normal;
    }

    .hbCatPage .spPenOlaylar .spMetin {
        grid-column: 3;
        white-space: normal;
        margin-top: -6px;
    }

.hbCatPage .spPenIst {
    margin: 0;
    padding: 8px 20px 16px;
    list-style: none;
}

    .hbCatPage .spPenIst li {
        display: grid;
        grid-template-columns: 60px 1fr 60px;
        align-items: center;
        row-gap: 4px;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
    }

.hbCatPage .spIstDeger {
    font-weight: 700;
    color: var(--sp-metin);
}

    .hbCatPage .spIstDeger:last-of-type {
        text-align: right;
    }

.hbCatPage .spIstAd {
    text-align: center;
    color: #555;
}

.hbCatPage .spIstCubuk {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 3px;
    background: #3b6ec7;
    overflow: hidden;
}

    .hbCatPage .spIstCubuk i {
        display: block;
        height: 100%;
        background: var(--sp-turuncu);
    }

.hbCatPage .spPenBos {
    margin: 0;
    padding: 32px 16px;
    text-align: center;
    color: var(--sp-soluk);
}

.hbCatPage .spPenNot {
    flex: 0 0 auto;
    padding: 8px 16px;
    background: #f7f7f7;
    font-size: 12px;
    color: var(--sp-soluk);
    text-align: center;
}

    .hbCatPage .spPenNot:empty {
        display: none;
    }

/* Olay ikonları */
.hbCatPage .spIk {
    justify-self: center;
    display: inline-block;
    width: 18px;
    height: 18px;
    text-align: center;
    font-style: normal;
    line-height: 18px;
}

    .hbCatPage .spIk.gol::before { content: "\26BD"; font-size: 15px; }
    .hbCatPage .spIk.sari::before,
    .hbCatPage .spIk.kirmizi::before {
        content: "";
        display: inline-block;
        width: 11px;
        height: 15px;
        border-radius: 2px;
        background: #f5c400;
        vertical-align: middle;
    }
    .hbCatPage .spIk.kirmizi::before { background: var(--sp-kirmizi); }
    .hbCatPage .spIk.degisiklik::before { content: "\21C4"; font-size: 16px; font-weight: 700; color: var(--sp-yesil); }
    .hbCatPage .spIk.penalti::before { content: "\2715"; font-size: 13px; font-weight: 700; color: var(--sp-kirmizi); }
    .hbCatPage .spIk.pozisyon::before {
        content: "!";
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--sp-turuncu);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        line-height: 16px;
    }
    .hbCatPage .spIk.anlatim::before,
    .hbCatPage .spIk.diger::before { content: "\2022"; color: #999; }
    /* Robotun istatistikten ürettiği anlatım satırları: satırın türü (etiket) simgeye çevrilir */
    .hbCatPage .spIk.anlatim.sut::before { content: "\1F3AF"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.sut-disari::before { content: "\2197"; font-size: 15px; font-weight: 700; color: #999; }
    .hbCatPage .spIk.anlatim.sut-engel::before { content: "\1F6E1"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.kurtaris::before { content: "\1F9E4"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.korner::before { content: "\1F6A9"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.ofsayt::before { content: "\2690"; font-size: 15px; color: #999; }
    .hbCatPage .spIk.anlatim.faul::before { content: "\26A0"; font-size: 14px; color: #e0a800; }
    .hbCatPage .spIk.anlatim.durum::before { content: "\23F1"; font-size: 14px; color: #999; }

/* Düz anlatım satırı (yalnızca tüm anlatım penceresinde): başlıksız, metin geniş */
.hbCatPage .spAnlOlaylar li.spAnlatimSatiri {
    grid-template-columns: 48px 24px minmax(0, 1fr);
}

    .hbCatPage .spAnlOlaylar li.spAnlatimSatiri .spMetin {
        grid-column: 3;
        margin-top: 0;
        color: #444;
    }

/* Gol satırı vurgulu */
.hbCatPage .spAnlOlaylar li.gol {
    background: #fff8f4;
}

/* Haberler: satırda 3 kart */
.hbCatPage .spHaberler {
    margin-top: 8px;
}

.hbCatPage .spHaberBaslik {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--sp-metin);
}

    .hbCatPage .spHaberBaslik span {
        color: var(--sp-turuncu);
    }

.hbCatPage .spHaberIzgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ana sayfa kartı (rstyle6: .news-row > .news-item.news-box-type3) ile aynı görünüm: gri zemin,
   görsel + 16px başlık, sol üstte saat. Ana sayfa kuralları .news-row'a bağlı olduğundan burada tekrarlanır. */
.hbCatPage .spHaber {
    position: relative;
    min-width: 0;
    background-color: #eeeeee;
    border-radius: 4px;
    overflow: hidden;
}

    .hbCatPage .spHaber a {
        display: block;
        color: #000;
    }

    .hbCatPage .spHaber img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 340 / 191;
        object-fit: cover;
    }

    .hbCatPage .spHaber .news-txt {
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 10px;
        padding: 10px 10px 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 135%;
    }

    .hbCatPage .spHaber a:hover .news-txt {
        text-decoration: underline;
    }


/* Reklam yalnızca mobilde görünür (NewsList.aspx'teki #div-gpt-ad kuralı); satırı tam kaplar */
.hbCatPage .spHaberReklam {
    grid-column: 1 / -1;
    display: none;
}

/* Tablet */
@media only screen and (max-width: 1059px) {
    .hbCatPage .spMac {
        flex-basis: calc((100% - 36px) / 4);
    }

    .hbCatPage .spAnlSol {
        flex-basis: 360px;
    }

    .hbCatPage .spAnlOlaylar li {
        grid-template-columns: 44px 22px minmax(0, 1fr);
    }

    .hbCatPage .spAnlTumu {
        flex-basis: 140px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 995px) {
    .hbCatPage .spHaberReklam {
        display: block;
    }
}

/* Mobil */
@media only screen and (max-width: 767px) {
    .hbCatPage .spBolumBaslik {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Site başlığı ile spor menüsü arası 56px -> 12px. #page overflow:hidden olduğundan negatif
       margin menüyü kırpıyordu; bunun yerine #page'in 92px üst boşluğu 60px'e iner. */
    #page:has(> .hbCatPage.sport) {
        margin-top: 60px;
    }

    .hbCatPage.sport:not(.spPencereKok) {
        margin-top: 0;
    }

    /* Spor menüsü: üstte küçük başlık, altında tek satır yana kayan spor dalları.
       Kayan satırda açılır menü kırpılacağından alt dallar (Formula 1, Atletizm...) satıra açılır. */
    .hbCatPage .spAltMenu {
        display: block;
        margin-bottom: 12px;
        border-radius: 6px;
        overflow: hidden;
    }

    /* Sitenin mobil stili h1'i inline yapıyor; blok olmazsa şeridin üstüne taşıp kırpılır */
    .hbCatPage .spAltMenu .spAltBaslik {
        display: block;
        padding: 10px 12px 2px;
        border-right: 0;
        font-size: 17px;
        line-height: 22px;
    }

    .hbCatPage .spAltMenu > ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 4px 2px;
    }

        .hbCatPage .spAltMenu > ul::-webkit-scrollbar {
            display: none;
        }

        .hbCatPage .spAltMenu > ul > li > a,
        .hbCatPage .spAltAcilir > ul a {
            display: block;
            padding: 9px 8px;
            background: none;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            color: #fff;
            white-space: nowrap;
        }

    .hbCatPage .spAltAcilir,
    .hbCatPage .spAltAcilir > ul,
    .hbCatPage .spAltAcilir > ul > li {
        display: contents;
    }

        .hbCatPage .spAltMenu > ul > li.spAltAcilir > button {
            display: none;
        }

    /* Takım şeridi: daha küçük amblem ve ad */
    .hbCatPage .hbTeamsWrapper {
        margin-bottom: 12px;
    }

    .hbCatPage.sport .hbTeamsOrder .hbtoImg {
        width: 52px;
        padding: 4px 1px;
    }

        .hbCatPage.sport .hbTeamsOrder .hbtoImg img {
            width: 30px;
            height: 30px;
        }

    .hbCatPage.sport .hbTeamsOrder .hbtoAd {
        max-width: 50px;
        font-size: 9px;
        line-height: 11px;
    }

    /* Mobilde sekmeler sığmaz: sola yaslı, yatay kayar */
    .hbCatPage .spLigSekmeler {
        flex: 0 0 auto;
        justify-content: flex-start;
        overflow-x: auto;
    }

    /* Mobilde açılır menü yok: yabancı ligler de satırda yana kayar */
    .hbCatPage .spDigerLig,
    .hbCatPage .spDigerLig .spDigerMenu {
        display: contents;
    }

        .hbCatPage .spLigSekmeler .spDigerAc {
            display: none;
        }

        .hbCatPage .spLigSekmeler .spDigerMenu button {
            display: block;
            width: auto;
            padding: 7px 10px;
        }

        .hbCatPage .spLigSekmeler button {
            padding: 7px 10px;
        }

        .hbCatPage .spBolumBaslik h2,
        .hbCatPage .spHaberBaslik {
            font-size: 18px;
        }

    /* Mobilde de kart şeridinin kenarlarında ‹ › okları (lig sekmelerindeki gibi); biraz küçük */
    .hbCatPage .spOk {
        width: 28px;
        height: 28px;
    }

    /* "Canlı Anlatım" etiketi lig adının yanına sığsın diye 170 değil 200 */
    .hbCatPage .spMac {
        flex-basis: 200px;
    }

    .hbCatPage .spAnlatim {
        flex-direction: column;
    }

    .hbCatPage .spAnlSol {
        flex-basis: auto;
        padding: 12px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--sp-cizgi);
    }

    .hbCatPage .spAnlTakim {
        flex-basis: 96px;
        font-size: 13px;
    }

        .hbCatPage .spAnlTakim img {
            width: 44px;
            height: 44px;
        }

    .hbCatPage .spAnlSonuc {
        font-size: 30px;
    }

    .hbCatPage .spAnlOrta {
        padding-top: 7px;
    }

    .hbCatPage .spAnlSekmeler {
        overflow-x: auto;
        scrollbar-width: none;
    }

        .hbCatPage .spAnlSekmeler button {
            flex: 0 0 auto;
            padding: 10px 12px 8px;
        }

    .hbCatPage .spAnlOlaylar {
        max-height: 260px;
    }

        .hbCatPage .spAnlOlaylar li {
            grid-template-columns: 40px 20px minmax(0, 1fr);
            padding: 8px 12px;
        }

        .hbCatPage .spAnlOlaylar b {
            grid-column: 3;
        }

        .hbCatPage .spAnlOlaylar .spMetin {
            grid-column: 3;
            white-space: normal;
        }

    .hbCatPage .spHaberIzgara {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .hbCatPage .spCanliMaclar {
        margin-left: -10px;
        margin-right: -10px;
        padding: 10px;
        border-radius: 0;
    }

    .hbCatPage .spAnlTumu {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 10px;
        margin: 0 12px 12px;
        padding: 10px 12px;
        font-size: 15px;
    }

    .hbCatPage .spAnlTumuIk {
        width: 26px;
        height: 26px;
    }

    .hbCatPage .spPencere {
        padding: 0;
    }

    .hbCatPage .spPenKutu {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .hbCatPage .spPenSkor {
        padding: 12px;
    }

    .hbCatPage .spPenOlaylar li {
        grid-template-columns: 40px 20px minmax(0, 1fr);
    }

    .hbCatPage .spPenIst {
        padding: 4px 12px 12px;
    }
}

/* ---- Puan kutusu: üç sekme (Puan Durumu / Fikstür / Gol Krallığı) ---- */
.hbCatPage .spPuanKutusu .hbssStandingsFixture.uc .hbssTexts {
    width: 33.333%;
}

/* "Form" düğmesi: O G B M Av yerine son 5 maç (eskiden yeniye) */
.hbCatPage .spPuanKutusu thead th .spFormAc {
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    background: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    color: #7a7a7a;
    cursor: pointer;
    vertical-align: 1px;
}

    .hbCatPage .spPuanKutusu thead th .spFormAc[aria-pressed="true"] {
        border-color: var(--sp-turuncu);
        background: var(--sp-turuncu);
        color: #fff;
    }

.hbCatPage .spPuanKutusu .spSay {
    /* O, G, B, M sütunları %7: puan sütunu gol krallığındaki Gol sütunuyla aynı genişlikte (%12), sağdaki boşluk
       iki tabloda aynı; iki basamaklı sayı daralan sütuna sığsın */
    padding-left: 2px;
    padding-right: 2px;
}

.hbCatPage .spPuanKutusu .spForm {
    display: none;
}

.hbCatPage .spPuanKutusu.spFormGoster .spSay {
    display: none;
}

.hbCatPage .spPuanKutusu.spFormGoster .spForm {
    display: table-cell;
    white-space: nowrap;
}

.hbCatPage .spPuanKutusu .spF {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 1px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
}

    .hbCatPage .spPuanKutusu .spF.g { background: #2da187; }
    .hbCatPage .spPuanKutusu .spF.b { background: #9e9e9e; }
    .hbCatPage .spPuanKutusu .spF.m { background: #e3001b; }

.hbCatPage .spPuanKutusu .spFBos {
    color: #7a7a7a;
}

/* Gol krallığı: logo + oyuncu; gol kalın */
.hbCatPage .spPuanKutusu .spGolTablo {
    width: 100%;
    table-layout: fixed;
}

    .hbCatPage .spPuanKutusu .spGolTablo td.spOyuncu {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .hbCatPage .spPuanKutusu .spGolTablo td.spOyuncu img {
            width: 20px;
            height: 20px;
            margin-right: 6px;
            object-fit: contain;
            vertical-align: middle;
        }

    .hbCatPage .spPuanKutusu .spGolTablo td.spGol {
        font-weight: 700;
    }

/* ---- Canlı anlatım: maç başlamadan son karşılaşmalar ---- */
.hbCatPage .spAnlOlaylar li.spKarsBaslik,
.hbCatPage .spAnlOlaylar li.spKars {
    display: block;
    padding: 8px 16px;
}

.hbCatPage .spAnlOlaylar li.spKarsBaslik {
    padding-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #7a7a7a;
    text-transform: uppercase;
    border-bottom: 1px solid #e6e6e6;
}

.hbCatPage .spKars .spKarsTarih {
    display: block;
    font-size: 11px;
    color: #7a7a7a;
}

.hbCatPage .spKars .spKarsMac {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    font-size: 14px;
}

    .hbCatPage .spKars .spKarsMac .ev {
        text-align: right;
    }

    .hbCatPage .spKars .spKarsMac .ev,
    .hbCatPage .spKars .spKarsMac .dep {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hbCatPage .spKars .spKarsMac b {
        min-width: 44px;
        text-align: center;
    }

/* ---- Tüm anlatım penceresi: Kadrolar sekmesi ---- */
.hbCatPage .spKadro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    padding: 12px 24px 16px;
    overflow-y: auto;
}

    .hbCatPage .spKadro ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .hbCatPage .spKadro li {
        display: flex;
        gap: 8px;
        padding: 5px 0;
        font-size: 14px;
        border-bottom: 1px solid #e6e6e6;
    }

    .hbCatPage .spKadro .spKadNo {
        flex: 0 0 22px;
        font-weight: 700;
        text-align: right;
        color: #7a7a7a;
    }

    .hbCatPage .spKadro .spKadAd {
        padding-bottom: 6px;
        font-size: 15px;
        font-weight: 700;
        border-bottom: 2px solid var(--sp-turuncu);
    }

    .hbCatPage .spKadro .spKadAlt {
        margin-top: 12px;
        padding-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
        color: #7a7a7a;
        text-transform: uppercase;
    }

    .hbCatPage .spKadro .spKadYedek li {
        color: #7a7a7a;
    }

@media only screen and (max-width: 767px) {
    .hbCatPage .spKadro {
        gap: 0 12px;
        padding: 10px 12px 14px;
    }

        .hbCatPage .spKadro li {
            font-size: 13px;
        }

    .hbCatPage .spAnlOlaylar li.spKars,
    .hbCatPage .spAnlOlaylar li.spKarsBaslik {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hbCatPage .spKars .spKarsMac {
        font-size: 13px;
    }
}

/* Lig sekmeleri kutuya sığmazsa (tablet, dar pencere) yana kayar; "Diğer Ligler" satıra açılır (spor.js: sekmeTasma) */
.hbCatPage .spLigSekmeler.tasma {
    justify-content: flex-start;
    overflow-x: auto;
    cursor: grab;
}

    .hbCatPage .spLigSekmeler.tasma .spDigerLig,
    .hbCatPage .spLigSekmeler.tasma .spDigerMenu {
        display: contents;
    }

    .hbCatPage .spLigSekmeler.tasma .spDigerAc {
        display: none;
    }

    .hbCatPage .spLigSekmeler.tasma .spDigerMenu button {
        display: block;
        width: auto;
        padding: 7px 10px;
    }

/* Mobil: sekme satırı ekran genişliğinde kalır, içi yana kayar (önceden içerik kadar genişleyip kesiliyordu) */
@media only screen and (max-width: 767px) {
    .hbCatPage .spLigSekmeler {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* Son karşılaşma satırında skor (b) olay satırlarının 3. sütun kuralına uymaz: ev | skor | deplasman */
.hbCatPage .spAnlOlaylar .spKars .spKarsMac b {
    grid-column: auto;
}

/* "Son 5 maç" düğmesi: renkli üç nokta + yazı; basılıyken "Puan tablosu" (geri dönüş) yazar */
.hbCatPage .spPuanKutusu thead th .spFormAc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 7px 2px 5px;
    border: 1px solid var(--sp-turuncu);
    border-radius: 10px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    color: var(--sp-turuncu);
    text-transform: none;
}

    .hbCatPage .spPuanKutusu thead th .spFormAc:hover {
        background: var(--sp-turuncu);
        color: #fff;
    }

    .hbCatPage .spPuanKutusu thead th .spFormAc[aria-pressed="true"] {
        border-color: var(--sp-turuncu);
        background: var(--sp-turuncu);
        color: #fff;
    }

.hbCatPage .spPuanKutusu .spFormNokta {
    display: inline-flex;
    gap: 2px;
}

    .hbCatPage .spPuanKutusu .spFormNokta i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    .hbCatPage .spPuanKutusu .spFormNokta i.g { background: #2da187; }
    .hbCatPage .spPuanKutusu .spFormNokta i.b { background: #9e9e9e; }
    .hbCatPage .spPuanKutusu .spFormNokta i.m { background: #e3001b; }

.hbCatPage .spPuanKutusu .spFormKapaYazi,
.hbCatPage .spPuanKutusu.spFormGoster .spFormAcYazi,
.hbCatPage .spPuanKutusu.spFormGoster .spFormNokta {
    display: none;
}

.hbCatPage .spPuanKutusu.spFormGoster .spFormKapaYazi {
    display: inline;
}

/* Rozetler: galibiyet yeşil, beraberlik gri, mağlubiyet kırmızı */
.hbCatPage .spPuanKutusu .spF.g { background: #2da187; color: #fff; }
.hbCatPage .spPuanKutusu .spF.b { background: #9e9e9e; color: #fff; }
.hbCatPage .spPuanKutusu .spF.m { background: #e3001b; color: #fff; }

/* Masaüstünde kutu dar (~300px): "Takım" başlığı yalnızca ekran okuyucuya kalır, yeri "Son 5 maç" düğmesinin */
@media only screen and (min-width: 768px) {
    .hbCatPage .spPuanKutusu .spTakimBaslik {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .hbCatPage .spPuanKutusu thead th .spFormAc {
        margin-left: 0;
    }
}

/* Son karşılaşmalar: iki takım adı da her satırda aynı hizadan başlar (ev sahibi sola yaslı) */
.hbCatPage .spKars .spKarsMac .ev {
    text-align: left;
}

/* Son karşılaşmalar: kazanan takım kalın */
.hbCatPage .spAnlOlaylar .spKars .spKarsMac .kazandi {
    font-weight: 700;
    color: #222;
}

/* Son karşılaşmalar: skor ortada sabit sütunda; iki takım adı kendi sütununda ortalı, böylece her satırda
   aynı merkez çizgisinde durur (uzun ad "…" ile kısalır) */
.hbCatPage .spAnlOlaylar .spKars .spKarsMac {
    grid-template-columns: minmax(0, 110px) 48px minmax(0, 110px);
    justify-content: center;
    gap: 6px;
}

    .hbCatPage .spAnlOlaylar .spKars .spKarsMac .ev {
        grid-column: 1;
        text-align: center;
    }

    .hbCatPage .spAnlOlaylar .spKars .spKarsMac b {
        grid-column: 2;
        text-align: center;
    }

    .hbCatPage .spAnlOlaylar .spKars .spKarsMac .dep {
        grid-column: 3;
        text-align: center;
    }

/* Anlatım sekmeleri: sığmayınca kenarda ‹ › okları (solan zemin üstünde) */
.hbCatPage .spAnlSekmeKap {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
}

.hbCatPage .spSekOk {
    position: absolute;
    top: 0;
    bottom: 1px;
    z-index: 2;
    display: none;
    width: 34px;
    padding: 0;
    border: 0;
    cursor: pointer;
}

    .hbCatPage .spSekOk.geri {
        left: 0;
        background: linear-gradient(to right, #f2f2f2 55%, rgba(255, 255, 255, 0));
    }

    .hbCatPage .spSekOk.ileri {
        right: 0;
        background: linear-gradient(to left, #f2f2f2 55%, rgba(255, 255, 255, 0));
    }

    .hbCatPage .spSekOk::before {
        content: "";
        position: absolute;
        top: 50%;
        width: 7px;
        height: 7px;
        border-top: 2px solid var(--sp-turuncu);
        border-right: 2px solid var(--sp-turuncu);
    }

    .hbCatPage .spSekOk.geri::before {
        left: 9px;
        transform: translateY(-50%) rotate(-135deg);
    }

    .hbCatPage .spSekOk.ileri::before {
        right: 9px;
        transform: translateY(-50%) rotate(45deg);
    }

.hbCatPage .spAnlSekmeKap.solVar .spSekOk.geri,
.hbCatPage .spAnlSekmeKap.sagVar .spSekOk.ileri {
    display: block;
}

/* Masaüstü: "Tüm canlı maç anlatımı" kutusu ve skor bölümü daraltıldı, anlatım sekmelerinin hepsi sığsın */
@media only screen and (min-width: 768px) {
    .hbCatPage .spAnlSol {
        flex-basis: 350px;
    }

    .hbCatPage .spAnlTumu {
        flex-basis: 96px;
        margin: 10px;
        padding: 14px 8px;
        gap: 10px;
    }

        .hbCatPage .spAnlTumu .spAnlTumuYazi {
            font-size: 13px;
            line-height: 17px;
        }

        .hbCatPage .spAnlTumu .spAnlTumuIk {
            width: 28px;
            height: 28px;
        }

    .hbCatPage .spAnlSekmeler button {
        padding: 12px 6px 10px;
        font-size: 11px;
    }
}

/* Lig sekmeleri (Maçlar): sığmayınca kenarda ‹ › okları; çubuğun içinde yapışık, yer kaplamaz */
.hbCatPage .spLigSekmeler .spSekOk {
    position: sticky;
    top: auto;
    bottom: auto;
    flex: 0 0 34px;
    align-self: stretch;
    min-width: 0;
    padding: 0;
    border: 0;
}

    .hbCatPage .spLigSekmeler .spSekOk.geri {
        left: 0;
        margin-right: -34px;
        background: linear-gradient(to right, #fff 55%, rgba(255, 255, 255, 0));
    }

    .hbCatPage .spLigSekmeler .spSekOk.ileri {
        right: 0;
        margin-left: -34px;
        background: linear-gradient(to left, #fff 55%, rgba(255, 255, 255, 0));
    }

    .hbCatPage .spLigSekmeler .spSekOk::before {
        border-color: var(--sp-turuncu);
    }

.hbCatPage .spLigSekmeler.solVar .spSekOk.geri,
.hbCatPage .spLigSekmeler.sagVar .spSekOk.ileri {
    display: block;
}

/* ---- Erişilebilirlik (a11y taraması 26.10.2026) ---- */
/* Ekran okuyucuya duyuru bölgesi: görünmez */
.spSr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Klavyeyle gezinirken odak görünür (fareyle tıklamada çıkmaz) */
.hbCatPage .spSerit .spMac:focus-visible,
.hbCatPage .spLigSekmeler button:focus-visible,
.hbCatPage .spAnlSekmeler button:focus-visible,
.hbCatPage .spPenSekmeler button:focus-visible,
.hbCatPage .spSekOk:focus-visible,
.hbCatPage .spAnlTumu:focus-visible,
.hbCatPage .spPuanKutusu .hbssTexts:focus-visible,
.hbCatPage .spPuanKutusu .spFormAc:focus-visible,
.hbCatPage .spPuanKutusu .spFikOk:focus-visible,
.hbCatPage .spPuanKutusu select:focus-visible {
    outline: 2px solid #c2410c;
    outline-offset: 2px;
}

/* Küçük yazılarda WCAG AA kontrastı (4.5:1): gri #666, vurgu rengi yazıda #c2410c */
.hbCatPage .spMacZaman,
.hbCatPage .spMacLig,
.hbCatPage .spAnlOlaylar .spBos,
.hbCatPage .spAnlOlaylar li.spKarsBaslik,
.hbCatPage .spKars .spKarsTarih,
.hbCatPage .spPuanKutusu tbody td.spSay,
.hbCatPage .spPuanKutusu tbody td.sol,
.hbCatPage .spPuanKutusu tbody td.spSira,
.hbCatPage .spPuanKutusu tbody td[align="center"],
.hbCatPage .spPuanKutusu .hbssStandingsFixture .hbssTexts {
    color: #666;
}

.hbCatPage .spPuanKutusu thead th .spFormAc {
    min-height: 24px;
}

.hbCatPage .spPuanKutusu tbody tr:nth-child(-n+3) td:first-child,
.hbCatPage .spPuanKutusu .hbssStandingsFixture .hbssTexts.active,
.hbCatPage .spPuanKutusu thead th .spFormAc,
.hbCatPage .spAnlTumu,
.hbCatPage .spAnlSekmeler button.active {
    color: #c2410c;
}

    .hbCatPage .spPuanKutusu thead th .spFormAc[aria-pressed="true"],
    .hbCatPage .spPuanKutusu thead th .spFormAc:hover {
        border-color: #c2410c;
        background: #c2410c;
        color: #fff;
    }

/* Kontrast: zaman çizgisi etiketleri (0' 45' 90') */
.hbCatPage .spAnlCizgiAlt span {
    color: #666;
}

/* Takım amblemleri şeridi: sığmayınca kenarlarda ‹ › okları (maç şeridindeki oklar, kutunun içinde) */
.hbCatPage .spTakimSerit {
    position: relative;
}

    .hbCatPage .spTakimSerit .spOk {
        width: 28px;
        height: 28px;
    }

    .hbCatPage .spTakimSerit .spOk.geri {
        left: 4px;
    }

    .hbCatPage .spTakimSerit .spOk.ileri {
        right: 4px;
    }

/* Maç öncesi "Tümü": başlama mesajı geniş, altında son karşılaşmalardan ikisi görünür, diğerleri kaydırılınca */
.hbCatPage #spAnlatim .spAnlOlaylar:has(> li.spKarsBaslik) > .spBos {
    padding: 40px 16px;
}

.hbCatPage #spAnlatim .spAnlOlaylar:has(> li.spKarsBaslik) {
    max-height: 212px;
}

/* "Maç ... başlayacak" kalın ve koyu; maç başlayınca "olay yok" mesajları gri */
.hbCatPage .spAnlOlaylar .spBos.baslamadi {
    font-weight: 700;
    color: var(--sp-metin);
}

/* ---- İstatistik özeti satırı, uzatma/penaltı skoru, kadroda oyuncu olayları ---- */
    .hbCatPage .spIk.anlatim.ozet::before { content: "\1F4CA"; font-size: 13px; }

.hbCatPage .spAnlEk {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.hbCatPage .spKadro .spKadIs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

    .hbCatPage .spKadro .spKadIs::before { font-size: 12px; line-height: 1; }
    .hbCatPage .spKadro .spKadIs.gol::before { content: "\26BD"; }
    .hbCatPage .spKadro .spKadIs.kk::before { content: "\26BD"; opacity: .55; }
    .hbCatPage .spKadro .spKadIs.asist::before { content: "A"; padding: 0 2px; border: 1px solid #999; border-radius: 3px; font-size: 9px; font-weight: 700; color: #555; }
    .hbCatPage .spKadro .spKadIs.sari::before { content: ""; width: 8px; height: 11px; border-radius: 1px; background: #f5c400; }
    .hbCatPage .spKadro .spKadIs.kirmizi::before { content: ""; width: 8px; height: 11px; border-radius: 1px; background: #d00000; }
    .hbCatPage .spKadro .spKadIs.cikti::before { content: "\25BC"; font-size: 9px; color: #d00000; }
    .hbCatPage .spKadro .spKadIs.girdi::before { content: "\25B2"; font-size: 9px; color: #1a9c3e; }

/* Kadro: işaretler isim sütununu taşırmasın; dar ekranda ismin altına iner */
.hbCatPage .spKadro .spKadTakim {
    min-width: 0;
}

    .hbCatPage .spKadro li { flex-wrap: wrap; }
    .hbCatPage .spKadro .spKadOyuncu { flex: 1 1 0; min-width: 0; }
    .hbCatPage .spKadro .spKadIsler { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-left: auto; }

@media only screen and (max-width: 767px) {
    .hbCatPage .spKadro .spKadIsler {
        flex-basis: 100%;
        margin-left: 30px;
    }
}

/* İstatistik özeti satırı: mini tablo (ev sahibi | istatistik | deplasman) */
.hbCatPage .spAnlOlaylar li.spOzet .spOzetKutu {
    grid-column: 3;
    min-width: 0;
}

    .hbCatPage .spAnlOlaylar li.spOzet .spOzetBaslik {
        display: block;
        margin-bottom: 4px;
        font-size: 13px;
    }

    .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo {
        width: 100%;
        max-width: 380px;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 12px;
    }

        .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo th,
        .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo td {
            padding: 2px 6px;
            border-bottom: 1px solid #eee;
        }

        .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo thead th {
            width: 30%;
            overflow: hidden;
            font-weight: 600;
            color: #666;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

            .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo thead th:nth-child(2) { width: 40%; }

        .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo tbody th {
            font-weight: 400;
            white-space: nowrap;
            color: #666;
            text-align: center;
        }

        .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo td {
            font-weight: 700;
            color: #333;
        }

        .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo thead th:first-child,
        .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo td:first-child { text-align: right; }
        .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo thead th:last-child,
        .hbCatPage .spAnlOlaylar li.spOzet .spOzetTablo td:last-child { text-align: left; }

/* ---- Canlı kutu: gol anı, golcüler, kırmızı kart, zaman çizgisi işaretleri, istatistik çubukları, yeni satır ---- */
@keyframes spGolNabiz {
    0%, 30%, 60% { transform: scale(1.18); color: var(--sp-turuncu); }
    15%, 45%, 75% { transform: scale(1); }
    100% { transform: scale(1); }
}

@keyframes spGolBant {
    0% { opacity: 0; transform: translate(-50%, 4px); }
    10%, 85% { opacity: 1; transform: translateX(-50%); }
    100% { opacity: 0; transform: translateX(-50%); }
}

@keyframes spYeniSatir {
    0% { background-color: #fff3c4; }
    100% { background-color: transparent; }
}

@keyframes spKartGol {
    0%, 70% { box-shadow: 0 0 0 2px var(--sp-turuncu); }
    100% { box-shadow: none; }
}

.hbCatPage .spAnlSonuc.gol {
    animation: spGolNabiz 8s ease-out both;
}

.hbCatPage .spGolBant {
    /* Skorun üstündeki boşlukta, akış dışında: gol anında skor ve takımlar yerinden oynamaz */
    position: absolute;
    top: -14px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    padding: 1px 8px;
    line-height: 16px;
    border-radius: 3px;
    background: var(--sp-turuncu);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    animation: spGolBant 8s ease-out both;
}

.hbCatPage .spSerit .spMac.golAni {
    animation: spKartGol 8s ease-out both;
}

.hbCatPage .spAnlOlaylar li.spYeni {
    animation: spYeniSatir 6s ease-out both;
}

.hbCatPage .spAnlGolcu {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    color: #666;
}

.hbCatPage .spAnlKirmizi {
    display: inline-block;
    width: 8px;
    height: 11px;
    margin-left: 4px;
    border-radius: 1px;
    background: #d00000;
    vertical-align: -1px;
}

/* Zaman çizgisi: ev sahibinin olayları üstte, deplasmanınki altta */
.hbCatPage .spAnlCizgi {
    margin-bottom: 16px;
}

    .hbCatPage .spAnlIsaret.dep { top: 9px; }
    .hbCatPage .spAnlIsaret.sari,
    .hbCatPage .spAnlIsaret.kirmizi { width: 5px; height: 8px; border-radius: 1px; }
    .hbCatPage .spAnlIsaret.sari { background: #f5c400; }
    .hbCatPage .spAnlIsaret.kirmizi { background: #d00000; }
    .hbCatPage .spAnlIsaret.ev.sari,
    .hbCatPage .spAnlIsaret.ev.kirmizi { top: -10px; }
    .hbCatPage .spAnlIsaret.degisiklik { width: 2px; height: 7px; background: #999; }
    .hbCatPage .spAnlIsaret.ev.degisiklik { top: -9px; }

/* Kutuda canlı istatistik çubukları */
.hbCatPage .spAnlIst {
    margin-top: 10px;
}

    .hbCatPage .spAnlIstSatir {
        display: grid;
        grid-template-columns: 40px 1fr 40px;
        align-items: center;
        margin-top: 6px;
        font-size: 12px;
    }

        .hbCatPage .spAnlIstSatir b:first-child { text-align: left; }
        .hbCatPage .spAnlIstSatir b:last-of-type { text-align: right; }
        .hbCatPage .spAnlIstSatir span { text-align: center; color: #666; }

    .hbCatPage .spAnlIstCubuk {
        grid-column: 1 / -1;
        height: 4px;
        margin-top: 3px;
        border-radius: 2px;
        background: #e3e3e3;
        overflow: hidden;
    }

        .hbCatPage .spAnlIstCubuk i {
            display: block;
            height: 100%;
            background: var(--sp-turuncu);
        }

/* Robotun zaman, skor, bağlam, kart notu ve karşılaşma geçmişi satırları */
    .hbCatPage .spIk.anlatim.zaman::before { content: "\23F3"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.skor::before { content: "\1F4CB"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.baglam::before { content: "\2139"; font-size: 14px; color: #999; }
    .hbCatPage .spIk.anlatim.kart-not::before { content: "\2139"; font-size: 14px; color: #999; }
    .hbCatPage .spIk.anlatim.gecmis::before { content: "\1F4C5"; font-size: 13px; }

/* Masaüstünde kutudaki liste sütunun altına kadar uzanır: sol sütun (istatistik çubukları) uzadıkça altta beyaz alan kalmaz */
@media only screen and (min-width: 768px) {
    .hbCatPage #spAnlatim .spAnlOlaylar {
        flex: 1 1 0;
        height: 0;
        min-height: 196px;
        max-height: none;
    }
}

/* ---- Analiz satırları (seri, dakika eğilimi, golcü formu, puan farkı, maç raporu) ---- */
    .hbCatPage .spIk.anlatim.seri::before { content: "\1F525"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.egilim::before { content: "\1F4C8"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.form::before { content: "\2B50"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.puan::before { content: "\1F3C6"; font-size: 13px; }
    .hbCatPage .spIk.anlatim.rapor::before,
    .hbCatPage .spIk.anlatim.iy-rapor::before { content: "\1F4DD"; font-size: 13px; }

.hbCatPage .spAnlOlaylar li.spRapor .spMetin {
    line-height: 1.5;
}

    .hbCatPage .spAnlOlaylar li.spRapor .spRaporBaslik {
        display: block;
        margin-bottom: 2px;
        color: #222;
        text-align: center;
    }

    /* Rapor satırları: sonuç cümlesi, altında etiketli satırlar (Goller, İstatistik, Kırmızı kart, Puan durumu) */
    .hbCatPage .spAnlOlaylar li.spRapor .spRaporSonuc {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        color: #333;
    }

    .hbCatPage .spAnlOlaylar li.spRapor .spRaporListe {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: baseline;
        gap: 2px 10px;
    }

    .hbCatPage .spAnlOlaylar li.spRapor .spRaporEtiket {
        font-size: 12px;
        font-weight: 700;
        color: #666;
    }

    /* Uzun ad sütuna sığmazsa kırılır; takım adı (b) listenin genel "b: tek satır" kuralından çıkar */
    .hbCatPage .spAnlOlaylar li.spRapor .spRaporDeger {
        overflow-wrap: anywhere;
    }

        .hbCatPage .spAnlOlaylar li.spRapor .spRaporDeger b {
            white-space: normal;
        }

@media only screen and (max-width: 1059px) {
    /* Tablet ve telefonda anlatım sütunu dar: etiket değerin üstünde; tekrar eden (boş) etiket yer kaplamaz */
    .hbCatPage .spAnlOlaylar li.spRapor .spRaporListe {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .hbCatPage .spAnlOlaylar li.spRapor .spRaporEtiket {
        margin-top: 4px;
    }

        .hbCatPage .spAnlOlaylar li.spRapor .spRaporEtiket:empty {
            display: none;
        }
}

/* ---- Maç Bilgisi sekmesi ---- */
.hbCatPage .spBilgi {
    padding: 16px 20px;
    font-size: 13px;
    color: #333;
}

.hbCatPage .spBilIki {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hbCatPage .spBilKart {
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 8px;
}

.hbCatPage .spBilAd {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.hbCatPage .spBilSatir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f2f2f2;
}

    .hbCatPage .spBilSatir span { color: #777; }
    .hbCatPage .spBilSatir b { text-align: right; }

.hbCatPage .spBilForm {
    display: inline-flex;
    gap: 4px;
}

    .hbCatPage .spBilForm i {
        width: 22px;
        height: 22px;
        border-radius: 4px;
        color: #fff;
        font: 700 12px/22px Arial, sans-serif;
        font-style: normal;
        text-align: center;
    }

    .hbCatPage .spBilForm i.G { background: #1a9c3e; }
    .hbCatPage .spBilForm i.B { background: #999; }
    .hbCatPage .spBilForm i.M { background: #d00000; }

.hbCatPage .spBilBaslik {
    margin: 16px 0 6px;
    font-size: 14px;
    font-weight: 700;
}

.hbCatPage .spBilH2H {
    width: 100%;
    border-collapse: collapse;
}

    .hbCatPage .spBilH2H th,
    .hbCatPage .spBilH2H td {
        padding: 7px 6px;
        border-bottom: 1px solid #eee;
        text-align: center;
    }

    .hbCatPage .spBilH2H th { font-size: 12px; font-weight: 600; color: #777; }
    .hbCatPage .spBilH2H .ev { text-align: right; }
    .hbCatPage .spBilH2H .dep { text-align: left; }
    .hbCatPage .spBilH2H .skor { font-weight: 700; white-space: nowrap; }
    .hbCatPage .spBilH2H .kazandi { font-weight: 700; color: #222; }

@media only screen and (max-width: 767px) {
    .hbCatPage .spBilIki { grid-template-columns: 1fr; }
    .hbCatPage .spBilgi { padding: 12px; }
    .hbCatPage .spBilH2H th:nth-child(2),
    .hbCatPage .spBilH2H td:nth-child(2) { display: none; }
}