* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #071521;
    color: white;
}

/* ÜST MENÜ */

.site-header {
    width: 100%;
    min-height: 92px;
    background: linear-gradient(90deg, #06111b, #0a2538);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4%;
    border-bottom: 1px solid rgba(57, 190, 220, 0.35);
    position: relative;
    z-index: 10;
}

.logo-alani {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-alani img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    background: white;
    border-radius: 10px;
    padding: 3px;
}

.kulup-adi h1 {
    font-size: 23px;
    letter-spacing: 1.5px;
    color: #ffffff;
}

.kulup-adi span {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #35b8df;
}

.ana-menu {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ana-menu a {
    color: #f5f8fa;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    transition: 0.25s;
    position: relative;
}

.ana-menu a:hover {
    color: #37c5e8;
}

.ana-menu a.aktif::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 2px;
    background: #36c0e5;
}

.puanlama-buton {
    text-decoration: none;
    color: white;
    background: #c8171d;
    padding: 13px 18px;
    border-radius: 7px;
    font-weight: bold;
    font-size: 13px;
    transition: 0.25s;
}

.puanlama-buton:hover {
    background: #e3242b;
}

/* ANA GİRİŞ */

.hero {
    min-height: calc(100vh - 92px);
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(3, 15, 25, 0.96) 0%,
            rgba(4, 24, 38, 0.87) 42%,
            rgba(4, 24, 38, 0.42) 70%,
            rgba(3, 12, 19, 0.62) 100%
        ),
        url("images/kocal-osmanli-logo.jpg");

    background-size: cover;
    background-position: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 70% 45%,
            rgba(26, 167, 206, 0.14),
            transparent 40%
        );
}

.hero-karartma {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.06),
        rgba(0, 0, 0, 0.28)
    );
}

.hero-icerik {
    position: relative;
    z-index: 2;
    width: 65%;
    padding-left: 7%;
    padding-top: 20px;
}

.ust-yazi {
    font-size: 14px;
    letter-spacing: 7px;
    color: #d8e7ec;
    margin-bottom: 18px;
}

.hero h2 {
    font-size: clamp(40px, 4.2vw, 64px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;
    color: #ffffff;
    white-space: nowrap;
}

.hero h2 span {
    display: block;
    margin-top: 10px;
    font-size: 0.58em;
    line-height: 1.1;
    letter-spacing: 1px;
    color: #2eb6df;
    white-space: nowrap;
}

.slogan {
    margin-top: 28px;
    font-size: 18px;
    letter-spacing: 5px;
    color: #ffffff;
}

.slogan b {
    color: #d21b23;
    margin: 0 8px;
}

.hero-butonlar {
    display: flex;
    gap: 18px;
    margin-top: 42px;
}

.buton {
    min-width: 190px;
    padding: 17px 22px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: 0.25s;
}

.ana-buton {
    background: #c8171d;
    color: white;
}

.ana-buton:hover {
    background: #e1272f;
    transform: translateY(-2px);
}

.ikinci-buton {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: white;
    background: rgba(255, 255, 255, 0.03);
}

.ikinci-buton:hover {
    border-color: #36b9df;
    color: #36b9df;
    transform: translateY(-2px);
}

/* AŞAĞI KAYDIR */

.asagi-kaydir {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    text-align: center;
    color: #d8e7ec;
    font-size: 11px;
    letter-spacing: 2px;
}

.asagi-kaydir .ok {
    display: block;
    font-size: 30px;
    line-height: 20px;
    color: #39c3e7;
    margin-top: 4px;
}

/* TABLET ve TELEFON */

@media (max-width: 1200px) {

    .site-header {
        flex-wrap: wrap;
        gap: 15px;
    }

    .ana-menu {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: 8px;
    }

    .hero {
        min-height: 760px;
    }

    .hero-icerik {
        width: 70%;
    }
}

@media (max-width: 768px) {

    .site-header {
        padding: 10px 18px;
    }

    .logo-alani img {
        width: 62px;
        height: 62px;
    }

    .kulup-adi h1 {
        font-size: 18px;
    }

    .kulup-adi span {
        font-size: 11px;
    }

    .puanlama-buton {
        padding: 10px 12px;
        font-size: 11px;
    }

    .ana-menu {
        gap: 12px;
    }

    .ana-menu a {
        font-size: 11px;
    }

    .hero {
        min-height: 700px;
    }

    .hero-icerik {
        width: 100%;
        padding: 0 8%;
    }

    .ust-yazi {
        letter-spacing: 4px;
        font-size: 11px;
    }

    .hero h2 {
        font-size: 48px;
    }

    .slogan {
        font-size: 13px;
        letter-spacing: 2px;
        line-height: 2;
    }

    .hero-butonlar {
        flex-direction: column;
        width: 230px;
    }

    .buton {
        min-width: unset;
        width: 100%;
    }
}
/* =========================
   KULÜBÜMÜZ SAYFASI
========================= */

.kurumsal-sayfa {
    background: #071521;
    min-height: 100vh;
}

.kurumsal-hero {
padding: 38px 8% 28px;
    background:
        linear-gradient(
            90deg,
            rgba(3, 15, 25, 0.96),
            rgba(6, 35, 52, 0.92)
        );
    border-bottom: 1px solid rgba(53, 184, 223, 0.25);
}

.kurumsal-hero-icerik {
    max-width: 900px;
}

.kurumsal-hero-icerik > span {
    display: inline-block;
    margin-bottom: 7px;
    color: #35b8df;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 4px;
}

.kurumsal-hero h2 {
    font-size: 38px;
    line-height: 1.05;
    margin-bottom: 10px;
    color: #ffffff;
}

.kurumsal-hero p {
    max-width: 720px;
    font-size: 15px;
    line-height: 1.5;
    color: #c7d7de;
}

.kurumsal-bolum {
    width: min(1200px, 88%);
    margin: 0 auto;
padding: 28px 0 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.kurumsal-kart {
    background: linear-gradient(
        145deg,
        rgba(13, 42, 58, 0.95),
        rgba(7, 25, 36, 0.98)
    );
    border: 1px solid rgba(53, 184, 223, 0.18);
    border-radius: 14px;
    padding: 34px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.kurumsal-kart h3 {
    font-size: 27px;
    margin-bottom: 24px;
    color: #ffffff;
    position: relative;
    padding-bottom: 12px;
}

.kurumsal-kart h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 55px;
    height: 3px;
    background: #35b8df;
    border-radius: 5px;
}

.kurumsal-kart p {
    color: #cbd8de;
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 18px;
}

.kurumsal-kart p:last-child {
    margin-bottom: 0;
}

/* VİZYON daha geniş alan */
.vizyon-karti {
    grid-column: 1 / -1;
    border-left: 4px solid #c8171d;
}

/* DEĞERLER */
.degerler-karti {
    grid-column: 1 / -1;
    text-align: center;
}

.degerler-karti h3::after {
    left: 50%;
    transform: translateX(-50%);
}

.degerler-listesi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 25px 0 30px;
}

.degerler-listesi span {
    padding: 11px 18px;
    border-radius: 30px;
    background: rgba(53, 184, 223, 0.1);
    border: 1px solid rgba(53, 184, 223, 0.3);
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.degerler-karti blockquote {
    max-width: 820px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #e5eef2;
    font-size: 20px;
    line-height: 1.7;
    font-style: italic;
}

/* TELEFON / TABLET */
@media (max-width: 900px) {

    .kurumsal-hero {
        padding: 65px 7% 45px;
    }

    .kurumsal-hero h2 {
        font-size: 42px;
    }

    .kurumsal-bolum {
        width: 90%;
        grid-template-columns: 1fr;
        padding: 45px 0 65px;
    }

    .vizyon-karti,
    .degerler-karti {
        grid-column: auto;
    }
}

@media (max-width: 600px) {

    .kurumsal-hero h2 {
        font-size: 36px;
    }

    .kurumsal-hero p {
        font-size: 16px;
    }

    .kurumsal-kart {
        padding: 24px;
    }

    .kurumsal-kart h3 {
        font-size: 23px;
    }

    .kurumsal-kart p {
        font-size: 15px;
    }

    .degerler-karti blockquote {
        font-size: 17px;
    }
}

/* KULÜBÜMÜZ - KART YERLEŞİMİ */

.kurumsal-bolum {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* =====================================================
   KULÜBÜMÜZ - YENİ HİKAYE TASARIMI
===================================================== */

.kulup-hikaye {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: stretch;

    gap: 28px;

    width: 100%;

    padding: 0;

    background: linear-gradient(
        145deg,
        rgba(10, 37, 54, 0.96),
        rgba(6, 25, 38, 0.96)
    );

    border: 1px solid rgba(210, 35, 45, 0.55);
    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}


/* FOTOĞRAF - SOL */

.kulup-hikaye-gorsel {
    min-width: 0;
    min-height: 360px;
}

.kulup-hikaye-gorsel > img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 360px;

    object-fit: cover;
}


/* YAZI - SAĞ */

.kulup-hikaye-yazi {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 42px 42px 42px 14px;
}

.kulup-hikaye-etiket {
    display: inline-block;

    margin-bottom: 10px;

    color: #35b8df;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.kulup-hikaye-yazi h3 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 30px;
    line-height: 1.15;
}

.kulup-hikaye-yazi p {
    margin: 0 0 14px;

    color: #cbd9df;

    font-size: 15px;
    line-height: 1.75;
}

.kulup-hikaye-yazi p:last-child {
    margin-bottom: 0;
}


/* İLK SATIR: FOTOĞRAF SOL - YAZI SAĞ */

.kulup-hikaye-ilk .kulup-hikaye-gorsel {
    grid-column: 1;
    grid-row: 1;
}

.kulup-hikaye-ilk .kulup-hikaye-yazi {
    grid-column: 2;
    grid-row: 1;
}

/* 3 FOTOĞRAFLI DOĞA / KIŞ KOLAJI */

.kulup-hikaye-kolaj {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}


/* ÜSTTEKİ İKİ DİKEY FOTOĞRAF */

.kulup-kolaj-kucuk {
    order: 1;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;
    height: 310px;

    min-height: 0;
    overflow: hidden;
}

.kulup-kolaj-kucuk img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: contain;
    object-position: center;
}


/* ALTTAKİ KARLI YATAY FOTOĞRAF */

.kulup-kolaj-ana {
    order: 2;

    width: 100%;
    height: 190px;

    min-height: 0;
    overflow: hidden;
}

.kulup-kolaj-ana img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: cover;
    object-position: center;
}

