/* ========================================
   RESET & BASE STYLES
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* 🎨 VIBRANT & LIGHT PALETTE (Energetic & Welcoming) */
    
    /* Ana Zeminler */
    --bg-main: #F8FAFC; /* Slate 50 - Çok açık, temiz zemin */
    --bg-body: linear-gradient(180deg, #F0F9FF 0%, #E0F2FE 100%); /* Sky 50 to Sky 100 - Aydınlık gökyüzü/su */
    --bg-surface: #ffffff; /* Beyaz - Kartlar ve yüzeyler için */
    --bg-glass: rgba(255, 255, 255, 0.85); /* Daha şeffaf, buzlu cam */
    
    /* Metin Renkleri (Otoriter ve Okunabilir) */
    --text-main: #0F172A; /* Slate 900 - Koyu ama siyah değil */
    --text-muted: #475569; /* Slate 600 - Yumuşak gri */
    --text-dark: #020617; /* Slate 950 */
    
    /* Vurgu ve Marka Renkleri (Satış Odaklı) */
    --primary-color: #0EA5E9; /* Sky 500 - Canlı, açık mavi */
    --primary-gradient: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%); /* Sky to Blue - Enerjik geçiş */
    --accent-silver: #F1F5F9; /* Slate 100 */
    
    /* Yapısal Elementler */
    --border-subtle: 1px solid rgba(14, 165, 233, 0.15); /* Sky renginde hafif kenarlık */
    --border-light: 1px solid rgba(14, 165, 233, 0.25);
    
    /* Gölgeler ve Efektler */
    --shadow-sm: 0 2px 4px rgba(14, 165, 233, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(14, 165, 233, 0.1), 0 2px 4px -1px rgba(14, 165, 233, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(14, 165, 233, 0.1), 0 4px 6px -2px rgba(14, 165, 233, 0.05);
    --glass-blur: blur(16px);
    
    --sky-water-gradient: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    display: block !important; /* Flex yapısını engelle */
    font-family: 'Inter', 'Manrope', sans-serif; /* Modern Sans-Serif */
    line-height: 1.6;
    color: var(--text-main);
    background: var(--bg-body); /* AliceBlue Gradyan */
    letter-spacing: 0.01em;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* 🌊 CANLI SU EFEKTİ (Interactive Water Background) */
canvas#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Her şeyin arkasında */
    background: var(--bg-body);
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
}

.section-sky {
    background: var(--sky-water-gradient);
    color: var(--text-body); /* Açık zemin üzerinde koyu yazı */
}

.section-deep {
    background: var(--ocean-gradient);
    color: white;
    position: relative;
    overflow: hidden;
}

.section-deep::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(127, 219, 255, 0.12), transparent 45%),
                radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.15), transparent 40%);
    pointer-events: none;
}

.section-deep .section-title,
.section-deep .section-subtitle {
    color: white;
}

.section-deep .section-title::after {
    background: linear-gradient(135deg, var(--light-aqua), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    box-shadow: none;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
}

.section-deep .section-subtitle {
    color: rgba(255, 255, 255, 0.78);
}

h1, h2, h3, h4 {
    color: inherit; /* Ebeveyn rengini al */
    font-weight: 800;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1.5rem;
    max-width: 800px; /* Okuma kolaylığı için satır genişliği sınırı */
    font-size: 1.05rem;
    color: var(--text-muted);
}

/* ========================================
   HEADER & NAVIGATION
======================================== */
/* GENEL HEADER STİLLERİ (Mobil Öncelikli) */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    z-index: 1000;
    transition: var(--transition);
    padding-top: 15px;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.95); /* Beyaz ve ferah header */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid rgba(14, 165, 233, 0.1);
    padding-top: 0;
}

.header.scrolled .logo span {
    color: var(--primary-color); /* Logo yazısı mavi olur */
}

.header.scrolled .nav-link {
    color: var(--text-main); /* Linkler koyu renk olur */
}

.header.scrolled .nav-link:hover {
    color: var(--primary-color);
    background: rgba(14, 165, 233, 0.1);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* YENİ LOGO TASARIMI */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo:hover {
    transform: scale(1.05);
}

.logo:active {
    transform: scale(0.95);
}

.logo i {
    font-size: 2rem;
    color: var(--primary-color);
}

.logo span {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* MENÜ LİNKLERİ */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.4rem; /* Boşluk azaltıldı */
    align-items: center;
    margin: 0;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: var(--transition);
    padding: 6px 10px; /* İç boşluk azaltıldı */
    border-radius: 8px;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.nav-link:hover {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.header-social {
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
}

.instagram-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    border-radius: 50%; /* Yuvarlak daha modern */
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
}

.header.scrolled .instagram-link {
    /* Scroll olunca değişmesine gerek yok, gradient kalsın */
}

/* Şehirler Dropdown */
.nav-cities-dropdown {
    position: relative;
}

.nav-cities-dropdown .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-cities-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 10px 0;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    border: var(--border-subtle);
}

.nav-cities-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 6px;
    margin: 0 8px;
}

.dropdown-menu a:hover {
    background: rgba(0, 86, 210, 0.08);
    color: var(--text-main);
    padding-left: 25px;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.header.scrolled .hamburger span {
    background: var(--text-main);
}

/* ========================================
   HERO SECTION
======================================== */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=1920') center/cover;
    opacity: 0.15; /* Daha az opak, daha clean */
    animation: heroZoom 25s ease-in-out infinite alternate;
    filter: brightness(0.9) contrast(1.1);
    pointer-events: none;
}

@keyframes heroZoom {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.15) rotate(1deg); }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.4) 0%, rgba(240, 249, 255, 0.9) 100%);
}

/* Underwater Light Rays */
.hero-overlay::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.03) 50%, transparent 70%);
    animation: lightRays 15s ease-in-out infinite;
}

@keyframes lightRays {
    0%, 100% {
        transform: translateX(0) translateY(0);
        opacity: 0.3;
    }
    50% {
        transform: translateX(10%) translateY(10%);
        opacity: 0.6;
    }
}

/* Swimming Person Animation - REALISTIC & PROFESSIONAL */
.swimming-person {
    position: absolute;
    bottom: 18%;
    left: -350px;
    width: 300px;
    height: 120px;
    z-index: 2;
    animation: swim 18s linear infinite;
    pointer-events: none;
    filter: drop-shadow(0 15px 25px rgba(0, 60, 90, 0.2));
}

.swimmer {
    position: relative;
    width: 100%;
    height: 100%;
    transform: scale(1.1);
}

