/* Modern Design System - Skyfen */
:root {
    --primary-color: #2563EB;
    --primary-dark: #1e40af;
    --secondary-color: #F59E0B;
    --accent-color: #10B981;
    --text-dark: #1F2937;
    --text-light: #6B7280;
    --bg-light: #F9FAFB;
    --white: #FFFFFF;
    --gradient-primary: linear-gradient(135deg, #2563EB 0%, #1e40af 100%);
    --gradient-accent: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --container-width: 1280px;
}

/* Global Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ========================================
   EDUCATION PATTERN BACKGROUND
   Subtle, elegant, non-intrusive pattern
   Slider altındaki section'lara uygulanıyor
   ======================================== */

/* Tüm section'lar için education pattern */
section:not(.hero-banner) {
    position: relative;
}

section:not(.hero-banner)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23095179'%3E%3Cpath d='M15 8l8-4 8 4-8 4-8-4zm8 6l6-3v5l-6 3-6-3v-5l6 3z'/%3E%3Crect x='50' y='6' width='12' height='16' rx='1' fill='none' stroke='%23095179' stroke-width='1.5'/%3E%3Cpath d='M52 10h8M52 14h8M52 18h5' stroke='%23095179' stroke-width='1'/%3E%3Ccircle cx='20' cy='50' r='7' fill='none' stroke='%23095179' stroke-width='1.5'/%3E%3Crect x='17' y='57' width='6' height='4' rx='1'/%3E%3Cpath d='M55 42l2-3 2 3h-1.5v5h-1v-5H55z'/%3E%3Ccircle cx='57' cy='55' r='5' fill='none' stroke='%23095179' stroke-width='1.2'/%3E%3Cpath d='M55 55h4M57 53v4' stroke='%23095179' stroke-width='0.8'/%3E%3Cpath d='M35 65l5-2.5 5 2.5-5 2.5-5-2.5z' fill='none' stroke='%23095179' stroke-width='1'/%3E%3Ccircle cx='40' cy='75' r='2'/%3E%3Cpath d='M40 68v5' stroke='%23095179' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 160px 160px;
}

section:not(.hero-banner) > * {
    position: relative;
    z-index: 1;
}

/* Hero slider temiz kalsın */
.hero-banner {
    position: relative;
    z-index: 2;
}

.hero-banner::before {
    display: none !important;
}

body.page-sub {
    padding-top: 0;
    /* Header is relative now, no padding needed */
    background-color: #f8f9fa;
    /* Slight off-white for subpages */
}

@media (max-width: 768px) {
    body.page-sub {
        padding-top: 0;
        /* Header is relative, no padding needed */
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

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

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--secondary-color);
    margin: 0.5rem auto 0;
    border-radius: 2px;
}

.section-header p {
    font-size: 1.125rem;
    color: var(--text-light);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.btn-lg {
    padding: 1.125rem 3rem;
    font-size: 1.125rem;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 8px 15px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(37, 99, 235, 0.4);
}

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

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

.btn-white {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border-color: white;
    color: white;
}

.btn-white:hover {
    background: white;
    color: var(--primary-color);
    transform: translateY(-3px);
}

/* Header & Navigation (Redesigned - Boxed) */
header {
    background: #ffffff;
    position: absolute;
    width: calc(100% - 60px);
    max-width: 1400px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;



}

/* Ana sayfada site-topbar görünür olsun */
body.page-home .site-topbar {
    display: block !important;
    position: relative;
    z-index: 1002;
}

/* Alt sayfalarda header boxed ama relative */
body.page-sub header {
    position: relative;
    width: calc(100% - 60px);
    max-width: 1400px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--radius-lg);
    border: 5px solid var(--secondary-color);
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Alt sayfalarda scroll yapınca header sticky ve full genişlik */
body.page-sub header.scrolled {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
    border-radius: 0;
    border: none;
    border-bottom: 5px solid var(--secondary-color);
    margin-top: 0;
    margin-bottom: 0;
    z-index: 1001;
}

/* Scrolled state */
header.scrolled {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    top: 0;
    border-radius: 0;
    border: none;
    border-bottom: 5px solid var(--secondary-color);
    position: fixed;
    padding: 0.5rem 0;
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    padding: 0 30px;
    margin: 0;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    height: 50px;
    width: auto;
}

/* Ana menü ortalama */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0 20px;
}

