/* CEE MIMARLIK - main.css */

/* === BLOK 1 === */
/* AI ASSISTANT PANEL - SAĞ TARAFTA */
        .ai-assistant-panel {
            position: fixed;
            top: 0;
            right: -450px;
            width: 450px;
            height: 100vh;
            background: white;
            box-shadow: -5px 0 30px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            z-index: 10001;
            transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ai-assistant-panel.active {
            right: 0;
        }

        body.dark-mode .ai-assistant-panel {
            background: #1a1a1a;
            box-shadow: -5px 0 30px rgba(0,0,0,0.5);
        }

        .ai-assistant-header {
            background: linear-gradient(135deg, #4a4a4a 0%, #6a6a6a 100%);
            color: white;
            padding: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .ai-assistant-logo {
            width: 45px;
            height: 45px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .ai-assistant-messages {
            flex: 1;
            overflow-y: auto;
            padding: 25px;
            background: #f8f9fa;
        }

        body.dark-mode .ai-assistant-messages {
            background: #2c2c2c;
        }

        .ai-assistant-welcome {
            text-align: center;
            padding: 20px 0;
        }

        .ai-assistant-welcome h3 {
            margin: 15px 0 10px;
            font-size: 22px;
            color: var(--primary);
        }

        body.dark-mode .ai-assistant-welcome h3 {
            color: var(--accent);
        }

        .ai-assistant-welcome p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 25px;
        }

        body.dark-mode .ai-assistant-welcome p {
            color: #aaa;
        }

        .quick-topics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 25px 0;
        }

        .quick-topic {
            background: white;
            border: 1px solid #e0e0e0;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 13px;
            text-align: center;
        }

        body.dark-mode .quick-topic {
            background: #333;
            border-color: #444;
            color: white;
        }

        .quick-topic:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
        }

        .contact-info {
            background: #fff9e6;
            border: 1px solid #ffe066;
            padding: 15px;
            border-radius: 8px;
            font-size: 13px;
            margin-top: 20px;
            text-align: left;
        }

        body.dark-mode .contact-info {
            background: #3a3a1a;
            border-color: #5a5a3a;
        }

        .contact-info strong {
            color: var(--accent);
        }

        .ai-assistant-input {
            padding: 20px;
            background: white;
            border-top: 1px solid #e0e0e0;
            display: flex;
            gap: 10px;
        }

        body.dark-mode .ai-assistant-input {
            background: #1a1a1a;
            border-top-color: #333;
        }

        .ai-assistant-input input {
            flex: 1;
            padding: 14px 18px;
            border: 2px solid #e0e0e0;
            border-radius: 25px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }

        body.dark-mode .ai-assistant-input input {
            background: #2c2c2c;
            border-color: #444;
            color: white;
        }

        .ai-assistant-input input:focus {
            border-color: var(--accent);
        }

        .ai-assistant-input button {
            background: linear-gradient(135deg, #4a4a4a 0%, #6a6a6a 100%);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .ai-assistant-input button:hover {
            transform: scale(1.1);
        }

        /* Mesaj stilleri */
        .ai-msg, .user-msg {
            margin-bottom: 20px;
            animation: slideIn 0.3s ease;
        }

        .ai-msg {
            display: flex;
            gap: 12px;
        }

        .user-msg {
            display: flex;
            gap: 12px;
            flex-direction: row-reverse;
        }

        .msg-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .ai-msg .msg-avatar {
            background: linear-gradient(135deg, #4a4a4a 0%, #6a6a6a 100%);
        }

        .user-msg .msg-avatar {
            background: #2c2c2c;
            color: white;
            font-size: 14px;
        }

        .msg-content {
            background: white;
            padding: 14px 18px;
            border-radius: 16px;
            max-width: 75%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            line-height: 1.6;
            font-size: 14px;
        }

        body.dark-mode .msg-content {
            background: #333;
            color: white;
        }

        .user-msg .msg-content {
            background: var(--accent);
            color: white;
        }

        .msg-content strong {
            display: block;
            margin-bottom: 8px;
            color: var(--accent);
            font-size: 15px;
        }

        .user-msg .msg-content strong {
            color: white;
        }

        body.dark-mode .msg-content strong {
            color: #6a6a6a;
        }

        .typing-indicator-wrapper {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        .typing-indicator {
            display: flex;
            gap: 5px;
            padding: 14px 18px;
            background: white;
            border-radius: 16px;
        }

        body.dark-mode .typing-indicator {
            background: #333;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }

        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-10px); }
        }

        @media (max-width: 768px) {
            .ai-assistant-panel {
                width: 100%;
                right: -100%;
            }
            
            .msg-content {
                max-width: 85%;
                font-size: 13px;
                padding: 12px 16px;
            }
            
            .quick-topics {
                grid-template-columns: 1fr;
            }
            
            .ai-assistant-input {
                padding: 15px;
            }
            
            .ai-assistant-input input {
                font-size: 13px;
                padding: 12px 16px;
            }
        
        /* HERO MOBILE */
        @media (max-width: 768px) {
            .hero {
                height: 60vh;
                margin-top: 70px;
            }

            .hero-content {
                bottom: 30px;
                left: 30px;
                right: 30px;
            }

            .hero-title {
                font-size: 32px;
                letter-spacing: 1px;
            }

            .hero-category {
                font-size: 11px;
                letter-spacing: 2px;
            }

            .hero-meta {
                font-size: 13px;
            }

            .hero-nav {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

            .hero-nav.prev { left: 15px; }
            .hero-nav.next { right: 15px; }

            .hero-indicators {
                bottom: 20px;
                right: 30px;
            }

            .hero-indicator {
                width: 20px;
            }

            .hero-indicator.active {
                width: 35px;
            }
        }

        }

        /* =============================================
           INTERNET EXPLORER FALLBACK
           IE CSS değişkenlerini desteklemediği için
           sabit değerler kullanıyoruz
           ============================================= */
        
        /* IE için sabit renkler */
        .section-title .accent { color: #4a4a4a; }
        .hero-brand { color: #4a4a4a; }
        .hero-brand .cee-text { color: #4a4a4a; }
        .hero-brand .mimarlik-text { color: #6a6a6a; }
        .hero-cta { /* Logo gradient CSS'den */ }
        .logo-text { color: #4a4a4a; }
        .filter-btn.active { background: linear-gradient(135deg, #4a4a4a, #6a6a6a); border-color: #4a4a4a; color: white; }
        .filter-btn:hover { border-color: #4a4a4a; color: #4a4a4a; }
        .filter-btn.active:hover { color: #1a1a1a !important; }
        .team-cta-btn { /* Logo gradient CSS'den */ }
        .directions-btn { /* Logo gradient CSS'den */ }
        .ai-assistant-header { background: linear-gradient(180deg, #b0b0b0 0%, #606060 50%, #1a1a1a 100%); }
        .ai-panel-header { background: linear-gradient(180deg, #b0b0b0 0%, #606060 50%, #1a1a1a 100%); }
        .section-decoration .dot { background: linear-gradient(180deg, #a0a0a0, #1a1a1a); }
        nav a:hover, nav a.active { color: #4a4a4a; }
        nav a::after { background: #4a4a4a; }
        .footer-social-link:hover { background: #4a4a4a; border-color: #4a4a4a; }
        .footer-social-bottom a:hover { background: #4a4a4a; }
        ::selection { background: #4a4a4a; }
        ::-moz-selection { background: #4a4a4a; }
        :focus-visible { outline-color: #4a4a4a; }
        
        /* =============================================
           CROSS-BROWSER & MOBILE UYUMLULUK
           Tüm cihaz ve tarayıcılarda tutarlı görünüm
           ============================================= */
        
        /* CSS Reset & Normalize */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        /* HTML & Body - Tam ekran ve scroll düzeltmeleri */
        html {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            text-size-adjust: 100%;
            scroll-behavior: smooth;
            scroll-padding-top: 90px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* iOS Safari 100vh Fix */
        html, body {
            height: 100%;
            min-height: 100%;
            min-height: -webkit-fill-available;
        }

        @supports (height: 100dvh) {
            html, body {
                min-height: 100dvh;
            }
        }

        /* iPhone Notch / Safe Area Desteği */
        body {
            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);
        }

        /* Touch Cihazlar için Optimizasyon */
        * {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            touch-action: manipulation;
        }

        /* iOS Smooth Scroll */
        body, .scroll-container, .ai-assistant-messages, .modal-content {
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
        }

        /* Form Elemanları - Tüm Tarayıcılarda Tutarlı */
        input, button, select, textarea {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0;
        }

        /* iOS Input Zoom Önleme (16px minimum) */
        @media screen and (max-width: 768px) {
            input[type="text"],
            input[type="email"],
            input[type="tel"],
            input[type="password"],
            input[type="number"],
            input[type="search"],
            select,
            textarea {
                font-size: 16px !important;
            }
        }

        /* Buton Stilleri - Cross Browser */
        button {
            background: none;
            border: none;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Görseller - Responsive & Koruma */
        img, video, iframe {
            max-width: 100%;
            height: auto;
            display: block;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
            user-drag: none;
            pointer-events: auto;
            -webkit-touch-callout: none;
        }
            -webkit-user-drag: none;
            user-drag: none;
        }

        /* Link Stilleri */
        a {
            color: inherit;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* Flexbox Cross-Browser */
        .flex, [class*="flex"] {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        /* Grid Cross-Browser */
        .grid, [class*="grid"] {
            display: -ms-grid;
            display: grid;
        }

        /* Transform Cross-Browser Helper */
        .transform-gpu {
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 1000px;
            perspective: 1000px;
        }

        /* Animasyon Performans */
        .animate, [class*="animate"], .transition {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            will-change: transform, opacity;
        }

        /* Firefox Scrollbar Düzeltmesi */
        * {
            scrollbar-width: thin;
            scrollbar-color: #4a4a4a transparent;
        }

        /* Webkit Scrollbar (Chrome, Safari, Edge) */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #4a4a4a;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary, #2c2c2c);
        }

        /* Selection Rengi */
        ::selection {
            background: #4a4a4a;
            color: white;
        }

        ::-moz-selection {
            background: #4a4a4a;
            color: white;
        }

        /* Placeholder Stilleri - Cross Browser */
        ::placeholder {
            color: #999;
            opacity: 1;
        }

        ::-webkit-input-placeholder {
            color: #999;
        }

        ::-moz-placeholder {
            color: #999;
            opacity: 1;
        }

        :-ms-input-placeholder {
            color: #999;
        }

        /* Focus Outline - Accessibility */
        :focus {
            outline: none;
        }

        :focus-visible {
            outline: 2px solid #4a4a4a;
            outline-offset: 2px;
        }

        /* Print Stilleri */
        @media print {
            *, *::before, *::after {
                background: white !important;
                color: black !important;
                box-shadow: none !important;
                text-shadow: none !important;
            }
            
            a, a:visited {
                text-decoration: underline;
            }
            
            img {
                max-width: 100% !important;
            }
            
            @page {
                margin: 2cm;
            }
        }

        /* Reduced Motion - Accessibility */
        @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;
            }
        }

        /* Dark Mode Sistem Desteği */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme]) {
                color-scheme: dark;
            }
        }

        /* iOS 100vh Fix - Sabit Paneller İçin */
        :root {
            --vh: 1vh;
            --full-height: 100vh;
        }

        @supports (height: 100dvh) {
            :root {
                --full-height: 100dvh;
            }
        }

        @supports (-webkit-touch-callout: none) {
            :root {
                --full-height: -webkit-fill-available;
            }
        }

        /* Fixed pozisyonlu elementler için height düzeltmesi */
        .ai-assistant-panel,
        .ai-chat-window,
        .mobile-menu,
        [class*="modal"],
        [class*="panel"][style*="fixed"],
        [style*="position: fixed"][style*="height: 100vh"],
        [style*="position:fixed"][style*="height:100vh"] {
            height: var(--full-height, 100vh);
            max-height: var(--full-height, 100vh);
        }

        /* High Contrast Mode */
        @media (prefers-contrast: high) {
            :root {
                --border: #000;
            }
            
            button, a, input, select {
                border: 2px solid currentColor !important;
            }
        }

        /* Landscape Orientation Fix */
        @media screen and (orientation: landscape) and (max-height: 500px) {
            .hero {
                min-height: 100vh;
                height: auto;
            }
        }

        /* =============================================
           ORIJINAL CSS DEVAM EDIYOR
           ============================================= */

        :root {
            --primary: #2c2c2c;
            --secondary: #666;
            --accent: #1a1a1a;
            --bg: #fafafa;
            --white: #ffffff;
            --border: #e0e0e0;
            --shadow: rgba(0, 0, 0, 0.05);
            --whatsapp: #25D366;
            --icon-bg: #4a4a4a;
            --icon-bg-light: #6a6a6a;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            background: var(--bg);
            color: var(--primary);
            line-height: 1.8;
            overflow-x: hidden;
            transition: all 0.3s ease;
        }

        /* THEME COLORS */
        body[data-theme="blue"] {
            --primary: #1e3a5f;
            --secondary: #5c7a99;
            --accent: #2563eb;
            --border: #d1e3f8;
        }

        body[data-theme="brown"] {
            --primary: #3e2723;
            --secondary: #8d6e63;
            --accent: #5d4037;
            --bg: #f5f1ed;
            --border: #d7ccc8;
        }

        body[data-theme="green"] {
            --primary: #1b4332;
            --secondary: #52796f;
            --accent: #2d6a4f;
            --bg: #f1f8f4;
            --border: #b7e4c7;
        }

        body[data-theme="purple"] {
            --primary: #4a154b;
            --secondary: #8b7ab8;
            --accent: #6b46c1;
            --bg: #f5f3ff;
            --border: #ddd6fe;
        }

        body[data-theme="warm"] {
            --primary: #7c2d12;
            --secondary: #ea580c;
            --accent: #c2410c;
            --bg: #fff7ed;
            --border: #fed7aa;
        }

        body[data-theme="cool"] {
            --primary: #164e63;
            --secondary: #0891b2;
            --accent: #0e7490;
            --bg: #ecfeff;
            --border: #a5f3fc;
        }

        body[data-theme="elegant"] {
            --primary: #1a1a1a;
            --secondary: #8b7355;
            --accent: #4a4a4a;
            --bg: #fafaf8;
            --border: #e8dcc8;
        }

        /* MICRO-ANIMATIONS & SMOOTH TRANSITIONS */
        button, .btn, .btn-primary, .btn-secondary, a, input, textarea {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Ripple Effect */
        .ripple {
            position: relative;
            overflow: hidden;
        }

        .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, height 0.6s;
        }

        .ripple:active::after {
            width: 300px;
            height: 300px;
        }

        /* Button Hover Lift */
        button:hover, .btn:hover, .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

        button:active, .btn:active {
            transform: scale(0.98);
        }

        /* Card Animations */
        .project-item, .team-member {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .project-item:hover, .team-member:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        /* Smooth Scroll */
        html {
            scroll-behavior: smooth;
        }

        /* Page Load Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        /* SCROLL REVEAL - Lares tarzı yumuşak aşağıdan yukarı */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .scroll-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .scroll-reveal.delay-1 { transition-delay: 0.15s; }
        .scroll-reveal.delay-2 { transition-delay: 0.3s; }
        .scroll-reveal.delay-3 { transition-delay: 0.45s; }

        @media (prefers-reduced-motion: reduce) {
            .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
        }

        /* TEAM SLIDER responsive */
        #teamSliderSection img { transition: opacity 0.3s; }
        @media (max-width: 768px) {
            #teamSliderSection img { height: 350px !important; }
        }
        @media (max-width: 480px) {
            #teamSliderSection img { height: 280px !important; }
        }

        section {
        }

        /* DWG TOOLS MODAL */
        .dwg-tools-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 10001;
            overflow-y: auto;
            padding: 20px;
        }

        .dwg-tools-modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s;
        }

        .dwg-tools-container {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            max-width: 800px;
            width: 100%;
            padding: 40px;
            position: relative;
            animation: scaleIn 0.3s;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        body.dark-mode .dwg-tools-container {
            background: rgba(44, 44, 44, 0.98);
        }

        .modal-close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            font-size: 32px;
            color: var(--secondary);
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }

        .modal-close-btn:hover {
            background: rgba(0,0,0,0.1);
            transform: rotate(90deg);
        }

        .dwg-tools-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .dwg-tools-header svg {
            color: var(--primary);
            margin-bottom: 15px;
        }

        .dwg-tools-header h2 {
            font-size: 28px;
            margin-bottom: 10px;
            color: var(--primary);
        }

        .dwg-tools-header p {
            color: var(--secondary);
            font-size: 15px;
        }

        .dwg-tools-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            border-bottom: 2px solid var(--border);
        }

        .dwg-tab {
            flex: 1;
            background: none;
            border: none;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            color: var(--secondary);
            font-weight: 500;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            transition: all 0.3s;
        }

        .dwg-tab:hover {
            color: var(--primary);
            background: rgba(102, 126, 234, 0.05);
        }

        .dwg-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }

        .dwg-tab svg {
            flex-shrink: 0;
        }

        .dwg-tab-content {
            display: none;
        }

        .dwg-tab-content.active {
            display: block;
            animation: fadeIn 0.3s;
        }

        .upload-area {
            border: 2px dashed var(--border);
            border-radius: 12px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 20px;
        }

        .upload-area:hover {
            border-color: var(--primary);
            background: rgba(102, 126, 234, 0.05);
        }

        .upload-area svg {
            color: var(--primary);
            margin-bottom: 15px;
        }

        .upload-area h3 {
            font-size: 18px;
            margin-bottom: 8px;
            color: var(--primary);
        }

        .upload-area p {
            color: var(--secondary);
            margin-bottom: 10px;
        }

        .file-info {
            font-size: 13px;
            color: var(--secondary);
            opacity: 0.7;
        }

        .file-preview {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 12px;
            margin-bottom: 20px;
        }

        .file-icon {
            font-size: 32px;
        }

        .file-details {
            flex: 1;
        }

        .file-name {
            font-weight: 600;
            margin-bottom: 4px;
            color: var(--primary);
        }

        .file-size {
            font-size: 13px;
            color: var(--secondary);
        }

        .file-version {
            font-size: 13px;
            color: var(--accent);
            font-weight: 600;
            margin-top: 4px;
        }

        .remove-file-btn {
            background: rgba(239, 68, 68, 0.1);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 20px;
            color: #ef4444;
            cursor: pointer;
            transition: all 0.2s;
        }

        .remove-file-btn:hover {
            background: #ef4444;
            color: white;
        }

        .format-selector, .version-selector {
            margin-bottom: 25px;
        }

        .format-selector label, .version-selector label {
            display: block;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary);
        }

        .format-options, .version-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
        }

        .format-option, .version-option {
            position: relative;
        }

        .format-option input, .version-option input {
            position: absolute;
            opacity: 0;
        }

        .format-card, .version-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 15px;
            border: 2px solid var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .format-card:hover, .version-card:hover {
            border-color: var(--primary);
            background: rgba(102, 126, 234, 0.05);
        }

        .format-option input:checked + .format-card,
        .version-option input:checked + .version-card {
            border-color: var(--primary);
            background: rgba(102, 126, 234, 0.1);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
        }

        .format-card svg, .version-card svg {
            color: var(--primary);
            margin-bottom: 8px;
        }

        .format-card strong, .version-card strong {
            display: block;
            margin-bottom: 4px;
            color: var(--primary);
        }

        .format-desc, .version-code {
            font-size: 12px;
            color: var(--secondary);
        }

        .quality-settings {
            margin-bottom: 25px;
        }

        .quality-settings label {
            display: block;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary);
        }

        .quality-slider-container {
            position: relative;
        }

        .quality-slider {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--border);
            outline: none;
            -webkit-appearance: none;
        }

        .quality-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
        }

        .quality-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 12px;
            color: var(--secondary);
        }

        .current-quality {
            text-align: center;
            margin-top: 10px;
            font-weight: 600;
            color: var(--primary);
        }

        .version-note {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 15px;
            padding: 12px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 8px;
            font-size: 13px;
            color: var(--secondary);
        }

        .convert-btn, .download-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s;
        }

        .convert-btn:hover:not(:disabled), .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .convert-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .conversion-progress {
            margin-top: 20px;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: var(--border);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s;
            width: 0%;
        }

        .progress-text {
            text-align: center;
            font-size: 14px;
            color: var(--secondary);
        }

        .conversion-result {
            margin-top: 20px;
        }

        .result-success {
            text-align: center;
            padding: 30px;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 12px;
        }

        .result-success svg {
            margin-bottom: 15px;
        }

        .result-success h3 {
            color: #10b981;
            margin-bottom: 10px;
        }

        .result-success p {
            color: var(--secondary);
            margin-bottom: 20px;
        }

        .dwg-tools-link {
            color: var(--primary) !important;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .dwg-tools-link:hover {
            background: rgba(102, 126, 234, 0.1);
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .dwg-tools-container {
                padding: 25px;
                margin: 10px;
            }

            .format-options, .version-options {
                grid-template-columns: 1fr;
            }

            .dwg-tools-tabs {
                flex-direction: column;
            }

            .dwg-tab {
                border-bottom: none;
                border-left: 3px solid transparent;
                justify-content: flex-start;
                padding: 12px 15px;
            }

            .dwg-tab.active {
                border-bottom: none;
                border-left-color: var(--primary);
                background: rgba(102, 126, 234, 0.1);
            }
        }

        /* TOAST NOTIFICATIONS */
        .toast-container {
            position: fixed;
            top: 100px;
            right: 20px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        .toast {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            padding: 16px 20px;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 300px;
            max-width: 400px;
            pointer-events: auto;
            animation: slideInRight 0.3s ease-out;
            border-left: 4px solid;
        }

        body.dark-mode .toast {
            background: rgba(44, 44, 44, 0.95);
        }

        @keyframes slideInRight {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }

        .toast.removing {
            animation: slideOutRight 0.3s ease-out;
        }

        .toast-success {
            border-left-color: #10b981;
        }

        .toast-error {
            border-left-color: #ef4444;
        }

        .toast-info {
            border-left-color: #3b82f6;
        }

        .toast-warning {
            border-left-color: #f59e0b;
        }

        .toast-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .toast-content {
            flex: 1;
        }

        .toast-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 2px;
            color: var(--primary);
        }

        .toast-message {
            font-size: 13px;
            color: var(--secondary);
        }

        .toast-close {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--secondary);
            cursor: pointer;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .toast-close:hover {
            background: rgba(0,0,0,0.1);
        }

        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: currentColor;
            animation: progress 3s linear;
        }

        @keyframes progress {
            from { width: 100%; }
            to { width: 0%; }
        }

        /* SKELETON LOADING */
        .skeleton {
            background: linear-gradient(
                90deg,
                #f0f0f0 25%,
                #e0e0e0 50%,
                #f0f0f0 75%
            );
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 8px;
        }

        body.dark-mode .skeleton {
            background: linear-gradient(
                90deg,
                #2c2c2c 25%,
                #3c3c3c 50%,
                #2c2c2c 75%
            );
            background-size: 200% 100%;
        }

        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .skeleton-text {
            height: 16px;
            margin-bottom: 10px;
        }

        .skeleton-title {
            height: 24px;
            width: 60%;
            margin-bottom: 15px;
        }

        .skeleton-image {
            height: 200px;
            width: 100%;
        }

        .skeleton-card {
            padding: 20px;
            border-radius: 12px;
        }

        /* Hide content while loading */
        .loading .project-item {
            opacity: 0;
        }

        .loaded .project-item {
            animation: fadeInUp 0.6s ease-out forwards;
        }

        /* ANIMATED STATS */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            max-width: 1000px;
            margin: 60px auto;
            padding: 40px;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        body.dark-mode .stats-container {
            background: rgba(44, 44, 44, 0.5);
        }

        .stat-item {
            text-align: center;
            padding: 20px;
            position: relative;
        }

        .stat-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            border-radius: 2px;
        }

        .stat-number {
            font-size: 56px;
            font-weight: bold;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
            margin-bottom: 10px;
            display: inline-block;
        }

        .stat-percent {
            font-size: 40px;
            font-weight: bold;
            color: var(--primary);
            display: inline-block;
            margin-left: -10px;
        }

        .stat-label {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--secondary);
            margin-top: 15px;
        }

        /* Input Focus */
        input:focus, textarea:focus {
            transform: scale(1.01);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        body.dark-mode {
            --primary: #e0e0e0;
            --secondary: #b0b0b0;
            --accent: #ffffff;
            --bg: #1a1a1a;
            --white: #2c2c2c;
            --border: #333;
            --shadow: rgba(255, 255, 255, 0.05);
        }

        /* Dark Mode Geçiş Animasyonu */
        body, body *, header, footer, section, 
        .service-card, .service-card-v2, .ref-card, .faq-item, .team-member,
        .section-label, .section-title, nav a, .logo-text {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        /* HEADER & NAV */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
            z-index: 1000;
            padding: 10px 0;
            transition: all 0.4s ease;
        }

        header.scrolled {
            padding: 6px 0;
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
        }

        body.dark-mode header {
            background: rgba(20, 20, 20, 0.97);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        body.dark-mode header.scrolled {
            background: rgba(20, 20, 20, 0.98);
        }

        /* Dark Mode Navigation */
        body.dark-mode nav a {
            background: linear-gradient(180deg, 
                #c0c0c0 0%,
                #d0d0d0 20%,
                #e0e0e0 40%,
                #d0d0d0 60%,
                #c0c0c0 80%,
                #b0b0b0 100%
            ) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.5)) !important;
        }

        body.dark-mode nav a:hover,
        body.dark-mode nav a.active {
            background: linear-gradient(180deg, 
                #e0e0e0 0%,
                #f0f0f0 20%,
                #ffffff 40%,
                #f0f0f0 60%,
                #e0e0e0 80%,
                #d0d0d0 100%
            ) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.7)) !important;
        }

        body.dark-mode nav a::after {
            background: linear-gradient(90deg, #707070, #a0a0a0, #707070) !important;
        }

        body.dark-mode .logo-text {
            color: #e0e0e0 !important;
        }

        body.dark-mode .logo-subtitle {
            color: #909090 !important;
        }

        /* Dark Mode Sections */
        body.dark-mode section {
            background-color: #1a1a1a !important;
        }

        body.dark-mode #hizmetler,
        body.dark-mode #referanslar,
        body.dark-mode #ofis-konum,
        body.dark-mode #sss,
        body.dark-mode #ekip,
        body.dark-mode #projeler {
            background-color: #111111 !important;
        }

        /* Dark Mode Cards */
        body.dark-mode .service-card,
        body.dark-mode .service-card-v2 {
            background: #252525 !important;
            border-color: #333 !important;
        }

        body.dark-mode .service-card h3,
        body.dark-mode .service-card-v2 h3 {
            color: #e0e0e0 !important;
        }

        body.dark-mode .service-card p,
        body.dark-mode .service-card-v2 p {
            color: #a0a0a0 !important;
        }

        body.dark-mode .ref-card {
            background: #252525 !important;
            border-color: #333 !important;
        }

        body.dark-mode .ref-card h4 {
            color: #e0e0e0 !important;
        }

        body.dark-mode .ref-card p {
            color: #a0a0a0 !important;
        }

        /* Dark Mode FAQ */
        body.dark-mode .faq-item {
            background: #252525 !important;
            border-color: #333 !important;
        }

        body.dark-mode .faq-item h3,
        body.dark-mode .faq-question {
            color: #e0e0e0 !important;
        }

        body.dark-mode .faq-answer,
        body.dark-mode .faq-answer p {
            color: #a0a0a0 !important;
        }

        /* Dark Mode Team */
        body.dark-mode .team-member {
            background: #252525 !important;
        }

        body.dark-mode .team-member h3 {
            color: #e0e0e0 !important;
        }

        body.dark-mode .team-member p {
            color: #a0a0a0 !important;
        }

        /* Dark Mode Contact/Location */
        body.dark-mode .location-card,
        body.dark-mode .contact-card {
            background: #252525 !important;
            border-color: #333 !important;
        }

        body.dark-mode .location-card p,
        body.dark-mode .contact-card p {
            color: #a0a0a0 !important;
        }

        /* Dark Mode Buttons - Metalik stil korunacak */
        body.dark-mode .filter-btn {
            background: #252525 !important;
            border-color: #404040 !important;
            color: #b0b0b0 !important;
        }

        body.dark-mode .filter-btn:hover {
            border-color: #606060 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .filter-btn.active {
            background: linear-gradient(180deg, #505050 0%, #303030 100%) !important;
            border-color: #606060 !important;
            color: #ffffff !important;
        }

        /* Dark Mode Footer */
        body.dark-mode footer {
            background: #111111 !important;
            border-top-color: #333 !important;
        }

        body.dark-mode .footer-copyright {
            color: #808080 !important;
        }

        body.dark-mode .footer-social-bottom a {
            background: #252525 !important;
            color: #a0a0a0 !important;
            border-color: #404040 !important;
        }

        body.dark-mode .footer-social-bottom a:hover {
            background: #404040 !important;
            color: #ffffff !important;
        }

        /* Dark Mode Social Panel */
        body.dark-mode .social-sidebar-panel {
            background: linear-gradient(180deg, #404040 0%, #353535 25%, #2a2a2a 50%, #1f1f1f 75%, #151515 100%) !important;
        }

        body.dark-mode .social-sidebar-panel h4,
        body.dark-mode .social-sidebar-panel .social-header-text {
            color: #e0e0e0 !important;
        }

        body.dark-mode .social-sidebar-panel .social-follow-text {
            color: #b0b0b0 !important;
        }

        /* Dark Mode Chat Menu */
        body.dark-mode .chat-menu {
            background: linear-gradient(180deg, #404040 0%, #353535 25%, #2a2a2a 50%, #1f1f1f 75%, #151515 100%) !important;
        }

        body.dark-mode .chat-menu-title {
            color: #e0e0e0 !important;
        }

        body.dark-mode .chat-menu-subtitle {
            color: #b0b0b0 !important;
        }

        /* Dark Mode Map Badge */
        body.dark-mode .map-location-badge {
            background: linear-gradient(180deg, #404040 0%, #353535 25%, #2a2a2a 50%, #1f1f1f 75%, #151515 100%) !important;
        }

        body.dark-mode .map-location-badge span {
            color: #e0e0e0 !important;
        }

        /* Dark Mode Scroll Indicator */
        body.dark-mode .scroll-indicator {
            color: #b0b0b0;
        }

        body.dark-mode .scroll-text {
            color: #909090;
        }

        /* Dark Mode Butonlar */
        body.dark-mode .hero-cta,
        body.dark-mode .team-cta-btn,
        body.dark-mode .directions-btn {
            background: linear-gradient(180deg, #505050 0%, #404040 25%, #303030 50%, #202020 75%, #151515 100%) !important;
            color: #e0e0e0 !important;
            border: 1px solid #505050 !important;
        }

        body.dark-mode .hero-cta:hover,
        body.dark-mode .team-cta-btn:hover,
        body.dark-mode .directions-btn:hover {
            background: linear-gradient(180deg, #606060 0%, #505050 25%, #404040 50%, #303030 75%, #202020 100%) !important;
            color: #ffffff !important;
        }

        /* Dark Mode İletişim Bölümü */
        body.dark-mode #iletisim {
            background-color: #111111 !important;
        }

        body.dark-mode .contact-form {
            background: #1a1a1a !important;
        }

        body.dark-mode .contact-form input,
        body.dark-mode .contact-form textarea {
            background: #252525 !important;
            border-color: #404040 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .contact-form input::placeholder,
        body.dark-mode .contact-form textarea::placeholder {
            color: #808080 !important;
        }

        body.dark-mode .contact-form label {
            color: #b0b0b0 !important;
        }

        /* Dark Mode İkon Daireleri */
        body.dark-mode .service-icon,
        body.dark-mode .service-icon-v2,
        body.dark-mode .ref-icon,
        body.dark-mode .contact-icon {
            background: linear-gradient(180deg, #505050 0%, #404040 25%, #303030 50%, #202020 75%, #151515 100%) !important;
        }

        /* Dark Mode Project Cards */
        body.dark-mode .project-card {
            background: #252525 !important;
            border-color: #333 !important;
        }

        body.dark-mode .project-card h3 {
            color: #e0e0e0 !important;
        }

        body.dark-mode .project-card p {
            color: #a0a0a0 !important;
        }

        /* Dark Mode Lightbox */
        body.dark-mode #lightbox {
            background: rgba(0, 0, 0, 0.95) !important;
        }

        /* Dark Mode WhatsApp Panel */
        body.dark-mode .whatsapp-panel {
            background: #1a1a1a !important;
            border-color: #333 !important;
        }

        body.dark-mode .whatsapp-panel input,
        body.dark-mode .whatsapp-panel textarea {
            background: #252525 !important;
            border-color: #404040 !important;
            color: #e0e0e0 !important;
        }

        /* Dark Mode Stats Container */
        body.dark-mode .stats-item,
        body.dark-mode .stat-item {
            background: #252525 !important;
        }

        body.dark-mode .stats-item h3,
        body.dark-mode .stat-item h3,
        body.dark-mode .stat-number {
            color: #e0e0e0 !important;
        }

        body.dark-mode .stats-item p,
        body.dark-mode .stat-item p,
        body.dark-mode .stat-label {
            color: #a0a0a0 !important;
        }

        /* Dark Mode Tüm Beyaz/Açık Arka Planlar */
        body.dark-mode .bg-white,
        body.dark-mode [style*="background: white"],
        body.dark-mode [style*="background: #fff"],
        body.dark-mode [style*="background-color: white"],
        body.dark-mode [style*="background-color: #fff"],
        body.dark-mode [style*="background: #f8f9fa"],
        body.dark-mode [style*="background: #f5f5f5"],
        body.dark-mode [style*="background-color: #f8f9fa"],
        body.dark-mode [style*="background-color: #f5f5f5"] {
            background: #1a1a1a !important;
            background-color: #1a1a1a !important;
        }

        /* Dark Mode Text Colors */
        body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
        body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
            color: #e0e0e0;
        }

        body.dark-mode p, body.dark-mode span, body.dark-mode li {
            color: #b0b0b0;
        }

        body.dark-mode a {
            color: #c0c0c0;
        }

        body.dark-mode a:hover {
            color: #ffffff;
        }

        /* html.dark-mode için de aynı stilleri uygula */
        html.dark-mode body {
            background-color: #111111 !important;
        }

        html.dark-mode header {
            background: rgba(20, 20, 20, 0.97) !important;
        }

        html.dark-mode section {
            background-color: #1a1a1a !important;
        }

        /* Dark Mode Hamburger Menu */
        body.dark-mode .hamburger span,
        body.dark-mode .hamburger-menu span {
            background-color: #e0e0e0 !important;
        }

        body.dark-mode .mobile-menu,
        body.dark-mode .mobile-nav {
            background: #1a1a1a !important;
        }

        body.dark-mode .mobile-menu a,
        body.dark-mode .mobile-nav a {
            color: #e0e0e0 !important;
            border-bottom-color: #333 !important;
        }

        body.dark-mode .mobile-menu a:hover,
        body.dark-mode .mobile-nav a:hover {
            background: #252525 !important;
            color: #ffffff !important;
        }

        /* Dark Mode Dropdown */
        body.dark-mode .nav-dropdown .dropdown-content,
        body.dark-mode .dropdown-menu,
        body.dark-mode .ehizmetler-menu,
        body.dark-mode #ehizmetlerMenu {
            background: #1a1a1a !important;
            border-color: #333 !important;
        }

        body.dark-mode .nav-dropdown .dropdown-content a,
        body.dark-mode .dropdown-menu a,
        body.dark-mode .ehizmetler-menu a,
        body.dark-mode #ehizmetlerMenu a {
            color: #b0b0b0 !important;
        }

        body.dark-mode .nav-dropdown .dropdown-content a:hover,
        body.dark-mode .dropdown-menu a:hover,
        body.dark-mode .ehizmetler-menu a:hover,
        body.dark-mode #ehizmetlerMenu a:hover {
            background: #252525 !important;
            color: #ffffff !important;
        }

        /* Dark Mode Modal */
        body.dark-mode .modal-content {
            background: #1a1a1a !important;
            border-color: #333 !important;
        }

        body.dark-mode .modal-content h2,
        body.dark-mode .modal-content h3 {
            color: #e0e0e0 !important;
        }

        body.dark-mode .modal-content p {
            color: #b0b0b0 !important;
        }

        /* Dark Mode Toast */
        body.dark-mode .toast {
            background: #252525 !important;
            color: #e0e0e0 !important;
            border-color: #404040 !important;
        }

        /* Dark Mode Scrollbar */
        body.dark-mode ::-webkit-scrollbar-track {
            background: #1a1a1a !important;
        }

        body.dark-mode ::-webkit-scrollbar-thumb {
            background: #404040 !important;
        }

        body.dark-mode ::-webkit-scrollbar-thumb:hover {
            background: #505050 !important;
        }

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

        .logo-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0;
            transition: all 0.4s ease;
            margin-left: 0;
            padding: 8px 15px;
            border-radius: 0;
            background: transparent;
            border: none;
            box-shadow: none;
        }

        body.dark-mode .logo-container {
            background: transparent;
            border: none;
            box-shadow: none;
        }

        .logo-top {
            display: flex;
            align-items: center;
            gap: 0;
        }

        /* === LOGO - BÜYÜK BAŞLANGIÇ === */
        .site-logo {
            height: 75px;
            width: auto;
            transition: all 0.4s ease;
            object-fit: contain;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
            background: transparent !important;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }

        /* Scroll'da header logosu TAMAMEN GİZLENSİN - floating logo devrede */
        header.scrolled .site-logo {
            height: 0 !important;
            opacity: 0 !important;
            visibility: hidden !important;
        }

        header.scrolled .logo-container {
            opacity: 0 !important;
            visibility: hidden !important;
            width: 0 !important;
            height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            overflow: hidden !important;
            pointer-events: none !important;
        }

        body.dark-mode header.scrolled .logo-container {
            opacity: 0 !important;
            visibility: hidden !important;
        }

        /* === LOGO ALTI YAZI - Header'da görünür === */
        .logo-text {
            display: block;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 4px;
            color: #1a1a1a;
            text-transform: uppercase;
            transition: all 0.4s ease;
            opacity: 1;
            max-height: 25px;
            overflow: hidden;
            margin-top: 3px;
            text-align: center;
        }

        header.scrolled .logo-text {
            opacity: 0;
            max-height: 0;
            margin-top: 0;
        }

        .logo-subtitle {
            display: none;
        }

        header.scrolled .logo-subtitle {
            display: none;
        }

        body.dark-mode .logo-text {
            color: #e0e0e0;
        }

        body.dark-mode .logo-subtitle {
            color: #aaa;
            border-top-color: rgba(212, 175, 55, 0.4);
        }

        /* Mobile Menu Toggle */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--primary);
            cursor: pointer;
        }

        nav {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        nav.mobile-open {
            display: flex;
        }

        nav a {
            color: var(--secondary);
            text-decoration: none;
            font-size: 13px;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: all 0.3s;
            position: relative;
            font-weight: 600;
            /* Metalik Gradient Efekti */
            background: linear-gradient(180deg, 
                #4a4a4a 0%,
                #5a5a5a 20%,
                #6a6a6a 40%,
                #5a5a5a 60%,
                #4a4a4a 80%,
                #3a3a3a 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0px 1px 0px rgba(255,255,255,0.3));
        }

        nav a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #3a3a3a, #6a6a6a, #3a3a3a);
            transition: width 0.3s;
        }

        nav a:hover::after,
        nav a.active::after {
            width: 100%;
            background: linear-gradient(90deg, #3a3a3a, #7a7a7a, #3a3a3a);
        }

        nav a:hover,
        nav a.active {
            background: linear-gradient(180deg, 
                #6a6a6a 0%,
                #7a7a7a 20%,
                #8a8a8a 40%,
                #7a7a7a 60%,
                #6a6a6a 80%,
                #5a5a5a 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0px 1px 0px rgba(255,255,255,0.5));
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .social-icons {
            display: flex;
            gap: 12px;
            align-items: center;
            padding-right: 15px;
            border-right: 1px solid var(--border);
        }

        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            color: var(--primary);
            transition: all 0.3s ease;
            border-radius: 50%;
        }

        .social-link:hover {
            color: var(--accent);
            background: var(--bg);
            transform: translateY(-2px);
        }

        body.dark-mode .social-link:hover {
            background: rgba(255,255,255,0.1);
        }

        .btn-minimal {
            background: none;
            border: 1px solid var(--border);
            color: var(--primary);
            padding: 8px 16px;
            cursor: pointer;
            font-size: 13px;
            letter-spacing: 1px;
            transition: all 0.3s;
        }

        .btn-minimal:hover {
            background: var(--accent);
            color: var(--white);
            border-color: var(--accent);
        }

        /* DİL SEÇİCİ DROPDOWN */
        .lang-dropdown {
            position: relative;
            display: inline-block;
        }

        .lang-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            min-width: 160px;
            z-index: 10002;
            overflow: hidden;
            animation: langMenuFadeIn 0.2s ease;
        }

        @keyframes langMenuFadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .lang-menu.show {
            display: block;
        }

        .lang-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
            color: #333;
        }

        .lang-option:hover {
            background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
        }

        .lang-option.active {
            background: linear-gradient(135deg, #4a4a4a, #6a6a6a);
            color: white;
        }

        .lang-flag {
            display: inline-flex;
            width: 24px;
            height: 16px;
            border-radius: 3px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .lang-flag svg {
            width: 100%;
            height: 100%;
        }

        /* Dark Mode için dil menüsü */
        body.dark-mode .lang-menu {
            background: #252525;
            border-color: #404040;
        }

        body.dark-mode .lang-option {
            color: #e0e0e0;
        }

        body.dark-mode .lang-option:hover {
            background: linear-gradient(135deg, #353535, #404040);
        }

        body.dark-mode .lang-option.active {
            background: linear-gradient(135deg, #505050, #606060);
        }

        /* HERO SLIDER - MODERN */
        .hero {
            height: 100vh;
            min-height: 600px;
            position: relative;
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            left: 0;
            right: 0;
        }
        
        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .hero-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        
        /* Lares Tarzı Hero İçerik - SAĞDAN SOLA ANİMASYON */
        .hero-content-lares {
            position: absolute;
            top: 50%;
            right: 8%;
            left: auto;
            transform: translateY(-50%);
            z-index: 10;
            max-width: 550px;
            text-align: right;
        }
        
        /* Hero Fade-In Animasyonu */
        @-webkit-keyframes heroFadeIn {
            from { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
            to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
        }
        @keyframes heroFadeIn {
            from { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
            to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
        }
        
        .hero-brand {
            font-size: 52px;
            font-weight: 700;
            letter-spacing: 8px;
            color: #ffffff;
            margin: 0 0 30px 0;
            text-transform: uppercase;
            line-height: 1.1;
            -webkit-animation: heroFadeIn 1s ease-out;
            animation: heroFadeIn 1s ease-out;
        }
        
        /* CEE yazısına metalik 3D gradient */
        .hero-brand .cee-text {
            display: block;
            font-weight: 900;
            font-size: 100px;
            letter-spacing: 20px;
            background: linear-gradient(180deg, 
                #f0f0f0 0%,
                #d8d8d8 15%,
                #b8b8b8 35%,
                #909090 55%,
                #686868 75%,
                #404040 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.8))
                    drop-shadow(4px 4px 0px rgba(0,0,0,0.5))
                    drop-shadow(6px 6px 2px rgba(0,0,0,0.3));
            text-shadow: none;
            position: relative;
        }
        
        /* Alt yazı - MİMARLIK & YAPI SİSTEMLERİ metalik */
        .hero-brand .mimarlik-text {
            display: block;
            font-weight: 700;
            font-size: 24px;
            letter-spacing: 10px;
            margin-top: 15px;
            background: linear-gradient(180deg, 
                #f0f0f0 0%,
                #d8d8d8 15%,
                #b8b8b8 35%,
                #909090 55%,
                #686868 75%,
                #404040 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.7))
                    drop-shadow(2px 2px 0px rgba(0,0,0,0.5))
                    drop-shadow(3px 3px 1px rgba(0,0,0,0.3));
            text-shadow: none;
        }
        
        .hero-description {
            font-size: 15px;
            line-height: 1.9;
            font-weight: 500;
            margin-bottom: 35px;
            background: linear-gradient(180deg, 
                #e8e8e8 0%,
                #d0d0d0 25%,
                #b0b0b0 50%,
                #909090 75%,
                #707070 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.7))
                    drop-shadow(2px 2px 0px rgba(0,0,0,0.5))
                    drop-shadow(3px 3px 1px rgba(0,0,0,0.3));
            opacity: 0;
            transform: translateX(50px);
        }
        
        .hero-cta {
            display: inline-block;
            padding: 16px 45px;
            background: #4a4a4a; /* IE fallback */
            background: rgba(90,102,119,0.9);
            color: #ffffff !important;
            text-decoration: none;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            border-radius: 50px;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            -webkit-animation: heroFadeIn 1s ease-out 0.4s both;
            animation: heroFadeIn 1s ease-out 0.4s both;
        }
        
        .hero-cta:hover {
            background: #4a4a4a; /* IE fallback */
            background: rgba(90,102,119,1);
            -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.4);
        }
        
        @media (max-width: 992px) {
            .hero-content-lares {
                left: 5%;
                right: 5%;
                max-width: none;
                text-align: left;
            }
            .hero-logo-badge {
                display: block !important;
            }
            .hero-logo-badge > div {
                flex-direction: column !important;
                gap: 15px !important;
            }
            .hero-brand {
                font-size: 28px !important;
                letter-spacing: 8px !important;
            }
            .hero-brand .cee-text {
                font-size: 70px !important;
                letter-spacing: 14px !important;
                filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.7))
                        drop-shadow(4px 4px 2px rgba(0,0,0,0.4)) !important;
            }
            .hero-brand .mimarlik-text {
                font-size: 20px !important;
                letter-spacing: 8px !important;
                margin-top: 12px !important;
                filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.6))
                        drop-shadow(2px 2px 0px rgba(0,0,0,0.4))
                        drop-shadow(3px 3px 1px rgba(0,0,0,0.2)) !important;
            }
        }
        
        @media (max-width: 600px) {
            .hero-logo-badge {
                padding: 15px 20px !important;
            }
            .hero-logo-badge img {
                height: 60px !important;
            }
            .hero-brand {
                font-size: 22px !important;
                letter-spacing: 6px !important;
            }
            .hero-brand .cee-text {
                font-size: 48px !important;
                letter-spacing: 10px !important;
                filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.6))
                        drop-shadow(3px 3px 2px rgba(0,0,0,0.3)) !important;
            }
            .hero-brand .mimarlik-text {
                font-size: 14px !important;
                letter-spacing: 6px !important;
                margin-top: 10px !important;
                filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.6))
                        drop-shadow(2px 2px 1px rgba(0,0,0,0.3)) !important;
            }
            .hero-description {
                font-size: 14px;
                filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.6))
                        drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
            }
        }

        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.2s ease-in-out;
        }

        .hero-slide.active {
            opacity: 1;
        }

        .hero-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            filter: none;
            transition: none;
            image-rendering: auto;
            image-rendering: high-quality;
            -webkit-image-rendering: high-quality;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            will-change: auto;
        }

        .hero-slide.active img {
            transform: none;
        }

        body.dark-mode .hero-slide img {
            filter: brightness(0.85);
        }

        /* Minimal Overlay - Yazı okunabilirliği için */
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to right,
                rgba(0,0,0,0.3) 0%,
                rgba(0,0,0,0.5) 50%,
                rgba(0,0,0,0.7) 100%
            );
            pointer-events: none;
        }

        body.dark-mode .hero-overlay {
            background: linear-gradient(
                to bottom,
                rgba(0,0,0,0.2) 0%,
                rgba(0,0,0,0.3) 40%,
                rgba(0,0,0,0.5) 100%
            );
        }

        /* Project Info - Ortada */
        .hero-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            text-align: center;
            width: 90%;
            max-width: 800px;
            opacity: 0;
            transition: all 0.8s ease 0.3s;
        }

        .hero-slide.active .hero-content {
            opacity: 1;
        }

        .hero-category {
            display: inline-block;
            font-size: 12px;
            letter-spacing: 3px;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 12px;
            text-transform: uppercase;
        }

        body.dark-mode .hero-category {
            color: var(--accent);
        }

        .hero-title {
            font-size: 72px;
            font-weight: 800;
            letter-spacing: 8px;
            margin-bottom: 20px;
            background: linear-gradient(180deg, 
                #ffffff 0%,
                #e0e0e0 15%,
                #c0c0c0 30%,
                #a0a0a0 50%,
                #808080 70%,
                #606060 85%,
                #404040 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
            text-transform: uppercase;
            filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8))
                    drop-shadow(0 4px 4px rgba(0,0,0,0.6))
                    drop-shadow(0 8px 8px rgba(0,0,0,0.4))
                    drop-shadow(0 16px 16px rgba(0,0,0,0.2));
            position: relative;
        }

        /* Hero title için 3D derinlik efekti */
        .hero-title::before {
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            background: linear-gradient(180deg, 
                #303030 0%,
                #1a1a1a 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transform: translate(3px, 3px);
        }

        body.dark-mode .hero-title {
            background: linear-gradient(180deg, 
                #f0f0f0 0%,
                #d0d0d0 15%,
                #b0b0b0 30%,
                #909090 50%,
                #707070 70%,
                #505050 85%,
                #303030 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-meta {
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 6px;
            background: linear-gradient(180deg, 
                #e0e0e0 0%,
                #b0b0b0 30%,
                #808080 60%,
                #505050 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7))
                    drop-shadow(0 4px 6px rgba(0,0,0,0.5));
            text-transform: uppercase;
        }

        /* Navigation Arrows */
        .hero-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 3;
            transition: all 0.3s;
            font-size: 20px;
            opacity: 0.7;
        }

        .hero-nav:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-50%) scale(1.1);
            opacity: 1;
        }

        .hero-nav.prev { left: 30px; }
        .hero-nav.next { right: 30px; }

        /* Progress Bar - Gizli */
        .hero-progress {
            display: none;
        }

        /* Slide Indicators */
        .hero-indicators {
            position: absolute;
            bottom: 30px;
            right: 60px;
            display: flex;
            gap: 10px;
            z-index: 3;
        }

        .hero-indicator {
            width: 30px;
            height: 3px;
            background: rgba(255,255,255,0.3);
            cursor: pointer;
            transition: all 0.3s;
        }

        .hero-indicator.active {
            background: var(--accent);
            width: 50px;
        }

        .scroll-indicator {
            position: absolute;
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--primary);
            font-size: 11px;
            letter-spacing: 2px;
            animation: bounce 2s infinite;
            z-index: 2;
            opacity: 0.6;
        }

        body.dark-mode .scroll-indicator {
            color: #e0e0e0;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
            40% { transform: translateX(-50%) translateY(-10px); }
            60% { transform: translateX(-50%) translateY(-5px); }
        }

        /* SECTIONS */
        section {
            max-width: 1600px;
            margin: 60px auto;
            padding: 0 5%;
        }

        #projeler {
            padding-top: 80px;
            padding-bottom: 80px;
            background: linear-gradient(180deg, var(--bg, #fafafa) 0%, #f0f0f0 100%);
            max-width: 100%;
            margin: 0;
        }

        #projeler .section-header,
        #projeler .filter-container,
        #projeler .projects-grid {
            max-width: 1600px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 80px;
            padding-right: 80px;
        }

        #projeler .filter-container {
            padding-left: 20px;
            padding-right: 20px;
        }

        body.dark-mode #projeler {
            background: linear-gradient(180deg, var(--dm-bg, #111111) 0%, #1a1a1a 100%);
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
            padding: 40px 20px;
            position: relative;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
        }

        .section-label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 6px;
            background: linear-gradient(180deg, #707070 0%, #404040 50%, #1a1a1a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 20px;
            text-transform: uppercase;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
        }

        .section-title {
            font-size: 46px;
            font-weight: 400;
            letter-spacing: 6px;
            background: linear-gradient(180deg, #808080 0%, #505050 30%, #2a2a2a 70%, #1a1a1a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-transform: uppercase;
            line-height: 1.3;
            margin: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
        }

        .section-title .accent,
        .section-title span.accent,
        h2.section-title .accent,
        h2.section-title span.accent {
            background: linear-gradient(180deg, #606060 0%, #303030 50%, #1a1a1a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 500;
        }

        /* Alt çizgi dekorasyon */
        .section-decoration {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 25px;
            transition: none;
            cursor: default;
            position: relative;
            z-index: 100;
            padding: 20px 50px;
            margin-left: auto;
            margin-right: auto;
            width: fit-content;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        .section-decoration::before,
        .section-decoration::after {
            content: '';
            width: 50px;
            height: 1px;
            background: #e0e0e0;
            pointer-events: none;
        }

        .section-decoration .dot {
            width: 12px;
            height: 12px;
            background: #4a4a4a;
            transform: rotate(45deg);
            pointer-events: none;
        }

        /* Dark mode */
        body.dark-mode .section-label {
            background: linear-gradient(180deg, #b0b0b0 0%, #808080 50%, #606060 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.dark-mode .section-title {
            background: linear-gradient(180deg, #e0e0e0 0%, #a0a0a0 30%, #707070 70%, #505050 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.dark-mode .section-title .accent {
            background: linear-gradient(180deg, #c0c0c0 0%, #909090 50%, #606060 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        body.dark-mode .section-decoration::before,
        body.dark-mode .section-decoration::after {
            background: var(--dm-border, #333333);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .section-header {
                padding: 30px 15px;
                margin-bottom: 40px;
            }
            
            .section-title {
                font-size: 26px;
                letter-spacing: 4px;
            }
            
            .section-label {
                font-size: 10px;
                letter-spacing: 4px;
            }
        }

        /* PROJECTS GRID */
        .filter-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 70px;
            flex-wrap: wrap;
            padding: 20px;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 60px;
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
        }

        body.dark-mode .filter-container {
            background: rgba(30, 41, 59, 0.5);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
        }

        /* MODERN FİLTRE BUTONLARI */
        .filter-btn {
            background: transparent;
            border: 2px solid #e0e0e0;
            color: var(--secondary, #666);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 2px;
            cursor: pointer;
            padding: 14px 28px;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-transform: uppercase;
            border-radius: 50px;
            overflow: hidden;
            z-index: 1;
        }

        .filter-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #4a4a4a, #6a6a6a);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .filter-btn:hover {
            border-color: #4a4a4a; /* IE fallback */
            border-color: #4a4a4a;
            color: #4a4a4a; /* IE fallback */
            color: #4a4a4a;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(90, 102, 119, 0.2);
        }

        .filter-btn.active {
            border-color: #4a4a4a; /* IE fallback */
            border-color: #4a4a4a;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(90, 102, 119, 0.35);
        }
        
        .filter-btn.active:hover {
            color: white !important;
        }

        .filter-btn.active::before {
            opacity: 1;
        }

        /* Dark mode filter buttons */
        body.dark-mode .filter-btn {
            border-color: #3d3d3d;
            color: #a0aec0;
        }

        body.dark-mode .filter-btn:hover {
            border-color: #4a4a4a;
            color: #4a4a4a;
        }

        body.dark-mode .filter-btn.active {
            border-color: #4a4a4a;
            color: white;
        }
        
        body.dark-mode .filter-btn.active:hover {
            color: white !important;
        }

        /* Mobil uyumluluk */
        @media (max-width: 768px) {
            .filter-container {
                gap: 10px;
                margin-bottom: 40px;
                padding: 15px;
                border-radius: 15px;
                overflow-x: auto;
                flex-wrap: nowrap;
                justify-content: flex-start;
                max-width: 100%;
                margin-left: 20px;
                margin-right: 20px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            
            .filter-container::-webkit-scrollbar {
                display: none;
            }
            
            .filter-btn {
                padding: 10px 18px;
                font-size: 10px;
                letter-spacing: 1px;
                flex-shrink: 0;
                white-space: nowrap;
            }
            
            #projeler .filter-container {
                padding-left: 15px;
                padding-right: 15px;
            }
            
            #projeler {
                padding-top: 50px;
                padding-bottom: 50px;
            }
            
            #projeler .section-header,
            #projeler .projects-grid {
                padding-left: 20px;
                padding-right: 20px;
            }
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 45px;
        }

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

        .project-card {
            position: relative;
            overflow: hidden;
            background: var(--white);
            cursor: pointer;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 3/2;
            box-shadow: 0 4px 20px var(--shadow);
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform: translateZ(0);
            contain: layout style paint;
        }

        .project-card:hover {
            box-shadow: 0 30px 60px var(--shadow);
        }

        .project-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s ease;
            filter: grayscale(10%);
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .project-card:hover .project-image {
            transform: scale(1.05);
            filter: brightness(0.6);
        }

        .project-overlay {
            position: absolute;
            bottom: 0; left: 0; right: 0; top: 0;
            background: linear-gradient(to top, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0.25) 25%, transparent 45%);
            display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
            padding: 30px 25px; text-align: center;
            transition: background 0.6s ease;
            pointer-events: none;
        }

        .project-card:hover .project-overlay {
            background: linear-gradient(to top, rgba(15,15,15,0.95) 0%, rgba(15,15,15,0.8) 50%, rgba(15,15,15,0.55) 100%);
        }
        
        .project-detail-btn:hover {
            background: rgba(255,255,255,0.12) !important;
            border-color: rgba(255,255,255,0.7) !important;
            box-shadow: 0 0 20px rgba(255,255,255,0.08) !important;
        }
        .project-card:hover .project-detail-btn {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        .project-card:hover .proj-desc-hover {
            max-height: 100px !important;
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        .project-title {
            color: #fff;
            font-size: 18px;
            font-weight: 300;
            letter-spacing: 5px;
            margin-bottom: 15px;
            text-transform: uppercase;
            text-align: center;
            background: linear-gradient(180deg, #e0e0e0, #a0a0a0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .project-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .project-tag {
            font-size: 11px;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.9);
            border: 1px solid rgba(255,255,255,0.4);
            padding: 5px 14px;
            text-transform: uppercase;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
        }

        /* ABOUT SECTION */
        #hakkimizda {
            background: var(--white);
            padding: 100px 80px;
            margin: 120px auto;
        }

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            margin-bottom: 100px;
        }

        .about-text h2 {
            font-size: 42px;
            font-weight: 100;
            letter-spacing: 2px;
            margin-bottom: 30px;
            color: var(--accent);
        }

        .about-text p {
            font-size: 16px;
            line-height: 1.9;
            color: var(--secondary);
            margin-bottom: 20px;
        }

        .team-section {
            margin-top: 80px;
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 60px;
            max-width: 800px;
            margin: 0 auto;
        }

        .team-member {
            text-align: center;
        }

        .team-photo {
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
            filter: grayscale(30%);
            margin-bottom: 25px;
            transition: filter 0.3s;
        }

        .team-photo:hover {
            filter: grayscale(0%);
        }

        .team-name {
            font-size: 20px;
            font-weight: 300;
            letter-spacing: 2px;
            margin-bottom: 8px;
            color: var(--accent);
        }

        .team-role {
            font-size: 13px;
            letter-spacing: 2px;
            color: var(--secondary);
            text-transform: uppercase;
        }

        /* UNIFIED CHAT BUTTON */
        .unified-chat-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: linear-gradient(180deg, 
                #d0d0d0 0%, 
                #b0b0b0 20%,
                #808080 50%,
                #505050 80%,
                #2a2a2a 100%
            );
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 
                inset 0 2px 0 rgba(255,255,255,0.5),
                inset 0 -2px 0 rgba(0,0,0,0.2),
                0 6px 20px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            z-index: 1001;
            border: 1px solid #1a1a1a;
        }

        .unified-chat-btn:hover {
            transform: translateY(-8px) scale(1.1);
            box-shadow: 
                inset 0 2px 0 rgba(255,255,255,0.6),
                inset 0 -2px 0 rgba(0,0,0,0.3),
                0 14px 35px rgba(0, 0, 0, 0.45);
        }

        .chat-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff4444;
            color: white;
            font-size: 11px;
            font-weight: bold;
            padding: 3px 7px;
            border-radius: 12px;
            border: 2px solid white;
            min-width: 20px;
            text-align: center;
        }

        @keyframes pulse {
            0%, 100% { 
                box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
            }
            50% { 
                box-shadow: 0 8px 40px rgba(102, 126, 234, 0.8), 0 0 0 15px rgba(102, 126, 234, 0.1);
            }
        }

        /* CHAT MENU */
        .chat-menu {
            position: fixed;
            bottom: 100px;
            right: 20px;
            background: linear-gradient(180deg, 
                #e8e8e8 0%, 
                #d0d0d0 20%,
                #b8b8b8 50%,
                #a0a0a0 80%,
                #888888 100%
            );
            border: 1px solid #1a1a1a;
            border-radius: 16px;
            box-shadow: 
                inset 0 2px 0 rgba(255,255,255,0.6),
                inset 0 -2px 0 rgba(0,0,0,0.15),
                0 10px 40px rgba(0,0,0,0.3);
            padding: 8px;
            min-width: 300px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px) scale(0.95);
            transform-origin: bottom right;
            transition: all 0.25s ease-out;
            z-index: 10000;
        }

        body.dark-mode .chat-menu {
            background: linear-gradient(180deg, 
                #505050 0%, 
                #404040 20%,
                #303030 50%,
                #202020 80%,
                #1a1a1a 100%
            );
            border: 1px solid #0a0a0a;
            box-shadow: 
                inset 0 2px 0 rgba(255,255,255,0.2),
                inset 0 -2px 0 rgba(0,0,0,0.3),
                0 10px 40px rgba(0,0,0,0.5);
        }

        body.dark-mode .chat-menu-item:hover {
            background: rgba(255,255,255,0.1);
        }

        body.dark-mode .chat-menu-title {
            color: #e0e0e0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        body.dark-mode .chat-menu-subtitle {
            color: #b0b0b0;
        }

        body.dark-mode .chat-menu-divider {
            background: rgba(255,255,255,0.2);
        }

        .chat-menu.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .chat-menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
        }

        .chat-menu-item:active {
            background: rgba(0,0,0,0.1);
            transform: scale(0.98);
        }

        .chat-menu-item:hover {
            background: rgba(0,0,0,0.08);
        }

        .chat-menu-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .ai-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .whatsapp-gradient {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        }

        .chat-menu-content {
            flex: 1;
        }

        .chat-menu-title {
            font-weight: 700;
            font-size: 15px;
            color: #1a1a1a;
            margin-bottom: 2px;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }

        .chat-menu-subtitle {
            font-size: 12px;
            color: #2a2a2a;
            text-shadow: 0 1px 0 rgba(255,255,255,0.3);
        }

        .chat-menu-badge {
            font-size: 11px;
            font-weight: bold;
            padding: 4px 8px;
            border-radius: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .chat-menu-badge.online {
            background: #25D366;
            font-size: 16px;
            padding: 0;
            width: 10px;
            height: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: blink 2s infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .chat-menu-divider {
            height: 1px;
            background: rgba(0,0,0,0.2);
            margin: 8px 0;
        }

        .chat-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(0,0,0,0.2);
            font-weight: 700;
            font-size: 12px;
            color: #1a1a1a;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }

        .chat-menu-close-btn {
            background: linear-gradient(180deg, #d0d0d0, #909090);
            border: 1px solid #1a1a1a;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            font-size: 14px;
            cursor: pointer;
            color: #1a1a1a;
            line-height: 1;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
            transition: all 0.3s ease;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }

        .chat-menu-close-btn:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
        }

        body.dark-mode .chat-menu-header {
            border-bottom-color: rgba(255,255,255,0.2);
            color: #e0e0e0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        body.dark-mode .chat-menu-close-btn {
            background: linear-gradient(180deg, #505050, #303030);
            color: #e0e0e0;
        }

        /* AI CHAT WINDOW */
        .ai-chat-window {
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 380px;
            height: 550px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.5) inset;
            display: none;
            flex-direction: column;
            z-index: 1000;
            overflow: hidden;
        }

        /* AI ASSISTANT PANEL - SAĞ TARAFTA */
        .ai-assistant-panel {
            position: fixed;
            top: 0;
            right: -450px;
            width: 450px;
            height: 100vh;
            background: white;
            box-shadow: -5px 0 30px rgba(0,0,0,0.2);
            z-index: 10001;
            display: flex;
            flex-direction: column;
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.dark-mode .ai-assistant-panel {
            background: #2c2c2c;
            color: #e0e0e0;
        }

        .ai-assistant-panel.active {
            right: 0;
        }

        .ai-panel-header {
            background: linear-gradient(135deg, #4a4a4a, #6a6a6a);
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }

        .ai-panel-header-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ai-panel-logo {
            width: 45px;
            height: 45px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        .ai-panel-title h2 {
            font-size: 18px;
            font-weight: 600;
            color: white;
            margin: 0 0 3px 0;
        }

        .ai-panel-title p {
            font-size: 12px;
            color: rgba(255,255,255,0.9);
            margin: 0;
        }

        .ai-panel-close {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .ai-panel-close:hover {
            background: rgba(255,255,255,0.3);
            transform: rotate(90deg);
        }

        .ai-panel-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: #f8f8f8;
        }

        body.dark-mode .ai-panel-messages {
            background: #1a1a1a;
        }

        .ai-panel-message {
            margin-bottom: 16px;
            animation: messageSlide 0.3s ease;
        }

        @keyframes messageSlide {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ai-panel-message.user {
            display: flex;
            justify-content: flex-end;
        }

        .ai-panel-message.assistant {
            display: flex;
            justify-content: flex-start;
        }

        .ai-panel-bubble {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 16px;
            line-height: 1.5;
            font-size: 14px;
        }

        .ai-panel-message.user .ai-panel-bubble {
            background: linear-gradient(135deg, #4a4a4a, #6a6a6a);
            color: white;
            border-bottom-right-radius: 4px;
        }

        .ai-panel-message.assistant .ai-panel-bubble {
            background: white;
            color: #333;
            border: 1px solid #e0e0e0;
            border-bottom-left-radius: 4px;
        }

        body.dark-mode .ai-panel-message.assistant .ai-panel-bubble {
            background: #2c2c2c;
            color: #e0e0e0;
            border-color: #444;
        }

        .ai-panel-quick-questions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 15px;
            background: white;
            border-top: 1px solid #e0e0e0;
        }

        body.dark-mode .ai-panel-quick-questions {
            background: #2c2c2c;
            border-color: #444;
        }

        .ai-panel-quick-btn {
            padding: 10px;
            background: #f0f0f0;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: left;
        }

        .ai-panel-quick-btn:hover {
            background: linear-gradient(135deg, #4a4a4a, #6a6a6a);
            color: white;
            border-color: #4a4a4a;
            transform: translateY(-2px);
        }

        .ai-panel-input-area {
            padding: 15px;
            background: white;
            border-top: 1px solid #e0e0e0;
        }

        body.dark-mode .ai-panel-input-area {
            background: #2c2c2c;
            border-color: #444;
        }

        .ai-panel-input-wrapper {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .ai-panel-input {
            flex: 1;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 24px;
            font-size: 14px;
            outline: none;
            transition: all 0.3s;
        }

        .ai-panel-input:focus {
            border-color: #4a4a4a;
        }

        body.dark-mode .ai-panel-input {
            background: #1a1a1a;
            border-color: #444;
            color: #e0e0e0;
        }

        .ai-panel-send {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, #4a4a4a, #6a6a6a);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .ai-panel-send:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
        }

        .ai-panel-typing {
            display: flex;
            gap: 5px;
            padding: 12px 16px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 16px;
            width: fit-content;
        }

        .ai-panel-typing-dot {
            width: 8px;
            height: 8px;
            background: #4a4a4a;
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }

        .ai-panel-typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .ai-panel-typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        body.dark-mode .ai-chat-window {
            background: rgba(44, 44, 44, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .ai-chat-window.active {
            display: flex;
            animation: slideUp 0.3s ease-out;
        }

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

        .ai-chat-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .ai-avatar {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ai-chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: #f5f5f5;
        }

        .ai-message {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-message {
            flex-direction: row-reverse;
        }

        .ai-message-avatar {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            flex-shrink: 0;
        }

        .user-message .ai-message-avatar {
            background: #2c2c2c;
        }

        .ai-message-content {
            background: white;
            padding: 12px 16px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            max-width: 70%;
        }

        .user-message .ai-message-content {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .ai-message-content p {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
        }

        .ai-typing {
            display: none;
            gap: 4px;
            padding: 12px 16px;
        }

        .ai-typing.active {
            display: flex;
        }

        .ai-typing span {
            width: 8px;
            height: 8px;
            background: #667eea;
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }

        .ai-typing span:nth-child(2) { animation-delay: 0.2s; }
        .ai-typing span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-10px); }
        }

        .ai-quick-questions {
            display: grid;
            gap: 8px;
            margin-top: 15px;
        }

        .ai-quick-question {
            background: white;
            padding: 10px 14px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid #e0e0e0;
            text-align: center;
        }

        .ai-quick-question:hover {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .ai-chat-input {
            padding: 15px 20px;
            background: white;
            border-top: 1px solid #e0e0e0;
            display: flex;
            gap: 10px;
        }

        .ai-chat-input input {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 25px;
            font-size: 14px;
            outline: none;
        }

        .ai-chat-input input:focus {
            border-color: #667eea;
        }

        .ai-chat-input button:hover {
            transform: scale(1.05);
        }

        /* WHATSAPP BUTTON - Küçük, Sağda */
        .whatsapp-btn {
            position: fixed;
            bottom: 25px;
            right: 25px;
            width: 50px;
            height: 50px;
            background: var(--whatsapp);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 3px 15px rgba(37, 211, 102, 0.4);
            z-index: 999;
            transition: all 0.3s;
        }

        .whatsapp-btn:hover {
            transform: translateY(-8px) scale(1.15);
            box-shadow: 0 14px 30px rgba(37, 211, 102, 0.6);
        }

        .whatsapp-btn svg {
            width: 26px;
            height: 26px;
            fill: white;
        }

        /* Notification Badge */
        .whatsapp-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: #ff4444;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            animation: pulse 2s infinite;
        }

        /* Notification Bubble - Sağda */
        .whatsapp-notification {
            position: absolute;
            bottom: 65px;
            right: 0;
            background: white;
            padding: 12px 16px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            min-width: 220px;
            max-width: 260px;
            opacity: 0;
            transform: translateY(10px) scale(0.9);
            animation: popIn 0.5s ease forwards, fadeOut 0.5s ease 4.5s forwards;
            pointer-events: none;
        }

        body.dark-mode .whatsapp-notification {
            background: var(--white);
            color: var(--primary);
        }

        .whatsapp-notification::after {
            content: '';
            position: absolute;
            bottom: -7px;
            right: 18px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid white;
        }

        body.dark-mode .whatsapp-notification::after {
            border-top-color: var(--white);
        }

        .whatsapp-notification-title {
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 4px;
            color: var(--accent);
        }

        .whatsapp-notification-text {
            font-size: 11px;
            color: var(--secondary);
            line-height: 1.4;
        }

        @keyframes pulse {
            0%, 100% { 
                transform: scale(1); 
                box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
            }
            50% { 
                transform: scale(1.1); 
                box-shadow: 0 0 0 8px rgba(255, 68, 68, 0);
            }
        }

        @keyframes popIn {
            0% {
                opacity: 0;
                transform: translateY(10px) scale(0.9);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        /* WHATSAPP MODAL */
        .whatsapp-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .whatsapp-modal.show {
            display: flex;
        }

        .whatsapp-form {
            background: var(--white);
            padding: 50px;
            max-width: 500px;
            width: 90%;
            position: relative;
        }

        .whatsapp-form h3 {
            font-size: 28px;
            font-weight: 200;
            letter-spacing: 2px;
            margin-bottom: 30px;
            color: var(--accent);
            text-align: center;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-size: 12px;
            letter-spacing: 2px;
            color: var(--secondary);
            margin-bottom: 8px;
            text-transform: uppercase;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--primary);
            font-size: 14px;
            font-family: inherit;
        }

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

        .form-actions {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .btn-primary {
            flex: 1;
            padding: 14px;
            background: var(--whatsapp);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 13px;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: all 0.3s;
        }

        .btn-primary:hover {
            background: #1fb855;
        }

        .btn-secondary {
            flex: 1;
            padding: 14px;
            background: none;
            color: var(--primary);
            border: 1px solid var(--border);
            cursor: pointer;
            font-size: 13px;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: all 0.3s;
        }

        .btn-secondary:hover {
            background: var(--accent);
            color: var(--white);
            border-color: var(--accent);
        }

        .close-modal {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            font-size: 30px;
            cursor: pointer;
            color: var(--secondary);
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.3s;
        }

        .close-modal:hover {
            color: var(--accent);
        }

        /* LIGHTBOX */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .lightbox.show {
            display: flex;
        }

        .lightbox-image {
            max-width: 90%;
            max-height: 90vh;
            object-fit: contain;
        }

        .lightbox-close {
            position: absolute;
            top: 30px;
            right: 30px;
            background: none;
            border: none;
            color: white;
            font-size: 40px;
            cursor: pointer;
            width: 50px;
            height: 50px;
            transition: opacity 0.3s;
        }

        .lightbox-close:hover {
            opacity: 0.7;
        }

        /* FOOTER - Modern Dark Style */
        footer {
            background: #f8f9fa;
            padding: 25px 0;
            margin-top: 0;
            border-top: 1px solid #e5e7eb;
        }
        
        body.dark-mode footer {
            background: #1a1a1a !important;
            border-top-color: #333 !important;
        }
        
        body.dark-mode .footer-copyright {
            color: #94a3b8 !important;
        }
        body.dark-mode .footer-copyright a {
            color: #94a3b8 !important;
        }
        body.dark-mode .footer-copyright .admin-link {
            color: #e2e8f0 !important;
        }
        body.dark-mode .footer-bottom {
            background: transparent !important;
        }
        
        body.dark-mode .footer-social-bottom a {
            background: #2d2d2d !important;
            color: #94a3b8 !important;
        }
        
        body.dark-mode .footer-social-bottom a:hover {
            background: #4a4a4a !important;
            color: white !important;
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 5%;
        }
        
        .footer-bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            text-align: center;
        }
        
        .footer-copyright {
            font-size: 14px;
            color: #666;
            text-align: center;
            width: 100%;
        }
        
        .footer-social-bottom {
            display: flex;
            gap: 15px;
        }
        
        .footer-social-bottom a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .footer-social-bottom a:hover {
            background: #4a4a4a;
            color: white;
        }
        
        @media (max-width: 992px) {
            .footer-bottom {
                flex-direction: column;
                gap: 20px;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
            .footer-copyright {
                text-align: center;
                width: 100%;
            }
            .footer-content {
                padding: 0 30px;
            }
        }

        .footer-logo img {
            height: 55px;
            opacity: 0.6;
            margin-bottom: 25px;
        }

        .footer-text {
            font-size: 14px;
            color: var(--secondary);
            letter-spacing: 2px;
            margin-bottom: 25px;
        }

        .footer-social {
            margin: 40px 0;
        }

        .footer-social-title {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 3px;
            color: var(--primary);
            margin-bottom: 25px;
            text-transform: uppercase;
        }

        .footer-social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .footer-social-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 24px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 50px;
            color: var(--primary);
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
        }

        .footer-social-link:hover {
            background: #4a4a4a;
            color: var(--white);
            border-color: #4a4a4a;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(212,175,55,0.3);
        }

        body.dark-mode .footer-social-link:hover {
            background: #4a4a4a;
            color: var(--white);
            border-color: #4a4a4a;
        }

        .footer-social-link svg {
            flex-shrink: 0;
        }

        .admin-link {
            color: var(--secondary);
            text-decoration: none;
            transition: color 0.3s;
            cursor: pointer;
        }

        .admin-link:hover {
            color: var(--accent);
            text-decoration: underline;
        }

        /* INSTAGRAM FEED */
        .instagram-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .instagram-post {
            position: relative;
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .instagram-post:hover {
            transform: scale(1.05);
        }

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

        .instagram-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            opacity: 0;
            transition: opacity 0.3s;
            color: white;
            font-size: 14px;
        }

        .instagram-post:hover .instagram-overlay {
            opacity: 1;
        }

        .instagram-placeholder {
            grid-column: 1 / -1;
            text-align: center;
            padding: 60px 20px;
            color: var(--secondary);
            font-size: 16px;
        }

        .instagram-follow {
            display: inline-flex;
            align-items: center;
            padding: 15px 35px;
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            color: white;
            border-radius: 50px;
            font-weight: 500;
            transition: all 0.3s;
            text-decoration: none;
        }

        .instagram-follow:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(188, 24, 136, 0.3);
        }

        /* VIDEO GALLERY */
        .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .video-item {
            position: relative;
            aspect-ratio: 16/9;
            overflow: hidden;
            border-radius: 12px;
            cursor: pointer;
            background: var(--bg);
            transition: transform 0.3s;
        }

        .video-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px var(--shadow);
        }

        .video-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 70px;
            background: rgba(255,255,255,0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: var(--accent);
            transition: all 0.3s;
        }

        .video-item:hover .video-play-btn {
            transform: translate(-50%, -50%) scale(1.1);
            background: white;
        }

        .video-title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            font-size: 15px;
            font-weight: 500;
        }

        /* VIDEO LIGHTBOX */
        .video-lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.95);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

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

        .video-lightbox-content {
            max-width: 1200px;
            width: 100%;
            aspect-ratio: 16/9;
            position: relative;
        }

        .video-lightbox iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 8px;
        }

        .video-lightbox-close {
            position: absolute;
            top: -50px;
            right: 0;
            background: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s;
        }

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

        /* GOOGLE MAPS */
        #map {
            filter: grayscale(20%);
            transition: filter 0.3s;
        }

        #map:hover {
            filter: grayscale(0%);
        }

        /* MOBILE */
        @media (max-width: 768px) {
            /* UNIFIED CHAT - MOBILE */
            .unified-chat-btn {
                bottom: 20px;
                right: 20px;
                width: 60px;
                height: 60px;
                z-index: 1001;
            }
            
            .chat-menu {
                bottom: 90px;
                right: 15px;
                left: auto;
                min-width: 280px;
                width: auto;
                max-width: calc(100vw - 30px);
                z-index: 10000;
            }
            
            .chat-menu-item {
                padding: 16px;
            }
            
            .chat-menu-subtitle {
                font-size: 11px;
            }
            
            /* AI CHAT - MOBILE */
            .ai-chat-window {
                bottom: 0;
                right: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 0;
                max-height: 100vh;
            }
            
            .ai-chat-messages {
                padding: 15px;
            }
            
            .ai-message-content {
                max-width: 80%;
            }
            
            /* WHATSAPP - MOBILE */
            .header-content { padding: 0 25px; }
            
            .menu-toggle {
                display: block;
            }
            
            nav {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255,255,255,0.97);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 60px 30px 40px;
                gap: 4px;
                z-index: 99999;
                border-bottom: none;
                box-shadow: none;
            }
            
            nav.mobile-open {
                display: flex;
            }
            
            nav.mobile-open a {
                font-size: 16px !important;
                letter-spacing: 3px !important;
                padding: 14px 24px !important;
                width: 100% !important;
                max-width: 320px;
                text-align: center !important;
                border-radius: 12px !important;
                -webkit-text-fill-color: #2c2c2c !important;
                background: none !important;
                filter: none !important;
            }
            nav.mobile-open a:hover,
            nav.mobile-open a:active {
                background: rgba(0,0,0,0.05) !important;
            }
            nav.mobile-open a.active {
                background: #1a1a1a !important;
                -webkit-text-fill-color: #fff !important;
            }
            nav.mobile-open .nav-dropdown {
                width: 100% !important;
                max-width: 320px;
                position: static !important;
                display: block !important;
            }
            
            .logo-text { font-size: 18px; letter-spacing: 3px; }
            .logo-subtitle { font-size: 6px; letter-spacing: 1.5px; white-space: nowrap; padding-top: 3px; margin-top: 3px; }
            header.scrolled .logo-subtitle { opacity: 0; font-size: 0; height: 0; padding: 0; margin: 0; border: none; }
            .site-logo { height: 60px; }
            header.scrolled .site-logo { height: 0 !important; opacity: 0 !important; visibility: hidden !important; }
            .header-content { padding: 0 15px; }
            .logo-container { padding: 5px 10px; }
            header.scrolled .logo-container { opacity: 0 !important; visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; overflow: hidden !important; }
            .hero { height: 50vh; }
            .hero-title { font-size: 36px; letter-spacing: 5px; }
            .hero-subtitle { font-size: 13px; }
            .hero-nav { width: 35px; height: 35px; font-size: 14px; }
            .hero-nav.prev { left: 10px; }
            .hero-nav.next { right: 10px; }
            section { padding: 0 25px; margin: 60px auto; }
            .section-title { font-size: 28px; }
            .projects-grid { 
                grid-template-columns: 1fr; 
                gap: 30px; 
            }
            .about-content { grid-template-columns: 1fr; gap: 35px; }
            .team-grid { grid-template-columns: 1fr; gap: 30px; }
            .whatsapp-form { padding: 30px 25px; }
            .whatsapp-btn {
                width: 45px;
                height: 45px;
                bottom: 20px;
                right: 20px;
            }
            .whatsapp-btn svg {
                width: 24px;
                height: 24px;
            }
            .whatsapp-notification {
                max-width: 200px;
                font-size: 10px;
            }
        }

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

        @media (min-width: 769px) and (max-width: 1024px) {
            .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 35px; }
        }

        html { scroll-behavior: smooth; }
        
        /* LOADING INDICATOR */
        .loading {
            pointer-events: none;
            opacity: 0.6;
            position: relative;
        }
        
        .loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 3px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        /* SCROLL TO TOP */
        /* Scroll Progress Indicator */
        .scroll-progress-wrap {
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 50px;
            height: 50px;
            cursor: pointer;
            z-index: 998;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
        
        .scroll-progress-wrap.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .scroll-progress-wrap svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }
        
        .scroll-progress-wrap .progress-circle-bg {
            fill: none;
            stroke: #bbb;
            stroke-width: 2.5;
        }
        
        .scroll-progress-wrap .progress-circle {
            fill: none;
            stroke: #333;
            stroke-width: 2.5;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.1s ease;
        }
        
        .scroll-progress-wrap .progress-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .scroll-progress-wrap .progress-icon svg {
            width: 18px;
            height: 18px;
            transform: rotate(0deg);
            stroke: #333;
            stroke-width: 2.5;
            fill: none;
        }
        
        .scroll-progress-wrap:hover {
            transform: translateY(-3px);
        }
        
        .scroll-progress-wrap:hover .progress-circle {
            stroke: #555;
        }
        /* ========================================
           GELİŞMİŞ MOBİL RESPONSIVE İYİLEŞTİRMELER
           ======================================== */
        
        @media (max-width: 768px) {
            nav:not(.mobile-open) {
                padding: 15px 20px !important;
                flex-wrap: wrap;
            }
            nav.mobile-open {
                position: fixed !important;
                top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
                background: rgba(255,255,255,0.97) !important;
                backdrop-filter: blur(12px) !important;
                -webkit-backdrop-filter: blur(12px) !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
                padding: 60px 30px 40px !important;
                gap: 4px !important;
                z-index: 99999 !important;
                flex-wrap: nowrap !important;
            }
            nav.mobile-open a {
                font-size: 16px !important;
                letter-spacing: 3px !important;
                padding: 14px 24px !important;
                width: 100% !important;
                max-width: 320px !important;
                text-align: center !important;
                border-radius: 12px !important;
                -webkit-text-fill-color: #2c2c2c !important;
                background: none !important;
                filter: none !important;
            }
            nav.mobile-open a:active {
                background: rgba(0,0,0,0.05) !important;
            }
            nav.mobile-open a.active {
                background: #1a1a1a !important;
                -webkit-text-fill-color: #fff !important;
            }
            
            nav h1 {
                font-size: 20px !important;
            }
            
            .nav-menu {
                width: 100%;
                justify-content: center;
                gap: 10px !important;
                margin-top: 10px;
            }
            
            .hero {
                min-height: 60vh !important;
                padding: 80px 20px 40px !important;
            }
            
            .hero h1 {
                font-size: 32px !important;
                line-height: 1.2 !important;
            }
            
            .hero p {
                font-size: 16px !important;
            }
            
            .projects-grid {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
                padding: 20px !important;
            }
            
            .project-card {
                aspect-ratio: 3/4 !important;
                height: auto !important;
            }
            
            .project-card img {
                height: 100% !important;
            }
            
            .project-card .proj-desc-hover {
                max-height: 100px !important; opacity: 1 !important; transform: translateY(0) !important;
            }
            .project-card .project-detail-btn {
                opacity: 1 !important; transform: translateY(0) !important;
            }
            .project-card .project-overlay {
                background: linear-gradient(to top, rgba(15,15,15,0.95) 0%, rgba(15,15,15,0.7) 50%, rgba(15,15,15,0.4) 100%) !important;
            }
            
            .team-grid {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }
            
            footer {
                padding: 40px 20px !important;
            }
            
            .footer-content {
                flex-direction: column !important;
                text-align: center !important;
                gap: 30px !important;
            }
            
            .btn, .cta-btn, .convert-btn {
                width: 100% !important;
                padding: 14px 20px !important;
                font-size: 15px !important;
            }
            
            .dwg-tools-container {
                width: 95% !important;
                max-height: 90vh !important;
                padding: 20px !important;
                overflow-y: auto;
            }
            
            .dwg-tools-tabs {
                flex-direction: column !important;
                gap: 8px;
            }
            
            .dwg-tab {
                width: 100% !important;
                justify-content: center !important;
                padding: 12px !important;
            }
            
            .format-options, .version-options {
                grid-template-columns: 1fr !important;
            }
            
            .ai-panel-header {
                padding: 15px !important;
            }
            
            .ai-panel-title h2 {
                font-size: 18px !important;
            }
            
            .ai-panel-quick-questions {
                padding: 10px !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }
            
            .ai-panel-quick-btn {
                font-size: 11px !important;
                padding: 8px !important;
            }
            
            .stats-grid {
                grid-template-columns: 1fr !important;
                gap: 15px !important;
            }
            
            .contact-card {
                padding: 20px !important;
            }
            
            html {
                scroll-behavior: smooth;
            }
            
            button, a, .clickable {
                min-height: 44px;
                min-width: 44px;
            }
            
            h1 { font-size: 28px !important; }
            h2 { font-size: 24px !important; }
            h3 { font-size: 20px !important; }
            h4 { font-size: 18px !important; }
            p { font-size: 15px !important; line-height: 1.6 !important; }
        }
        
        @media (min-width: 769px) and (max-width: 1024px) {
            .projects-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
            
            .team-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }
        
        @media (max-width: 768px) and (orientation: landscape) {
            .hero {
                min-height: 100vh !important;
            }
            
            .ai-assistant-panel {
                width: 400px !important;
            }
        }
        
        @media (max-width: 375px) {
            .hero h1 {
                font-size: 26px !important;
            }
            
            nav h1 {
                font-size: 18px !important;
            }
            
            .project-card img {
                height: 200px !important;
            }
        }
        
        * {
            -webkit-tap-highlight-color: transparent;
        }
        
        img {
            image-rendering: -webkit-optimize-contrast;
        }
        
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        
        /* =============================================
           MADDE 3: SOL TARAF SOSYAL MEDYA SEKMESİ
           ============================================= */
        .social-sidebar {
            position: fixed;
            left: 0;
            bottom: 30px;
            z-index: 9998;
        }
        .social-sidebar-trigger {
            background: linear-gradient(180deg, 
                #d0d0d0 0%, 
                #b0b0b0 20%,
                #808080 50%,
                #505050 80%,
                #2a2a2a 100%
            ) !important;
            color: #1a1a1a !important;
            padding: 10px 12px;
            writing-mode: horizontal-tb;
            cursor: pointer;
            border-radius: 0 10px 10px 0;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.5px;
            box-shadow: 
                inset 0 2px 0 rgba(255,255,255,0.5),
                inset 0 -2px 0 rgba(0,0,0,0.2),
                4px 4px 15px rgba(0,0,0,0.25);
            transition: all 0.3s ease;
            border: 1px solid #1a1a1a;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }
        .social-sidebar-trigger span {
            color: #1a1a1a !important;
        }
        .social-sidebar-trigger:hover {
            padding-right: 16px;
            transform: translateY(-6px);
            box-shadow: 
                inset 0 2px 0 rgba(255,255,255,0.6),
                inset 0 -2px 0 rgba(0,0,0,0.3),
                6px 12px 30px rgba(0,0,0,0.4);
        }
        .social-sidebar-icon { font-size: 12px; }
        .social-sidebar-content {
            position: absolute;
            left: 0;
            bottom: 50px;
            width: 180px;
            background: linear-gradient(180deg, 
                #e8e8e8 0%, 
                #d0d0d0 20%,
                #b8b8b8 50%,
                #a0a0a0 80%,
                #888888 100%
            );
            border-radius: 0 12px 12px 0;
            box-shadow: 
                inset 0 2px 0 rgba(255,255,255,0.6),
                inset 0 -2px 0 rgba(0,0,0,0.15),
                5px 5px 30px rgba(0,0,0,0.3);
            padding: 12px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            visibility: hidden;
            transform: translateX(-100%);
            border: 1px solid #1a1a1a;
        }
        .social-sidebar-content.active {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }
        body.dark-mode .social-sidebar-content { 
            background: linear-gradient(180deg, 
                #606060 0%, 
                #505050 20%,
                #404040 50%,
                #303030 80%,
                #202020 100%
            ); 
        }
        .social-sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(0,0,0,0.2);
            font-weight: 700;
            font-size: 12px;
            color: #1a1a1a;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }
        body.dark-mode .social-sidebar-header { 
            border-bottom-color: rgba(255,255,255,0.2); 
            color: #e0e0e0; 
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        .social-close-btn {
            background: linear-gradient(180deg, #d0d0d0, #909090);
            border: 1px solid #1a1a1a;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            font-size: 14px;
            cursor: pointer;
            color: #1a1a1a;
            line-height: 1;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
            transition: all 0.3s ease;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }
        .social-close-btn:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
        }
        .social-sidebar-links {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .social-sidebar-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            text-decoration: none;
            color: white;
            font-weight: 500;
            font-size: 11px;
            transition: all 0.3s ease;
            transform: translateX(-20px);
            opacity: 0;
        }
        .social-sidebar-link svg {
            width: 14px;
            height: 14px;
        }
        .social-sidebar-content.active .social-sidebar-link { transform: translateX(0); opacity: 1; }
        .social-sidebar-content.active .social-sidebar-link:nth-child(1) { transition-delay: 0.1s; }
        .social-sidebar-content.active .social-sidebar-link:nth-child(2) { transition-delay: 0.2s; }
        .social-sidebar-content.active .social-sidebar-link:nth-child(3) { transition-delay: 0.3s; }
        .social-sidebar-content.active .social-sidebar-link:nth-child(4) { transition-delay: 0.4s; }
        .social-sidebar-link.instagram { 
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); 
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        .social-sidebar-link.twitter { 
            background: linear-gradient(135deg, #1a1a1a, #333); 
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        .social-sidebar-link.linkedin { 
            background: #0a66c2; 
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        .social-sidebar-link:hover { 
            transform: translateY(-5px) scale(1.05) !important; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important; 
        }
        .social-sidebar-footer {
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid rgba(0,0,0,0.2);
            text-align: center;
            font-weight: 700;
            color: #1a1a1a;
            font-size: 11px;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }
        body.dark-mode .social-sidebar-footer { 
            border-top-color: rgba(255,255,255,0.2); 
            color: #e0e0e0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        /* =============================================
           MADDE 7: DARK MODE DÜZELTMELERİ
           ============================================= */
        body.dark-mode .faq-item { background: #1a1a1a !important; }
        body.dark-mode .faq-item h3, body.dark-mode .faq-question { color: #e2e8f0 !important; }
        body.dark-mode .faq-answer, body.dark-mode .faq-answer p { color: #94a3b8 !important; }
        body.dark-mode .service-card { background: #1a1a1a !important; }
        body.dark-mode .service-card h3 { color: #4a4a4a !important; }
        body.dark-mode .service-card p { color: #94a3b8 !important; }
        body.dark-mode .section-title { color: #e2e8f0 !important; }
        body.dark-mode .section-title .accent { color: #4a4a4a !important; }
        body.dark-mode .section-label { color: #94a3b8 !important; }
        body.dark-mode #referanslar, body.dark-mode .references-section { background: #111111 !important; }
        body.dark-mode .partner-card, body.dark-mode .reference-card { background: #1a1a1a !important; }
        body.dark-mode .partner-card p, body.dark-mode .partner-card span, body.dark-mode .reference-card p { color: #94a3b8 !important; }
        body.dark-mode .location-card { background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%) !important; }
        body.dark-mode #location { background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%) !important; }
        
        /* =============================================
           MADDE 1: OFİS KONUMU RESPONSIVE
           ============================================= */
        .location-grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: stretch; }
        @media (max-width: 900px) {
            .location-grid { grid-template-columns: 1fr !important; gap: 25px !important; }
            .location-card { order: -1; }
        }
        
        /* =============================================
           MADDE 9-10: MOBİL RESPONSIVE
           ============================================= */
        @media (max-width: 768px) {
            .social-sidebar { top: auto; bottom: 100px; transform: none; }
            .social-sidebar-trigger { writing-mode: horizontal-tb; padding: 6px 10px; font-size: 9px; }
            .social-sidebar-content {
                top: auto; bottom: 0; transform: none;
                width: 140px; left: -140px;
                border-radius: 0 10px 10px 0;
                max-height: 35vh; overflow-y: auto;
                padding: 8px;
            }
            .social-sidebar-content.active { left: 0; }
            .social-sidebar-header {
                font-size: 10px;
                margin-bottom: 6px;
                padding-bottom: 6px;
            }
            .social-sidebar-links {
                gap: 4px;
            }
            .social-sidebar-link {
                padding: 6px 8px;
                font-size: 10px;
                gap: 6px;
                border-radius: 6px;
            }
            .social-sidebar-link svg {
                width: 12px;
                height: 12px;
            }
            .social-sidebar-footer {
                font-size: 8px;
                margin-top: 6px;
                padding-top: 6px;
            }
            .social-close-btn {
                font-size: 16px;
            }
            html, body { overflow-x: hidden; max-width: 100vw; }
            .contact-phones, .phone-numbers {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: wrap;
                gap: 10px;
                justify-content: center;
            }
            .location-grid { grid-template-columns: 1fr !important; padding: 0 15px !important; }
        }
        
        /* =============================================
           MADDE 2: EKİP ÜYESİ SOSYAL MEDYA
           ============================================= */
        .team-member-socials {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 15px;
            flex-wrap: wrap;
        }
        .team-social-link {
            width: 34px; height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            text-decoration: none;
            font-size: 14px;
        }
        .team-social-link.email { background: #4a4a4a; color: white; }
        .team-social-link.instagram { background: linear-gradient(45deg, #f09433, #dc2743); color: white; }
        .team-social-link.linkedin { background: #0a66c2; color: white; }
        .team-social-link.phone { background: #25d366; color: white; }
        .team-social-link:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        .team-photo {
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            object-fit: cover;
        }
        
        /* =============================================
           MADDE 7: DARK MODE DÜZELTMELERİ
           ============================================= */
        body.dark-mode .faq-item { background: #1a1a1a !important; }
        body.dark-mode .faq-item h3 { color: #e2e8f0 !important; }
        body.dark-mode .faq-item span { color: #4a4a4a !important; }
        body.dark-mode .faq-answer p { color: #94a3b8 !important; }
        body.dark-mode .service-card { background: #1a1a1a !important; }
        body.dark-mode .service-card h3 { color: #4a4a4a !important; }
        body.dark-mode .service-card p { color: #94a3b8 !important; }
        body.dark-mode #referanslar { background: #111111 !important; }
        body.dark-mode .ref-card { background: #1a1a1a !important; border: 1px solid #333 !important; }
        body.dark-mode .ref-card h4 { color: #e2e8f0 !important; }
        body.dark-mode .ref-card p { color: #94a3b8 !important; }
        body.dark-mode .reference-item { background: #1a1a1a !important; border-color: #333 !important; }
        body.dark-mode .reference-item h4 { color: #e2e8f0 !important; }
        body.dark-mode .section-title { color: #e2e8f0 !important; }
        body.dark-mode .section-title .accent { color: #4a4a4a !important; }
        body.dark-mode .section-label { color: #4a4a4a !important; }
        body.dark-mode .location-card { background: linear-gradient(145deg, #1a1a1a 0%, #111111 100%) !important; }
        
        /* =============================================
           MADDE 8: CROSS-BROWSER UYUMLULUK
           ============================================= */
        .filter-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
        * { scrollbar-width: thin; scrollbar-color: #4a4a4a #f1f1f1; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #b8963a; }
        body.dark-mode ::-webkit-scrollbar-track { background: #1a1a1a; }
        
        /* Safari flexbox düzeltmeleri */
        .projects-grid { display: -webkit-grid; display: grid; }
        .services-grid { display: -webkit-grid; display: grid; }
        .references-grid { display: -webkit-grid; display: grid; }
        
        /* =============================================
           MADDE 9-10: MOBİL DÜZELTMELERİ
           ============================================= */
        @media (max-width: 768px) {
            body, html { 
                overflow-x: hidden !important; 
                width: 100% !important;
                max-width: 100vw !important;
            }
            section { overflow-x: hidden; }
            .location-grid { 
                grid-template-columns: 1fr !important; 
            }
            .location-card {
                margin-top: 20px;
            }
            /* Telefon numarası yan yana */
            .contact-phones,
            div[style*="flex-direction: column"] {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                gap: 10px !important;
            }
            .header-actions {
                gap: 8px !important;
            }
            /* Sosyal sidebar mobil - KÜÇÜK */
            .social-sidebar {
                bottom: 100px !important;
            }
            .social-sidebar-trigger {
                writing-mode: horizontal-tb !important;
                padding: 6px 10px !important;
                border-radius: 0 8px 8px 0 !important;
                font-size: 9px !important;
            }
            .social-sidebar-content {
                top: auto !important;
                bottom: 40px !important;
                left: 0 !important;
                width: 140px !important;
                max-height: 35vh !important;
                transform: translateX(-100%) !important;
                border-radius: 0 10px 10px 0 !important;
                padding: 8px !important;
            }
            .social-sidebar-content.active {
                transform: translateX(0) !important;
            }
            .social-sidebar-header {
                padding: 6px !important;
                font-size: 10px !important;
                margin-bottom: 6px !important;
            }
            .social-sidebar-header span {
                font-size: 10px !important;
            }
            .social-sidebar-links {
                padding: 4px !important;
                gap: 4px !important;
            }
            .social-sidebar-link {
                padding: 6px 8px !important;
                font-size: 10px !important;
                border-radius: 6px !important;
            }
            .social-sidebar-link svg {
                width: 12px !important;
                height: 12px !important;
            }
            .social-sidebar-footer {
                padding: 6px !important;
                font-size: 8px !important;
            }
            /* İletişim bölümü mobil düzeltmesi */
            .contact-grid {
                grid-template-columns: 1fr !important;
                gap: 30px !important;
            }
            #iletisim > div > div {
                grid-template-columns: 1fr !important;
                gap: 30px !important;
            }
            #iletisim .section-header {
                padding: 0 15px;
            }
            #iletisim > div {
                padding: 0 15px !important;
            }
            #iletisim h3 {
                font-size: 18px !important;
                margin-bottom: 20px !important;
            }
            #iletisim form {
                gap: 15px !important;
            }
            #iletisim input,
            #iletisim select,
            #iletisim textarea {
                padding: 12px !important;
                font-size: 14px !important;
            }
            /* İletişim bilgileri mobil */
            #iletisim div[style*="margin-bottom: 25px"] {
                margin-bottom: 15px !important;
            }
            #iletisim div[style*="width: 45px"] {
                width: 38px !important;
                height: 38px !important;
                min-width: 38px !important;
                font-size: 16px !important;
            }
            #iletisim div[style*="gap: 15px"] {
                gap: 10px !important;
            }
            #iletisim a[style*="font-size: 18px"] {
                font-size: 15px !important;
            }
            #iletisim span[style*="line-height: 1.6"] {
                font-size: 13px !important;
            }
            .contact-wrapper {
                padding: 0 15px !important;
            }
            /* Harita konum ikonu mobil */
            .map-location-badge {
                top: 10px !important;
                right: 10px !important;
                padding: 8px 12px !important;
                gap: 6px !important;
            }
            .map-location-badge > div:first-child {
                width: 28px !important;
                height: 28px !important;
            }
            .map-location-badge > div:first-child svg {
                width: 14px !important;
                height: 14px !important;
            }
            .map-location-badge > span {
                font-size: 11px !important;
            }
            /* Ofis konum harita mobil */
            #ofis-konum > div {
                padding: 0 15px !important;
            }
            #ofis-konum iframe {
                height: 300px !important;
            }
        }

/* === BLOK 2 === */
/* =============================================
       CEE MİMARLIK - MODERN AKICI TEMA
       Soft geçişler, tutarlı renkler, zarif görünüm
       ============================================= */

    /* ANA RENK PALETİ */
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #fafafa;
        --bg-accent: #f5f5f5;
        --text-primary: #2d3748;
        --text-secondary: #666666;
        --text-muted: #999999;
        --accent-gold: #4a4a4a;
        --accent-gold-light: #6a6a6a;
        --border-light: #e8e8e8;
        --shadow-soft: 0 2px 20px rgba(0,0,0,0.03);
        --shadow-medium: 0 4px 30px rgba(0,0,0,0.06);
        --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* DARK MODE RENK PALETİ */
    body.dark-mode {
        --bg-primary: #1a1a1a !important;
        --bg-secondary: #222222 !important;
        --bg-accent: #1e1e1e !important;
        --text-primary: #e2e8f0 !important;
        --text-secondary: #94a3b8 !important;
        --text-muted: #64748b !important;
        --border-light: #3d3d3d !important;
    }

    /* TÜM SECTION'LAR - TEK RENK AKIŞI */
    body {
        background: var(--bg-primary) !important;
    }

    section {
        background: var(--bg-primary) !important;
        border: none !important;
        position: relative;
    }

    /* Alternatif section'lar için çok hafif gri */
    #hizmetler,
    #referanslar,
    #ofis-konum {
        background: var(--bg-accent) !important;
    }

    /* Section'lar arası yumuşak geçiş */
    #hizmetler::before,
    #referanslar::before,
    #ofis-konum::before {
        content: '';
        position: absolute;
        top: -50px;
        left: 0;
        right: 0;
        height: 50px;
        background: linear-gradient(to bottom, var(--bg-primary), var(--bg-accent));
        pointer-events: none;
    }

    #hizmetler::after,
    #referanslar::after,
    #ofis-konum::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: 0;
        right: 0;
        height: 50px;
        background: linear-gradient(to bottom, var(--bg-accent), var(--bg-primary));
        pointer-events: none;
        z-index: 1;
    }

    /* BAŞLIKLAR */
    .section-header {
        padding: 50px 20px 30px !important;
        background: transparent !important;
        margin-bottom: 40px !important;
    }

    .section-label {
        font-size: 11px !important;
        font-weight: 500 !important;
        letter-spacing: 5px !important;
        color: var(--text-muted) !important;
        margin-bottom: 12px !important;
    }

    .section-title {
        font-size: 36px !important;
        font-weight: 300 !important;
        letter-spacing: 4px !important;
        color: var(--text-primary) !important;
    }

    .section-title .accent {
        color: var(--accent-gold) !important;
        font-weight: 400 !important;
    }

    .section-decoration {
        margin-top: 18px !important;
        gap: 10px !important;
    }

    .section-decoration::before,
    .section-decoration::after {
        width: 35px !important;
        background: var(--border-light) !important;
    }

    .section-decoration .dot {
        width: 12px !important;
        height: 12px !important;
        background: var(--accent-gold) !important;
    }

    /* KARTLAR */
    .service-card,
    [id="referencesGrid"] > div,
    .faq-item {
        background: var(--bg-primary) !important;
        border: 1px solid var(--border-light) !important;
        border-radius: 16px !important;
        box-shadow: var(--shadow-soft) !important;
        transition: var(--transition-smooth) !important;
    }

    /* İKON DAİRELERİ - Normal: açık gri bg, siyah ikon */
    .contact-icon-circle,
    .service-icon-v2,
    .ref-icon {
        background: #f0f0f0 !important;
        color: #333 !important;
        transition: all 0.3s ease !important;
    }
    
    /* İKON DAİRELERİ - Hover: renkli bg, beyaz ikon, yukarı çıkma */
    .contact-icon-circle:hover,
    .service-card-v2:hover .service-icon-v2,
    .ref-card:hover .ref-icon {
        background: var(--accent-gold) !important;
        color: white !important;
        transform: translateY(-8px) scale(1.1);
        box-shadow: 0 12px 25px rgba(0,0,0,0.3) !important;
    }
    
    .contact-icon-circle:hover svg,
    .service-card-v2:hover .service-icon-v2 svg,
    .ref-card:hover .ref-icon svg {
        stroke: white !important;
    }

    /* TAKİP ET VE CHAT BUTONLARI */
    .social-sidebar-trigger {
        background: var(--accent-gold) !important;
    }
    .unified-chat-btn {
        background: var(--accent-gold) !important;
    }
    .chat-badge {
        background: var(--accent-gold) !important;
    }

    /* FİLTRE BUTONLARI */
    .filter-container {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 15px 0 !important;
    }

    .filter-btn {
        background: transparent !important;
        border: 1px solid var(--border-light) !important;
        color: var(--text-secondary) !important;
        padding: 10px 22px !important;
        font-size: 12px !important;
        border-radius: 25px !important;
    }

    .filter-btn:hover {
        border-color: var(--accent-gold) !important;
        color: var(--accent-gold) !important;
        background: transparent !important;
    }

    .filter-btn.active {
        background: var(--accent-gold) !important;
        border-color: var(--accent-gold) !important;
        color: white !important;
    }
    
    .filter-btn.active:hover {
        color: white !important;
    }

    .filter-btn.active::before {
        display: none !important;
    }

    /* BUTONLAR */
    .hero-cta,
    .team-cta-btn,
    .directions-btn {
        background: var(--accent-gold) !important;
        box-shadow: 0 4px 15px rgba(201, 162, 39, 0.2) !important;
        border-radius: 50px !important;
    }

    .hero-brand {
        color: var(--accent-gold) !important;
    }

    /* HEADER */
    header, nav, .header {
        background: var(--bg-primary) !important;
        border-bottom: 1px solid var(--border-light) !important;
        box-shadow: none !important;
    }

    /* FOOTER - dark mode'da koyu, normal'de tema rengi */
    body.dark-mode footer, body.dark-mode .footer {
        background: #1a1a1a !important;
    }

    /* MOBİL */
    @media (max-width: 768px) {
        .section-title {
            font-size: 24px !important;
            letter-spacing: 2px !important;
        }
        
        .section-header {
            padding: 30px 15px 20px !important;
            margin-bottom: 30px !important;
        }

        #hizmetler::before,
        #referanslar::before,
        #ofis-konum::before,
        #hizmetler::after,
        #referanslar::after,
        #ofis-konum::after {
            height: 30px;
        }
    }

/* === BLOK 3 === */
/* ═══════════════════════════════════════════════════════════════════════════
       CEE MİMARLIK - LOGO UYUMLU TEMA
       2 Renk Sistemi: Parlak Gümüş (#c8c8c8) → Koyu Antrasit (#1a1a1a)
       ═══════════════════════════════════════════════════════════════════════════ */

    /* === ANA RENK DEĞİŞKENLERİ === */
    :root {
        --logo-light: #c8c8c8;
        --logo-mid: #808080;
        --logo-dark: #1a1a1a;
    }

    /* === HERO CEE YAZISI - TEMİZ 3D METALİK === */
    .hero-brand .cee-text {
        background: linear-gradient(180deg, 
            #f0f0f0 0%,
            #d8d8d8 15%,
            #b8b8b8 35%,
            #909090 55%,
            #686868 75%,
            #404040 100%
        ) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.8))
                drop-shadow(4px 4px 0px rgba(0,0,0,0.5))
                drop-shadow(6px 6px 2px rgba(0,0,0,0.3)) !important;
        font-size: 100px !important;
        font-weight: 900 !important;
        letter-spacing: 20px !important;
    }

    /* === HERO MİMARLIK YAZISI - TEMİZ 3D === */
    .hero-brand .mimarlik-text {
        background: linear-gradient(180deg, 
            #f0f0f0 0%,
            #d8d8d8 15%,
            #b8b8b8 35%,
            #909090 55%,
            #686868 75%,
            #404040 100%
        ) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.7))
                drop-shadow(2px 2px 0px rgba(0,0,0,0.5))
                drop-shadow(3px 3px 1px rgba(0,0,0,0.3)) !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        letter-spacing: 10px !important;
        margin-top: 15px !important;
    }

    /* === TÜM BUTONLAR - LOGO GRADIENT (Görseldeki gibi) === */
    .hero-cta,
    .team-cta-btn,
    .directions-btn,
    .filter-btn.active {
        background: linear-gradient(180deg, 
            #d0d0d0 0%, 
            #b0b0b0 20%,
            #808080 50%,
            #505050 80%,
            #2a2a2a 100%
        ) !important;
        color: #1a1a1a !important;
        border: 1px solid #1a1a1a !important;
        border-radius: 50px !important;
        box-shadow: 
            inset 0 2px 0 rgba(255,255,255,0.5),
            inset 0 -2px 0 rgba(0,0,0,0.2),
            0 4px 15px rgba(0,0,0,0.25) !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
    }

    .hero-cta:hover,
    .team-cta-btn:hover,
    .directions-btn:hover {
        box-shadow: 
            inset 0 2px 0 rgba(255,255,255,0.6),
            inset 0 -2px 0 rgba(0,0,0,0.3),
            0 12px 30px rgba(0,0,0,0.4) !important;
        transform: translateY(-6px) scale(1.02);
    }

    /* === İKONLAR - LOGO GRADIENT === */
    .service-icon-v2,
    .ref-icon,
    .contact-icon-circle {
        background: linear-gradient(180deg, 
            #d0d0d0 0%, 
            #b0b0b0 20%,
            #808080 50%,
            #505050 80%,
            #2a2a2a 100%
        ) !important;
        border: 1px solid #1a1a1a !important;
        box-shadow: 
            inset 0 2px 0 rgba(255,255,255,0.4),
            inset 0 -2px 0 rgba(0,0,0,0.2),
            0 4px 12px rgba(0,0,0,0.2) !important;
    }

    .service-icon-v2 svg,
    .ref-icon svg,
    .contact-icon-circle svg {
        color: #1a1a1a !important;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4));
    }

    /* === ARCHITECT DIVIDER BANDI === */
    .architect-divider,
    #architectDivider {
        background: linear-gradient(180deg, #d0d0d0 0%, #a0a0a0 25%, #606060 50%, #303030 75%, #1a1a1a 100%) !important;
        border-top: 1px solid rgba(255,255,255,0.5) !important;
        border-bottom: 2px solid #0a0a0a !important;
        transition: all 0.3s ease !important;
    }

    .architect-divider:hover,
    #architectDivider:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
    }

    /* === SECTION BAŞLIK ACCENT === */
    .section-title .accent {
        background: linear-gradient(180deg, #909090 0%, #1a1a1a 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    /* === SECTION DECORATION DOT === */
    .section-decoration .dot {
        background: linear-gradient(180deg, #a0a0a0, #1a1a1a) !important;
    }

    /* === FILTER BUTONLARI === */
    .filter-btn {
        border-color: #808080 !important;
        color: #404040 !important;
    }

    .filter-btn:hover {
        border-color: #1a1a1a !important;
        color: #1a1a1a !important;
    }

    .filter-btn.active {
        color: #1a1a1a !important;
    }

    /* === AI CHAT HEADER === */
    .ai-assistant-header,
    .ai-panel-header {
        background: linear-gradient(180deg, #a0a0a0 0%, #505050 50%, #1a1a1a 100%) !important;
    }

    /* === SOCIAL SIDEBAR === */
    .social-sidebar-trigger,
    .unified-chat-btn {
        background: linear-gradient(180deg, #a0a0a0 0%, #1a1a1a 100%) !important;
    }

    /* === SCROLL INDICATOR === */
    .scroll-text {
        color: #808080 !important;
    }

    .scroll-arrow {
        border-color: #808080 !important;
    }

    .scroll-arrow::before {
        background: #505050 !important;
    }

    /* === DEKORATIF ÇİZGİ === */
    .hero-brand::before {
        background: linear-gradient(to bottom, #a0a0a0, transparent) !important;
    }
    /* === LOGO NETLİK VE KALİTE AYARLARI === */
    .site-logo,
    #headerLogo,
    #footerLogo,
    .diag-logo-img,
    .footer-logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: bicubic;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* === HEADER === */
    header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9998;
        padding: 12px 0;
        transition: all 0.4s ease;
        background: #ffffff;
    }
    
    header.scrolled {
        padding: 8px 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    }
    
    /* Logo wrapper - header içinde */
    .logo-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 5px;
        transition: all 0.4s ease;
    }
    
    /* Header logo */
    .logo-wrapper .site-logo,
    .logo-wrapper #headerLogo {
        height: 70px;
        transition: all 0.4s ease;
    }
    
    /* Scroll'da header logosu TAMAMEN GİZLENSİN - floating logo devrede */
    header.scrolled .logo-wrapper {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    header.scrolled .logo-wrapper .site-logo,
    header.scrolled .logo-wrapper #headerLogo {
        height: 0 !important;
        opacity: 0 !important;
    }
    
    /* Logo altı yazı - HEADER */
    .logo-text {
        display: block !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 3px !important;
        color: #505050 !important;
        opacity: 1 !important;
        max-height: 20px !important;
        overflow: hidden;
        transition: all 0.4s ease;
        white-space: nowrap;
        text-align: center;
        margin-top: 2px;
    }
    
    /* Scroll'da yazı kaybolsun */
    header.scrolled .logo-text {
        opacity: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body.dark-mode .logo-text {
        color: #c0c0c0 !important;
    }
    
    /* === FLOATING LOGO - 3 Aşamalı Sistem === */
    /* 1: Header logo (sayfa başı) */
    /* 2: Floating logo (hero geçince) */
    /* 3: Mini logo (hero'dan sonraki alan) */
    
    #floatingLogo {
        position: fixed;
        top: -120px;
        left: 15px;
        z-index: 10000;
        opacity: 0;
        transition: 
            top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.8s ease;
        pointer-events: none;
    }
    
    /* Aşama 2: Hero geçince görünür - su gibi akar */
    #floatingLogo.visible {
        top: 15px;
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Metalik arka plan */
    #floatingLogo a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 15px;
        background: linear-gradient(180deg, 
            #d0d0d0 0%, 
            #b0b0b0 20%,
            #808080 50%,
            #505050 80%,
            #2a2a2a 100%
        );
        border-radius: 12px;
        border: 1px solid #1a1a1a;
        box-shadow: 
            inset 0 2px 0 rgba(255,255,255,0.5),
            inset 0 -2px 0 rgba(0,0,0,0.2),
            0 4px 15px rgba(0,0,0,0.3);
        transition: 
            padding 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            transform 0.3s ease,
            box-shadow 0.3s ease;
        text-decoration: none;
    }
    
    #floatingLogo a:hover {
        box-shadow: 
            inset 0 2px 0 rgba(255,255,255,0.6),
            inset 0 -2px 0 rgba(0,0,0,0.3),
            0 8px 25px rgba(0,0,0,0.4);
        transform: translateY(-2px);
    }
    
    /* Logo img - su gibi akıcı boyut geçişi */
    #floatingLogo img {
        width: auto;
        cursor: pointer;
        filter: brightness(1.1) contrast(1.05);
        transition: height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    /* Aşama 3: Mini mod - padding da yavaşça küçülsün */
    #floatingLogo.mini-mode a {
        padding: 8px 12px;
    }
    
    /* Floating logo altındaki yazı - KALDIRILDI */
    .floating-logo-text {
        display: none !important;
    }
    
    /* Dark mode */
    body.dark-mode header {
        background: #1a1a1a;
    }
    
    body.dark-mode header.scrolled {
        background: rgba(26, 26, 26, 0.95);
    }
    
    /* Hero tam ekran */
    .hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Footer logo */
    #footerLogo {
        height: 45px !important;
        width: auto !important;
        opacity: 0.8;
        transition: all 0.3s ease;
    }
    
    #footerLogo:hover {
        opacity: 1;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        #floatingLogo {
            top: 15px;
            left: 15px;
        }
        
        #floatingLogo img {
            height: 40px;
        }
        
        .logo-text {
            font-size: 8px;
            letter-spacing: 2px;
        }
    }

/* === BLOK 4 === */
html[dir="rtl"] body { direction: rtl; text-align: right; }
    html[dir="rtl"] .header-content { flex-direction: row-reverse; }
    html[dir="rtl"] nav { flex-direction: row-reverse; }
    /* RTL - Social Sidebar sağa taşı */
    html[dir="rtl"] .social-sidebar { 
        left: auto !important; 
        right: 0 !important; 
    }
    html[dir="rtl"] .social-sidebar-trigger { 
        border-radius: 10px 0 0 10px !important; 
    }
    html[dir="rtl"] .social-sidebar-content { 
        left: auto !important; 
        right: 0 !important; 
        border-radius: 12px 0 0 12px !important; 
        transform: translateX(100%) !important; 
    }
    html[dir="rtl"] .social-sidebar-content.active { 
        transform: translateX(0) !important; 
    }
    
    /* RTL - Chat butonu sola taşı */
    html[dir="rtl"] .unified-chat-btn {
        right: auto !important;
        left: 30px !important;
    }
    
    /* RTL - Scroll Top butonu sola taşı */
    html[dir="rtl"] .scroll-top-btn,
    html[dir="rtl"] #scrollTopBtn {
        right: auto !important;
        left: 30px !important;
    }
    
    /* RTL - Chat menu sola aç */
    html[dir="rtl"] .chat-menu {
        right: auto !important;
        left: 30px !important;
    }
    
    /* RTL - AI Panel sola aç */
    html[dir="rtl"] .ai-assistant-panel {
        right: auto !important;
        left: -450px !important;
    }
    html[dir="rtl"] .ai-assistant-panel.active {
        left: 0 !important;
    }
    html[dir="rtl"] .lang-menu { left: auto; right: 0; }
    html[dir="rtl"] .ehizmetler-menu, html[dir="rtl"] #ehizmetlerMenu { left: auto !important; right: 0 !important; }
    html[dir="rtl"] .contact-item { flex-direction: row-reverse; }
    html[dir="rtl"] .service-card-v2, html[dir="rtl"] .team-card { text-align: right; }
    html[dir="rtl"] .footer-content { flex-direction: row-reverse; }
    html[dir="rtl"] .hero-content { text-align: right; }
    html[dir="rtl"] .section-title { text-align: right; }

    /* RTL Soru İşareti Düzeltmesi */
    html[dir="rtl"] .faq-question::before { content: 'ØŸ'; }
    html[dir="rtl"] .faq-question { unicode-bidi: plaintext; }
    html[dir="rtl"] .faq-item { text-align: right; }

    /* ═══════════════════════════════════════════════════════════════════ */
    /* RTL - HERO DÜZELTMELERİ                                              */
    /* ═══════════════════════════════════════════════════════════════════ */
    
    /* RTL hero düzeltmeleri ana CSS bloğunun sonunda */

/* === BLOK 5 === */
/* CEE Mobil Menu Fix */
@media (max-width: 768px) {
    .mobile-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(26,26,26,0.98) !important;
        z-index: 99999 !important;
        display: none;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-nav.active,
    .mobile-nav.open,
    .mobile-nav[style*="display: block"],
    .mobile-nav[style*="display:block"] {
        display: flex !important;
    }
    .mobile-nav a {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        padding: 16px 20px !important;
        margin: 4px 0 !important;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 8px !important;
        transition: background 0.2s !important;
    }
    .mobile-nav a:hover,
    .mobile-nav a:active {
        background: rgba(255,255,255,0.1) !important;
    }
    /* Header ust uste binme fix */
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
    }
    .hero {
        margin-top: 70px !important;
    }
    body {
        padding-top: 0 !important;
    }
    /* Hamburger z-index */
    .hamburger,
    .hamburger-menu,
    .menu-toggle {
        z-index: 100001 !important;
        position: relative !important;
        font-size: 28px !important;
    }
}

/* === BLOK 6 === */
/* ═══════════════════════════════════════════════════════════════════════════════ */
/* CEE MİMARLIK - DIAGONAL SPLIT ANİMASYONU                                        */
/* Modern diagonal birleşim → Hero geçişi (~6sn)                                   */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.blueprint-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────────────────── */
/* DIAGONAL SPLIT                                                                   */
/* ────────────────────────────────────────────────────────────────────────────── */
.diagonal-split {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* SOL TARAF - PLAN OVERLAY (Yarı saydam, fotoğraf görünsün) */
.diagonal-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(20,25,30,0.7) 100%);
    clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
    z-index: 10;
    animation: diagonalSlideOut 0.8s ease-out 4s forwards;
}

@keyframes diagonalSlideOut {
    to { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 0; }
}

.plan-bg {
    display: none;
}



/* SAĞ TARAF - PROJE FOTOĞRAFLARI (Tam ekran, arkada) */
.diagonal-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}



.project-photos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
}

.project-photo:nth-child(1) { animation: photoFade 1s ease-in-out 0.5s forwards; }
.project-photo:nth-child(2) { animation: photoFade 1s ease-in-out 1.5s forwards; }
.project-photo:nth-child(3) { animation: photoFade 1s ease-in-out 2.5s forwards; }
.project-photo:nth-child(4) { animation: photoFadeLast 1s ease-in-out 3.5s forwards; }

@keyframes photoFade {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes photoFadeLast {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}

/* MODERN DIAGONAL GLOW - İnce parlak çizgi */
.diagonal-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    animation: lineAppear 0.5s ease-out 0.3s forwards,
               lineDisappear 0.5s ease-out 3.5s forwards;
}

.diagonal-glow::before {
    content: '';
    position: absolute;
    top: -5%;
    left: 50%;
    width: 2px;
    height: 110%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255,255,255,0.3) 20%,
        rgba(255,255,255,0.8) 50%,
        rgba(255,255,255,0.3) 80%,
        transparent 100%);
    transform: rotate(-5.7deg);
    transform-origin: top center;
    box-shadow: 0 0 15px rgba(255,255,255,0.5),
                0 0 30px rgba(255,255,255,0.2);
}

/* DIAGONAL LOGO - Çizginin altında, ortada */
.diagonal-logo {
    display: none !important;
}

.diag-logo-img {
    display: none !important;
}

@keyframes logoAppear {
    from { opacity: 0; transform: translateX(-50%) scale(0.9); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes lineAppear {
    to { opacity: 1; }
}

@keyframes lineDisappear {
    to { opacity: 0; }
}

/* ────────────────────────────────────────────────────────────────────────────── */
/* SVG PLAN ÇİZİMİ (Beyaz çizgiler)                                               */
/* ────────────────────────────────────────────────────────────────────────────── */
.blueprint-svg {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 45%;
    max-width: 380px;
    height: auto;
    z-index: 2;
}

/* Çizgi stili - BEYAZ + GLOW */
.bp-line {
    fill: none;
    stroke: rgba(255,255,255,0.95);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
}

/* Çizim animasyonları */
.line-1 { animation: drawLine 0.35s ease-out 0.4s forwards; }
.line-2 { animation: drawLine 0.35s ease-out 0.6s forwards; }
.line-3 { animation: drawLine 0.35s ease-out 0.8s forwards; }
.line-4 { animation: drawLine 0.25s ease-out 1.0s forwards; }
.line-4b { animation: drawLine 0.15s ease-out 1.1s forwards; }
.line-4c { animation: drawLine 0.1s ease-out 1.15s forwards; }
.line-door-left { animation: drawLine 0.15s ease-out 1.2s forwards; }
.line-5 { animation: drawLine 0.2s ease-out 1.3s forwards; }
.line-6 { animation: drawLine 0.2s ease-out 1.4s forwards; }
.line-7 { animation: drawLine 0.2s ease-out 1.5s forwards; }
.line-8 { animation: drawLine 0.2s ease-out 1.6s forwards; }
.line-9 { animation: drawLine 0.2s ease-out 1.7s forwards; }
.line-10 { animation: drawLine 0.15s ease-out 1.8s forwards; }
.line-10b { animation: drawLine 0.2s ease-out 1.85s forwards; }
.line-door-cocuk { animation: drawLine 0.15s ease-out 1.9s forwards; }
.line-wall-hol { animation: drawLine 0.15s ease-out 1.95s forwards; }
.line-wall-hol2 { animation: drawLine 0.15s ease-out 2.0s forwards; }
.line-door-mutfak { animation: drawLine 0.15s ease-out 2.05s forwards; }
.line-11 { animation: drawLine 0.15s ease-out 2.1s forwards; }
.line-12 { animation: drawLine 0.15s ease-out 2.15s forwards; }

/* Pencere animasyonları */
.win-mutfak { animation: windowReveal 0.2s ease-out 2.2s forwards; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* Pencereler - Beyaz */
.bp-window {
    fill: rgba(255,255,255,0.2);
    stroke: rgba(255,255,255,0.6);
    stroke-width: 1;
    opacity: 0;
    animation: windowReveal 0.2s ease-out forwards;
}
.win-1 { animation-delay: 2.3s; }
.win-2 { animation-delay: 2.35s; }
.win-3 { animation-delay: 2.4s; }
.win-4 { animation-delay: 2.45s; }

@keyframes windowReveal { to { opacity: 1; } }

/* Ölçü çizgileri */
.dim-line {
    stroke: rgba(255,255,255,0.3);
    stroke-width: 1;
    stroke-dasharray: 3,2;
    opacity: 0;
    animation: dimReveal 0.3s ease-out 2.5s forwards;
}
.dim-text {
    fill: rgba(255,255,255,0.5);
    font-size: 8px;
    font-family: 'Courier New', monospace;
    text-anchor: middle;
    opacity: 0;
    animation: dimReveal 0.3s ease-out 2.55s forwards;
}

@keyframes dimReveal { to { opacity: 1; } }

/* Oda isimleri */
.room-label {
    fill: rgba(255,255,255,0.85);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 2px;
    text-anchor: middle;
    opacity: 0;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    animation: labelReveal 0.2s ease-out 2.6s forwards;
}

@keyframes labelReveal { to { opacity: 1; } }

/* ────────────────────────────────────────────────────────────────────────────── */
/* MERGE SONRASI İÇERİK                                                            */
/* ────────────────────────────────────────────────────────────────────────────── */
.merge-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 30;
    animation: mergeContentFadeOut 0.5s ease-out 4.5s forwards;
}

@keyframes mergeContentFadeOut {
    to { opacity: 0; pointer-events: none; }
}

.merge-logo {
    display: none !important;
}

.logo-cee {
    display: block;
    font-size: clamp(40px, 7vw, 60px);
    font-weight: 300;
    color: #fff;
    letter-spacing: 15px;
    text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

.logo-mimarlik {
    display: block;
    font-size: clamp(11px, 2vw, 15px);
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    letter-spacing: 12px;
    margin-top: 8px;
}

@keyframes mergeLogoIn {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.merge-slogan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}

.slogan-hayal {
    font-size: clamp(22px, 4vw, 36px);
    font-weight: 200;
    color: #fff;
    letter-spacing: 8px;
    opacity: 0;
    transform: translateX(-30px);
    animation: sloganLeft 0.5s ease-out 4.8s forwards;
}

.slogan-gercek {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 300;
    background: linear-gradient(135deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 10px;
    opacity: 0;
    transform: translateX(30px);
    animation: sloganRight 0.5s ease-out 5s forwards;
}

@keyframes sloganLeft { to { opacity: 1; transform: translateX(0); } }
@keyframes sloganRight { to { opacity: 1; transform: translateX(0); } }

.merge-tagline {
    font-size: clamp(10px, 1.5vw, 13px);
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
    font-weight: 300;
    opacity: 0;
    animation: taglineIn 0.4s ease-out 5.4s forwards;
}

@keyframes taglineIn { to { opacity: 1; } }

/* ────────────────────────────────────────────────────────────────────────────── */
/* CEE MİMARLIK - PROFESYONEL HERO TASARIMI                                       */
/* Metalik logo tonlarına uyumlu renk paleti                                      */
/* ────────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CEE MİMARLIK - LOGO UYUMLU 2 RENK PALETİ                                    */
/* PARLAK GÜMÜŞ (#b8b8b8) → KOYU ANTRASİT (#1a1a1a)                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Logo Renkleri - 2 Ana Ton */
    --cee-shine: #d0d0d0;       /* En parlak - highlight */
    --cee-silver: #b8b8b8;      /* Parlak gümüş - üst ton */
    --cee-mid: #808080;         /* Orta geçiş */
    --cee-steel: #4a4a4a;       /* Çelik gri - geçiş */
    --cee-dark: #2a2a2a;        /* Koyu antrasit */
    --cee-black: #1a1a1a;       /* En koyu - alt ton */
    --cee-white: #ffffff;
    --cee-bg: #f5f5f5;
}

.hero-main-content {
    display: none;
}

/* Hero İçerik - SAĞDA SABİT, HARFLER TEK TEK SOLA GEÇİYOR */
.hero-content-lares {
    position: absolute;
    bottom: 15%;
    right: 5%;
    left: auto;
    z-index: 40;
    max-width: 500px;
    text-align: center;
    opacity: 1;
}

/* Şehir Etiketi - Gizli */
.hero-location {
    display: none;
}

/* Ana Başlık Container */
.hero-brand {
    margin: 0 0 25px 0;
    position: relative;
}

/* Dekoratif Çizgi - Gizli (içerik sola kayıyor) */
.hero-brand::before {
    display: none;
}

/* CEE Yazısı Container */
.hero-brand .cee-text {
    display: block;
    font-size: 80px;
    font-weight: 900;
    letter-spacing: 8px;
    line-height: 1;
    /* Container'da gölge yok, harflerde var */
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CEE HARF ANİMASYONU - SAĞDAN GEL, BEKLE, SOLA GİT VE KAL                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Her harf - 3D METALİK EFEKT */
.hero-brand .cee-text .letter {
    display: inline-block;
    opacity: 0;
    transform: translateX(80px);
    /* TEMİZ METALİK GRADİENT */
    background: linear-gradient(
        180deg,
        #f0f0f0 0%,
        #d8d8d8 15%,
        #b8b8b8 35%,
        #909090 55%,
        #686868 75%,
        #404040 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* TEMİZ 3D GÖLGE - Keskin */
    filter: 
        drop-shadow(1px 1px 0px rgba(255,255,255,0.2))
        drop-shadow(2px 2px 0px rgba(50,50,50,0.9))
        drop-shadow(3px 3px 0px rgba(40,40,40,0.8))
        drop-shadow(4px 4px 0px rgba(30,30,30,0.7))
        drop-shadow(5px 5px 0px rgba(20,20,20,0.6))
        drop-shadow(6px 8px 4px rgba(0,0,0,0.4));
    /* Harfler arası boşluk */
    margin: 0 3px;
    font-size: 100px;
}

/* C harfi */
.hero-brand .cee-text .letter-1 { 
    animation: letterFullCycle 6s ease-in-out 0.3s forwards;
}

/* E harfi (1.) */
.hero-brand .cee-text .letter-2 { 
    animation: letterFullCycle 6s ease-in-out 0.5s forwards;
}

/* E harfi (2.) */
.hero-brand .cee-text .letter-3 { 
    animation: letterFullCycle 6s ease-in-out 0.7s forwards;
}

/* HARF TAM DÖNGÜ: Sağdan gel → Bekle → Sola git ve KAL */
@keyframes letterFullCycle {
    0% {
        opacity: 0;
        transform: translateX(80px);
    }
    10% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateX(-55vw);
    }
}

/* MİMARLIK & YAPI SİSTEMLERİ */
.hero-brand .mimarlik-text {
    display: block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 10px;
    margin-top: 15px;
    opacity: 0;
    transform: translateX(60px);
    /* METALİK GRADİENT - CEE ile aynı */
    background: linear-gradient(
        180deg,
        #f0f0f0 0%,
        #d8d8d8 15%,
        #b8b8b8 35%,
        #909090 55%,
        #686868 75%,
        #404040 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* ORTA SEVİYE 3D GÖLGE */
    filter: 
        drop-shadow(1px 1px 0px rgba(0,0,0,0.7))
        drop-shadow(2px 2px 0px rgba(0,0,0,0.5))
        drop-shadow(3px 3px 1px rgba(0,0,0,0.3));
    animation: textFullCycle 6s ease-in-out 1s forwards;
}

/* METİN TAM DÖNGÜ */
@keyframes textFullCycle {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    10% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateX(-55vw);
    }
}

/* Açıklama - sola git ve KAL */
.hero-description {
    font-size: 15px;
    line-height: 1.8;
    font-weight: 500;
    margin-bottom: 25px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateX(50px);
    animation: textFullCycle 6s ease-in-out 1.3s forwards;
    /* METALİK GRADİENT */
    background: linear-gradient(
        180deg,
        #e8e8e8 0%,
        #d0d0d0 25%,
        #b0b0b0 50%,
        #909090 75%,
        #707070 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* 3D GÖLGE - Orta seviye */
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.7))
            drop-shadow(2px 2px 0px rgba(0,0,0,0.5))
            drop-shadow(3px 3px 1px rgba(0,0,0,0.3));
}

/* CTA Buton - sola git ve KAL */
.hero-cta {
    display: inline-block;
    padding: 14px 35px;
    background: linear-gradient(
        180deg,
        #d0d0d0 0%,
        #b0b0b0 20%,
        #808080 50%,
        #505050 80%,
        #2a2a2a 100%
    );
    color: #1a1a1a;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: 1px solid #1a1a1a;
    border-radius: 50px;
    opacity: 0;
    transform: translateX(40px);
    animation: textFullCycle 6s ease-in-out 1.6s forwards;
    box-shadow: 
        inset 0 2px 0 rgba(255,255,255,0.5),
        inset 0 -2px 0 rgba(0,0,0,0.2),
        0 4px 15px rgba(0,0,0,0.25);
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.hero-cta:hover {
    filter: brightness(1.1);
    box-shadow: 
        inset 0 2px 0 rgba(255,255,255,0.6),
        inset 0 -2px 0 rgba(0,0,0,0.3),
        0 8px 25px rgba(0,0,0,0.35);
}

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

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SCROLL DOWN INDICATOR                                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    text-align: center;
    opacity: 0;
    animation: fadeIn 1s ease 7s forwards;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scroll-indicator:hover {
    transform: translateX(-50%) translateY(-8px);
}

.scroll-indicator:hover .scroll-arrow {
    border-color: #6a6a6a;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

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

.scroll-text {
    font-size: 9px;
    letter-spacing: 3px;
    color: #a8a8a8;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}

.scroll-arrow {
    width: 20px;
    height: 32px;
    border: 1.5px solid #a8a8a8;
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
    transition: all 0.3s ease;
}

.scroll-arrow::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 6px;
    background: #6a6a6a;
    border-radius: 2px;
    animation: scrollBounce 1.5s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { top: 6px; opacity: 1; }
    50% { top: 14px; opacity: 0.3; }
}

/* Eski elementleri gizle */
.spotlight-overlay,
.hero-center-content,
.spotlight-hint,
.hero-logo-wrapper,
.hero-tagline,
.hero-divider,
.hero-buttons,
.hero-city,
.hero-brand-title,
.hero-gradient-overlay {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .hero-content-lares {
        right: 3%;
        left: auto;
        bottom: 12%;
        max-width: 90%;
        text-align: center;
    }
    .hero-brand::before {
        display: none;
    }
    .hero-brand .cee-text {
        font-size: 70px;
        letter-spacing: 14px;
    }
    .hero-brand .cee-text .letter {
        font-size: 70px;
        filter: 
            drop-shadow(1px 1px 0px rgba(255,255,255,0.2))
            drop-shadow(2px 2px 0px rgba(50,50,50,0.85))
            drop-shadow(3px 3px 0px rgba(30,30,30,0.7))
            drop-shadow(4px 5px 3px rgba(0,0,0,0.4));
    }
    .hero-brand .cee-text .letter-1 {
        animation: letterFullCycleMobile 5s ease-in-out 0.3s forwards;
    }
    .hero-brand .cee-text .letter-2 {
        animation: letterFullCycleMobile 5s ease-in-out 0.5s forwards;
    }
    .hero-brand .cee-text .letter-3 {
        animation: letterFullCycleMobile 5s ease-in-out 0.7s forwards;
    }
    @keyframes letterFullCycleMobile {
        0% { opacity: 0; transform: translateX(60px); }
        12% { opacity: 1; transform: translateX(0); }
        55% { opacity: 1; transform: translateX(0); }
        100% { opacity: 1; transform: translateX(-50vw); }
    }
    .hero-brand .mimarlik-text {
        font-size: 20px;
        letter-spacing: 8px;
        animation: textFullCycleMobile 5s ease-in-out 1s forwards;
        filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.6))
                drop-shadow(2px 2px 0px rgba(0,0,0,0.4))
                drop-shadow(3px 3px 1px rgba(0,0,0,0.2));
    }
    .hero-description {
        max-width: 350px;
        animation: textFullCycleMobile 5s ease-in-out 1.3s forwards;
        filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.6))
                drop-shadow(2px 2px 0px rgba(0,0,0,0.4))
                drop-shadow(3px 3px 1px rgba(0,0,0,0.2));
    }
    .hero-cta {
        animation: textFullCycleMobile 5s ease-in-out 1.6s forwards;
    }
    @keyframes textFullCycleMobile {
        0% { opacity: 0; transform: translateX(50px); }
        12% { opacity: 1; transform: translateX(0); }
        55% { opacity: 1; transform: translateX(0); }
        100% { opacity: 1; transform: translateX(-50vw); }
    }
}

@media (max-width: 600px) {
    .hero-content-lares {
        bottom: 10%;
        right: 3%;
        max-width: 95%;
    }
    .hero-brand .cee-text {
        font-size: 48px;
        letter-spacing: 10px;
    }
    .hero-brand .cee-text .letter {
        font-size: 48px;
        filter: 
            drop-shadow(1px 1px 0px rgba(255,255,255,0.2))
            drop-shadow(2px 2px 0px rgba(50,50,50,0.8))
            drop-shadow(3px 3px 2px rgba(0,0,0,0.4));
    }
    .hero-brand .mimarlik-text {
        font-size: 14px;
        letter-spacing: 6px;
        filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.6))
                drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
    }
    .hero-description {
        font-size: 13px;
        line-height: 1.7;
        max-width: 280px;
        filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.6))
                drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
    }
    .hero-cta {
        padding: 12px 25px;
        font-size: 10px;
    }
    .scroll-indicator {
        bottom: 20px;
    }
    .scroll-text {
        font-size: 9px;
    }
    .scroll-arrow {
        width: 18px;
        height: 28px;
    }
}

@keyframes contentFade { to { opacity: 1; } }

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

/* Tagline - Gizli, başlık yeterli */
.hero-tagline {
    display: none;
}

.tagline-text {
    display: none;
}

/* Ayırıcı Çizgi - Gizli */
.hero-divider {
    display: none;
}

/* Açıklama - Sol hizalı, daha uzun */
.hero-description {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: 25px;
    max-width: 400px;
    text-align: center;
    opacity: 0;
    transform: translateX(50px);
    animation: textFullCycle 6s ease-in-out 1.3s forwards;
    /* METALİK GRADİENT */
    background: linear-gradient(
        180deg,
        #e8e8e8 0%,
        #d0d0d0 25%,
        #b0b0b0 50%,
        #909090 75%,
        #707070 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* 3D GÖLGE */
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.7))
            drop-shadow(2px 2px 0px rgba(0,0,0,0.5))
            drop-shadow(3px 3px 1px rgba(0,0,0,0.3));
}

/* Butonlar - Sol hizalı */
.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(15px);
    animation: heroFadeUp 0.6s ease-out 5.6s forwards;
}

/* Primary Buton - Altın, Lares tarzı */
.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 35px;
    background: #c9a227;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
    border: none;
}

.hero-btn-primary svg {
    transition: transform 0.3s ease;
}

.hero-btn-primary:hover {
    background: linear-gradient(135deg, #d4ab2f 0%, #c9a227 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 35px rgba(201, 162, 39, 0.5);
}

.hero-btn-primary:hover svg {
    transform: translateX(5px);
}

/* Secondary Buton - Koyu */
.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 16px 40px;
    background: rgba(45, 55, 72, 0.9);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid rgba(45, 55, 72, 0.9);
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-btn-secondary:hover {
    background: rgba(45, 55, 72, 1);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

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

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

.content-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.9);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    opacity: 0;
    animation: contentFade 0.5s ease-out 5.6s forwards;
}

.content-desc strong {
    color: #fff;
    font-weight: 500;
}

.content-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    opacity: 0;
    animation: contentFade 0.5s ease-out 5.8s forwards;
}