.swimmer-body {
    position: absolute;
    width: 90px;
    height: 32px;
    background: linear-gradient(135deg, #0056D2, #0044A5); /* Kurumsal mayo rengi */
    border-radius: 15px 40px 40px 20px;
    top: 40px;
    left: 80px;
    transform-origin: center;
    animation: bodyRoll 1.6s ease-in-out infinite;
    z-index: 2;
    box-shadow: inset 2px 2px 5px rgba(255,255,255,0.5), 0 5px 15px rgba(0, 0, 0, 0.1);
}

.swimmer-head {
    position: absolute;
    width: 32px;
    height: 30px;
    background: #ffdbac; /* Ten rengi */
    border-radius: 50%;
    top: 34px;
    left: 165px;
    z-index: 2;
    transform-origin: 10px 50%;
    animation: headBreath 1.6s ease-in-out infinite;
}

.swimmer-head::before { /* Bone */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: #ffffff; /* Beyaz bone */
    border-radius: 50px 50px 0 0;
    box-shadow: inset -1px -1px 2px rgba(0,0,0,0.1);
}

.swimmer-arm {
    position: absolute;
    width: 50px; /* Üst kol */
    height: 12px;
    background: #ffdbac;
    border-radius: 6px;
    top: 42px;
    left: 135px; /* Omuz hizasına taşındı (Eskiden 90px idi) */
    transform-origin: 5px 50%; /* Omuz eklemi */
}

/* Ön Kol (Forearm) Eklentisi - Daha gerçekçi kol yapısı */
.swimmer-arm::after {
    content: '';
    position: absolute;
    left: 45px; /* Dirsek */
    top: 0;
    width: 45px; /* Ön kol */
    height: 100%;
    background: inherit;
    border-radius: 4px;
    transform-origin: left center;
    transform: rotate(15deg); /* Hafif kırık kol */
}

.swimmer-arm.left {
    z-index: 3;
    animation: freestyleLeft 1.6s linear infinite;
}

.swimmer-arm.right {
    z-index: 1;
    background: #dcb890; /* Gölgede kalan kol */
    animation: freestyleRight 1.6s linear infinite;
}

.swimmer-leg {
    position: absolute;
    width: 65px;
    height: 13px;
    background: #ffdbac;
    border-radius: 8px;
    transform-origin: right center;
}

.swimmer-leg.left {
    top: 45px; /* Sol bacak biraz yukarıda */
    left: 20px;
    z-index: 2;
    animation: flutterKick 0.2s ease-in-out infinite alternate;
}

.swimmer-leg.right {
    top: 51px; /* Sağ bacak biraz aşağıda */
    left: 20px;
    z-index: 1;
    background: #e0c29e;
    animation: flutterKick 0.2s ease-in-out infinite alternate-reverse;
}

.water-splash {
    position: absolute;
    width: 100px;
    height: 40px;
    top: 45px;
    left: 160px;
    opacity: 0.7;
}

.splash {
    position: absolute;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle, rgba(0, 86, 210, 0.6), rgba(255, 255, 255, 0.8));
    border-radius: 50%;
    animation: splash 1.2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.splash:nth-child(1) { left: 0; top: 5px; animation-delay: 0s; }
.splash:nth-child(2) { left: 25px; top: -5px; animation-delay: 0.2s; }
.splash:nth-child(3) { left: 50px; top: 0; animation-delay: 0.4s; }
.splash:nth-child(4) { left: 75px; top: -8px; animation-delay: 0.6s; }
.splash:nth-child(5) { left: 100px; top: 3px; animation-delay: 0.8s; }
.splash:nth-child(6) { left: 15px; top: 15px; animation-delay: 0.3s; }

@keyframes swim {
    0% {
        left: -350px;
        transform: translateY(0);
    }
    25% { transform: translateY(-5px); }
    50% {
        transform: translateY(0);
    }
    75% { transform: translateY(5px); }
    100% {
        left: 110%;
        transform: translateY(0);
    }
}

@keyframes bodyRoll {
    0%, 100% { transform: rotate(4deg); }
    50% { transform: rotate(-4deg); }
}

@keyframes headBreath {
    0%, 60% { transform: rotate(0deg); }
    80% { transform: rotate(25deg); } /* Nefes alma */
    100% { transform: rotate(0deg); }
}

@keyframes freestyleLeft {
    0% { transform: rotate(0deg); }   /* İleri uzanma */
    25% { transform: rotate(90deg); } /* Suyu çekme (Aşağı) */
    50% { transform: rotate(180deg); }/* Çıkış (Arkaya) */
    75% { transform: rotate(270deg); }/* Toparlanma (Yukarı) */
    100% { transform: rotate(360deg); }
}

@keyframes freestyleRight {
    0% { transform: rotate(180deg); }
    25% { transform: rotate(270deg); }
    50% { transform: rotate(360deg); }
    75% { transform: rotate(450deg); }
    100% { transform: rotate(540deg); }
}

@keyframes flutterKick {
    from { transform: rotate(20deg); } /* Daha geniş vuruş açısı */
    to { transform: rotate(-20deg); }
}

@keyframes splash {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
}

/* Swimmer Trailing Bubbles */
.swimmer-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.s-bubble {
    position: absolute;
    background: rgba(0, 86, 210, 0.2);
    border-radius: 50%;
    opacity: 0;
}

.s-bubble:nth-child(1) { width: 8px; height: 8px; top: 50px; left: 20px; animation: trailBubble 1.2s linear infinite; }
.s-bubble:nth-child(2) { width: 6px; height: 6px; top: 55px; left: 15px; animation: trailBubble 1.2s linear infinite 0.3s; }
.s-bubble:nth-child(3) { width: 10px; height: 10px; top: 45px; left: 25px; animation: trailBubble 1.2s linear infinite 0.6s; }
.s-bubble:nth-child(4) { width: 5px; height: 5px; top: 60px; left: 10px; animation: trailBubble 1.2s linear infinite 0.9s; }
.s-bubble:nth-child(5) { width: 7px; height: 7px; top: 40px; left: 30px; animation: trailBubble 1.2s linear infinite 0.5s; }

@keyframes trailBubble {
    0% {
        transform: translateX(0) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translateX(-80px) translateY(-10px) scale(0);
        opacity: 0;
    }
}

/* ========================================
   BREASTSTROKE (FROG STYLE) ANIMATION
======================================== */
.swimming-person.breaststroke {
    bottom: 45%; /* Serbest stil yüzücünün üstünde */
    animation-duration: 25s; /* Biraz daha yavaş tempo */
    animation-delay: -8s; /* Farklı zamanda başlasın */
    transform: scale(0.85); /* Perspektif için biraz daha küçük */
    z-index: 0; /* Diğer yüzücünün arkasında */
    filter: drop-shadow(0 20px 30px rgba(0, 60, 90, 0.15));
}

.swimming-person.breaststroke .swimmer-body {
    animation: breaststrokeBody 2s ease-in-out infinite;
}

.swimming-person.breaststroke .swimmer-head {
    animation: breaststrokeHead 2s ease-in-out infinite;
}

.swimming-person.breaststroke .swimmer-arm.left,
.swimming-person.breaststroke .swimmer-arm.right {
    animation: breaststrokeArm 2s ease-in-out infinite;
    background: #ffdbac; /* İki kol da aynı renk */
    z-index: 2;
}

.swimming-person.breaststroke .swimmer-leg.left,
.swimming-person.breaststroke .swimmer-leg.right {
    animation: breaststrokeLeg 2s ease-in-out infinite;
    background: #ffdbac; /* Sol bacak */
    z-index: 2;
}

.swimming-person.breaststroke .swimmer-leg.right {
    background: #dcb890; /* Sağ bacak (Gölgede) */
    z-index: 1;
}

@keyframes breaststrokeBody {
    0%, 100% { transform: rotate(0deg); } /* Kayma */
    20% { transform: rotate(-15deg) translateY(-8px); } /* Nefes alma (Yükselme) */
    40% { transform: rotate(0deg); } /* Suya giriş */
}

@keyframes breaststrokeHead {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-10deg) translateY(-4px); } /* Nefes alma */
    40% { transform: rotate(0deg); }
}

@keyframes breaststrokeArm {
    0%, 100% { transform: rotate(0deg); } /* İleri uzanma (Glide) */
    20% { transform: rotate(110deg); } /* Suyu çekme */
    30% { transform: rotate(140deg); } /* Göğüste toplama */
    50% { transform: rotate(0deg); } /* İleri fırlatma */
}

@keyframes breaststrokeLeg {
    0%, 35% { transform: rotate(0deg) scaleX(1); } /* Kayma & Bekleme (Kollar çekerken) */
    50% { transform: rotate(45deg) scaleX(0.6); } /* Toparlanma: Dizleri kır, topukları kalçaya çek */
    60% { transform: rotate(-10deg) scaleX(1); } /* Vuruş: Bacakları geriye ve aşağı kamçıla */
    75% { transform: rotate(0deg) scaleX(1); } /* Birleştir ve süzül */
    100% { transform: rotate(0deg) scaleX(1); }
}

/* Bubbles Animation - ENHANCED */
.bubbles {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.bubble {
    position: absolute;
    bottom: -50px;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(0, 86, 210, 0.3));
    border-radius: 50%;
    opacity: 0.7;
    animation: rise linear infinite;
    box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(0, 212, 255, 0.3);
    pointer-events: auto;
    cursor: pointer;
}

.bubble:hover {
    animation-play-state: paused; /* Üzerine gelince durdur */
    z-index: 50;
}

.bubble::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.6); /* Parlama efekti */
    opacity: 0;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.bubble:hover::after {
    opacity: 1;
    transform: scale(1.5); /* Büyüme efekti */
}

.bubble:nth-child(1) { left: 10%; width: 25px; height: 25px; animation-duration: 8s; animation-delay: 0s; }
.bubble:nth-child(2) { left: 20%; width: 30px; height: 30px; animation-duration: 10s; animation-delay: 2s; }
.bubble:nth-child(3) { left: 35%; width: 18px; height: 18px; animation-duration: 7s; animation-delay: 4s; }
.bubble:nth-child(4) { left: 50%; width: 28px; height: 28px; animation-duration: 9s; animation-delay: 1s; }
.bubble:nth-child(5) { left: 65%; width: 22px; height: 22px; animation-duration: 11s; animation-delay: 3s; }
.bubble:nth-child(6) { left: 80%; width: 20px; height: 20px; animation-duration: 8s; animation-delay: 5s; }
.bubble:nth-child(7) { left: 90%; width: 32px; height: 32px; animation-duration: 12s; animation-delay: 2.5s; }
.bubble:nth-child(8) { left: 25%; width: 16px; height: 16px; animation-duration: 6s; animation-delay: 4.5s; }
.bubble:nth-child(9) { left: 45%; width: 24px; height: 24px; animation-duration: 9s; animation-delay: 1.5s; }
.bubble:nth-child(10) { left: 75%; width: 26px; height: 26px; animation-duration: 10s; animation-delay: 3.5s; }
.bubble:nth-child(11) { left: 15%; width: 19px; height: 19px; animation-duration: 7.5s; animation-delay: 0.5s; }
.bubble:nth-child(12) { left: 55%; width: 21px; height: 21px; animation-duration: 8.5s; animation-delay: 2.8s; }

@keyframes rise {
    0% {
        bottom: -50px;
        transform: translateX(0) scale(1);
        opacity: 0;
    }
    20% { opacity: 0.6; }
    50% { transform: translateX(-20px) scale(1.1); }
    80% { opacity: 0.6; }
    100% {
        bottom: 110%;
        transform: translateX(50px) scale(0.5);
        opacity: 0;
    }
}

/* Small Fish Animations */
.fish {
    position: absolute;
    width: 40px;
    height: 20px;
    z-index: 0;
    animation: swim-fish linear infinite;
    pointer-events: none;
}

.fish-body {
    position: relative;
    width: 30px;
    height: 15px;
    background: linear-gradient(135deg, rgba(255, 200, 87, 0.7), rgba(255, 160, 0, 0.5));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
}

.fish-tail {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid rgba(255, 200, 87, 0.6);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    animation: tail-wave 0.5s ease-in-out infinite;
}

.fish-eye {
    position: absolute;
    right: 5px;
    top: 4px;
    width: 3px;
    height: 3px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
}

.fish:nth-child(9) { 
    top: 20%; 
    left: -50px; 
    animation: swim-fish 15s linear infinite;
    animation-delay: 0s;
}

.fish:nth-child(10) { 
    top: 40%; 
    left: -50px; 
    animation: swim-fish 20s linear infinite;
    animation-delay: 5s;
    transform: scale(0.8);
}