/* =====================================================
   BİRLİKTE GEÇİRİLEN ZAMAN - 2 FOTOĞRAF
===================================================== */

.kulup-sosyal-kolaj {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    height: 360px;
    min-height: 0;

    padding: 12px;

    overflow: hidden;
}


/* İKİ FOTOĞRAFIN ORTAK ÇERÇEVESİ */

.kulup-sosyal-foto {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* FOTOĞRAFLAR */

.kulup-sosyal-foto img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}

/* =====================================================
   AİLELERLE BİRLİKTE - 3 FOTOĞRAF KOLAJI
===================================================== */

.kulup-aile-kolaj {
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;

    gap: 6px;
    padding: 10px;

    width: 70%;
    justify-self: center;

    height: auto;
    min-height: 0;

    align-content: center;
}


/* ÜSTTEKİ İKİ FOTOĞRAF */

.kulup-aile-kolaj .kulup-aile-ust {
    display: block;

    width: 100%;
    height: auto;

    min-height: 0;

    object-fit: contain;
}


/* ALTTAKİ YATAY FOTOĞRAF */

.kulup-aile-kolaj .kulup-aile-alt {
    display: block;

    grid-column: 1 / 3;

    width: 100%;
    height: auto;

    min-height: 0;

    object-fit: contain;
}

/* =====================================================
   BİR SPORCUYLA YOLA ÇIKTIĞIMIZDA
===================================================== */

.kulup-hikaye-yolculuk {
    grid-template-columns: 0.65fr 1.35fr;
}

.kulup-yolculuk-gorsel {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
    min-width: 0;
}

.kulup-yolculuk-gorsel img {
    display: block;

    width: 100%;
    max-width: 370px;
    height: auto;

    object-fit: contain;
    border-radius: 12px;
}

/* =====================================================
   MİSYON - VİZYON
===================================================== */

.misyon-vizyon-alani {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    width: 100%;
}


/* KUTULAR */

.misyon-vizyon-kutu {
    position: relative;

    padding: 34px 32px;

    background: linear-gradient(
        145deg,
        rgba(10, 37, 54, 0.96),
        rgba(6, 25, 38, 0.96)
    );

    border: 1px solid rgba(53, 184, 223, 0.22);
    border-radius: 16px;

    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);

    overflow: hidden;
}


/* ÜST TURKUAZ ÇİZGİ */

.misyon-vizyon-kutu::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: #35b8df;
}


/* KÜÇÜK ÜST BAŞLIK */

.misyon-vizyon-etiket {
    display: block;

    margin-bottom: 9px;

    color: #35b8df;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}


/* BAŞLIK */

.misyon-vizyon-kutu h3 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 27px;
    line-height: 1.2;
}


/* METİN */

.misyon-vizyon-kutu p {
    margin: 0 0 14px;

    color: #cbd9df;

    font-size: 14px;
    line-height: 1.75;
}

.misyon-vizyon-kutu p:last-child {
    margin-bottom: 0;
}

/* TELEFON / TABLET */

@media (max-width: 800px) {

    .kulup-hikaye {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .kulup-hikaye-ilk .kulup-hikaye-yazi,
    .kulup-hikaye-ilk .kulup-hikaye-gorsel {
        grid-column: 1;
    }

    .kulup-hikaye-ilk .kulup-hikaye-yazi {
        grid-row: 1;
        padding: 28px 24px;
    }

    .kulup-hikaye-ilk .kulup-hikaye-gorsel {
        grid-row: 2;
        min-height: 240px;
    }

    .kulup-hikaye-gorsel > img {
    min-height: 240px;
}
    .kulup-hikaye-yazi h3 {
        font-size: 25px;
    }

    /* DOĞA / KIŞ KOLAJI - MOBİL */

    .kulup-hikaye-kolaj {
        min-height: 0;
        grid-template-rows: auto auto;
        gap: 5px;
    }

    .kulup-kolaj-ana {
        height: 240px;
    }

    .kulup-kolaj-kucuk {
        height: 150px;
        gap: 5px;
    }

    .kulup-kolaj-ana img,
    .kulup-kolaj-kucuk img {
        min-height: 0;
        height: 100%;
        object-fit: cover;
    }

    /* AİLELERLE BİRLİKTE - MOBİL */

.kulup-aile-kolaj {
    width: 100%;
    padding: 14px;
}

.kulup-aile-kolaj .kulup-aile-ust,
.kulup-aile-kolaj .kulup-aile-alt {
    min-height: 0;
}

/* BİR SPORCUYLA YOLA ÇIKTIĞIMIZDA - MOBİL */

.kulup-hikaye-yolculuk {
    grid-template-columns: 1fr;
}

.kulup-yolculuk-gorsel {
    padding: 24px 24px 0;
}

.kulup-yolculuk-gorsel img {
    max-width: 280px;
}

.kulup-hikaye-yolculuk .kulup-hikaye-yazi {
    padding: 28px 24px;
}

/* MİSYON - VİZYON - MOBİL */

.misyon-vizyon-alani {
    grid-template-columns: 1fr;
    gap: 16px;
}

.misyon-vizyon-kutu {
    padding: 28px 24px;
}

.misyon-vizyon-kutu h3 {
    font-size: 24px;
}

/* DEĞERLERİMİZ - MOBİL */

.kurumsal-bolum {
    grid-template-columns: 1fr;
}

.degerler-karti {
    grid-column: 1 / -1;
    width: 100%;
}

.degerler-karti {
    padding: 28px 20px;
}

.degerler-listesi {
    gap: 9px;
    margin: 20px 0 24px;
}

.degerler-listesi span {
    padding: 9px 14px;
    font-size: 13px;
}

.degerler-karti blockquote {
    padding-top: 20px;
    font-size: 16px;
    line-height: 1.6;
}
}
/* =========================
   ANTRENÖRLERİMİZ SAYFASI
========================= */

.antrenorler-sayfa {
    background: #071521;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* YUMUŞAK FİLİGRAN */

.antrenorler-sayfa::before {
    content: "極真";
    position: absolute;
    left: -25px;
    top: 210px;

    font-size: 180px;
    font-weight: 900;

    color: rgba(53, 184, 223, 0.035);

    transform: rotate(-7deg);

    pointer-events: none;
    z-index: 0;
}


/* ÜST BAŞLIK */

.antrenorler-hero {
    position: relative;
    z-index: 1;

    padding: 28px 8% 20px;


    background: linear-gradient(
        90deg,
        rgba(3, 15, 25, 0.96),
        rgba(8, 38, 56, 0.92)
    );

    border-bottom: 1px solid rgba(53, 184, 223, 0.25);
}

.antrenorler-hero > span {
    display: inline-block;

    margin-bottom: 5px;

    color: #35b8df;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 4px;
}

.antrenorler-hero h2 {
    font-size: 38px;
    color: #ffffff;
    margin-bottom: 6px;
}

.antrenorler-hero p {
    max-width: 760px;
    color: #c7d7de;
    font-size: 14px;
    line-height: 1.45;
}


/* 4 + 2 KART DÜZENİ */

.antrenor-grid {
    position: relative;
    z-index: 1;

    width: min(1400px, 94%);

    margin: 0 auto;

    padding: 22px 0 45px;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


/* ALTTAKİ İKİ KARTI ORTALA */

.antrenor-grid .antrenor-kart:nth-child(5) {
    grid-column: 2;
}

.antrenor-grid .antrenor-kart:nth-child(6) {
    grid-column: 3;
}


/* KART */

.antrenor-kart {
    min-width: 0;

    background: linear-gradient(
        180deg,
        rgba(7, 24, 35, 0.98),
        rgba(6, 31, 49, 0.98)
    );

    border: 1px solid rgba(53, 184, 223, 0.34);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);

    transition: 0.25s;
}

.antrenor-kart:hover {
    transform: translateY(-3px);

    border-color: rgba(53, 184, 223, 0.65);
}


/* FOTOĞRAF */

.antrenor-kart img {
    width: 100%;
    height: 205px;

    object-fit: contain;
    object-position: center bottom;

    display: block;

    background:
        radial-gradient(
            circle at 50% 65%,
            rgba(20, 70, 95, 0.28) 0%,
            rgba(10, 40, 58, 0.18) 38%,
            rgba(7, 24, 35, 0.96) 72%
        );

    padding: 0;
    -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 82%,
    transparent 100%
);

mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 82%,
    transparent 100%
);

    border-bottom: 1px solid rgba(53, 184, 223, 0.08);
}


