/* 
 * Kainat Temizlik - 2026 PRO Mobil Optimizasyon
 * İleri Seviye Özellikler: Container Queries, :has(), Safe Areas, View Transitions
 * Tarih: 8 Nisan 2026
 * Versiyon: 2.0 PRO
 */

/* =================================================================
   1. SAFE AREA INSETS - iPhone Notch/Dynamic Island Desteği
   ================================================================= */

@supports (padding-top: env(safe-area-inset-top)) {
    /* iOS 11+ ve modern cihazlar için */
    :root {
        --safe-area-top: env(safe-area-inset-top);
        --safe-area-bottom: env(safe-area-inset-bottom);
        --safe-area-left: env(safe-area-inset-left);
        --safe-area-right: env(safe-area-inset-right);
    }
    
    @media (max-width: 991px) {
        /* Header için safe area */
        .site-header {
            padding-top: var(--safe-area-top);
            padding-left: max(var(--safe-area-left), var(--mobile-spacing-md, 24px));
            padding-right: max(var(--safe-area-right), var(--mobile-spacing-md, 24px));
        }
        
        /* Alt navigasyon/footer için */
        .site-footer,
        .bottom-nav {
            padding-bottom: max(var(--safe-area-bottom), 16px);
        }
        
        /* Mobil menü için */
        .pbmit-menu-wrap {
            padding-top: max(var(--safe-area-top), 48px);
            padding-bottom: max(var(--safe-area-bottom), 24px);
            padding-left: max(var(--safe-area-left), 24px);
            padding-right: max(var(--safe-area-right), 24px);
        }
    }
}

/* =================================================================
   2. CONTAINER QUERIES - Modern Responsive (2026 Standard)
   ================================================================= */

@supports (container-type: inline-size) {
    /* Container tanımlamaları */
    .pbmit-service-style-1,
    .pbmit-ihbox-style-2,
    .pbmit-blog-style-1,
    .card-wrapper {
        container-type: inline-size;
        container-name: card;
    }
    
    .pbmit-element-posts-wrapper,
    .pbmit-service-wrapper {
        container-type: inline-size;
        container-name: grid;
    }
    
    /* Container query bazlı responsive */
    @container card (min-width: 300px) {
        .pbmit-ihbox-inner {
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 20px;
            align-items: start;
        }
    }
    
    @container card (max-width: 299px) {
        .pbmit-ihbox-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }
    
    @container grid (min-width: 768px) {
        .grid-layout {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }
    }
}

/* =================================================================
   3. :HAS() PSEUDO-CLASS - Modern Selector (2026)
   ================================================================= */

@supports selector(:has(*)) {
    /* İçeriğe göre stil değişimi */
    .pbmit-service-style-1:has(.pbmit-featured-wrapper img) {
        padding-top: 0;
    }
    
    .pbmit-service-style-1:not(:has(.pbmit-featured-wrapper img)) {
        padding-top: 32px;
    }
    
    /* Form validation göstergesi */
    form:has(input:invalid:not(:placeholder-shown)) button[type="submit"] {
        opacity: 0.5;
        pointer-events: none;
    }
    
    form:has(input:valid) button[type="submit"] {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* İçerik kontrolü */
    .pbmit-heading-subheading:has(.pbmit-heading-desc) {
        margin-bottom: 48px;
    }
    
    .pbmit-heading-subheading:not(:has(.pbmit-heading-desc)) {
        margin-bottom: 32px;
    }
    
    /* Navigation active state */
    nav:has(a.active) {
        border-bottom: 2px solid var(--pbmit-global-color, #007bff);
    }
}

/* =================================================================
   4. COLOR-MIX() - Modern Renk Yönetimi
   ================================================================= */

@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --primary-color: #007bff;
        --surface-color: #ffffff;
        
        /* Dinamik tonlar */
        --primary-light: color-mix(in srgb, var(--primary-color) 20%, white);
        --primary-dark: color-mix(in srgb, var(--primary-color) 80%, black);
        --surface-dimmed: color-mix(in srgb, var(--surface-color) 95%, black);
        --surface-bright: color-mix(in srgb, var(--surface-color) 98%, var(--primary-color));
    }
    
    @media (max-width: 768px) {
        .pbmit-btn-primary {
            background: var(--primary-color);
            color: white;
        }
        
        .pbmit-btn-primary:hover {
            background: var(--primary-dark);
        }
        
        .pbmit-btn-secondary {
            background: var(--primary-light);
            color: var(--primary-dark);
        }
        
        .card-surface {
            background: var(--surface-bright);
        }
    }
}

/* =================================================================
   5. SCROLL-DRIVEN ANIMATIONS - Native Scroll Effects
   ================================================================= */

