/*  YENİ NESİL FERAH RENK PALETİ  */
:root {
    --pt-bg: #F8FAFC;
    --pt-card-bg: #FFFFFF;
    --pt-text-dark: #0F172A;
    --pt-text-light: #64748B;
    --pt-yellow: #F59E0B;
    --pt-border: #E2E8F0;
    --pt-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

body {
    background-color: var(--pt-bg) !important;
    color: var(--pt-text-dark);
    font-family: 'Inter', system-ui, sans-serif;
}

/*  HERO ALANI (VİDEO + KAYAN KARTLAR)  */
.hero-section {
    padding: 24px 0;
    margin-bottom: 20px;
}

.hero-container {
    display: flex;
    gap: 20px;
    align-items: stretch; /*  KİLİT NOKTA: Video ve Slider kutusunun boyunu %100 eşitler */
}

/* Sol Taraf: Video Kutusu */
.hero-video-box {
    flex: 0 0 35%;
    background: var(--pt-card-bg);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--pt-border);
    box-shadow: var(--pt-shadow);
    position: relative;
    display: flex;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sağ Taraf: Kayan Kartların Havuzu */
.hero-slider-box {
    flex: 1;
    background: #F1F5F9;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid var(--pt-border);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 🔥 Başlığı ve Slider'ı alt alta dizer */
}

/* 🔥 Geri Gelen Başlık Stili 🔥 */
.hero-slider-header {
    font-size: 14px;
    font-weight: 900;
    color: var(--pt-text-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .hero-slider-header i {
        color: var(--pt-yellow);
    }

/* Kayan Alan Konteyneri */
.slider-track-container {
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex: 1; /* Konteynerin kalan tüm dikey boşluğunu doldurup kartları uzatır */
}

.slider-track {
    display: flex;
    gap: 16px;
    width: max-content;
    align-items: stretch;
}

/* Oley.com Tarzı Bembeyaz Kutu Kartlar */
.hero-match-card {
    /* Artık genişliği CSS ile değil, kusursuz sığması için Javascript ile dinamik vereceğiz! */
    height: auto;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    cursor: pointer;
}

    .hero-match-card:hover {
        transform: translateY(-4px);
        border-color: var(--pt-yellow);
        box-shadow: 0 8px 16px rgba(245, 158, 11, 0.15);
    }

/* Kart İçi Detaylar */
.card-league {
    font-size: 11px;
    font-weight: 800;
    color: var(--pt-text-light);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-teams {
    font-size: 15px;
    font-weight: 800;
    color: var(--pt-text-dark);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-ai-badge {
    font-size: 11px;
    font-weight: 800;
    color: #10B981;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-prediction-box {
    background: #F8FAFC;
    border: 1px solid var(--pt-border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-pred-text {
    font-size: 16px;
    font-weight: 900;
    color: var(--pt-text-dark);
}

.card-pred-odd {
    font-size: 14px;
    font-weight: 800;
    color: var(--pt-yellow);
    background: #FFFBEB;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Mobil Uyum */
@media (max-width: 992px) {
    .hero-container {
        flex-direction: column;
    }

    .hero-video-box {
        width: 100%;
        height: 200px;
    }
}
/* ========================================================= */
/*  ÖNE ÇIKAN KARŞILAŞMALAR (BORSA/OLEY TARZI LİSTE)  */
/* ========================================================= */

.featured-section {
    margin-top: 10px;
    margin-bottom: 40px;
}

.featured-header {
    font-size: 15px;
    font-weight: 900;
    color: var(--pt-text-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .featured-header i {
        color: var(--pt-yellow);
    }

.match-list-container {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--pt-shadow);
}

/* Masaüstü Tablo Başlıkları */
.match-table-header {
    display: flex;
    padding: 12px 20px;
    background: #F8FAFC;
    border-bottom: 1px solid var(--pt-border);
    font-size: 11px;
    font-weight: 800;
    color: var(--pt-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.col-match {
    flex: 2;
    min-width: 220px;
}

.col-odds {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
}

.col-action {
    width: 40px;
    text-align: right;
}

/* Satır Tasarımı */
.match-row-item {
    border-bottom: 1px solid var(--pt-border);
    transition: background 0.2s ease;
}

    .match-row-item:last-child {
        border-bottom: none;
    }

    .match-row-item:hover {
        background: #F8FAFC;
    }

.match-main-info {
    display: flex;
    padding: 14px 20px;
    align-items: center;
}

/* Takımlar ve Saat */
.match-time-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--pt-text-light);
    margin-right: 16px;
    background: #F1F5F9;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    text-align: center;
    min-width: 50px;
}

.match-teams {
    font-size: 14px;
    font-weight: 800;
    color: var(--pt-text-dark);
    line-height: 1.4;
}

.team-home, .team-away {
    display: block;
}

/* Oley Tarzı Oran Kutuları */
.odds-group {
    display: flex;
    gap: 4px;
    background: #F1F5F9;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
}

.odd-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
}

    .odd-box span {
        font-size: 9px;
        color: var(--pt-text-light);
        font-weight: 800;
        margin-bottom: 2px;
    }

    .odd-box strong {
        font-size: 12px;
        color: var(--pt-text-dark);
        font-weight: 900;
    }

    .odd-box:hover {
        border-color: var(--pt-yellow);
        transform: translateY(-1px);
    }

    /*  Yapay Zekanın Seçtiği Tahmin Parıl Parıl Parlar  */
    .odd-box.active-ai {
        background: var(--pt-yellow);
        border-color: var(--pt-yellow);
        box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
    }

        .odd-box.active-ai span {
            color: #FFFBEB;
        }

        .odd-box.active-ai strong {
            color: #FFFFFF;
        }

/* Akordiyon Ok Butonu */
.accordion-btn-toggle {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pt-text-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .accordion-btn-toggle:hover {
        background: #E2E8F0;
        color: var(--pt-text-dark);
    }

    .accordion-btn-toggle:not(.collapsed) {
        transform: rotate(180deg);
        background: #FEF3C7;
        border-color: var(--pt-yellow);
        color: var(--pt-yellow);
    }

/* Akordiyon İçi Detaylar (Gizli Alan) */
.accordion-body-custom {
    background: #F8FAFC;
    padding: 16px 20px;
    border-top: 1px dashed var(--pt-border);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.extra-odd-group {
    background: #FFFFFF;
    border: 1px solid var(--pt-border);
    padding: 10px 14px;
    border-radius: 10px;
    min-width: 140px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.extra-odd-title {
    font-size: 10px;
    color: var(--pt-text-light);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 6px;
}

.extra-odd-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 900;
}

    .extra-odd-content .val {
        color: var(--pt-text-dark);
    }

    .extra-odd-content .odd {
        color: var(--pt-yellow);
        background: #FFFBEB;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
    }

/* Mobil Daraltma */
@media (max-width: 992px) {
    .match-table-header {
        display: none;
    }
    /* Mobilde başlıkları gizle */
    .match-main-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        position: relative;
    }

    .col-match {
        width: 100%;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
    }

    .odds-container-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
        justify-content: flex-start;
    }

    .col-action {
        position: absolute;
        right: 20px;
        top: 20px;
    }
}
/* ========================================================= */
/*  YENİ NESİL BORSA/OLEY TARZI LİSTE (9 KUTULU DÜZEN)  */
/* ========================================================= */

.featured-section {
    margin-top: 10px;
    margin-bottom: 40px;
}

.featured-header {
    font-size: 16px;
    font-weight: 900;
    color: var(--pt-text-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .featured-header i {
        color: var(--pt-yellow);
    }

.match-list-container {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pt-shadow);
}

/* Masaüstü Tablo Başlıkları */
.match-table-header {
    display: flex;
    padding: 12px 20px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--pt-border);
    font-size: 11px;
    font-weight: 800;
    color: var(--pt-text-dark);
}

.col-match {
    flex: 2;
    min-width: 220px;
}

.col-odds {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
}

/*  YENİ: Robot İkonu Hizalaması İçin Düzeltme  */
.col-action {
    width: 45px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

/* Satır Tasarımı */
.match-row-item {
    border-bottom: 1px solid var(--pt-border);
    transition: background 0.2s ease;
}

    .match-row-item:last-child {
        border-bottom: none;
    }

    .match-row-item:hover {
        background: #F8FAFC;
    }

.match-main-info {
    display: flex;
    padding: 12px 20px;
    align-items: center;
}

/* Oley Tarzı Takım ve Saat Düzeni */
.match-time-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.mbs-badge {
    background-color: #DC3545;
    color: #FFF;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
}

.match-time-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--pt-text-light);
}

.match-teams {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

/*  OLEY.COM TARZI SARI ORAN KUTULARI  */
.odds-group {
    display: flex;
    gap: 4px;
}

.odd-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 42px;
    border-radius: 4px;
    cursor: pointer;
    background: #FACC15; /* Tam Oley Sarısı */
    color: #0F172A;
    transition: all 0.2s ease;
}

    .odd-btn:hover {
        background: #EAB308;
        transform: translateY(-2px);
    }

    .odd-btn span {
        font-size: 10px;
        font-weight: 700;
        margin-bottom: 1px;
        color: #334155;
    }

    .odd-btn strong {
        font-size: 13px;
        font-weight: 900;
    }

/*  YENİ: Robot İkonlu Buton Düzeltmesi  */
.btn-robot-accordion {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pt-text-light);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    padding: 0;
}

    .btn-robot-accordion:hover {
        background: #E2E8F0;
        color: var(--pt-text-dark);
    }

    .btn-robot-accordion:not(.collapsed) {
        background: #FEF3C7;
        border-color: var(--pt-yellow);
        color: var(--pt-yellow);
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
    }

/*  Akordiyon İçi Detaylar (Gizli Alan)  */
.accordion-body-custom {
    background: #F8FAFC;
    padding: 20px;
    border-top: 1px dashed var(--pt-border);
}

/*  YENİ: Kusursuz Yatay Dizilim (Satırlar)  */
.accordion-row {
    display: flex;
    flex-wrap: wrap; /* Ekrana sığmazsa alt satıra geçer */
    gap: 12px;
    width: 100%;
}

    .accordion-row.mb-3 {
        margin-bottom: 16px !important;
    }

/* Akordiyon İçi Bembeyaz Ana Kutu Tasarımı  */
.extra-odd-group {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 12px;
    border-radius: 10px;
    /*  KİLİT NOKTA: Kutuların genişliğini sabitliyor, sündürmeyi önlüyor  */
    flex: 1 1 calc(20% - 12px);
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

    .extra-odd-group:hover {
        box-shadow: 0 6px 12px rgba(0,0,0,0.06);
        transform: translateY(-2px);
    }

.extra-odd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.extra-odd-title {
    font-size: 11px;
    color: var(--pt-text-light);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.extra-odd-guven {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 4px;
}

/*  YENİ: Tahmin ve Oran: Tek Satırda, Gri Arka Planlı (3. Resim Stili)  */
.extra-odd-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F1F5F9; /* İçerideki gri kutu rengi */
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 8px 12px;
}

    .extra-odd-content .val-box {
        font-size: 14px;
        font-weight: 900;
        color: var(--pt-text-dark);
    }

    .extra-odd-content .odd-box {
        color: var(--pt-yellow);
        font-size: 13px;
        font-weight: 900;
    }

/*  YENİ: Veri Olmayan Kutular İçin Soluk Görünüm  */
.extra-odd-group.missing-odd {
    opacity: 0.6;
}

    .extra-odd-group.missing-odd .extra-odd-guven {
        background: transparent !important;
        color: #94A3B8 !important;
    }

    .extra-odd-group.missing-odd .odd-box {
        color: #94A3B8 !important;
    }

/* Mobil Daraltma */
@media (max-width: 992px) {
    .match-table-header {
        display: none;
    }

    .match-main-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        position: relative;
    }

    .col-match {
        width: 100%;
        margin-bottom: 4px;
    }

    .odds-container-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
        justify-content: flex-start;
    }

    .col-action {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .extra-odd-group {
        min-width: 140px;
    }
}

/* CANLI MAÇ VE DİNAMİK SKOR EFEKTLERİ  */

/* Dakika ve Skorun Genel Kalınlığı */
.live-score-bold {
    font-weight: 900 !important;
    font-size: 15px;
    letter-spacing: 0.5px;
}

/* Canlı maç dakikası (Yeşil yanıp sönen) */
.match-live-time {
    color: #10B981 !important;
    font-weight: 900;
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0.2;
    }
}

/* İY ve MS ibareleri (Kırmızı sabit) */
.match-status-red {
    color: #EF4444 !important;
    font-weight: 900;
}

/* İY Skor Parantez Stili (Skorun yanındaki küçük yazı) */
.ht-score-sub {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 700;
    margin-left: 4px;
}


/* Kilit: Slider sündürmesini engeller */
.slider-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
}

.hero-match-card {
    min-width: 300px !important;
    flex: 0 0 300px !important;
    max-width: 300px !important;
    overflow: hidden;
}

/* ========================================================= */
/* 🔥 KUPONLAR MODÜLÜ 🔥 */
/* ========================================================= */

.coupon-card {
    background: #FFFFFF;
    border: 1px solid var(--pt-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .coupon-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.06);
        border-color: var(--pt-yellow);
    }

.coupon-header {
    background: #F8FAFC;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pt-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coupon-title {
    font-weight: 900;
    font-size: 13px;
    color: var(--pt-text-dark);
    text-transform: uppercase;
}

.coupon-badge {
    background: #FEF3C7;
    color: #D97706;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
}

.coupon-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coupon-match {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #E2E8F0;
    padding-bottom: 8px;
}

    .coupon-match:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.c-match-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--pt-text-dark);
}

.c-match-pred {
    display: flex;
    gap: 8px;
    align-items: center;
}

.c-pred-text {
    font-size: 11px;
    font-weight: 800;
    color: #10B981;
}

.c-pred-odd {
    background: #0F172A;
    color: #FACC15;
    font-size: 12px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
}

.coupon-footer {
    background: #0F172A;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.c-total-text {
    color: #94A3B8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.c-total-odd {
    color: #FACC15;
    font-size: 16px;
    font-weight: 900;
}

/* 🔥 KUPONLARA EKLE BUTONU 🔥 */
.btn-add-coupon {
    display: block;
    width: 100%;
    background: #F1F5F9;
    border: none;
    border-top: 1px solid #E2E8F0;
    padding: 12px;
    color: #334155;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .btn-add-coupon:hover {
        background: #FACC15; /* Üzerine gelince sarı parlar */
        color: #0F172A;
    }

    .btn-add-coupon i {
        margin-right: 6px;
    }

/* ========================================================= */
/* 🔥 TIKLA GÖR BUTONU VE BULANIKLAŞTIRMA (marketing) 🔥 */
/* ========================================================= */

.coupon-body.blurred {
    position: relative; /* Overlay'in pozisyonlanması için kilit */
    overflow: hidden;
}

    /* Bulanıklaştırma efekti (CSS filtresi) */
    .coupon-body.blurred .coupon-match {
        filter: blur(8px) brightness(0.9); /* Bulanıklığı ve karartmayı artırabilirsin */
        transition: filter 0.3s ease; /* Hover'da netleştirme için geçiş */
    }

/* Bulanık içeriğin üzerine gelen overlay */
.coupon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4); /* Bulanık içeriğin üzerine hafif karanlık bir zemin */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* "Kuponu Gör" butonu */
.btn-reveal-coupon {
    background: #0F172A !important; /* Koyu lacivert zemin */
    color: #FACC15 !important; /* Sarı yazı */
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

    .btn-reveal-coupon:hover {
        background: #FACC15 !important; /* Üzerine gelince sarı parlar */
        color: #0F172A !important;
        transform: scale(1.05);
    }

/* ========================================================= */
/*  SOL MODÜL (ÖNE ÇIKANLAR) BLUR EFEKTLERİ  */
/* ========================================================= */

.accordion-body-custom.blurred-area,
.odds-container-mobile.blurred-row {
    position: relative;
}

/* Akordiyon içindeki tahmin kutularını blurlar */
.blurred-area .accordion-row {
    filter: blur(8px) brightness(0.9);
    pointer-events: none;
    user-select: none;
    transition: filter 0.3s ease;
}

/* Ana listedeki 3'lü oran sütunlarını blurlar */
.blurred-row .col-odds {
    filter: blur(6px) brightness(0.9);
    pointer-events: none;
    user-select: none;
    transition: filter 0.3s ease;
}

/* 🔥 TÜM KUPONLAR PREMIUM BUTON 🔥 */
.btn-all-coupons-sleek {
    background: linear-gradient(135deg, #1e293b, #0f172a); /* Koyu lacivert/siyah degrade */
    color: #facc15 !important; /* Altın sarısı yazı */
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 50px; /* Tam yuvarlak hap görünümü */
    border: 1px solid #334155;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-decoration: none;
}

    .btn-all-coupons-sleek:hover {
        background: #facc15; /* Hoverda tam tersi: Sarı zemin */
        color: #0f172a !important; /* Siyah yazı */
        border-color: #facc15;
        box-shadow: 0 6px 15px rgba(250, 204, 21, 0.4); /* Sarı parlama efekti */
        transform: translateY(-2px); /* Hafif yukarı kalkma */
    }

    .btn-all-coupons-sleek i {
        font-size: 13px;
        transition: transform 0.3s ease;
    }

    .btn-all-coupons-sleek:hover i {
        transform: translateX(4px); /* Üzerine gelince ok sağa kayar */
    }

/* ========================================================= */
/* 🔥 UZMAN ÜYE TAHMİNLERİ - KOMPAKT TASARIM (3'LÜ DİZİLİM) 🔥 */
/* ========================================================= */

.member-pred-card {
    background: #ffffff;
    border: 1px solid var(--pt-border);
    border-radius: 10px;
    padding: 10px; /* 16'dan 10'a düşürüldü */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .member-pred-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.05);
        border-color: var(--pt-yellow);
    }

.mp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* Daraltıldı */
}

.mp-league-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 2px 8px; /* Daraltıldı */
    border-radius: 20px;
    font-size: 9px; /* Küçültüldü */
    color: #475569;
    font-weight: 800;
}

