@font-face {
    font-family: 'Oxanium';
    src: url('../Oxanium/Oxanium-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   T.O.K - TÜRKİYE OYUN KÜMELENMESİ DESIGN SYSTEM (Red & White Dominant)
   ========================================================================== */

:root {
    --tok-red: #e31826;
    --tok-red-dark: #b3101c;
    --tok-red-light: #fff2f3;
    --tok-red-glow: rgba(227, 24, 38, 0.15);
    --tok-white: #ffffff;
    --tok-light: #f8fafc;
    --tok-dark: #0f172a;
    --tok-text: #1e293b;
    --tok-text-muted: #64748b;
    --tok-border: #e2e8f0;
    --font-main: 'Oxanium', 'Chakra Petch', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(227, 24, 38, 0.1), 0 10px 10px -5px rgba(227, 24, 38, 0.04);
    /* Sabit navbar'ın gerçek yüksekliği — logo boyutu değişince BURASI güncellenir,
       main'in üst boşluğu ve hero yüksekliği bu değişkeni takip eder.
       Hesap: logo yüksekliği + nav dikey padding (2 x 0.5rem) + 1px alt çizgi. */
    --nav-height: 97px;
    /* Shared hero height — keeps every page's hero the same size (no jump between pages) */
    --hero-height: calc(100vh - var(--nav-height));
}

/* ===== Base Reset & Layout ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    background-color: var(--tok-white);
    color: var(--tok-text);
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    /* Sabit navbar'ın altında kalmasın + 29px nefes payı.
       Hero'lar bu 29px'i negatif margin ile geri alıp navbar'a yaslanıyor. */
    padding-top: calc(var(--nav-height) + 29px);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    font-weight: 700;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ===== Game Grid Backdrop (Subtle) ===== */
.grid-backdrop {
    background-size: 30px 30px;
    background-image: linear-gradient(to right, rgba(227, 24, 38, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(227, 24, 38, 0.02) 1px, transparent 1px);
}

/* ===== Utilities ===== */
.text-red {
    color: var(--tok-red);
}

.text-white {
    color: var(--tok-white);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.py-section {
    padding: 6rem 0;
}

/* Stacked content sections get a subtle divider line between them */
.py-section+.py-section {
    border-top: 1px solid var(--tok-border);
}

/* First content section after any hero — same spacing to the hero on every page */
.hero-section-inline+.py-section,
.page-hero-inline+.py-section {
    padding-top: 6rem;
}

.bg-light {
    background-color: var(--tok-light);
}

.bg-white {
    background-color: var(--tok-white);
}

.bg-dark {
    background-color: var(--tok-dark);
    color: var(--tok-white);
}

.font-mono {
    font-family: var(--font-mono);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Corporate Red Button */
.btn-primary {
    background-color: var(--tok-red);
    color: var(--tok-white);
    box-shadow: 0 4px 12px rgba(227, 24, 38, 0.2);
}

.btn-primary:hover {
    background-color: var(--tok-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(227, 24, 38, 0.35);
}

/* White Button */
.btn-secondary {
    background-color: var(--tok-white);
    color: var(--tok-red);
    box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
    background-color: var(--tok-red-light);
    transform: translateY(-2px);
}

/* Outline Button */
.btn-outline {
    background-color: transparent;
    color: var(--tok-red);
    border-color: var(--tok-red);
}

.btn-outline:hover {
    background-color: var(--tok-red);
    color: var(--tok-white);
    transform: translateY(-2px);
}

.btn-outline-white {
    background-color: transparent;
    color: var(--tok-white);
    border-color: var(--tok-white);
}

.btn-outline-white:hover {
    background-color: var(--tok-white);
    color: var(--tok-red);
    transform: translateY(-2px);
}

/* Glass Button */
.btn-glass {
    background: rgba(227, 24, 38, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--tok-white);
    transition: all 0.3s ease;
}

.btn-glass:hover {
    background: rgba(227, 24, 38, 0.5);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(227, 24, 38, 0.5);
    color: var(--tok-white);
}

/* Pixel Card Board Panel */
.tok-panel {
    background: var(--tok-white);
    border: 2px solid var(--tok-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
}

.tok-panel:hover {
    border-color: var(--tok-red);
    box-shadow: var(--shadow-md);
}

/* Red Accent Panel */
.tok-panel-red {
    background: var(--tok-white);
    border: 2px solid var(--tok-red);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

/* ===== Navbar ===== */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
    background: var(--tok-white);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid var(--tok-border);
}

nav.scrolled {
    background: var(--tok-white);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid var(--tok-border);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    /* Kurumsal Kimlik Kılavuzu s.8 — Yaklaşma Alanı: çerçeveli yatay
       amblem-logotaypın çevresindeki boşluk, çerçeve yüksekliğinin en az
       yarısı (1/2) olmalı. Çerçeve 63.4px -> 31.7px; 2rem = 32px. */
    gap: 2rem;
}

/* Kurumsal Kimlik Kılavuzu s.51 + s.53 ("iş birliklerinde de aynı kurallar
   geçerlidir"): yatay ortak logoların genişliği Bakanlık ARMA ÇAPININ İKİ
   KATINI aşamaz. Arma, çerçeve genişliğinin %17.77'si = 45.6px -> üst sınır
   91.1px genişlik. TOK logosunun oranı 2.523 olduğundan 36px yükseklik = 91px. */
.logo-img {
    height: 36px;
    width: auto;
    transition: var(--transition);
}

/* Header'daki T.C. Sanayi ve Teknoloji Bakanlığı logosu.
   Rehber §2.5 gereği Bakanlık sitesine bağlantı veriyor.
   Yükseklik --ministry-h ile ayarlanır, genişlik kaynağın oranından (553/425)
   türetilir; böylece tek sayı değiştirerek büyütüp küçültülebilir. */
.ministry-logo-link {
    --ministry-h: 80px;
    --ministry-w: calc(var(--ministry-h) * 1400 / 425);
    display: block;
    flex-shrink: 0;
    /* newbakanlik.png'in solunda %1 şeffaf pay var; negatif margin bunu geri
       alıyor ki .logo'daki gap (1rem) = gerçek görsel aralık olsun.
       LOGO DOSYASI DEĞİŞİRSE bu oran ve yukarıdaki 1400/425 yeniden ölçülmeli. */
    margin-left: calc(var(--ministry-w) * -0.01);
}

.ministry-logo {
    height: var(--ministry-h);
    width: var(--ministry-w);
    display: block;
}

nav.scrolled .logo-img {
    height: 36px;
}

/* Dar ekranlarda masaüstü boyutundaki logo çifti KATIL butonu ve hamburgerle
   birlikte satıra sığmıyor (390px'te 381px gerekiyor, 326px var). Logolar
   küçülüyor; --nav-height de küçüldüğü için main'in üst boşluğu ve hero
   yüksekliği kendiliğinden takip ediyor. */
@media (max-width: 768px) {
    :root {
        --nav-height: 87px;
    }

    /* Arma çapı bu ölçekte 40px -> TOK logosu en fazla 80px genişlik (s.51). */
    .logo-img,
    nav.scrolled .logo-img {
        height: 31px;
    }

    /* Kılavuz s.23: çerçeveli yatay logo en az 225px genişlikte basılabilir.
       Dar ekranda tam da bu alt sınıra iniyoruz (çerçeve 225px -> görsel 231px
       -> kutu yüksekliği 70.2px). Amblem-only sürüme düşmek YASAK (s.6, s.15). */
    .ministry-logo-link {
        /* Çerçeve 227.5px: 225px alt sınırının hemen üstünde, yuvarlama payıyla */
        --ministry-h: 71px;
    }

    /* Yaklaşma alanı: çerçeve yüksekliği 56.3px -> 28.1px */
    .logo {
        gap: 30px;
    }
}

/* ===== Telefon (<=576px) =====
   KATIL butonu header'dan menüye taşındı; açılan 96px sayesinde TOK ve Bakanlık
   logoları telefonda da aynı satırda, çerçeveli yatay logo asgari 225px (s.23)
   ölçüsünün üstünde kalarak duruyor. Logo hiçbir zaman sadece amblem olarak
   kullanılamadığı için (s.6, s.15) küçültme seçeneği yoktu.
   Menü içindeki KATIL butonu — masaüstünde gizli. */
.nav-cta-mobile {
    display: none;
}

@media (max-width: 576px) {
    :root {
        --nav-height: 56px;
    }

    /* KATIL header'dan menüye taşındı: 80px + 16px boşluk kazanıldı */
    .btn-nav {
        display: none;
    }

    /* Boyut ve yazı tipi diğer menü linkleriyle aynı (.nav-links a kuralından
       devralınır: 1.35rem / 700 / uppercase / 1.5px). Farkı kırmızı çerçevesi
       ve beyaz iç zemini. */
    .nav-links .nav-cta-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.5rem;
        padding: 1.1rem 3.5rem;
        border: 2px solid var(--tok-red);
        border-radius: 6px;
        background: var(--tok-white);
        color: var(--tok-red);
    }

    /* Dar ekranda navbar yan boşluğu 2rem -> 1rem: iki logonun aynı satıra
       sığması için gereken 32px buradan geliyor. */
    .nav-container {
        padding: 0 1rem;
    }

    .ministry-logo-link {
        display: block;
        --ministry-h: 71px;
    }

    /* Yaklaşma alanı 28.1px gerekiyor, yuvarlama payıyla 29px */
    .logo {
        gap: 29px;
    }

    /* Menü açıkken: kapatma (X) düğmesi tek başına sağ üstte, TOK ve Bakanlık
       logoları onun altındaki satırda yan yana. Aynı satırda dururlarsa X,
       Bakanlık logosunun üstüne biniyordu. */
    body.menu-open #navbar .nav-container {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 14px;
    }

    body.menu-open #navbar .nav-actions {
        position: static;
        transform: none;
        align-self: flex-end;
        /* DOM'da logodan sonra geliyor; sütun düzeninde üste alınıyor */
        order: -1;
    }

    body.menu-open #navbar .logo {
        flex-direction: row;
        justify-content: center;
        margin: 0;
    }

    /* İki satırlı başlık bloğu (X + logolar) ~140px yer kaplıyor; menü linkleri
       dikeyde ortalandığı için logonun üstüne biniyordu. Yaklaşma alanı
       (28.1px) dahil edilerek aşağı itiliyor. */
    body.menu-open #navbar .nav-links {
        padding-top: 180px;
    }

}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Bakanlık kilidi 384px'lik bir logo grubu yaratıyor; 6 link + KATIL ile
       birlikte 1136px'lik kapsayıcıda 2rem aralıkla nefes payı kalmıyordu. */
    gap: 1.5rem;
    flex: 1;
    /* Simetrik marj: solda s.8 yaklaşma alanını (>=31.7px) garantiler,
       sağda da KATIL butonuna yapışmayı önler. */
    margin: 0 2rem;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tok-text);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--tok-red);
}

