/* Css For Fuzze */

/************ TABLE OF CONTENTS ***************

1. Fonts
2. Reset
3. Global
4. Main Header/style-one/style-two
5. Main Slider/style-one/style-two
6. Intro Section
7. Welcome Section
8. Research Fields
9. Cta Section
10. Testimonial Section
11. Researches Section
12. Team Section
13. Video
14. Fact Counter
15. News Section
16. Clients Section
17. Main Footer
18. Footer Bottom
19. Research Style Two
20. Innovative Solution
21. Discover Section

**********************************************/

/* 1. Fonts */
/* External Google Fonts import removed to prevent CLS and reduce bytes */

/* Modern font sizing to prevent deprecated API warnings */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Modern text rendering settings */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    /* Smooth scrolling for better UX */
    scroll-behavior: smooth;
}

/* Ensure box-sizing is inherited */
*, *::before, *::after {
    box-sizing: inherit;
}

/* 2. Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main landmark for accessibility */
main {
    display: block;
    outline: none;
}

/* Modern heading sizes - proper font-size usage */
/* H1 = Ana Başlık (En Büyük), H2 = Alt Başlık, H3 = Bölüm Başlığı */
h1 { 
    font-size: 2.5rem;      /* 40px - Ana Başlık */
    line-height: 1.2;
    margin: 0 0 20px 0;
    font-weight: 700;
}
h2 { 
    font-size: 2rem;        /* 32px - Alt Başlık */
    line-height: 1.3;
    margin: 0 0 16px 0;
    font-weight: 600;
}
h3 { 
    font-size: 1.5rem;      /* 24px - Bölüm Başlığı */
    line-height: 1.4;
    margin: 0 0 14px 0;
    font-weight: 600;
}
h4 { 
    font-size: 1.25rem;     /* 20px */
    line-height: 1.4;
    margin: 0 0 12px 0;
    font-weight: 500;
}
h5 { 
    font-size: 1.125rem;    /* 18px */
    line-height: 1.5;
    margin: 0 0 10px 0;
    font-weight: 500;
}
h6 { 
    font-size: 1rem;        /* 16px */
    line-height: 1.5;
    margin: 0 0 8px 0;
    font-weight: 500;
}

/* Responsive heading sizes - H1 her zaman en büyük kalır */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }      /* Ana başlık */
    h2 { font-size: 1.75rem; }   /* Alt başlık */
    h3 { font-size: 1.375rem; }  /* Bölüm başlığı */
}

@media (max-width: 480px) {
    h1 { font-size: 1.875rem; }  /* Ana başlık */
    h2 { font-size: 1.5rem; }    /* Alt başlık */
    h3 { font-size: 1.25rem; }   /* Bölüm başlığı */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    font-size: 1rem;
    font-weight: 400;
    width: 100%;
    position: relative;
    /* Prevent horizontal scroll on all devices */
    max-width: 100vw;
    box-sizing: border-box;
}

/* Performance optimizations */
img {
    max-width: 100%;
    height: auto;
    loading: lazy;
    display: block; /* Remove inline spacing */
}

/* Responsive images - ensure all images scale properly */
picture,
figure,
.image-box,
.service-image {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

picture img,
figure img,
.image-box img,
.service-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Aspect ratio containers for responsive images */
.image-box,
.service-image {
    position: relative;
    overflow: hidden;
}

.image-box img,
.service-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Explicit dimensions to reduce CLS */
/* ULTRA SPECIFIC - Logo must be BIG! */
.logo img,
.logo-box .logo img,
.main-header .logo img,
.main-header .logo-box .logo img,
figure.logo img,
.logo-box figure.logo img,
.header-lower .logo-box .logo img,
.main-header .header-lower .logo-box figure.logo img { 
    width: 240px !important; 
    height: 80px !important; 
    max-width: 240px !important;
    max-height: 80px !important;
    min-width: 240px !important;
    min-height: 80px !important;
    object-fit: contain !important;
}

.footer-logo img { width: 171px; height: 55px; object-fit: contain; }
.post-thumb img { width: 320px; height: 180px; object-fit: cover; }

/* Critical above-the-fold styles */
.main-header {
    contain: none; /* Dropdown menü için contain kaldırıldı */
}

.hero-simple {
    contain: layout style paint;
}

/* Remove expensive animations and transitions */
* {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

/* Keep only essential transitions */
.phone-pill:hover {
    transform: none;
}

/* Page title overlay and typography for better readability */
.page-title {
    position: relative;
    color: #fff;
    padding: 80px 0;
}

.page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.75), rgba(31, 41, 55, 0.55));
    z-index: 0;
}