.btn-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #4a4a4a, #4a5567);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(90,102,119,0.4);
}

.btn-main svg { width: 18px; height: 18px; }
.btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(90,102,119,0.5);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    border: 2px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-3px);
}

/* ────────────────────────────────────────────────────────────────────────────── */
/* RESPONSİVE                                                                       */
/* ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .blueprint-svg { left: 25%; width: 45%; }
    .bp-line { stroke-width: 1.2; }
    .room-label { font-size: 6px; }
    .dim-text { font-size: 7px; }
    .logo-cee { letter-spacing: 10px; }
    .logo-mimarlik { letter-spacing: 8px; }
    .slogan-hayal { letter-spacing: 5px; }
    .slogan-gercek { letter-spacing: 6px; }
    .content-desc { font-size: 13px; }
    .content-desc br { display: none; }
    .content-buttons { flex-direction: column; align-items: center; }
    .btn-main, .btn-outline { width: 100%; max-width: 260px; justify-content: center; }
    .deco-diamond-big { width: 14px; height: 14px; }
    .deco-diamond-small { width: 8px; height: 8px; }
}

@media (max-width: 500px) {
    .blueprint-svg { left: 25%; width: 48%; }
    .bp-line { stroke-width: 1; }
    .room-label { font-size: 5px; }
    .dim-line, .dim-text { display: none; }
    .logo-cee { font-size: 32px; letter-spacing: 8px; }
    .logo-mimarlik { font-size: 9px; letter-spacing: 5px; }
    .slogan-hayal { font-size: 18px; letter-spacing: 4px; }
    .slogan-gercek { font-size: 22px; letter-spacing: 5px; }
    .merge-tagline { font-size: 9px; }
    .diagonal-line::before, .diagonal-line::after { width: 2px; }
    .deco-diamond-big { width: 12px; height: 12px; }
    .deco-diamond-small { width: 6px; height: 6px; }
}

/* ═══ RTL HERO OVERRIDE - CASCADE'DE EN SON ═══ */
/* Sadece harf sırası EEC olsun, animasyon ve pozisyon Türkçeyle aynı kalsın */
html[dir="rtl"] .hero-brand .cee-text {
    direction: rtl;
}
html[dir="rtl"] .hero-content-lares {
    right: 5% !important;
    left: auto !important;
    text-align: center !important;
}