.fish:nth-child(11) { 
    top: 60%; 
    left: -50px; 
    animation: swim-fish 18s linear infinite;
    animation-delay: 10s;
    transform: scale(1.2);
}

@keyframes swim-fish {
    0% {
        left: -50px;
    }
    100% {
        left: calc(100% + 50px);
    }
}

@keyframes tail-wave {
    0%, 100% {
        transform: translateY(-50%) skewY(0deg);
    }
    50% {
        transform: translateY(-50%) skewY(15deg);
    }
}

/* Animated Waves */
.hero-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 1;
    pointer-events: none;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
}

.wave-1 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='rgba(0, 168, 204, 0.3)'/%3E%3C/svg%3E") repeat-x;
    animation: wave-animation 25s linear infinite;
    opacity: 0.6;
}

.wave-2 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' fill='rgba(0, 212, 255, 0.4)'/%3E%3C/svg%3E") repeat-x;
    animation: wave-animation 20s linear infinite reverse;
    opacity: 0.5;
}

.wave-3 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='rgba(127, 219, 255, 0.5)'/%3E%3C/svg%3E") repeat-x;
    animation: wave-animation 30s linear infinite;
    opacity: 0.7;
}

@keyframes wave-animation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--text-main);
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    font-size: 3.6rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-shadow: none;
    color: var(--text-main);
    filter: none;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin: 0 auto 2.2rem;
    opacity: 0.95;
    font-weight: 400;
    max-width: 760px;
    line-height: 1.9;
}

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

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-main);
    font-size: 2rem;
    animation: bounce 2s ease-in-out infinite;
    cursor: pointer;
    z-index: 2;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* Fade-in animations */
.fade-in {
    animation: fadeIn 1s ease-out;
}

.fade-in-delay {
    animation: fadeIn 1s ease-out 0.3s backwards;
}

.fade-in-delay-2 {
    animation: fadeIn 1s ease-out 0.6s backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   BUTTONS
======================================== */
.btn {
    display: inline-block;
    padding: 1rem 2.2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0, 86, 210, 0.3);
    border: none;
}

.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    color: white;
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0, 86, 210, 0.4);
}

.btn-secondary {
    background: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    box-shadow: none;
}

.btn-secondary:hover {
    background: var(--bg-main);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.btn-whatsapp {
    background: #25D366;
    color: white;
    width: 100%;
    font-size: 1.1rem;
    box-shadow: 0 12px 24px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp:hover:not(:disabled) {
    background: #20ba5a;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-whatsapp:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
}

.btn-view {
    background: var(--primary-color);
    color: white;
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
}

/* Pulse Animation for Buttons */
@keyframes btn-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.btn-pulse {
    animation: btn-pulse 2s infinite ease-in-out;
}

.btn-pulse:hover {
    animation: none;
}

/* ========================================
   SELECTION SECTION
======================================== */
.selection-section {
    padding: 6rem 0;
    background: var(--bg-main);
    position: relative;
    z-index: 10;
    border-top: var(--border-subtle);
    overflow: hidden;
}

.selection-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(0, 86, 210, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(0, 86, 210, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.selection-card {
    background: var(--bg-surface);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 3.5rem;
    box-shadow: var(--shadow-lg);
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
    border: var(--border-subtle);
}

.selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 2rem;
}

.selection-header .section-title {
    margin-bottom: 0;
    flex: 1;
    align-items: center;
    font-size: 2.2rem;
}

.selection-header .section-title::after {
    display: none; /* Neon efekti kaldır */
}

.toggle-selection {
    background: rgba(0, 86, 210, 0.08);
    border: var(--border-subtle);
    color: var(--text-main);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.toggle-selection:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.toggle-selection i {
    transition: transform 0.3s ease;
}

.toggle-selection.collapsed i {
    transform: rotate(180deg);
}

.selection-form {
    max-height: 1000px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

.selection-form.collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

.selection-card::after {
    display: none;
}

.selection-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--primary-color);
    opacity: 0.5;
}

.section-title {
    font-size: 2.6rem;
    margin-bottom: 1.2rem;
    text-align: center;
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    color: var(--text-main);
    filter: none;
}

.section-title::after {
    display: none; /* İkonu kaldır */
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    margin: 0 auto 2.5rem;
    max-width: 760px;
    line-height: 1.8;
}

.selection-form {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-group label i {
    color: var(--primary-color);
    font-size: 1.1rem;
    filter: none;
}

.custom-select {
    padding: 1.2rem;
    border: var(--border-light);
    border-radius: 8px;
    font-size: 1.05rem;
    background: white;
    color: var(--text-main);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.custom-select:hover:not(:disabled) {
    border-color: var(--primary-color);
    background-color: #f8fafc;
}

.custom-select:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #f8fafc;
}

.custom-select:disabled {
    background-color: #f1f5f9;
    border-color: transparent;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.6;
}

.custom-select option {
    background-color: var(--bg-surface);
    color: var(--text-main);
}

.selection-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 24px;
}

.selection-form .btn {
    width: 100%;
    padding: 1rem 1.15rem;
}

#psychologyLink {
    margin-top: 12px;
}

#psychologyLink .btn {
    width: 100%;
    background: white;
    border: 1px solid var(--border-light);
    color: #fff;
}

/* Seçim Formu - Antrenör Fotoğrafı Düzeltmesi */
#selectedTrainerPhoto {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    margin: 20px auto;
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-md);
    display: none; /* JS ile açılır */
    animation: scaleIn 0.4s ease;
    background-color: var(--bg-main);
}

.trainer-note {
    text-align: center;
    margin: 22px 0 16px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ========================================
   SERVICES SECTION
======================================== */
.services {
    padding: 6rem 0;
    background: var(--bg-main);
    position: relative;
}

/* Subtle background pattern */
.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#81d4fa 1px, transparent 1px);
    background-size: 40px 40px; /* Noktaları kaldır veya çok silik yap */
    opacity: 0.05;
    pointer-events: none;
}

.section-muted {
    background: #f8fafc;
    padding: 4.5rem 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
    position: relative;
    z-index: 2;
}

.services-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
}