@supports (animation-timeline: scroll()) {
    @media (max-width: 991px) {
        /* Header shrink animation on scroll */
        @keyframes shrink-header {
            from {
                padding-block: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            to {
                padding-block: 8px;
                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
            }
        }
        
        .site-header {
            animation: shrink-header linear;
            animation-timeline: scroll();
            animation-range: 0 100px;
        }
        
        /* Fade-in elements on scroll */
        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-on-scroll {
            animation: fade-in-up linear;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
        
        /* Progress bar */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(
                to right,
                var(--pbmit-global-color, #007bff) 0%,
                var(--pbmit-global-color, #007bff) var(--scroll-progress, 0%),
                transparent var(--scroll-progress, 0%)
            );
            z-index: 9999;
        }
    }
}

/* =================================================================
   6. LOGICAL PROPERTIES - RTL/LTR Desteği
   ================================================================= */

@media (max-width: 768px) {
    /* Fiziksel yerine mantıksal özellikler */
    .pbmit-element-posts-wrapper,
    .pbmit-service-wrapper {
        padding-inline: var(--mobile-spacing-md, 24px);
        padding-block: var(--mobile-spacing-lg, 32px);
        margin-inline: auto;
    }
    
    .pbmit-heading {
        margin-block-end: var(--mobile-spacing-md, 24px);
    }
    
    .pbmit-btn {
        margin-inline-end: var(--mobile-spacing-sm, 16px);
        padding-inline: calc(var(--mobile-spacing-md, 24px) * 1.5);
        padding-block: 14px;
    }
    
    .navigation > li {
        border-inline-start: 3px solid transparent;
    }
    
    .navigation > li.active,
    .navigation > li:hover {
        border-inline-start-color: var(--pbmit-global-color, #007bff);
    }
}

/* =================================================================
   7. REDUCED MOTION - Accessibility (WCAG 2.1)
   ================================================================= */

@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;
    }
    
    .pbmit-menu-wrap,
    .navbar-toggler,
    .pbmit-btn {
        transition: none !important;
        animation: none !important;
    }
}

/* =================================================================
   8. VIEW TRANSITIONS API - Hazırlık (Chrome 111+)
   ================================================================= */

@supports (view-transition-name: auto) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Özel transition elemanları */
    .page-transition {
        view-transition-name: page-content;
    }
    
    .modal-transition {
        view-transition-name: modal;
    }
}

/* =================================================================
   9. THUMB ZONE OPTIMIZATION - Ergonomik Dokunma Bölgeleri
   ================================================================= */

@media (max-width: 768px) {
    /* Bottom 1/3 ekran - kolay erişim bölgesi */
    .bottom-action-zone {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--mobile-spacing-md);
        padding-bottom: max(var(--safe-area-bottom, 16px), 16px);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
        z-index: 998;
        transform: translateZ(0);
    }
    
    /* Floating action button - sağ alt köşe */
    .fab {
        position: fixed;
        bottom: calc(24px + var(--safe-area-bottom, 0px));
        right: 24px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--pbmit-global-color, #007bff);
        color: white;
        box-shadow: 0 8px 24px rgba(0, 123, 255, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .fab:active {
        transform: scale(0.9);
    }
    
    /* Tab bar - ekran altı */
    .mobile-tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(56px + var(--safe-area-bottom, 0px));
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 4px;
        padding-bottom: var(--safe-area-bottom, 0px);
        z-index: 997;
    }
    
    .mobile-tab-bar .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px;
        min-height: 48px;
        color: #6b7280;
        text-decoration: none;
        font-size: 12px;
        transition: color 0.2s ease;
    }
    
    .mobile-tab-bar .tab-item.active {
        color: var(--pbmit-global-color, #007bff);
    }
    
    .mobile-tab-bar .tab-item i {
        font-size: 24px;
        margin-bottom: 4px;
    }
}

/* =================================================================
   10. PULL-TO-REFRESH UX - Native-like Feedback
   ================================================================= */

@media (max-width: 768px) {
    .pull-to-refresh-indicator {
        position: fixed;
        top: calc(var(--safe-area-top, 0px) + 60px);
        left: 50%;
        transform: translateX(-50%) translateY(var(--pull-distance, -100px));
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: white;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9998;
    }
    
    body.pulling .pull-to-refresh-indicator {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    
    .pull-to-refresh-indicator::after {
        content: '';
        width: 24px;
        height: 24px;
        border: 3px solid var(--pbmit-global-color, #007bff);
        border-right-color: transparent;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
}

/* =================================================================
   11. LOADING SKELETONS - Gelişmiş Placeholder
   ================================================================= */

@media (max-width: 768px) {
    .skeleton {
        background: linear-gradient(
            90deg,
            #f0f0f0 0%,
            #f8f8f8 50%,
            #f0f0f0 100%
        );
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s ease-in-out infinite;
        border-radius: 8px;
    }
    
    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    .skeleton-text {
        height: 16px;
        margin-bottom: 8px;
    }
    
    .skeleton-text:last-child {
        width: 60%;
    }
    
    .skeleton-image {
        width: 100%;
        padding-top: 60%;
        position: relative;
    }
    
    .skeleton-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }
    
    .skeleton-button {
        height: 48px;
        border-radius: 12px;
    }
}

/* =================================================================
   12. SWIPE GESTURES - Touch Interaction Feedback
   ================================================================= */

@media (max-width: 768px) and (hover: none) {
    /* Swipeable cards */
    .swipeable-card {
        touch-action: pan-y;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .swipeable-card.swiping {
        transition: none;
    }
    
    .swipeable-card.swipe-left {
        transform: translateX(-100%);
        opacity: 0;
    }
    
    .swipeable-card.swipe-right {
        transform: translateX(100%);
        opacity: 0;
    }
    
    /* Ripple effect - Material Design benzeri */
    .touch-ripple {
        position: relative;
        overflow: hidden;
    }
    
    .touch-ripple::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }
    
    .touch-ripple:active::after {
        width: 300px;
        height: 300px;
    }
}

/* =================================================================
   13. SCROLL SNAP - Modern Kaydırma Davranışı
   ================================================================= */

@media (max-width: 768px) {
    /* Horizontal scroll container */
    .scroll-snap-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px;
        padding: 24px;
    }
    
    .scroll-snap-container::-webkit-scrollbar {
        display: none;
    }
    
    .scroll-snap-item {
        scroll-snap-align: center;
        scroll-snap-stop: always;
        flex: 0 0 85%;
        max-width: 400px;
    }
    
    /* Carousel indicators */
    .scroll-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 16px;
    }
    
    .scroll-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.2);
        transition: background 0.3s ease, transform 0.3s ease;
    }
    
    .scroll-indicator.active {
        background: var(--pbmit-global-color, #007bff);
        transform: scale(1.4);
    }
}