/* === BLOK 7 === */
/* Architect Divider - LOGO UYUMLU 2 RENK GEÇİŞİ */
.architect-divider {
    /* LOGO GEÇİŞİ: Parlak gümüş → Koyu antrasit */
    background: linear-gradient(
        180deg,
        #c8c8c8 0%,       /* Parlak gümüş - üst */
        #a0a0a0 25%,      /* Açık gümüş */
        #606060 50%,      /* Orta geçiş */
        #303030 75%,      /* Koyu */
        #1a1a1a 100%      /* Antrasit - alt */
    );
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 2px solid #0a0a0a;
}

/* Parlak üst kenar - Logo'daki highlight gibi */
.architect-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 5%, 
        rgba(255,255,255,0.6) 20%,
        rgba(255,255,255,0.8) 50%,
        rgba(255,255,255,0.6) 80%,
        transparent 95%
    );
}

/* Dark mode için divider renkleri */
body.dark-mode .architect-divider {
    background: linear-gradient(180deg, #333 0%, #222 50%, #1a1a1a 100%) !important;
    border-top-color: #444 !important;
    border-bottom-color: #111 !important;
}
body.dark-mode .architect-divider::before {
    background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 80%, transparent 95%) !important;
}
body.dark-mode .architect-divider .divider-top path {
    fill: #1a1a1a !important;
}
body.dark-mode .architect-divider .divider-bottom path {
    fill: #1a1a1a !important;
}