/* KART İÇİ */

.antrenor-bilgi {
    padding: 14px 16px 16px;

    background: linear-gradient(
        180deg,
        rgba(7, 24, 35, 0.92),
        rgba(6, 31, 49, 0.98)
    );
}

.antrenor-bilgi h3 {
    font-size: 18px;

    color: #ffffff;

    margin-bottom: 6px;

    line-height: 1.15;
}

.antrenor-unvan {
    color: #ff4b52;

    font-size: 12px;
    font-weight: 700;

    margin-bottom: 8px;

    line-height: 1.35;
}

.antrenor-detay {
    color: #cbd8de;

    font-size: 11px;

    line-height: 1.45;

    margin-bottom: 10px;
}


/* BAŞARILAR */

.antrenor-bilgi ul {
    list-style: none;

    padding: 10px 0 0;
    margin: 0;

    border-top: 1px solid rgba(200, 23, 29, 0.55);
}

.antrenor-bilgi li {
    position: relative;

    padding-left: 14px;

    margin-bottom: 6px;

    color: #cbd7dc;

    font-size: 11px;

    line-height: 1.35;
}

.antrenor-bilgi li::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #c8171d;

    position: absolute;

    left: 0;
    top: 5px;
}


/* TABLET */

@media (max-width: 1150px) {

    .antrenor-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .antrenor-grid .antrenor-kart:nth-child(5),
    .antrenor-grid .antrenor-kart:nth-child(6) {
        grid-column: auto;
    }
}


/* DAHA DAR EKRAN */

@media (max-width: 850px) {

    .antrenor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* TELEFON */

@media (max-width: 560px) {
    .antrenor-grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.antrenor-grid::-webkit-scrollbar {
    display: none;
}

    .antrenorler-hero {
        padding: 40px 7% 28px;
    }

    .antrenorler-hero h2 {
        font-size: 34px;
    }

    .antrenor-grid {
        grid-template-columns: 1fr;

        width: 92%;

        padding: 28px 0 45px;
    }

    .antrenor-kart img {
        height: 240px;
    }
}
/* =========================
   HAKEMLERİMİZ SAYFASI
========================= */

.hakemler-sayfa {
    background: #071521;
    min-height: 100vh;
}

/* SAYFA BAŞLIĞI */

.hakemler-hero {
padding: 34px 8% 24px;
    background: linear-gradient(
        90deg,
        rgba(3, 15, 25, 0.96),
        rgba(8, 38, 56, 0.92)
    );
    border-bottom: 1px solid rgba(53, 184, 223, 0.25);
}

.hakemler-hero > span {
    display: inline-block;
    margin-bottom: 10px;
    color: #35b8df;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 5px;
}

.hakemler-hero h2 {
    font-size: 38px;
    color: #ffffff;
    margin-bottom: 16px;
}

.hakemler-hero p {
    max-width: 760px;
    color: #c7d7de;
    font-size: 17px;
    line-height: 1.7;
}


/* BÖLÜM BAŞLIKLARI */

.aktif-hakemler-bolumu,
.gecmis-hakemler-bolumu {
    width: min(1300px, 90%);
    margin: 0 auto;
}

.aktif-hakemler-bolumu {
    padding: 60px 0 75px;
}

.gecmis-hakemler-bolumu {
    padding: 15px 0 90px;
}

.hakem-bolum-baslik {
    margin-bottom: 30px;
}

.hakem-bolum-baslik h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 10px;
}

.hakem-bolum-baslik p {
    color: #aebfc7;
    font-size: 15px;
    line-height: 1.7;
}


/* 4 SÜTUN × 3 SIRA */

.hakem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.hakem-kart {
    min-height: 165px;
    padding: 25px 22px;

    background: linear-gradient(
        145deg,
        rgba(14, 43, 59, 0.98),
        rgba(7, 24, 35, 0.98)
    );

    border: 1px solid rgba(210, 35, 45, 0.55);
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    transition: 0.25s;
}

.hakem-kart:hover {
    transform: translateY(-4px);
    border-color: rgba(53, 184, 223, 0.45);
}

.hakem-kart h4 {
    color: #ffffff;
    font-size: 21px;
    margin-bottom: 14px;
}

.hakem-kart p {
    margin-top: 13px;
    color: #d6e2e7;
    font-size: 14px;
    font-weight: bold;
}


/* HAKEMLİK SEVİYESİ ETİKETLERİ */