.page-title .auto-container,
.page-title .content-box,
.page-title .title,
.page-title h1,
.page-title .bread-crumb {
    position: relative;
    z-index: 1;
}

.page-title h1 {
    color: #fff;
    font-size: 2.75rem;
    line-height: 1.2;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    margin-bottom: 12px;
}

.page-title .bread-crumb {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-title .bread-crumb li {
    color: rgba(255, 255, 255, 0.85);
}

.page-title .bread-crumb li a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.page-title .bread-crumb li a:hover {
    color: #fde68a;
}

.page-title .bread-crumb li::after {
    content: "\00BB";
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.6);
}

.page-title .bread-crumb li:last-child::after {
    content: "";
}

@media (max-width: 768px) {
    .page-title {
        padding: 60px 0;
        text-align: center;
    }

    .page-title h1 {
        font-size: 2.1rem;
    }

    .page-title .bread-crumb {
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* 3. Global */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 4. Main Header */
.main-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1000;
    overflow: visible !important;
}

.header-lower {
    padding: 15px 0;
    overflow: visible !important;
}

.outer-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0;
    overflow: visible !important;
}

.logo-box {
    flex-shrink: 0;
}

.menu-area {
    flex-shrink: 0;
    overflow: visible !important;
}

.brand-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, #dc2626, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin: 10px 0;
    width: 100%;
    display: block;
    text-decoration: underline;
    text-decoration-color: #dc2626;
    text-underline-offset: 5px;
}

.btn-box {
    display: flex;
    gap: 10px;
    align-items: center;
}

.phone-pill {
    background: #dc2626;
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px; /* WCAG touch target minimum */
    min-width: 44px; /* WCAG touch target minimum */
    box-sizing: border-box;
    line-height: 1.5;
}

.phone-pill:hover {
    background: #b91c1c;
    color: white;
    text-decoration: none;
}

.phone-pill.strong-red {
    background: #dc2626;
    font-weight: 700;
    min-height: 50px;
    line-height: 1.5;
}