.main-nav ul {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Navigation Links - Dark because header is white */
.main-nav ul li a {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 5px;
    position: relative;
    transition: color 0.3s ease;
}

/* Menü İkonları */
.main-nav ul li a i {
    font-size: 14px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.main-nav ul li a:hover i {
    opacity: 1;
    transform: scale(1.1);
}

.main-nav a {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    letter-spacing: 0.5px;
    text-shadow: none;
}

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

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

.main-nav a:hover::after {
    width: 100%;
}

/* ========================================
   DROPDOWN MENÜ - Header ile Uyumlu
   ======================================== */
.has-dropdown {
    position: relative;
}

.has-dropdown > a::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    margin-left: 5px;
    transition: transform 0.3s ease;
    opacity: 0.7;
    position: static;
    width: auto;
    height: auto;
    background: none;
}

.has-dropdown:hover > a::after {
    transform: rotate(180deg);
    width: auto;
}

.dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 280px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 3px solid var(--secondary-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 15px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--secondary-color);
}

.dropdown ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

.dropdown li {
    margin: 0;
    padding: 0;
}

.dropdown li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 25px;
    color: #333333 !important;  /* Sabit koyu renk */
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    background-color: transparent;
}

.dropdown li a i {
    font-size: 14px;
    width: 20px;
    text-align: center;
    color: var(--secondary-color);
    opacity: 0.8;
}

.dropdown li a:hover {
    background-color: rgba(9, 81, 121, 0.08) !important;
    color: var(--primary-color) !important;
    border-left-color: var(--secondary-color);
    padding-left: 30px;
}

.dropdown li a:hover i {
    opacity: 1;
    transform: scale(1.1);
    color: var(--primary-color);
}

.dropdown li a::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Nested Dropdown */
.dropdown .has-dropdown > a::after {
    content: '\f105';
    margin-left: auto;
}

.dropdown .dropdown {
    left: 100%;
    top: 0;
    transform: translateX(10px) translateY(0);
}

.dropdown .has-dropdown:hover > .dropdown {
    transform: translateX(0) translateY(0);
}

/* Sağ taraf - butonlar ve dil seçici */
.right-side {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-buttons {
    display: flex;
    gap: 10px;
}

.header-buttons .btn {
    padding: 0.75rem 2rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Hero Section (Boxed Header adjustments) */
.hero-banner {
    position: relative;
    overflow: hidden;
    padding: 0;
    height: 85vh;
    /* Reduced from 100vh */
    min-height: 600px;
    background: #000;
    /* Fallback */
}

.slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    padding-top: 250px;
    /* Pushing content down significantly */
}

.slide.active {
    opacity: 1;
    z-index: 10;
}

/* Overlay to ensure text readability on any image */
.slide .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(10, 81, 121, 0.75) 0%,
        rgba(10, 81, 121, 0.55) 50%,
        rgba(10, 81, 121, 0.85) 100%
    );
    z-index: 1;
}



.slide .container {
    position: relative;
    z-index: 20;
    text-align: center;
    max-width: 1000px;
}

.hero-content.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.animate-title {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(30px);
}

.slide.active .animate-title {
    animation: fadeInUp 0.8s forwards 0.3s;
}

.animate-title span {
    color: var(--secondary-color);
    display: block;
    /* Break line for emphasis or modify as needed */
    font-size: 0.8em;
}

.animate-text p {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 800px;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.slide.active .animate-text {
    opacity: 0;
    animation: fadeInUp 0.8s forwards 0.5s;
}

.slide.active .animate-buttons {
    opacity: 0;
    animation: fadeInUp 0.8s forwards 0.7s;
}

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

/* Wave Separator */
.wave-separator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 25;
}

.wave-separator svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 140px;
    transform: rotate(180deg);
}

.wave-separator .shape-fill {
    fill: #FFFFFF;
}

/* Slider Controls */
.slider-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 3rem;
    pointer-events: none;
    /* Let clicks pass through except on buttons */
    z-index: 30;
}