.hakem-seviye {
    display: inline-block;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.uluslararasi {
    color: #ffffff;
    background: #c8171d;
}

.ulusal {
    color: #ffffff;
    background: #176fa1;
}

.bolge {
    color: #071521;
    background: #35b8df;
}

.aday {
    color: #ffffff;
    background: #495b66;
}

.kemer-yok {
    color: #83949c !important;
    font-weight: normal !important;
}


/* GEÇMİŞ HAKEMLER TABLOSU */

.hakem-tablo-kapsayici {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(210, 35, 45, 0.55);
    background: rgba(8, 28, 41, 0.95);
}

.hakem-tablo {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

.hakem-tablo thead {
    background: rgba(53, 184, 223, 0.12);
}

.hakem-tablo th {
    padding: 17px 20px;
    text-align: left;
    color: #35b8df;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.hakem-tablo td {
    padding: 16px 20px;
    color: #d5e0e5;
    font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hakem-tablo tbody tr {
    transition: 0.2s;
}

.hakem-tablo tbody tr:hover {
    background: rgba(53, 184, 223, 0.06);
}

.hakem-tablo td:first-child {
    color: #ffffff;
    font-weight: bold;
}


/* TABLET */

@media (max-width: 1050px) {

    .hakem-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* TELEFON */

@media (max-width: 650px) {

    .hakemler-hero {
        padding: 60px 7% 40px;
    }

    .hakemler-hero h2 {
        font-size: 38px;
    }

    .hakem-grid {
        grid-template-columns: 1fr;
    }

    .hakem-kart {
        min-height: 145px;
    }

    .hakem-bolum-baslik h3 {
        font-size: 25px;
    }
}
/* =========================
   MİLLÎ SPORCULARIMIZ SAYFASI
========================= */

.milli-sporcular-sayfa {
    background: #071521;
    min-height: 100vh;
}

/* SAYFA BAŞLIĞI */

.milli-sporcular-hero {
    padding: 34px 8% 24px;
    background: linear-gradient(
        90deg,
        rgba(3, 15, 25, 0.97),
        rgba(8, 38, 56, 0.93)
    );
    border-bottom: 1px solid rgba(53, 184, 223, 0.25);
}
.milli-sporcular-hero > span {
    display: inline-block;
    margin-bottom: 6px;
    color: #35b8df;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 4px;
}

.milli-sporcular-hero h2 {
    max-width: 1000px;
    font-size: 36px;
    line-height: 1.12;
    color: #ffffff;
    margin-bottom: 10px;
}

.milli-sporcular-hero p {
    max-width: 850px;
    color: #c7d7de;
    font-size: 17px;
    line-height: 1.7;
}


/* İKİ SÜTUNLU SPORCU DÜZENİ */

.sporcu-tablolari {
width: min(1100px, 88%);
    margin: 0 auto;
    padding: 24px 0 50px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}


/* SPORCU KARTI */

.sporcu-kart {
    background: linear-gradient(
        145deg,
        rgba(14, 43, 59, 0.98),
        rgba(7, 24, 35, 0.98)
    );

    border: 1px solid rgba(210, 35, 45, 0.55);
    border-radius: 12px;

padding: 16px 18px;

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);

    transition: 0.25s;
}

.sporcu-kart:hover {
    transform: translateY(-3px);
    border-color: rgba(53, 184, 223, 0.42);
}


/* SPORCU ADI */

.sporcu-kart h3 {
    color: #ffffff;
    font-size: 19px;
    margin-bottom: 7px;
    border-left: 3px solid #35b8df;
    padding-left: 9px;
}


/* STATÜ */

.sporcu-statu {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 12px;
    border-radius: 18px;

    font-size: 12px;
    font-weight: bold;
}

.sporcu-statu.milli {
    color: #ffffff;
    background: #c8171d;
}

.sporcu-statu.temsil {
    color: #071521;
    background: #35b8df;
}


/* ORGANİZASYON LİSTESİ */

.sporcu-kart ul {
    list-style: none;
    padding: 0;
    margin: 0;

    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding-top: 15px;
}

.sporcu-kart li {
    position: relative;

    padding-left: 14px;
    margin-bottom: 5px;

    color: #cbd8de;
    font-size: 11px;
    line-height: 1.35;
}

.sporcu-kart li:last-child {
    margin-bottom: 0;
}

.sporcu-kart li::before {
    content: "";
    position: absolute;

    left: 0;
    top: 7px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #35b8df;
}


/* DERECELER */

.sporcu-kart strong {
    color: #ffffff;
    font-weight: 800;
}


/* TABLET */

@media (max-width: 1000px) {

    .milli-sporcular-hero h2 {
        font-size: 38px;
    }

    .sporcu-tablolari {
        grid-template-columns: 1fr;
        width: 90%;
    }
}


/* TELEFON */

@media (max-width: 650px) {

    .milli-sporcular-hero {
        padding: 60px 7% 40px;
    }

    .milli-sporcular-hero h2 {
        font-size: 30px;
    }

    .milli-sporcular-hero p {
        font-size: 15px;
    }

    .sporcu-kart {
        padding: 20px;
    }

    .sporcu-kart h3 {
        font-size: 20px;
    }

    .sporcu-kart li {
        font-size: 18px;
    }
}
/* =========================
   HABERLER & DUYURULAR
========================= */

.haberler-sayfa {
    background: #071521;
    min-height: 100vh;
}

.haberler-hero {
    padding: 80px 8% 50px;
    background: linear-gradient(
        90deg,
        rgba(3, 15, 25, 0.97),
        rgba(8, 38, 56, 0.93)
    );
    border-bottom: 1px solid rgba(53, 184, 223, 0.25);
}

.haberler-hero > span {
    display: inline-block;
    margin-bottom: 10px;
    color: #35b8df;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 5px;
}

.haberler-hero h2 {
    font-size: 48px;
    color: #ffffff;
    margin-bottom: 16px;
}

.haberler-hero p {
    max-width: 760px;
    color: #c7d7de;
    font-size: 17px;
    line-height: 1.7;
}

.haberler-alani {
    width: min(1200px, 90%);
    margin: 0 auto;
    padding: 60px 0 90px;
}

#haber-listesi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.haber-karti {
    background: linear-gradient(
        145deg,
        rgba(14, 43, 59, 0.98),
        rgba(7, 24, 35, 0.98)
    );
    border: 1px solid rgba(210, 35, 45, 0.55);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
    transition: 0.25s;
}

.haber-karti:hover {
    transform: translateY(-4px);
    border-color: rgba(53, 184, 223, 0.45);
}

.haber-resim img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    display: block;
    background: #071521;
}

.haber-icerik {
    padding: 24px;
}

.haber-tarih {
    display: inline-block;
    margin-bottom: 10px;
    color: #35b8df;
    font-size: 12px;
    font-weight: bold;
}

.haber-icerik h3 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 12px;
}

.haber-icerik p {
    color: #cbd8de;
    font-size: 15px;
    line-height: 1.7;
}

.haber-yok {
    text-align: center;
    padding: 70px 20px;
    background: rgba(10, 34, 49, 0.85);
    border: 1px solid rgba(210, 35, 45, 0.55);
    border-radius: 14px;
}

.haber-yok h3 {
    color: #ffffff;
    font-size: 26px;
    margin-bottom: 10px;
}

.haber-yok p {
    color: #aebfc7;
    font-size: 15px;
}

/* TABLET */
@media (max-width: 1000px) {
    #haber-listesi {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* TELEFON */
@media (max-width: 650px) {
    .haberler-hero {
        padding: 45px 7% 28px;
    }

    .haberler-hero h2 {
        font-size: 32px;
    }

    #haber-listesi {
        grid-template-columns: 1fr;
    }
    .haber-resim img {
    height: 170px;
}

.haber-icerik {
    padding: 16px;
}
.haberler-alani {
    padding: 28px 0 50px;
}
}
/* =========================
   HABER DETAY PENCERESİ
========================= */

.haber-devam-buton {
    margin-top: 18px;
    padding: 11px 16px;
    border: none;
    border-radius: 7px;
    background: #c8171d;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.25s;
}

.haber-devam-buton:hover {
    background: #e1262d;
}

.haber-detay-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.82);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;
}

.haber-detay {
    position: relative;

    width: min(1000px, 95%);
    max-height: 90vh;
    overflow-y: auto;

    background: #071521;

    border: 1px solid rgba(53, 184, 223, 0.3);
    border-radius: 16px;

    padding: 35px;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
}

.haber-detay h2 {
    margin: 10px 0 25px;

    color: #ffffff;
    font-size: 34px;
    line-height: 1.25;
}

.haber-kapat {
    position: absolute;

    top: 16px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: rgba(200, 23, 29, 0.95);
    color: #ffffff;

    font-size: 27px;
    line-height: 1;

    cursor: pointer;
}

.haber-kapat:hover {
    background: #ed2730;
}

/* FOTOĞRAF GALERİSİ */

.haber-galeri {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin: 25px 0 30px;
}

.haber-galeri img {
    width: 100%;
    height: 210px;

    object-fit: cover;

    border-radius: 9px;

    border: 1px solid rgba(53, 184, 223, 0.18);
}

/* TAM HABER METNİ */

.haber-tam-metin {
    white-space: pre-line;

    color: #d5e0e5;

    font-size: 16px;
    line-height: 1.9;
}


/* TABLET */

@media (max-width: 900px) {

    .haber-galeri {
        grid-template-columns: repeat(2, 1fr);
    }

    .haber-detay h2 {
        font-size: 29px;
    }
}


/* TELEFON */

@media (max-width: 600px) {

    .haber-detay-overlay {
        padding: 12px;
    }

    .haber-detay {
        width: 100%;
        padding: 25px 18px;
    }

    .haber-galeri {
        grid-template-columns: 1fr;
    }

    .haber-galeri img {
        height: auto;
        max-height: 350px;
    }

    .haber-detay h2 {
        font-size: 25px;
        padding-right: 35px;
    }
}
/* ==================================================
   HABER DETAY SAYFASI
================================================== */

.haber-detay-sayfa {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(21, 88, 120, 0.20),
            transparent 45%
        ),
        #06131f;

    padding-bottom: 100px;
}


/* HABER ÜST BAŞLIK ALANI */

.haber-detay-hero {
    width: min(1100px, 90%);
    margin: 0 auto;

    padding: 60px 0 35px;

    border-bottom: 1px solid rgba(53, 184, 223, 0.22);
}


/* HABERLERE GERİ DÖN */

.haberlere-don {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;

    margin-bottom: 30px;
    padding: 10px 16px;

color: #ffffff;
    background: #c8171d;
border: 1px solid rgba(239, 68, 68, 0.55);
    border-radius: 10px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;

    transition: 0.2s;
}

.haberlere-don:hover {
    color: #ffffff;
    background: rgba(53, 184, 223, 0.16);
    border-color: rgba(53, 184, 223, 0.60);
    transform: translateX(-3px);
}


/* TARİH */

.detay-tarih {
    display: block;

    margin-bottom: 12px;

    color: #35b8df;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* HABER BAŞLIĞI */

.haber-detay-hero h2 {
    max-width: 900px;

    margin: 0;

    color: #ffffff;

    font-size: 46px;
    line-height: 1.15;

    font-weight: 800;
}


/* ==================================================
   HABER İÇERİK ALANI
================================================== */

.haber-detay-icerik {
    width: min(1100px, 90%);
    margin: 40px auto 0;
}


/* ==================================================
   FOTOĞRAF GALERİSİ
================================================== */

.detay-galeri {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

    margin-bottom: 35px;
}


/* TÜM FOTOĞRAFLAR */

.detay-galeri img {
    display: block;

    width: 100%;
    height: 220px;

    object-fit: cover;

    border-radius: 12px;

    border: 1px solid rgba(53, 184, 223, 0.20);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}


/* SADECE 1 FOTOĞRAF VARSA BÜYÜK GÖSTER */

.detay-galeri img:only-child {
    grid-column: 1 / -1;

    height: auto;
    max-height: 600px;

    object-fit: contain;

    background: #030b11;
}


/* ==================================================
   HABER METNİ
================================================== */

.detay-metin {
    max-width: 900px;

    margin: 0 auto;

    padding: 40px 45px;

    background: linear-gradient(
        145deg,
        rgba(13, 39, 55, 0.95),
        rgba(7, 25, 36, 0.97)
    );

    border: 1px solid rgba(210, 35, 45, 0.55);

    border-radius: 14px;

    color: #d8e4e9;

    font-size: 17px;
    line-height: 1.9;

    white-space: pre-line;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);

    overflow-wrap: anywhere;
}


