/* ============================================
   MODERN INTERIOR DESIGN PORTFOLIO - CSS
   Ultra Modern Design with White-Grayish Tones
   ============================================ */

:root {
    --primary-white: #FFFFFF;
    --bg-light: #F8F8F8;
    --bg-gray: #F0F0F0;
    --bg-dark-gray: #E5E5E5;
    --text-dark: #1A1A1A;
    --text-gray: #666666;
    --text-light-gray: #999999;
    --accent: #2C2C2C;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.18);
    --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 12px 48px rgba(0, 0, 0, 0.08);
    --shadow-heavy: 0 20px 64px rgba(0, 0, 0, 0.12);
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham'), local('Gotham Pro'), local('Gotham SSm');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* FreightSansProBook font removed - font files not found */
/* @font-face {
    font-family: 'FreightSansProBook';
    src: url('fonts/FreightSansProBook-Italic.woff2') format('woff2'),
         url('fonts/FreightSansProBook-Italic.woff') format('woff'),
         url('fonts/FreightSansProBook-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
} */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    /* Prevent layout shift during font loading */
    font-size: 16px;
    font-weight: 400;
    /* Reserve space for hero slider to prevent CLS */
    min-height: 100vh;
    /* Prevent layout shift when loading screen is removed */
    contain: layout style;
}

body.loading {
    overflow: hidden;
}

body.menu-open {
    overflow: hidden;
}

/* ============================================
   LOADING SCREEN
   ============================================ */

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-white);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    visibility: visible;
    /* Prevent layout shift when hiding */
    will-change: opacity, visibility;
    /* Ensure it doesn't affect layout */
    pointer-events: auto;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.loading-logo {
    height: 88px;
    width: auto;
    max-width: 300px;
    min-width: 180px;
    object-fit: contain;
    animation: logoFadeIn 0.8s ease-out;
    will-change: opacity, transform;
    transform: translateZ(0); /* GPU acceleration */
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--bg-gray);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    will-change: transform;
    transform: translateZ(0); /* GPU acceleration */
}

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

@keyframes spin {
    to {
        transform: rotate(360deg) translateZ(0);
    }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}

p {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.8;
}

/* ============================================
   NAVIGATION
   ============================================ */

.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    /* Prevent layout shift - reserve space for navbar */
    min-height: 100px;
    height: auto;
    padding: 0.75rem 5%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.navbar.scrolled {
    padding: 0.75rem 5%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--bg-dark-gray);
    box-shadow: var(--shadow-light);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Prevent layout shift - reserve space */
    min-height: 100px;
    height: auto;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    z-index: 10;
}

.logo-img {
    height: 78px;
    width: auto;
    object-fit: contain;
    transition: var(--transition);
    /* Tight-cropped Tale wordmark — fills navbar height */
    max-height: 78px;
    max-width: 280px;
}

.navbar:not(.scrolled) .logo-img {
    filter: none;
    height: 78px;
    width: auto;
    max-height: 78px;
    max-width: 280px;
}

.navbar.scrolled .logo-img {
    filter: none;
    height: 78px;
    width: auto;
    max-height: 78px;
    max-width: 280px;
}

.logo:hover .logo-img {
    opacity: 0.9;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    align-items: center;
}

.nav-menu .social-media {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-left: 2rem;
    list-style: none;
}

.social-link {
    color: var(--text-dark);
    text-decoration: none;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.social-link {
    color: var(--primary-white);
    filter: brightness(0) invert(1);
    transition: var(--transition);
}

.navbar.scrolled .social-link {
    filter: none;
    color: var(--text-dark);
}

.social-link svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

.social-link:hover {
    opacity: 0.7;
    transform: translateY(-2px);
}

/* Language Switcher */
.language-switcher {
    display: flex;
    align-items: center;
    margin-left: 2rem;
    list-style: none;
}

.language-btn {
    background: transparent;
    border: 1px solid var(--primary-white);
    color: var(--primary-white);
    padding: 0.5rem 1rem;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 4px;
    font-family: 'Gotham', 'Gotham Pro', 'Gotham SSm', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.navbar.scrolled .language-btn {
    border-color: var(--text-dark);
    color: var(--text-dark);
}

.language-btn:hover {
    background: var(--primary-white);
    color: var(--text-dark);
    transform: translateY(-2px);
}

.navbar.scrolled .language-btn:hover {
    background: var(--text-dark);
    color: var(--primary-white);
}

.nav-link {
    color: var(--primary-white);
    text-decoration: none;
    font-family: 'Gotham', 'Gotham Pro', 'Gotham SSm', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    position: relative;
    transition: var(--transition);
    padding: 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.navbar.scrolled .nav-link {
    color: var(--text-dark);
    text-shadow: none;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-white);
    transition: var(--transition);
}

.navbar.scrolled .nav-link::after {
    background: var(--accent);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--primary-white);
    opacity: 0.9;
}

.navbar.scrolled .nav-link:hover {
    color: var(--accent);
    opacity: 1;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--primary-white);
    filter: brightness(0) invert(1);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.navbar.scrolled .mobile-menu-btn {
    filter: none;
    color: var(--text-dark);
    text-shadow: none;
}

/* ============================================
   BRAND INTRO
   ============================================ */

.brand-intro {
    position: relative;
    z-index: 1;
    padding: 1rem 5%;
    background: var(--primary-white);
    border-bottom: 1px solid var(--bg-dark-gray);
    /* Clear fixed navbar (min-height 100px + vertical padding) */
    margin-top: 120px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
}

.about-logo-container {
    text-align: center;
    margin-bottom: 4rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.about-logo-white {
    max-width: 400px;
    width: 100%;
    height: auto;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

.about-logo-white:hover {
    opacity: 1;
}

.brand-intro-text {
    max-width: 900px;
    margin: 0 auto;
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.55;
    letter-spacing: 0.01em;
    font-weight: 400;
    display: block;
    overflow: visible;
    position: relative;
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

/* ============================================
   HERO SLIDER SECTION
   ============================================ */
   /* Slider styles moved to slider.css */

.cta-button {
    display: inline-block;
    padding: 1.25rem 3rem;
    background: var(--accent);
    color: var(--primary-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05em;
    border-radius: 0;
    transition: var(--transition);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* ============================================
   SECTIONS
   ============================================ */

/* Intro Section with Video */
.intro-section {
    padding: 6rem 5%;
    position: relative;
    z-index: 200;
    /* Prevent CLS - reserve space */
    min-height: 600px;
    background: var(--primary-white);
}

.intro-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
    /* Prevent CLS - reserve space */
    min-height: 400px;
}

.intro-text {
    padding-right: 2rem;
    display: flex;
    align-items: center;
}

.intro-quote {
    font-family: 'FreightSansProBook', 'FreightSansPro-Book-Italic', 'Freight Sans Pro', serif;
    font-size: 34px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Experiences Section */
.experiences-section {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    padding-top: 2rem;
}

.experiences-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    font-family: 'Gotham', 'Gotham Pro', 'Gotham SSm', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.experiences-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
    align-items: center;
    justify-items: center;
    width: 100%;
}

.experiences-logos > * {
    width: 100%;
    display: flex;
    justify-content: center;
}

.experience-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    height: 60px; /* Fixed height to prevent CLS */
    padding: 0.5rem;
    transition: var(--transition);
    opacity: 0.7;
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
}

.experience-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}

.experience-logo img {
    max-width: 90%;
    max-height: 60px;
    width: 150px; /* Fixed width to prevent CLS */
    height: 60px; /* Fixed height to prevent CLS */
    aspect-ratio: 150 / 60; /* Prevent layout shift */
    object-fit: contain;
    filter: grayscale(100%);
    transition: var(--transition);
}

.experience-logo:hover img {
    filter: grayscale(0%);
}

.intro-video {
    position: relative;
    width: 100%;
    height: 0;
    /* Prevent CLS - reserve space for video */
    aspect-ratio: 16 / 9;
    min-height: 400px;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background: var(--bg-gray);
    box-shadow: var(--shadow-medium);
    display: flex;
    align-items: center;
}

.intro-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   CTA BAR SECTION
   ============================================ */

.cta-bar-section {
    padding: 4rem 5%;
    background: var(--bg-gray);
    position: relative;
    z-index: 200;
}

.cta-bar-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cta-bar-text {
    font-family: 'FreightSansProBook', 'FreightSansPro-Book-Italic', 'Freight Sans Pro', serif;
    font-size: 30px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0;
    flex: 1;
    min-width: 300px;
    letter-spacing: -0.01em;
}

.cta-bar-button {
    padding: 0.875rem 2.5rem;
    background: var(--primary-white);
    border: 1px solid var(--text-dark);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
    display: inline-block;
}

.cta-bar-button:hover {
    background: var(--text-dark);
    color: var(--primary-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

@media (max-width: 768px) {
    html,
    body {
        width: 100vw !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Remove any potential white background from parent elements */
    body > section.hero-slider,
    body > #mainHeroSlider {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .cta-bar-container {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-bar-text {
        text-align: center;
    }
    
    .cta-bar-button {
        width: 100%;
        max-width: 300px;
    }
}

/* Patara / AK Evi / Pizza Restaurant - Desktop için ek boşluklar (masaüstü görünüm) */
@media (min-width: 769px) {
    body[data-project="patara-dental"] #project-detail-page .patara-desktop-block {
        /* 2 görsel yan yana satırı ile alttaki büyük görsel arasında boşluk
           Yan yana görseller arasındaki gap ile aynı: 0.25rem */
        margin-top: 0.25rem !important;
        margin-bottom: 0 !important;
    }

    /* AK Evi Desktop - 2'li görsellerin altındaki tek görsel ile araya boşluk */
    body[data-project="ak-evi"] #project-detail-page .ak-desktop-block {
        margin-top: 0.25rem !important;  /* 2 yan yana görsel arasındaki boşlukla aynı */
        margin-bottom: 0 !important;
    }

    /* Pizza Restaurant Desktop - 2. görsel (image+text satırı) ile altındaki blok arasında boşluk */
    body[data-project="pizza-restaurant"] #project-detail-page .project-image-text-row {
        margin-bottom: 0.25rem !important;
    }

    /* Lujo Humidor Desktop - 2. görsel (image+text satırı) ile altındaki blok arasında boşluk */
    body[data-project="lujo-humidor"] #project-detail-page .project-image-text-row {
        margin-bottom: 0.25rem !important;
    }

    /* OK Evi Desktop - 2. görsel (image+text satırı) ile altındaki blok arasında boşluk */
    body[data-project="ok-evi"] #project-detail-page .project-image-text-row {
        margin-bottom: 0.25rem !important;
    }

    /* Hair Dresser Desktop - 2. görsel (image+text satırı) ile altındaki blok arasında boşluk */
    body[data-project="hair-dresser"] #project-detail-page .project-image-text-row {
        margin-bottom: 0.25rem !important;
    }

    /* Maxx Royal Desktop - 2. görsel (image+text satırı) ile altındaki blok arasında boşluk */
    body[data-project="maxx-royal"] #project-detail-page .project-image-text-row {
        margin-bottom: 0.25rem !important;
    }
}

.section {
    padding: 8rem 5%;
    position: relative;
    z-index: 200;
    background: var(--bg-light);
}

.projects-section {
    padding: 0 5% 8rem 5% !important;
}

.about-section,
.contact-section {
    padding-top: 1rem;
    padding-bottom: 8rem;
}

.section-title {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

.section-title h2 {
    display: inline-block;
    position: relative;
    padding-bottom: 1rem;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent);
}

/* ============================================
   PROJECTS GRID
   ============================================ */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 0;
    contain: layout style paint; /* Performance optimization */
    align-items: stretch; /* Make all cards equal height */
    content-visibility: auto; /* Performance optimization - only render visible items */
}

@media (max-width: 1200px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
    }
}

/* Scoped to projects grid only — must NOT affect hero slider .project-card */
.projects-grid .project-card {
    position: relative;
    background: var(--primary-white);
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--bg-dark-gray);
    opacity: 1;
    transform: translateY(0) translateZ(0); /* GPU acceleration */
    visibility: visible;
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%; /* Ensure cards fill grid cell height */
}

/* Filter hidden state */
.projects-grid .project-card.filtered-hidden {
    display: none !important;
}

.projects-grid .project-card {
    will-change: transform;
    transform: translateZ(0); /* GPU acceleration */
}

.projects-grid .project-card:hover {
    transform: translateY(-8px) translateZ(0);
    box-shadow: var(--shadow-heavy);
}