.phone-pill.wa{background:#0f5a27;min-height:44px;color:#fff} /* Updated to WCAG minimum */
.phone-pill.wa:hover,
.phone-pill.wa:focus{background:#0b451d;color:#fff}

.phone-link {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    transition: border-color 0.2s ease;
}

.phone-link:hover {
    border-bottom-color: #fff;
}

.btn-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Desktop: Center align buttons and show menu */
@media (min-width: 768px) {
    .btn-box.btn-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0 auto;
    }
    
    /* Show menu area on desktop */
    .menu-area {
        display: block !important;
        position: static !important;
        width: 100% !important;
        order: 2 !important;
        margin: 15px 0 !important;
    }
}

/* Navigation - Desktop */
.main-menu {
    width: 100%;
    text-align: center;
    margin: 15px 0;
    position: relative;
}

/* Desktop - Normal menu display */
@media (min-width: 768px) {
    /* Reset mobile menu styles on desktop */
    nav.main-menu.navbar-expand-md.navbar-light {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        display: block !important;
        flex-direction: row !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        z-index: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        border: none !important;
        border-radius: 0 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }
    
    nav.main-menu.navbar-expand-md.navbar-light.active {
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Hide mobile menu elements on desktop */
    .mobile-menu-header {
        display: none !important;
    }
    
    .mobile-menu-close {
        display: none !important;
    }
    
    /* Desktop menu styling */
    .main-menu .navbar-collapse,
    .main-menu .navbar-collapse.show,
    .main-menu .collapse,
    .main-menu .collapse.show {
        display: block !important;
        position: static !important;
        overflow: visible !important;
        height: auto !important;
        background: transparent !important;
    }
    
    .main-menu ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 30px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    .main-menu ul li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }
    
    .main-menu ul li a {
        padding: 10px 15px !important;
        border-left: none !important;
        color: #1a1a1a !important;
        display: block !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        border-radius: 5px !important;
        transition: all 0.3s ease !important;
    }
    
    .main-menu ul li a:hover,
    .main-menu ul li a.active {
        background: #dc2626 !important;
        color: white !important;
        padding-left: 15px !important;
        border-left: none !important;
    }
    
    /* Hide hamburger on desktop */
    .mobile-nav-toggler {
        display: none !important;
    }
    
    /* Hide menu overlay on desktop */
    .menu-overlay {
        display: none !important;
    }
}

/* Mobile specific styles */
@media (max-width: 767px) {
    .mobile-menu-header {
        display: block !important;
    }
    
    /* Mobile menu - after moving to body */
    .main-menu {
        display: none;
    }
    
    .main-menu.active {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: #fff;
        z-index: 99999;
        overflow-y: auto;
        padding: 80px 20px 40px;
        transform: translateZ(0);
    }
    
    .main-menu.active ul {
        display: block !important;
        width: 100%;
    }
    
    .main-menu.active ul li {
        display: block !important;
        width: 100%;
    }
    
    .main-menu.active ul li a {
        display: block !important;
        width: 100%;
        text-align: left;
        padding: 15px 20px;
        background: #f8f9fa;
        margin-bottom: 5px;
        border-radius: 8px;
    }
    
    /* Prevent Bootstrap from interfering */
    .main-menu.navbar-expand-md {
        flex-direction: column !important;
    }
    
    .main-menu .navbar-collapse {
        position: static !important;
        display: block !important;
    }
}

.main-menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.main-menu ul li a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.main-menu ul li a:hover {
    background: #dc2626;
    color: white;
}

.main-menu .dropdown {
    position: relative;
    transform: translateZ(0);
}

.main-menu .dropdown > ul {
    display: none !important;
    position: absolute;
    background: #fff;
    padding: 10px 0;
    margin-top: 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-radius: 8px;
    z-index: 9999;
    min-width: 250px;
    max-width: 300px;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    will-change: transform;
    backface-visibility: hidden;
    max-height: 500px;
    overflow-y: auto;
}

.main-menu .dropdown:hover > ul {
    display: block !important;
}

.main-menu .dropdown ul li {
    display: block;
    width: 100%;
}

.main-menu .dropdown ul li a {
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
    color: #1a1a1a;
    font-weight: 600;
    transition: all 0.2s ease;
    font-size: 14px;
}

.main-menu .dropdown ul li a:hover {
    background: #dc2626;
    color: #fff;
    transform: translateX(5px);
}

.main-menu .dropdown ul li a strong {
    color: #dc2626;
    font-weight: 700;
}

.main-menu .dropdown ul li a:hover strong {
    color: #fff;
}

/* 5. Main Slider */
.hero-simple {
    background: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
    color: white;
    text-align: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.hero-simple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://www.konyaotokurtarmam.com/uploads/slide1.webp') center/cover;
    opacity: 0.3;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-simple h1 {
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-simple p {
    font-size: 1.25rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.btn-primary {
    background: #fff;
    color: #dc2626;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    min-height: 44px; /* WCAG touch target minimum */
    min-width: 44px; /* WCAG touch target minimum */
    box-sizing: border-box;
    line-height: 1.5;
}

/* 6. Services Grid */
.services-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 2rem;        /* Alt başlık - h1'den küçük */
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
    width: 100%;
    /* Fallback for older browsers */
    display: -ms-grid;
    -ms-grid-columns: 1fr;
}

/* Better grid fallback */
@supports not (display: grid) {
    .services-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }
    
    .services-grid > * {
        flex: 1 1 280px;
        min-width: 280px;
        max-width: 100%;
    }
}

.service-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

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

.service-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(2px);
}

.service-content h3 {
    font-size: 1.25rem;     /* Bölüm başlığı - daha küçük */
    color: #8b1016;         /* Daha koyu kırmızı - kontrast için */
    margin-bottom: 10px;
    font-weight: 700;       /* Daha bold - okunabilirlik için */
    min-height: 52px;       /* Touch target minimum */
}

.service-content h3 a {
    color: #8b1016;         /* Link rengi de koyu */
    text-decoration: none;
    padding: 8px 0;         /* Touch target için padding */
    display: inline-block;  /* Padding'in çalışması için */
    min-height: 44px;       /* WCAG minimum */
    line-height: 1.4;
}

.service-content h3 a:hover {
    color: #61070c;         /* Hover daha da koyu */
    text-decoration: underline;
}

.service-content p {
    color: #1f2937;         /* Daha koyu gri - kontrast için (4.5:1) */
    line-height: 1.6;
    flex-grow: 1;
}

/* 7. CTA Section */
.cta-section {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: white;
    padding: 70px 0;
    text-align: center;
}

.cta-content h2 {
    font-size: 1.875rem;    /* Alt başlık - h1'den küçük */
    margin-bottom: 20px;
    color: #fbbf24;         /* Daha açık sarı - koyu background'da kontrast için */
    font-weight: 700;       /* Daha bold */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Okunabilirlik için gölge */
}

.cta-content p {
    font-size: 1.125rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.contact-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 24px;
    min-height: 80px;
    contain: layout;
}

.contact-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px 25px;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    backdrop-filter: blur(10px);
    min-height: 60px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    contain: layout style;
}