/* HABER METNİNDEN ÖNCE KÜÇÜK ÇİZGİ */

.detay-metin::before {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin-bottom: 25px;

    border-radius: 5px;

    background: #c8171d;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {

    .haber-detay-hero h2 {
        font-size: 36px;
    }

    .detay-galeri img {
        height: 240px;
    }

    .detay-metin {
        padding: 32px;
    }
}


/* ==================================================
   TELEFON
================================================== */

@media (max-width: 600px) {

    .haber-detay-hero {
        padding-top: 40px;
    }

    .haber-detay-hero h2 {
        font-size: 30px;
    }

    .detay-galeri {
        grid-template-columns: 1fr;
    }

    .detay-galeri img {
        height: auto;
        max-height: 400px;
    }

    .detay-metin {
        padding: 25px 20px;

        font-size: 16px;
        line-height: 1.8;
    }
}
/* ===============================
   HABER FOTOĞRAF SLIDER
================================ */

.haber-slider {
    margin-bottom: 40px;
}

.ana-fotograf-alani {
    position: relative;
    width: 100%;
    height: 560px;

    background: #02080d;

    border-radius: 14px;
    overflow: hidden;

    border: 1px solid rgba(53, 184, 223, 0.22);

    display: flex;
    align-items: center;
    justify-content: center;
}

#ana-haber-fotografi {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;
}

.slider-ok {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    z-index: 5;

    width: 58px;
    height: 58px;

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);

    background: rgba(3, 16, 26, 0.82);

    color: white;
    font-size: 42px;
    line-height: 1;

    cursor: pointer;

    transition: 0.2s;
}

.slider-ok:hover {
    background: #c8171d;
}

.sol-ok {
    left: 18px;
}

.sag-ok {
    right: 18px;
}

.foto-sayaci {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);

    background: rgba(0, 0, 0, 0.72);

    color: #ffffff;

    padding: 7px 14px;

    border-radius: 18px;

    font-size: 13px;
    font-weight: bold;
}


/* KÜÇÜK FOTOĞRAFLAR */

.kucuk-fotograflar {
    display: flex;

    gap: 12px;

    margin-top: 15px;

    overflow-x: auto;

    padding-bottom: 8px;
}

.kucuk-fotograflar img {
    flex: 0 0 125px;

    width: 125px;
    height: 85px;

object-fit: contain;

    border-radius: 8px;

    border: 2px solid transparent;

    opacity: 0.65;

    cursor: pointer;

    transition: 0.2s;
}

.kucuk-fotograflar img:hover {
    opacity: 1;
}

.kucuk-fotograflar img.aktif-kucuk {
    opacity: 1;
    border-color: #35b8df;
}


/* TELEFON */

@media (max-width: 700px) {

    .ana-fotograf-alani {
        height: 350px;
    }

    .slider-ok {
        width: 45px;
        height: 45px;

        font-size: 32px;
    }

    .kucuk-fotograflar img {
        flex-basis: 95px;

        width: 95px;
        height: 65px;
    }
}
/* =========================
   İLETİŞİM SAYFASI
========================= */

.iletisim-sayfa {
    background: #071521;
    min-height: 100vh;
}

/* ÜST BAŞLIK */

.iletisim-hero {
padding: 32px 8% 22px;
    background: linear-gradient(
        90deg,
        rgba(3, 15, 25, 0.97),
        rgba(8, 38, 56, 0.93)
    );
    border-bottom: 1px solid rgba(53, 184, 223, 0.25);
}

.iletisim-hero > span {
    display: inline-block;
    margin-bottom: 6px;
    color: #35b8df;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 4px;
}

.iletisim-hero h2 {
    font-size: 38px;
    color: #ffffff;
    margin-bottom: 8px;
}

.iletisim-hero p {
    max-width: 760px;
    color: #c7d7de;
    font-size: 15px;
    line-height: 1.5;
}

/* KARTLAR */

.iletisim-grid {
    width: min(1100px, 88%);
    margin: 0 auto;
    padding: 24px 0 30px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.iletisim-kart {
    background: linear-gradient(
        145deg,
        rgba(14, 43, 59, 0.98),
        rgba(7, 24, 35, 0.98)
    );

    border: 1px solid rgba(210, 35, 45, 0.55);
    border-radius: 14px;

padding: 18px 22px;

    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
}

.iletisim-kart h3 {
    color: #35b8df;
    font-size: 20px;
    margin-bottom: 10px;
}

.iletisim-kart p {
    color: #cbd8de;
    font-size: 14px;
    line-height: 1.5;
}

.iletisim-kart a {
    display: inline-block;
    margin-top: 3px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    transition: 0.2s;
}

.iletisim-kart a:hover {
    color: #35b8df;
}

.iletisim-alt-baslik {
    margin-top: 18px;
}

.calisma-karti {
    grid-column: 1 / -1;
    text-align: center;
}

.calisma-karti strong {
    display: block;

    margin: 10px 0;

    color: #ffffff;
    font-size: 28px;
}

.kapali {
    margin-top: 10px;
    color: #e15b61 !important;
}

/* TABLET */

@media (max-width: 900px) {

    .iletisim-grid {
        grid-template-columns: 1fr;
    }

    .calisma-karti {
        grid-column: auto;
    }
}

/* TELEFON */

@media (max-width: 600px) {

    .iletisim-hero {
        padding: 60px 7% 40px;
    }

    .iletisim-hero h2 {
        font-size: 38px;
    }

    .iletisim-kart {
        padding: 24px;
    }
}

/* =========================
   BRANŞLARIMIZ SAYFASI
========================= */

.branslar-sayfa {
    background: #071521;
    min-height: 100vh;
}


/* ÜST BAŞLIK */

.branslar-hero {
padding: 18px 8% 12px;

    background: linear-gradient(
        90deg,
        rgba(3, 15, 25, 0.97),
        rgba(8, 38, 56, 0.93)
    );

    border-bottom: 1px solid rgba(53, 184, 223, 0.25);
}

.branslar-hero > span {
    display: inline-block;

    margin-bottom: 10px;

    color: #35b8df;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 5px;
}

.branslar-hero h2 {
    color: #ffffff;

    font-size: 50px;

    margin-bottom: 18px;
}

.branslar-hero p {
    max-width: 850px;

    color: #c7d7de;

    font-size: 17px;
    line-height: 1.75;
}


/* KYOKUSHIN ANA BÖLÜM */

.kyokushin-bolumu {
    width: min(1250px, 90%);

    margin: 0 auto;

    padding: 70px 0;
}

.kyokushin-baslik {
    margin-bottom: 35px;
}

.kyokushin-baslik > span {
    display: inline-block;

    color: #c8171d;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 4px;

    margin-bottom: 10px;
}

.kyokushin-baslik h3 {
    color: #ffffff;

    font-size: 38px;

    margin-bottom: 15px;
}

.kyokushin-baslik p {
    max-width: 850px;

    color: #c4d2d8;

    font-size: 16px;
    line-height: 1.8;
}


/* 4 KART */

.kyokushin-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;
}

.kyokushin-kart {
    background: linear-gradient(
        145deg,
        rgba(14, 43, 59, 0.98),
        rgba(7, 24, 35, 0.98)
    );

    border: 1px solid rgba(210, 35, 45, 0.55);

    border-radius: 14px;

    padding: 30px;

    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);

    transition: 0.25s;
}

.kyokushin-kart:hover {
    transform: translateY(-4px);

    border-color: rgba(53, 184, 223, 0.45);
}

.kyokushin-kart h4 {
    color: #35b8df;

    font-size: 23px;

    margin-bottom: 15px;
}

.kyokushin-kart p {
    color: #cbd8de;

    font-size: 15px;
    line-height: 1.8;
}


/* KİMLER İÇİN */

.kimler-icin {
    width: min(1250px, 90%);

    margin: 0 auto;

    padding: 20px 0 70px;
}

.kimler-baslik {
    margin-bottom: 28px;
}

.kimler-baslik > span {
    color: #35b8df;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 4px;
}

.kimler-baslik h3 {
    color: #ffffff;

    font-size: 34px;

    margin-top: 8px;
}

.kimler-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}

.kimler-kart {
    background: rgba(10, 34, 49, 0.90);

    border: 1px solid rgba(53, 184, 223, 0.16);

    border-radius: 12px;

    padding: 25px;
}

.kimler-kart h4 {
    color: #ffffff;

    font-size: 21px;

    margin-bottom: 12px;
}