/* === BLOK 8 === */
.service-card-v2 {
    box-shadow: 0 2px 20px rgba(0,0,0,0.04);
    cursor: pointer;
}
.service-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-bottom-color: #333;
}
.service-icon-v2 {
    cursor: pointer;
}
.service-card-v2:hover .service-icon-v2 {
    background: #4a4a4a !important;
    transform: translateY(-8px) scale(1.1);
    color: white !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.3) !important;
}
.service-card-v2:hover .service-icon-v2 svg {
    stroke: white;
}

/* Dark Mode için Service Card */
body.dark-mode .service-card-v2 {
    background: #1e1e2e !important;
    border-color: #333 !important;
}
body.dark-mode .service-card-v2 h3 {
    color: #e2e8f0 !important;
}
body.dark-mode .service-card-v2 p {
    color: #94a3b8 !important;
}
body.dark-mode .service-card-v2 .service-icon-v2 {
    background: #2d2d2d !important;
    color: #94a3b8 !important;
}
body.dark-mode .service-card-v2:hover .service-icon-v2 {
    background: #4a4a4a !important;
    color: white !important;
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 12px 25px rgba(0,0,0,0.4) !important;
}
body.dark-mode #hizmetler {
    background: #151515 !important;
}

/* HAKKIMIZDA - Dark Mode */
body.dark-mode #hakkimizda {
    background: var(--bg-primary, #1a1a1a) !important;
}
body.dark-mode .about-text h2 {
    color: #e2e8f0 !important;
}
body.dark-mode .about-text p {
    color: #94a3b8 !important;
}