.nav-links a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--tok-red);
    transition: var(--transition);
}

.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after {
    width: 100%;
}

.hamburger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--tok-text);
}

/* ===== Hero Section ===== */
.hero {
    min-height: 90vh;
    padding: 8rem 0 4rem;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--tok-red-light) 0%, var(--tok-white) 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--tok-dark);
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--tok-text-muted);
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Large Floating Badge */
.hero-badge-container {
    width: 100%;
    max-width: 360px;
    padding: 2.5rem;
    background: var(--tok-white);
    border: 3px solid var(--tok-red);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(227, 24, 38, 0.12);
    position: relative;
    animation: float 6s ease-in-out infinite;
}

.hero-badge-container::after {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px dashed var(--tok-red);
    border-radius: 16px;
    z-index: -1;
    opacity: 0.5;
}

.hero-badge-logo {
    width: 100%;
    margin-bottom: 1.5rem;
}

.hero-badge-desc {
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--tok-red);
    letter-spacing: 1px;
}

/* Sub-partner logo strip */
.partner-strip {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 4rem;
    opacity: 0.8;
}

.partner-logo-mini {
    height: 35px;
    filter: grayscale(1);
    transition: var(--transition);
}

.partner-logo-mini:hover {
    filter: grayscale(0);
}

/* ===== Stats Banner ===== */
.stats-section {
    padding: 3rem 0;
    background: var(--tok-red);
    color: var(--tok-white);
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat-item h3 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
    font-family: var(--font-mono);
}