/* 8. SEO Content */
.seo-content {
    padding: 60px 0;
    background: white;
}

.seo-content h1 {
    color: #dc2626;
    margin-bottom: 20px;
    text-align: center;
}

.seo-content h2 {
    font-size: 1.75rem;     /* Alt başlık */
    color: #333;
    margin: 30px 0 15px 0;
    font-weight: 600;
}

.seo-content h3 {
    font-size: 1.375rem;    /* Bölüm başlığı */
    color: #dc2626;
    margin: 25px 0 10px 0;
    font-weight: 600;
}

.seo-content p {
    margin-bottom: 15px;
    line-height: 1.7;
}

.seo-content ul {
    margin: 15px 0;
    padding-left: 20px;
}

.seo-content li {
    margin-bottom: 8px;
}

/* 9. Main Footer */
.main-footer {
    background: #1f2937;
    color: white;
    padding: 50px 0 0;
    margin-top: 120px;
}

.main-footer a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
}

.main-footer a:hover {
    color: #f59e0b;
    text-decoration: underline;
}

.main-footer .widget-title h3 {
    color: #ffffff;
    font-weight: 600;
}

.main-footer .text p {
    color: #e5e5e5;
    line-height: 1.6;
}

.main-footer .links-list li a {
    color: #f3f4f6;         /* Daha açık - kontrast için */
    font-weight: 500;       /* Okunabilirlik için */
    padding: 8px 12px;      /* Touch target için padding */
    display: inline-block;  /* Padding'in çalışması için */
    min-height: 44px;       /* WCAG touch target minimum */
    line-height: 1.6;
}

.main-footer .links-list li a:hover {
    color: #fbbf24;         /* Daha açık sarı - kontrast için */
    text-decoration: underline;
}

.main-footer .email-box a {
    color: #ffffff !important;
    font-weight: 600;
}

.main-footer .top-info h3 a {
    color: #ffffff !important;
    font-weight: 700;
}

.main-footer .top-info p {
    color: #e5e5e5;
}

.main-footer .post h6 a {
    color: #e5e5e5;
}

.main-footer .post h6 a:hover {
    color: #f59e0b;
}