.slider-controls button {
    pointer-events: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-controls button:hover {
    background: white;
    color: var(--primary-color);
    transform: scale(1.1);
}

/* Campus Cards / Services */
.campus-cards {
    padding-top: 2rem;
    position: relative;
    z-index: 10;
    margin-top: 0;
    padding-bottom: 4rem;
}

.card-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.campus-card {
    background: transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease;
    animation: fadeInUp 1s ease-out backwards;
}

/* Asymmetry: Push every even card down */
.campus-card:nth-child(even) {
    transform: translateY(40px);
}

.campus-card:nth-child(odd) {
    transform: translateY(0);
}

.campus-card:hover {
    transform: translateY(-10px) !important;
    /* Override asymmetry on hover to lift up */
    z-index: 20;
}

.card-logo {
    height: 250px;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-xl);
}

.card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.campus-card:hover .card-logo img {
    transform: scale(1.1);
}

.card-content {
    background: white;
    padding: 2rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    margin-top: -20px;
    /* Slight overlap */
    z-index: 5;
    text-align: center;
    border-bottom: 5px solid var(--primary-color);
}

.campus-card h3 {
    font-size: 0.9rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.card-content div[style*="font-size: 1.5rem"] {
    font-size: 1.25rem !important;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.card-content div[style*="opacity:0.8"] {
    color: var(--text-light);
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Media Queries for Cards */
@media (max-width: 1200px) {
    .card-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .campus-card:nth-child(even) {
        transform: translateY(0);
        /* Reset on smaller screens */
    }
}

@media (max-width: 768px) {
    .card-wrapper {
        grid-template-columns: 1fr;
    }

    .campus-cards {
        margin-top: 50px;
    }
}

/* Rest of the sections - ensure consistency */

/* About Section */
.about-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.about-inner {
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

/* Image/Video Left Side */
.about-video {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
    animation: floatImage 4s ease-in-out infinite;
}

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

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

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

.circular-image {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0 15px rgba(var(--secondary-color-rgb), 0.1),
        0 0 0 30px rgba(var(--secondary-color-rgb), 0.05),
        var(--shadow-xl);
    border: 5px solid white;
}

.circular-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.play-btn button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: pulse-white 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content Right Side - Symmetrical/Centered Look */
.about-content {
    flex: 1;
    text-align: center;
    /* Symmetrical look */
    padding: 2rem;
}

.about-content h6 {
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
}

.about-content h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text-dark) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.divider-sym {
    width: 100px;
    height: 6px;
    background: var(--secondary-color);
    margin: 0 auto 2rem;
    border-radius: 3px;
}

.about-content p {
    color: var(--text-light);
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.about-content .btn-group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

/* Animations for Content */
.animate-text-sym {
    opacity: 0;
    animation: fadeUpSym 0.8s ease-out forwards;
}

.animate-text-sym:nth-child(1) {
    animation-delay: 0.2s;
}

.animate-text-sym:nth-child(2) {
    animation-delay: 0.4s;
}

.animate-text-sym:nth-child(3) {
    animation-delay: 0.5s;
}

.animate-text-sym:nth-child(4) {
    animation-delay: 0.6s;
}

.animate-text-sym:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes fadeUpSym {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@media (max-width: 992px) {
    .about-inner {
        flex-direction: column;
        gap: 3rem;
    }

    .circular-image {
        width: 350px;
        height: 350px;
        box-shadow: 0 0 0 10px rgba(var(--secondary-color-rgb), 0.1);
    }
}

@media (max-width: 500px) {
    .circular-image {
        width: 280px;
        height: 280px;
    }

    .about-content h2 {
        font-size: 2rem;
    }
}

/* Team Section */
.team-section {
    padding: 6rem 0;
    background: var(--bg-light);
}

.team-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.team-member-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    text-align: center;
    padding-bottom: 1.5rem;
}

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

.team-img {
    height: 350px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-member-card:hover .team-img img {
    transform: scale(1.1);
}

.team-info h3 {
    margin-bottom: 0.25rem;
    color: var(--primary-color);
}

.team-title {
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.team-socials a {
    color: var(--text-light);
    margin: 0 0.5rem;
    font-size: 1.2rem;
}

.team-socials a:hover {
    color: var(--primary-color);
}

/* Blog Section */
.blog-section {
    padding: 6rem 0;
    background: var(--bg-light);
}

.blog-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.blog-item {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

.blog-img {
    position: relative;
    height: 250px;
}

.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-date {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.blog-date .day {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.blog-date .month {
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-light);
}


.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-content h1 span {
    color: var(--secondary-color);
    display: block;
}

.hero-text p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    color: #f9fafb;
    max-width: 90%;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    font-weight: 500;
}

.hero-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: float 6s ease-in-out infinite;
}

.blog-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-category {
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.blog-content h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.read-more-link {
    margin-top: auto;
    color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.read-more-link:hover {
    gap: 0.8rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Pulse animation for buttons */
.pulse-anim {
    animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    html {
        font-size: 14px;
    }

    .hero-banner {
        min-height: 500px;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .container {
        padding: 0 1.5rem;
    }

    .slide .container,
    .about-inner,
    .kids-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .kids-image {
        order: -1;
    }

    .header .container {
        flex-direction: column;
        gap: 1rem;
    }

    .main-nav ul {
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-banner {
        height: 100vh;
        /* Not full 100, maybe user felt lost? or keep 100? */
        /* User didn't complain about height, just "olmadı". */
        /* Let's keep 100vh or 85vh to match desktop ratio better? */
        height: 100vh;
        min-height: auto;
    }

    .slide {
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        place-content: center !important;
        height: 100% !important;
        text-align: center;
    }

    .animate-title {
        font-size: 1.25rem !important;
        /* Much smaller as requested */
        margin: 0 auto 0.5rem auto;
        line-height: 1.3;
        padding: 0 10px;
        width: 100%;
        text-align: center;
    }

    .animate-text p {
        font-size: 0.9rem !important;
        margin: 0 auto 1.5rem auto;
        padding: 0 1.5rem;
        line-height: 1.4;
        text-align: center;
        width: 100%;
    }

    .wave-separator svg {
        height: 40px;
        /* Even shorter */
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        padding: 0 4rem;
        /* Keep buttons contained */
        align-items: center;
    }

    .btn {
        width: 100%;
        padding: 0.8rem 0;
        font-size: 0.85rem;
    }

    .main-nav {
        display: none;
    }

    .slider-controls {
        padding: 0 1rem;
        /* Reset positioning if I messed it up, standard is top 50% */
        bottom: auto;
    }

    .slider-controls button {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Accordion Gallery Section */
.gallery-section {
    padding: 100px 0;
    overflow: hidden;
    background: #f8fafc;
}

.gallery-accordion-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
    /* Space for arrows */
}

.gallery-accordion {
    display: flex;
    width: 100%;
    height: 500px;
    /* Tall enough for impact */
    gap: 10px;
    padding: 20px 0;
}

.gallery-acc-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    transition: flex 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Smooth ease-out */
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.gallery-acc-item.hidden-item {
    display: none;
}

.gallery-acc-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    filter: brightness(0.9);
}

/* Expansion Effect */
.gallery-acc-item:hover {
    flex: 4;
    /* Grows significantly */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.gallery-acc-item:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* Overlay & Icon */
.acc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 30px;
}

.gallery-acc-item:hover .acc-overlay {
    opacity: 1;
}

.acc-icon {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.5rem;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

.gallery-acc-item:hover .acc-icon {
    transform: translateY(0);
}

/* Active state for mobile touches if needed (simulated hover) */
.gallery-acc-item.active {
    flex: 4;
}

/* Navigation Arrows */
.gal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    border: 1px solid #eee;
    color: var(--primary-color) !important;
    /* Force color */
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    /* Higher z-index */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* Stronger shadow */
    transition: all 0.3s ease;
}

.gal-nav i {
    color: var(--primary-color);
    /* Ensure icon inherits or sets color explicitly */
}

.gal-nav:hover {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-lg);
}

.gal-nav.prev-btn {
    left: 0;
}

.gal-nav.next-btn {
    right: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .gallery-accordion-wrapper {
        padding: 0 10px;
    }

    .gallery-accordion {
        flex-direction: row;
        /* Keep horizontal */
        height: 350px;
        /* Reasonable height for mobile */
        overflow-x: auto;
        /* Allow scrolling */
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 20px;
        /* Space for scrollbar if any */

        /* Hide scrollbar for cleaner look */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .gallery-accordion::-webkit-scrollbar {
        display: none;
    }

    .gallery-acc-item {
        min-width: 85%;
        /* Show mostly one item */
        scroll-snap-align: center;
        flex: 0 0 85% !important;
        /* Override flex growth */
        border-radius: 15px;
        /* Ensure items are visible */
        /* Force show all if we want vertical list, or keep hidden logic for "Load More". But user wants arrows. Arrows on mobile is hard for vertical accordion. Let's just hide arrows and show first 5. */
    }

    /* Show all items if script hides them, or let script handle it. 
       If script shows 5, user scrolls 5. If user wants more, they use arrows?
       Let's hide arrows on mobile and rely on swipe of the visible items.
       But if script only renders 5, user only sees 5. 
       We should probably allow script to render all on mobile or accept 5 is enough.
       For now, let's keep arrows VISIBLE but smaller/positioned better, or hide them.
       User complained about arrows functionality.
       Let's keep arrows but make sure they don't overlap content.
    */

    .gal-nav {
        /* Keep them visible on mobile? Maybe. */
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        background: rgba(255, 255, 255, 0.9);
        /* Hide arrows on mobile, just scroll/stack */
    }

    .gallery-acc-item:hover {
        transform: none;
        /* No expansion on touch */
        flex: 0 0 85% !important;
    }

    .gallery-acc-item.hidden-item {
        /* On mobile, we might want to just show the 5 active ones in a scroll.
           The JS logic works fine. It shows 5 items.
           We style them to be a horizontal scroll list.
        */
        display: none;
    }

    /* Wait, if logic hides them, they are gone. Let's override hidden-item for mobile? */
    /* Or better: Keep carousel logic on mobile too! It's just horizontal stack? No, vertical stack. */
    /* Let's keep logic active, so 5 items show vertically. Next button would replace items. */

}

/* Modern Footer Redesign (Fixed Layout with Wave) */
footer {
    background: #1a1a1a;
    color: #b0b0b0;
    font-size: 0.95rem;
    position: relative;
    z-index: 10;
    margin-top: 60px;
    /* Space for absolute wave overlap if needed, or just gap */
    padding-top: 0;
}

/* Wave Effect at the top */
footer::before {
    content: "";
    position: absolute;
    top: -50px;
    /* Push up to overlap previous section */
    left: 0;
    width: 100%;
    height: 50px;
    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='%232563EB'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    transform: rotate(180deg);
    /* Flip if needed to look like a footer top wave. Original was bottom wave. */
}

/* Wait, the existing wave-separator in hero was 180deg rotated bottom wave? 
   The SVG path provided is "valley". Rotated 180 it becomes "mountains". 
   We want "mountains" to transition from white (top) to dark (footer). 
   So the SVG fill is the footer color.
   If I place it at `top: 0` inside footer, it covers content. 
   Placement: `top: -50px`, fill: `#1a1a1a`. 
   If path is "valley" (concave), filling it creates a convex top?
   Let's check the SVG logic. 
   Standard wave usually fills the bottom. 
   If I use the hero one (`fill='%231a1a1a'`) and rotate 180?
   Let's try. */

.footer-top {
    padding: 60px 0 40px;
    /* border-bottom: none; */
}

/* Reset Layout for Footer to ensure alignment */
.footer-top .container .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -15px;
    /* Offset column padding */
}

.footer-col {
    flex: 1;
    min-width: 280px;
    /* Ensure columns don't get too squeezed */
    padding: 0 15px;
    margin-bottom: 40px;
}

/* Specific column adjustments */
.footer-col.company-info {
    flex: 1.5;
    /* Give more space to company info */
    min-width: 300px;
}

.footer-col h4 {
    color: var(--secondary-color);
    /* Changed from white to Secondary (Gold/Orange) */
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
    letter-spacing: 1px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: var(--primary-color);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
    display: block;
}

.footer-col ul li a {
    color: #b0b0b0;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.footer-col ul li a:hover {
    color: var(--secondary-color);
    /* Changed hover to nice accent */
    padding-left: 5px;
}

.footer-col ul li a::before {
    content: '\203A';
    /* Chevron */
    margin-right: 8px;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.3s;
    color: var(--primary-color);
}

.footer-col ul li a:hover::before {
    opacity: 1;
}

.company-info p {
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 90%;
}

.footer-logo img {
    height: 50px;
    width: auto;
    margin-bottom: 20px;
    /* No filter, original logo */
}

/* Social Icons */
.footer-social-icons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.footer-social-icons a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    /* Keep faint bg */
    border: 1px solid var(--primary-color);
    /* Add colored border */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--primary-color);
    /* Colored icon */
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

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

/* Contact Details */
.footer-col p i {
    color: var(--secondary-color);
    width: 25px;
    text-align: center;
    margin-right: 10px;
}

/* Footer Bottom */
.footer-bottom {
    background: #0f0f0f;
    padding: 20px 0;
    font-size: 0.85rem;
    color: #888;
    text-align: center;
    border-top: 1px solid #222;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom a {
    color: #b0b0b0;
    font-weight: 500;
}

.footer-bottom a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 991px) {
    .footer-col {
        min-width: 45%;
        /* 2 per row on tablet */
    }
}

@media (max-width: 576px) {
    .footer-col {
        min-width: 100%;
        /* 1 per row on mobile */
        text-align: center;
    }

    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-social-icons {
        justify-content: center;
    }

    .company-info p {
        max-width: 100%;
    }

    .footer-col ul li a {
        justify-content: center;
    }
}

/* ========================================
   INSTAGRAM FEED SECTION
   ======================================== */
.instagram-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.instagram-section .section-header h2 {
    margin-bottom: 0.5rem;
}

.instagram-section .instagram-handle {
    color: #E1306C;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.instagram-section .instagram-handle:hover {
    color: #C13584;
    text-decoration: underline;
}

.instagram-carousel-wrapper {
    position: relative;
    margin: 3rem 0;
    padding: 0 60px;
}

.instagram-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

.instagram-item {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: none; /* JavaScript ile kontrol edilecek */
    flex: 0 0 calc(25% - 15px); /* 4 kolon için */
    max-width: calc(25% - 15px);
}

.instagram-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.instagram-item iframe {
    width: 100%;
    min-height: 500px;
    border: none;
    display: block;
}

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

.instagram-nav:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-50%) scale(1.1);
}

.instagram-nav.prev-btn {
    left: 0;
}

.instagram-nav.next-btn {
    right: 0;
}

.instagram-section .btn {
    padding: 12px 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.instagram-section .btn i {
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .instagram-item {
        flex: 0 0 calc(33.333% - 14px); /* 3 kolon */
        max-width: calc(33.333% - 14px);
    }
}

@media (max-width: 992px) {
    .instagram-item {
        flex: 0 0 calc(50% - 10px); /* 2 kolon */
        max-width: calc(50% - 10px);
    }
    
    .instagram-carousel-wrapper {
        padding: 0 50px;
    }
    
    .instagram-carousel {
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .instagram-section {
        padding: 60px 0;
    }
    
    .instagram-item {
        flex: 0 0 100%; /* 1 kolon - tam genişlik */
        max-width: 100%;
    }
    
    .instagram-carousel {
        gap: 15px;
        justify-content: center;
    }
    
    .instagram-carousel-wrapper {
        padding: 0 45px;
    }
    
    .instagram-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .instagram-item iframe {
        min-height: 480px;
    }
}

@media (max-width: 576px) {
    .instagram-section .section-header h2 {
        font-size: 1.8rem;
    }
    
    .instagram-section .section-header p {
        font-size: 0.9rem;
    }
    
    .instagram-carousel-wrapper {
        padding: 0 40px;
        margin: 2rem 0;
    }
    
    .instagram-nav {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .instagram-item iframe {
        min-height: 450px;
    }
}