.project-image {
    width: 100%;
    height: 400px;
    aspect-ratio: 4 / 3; /* Prevent CLS - maintain aspect ratio */
    object-fit: cover;
    object-position: center;
    background: var(--bg-gray);
    transition: transform 0.3s ease;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    will-change: transform;
    transform: translateZ(0); /* GPU acceleration */
    display: block;
    flex-shrink: 0;
    content-visibility: auto; /* Performance optimization */
}

.project-card:hover .project-image {
    transform: scale(1.01);
}

.project-info {
    padding: 2rem;
    background: var(--primary-white);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow flex to work properly */
}

.project-category {
    font-size: 0.875rem;
    color: var(--text-light-gray);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.project-title {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    flex-shrink: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.project-location {
    font-size: 0.95rem;
    color: var(--text-gray);
    flex-shrink: 0;
    margin-top: auto;
}

/* ============================================
   PROJECT CATEGORIES
   ============================================ */

.category-filter {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0;
    padding-bottom: 0;
    flex-wrap: wrap;
    align-items: center;
}

.filter-btn {
    padding: 0.5rem 1.5rem;
    background: var(--primary-white);
    border: 1px solid var(--bg-dark-gray);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--accent);
    color: var(--primary-white);
    border-color: var(--accent);
}

/* ============================================
   PROJECT DETAIL MODAL
   ============================================ */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    overflow-y: auto;
    backdrop-filter: blur(10px);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-content {
    max-width: 1400px;
    width: 100%;
    max-height: 90vh;
    background: var(--primary-white);
    position: relative;
    animation: fadeIn 0.3s ease-out;
    overflow-y: auto;
    border-radius: 8px;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--accent);
    color: var(--primary-white);
    border: none;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
}

.modal-close:hover {
    transform: rotate(90deg);
}

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

.modal-gallery-mobile {
    display: none;
}

.modal-gallery h3 {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
    padding: 0;
}

.modal-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--bg-dark-gray);
}

.modal-image:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent);
}

/* ============================================
   IMAGE LIGHTBOX
   ============================================ */

.image-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.image-lightbox.active {
    display: flex;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: fadeIn 0.3s ease-out;
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-dark);
    border: none;
    width: 50px;
    height: 50px;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    background: var(--primary-white);
    transform: rotate(90deg);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-dark);
    border: none;
    width: 60px;
    height: 60px;
    font-size: 2.5rem;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
}

.lightbox-prev {
    left: 2rem;
}

.lightbox-next {
    right: 2rem;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--primary-white);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-counter {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--primary-white);
    font-size: 1rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .image-lightbox {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .lightbox-image,
    img.lightbox-image {
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .lightbox-close {
        top: 1rem !important;
        right: 1rem !important;
        position: fixed !important;
        z-index: 3001 !important;
    }
    
    .lightbox-prev,
    .lightbox-next {
        top: 50% !important;
        transform: translateY(-50%) !important;
        position: fixed !important;
        z-index: 3001 !important;
    }

    .lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        background: rgba(0, 0, 0, 0.7) !important;
        color: white !important;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 50px;
        height: 50px;
        font-size: 2rem;
        background: rgba(0, 0, 0, 0.7) !important;
        color: white !important;
    }

    .lightbox-prev {
        left: 1rem;
    }

    .lightbox-next {
        right: 1rem;
    }

    .lightbox-counter {
        bottom: 1rem;
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        border-radius: 20px;
    }

    .lightbox-counter {
        bottom: 1rem;
        font-size: 0.875rem;
        padding: 0.4rem 1rem;
    }
}

.modal-info {
    padding: 2rem;
    background: var(--bg-light);
}

.modal-full-content {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--bg-dark-gray);
}

.modal-full-content h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--text-dark);
    font-weight: 600;
}

.modal-full-content p {
    margin-bottom: 1.2rem;
    color: var(--text-gray);
    line-height: 1.9;
    font-size: 1rem;
}

/* Zorlu Center paragraphs - desktop */
.modal-full-content p.zorlu-center-paragraph {
    line-height: 1.9;
}

/* Zorlu Center second paragraph - match first paragraph line-height */
.modal-full-content p.zorlu-center-paragraph#zorlu-center-secondary,
.modal-full-content p#zorlu-center-secondary.zorlu-center-paragraph,
.modal-full-content > div > p.zorlu-center-paragraph:nth-child(2):not(:first-child) {
    margin-bottom: 0.8rem;
    line-height: 1.9; /* Match first paragraph line-height */
}

/* Project detail page - zorlu-center secondary container - column layout with spacing */
.zorlu-center-secondary-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1rem; /* Space between image and text */
}

/* Project detail page - zorlu-center secondary text (desktop) - match first paragraph line-height */
#zorlu-center-secondary-detail,
p#zorlu-center-secondary-detail,
.zorlu-center-secondary-text,
p.zorlu-center-secondary-text,
.project-image-item-side p.zorlu-center-secondary-text,
.project-image-item-side #zorlu-center-secondary-detail {
    line-height: 1.9; /* Match first paragraph line-height */
}

/* ============================================
   MODAL VIDEOS
   ============================================ */

.modal-videos {
    padding: 0 2rem;
}

.modal-videos video {
    width: 100%;
    max-height: 500px;
    border-radius: 8px;
    background: var(--bg-gray);
    display: block;
    cursor: pointer;
    transition: var(--transition);
    /* Ensure poster is visible */
    object-fit: contain;
    position: relative;
}

/* Ensure video poster is visible - especially on mobile */
.modal-videos video::-webkit-media-controls-panel {
    display: flex !important;
}

/* Ensure poster is loaded and visible on mobile */
.modal-videos video[poster] {
    background: var(--bg-gray);
    /* Force poster to be displayed */
    -webkit-poster-image: attr(poster);
}

.modal-videos video:hover {
    opacity: 0.9;
}

.modal-videos video:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Categorized Modal Styles */
.modal-category-tab:hover {
    color: var(--text-dark) !important;
    background: var(--bg-light);
}

.modal-category-content {
    animation: fadeIn 0.3s ease-out;
}

@media (max-width: 768px) {
    .modal.active {
        padding: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal-content > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force all direct children to be in column */
    .modal-content > div,
    .modal-content > section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    .modal-cover-image,
    div[style*="modal-cover-image"],
    div[style*="width: 100%"][style*="max-height: 50vh"] {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 50vh !important;
        overflow: hidden !important;
        position: relative !important;
        order: 1 !important;
        flex-shrink: 0 !important;
    }

    .modal-cover-img,
    img.modal-cover-img,
    img[style*="width: 100%"][style*="object-fit: cover"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        object-fit: cover !important;
        display: block !important;
        cursor: pointer !important;
    }

    .modal-info,
    div.modal-info,
    div[style*="padding: 1.5rem"] {
        padding: 1.5rem !important;
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }
    
    .modal-gallery,
    .modal-categorized-gallery,
    .modal-categorized-gallery-mobile,
    .modal-gallery-mobile,
    div[style*="modal-gallery"] {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }
    
    .modal-full-content,
    div.modal-full-content {
        order: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }

    .modal-info h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    .modal-gallery-mobile {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0 1.5rem 1.5rem;
    }

    .modal-gallery-mobile .modal-image {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin-bottom: 1rem;
        border-radius: 8px;
        object-fit: contain !important;
    }

    .modal-gallery {
        padding: 1rem;
        gap: 1rem;
    }

    .modal-info {
        padding: 1rem;
    }

    .modal-full-content {
        padding-top: 1rem;
        margin-top: 1rem;
    }
    
    .modal-videos {
        padding: 0 1.5rem !important;
    }
    
    .modal-videos video {
        width: 100% !important;
        max-height: 400px !important;
        border-radius: 8px !important;
        /* Ensure poster is visible on mobile */
        object-fit: contain !important;
        background: var(--bg-gray) !important;
        /* Force poster to load and display */
        min-height: 200px !important;
    }
    
    /* Ensure poster is visible on mobile */
    .modal-videos video[poster] {
        background: var(--bg-gray) !important;
    }
    
    /* Prevent fullscreen button on mobile */
    .modal-videos video::-webkit-media-controls-fullscreen-button {
        display: none !important;
    }
    
    .modal-full-content p {
        line-height: 1.6 !important; /* Match Patara Dental Clinic spacing */
        font-size: 1rem !important;
        color: var(--text-gray) !important;
        margin-bottom: 1rem !important; /* Reduced margin */
        margin-top: 0 !important;
        font-weight: 400 !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
        letter-spacing: normal !important;
    }
    
    /* Modal - reduce spacing between headings and text */
    .modal-full-content h1 + p,
    .modal-full-content h2 + p,
    .modal-full-content h3 + p {
        margin-top: 0.75rem !important; /* Reduced space after headings */
    }
    
    /* Modal - section headings margin reduction */
    .modal-full-content h2,
    .modal-full-content h3 {
        margin-bottom: 1rem !important; /* Reduced space after section headings */
        line-height: 1.3 !important;
    }
    
    /* Ensure zorlu-center paragraphs have identical minimal styling on mobile - no centering or area-based alignment */
    /* Force same min-height for both paragraphs to match visual appearance (17 lines = 17 * 1.7rem = 28.9rem) */
    /* Exclude second paragraph from this rule - it has its own ID-based rule */
    .modal-full-content > div > p.zorlu-center-paragraph:not(#zorlu-center-secondary),
    .modal-full-content div p.zorlu-center-paragraph:not(#zorlu-center-secondary),
    .modal-full-content p.zorlu-center-paragraph:not(#zorlu-center-secondary),
    p.zorlu-center-paragraph:not(#zorlu-center-secondary) {
        line-height: 1.7 !important;
        font-size: 1rem !important;
        color: var(--text-gray) !important;
        margin-bottom: 0.8rem !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        min-height: 29rem !important; /* Force same height for both paragraphs (17 lines) */
        font-weight: 400 !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
        letter-spacing: normal !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        align-items: unset !important;
        justify-content: unset !important;
    }
    
    /* Remove line-height and any centering from parent div to prevent inheritance */
    .modal-full-content > div.modal-full-content-inner,
    .modal-full-content > div[style*="color"],
    .modal-full-content > div:has(> p.zorlu-center-paragraph) {
        line-height: normal !important;
        display: block !important;
        align-items: unset !important;
        justify-content: unset !important;
        text-align: left !important;
    }
    
    /* First paragraph - normal font size - SAME min-height as second */
    .modal-full-content > div > p.zorlu-center-paragraph:first-child,
    .modal-full-content > div > p.zorlu-center-paragraph:nth-child(1),
    .modal-full-content-inner > p.zorlu-center-paragraph:first-child,
    .modal-full-content-inner > p.zorlu-center-paragraph:nth-child(1) {
        line-height: 1.7 !important;
        font-size: 1rem !important;
        color: var(--text-gray) !important;
        margin-bottom: 0.8rem !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        min-height: 29rem !important; /* Force same height for both paragraphs */
        font-weight: 400 !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
        letter-spacing: normal !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        align-items: unset !important;
        justify-content: unset !important;
    }
    
    /* Second paragraph - Mobile only: Force 16px font size (Living & Dining Seçimleri) - completely independent from desktop */
    /* Override ALL possible selectors with maximum specificity - must be after all other zorlu-center rules */
    #zorlu-center-secondary,
    p#zorlu-center-secondary,
    .modal-full-content #zorlu-center-secondary,
    .modal-full-content p#zorlu-center-secondary,
    .modal-full-content > div > p#zorlu-center-secondary,
    .modal-full-content > div > p#zorlu-center-secondary.zorlu-center-paragraph,
    .modal-full-content div p#zorlu-center-secondary,
    .modal-full-content div p#zorlu-center-secondary.zorlu-center-paragraph,
    .modal-full-content-inner p#zorlu-center-secondary,
    .modal-full-content-inner p#zorlu-center-secondary.zorlu-center-paragraph,
    p.zorlu-center-paragraph#zorlu-center-secondary,
    p#zorlu-center-secondary.zorlu-center-paragraph,
    [id="zorlu-center-secondary"],
    p[id="zorlu-center-secondary"],
    .modal-full-content [id="zorlu-center-secondary"],
    .modal-full-content p[id="zorlu-center-secondary"],
    .modal-full-content > div > p.zorlu-center-paragraph:nth-child(2),
    .modal-full-content > div > p.zorlu-center-paragraph:last-child:not(:first-child) {
        line-height: 1.5 !important; /* Reduced line-height for tighter spacing */
        font-size: 16px !important; /* Force exactly 16px on mobile - override all other styles including inline */
        color: var(--text-gray) !important;
        margin-bottom: 0.3rem !important; /* Reduced bottom margin on mobile */
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        min-height: 29rem !important; /* Force same height for both paragraphs (17 lines) */
        font-weight: 400 !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
        letter-spacing: normal !important;
        display: block !important;
        width: 100% !important;
        align-items: unset !important;
        justify-content: unset !important;
    }
    
    /* Additional rule to catch any remaining cases - highest specificity */
    .modal-full-content > div > p.zorlu-center-paragraph#zorlu-center-secondary,
    .modal-full-content div p.zorlu-center-paragraph#zorlu-center-secondary {
        font-size: 16px !important;
    }

    .modal-category-tabs {
        padding: 0 1rem !important;
        gap: 0.5rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-category-tab {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap;
    }

    .modal-category-content {
        padding: 0 1rem 1rem !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.about-content {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text {
    font-size: 1.125rem;
    line-height: 1.9;
}

.about-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    box-shadow: var(--shadow-medium);
}

.about-content-reverse {
    grid-template-columns: 1fr 1fr;
}

.about-content-reverse > div:first-child {
    order: 1;
}

.about-content-reverse > div:last-child {
    order: 2;
}

@media (max-width: 768px) {
    .about-content-reverse > div:first-child,
    .about-content-reverse > div:last-child {
        order: 0;
    }
}

/* ============================================
   SERVICES SECTION
   ============================================ */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background: var(--primary-white);
    padding: 3rem 2rem;
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--bg-dark-gray);
    box-shadow: var(--shadow-light);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.service-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.service-description {
    color: var(--text-gray);
}

/* ============================================
   SERVICES LIST (Tasarımsal Liste)
   ============================================ */

.services-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.service-item {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--bg-dark-gray);
    transition: var(--transition);
}

.service-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.service-item:hover {
    padding-left: 1rem;
}

.service-number {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-gray);
    font-style: italic;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-width: 2.5rem;
    line-height: 1.6;
}

.service-content {
    flex: 1;
    cursor: pointer;
}

.service-name {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    font-style: normal;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
}

.service-toggle {
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
    transition: var(--transition);
    user-select: none;
}

.service-toggle::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--accent);
    transition: var(--transition);
    line-height: 1;
}

.service-item.active .service-toggle::after {
    content: '−';
    transform: translateY(-50%) rotate(0deg);
}

.service-toggle:hover {
    color: var(--accent);
}

.service-description-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding-top: 0;
}