.main-footer .footer-social a {
    color: #ffffff !important;
    font-weight: 500;
    padding: 12px 16px;      /* Touch target için padding */
    display: inline-flex;    /* Flex için */
    align-items: center;     /* Icon + text hizalama */
    gap: 8px;                /* Icon ile text arası boşluk */
    min-height: 48px;        /* WCAG touch target (48x48) */
    min-width: 48px;         /* Minimum genişlik */
}

.main-footer .footer-social a:hover {
    color: #fbbf24 !important;  /* Daha açık sarı - kontrast için */
}

.main-footer .copyright p {
    color: #e5e5e5;
}

.main-footer .copyright a {
    color: #ffffff !important;
    font-weight: 600;
    padding: 4px 8px;       /* Touch target için */
    display: inline-block;
    min-height: 40px;       /* Minimum touch target */
    line-height: 1.6;
}

.main-footer .copyright a:hover {
    color: #fbbf24;
    text-decoration: underline;
}

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

.footer-content h3 {
    color: #eab308;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.footer-content p {
    margin-bottom: 15px;
    opacity: 0.9;
}

.footer-bottom {
    border-top: 1px solid #374151;
    padding: 20px 0;
    margin-top: 30px;
    text-align: center;
    opacity: 0.8;
}

#iletisim .ulinks-list a{color:#f9fafb;text-decoration:none;font-weight:600}
#iletisim .ulinks-list a:hover,
#iletisim .ulinks-list a:focus{color:#fde68a;text-decoration:underline}

/* CLS fixes - Enhanced - Aggressive CLS Prevention */
.cta-section { 
  min-height: 800px; /* Increased for new content */
  display: flex; 
  align-items: center; 
  contain: layout style paint;
  position: relative;
  overflow: hidden;
  will-change: auto;
}
.cta-section .container { width: 100%; }
.cta-section .cta-content { max-width: 900px; margin: 0 auto; }

/* Reserve heading heights - CLS prevention */
.cta-section .cta-content h1 { 
  line-height: 1.2; 
  min-height: 80px; 
  margin-bottom: 20px;
  contain: layout;
  display: block;
}

.cta-section .cta-content h2 { 
  line-height: 1.2; 
  min-height: 70px; 
  font-size: 2rem;
  margin: 30px 0 15px 0;
  color: #eab308;
  font-weight: 700;
  contain: layout;
  display: block;
}

.cta-section .cta-content p { 
  min-height: 40px; 
  font-size: 1.125rem;
  margin-bottom: 20px;
  opacity: 0.9;
  contain: layout;
  display: block;
}

/* Reserve list heights - CLS prevention */
.cta-section .cta-content ul,
.cta-section .cta-content ol {
  min-height: 200px;
  margin: 20px 0;
  padding-left: 25px;
  contain: layout;
}

.cta-section .cta-content ul li,
.cta-section .cta-content ol li {
  margin-bottom: 15px;
  line-height: 1.6;
}

/* Reserve brand title height - CLS prevention */
.cta-section .brand-title { 
  min-height: 32px;
}