.mp-status-0 {
    background: #facc15;
    color: #1a1d20;
}

.mp-status-1 {
    background: #10b981;
    color: #ffffff;
}

.mp-status-2 {
    background: #ef4444;
    color: #ffffff;
}

.mp-badge {
    font-size: 8px; /* Küçültüldü */
    font-weight: 900;
    padding: 3px 6px;
    border-radius: 4px;
}

.mp-teams {
    text-align: center;
    font-weight: 800;
    color: #0f172a;
    font-size: 11px; /* Küçültüldü */
    line-height: 1.3;
    margin-bottom: 10px;
}

.mp-vs {
    font-size: 8px;
    color: #94a3b8;
    display: block;
    margin: 2px 0;
}

.mp-pred-box {
    background: #f8fafc;
    border-radius: 6px;
    padding: 6px 10px; /* Daraltıldı */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
}

    .mp-pred-box.win-box {
        background: #10b981;
        border-color: #059669;
    }

        .mp-pred-box.win-box .mp-pred-text, .mp-pred-box.win-box .mp-pred-odd {
            color: #ffffff;
        }

        .mp-pred-box.win-box .mp-pred-odd {
            background: #059669;
        }

    .mp-pred-box.lose-box {
        background: #ef4444;
        border-color: #dc2626;
    }

        .mp-pred-box.lose-box .mp-pred-text, .mp-pred-box.lose-box .mp-pred-odd {
            color: #ffffff;
        }

        .mp-pred-box.lose-box .mp-pred-odd {
            background: #dc2626;
        }