.service-item.active .service-description-wrapper {
    max-height: 500px;
    padding-top: 0.75rem;
}

.service-text {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-gray);
    line-height: 1.6;
    letter-spacing: 0.01em;
    font-weight: 400;
    max-width: 100%;
    margin: 0;
}

@media (max-width: 768px) {
    .services-list {
        gap: 2rem;
    }

    .service-item {
        gap: 1.5rem;
        padding-bottom: 2rem;
    }

    .service-item:hover {
        padding-left: 0.5rem;
    }

    .service-number {
        font-size: 1.25rem;
        min-width: 2rem;
    }

    .service-name {
        font-size: 1rem;
    }

    .service-text {
        font-size: 0.85rem;
    }
}

/* ============================================
   CONTACT FORM
   ============================================ */

.contact-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-container-modern {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

.contact-form-modern {
    background: transparent;
    padding: 0;
}

.contact-title-modern {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
    font-family: 'Gotham', 'Gotham Pro', 'Gotham SSm', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.modern-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group-modern {
    position: relative;
}

.form-input-modern,
.form-textarea-modern {
    width: 100%;
    padding: 1.25rem 0;
    border: none;
    border-bottom: 2px solid var(--bg-dark-gray);
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
    color: var(--text-dark);
    outline: none;
}

.form-input-modern::placeholder,
.form-textarea-modern::placeholder {
    color: var(--text-light-gray);
    opacity: 0.7;
}

.form-input-modern:focus,
.form-textarea-modern:focus {
    border-bottom-color: var(--accent);
}

.form-textarea-modern {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.submit-btn-modern {
    width: 100%;
    padding: 1.5rem 3rem;
    background: var(--accent);
    color: var(--primary-white);
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: var(--transition);
    margin-top: 1rem;
}

.submit-btn-modern:hover {
    background: var(--text-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.contact-info-modern {
    padding: 0;
}

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

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

.contact-info-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gray);
    border-radius: 50%;
    color: var(--accent);
    transition: var(--transition);
}

.contact-info-item:hover .contact-info-icon {
    background: var(--accent);
    color: var(--primary-white);
    transform: scale(1.1);
}

.contact-info-content {
    flex: 1;
}

.contact-info-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-family: 'Gotham', 'Gotham Pro', 'Gotham SSm', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.contact-info-text {
    color: var(--text-gray);
    line-height: 1.8;
    font-size: 1rem;
    margin: 0;
}

.contact-link {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
}

.contact-link:hover {
    border-bottom-color: var(--accent);
}

.contact-social-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bg-dark-gray);
}

.social-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--primary-white);
    border: 2px solid var(--bg-dark-gray);
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
    border-radius: 0;
}

.social-button:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--primary-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.social-button svg {
    flex-shrink: 0;
}

.contact-logo-container-large {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bg-dark-gray);
    text-align: left;
}

.contact-logo-white-large {
    max-width: 260px;
    width: 260px;
    height: auto;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: block;
}

.contact-logo-white-large:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .contact-logo-container-large {
        text-align: center;
    }

    .contact-logo-white-large {
        max-width: 200px;
        width: 200px;
        height: auto;
    }
}

/* ============================================
   FLOATING SOCIAL BUTTONS
   ============================================ */

.floating-social-buttons {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.floating-social-btn {
    width: 60px;
    height: 60px;
    background: #000000;
    color: var(--primary-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.floating-social-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.floating-social-btn svg {
    width: 24px;
    height: 24px;
}

.floating-instagram svg {
    stroke: currentColor;
}

.floating-instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.contact-form {
    background: var(--primary-white);
    padding: 3rem;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--bg-dark-gray);
}

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

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-dark);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--bg-dark-gray);
    background: var(--bg-light);
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
    color: var(--text-dark);
}

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

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

.submit-btn {
    width: 100%;
    padding: 1.25rem;
    background: var(--accent);
    color: var(--primary-white);
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--transition);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: #000000;
    color: var(--primary-white);
    padding: 5rem 5% 1rem;
    position: relative;
    z-index: 500;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: 4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Left Section */
.footer-left {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    margin-bottom: 1.5rem;
}

.footer-logo-img {
    height: 64px;
    width: auto;
    max-width: 260px;
    max-height: 64px;
    object-fit: contain;
}

.footer-brand-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    font-style: italic;
}

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

.footer-social-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: var(--primary-white);
    transition: var(--transition);
    background: transparent;
}

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

.footer-social-icon svg {
    width: 20px;
    height: 20px;
}

/* Middle Section */
.footer-middle {
    display: flex;
    flex-direction: column;
}

.footer-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-white);
    margin-bottom: 1.5rem;
    font-family: 'Gotham', 'Gotham Pro', 'Gotham SSm', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.95rem;
    font-weight: 400;
    position: relative;
    padding-left: 0;
    display: inline-block;
    width: fit-content;
}

.footer-link::before {
    content: '→';
    margin-right: 0.5rem;
    opacity: 0;
    transition: var(--transition);
    display: inline-block;
    transform: translateX(-10px);
}

.footer-link:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.footer-link:hover {
    color: var(--primary-white);
    padding-left: 0.5rem;
}

/* Right Section */
.footer-right {
    display: flex;
    flex-direction: column;
}

.footer-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.footer-project-thumb {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: var(--bg-dark-gray);
    /* Prevent CLS - reserve space */
    aspect-ratio: 1 / 1;
    min-height: 200px;
    transition: var(--transition);
    cursor: pointer;
}

.footer-project-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
    /* Optimize image loading for thumbnails */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    max-width: 100%;
    max-height: 100%;
}

.footer-project-thumb:hover img {
    transform: scale(1.1);
}

.footer-project-thumb:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