.stat-item p {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
}

/* ===== Section Header Layout ===== */
.section-header {
    text-align: left;
    margin-bottom: 4rem;
}

.section-header.text-left {
    text-align: left;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--tok-red);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.section-desc {
    color: var(--tok-text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0;
}

.section-header.text-left .section-desc {
    margin: 0;
}

/* ===== Hakkımızda Section ===== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: stretch;
}

.about-card {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--tok-dark);
}

.about-card p {
    color: var(--tok-text-muted);
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.about-accent-box {
    background: var(--tok-red-light);
    border-left: 4px solid var(--tok-red);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
}

.about-accent-box p {
    margin: 0;
    font-style: italic;
    color: var(--tok-red-dark);
    font-weight: 600;
}

/* ===== Chronology (Timeline) ===== */
.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.timeline-container::before {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--tok-border);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-node {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    opacity: 0.85;
    transition: var(--transition);
}

.timeline-node:hover {
    opacity: 1;
}

.timeline-node::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: var(--tok-white);
    border: 4px solid var(--tok-red);
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: 1;
    transition: var(--transition);
}

.timeline-node:hover::after {
    background-color: var(--tok-red);
    transform: translateY(-50%) scale(1.2);
}

.timeline-left {
    left: 0;
}

.timeline-right {
    left: 50%;
}

