/* ==================================================
   FRONT PAGE – GLOBAL
================================================== */

body.home .site-main {
    padding: 20px 0;
}

.section-divider {
    width: 48px;
    height: 3px;
    background: #d32f2f;
    margin: 40px auto;
    border-radius: 3px;
}

/* ==================================================
   HERO – COMMON
================================================== */

.home-hero {
    margin-top: 30px;
}

.hero-grid {
    display: grid;
    gap: 20px;
}

.hero-item,
.hero-big,
.hero-small {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    transition: transform .35s ease, box-shadow .35s ease;
}

.hero-item:hover,
.hero-big:hover,
.hero-small:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.hero-item img,
.hero-big img,
.hero-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.hero-item:hover img,
.hero-big:hover img,
.hero-small:hover img {
    transform: scale(1.04);
}

/* Overlay */
.hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.35),
        rgba(0,0,0,0)
    );
}

.hero-overlay h2,
.hero-overlay h3 {
    color: #fff;
    margin-top: 6px;
}

.hero-overlay h2 { font-size: 22px; }
.hero-overlay h3 { font-size: 15px; }

/* ==================================================
   HERO v1
================================================== */

.hero-v1 .hero-grid {
    grid-template-columns: 1fr 1fr;
}

.hero-big {
    height: 420px;
}

.hero-small-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.hero-small {
    height: 200px;
}

/* ==================================================
   HERO v2 – BIG CENTER
================================================== */

.hero-v2 {
    --hero-height: 420px;
}

.hero-v2 .hero-grid {
    grid-template-columns: 1fr 2fr 1fr;
}

.hero-v2 .hero-left,
.hero-v2 .hero-right {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}

.hero-v2 .hero-big {
    height: var(--hero-height);
}

.hero-v2 .hero-small {
    height: calc((var(--hero-height) - 20px) / 2);
}



/* ==================================================
   HERO – MOBILE
================================================== */

@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-big,
    .hero-small {
        height: 220px;
    }

    .hero-small-wrap {
        grid-template-columns: 1fr;
    }

    .hero-overlay h2,
    .hero-overlay h3 {
        font-size: 15px;
    }
}

/* =========================
   HOME – SPONSORS
========================= */

.home-sponsors {
    width: 100%;
    background: #fff;
    padding-top: 18px;
    padding-bottom: 0;
	box-shadow: 0 10px 24px -6px rgba(242, 242, 242, 0.9);
}

.home-sponsors .sponsors-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.home-sponsors .sponsors-grid a {
    display: flex;
    align-items: center;
}

.home-sponsors .sponsors-grid img {
    max-height: 130px;
    width: auto;
    opacity: .9;
    transition: transform .2s ease, opacity .2s ease;
}

.home-sponsors .sponsors-grid a:hover img {
    transform: scale(1.05);
    opacity: 1;
}


/* ==================================================
   HOME – UPCOMING RACES
================================================== */