.footer-developer {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

.footer-dev-link {
    color: var(--primary-white);
    text-decoration: none;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
}

.footer-dev-link:hover {
    border-bottom-color: var(--primary-white);
}

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

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

@media (max-width: 768px) {
    .footer {
        padding: 4rem 5% 2rem;
    }

    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .footer-right {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .footer-projects-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .footer-project-thumb {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .footer-left {
        align-items: center;
    }

    .footer-logo-img {
        height: 52px;
        width: auto;
        max-width: 200px;
        max-height: 52px;
    }

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

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

    .footer-middle {
        align-items: center;
    }

    .footer-links {
        align-items: center;
    }

    .footer-link::before {
        display: none;
    }

    .footer-link:hover {
        padding-left: 0;
    }

    .footer-right {
        align-items: center;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .footer-projects-grid {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

.fade-in {
    animation: fadeInUp 0.8s ease-out;
    will-change: opacity, transform;
    transform: translateZ(0); /* GPU acceleration */
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    /* Force intro container to column layout on mobile */
    .intro-container,
    #introContainerMobile,
    div.intro-container[style*="grid"] {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid: none !important;
        grid-auto-flow: unset !important;
        grid-auto-columns: unset !important;
        grid-auto-rows: unset !important;
    }
    
    .intro-container > *,
    #introContainerMobile > *,
    div.intro-container[style*="grid"] > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }
    
    .intro-text,
    #introContainerMobile .intro-text,
    div.intro-container[style*="grid"] .intro-text {
        order: 1 !important;
        padding-right: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .intro-video,
    #introContainerMobile .intro-video,
    div.intro-container[style*="grid"] .intro-video {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    
    .nav-menu {
        position: fixed;
        top: 100px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 100px);
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 2rem;
        transition: var(--transition);
        justify-content: center;
        align-items: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .navbar.scrolled .nav-menu {
        background: rgba(255, 255, 255, 0.98);
    }
    
    .nav-menu li {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .nav-menu .nav-link {
        display: inline-block;
        text-align: center;
        width: auto;
        margin: 0 auto;
    }
    
    .nav-menu .nav-link::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .nav-menu .nav-link:hover::after,
    .nav-menu .nav-link.active::after {
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

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

    .social-media {
        margin-left: 0 !important;
        margin-top: 1rem;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
        display: flex !important;
    }
    
    .language-switcher {
        margin-left: 0 !important;
        margin-top: 1rem;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
        display: flex !important;
    }

    .mobile-menu-btn {
        display: block;
        margin-right: 0;
        margin-left: auto;
        padding: 0.5rem;
        align-self: center;
    }

    /* Slider responsive styles moved to slider.css */

    .brand-intro {
        padding: 1rem 1.5rem;
        margin-top: 110px; /* Clear fixed navbar */
        min-height: auto;
    }

    .brand-intro-text {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-top: 0.5rem;
        color: var(--text-dark);
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative;
        z-index: 2;
    }

    .intro-section {
        padding: 3rem 1.5rem;
    }

    .intro-container {
        gap: 2.5rem;
        margin-bottom: 3rem;
    }

    .intro-text {
        padding-right: 0;
        text-align: left;
    }

    .intro-quote {
        font-size: 1.375rem;
        line-height: 1.5;
        text-align: left;
    }

    .experiences-section {
        padding-top: 1rem;
        padding-bottom: 2rem;
        max-width: 100%;
    }

    .experiences-title {
        font-size: 1.375rem;
        margin-bottom: 1.25rem;
        letter-spacing: 0.06em;
        text-align: center;
    }

    .experiences-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0.75rem;
        padding: 0 0.5rem;
        max-width: 100%;
    }

    .experience-logo {
        min-height: 48px;
        height: 48px; /* Fixed height to prevent CLS */
        padding: 0.5rem 0.25rem;
        max-width: 150px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .experience-logo img {
        max-width: 90%;
        max-height: 48px;
        width: 120px; /* Fixed width to prevent CLS (48 * 2.5) */
        height: 48px; /* Fixed height to prevent CLS */
        aspect-ratio: 150 / 60; /* Prevent layout shift */
        object-fit: contain;
    }

    .section {
        padding: 4rem 2rem;
    }

    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        max-width: 100% !important;
    }

    .projects-grid .project-card {
        width: 100%;
        margin: 0;
        border-radius: 8px;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .projects-grid .project-image {
        height: 250px;
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        order: 1;
    }

    .projects-grid .project-info {
        padding: 1.25rem;
        width: 100% !important;
        flex-shrink: 0 !important;
        order: 2;
    }

    .projects-grid .project-title {
        font-size: 1.125rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }

    .projects-grid .project-category {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .project-location {
        font-size: 0.875rem;
    }

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

    .contact-form {
        padding: 2rem 1.5rem;
    }

    .contact-container > div {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .contact-grid-modern {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .contact-title-modern {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    /* About page - mobile text styling (match project detail page) */
    .about-text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    .contact-info-item {
        margin-bottom: 2rem;
    }

    .category-filter {
        gap: 0.4rem;
        padding: 0 1rem;
        margin-bottom: 0.75rem;
        margin-top: 0.75rem;
        justify-content: center !important;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: wrap;
    }

    .category-filter::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        padding: 0.4rem 1rem;
        font-size: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 1rem 1.5rem;
    }
    
    .nav-container {
        padding: 0;
    }
    
    .mobile-menu-btn {
        padding: 0.5rem;
        margin-left: auto;
        margin-right: 0;
        z-index: 1001;
        align-self: center;
    }

    .logo-img {
        height: 56px;
        width: auto;
        max-width: 200px;
        max-height: 56px;
    }

    .navbar:not(.scrolled) .logo-img {
        height: 56px;
        width: auto;
        max-width: 200px;
        max-height: 56px;
    }

    .navbar.scrolled .logo-img {
        height: 56px;
        width: auto;
        max-width: 200px;
        max-height: 56px;
    }

    .intro-section {
        padding: 2.5rem 1rem;
    }

    .intro-quote {
        font-size: 1.25rem;
        line-height: 1.45;
    }

    .experiences-title {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }

    .experiences-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem 0.5rem;
        padding: 0 0.25rem;
    }

    .experience-logo {
        min-height: 42px;
        height: 42px; /* Fixed height to prevent CLS */
        max-width: 130px;
        padding: 0.4rem 0.15rem;
    }

    .experience-logo img {
        max-height: 42px;
        max-width: 85%;
        width: 105px; /* Fixed width to prevent CLS (42 * 2.5) */
        height: 42px; /* Fixed height to prevent CLS */
        aspect-ratio: 150 / 60; /* Prevent layout shift */
    }

    .about-logo-white {
        max-width: 280px;
    }
    
    .about-logo-container {
        margin-bottom: 3rem;
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }

    .floating-social-buttons {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .floating-social-btn {
        width: 50px;
        height: 50px;
    }

    .floating-social-btn svg {
        width: 22px;
        height: 22px;
    }

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

    .cta-button {
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }

    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 0.75rem !important;
        max-width: 100% !important;
    }
    
    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        max-width: 100% !important;
    }

    .projects-grid .project-card {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .projects-grid .project-image {
        height: 220px;
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        order: 1;
    }
    
    .projects-grid .project-image-container {
        height: 220px !important;
        width: 100% !important;
        order: 1;
    }

    .projects-grid .project-info {
        padding: 1rem;
        width: 100% !important;
        flex-shrink: 0 !important;
        order: 2;
    }

    .project-title {
        font-size: 1rem;
        line-height: 1.3;
    }

    .project-category {
        font-size: 0.7rem;
    }

    .project-location {
        font-size: 0.8rem;
    }

    .category-filter {
        padding: 0 0.5rem;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        margin-top: 0.75rem;
        justify-content: center !important;
        align-items: center;
        flex-wrap: wrap;
    }

    .filter-btn {
        padding: 0.4rem 1rem;
        font-size: 0.75rem;
    }

    .brand-intro {
        padding: 1rem 1rem;
        margin-top: calc(80px + 1.5rem); /* Logo height (80px) + navbar padding top (0.75rem) + bottom (0.75rem) */
    }

    .brand-intro-text {
        font-size: 0.6rem;
        line-height: 1.4;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
    }
}

/* 390-420px arasında Brand-intro metni tamamen görünmeli */
@media (min-width: 390px) and (max-width: 420px) {
    .brand-intro-text {
        font-size: 0.45rem !important;
        line-height: 1.3 !important;
        padding: 0 0.5rem !important;
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        max-height: none !important;
    }
}

@media (max-width: 389px) {
    .brand-intro-text {
        font-size: 0.45rem !important;
        line-height: 1.3 !important;
        padding: 0 0.5rem !important;
    }
}

/* Yacht photo attribution */
.project-image-container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    flex-shrink: 0;
}

.yacht-photo-by {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    z-index: 10;
    pointer-events: none;
}

@media (max-width: 768px) {
    .yacht-photo-by {
        font-size: 0.65rem;
        padding: 0.4rem 0.8rem;
    }
}

/* ============================================
   YACHT PROJECTS MODAL
   ============================================ */

.yacht-projects-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-dark-gray) transparent;
}

.yacht-projects-grid::-webkit-scrollbar {
    width: 8px;
}

.yacht-projects-grid::-webkit-scrollbar-track {
    background: transparent;
}

.yacht-projects-grid::-webkit-scrollbar-thumb {
    background: var(--bg-dark-gray);
    border-radius: 4px;
}

.yacht-projects-grid::-webkit-scrollbar-thumb:hover {
    background: var(--text-gray);
}

.yacht-project-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .yacht-project-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    }

    @media (max-width: 768px) {
        .yacht-projects-grid {
            grid-template-columns: 1fr !important;
            gap: 1.5rem !important;
            padding: 1rem !important;
        }
        
        .yacht-project-card {
            margin-bottom: 0;
        }
    }

/* Yacht project cards without images */
.project-card .project-image[style*="gradient"] {
    height: 400px;
    text-align: center;
    padding: 2rem;
    word-break: break-word;
}

@media (max-width: 768px) {
    .project-card .project-image[style*="gradient"] {
        height: 300px;
        font-size: 1.25rem;
        padding: 1.5rem;
    }
}

/* Yacht project tasks styling */
.yacht-tasks {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--bg-dark-gray);
    flex-shrink: 0;
}

.yacht-tasks ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: disc;
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.6;
}

.yacht-tasks li {
    margin-bottom: 0.5rem;
}

/* Yacht project cards - no hover effect */
.project-card[data-project^="seaxplorer"],
.project-card[data-project^="ys5302"],
.project-card[data-project^="b80"],
.project-card[data-project^="b117"],
.project-card[data-project^="b65"],
.project-card[data-project^="b72"] {
    cursor: default;
}

.project-card[data-project^="seaxplorer"]:hover,
.project-card[data-project^="ys5302"]:hover,
.project-card[data-project^="b80"]:hover,
.project-card[data-project^="b117"]:hover,
.project-card[data-project^="b65"]:hover,
.project-card[data-project^="b72"]:hover {
    transform: none;
    box-shadow: var(--shadow-light);
}

.project-card[data-project^="seaxplorer"]:hover .project-image,
.project-card[data-project^="ys5302"]:hover .project-image,
.project-card[data-project^="b80"]:hover .project-image,
.project-card[data-project^="b117"]:hover .project-image,
.project-card[data-project^="b65"]:hover .project-image,
.project-card[data-project^="b72"]:hover .project-image {
    transform: none;
}

/* AK Evi Banyo Special Layout */
.ak-evi-banyo-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    margin-bottom: 0;
    padding: 0;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.ak-evi-banyo-text {
    padding: 0 5vw;
    max-width: 1100px;
    margin: 0 auto;
}

.ak-evi-banyo-images {
    width: 100%;
}

@media (max-width: 1024px) {
    .ak-evi-banyo-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* OGK Evi Special Layout */
.ogk-evi-top-image {
    margin-bottom: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.ogk-evi-large-image {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.ogk-evi-large-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.ogk-evi-bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.ogk-evi-bottom-text {
    padding: 0 5vw;
    margin: 2rem auto 0;
    max-width: 1100px;
}

.ogk-evi-bottom-image {
    width: 100%;
}

.ogk-evi-bottom-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

@media (max-width: 1024px) {
    .ogk-evi-bottom-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .ogk-evi-bottom-image {
        order: -1; /* Image appears before text on mobile */
    }
}

/* ============================================
   PROJECT DETAIL PAGE
   ============================================ */

/* Minimal Navigation for Project Detail */
.navbar-minimal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10000;
    padding: 1rem 5%;
    border-bottom: 1px solid var(--bg-dark-gray);
}

.nav-minimal-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-minimal-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition);
}

.nav-minimal-back:hover {
    color: var(--text-gray);
}

.nav-minimal-logo {
    display: flex;
    align-items: center;
}

.nav-minimal-logo .logo-img {
    height: 56px;
    width: auto;
    max-width: 200px;
    max-height: 56px;
}

/* Full Width Project Detail Section */
.project-detail-section-full {
    padding: 6rem 0 0;
    background: var(--bg-light);
    width: 100%;
    max-width: 100%;
}

.project-header-full {
    width: 100%;
    padding: 4rem 0;
    background: var(--primary-white);
    border-bottom: 1px solid var(--bg-dark-gray);
}

.project-header-info-full {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 5%;
}

.project-detail-title-full {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.project-detail-location-full {
    font-size: 1.125rem;
    color: var(--text-gray);
    margin: 0;
}

/* NG Sapanca Vitrin ve Hair Dresser için kapak fotoğrafı boyutunu masaüstünde küçült */
@media (min-width: 769px) {
    /* NG Sapanca Vitrin projesi için */
    body[data-project="ng-sapanca-vitrin"] .project-main-image {
        max-width: 95% !important;
        margin: 0 auto 0.25rem auto !important;
    }
    
    body[data-project="ng-sapanca-vitrin"] .project-main-image img {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Hair Dresser projesi için */
    body[data-project="hair-dresser"] .project-main-image {
        max-width: 95% !important;
        margin: 0 auto 0.25rem auto !important;
    }
    
    body[data-project="hair-dresser"] .project-main-image img {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Desktop spacing between media items for specific projects */
    
    /* General rule: All media containers (images, videos, side-by-side, text rows) should have spacing between them */
    #project-detail-page .project-content-full > .project-main-image,
    #project-detail-page .project-content-full > .project-video-wrapper-top,
    #project-detail-page .project-content-full > .project-images-side-by-side,
    #project-detail-page .project-content-full > .project-image-text-row {
        margin-bottom: 2rem !important;
    }
    
    /* Remove margin from last child */
    #project-detail-page .project-content-full > *:last-child {
        margin-bottom: 0 !important;
    }
    
    /* EB Evi - video ile görsel arasında, ilk görsel ile altındaki fotolar arasında */
    body[data-project="eb-evi"] .project-video-wrapper-top {
        margin-bottom: 2rem !important;
    }
    body[data-project="eb-evi"] .project-main-image {
        margin-bottom: 2rem !important;
    }
    
    /* Pizza Restaurant - video ile görsel arasında */
    body[data-project="pizza-restaurant"] .project-video-wrapper-top {
        margin-bottom: 2rem !important;
    }
    
    /* Zorlu Center - ilk görsel ile altındaki görsel arasında */
    body[data-project="zorlu-center"] .project-main-image {
        margin-bottom: 2rem !important;
    }
    
    /* Lujo Hotel - video ile görsel arasında */
    body[data-project="lujo-hotel"] .project-video-wrapper-top {
        margin-bottom: 2rem !important;
    }
    
    /* Patara Dental - ilk 2 görselle 3. görsel arasında ve 4,5. görselle 6. görsel arasında */
    body[data-project="patara-dental"] .project-image-text-row:nth-of-type(1) {
        margin-bottom: 2rem !important;
    }
    body[data-project="patara-dental"] .project-images-side-by-side:nth-of-type(1) {
        margin-bottom: 2rem !important;
    }
    body[data-project="patara-dental"] .project-images-side-by-side:nth-of-type(2) {
        margin-bottom: 2rem !important;
    }
    
    /* AK Evi - 1,2 ile 3. arasında, 4,5 ile 6. arasında, 7,8 ile 9,10. arasında */
    body[data-project="ak-evi"] .project-image-text-row:nth-of-type(1),
    body[data-project="ak-evi"] .project-image-text-row:nth-of-type(2) {
        margin-bottom: 2rem !important;
    }
    body[data-project="ak-evi"] .project-images-side-by-side:nth-of-type(2),
    body[data-project="ak-evi"] .project-images-side-by-side:nth-of-type(3) {
        margin-bottom: 2rem !important;
    }
    
    /* OGK Evi - görseller arasında */
    body[data-project="ogk-evi"] .project-main-image,
    body[data-project="ogk-evi"] .project-images-side-by-side,
    body[data-project="ogk-evi"] .project-image-text-row {
        margin-bottom: 2rem !important;
    }
    
    /* OK Evi - video ile görsel arasında */
    body[data-project="ok-evi"] .project-video-wrapper-top {
        margin-bottom: 2rem !important;
    }
    
    /* Maxx Royal - video ile görsel arasında */
    body[data-project="maxx-royal"] .project-video-wrapper-top {
        margin-bottom: 2rem !important;
    }
    
    /* NG Sapanca - görsel ile fotoğraf arasında */
    body[data-project="ng-sapanca-vitrin"] .project-main-image {
        margin-bottom: 2rem !important;
    }
    
    /* Best Western - ilk görsel ile altındaki görsel arasında */
    body[data-project="best-western"] .project-main-image {
        margin-bottom: 2rem !important;
    }
    
    /* Hotel Guest Room - ilk görsel ile altındaki arasında */
    body[data-project="hotel-guest-room"] .project-main-image {
        margin-bottom: 2rem !important;
    }
    
    /* NG Phaselis - 1,3,4. görseller arasında */
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(1) {
        margin-bottom: 2rem !important;
    }
    body[data-project="ng-phaselis"] .project-image-text-row {
        margin-bottom: 2rem !important;
    }
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(2) {
        margin-bottom: 2rem !important;
    }
    
    /* Titanic Golf - ilk görselle altındaki arasında */
    body[data-project="titanic-golf"] .project-image-text-row {
        margin-bottom: 2rem !important;
    }
}

.project-content-full {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Minimal Footer */
.footer-minimal {
    background: var(--primary-white);
    border-top: 1px solid var(--bg-dark-gray);
    padding: 2rem 5%;
    margin-top: 4rem;
}

.footer-minimal-content {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.footer-minimal-copyright {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin: 0;
}

.project-category-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--bg-gray);
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 4px;
    width: fit-content;
}

.project-detail-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.project-detail-location {
    font-size: 1.125rem;
    color: var(--text-gray);
    margin: 0;
}

.project-content {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

/* Category Tabs */
.project-category-tabs {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--bg-dark-gray);
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.project-category-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-gray);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
}

.project-category-tab:hover {
    color: var(--text-dark);
}

.project-category-tab.active {
    color: var(--text-dark);
    border-bottom-color: var(--text-dark);
}

.project-category-content {
    display: none;
}

.project-category-content.active {
    display: block;
}

/* Image Grid - Modern Layout */
.project-image-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}

.project-image-item {
    position: relative;
    overflow: visible;
    border-radius: 8px;
    background: var(--bg-gray);
}

.project-image-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: var(--transition);
    display: block;
}

.project-image-item:hover img {
    transform: scale(1.05);
}

.project-image-large {
    grid-column: span 8;
}

.project-image-small {
    grid-column: span 4;
}

/* Alternating layout for visual interest */
.project-image-grid .project-image-item:nth-child(3n+1) {
    grid-column: span 8;
}

.project-image-grid .project-image-item:nth-child(3n+2),
.project-image-grid .project-image-item:nth-child(3n+3) {
    grid-column: span 4;
}

/* Text Content with Images */
.project-text-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
}

.project-text-block {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.project-text-block p {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--text-dark);
    margin: 0;
}

.project-image-block {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-gray);
}

.project-image-block img {
    width: 100%;
    height: auto;
    display: block;
}

/* Modern Dynamic Layout - Full Width */
.project-modern-layout {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modern-item {
    width: 100%;
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    margin-bottom: 0;
    will-change: opacity, transform;
    transform: translateZ(0); /* GPU acceleration */
}

.modern-item[data-index="0"] {
    animation-delay: 0.1s;
}

.modern-item[data-index="1"] {
    animation-delay: 0.2s;
}

.modern-item[data-index="2"] {
    animation-delay: 0.3s;
}

.modern-item[data-index="3"] {
    animation-delay: 0.4s;
}

.modern-item[data-index="4"] {
    animation-delay: 0.5s;
}

.modern-item[data-index="5"] {
    animation-delay: 0.6s;
}

.modern-item[data-index] {
    animation-delay: calc(min(var(--index, 0) * 0.15s, 1s));
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* Rectangle Grid Layout - 2x2 Grid */
.modern-rectangle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.modern-left-column {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0;
}

.modern-right-column {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0;
}

.modern-image-top-left {
    width: 100%;
    overflow: visible;
    background: var(--bg-gray);
    border-radius: 0;
    position: relative;
    z-index: 0;
}

.modern-image-top-left img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.modern-image-top-left:hover img {
    transform: scale(1.02);
}

.modern-text-bottom-left {
    padding: 0;
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.modern-text-bottom-left p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
}

.modern-text-top-right {
    padding: 0;
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.modern-text-top-right p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
}

.modern-image-bottom-right {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-gray);
    border-radius: 0;
    position: relative;
    z-index: 0;
}

.modern-image-bottom-right:empty {
    display: none;
}

.modern-image-bottom-right img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.modern-image-bottom-right:hover img {
    transform: scale(1.02);
}

/* Full-width text block */
.modern-text-full-width {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.modern-text-full-width p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0;
}

/* Regnum Carya - desktop spacing adjustments */
/* Büyük kapak görseli ile altındaki satır arasında diğer projelerle aynı ince boşluk */
body[data-project="regnum-carya"] #project-detail-page .project-main-image {
    margin-bottom: 0.25rem !important;
}

body[data-project="regnum-carya"] #project-detail-page .project-main-image + .project-image-text-row {
    margin-top: 0 !important;
}