.mp-pred-text {
    font-weight: 800;
    color: #334155;
    font-size: 11px;
}

.mp-pred-odd {
    background: #1a1d20;
    color: #facc15;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.mp-score-info {
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
}

.mp-comment {
    background: #1e293b;
    color: #cbd5e1;
    font-size: 10px; /* Küçültüldü */
    padding: 8px;
    border-radius: 6px;
    font-style: italic;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    flex-grow: 1;
    /* Metin çok uzunsa 2 satırda keser, kartı uzatmaz */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .mp-comment i {
        color: #facc15;
        margin-right: 6px;
        margin-top: 2px;
        font-size: 10px;
    }

.mp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
}

.mp-user {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mp-avatar {
    width: 24px;
    height: 24px;
    background: #1a1d20;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #facc15;
    font-weight: 900;
    font-size: 10px;
}

.mp-user-info {
    display: flex;
    flex-direction: column;
}

.mp-username {
    font-size: 10px;
    font-weight: 800;
    color: #0f172a;
}

.mp-date {
    font-size: 8px;
    color: #94a3b8;
    font-weight: 600;
}

.mp-actions {
    display: flex;
    gap: 4px;
}

.mp-action-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
}

    .mp-action-btn.up {
        border-color: #10b981;
        color: #10b981;
    }

    .mp-action-btn.down {
        border-color: #ef4444;
        color: #ef4444;
    }

/* ========================================================= */
/* 🔥 MOBİL CİHAZLAR İÇİN MODÜL SIRALAMASI (YENİ SIRA) 🔥 */
/* ========================================================= */

@media (max-width: 991.98px) {
    /* 1. Sol ve sağ kolonların "kapsayıcı" özelliğini mobilde şeffaflaştırıyoruz */
    .left-col-wrapper, .right-col-wrapper {
        display: contents;
    }

    /* 2. İçerideki modülleri %100 genişliğe çekip hizalamaları düzeltiyoruz */
    #sec-featured-matches,
    #sec-expert-preds,
    #sec-coupons {
        width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    /* 🔥 3. İŞTE SENİN İSTEDİĞİN O YENİ MOBİL SIRALAMA 🔥 */

    /* 1. SIRA: Öne Çıkan Karşılaşmalar */
    #sec-featured-matches {
        order: 1;
    }

    /* 2. SIRA: AI Otomatik Kuponlar */
    #sec-coupons {
        order: 2;
        margin-top: 1.5rem !important; /* Üstteki modülle arasına esneme payı */
    }

    /* 3. SIRA: Uzman Üye Tahminleri */
    #sec-expert-preds {
        order: 3;
        margin-top: 1.5rem !important;
    }
}