/* İLETİŞİM - Dark Mode */
body.dark-mode #iletisim {
    background: var(--bg-primary, #1a1a1a) !important;
}
body.dark-mode #iletisim h3 {
    color: #e2e8f0 !important;
}
body.dark-mode #iletisim strong {
    color: #e2e8f0 !important;
}
body.dark-mode #iletisim span {
    color: #94a3b8 !important;
}
body.dark-mode .contact-icon-circle {
    background: #2d2d2d !important;
    color: #94a3b8 !important;
}
body.dark-mode .contact-icon-circle:hover {
    background: #4a4a4a !important;
    color: white !important;
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 12px 25px rgba(0,0,0,0.5) !important;
}

/* İLETİŞİM FORM - Dark Mode */
body.dark-mode #iletisim input,
body.dark-mode #iletisim textarea,
body.dark-mode #iletisim select {
    background: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #e2e8f0 !important;
}
body.dark-mode #iletisim input::placeholder,
body.dark-mode #iletisim textarea::placeholder {
    color: #64748b !important;
}
body.dark-mode #iletisim label {
    color: #94a3b8 !important;
}

/* PROJELER - Dark Mode */
body.dark-mode #projeler {
    background: var(--bg-primary, #1a1a1a) !important;
}
body.dark-mode .filter-btn {
    background: #2d2d2d !important;
    color: #94a3b8 !important;
    border-color: #3d3d3d !important;
}
body.dark-mode .filter-btn:hover,
body.dark-mode .filter-btn.active {
    background: linear-gradient(135deg, #4a4a4a, #6a6a6a) !important;
    color: white !important;
    border-color: #4a4a4a !important;
}
body.dark-mode .project-item {
    background: #2d2d2d !important;
}
body.dark-mode .project-info h3 {
    color: #e2e8f0 !important;
}
body.dark-mode .project-info span {
    color: #94a3b8 !important;
}

@media (max-width: 1024px) {
    #hizmetler > div > div:last-child {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 640px) {
    #hizmetler > div > div:last-child {
        grid-template-columns: 1fr !important;
    }
}