.timeline-right::after {
    left: -10px;
}

.timeline-content {
    padding: 1.5rem;
    background-color: var(--tok-white);
    position: relative;
    border-radius: 6px;
    border: 2px solid var(--tok-border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.timeline-node:hover .timeline-content {
    border-color: var(--tok-red);
    box-shadow: var(--shadow-md);
}

.timeline-date {
    font-family: var(--font-mono);
    color: var(--tok-red);
    font-weight: 900;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.timeline-content h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
}

.timeline-content p {
    color: var(--tok-text-muted);
    font-size: 0.9rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, margin-top 0.4s ease-in-out;
}

.timeline-content.active p {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.5rem;
}

.timeline-icon-expand {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    color: var(--tok-text-muted);
    font-size: 0.8rem;
    transition: var(--transition);
}

.timeline-content.active .timeline-icon-expand {
    transform: rotate(180deg);
    color: var(--tok-red);
}

/* ===== 5-Year Roadmap ===== */
.roadmap-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.roadmap-tab-btn {
    padding: 0.8rem 1.8rem;
    background: var(--tok-light);
    border: 2px solid var(--tok-border);
    border-radius: 6px;
    font-weight: 700;
    font-family: 'Oxanium', 'Chakra Petch', sans-serif;
    color: var(--tok-text);
    cursor: pointer;
    transition: var(--transition);
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* Masaüstünde hover ile doldur; dokunmatik cihazlarda "yapışan hover" olmasın diye hover:hover ile sınırlı */
@media (hover: hover) {
    .roadmap-tab-btn:hover {
        background: var(--tok-red);
        border-color: var(--tok-red);
        color: var(--tok-white);
    }
}

/* Basma anı (mobil dahil) — beyaz text */
.roadmap-tab-btn:active {
    background: var(--tok-red);
    border-color: var(--tok-red);
    color: var(--tok-white);
}

.roadmap-tab-btn.active {
    background: var(--tok-red);
    border-color: var(--tok-red);
    color: var(--tok-white);
    box-shadow: 0 4px 12px rgba(227, 24, 38, 0.2);
}

.roadmap-display {
    max-width: none;
    margin: 0;
    background: var(--tok-white);
    border: 2px solid var(--tok-red);
    border-radius: 12px;
    padding: 3rem;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.roadmap-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--tok-red);
    border-radius: 12px 12px 0 0;
}

.roadmap-view {
    display: none;
}

.roadmap-view.active {
    display: block;
    animation: fadeIn 0.4s ease forwards;
}

.roadmap-view-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.roadmap-year-badge {
    padding: 0.5rem 1.2rem;
    background: var(--tok-red-light);
    color: var(--tok-red);
    border-radius: 4px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.roadmap-view-header h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--tok-red);
}

.roadmap-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.roadmap-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--tok-light);
    border-radius: 6px;
}

.roadmap-list li i {
    color: var(--tok-red);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* ===== Yol Haritası — Mobil Uyum ===== */
@media (max-width: 768px) {
    .roadmap-display {
        padding: 1.75rem 1.5rem;
    }

    .roadmap-view-header {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .roadmap-view-header h3 {
        font-size: 1.4rem;
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

@media (max-width: 600px) {
    .roadmap-tabs {
        gap: 0.5rem;
        margin-bottom: 2rem;
    }

    .roadmap-tab-btn {
        padding: 0.55rem 0.9rem;
        font-size: 0.85rem;
        border-width: 1.5px;
    }

    .roadmap-display {
        padding: 1.5rem 1.15rem;
        border-radius: 10px;
    }

    /* Rozet ve başlığı alt alta al, başlık tam genişlik kullansın */
    .roadmap-view-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .roadmap-view-header h3 {
        font-size: 1.25rem;
        hyphens: auto;
    }

    .roadmap-list li {
        padding: 0.85rem;
    }
}

/* ===== Etkinlikler Controls ===== */
.events-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.event-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--tok-border);
    background: var(--tok-white);
    color: var(--tok-text-light);
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--tok-red);
    color: var(--tok-red);
}

.filter-btn.active {
    background: var(--tok-red);
    color: var(--tok-white);
    border-color: var(--tok-red);
}

.event-search {
    position: relative;
    flex-grow: 1;
}

.event-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tok-text-light);
}