/* =================================================================
   14. VARIABLE FONTS - Performans Optimizasyonu
   ================================================================= */

@supports (font-variation-settings: normal) {
    @media (max-width: 768px) {
        /* Tek font dosyası ile tüm ağırlıklar */
        @font-face {
            font-family: 'Inter Variable';
            src: url('../fonts/inter-variable.woff2') format('woff2-variations');
            font-weight: 100 900;
            font-display: swap;
        }
        
        body {
            font-family: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-variation-settings: 'wght' 400;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-variation-settings: 'wght' 700;
        }
        
        .font-medium {
            font-variation-settings: 'wght' 500;
        }
        
        .font-semibold {
            font-variation-settings: 'wght' 600;
        }
    }
}

/* =================================================================
   15. HAPTIC FEEDBACK - Vibration Media Query (Deneysel)
   ================================================================= */

@media (prefers-reduced-motion: no-preference) and (hover: none) {
    /* Vibration API desteği olan cihazlar için CSS sınıfları */
    .haptic-light {
        /* JS ile vibrate(10) tetiklenir */
    }
    
    .haptic-medium {
        /* JS ile vibrate(20) tetiklenir */
    }
    
    .haptic-heavy {
        /* JS ile vibrate([30, 10, 30]) tetiklenir */
    }
}

/* =================================================================
   16. FOCUS-VISIBLE - Gelişmiş Accessibility
   ================================================================= */