/* === BLOK 9 === */
.ref-card {
    cursor: pointer;
}
.ref-icon {
    cursor: pointer;
}
.ref-card:hover {
    background: white;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.ref-card:hover .ref-icon {
    background: #4a4a4a !important;
    transform: translateY(-8px) scale(1.1);
    color: white !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.3) !important;
}
.ref-card:hover .ref-icon svg {
    stroke: white;
}
.ref-card:hover .ref-line {
    transform: scaleX(1);
}
@media (max-width: 1024px) {
    #referanslar > div > div:nth-child(2) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 640px) {
    #referanslar > div > div:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
    #referanslar > div > div:last-child > div:last-child {
        flex-direction: column;
        gap: 30px !important;
    }
    #referanslar > div > div:last-child > div:last-child > div[style*="width: 1px"] {
        width: 50px !important;
        height: 1px !important;
    }
}

/* === BLOK 10 === */
@keyframes mapBadgePulse {
            0%, 100% { 
                box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 0 rgba(74,74,74,0.4);
            }
            50% { 
                box-shadow: 0 6px 25px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 8px rgba(74,74,74,0);
            }
        }
        @keyframes mapIconBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        .map-location-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4) !important;
        }
        .map-location-badge:hover .map-badge-icon {
            animation: none;
            transform: scale(1.1);
        }