.event-search input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border: 1px solid var(--tok-border);
    border-radius: 30px;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.event-search input:focus {
    border-color: var(--tok-red);
}

/* ===== Etkinlikler Grid ===== */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tok-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--tok-border);
}

.event-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
}

.event-arrow-link {
    color: var(--tok-red);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.event-arrow-link:hover {
    transform: translateX(5px);
    background: transparent;
}

/* Event Action Button (Capsule Style) */
.event-actions .btn {
    border-radius: 50px;
    background-color: var(--tok-red);
    color: var(--tok-white);
    border: 2px solid var(--tok-red);
    box-shadow: 0 2px 4px rgba(227, 24, 38, 0.2);
    padding: 0.5rem 1.5rem;
}

.event-actions .btn:hover {
    background-color: var(--tok-white);
    color: var(--tok-red);
}

.event-category-label {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    padding: 0.3rem 0.8rem;
    background: transparent;
    color: var(--tok-red);
    border: 1px solid var(--tok-red);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--tok-red-glow);
}

.event-date-simple {
    color: var(--tok-red);
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.meta-item {
    display: block;
    margin-bottom: 0.4rem;
}

.event-details {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.event-details h3 {
    color: var(--tok-dark);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.event-meta {
    font-size: 0.85rem;
    color: var(--tok-red);
    margin-bottom: 1rem;
    font-weight: 600;
}

.event-meta i {
    margin-right: 0.3rem;
}

.event-details p:not(.event-meta) {
    color: var(--tok-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--tok-red);
    color: var(--tok-red);
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    transition: var(--transition);
    text-decoration: none;
    cursor: pointer;
}

.btn-outline-primary:hover {
    background: var(--tok-red);
    color: var(--tok-white);
}

/* ===== İletişim / Kümelenme Formu ===== */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.team-card {
    padding: 2rem;
    text-align: center;
}

.team-avatar {
    width: 80px;
    height: 80px;
    background: var(--tok-red-light);
    color: var(--tok-red);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    border: 2px dashed var(--tok-red);
}

.team-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}

.team-role {
    font-weight: 700;
    color: var(--tok-red);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.8rem;
}

.team-inst {
    color: var(--tok-text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ===== Character Creator (Üyelik Formu) ===== */
.character-creator-section {
    background: var(--tok-white);
    color: var(--tok-text);
    position: relative;
}

.character-creator-section .section-title {
    color: var(--tok-red);
}

/* ===== Simple Form Layout (Katıl) ===== */
.simple-form-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .simple-form-grid {
        grid-template-columns: 1fr;
    }
}

.simple-form-card {
    background: var(--tok-white);
    border: 1px solid var(--tok-border);
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.row-group {
    margin-bottom: 2rem;
}

.radio-group {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.radio-btn {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.radio-btn input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-btn span {
    display: block;
    text-align: center;
    padding: 0.8rem 1rem;
    border: 1px solid var(--tok-border);
    border-radius: 4px;
    font-weight: 700;
    color: var(--tok-text-muted);
    transition: all 0.2s ease;
}

.radio-btn:hover span {
    border-color: var(--tok-dark);
}

.radio-btn input:checked+span {
    border-color: var(--tok-red);
    color: var(--tok-red);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--tok-text-muted);
    text-transform: uppercase;
}

.form-input {
    width: 100%;
    padding: 1rem 1.2rem;
    background: var(--tok-white);
    border: 1px solid var(--tok-border);
    border-radius: 4px;
    color: var(--tok-text);
    font-family: var(--font-main);
    font-size: 1rem;
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--tok-red);
}

.form-row {
    display: flex;
    gap: 1.5rem;
}

.half-width {
    flex: 1;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

.checkbox-group {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.custom-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--tok-text);
}

.custom-checkbox-label input {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    accent-color: var(--tok-red);
}

.simple-info-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    background: var(--tok-white);
    border: 1px solid var(--tok-border);
    padding: 2.5rem;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    margin-bottom: 1rem;
    color: var(--tok-text-muted);
    font-size: 1.05rem;
}

.timeline {
    position: relative;
    border-left: 2px solid var(--tok-red);
    margin-left: 1rem;
    padding-left: 1.5rem;
    margin-top: 1rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: calc(-1.5rem - 7px);
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    background: var(--tok-red);
    transform: rotate(45deg);
}

.timeline-step {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--tok-red);
    margin-bottom: 0.2rem;
}

.timeline-title {
    font-size: 1.1rem;
}

.disclaimer-box {
    background: #fff9f5;
    border-left: 4px solid #c98d63;
    padding: 1.5rem;
    font-size: 0.9rem;
    color: #666;
    margin-top: auto;
}

/* ===== Footer ===== */
.footer {
    background: #000000;
    color: var(--tok-white);
    padding: 5rem 0 2rem;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 3rem;
    margin-bottom: 4rem;
    align-items: start;
}

.footer-brand {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-brand h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 800;
}

.footer-logo {
    height: 60px;
    width: auto;
    max-width: 100%;
    display: block;
    margin-bottom: 1rem;
}

.footer-name {
    color: var(--tok-white);
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.footer-program {
    color: var(--tok-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    max-width: 32ch;
}

.footer-entertech {
    color: var(--tok-red);
    font-weight: 700;
    font-family: var(--font-main);
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: block;
}

.footer-socials {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.footer-socials a {
    font-size: 1.8rem;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.footer-socials a.social-linkedin {
    background-color: #0a66c2;
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12%;
}

.footer-socials a.social-instagram {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-socials a.social-linkedin .fa-linkedin-in {
    font-size: 1.5rem;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}

.footer-socials a.social-instagram .fa-instagram {
    font-size: 2.7rem; /* To visually match the 2.5rem box of LinkedIn */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-socials a:hover {
    transform: scale(1.15);
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.4));
}

.footer-logo-strip {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.footer-logo-mini {
    height: 40px;
    opacity: 0.6;
    transition: var(--transition);
}

.footer-logo-mini:hover {
    opacity: 1;
}

.footer-links h3,
.footer-legal h3,
.footer-contact h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    font-weight: 800;
    color: var(--tok-red) !important;
}

.footer-links ul li,
.footer-legal ul li {
    margin-bottom: 0.8rem;
}

.footer-links a,
.footer-legal a {
    color: var(--tok-text-muted);
}

.footer-links a:hover,
.footer-legal a:hover {
    color: var(--tok-red);
    padding-left: 4px;
}

.footer-contact p {
    color: var(--tok-text-muted);
    margin-bottom: 1rem;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.footer-contact p i {
    color: var(--tok-white);
    margin-top: 0.25rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tok-white);
}

.social-links a:hover {
    background: var(--tok-red);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--tok-text-muted);
    font-size: 0.85rem;
}

.footer-program a {
    color: inherit;
    text-decoration: underline;
}

.footer-program a:hover {
    color: var(--tok-red);
}

/* Bakanlık kaynaklı zorunlu şerh — font, boyut ve ölçü telif satırıyla aynı
   (.footer-bottom'dan devralınır); rengi ise tam beyaz, öne çıksın diye.
   Ayırıcı çizgi border-top ile veriliyor (HTML'e ek eleman gerekmiyor) ve
   üstündeki footer-bottom çizgisiyle aynı tonda; boşluklar çizginin iki
   yanında eşit. */
.footer-disclaimer {
    /* Negatif yatay margin, çizgiyi footer-bottom'ın padding kutusunun dışına
       taşıyor ki üstteki çizgiyle birebir aynı genişlikte olsun; aynı ölçüdeki
       padding ise metni tekrar sütun hizasına geri çekiyor. */
    margin: 1.5rem -2rem 0;
    padding: 1.5rem 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--tok-white);
    text-align: left;
}

/* ===== Keyframes ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        height: 0;
    }

    to {
        opacity: 1;
        height: auto;
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ===== Hero Inline Replacements (Desktop First) ===== */
.hero-section-inline {
    padding: 0;
    margin-top: -29px;
    min-height: var(--hero-height);
    display: block;
}

.hero-video-container {
    width: 100vw;
    height: var(--hero-height);
    position: relative;
    overflow: hidden;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Legibility scrim: darkens the bottom where the hero text sits */
.hero-video-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 32%, rgba(0, 0, 0, 0) 58%);
    z-index: 5;
    pointer-events: none;
}

.hero-logo-inline {
    position: absolute;
    top: 2rem;
    left: 1.2rem;
    z-index: 10;
    width: auto;
    max-height: 77px;
}

.hero-text-inline {
    position: absolute;
    bottom: clamp(1.5rem, 5vh, 3rem);
    left: clamp(1.25rem, 6vw, 8rem);
    z-index: 10;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.9rem, 2.2vh, 1.6rem);
    max-width: min(640px, calc(100vw - 2.5rem));
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

@media (max-width: 992px) {
    .hero-text-inline {
        bottom: 5rem;
    }
}

@media (max-width: 768px) {
    .hero-text-inline {
        bottom: 6rem;
    }
}

@media (max-width: 576px) {
    .hero-text-inline {
        bottom: 5rem;
    }
}

.hero-content-inline {
    display: none;
}

.hero-title-inline {
    font-family: var(--font-main);
    font-size: clamp(2rem, 5.5vw, 3.3rem);
    line-height: 1.04;
    display: flex;
    flex-direction: column;
    gap: clamp(0.2rem, 1vw, 0.6rem);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-subtitle-inline {
    font-family: var(--font-main);
    font-size: clamp(0.95rem, 2.2vw, 1.25rem);
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 0;
}

.hero-icons-inline {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 1.35rem;
    -webkit-text-stroke: 0.4px white;
}

.hero-buttons-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 100%;
}

.hero-buttons-inline .btn {
    flex: 0 1 auto;
    white-space: nowrap;
}



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

/* Page Heroes (Hakkımızda, Etkinlikler, Haberler) */
.page-hero-inline {
    padding: 0;
    margin: 0;
    margin-top: -29px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

.page-hero-img-inline {
    width: 100%;
    height: var(--hero-height);
    object-fit: cover;
    display: block;
}

.cultural-impact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
}

/* ===== Media Queries ===== */
/* Contact Page Styles */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 5rem;
}

.contact-info-card {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--tok-dark);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-item i {
    width: 50px;
    height: 50px;
    background: var(--tok-red-light);
    color: var(--tok-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.contact-item-text h4 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tok-text-muted);
    margin-bottom: 0.2rem;
}

.contact-item-text p {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tok-text);
}

.map-box {
    border: 2px solid var(--tok-border);
    border-radius: 12px;
    overflow: hidden;
    height: 350px;
    background: var(--tok-light);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--tok-text-muted);
    text-align: center;
    padding: 2rem;
}