/* Regnum Carya metin bloğu - mobil ve desktop için kontrollü boşluk */
.regnum-carya-text {
    margin-top: 1rem !important;
}

/* Spark by Hilton - desktop spacing adjustments */
/* Add spacing between first image and remaining images on desktop */
body[data-project="spark-hilton"] .project-image-text-row {
    margin-bottom: 2rem !important;
}

body[data-project="spark-hilton"] .project-image-text-row + .project-images-side-by-side {
    margin-top: 0 !important;
}

body[data-project="spark-hilton"] .project-content-full > div[style*="width: 100%"]:has(> img:only-child) + .project-images-side-by-side {
    margin-top: 2rem !important;
}

/* Regnum Carya paragrafları: üç satırın araları eşit boşluklu */
.regnum-carya-text p {
    line-height: 1.7 !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
}

.regnum-carya-text p:first-child {
    /* Başlık ile altındaki paragraf arasında bir satır daha fazla boşluk */
    margin-bottom: 1.25rem !important;
}

.regnum-carya-text p:last-child {
    margin-bottom: 0 !important;
}

/* Regnum Carya - masaüstünde açıklama paragrafı ile fotoğraf satırı arasına boşluk ekle */
@media (min-width: 769px) {
    body[data-project="regnum-carya"] #project-detail-page .regnum-carya-text p:last-child {
        margin-top: 0.75rem !important; /* açıklama paragrafı ile "Fotoğraf:" satırı arası */
    }

    /* NG Phaselis Bay Desktop – tüm görseller arasında eşit boşluk */
    body[data-project="ng-phaselis"] #project-detail-page .project-main-image,
    body[data-project="ng-phaselis"] #project-detail-page .project-image-text-row,
    body[data-project="ng-phaselis"] #project-detail-page .project-images-side-by-side,
    body[data-project="ng-phaselis"] #project-detail-page .project-content-full > div[style*="width: 100%"]:has(> img:only-child) {
        margin-bottom: 0.25rem !important;
    }

    /* Son görsel satırının altında ekstra boşluk olmasın */
    body[data-project="ng-phaselis"] #project-detail-page .project-content-full > *:last-child {
        margin-bottom: 0 !important;
    }
}

.regnum-carya-title-para {
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* No space after title paragraph */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.regnum-carya-credit {
    margin-top: 0 !important; /* No space before credit */
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.5 !important;
}

/* Image + Text Side by Side */
.modern-image-text,
.modern-text-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* Shared text container spacing for mixed layouts */
.project-text-right {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 5vw;
}

.project-text-right .project-text-content {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 768px) {
    .ak-evi-banyo-text,
    .ogk-evi-bottom-text,
    .modern-text-full-width,
    .project-text-right {
        padding: 0 1.5rem;
    }
    
    /* Patara Dental Clinic - match Spark by Hilton mobile text styling */
    .modern-text-full-width p,
    #project-detail-page .modern-text-full-width p,
    .project-content-full .modern-text-full-width p,
    .modern-item.modern-text-full-width p {
        font-size: 1rem !important; /* Match Spark by Hilton mobile font size */
        line-height: 1.6 !important; /* Reduced line-height for tighter spacing on mobile */
    }
    
    /* Patara Dental Clinic - section titles mobile styling */
    .modern-text-full-width h2 {
        font-size: 1.25rem !important;
        letter-spacing: -0.02em !important;
        line-height: 1.3 !important;
    }

    /* NG Phaselis Bay – Mobil: tüm görsel blokları arasında eşit boşluk */
    body[data-project="ng-phaselis"] #project-detail-page .project-main-image,
    body[data-project="ng-phaselis"] #project-detail-page .project-image-text-row,
    body[data-project="ng-phaselis"] #project-detail-page .project-images-side-by-side,
    body[data-project="ng-phaselis"] #project-detail-page .project-content-full > div[style*="width: 100%"]:has(> img:only-child) {
        margin-bottom: 0.25rem !important;
    }

    body[data-project="ng-phaselis"] #project-detail-page .project-content-full > *:last-child {
        margin-bottom: 0 !important;
    }
}

.modern-image-text .modern-image-wrapper,
.modern-text-image .modern-image-wrapper {
    width: 100%;
    overflow: visible;
    background: var(--bg-gray);
    border-radius: 0;
    position: relative;
}

.modern-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.02) 100%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.modern-image-wrapper:hover::before {
    opacity: 1;
}

.modern-image-text img,
.modern-text-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    display: block;
}

.modern-image-text:hover img,
.modern-text-image:hover img {
    transform: scale(1.05);
}

.modern-text-content {
    padding: 0;
}

.modern-text-content p {
    font-size: 1.125rem;
    line-height: 1.95;
    color: var(--text-dark);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
}


/* Two Images with Text */
.modern-two-images-text {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    align-items: start;
    margin-bottom: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.modern-images-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.modern-image-item {
    width: 100%;
    overflow: visible;
    background: var(--bg-gray);
    border-radius: 0;
    position: relative;
}

.modern-image-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.02) 100%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.modern-image-item:hover::before {
    opacity: 1;
}

.modern-image-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    display: block;
}

.modern-image-item:hover img {
    transform: scale(1.05);
}

.modern-two-images-text .modern-text-content {
    padding: 2rem 0;
    align-self: center;
}

/* Two Images Only */
.modern-two-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.modern-two-images .modern-image-item {
    /* aspect-ratio removed - images will use original dimensions */
}