/* === BLOK 11 === */
/* Uyarı Modal Stilleri */
.external-service-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.external-service-container {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideUp 0.3s ease;
}

body.dark-mode .external-service-container {
    background: #1a1a1a;
}

.external-service-header {
    padding: 30px 30px 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

body.dark-mode .external-service-header {
    border-bottom-color: #333;
}

.external-service-body {
    padding: 25px 30px;
}

.warning-box {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
}

body.dark-mode .warning-box {
    background: #78350f;
    border-color: #f59e0b;
}

.info-box {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
}

body.dark-mode .info-box {
    background: #1e3a8a;
    border-color: #3b82f6;
}

.external-service-footer {
    padding: 20px 30px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid #eee;
}

body.dark-mode .external-service-footer {
    border-top-color: #333;
}

.btn-primary,
.btn-secondary {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: #f3f4f6;
    color: #666;
}

.btn-secondary:hover {
    background: #e5e7eb;
}

body.dark-mode .btn-secondary {
    background: #374151;
    color: #d1d5db;
}

@media (max-width: 768px) {
    .external-service-container {
        width: 95%;
    }
    
    .external-service-footer {
        flex-direction: column;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* === BLOK 12 === */
.cee-it-float{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:9990;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.cee-it-badge{pointer-events:all;background:linear-gradient(135deg,#0f172a,#1e3a5f);color:#fff;padding:12px 18px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,0.25);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:10px;transition:all .4s cubic-bezier(.4,0,.2,1);max-width:52px;overflow:hidden;white-space:nowrap}
.cee-it-badge:hover{max-width:280px;box-shadow:0 12px 40px rgba(0,0,0,0.35);transform:scale(1.02)}
.cee-it-badge .cee-it-icon{width:28px;height:28px;background:#c2410c;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.cee-it-badge .cee-it-txt{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:0;transition:opacity .3s .1s}
.cee-it-badge:hover .cee-it-txt{opacity:1}
.cee-it-badge .cee-it-sub{font-size:10px;font-weight:500;letter-spacing:1px;color:#94a3b8;font-weight:400}

/* Giriş animasyonu */
@keyframes ceeItSlideIn{0%{transform:translateX(100px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes ceeItPulse{0%,100%{box-shadow:0 8px 30px rgba(0,0,0,0.25)}50%{box-shadow:0 8px 30px rgba(194,65,12,0.4)}}
.cee-it-badge{animation:ceeItSlideIn .6s ease-out .5s both, ceeItPulse 3s ease-in-out 2s 3}

/* İlk 5 saniye açık göster, sonra küçült */
.cee-it-badge.intro{max-width:280px}
.cee-it-badge.intro .cee-it-txt{opacity:1}

/* Mobil */
@media(max-width:768px){
  .cee-it-float{right:12px;top:auto;bottom:80px;transform:none}
  .cee-it-badge{padding:10px 14px;border-radius:12px}
}

/* === BLOK 13 === */
body { overflow-x: hidden !important; }

/* v6 float hamburger artigi tamamen gizli */
#ceeHamburgerFloat,
body #ceeHamburgerFloat,
html body #ceeHamburgerFloat { display: none !important; visibility: hidden !important; pointer-events: none !important; }

@media (max-width: 768px) {

  /* ═══ 1. HAMBURGER — header icinde ═══ */
  header[role="banner"] .menu-toggle,
  .header-content .menu-toggle,
  button.menu-toggle,
  #menuToggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    z-index: 10010 !important;
    position: relative !important;
    padding: 0 !important;
  }
  #menuToggle .cee-bar {
    display: block !important;
    width: 20px;
    height: 2px;
    background: var(--primary, #1a1a1a) !important;
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
    transform-origin: center;
  }
  body.dark-mode #menuToggle .cee-bar { background: #f5f5f5 !important; }
  #menuToggle.open .cee-bar:nth-child(1) { transform: translateY(6px) rotate(-45deg); }
  #menuToggle.open .cee-bar:nth-child(2) { opacity: 0; }
  #menuToggle.open .cee-bar:nth-child(3) { transform: translateY(-6px) rotate(45deg); }

  /* ═══ 2. MOBIL MENU PANEL — minimal ═══ */
  nav#mainNav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 62vw !important;
    max-width: 260px !important;
    min-width: 210px !important;
    height: 100vh !important;
    background: #ffffff !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: -8px 0 30px rgba(0,0,0,0.08);
    border-left: 1px solid rgba(0,0,0,0.06) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 72px 22px 28px !important;
    gap: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1) !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
  }
  body.dark-mode nav#mainNav {
    background: #1a1a1a !important;
    border-left: 1px solid rgba(255,255,255,0.1) !important;
  }
  nav#mainNav.mobile-open { transform: translateX(0) !important; }

  body.menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9999;
    animation: ceeFadeIn 0.25s ease;
  }
  @keyframes ceeFadeIn { from { opacity: 0; } to { opacity: 1; } }

  nav#mainNav a {
    display: block !important;
    font-family: -apple-system, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    padding: 14px 0 !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    color: #3a3a3a !important;
    -webkit-text-fill-color: #3a3a3a !important;
    background: transparent !important;
    margin: 0 !important;
    position: relative !important;
    transition: color 0.25s ease, padding-left 0.25s ease !important;
    opacity: 0;
    transform: translateX(12px);
  }
  body.dark-mode nav#mainNav a {
    color: #d4d4d4 !important;
    -webkit-text-fill-color: #d4d4d4 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  nav#mainNav.mobile-open a { animation: ceeLinkIn 0.35s cubic-bezier(0.4,0,0.2,1) forwards; }
  nav#mainNav.mobile-open a:nth-child(1) { animation-delay: 0.10s; }
  nav#mainNav.mobile-open a:nth-child(2) { animation-delay: 0.14s; }
  nav#mainNav.mobile-open a:nth-child(3) { animation-delay: 0.18s; }
  nav#mainNav.mobile-open a:nth-child(4) { animation-delay: 0.22s; }
  nav#mainNav.mobile-open a:nth-child(5) { animation-delay: 0.26s; }
  nav#mainNav.mobile-open a:nth-child(6) { animation-delay: 0.30s; }
  nav#mainNav.mobile-open .nav-dropdown {
    animation: ceeLinkIn 0.35s cubic-bezier(0.4,0,0.2,1) 0.34s forwards;
    opacity: 0; transform: translateX(12px);
  }
  @keyframes ceeLinkIn { to { opacity: 1; transform: translateX(0); } }

  nav#mainNav a::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 50%;
    background: #1a1a1a;
    transition: width 0.25s ease;
  }
  body.dark-mode nav#mainNav a::before { background: #f5f5f5; }
  nav#mainNav a:hover, nav#mainNav a:active, nav#mainNav a.active {
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    padding-left: 6px !important;
  }
  body.dark-mode nav#mainNav a:hover,
  body.dark-mode nav#mainNav a:active,
  body.dark-mode nav#mainNav a.active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  nav#mainNav a:hover::before, nav#mainNav a.active::before { width: 2px; }

  nav#mainNav .nav-dropdown {
    width: 100% !important;
    position: static !important;
    display: block !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  }
  nav#mainNav .nav-dropdown > a { border-bottom: none !important; }
  nav#mainNav .ehizmetler-menu {
    position: static !important;
    display: none !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 0 6px 12px !important;
    background: transparent !important;
    padding: 2px 0 !important;
    border-radius: 0 !important;
  }
  nav#mainNav .ehizmetler-menu a {
    font-size: 10px !important;
    padding: 9px 0 !important;
    letter-spacing: 2px !important;
    border-bottom: 1px dashed rgba(0,0,0,0.05) !important;
  }
  nav#mainNav .nav-dropdown.open .ehizmetler-menu { display: block !important; }

  body.menu-open { overflow: hidden !important; }
  header[role="banner"] { z-index: 10001 !important; position: relative; }

  /* ═══ 3. HERO CEE YAZISI — MAX SPECIFICITY ═══ */
  .hero {
    height: auto !important;
    min-height: 100vh !important;
    position: relative;
    overflow: hidden !important;
  }

  /* Parent ayarlari */
  .hero .hero-content,
  .hero .hero-content-lares,
  section.hero .hero-content,
  section.hero .hero-content-lares {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    max-width: 92vw !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  /* hero-brand container - sadelestir, anime etme */
  section.hero .hero-brand,
  .hero h1.hero-brand,
  .hero .hero-brand,
  #heroBrand {
    font-size: 22px !important;
    letter-spacing: 2px !important;
    line-height: 1.2 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 92vw !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    z-index: 5 !important;
  }

  /* CEE span ve MIMARLIK span — fit ve ortala */
  section.hero .hero-brand .cee-text,
  .hero .hero-brand .cee-text,
  .hero-brand .cee-text,
  #heroTitle1 {
    display: block !important;
    font-size: 48px !important;
    letter-spacing: 6px !important;
    line-height: 1 !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transform: none !important;
  }
  section.hero .hero-brand .mimarlik-text,
  .hero .hero-brand .mimarlik-text,
  .hero-brand .mimarlik-text,
  #heroTitle2 {
    display: block !important;
    font-size: 13px !important;
    letter-spacing: 3px !important;
    line-height: 1.3 !important;
    margin: 10px auto 0 !important;
    text-align: center !important;
    max-width: 100% !important;
    white-space: normal !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
  }

  /* Her harfi (C E E) goster, animasyonu kes */
  section.hero .hero-brand .cee-text .letter,
  section.hero .hero-brand .cee-text .letter-1,
  section.hero .hero-brand .cee-text .letter-2,
  section.hero .hero-brand .cee-text .letter-3,
  .hero .hero-brand .cee-text .letter,
  .hero-brand .cee-text .letter,
  .hero-brand .cee-text .letter-1,
  .hero-brand .cee-text .letter-2,
  .hero-brand .cee-text .letter-3 {
    font-size: 48px !important;
    letter-spacing: inherit !important;
    display: inline-block !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    margin: 0 !important;
    animation: none !important;
    -webkit-animation: none !important;
    visibility: visible !important;
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.4)) !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }

  /* Keshfet / mouse indicator mobilde gizle */
  .hero-scroll-indicator, .mouse-scroll, .hero-mouse {
    display: none !important;
  }

  /* Plan cizimi hafif solsun */
  .blueprint-container { opacity: 0.3 !important; }

  /* ═══ 4. 3 FLOATING BUTON — 40px YUVARLAK ═══ */

  /* Takip Et — max specificity ile kucult */
  body #socialSidebar.social-sidebar {
    left: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 9996 !important;
  }
  body #socialSidebar .social-sidebar-trigger,
  body .social-sidebar .social-sidebar-trigger,
  #socialSidebar .social-sidebar-trigger {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    gap: 0 !important;
    writing-mode: horizontal-tb !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body #socialSidebar .social-sidebar-icon,
  #socialSidebar .social-sidebar-icon {
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
  body #socialSidebar .social-sidebar-text,
  #socialSidebar .social-sidebar-text {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    font-size: 0 !important;
    overflow: hidden !important;
  }
  body #socialSidebar .social-sidebar-content,
  body #socialSidebar .social-sidebar-panel,
  #socialSidebarContent {
    display: none !important;
  }

  /* Sohbet — ayni 40px */
  body #unifiedChatBtn, #unifiedChatBtn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 0 !important;
  }
  #unifiedChatBtn svg { width: 18px !important; height: 18px !important; }
  #chatBadge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    min-width: 13px !important;
    height: 13px !important;
    top: -3px !important;
    right: -3px !important;
  }

  /* Is Takip — ayni 40px */
  body #ceeItBadge, body .cee-it-badge,
  #ceeItBadge, .cee-it-badge, .cee-it-badge.intro {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    animation: none !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  .cee-it-badge .cee-it-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 13px !important;
  }
  .cee-it-badge .cee-it-txt,
  .cee-it-badge.intro .cee-it-txt { display: none !important; opacity: 0 !important; width: 0 !important; }
}

@media (max-width: 400px) {
  .hero-brand .cee-text, #heroTitle1,
  .hero-brand .cee-text .letter,
  .hero-brand .cee-text .letter-1,
  .hero-brand .cee-text .letter-2,
  .hero-brand .cee-text .letter-3 {
    font-size: 40px !important;
    letter-spacing: 4px !important;
  }
  .hero-brand .mimarlik-text { font-size: 11px !important; letter-spacing: 2px !important; }

  nav#mainNav {
    width: 68vw !important;
    max-width: 240px !important;
    min-width: 200px !important;
    padding: 64px 18px 24px !important;
  }
  nav#mainNav a { font-size: 10.5px !important; padding: 12px 0 !important; letter-spacing: 2.5px !important; }

  #socialSidebar .social-sidebar-trigger,
  #unifiedChatBtn,
  #ceeItBadge,
  .cee-it-badge, .cee-it-badge.intro {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
  }
}