.home-upcoming-races .container {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.upcoming-races-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.upcoming-card-title {
    font-size: 13px;
    font-weight: 800;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}

.upcoming-card-title.motogp { color:#b11217; }
.upcoming-card-title.worldsbk { color:#0a58ca; }
.upcoming-card-title.standings { color:#7a3df0; }

.upcoming-race-card {
    height: 320px;
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.race-image {
    height: 130px;
    background-size: cover;
    background-position: center;
}

.race-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.race-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.race-badge.motogp {
    background: #b11217;
    color: #fff;
}

.race-badge.worldsbk {
    background: #e7efff;
    color: #0a58ca;
}

.race-title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}

.race-dates {
    font-size: 13px;
    font-weight: 700;
    color: #b11217;
    margin-bottom: 4px;
}

.race-track {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.motocal-times {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.motocal-times span {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    background: #f4f4f4;
}

.upcoming-race-card.motogp .motocal-times span {
    background: #b11217;
    color: #fff;
}

.upcoming-race-card.worldsbk .motocal-times span {
    background: #e7efff;
    color: #0a58ca;
}

/* ===== PUAN DURUMU ===== */

.upcoming-race-card.standings .race-body {
    overflow-y: auto;
}

.mini-standings-row {
    display: grid;
    grid-template-columns: 26px 1fr 40px;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
    font-size: 13px;
}

.mini-rank {
    font-weight: 800;
    color: #7a3df0;
    text-align: center;
}

.mini-driver {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.mini-driver img {
    width: 18px;
}

.mini-points {
    font-weight: 800;
    text-align: right;
}

.mini-standings-link {
    margin-top: auto;
    font-size: 12px;
    font-weight: 700;
    color: #7a3df0;
    text-decoration: none;
}

/* ==================================================
   NEWS GRID / YOUTUBE
================================================== */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.news-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: .25s ease;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.news-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.news-card h3 {
    font-size: 15px;
    padding: 12px 14px 8px;
}

.news-date {
    padding: 0 14px 14px;
    font-size: 12px;
    color: #777;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 900px) {
    .upcoming-races-grid,
    .news-grid {
        grid-template-columns: 1fr;
    }

    .race-image {
        height: 160px;
    }
}
/* =========================
   SECTION HEAD FIX
========================= */

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.section-head .section-title {
    margin: 0;
}

.section-head .see-all {
    white-space: nowrap;
}
/* =========================
   YOUTUBE SECTION – BOXED
========================= */

.youtube-section {
    background: transparent;
    padding: 40px 0;
}

.youtube-section > .container {
    max-width: 1200px;
    background: #fff;
    padding: 28px;
    border-radius: 16px; /* OVAL KÖŞE */
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.youtube-section .section-head {
    margin-bottom: 20px;
}

/* Badge offset */
.youtube-section .card-meta {
    right: 18px;
    bottom: 14px;
}

.youtube-section .cat {
    padding-left: 14px;
    padding-right: 14px;
}

@media (max-width: 768px) {
    .youtube-section > .container {
        padding: 20px;
    }
}
/* =========================
   HOME COLUMNS – BOXED
   (Öne Çıkanlar Alanı)
========================= */

.home-columns {
    background: transparent;
    padding: 40px 0;
}

.home-columns > .container {
    max-width: 1200px;
    background: #ffffff;
    padding: 28px;
    border-radius: 16px; /* OVAL KÖŞE */
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.home-columns .column-box {
    border-radius: 14px;
}
@media (max-width: 768px) {
    .home-columns > .container {
        padding: 20px;
    }
}

/* =========================
   HOME COLUMNS – ULTRA SOFT COLORS
========================= */

.home-columns .column-box {
    border-radius: 14px;
    padding: 16px;
    border: 1px solid transparent;
}

/* ===== EDITOR (ULTRA SOFT MOR) ===== */
.home-columns .column-editor {
    background: rgba(122, 61, 240, 0.035);
    border-color: rgba(122, 61, 240, 0.18);
}

/* ===== MOTOGP (ULTRA SOFT KIRMIZI) ===== */
.home-columns .column-motogp {
    background: rgba(177, 18, 23, 0.035);
    border-color: rgba(177, 18, 23, 0.18);
}

/* ===== WORLDSBK (ULTRA SOFT MAVİ) ===== */
.home-columns .column-wsbk {
    background: rgba(10, 88, 202, 0.035);
    border-color: rgba(10, 88, 202, 0.18);
}

.column-title {
    background: none !important;
}
/* =========================
   HOME COLUMNS – TITLE FINAL FIX
   (No BG, No Badge, Section Color)
========================= */

/* Başlık reset */
.home-columns .column-title {
    all: unset;
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.3;
}

/* ===== RENKLER (BÖLÜM RENGİ) ===== */

/* Editör – mor */
.home-columns .column-editor .column-title {
    color: #7a3df0;
}

/* MotoGP – kırmızı */
.home-columns .column-motogp .column-title {
    color: #b11217;
}

/* WorldSBK – mavi */
.home-columns .column-wsbk .column-title {
    color: #0a58ca;
}

/* Tümünü Gör linkleriyle aynı dil */
.home-columns .column-more {
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* Link renkleri de bölüm rengi olsun */
.home-columns .column-editor .column-more {
    color: #7a3df0;
}
.home-columns .column-motogp .column-more {
    color: #b11217;
}
.home-columns .column-wsbk .column-more {
    color: #0a58ca;
}

/* Hover – çok hafif */
.home-columns .column-more:hover {
    opacity: 0.8;
}
/* =========================
   HOME COLUMNS – HEAD ALIGN FIX
========================= */

.home-columns .column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Başlık satır kırmasın */
.home-columns .column-title {
    white-space: nowrap;
}

/* Tümünü Gör de satır kırmasın */
.home-columns .column-more {
    white-space: nowrap;
}
@media (max-width: 600px) {
    .home-columns .column-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
/* =========================
   FRONT PAGE – AFTER SPONSOR BOXED
========================= */

body.home {
    background: #f5f5f5; /* kenarlar */
}

.front-page-after-sponsor {
    max-width: 1200px;
    margin: 40px auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,.06);
    overflow: hidden;
}
/* =========================
   YOUTUBE SECTION – TOP GAP FIX
========================= */

.youtube-section {
    margin-top: 0 !important;   /* üst boşluğu kes */
    padding-top: 0;             /* varsa iç boşluğu kes */
}
.front-page-after-sponsor .youtube-section {
    margin-top: 0 !important;
}
/* =========================
   HOME COLUMNS – SPACING FIX
========================= */

/* Section'ın dış boşluklarını kapat */
.home-columns {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
}

/* Üstteki divider varsa etkisini azalt */
.home-columns + .section-divider,
.section-divider + .home-columns {
    margin-top: 0;
    margin-bottom: 0;
}

/* İç container biraz daha sıkı olsun */
.home-columns > .container {
    padding-top: 0;
    padding-bottom: 0;
}
.section-divider {
    display: none;
}
/* =========================
   YOUTUBE SECTION – SOFT THEMED
========================= */

.youtube-section {
    margin-top: 0 !important;
    padding: 0;
}

/* Asıl kutu */
.youtube-section > .container {

    border-radius: 16px;
    padding: 24px;
}

/* =========================
   YOUTUBE – HEADER (TITLE + SEE ALL)
========================= */

.youtube-section .section-title,
.youtube-section .see-all {
    color: rgba(220, 38, 38, 0.9);
    font-weight: 700;
}

.youtube-section .see-all:hover {
    opacity: 0.8;
}

/* Başlık satırı düzeni */
.youtube-section .section-head {
    margin-bottom: 16px;
}

/* =========================
   YOUTUBE – TITLE SIZE FIX
========================= */

.youtube-section .section-title {
    font-size: 13px;      /* upcoming-card-title ile aynı */
    font-weight: 800;
    line-height: 1.3;
}

.youtube-section .see-all {
    font-size: 13px;      /* başlıkla aynı */
    font-weight: 700;
}
/* =========================
   YOUTUBE – HEADER LEFT OFFSET
========================= */

.youtube-section .section-head {
    padding-left: 18px;   /* istersen 6–12px arası oynayabilirsin */
}
/* =========================
   HERO → SPONSOR SPACING FIX
========================= */

.home-sponsors {
    margin-top: 42px;   /* 24–40px arası oynayabilirsin */
}
/* =========================
   UPCOMING RACES – YOUTUBE STYLE HOVER
========================= */

.upcoming-race-card {
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}

.upcoming-race-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,.12);
}
.upcoming-race-card .race-image {
    transition: transform .4s ease;
}

.upcoming-race-card:hover .race-image {
    transform: scale(1.05);
}
.upcoming-race-card .race-title {
    transition: color .2s ease, transform .2s ease;
}

.upcoming-race-card:hover .race-title {
    transform: translateX(2px);
}
.upcoming-race-card.motogp:hover {
    box-shadow: 0 14px 32px rgba(177, 18, 23, .18);
}

.upcoming-race-card.worldsbk:hover {
    box-shadow: 0 14px 32px rgba(10, 88, 202, .18);
}

.upcoming-race-card.standings:hover {
    box-shadow: 0 14px 32px rgba(122, 61, 240, .18);
}
@media (hover: none) {
    .upcoming-race-card:hover {
        transform: none;
        box-shadow: none;
    }

    .upcoming-race-card:hover .race-image {
        transform: none;
    }

    .upcoming-race-card:hover .race-title {
        transform: none;
    }
}
/* =========================
   YOUTUBE – SOFT OUTER SHADOW
========================= */

.news-card {
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.news-card img {
    transition: transform .4s ease;
}

.news-card:hover img {
    transform: scale(1.05);
}
@media (hover: none) {
    .news-card:hover {
        transform: none;
        box-shadow: none;
    }

    .news-card:hover img {
        transform: none;
    }
}
.standings-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.standings-tabs .tab-btn {
    background: #eee;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
}

.standings-tabs .tab-btn.active {
    background: #111;
    color: #fff;
}

.standings-tab-content {
    display: none;
}

.standings-tab-content.active {
    display: block;
}
/* =========================
   SEKME AKTİF STİL
========================= */

.standings-tabs .tab-btn {
    color: #777;          /* pasif yazı */
    background: transparent;
}

.standings-tabs .tab-btn:hover {
    color: #444;
}

/* 🔥 AKTİF TAB */
.standings-tabs .tab-btn.active {
    background: #c62828;  /* kırmızı zemin */
    color: #fff;          /* beyaz yazı */
    border-radius: 6px;
}

/* Alt çizgiyi kapat (artık gerek yok) */
.standings-tabs .tab-btn.active::after {
    display: none;
}
/* SEKME BUTONLARI */
.standings-tabs {
    display: flex;
    gap: 4px; /* ← SEKME ARASI MESAFE (DAHA DAR) */
    margin-bottom: 10px;
}

/* NORMAL SEKME */
.standings-tabs .tab-btn {
    background: #f2f2f2;
    color: #111;
    border: none;
    padding: 5px 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* HOVER */
.standings-tabs .tab-btn:hover {
    background: #ddd;
}

/* AKTİF SEKME */
.standings-tabs .tab-btn.active {
    background: #c40000; /* kırmızı */
    color: #fff;         /* beyaz yazı */
}
.standings-tabs .tab-btn {
    margin-right: 4px;
}

.standings-tabs .tab-btn:last-child {
    margin-right: 0;
}
.standings-tabs .tab-btn {
    padding: 6px 4px;
    font-size: 12px;
}
/* ==================================================
   HERO – ORTAK
================================================== */

.home-hero {
    margin-top: 30px;
}

.hero-grid {
    display: grid;
    gap: 20px;
}

.hero-item,
.hero-big,
.hero-small {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.hero-item img,
.hero-big img,
.hero-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}

.hero-title {
    color: #fff;
}

/* ==================================================
   HERO v1 – KLASİK (1 BÜYÜK + 4 KÜÇÜK)
================================================== */

.hero-v1 .hero-grid {
    grid-template-columns: 1fr 1fr;
}

.hero-v1 .hero-big {
    height: 420px;
}

.hero-v1 .hero-small-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.hero-v1 .hero-small {
    height: 200px;
}

/* ==================================================
   HERO v2 – ORTASI BÜYÜK
================================================== */

.hero-v2 .hero-grid {
    grid-template-columns: 1fr 2fr 1fr;
}

.hero-v2 .hero-left,
.hero-v2 .hero-right {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}

.hero-v2 .hero-big {
    height: 420px;
}

.hero-v2 .hero-small {
    height: calc((420px - 20px) / 2);
}

/* ==================================================
   HERO v4 – WIDE EDITORIAL
================================================== */

/* 1200 kırılımını kaldır */
.hero-v4 {
    max-width: none;

}

.hero-v4 .container {
    max-width: 1350px;   /* 🔥 asıl genişlik */
    padding-left: 24px;
    padding-right: 24px;
}

/* GRID */
.hero-grid-v4 {
    display: grid;
    grid-template-columns: 1.6fr 0.8fr 1fr;
    gap: 24px;
}

/* SOL – BÜYÜK */
.hero-v4 .hero-big {
    height: 460px;
}

/* ORTA – 2 KÜÇÜK */
.hero-v4 .hero-middle {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
}

.hero-v4 .hero-middle .hero-small {
    height: calc((460px - 24px) / 2);
}

/* SAĞ – 4 HABER LİSTE */
.hero-v4 .hero-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Liste item */
.hero-list-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    transition: background .25s ease, transform .25s ease;
}

.hero-list-item img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}

/* Metin */
.hero-list-text h4 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
    color: #111;
}

.hero-list-text time {
    font-size: 11px;
    color: #777;
}

/* Hover – ana sayfa uyumlu */
.hero-list-item:hover {
    background: rgba(0,0,0,.04);
    transform: translateX(4px);
}

.hero-list-item:hover h4 {
    color: #c40000; /* site kırmızısı */
}
@media (max-width: 992px) {

    .hero-grid-v4 {
        grid-template-columns: 1fr;
    }

    .hero-v4 .hero-big,
    .hero-v4 .hero-middle .hero-small {
        height: 240px;
    }

    .hero-v4 .hero-list {
        margin-top: 10px;
    }
}
/* ==================================================
   HERO v4 – SAĞ LİSTE FLEX FIX
================================================== */

.hero-v4 .hero-list-item {
    display: flex;
    align-items: center;
}

.hero-v4 .hero-list-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Thumbnail */
.hero-v4 .hero-list-item img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
}

/* Metin alanı */
.hero-v4 .hero-list-text {
    display: flex;
    flex-direction: column;
}
.hero-v4 * {
    box-sizing: border-box;
}
/* ==================================================
   HERO v4 – BOXED WHITE EDITORIAL
================================================== */

.hero-v4 {
    background: transparent;   /* sayfayı kaplamasın */
    padding: 40px 0;           /* üst–alt ayrım */
}

/* Asıl beyaz kutu */
.hero-v4 .container {
    max-width: 1300px;         
    background: #fefefe;
    border-radius: 20px;       /* 🔥 oval köşe */
    padding: 15px;
	padding-bottom: 10px;  /* 🔥 ASIL FARK BURADA */
    box-shadow: 0 12px 32px rgba(0,0,0,.06);
}
/* ==================================================
   HERO v4 – SAĞ LİSTE GÖRSEL BOOST
================================================== */

.hero-v4 .hero-list {
    gap: 16px; /* biraz nefes */
}

/* Liste item */
.hero-v4 .hero-list-item a {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 🔥 Thumbnail büyüt */
.hero-v4 .hero-list-item img {
    width: 82px;
    height: 82px;
    border-radius: 10px;
}

/* Başlık biraz daha güçlü */
.hero-v4 .hero-list-text h4 {
    font-size: 14px;
    line-height: 1.4;
}
.hero-v4 .hero-list-item {
    padding: 10px;
    border-radius: 12px;
}

.hero-v4 .hero-list-item:hover {
    background: rgba(0,0,0,.045);
}
/* ==================================================
   HERO v4 – SPACING TIGHTEN
================================================== */

.hero-v4 {
    padding-top: 20px;     /* 40 → 20 */
    padding-bottom: 24px; /* 40 → 24 */
}

/* v4 için üstten gelen global margin’i kes */
.hero-v4 {
    margin-top: 10px;     /* 30 → 10 */
}
/* ==================================================
   HERO – KATEGORİ BADGE (GLOBAL)
================================================== */

.home-hero .hero-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 999px;
    line-height: 1;
    pointer-events: none;
}
.hero-v4 .hero-list-cat {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #c40000;
    margin-bottom: 2px;
    display: inline-block;
}
/* ==================================================
   HERO v4 – MOBILE ORDER FIX
================================================== */

@media (max-width: 992px) {

    .hero-v4 .hero-big {
        order: 1;
    }

    .hero-v4 .hero-middle {
        order: 2;
    }

    .hero-v4 .hero-right {
        order: 3;
    }

}
/* ==================================================
   HERO v4 – ORTA SÜTUN GAP FIX
================================================== */

.hero-v4 .hero-middle {
    gap: 20px; /* önce 20–24 civarıydı */
}
/* ==================================================
   HERO v4 – SAĞ LİSTE SON AYAR
================================================== */

/* Liste aralığı biraz kapansın */
.hero-v4 .hero-list {
    gap: 14px; /* önce ~16px */
}

/* Kart iç padding biraz sıkı */
.hero-v4 .hero-list-item {
    padding: 8px;
}

/* 🔥 Thumbnail biraz daha büyüsün */
.hero-v4 .hero-list-item img {
    width: 90px;
    height: 90px;
    border-radius: 12px;
}
/* ==================================================
   HOME COLUMNS – ALT BEYAZ NEFES (10px)
================================================== */

.front-page-after-sponsor .home-columns > .container {
    padding-bottom: 20px;
}
/* ==================================================
   YOUTUBE KARTLARI – İNCE ÇİZGİ
================================================== */

.youtube-section .news-card {
    border: 1px solid #eee;          /* 🔥 ince çizgi */
    box-shadow: none;                /* upcoming gibi sade */
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Hover – upcoming hissi */
.youtube-section .news-card:hover {
    border-color: #ddd;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
/* ==================================================
   YOUTUBE KART – ALT NEFES FIX
================================================== */

.youtube-section .news-card {
    padding-bottom: 10px; /* 🔥 yazıdan sonra 5px nefes */
}
/* ==================================================
   YOUTUBE – RENKLİ HOVER (UPCOMING STYLE)
================================================== */

.youtube-section .news-card {
    border: 1px solid #eee;
    transition: 
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* 🔥 RENKLİ HOVER */
.youtube-section .news-card:hover {
    border-color: rgba(220, 38, 38, 0.35); /* kırmızı çerçeve */
    box-shadow: 0 14px 32px rgba(220, 38, 38, 0.18);
    transform: translateY(-4px);
}
.hero-small:hover img {
    transform: none;
}
/* ==================================================
   HERO – NO BLUR MODE
================================================== */

.home-hero img {
    transform: none !important;
}

/* Hover’da çok hafif hareket (blur yapmaz) */
.home-hero article:hover img {
    transform: scale(1.015);
}
/* ==================================================
   HERO v1 – v2 – v3 | BOXED BEYAZ ZEMİN
================================================== */

.hero-v1,
.hero-v2,{
    background: transparent; /* body gri kalsın */
    padding: 24px 0;
}

/* Beyaz alan sadece içeride */
.hero-v1 .container,
.hero-v2 .container,{
    background: #ffffff;
    padding: 14px;
    border-radius: 14px;   /* v4’ten daha sade */
}

/* ==================================================
   HERO v1 – v2 – v3 | SPACING TIGHTEN
================================================== */

.hero-v1,
.hero-v2,{
    padding: 14px 0;          /* 24 → 14 */
}

/* İç beyaz blok */
.hero-v1 .container,
.hero-v2 .container,{
    padding: 16px;            /* 24 → 16 */
}
/* ==================================================
   HOME – HEADER / HERO / SPONSOR GAP FIX
================================================== */

/* Header → Hero */
body.home .home-hero {
    margin-top: 10px;   /* 30 → 10 */
}

/* Hero → Sponsor */
body.home .home-sponsors {
    margin-top: 20px;   /* 42 → 20 */
}
/* ==================================================
   HERO v2 + v3 – MOBILE EQUAL SIZE + ORDER FIX
================================================== */

@media (max-width: 992px) {

    /* 🔥 TÜM HERO KARTLARI AYNI BOY */
    .hero-v2 .hero-big,
    .hero-v2 .hero-small,{
        height: 220px !important;
    }

    /* 🔥 BIG kart en üste gelsin */
    .hero-v2 .hero-big,{
        order: 1;
    }

    /* Küçükler big'in altına */
    .hero-v2 .hero-left,
    .hero-v2 .hero-right, {
        order: 2;
    }

    /* Kartların kendi sırası bozulmasın */
    .hero-v2 article,{
        order: initial;
    }
}
/* =========================
   YOUTUBE DARK MODE (TOGGLE)
========================= */

body.youtube-dark .youtube-section {
    background: linear-gradient(
        to bottom,
        #f5f5f5 0%,
        #1a1a1a 100%
    );
    padding: 0px 0;
}

body.youtube-dark .youtube-section > .container {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.06);
}

/* Başlık */
body.youtube-dark .youtube-section .section-title,
body.youtube-dark .youtube-section .see-all {
    color: #fff;
}

/* Kartlar */
body.youtube-dark .youtube-section .news-card {
    background: #222;
    border: 1px solid rgba(255,255,255,.08);
}

body.youtube-dark .youtube-section .news-card h3 {
    color: #fff;
}

body.youtube-dark .youtube-section .news-date {
    color: #aaa;
}
/* =========================
   HERO v4 – RIGHT LIST DIVIDER
========================= */

.hero-v4 .hero-list-item {
    position: relative;
}

/* Divider */
.hero-v4 .hero-list-item::after {
    content: "";
    position: absolute;
    left: 104px; /* thumbnail sonrası başlasın */
    right: 12px;
    bottom: -7px;

    height: 1px;
    background: rgba(0,0,0,0.12);
}

/* Son item’da divider olmasın */
.hero-v4 .hero-list-item:last-child::after {
    display: none;
}
/* =========================
   FRONT MIX 3 COLUMN
========================= */

.home-mix-columns {
    padding: 20px 0 30px;
}

.home-mix-columns .mix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Kartlar biraz daha sade */
.home-mix-columns .news-card {
    border: 1px solid #eee;
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.home-mix-columns .news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Başlık boyutu biraz küçük */
.home-mix-columns .news-card h3 {
    font-size: 14px;
}

/* Kategori renkleri */
.cat-moto2 {
    background: #0a58ca;
    color: #fff;
}

.cat-ssp {
    background: #0097a7;
    color: #fff;
}

.cat-moto3 {
    background: #f57c00;
    color: #fff;
}

/* Mobil */
@media (max-width: 900px) {
    .home-mix-columns .mix-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   HOME MIX – BOXED PREMIUM
========================= */

.home-mix-boxed {
    padding: 30px 0;
}

.home-mix-boxed .mix-box {
    background: #ffffff;
    border-radius: 16px;        /* 🔥 oval */
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Grid */
.home-mix-boxed .mix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Column */
.home-mix-boxed .mix-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Head */
.home-mix-boxed .mix-head h3 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin: 0;
}

/* Başlık renkleri */
.mix-moto2 .mix-head h3 { color: #0a58ca; }
.mix-ssp   .mix-head h3 { color: #0097a7; }
.mix-moto3 .mix-head h3 { color: #f57c00; }

/* Kart uyumu */
.home-mix-boxed .news-card {
    border: 1px solid #eee;
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.home-mix-boxed .news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Başlık biraz sıkı */
.home-mix-boxed .news-card h3 {
    font-size: 14px;
}

/* Mobil */
@media (max-width: 900px) {
    .home-mix-boxed .mix-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   GLOBAL IMAGE SHARPNESS FIX
========================= */

/* img kullananlar */
body.home img {
    image-rendering: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* background-image alanlar */
body.home .race-image,
body.home [style*="background-image"] {
    background-size: cover;
    background-position: center;
    image-rendering: auto;
}
/* =========================
   HOME MIX – SOFT CATEGORY BG
   (FINAL TOUCH)
========================= */

/* Ortak kolon ayarı */
.home-mix-boxed .mix-col {
    padding: 14px;
    border-radius: 14px;
    background: rgba(0,0,0,0.015); /* fallback */
}

/* Moto2 – soft mavi */
.home-mix-boxed .mix-moto2 {
    background: rgba(10, 88, 202, 0.04);
}

/* WorldSSP – soft cyan */
.home-mix-boxed .mix-ssp {
    background: rgba(0, 151, 167, 0.045);
}

/* Moto3 – soft turuncu */
.home-mix-boxed .mix-moto3 {
    background: rgba(245, 124, 0, 0.045);
}

/* Kart zeminle uyum */
.home-mix-boxed .mix-col .news-card {
    background: #ffffff;
    border-radius: 14px;
}

/* Hover biraz daha premium */
.home-mix-boxed .mix-col .news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
/* =========================
   HOME MIX – TOP GAP FIX
========================= */

/* Section’ın üst boşluğunu kıs */
.home-mix-boxed {
    padding-top: 12px;   /* önce 30px */
}

/* Önceki section’dan gelen margin varsa ez */
.home-mix-boxed {
    margin-top: -10px;   /* 🔥 üst bölüme yaklaş */
}

/* =========================
   HERO v4 – OFF WHITE TONE
========================= */

.hero-v4 .container {
    background: #f7f8fa;   /* saf beyaz değil */
    border-radius: 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,.05);
}
.hero-v4 .hero-item,
.hero-v4 .hero-list-item {
    background: #ffffff;
}
/* =========================
   HOME MIX BOXED – COLOR HOVER
========================= */

/* Ortak yapı */
.home-mix-boxed .news-card {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* === Moto2 (kırmızı ton) === */
.home-mix-boxed .mix-moto2 .news-card:hover {
    border-color: rgba(177, 18, 23, 0.5);
    box-shadow: 0 14px 32px rgba(177, 18, 23, 0.25);
}

/* === WorldSSP (mavi ton) === */
.home-mix-boxed .mix-ssp .news-card:hover {
    border-color: rgba(10, 88, 202, 0.5);
    box-shadow: 0 14px 32px rgba(10, 88, 202, 0.25);
}

/* === Moto3 (yeşil / lime ton) === */
.home-mix-boxed .mix-moto3 .news-card:hover {
    border-color: rgba(46, 204, 113, 0.55);
    box-shadow: 0 14px 32px rgba(46, 204, 113, 0.28);
}

/* Hafif yukarı kalksın */
.home-mix-boxed .news-card:hover {
    transform: translateY(-4px);
}
.home-mix-boxed .mix-moto2 .news-card:hover h3 {
    color: #b11217;
}

.home-mix-boxed .mix-ssp .news-card:hover h3 {
    color: #0a58ca;
}

.home-mix-boxed .mix-moto3 .news-card:hover h3 {
    color: #2ecc71;
}
/* =========================
   HOME COLUMNS – TEXT BG LOCK
========================= */


/* =========================
   MIX BOXED – MOTO3 COLOR FIX
========================= */

.home-mix-boxed .mix-moto3 .news-card:hover h3 {
    color: #f59e0b; /* Moto3 TURUNCU */
}

/* =========================
   HOME MIX – DATE BOTTOM GAP FIX
========================= */

.home-mix-boxed .news-card time {
    display: block;
    margin-bottom: 0;      /* 🔥 boşluğu kes */
    padding-bottom: 0;
}

/* Kart içindeki son eleman fazla boşluk bırakmasın */
.home-mix-boxed .news-card a {
    padding-bottom: 0;
}
/* =========================
   HOME MIX – MOTO3 COLOR FINAL FIX
========================= */

.home-mix-boxed .mix-moto3 .news-card:hover {
    border-color: rgba(245, 124, 0, 0.55); /* Moto3 turuncu */
    box-shadow: 0 14px 32px rgba(245, 124, 0, 0.28);
}

.home-mix-boxed .mix-moto3 .news-card:hover h3 {
    color: #f57c00; /* Moto3 ana renk */
}
/* =========================
   HOME MIX – DATE SOFT GAP (YOUTUBE STYLE)
========================= */

.home-mix-boxed .news-card time {
    display: block;
    margin-bottom: 8px;   /* 🔥 hafif nefes */
    line-height: 1.3;
}
/* =========================
   HOME MIX – MOTO2 HOVER FINAL
========================= */

.home-mix-boxed .mix-moto2 .news-card:hover {
    border-color: rgba(10, 88, 202, 0.5);
    box-shadow: 0 14px 32px rgba(10, 88, 202, 0.25);
}

.home-mix-boxed .mix-moto2 .news-card:hover h3 {
    color: #0a58ca;
}
/* =========================
   HOME MIX – WORLDSSP HOVER FINAL
========================= */

.home-mix-boxed .mix-ssp .news-card:hover {
    border-color: rgba(0, 151, 167, 0.55);
    box-shadow: 0 14px 32px rgba(0, 151, 167, 0.28);
}

.home-mix-boxed .mix-ssp .news-card:hover h3 {
    color: #0097a7;
}
/* =========================
   HOME COLUMNS – TIGHTER BOTTOM GAP
========================= */

/* Tarih altı – çok hafif nefes */
.home-columns .column-item time {
    display: block;
    margin-bottom: 4px;   /* 🔥 6px → 4px */
    line-height: 1.25;
}

/* Son karttan sonra ekstra boşluk olmasın */
.home-columns .column-item:last-child {
    margin-bottom: 0;
}

/* Kolon kutusunun alt padding’ini biraz daha kıs */
.home-columns .column-box {
    padding-bottom: 2px;  /* 10px → 8px */
}
/* =========================
   UPCOMING RACES – DARK PREMIUM
========================= */

.home-upcoming-races .container {
    background: #121212;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

/* Başlık */
.upcoming-card-title {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Kartlar */
.upcoming-race-card {
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,.08);
    color: #eee;
}

/* Görsel */
.upcoming-race-card .race-image {
    filter: brightness(0.9) contrast(1.05);
}

/* Metin */
.race-title {
    color: #fff;
}

.race-track,
.mini-driver,
.mini-points,
.race-dates {
    color: #ccc;
}

/* Badge */
.race-badge.motogp {
    background: #c40000;
    color: #fff;
}

.race-badge.worldsbk {
    background: rgba(10,88,202,.25);
    color: #9ec5ff;
}

/* Saat etiketleri */
.motocal-times span {
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* ===== HOVER – PREMIUM GLOW ===== */

.upcoming-race-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(0,0,0,.6);
}

.upcoming-race-card.motogp:hover {
    box-shadow: 0 18px 48px rgba(196,0,0,.35);
}

.upcoming-race-card.worldsbk:hover {
    box-shadow: 0 18px 48px rgba(10,88,202,.35);
}

.upcoming-race-card.standings:hover {
    box-shadow: 0 18px 48px rgba(122,61,240,.35);
}

/* ===== PUAN DURUMU ===== */

.upcoming-race-card.standings {
    background: #181818;
}

.mini-standings-row {
    border-bottom: 1px dashed rgba(255,255,255,.1);
}

.mini-rank {
    color: #b58cff;
}

.mini-standings-link {
    color: #b58cff;
}

.mini-standings-link:hover {
    opacity: .85;
}
/* PUAN DURUMU – SCROLL KAPAT */
.upcoming-race-card.standings .race-body {
    overflow-y: visible;
}
/* =========================
   OTO ETKİNLİK – DARK (YOUTUBE STYLE)
========================= */
.otoetkinlik-section {
    background: linear-gradient(
        to bottom,
        #f5f5f5 0%,
        #121212 100%
    );
    padding: 0;
    margin-bottom: 32px;
    border-radius: 16px;
    overflow: hidden;
}
.otoetkinlik-section > .container {
    background: #121212;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
/* Header */
.otoetkinlik-section .section-head {
    margin-bottom: 20px;
}
.otoetkinlik-section .section-title,
.otoetkinlik-section .see-all {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}
.otoetkinlik-section .see-all {
    font-weight: 700;
}
.otoetkinlik-section .see-all:hover {
    opacity: .85;
}
/* Cards */
.otoetkinlik-section .news-card {
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.otoetkinlik-section .news-card h3 {
    color: #fff;
}
.otoetkinlik-section .news-date {
    color: #aaa;
}
/* Hover */
.otoetkinlik-section .news-card:hover {
    border-color: rgba(220, 38, 38, 0.35);
    box-shadow: 0 14px 32px rgba(220, 38, 38, 0.18);
    transform: translateY(-4px);
}
/* Category badge */
.otoetkinlik-section .cat {
    background: #c40000;
    color: #fff;
}


/* ==================================================
   HERO V3 – Sağ Çift Sutun
================================================== */
.hero-grid-v3 {
    max-width: 1350px;
    margin: 0 auto;
    background: #f7f8fa;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,.06);
    grid-template-columns: 1.6fr 0.9fr 1fr 1fr;
    gap: 20px;
    display: grid;
    grid-template-areas:
        "big middle list1 list2";
}
/* ORTA */
.hero-grid-v3 .hero-middle {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    grid-area: middle;
}
/* Her kolon */
.hero-grid-v3 .hero-list-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Liste item – v4 ile aynı */
.hero-grid-v3 .hero-list-item {
    padding: 8px 8px 3px;
    border-radius: 12px;
    transition: background .25s ease, transform .25s ease;
	position: relative;
}
.hero-grid-v3 .hero-list-item a {
    display: flex;
    gap: 12px;
    align-items: flex-start; /* 🔥 başlık üst hizadan başlasın */
}
.hero-grid-v3 .hero-list-item img {
    width: 81px;           /* 🔥 büyüdü */
    height: 81px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.hero-grid-v3 .hero-list-item:hover {
    background: rgba(0,0,0,.04);
    transform: translateX(4px);
}
.hero-grid-v3 .hero-list-item:hover h4 {
    color: #c40000;
}
/* 🔒 ALANLARI SABİTLE */
.hero-grid-v3 .hero-big {
    grid-area: big;
}
.hero-grid-v3 .hero-list-columns {
    grid-area: list1 / list1 / list2 / list2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
/* Metin hizası */
.hero-grid-v3 .hero-list-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Başlık biraz nefes alsın */
.hero-grid-v3 .hero-list-text h4 {
    font-size: 14px;
    line-height: 1.4;
}
/* HERO V3 – LISTE HABERLERİ ALT AYRAÇ*/
.hero-grid-v3 .hero-list-item::after {
    content: "";
    position: absolute;
    left: 96px;      /* thumbnail bittikten sonra */
    right: 6px;
    bottom: 0;
    height: 1px;
    background: rgba(0,0,0,.12);
}
/* Her kolondaki SON HABERDE çizgi olmasın */
.hero-grid-v3 .hero-list-col .hero-list-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.hero-grid-v3 .hero-list-col .hero-list-item:last-child::after {
    display: none;
}
/* Liste kolonları */
@media (max-width: 992px) {
    .hero-grid-v3 {
        grid-template-columns: 1fr;
        grid-template-areas:
            "big"
            "middle"
            "list1";
    }
    .hero-grid-v3 .hero-list-columns {
        grid-template-columns: 1fr;
    }
}
.hero-list-meta {
    display: flex;
    gap: 4px;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    align-items: center;
}

/* Tarih */
.hero-list-meta time {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* Separator */
.hero-list-meta time::after {
    content: "|";
    margin: 0 6px;
    color: #444;
    display: inline-block;
    position: relative;
    top: -1px; /* hizalama fix */
}