/* Text Only */
.modern-text-only {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.modern-text-only .modern-text-content {
    padding: 0;
}

/* Image Only */
.modern-image-only {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.modern-image-only .modern-image-wrapper {
    width: 100%;
    overflow: visible;
    background: var(--bg-gray);
    border-radius: 0;
}

.modern-image-only img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.modern-image-only:hover img {
    transform: scale(1.03);
}

/* Remaining Images Grid at Bottom - 2 side by side */
.project-remaining-images-grid-two {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    border-top: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 1024px) {
    .project-remaining-images-grid-two {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .project-remaining-images-grid-two {
        grid-template-columns: 1fr;
    }
}

.remaining-image-item-two {
    width: 100%;
    overflow: visible;
    border-radius: 0;
    background: var(--bg-light-gray);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remaining-image-item-two:empty {
    display: none;
}

.remaining-image-item-two img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    display: block;
    padding: 0.5rem;
}

.remaining-image-item-two:hover img {
    transform: scale(1.02);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .modern-image-text,
    .modern-text-image,
    .modern-two-images-text {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }
    
    .modern-images-group {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .modern-image-item {
        /* aspect-ratio removed - images will use original dimensions */
    }
    
    .modern-text-content {
        padding: 0;
    }
    
    .modern-large-image,
    .modern-image-only,
    .modern-text-only {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    /* --------------------------------------------- */
    /* Patara Dental – Mobil yeni layout            */
    /* --------------------------------------------- */
    body[data-project="patara-dental"] #project-detail-page .patara-layout {
        width: 100%;
        max-width: 100%;
        padding: 0 1.25rem 2.5rem 1.25rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    body[data-project="patara-dental"] #project-detail-page .patara-section {
        display: flex;
        flex-direction: column;
        gap: 0; /* Görseller arası boşluk patara-image-row üzerinden kontrol edilecek */
    }

    body[data-project="patara-dental"] #project-detail-page .patara-section-header {
        margin: 0;
    }

    body[data-project="patara-dental"] #project-detail-page .patara-heading {
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.3;
        color: var(--text-dark);
        margin: 0;
    }

    body[data-project="patara-dental"] #project-detail-page .patara-text-block {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 0.75rem; /* Metin bloğu ile ilk görsel arasında kontrollü boşluk */
    }

    body[data-project="patara-dental"] #project-detail-page .patara-paragraph {
        font-size: 1.02rem;
        line-height: 1.9;
        color: var(--text-gray);
        margin: 0;
    }

    /* Görseller – her satırda eşit 0.25rem boşluk */
    body[data-project="patara-dental"] #project-detail-page .patara-image-row {
        width: 100%;
        display: grid;
        gap: 1px;      /* ince çerçeve boşluğu */
        margin: 1px 0; /* satırlar arası da aynı incelikte boşluk */
    }

    body[data-project="patara-dental"] #project-detail-page .patara-image-row--two {
        grid-template-columns: 1fr 1fr;
    }

    body[data-project="patara-dental"] #project-detail-page .patara-image-row--single {
        grid-template-columns: 1fr;
    }

    body[data-project="patara-dental"] #project-detail-page .patara-image-figure {
        margin: 0;
        width: 100%;
    }

    body[data-project="patara-dental"] #project-detail-page .patara-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* --------------------------------------------- */
    /* AK Evi – Mobil yeni layout                   */
    /* --------------------------------------------- */
    body[data-project="ak-evi"] #project-detail-page .ak-layout {
        width: 100%;
        max-width: 100%;
        padding: 0 1.25rem 2.5rem 1.25rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    body[data-project="ak-evi"] #project-detail-page .ak-section {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    body[data-project="ak-evi"] #project-detail-page .ak-section-header {
        margin: 0;
    }

    body[data-project="ak-evi"] #project-detail-page .ak-heading {
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.3;
        color: var(--text-dark);
        margin: 0;
    }

    body[data-project="ak-evi"] #project-detail-page .ak-text-block {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    body[data-project="ak-evi"] #project-detail-page .ak-paragraph {
        font-size: 1.02rem;
        line-height: 1.9;
        color: var(--text-gray);
        margin: 0;
    }

    body[data-project="ak-evi"] #project-detail-page .ak-image-row {
        width: 100%;
        display: grid;
        gap: 1px;
        margin: 1px 0;
    }

    body[data-project="ak-evi"] #project-detail-page .ak-image-row--single {
        grid-template-columns: 1fr;
    }

    body[data-project="ak-evi"] #project-detail-page .ak-image-figure {
        margin: 0;
        width: 100%;
    }

    body[data-project="ak-evi"] #project-detail-page .ak-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* NG Phaselis Bay – Mobil: tüm görsel blokları arasında eşit boşluk */
    body[data-project="ng-phaselis"] #project-detail-page .project-main-image,
    body[data-project="ng-phaselis"] #project-detail-page .project-image-text-row,
    body[data-project="ng-phaselis"] #project-detail-page .project-images-side-by-side,
    body[data-project="ng-phaselis"] #project-detail-page .project-content-full > div[style*="width: 100%"]:has(> img:only-child) {
        margin-bottom: 0.25rem !important;
    }

    body[data-project="ng-phaselis"] #project-detail-page .project-content-full > *:last-child {
        margin-bottom: 0 !important;
    }

    /* Eski Patara mobil override'larını devre dışı bırakmak için spesifik yeni yapı kullanılıyor;
       aşağıdaki modern-layout genel ayarları diğer projeler için geçerli kalır. */

    /* modern-item için boşluk - görsel içerenler için */
    /* Removed margin overrides - let inline styles control spacing like desktop */
    
    /* modern-item'ın ilk elemanı için üst margin yok */
    .modern-item:first-child:not(.modern-text-full-width) {
        margin-top: 0 !important;
    }
    
    /* modern-text-full-width sadece text içeriyorsa margin yok */
    .modern-item.modern-text-full-width {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .modern-image-text,
    .modern-text-image,
    .modern-two-images-text {
        gap: 0;
        padding: 0;
    }
    
    .modern-text-content p {
        font-size: 1rem;
        line-height: 1.85;
    }
    
    .modern-large-image .modern-image-wrapper {
        /* aspect-ratio removed - images will use original dimensions */
    }
    
    .modern-rectangle-grid {
        grid-template-columns: 1fr;
        aspect-ratio: auto;
        gap: 0.5rem;
    }
    
    .modern-left-column {
        grid-template-rows: auto auto;
        gap: 0;
    }
    
    .modern-right-column {
        grid-template-rows: auto auto;
        gap: 0;
    }
    
    .modern-image-top-left,
    .modern-image-bottom-right {
        /* aspect-ratio removed - images will use original dimensions */
    }
    
    .project-remaining-images-grid-two {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-left: 5%;
        padding-right: 5%;
    }
}

.magazine-row {
    width: 100%;
    display: grid;
    gap: 2rem;
    margin-bottom: 4rem;
    align-items: center;
}

/* Layout 1: Image Left, Text Right */
.magazine-row-image-text {
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
}

.magazine-image-left {
    width: 100%;
    height: 100%;
    min-height: 500px;
    overflow: hidden;
    background: var(--bg-gray);
}

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

.magazine-text-right {
    display: flex;
    align-items: center;
    padding: 2rem;
}

.magazine-text-right p {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--text-dark);
    margin: 0;
}

/* Layout 2: Two Images Side by Side */
.magazine-row-two-images {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    min-height: 400px;
}

.magazine-image-duo {
    width: 100%;
    height: 100%;
    min-height: 400px;
    overflow: hidden;
    background: var(--bg-gray);
}

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

.magazine-image-duo:hover img {
    transform: scale(1.05);
}

/* Layout 2 with Text: Two Images Left, Text Right */
.magazine-row-two-images-text {
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    min-height: 500px;
    align-items: start;
}

.magazine-images-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    height: 100%;
}

.magazine-images-left .magazine-image-duo {
    min-height: 500px;
}

.magazine-text-right-duo {
    display: flex;
    align-items: flex-start;
    padding: 2rem 0;
    height: 100%;
}

.magazine-text-right-duo p {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--text-dark);
    margin: 0;
}

/* Layout 3: Text Left, Image Right */
.magazine-row-text-image {
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
}

.magazine-text-left {
    display: flex;
    align-items: center;
    padding: 2rem;
}

.magazine-text-left p {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--text-dark);
    margin: 0;
}

.magazine-image-right {
    width: 100%;
    height: 100%;
    min-height: 500px;
    overflow: hidden;
    background: var(--bg-gray);
}

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

/* Text Only Row */
.magazine-row-text-only {
    max-width: 800px;
    margin: 0 auto 4rem;
    padding: 0 2rem;
}

.magazine-row-text-only p {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--text-dark);
    margin: 0;
}

/* Image Only Row */
.magazine-row-image-only {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 4rem;
    overflow: visible;
    background: var(--bg-gray);
}