.kimler-kart p {
    color: #bccbd2;

    font-size: 14px;
    line-height: 1.75;
}


/* ALT VURGU */

.brans-vurgu {
    width: min(1100px, 90%);

    margin: 0 auto 90px;

    padding: 38px 42px;

    background: linear-gradient(
        135deg,
        rgba(12, 49, 68, 0.95),
        rgba(7, 23, 34, 0.98)
    );

    border-left: 4px solid #c8171d;

    border-radius: 12px;

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
}

.brans-vurgu h3 {
    color: #ffffff;

    font-size: 29px;

    margin-bottom: 18px;
}

.brans-vurgu p {
    color: #d2dde2;

    font-size: 16px;
    line-height: 1.85;
}


/* TABLET */

@media (max-width: 900px) {

    .kyokushin-grid {
        grid-template-columns: 1fr;
    }

    .kimler-grid {
        grid-template-columns: 1fr;
    }

    .branslar-hero h2 {
        font-size: 40px;
    }
}


/* TELEFON */

@media (max-width: 600px) {

    .branslar-hero {
        padding: 60px 7% 40px;
    }

    .branslar-hero h2 {
        font-size: 34px;
    }

    .kyokushin-baslik h3 {
        font-size: 30px;
    }

    .kyokushin-kart {
        padding: 24px;
    }

    .brans-vurgu {
        padding: 28px 24px;
    }

    .brans-vurgu h3 {
        font-size: 24px;
    }
}
/* ==================================================
   TÜM SİTE - EKRANA SIĞDIRMA VE YATAY TAŞMA DÜZELTMESİ
================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video {
    max-width: 100%;
    height: auto;
}


/* Ana bölümler hiçbir zaman ekranı aşmasın */

main,
section,
header,
footer {
    max-width: 100%;
}


/* ==================================================
   BRANŞLARIMIZ - GENİŞLİK DÜZELTMESİ
================================================== */