@media (max-width: 992px) {
    /* Homepage video hero keeps its full-bleed cover behaviour at every
       width — base styles handle the responsive scaling via clamp(). */

    /* Page hero now inherits desktop styles (fullscreen width/height) to match index.html on mobile */


    .hero-logo-inline {
        position: absolute;
        top: 2%;
        left: 4%;
        height: 10%;
        max-height: 35px;
        z-index: 10;
    }

    .hero-content-inline {
        position: absolute;
        top: auto;
        left: calc((100% - 90%) / 2);
        width: 90%;
        padding: 0;
        z-index: 10;
        gap: 0.5vw;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .hero-icons-inline {
        font-size: clamp(0.4rem, 1.6vw, 0.8rem);
        gap: 1vw;
        margin-top: 0;
        margin-bottom: auto;
    }

    .hero-icons-inline span {
        font-size: clamp(0.4rem, 1.6vw, 0.8rem) !important;
    }

    .cultural-impact-grid {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-grid,
    .about-grid,
    .dashboard-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-visual {
        justify-content: center;
    }

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

    .footer-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* Hamburger eşiği. 6 nav linki + logo çifti + KATIL butonu yatayda ancak
   ~1181px'te sığıyor (newbakanlik.png yazı kilitli olduğu için logo grubu 388px).
   Eşik düşük kalırsa aradaki genişliklerde linkler ve buton ekran dışına taşıyor.
   LOGO DEĞİŞİRSE bu eşik yeniden ölçülmeli. */
@media (max-width: 1200px) {

    /* Mobile Menu - Light Theme */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #ffffff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 999;
        gap: 2rem;
        padding-top: 0;
        margin: 0;
        transition: right 0.4s ease;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        display: block;
        flex: none;
        width: auto;
        border-bottom: none;
        color: var(--tok-text-muted);
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-align: center;
        text-transform: uppercase;
        padding: 0;
    }

    .nav-links a.active,
    .nav-links a:hover {
        color: var(--tok-red);
    }

    .nav-links a::after {
        display: none !important;
    }

    .hamburger {
        display: block;
        z-index: 1001;
    }

    /* Menu Open Navbar Styling (Boxed Logo & Close) */
    body.menu-open #navbar {
        background: transparent !important;
        box-shadow: none !important;
    }

    body.menu-open .nav-container {
        /* Removed border since .nav-links covers it anyway, a clean layout is better */
        margin-top: 15px;
        padding: 10px 20px;
        position: relative;
        display: flex;
        justify-content: center;
    }

    body.menu-open .logo {
        margin: 0 auto;
        position: relative;
        z-index: 1002;
        /* Force logo to appear ABOVE the white menu background */
    }

    /* Menü açıkken logolar büyütülmüyor. Tek logo varken scale(1.25) mantıklıydı;
       yan yana iki logo varken transform layout'u itmediği için ikisi birbirinin
       üstüne biniyordu. */
    body.menu-open .logo img {
        transform: none;
    }

    body.menu-open .nav-actions {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1002;
        /* Force hamburger/X to appear ABOVE the white menu background */
    }

    body.menu-open .btn-nav {
        display: none;
    }

    body.menu-open .hamburger i {
        color: var(--tok-red);
        font-size: 1.8rem;
    }

    body.menu-open .hamburger {
        border: none !important;
        outline: none !important;
        background: transparent !important;
    }
}

@media (max-width: 768px) {

    .timeline-container::before {
        left: 40px;
    }

    .timeline-node {
        width: 100%;
        padding-left: 80px;
        padding-right: 0;
    }

    .timeline-node::after {
        left: 30px;
        right: auto;
    }

    .timeline-right {
        left: 0;
    }

    .timeline-right::after {
        left: 30px;
    }

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

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

    .event-card {
        flex-direction: column;
    }

    .event-date {
        padding: 1rem;
        flex-direction: row;
        gap: 1rem;
    }

    .event-date .day {
        font-size: 2rem;
    }

    .event-date .month {
        margin-top: 0;
        font-size: 1.2rem;
    }

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

    .footer-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-logo {
        height: 52px;
    }

    /* Contact Page Mobile Overrides */
    .contact-grid {
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .contact-info-card {
        padding: 1.5rem;
    }

    .contact-info-card h3 {
        font-size: 1.5rem;
    }

    .contact-item-text p {
        word-break: break-word;
        font-size: 0.95rem;
    }

    .map-box {
        padding: 1rem;
        height: 250px;
    }
}

/* Fade Up Animation */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Members (Üyeler) Page Styles - Bentley Style Layout
   ========================================================================== */

.members-hero-focus {
    width: 100% !important;
    height: var(--hero-height) !important;
    object-fit: cover !important;
    object-position: center center !important;
}
@media (max-width: 992px) {
    .members-hero-focus {
        object-position: 15% 50% !important;
    }
}
@media (max-width: 576px) {
    .members-hero-focus {
        object-position: 20% 50% !important;
    }
}

.members-hero-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 100%;
    pointer-events: none;
}
.members-hero-title {
    font-family: var(--font-main);
    font-size: clamp(2.4rem, 6.6vw, 4rem) !important;
    font-weight: 400;
    line-height: 1.04;
    color: var(--tok-white);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem 1.25rem;
    margin-bottom: 5rem;
    justify-items: center;
}
@media (max-width: 1200px) {
    .members-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem 1rem;
    }
}
@media (max-width: 992px) {
    .members-hero-overlay {
        top: 50%;
    }
    .members-hero-title {
        font-size: clamp(2rem, 6vw, 3rem) !important;
    }
}
@media (max-width: 768px) {
    .members-hero-overlay {
        top: 50%;
    }
    .members-hero-title {
        font-size: clamp(1.6rem, 6.5vw, 2.4rem) !important;
        letter-spacing: 1.5px;
    }
    .members-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem 1rem;
        margin-bottom: 3.5rem;
    }
    .member-logo-box {
        max-width: 150px;
        padding: 0.85rem;
        border-radius: 14px;
    }
    .member-name {
        font-size: 0.8rem;
        margin-top: 0.6rem;
        max-width: 150px;
    }
}
@media (max-width: 576px) {
    .members-hero-overlay {
        top: 50%;
    }
    .members-hero-title {
        font-size: clamp(1.4rem, 7vw, 2rem) !important;
        letter-spacing: 1px;
    }
    .members-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 0.75rem;
        margin-bottom: 2.5rem;
    }
    .member-logo-box {
        max-width: 140px;
        padding: 0.75rem;
        border-radius: 12px;
    }
    .member-name {
        font-size: 0.76rem;
        margin-top: 0.5rem;
        line-height: 1.28;
        max-width: 140px;
    }
}

.member-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.member-logo-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 170px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.member-item:hover .member-logo-box {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.member-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
    z-index: 2;
}

.member-item:hover .member-logo {
    transform: scale(1.06);
}

.member-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.member-logo-fallback .fallback-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(229, 9, 20, 0.08);
    color: var(--tok-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.member-item:hover .member-logo-fallback .fallback-icon {
    background: var(--tok-red);
    color: var(--tok-white);
    transform: rotate(-5deg) scale(1.1);
}

.member-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0.75rem;
    line-height: 1.35;
    transition: color 0.3s ease;
    display: block;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 170px;
}

.member-item:hover .member-name {
    color: var(--tok-red);
}