.magazine-row-image-only img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Hover Effects */
.magazine-image-left:hover img,
.magazine-image-right:hover img {
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .magazine-row-image-text,
    .magazine-row-text-image {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .magazine-image-left,
    .magazine-image-right {
        min-height: 400px;
    }
    
    .magazine-text-right,
    .magazine-text-left {
        padding: 1.5rem;
    }
    
    .magazine-row-two-images {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .magazine-row-two-images-text {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .magazine-images-left {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .magazine-images-left .magazine-image-duo {
        min-height: 300px;
    }
    
    .magazine-text-right-duo {
        padding: 1.5rem 0;
    }
    
    .magazine-image-duo {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .magazine-row {
        margin-bottom: 2rem;
        gap: 1rem;
    }
    
    .magazine-image-left,
    .magazine-image-right,
    .magazine-image-duo {
        min-height: 300px;
    }
    
    .magazine-text-right,
    .magazine-text-left {
        padding: 1rem;
    }
    
    .magazine-text-right p,
    .magazine-text-left p,
    .magazine-row-text-only p {
        font-size: 1rem;
    }
}

/* Video Wrapper */
.project-video-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-gray);
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-video {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Video at top */
.project-video-wrapper-top {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.project-video-wrapper-top video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    max-height: 60vh;
    object-fit: contain;
}

/* Ensure video controls work properly, including fullscreen */
.project-video-wrapper-top video::-webkit-media-controls-fullscreen-button {
    display: inline-block;
}

.project-video-wrapper-top video::-webkit-media-controls-play-button {
    display: inline-block;
}

.project-video-wrapper-top video::-webkit-media-controls-volume-slider {
    display: inline-block;
}

.project-video-wrapper-top video::-webkit-media-controls-mute-button {
    display: inline-block;
}

.project-video-wrapper-top.vertical-video {
    max-width: 500px;
    margin: 0 auto;
}

.project-video-wrapper-top.vertical-video video {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
}

.project-video-spacer {
    height: 0;
    width: 100%;
}

/* Vertical Video Support */
.project-video-wrapper.vertical-video {
    max-width: 500px;
    margin: 0 auto 3rem;
}

.project-video-wrapper.vertical-video .project-video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .project-image-large {
        grid-column: span 12;
    }
    
    .project-image-small {
        grid-column: span 6;
    }
    
    .project-image-grid .project-image-item:nth-child(3n+1) {
        grid-column: span 12;
    }
    
    .project-image-grid .project-image-item:nth-child(3n+2),
    .project-image-grid .project-image-item:nth-child(3n+3) {
        grid-column: span 6;
    }
    
    /* Proje detay sayfası için 1024px'de de tek sütun */
    #project-detail-page .project-image-grid {
        grid-template-columns: 1fr !important;
    }
    
    #project-detail-page .project-image-item,
    #project-detail-page .project-image-large,
    #project-detail-page .project-image-small,
    #project-detail-page .project-image-grid .project-image-item:nth-child(3n+1),
    #project-detail-page .project-image-grid .project-image-item:nth-child(3n+2),
    #project-detail-page .project-image-grid .project-image-item:nth-child(3n+3) {
        grid-column: 1 !important;
    }
}

@media (max-width: 768px) {
    #introContainerMobile {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid: none !important;
        gap: 3rem;
        margin-bottom: 3rem;
    }
    
    
    .intro-quote {
        font-size: 24px;
        line-height: 1.5;
    }
    
    /* Video full width on mobile */
    .project-video-wrapper,
    .project-video-wrapper-top {
        width: 100vw !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .project-video-wrapper-top video,
    .project-video-wrapper video,
    .project-video {
        width: 100vw !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    .project-video-wrapper-top.vertical-video {
        max-width: 100vw !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .project-video-wrapper-top.vertical-video video {
        width: 100vw !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-width: 100% !important;
    }
    
    .experiences-section {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    .experiences-title {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
        letter-spacing: 0.05em;
    }
    
    .experiences-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0.5rem;
        padding: 0 0.25rem;
    }

    .experience-logo {
        min-height: 45px;
        height: 45px; /* Fixed height to prevent CLS */
        padding: 0.4rem 0.2rem;
        max-width: 130px;
    }

    .experience-logo img {
        max-width: 100%;
        max-height: 45px;
        width: 112.5px; /* Fixed width to prevent CLS (45 * 2.5) */
        height: 45px; /* Fixed height to prevent CLS */
        aspect-ratio: 150 / 60; /* Prevent layout shift */
        object-fit: contain;
    }
    
    .project-detail-section {
        padding: 6rem 0 3rem;
    }
    
    .project-detail-section-full {
        padding: 6rem 0 0 !important;
    }
    
    /* Video container full width on mobile - remove side padding */
    .project-detail-section-full .project-video-wrapper,
    .project-detail-section-full .project-video-wrapper-top {
        width: 100vw !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .project-detail-section-full .project-video-wrapper-top video,
    .project-detail-section-full .project-video-wrapper video {
        width: 100vw !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    .project-header {
        margin-bottom: 2rem;
    }
    
    .project-content {
        gap: 2rem;
    }
    
    .project-image-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .project-image-large,
    .project-image-small,
    .project-image-grid .project-image-item {
        grid-column: span 1 !important;
        /* aspect-ratio removed - images will use original dimensions */
    }
    
    /* Proje detay sayfası için genel kurallar da override edilmeli */
    #project-detail-page .project-image-grid {
        grid-template-columns: 1fr !important;
    }
    
    #project-detail-page .project-image-item,
    #project-detail-page .project-image-large,
    #project-detail-page .project-image-small {
        grid-column: 1 !important;
    }
    
    .project-category-tabs {
        gap: 0.5rem;
    }
    
    .project-category-tab {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .project-text-block p {
        font-size: 1rem;
    }
}

/* ============================================
   PROJE DETAY SAYFASI (#project-detail-page) - BAĞIMSIZ MOBİL TASARIM
   Tek grid sistemi, her şey alt alta
   ============================================ */

/* Mobil için tamamen bağımsız tasarım - 768px ve altı */
@media (max-width: 768px) {
    /* Ana container - tek sütun */
    #project-detail-page {
        padding: 4rem 0 0 !important;
        background: var(--bg-light) !important;
    }
    
    /* Header - tek sütun */
    #project-detail-page .project-header-full {
        padding: 2rem 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #project-detail-page .project-header-info-full {
        padding: 0 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    #project-detail-page .project-detail-title-full {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 0.75rem !important; /* Reduced space after title */
    }
    
    #project-detail-page .project-detail-location-full {
        font-size: 1rem !important;
        margin-bottom: 1rem !important; /* Reduced space after location */
    }
    
    #project-detail-page .project-category-badge {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin-bottom: 0.75rem !important; /* Reduced space after badge */
    }
    
    /* Content - tek sütun */
    #project-detail-page .project-content-full {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important; /* Remove gap, use margin on children instead */
    }
    
    /* Mobile: Match desktop spacing exactly - NO margins, let inline styles control */
    /* Remove ALL margin overrides - desktop has no margins, mobile should match */
    #project-detail-page .project-content-full > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Video wrapper - margins for spacing */
    #project-detail-page .project-video-wrapper-top {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Video element - border and margin for spacing */
    #project-detail-page .project-video-wrapper-top .project-video,
    #project-detail-page .project-video {
        border-style: solid !important;
        border-width: 1px !important;
        border-color: rgba(0, 0, 0, 1) !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }
    
    /* Cover image (project-main-image) - border and margin for spacing like video */
    #project-detail-page .project-main-image img {
        border-style: solid !important;
        border-width: 1px !important;
        border-color: rgba(0, 0, 0, 1) !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }
    
    /* All image containers - no margins */
    #project-detail-page .project-content-full > div.project-main-image,
    #project-detail-page .project-content-full > div.project-images-side-by-side,
    #project-detail-page .project-content-full > div.project-image-text-row,
    #project-detail-page .project-content-full > div[style*="margin"] {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Category Tabs - tek sütun */
    #project-detail-page .project-category-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0 1rem 1rem 1rem !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #project-detail-page .project-category-tab {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Category Content - tek sütun */
    #project-detail-page .project-category-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        margin: 0 !important;
    }
    
    /* Image Grid - TEK SÜTUN, her şey alt alta - ZORUNLU */
    #project-detail-page .project-image-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 1rem !important;
        row-gap: 1rem !important;
        column-gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        margin: 0 0 2rem 0 !important;
        box-sizing: border-box !important;
    }
    
    /* TÜM grid column ve row tanımlarını iptal et - margin ekle */
    #project-detail-page .project-image-item,
    #project-detail-page .project-image-large,
    #project-detail-page .project-image-small,
    #project-detail-page .project-image-grid .project-image-item,
    #project-detail-page .project-image-grid .project-image-item:nth-child(1),
    #project-detail-page .project-image-grid .project-image-item:nth-child(2),
    #project-detail-page .project-image-grid .project-image-item:nth-child(3),
    #project-detail-page .project-image-grid .project-image-item:nth-child(3n+1),
    #project-detail-page .project-image-grid .project-image-item:nth-child(3n+2),
    #project-detail-page .project-image-grid .project-image-item:nth-child(3n+3),
    #project-detail-page .project-image-grid .project-image-item:nth-child(4n+1),
    #project-detail-page .project-image-grid .project-image-item:nth-child(4n+2),
    #project-detail-page .project-image-grid .project-image-item:nth-child(4n+3),
    #project-detail-page .project-image-grid .project-image-item:nth-child(4n+4),
    #project-detail-page .project-image-grid .project-image-item:nth-child(n),
    #project-detail-page .project-image-grid > *,
    #project-detail-page [class*="project-image"] {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 !important;
        grid-column-start: 1 !important;
        grid-column-end: -1 !important;
        grid-row: auto !important;
        grid-row-start: auto !important;
        grid-row-end: auto !important;
        margin: 0 0 0.25rem 0 !important;
        margin-bottom: 0.25rem !important;
        float: none !important;
        clear: both !important;
        display: block !important;
    }
    
    /* Son görselde margin-bottom olmasın */
    #project-detail-page .project-image-grid > *:last-child,
    #project-detail-page .project-image-item:last-child {
        margin-bottom: 0 !important;
    }
    
    #project-detail-page .project-image-item img,
    #project-detail-page .project-image-large img,
    #project-detail-page .project-image-small img,
    #project-detail-page .project-image-grid img,
    #project-detail-page img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
        margin: 2px 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        transition: opacity 0.2s ease !important;
    }
    
    #project-detail-page img:hover {
        opacity: 0.9 !important;
    }
    
    /* Skip logos and nav icons */
    #project-detail-page .navbar img,
    #project-detail-page .footer img,
    #project-detail-page .logo img {
        cursor: default !important;
    }
    
    /* Patara Dental - mobilde tüm görseller arası eşit boşluk (300px'e kadar dahil) */
    /* Paragraf metni ile ilk görsel arası boşluk (her paragrafın ilk görseli ile ikinci görseli arası) */
    /* project-modern-layout içinde modern-item.modern-text-full-width sonrası görseller - inline style override */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .modern-item.modern-text-full-width + .project-images-side-by-side[style*="margin: 0"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .modern-item.modern-text-full-width + div[style*="width: 100%"][style*="margin: 0"]:not(.modern-item):not(.modern-text-full-width),
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .modern-item.modern-text-full-width + .project-images-side-by-side,
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .modern-item.modern-text-full-width + div[style*="width: 100%"]:not(.modern-item):not(.modern-text-full-width) {
        margin-top: 4px !important; /* Diğer boşluklar kadar (4px) - inline style override */
    }
    /* project-modern-layout içinde görseller arası boşluk - inline style override */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side[style*="margin: 0"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout div[style*="width: 100%"][style*="max-width: 100%"][style*="margin: 0"]:not(.modern-item):not(.modern-text-full-width),
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side,
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout div[style*="width: 100%"][style*="max-width: 100%"]:not(.modern-item):not(.modern-text-full-width) {
        margin-bottom: 4px !important; /* Inline style override */
    }
    /* Son görsel için margin kaldır */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout > *:last-child {
        margin-bottom: 0 !important;
    }
    /* 2. görsel container'ı ile 3. görsel arasındaki boşluk (margin-bottom) - project-content-full için */
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div.project-image-text-row,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div.project-images-side-by-side,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div.project-main-image {
        margin-bottom: 4px !important;
    }
    /* Class'ı olmayan ama sadece img içeren div'ler için (üçüncü görsel gibi) - project-content-full için */
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div[style*="width: 100%"][style*="max-width: 100%"]:not(.project-image-text-row):not(.project-images-side-by-side):not(.project-main-image):not(.modern-item):not(.modern-text-full-width) {
        margin-bottom: 4px !important;
    }
    /* Patara Dental - ilk görsel ile 2. görsel arası yatay boşluk - gap yerine margin kullan */
    /* Gap'i kaldır ve margin kullan */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side[style*="gap: 0.25rem"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side {
        gap: 0 !important; /* Gap'i kaldır, margin kullanacağız */
    }
    /* Patara Dental - project-image-item-side elementlerine margin ekle (yan yana görseller arası boşluk) */
    /* Inline style'daki margin: 0px'i override et - çok spesifik selector */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side[style*="margin: 0px"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side[style*="margin: 0"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side {
        margin-right: 4px !important; /* İlk görsel ile 2. görsel arası boşluk - diğer boşluklar kadar */
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side:last-child {
        margin-right: 0 !important; /* Son görsel için margin kaldır */
    }
    /* Son görsel için margin kaldır */
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div:last-child,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > .project-image-text-row:last-child,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > .project-images-side-by-side:last-child,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > .project-main-image:last-child {
        margin-bottom: 0 !important;
    }
    /* Patara Dental - görsellerin kendisi için standart 2px margin (genel margin: 2px 0 kullan) */
    body[data-project="patara-dental"] #project-detail-page .project-content-full img,
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout img {
        margin: 2px 0 !important; /* Standart 2px margin */
    }
    /* Patara Dental - container margin'larını kaldır, sadece img margin kullan */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side,
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout div[style*="width: 100%"]:not(.modern-item):not(.modern-text-full-width),
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div.project-image-text-row,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div.project-images-side-by-side,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div.project-main-image,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div[style*="width: 100%"][style*="max-width: 100%"]:not(.project-image-text-row):not(.project-images-side-by-side):not(.project-main-image):not(.modern-item):not(.modern-text-full-width) {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
    /* Patara Dental - yan yana görseller arası yatay boşluk kaldır (sadece dikey margin kullan) */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    /* AK Evi - mobilde tüm görseller arası eşit boşluk (2px margin) */
    body[data-project="ak-evi"] .project-content-full > .project-image-text-row,
    body[data-project="ak-evi"] .project-content-full > .project-images-side-by-side,
    body[data-project="ak-evi"] .project-content-full > .project-main-image {
        margin-bottom: 0 !important;
    }
    body[data-project="ak-evi"] .project-image-text-row img,
    body[data-project="ak-evi"] .project-images-side-by-side img,
    body[data-project="ak-evi"] .project-main-image img {
        margin: 2px 0 !important; /* Standart 2px margin */
    }
    
    /* NG Phaselis - mobilde standart boşluk (2px margin gibi) */
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(1) {
        margin-bottom: 0 !important;
    }
    body[data-project="ng-phaselis"] .project-image-text-row {
        margin-bottom: 0 !important;
    }
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(2) {
        margin-bottom: 0 !important;
    }
    /* NG Phaselis - tüm görseller arası standart 2px margin */
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(1) img,
    body[data-project="ng-phaselis"] .project-image-text-row img,
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(2) img {
        margin: 2px 0 !important;
    }
    /* NG Phaselis - 8,9 görselleri için özel (min-height kaldır) */
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(2) .project-image-item-side:nth-child(4),
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(2) .project-image-item-side:nth-child(5) {
        min-height: auto !important;
        max-height: none !important;
    }
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(2) .project-image-item-side:nth-child(4) img,
    body[data-project="ng-phaselis"] .project-images-side-by-side:nth-of-type(2) .project-image-item-side:nth-child(5) img {
        max-height: none !important;
        height: auto !important;
    }
    
    /* Antalya Havalimanı CIP Lounge - Mobil Tasarım (Sıfırdan) */
    /* Mobil layout container */
    body[data-project="antalya-cip"] .antalya-cip-mobile-layout {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    
    /* İlk görsel - order: 1 (en üstte) */
    body[data-project="antalya-cip"] .antalya-cip-mobile-image:first-of-type {
        order: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Metin bloğu - order: 2 (1. görselden sonra, 2. görselden önce) */
    body[data-project="antalya-cip"] .antalya-cip-mobile-text {
        width: 100% !important;
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
        background: var(--primary-white);
        order: 2 !important;
    }
    
    /* Diğer görseller - order: 3 (metinden sonra) */
    body[data-project="antalya-cip"] .antalya-cip-mobile-image:not(:first-of-type) {
        order: 3 !important;
    }
    
    /* Her görsel container - container margin kaldırıldı, img margin kullanılacak */
    body[data-project="antalya-cip"] .antalya-cip-mobile-image {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--primary-white);
    }
    
    /* Görsellerin kendisi - diğer projelerdeki gibi 2px margin (toplam 4px boşluk) */
    body[data-project="antalya-cip"] .antalya-cip-mobile-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 2px 0 !important; /* Diğer projelerdeki gibi standart 2px margin */
        padding: 0 !important;
    }
    
    /* Eski desktop layout elementlerini mobilde gizle */
    body[data-project="antalya-cip"] .project-image-text-row,
    body[data-project="antalya-cip"] .project-images-side-by-side {
        display: none !important;
    }
    
    /* Desktop'ta mobil layout'u gizle */
    @media (min-width: 769px) {
        body[data-project="antalya-cip"] .antalya-cip-mobile-layout {
            display: none !important;
        }
        
        /* Desktop'ta eski layout'u göster */
        body[data-project="antalya-cip"] .project-image-text-row,
        body[data-project="antalya-cip"] .project-images-side-by-side {
            display: grid !important;
        }
    }
    
    /* Grid container'ı tek sütuna zorla */
    #project-detail-page .project-image-grid {
        grid-template-columns: 1fr !important;
        grid-auto-columns: 1fr !important;
        grid-auto-flow: row !important;
    }
    
    /* Text Content - tek sütun */
    #project-detail-page .project-text-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    #project-detail-page .project-text-block {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #project-detail-page .project-text-block p {
        font-size: 1rem !important;
        line-height: 1.6 !important; /* Match Patara Dental Clinic spacing */
        margin: 0 0 1rem 0 !important;
    }
    
    /* All projects - consistent paragraph line-height on mobile */
    #project-detail-page p,
    #project-detail-page .project-content-full p,
    #project-detail-page .modal-full-content p {
        line-height: 1.6 !important; /* Match Patara Dental Clinic spacing */
    }
    
    /* All projects - reduce spacing between headings and text on mobile */
    #project-detail-page h1 + p,
    #project-detail-page h2 + p,
    #project-detail-page h3 + p,
    #project-detail-page .project-detail-title-full + p,
    #project-detail-page .project-detail-title + p {
        margin-top: 0.75rem !important; /* Reduced space after headings */
    }
    
    /* All projects - section headings margin reduction on mobile */
    #project-detail-page h2,
    #project-detail-page h3 {
        margin-bottom: 1rem !important; /* Reduced space after section headings */
        line-height: 1.3 !important;
    }
    
    /* Footer - tek sütun */
    #project-detail-page ~ .footer-minimal {
        padding: 2rem 1rem !important;
        margin-top: 2rem !important;
    }
    
    #project-detail-page ~ .footer-minimal .footer-minimal-content {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* Küçük mobil cihazlar için ek optimizasyon - 480px ve altı */
@media (max-width: 480px) {
    #project-detail-page {
        padding: 3.5rem 0 0 !important;
    }
    
    #project-detail-page .project-header-full {
        padding: 1.5rem 0.75rem !important;
    }
    
    #project-detail-page .project-header-info-full {
        padding: 0 0.75rem !important;
    }
    
    #project-detail-page .project-detail-title-full {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 0.75rem !important; /* Reduced space after title */
    }
    
    #project-detail-page .project-detail-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 0.75rem !important; /* Reduced space after title */
    }
    
    #project-detail-page .project-detail-location-full {
        margin-bottom: 1rem !important; /* Reduced space after location */
    }
    
    /* 480px: Match desktop spacing exactly - let inline styles control spacing */
    /* Remove all margin overrides so JavaScript inline styles work the same as desktop */
    
    #project-detail-page .project-modern-layout > .modern-item:first-child:not(.modern-text-full-width) {
        margin-top: 0 !important;
    }
    
    #project-detail-page .project-modern-layout > .modern-item.modern-text-full-width {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Removed margin overrides - let inline styles control spacing like desktop */
    
    #project-detail-page .project-category-tabs {
        padding: 0 0.75rem 1rem 0.75rem !important;
    }
}