@media (max-width: 768px) {
    /* Sadece klavye ile odaklandığında göster */
    *:focus:not(:focus-visible) {
        outline: none;
    }
    
    *:focus-visible {
        outline: 3px solid var(--pbmit-global-color, #007bff);
        outline-offset: 2px;
        border-radius: 4px;
    }
    
    /* Touch cihazlarda outline gizle, active state göster */
    @media (hover: none) {
        *:focus-visible {
            outline: none;
        }
        
        *:active {
            background-color: rgba(0, 0, 0, 0.05);
        }
    }
}

/* =================================================================
   17. MODERN GRID - Subgrid Desteği
   ================================================================= */

@supports (grid-template-rows: subgrid) {
    @media (max-width: 768px) and (min-width: 576px) {
        .service-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
        
        .service-item {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 3;
        }
        
        /* Subgrid ile tüm kartlar aynı hizalanır */
        .service-item .service-icon {
            grid-row: 1;
        }
        
        .service-item .service-title {
            grid-row: 2;
        }
        
        .service-item .service-desc {
            grid-row: 3;
        }
    }
}

/* =================================================================
   18. INTERSECTION OBSERVER - Lazy Loading CSS Hints
   ================================================================= */

@media (max-width: 768px) {
    /* Lazy load için initial state */
    .lazy-image {
        opacity: 0;
        transform: scale(0.95);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    
    .lazy-image.loaded {
        opacity: 1;
        transform: scale(1);
    }
    
    /* Placeholder blur effect */
    .lazy-image-placeholder {
        filter: blur(10px);
        transition: filter 0.5s ease;
    }
    
    .lazy-image-placeholder.loaded {
        filter: blur(0);
    }
    
    /* Progressive blur removal */
    @keyframes unblur {
        from { filter: blur(10px); }
        to { filter: blur(0); }
    }
    
    .progressive-image {
        animation: unblur 0.5s ease-out;
    }
}

/* =================================================================
   19. BOTTOM SHEET - Modern Modal Alternative
   ================================================================= */

@media (max-width: 768px) {
    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 90vh;
        background: white;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10000;
        padding-bottom: var(--safe-area-bottom, 0px);
    }
    
    .bottom-sheet.active {
        transform: translateY(0);
    }
    
    /* Drag handle */
    .bottom-sheet::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }
    
    .bottom-sheet-content {
        padding: 32px 24px 24px;
        overflow-y: auto;
        max-height: calc(90vh - 32px);
    }
    
    /* Backdrop */
    .bottom-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 9999;
    }
    
    .bottom-sheet-backdrop.active {
        opacity: 1;
        visibility: visible;
    }
}

/* =================================================================
   20. PERFORMANCE HINTS - Browser Optimization
   ================================================================= */

@media (max-width: 991px) {
    /* Compositor layer için */
    .will-animate {
        will-change: transform, opacity;
    }
    
    /* Animasyon bitince will-change kaldır */
    .animation-ended {
        will-change: auto;
    }
    
    /* GPU acceleration */
    .gpu-accelerated {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* Contain optimization */
    .isolated-component {
        contain: layout style paint;
    }
    
    .isolated-component-strict {
        contain: strict;
    }
    
    /* Content visibility */
    .below-fold {
        content-visibility: auto;
        contain-intrinsic-size: 0 500px;
    }
}

/* =================================================================
   21. ENHANCED DARK MODE - Color Scheme Aware
   ================================================================= */

@media (max-width: 991px) and (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --glass-bg: rgba(26, 32, 44, 0.9);
        --glass-border: rgba(255, 255, 255, 0.1);
        --surface-color: #1a202c;
        --text-color: #e2e8f0;
        --border-color: rgba(255, 255, 255, 0.08);
    }
    
    body {
        background: #0f1419;
        color: var(--text-color);
    }
    
    .pbmit-menu-wrap {
        background: linear-gradient(135deg, rgba(26, 32, 44, 0.98) 0%, rgba(45, 55, 72, 0.98) 100%);
        color: var(--text-color);
    }
    
    .navbar-toggler {
        background: rgba(45, 55, 72, 0.9);
    }
    
    .navbar-toggler i {
        color: #e2e8f0 !important;
    }
    
    input, select, textarea {
        background: rgba(45, 55, 72, 0.5);
        color: var(--text-color);
        border-color: var(--border-color);
    }
    
    .card-surface,
    .pbmit-service-style-1,
    .pbmit-ihbox-style-2 {
        background: rgba(45, 55, 72, 0.8);
        backdrop-filter: blur(12px);
    }
    
    /* Ters çevirme olmadan görsel kalitesi */
    img {
        filter: brightness(0.9) contrast(1.1);
    }
}

/* =================================================================
   22. NETWORK-AWARE LOADING - Connection Quality
   ================================================================= */

@media (max-width: 768px) {
    /* Slow connection için hafif stil */
    @media (prefers-reduced-data: reduce) {
        .high-quality-image {
            display: none;
        }
        
        .low-quality-image {
            display: block;
        }
        
        * {
            animation: none !important;
            transition: none !important;
        }
        
        .background-video,
        .hero-video {
            display: none;
        }
    }
}

/* =================================================================
   23. ORIENTATION-AWARE LAYOUTS
   ================================================================= */

@media (max-width: 768px) and (orientation: portrait) {
    .portrait-only {
        display: block;
    }
    
    .landscape-only {
        display: none;
    }
    
    /* Portrait için optimize layout */
    .service-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .portrait-only {
        display: none;
    }
    
    .landscape-only {
        display: block;
    }
    
    /* Landscape için optimize layout */
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Navbar daha kompakt */
    .site-header {
        padding-block: 4px;
    }
    
    .site-branding .logo-img {
        height: 32px !important;
    }
}