.service-card {
    background: linear-gradient(145deg, #ffffff 0%, #dbeafe 100%); /* Biraz daha koyu mavi */
    backdrop-filter: none;
    padding: 3rem 2rem;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-bottom: 4px solid transparent;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Wave animation removed for cleaner look */
.service-card::before { display: none; }

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
    background: linear-gradient(145deg, #ffffff 0%, #93c5fd 100%); /* Hoverda daha canlı ve koyu mavi */
    border-bottom-color: var(--primary-color);
}

.service-card:hover::before {
    top: -50%;
    transform: rotate(180deg);
}

.service-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.8rem;
    background: rgba(0, 114, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    color: #0072ff;
    filter: drop-shadow(0 4px 6px rgba(0, 114, 255, 0.25));
    transition: var(--transition);
    box-shadow: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.service-icon::before {
    display: none;
}

.service-card:hover .service-icon {
    transform: scale(1.15) rotate(8deg);
    background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
    color: white;
}

.service-card:hover .service-icon::before {
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.service-card h3 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--text-muted);
    line-height: 1.7;
}

/* ========================================
   TRAINERS SECTION
======================================== */
.trainers {
    padding: 5rem 0;
    background: var(--bg-main);
    color: var(--text-main);
}

.trainers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.trainer-card {
    background: linear-gradient(180deg, #ffffff 0%, #cffafe 100%); /* Biraz daha belirgin su mavisi */
    backdrop-filter: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: var(--border-subtle);
    min-width: 0;
    cursor: pointer;
}

.trainer-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.trainer-image {
    position: relative;
    height: 320px;
    overflow: hidden;
}

.trainer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.trainer-card:hover .trainer-image img {
    transform: scale(1.1);
}

.trainer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.trainer-card:hover .trainer-overlay {
    opacity: 1;
}

.trainer-info {
    padding: 1.5rem;
    min-width: 0;
}

.trainer-info h3 {
    font-size: 1.8rem; /* İsimler büyütüldü */
    color: var(--text-main);
    font-weight: 800;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.trainer-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.trainer-location {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trainer-specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.specialty-tag {
    background: rgba(0, 86, 210, 0.08);
    color: var(--primary-color);
    border: 1px solid rgba(0, 86, 210, 0.15);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
}

.specialty-tag:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* ========================================
   NEWS SECTION
======================================== */
.news {
    padding: 5rem 0;
    background: var(--bg-main);
}

.news .section-title {
    background: linear-gradient(135deg, #FF512F 0%, #F09819 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent !important;
    background-clip: text;
    color: #F09819 !important;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.news-card {
    background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: var(--border-subtle);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

/* --- Trainer Card Role Accents (Moved from trainer-style.css) --- */
/* Trainer Hero Section Styles */
.trainer-hero {
    background: linear-gradient(135deg, #0056D2 0%, #003366 100%);
    padding: 140px 0 80px;
    color: white;
    position: relative;
    overflow: hidden;
}

.trainer-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 2;
}

@media (min-width: 992px) {
    .trainer-hero-content {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 60px;
    }
}

.trainer-hero-image {
    position: relative;
    flex-shrink: 0;
}

.trainer-hero-info {
    flex: 1;
    text-align: center;
}

@media (min-width: 992px) {
    .trainer-hero-info {
        text-align: left;
    }
}

.role-banner {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    color: #60efff;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.trainer-hero-title {
    font-size: 1.5rem;
    color: #e0f2fe !important;
    margin-bottom: 15px;
    font-weight: 500;
}

.trainer-hero-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;
    color: white !important;
    margin-bottom: 30px;
}

@media (min-width: 992px) {
    .trainer-hero-location {
        justify-content: flex-start;
    }
}

.trainer-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
}

@media (min-width: 992px) {
    .trainer-hero-stats {
        justify-content: flex-start;
    }
}

.stat-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 200px;
}

.stat-item i {
    font-size: 2rem;
    color: #60efff;
}

.stat-item div {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.stat-item strong {
    color: white;
    font-size: 1.1rem;
}

.stat-item span {
    color: #cbd5e1;
    font-size: 0.9rem;
}

.trainer-badge {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FF512F 0%, #F09819 100%);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}

.trainer-card.role-trainer { box-shadow: 0 12px 30px rgba(0, 86, 210, 0.15); border-left: 4px solid var(--primary-color); background: linear-gradient(180deg, #ffffff 0%, #bfdbfe 100%); }
.trainer-card.role-psychologist { box-shadow: 0 12px 30px rgba(124,58,237,0.1); border-left: 4px solid #7C3AED; background: linear-gradient(180deg, #ffffff 0%, #f3e8ff 100%); }
.trainer-card.role-dietitian { box-shadow: 0 12px 30px rgba(251,146,60,0.1); border-left: 4px solid #FB923C; background: linear-gradient(180deg, #ffffff 0%, #ffedd5 100%); }
.trainer-card.role-conditioner { box-shadow: 0 12px 30px rgba(229,62,62,0.1); border-left: 4px solid #e53e3e; background: linear-gradient(180deg, #ffffff 0%, #fee2e2 100%); }
.trainer-card.role-head-coach { box-shadow: 0 12px 30px rgba(0,0,0,0.2); border-left: 4px solid #000000; background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%); }
.trainer-card.role-intern { box-shadow: 0 12px 30px rgba(100, 116, 139, 0.15); border-left: 4px solid #64748b; background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); }

/* Specialty Tag Colors per Role */
.trainer-card.role-psychologist .specialty-tag { background: linear-gradient(135deg, #6d5ac5, #8a66ff); }
.trainer-card.role-dietitian .specialty-tag { background: linear-gradient(135deg, #dd6b20, #ed8936); }
.trainer-card.role-conditioner .specialty-tag { background: linear-gradient(135deg, #c53030, #e53e3e); }
.trainer-card.role-head-coach .specialty-tag { background: linear-gradient(135deg, #000000, #333333); color: #ffd700; border-color: #000; }
.trainer-card.role-intern .specialty-tag { background: linear-gradient(135deg, #64748b, #94a3b8); color: white; border-color: #64748b; }

/* Role Badges (Global) */
.role-badge.role-trainer { background: #083047; color: #fff; }
.role-badge.role-psychologist { background: #7C3AED; color: #fff; }
.role-badge.role-dietitian { background: #FB923C; color: #fff; }
.role-badge.role-conditioner { background: #e53e3e; color: #fff; }
.role-badge.role-head-coach { background: #000000; color: #ffd700; border: 1px solid #ffd700; }
.role-badge.role-intern { background: #64748b; color: #fff; }

/* Trainer Detail Hero Themes */
.trainer-hero.role-psychologist { background: linear-gradient(135deg, #5b4b8a 0%, #6d5ac5 100%); }
.trainer-hero.role-dietitian { background: linear-gradient(135deg, #c05621 0%, #ed8936 100%); }
.trainer-hero.role-conditioner { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); }
.trainer-hero.role-head-coach { background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); }
.trainer-hero.role-intern { background: linear-gradient(135deg, #475569 0%, #64748b 100%); }

/* Role Banners in Detail Page */
.role-banner.role-head-coach { background: rgba(0,0,0,0.4); border-color: rgba(255, 215, 0, 0.5); color: #ffd700; }
.role-banner.role-intern { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #f1f5f9; }

.news-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.news-card:hover .news-image img {
    transform: scale(1.1);
}

.news-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-color);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.news-content {
    padding: 1.5rem;
}

.news-meta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.news-meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.news-content h3 {
    font-size: 1.3rem;
    color: var(--text-main);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.news-content p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.news-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.news-link:hover {
    gap: 0.8rem;
    color: white;
}

/* ========================================
   WHY US SECTION
======================================== */
.why-us {
    padding: 5rem 0;
    background: var(--bg-main);
    color: var(--text-main);
    position: relative;
    overflow: hidden;
}

.why-us::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.why-us .section-title {
    color: var(--text-main);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.why-card {
    background: var(--bg-surface);
    backdrop-filter: none;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: var(--border-subtle);
    transition: var(--transition);
}

.why-card:hover {
    background: white;
    transform: translateY(-5px);
}

.why-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.why-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

.why-card p {
    opacity: 0.9;
    line-height: 1.6;
}

/* ========================================
   CONTACT SECTION
======================================== */
.contact {
    padding: 5rem 0;
    background: var(--bg-main);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 86, 210, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.contact-text h4 {
    color: var(--text-main);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.contact-text p {
    color: var(--text-muted);
    line-height: 1.7;
}

.contact-form-container {
    background: var(--bg-surface);
    backdrop-filter: none;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border: var(--border-subtle);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    padding: 1rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
    background: white;
    color: var(--text-main);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #f8fafc;
}

.contact-form textarea {
    resize: vertical;
}

/* ========================================
   NEWS MODAL
======================================== */
.news-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.3s ease;
}

.news-modal.active {
    display: block;
}

.news-modal-content {
    background: var(--bg-surface);
    margin: 5% auto;
    padding: 0;
    border-radius: 20px;
    max-width: 800px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.4s ease;
    position: relative;
    overflow: hidden;
    border: var(--border-subtle);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.news-modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.news-modal-close:hover,
.news-modal-close:focus {
    background: var(--primary-color);
    transform: rotate(90deg);
}

.news-modal-header {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.news-modal-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-modal-header .news-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 14px;
    padding: 8px 20px;
}

.news-modal-body {
    padding: 40px;
}

.news-modal-body .news-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
}

.news-modal-body .news-meta i {
    margin-right: 5px;
    color: var(--primary-color);
}

.news-modal-body h2 {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 25px;
    line-height: 1.3;
}

.news-modal-body p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.news-modal-body ul {
    margin: 20px 0;
    padding-left: 20px;
}

.news-modal-body ul li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.news-modal-body strong {
    color: var(--primary-color);
    font-weight: 600;
}

@media (max-width: 768px) {
    .news-modal-content {
        margin: 10% auto;
        width: 95%;
    }

    .news-modal-header {
        height: 250px;
    }

    .news-modal-body {
        padding: 25px;
    }

    .news-modal-body h2 {
        font-size: 24px;
    }

    .news-modal-close {
        right: 15px;
        top: 15px;
        font-size: 28px;
        width: 35px;
        height: 35px;
    }
}

/* ========================================
   CONTACT SECTION
======================================== */
.contact, .contact-section {
    background: var(--bg-main);
    padding: 64px 0;
    position: relative;
    z-index: 2;
    border-top: var(--border-subtle);
}
.contact .section-title, .contact-section .section-title {
    color: var(--text-main);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}
.contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
}
.contact-item .contact-icon {
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary-color);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}
.contact-form {
    background: var(--bg-surface);
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: var(--border-subtle);
}

/* Responsive stack */
@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* ========================================
   FOOTER
======================================== */
.footer {
    background: #0F172A; /* Slate 900 - Daha modern koyu ton */
    color: var(--text-muted);
    padding: 3rem 0 2rem;
    position: relative;
    overflow: hidden;
    font-size: 0.95rem;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Add a subtle glow effect */
.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: inherit;
    box-shadow: none;
    z-index: 0;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 2.5rem 0 1.5rem;
        font-size: 0.95rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        padding: 0 15px;
    }
    
    .footer-section {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 1.5rem;
    }

    .footer-section:last-child {
        border-bottom: none;
    }
    
    .footer-section h3 {
        font-size: 1.3rem;
    }
    
    .footer-section h4 {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .footer-section p,
    .footer-section ul li a {
        font-size: 0.9rem;
    }

    /* Mobile Footer Links Redesign (Grid Layout) */
    .footer-section ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
        padding: 0;
    }

    .footer-section ul li {
        margin-bottom: 0;
    }

    .footer-section ul li a,
    .footer-section ul li span {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 10px;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.3;
        transition: all 0.3s ease;
        width: 100%;
        box-sizing: border-box;
        color: #e0f2fe !important;
        text-decoration: none;
    }

    .footer-section ul li a:active {
        background: rgba(255, 255, 255, 0.15);
        transform: scale(0.98);
    }

    .footer-section ul li a i,
    .footer-section ul li span i {
        min-width: 24px;
        text-align: center;
        margin-right: 8px;
        font-size: 1rem;
        color: #38bdf8;
    }
    
    .social-links {
        margin-top: 1rem;
    }

    .social-links a {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
        min-width: 42px;
    }
    
    .footer-bottom {
        font-size: 0.85rem;
        padding: 1.5rem 15px 1rem;
    }
}

@media (max-width: 576px) {
    .footer {
        padding: 2rem 0 1.5rem;
        font-size: 0.9rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 12px;
    }
    
    .footer-section {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 1.5rem;
    }

    .footer-section:last-child {
        border-bottom: none;
    }
    
    .footer-section h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .footer-section h4 {
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
    }
    
    .footer-section p {
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .footer-section ul li a {
        /* Küçük ekranlarda kutu yapısını koru */
        padding: 10px;
    }
    
    .social-links {
        display: flex;
        gap: 0.6rem;
        margin-top: 0.75rem;
    }

    .social-links a {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        min-width: 40px;
    }
    
    .footer-bottom {
        font-size: 0.8rem;
        padding: 1rem 12px 0.75rem;
    }
}

.footer-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.footer-section h3 i {
    color: var(--primary-color);
}

.footer-section h4 {
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.footer-section p {
    opacity: 0.8;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    margin-top: 0;
    color: #e0f2fe !important; /* Açık mavi metin */
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section ul li a {
    color: #e0f2fe !important;
    text-decoration: none;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-section ul li a span {
    flex: 1;
    word-break: break-word;
}

.footer-section ul li a:hover {
    color: #ffffff !important;
    transform: translateX(5px);
}

.footer-section ul li i {
    font-size: 0.8rem;
    color: #38bdf8; /* Sky 400 */
    transition: color 0.3s ease;
    flex-shrink: 0;
    min-width: 16px;
}

.footer-section ul li a:hover i {
    color: #ffffff;
}

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

.social-links a {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-links a:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding: 2rem 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #bae6fd !important;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom a {
    color: #bae6fd !important;
    transition: color 0.3s;
}

.footer-bottom a:hover {
    color: #ffffff !important;
}

/* ========================================
   SCROLL TO TOP BUTTON
======================================== */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .scroll-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */
@media (max-width: 968px) {
    .header-social {
        margin-right: 1rem;
    }

    .instagram-link {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        width: 100%;
        height: 100vh;
        height: 100dvh;
        text-align: center;
        transition: 0.3s;
        box-shadow: none;
        padding: 80px 0 40px 0; /* Üstten boşluk bırak, scroll için */
        justify-content: flex-start; /* İçerik çoksa yukarıdan başlasın */
        z-index: 999;
        overflow-y: auto; /* Menü uzunsa kaydırmaya izin ver */
    }

    .nav-link {
        color: var(--text-main);
        font-size: 1.1rem; /* Mobilde devasa yazılar küçültüldü */
        margin: 5px 0; /* Mobilde dikey boşluk azaltıldı */
    }

    .header.scrolled .nav-link {
        color: var(--text-main);
    }

    .nav-menu.active {
        left: 0;
    }

    /* Mobil Menü Animasyonu (Staggered) */
    .nav-menu li {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
    }

    .nav-menu.active li {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-menu.active li:nth-child(1) { transition-delay: 0.1s; }
    .nav-menu.active li:nth-child(2) { transition-delay: 0.15s; }
    .nav-menu.active li:nth-child(3) { transition-delay: 0.2s; }
    .nav-menu.active li:nth-child(4) { transition-delay: 0.25s; }
    .nav-menu.active li:nth-child(5) { transition-delay: 0.3s; }
    .nav-menu.active li:nth-child(6) { transition-delay: 0.35s; }
    .nav-menu.active li:nth-child(7) { transition-delay: 0.4s; }
    .nav-menu.active li:nth-child(8) { transition-delay: 0.45s; }
    .nav-menu.active li:nth-child(9) { transition-delay: 0.5s; }
    .nav-menu.active li:nth-child(10) { transition-delay: 0.55s; }

    .hamburger {
        display: flex;
        position: relative;
        z-index: 1001;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hamburger.active span {
        background: var(--text-main);
    }

    .header.scrolled .hamburger.active span {
        background: var(--text-main);
    }

    /* Mobil Dropdown Düzeltmeleri */
    .nav-cities-dropdown .dropdown-menu {
        position: static;
        float: none;
        display: none; /* Varsayılan gizli */
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 10px 0;
    }

    /* JS ile .active sınıfı eklenince göster */
    .nav-cities-dropdown.active .dropdown-menu {
        display: block;
    }

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

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

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

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .selection-card {
        padding: 2rem 1.5rem;
    }

    .services-grid,
    .trainers-grid,
    .news-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* Mobil: Antrenör Seçim Kutusunu Vurgula (Aktif olduğunda) */
    #trainerSelect:enabled {
        border: 1px solid var(--primary-color);
        background-color: var(--bg-surface);
        box-shadow: none;
        font-weight: 800;
        color: var(--primary-color);
    }

    /* Mobil: Seçim Formu Başlığını Küçült */
    .selection-header .section-title {
        font-size: 1.6rem;
    }
}

/* ========================================
   NEWS DETAIL PAGE STYLES
======================================== */
.news-detail-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    background: var(--bg-main);
    display: flex;
    align-items: flex-end;
    padding-bottom: 6rem;
    color: white;
    overflow: hidden;
}

.news-detail-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    filter: blur(3px);
    transform: scale(1.05);
}

.news-detail-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.news-detail-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.news-detail-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 1.1rem;
    opacity: 0.9;
}

.news-detail-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.news-detail-meta i {
    color: var(--primary-color);
}

.news-content-wrapper {
    background: var(--bg-surface);
    padding: 3.5rem;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    margin-top: -80px; /* Hero üzerine binme efekti */
    position: relative;
    z-index: 10;
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-main);
}

.news-content-wrapper {
    background: var(--bg-surface);
    backdrop-filter: none;
    border: var(--border-subtle);
}

.news-content-wrapper img {
    max-width: 100%;
    border-radius: 12px;
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .news-detail-hero { height: 50vh; }
    .news-detail-title { font-size: 2rem; }
    .news-content-wrapper { padding: 1.5rem; margin-top: -40px; }
}

/* ========================================
   READING PROGRESS BAR (UX ENHANCEMENT)
======================================== */
.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}

.reading-progress-bar {
    height: 100%;
    background: var(--primary-color);
    width: 0%;
    transition: width 0.1s ease-out;
    box-shadow: none;
}

/* 🎨 Haber Detay - Kategori Bazlı Renklendirme */
/* Varsayılan (Mavi) zaten tanımlı, diğerlerini ekliyoruz */

/* Psikoloji (Mor) */
.news-detail-hero[data-category="Psikoloji"],
.news-detail-hero[data-category="Spor Psikolojisi"],
.news-detail-hero[data-category="Mental"] {
    background: linear-gradient(135deg, #7c3aed 0%, #9b59b6 100%) !important;
}

/* Kondisyoner (Kırmızı) */
.news-detail-hero[data-category="Kondisyoner"],
.news-detail-hero[data-category="Antrenman"],
.news-detail-hero[data-category="Fitness"] {
    background: linear-gradient(135deg, #ef4444 0%, #c0392b 100%) !important;
}

/* Diyetisyen (Turuncu) */
.news-detail-hero[data-category="Diyetisyen"],
.news-detail-hero[data-category="Beslenme"],
.news-detail-hero[data-category="Sporcu Beslenmesi"] {
    background: linear-gradient(135deg, #f97316 0%, #d35400 100%) !important;
}

/* ========================================
   POOL GUIDE DETAIL STYLES (MODERN UI)
======================================== */
.pool-info-card {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: 24px;
    padding: 2.5rem;
    margin: 2.5rem 0;
    box-shadow: var(--shadow-md);
    position: relative;
    backdrop-filter: none;
}

.pool-info-card {
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pool-info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.pool-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color);
}

.pool-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2rem;
    color: var(--text-main);
    font-size: 1.5rem;
    font-weight: 800;
}

.pool-info-header i {
    color: var(--primary-color);
    font-size: 1.8rem;
}

.pool-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.pool-meta-item {
    background: #f8fafc;
    padding: 1.2rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    border: var(--border-subtle);
}

.pool-meta-item:hover {
    background: white;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}

.pool-meta-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pool-meta-icon.type { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
.pool-meta-icon.price { background: rgba(34, 197, 94, 0.1); color: #4ade80; }
.pool-meta-icon.hours { background: rgba(245, 158, 11, 0.1); color: #fbbf24; }

.pool-meta-content span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.pool-meta-content strong {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 700;
}

.pool-features-section {
    border-top: var(--border-subtle);
    padding-top: 2rem;
}

.pool-features-title {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pool-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pool-feature-tag {
    background: #f1f5f9;
    border: var(--border-subtle);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: default;
}

.pool-feature-tag i {
    color: var(--primary-color);
}

.pool-feature-tag:hover {
    border-color: var(--primary-color);
    color: white;
    background: var(--primary-color);
    transform: translateY(-2px);
}

.pool-rating-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: var(--border-subtle);
    text-align: center;
    background: transparent;
    border-radius: 0 0 24px 24px;
    margin-bottom: -2.5rem; /* Kartın padding'ini dengelemek için */
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    padding-bottom: 2.5rem;
}

.pool-rating-stars {
    font-size: 2.2rem;
    color: #fbbf24;
    cursor: pointer;
    display: inline-block;
    margin: 10px 0;
    transition: transform 0.2s;
}

.pool-rating-stars:hover {
    transform: scale(1.1);
}

/* ========================================
   CITY DETAIL PAGE STYLES
======================================== */
.city-hero-subtitle {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-main);
    margin-top: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    max-width: 800px;
    line-height: 1.6;
}

.city-locations-wrapper {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.location-tag {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: white;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.location-tag:hover {
    background: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.location-tag i {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .city-hero-subtitle {
        font-size: 1.1rem;
    }
    .city-locations-wrapper {
        justify-content: center;
    }
}

/* ========================================
   BREADCRUMB NAVIGATION
======================================== */
.breadcrumb-nav {
    padding: 10px 0 20px;
    font-size: 0.9rem;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: #6c757d;
    content: "/";
}
.breadcrumb-item a { color: var(--primary-color); text-decoration: none; transition: color 0.2s; }
.breadcrumb-item a:hover { color: white; text-decoration: underline; }
.breadcrumb-item.active { color: #6c757d; }

/* Related News Section */
.related-news-section {
    padding: 4rem 0;
    background: var(--bg-main);
    border-top: var(--border-subtle);
}

/* Social Share Buttons */
.share-container {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}
.share-label {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.share-buttons { display: flex; gap: 10px; }
.share-btn {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1rem; transition: all 0.3s ease; text-decoration: none; border: none; cursor: pointer;
    position: relative;
}
.share-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); color: white; }

.share-count {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid white;
}

.btn-facebook { background: #3b5998; }
.btn-twitter { background: #000000; }
.btn-whatsapp { background: #25d366; }
.btn-linkedin { background: #0077b5; }
.btn-copy { background: #64748b; }

/* ========================================
   LIGHTBOX (IMAGE MODAL) STYLES
======================================== */
.image-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
}
.modal-content-img {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 85vh;
    border-radius: 5px;
    animation: zoom 0.6s;
    object-fit: contain;
}
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
.close-image-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2001;
}
.close-image-modal:hover {
    color: #bbb;
}
/* Haber içeriğindeki resimlere cursor pointer ekle */
#newsContent img {
    cursor: zoom-in;
    transition: transform 0.3s ease;
}
#newsContent img:hover {
    transform: scale(1.01);
}

/* Metin Editörü Hizalama Sınıfları */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* ========================================
   RICH TEXT EDITOR CONTENT SUPPORT
======================================== */
.ql-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 2rem 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ========================================
   PARTICLE CANVAS
======================================== */
/* ========================================
   ANIMATIONS
======================================== */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Floating animation for particles */
@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        transform: translateY(-10px) translateX(-10px);
    }
    75% {
        transform: translateY(-30px) translateX(5px);
    }
}

/* ========================================
   CITY DESCRIPTION BOX (PROFESSIONAL)
======================================== */
.city-description-box {
    max-width: 900px;
    margin: 4rem auto 0;
    background: var(--bg-surface);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: var(--border-subtle);
    position: relative;
    overflow: hidden;
}

.city-description-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: var(--primary-color);
    z-index: 2;
}

.city-description-box::after {
    content: '\f5c4'; /* Yüzücü ikonu */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 180px;
    color: rgba(255, 255, 255, 0.03);
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0;
}

#cityDescriptionTitle {
    background: #f8fafc;
    padding: 2rem 3rem;
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    border-bottom: var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}

#cityDescriptionTitle::before {
    content: '\f5c4'; /* fa-swimmer */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    color: var(--primary-color);
    font-size: 1.5rem;
}

#cityDescriptionContent {
    padding: 3rem;
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.9;
    position: relative;
    z-index: 1;
}

#cityDescriptionContent p {
    margin-bottom: 1.5rem;
}

#cityDescriptionContent p:last-child {
    margin-bottom: 0;
}

#cityDescriptionContent h2, 
#cityDescriptionContent h3 {
    color: var(--text-main);
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
    font-size: 1.5rem;
}

#cityDescriptionContent strong {
    color: var(--text-main);
    font-weight: 700;
}

@media (max-width: 768px) {
    .city-description-box {
        margin-top: 3rem;
    }
    #cityDescriptionTitle {
        font-size: 1.4rem;
        padding: 1.5rem;
    }
    #cityDescriptionContent {
        padding: 1.5rem 2rem;
    }
}

/* ========================================
   INTERACTIVE FISH (EASTER EGG)
======================================== */
.interactive-fish {
    position: absolute;
    top: 120px;
    left: -100px;
    width: 50px;
    height: 25px;
    z-index: 20;
    cursor: pointer;
    animation: swimInteractive 20s linear infinite;
    transition: transform 0.2s;
}

.interactive-fish:hover {
    transform: scale(1.2);
}

.interactive-fish .fish-body {
    width: 38px;
    height: 20px;
    background: linear-gradient(135deg, #ff9966, #ff5e62);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 0 15px rgba(255, 94, 98, 0.6);
}

.interactive-fish .fish-tail {
    right: -10px;
    border-left-color: rgba(255, 94, 98, 0.9);
}

.interactive-fish .fish-eye {
    background: white;
    width: 5px;
    height: 5px;
}

@keyframes swimInteractive {
    0% { left: -100px; top: 120px; transform: rotate(0deg); }
    25% { top: 180px; transform: rotate(5deg); }
    50% { top: 100px; transform: rotate(-5deg); }
    75% { top: 150px; transform: rotate(5deg); }
    100% { left: 110%; top: 120px; transform: rotate(0deg); }
}

.explosion-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
}

/* ========================================
   NEWS FILTERS & DETAIL (Added for news.html)
======================================== */
.news-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 25px;
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

.news-detail-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-surface);
    padding: 60px;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
}

.detail-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Facility Search Tabs */
.search-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
    width: 100%;
}

.search-tab-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.search-tab-btn.active, .search-tab-btn:hover {
    background: white;
    color: var(--primary-color);
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 30px;
    transition: transform 0.3s;
}

.back-btn:hover {
    transform: translateX(-5px);
}

/* ========================================
   TRAINERS SLIDER (CAROUSEL) STYLES
======================================== */
.trainers-slider-wrapper {
    position: relative;
    padding: 0 20px;
    margin-top: 40px;
}

.trainers-slider-window {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Mobilde akıcı kaydırma */
    scrollbar-width: none; /* Firefox scrollbar gizle */
    padding: 20px 5px; /* Gölgelerin kesilmemesi için */
    margin: -20px -5px;
    scroll-snap-type: x mandatory; /* Kartların tam oturması için */
}

.trainers-slider-window::-webkit-scrollbar {
    display: none; /* Chrome/Safari scrollbar gizle */
}

.trainers-slider-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 30px;
    width: max-content;
}

.trainers-slider-track .trainer-card {
    width: 300px; /* Kart genişliği sabitlendi */
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0; /* Küçülmeyi engelle */
    scroll-snap-align: start; /* Kaydırma bitince kartın başında dur */
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    border: var(--border-subtle);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: var(--primary-color);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.slider-arrow:hover {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3);
}

.slider-arrow.prev { left: -20px; }
.slider-arrow.next { right: -20px; }

@media (max-width: 768px) {
    .trainers-slider-track .trainer-card {
        width: 260px; /* Mobilde biraz daha dar kartlar */
    }
    .slider-arrow {
        display: flex; /* Mobilde okları göster */
        width: 36px;
        height: 36px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .slider-arrow.prev { left: 10px; }
    .slider-arrow.next { right: 10px; }
    .trainers-slider-wrapper {
        padding: 0;
    }
}

/* ========================================
   MODERN ANIMATIONS & TRANSITIONS
======================================== */

/* ✨ Fade In Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 🎯 Button Hover Effects */
@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
    }
}

@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* 🌊 Wave Animation */
@keyframes wave {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

/* ⭐ Shine Effect */
@keyframes shine {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* 🔄 Smooth Transitions */
button, a, .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.trainer-card, .stat-card, .news-card, .specialty-card, .city-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 🎨 Button Enhancements */
.btn, button {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn:hover, button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
}

.btn:active, button:active {
    transform: translateY(-1px);
}

/* Primary Button */
.btn-primary {
    background: var(--primary-gradient) !important;
    color: white !important;
    border: none !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    animation: none; /* Glow kaldırıldı */
}

/* Secondary Button */
.btn-secondary {
    background: white !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.btn-secondary:hover {
    background: var(--bg-main) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-3px);
}

/* 🎯 Card Hover Effects */
.trainer-card:hover,
.stat-card:hover,
.news-card:hover,
.specialty-card:hover,
.city-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg) !important;
}

.trainer-card:hover .trainer-image,
.news-card:hover img {
    transform: scale(1.08);
}

/* 📊 Stat Card Animation */
.stat-card {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

/* 🎯 Section Title Animation */
.section-title {
    animation: fadeInDown 0.8s ease-out;
}

.section-subtitle {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* 🖼️ Image Loading */
img {
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

img:hover {
    transform: scale(1.03);
}

/* 🔗 Link Hover Effects */
a {
    position: relative;
    text-decoration: none;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease-out;
}

a:hover::after {
    width: 100%;
}

/* 📱 Mobile Optimizations */
@media (max-width: 768px) {
    .btn, button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px !important;
    }

    .services, .trainers, .news, .why-us, .contact {
        padding: 3rem 0;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .trainer-card:hover,
    .stat-card:hover,
    .news-card:hover {
        transform: translateY(-4px);
    }
}

/* ✨ Loading Spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    border: 3px solid rgba(0, 86, 210, 0.1);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* 🌟 Glow Effects */
.glow-text {
    text-shadow: none; /* Glow kaldırıldı */
}

.glow-box {
    box-shadow: var(--shadow-md);
}

/* 🎪 Smooth Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* ========================================
   ADVANCED MOBILE & RESPONSIVE IMPROVEMENTS
======================================== */

/* 📱 Extra Small Devices (max 480px) */
@media (max-width: 480px) {
    :root {
        font-size: 14px;
    }
    
    .container {
        padding: 0 15px;
    }
    
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    h2 {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }
    
    h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    .btn, button {
        font-size: 0.85rem;
        padding: 10px 16px !important;
    }
    
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }
}

/* 📱 Small Devices (480px - 768px) */
@media (max-width: 768px) {
    .navbar {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .nav-menu {
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
    }
    
    .nav-link {
        padding: 12px 15px;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
    }
    
    .nav-link:hover, .nav-link.active {
        border-left-color: var(--primary-color);
        background: rgba(0, 86, 210, 0.1);
    }
    
    /* Touch-friendly spacing */
    a, button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Card adjustments */
    .trainer-card, .news-card, .stat-card {
        margin: 10px 0;
        padding: 15px;
    }
    
    /* Service Card Mobile Optimization */
    .service-card {
        padding: 1.5rem 1rem !important;
    }

    .service-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }

    .service-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .service-card p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    .trainer-image {
        height: 200px;
    }

    /* Trainer Card Mobile Optimization */
    .trainer-info {
        padding: 1rem !important;
    }

    .trainer-info h3 {
        font-size: 1.3rem !important;
        margin-bottom: 0.3rem !important;
    }

    .trainer-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.4rem !important;
    }

    .trainers-slider-track .trainer-card {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }

    /* News Card Mobile Optimization */
    .news-image {
        height: 180px !important;
    }

    .news-content {
        padding: 1rem !important;
    }

    .news-content h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }

    /* Why Us Card Mobile Optimization */
    .why-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .why-card {
        padding: 1rem 0.5rem !important;
    }

    .why-icon {
        font-size: 1.8rem !important;
        margin-bottom: 0.5rem !important;
    }

    .why-card h3 {
        font-size: 0.9rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.3 !important;
    }

    .why-card p {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    /* City Page Specific Cards & Elements */
    .premium-card-blue, .premium-card-green {
        padding: 1.5rem !important;
    }

    .facility-gallery {
        grid-template-columns: 1fr !important;
    }

    .facility-gallery img {
        height: 200px !important;
    }

    .location-tag {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

    /* Psychology & Dietitian Card Mobile Optimization */
    .psychology-card, .dietitian-card {
        padding: 1.5rem 1rem !important;
    }

    .psychology-card-icon, .dietitian-card-icon {
        font-size: 2.2rem !important;
        margin-bottom: 0.8rem !important;
    }

    .psychology-card h3, .dietitian-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }

    .psychology-card p, .dietitian-card p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* Expert Grid Mobile Fix (Uzman Listesi) */
    .expert-grid > div {
        padding: 1.5rem !important;
    }

    .expert-grid {
        gap: 2rem !important;
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    /* Form improvements */
    input, textarea, select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    /* Prevent horizontal scroll */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Hero section */
    .hero {
        padding: 60px 0;
        min-height: 70vh;
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero h1 {
        font-size: 2rem;
        line-height: 1.3;
    }
    
    /* Flexbox adjustments */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .modal {
        padding: 10px;
    }
    
    .modal-content {
        width: 95vw;
        max-height: 90vh;
    }
}

/* 🖥️ Medium Devices (768px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .container {
        max-width: 750px;
    }
    
    .nav-menu {
        gap: 15px;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 🖥️ Large Devices (992px+) */
@media (min-width: 993px) {
    .container {
        max-width: 1240px;
    }
    
    .services-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ========================================
   ACCESSIBILITY & PERFORMANCE
======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: #e0e0e0;
    }
    
    .section-sky {
        background: #2a2a2a;
    }
    
    input, textarea, select {
        background: #333 !important;
        color: #e0e0e0;
        border-color: #555 !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: more) {
    body {
        font-weight: 600;
    }
    
    .btn, button {
        border-width: 2px !important;
        font-weight: 700 !important;
    }
}

/* Print styles */
@media print {
    .navbar, .header, footer, .modal, .modal-overlay {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    a {
        text-decoration: underline;
    }
    
    .container {
        max-width: 100%;
    }
}
/* ========================================
   MOBILE TOUCH-FRIENDLY OPTIMIZATIONS
======================================== */
@media (max-width: 600px) {
    /* Touch targets - minimum 48x48px */
    button, a.btn, .share-btn, .slider-btn {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 16px;
    }

    .btn, button {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Better spacing for mobile */
    .container {
        padding: 0 15px;
    }

    .news-content-wrapper {
        padding: 1.25rem;
    }

    /* Navigation optimizations */
    .navbar {
        padding: 10px 0;
    }

    .nav-menu li {
        padding: 8px 0;
    }

    /* News detail page */
    .news-detail-hero {
        height: 45vh;
        min-height: 300px;
        padding-bottom: 3rem;
    }

    .news-detail-title {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .news-detail-meta {
        flex-direction: column;
        gap: 8px;
        font-size: 0.85rem;
    }

    /* Slider improvements */
    .slider-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .prev-btn {
        left: 5px;
    }

    .next-btn {
        right: 5px;
    }

    /* Share buttons */
    .share-buttons {
        justify-content: space-between;
    }

    .share-btn {
        width: 42px;
        height: 42px;
    }

    /* Pool info box */
    #poolInfoBox {
        padding: 20px !important;
        margin: 20px 0 !important;
    }

    /* Map section */
    .map-section-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .map-section-main,
    .map-section-info {
        min-width: 100%;
    }

    #newsMap {
        height: 250px !important;
    }

    /* Newsletter form */
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        min-height: 48px;
    }

    /* Video container */
    .video-container {
        padding-bottom: 56.25%;
        margin: 30px 0;
    }

    /* Responsive images */
    #newsContent img {
        max-width: 100%;
        height: auto;
    }

    /* Table of contents */
    .table-of-contents {
        position: static;
        max-width: 100%;
        margin: 20px 0;
    }

    .toc-list li.level-2 {
        margin-left: 12px;
    }

    .toc-list li.level-3 {
        margin-left: 24px;
    }

    /* Better link handling */
    a {
        -webkit-tap-highlight-color: rgba(0,97,255,0.1);
    }
}

/* Extra small devices - phones in portrait */
@media (max-width: 480px) {
    .news-detail-title {
        font-size: 1.2rem;
    }

    .news-detail-hero {
        height: 40vh;
        min-height: 280px;
        padding-bottom: 2rem;
    }

    .news-content-wrapper {
        padding: 1rem;
    }

    .container {
        padding: 0 12px;
    }

    .share-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .share-label {
        font-size: 0.9rem;
    }

    .newsletter-section {
        padding: 30px 20px;
    }

    .newsletter-section h3 {
        font-size: 1.4rem;
    }

    #newsContent {
        font-size: 0.95rem;
    }

    .quote-highlight {
        padding: 12px 15px;
        font-size: 0.95rem;
        margin: 15px 0;
    }

    .news-badge {
        top: 10px;
        right: 10px;
        font-size: 0.8rem;
    }
}

/* 🔧 Hero Section Button Fix (Ana Sayfa Animasyon Üzeri) */
.hero .btn-secondary {
    background: white !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
}

.hero .btn-secondary:hover {
    background: var(--bg-main) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* ========================================
   MINIMAL HERO SEARCH (CLEAN UI)
======================================== */
.minimal-hero-section {
    padding: 6rem 2rem;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* Arka planı kaldır, Canvas görünsün */
    position: relative;
    z-index: 20;
}

/* 🧊 GLASSMORPHISM KART (Buzlu Cam) */
.minimal-search-card {
    background: rgba(255, 255, 255, 0.75); /* White Glass */
    backdrop-filter: blur(12px); /* İstenilen bulanıklık */
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 3.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 750px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.6); /* Belirgin beyaz çerçeve */
    transition: transform 0.3s ease;
}

.minimal-search-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.4);
}

.minimal-title {
    font-size: 2.2rem;
    color: #ffffff; /* Beyaz Başlık */
    margin-bottom: 0.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.minimal-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95); /* Hafif şeffaf beyaz */
    margin-bottom: 2.5rem;
    line-height: 1.6;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.minimal-form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.minimal-form-group label {
    display: block;
    font-weight: 700;
    color: var(--text-main); /* Koyu Etiket */
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-input-wrapper {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    transition: all 0.3s ease;
    height: 64px; /* Daha geniş/yüksek inputlar */
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.search-input-wrapper:hover, .search-input-wrapper:focus-within {
    background: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 86, 210, 0.15);
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 1.3rem;
    pointer-events: none;
}

.search-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.search-select {
    width: 100%;
    height: 100%;
    padding: 0 50px 0 55px; /* İkonlar için boşluk */
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--text-main);
    font-weight: 600;
    appearance: none; /* Varsayılan oku gizle */
    cursor: pointer;
    outline: none;
}

.search-select:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

.minimal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: center;
}

.btn-search-primary {
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 0 32px;
    height: 64px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
}

.btn-search-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0044A5, #0056D2);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 97, 255, 0.2);
}

.btn-search-primary:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-search-secondary {
    background: transparent;
    color: #25D366; /* WhatsApp Yeşili */
    border: 2px solid #25D366;
    padding: 0 24px;
    height: 64px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
}

.btn-search-secondary:hover {
    background: #25D366;
    color: white;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .minimal-hero-section {
        padding: 4rem 1rem;
    }
    
    .minimal-search-card {
        padding: 2rem 1.5rem;
    }

    .minimal-actions {
        flex-direction: column;
    }
}

/* ========================================
   ULTRA MODERN HERO (High-End / Glassmorphism)
======================================== */
.hero-modern {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f8fafc;
    z-index: 1;
}

/* Soft Mesh Gradient Background (Aurora Effect) */
.hero-mesh-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(at 0% 0%, rgba(196, 225, 255, 0.5) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(220, 240, 255, 0.5) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(200, 230, 255, 0.5) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(220, 240, 255, 0.5) 0px, transparent 50%),
        radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.8) 0px, transparent 50%);
    filter: blur(60px);
    z-index: -1;
    animation: auroraMove 20s ease infinite alternate;
}

@keyframes auroraMove {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.glass-hero-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 20px 40px -10px rgba(0, 105, 148, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    border-radius: 32px;
    padding: 5rem 3rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -12px rgba(0, 105, 148, 0.15);
}

/* Modern Typography */
.hero-title-modern {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 4.5rem;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #0f172a; /* Dark Slate */
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle-modern {
    font-size: 1.25rem;
    color: #475569; /* Slate 600 */
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 3rem;
    font-weight: 500;
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    background: rgba(0, 97, 255, 0.1);
    color: #0061ff;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 97, 255, 0.2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Micro-Interactions for Buttons */
.hero-actions-modern {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.btn-modern {
    padding: 1.1rem 2.5rem;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-modern-primary {
    background: #0061ff;
    color: white;
    box-shadow: 0 10px 25px -5px rgba(0, 97, 255, 0.4);
}

.btn-modern-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 35px -5px rgba(0, 97, 255, 0.5);
    color: white;
}

.btn-modern-glass {
    background: rgba(255, 255, 255, 0.5);
    color: #0f172a;
    border: 1px solid rgba(203, 213, 225, 0.5);
    backdrop-filter: blur(4px);
}

.btn-modern-glass:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 25px -5px rgba(148, 163, 184, 0.3);
    color: #0061ff;
}

/* Stats inside Glass Card */
.hero-stats-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.stat-item-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: #0061ff;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-title-modern {
        font-size: 2.8rem;
    }
    .glass-hero-card {
        padding: 3rem 1.5rem;
        border-radius: 24px;
    }
    .hero-actions-modern {
        flex-direction: column;
        gap: 1rem;
    }
    .btn-modern {
        width: 100%;
    }
    .hero-stats-modern {
        gap: 1.5rem;
    }
}

/* Highlight Text Effect */
.highlight-text {
    background: linear-gradient(135deg, #FF512F 0%, #F09819 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(240, 152, 25, 0.3));
}

/* ========================================
   GLOBAL READABILITY & CONTRAST ENFORCEMENT
   (Acil Düzeltme - Renk Çakışmalarını Önleme)
======================================== */

:root {
    --text-on-light-bg: #001f3f; /* Koyu Lacivert - Okunabilirlik için */
    --text-on-dark-bg: #ffffff;  /* Mat Beyaz */
    --text-body-readable: #334155; /* Koyu Gri - Paragraflar için */
}

/* 1. AÇIK ZEMİNLER (Beyaz, Açık Mavi, Gri) -> KOYU YAZI */
body, 
.section-sky, 
.about-trainer, 
.courses, 
.services, 
.news, 
.contact, 
.contact-section,
.why-card, 
.service-card, 
.trainer-card, 
.news-card,
.info-box,
.contact-form-container,
.news-content-wrapper,
.pool-info-card,
.city-description-box,
.modal-content {
    color: var(--text-on-light-bg);
}

/* Bu bölümlerdeki başlıklar kesinlikle koyu olmalı */
.about-trainer h1, .about-trainer h2, .about-trainer h3, .about-trainer h4, .about-trainer strong,
.courses h1, .courses h2, .courses h3, .courses h4, .courses strong,
.services h1, .services h2, .services h3, .services h4, .services strong,
.news h1, .news h2, .news h3, .news h4, .news strong,
.contact h1, .contact h2, .contact h3, .contact h4, .contact strong,
.section-sky h1, .section-sky h2, .section-sky h3, .section-sky h4, .section-sky strong {
    color: #002B49 !important; /* Deep Navy */
}

/* Bu bölümlerdeki paragraflar okunabilir gri olmalı */
.about-trainer p, .courses p, .services p, .news p, .contact p, .section-sky p {
    color: var(--text-body-readable) !important;
}

/* 2. KOYU ZEMİNLER (Lacivert, Mavi Gradient) -> BEYAZ YAZI */
.footer, .trainer-hero, .cta-section, .section-deep, .header.scrolled {
    color: var(--text-on-dark-bg);
}

.footer h1, .footer h2, .footer h3, .footer h4, .footer p, .footer a,
.trainer-hero h1, .trainer-hero h2, .trainer-hero h3, .trainer-hero h4, .trainer-hero p,
.cta-section h1, .cta-section h2, .cta-section p {
    color: #ffffff !important;
}

/* Footer linkleri için özel ayar (Hafif şeffaf beyaz) */
.footer a, .footer p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.footer a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Kartların içindeki metinleri düzelt */
.service-card p, .why-card p, .trainer-info p, .news-content p {
    color: var(--text-body-readable) !important;
}

.service-card h3, .why-card h3, .trainer-info h3, .news-content h3 {
    color: #002B49 !important;
}

/* ========================================
   SITE PROMOTION / QUICK LINKS SECTION
======================================== */
.site-promotion-section { margin-top: 60px; padding: 40px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 16px; text-align: center; border: 1px solid #bae6fd; }
.promo-links-grid { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-top: 25px; }
.promo-link {
    background: white; color: #006994; padding: 12px 20px; border-radius: 10px;
    text-decoration: none; font-weight: 600; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex; align-items: center; gap: 8px; transition: transform 0.2s, box-shadow 0.2s;
    font-size: 0.95rem;
}
.promo-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    color: #00507a;
}

/* ========================================
   MOBILE OPTIMIZATION & TOUCH-FRIENDLY DESIGN
======================================== */

/* Touch-Friendly Button Sizes (Minimum 48px x 48px) */
@media (max-width: 768px) {
    /* Tüm Butonlar */
    button, 
    input[type="button"], 
    input[type="submit"], 
    .btn, 
    .btn-primary, 
    .btn-search-primary,
    .btn-whatsapp-minimal,
    .search-tab-btn {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 20px !important;
        font-size: 16px !important; /* iOS zoom fix */
        -webkit-appearance: none; /* iOS styling devre dışı */
    }

    /* Form Elemanları */
    input, 
    select, 
    textarea {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 16px !important; /* iOS zoom fix */
        -webkit-appearance: none;
        border-radius: 8px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }

    /* Link Boyutları */
    a {
        -webkit-touch-callout: default;
        -webkit-user-select: none;
    }

    /* Hero Arama Kartı */
    .minimal-search-card {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }

    .search-inputs-row {
        width: 100%;
        flex-direction: column;
        gap: 15px;
    }

    .minimal-form-group {
        width: 100% !important;
        flex: 1 !important;
    }

    .minimal-actions {
        width: 100%;
        flex-direction: column;
        min-width: auto;
        gap: 12px;
    }

    .btn-search-primary,
    .btn-whatsapp-minimal {
        width: 100%;
        height: 48px;
    }

    /* Tabs */
    .search-tab-btn {
        flex: 1;
        min-height: 44px;
        padding: 10px 12px;
    }

    /* Harita/Grid Elemanları */
    .grid {
        gap: 12px;
    }

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

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

    /* Card Spacing */
    .card {
        padding: 20px;
    }

    /* Text Size Optimization */
    body {
        font-size: 16px; /* iOS zoom fix */
    }

    h1 {
        font-size: 28px;
        line-height: 1.2;
    }

    h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    p {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Minimal Title */
    .minimal-title {
        font-size: 32px;
        line-height: 1.1;
    }

    /* Minimal Subtitle */
    .minimal-subtitle {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Hero Section */
    .minimal-hero-section {
        min-height: 100vh;
        padding-bottom: 100px;
        justify-content: center;
    }
}

/* Ekstra Küçük Cihazlar (< 480px) */
@media (max-width: 480px) {
    /* Hero Title */
    .minimal-title {
        font-size: 24px;
    }

    /* Button Padding */
    button, 
    input[type="button"], 
    input[type="submit"],
    .btn {
        padding: 12px 16px !important;
        min-height: 44px;
    }

    /* Search Card */
    .minimal-search-card {
        padding: 16px;
        gap: 12px;
    }

    /* Form Fields */
    input,
    select,
    textarea {
        min-height: 44px;
        padding: 10px 12px;
    }

    /* Hero Buttons */
    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .hero-btn {
        width: 100%;
    }

    /* Container */
    .container {
        padding: 0 10px;
    }

    /* Images - Fully Responsive */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* Video Responsive */
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }

    /* Tables */
    table {
        font-size: 14px;
    }

    table th, 
    table td {
        padding: 8px;
    }

    /* Newsletter Form */
    .newsletter-input {
        width: 100%;
        font-size: 16px;
    }

    .newsletter-btn {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

    /* Modal/Popup */
    .modal,
    .popup {
        width: 90vw;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Fullscreen Mode */
    .modal-dialog {
        margin: 10px;
    }
}

/* iPad ve Tablet Cihazlar (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    button, 
    input[type="button"], 
    input[type="submit"],
    .btn {
        min-height: 44px;
        padding: 10px 18px;
    }

    .minimal-search-card {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .search-inputs-row {
        flex: 1 1 100%;
    }
}

/* Large Screens (> 1024px) */
@media (min-width: 1025px) {
    /* Cursor: Pointer for Touch-Like Experience */
    button,
    .btn,
    a[role="button"],
    [onclick] {
        cursor: pointer;
    }
}

/* Landscape Mode Optimization */
@media (max-height: 600px) and (orientation: landscape) {
    .minimal-hero-section {
        min-height: 100vh;
        padding: 20px 0;
    }

    .minimal-title {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .minimal-subtitle {
        font-size: 14px;
    }

    button, input {
        min-height: 40px;
    }
}

/* Smooth Scrolling & Touch */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    * {
        scroll-behavior: smooth;
    }
}

/* High DPI / Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Hafif border'ları kalınlaştır */
    *:not(input):not(textarea) {
        border-width: 1px;
    }
}

/* Dark Mode Support (Eğer kullanılıyorsa) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }

    input,
    textarea,
    select {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #404040;
    }
}

/* Accessibility: Focus States */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    button:hover,
    .btn:hover,
    a:hover {
        /* Hover effects should be minimal on mobile */
    }

    /* Add active state instead */
    button:active,
    .btn:active,
    a:active {
        opacity: 0.8;
    }

    /* Touch feedback */
    input:focus,
    textarea:focus,
    select:focus {
        background-color: rgba(14, 165, 233, 0.05);
    }
}