/* Çok küçük mobil cihazlar için - 400px ve altı */
@media (max-width: 400px) {
    /* 400px: Match desktop spacing exactly - let inline styles control spacing */
    /* Remove all margin overrides so JavaScript inline styles work the same as desktop */
    
    #project-detail-page .project-category-content {
        padding: 0 0.75rem !important;
    }
    
    #project-detail-page .project-text-content {
        padding: 0 0.75rem !important;
    }
    
    /* Patara Dental Clinic - force font size and line-height on mobile - override inline styles */
    #project-detail-page .modern-text-full-width p,
    #project-detail-page .modern-item.modern-text-full-width p,
    #project-detail-page .project-content-full .modern-text-full-width p,
    #project-detail-page .project-content-full .modern-item.modern-text-full-width p,
    #project-detail-page [style*="font-size: 1.125rem"] p[style*="line-height: 1.9"] {
        font-size: 1rem !important;
        line-height: 1.6 !important; /* Reduced line-height for tighter spacing on mobile */
    }
    
    /* Regnum Carya - reduce spacing and line-height on mobile */
    .regnum-carya-text {
        margin-top: 0 !important; /* No space after images - override inline style */
        padding-top: 0 !important;
    }
    
    /* Removed all margin overrides - let inline styles control spacing like desktop */
    /* Keep only layout properties */
    #project-detail-page .project-images-side-by-side {
        padding: 0 !important;
        gap: 0.25rem !important; /* Gap between side-by-side images (horizontal) */
        grid-template-columns: 1fr 1fr !important; /* Keep side-by-side layout on mobile */
    }
    
    /* Patara Dental - 400px ve altında da (300px dahil) tüm görseller arası eşit boşluk */
    /* Paragraf metni ile ilk görsel arası boşluk (her paragrafın ilk görseli ile ikinci görseli arası) - inline style override */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .modern-item.modern-text-full-width + .project-images-side-by-side[style*="margin: 0"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .modern-item.modern-text-full-width + div[style*="width: 100%"][style*="margin: 0"]:not(.modern-item):not(.modern-text-full-width),
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .modern-item.modern-text-full-width + .project-images-side-by-side,
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .modern-item.modern-text-full-width + div[style*="width: 100%"]:not(.modern-item):not(.modern-text-full-width) {
        margin-top: 4px !important; /* Diğer boşluklar kadar (4px) - inline style override */
    }
    /* project-modern-layout içinde görseller arası boşluk - inline style override */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side[style*="margin: 0"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout div[style*="width: 100%"][style*="max-width: 100%"][style*="margin: 0"]:not(.modern-item):not(.modern-text-full-width),
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side,
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout div[style*="width: 100%"][style*="max-width: 100%"]:not(.modern-item):not(.modern-text-full-width) {
        margin-bottom: 4px !important; /* Inline style override */
    }
    /* Son görsel için margin kaldır */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout > *:last-child {
        margin-bottom: 0 !important;
    }
    /* 2. görsel container'ı ile 3. görsel arasındaki boşluk (margin-bottom) */
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div.project-image-text-row,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div.project-images-side-by-side,
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div.project-main-image {
        margin-bottom: 4px !important;
    }
    body[data-project="patara-dental"] #project-detail-page .project-content-full > div[style*="width: 100%"][style*="max-width: 100%"]:not(.project-image-text-row):not(.project-images-side-by-side):not(.project-main-image):not(.modern-item):not(.modern-text-full-width) {
        margin-bottom: 4px !important;
    }
    /* İlk görsel ile 2. görsel arası yatay boşluk - gap yerine margin kullan */
    /* Gap'i kaldır ve margin kullan */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side[style*="gap: 0.25rem"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side {
        gap: 0 !important; /* Gap'i kaldır, margin kullanacağız */
    }
    /* Patara Dental - project-image-item-side elementlerine margin ekle (yan yana görseller arası boşluk) */
    /* Inline style'daki margin: 0px'i override et - çok spesifik selector */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side[style*="margin: 0px"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side[style*="margin: 0"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side {
        margin-right: 4px !important; /* İlk görsel ile 2. görsel arası boşluk - diğer boşluklar kadar */
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side:last-child {
        margin-right: 0 !important; /* Son görsel için margin kaldır */
    }
    body[data-project="patara-dental"] #project-detail-page .project-content-full > *:last-child {
        margin-bottom: 0 !important;
    }
    body[data-project="patara-dental"] #project-detail-page .project-content-full img,
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout img {
        margin: 0 !important;
    }
    
    #project-detail-page .project-main-image {
        padding: 0 !important;
    }
    
    #project-detail-page .project-image-text-row {
        padding: 0 !important;
    }
    
    #project-detail-page .project-image-item-side {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Patara Dental - project-image-item-side için özel margin (genel kuralı override et - daha spesifik selector) */
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side[style*="margin"],
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side {
        margin-right: 4px !important; /* İlk görsel ile 2. görsel arası boşluk - genel kuralı override et */
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body[data-project="patara-dental"] #project-detail-page .project-modern-layout .project-images-side-by-side .project-image-item-side:last-child {
        margin-right: 0 !important; /* Son görsel için margin kaldır */
    }
    
    /* Regnum Carya - reduce space above text when it comes after image grid on mobile */
    #project-detail-page .project-images-side-by-side + .regnum-carya-text,
    #project-detail-page .project-images-side-by-side + .modern-item.regnum-carya-text {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Ensure single images also have proper spacing */
    #project-detail-page .project-main-image + div[style*="margin: 0.005rem"]:not(.project-images-side-by-side),
    #project-detail-page .project-main-image + div[style*="margin: 0.01rem"]:not(.project-images-side-by-side),
    /* Removed margin overrides - let inline styles control spacing like desktop */
    
    /* Regnum Carya - remove margins from image left/right containers */
    #project-detail-page .project-image-left,
    #project-detail-page .project-image-right {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Regnum Carya - mobilde metinler arası boşluk */
    .regnum-carya-title-para {
        margin-top: 0 !important;
        margin-bottom: 1rem !important; /* Başlık ile metin arası boşluk */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.5 !important;
    }
    
    .regnum-carya-text p {
        line-height: 1.5 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important; /* Paragraflar arası boşluk yok */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .regnum-carya-text p:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .regnum-carya-text p:last-child {
        margin-bottom: 1rem !important; /* Son paragraf ile credit arası boşluk */
        padding-bottom: 0 !important;
    }
    
    .regnum-carya-credit {
        margin-top: 1rem !important; /* Metin ile credit arası boşluk */
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.5 !important;
    }
    
    /* CRITICAL: Force 16px font size for zorlu-center secondary paragraph on mobile - must be at the end of media query to override everything */
    /* Target second zorlu-center-paragraph directly without ID (for modal) */
    .modal-full-content-inner > p.zorlu-center-paragraph:nth-child(2),
    .modal-full-content-inner p.zorlu-center-paragraph:nth-child(2),
    .modal-full-content > div > p.zorlu-center-paragraph:nth-child(2),
    .modal-full-content > div p.zorlu-center-paragraph:nth-child(2),
    .modal-full-content .zorlu-center-paragraph:nth-child(2),
    #zorlu-center-secondary,
    .modal-full-content #zorlu-center-secondary,
    .modal-full-content > div > #zorlu-center-secondary,
    .modal-full-content > div > p#zorlu-center-secondary,
    p#zorlu-center-secondary.zorlu-center-paragraph,
    .modal-full-content p#zorlu-center-secondary.zorlu-center-paragraph,
    .modal-full-content > div > p.zorlu-center-paragraph#zorlu-center-secondary {
        font-size: 16px !important;
        min-height: 29rem !important; /* Same as first paragraph */
    }
    
    /* Project detail page - zorlu-center secondary container - column layout with spacing (mobile) */
    .zorlu-center-secondary-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 1rem !important; /* Space between image and text */
        padding-bottom: 0 !important; /* Remove extra padding */
    }
    
    /* Project detail page - zorlu-center image item - vertical center on mobile */
    .project-image-item-side:has(.zorlu-center-secondary-container) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Project detail page - zorlu-center secondary text (Living & Dining Seçimleri) - override inline styles */
    #zorlu-center-secondary-detail,
    p#zorlu-center-secondary-detail,
    .zorlu-center-secondary-text,
    p.zorlu-center-secondary-text,
    .project-image-item-side p.zorlu-center-secondary-text,
    .project-image-item-side #zorlu-center-secondary-detail,
    .project-image-item-side p[class*="zorlu-center"],
    .project-image-item-side p[id*="zorlu-center"] {
        font-size: 16px !important; /* Force 16px on mobile instead of 1.125rem (18px) - override all inline styles */
        margin-bottom: 0.3rem !important; /* Reduced bottom margin on mobile */
        line-height: 1.5 !important; /* Reduced line-height for tighter spacing */
    }
}