/* ═══ 5. CHAT MENU — mobilde kompakt ═══ */
@media (max-width: 768px) {
  body #chatMenu.chat-menu,
  #chatMenu.chat-menu,
  .chat-menu {
    min-width: 0 !important;
    width: 220px !important;
    max-width: 220px !important;
    right: 12px !important;
    left: auto !important;
    bottom: 62px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  #chatMenu .chat-menu-item, .chat-menu .chat-menu-item {
    padding: 8px 6px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }
  #chatMenu .chat-menu-icon, .chat-menu .chat-menu-icon {
    width: 30px !important;
    height: 30px !important;
  }
  #chatMenu .chat-menu-icon svg, .chat-menu .chat-menu-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
  #chatMenu .chat-menu-title, .chat-menu .chat-menu-title {
    font-size: 12px !important;
    margin-bottom: 1px !important;
    line-height: 1.2 !important;
  }
  #chatMenu .chat-menu-subtitle, .chat-menu .chat-menu-subtitle {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }
  #chatMenu .chat-menu-header, .chat-menu .chat-menu-header {
    font-size: 10px !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    letter-spacing: 0.5px !important;
  }
  #chatMenu .chat-menu-close-btn, .chat-menu .chat-menu-close-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 12px !important;
  }
  #chatMenu .chat-menu-divider, .chat-menu .chat-menu-divider {
    margin: 4px 0 !important;
  }
  #chatMenu .chat-menu-badge, .chat-menu .chat-menu-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}
@media (max-width: 400px) {
  body #chatMenu.chat-menu, #chatMenu.chat-menu, .chat-menu {
    width: 200px !important;
    max-width: 200px !important;
  }
}


/* ═══ 6. HERO DESCRIPTION — ortala, animasyon kapat ═══ */
@media (max-width: 768px) {
  section.hero .hero-description,
  .hero .hero-description,
  #heroDescription,
  .hero-description {
    font-size: 13px !important;
    line-height: 1.7 !important;
    max-width: 92vw !important;
    width: 92vw !important;
    margin: 0 auto 20px !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
  }
}
@media (max-width: 400px) {
  section.hero .hero-description,
  #heroDescription,
  .hero-description {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
}


/* ═══ 7. HERO YAZI BLOKU - YUKARI ALINDI ═══ */
@media (max-width: 768px) {
  section.hero .hero-content,
  section.hero .hero-content-lares,
  .hero .hero-content,
  .hero .hero-content-lares {
    top: 22% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}
@media (max-width: 400px) {
  section.hero .hero-content,
  section.hero .hero-content-lares {
    top: 18% !important;
  }
}


/* ═══ 8. HERO CTA (Iletisime Gecin) — yazilarin altinda, ortada ═══ */
@media (max-width: 768px) {
  section.hero .hero-cta,
  .hero .hero-cta,
  #heroCta,
  a.hero-cta {
    display: inline-block !important;
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    margin: 8px auto 0 !important;
    padding: 11px 28px !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    left: auto !important;
    right: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v14 CLEANUP — kalan mobil sorunlar                           */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* #1 - Animasyonla kayma riski tasiyan diger elementler */
  section.hero .hero-buttons,
  .hero .hero-buttons,
  .hero-buttons {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
  }

  .slogan-hayal, .slogan-gercek {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
  }

  .whatsapp-notification {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    display: none !important; /* WhatsApp bildirimi mobilde gizli - zaten sohbet butonu var */
  }

  /* #2 - Buyuk basliklari kucult */
  section .section-title,
  .section-title,
  .projeler-title,
  .hakkimizda-title,
  .hizmetler-title {
    font-size: 28px !important;
    letter-spacing: 3px !important;
    line-height: 1.2 !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    word-wrap: break-word !important;
  }
  section h2, main h2 {
    font-size: 26px !important;
    letter-spacing: 2px !important;
    line-height: 1.25 !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* #3 - Form input/textarea: iOS zoom engeli icin 16px */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* #4 - Scroll progress widget'i chat butonunun ustune tasi (cakismasin) */
  .scroll-progress-wrap {
    bottom: 112px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
  }
  .scroll-progress-wrap svg {
    width: 36px !important;
    height: 36px !important;
  }

  /* #5 - cee-it-float container (Is Takip badge parent) - dogru yere konumlandir */
  .cee-it-float {
    right: 12px !important;
    top: auto !important;
    bottom: 60px !important;
    transform: none !important;
    gap: 6px !important;
  }
}

@media (max-width: 400px) {
  section .section-title,
  .section-title { font-size: 24px !important; letter-spacing: 2px !important; }
  section h2, main h2 { font-size: 22px !important; letter-spacing: 1.5px !important; }
}


/* ═══════════════════════════════════════════════════════════ */
/* v15 FINAL - form input, scroll indicator, section spacing   */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1) Form input/textarea/select - 100% genislik (mobilde tasmasin) */
  #iletisim form input,
  #iletisim form textarea,
  #iletisim form select,
  form.contact-form input,
  form.contact-form textarea,
  .iletisim-form input,
  .iletisim-form textarea,
  section#iletisim input[type="text"],
  section#iletisim input[type="email"],
  section#iletisim input[type="tel"],
  section#iletisim textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 12px !important;
  }
  #iletisim form,
  .iletisim-form,
  form.contact-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* form container'lari da sigdir */
  .contact-container, .iletisim-container, .form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* 2) Hero KESFET scroll indicator mobilde gereksiz (CTA zaten var) */
  .scroll-indicator,
  .hero .scroll-indicator,
  section.hero .scroll-indicator,
  .hero-mouse, .hero-scroll {
    display: none !important;
  }

  /* 3) Section spacing: mobilde padding 0 -> 40px vertical (bolumler dagilsin) */
  section#projeler,
  section#hakkimizda,
  section#hizmetler,
  section#referanslar,
  section#sss,
  section#iletisim {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* 4) Footer icerigi guzel stackleninsin */
  footer .footer-content {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 30px 20px !important;
    text-align: center !important;
  }
  footer .footer-content > * {
    width: 100% !important;
    text-align: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v16 - Takip Et paneli geri geldi, kompakt stil              */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* v8'deki display:none'i iptal et */
  body #socialSidebar .social-sidebar-content,
  body #socialSidebar .social-sidebar-panel,
  body #socialSidebarContent,
  #socialSidebarContent {
    display: block !important;
  }

  /* Panel: Takip Et butonunun uzerinde (sol alt), kompakt */
  body #socialSidebar #socialSidebarContent,
  #socialSidebarContent {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 48px !important;
    top: auto !important;
    width: 130px !important;
    max-width: 130px !important;
    max-height: 180px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-110%) !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
    overflow: hidden !important;
    z-index: 9997 !important;
  }
  body #socialSidebar #socialSidebarContent.active,
  #socialSidebarContent.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  /* Panel basligi kucuk */
  #socialSidebarContent .social-sidebar-header {
    font-size: 9px !important;
    padding: 4px 6px !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  #socialSidebarContent .social-close-btn {
    width: 16px !important;
    height: 16px !important;
    font-size: 11px !important;
    padding: 0 !important;
    background: rgba(0,0,0,0.1) !important;
    border: none !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
  }

  /* Linkler satir satir, kucuk */
  #socialSidebarContent .social-sidebar-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  #socialSidebarContent .social-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: inherit !important;
  }
  #socialSidebarContent .social-sidebar-link svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }
  #socialSidebarContent .social-sidebar-link span {
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
  }
  #socialSidebarContent .social-sidebar-link:hover,
  #socialSidebarContent .social-sidebar-link:active {
    background: rgba(255,255,255,0.15) !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v16 - Takip Et paneli geri geldi, kompakt stil              */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* v8'deki display:none'i iptal et */
  body #socialSidebar .social-sidebar-content,
  body #socialSidebar .social-sidebar-panel,
  body #socialSidebarContent,
  #socialSidebarContent {
    display: block !important;
  }

  /* Panel: Takip Et butonunun uzerinde (sol alt) — genis ama icerik sigar */
  body #socialSidebar #socialSidebarContent,
  #socialSidebarContent {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 48px !important;
    top: auto !important;
    width: 180px !important;
    max-width: 180px !important;
    min-width: 180px !important;
    max-height: none !important;
    padding: 10px !important;
    border-radius: 12px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-110%) !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    overflow: visible !important;
    z-index: 9997 !important;
    box-sizing: border-box !important;
  }
  body #socialSidebar #socialSidebarContent.active,
  #socialSidebarContent.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  /* Panel basligi kucuk */
  #socialSidebarContent .social-sidebar-header {
    font-size: 9px !important;
    padding: 4px 6px !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  #socialSidebarContent .social-close-btn {
    width: 16px !important;
    height: 16px !important;
    font-size: 11px !important;
    padding: 0 !important;
    background: rgba(0,0,0,0.1) !important;
    border: none !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
  }

  /* Linkler satir satir, kucuk */
  #socialSidebarContent .social-sidebar-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  #socialSidebarContent .social-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  #socialSidebarContent .social-sidebar-link svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  #socialSidebarContent .social-sidebar-link span {
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #socialSidebarContent .social-sidebar-link:hover,
  #socialSidebarContent .social-sidebar-link:active {
    background: rgba(255,255,255,0.15) !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v16 - Takip Et paneli geri geldi, kompakt stil              */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* v8'deki display:none'i iptal et */
  body #socialSidebar .social-sidebar-content,
  body #socialSidebar .social-sidebar-panel,
  body #socialSidebarContent,
  #socialSidebarContent {
    display: block !important;
  }

  /* Panel: chat menu ile ayni kompakt stil */
  body #socialSidebar #socialSidebarContent,
  #socialSidebarContent {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 48px !important;
    top: auto !important;
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    max-height: none !important;
    padding: 10px !important;
    border-radius: 12px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-110%) !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    overflow: visible !important;
    z-index: 9997 !important;
    box-sizing: border-box !important;
  }
  body #socialSidebar #socialSidebarContent.active,
  #socialSidebarContent.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  /* Basligi — chat-menu ile ayni tarz */
  #socialSidebarContent .social-sidebar-header {
    font-size: 10px !important;
    padding: 0 0 6px 0 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(0,0,0,0.15) !important;
  }
  #socialSidebarContent .social-close-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 12px !important;
    padding: 0 !important;
    background: rgba(0,0,0,0.1) !important;
    border: none !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
  }

  /* Linkler - chat-menu-item ile ayni */
  #socialSidebarContent .social-sidebar-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  #socialSidebarContent .social-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #socialSidebarContent .social-sidebar-link svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }
  #socialSidebarContent .social-sidebar-link span {
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #socialSidebarContent .social-sidebar-link:hover,
  #socialSidebarContent .social-sidebar-link:active {
    background: rgba(255,255,255,0.15) !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v16 - Takip Et paneli geri geldi, kompakt stil              */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* v8'deki display:none'i iptal et */
  body #socialSidebar .social-sidebar-content,
  body #socialSidebar .social-sidebar-panel,
  body #socialSidebarContent,
  #socialSidebarContent {
    display: block !important;
  }

  /* Panel: chat menu ile ayni kompakt stil */
  body #socialSidebar #socialSidebarContent,
  #socialSidebarContent {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 48px !important;
    top: auto !important;
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    max-height: none !important;
    padding: 10px !important;
    border-radius: 12px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-110%) !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    overflow: visible !important;
    z-index: 9997 !important;
    box-sizing: border-box !important;
  }
  body #socialSidebar #socialSidebarContent.active,
  #socialSidebarContent.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  /* Basligi — chat-menu ile ayni tarz */
  #socialSidebarContent .social-sidebar-header {
    font-size: 10px !important;
    padding: 0 0 6px 0 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(0,0,0,0.15) !important;
  }
  #socialSidebarContent .social-close-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 14px !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    font-weight: bold !important;
  }
  #socialSidebarContent .social-sidebar-header {
    color: #ffffff !important;
  }
  #socialSidebarContent .social-sidebar-link {
    color: #ffffff !important;
  }
  #socialSidebarContent .social-sidebar-link span {
    color: #ffffff !important;
  }
  #socialSidebarContent .social-sidebar-link svg {
    fill: #ffffff !important;
    color: #ffffff !important;
  }

  /* Linkler - chat-menu-item ile ayni */
  #socialSidebarContent .social-sidebar-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  #socialSidebarContent .social-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #socialSidebarContent .social-sidebar-link svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }
  #socialSidebarContent .social-sidebar-link span {
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #socialSidebarContent .social-sidebar-link:hover,
  #socialSidebarContent .social-sidebar-link:active {
    background: rgba(255,255,255,0.15) !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v16 - Takip Et paneli geri geldi, kompakt stil              */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* v8'deki display:none'i iptal et */
  body #socialSidebar .social-sidebar-content,
  body #socialSidebar .social-sidebar-panel,
  body #socialSidebarContent,
  #socialSidebarContent {
    display: block !important;
  }

  /* Panel: zarif minimal */
  body #socialSidebar #socialSidebarContent,
  #socialSidebarContent {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 48px !important;
    top: auto !important;
    width: 138px !important;
    max-width: 138px !important;
    min-width: 138px !important;
    max-height: none !important;
    padding: 8px !important;
    border-radius: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-110%) !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important;
    overflow: visible !important;
    z-index: 9997 !important;
    box-sizing: border-box !important;
  }
  body #socialSidebar #socialSidebarContent.active,
  #socialSidebarContent.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  /* Header - zarif */
  #socialSidebarContent .social-sidebar-header {
    font-size: 8.5px !important;
    font-weight: 500 !important;
    padding: 0 2px 5px 2px !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.75) !important;
  }
  #socialSidebarContent .social-close-btn {
    width: 16px !important;
    height: 16px !important;
    font-size: 13px !important;
    padding: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,0.7) !important;
    border: none !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    font-weight: 300 !important;
    transition: color 0.2s ease !important;
  }
  #socialSidebarContent .social-close-btn:hover,
  #socialSidebarContent .social-close-btn:active {
    color: #ffffff !important;
  }

  /* Linkler - ince/zarif */
  #socialSidebarContent .social-sidebar-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  #socialSidebarContent .social-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 7px 6px !important;
    font-size: 10.5px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    color: rgba(255,255,255,0.85) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    font-weight: 400 !important;
    transition: background 0.2s ease !important;
  }
  #socialSidebarContent .social-sidebar-link svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    fill: rgba(255,255,255,0.85) !important;
    color: rgba(255,255,255,0.85) !important;
  }
  #socialSidebarContent .social-sidebar-link span {
    font-size: 10.5px !important;
    letter-spacing: 0.2px !important;
    font-weight: 400 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
  }
  #socialSidebarContent .social-sidebar-link:hover,
  #socialSidebarContent .social-sidebar-link:active {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
  }
  #socialSidebarContent .social-sidebar-link:hover svg,
  #socialSidebarContent .social-sidebar-link:active svg {
    fill: #ffffff !important;
    color: #ffffff !important;
  }
  #socialSidebarContent .social-sidebar-link:hover,
  #socialSidebarContent .social-sidebar-link:active {
    background: rgba(255,255,255,0.15) !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v16 - Takip Et paneli geri geldi, kompakt stil              */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* v8'deki display:none'i iptal et */
  body #socialSidebar .social-sidebar-content,
  body #socialSidebar .social-sidebar-panel,
  body #socialSidebarContent,
  #socialSidebarContent {
    display: block !important;
  }

  /* Panel: kucuk, chat menu ile uyumlu */
  body #socialSidebar #socialSidebarContent,
  #socialSidebarContent {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 48px !important;
    top: auto !important;
    width: 125px !important;
    max-width: 125px !important;
    min-width: 125px !important;
    max-height: none !important;
    padding: 8px !important;
    border-radius: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-110%) !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important;
    overflow: visible !important;
    z-index: 9997 !important;
    box-sizing: border-box !important;
  }
  body #socialSidebar #socialSidebarContent.active,
  #socialSidebarContent.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  /* Header - chat menu "Iletisim Secenekleri" ile ayni dil */
  #socialSidebarContent .social-sidebar-header {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 0 2px 6px 2px !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  }
  #socialSidebarContent .social-close-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 12px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #505050, #303030) !important;
    color: #e0e0e0 !important;
    border: none !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
  }

  /* Linkler - brand gradient'leri KORU, sadece boyut kucult */
  #socialSidebarContent .social-sidebar-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
  #socialSidebarContent .social-sidebar-link {
    gap: 8px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    border-radius: 7px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    font-weight: 500 !important;
    /* color, background, svg fill — brand kurallari dokunulmadi */
  }
  #socialSidebarContent .social-sidebar-link svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }
  #socialSidebarContent .social-sidebar-link span {
    font-size: 10px !important;
    letter-spacing: 0.3px !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #socialSidebarContent .social-sidebar-link:hover,
  #socialSidebarContent .social-sidebar-link:active {
    background: rgba(255,255,255,0.15) !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v16 - Takip Et paneli geri geldi, kompakt stil              */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* v8'deki display:none'i iptal et */
  body #socialSidebar .social-sidebar-content,
  body #socialSidebar .social-sidebar-panel,
  body #socialSidebarContent,
  #socialSidebarContent {
    display: block !important;
  }

  /* Panel: chat menu ile AYNI gorunum — acik gradient bg, siyah yazilar */
  body #socialSidebar #socialSidebarContent,
  #socialSidebarContent {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 48px !important;
    top: auto !important;
    width: 125px !important;
    max-width: 125px !important;
    min-width: 125px !important;
    max-height: none !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #e8e8e8 0%, #d0d0d0 20%, #b8b8b8 50%, #a0a0a0 80%, #888888 100%) !important;
    border: 1px solid #1a1a1a !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-110%) !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.15), 0 6px 18px rgba(0,0,0,0.25) !important;
    overflow: visible !important;
    z-index: 9997 !important;
    box-sizing: border-box !important;
  }
  body.dark-mode body #socialSidebar #socialSidebarContent,
  body.dark-mode #socialSidebarContent {
    background: linear-gradient(180deg, #505050 0%, #404040 20%, #303030 50%, #202020 80%, #1a1a1a 100%) !important;
  }
  body #socialSidebar #socialSidebarContent.active,
  #socialSidebarContent.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  /* Header - chat-menu-header ile AYNI: acik gradient uzerine siyah yazi */
  #socialSidebarContent .social-sidebar-header {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 0 2px 6px 2px !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(0,0,0,0.2) !important;
    color: #1a1a1a !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
  }
  body.dark-mode #socialSidebarContent .social-sidebar-header {
    color: #e0e0e0 !important;
    border-bottom-color: rgba(255,255,255,0.2) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  }

  /* Close btn - chat-menu-close-btn ile AYNI */
  #socialSidebarContent .social-close-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 12px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #d0d0d0, #909090) !important;
    color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.2) !important;
  }
  body.dark-mode #socialSidebarContent .social-close-btn {
    background: linear-gradient(180deg, #505050, #303030) !important;
    color: #e0e0e0 !important;
  }

  /* Linkler - brand gradient'leri KORU, sadece boyut kucult */
  #socialSidebarContent .social-sidebar-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
  #socialSidebarContent .social-sidebar-link {
    gap: 8px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    border-radius: 7px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    font-weight: 500 !important;
    /* color, background, svg fill — brand kurallari dokunulmadi */
  }
  #socialSidebarContent .social-sidebar-link svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }
  #socialSidebarContent .social-sidebar-link span {
    font-size: 10px !important;
    letter-spacing: 0.3px !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #socialSidebarContent .social-sidebar-link:hover,
  #socialSidebarContent .social-sidebar-link:active {
    background: rgba(255,255,255,0.15) !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v17 - Mobilde duplicate logo / CEE MIMARLIK gizle           */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* floatingLogo header'daki logo ile cakisir mobilde — tamamen gizle */
  #floatingLogo,
  body #floatingLogo,
  #floatingLogo.visible,
  #floatingLogo.mini-mode {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Header logo-wrapper: yatayda logo + yazi (flex-row) sigdir */
  header .logo-wrapper {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  header .site-logo, header #headerLogo {
    max-height: 28px !important;
    width: auto !important;
  }
  header .logo-text, header #logoText {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* v17 - Mobilde duplicate logo / CEE MIMARLIK gizle           */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* floatingLogo header'daki logo ile cakisir mobilde — tamamen gizle */
  #floatingLogo,
  body #floatingLogo,
  #floatingLogo.visible,
  #floatingLogo.mini-mode {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Header logo-wrapper: yatayda logo + yazi, tam metin gorunur */
  header .logo-container {
    flex-shrink: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }
  header .logo-wrapper {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  header .site-logo, header #headerLogo {
    max-height: 28px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  header .logo-text, header #logoText {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    line-height: 1.2 !important;
    max-height: none !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: unset !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
  }
}

/* === BLOK 14 === */


footer a:hover { color: #d4af37 !important; text-decoration: underline; }

/* === BLOK 15 === */
/* Tum tema gecisleri icin smooth transition */
body, header, footer, section, nav, nav a,
.social-sidebar-content, .chat-menu, .team-card,
#socialSidebarContent, #socialSidebarContent *,
.social-sidebar-header, .social-sidebar-header *,
.chat-menu-header, .chat-menu-item {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

/* SOCIAL SIDEBAR HEADER — span child elementlere de renk ver (toggleDarkMode inline override eder) */
#socialSidebarContent .social-sidebar-header,
#socialSidebarContent .social-sidebar-header span,
#socialSidebarContent .social-sidebar-header > * {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
body.dark-mode #socialSidebarContent .social-sidebar-header,
body.dark-mode #socialSidebarContent .social-sidebar-header span,
body.dark-mode #socialSidebarContent .social-sidebar-header > * {
  color: #e8e8e8 !important;
  -webkit-text-fill-color: #e8e8e8 !important;
}

/* Ayni sekilde chat menu header */
#chatMenu .chat-menu-header,
#chatMenu .chat-menu-header span,
#chatMenu .chat-menu-header > * {
  color: #1a1a1a !important;
}
body.dark-mode #chatMenu .chat-menu-header,
body.dark-mode #chatMenu .chat-menu-header span,
body.dark-mode #chatMenu .chat-menu-header > * {
  color: #e8e8e8 !important;
}

/* Chat menu ic yazilar */
body.dark-mode #chatMenu .chat-menu-title,
body.dark-mode #chatMenu .chat-menu-title * { color: #e0e0e0 !important; }
body.dark-mode #chatMenu .chat-menu-subtitle,
body.dark-mode #chatMenu .chat-menu-subtitle * { color: #a8a8a8 !important; }

/* === BLOK 16 === */
/* Chat butonu (sohbet) koyu bg'de net gorunsun - acik border + shadow */
#unifiedChatBtn {
  border: 2px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.1) !important;
}
body.dark-mode #unifiedChatBtn {
  border: 2px solid rgba(212,175,55,0.4) !important;
  background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 12px rgba(212,175,55,0.2) !important;
}
#unifiedChatBtn:hover {
  border-color: rgba(255,255,255,0.5) !important;
  transform: translateY(-2px) scale(1.05);
}