* { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Inter', sans-serif; background: #f8fafc; min-height: 100vh; color: #1e293b; }

        /* Cam Efekt - Glassmorphism */
        .glass { 
            background: rgba(255, 255, 255, 0.7); 
            backdrop-filter: blur(20px); 
            -webkit-backdrop-filter: blur(20px); 
            border: 1px solid rgba(255, 255, 255, 0.5); 
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
        }
        
        .glass-dark {
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); } }
        @keyframes rainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

        .animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }
        .animate-fadeIn { animation: fadeIn 0.4s ease-out forwards; }
        .animate-slideInLeft { animation: slideInLeft 0.5s ease-out forwards; }
        .animate-slideInRight { animation: slideInRight 0.5s ease-out forwards; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
        .delay-500 { animation-delay: 0.5s; }

        /* Navigasyon Linkleri */
        .nav-link { position: relative; transition: all 0.3s ease; color: #475569; }
        .nav-link::after { 
            content: ''; 
            position: absolute; 
            bottom: -4px; 
            left: 0; 
            width: 0; 
            height: 2px; 
            background: linear-gradient(90deg, #6366f1, #ec4899); 
            transition: width 0.3s ease; 
            border-radius: 2px;
        }
        .nav-link:hover::after { width: 100%; }
        .nav-link:hover { color: #4f46e5; }

        /* Hero Gradient - Canlı Renkler */
        .hero-gradient { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%); 
            background-size: 400% 400%; 
            animation: gradientShift 15s ease infinite; 
        }
        
        .hero-pattern { 
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 50%), 
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), 
                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); 
        }
        
        /* İstatistik Kartları - Renkli */
        .stat-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
            transition: all 0.3s ease;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(99, 102, 241, 0.25);
        }
        .stat-card .stat-number { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .stat-card .stat-label { color: #64748b; font-weight: 600; }

        /* Şablon Kartları */
        .template-card { 
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
        }
        .template-card:hover { 
            transform: translateY(-12px); 
            box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25); 
        }

        /* Editör Bölümleri */
        .section-editor { 
            transition: all 0.3s ease; 
            border-left: 4px solid transparent; 
        }
        .section-editor:hover { 
            border-left-color: #6366f1; 
            background: rgba(99, 102, 241, 0.03); 
        }
        .section-editor.dragging { opacity: 0.5; transform: scale(0.98); }
        .section-editor.drag-over { border: 2px dashed #6366f1; background: rgba(99, 102, 241, 0.05); }

        /* Input Alanları */
        .input-field { 
            transition: all 0.3s ease; 
            border: 2px solid #e2e8f0; 
        }
        .input-field:focus { 
            border-color: #6366f1; 
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); 
            outline: none; 
        }
        .input-field:hover { border-color: #818cf8; }

        /* Fotoğraf Yükleme Alanı */
        .photo-upload-zone { 
            transition: all 0.3s ease; 
            border: 3px dashed #c7d2fe; 
            background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
        }
        .photo-upload-zone:hover { 
            border-color: #6366f1; 
            background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
        }
        .photo-upload-zone.has-photo { 
            border-style: solid; 
            border-color: #6366f1; 
        }

        /* Yetenek Barı */
        .skill-bar-container { height: 10px; background: #e2e8f0; border-radius: 5px; overflow: hidden; }
        .skill-bar-fill { 
            height: 100%; 
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); 
            border-radius: 5px; 
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
        }

        .preview-container { box-shadow: 0 25px 80px -20px rgba(99, 102, 241, 0.3); transition: transform 0.3s ease; }

        /* YAZDIRMA AYARLARI - GÜNCELLENMİŞ VE DÜZELTİLMİŞ */
        @media print {
            @page { 
                size: A4 portrait;
                margin: 0; 
            }
            
            * { 
                -webkit-print-color-adjust: exact !important; 
                print-color-adjust: exact !important; 
                box-sizing: border-box !important;
            }
            
            html, body { 
                margin: 0 !important; 
                padding: 0 !important; 
                background: white !important; 
                height: auto !important; 
                width: 100% !important;
                overflow: visible !important;
            }
            
            /* Tüm gereksiz elementleri gizle */
            .no-print, 
            nav, 
            #landing-page, 
            #templates-page, 
            #editor-sidebar, 
            .editor-controls, 
            .mobile-nav, 
            #toast-container,
            .glass,
            .glass-dark,
            button:not(.print-allowed),
            .mobile-nav,
            #mobile-menu,
            .nav-link,
            .btn-primary,
            .filter-btn,
            .stat-card,
            .template-card,
            .card-hover,
            .testimonial-card,
            .feature-card-purple,
            .feature-card-pink,
            .feature-card-blue,
            .feature-card-cyan,
            .feature-card-amber,
            .feature-card-indigo,
            footer,
            .cta-gradient,
            .hero-gradient,
            .hero-pattern { 
                display: none !important; 
                visibility: hidden !important;
                opacity: 0 !important;
            }
            
            /* Editor sayfasını göster */
            #editor-page { 
                display: block !important; 
                position: static !important; 
                top: auto !important;
                left: auto !important;
                width: 100% !important; 
                height: auto !important; 
                overflow: visible !important; 
                background: white !important; 
                padding: 0 !important; 
                margin: 0 !important;
                visibility: visible !important;
                flex-direction: column !important;
            }
            
            /* Preview alanını düzelt */
            #preview-area { 
                width: 210mm !important; 
                height: auto !important; 
                min-height: 297mm !important;
                padding: 0 !important; 
                margin: 0 auto !important; 
                overflow: visible !important; 
                display: block !important; 
                background: white !important; 
                position: static !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                align-items: stretch !important;
                justify-content: flex-start !important;
                flex: none !important;
            }
            
            /* Wrapper'ı düzelt */
            #preview-wrapper { 
                transform: none !important; 
                width: 210mm !important; 
                height: auto !important;
                min-height: 297mm !important;
                margin: 0 auto !important; 
                box-shadow: none !important; 
                overflow: visible !important;
                position: static !important;
                transform-origin: top center !important;
            }
            
            /* CV içeriğini düzelt */
            #cv-preview { 
                width: 210mm !important; 
                height: auto !important; 
                min-height: 297mm !important;
                margin: 0 auto !important; 
                padding: 0 !important; 
                box-shadow: none !important; 
                overflow: visible !important;
                page-break-after: avoid !important;
                page-break-inside: avoid !important;
                background: white !important;
                position: static !important;
                display: block !important;
            }
            
            /* CV içindeki div'i düzelt */
            #cv-preview > div {
                width: 210mm !important;
                height: auto !important;
                min-height: 297mm !important;
                overflow: visible !important;
                margin: 0 !important;
                padding: 20mm !important;
                box-sizing: border-box !important;
                page-break-inside: avoid !important;
            }
            
            /* Yazdırma sırasında geçici olarak eklenen sınıf */
            .printing-mode {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
        }

        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed); }

        /* Renkli Butonlar */
        .btn-primary { 
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); 
            transition: all 0.3s ease; 
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }
        .btn-primary:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6); 
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
        }

        .toast { animation: slideInRight 0.3s ease-out; }
        .toast.hiding { animation: fadeIn 0.3s ease-out reverse forwards; }

        .spinner { border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

        .color-btn { transition: all 0.2s ease; border: 2px solid transparent; position: relative; }
        .color-btn:hover { transform: scale(1.15); box-shadow: 0 0 10px rgba(0,0,0,0.2); }
        .color-btn.active { 
            box-shadow: 0 0 0 3px white, 0 0 0 5px currentColor; 
            transform: scale(1.1);
        }
        /* Beyaz renk butonu için özel border */
        .color-btn[data-color="#ffffff"] {
            border-color: #cbd5e1;
            background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%), linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f5f9 75%), linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
            background-size: 10px 10px;
            background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
        }

        .toggle-checkbox { appearance: none; width: 44px; height: 24px; background: #e2e8f0; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.3s ease; }
        .toggle-checkbox::after { content: ''; position: absolute; width: 20px; height: 20px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .toggle-checkbox:checked { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
        .toggle-checkbox:checked::after { transform: translateX(20px); }

        input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; background: #e2e8f0; border-radius: 3px; outline: none; }
        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 50%; cursor: pointer; transition: all 0.2s ease; }
        input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

        .template-preview-container { 
            position: relative; 
            width: 100%; 
            height: 100%; 
            overflow: hidden;
            background: white;
            border-radius: 1rem;
        }
        .template-preview-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-origin: top left;
            transform: scale(1);
        }
        .template-preview-content > div {
            width: 100%;
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }

        .card-hover { 
            transition: all 0.3s ease; 
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid rgba(99, 102, 241, 0.1);
        }
        .card-hover:hover { 
            transform: translateY(-4px); 
            box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.2); 
            border-color: rgba(99, 102, 241, 0.3);
        }

        .gradient-text { 
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            background-clip: text; 
        }

        .testimonial-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 2px solid rgba(99, 102, 241, 0.1);
            transition: all 0.3s ease;
        }
        .testimonial-card:hover {
            border-color: rgba(99, 102, 241, 0.3);
            box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.15);
            transform: translateY(-5px);
        }

        /* Template Card Hover Renkleri */
        .template-card .aspect-\[3\/4\] {
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }
        .template-card:hover .aspect-\[3\/4\] {
            border-color: #6366f1;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
        }

        /* Filter button hover renkli */
        .filter-btn:hover {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
            color: white !important;
            border-color: transparent !important;
        }
        
        /* CTA Section gradient renkli */
        .cta-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            background-size: 200% 200%;
            animation: gradientShift 10s ease infinite;
        }

        /* Renkli ikonlar */
        .icon-purple { color: #8b5cf6; }
        .icon-pink { color: #ec4899; }
        .icon-blue { color: #3b82f6; }
        .icon-cyan { color: #06b6d4; }
        .icon-amber { color: #f59e0b; }
        
        /* Feature cards renkli border'lar */
        .feature-card-purple:hover { border-color: #8b5cf6; }
        .feature-card-pink:hover { border-color: #ec4899; }
        .feature-card-blue:hover { border-color: #3b82f6; }
        .feature-card-cyan:hover { border-color: #06b6d4; }
        .feature-card-amber:hover { border-color: #f59e0b; }
        .feature-card-indigo:hover { border-color: #6366f1; }
        
        /* Özel scrollbar renkli */
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
        }
        
        /* Badge renkli */
        .badge-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* MOBİL DÜZENLEMELER - GÜNCELLENMİŞ */
        @media (max-width: 1024px) {
            #editor-page { 
                flex-direction: column; 
                height: 100vh !important;
                overflow: hidden;
            }
            
            #editor-sidebar { 
                width: 100% !important; 
                height: calc(100vh - 140px) !important;
                max-height: none;
                position: fixed;
                top: 64px;
                left: 0;
                right: 0;
                bottom: 76px;
                z-index: 30;
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
                display: none;
                background: white;
                overflow-y: auto;
            }
            
            #editor-sidebar.active {
                display: flex !important;
            }
            
            /* MOBİL PREVIEW ALANI DÜZELTMELERİ - BURASI ÖNEMLİ */
            #preview-area { 
                height: calc(100vh - 140px) !important;
                position: fixed;
                top: 64px;
                left: 0;
                right: 0;
                bottom: 76px;
                padding: 0.5rem !important;
                display: none !important;
                align-items: flex-start !important;
                justify-content: flex-start !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                background: #f1f5f9;
                z-index: 25;
            }
            
            #preview-area.active {
                display: flex !important;
            }
            
            /* Scale kullanımını optimize et - scroll sorununu çöz */
            #preview-wrapper { 
                transform: scale(0.45) !important; 
                transform-origin: top left !important;
                margin: 0 !important;
                width: 210mm !important;
                min-width: 210mm !important;
                height: auto !important;
                min-height: 297mm !important;
                flex-shrink: 0 !important;
            }
            
            #cv-preview {
                width: 210mm !important;
                min-width: 210mm !important;
                min-height: 297mm !important;
                background: white !important;
                margin: 0 !important;
            }
            
            .mobile-nav {
                position: fixed !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                height: 70px !important;
                background: white !important;
                border-top: 1px solid #e2e8f0 !important;
                box-shadow: 0 -4px 20px rgba(99, 102, 241, 0.1) !important;
                z-index: 50 !important;
                padding: 12px 16px !important;
                display: flex !important;
                gap: 12px !important;
                align-items: center !important;
                justify-content: center !important;
            }
            
            .mobile-nav button {
                height: 46px !important;
                border-radius: 12px !important;
                font-size: 15px !important;
                font-weight: 600 !important;
                letter-spacing: 0.3px;
                flex: 1;
                max-width: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                transition: all 0.2s ease;
                box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
                border: none;
                cursor: pointer;
            }
            
            .mobile-nav button:first-child {
                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
                color: white !important;
            }
            
            .mobile-nav button:last-child {
                background: #f1f5f9 !important;
                color: #475569 !important;
                border: 2px solid #e2e8f0 !important;
            }
            
            .mobile-nav button:active {
                transform: scale(0.96);
            }
            
            .editor-controls {
                padding: 0.5rem !important;
                margin-bottom: 0.5rem !important;
                position: sticky;
                top: 0;
                z-index: 10;
                background: rgba(255,255,255,0.9);
                backdrop-filter: blur(10px);
            }
            
            #toast-container {
                bottom: 90px !important;
                right: 16px !important;
                left: 16px !important;
            }
        }
        
        @media (max-width: 640px) {
            #preview-wrapper { 
                transform: scale(0.4) !important; 
                transform-origin: top left !important;
            }
            
            .mobile-nav {
                height: 65px !important;
                padding: 10px 12px !important;
            }
            
            .mobile-nav button {
                height: 42px !important;
                font-size: 14px !important;
            }
            
            nav {
                height: 56px !important;
            }
            
            #editor-page {
                padding-top: 56px !important;
            }
            
            #editor-sidebar, #preview-area {
                top: 56px;
                height: calc(100vh - 121px) !important;
                bottom: 65px;
            }
        }
        
        @media (max-width: 1024px) {
            #editor-sidebar .p-5 {
                padding: 1rem !important;
            }
            
            .section-editor {
                margin-bottom: 0.75rem !important;
            }
            
            .photo-upload-zone {
                padding: 1rem !important;
            }
            
            .input-field {
                padding-top: 0.625rem !important;
                padding-bottom: 0.625rem !important;
            }
        }

        /* Kritik Düzeltme: Preview Area görünürlüğü */
        @media (min-width: 1025px) {
            #preview-area {
                display: flex !important;
            }
        }
        
        /* Mobil Preview Özel Ayarlar - Scroll düzeltmesi */
        @media (max-width: 1024px) {
            #cv-preview {
                width: 210mm !important;
                min-width: 210mm !important;
                background: white !important;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
                transform-origin: top left !important;
            }
            
            #cv-preview > div {
                width: 210mm !important;
                min-height: 297mm !important;
                background: white !important;
            }
        }

        /* Yazdırma sırasında geçici olarak uygulanan sınıf */
        .force-print-visible {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: static !important;
            transform: none !important;
        }