.branslar-sayfa {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/* Üst başlık */

.branslar-hero {
    width: 100%;
    padding-left: max(40px, 6vw);
    padding-right: max(40px, 6vw);
}


/* Kyokushin bölümü */

.kyokushin-bolumu {
    width: 88%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* Dört bilgi kartı */

.kyokushin-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.kyokushin-kart {
    width: 100%;
    min-width: 0;
}


/* Kimler İçin bölümü */

.kimler-icin {
    width: 88%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.kimler-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.kimler-kart {
    width: 100%;
    min-width: 0;
}


/* En alttaki büyük kutu */

.brans-vurgu {
    width: 88%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* Uzun yazıların kutuyu genişletmesini engeller */

.kyokushin-kart p,
.kimler-kart p,
.brans-vurgu p,
.branslar-hero p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* ==================================================
   DAHA DAR EKRAN
================================================== */

@media (max-width: 1100px) {

    .kyokushin-bolumu,
    .kimler-icin,
    .brans-vurgu {
        width: 92%;
    }

    .kimler-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* TABLET / TELEFON */

@media (max-width: 750px) {

    .branslar-hero {
        padding-left: 24px;
        padding-right: 24px;
    }

    .kyokushin-grid,
    .kimler-grid {
        grid-template-columns: 1fr;
    }

    .kyokushin-bolumu,
    .kimler-icin,
    .brans-vurgu {
        width: calc(100% - 32px);
    }
}
/* =========================================
   HAKEMLERİMİZ SAYFASI - İÇ BOŞLUK DÜZELTMESİ
========================================= */

.hakemler-hero,
.aktif-hakemler-bolumu,
.gecmis-hakemler-bolumu {
    padding-left: 6% !important;
    padding-right: 6% !important;
}

.aktif-hakemler-bolumu,
.gecmis-hakemler-bolumu {
    width: 100% !important;
    max-width: 1300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hakem-bolum-baslik {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hakem-grid {
    width: 100% !important;
}

/* =====================================================
   KOCAL OSMANLI - TEMİZ ÜST MENÜ DÜZENİ
   Tek satır: logo solda, menü ortada, puanlama sağda
===================================================== */

.site-header {
    width: 100%;
    max-width: 100%;
    min-height: 92px;

    display: grid;
    grid-template-columns: minmax(250px, 285px) minmax(0, 1fr) 125px;
    align-items: center;

    column-gap: 14px;

    padding: 10px 18px;

    background: linear-gradient(90deg, #06111b, #0a2538);
    border-bottom: 1px solid rgba(57, 190, 220, 0.35);

    position: relative;
    z-index: 100;

    overflow: visible;
}

/* SOL: LOGO + KULÜP ADI */
.site-header .logo-alani {
    display: flex;
    align-items: center;

    min-width: 0;
    gap: 20px;

    margin: 0;
}

.site-header .logo-alani img {
    width: 72px;
    height: 72px;

    object-fit: contain;

    flex-shrink: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;

    filter:
        drop-shadow(0 0 6px rgba(70, 180, 215, 0.22))
        drop-shadow(0 0 14px rgba(45, 135, 175, 0.12));
}

.site-header .kulup-adi {
    min-width: 0;
    margin: 0;
}

.site-header .kulup-adi h1 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;
    line-height: 1.08;
    letter-spacing: 1.2px;

    white-space: nowrap;
}

.site-header .kulup-adi span {
    display: block;

    margin-top: 5px;

    color: #35b8df;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;

    white-space: nowrap;
}

/* ORTA: ANA MENÜ */
.site-header .ana-menu {
    min-width: 0;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: clamp(6px, 0.75vw, 14px);

    margin: 0;
    padding: 0;

    flex-wrap: nowrap;
}

.site-header .ana-menu a {
    position: relative;

    display: inline-block;
    flex: 0 0 auto;

    margin: 0;
    padding: 12px 0 10px;

    color: #f5f8fa;

    text-decoration: none;

    font-size: clamp(9px, 0.72vw, 12px);
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    transition: color 0.2s ease;
}

.site-header .ana-menu a:hover {
    color: #37c5e8;
}

.site-header .ana-menu a::after {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;
    bottom: 2px;

    height: 2px;

    background: transparent;
    border-radius: 2px;

    transition: background 0.2s ease;
}

.site-header .ana-menu a:hover::after,
.site-header .ana-menu a.aktif::after {
    background: #c8171d;
}

/* SAĞ: PUANLAMA SİSTEMİ */
.site-header .puanlama-buton {
    justify-self: end;

    display: inline-block;

    margin: 0;
    padding: 11px 12px;

    color: #ffffff;
    background: #c8171d;

    border-radius: 7px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.site-header .puanlama-buton:hover {
    background: #e3242b;
    transform: translateY(-1px);
}

/* ORTA BOY LAPTOP */
@media (max-width: 1180px) {
    .site-header {
        grid-template-columns: minmax(225px, 250px) minmax(0, 1fr) 112px;
        column-gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .site-header .logo-alani {
        gap: 14px;
    }

    .site-header .logo-alani img {
        width: 62px;
        height: 62px;
    }

    .site-header .kulup-adi h1 {
        font-size: 17px;
    }

    .site-header .kulup-adi span {
        font-size: 9px;
        letter-spacing: 1.4px;
    }

    .site-header .ana-menu {
        gap: 6px;
    }

    .site-header .ana-menu a {
        font-size: 9px;
    }

    .site-header .puanlama-buton {
        padding: 10px 9px;
        font-size: 9px;
    }
}

/* TABLET / TELEFON:
   Menü ikinci satıra iner; masaüstü görünümü etkilenmez. */
@media (max-width: 980px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 8px;
    }

    .site-header .ana-menu {
        grid-column: 1 / -1;

        justify-content: center;
        flex-wrap: wrap;

        gap: 6px 18px;

        padding-top: 6px;
    }

    .site-header .ana-menu a {
        font-size: 10px;
    }
}

@media (max-width: 650px) {
    .site-header {
        padding: 10px 12px;
    }

    .site-header .logo-alani img {
        width: 56px;
        height: 56px;
    }

    .site-header .kulup-adi h1 {
        font-size: 16px;
    }

    .site-header .kulup-adi span {
        font-size: 9px;
    }

    .site-header .puanlama-buton {
        padding: 9px 10px;
        font-size: 9px;
    }
}
/* =====================================================
   TÜM SİTE - ORTAK FİLİGRAN VE DEKORASYON
===================================================== */

.kurumsal-sayfa,
.branslar-sayfa,
.antrenorler-sayfa,
.hakemler-sayfa,
.milli-sporcular-sayfa,
.iletisim-sayfa,
.haberler-sayfa {
    position: relative;
    overflow-x: hidden;
}


/* =========================================
   SOL TARAF - TAM BOY RENK GEÇİŞİ
========================================= */

.kurumsal-sayfa::before,
.branslar-sayfa::before,
.antrenorler-sayfa::before,
.hakemler-sayfa::before,
.milli-sporcular-sayfa::before,
.iletisim-sayfa::before,
.haberler-sayfa::before {
    content: "";

    position: fixed;

left: 0;
top: 0;
bottom: 0;

width: 4px;
height: auto;

    background: linear-gradient(
        to bottom,
        rgba(53, 184, 223, 0.85) 0%,
        rgba(53, 184, 223, 0.55) 30%,
        rgba(200, 23, 29, 0.55) 70%,
        rgba(200, 23, 29, 0.85) 100%
    );

    box-shadow:
        0 0 8px rgba(53, 184, 223, 0.25),
        0 0 14px rgba(200, 23, 29, 0.18);

    pointer-events: none;

    z-index: 60;
}


/* =========================================
   SAYFA GÖVDESİNDE BÜYÜK KULÜP FİLİGRANI
========================================= */

.kurumsal-sayfa::after,
.branslar-sayfa::after,
.antrenorler-sayfa::after,
.hakemler-sayfa::after,
.milli-sporcular-sayfa::after,
.iletisim-sayfa::after,
.haberler-sayfa::after {
    content: "";

    position: fixed;

    left: 50%;
    top: 62%;

    transform: translate(-50%, -50%);

    width: 620px;
    height: 620px;

    background-image: url("images/kocal-osmanli-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

opacity: 0.09;

    pointer-events: none;

    z-index: 0;
}


/* =========================================
   İÇERİK FİLİGRANIN ÜSTÜNDE KALSIN
========================================= */

.kurumsal-sayfa > *,
.branslar-sayfa > *,
.antrenorler-sayfa > *,
.hakemler-sayfa > *,
.milli-sporcular-sayfa > *,
.iletisim-sayfa > *,
.haberler-sayfa > * {
    position: relative;
    z-index: 1;
}


/* =========================================
   MOBİL
========================================= */

@media (max-width: 700px) {

    .kurumsal-sayfa::after,
    .branslar-sayfa::after,
    .antrenorler-sayfa::after,
    .hakemler-sayfa::after,
    .milli-sporcular-sayfa::after,
    .iletisim-sayfa::after,
    .haberler-sayfa::after {
        width: 360px;
        height: 360px;

        top: 58%;

        opacity: 0.025;
    }

}
/* =========================
   ANTRENÖRLER SAYFASI
   SOL DİKEY RENK ÇİZGİSİ
========================= */

.antrenorler-sayfa::before {
    content: "";
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;
    height: auto;

    background: linear-gradient(
        to bottom,
        rgba(53, 184, 223, 0.9) 0%,
        rgba(53, 184, 223, 0.55) 35%,
        rgba(200, 23, 29, 0.55) 70%,
        rgba(200, 23, 29, 0.9) 100%
    );

    transform: none !important;

    box-shadow:
        0 0 8px rgba(53, 184, 223, 0.25),
        0 0 14px rgba(200, 23, 29, 0.18);

    pointer-events: none;
    z-index: 9999;
}
/* =====================================================
   TÜM SAYFALAR - HERO / ŞERİT KANJI FİLİGRANI
===================================================== */

.kurumsal-hero,
.branslar-hero,
.antrenorler-hero,
.hakemler-hero,
.milli-sporcular-hero,
.iletisim-hero,
.haberler-hero {
    position: relative;
    overflow: hidden;
}

/* KANJI */
.kurumsal-hero::after,
.branslar-hero::after,
.antrenorler-hero::after,
.hakemler-hero::after,
.milli-sporcular-hero::after,
.iletisim-hero::after,
.haberler-hero::after {
    content: "";

    position: absolute;

    right: 6%;
    top: 50%;

    width: 110px;
    height: 130px;

    background-image: url("images/kyokushin-kan-kanji.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.65;

    transform: translateY(-50%);

    pointer-events: none;
    z-index: 0;
}

/* ŞERİTTEKİ YAZILAR KANJİNİN ÜSTÜNDE KALSIN */
.kurumsal-hero > *,
.branslar-hero > *,
.antrenorler-hero > *,
.hakemler-hero > *,
.milli-sporcular-hero > *,
.iletisim-hero > *,
.haberler-hero > * {
    position: relative;
    z-index: 1;
}
/* =========================================
   MİLLİ SPORCULAR - MOBİLDE 2 SÜTUN
========================================= */

@media (max-width: 700px) {

    .sporcu-tablolari {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;

        width: 94%;
        margin: 0 auto;
        padding: 18px 0 30px;
    }

    .sporcu-kart {
        padding: 12px;
        min-width: 0;
    }

    .sporcu-kart h3 {
        font-size: 15px;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .sporcu-kart li {
        font-size: 11px;
        line-height: 1.35;
        margin-bottom: 5px;
    }

    .sporcu-kart ul {
        padding-top: 10px;
    }
}
/* =========================================
   ANTRENÖRLER - MOBİL YATAY KART DÜZENİ
========================================= */

@media (max-width: 700px) {

    .antrenor-grid {
        display: flex;
        overflow-x: auto;
        gap: 12px;

        width: 100%;
        padding: 18px 16px 28px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .antrenor-kart {
        flex: 0 0 78%;
        max-width: 78%;

        scroll-snap-align: start;
    }

    .antrenor-grid::-webkit-scrollbar {
        display: none;
    }
}
/* =========================================
   MOBİL KAYDIRMA GÖSTERGESİ
========================================= */

.kaydirma-gostergesi {
    display: none;
}

@media (max-width: 700px) {

    .kaydirma-gostergesi {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;

        width: 100%;
        margin: 10px auto 25px;
    }

    .kaydirma-gostergesi span {
        display: block;
        width: 24px;
        height: 4px;

        background: rgba(255,255,255,0.25);
        border-radius: 10px;
    }

    .kaydirma-gostergesi span.aktif {
        background: #e0171d;
        box-shadow: 0 0 8px rgba(224,23,29,0.55);
    }
}
/* =========================================
   HAKEMLER - MOBİL KAYDIRMA GÖSTERGESİ
========================================= */

.hakem-kaydirma-gostergesi {
    display: none;
}

@media (max-width: 700px) {

    .hakem-kaydirma-gostergesi {
        display: flex;
        justify-content: center;
        align-items: center;

        gap: 7px;

        width: 100%;
        margin: 10px auto 25px;
    }

    .hakem-kaydirma-gostergesi span {
        display: block;

        width: 24px;
        height: 4px;

        background: rgba(255, 255, 255, 0.25);

        border-radius: 10px;
    }

    .hakem-kaydirma-gostergesi span.aktif {
        background: #e0171d;

        box-shadow:
            0 0 8px rgba(224, 23, 29, 0.55);
    }
}
/* =========================================
   HAKEMLER - MOBİL YATAY KART SİSTEMİ
========================================= */

@media (max-width: 768px) {

    .hakem-grid {
        display: flex !important;
        flex-direction: row !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        gap: 16px !important;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        padding-right: 70px !important;

        -webkit-overflow-scrolling: touch;
    }

    .hakem-kart {
        flex: 0 0 82% !important;
        width: 82% !important;
        min-width: 82% !important;

        scroll-snap-align: start;
    }

    .hakem-grid::-webkit-scrollbar {
        display: none;
    }

}
/* =========================================
   MASAÜSTÜNDE MOBİL MENÜYÜ GİZLE
========================================= */

.mobil-menu-logo {
    display: none;
}

.mobil-menu-ust {
    display: none;
}

.mobil-menu-arka {
    display: none;
}

.mobil-puanlama-link {
    display: none !important;
}
/* =========================================
   MOBİL MENÜ BUTONU
========================================= */

.mobil-menu-buton {
    display: none;
}

@media (max-width: 700px) {

    .mobil-menu-buton {
        display: flex;

        width: 42px;
        height: 42px;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 5px;

        background: linear-gradient(
            145deg,
            #8f1116,
            #c8171d
        );

        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 10px;

        cursor: pointer;

        box-shadow:
            0 6px 18px rgba(200, 23, 29, 0.25);
    }

    .mobil-menu-buton span {
        display: block;

        width: 22px;
        height: 3px;

        background: #ffffff;
        border-radius: 10px;
    }
}

/* =========================================
   MOBİL MENÜ - SON GÖRSEL TASARIM
========================================= */

@media (max-width: 700px) {

    /* PANELİN GENEL GÖRÜNÜMÜ */
    .ana-menu {
        background:
            linear-gradient(
                180deg,
                rgba(8, 31, 48, 0.98) 0%,
                rgba(55, 12, 25, 0.98) 35%,
                rgba(125, 10, 18, 0.98) 100%
            ) !important;

        border-left: 4px solid transparent !important;

        border-image:
            linear-gradient(
                to bottom,
                #35b8df 0%,
                #35b8df 30%,
                #e0171d 75%,
                #e0171d 100%
            ) 1 !important;

        box-shadow:
            -12px 0 32px rgba(0,0,0,0.38),
            -4px 0 18px rgba(53,184,223,0.10);

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* ÜSTTE LOGO + KULÜP ADI */
    .mobil-menu-logo {
        display: flex;
        align-items: center;
        gap: 10px;

        padding: 4px 4px 14px;
        margin-bottom: 6px;

        border-bottom:
            1px solid rgba(255,255,255,0.10);

        position: relative;
        z-index: 2;
    }

    .mobil-menu-logo img {
        width: 48px;
        height: 48px;

        object-fit: contain;

        flex-shrink: 0;
    }

    .mobil-menu-logo-yazi {
        display: flex;
        flex-direction: column;
    }

    .mobil-menu-logo-yazi strong {
        color: #ffffff;
        font-size: 15px;
        line-height: 1.1;
        letter-spacing: 0.4px;
    }

    .mobil-menu-logo-yazi span {
        margin-top: 4px;

        color: #35b8df;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.2px;
    }

    /* MENÜ SATIRLARI */
    .ana-menu > a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 44px !important;

        padding: 10px 12px !important;

        background:
            rgba(255,255,255,0.055) !important;

        border:
            1px solid rgba(255,255,255,0.08) !important;

        border-radius: 10px !important;

        color: #ffffff !important;

        font-size: 13px !important;
        font-weight: 700 !important;

        text-decoration: none !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.04);

        position: relative;
        z-index: 2;
    }

    .ana-menu > a:hover {
        background:
            rgba(255,255,255,0.10) !important;
    }

    /* İKONLAR */
    .menu-icon {
        display: inline-flex;

        width: 25px;
        min-width: 25px;

        align-items: center;
        justify-content: center;

        margin-right: 9px;

        color: #ffffff;

        font-size: 16px;
        font-weight: 700;
    }

    /* SAĞ OK */
    .ana-menu > a::after {
        content: "›";

        margin-left: auto;

        color: rgba(255,255,255,0.65);

        font-size: 20px;
        font-weight: bold;
    }

    /* AKTİF SAYFA */
    .ana-menu > a.aktif {
        background:
            linear-gradient(
                90deg,
                rgba(53,184,223,0.18),
                rgba(224,23,29,0.22)
            ) !important;

        border-color:
            rgba(255,255,255,0.16) !important;

        box-shadow:
            inset 3px 0 0 #35b8df !important;
    }

    /* PUANLAMA SİSTEMİ */
    .ana-menu .mobil-puanlama-link {
        display: flex !important;

        margin-top: 10px !important;

        background:
            linear-gradient(
                90deg,
                #0b69ad,
                #24a8d8,
                #e0171d
            ) !important;

        border:
            1px solid rgba(255,255,255,0.20) !important;

        color: #ffffff !important;

        box-shadow:
            0 7px 18px rgba(36,168,216,0.20);
    }

    .ana-menu .mobil-puanlama-link .menu-icon {
        color: #ffffff !important;
    }

.ana-menu::before {
    content: "極真館";

    position: absolute;

    right: 18px;
    top: 170px;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        "MS Mincho",
        serif;

    font-size: 72px;
    font-weight: 700;

    line-height: 1.05;

    writing-mode: vertical-rl;
    text-orientation: upright;

    color: rgba(255, 255, 255, 0.065);

    letter-spacing: 4px;

    pointer-events: none;

    z-index: 0;

    user-select: none;
}

    /* MENÜ İÇERİĞİ FİLİGRANIN ÜSTÜNDE KALSIN */
    .ana-menu > * {
        position: relative;
        z-index: 2;
    }
}
/* =========================================
   MOBİL MENÜ - TEK VE NİHAİ SÜRÜM
========================================= */

@media (max-width: 700px) {

    /* -----------------------------
       PANEL
    ----------------------------- */

    .ana-menu {
        display: flex !important;
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;

        width: 255px !important;
        max-width: 74vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        padding: 14px 10px 18px !important;

        flex-direction: column !important;
        gap: 7px !important;

        background:
            linear-gradient(
                180deg,
                rgba(6, 28, 45, 0.99) 0%,
                rgba(48, 15, 31, 0.99) 35%,
                rgba(118, 10, 20, 0.99) 100%
            ) !important;

        border-left: 4px solid transparent !important;

        border-image:
            linear-gradient(
                to bottom,
                #35b8df 0%,
                #35b8df 28%,
                #8d3c7c 52%,
                #e0171d 78%,
                #e0171d 100%
            ) 1 !important;

        box-shadow:
            -12px 0 30px rgba(0,0,0,0.40);

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;

box-sizing: border-box !important;

        z-index: 9998 !important;

        transform: translateX(105%) !important;
        transition: transform 0.28s ease !important;
    }

    .ana-menu.acik {
        transform: translateX(0) !important;
    }

    /* -----------------------------
       ÜST MARKA ALANI
    ----------------------------- */

    .mobil-menu-ust {
        display: flex;
        align-items: center;

        min-height: 58px;

        padding: 2px 58px 10px 2px;
        margin-bottom: 3px;

        border-bottom:
            1px solid rgba(255,255,255,0.10);

        flex-shrink: 0;
    }

    .mobil-menu-marka {
        display: flex;
        align-items: center;
        gap: 8px;

        min-width: 0;
    }

    .mobil-menu-marka img {
        width: 42px;
        height: 42px;

        object-fit: contain;
        flex-shrink: 0;
    }

    .mobil-menu-marka > div {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .mobil-menu-marka strong {
        color: #ffffff;

        font-size: 12px;
        line-height: 1.1;
        font-weight: 800;

        white-space: nowrap;
    }

    .mobil-menu-marka span {
        margin-top: 3px;

        color: #35b8df;

        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.7px;

        white-space: nowrap;
    }

    /* -----------------------------
       MENÜ SATIRLARI
    ----------------------------- */

    .ana-menu > a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 39px !important;

        padding: 8px 10px !important;

        background:
            rgba(255,255,255,0.055) !important;

        border:
            1px solid rgba(255,255,255,0.08) !important;

        border-radius: 9px !important;

        color: #ffffff !important;

        font-size: 12px !important;
        font-weight: 700 !important;

        text-decoration: none !important;

        flex-shrink: 0;
    }

    .ana-menu > a:hover {
        background:
            rgba(255,255,255,0.10) !important;
    }

    /* -----------------------------
       İKONLAR
    ----------------------------- */

    .menu-icon {
        display: inline-flex;

        width: 22px;
        min-width: 22px;

        align-items: center;
        justify-content: center;

        margin-right: 8px;

        color: #ffffff;

        font-size: 15px;
        font-weight: 700;
    }

    /* -----------------------------
       SAĞ OK
    ----------------------------- */

    .ana-menu > a::after {
        content: "›";

        margin-left: auto;

        color: rgba(255,255,255,0.68);

        font-size: 18px;
        font-weight: bold;
    }

    /* -----------------------------
       AKTİF SAYFA
    ----------------------------- */

    .ana-menu > a.aktif {
        background:
            linear-gradient(
                90deg,
                rgba(53,184,223,0.18),
                rgba(224,23,29,0.22)
            ) !important;

        border-color:
            rgba(255,255,255,0.14) !important;

        box-shadow:
            inset 3px 0 0 #35b8df !important;

        text-decoration: none !important;
    }

    /* -----------------------------
       PUANLAMA SİSTEMİ
    ----------------------------- */

    .puanlama-buton {
        display: none !important;
    }

    .ana-menu .mobil-puanlama-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        min-height: 42px !important;

        margin-bottom: 16px !important;
flex-shrink: 0 !important;

        margin-top: 7px !important;

        background:
            linear-gradient(
                90deg,
                #0b69ad 0%,
                #29b5df 48%,
                #e0171d 100%
            ) !important;

        border:
            1px solid rgba(255,255,255,0.20) !important;

        color: #ffffff !important;

        font-size: 12px !important;
        font-weight: 800 !important;

        box-shadow:
            0 7px 18px rgba(41,181,223,0.18);
    }

    /* -----------------------------
       FİLİGRAN
    ----------------------------- */

.ana-menu::before {
    content: "";

    position: absolute;

    left: 65%;
    top: 100px;

    width: 180px;
    height: 420px;

    transform: translateX(-50%);

    background:
        url("images/kyokushin-kan-kanji.png")
        center / contain
        no-repeat;

    opacity: 0.25;

    pointer-events: none;

    z-index: 1;
}

    .ana-menu > * {
        position: relative;
        z-index: 2;
    }

    /* -----------------------------
       HAMBURGER / X BUTONU
    ----------------------------- */

.mobil-menu-buton {
    position: fixed !important;
    top: 25px !important;
    right: 12px !important;
    z-index: 10000 !important;
}

    .mobil-menu-buton span {
        transition: 0.25s ease;
    }

    .mobil-menu-buton.acik span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobil-menu-buton.acik span:nth-child(2) {
        opacity: 0;
    }

    .mobil-menu-buton.acik span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}