/**
 * MOBILE RESPONSIVENESS FIXES - COMPREHENSIVE REFACTOR
 * Alkan Anasayfa Plugin - v1.2.0
 *
 * iOS ve Android uyumlu, temiz mobile CSS
 * Tüm çakışmalar giderildi, padding/overflow normalize edildi
 */

/* ============================================
   BASE: Horizontal Scroll Prevention
   ============================================ */

/* CRITICAL FIX v3.5.0: Scope to widget-active pages ONLY - prevent affecting other pages */
/* FIXED: Invalid selector removed (body.class html doesn't work) */
body.light-theme-video-header-active {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* REMOVED v3.5.0: Desktop rules moved to style.css (this file is mobile-only!) */
/* This file is enqueued with media="screen and (max-width: 768px)" */
/* Desktop rules (min-width: 769px) inside this file never execute! */

/* Mobile only: Lock body scroll to prevent widget movement */
@media (max-width: 768px) {
    body.light-theme-video-header-active {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
    }
}

.light-theme-video-header {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ============================================
   MOBILE CORE LAYOUT - iOS & Android
   ============================================ */

@media (max-width: 768px) {
    /* Parent Container - FIXED for ALL mobile devices */
    .light-theme-video-header {
        position: fixed !important;
        /* CRITICAL FIX: Full screen like desktop - navbar floats on top */
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;

        /* Create single stacking context - BELOW navbar */
        isolation: isolate !important;
        z-index: 100 !important;

        /* Flat rendering */
        transform-style: flat !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;

        /* Prevent any movement during scroll */
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
    }

    /* Video Background Layer */
    .light-theme-video-header .video-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    .light-theme-video-header .video-background video,
    .light-theme-video-header .video-background iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* Mobile Portrait Media */
    .mobile-portrait-media {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    .mobile-portrait-image,
    .mobile-portrait-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* Hide desktop video on mobile */
    .light-theme-video-header .video-background .video-player,
    .light-theme-video-header .video-background .video-iframe {
        display: none !important;
    }

    /* CRITICAL: Hide company gallery on mobile - it should NOT be visible */
    .light-theme-video-header .company-gallery {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Override any .show class on mobile */
    .light-theme-video-header .company-gallery.show {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* ========================================
       SECTIONS - Universal Positioning
       ======================================== */

    /* ALL mobile devices: Absolute positioning inside fixed container */
    .light-theme-video-header .main-content,
    .light-theme-video-header .about-section,
    .light-theme-video-header .tech-section,
    .light-theme-video-header .projects-section,
    .light-theme-video-header .products-section,
    .light-theme-video-header .contact-section {
        /* Absolute positioning with edge constraints */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;

        /* Overflow for sections */
        overflow: hidden !important;

        /* Hardware-accelerated 3D transforms for smooth performance */
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;

        /* GPU acceleration */
        transform-style: preserve-3d !important;
        -webkit-transform-style: preserve-3d !important;

        /* Optimize rendering */
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        will-change: transform !important;

        /* Don't create separate stacking context */
        isolation: auto !important;
        contain: none !important;

        /* Box model */
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* CRITICAL: Main content must be visible on load */
    .light-theme-video-header .main-content {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    /* Section Z-Index Hierarchy - Base (Correct Visual Order) */
    /* Order: main > about > tech > products > projects > contact */
    .light-theme-video-header .about-section { z-index: 20 !important; }
    .light-theme-video-header .tech-section { z-index: 30 !important; }
    .light-theme-video-header .products-section { z-index: 40 !important; }
    .light-theme-video-header .projects-section { z-index: 50 !important; }
    .light-theme-video-header .contact-section { z-index: 60 !important; }

    /* Ensure z-index persists in ALL states */
    .light-theme-video-header .main-content.scrolled-up,
    .light-theme-video-header .main-content.slide-up {
        z-index: 10 !important;
    }
    .light-theme-video-header .about-section.show,
    .light-theme-video-header .about-section.slide-up {
        z-index: 20 !important;
    }
    .light-theme-video-header .tech-section.show,
    .light-theme-video-header .tech-section.slide-up {
        z-index: 30 !important;
    }
    .light-theme-video-header .products-section.show,
    .light-theme-video-header .products-section.slide-up {
        z-index: 40 !important;
    }
    .light-theme-video-header .projects-section.show,
    .light-theme-video-header .projects-section.slide-up {
        z-index: 50 !important;
    }
    .light-theme-video-header .contact-section.show,
    .light-theme-video-header .contact-section.slide-up {
        z-index: 60 !important;
    }

    /* ========================================
       SECTION CONTENT WRAPPERS - Normalized Padding
       ======================================== */

    /* Section inner content must have proper overflow for scrolling */
    .light-theme-video-header .video-content,
    .light-theme-video-header .about-content,
    .light-theme-video-header .tech-main-content,
    .light-theme-video-header .tech-content,
    .light-theme-video-header .projects-content,
    .light-theme-video-header .products-content,
    .light-theme-video-header .contact-content,
    .light-theme-video-header .projects-main-content,
    .light-theme-video-header .products-main-content {
        /* Scrolling */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 100vh !important;
        -webkit-overflow-scrolling: touch !important;

        /* Wrapper sizing */
        width: 100% !important;
        max-width: 100% !important;
        padding: 50px 20px 50px !important;
        box-sizing: border-box !important;

        /* Layout - TÜM İÇERİKLER ORTALANMIŞ */
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }

    /* Main video content - navbar clearance like desktop */
    .light-theme-video-header .main-content .video-content {
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
        /* CRITICAL FIX: Top padding for navbar clearance (transparent navbar floats on top) */
        padding: 100px 20px 50px !important;
    }

    /* About section - navbar clearance */
    .light-theme-video-header .about-section .about-content {
        padding: 100px 20px 40px !important;
    }

    /* Tech section - navbar clearance with extra bottom space */
    .light-theme-video-header .tech-section .tech-main-content,
    .light-theme-video-header .tech-section .tech-content {
        padding: 110px 20px 60px !important; /* Extra bottom padding to prevent card clipping */
    }

    /* Projects section - navbar clearance */
    .light-theme-video-header .projects-section .projects-content {
        padding: 100px 20px 40px !important;
    }

    /* Products section - navbar clearance with extra bottom space */
    .light-theme-video-header .products-section .products-content {
        padding: 100px 20px 80px !important; /* Extra bottom padding to lift cards */
    }

    /* Contact section - navbar clearance */
    .light-theme-video-header .contact-section .contact-content {
        padding: 100px 20px 40px !important;
    }

    /* Section titles - centered */
    .light-theme-video-header .about-title,
    .light-theme-video-header .tech-title,
    .light-theme-video-header .projects-title,
    .light-theme-video-header .products-title,
    .light-theme-video-header .contact-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    /* Section subtitles and descriptions - centered */
    .light-theme-video-header .about-subtitle,
    .light-theme-video-header .about-description,
    .light-theme-video-header .tech-subtitle,
    .light-theme-video-header .tech-description,
    .light-theme-video-header .projects-subtitle,
    .light-theme-video-header .projects-description,
    .light-theme-video-header .products-subtitle,
    .light-theme-video-header .products-description,
    .light-theme-video-header .contact-subtitle,
    .light-theme-video-header .contact-description {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 90% !important;
    }

    /* About section - specific elements */
    .light-theme-video-header .about-side-image {
        margin: 20px auto !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
    }

    .light-theme-video-header .about-side-image img {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* ========================================
       SECTION VISIBILITY & TRANSITIONS
       ======================================== */

    /* Main content always visible - already defined above in SECTIONS */

    /* ANTI-FLASH: Ensure sections beyond main-content start hidden */
    .light-theme-video-header .about-section:not(.show),
    .light-theme-video-header .tech-section:not(.show),
    .light-theme-video-header .projects-section:not(.show),
    .light-theme-video-header .products-section:not(.show),
    .light-theme-video-header .contact-section:not(.show) {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(100%) !important;
        -webkit-transform: translateY(100%) !important;
        pointer-events: none !important;
    }

    /* Ensure .show class works - sections become visible */
    .light-theme-video-header .about-section.show,
    .light-theme-video-header .tech-section.show,
    .light-theme-video-header .projects-section.show,
    .light-theme-video-header .products-section.show,
    .light-theme-video-header .contact-section.show {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        -webkit-transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    /* Hardware-accelerated slide animations using translate3d */
    .light-theme-video-header .main-content.slide-up,
    .light-theme-video-header .main-content.scrolled-up,
    .light-theme-video-header .about-section.slide-up,
    .light-theme-video-header .tech-section.slide-up,
    .light-theme-video-header .projects-section.slide-up,
    .light-theme-video-header .products-section.slide-up,
    .light-theme-video-header .contact-section.slide-up {
        transform: translate3d(0, -100%, 0) !important;
        -webkit-transform: translate3d(0, -100%, 0) !important;
        pointer-events: none !important;
    }

    /* Smooth GPU-accelerated transitions */
    .light-theme-video-header .main-content,
    .light-theme-video-header .about-section,
    .light-theme-video-header .tech-section,
    .light-theme-video-header .projects-section,
    .light-theme-video-header .products-section,
    .light-theme-video-header .contact-section {
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    opacity 0.8s ease-out,
                    visibility 0.8s ease-out !important;
        -webkit-transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                           opacity 0.8s ease-out,
                           visibility 0.8s ease-out !important;

        /* Optimize rendering performance */
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* ========================================
       TYPOGRAPHY - Responsive Sizing (Desktop-Matched)
       ======================================== */

    .light-theme-video-header .video-header-title {
        /* Orijinal desktop boyutu: 2.5rem (768px'de) */
        font-size: 2.5rem !important;
        letter-spacing: 3px !important;
        font-family: 'Cabin', sans-serif !important;
        font-weight: 300 !important;
        margin-bottom: 21px !important;
        color: #ffffff !important;
        text-align: center !important;
    }

    .light-theme-video-header .video-header-subtitle {
        font-size: 1rem !important;
        letter-spacing: 2px !important;
        text-align: center !important;
    }

    .light-theme-video-header .projects-description,
    .light-theme-video-header .about-description,
    .light-theme-video-header .tech-description {
        font-size: clamp(0.875rem, 2vw, 1rem) !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    /* ========================================
       BUTTONS - Compact & Consistent
       ======================================== */

    .light-theme-video-header .video-header-button,
    .light-theme-video-header .about-button,
    .light-theme-video-header .tech-button,
    .light-theme-video-header .projects-button,
    .light-theme-video-header .products-button,
    .light-theme-video-header .contact-button,
    .company-all-button,
    .light-theme-video-header .products-all-button,
    .light-theme-video-header .projects-all-button,
    .light-theme-video-header .contact-main-button {
        min-height: 44px !important;
        min-width: 100px !important;
        padding: 10px 24px !important;
        font-size: clamp(0.8rem, 2vw, 0.9rem) !important;
        letter-spacing: 1.5px !important;

        /* Prevent word breaking */
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    /* Button inner text */
    .button-inner {
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }

    /* Button wrappers - centered */
    .light-theme-video-header .about-button-wrapper,
    .light-theme-video-header .projects-button-wrapper,
    .light-theme-video-header .products-button-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 20px auto 0 auto !important;
        width: 100% !important;
    }

    /* Tech button wrapper - spacing before cards */
    .light-theme-video-header .tech-button-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 20px auto 16px auto !important;
        width: 100% !important;
    }

    /* Tech header - override desktop margin */
    .light-theme-video-header .tech-header {
        margin-bottom: 0 !important;
    }

    /* ========================================
       TECH SECTION - Services Grid (2x2 Layout)
       Desktop-inspired Glass Morphism Design
       ======================================== */

    .light-theme-video-header .services-grid,
    .light-theme-video-header .tech-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(16px, 3.5vw, 22px) !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto 20px auto !important;
        box-sizing: border-box !important;
        justify-items: center !important;
        align-items: center !important;
        overflow: visible !important;
    }

    /* v3.6.0: Hide first 2 service cards on mobile (CNC and Digital Planning) */
    .light-theme-video-header .services-grid .service-item:nth-child(1),
    .light-theme-video-header .services-grid .service-item:nth-child(2),
    .light-theme-video-header .tech-grid .service-item:nth-child(1),
    .light-theme-video-header .tech-grid .service-item:nth-child(2) {
        display: none !important;
    }

    .light-theme-video-header .service-item {
        /* Button-inspired design - responsive */
        position: relative !important;
        width: 100% !important;
        max-width: clamp(140px, 45vw, 180px) !important;
        height: auto !important;
        min-height: clamp(110px, 30vw, 130px) !important;
        padding: clamp(16px, 4vw, 20px) clamp(12px, 3vw, 16px) !important;
        box-sizing: border-box !important;

        /* Button-like glass morphism effect - only top/bottom borders */
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 2px !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;

        /* Button-like angled corners */
        clip-path: polygon(
            0 6px, 6px 0,
            calc(100% - 6px) 0, 100% 6px,
            100% calc(100% - 6px), calc(100% - 6px) 100%,
            6px 100%, 0 calc(100% - 6px)
        ) !important;

        /* Layout */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;

        /* Smooth transitions */
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        overflow: visible !important;
    }

    /* Hover effect */
    .light-theme-video-header .service-item:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        border-top-color: rgba(255, 255, 255, 0.5) !important;
        border-bottom-color: rgba(255, 255, 255, 0.5) !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    }

    /* Show title on mobile - responsive */
    .light-theme-video-header .service-title {
        display: block !important;
        font-size: clamp(0.7rem, 2.2vw, 0.8rem) !important;
        font-weight: 400 !important;
        color: #ffffff !important;
        margin: clamp(8px, 2vw, 12px) 0 0 0 !important;
        letter-spacing: 0.5px !important;
        line-height: 1.3 !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
    }

    .light-theme-video-header .service-icon-wrapper {
        width: 100% !important;
        margin: 0 auto 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .light-theme-video-header .service-icon {
        /* Responsive boyut ve şekil */
        width: clamp(48px, 12vw, 56px) !important;
        height: clamp(48px, 12vw, 56px) !important;
        min-width: 48px !important;
        min-height: 48px !important;

        /* Yuvarlak arka plan - desktop gibi */
        border-radius: 50% !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;

        /* Ortalama */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;

        /* Responsive icon boyutu */
        font-size: clamp(1.5rem, 4vw, 1.75rem) !important;
        color: #ffffff !important;

        /* Pozisyon */
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        /* Smooth transitions */
        transform: none !important;
        transition: all 0.4s ease !important;

        /* Kesinti önleme */
        overflow: visible !important;
        flex-shrink: 0 !important;
    }

    .light-theme-video-header .service-item:hover .service-icon {
        background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%) !important;
        transform: scale(1.05) !important;
    }

    .light-theme-video-header .service-icon i,
    .light-theme-video-header .service-icon svg {
        /* Responsive icon içeriği */
        width: clamp(24px, 6vw, 28px) !important;
        height: clamp(24px, 6vw, 28px) !important;
        max-width: clamp(24px, 6vw, 28px) !important;
        max-height: clamp(24px, 6vw, 28px) !important;

        /* Ortalama */
        display: block !important;
        margin: 0 auto !important;

        /* Pozisyon */
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        /* Kesinti önleme */
        flex-shrink: 0 !important;
        overflow: visible !important;
    }

    /* ========================================
       PROJECTS SECTION - Grid Layout
       ======================================== */

    .light-theme-video-header .projects-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(16px, 4vw, 24px) !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 20px auto 0 auto !important;
        box-sizing: border-box !important;
        justify-items: center !important;
        align-items: center !important;
    }

    .light-theme-video-header .project-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .light-theme-video-header .project-marble-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .light-theme-video-header .project-marble-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* ========================================
       PRODUCTS SECTION - 2x2 Grid Layout
       ======================================== */

    .light-theme-video-header .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(16px, 4vw, 24px) !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 12px auto 0 auto !important;
        box-sizing: border-box !important;
        justify-items: center !important;
        align-items: center !important;
    }

    .light-theme-video-header .product-item {
        width: 100% !important;
        max-width: 180px !important;
        min-width: 120px !important;
        margin-bottom: 35px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Hide 3rd product on mobile - show only 2 products */
    .light-theme-video-header .products-grid .product-item:nth-child(3) {
        display: none !important;
    }

    /* Marble container */
    .light-theme-video-header .marble-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    .light-theme-video-header .marble-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
    }

    /* Color block - overlapping on marble image like desktop */
    .color-block-container {
        position: absolute !important;
        bottom: clamp(-100px, -8vw, -70px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 55% !important;
        max-width: 90px !important;
        min-width: 60px !important;
        height: auto !important;
        aspect-ratio: 120 / 176 !important;
        z-index: 10 !important;
        overflow: visible !important;
    }

    .light-theme-video-header .color-block {
        width: 100% !important;
        height: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.15),
            0 5px 15px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: visible !important;
    }

    .light-theme-video-header .product-info {
        width: 100% !important;
        text-align: center !important;
    }

    .light-theme-video-header .product-name {
        font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
        margin-bottom: 4px !important;
    }

    .light-theme-video-header .color-block .divider {
        width: 30px !important;
        height: 2px !important;
        margin: 6px auto !important;
    }

    .light-theme-video-header .product-code {
        font-size: clamp(0.6rem, 1.8vw, 0.75rem) !important;
        margin-top: 4px !important;
    }

    /* ========================================
       SOCIAL & UI ELEMENTS
       ======================================== */

    .light-theme-video-header .social-link {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .light-theme-video-header .social-media-corner {
        bottom: clamp(12px, 2.5vw, 21px) !important;
        right: clamp(12px, 2.5vw, 21px) !important;
    }

    .light-theme-video-header .scroll-indicator {
        bottom: clamp(15px, 3vw, 30px) !important;
    }

    /* ========================================
       BACKGROUND & OVERLAYS
       ======================================== */

    /* CRITICAL FIX: Scope to widget-active pages ONLY */
    body.light-theme-video-header-active,
    body.light-theme-video-header-active html {
        background: #000000 !important;
        background-color: #000000 !important;
    }

    /* CRITICAL FIX: Loading state - prevent black screen flash */
    .light-theme-video-header {
        background: #000000 !important;
    }

    /* Loading indicator (optional - subtle) */
    .light-theme-video-header::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        animation: lth-spin 0.8s linear infinite;
        z-index: 1;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* Hide loading indicator when widget is active */
    body.light-theme-video-header-active .light-theme-video-header::before {
        opacity: 0;
        pointer-events: none;
    }

    @keyframes lth-spin {
        to { transform: rotate(360deg); }
    }

    .light-theme-video-header .main-content,
    .light-theme-video-header .about-section,
    .light-theme-video-header .tech-section,
    .light-theme-video-header .projects-section,
    .light-theme-video-header .products-section,
    .light-theme-video-header .contact-section {
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .light-theme-video-header .video-overlay,
    .light-theme-video-header .about-overlay,
    .light-theme-video-header .tech-overlay,
    .light-theme-video-header .projects-overlay,
    .light-theme-video-header .products-overlay,
    .light-theme-video-header .contact-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
        opacity: 1 !important;
        z-index: 2 !important;
    }
}

/* ============================================
   SMALL SCREENS - Optimizations
   ============================================ */

@media (max-width: 480px) {
    /* Tech Grid - 2x2 sabit kalır, daha sıkı gap */
    .light-theme-video-header .services-grid,
    .light-theme-video-header .tech-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        margin: 0 auto 20px auto !important;
        overflow: visible !important;
    }

    /* v3.6.0: Hide first 2 service cards on small mobile too */
    .light-theme-video-header .services-grid .service-item:nth-child(1),
    .light-theme-video-header .services-grid .service-item:nth-child(2),
    .light-theme-video-header .tech-grid .service-item:nth-child(1),
    .light-theme-video-header .tech-grid .service-item:nth-child(2) {
        display: none !important;
    }

    .light-theme-video-header .service-item {
        max-width: 165px !important;
        min-height: 125px !important;
        padding: 18px 12px !important;

        /* Button-style design - only top/bottom borders */
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 2px !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;

        /* Button-like angled corners */
        clip-path: polygon(
            0 6px, 6px 0,
            calc(100% - 6px) 0, 100% 6px,
            100% calc(100% - 6px), calc(100% - 6px) 100%,
            6px 100%, 0 calc(100% - 6px)
        ) !important;
    }

    .light-theme-video-header .service-title {
        font-size: 0.75rem !important;
        margin-top: 10px !important;
    }

    .light-theme-video-header .service-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        font-size: 1.6rem !important;

        /* Yuvarlak korunur */
        border-radius: 50% !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
    }

    .light-theme-video-header .service-icon i,
    .light-theme-video-header .service-icon svg {
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
    }

    /* Projects Grid - 2x2 sabit */
    .light-theme-video-header .projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(12px, 3vw, 16px) !important;
    }

    /* Products Grid - 2x2 sabit */
    .light-theme-video-header .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(12px, 3vw, 16px) !important;
    }

    .light-theme-video-header .product-item {
        width: 100% !important;
        max-width: 160px !important;
        min-width: 100px !important;
        margin-bottom: 30px !important;
    }

    .color-block-container {
        bottom: clamp(-80px, -7.2vw, -55px) !important;
        width: 55% !important;
        max-width: 75px !important;
        min-width: 50px !important;
    }

    .light-theme-video-header .color-block {
        padding: 6px !important;
    }

    .light-theme-video-header .product-name {
        font-size: clamp(0.65rem, 1.8vw, 0.75rem) !important;
    }

    .light-theme-video-header .product-code {
        font-size: clamp(0.55rem, 1.6vw, 0.65rem) !important;
    }

    .light-theme-video-header .color-block .divider {
        width: 25px !important;
        margin: 4px auto !important;
    }
}

/* ============================================
   EXTRA SMALL SCREENS - Compact Layout
   ============================================ */

/* ============================================
   480PX AND BELOW - Smaller Title
   ============================================ */

@media (max-width: 480px) {
    .light-theme-video-header .video-header-title {
        /* Orijinal desktop boyutu: 2rem (480px'de) */
        font-size: 2rem !important;
        letter-spacing: 2px !important;
    }

    .light-theme-video-header .video-header-subtitle {
        font-size: 0.9rem !important;
        letter-spacing: 1.5px !important;
    }

    /* Navbar clearance for small screens */
    .light-theme-video-header .main-content .video-content {
        padding: 80px 20px 40px !important;
    }

    .light-theme-video-header .about-section .about-content,
    .light-theme-video-header .projects-section .projects-content,
    .light-theme-video-header .contact-section .contact-content {
        padding: 80px 20px 40px !important;
    }

    .light-theme-video-header .products-section .products-content {
        padding: 80px 20px 70px !important; /* Extra bottom padding for products */
    }

    .light-theme-video-header .tech-section .tech-main-content,
    .light-theme-video-header .tech-section .tech-content {
        padding: 90px 20px 55px !important; /* Extra bottom padding to prevent card clipping */
    }
}

@media (max-width: 320px) {
    .light-theme-video-header .video-header-title {
        font-size: 1.75rem !important;
        letter-spacing: 1.5px !important;
    }

    .light-theme-video-header .video-header-subtitle {
        font-size: 0.85rem !important;
        letter-spacing: 1px !important;
    }

    .light-theme-video-header .video-header-button,
    .light-theme-video-header .about-button,
    .light-theme-video-header .tech-button,
    .light-theme-video-header .projects-button,
    .light-theme-video-header .products-button,
    .light-theme-video-header .contact-button,
    .company-all-button,
    .light-theme-video-header .products-all-button,
    .light-theme-video-header .projects-all-button,
    .light-theme-video-header .contact-main-button {
        padding: 8px 18px !important;
        font-size: 0.75rem !important;
        min-width: 90px !important;
        letter-spacing: 1.2px !important;
    }

    /* Extra small screens - navbar clearance */
    .light-theme-video-header .main-content .video-content {
        padding: 70px 15px 30px !important;
    }

    .light-theme-video-header .about-section .about-content,
    .light-theme-video-header .projects-section .projects-content,
    .light-theme-video-header .contact-section .contact-content {
        padding: 70px 15px 30px !important;
    }

    .light-theme-video-header .products-section .products-content {
        padding: 70px 15px 60px !important; /* Extra bottom padding for products */
    }

    .light-theme-video-header .tech-section .tech-main-content,
    .light-theme-video-header .tech-section .tech-content {
        padding: 80px 15px 50px !important; /* Extra bottom padding to prevent card clipping */
    }

    /* Tech, Projects, Products Grid - Hep 2x2 kalır */
    .light-theme-video-header .services-grid,
    .light-theme-video-header .tech-grid,
    .light-theme-video-header .projects-grid,
    .light-theme-video-header .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 0 auto 20px auto !important;
        overflow: visible !important;
    }

    /* v3.6.0: Hide first 2 service cards on extra small screens too */
    .light-theme-video-header .services-grid .service-item:nth-child(1),
    .light-theme-video-header .services-grid .service-item:nth-child(2),
    .light-theme-video-header .tech-grid .service-item:nth-child(1),
    .light-theme-video-header .tech-grid .service-item:nth-child(2) {
        display: none !important;
    }

    /* Service card - Button-like smaller version */
    .light-theme-video-header .service-item {
        max-width: 140px !important;
        min-height: 100px !important;
        padding: 12px 8px !important;

        /* Button-like glass morphism - only top/bottom borders */
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 2px !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;

        /* Button-like angled corners - smaller */
        clip-path: polygon(
            0 4px, 4px 0,
            calc(100% - 4px) 0, 100% 4px,
            100% calc(100% - 4px), calc(100% - 4px) 100%,
            4px 100%, 0 calc(100% - 4px)
        ) !important;
    }

    .light-theme-video-header .service-title {
        font-size: 0.68rem !important;
        margin-top: 7px !important;
    }

    /* Service icon - daha küçük ama yuvarlak kalır */
    .light-theme-video-header .service-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.3rem !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
    }

    .light-theme-video-header .service-icon i,
    .light-theme-video-header .service-icon svg {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
}

/* ============================================
   LANDSCAPE MODE - Compact Vertical Spacing
   ============================================ */

@media (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
    .light-theme-video-header .video-content,
    .light-theme-video-header .about-content,
    .light-theme-video-header .tech-content {
        padding: 20px !important;
    }

    .light-theme-video-header .video-header-title {
        font-size: 1.5rem !important;
    }

    .light-theme-video-header .video-header-subtitle {
        font-size: 0.85rem !important;
    }

    .light-theme-video-header .scroll-indicator {
        display: none !important;
    }
}

/* ============================================
   iOS SAFARI - Viewport Height Fix
   ============================================ */

@supports (-webkit-touch-callout: none) {
    .light-theme-video-header {
        min-height: -webkit-fill-available !important;
    }

    @media (max-width: 768px) {
        .light-theme-video-header .main-content,
        .light-theme-video-header .about-section,
        .light-theme-video-header .tech-section,
        .light-theme-video-header .projects-section,
        .light-theme-video-header .products-section,
        .light-theme-video-header .contact-section {
            min-height: calc(var(--vh, 1vh) * 100) !important;
        }
    }
}

/* iOS text size adjust - CRITICAL FIX: Scope to widget-active pages ONLY */
@media (max-width: 768px) {
    body.light-theme-video-header-active html {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* ============================================
   SAFE AREA - Notched Devices
   ============================================ */

@supports (padding: env(safe-area-inset-top)) {
    .light-theme-video-header {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .light-theme-video-header .social-media-corner {
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        right: calc(12px + env(safe-area-inset-right)) !important;
    }
}

/* ============================================
   Z-INDEX HIERARCHY
   ============================================ */

/* CRITICAL FIX: Navbar must be above widget (z-index only, let theme control positioning)
   Widget is z-index: 100, navbar must be higher */
body.light-theme-video-header-active header.header,
body.light-theme-video-header-active .site-header,
body.light-theme-video-header-active #masthead {
    z-index: 999999 !important;
}

body.light-theme-video-header-active .header__wrapper-overlay-menu,
body.light-theme-video-header-active .header__wrapper-overlay-menu.opened {
    z-index: 9999999 !important;
}

/* ============================================
   PERFORMANCE - Reduce Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   PRINT OPTIMIZATION
   ============================================ */

@media print {
    .light-theme-video-header .social-media-corner,
    .light-theme-video-header .scroll-indicator,
    .light-theme-video-header .video-header-button {
        display: none !important;
    }

    .light-theme-video-header .about-section,
    .light-theme-video-header .tech-section,
    .light-theme-video-header .projects-section,
    .light-theme-video-header .products-section,
    .light-theme-video-header .contact-section {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        display: block !important;
    }
}

/* END OF MOBILE FIXES */