/* Prevent font loading shifts */
.cta-section, .brand-title {
  font-display: swap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Hamburger Menu Button */
.mobile-nav-toggler {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 10001;
    position: relative;
}

.mobile-nav-toggler .icon-bar {
    display: block;
    width: 100%;
    height: 3px;
    background: #dc2626;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger Animation - Open State */
.mobile-nav-toggler.active .icon-bar:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.mobile-nav-toggler.active .icon-bar:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggler.active .icon-bar:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

.mobile-nav-toggler:focus {
    background-color: rgba(220, 38, 38, 0.1);
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* Menu Overlay */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.menu-overlay.active {
    display: block;
}

@media (max-width: 767px) {
    .menu-overlay {
        z-index: 9999 !important;
    }
}

/* Mobile CLS Prevention - Ultra Aggressive */
@media (max-width: 767px) {
    /* Prevent layout shifts but exclude fixed positioned elements */
    body {
        overflow-x: hidden;
    }
    
    /* Apply contain only to safe elements, not fixed menus */
    body > *:not(.main-header):not(script):not(style):not(nav) {
        contain: layout;
    }
    
    .outer-box {
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0;
        width: 100%;
        position: relative;
    }
    
    .logo-box {
        flex: 0 0 auto;
        order: 1;
        margin-bottom: 15px;
    }
    
    .logo img {
        max-width: 240px !important;
        height: 80px !important;
        object-fit: contain;
    }
    
    .brand-title {
        display: none !important; /* Hide brand title on mobile */
    }
    
    .menu-area {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        flex-shrink: 0;
        order: 2;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10002;
    }
    
    /* Hamburger Button - Mobile */
    .mobile-nav-toggler {
        display: flex !important;
        flex-shrink: 0;
        width: 36px;
        height: 28px;
        padding: 4px;
        margin: 0 !important;
        position: relative;
        top: 0;
        right: 0;
    }
    
    .header-lower {
        padding: 15px;
    }
    
    .header-lower .outer-box {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }
    
    .main-header {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        position: relative;
    }
    
    .btn-box {
        width: 100%;
        margin-top: 20px;
        order: 3;
    }
    
    /* Mobile Menu - Slide In - SIMPLE: Use left instead of transform */
    nav.main-menu.navbar-expand-md.navbar-light {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important; /* Start hidden off-screen */
        right: auto !important;
        width: 85% !important;
        max-width: 320px !important;
        min-width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #fff !important;
        box-shadow: 2px 0 15px rgba(0,0,0,0.2) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10000 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        flex-flow: column nowrap !important;
        justify-content: flex-start !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: none !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        transform: none !important; /* NO TRANSFORM - prevents shifting */
    }
    
    /* Prevent body shift when menu opens - CORRECT METHOD */
    body.menu-open {
        overflow: hidden !important;
        padding-right: var(--scrollbar-width, 0px) !important;
    }

    nav.main-menu.navbar-expand-md.navbar-light.active {
        left: 0 !important; /* Slide in to view */
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important; /* NO TRANSFORM */
    }
    
    /* AGGRESSIVE: Lock position ONLY when .active class is present */
    nav.main-menu.navbar-expand-md.navbar-light.active,
    nav.main-menu.navbar-expand-md.navbar-light.active *,
    nav.main-menu.navbar-expand-md.navbar-light.active[style] {
        left: 0 !important;
        right: auto !important;
        transform: translateX(0) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        flex-flow: column nowrap !important; /* Override Bootstrap's row nowrap */
        justify-content: flex-start !important;
    }
    
    /* CRITICAL: When NOT active, allow inline styles to work */
    nav.main-menu.navbar-expand-md.navbar-light:not(.active)[style] {
        /* Inline styles should work when menu is closed */
        /* No override here - let JavaScript control it */
    }
    
    /* Menu Header - Mobile Only */
    .mobile-menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-shrink: 0 !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #e5e5e5 !important;
        background: #fff !important;
        position: relative !important;
        z-index: 10;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-menu-header .logo {
        margin: 0 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .mobile-menu-header .logo img {
        height: 50px !important;
        width: auto !important;
        max-width: 200px !important;
        display: block !important;
    }

    /* Close Button in Menu - Mobile Only */
    .mobile-menu-close {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
        border: none !important;
        font-size: 32px !important;
        color: #333 !important;
        cursor: pointer !important;
        z-index: 11 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        transition: color 0.2s ease;
    }

    .mobile-menu-close:hover {
        color: #dc2626 !important;
    }

    /* Fix navbar-collapse styles - Mobile Only */
    .main-menu .navbar-collapse,
    .main-menu .navbar-collapse.show,
    .main-menu .collapse,
    .main-menu .collapse.show {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        height: auto !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .main-menu .navbar-collapse.clearfix {
        border: none !important;
        background: transparent !important;
        clear: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Menu Links - Mobile Only */
    .main-menu ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .main-menu ul li {
        border-bottom: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .main-menu ul li a {
        padding: 16px 20px !important;
        display: block !important;
        border-radius: 0 !important;
        color: #333 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
        border-left: 3px solid transparent !important;
        text-decoration: none !important;
        line-height: 1.5 !important;
    }
    
    .main-menu ul li a:hover,
    .main-menu ul li a.active {
        background: #f8f9fa !important;
        color: #dc2626 !important;
        padding-left: 17px !important;
        border-left-color: #dc2626 !important;
    }
    
    /* Dropdown indicator */
    .main-menu .dropdown > a::after {
        content: ' ▼' !important;
        font-size: 10px !important;
        float: right !important;
        opacity: 0.5 !important;
        margin-left: 8px !important;
    }
    
    /* Dropdown submenu on mobile - SHOW when parent has .active class */
    .main-menu .dropdown > ul {
        display: none !important;
        position: static !important;
        background: #f8f9fa !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        min-width: 100% !important;
        left: 0 !important;
        top: auto !important;
    }
    
    /* Show dropdown when active */
    .main-menu .dropdown.active > ul {
        display: block !important;
    }
    
    /* Dropdown submenu items */
    .main-menu .dropdown > ul li {
        border-bottom: 1px solid #e5e5e5 !important;
    }
    
    .main-menu .dropdown > ul li:last-child {
        border-bottom: none !important;
    }
    
    .main-menu .dropdown > ul li a {
        padding: 12px 20px 12px 40px !important;
        font-size: 15px !important;
        color: #666 !important;
        background: #f8f9fa !important;
    }
    
    .main-menu .dropdown > ul li a:hover {
        background: #e9ecef !important;
        color: #dc2626 !important;
    }
    
    .btn-box {
        width: 100%;
        justify-content: center;
        margin: 15px 0;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        order: 4;
    }
    
    .btn-stack {
        width: 100%;
        align-items: center;
    }
    
    .phone-pill {
        padding: 10px 20px;
        font-size: 0.875rem;
    }
    
    .hero-simple {
        padding: 60px 0;
    }
    
    
    .hero-simple p {
        font-size: 1rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .service-image {
        height: 180px;
    }
    
    .service-content {
        padding: 20px;
    }
    
    .cta-section {
        padding: 50px 0;
        min-height: 600px !important;
        contain: layout style paint;
    }
    
    .cta-content h1 {
        font-size: 2rem;        /* Mobilde ana başlık */
        min-height: auto;
    }
    
    .cta-content h2 {
        font-size: 1.5rem;      /* Mobilde alt başlık */
        min-height: auto;
        line-height: 1.2;
    }
    
    .section-title h2 {
        font-size: 1.75rem;     /* Mobilde section başlığı */
    }
    
    .cta-content p {
        min-height: 60px !important;
        contain: layout;
    }
    
    .contact-badges {
        flex-direction: column;
        align-items: center;
        min-height: 120px !important;
        gap: 15px;
    }
    
    .contact-badge {
        min-height: 60px !important;
        width: 100%;
        max-width: 300px;
        justify-content: center;
        contain: layout;
    }
    
    .seo-content {
        padding: 40px 0;
    }
    
    
    .seo-content h2 {
        font-size: 1.5rem;      /* Mobilde SEO alt başlık */
    }
    
    .seo-content h3 {
        font-size: 1.25rem;     /* Mobilde SEO bölüm başlığı */
    }
    
    .service-content h3 {
        font-size: 1.125rem;    /* Mobilde hizmet başlığı */
    }
    
    .main-footer {
        padding: 40px 0 20px 0;
        margin-top: 80px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    
    .btn-primary {
        padding: 12px 25px;
        font-size: 1rem;
    }
    
    /* 480px için h3 zaten yukarıda tanımlı */
    
    .cta-content h1 {
        font-size: 1.875rem;    /* Küçük ekranda ana başlık */
    }
    
    .cta-content h2 {
        font-size: 1.375rem;    /* Küçük ekranda alt başlık */
    }
}