<!--
    ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
    ░░                                                                                ░░
    ░░    🦥 MERHABA MERAKLI DEVELOPER! KAYNAK KODUNA BAKIYORSUN DEMEK? 🦥           ░░
    ░░                                                                                ░░
    ░░                              ██                                                ░░
    ░░                          ████████                                              ░░
    ░░                        ██████████████                                          ░░
    ░░                      ████████████████████                                      ░░
    ░░                    ██████████████████████████                                  ░░
    ░░                  ████████████████████████████████                              ░░
    ░░                ██████████████████████████████████████                          ░░
    ░░                ████████████████████████████████████████                        ░░
    ░░                  ██████████████████████████████████████                        ░░
    ░░                    ████████████████████████████████████                        ░░
    ░░                      ██████████████████████████████████                        ░░
    ░░                        ████████████████████████████████                        ░░
    ░░                          ██████████████████████████████                        ░░
    ░░                            ████████████████████████████                        ░░
    ░░                              ██████████████████████████                        ░░
    ░░                                ████████████████████████                        ░░
    ░░                                  ██████████████████████                        ░░
    ░░                                    ████████████████████                        ░░
    ░░                                      ██████████████████                        ░░
    ░░                                        ████████████████                        ░░
    ░░                                          ██████████████                        ░░
    ░░                                            ████████████                        ░░
    ░░                                              ██████████                        ░░
    ░░                                                ████████                        ░░
    ░░                                                  ████                          ░░
    ░░                                                                                ░░
    ░░    Ben Coffee Loris! ☕ Bu siteyi Laravel + Livewire + AI ile yaptık!           ░░
    ░░                                                                                ░░
    ░░    🚀 DEVLORIS EKİBİ - İSTANBUL'DAN SELAMLAR!                                  ░░
    ░░                                                                                ░░
    ░░    ⚡ Stack: Laravel 12 + Livewire 3 + Tailwind CSS + Groq AI + Gemini AI       ░░
    ░░    📊 Stats: ~15,847 satır kod | 247MB | 89 dosya                              ░░
    ░░    🎯 Özellikler: AI Asistan, Proaktif Mesajlaşma, Dinamik Build Stats         ░░
    ░░                                                                                ░░
    ░░    💡 İpucu: Sayfanın sağ altındaki Loris ile konuşabilirsin!                  ░░
    ░░    🎨 Easter Egg: Loris karakterlerine 3 kez tıkla!                            ░░
    ░░                                                                                ░░
    ░░    📧 İş teklifi mi var? merhaba@devloris.com                                  ░░
    ░░    🌐 Portfolio: devloris.com                                                  ░░
    ░░                                                                                ░░
    ░░    🦥 "Loris gibi sabırlı, ama gerektiğinde çok hızlı!"                        ░░
    ░░                                                                                ░░
    ░░    P.S: Bu yorumu gördüysen, gerçek bir developer'sın! 🤓                      ░░
    ░░         Bize LinkedIn'den selam ver: linkedin.com/company/devloris             ░░
    ░░                                                                                ░░
    ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
-->

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="dz6p1iZaP1IhcdIcW8qQAkQZRVn6V80S6D9y1MKJ">
    
    <!-- 🚀 Performance Optimizations -->
    <meta name="color-scheme" content="light dark">
    <meta name="theme-color" content="#937F69" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#3D2E21" media="(prefers-color-scheme: dark)">
    
    <!-- Preconnect to external resources -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- 🎯 Critical Resource Hints -->
    <link rel="dns-prefetch" href="//api.groq.com">
    <link rel="dns-prefetch" href="//generativelanguage.googleapis.com">
    
    <!-- Preload only essential assets that will definitely be used -->
        
    <!-- 🦥 Accessibility Enhancements -->
    <meta name="format-detection" content="telephone=yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Devloris">
    
    <!-- Social Media & SEO -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Devloris">
    <meta property="og:locale" content="en">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@devloris">
    
    <!-- Progressive Web App -->
    <link rel="manifest" href="https://devloris.com/manifest.json">
    <link rel="apple-touch-icon" href="https://devloris.com/images/optimized/loris-coffee.png">
    
    <title>Devloris - Worldwide Software Development and Consulting Services</title>
    <meta name="description" content="Istanbul-based Devloris delivers software and consulting services to businesses worldwide. Web development, mobile applications, UI/UX design, and digital transformation solutions. Blending patience and excellence with Loris philosophy to become the sought-after software partner.">
    
    <!-- Modern fonts - Inter for primary text, JetBrains Mono for code -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="https://devloris.com/images/favicon.ico">
    
    <!-- Translations for JavaScript -->
    <script type="63af1a45ceaed83f990291b1-text/javascript">
        window.translations = {
            // Legal content
            'Gizlilik Politikası İçerik': "As Devloris Software and Consulting Services Trade Limited Company (\u0022Devloris\u0022, \u0022Company\u0022, \u0022we\u0022 or \u0022our\u0022), protecting the privacy of your personal information and ensuring your information security is our top priority. This privacy policy provides comprehensive information about how your personal data is collected, processed, stored and protected when using the devloris.com website.\n\n**1. COMPANY INFORMATION AND CONTACT**\n\nCompany Name: Devloris Software and Consulting Services Trade Limited Company\nMersis No: 294068133800001\nTax No: 2940681338 - Alemda\u011f Tax Office\nAddress: Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\nE-mail: info@devloris.com\nData Protection Officer: General Manager\/CTO\nWebsite: devloris.com\n\n**2. SCOPE AND APPLICATION AREA**\n\nThis privacy policy applies in the following cases:\n\u2022 Use of devloris.com website\n\u2022 Data sharing through contact forms\n\u2022 E-mail communication\n\u2022 Service requests and technical support\n\u2022 Project consultancy processes\n\n**3. PERSONAL DATA COLLECTED**\n\n**3.1 Automatically Collected Technical Data**\n\nMinimal technical data is processed through Cloudflare CDN service:\n\u2022 IP address (for security and DDoS protection only)\n\u2022 User-Agent string (browser information)\n\u2022 Referer information (which site you came from)\n\u2022 Visit time and date\n\u2022 Accessed page URLs\n\u2022 Request status codes (200, 404, etc.)\n\u2022 Data transfer amount\n\n**3.2 Voluntarily Shared Information**\n\nData collected when you fill out the contact form:\n\u2022 **Required Fields:**\n  - Name and surname\n  - E-mail address\n  - Project description\/message\n\n\u2022 **Optional Fields:**\n  - Phone number\n  - Company\/organization name\n  - Project budget (range)\n  - Project timeframe\n  - Service category of interest\n\n**3.3 Technical Cookies**\n\n| Cookie Name | Purpose | Duration | Data Type |\n|-------------|---------|----------|-----------|\n| locale | Language preference (tr\/en) | Session | Text |\n| theme | Theme mode (light\/dark) | Session | Text |\n| _token | CSRF security protection | Session | Hash |\n\n**4. DATA PROCESSING PURPOSES**\n\n**4.1 Primary Purposes**\n\u2022 Responding to your service requests\n\u2022 Preparing and presenting project proposals\n\u2022 Providing customer support services\n\u2022 Troubleshooting technical issues\n\u2022 Communicating during project development\n\n**4.2 Secondary Purposes**\n\u2022 Optimizing website performance\n\u2022 Detecting security vulnerabilities\n\u2022 Tracking system errors\n\u2022 Improving service quality\n\n**5. DATA RETENTION AND DESTRUCTION POLICY**\n\n**5.1 Form Data**\n\u2022 **Retention Policy:** Zero-retention\n\u2022 **Process:** Automatically deleted after email sending\n\u2022 **Memory Holding:** Only during response preparation time\n\u2022 **Archiving:** Not performed\n\n**5.2 Technical Logs**\n\u2022 **Cloudflare Logs:** 24 hours (automatic deletion)\n\u2022 **Error Logs:** 7 days (for debug purposes only)\n\u2022 **Access Logs:** Not kept\n\n**5.3 Cookie Data**\n\u2022 **Session Cookies:** Until browser is closed\n\u2022 **Persistent Cookies:** Not used\n\u2022 **Third-party Cookies:** None\n\n**6. DATA SECURITY MEASURES**\n\n**6.1 Technical Security**\n\u2022 **Encryption:** SSL\/TLS 1.3 (AES 256-bit)\n\u2022 **DDoS Protection:** Cloudflare Pro\n\u2022 **Firewall:** Web Application Firewall (WAF)\n\u2022 **Security Scanning:** Regular vulnerability assessment\n\n**6.2 Server Security**\n\u2022 **Hosting:** Hetzner Online GmbH (ISO 27001 certified)\n\u2022 **Location:** Falkenstein, Germany\n\u2022 **Data Center:** Tier 3+ standard\n\u2022 **Physical Security:** 24\/7 monitored access\n\n**7. INTERNATIONAL DATA TRANSFER**\n\n**7.1 Hosting Location**\n\u2022 **Server Location:** Falkenstein, Germany\n\u2022 **Legal Framework:** European Union GDPR\n\u2022 **Data Processing Agreement:** Signed with Hetzner\n\n**8. COOKIE POLICY**\n\n**8.1 Unused Technologies**\n\u2022 Google Analytics: \u274c\n\u2022 Facebook Pixel: \u274c\n\u2022 Advertising cookies: \u274c\n\u2022 Third-party tracking: \u274c\n\n**9. USER RIGHTS**\n\n\u2022 **Right of Access:** Getting a copy of your data\n\u2022 **Right to Rectification:** Correcting incorrect information\n\u2022 **Right to Erasure:** \u0022Right to be forgotten\u0022\n\u2022 **Right to Object:** Objecting to processing\n\u2022 **Portability:** Moving your data to another platform\n\n**10. APPLICATION PROCEDURES**\n\n\u2022 **E-mail:** info@devloris.com\n\u2022 **Subject:** \u0022Privacy Policy - [Right Type] Application\u0022\n\u2022 **Response Time:** 30 days\n\n**11. CONTACT INFORMATION**\n\n**General Contact:**\nE-mail: info@devloris.com\nAddress: Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\n\n**Data Protection Officer:**\nPosition: General Manager\/CTO\nE-mail: info@devloris.com\n\n**DOCUMENTATION INFORMATION**\n\n\u2022 **Version:** 2.0\n\u2022 **First Publication:** 01 January 2025\n\u2022 **Last Update:** 15 January 2025\n\u2022 **Approved by:** General Manager\/CTO\n\nThis privacy policy has been prepared in accordance with international standards and guarantees the highest level of protection for your personal data.",
            'KVKV İçerik': "As Devloris Software and Consulting Services Trade Limited Company, we attach great importance to the protection and processing of your personal data within the scope of the Personal Data Protection Law No. 6698 (KVKK) and the General Data Protection Regulation (GDPR). This information text has been prepared to inform you in detail about how your personal data is processed.\n\n**1. DATA CONTROLLER INFORMATION**\n\nCompany Name: Devloris Software and Consulting Services Trade Limited Company\nMersis Number: 294068133800001\nTax Number: 2940681338\nTax Office: Alemda\u011f Tax Office\nRegistry Number: [Registered Trade Registry Number]\nBusiness Address: Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL\nPostal Code: 34764\nPhone: [Please use e-mail for contact]\nE-mail: info@devloris.com\nData Protection Officer: General Manager\/CTO\n\n**2. METHOD OF COLLECTING PERSONAL DATA**\n\nOur company adopts the \u0022privacy by design\u0022 principle. There is no automatic data collection system on our website. Your personal data is collected only in the following cases and methods:\n\n**Voluntary Data Sharing (Contact Form):**\n\u2022 Identity Data: Name, surname\n\u2022 Contact Data: E-mail address, phone number (optional)\n\u2022 Professional Data: Company name (optional), project details\n\u2022 Communication Message: Project description and requests\n\n**Technical Data (Cloudflare CDN):**\n\u2022 IP address (for security purposes only, not logged)\n\u2022 Browser information (session-based)\n\u2022 Visit time (statistical)\n\n**3. PURPOSES AND LEGAL REASONS FOR PROCESSING PERSONAL DATA**\n\n**a) Legitimate Interest (KVKK Art. 5\/2-f):**\n\u2022 Ensuring website security\n\u2022 Monitoring system performance\n\u2022 Preventing cyber attacks\n\n**b) Explicit Consent (KVKK Art. 5\/2-a):**\n\u2022 Evaluating service requests\n\u2022 Preparing project proposals\n\u2022 Establishing customer communication\n\u2022 Providing technical support\n\n**c) Legal Obligation (KVKK Art. 5\/2-c):**\n\u2022 Issuing invoices as required by tax legislation\n\u2022 Keeping accounting records as required by commercial law\n\n**4. DATA RETENTION PERIODS AND DESTRUCTION POLICY**\n\n**Contact Form Data:**\n\u2022 Retention Period: 0 (zero) days\n\u2022 Process: Kept in memory only during response time\n\u2022 Destruction: Automatically deleted after email sending\n\u2022 Archiving: Not performed\n\n**Technical Logs:**\n\u2022 Cloudflare logs: 24 hours (automatic deletion)\n\u2022 Server logs: Not kept\n\u2022 Error logs: 7 days (for technical troubleshooting only)\n\n**Cookie Data:**\n\u2022 Browser session: Until browser is closed\n\u2022 Local storage: With browser cleanup\n\u2022 Persistent cookies: Not used\n\n**5. DATA SECURITY MEASURES**\n\n**Technical Security:**\n\u2022 SSL\/TLS encryption (AES 256-bit)\n\u2022 Mandatory HTTPS protocol\n\u2022 Firewall protection\n\u2022 DDoS attack protection (Cloudflare)\n\u2022 Regular security updates\n\n**Administrative Security:**\n\u2022 Access control and authorization\n\u2022 Personnel confidentiality agreements\n\u2022 Regular security audits\n\u2022 Incident response plan\n\n**6. DATA TRANSFER AND INTERNATIONAL TRANSFER**\n\n**Server Location:**\n\u2022 Hetzner Online GmbH\n\u2022 Location: Falkenstein, Germany\n\u2022 GDPR Compliance: Fully compliant\n\u2022 Adequacy Decision: EU Commission approved country\n\n**Data Transfer Guarantees:**\n\u2022 Standard Contractual Clauses (SCC)\n\u2022 GDPR Article 44-49 compliance\n\u2022 Data Processing Agreement (DPA)\n\u2022 Technical and Organizational Measures (TOMs)\n\n**7. COOKIE POLICY**\n\n**Used Cookies:**\n\n| Cookie Name | Purpose | Duration | Category | Legal Basis |\n|-------------|---------|----------|----------|-------------|\n| locale | Language preference | Session | Functional | Legitimate Interest |\n| theme | Theme mode | Session | Functional | Legitimate Interest |\n| _token | CSRF protection | Session | Security | Legal Obligation |\n\n**Unused Services:**\n\u2022 Google Analytics: Not used\n\u2022 Facebook Pixel: Not used\n\u2022 Advertising cookies: Not used\n\u2022 Third-party tracking: Not used\n\n**8. DATA SUBJECT RIGHTS (KVKK Art. 11)**\n\n**a) Right to Request Information:**\n\u2022 Learning whether your personal data is processed\n\u2022 Learning the purpose and method of processing\n\u2022 Learning data categories\n\n**b) Right of Access:**\n\u2022 Getting a copy of your processed data\n\u2022 Learning data processing history\n\n**c) Right to Rectification:**\n\u2022 Requesting correction of incorrect data\n\u2022 Requesting completion of incomplete data\n\n**d) Right to Erasure (Right to be Forgotten):**\n\u2022 Elimination of the purpose of processing\n\u2022 Processing contrary to KVKK\n\u2022 Timely deletion request\n\n**e) Right to Object:**\n\u2022 Objecting to processing based on legitimate interest\n\u2022 Objecting to marketing activities\n\u2022 Objecting to automated decision making\n\n**9. APPLICATION PROCEDURE AND EVALUATION**\n\n**Application Method:**\nE-mail: info@devloris.com\nSubject: \u0022KVKK Data Subject Application\u0022\n\n**Required for Application:**\n\u2022 Name, surname, signature\n\u2022 Turkish Republic ID number for Turkish citizens\n\u2022 Passport number or identity document for foreigners\n\u2022 Residence or business address for notification\n\u2022 Request subject\n\n**Evaluation Process:**\n\u2022 Identity verification: 5 business days\n\u2022 Application evaluation: 30 calendar days\n\u2022 Result notification: Written or electronic\n\u2022 Justification provided in case of rejection\n\n**10. DATA BREACH NOTIFICATION**\n\nIn case of personal data security breach:\n\u2022 Notification to Data Protection Board within 72 hours\n\u2022 Notification to data subjects in case of high risk\n\u2022 Type of breach, affected data categories and number of people\n\u2022 Measures taken and recommendations\n\n**11. RIGHT TO COMPLAIN TO DATA PROTECTION BOARD**\n\nIf you are not satisfied with the application result:\n\u2022 You have the right to complain to the Data Protection Board\n\u2022 Application address: https:\/\/www.kvkk.gov.tr\/\n\u2022 Complaint period: 60 days from the response date\n\n**12. CHANGES AND UPDATES**\n\n\u2022 This policy may be updated according to legal changes or operational needs\n\u2022 Important changes are announced on our website\n\u2022 The last update date is specified below\n\u2022 Updates come into effect from the publication date\n\n**13. CONTACT INFORMATION**\n\nData Controller: Devloris Software and Consulting Services Trade Limited Company\nData Protection Officer: General Manager\/CTO\nE-mail: info@devloris.com\nAddress: Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\n\n**Effective Date:** 01 January 2025\n**Last Update:** 15 January 2025\n**Version:** 1.0\n\nThis information text has been prepared in accordance with Article 10 of KVKK and is presented to you before the processing of your personal data.",
            'Kullanım Şartları İçerik': "These terms of use (\u0022Terms\u0022) govern the use of all services provided by Devloris Software and Consulting Services Trade Limited Company (\u0022Devloris\u0022, \u0022Company\u0022, \u0022we\u0022). By visiting the devloris.com website or using our services, you are deemed to have accepted these terms.\n\n**1. COMPANY INFORMATION AND DEFINITIONS**\n\n**1.1 Service Provider Information:**\n\u2022 **Company Name:** Devloris Software and Consulting Services Trade Limited Company\n\u2022 **Mersis Number:** 294068133800001\n\u2022 **Tax Number:** 2940681338\n\u2022 **Tax Office:** Alemda\u011f Tax Office\n\u2022 **Trade Registry No:** [Trade Registry Number]\n\u2022 **Business Address:** Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\n\u2022 **E-mail:** info@devloris.com\n\u2022 **Website:** devloris.com\n\u2022 **Authorized Persons:** General Manager\/CTO\n\n**1.2 Definitions:**\n\u2022 **\u0022Services\u0022:** Software development, consulting and related technical services\n\u2022 **\u0022User\/Customer\u0022:** Natural or legal persons using the services\n\u2022 **\u0022Platform\u0022:** devloris.com website and subdomains\n\u2022 **\u0022Content\u0022:** All text, visual, code and multimedia materials on the website\n\u2022 **\u0022Project\u0022:** All work within the scope of the contract signed with the customer\n\n**2. SERVICE SCOPE AND EXPERTISE AREAS**\n\n**2.1 Main Service Categories:**\n\n**A) Web \u0026 Mobile Development:**\n\u2022 Web applications with Laravel, React, Vue.js\n\u2022 iOS (Swift) and Android (Kotlin) native applications\n\u2022 React Native and Flutter cross-platform solutions\n\u2022 Progressive Web Apps (PWA) development\n\u2022 E-commerce platforms and SaaS applications\n\u2022 API development and microservice architecture\n\n**B) UI\/UX \u0026 Design:**\n\u2022 User experience (UX) research and design\n\u2022 User interface (UI) design and prototyping\n\u2022 Brand identity and visual design\n\u2022 Design system and style guide creation\n\u2022 User testing and optimization\n\n**C) Cloud \u0026 Consulting:**\n\u2022 AWS and Azure cloud migration\n\u2022 Kubernetes and Docker containerization\n\u2022 CI\/CD pipeline setup and DevOps\n\u2022 Enterprise system integrations\n\u2022 Digital transformation consulting\n\u2022 Technical architecture planning\n\n**3. WEBSITE USAGE CONDITIONS**\n\n**3.1 Permitted Use:**\n\u2022 Gathering information about our services\n\u2022 Filling contact forms and getting quotes\n\u2022 Reading and sharing blog posts\n\u2022 Reviewing portfolio projects\n\u2022 Sharing on social media with source attribution\n\u2022 Research for personal\/commercial purposes\n\n**3.2 Prohibited Activities:**\n\u2022 **Technical Attacks:**\n  - SQL injection, XSS, CSRF attacks\n  - DDoS or botnet attacks\n  - Vulnerability scanning and penetration testing\n  - Harmful code injection to the system\n\n\u2022 **Content Violations:**\n  - Unauthorized use of copyrighted content\n  - Unauthorized use of brand names and logos\n  - Commercial use of Loris characters\n  - Distorting and republishing content\n\n**4. INTELLECTUAL PROPERTY RIGHTS**\n\n**4.1 Devloris Intellectual Property:**\n\u2022 **Trademark Rights:**\n  - \u0022Devloris\u0022 brand name and logo\n  - Loris character family (Development, Mobile, Coffee, Design Loris)\n  - \u0022Slow but Steady\u0022 motto\n  - Corporate identity design\n\n\u2022 **Copyrights:**\n  - Website source codes\n  - Design and interface elements\n  - Blog posts and technical articles\n  - Loris character illustrations\n\n**5. PROJECT CONTRACTS AND DELIVERY CONDITIONS**\n\n**5.1 Quote and Contract Process:**\n\u2022 **Preliminary Assessment:** 2-5 business days\n\u2022 **Technical Analysis:** 1-2 weeks (for complex projects)\n\u2022 **Price Quote Validity:** 30 calendar days\n\u2022 **Contract Signature:** Electronic signature accepted\n\u2022 **Advance Payment:** 30-50% of total amount\n\n**5.2 Delivery and Acceptance Criteria:**\n\u2022 **UAT (User Acceptance Testing):** 1-2 weeks duration\n\u2022 **Bug fix guarantee:** 6 months after delivery\n\u2022 **Source code delivery:** After full payment\n\u2022 **Documentation:** Technical and user manuals\n\u2022 **Training:** Up to 4 hours free training\n\n**6. PAYMENT CONDITIONS**\n\n**6.1 Payment Plans:**\n\u2022 **Small Projects (\u2264 \u20ba25,000):** 50% advance, 50% delivery\n\u2022 **Medium Projects (\u20ba25,000-100,000):** 30% advance, 40% milestone, 30% delivery\n\u2022 **Large Projects (\u2265 \u20ba100,000):** Custom payment plan\n\n**6.2 Payment Methods:**\n\u2022 Bank transfer (preferred)\n\u2022 Credit card (online payment)\n\u2022 Check (60-day term accepted)\n\u2022 Cryptocurrency (Bitcoin, Ethereum - upon request)\n\n**7. WARRANTY AND SUPPORT SERVICES**\n\n**7.1 Software Warranty Coverage:**\n\u2022 **Bug Fix Warranty:** 6 months free\n\u2022 **Security Vulnerability Fix:** 12 months critical security\n\u2022 **Minor Update:** First 3 months included\n\u2022 **Technical Support:** 5x8 support via email\n\n**8. LIABILITY LIMITATIONS**\n\n**8.1 Devloris Responsibility:**\n\u2022 Obligation to provide quality service\n\u2022 Timely delivery (except force majeure)\n\u2022 Ensuring data privacy and security\n\u2022 Working to professional standards\n\n**8.2 Liability Limitations:**\n\u2022 **Maximum compensation:** Cannot exceed total project amount\n\u2022 **Indirect damages:** (loss of profit, reputation loss, etc.) not included\n\u2022 **Third party damages:** Customer\u0027s responsibility\n\u2022 **Force majeure:** Natural disasters, war, pandemic, etc.\n\n**9. CONTRACT TERMINATION**\n\n**9.1 Termination by Customer:**\n\u2022 **Notification period:** 15 calendar days in advance\n\u2022 **Completed work fee:** Paid in full\n\u2022 **Work-in-progress:** Pro-rata calculation\n\u2022 **Copyrights:** Transferred in proportion to paid portion\n\n**9.2 Termination by Devloris:**\n\u2022 **Payment delay:** Delays exceeding 30 days\n\u2022 **Contract violation:** Serious violation cases\n\u2022 **Customer cooperation deficiency:** Hindering project progress\n\n**10. DISPUTE RESOLUTION**\n\n**10.1 Alternative Resolution Methods:**\n\u2022 **Amicable settlement:** First 30 days negotiation\n\u2022 **Mediation:** Istanbul Bar Association mediators\n\u2022 **Arbitration:** ICC Arbitration Rules (international projects)\n\n**10.2 Jurisdiction:**\n\u2022 **Turkish customers:** Istanbul Courts and Enforcement Offices\n\u2022 **International customers:** Istanbul courts (Turkish law)\n\u2022 **Consumer transactions:** Customer residence courts\n\n**11. CONTACT AND NOTIFICATIONS**\n\n**General Contact:**\n\u2022 **E-mail:** info@devloris.com\n\u2022 **Address:** Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\n\n**Special Subjects:**\n\u2022 **Legal notifications:** info@devloris.com (Subject: \u0022Legal Notice\u0022)\n\u2022 **KVKK applications:** info@devloris.com (Subject: \u0022KVKK Application\u0022)\n\u2022 **Complaints and suggestions:** info@devloris.com (Subject: \u0022Feedback\u0022)\n\n---\n\n**DOCUMENTATION INFORMATION**\n\n\u2022 **Version:** 3.0\n\u2022 **First Publication Date:** 01 January 2025\n\u2022 **Last Update:** 15 January 2025\n\u2022 **Next Review:** 15 July 2025\n\u2022 **Prepared by:** General Manager\/CTO\n\u2022 **Legal Approval:** Completed\n\n**Effective:** These terms of use come into effect the moment you visit our website or use our services.\n\n**Note:** These terms have been prepared in Turkish, and in case of translation differences, the Turkish text shall prevail.",
            'Çerez Politikası İçerik': "Devloris website implements a minimal cookie usage policy. Only technical cookies necessary for site functionality are used.\n\n**USED COOKIES**\n\n**1. Essential Technical Cookies:**\n\u2022 **Theme Preference:** Remembers your light\/dark mode selection\n\u2022 **Language Preference:** Stores your Turkish\/English choice\n\u2022 **Session Security:** Required for form security\n\n**2. Analytics Cookies:**\nWe currently do not use Google Analytics or similar third-party analytics tools. Site traffic is tracked through Cloudflare.\n\n**COOKIE MANAGEMENT**\n\n\u2022 Cookies are active during browser session\n\u2022 Automatically deleted when browser is closed\n\u2022 You can manually delete them from browser settings\n\u2022 Rejecting cookies does not affect site functionality\n\n**COOKIE DETAILS**\n\n| Cookie Name | Purpose | Duration | Type |\n|-------------|---------|----------|------|\n| theme | Theme preference | Session | Technical |\n| locale | Language preference | Session | Technical |\n| _token | CSRF protection | Session | Security |\n\n**THIRD-PARTY COOKIES**\n\nNo third-party cookies are used on our website.\n\n**CHANGES**\n\nWhen our cookie policy is updated, it will be announced on our website.\n\n,    Last Update: January 2025",
            'Privacy Policy Content': "As Devloris Software and Consulting Services Trade Limited Company (\u0022Devloris\u0022, \u0022Company\u0022, \u0022we\u0022 or \u0022our\u0022), protecting the privacy of your personal information and ensuring your information security is our top priority. This privacy policy provides comprehensive information about how your personal data is collected, processed, stored and protected when using the devloris.com website.\n\n**1. COMPANY INFORMATION AND CONTACT**\n\nCompany Name: Devloris Software and Consulting Services Trade Limited Company\nMersis No: 294068133800001\nTax No: 2940681338 - Alemda\u011f Tax Office\nAddress: Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\nE-mail: info@devloris.com\nData Protection Officer: General Manager\/CTO\nWebsite: devloris.com\n\n**2. SCOPE AND APPLICATION AREA**\n\nThis privacy policy applies in the following cases:\n\u2022 Use of devloris.com website\n\u2022 Data sharing through contact forms\n\u2022 E-mail communication\n\u2022 Service requests and technical support\n\u2022 Project consultancy processes\n\n**3. PERSONAL DATA COLLECTED**\n\n**3.1 Automatically Collected Technical Data**\n\nMinimal technical data is processed through Cloudflare CDN service:\n\u2022 IP address (for security and DDoS protection only)\n\u2022 User-Agent string (browser information)\n\u2022 Referer information (which site you came from)\n\u2022 Visit time and date\n\u2022 Accessed page URLs\n\u2022 Request status codes (200, 404, etc.)\n\u2022 Data transfer amount\n\n**3.2 Voluntarily Shared Information**\n\nData collected when you fill out the contact form:\n\u2022 **Required Fields:**\n  - Name and surname\n  - E-mail address\n  - Project description\/message\n\n\u2022 **Optional Fields:**\n  - Phone number\n  - Company\/organization name\n  - Project budget (range)\n  - Project timeframe\n  - Service category of interest\n\n**3.3 Technical Cookies**\n\n| Cookie Name | Purpose | Duration | Data Type |\n|-------------|---------|----------|-----------|\n| locale | Language preference (tr\/en) | Session | Text |\n| theme | Theme mode (light\/dark) | Session | Text |\n| _token | CSRF security protection | Session | Hash |\n\n**4. DATA PROCESSING PURPOSES**\n\n**4.1 Primary Purposes**\n\u2022 Responding to your service requests\n\u2022 Preparing and presenting project proposals\n\u2022 Providing customer support services\n\u2022 Troubleshooting technical issues\n\u2022 Communicating during project development\n\n**4.2 Secondary Purposes**\n\u2022 Optimizing website performance\n\u2022 Detecting security vulnerabilities\n\u2022 Tracking system errors\n\u2022 Improving service quality\n\n**5. DATA RETENTION AND DESTRUCTION POLICY**\n\n**5.1 Form Data**\n\u2022 **Retention Policy:** Zero-retention\n\u2022 **Process:** Automatically deleted after email sending\n\u2022 **Memory Holding:** Only during response preparation time\n\u2022 **Archiving:** Not performed\n\n**5.2 Technical Logs**\n\u2022 **Cloudflare Logs:** 24 hours (automatic deletion)\n\u2022 **Error Logs:** 7 days (for debug purposes only)\n\u2022 **Access Logs:** Not kept\n\n**5.3 Cookie Data**\n\u2022 **Session Cookies:** Until browser is closed\n\u2022 **Persistent Cookies:** Not used\n\u2022 **Third-party Cookies:** None\n\n**6. DATA SECURITY MEASURES**\n\n**6.1 Technical Security**\n\u2022 **Encryption:** SSL\/TLS 1.3 (AES 256-bit)\n\u2022 **DDoS Protection:** Cloudflare Pro\n\u2022 **Firewall:** Web Application Firewall (WAF)\n\u2022 **Security Scanning:** Regular vulnerability assessment\n\n**6.2 Server Security**\n\u2022 **Hosting:** Hetzner Online GmbH (ISO 27001 certified)\n\u2022 **Location:** Falkenstein, Germany\n\u2022 **Data Center:** Tier 3+ standard\n\u2022 **Physical Security:** 24\/7 monitored access\n\n**7. INTERNATIONAL DATA TRANSFER**\n\n**7.1 Hosting Location**\n\u2022 **Server Location:** Falkenstein, Germany\n\u2022 **Legal Framework:** European Union GDPR\n\u2022 **Data Processing Agreement:** Signed with Hetzner\n\n**8. COOKIE POLICY**\n\n**8.1 Unused Technologies**\n\u2022 Google Analytics: \u274c\n\u2022 Facebook Pixel: \u274c\n\u2022 Advertising cookies: \u274c\n\u2022 Third-party tracking: \u274c\n\n**9. USER RIGHTS**\n\n\u2022 **Right of Access:** Getting a copy of your data\n\u2022 **Right to Rectification:** Correcting incorrect information\n\u2022 **Right to Erasure:** \u0022Right to be forgotten\u0022\n\u2022 **Right to Object:** Objecting to processing\n\u2022 **Portability:** Moving your data to another platform\n\n**10. APPLICATION PROCEDURES**\n\n\u2022 **E-mail:** info@devloris.com\n\u2022 **Subject:** \u0022Privacy Policy - [Right Type] Application\u0022\n\u2022 **Response Time:** 30 days\n\n**11. CONTACT INFORMATION**\n\n**General Contact:**\nE-mail: info@devloris.com\nAddress: Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\n\n**Data Protection Officer:**\nPosition: General Manager\/CTO\nE-mail: info@devloris.com\n\n**DOCUMENTATION INFORMATION**\n\n\u2022 **Version:** 2.0\n\u2022 **First Publication:** 01 January 2025\n\u2022 **Last Update:** 15 January 2025\n\u2022 **Approved by:** General Manager\/CTO\n\nThis privacy policy has been prepared in accordance with international standards and guarantees the highest level of protection for your personal data.",
            'KVKK Content': "As Devloris Software and Consulting Services Trade Limited Company, we attach great importance to the protection and processing of your personal data within the scope of the Personal Data Protection Law No. 6698 (KVKK) and the General Data Protection Regulation (GDPR). This information text has been prepared to inform you in detail about how your personal data is processed.\n\n**1. DATA CONTROLLER INFORMATION**\n\nCompany Name: Devloris Software and Consulting Services Trade Limited Company\nMersis Number: 294068133800001\nTax Number: 2940681338\nTax Office: Alemda\u011f Tax Office\nRegistry Number: [Registered Trade Registry Number]\nBusiness Address: Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL\nPostal Code: 34764\nPhone: [Please use e-mail for contact]\nE-mail: info@devloris.com\nData Protection Officer: General Manager\/CTO\n\n**2. METHOD OF COLLECTING PERSONAL DATA**\n\nOur company adopts the \u0022privacy by design\u0022 principle. There is no automatic data collection system on our website. Your personal data is collected only in the following cases and methods:\n\n**Voluntary Data Sharing (Contact Form):**\n\u2022 Identity Data: Name, surname\n\u2022 Contact Data: E-mail address, phone number (optional)\n\u2022 Professional Data: Company name (optional), project details\n\u2022 Communication Message: Project description and requests\n\n**Technical Data (Cloudflare CDN):**\n\u2022 IP address (for security purposes only, not logged)\n\u2022 Browser information (session-based)\n\u2022 Visit time (statistical)\n\n**3. PURPOSES AND LEGAL REASONS FOR PROCESSING PERSONAL DATA**\n\n**a) Legitimate Interest (KVKK Art. 5\/2-f):**\n\u2022 Ensuring website security\n\u2022 Monitoring system performance\n\u2022 Preventing cyber attacks\n\n**b) Explicit Consent (KVKK Art. 5\/2-a):**\n\u2022 Evaluating service requests\n\u2022 Preparing project proposals\n\u2022 Establishing customer communication\n\u2022 Providing technical support\n\n**c) Legal Obligation (KVKK Art. 5\/2-c):**\n\u2022 Issuing invoices as required by tax legislation\n\u2022 Keeping accounting records as required by commercial law\n\n**4. DATA RETENTION PERIODS AND DESTRUCTION POLICY**\n\n**Contact Form Data:**\n\u2022 Retention Period: 0 (zero) days\n\u2022 Process: Kept in memory only during response time\n\u2022 Destruction: Automatically deleted after email sending\n\u2022 Archiving: Not performed\n\n**Technical Logs:**\n\u2022 Cloudflare logs: 24 hours (automatic deletion)\n\u2022 Server logs: Not kept\n\u2022 Error logs: 7 days (for technical troubleshooting only)\n\n**Cookie Data:**\n\u2022 Browser session: Until browser is closed\n\u2022 Local storage: With browser cleanup\n\u2022 Persistent cookies: Not used\n\n**5. DATA SECURITY MEASURES**\n\n**Technical Security:**\n\u2022 SSL\/TLS encryption (AES 256-bit)\n\u2022 Mandatory HTTPS protocol\n\u2022 Firewall protection\n\u2022 DDoS attack protection (Cloudflare)\n\u2022 Regular security updates\n\n**Administrative Security:**\n\u2022 Access control and authorization\n\u2022 Personnel confidentiality agreements\n\u2022 Regular security audits\n\u2022 Incident response plan\n\n**6. DATA TRANSFER AND INTERNATIONAL TRANSFER**\n\n**Server Location:**\n\u2022 Hetzner Online GmbH\n\u2022 Location: Falkenstein, Germany\n\u2022 GDPR Compliance: Fully compliant\n\u2022 Adequacy Decision: EU Commission approved country\n\n**Data Transfer Guarantees:**\n\u2022 Standard Contractual Clauses (SCC)\n\u2022 GDPR Article 44-49 compliance\n\u2022 Data Processing Agreement (DPA)\n\u2022 Technical and Organizational Measures (TOMs)\n\n**7. COOKIE POLICY**\n\n**Used Cookies:**\n\n| Cookie Name | Purpose | Duration | Category | Legal Basis |\n|-------------|---------|----------|----------|-------------|\n| locale | Language preference | Session | Functional | Legitimate Interest |\n| theme | Theme mode | Session | Functional | Legitimate Interest |\n| _token | CSRF protection | Session | Security | Legal Obligation |\n\n**Unused Services:**\n\u2022 Google Analytics: Not used\n\u2022 Facebook Pixel: Not used\n\u2022 Advertising cookies: Not used\n\u2022 Third-party tracking: Not used\n\n**8. DATA SUBJECT RIGHTS (KVKK Art. 11)**\n\n**a) Right to Request Information:**\n\u2022 Learning whether your personal data is processed\n\u2022 Learning the purpose and method of processing\n\u2022 Learning data categories\n\n**b) Right of Access:**\n\u2022 Getting a copy of your processed data\n\u2022 Learning data processing history\n\n**c) Right to Rectification:**\n\u2022 Requesting correction of incorrect data\n\u2022 Requesting completion of incomplete data\n\n**d) Right to Erasure (Right to be Forgotten):**\n\u2022 Elimination of the purpose of processing\n\u2022 Processing contrary to KVKK\n\u2022 Timely deletion request\n\n**e) Right to Object:**\n\u2022 Objecting to processing based on legitimate interest\n\u2022 Objecting to marketing activities\n\u2022 Objecting to automated decision making\n\n**9. APPLICATION PROCEDURE AND EVALUATION**\n\n**Application Method:**\nE-mail: info@devloris.com\nSubject: \u0022KVKK Data Subject Application\u0022\n\n**Required for Application:**\n\u2022 Name, surname, signature\n\u2022 Turkish Republic ID number for Turkish citizens\n\u2022 Passport number or identity document for foreigners\n\u2022 Residence or business address for notification\n\u2022 Request subject\n\n**Evaluation Process:**\n\u2022 Identity verification: 5 business days\n\u2022 Application evaluation: 30 calendar days\n\u2022 Result notification: Written or electronic\n\u2022 Justification provided in case of rejection\n\n**10. DATA BREACH NOTIFICATION**\n\nIn case of personal data security breach:\n\u2022 Notification to Data Protection Board within 72 hours\n\u2022 Notification to data subjects in case of high risk\n\u2022 Type of breach, affected data categories and number of people\n\u2022 Measures taken and recommendations\n\n**11. RIGHT TO COMPLAIN TO DATA PROTECTION BOARD**\n\nIf you are not satisfied with the application result:\n\u2022 You have the right to complain to the Data Protection Board\n\u2022 Application address: https:\/\/www.kvkk.gov.tr\/\n\u2022 Complaint period: 60 days from the response date\n\n**12. CHANGES AND UPDATES**\n\n\u2022 This policy may be updated according to legal changes or operational needs\n\u2022 Important changes are announced on our website\n\u2022 The last update date is specified below\n\u2022 Updates come into effect from the publication date\n\n**13. CONTACT INFORMATION**\n\nData Controller: Devloris Software and Consulting Services Trade Limited Company\nData Protection Officer: General Manager\/CTO\nE-mail: info@devloris.com\nAddress: Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\n\n**Effective Date:** 01 January 2025\n**Last Update:** 15 January 2025\n**Version:** 1.0\n\nThis information text has been prepared in accordance with Article 10 of KVKK and is presented to you before the processing of your personal data.",
            'Terms of Service Content': "These terms of use (\u0022Terms\u0022) govern the use of all services provided by Devloris Software and Consulting Services Trade Limited Company (\u0022Devloris\u0022, \u0022Company\u0022, \u0022we\u0022). By visiting the devloris.com website or using our services, you are deemed to have accepted these terms.\n\n**1. COMPANY INFORMATION AND DEFINITIONS**\n\n**1.1 Service Provider Information:**\n\u2022 **Company Name:** Devloris Software and Consulting Services Trade Limited Company\n\u2022 **Mersis Number:** 294068133800001\n\u2022 **Tax Number:** 2940681338\n\u2022 **Tax Office:** Alemda\u011f Tax Office\n\u2022 **Trade Registry No:** [Trade Registry Number]\n\u2022 **Business Address:** Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\n\u2022 **E-mail:** info@devloris.com\n\u2022 **Website:** devloris.com\n\u2022 **Authorized Persons:** General Manager\/CTO\n\n**1.2 Definitions:**\n\u2022 **\u0022Services\u0022:** Software development, consulting and related technical services\n\u2022 **\u0022User\/Customer\u0022:** Natural or legal persons using the services\n\u2022 **\u0022Platform\u0022:** devloris.com website and subdomains\n\u2022 **\u0022Content\u0022:** All text, visual, code and multimedia materials on the website\n\u2022 **\u0022Project\u0022:** All work within the scope of the contract signed with the customer\n\n**2. SERVICE SCOPE AND EXPERTISE AREAS**\n\n**2.1 Main Service Categories:**\n\n**A) Web \u0026 Mobile Development:**\n\u2022 Web applications with Laravel, React, Vue.js\n\u2022 iOS (Swift) and Android (Kotlin) native applications\n\u2022 React Native and Flutter cross-platform solutions\n\u2022 Progressive Web Apps (PWA) development\n\u2022 E-commerce platforms and SaaS applications\n\u2022 API development and microservice architecture\n\n**B) UI\/UX \u0026 Design:**\n\u2022 User experience (UX) research and design\n\u2022 User interface (UI) design and prototyping\n\u2022 Brand identity and visual design\n\u2022 Design system and style guide creation\n\u2022 User testing and optimization\n\n**C) Cloud \u0026 Consulting:**\n\u2022 AWS and Azure cloud migration\n\u2022 Kubernetes and Docker containerization\n\u2022 CI\/CD pipeline setup and DevOps\n\u2022 Enterprise system integrations\n\u2022 Digital transformation consulting\n\u2022 Technical architecture planning\n\n**3. WEBSITE USAGE CONDITIONS**\n\n**3.1 Permitted Use:**\n\u2022 Gathering information about our services\n\u2022 Filling contact forms and getting quotes\n\u2022 Reading and sharing blog posts\n\u2022 Reviewing portfolio projects\n\u2022 Sharing on social media with source attribution\n\u2022 Research for personal\/commercial purposes\n\n**3.2 Prohibited Activities:**\n\u2022 **Technical Attacks:**\n  - SQL injection, XSS, CSRF attacks\n  - DDoS or botnet attacks\n  - Vulnerability scanning and penetration testing\n  - Harmful code injection to the system\n\n\u2022 **Content Violations:**\n  - Unauthorized use of copyrighted content\n  - Unauthorized use of brand names and logos\n  - Commercial use of Loris characters\n  - Distorting and republishing content\n\n**4. INTELLECTUAL PROPERTY RIGHTS**\n\n**4.1 Devloris Intellectual Property:**\n\u2022 **Trademark Rights:**\n  - \u0022Devloris\u0022 brand name and logo\n  - Loris character family (Development, Mobile, Coffee, Design Loris)\n  - \u0022Slow but Steady\u0022 motto\n  - Corporate identity design\n\n\u2022 **Copyrights:**\n  - Website source codes\n  - Design and interface elements\n  - Blog posts and technical articles\n  - Loris character illustrations\n\n**5. PROJECT CONTRACTS AND DELIVERY CONDITIONS**\n\n**5.1 Quote and Contract Process:**\n\u2022 **Preliminary Assessment:** 2-5 business days\n\u2022 **Technical Analysis:** 1-2 weeks (for complex projects)\n\u2022 **Price Quote Validity:** 30 calendar days\n\u2022 **Contract Signature:** Electronic signature accepted\n\u2022 **Advance Payment:** 30-50% of total amount\n\n**5.2 Delivery and Acceptance Criteria:**\n\u2022 **UAT (User Acceptance Testing):** 1-2 weeks duration\n\u2022 **Bug fix guarantee:** 6 months after delivery\n\u2022 **Source code delivery:** After full payment\n\u2022 **Documentation:** Technical and user manuals\n\u2022 **Training:** Up to 4 hours free training\n\n**6. PAYMENT CONDITIONS**\n\n**6.1 Payment Plans:**\n\u2022 **Small Projects (\u2264 \u20ba25,000):** 50% advance, 50% delivery\n\u2022 **Medium Projects (\u20ba25,000-100,000):** 30% advance, 40% milestone, 30% delivery\n\u2022 **Large Projects (\u2265 \u20ba100,000):** Custom payment plan\n\n**6.2 Payment Methods:**\n\u2022 Bank transfer (preferred)\n\u2022 Credit card (online payment)\n\u2022 Check (60-day term accepted)\n\u2022 Cryptocurrency (Bitcoin, Ethereum - upon request)\n\n**7. WARRANTY AND SUPPORT SERVICES**\n\n**7.1 Software Warranty Coverage:**\n\u2022 **Bug Fix Warranty:** 6 months free\n\u2022 **Security Vulnerability Fix:** 12 months critical security\n\u2022 **Minor Update:** First 3 months included\n\u2022 **Technical Support:** 5x8 support via email\n\n**8. LIABILITY LIMITATIONS**\n\n**8.1 Devloris Responsibility:**\n\u2022 Obligation to provide quality service\n\u2022 Timely delivery (except force majeure)\n\u2022 Ensuring data privacy and security\n\u2022 Working to professional standards\n\n**8.2 Liability Limitations:**\n\u2022 **Maximum compensation:** Cannot exceed total project amount\n\u2022 **Indirect damages:** (loss of profit, reputation loss, etc.) not included\n\u2022 **Third party damages:** Customer\u0027s responsibility\n\u2022 **Force majeure:** Natural disasters, war, pandemic, etc.\n\n**9. CONTRACT TERMINATION**\n\n**9.1 Termination by Customer:**\n\u2022 **Notification period:** 15 calendar days in advance\n\u2022 **Completed work fee:** Paid in full\n\u2022 **Work-in-progress:** Pro-rata calculation\n\u2022 **Copyrights:** Transferred in proportion to paid portion\n\n**9.2 Termination by Devloris:**\n\u2022 **Payment delay:** Delays exceeding 30 days\n\u2022 **Contract violation:** Serious violation cases\n\u2022 **Customer cooperation deficiency:** Hindering project progress\n\n**10. DISPUTE RESOLUTION**\n\n**10.1 Alternative Resolution Methods:**\n\u2022 **Amicable settlement:** First 30 days negotiation\n\u2022 **Mediation:** Istanbul Bar Association mediators\n\u2022 **Arbitration:** ICC Arbitration Rules (international projects)\n\n**10.2 Jurisdiction:**\n\u2022 **Turkish customers:** Istanbul Courts and Enforcement Offices\n\u2022 **International customers:** Istanbul courts (Turkish law)\n\u2022 **Consumer transactions:** Customer residence courts\n\n**11. CONTACT AND NOTIFICATIONS**\n\n**General Contact:**\n\u2022 **E-mail:** info@devloris.com\n\u2022 **Address:** Fatih Sultan Mehmet Mah. Balkan Cad. No: 62A-572D \u00dcmraniye\/ISTANBUL 34764\n\n**Special Subjects:**\n\u2022 **Legal notifications:** info@devloris.com (Subject: \u0022Legal Notice\u0022)\n\u2022 **KVKK applications:** info@devloris.com (Subject: \u0022KVKK Application\u0022)\n\u2022 **Complaints and suggestions:** info@devloris.com (Subject: \u0022Feedback\u0022)\n\n---\n\n**DOCUMENTATION INFORMATION**\n\n\u2022 **Version:** 3.0\n\u2022 **First Publication Date:** 01 January 2025\n\u2022 **Last Update:** 15 January 2025\n\u2022 **Next Review:** 15 July 2025\n\u2022 **Prepared by:** General Manager\/CTO\n\u2022 **Legal Approval:** Completed\n\n**Effective:** These terms of use come into effect the moment you visit our website or use our services.\n\n**Note:** These terms have been prepared in Turkish, and in case of translation differences, the Turkish text shall prevail.",
            'Cookie Policy Content': "Devloris website implements a minimal cookie usage policy. Only technical cookies necessary for site functionality are used.\n\n**USED COOKIES**\n\n**1. Essential Technical Cookies:**\n\u2022 **Theme Preference:** Remembers your light\/dark mode selection\n\u2022 **Language Preference:** Stores your Turkish\/English choice\n\u2022 **Session Security:** Required for form security\n\n**2. Analytics Cookies:**\nWe currently do not use Google Analytics or similar third-party analytics tools. Site traffic is tracked through Cloudflare.\n\n**COOKIE MANAGEMENT**\n\n\u2022 Cookies are active during browser session\n\u2022 Automatically deleted when browser is closed\n\u2022 You can manually delete them from browser settings\n\u2022 Rejecting cookies does not affect site functionality\n\n**COOKIE DETAILS**\n\n| Cookie Name | Purpose | Duration | Type |\n|-------------|---------|----------|------|\n| theme | Theme preference | Session | Technical |\n| locale | Language preference | Session | Technical |\n| _token | CSRF protection | Session | Security |\n\n**THIRD-PARTY COOKIES**\n\nNo third-party cookies are used on our website.\n\n**CHANGES**\n\nWhen our cookie policy is updated, it will be announced on our website.\n\n,    Last Update: January 2025",
            
            // Loris Character System
            'Another Story': "Another Story",
            'Close': "Close",
            'Current Message': "Current Message",
            'Character Story': "Character Story",
            'Personality Traits': "Personality Traits",
            'Interactions': "Interactions",
            'Evolution Level': "Evolution Level",
            'Max Trait': "Max Trait",
            'Mood': "Mood",
            'Level': "Level",
            '3 kez tıklayın ve hikayemi keşfedin!': "Click 3 times and discover my story!",
            
            // Personality Traits
            'focus': "focus",
            'energy': "energy",
            'creativity': "creativity",
            'patience': "patience",
            'technical': "technical",
            
            // Moods
            'night-coding': "night-coding",
            'productive': "productive",
            'morning-fresh': "morning-fresh",
            'evening-creative': "evening-creative",
            'contemplative': "contemplative",
            'energetic': "energetic",
            'sleepy': "sleepy",
            'default': "default",
            
            // Evolution Levels - Development Loris
            'Kod Meraklısı': "Code Curious",
            'Junior Developer': "Junior Developer",
            'Mid-Level Coder': "Mid-Level Coder",
            'Senior Developer': "Senior Developer",
            'Tech Lead Loris': "Tech Lead Loris",
            'Coding Sensei': "Coding Sensei",
            
            // Evolution Levels - Mobile Loris
            'Screen Explorer': "Screen Explorer",
            'Responsive Learner': "Responsive Learner",
            'UX Designer': "UX Designer",
            'Mobile Architect': "Mobile Architect",
            'Cross-Platform Master': "Cross-Platform Master",
            'Mobile Sensei': "Mobile Sensei",
            
            // Evolution Levels - Design Loris
            'Beauty Seeker': "Beauty Seeker",
            'Visual Learner': "Visual Learner",
            'UX Researcher': "UX Researcher",
            'Design Thinker': "Design Thinker",
            'Brand Strategist': "Brand Strategist",
            'Design Sensei': "Design Sensei",
            
            // Evolution Levels - Coffee Loris
            'Energy Newbie': "Energy Newbie",
            'Caffeine Explorer': "Caffeine Explorer",
            'Team Motivator': "Team Motivator",
            'Productivity Coach': "Productivity Coach",
            'Innovation Driver': "Innovation Driver",
            'Energy Sensei': "Energy Sensei",
            
            // Evolution Levels - E-commerce Loris
            'Commerce Curious': "Commerce Curious",
            'Sales Optimizer': "Sales Optimizer",
            'Customer Journey Expert': "Customer Journey Expert",
            'Business Analyst': "Business Analyst",
            'Commerce Strategist': "Commerce Strategist",
            'E-commerce Sensei': "E-commerce Sensei",
            
            // Evolution Levels - Master Loris
            'Awakening Legend': "Awakening Legend",
            'Code Whisperer': "Code Whisperer",
            'Digital Sage': "Digital Sage",
            'Tech Oracle': "Tech Oracle",
            'DevLoris Incarnate': "DevLoris Incarnate",
            'Eternal Code Master': "Eternal Code Master",
            'Legendary DevLoris': "Legendary DevLoris"        };
    </script>
    
    <!-- Vite Assets -->
    <link rel="preload" as="style" href="https://devloris.com/build/assets/css/app-DlwV913D.css" /><link rel="modulepreload" href="https://devloris.com/build/assets/js/app-B_2xXBuU.js" /><link rel="modulepreload" href="https://devloris.com/build/assets/js/vendor-DJjOBum0.js" /><link rel="modulepreload" href="https://devloris.com/build/assets/js/loris-core-D8DVwiB6.js" /><link rel="stylesheet" href="https://devloris.com/build/assets/css/app-DlwV913D.css" data-navigate-track="reload" /><script type="63af1a45ceaed83f990291b1-module" src="https://devloris.com/build/assets/js/app-B_2xXBuU.js" data-navigate-track="reload"></script>    
    <!-- Livewire -->
    <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}[wire\:cloak] {display: none !important;}</style>
    
    <!-- Custom CSS Variables -->
    <style>
        :root {
            --brand-primary: #0A0A0A;
            --brand-secondary: #1A1A1A;
            --brand-accent: #3B82F6;
            --brand-accent-light: #60A5FA;
            --text-primary: #0A0A0A;
            --text-secondary: #6B7280;
            --text-muted: #9CA3AF;
            --bg-primary: #FFFFFF;
            --bg-secondary: #F9FAFB;
            --bg-tertiary: #F3F4F6;
            --border-light: #E5E7EB;
            --border-medium: #D1D5DB;
            
            /* Dark mode variables */
            --dark-bg-primary: #0A0A0A;
            --dark-bg-secondary: #1A1A1A;
            --dark-bg-tertiary: #2A2A2A;
            --dark-text-primary: #FFFFFF;
            --dark-text-secondary: #D1D5DB;
            --dark-text-muted: #9CA3AF;
            --dark-border-light: #374151;
            --dark-border-medium: #4B5563;
        }
        
        .font-inter { font-family: 'Inter', sans-serif; }
        .font-mono { font-family: 'JetBrains Mono', monospace; }
        
        /* Smooth scrolling */
        html { scroll-behavior: smooth; }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-tertiary); }
        ::-webkit-scrollbar-thumb { 
            background: var(--border-medium); 
            border-radius: 4px; 
        }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
        
        /* Animation classes */
        .animate-fade-in { animation: fadeIn 0.6s ease-out; }
        .animate-slide-up { animation: slideUp 0.8s ease-out; }
        .animate-slide-down { animation: slideDown 0.8s ease-out; }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { 
                opacity: 0; 
                transform: translateY(30px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        @keyframes slideDown {
            from { 
                opacity: 0; 
                transform: translateY(-30px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        /* Gradient background */
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        /* Glass effect */
        .glass {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        /* Premium button styles */
        .btn-premium {
            background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-light) 100%);
            transition: all 0.3s ease;
        }
        
        .btn-premium:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
        }
        
        /* Dark Mode Animations */
        @keyframes loris-shake {
            0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
            25% { transform: translate(-50%, -50%) rotate(1deg); }
            75% { transform: translate(-50%, -50%) rotate(-1deg); }
        }
        
        @keyframes particle-burst {
            0% {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(var(--dx), var(--dy)) scale(0);
            }
        }
        
        @keyframes confetti-fall {
            0% {
                opacity: 1;
                transform: translate(0, 0) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: translate(var(--dx), calc(var(--dy) + 200px)) rotate(var(--rotation));
            }
        }
        
        /* Coffee Progress Dark Mode Styles */
        .coffee-progress {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 40;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .coffee-cup {
            width: 50px;
            height: 50px;
            background: linear-gradient(145deg, #8B4513, #A0522D);
            border-radius: 8px 8px 15px 15px;
            position: relative;
            box-shadow: 
                0 4px 8px rgba(0,0,0,0.2),
                inset 0 2px 4px rgba(255,255,255,0.1);
            transition: all 0.3s ease;
        }
        
        .dark .coffee-cup {
            background: linear-gradient(145deg, #6B3410, #8B4513);
            box-shadow: 
                0 4px 12px rgba(0,0,0,0.4),
                inset 0 2px 4px rgba(255,255,255,0.08);
        }


        .coffee-rim {
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            height: 6px;
            background: linear-gradient(145deg, #D2691E, #CD853F);
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .dark .coffee-rim {
            background: linear-gradient(145deg, #8B4513, #A0522D);
        }
        
        .coffee-liquid {
            position: absolute;
            bottom: 3px;
            left: 3px;
            right: 3px;
            background: linear-gradient(to top, #654321 0%, #8B6F47 50%, #D2B48C 100%);
            border-radius: 0 0 12px 12px;
            transition: height 0.3s ease;
            height: 0%;
        }
        
        .dark .coffee-liquid {
            background: linear-gradient(to top, #2E1A0F 0%, #4A2C17 50%, #6B3E1F 100%);
        }
        
        .coffee-steam {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .coffee-steam.active {
            opacity: 0.7;
        }
        
        .steam-bubble {
            width: 3px;
            height: 3px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            position: absolute;
            animation: steam-rise 3s infinite ease-out;
        }
        
        .dark .steam-bubble {
            background: rgba(147, 127, 105, 0.8);
        }
        
        @keyframes steam-rise {
            0% {
                opacity: 0;
                transform: translateY(0) scale(0.5);
            }
            50% {
                opacity: 1;
                transform: translateY(-20px) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-40px) scale(0.8);
            }
        }
        
        .progress-tooltip {
            position: absolute;
            bottom: 60px;
            right: 0;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
            pointer-events: none;
        }
        
        .dark .progress-tooltip {
            background: rgba(147, 127, 105, 0.95);
            color: white;
        }
        
        .progress-tooltip.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
    
    </head>
<body class="bg-white dark:bg-gray-900 font-sans antialiased">
    <!-- 🦥 Loris Preloader System -->
    <div id="loris-preloader">
        <div class="preloader-content">
            <!-- Main Loris Character with Pulse -->
            <div class="loris-main-character">
                <picture>
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/webp/loris.webp" type="image/webp">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/optimized/loris.png" type="image/png">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <img src="https://devloris.com/images/webp/loris.webp" 
         alt="Master Loris" 
         class="loris-avatar"
                                    loading="eager"
         decoding="async">
</picture>                 
                <!-- Professional Aura Effect -->
                <div class="coffee-steam">
                    <div class="steam-particle"></div>
                    <div class="steam-particle"></div>
                    <div class="steam-particle"></div>
                </div>
            </div>
            
            <!-- Brand Name with Typing Effect -->
            <div class="brand-name">
                <h1 id="brand-typing">Devloris</h1>
                <p class="brand-tagline">Software &amp; Consulting</p>
            </div>
            
            <!-- Single Loading Message (Changes Dynamically) -->
            <div class="loading-message">
                <h2 id="current-message">Initializing...</h2>
                <div class="message-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            
            <!-- Modern Progress Bar -->
            <div class="modern-progress">
                <div class="progress-track">
                    <div id="progress-fill" class="progress-fill"></div>
                    <div class="progress-glow"></div>
                </div>
                <div class="progress-percentage" id="progress-percent">0%</div>
            </div>
            
            <!-- Subtle Loris Quote -->
            <div class="loris-quote">
                <p id="loris-wisdom">"We craft perfect code with coffee" ☕</p>
            </div>
        </div>
    </div>

    <div id="app-container" class="relative min-h-screen">
        
        <!-- Navigation -->
        <nav wire:snapshot="{&quot;data&quot;:[],&quot;memo&quot;:{&quot;id&quot;:&quot;DRfGoSe8U4mMF7QHNhov&quot;,&quot;name&quot;:&quot;navigation&quot;,&quot;path&quot;:&quot;en&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;children&quot;:{&quot;lw-1328676939-0&quot;:[&quot;&quot;,&quot;x32Of3SzuNIzzGs0A932&quot;],&quot;lw-1328676939-1&quot;:[&quot;&quot;,&quot;vLyF3l47pFWzqWHrF7s9&quot;]},&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;},&quot;checksum&quot;:&quot;235e952ab0049b2894c25a4406ea599ec921faa31d731c6695da8da40761ec60&quot;}" wire:effects="[]" wire:id="DRfGoSe8U4mMF7QHNhov" class="fixed top-0 left-0 right-0 z-40 transition-all duration-300" 
     x-data="{ isOpen: false, scrolled: false }"
     x-init="
         window.addEventListener('scroll', () => {
             scrolled = window.pageYOffset > 50;
         });
     "
     :class="scrolled ? 'bg-white/95 dark:bg-gray-900/95 backdrop-blur-md shadow-lg border-b border-gray-200/50 dark:border-gray-700/50' : 'bg-transparent'">
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-20">
            
            <!-- Logo -->
            <div class="flex-shrink-0">
                <a href="#hero" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('hero')" class="flex items-center group cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    <img src="https://devloris.com/images/logo.png" 
                         alt="Devloris Logo" 
                         class="h-9 md:h-11 group-hover:scale-105 transition-transform duration-300">
                </a>
            </div>

            <!-- Desktop Navigation -->
            <div class="hidden md:flex items-center space-x-2">
                <a href="#why-devloris" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('why-devloris')" class="nav-link group relative px-5 py-3 rounded-2xl font-bold text-sm tracking-wide transition-all duration-300 cursor-pointer text-gray-800 dark:text-gray-100 hover:text-loris-700 dark:hover:text-loris-300 hover:bg-gradient-to-br hover:from-loris-50/60 hover:to-amber-50/40 dark:hover:from-loris-900/30 dark:hover:to-slate-800/40 hover:shadow-lg hover:shadow-loris-500/20 hover:scale-105" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    <span class="relative z-10 uppercase tracking-wider">Why Loris?</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-loris-400/0 via-loris-400/20 to-loris-400/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
                </a>
                
                <a href="#expertise" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('expertise')" class="nav-link group relative px-5 py-3 rounded-2xl font-bold text-sm tracking-wide transition-all duration-300 cursor-pointer text-gray-800 dark:text-gray-100 hover:text-loris-700 dark:hover:text-loris-300 hover:bg-gradient-to-br hover:from-loris-50/60 hover:to-amber-50/40 dark:hover:from-loris-900/30 dark:hover:to-slate-800/40 hover:shadow-lg hover:shadow-loris-500/20 hover:scale-105" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    <span class="relative z-10 uppercase tracking-wider">Services</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-loris-400/0 via-loris-400/20 to-loris-400/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
                </a>
                
                <a href="#references" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('references')" class="nav-link group relative px-5 py-3 rounded-2xl font-bold text-sm tracking-wide transition-all duration-300 cursor-pointer text-gray-800 dark:text-gray-100 hover:text-loris-700 dark:hover:text-loris-300 hover:bg-gradient-to-br hover:from-loris-50/60 hover:to-amber-50/40 dark:hover:from-loris-900/30 dark:hover:to-slate-800/40 hover:shadow-lg hover:shadow-loris-500/20 hover:scale-105" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    <span class="relative z-10 uppercase tracking-wider">References</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-loris-400/0 via-loris-400/20 to-loris-400/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
                </a>
                
                <a href="#how-we-work" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('how-we-work')" class="nav-link group relative px-5 py-3 rounded-2xl font-bold text-sm tracking-wide transition-all duration-300 cursor-pointer text-gray-800 dark:text-gray-100 hover:text-loris-700 dark:hover:text-loris-300 hover:bg-gradient-to-br hover:from-loris-50/60 hover:to-amber-50/40 dark:hover:from-loris-900/30 dark:hover:to-slate-800/40 hover:shadow-lg hover:shadow-loris-500/20 hover:scale-105" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    <span class="relative z-10 uppercase tracking-wider">Process</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-loris-400/0 via-loris-400/20 to-loris-400/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
                </a>
                
                <a href="#transformation" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('transformation')" class="nav-link group relative px-5 py-3 rounded-2xl font-bold text-sm tracking-wide transition-all duration-300 cursor-pointer text-gray-800 dark:text-gray-100 hover:text-loris-700 dark:hover:text-loris-300 hover:bg-gradient-to-br hover:from-loris-50/60 hover:to-amber-50/40 dark:hover:from-loris-900/30 dark:hover:to-slate-800/40 hover:shadow-lg hover:shadow-loris-500/20 hover:scale-105" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    <span class="relative z-10 uppercase tracking-wider">Contact</span>
                    <div class="absolute inset-0 bg-gradient-to-r from-loris-400/0 via-loris-400/20 to-loris-400/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
                </a>
            </div>

            <!-- CTA Button & Language Switcher & Mobile Menu Button -->
            <div class="flex items-center space-x-4">
                <!-- Language Switcher -->
                <div class="hidden md:block">
                    <!-- Minimal Language Switcher with Real Flag Images -->
<div wire:snapshot="{&quot;data&quot;:[],&quot;memo&quot;:{&quot;id&quot;:&quot;x32Of3SzuNIzzGs0A932&quot;,&quot;name&quot;:&quot;language-switcher&quot;,&quot;path&quot;:&quot;en&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;},&quot;checksum&quot;:&quot;32fd1c75eababd1beac4a1e56dcb976046e35538d9a1e76f11fe85e37ea150b8&quot;}" wire:effects="[]" wire:id="x32Of3SzuNIzzGs0A932" class="relative">
    <!-- Clean Toggle-Style Language Switcher -->
    <div class="flex items-center bg-white/10 backdrop-blur-md rounded-full p-1 border border-gray-200/30 shadow-sm">
        <!--[if BLOCK]><![endif]-->            <a href="https://devloris.com/en?source=alakoy" 
               class="relative flex items-center space-x-2 px-3 py-2 rounded-full transition-all duration-300 group
                      bg-gradient-to-r from-loris-500 to-loris-600 text-white shadow-lg shadow-loris-500/25 scale-105">
                
                <!-- Language Flag -->
                                <div class="w-5 h-5 rounded-full overflow-hidden shadow-sm group-hover:scale-110 transition-transform duration-300">
                <!--[if BLOCK]><![endif]-->                    <img src="https://devloris.com/images/united-kingdom.png"
                         alt="English"
                         class="w-full h-full object-cover">
                <!--[if ENDBLOCK]><![endif]-->
                </div>
                
                <!-- Language Code -->
                <span class="text-sm font-semibold uppercase tracking-wide">
                    en
                </span>
            </a>
                    <a href="https://devloris.com/tr?source=alakoy" 
               class="relative flex items-center space-x-2 px-3 py-2 rounded-full transition-all duration-300 group
                      text-gray-600 hover:text-gray-900 hover:bg-white/20">
                
                <!-- Language Flag -->
                                <div class="w-5 h-5 rounded-full overflow-hidden shadow-sm group-hover:scale-110 transition-transform duration-300">
                <!--[if BLOCK]><![endif]-->                    <img src="https://devloris.com/images/turkey.png"
                         alt="Turkish"
                         class="w-full h-full object-cover">
                <!--[if ENDBLOCK]><![endif]-->
                </div>
                
                <!-- Language Code -->
                <span class="text-sm font-semibold uppercase tracking-wide">
                    tr
                </span>
            </a>
        <!--[if ENDBLOCK]><![endif]-->
    </div>
</div>
                </div>
                
                <!-- Dark Mode Toggle -->
                <div class="hidden md:block">
                    <button id="darkModeToggle" 
                            class="group relative w-14 h-14 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-slate-800 dark:to-slate-900 rounded-2xl border-2 border-amber-200/60 dark:border-slate-600/60 shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300 overflow-hidden"
                            title="Theme Toggle"
                        
                        <!-- Animated Background -->
                        <div class="absolute inset-0 bg-gradient-to-br from-amber-300/30 to-orange-300/30 dark:from-blue-500/20 dark:to-purple-500/20 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                        
                        <!-- Light Mode (Sun + Coffee Loris) -->
                        <div id="lightModeIcon" class="absolute inset-0 flex items-center justify-center transition-all duration-700 transform dark:opacity-0 dark:rotate-180 dark:scale-50">
                            <div class="relative">
                                <!-- Animated Sun Rays -->
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <div class="w-12 h-12 text-amber-400 animate-spin-slow">
                                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" 
                                                  d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"/>
                                        </svg>
                                    </div>
                                </div>
                                <!-- Coffee Loris in Sun -->
                                <div class="w-8 h-8 bg-gradient-to-br from-amber-300 to-orange-400 rounded-full flex items-center justify-center shadow-lg border-2 border-amber-200">
                                    <img src="https://devloris.com/images/loris-coffee.png" 
                                         alt="Day Loris" 
                                         class="w-6 h-6 filter brightness-110 drop-shadow-sm">
                                </div>
                            </div>
                        </div>
                        
                        <!-- Dark Mode (Moon + Night Loris) -->
                        <div id="darkModeIcon" class="absolute inset-0 flex items-center justify-center transition-all duration-700 transform opacity-0 rotate-180 scale-50 dark:opacity-100 dark:rotate-0 dark:scale-100">
                            <div class="relative">
                                <!-- Twinkling Stars -->
                                <div class="absolute -top-2 -right-1.5 w-2 h-2 bg-blue-200 rounded-full animate-pulse"></div>
                                <div class="absolute -bottom-1.5 -left-2 w-1.5 h-1.5 bg-purple-200 rounded-full animate-pulse delay-700"></div>
                                <div class="absolute top-0.5 left-2 w-1 h-1 bg-cyan-200 rounded-full animate-pulse delay-1000"></div>
                                
                                <!-- Moon with Night Loris -->
                                <div class="w-8 h-8 bg-gradient-to-br from-slate-300 to-blue-200 rounded-full flex items-center justify-center shadow-xl border-2 border-slate-400/50 relative overflow-hidden">
                                    <!-- Moon Surface Details -->
                                    <div class="absolute top-1.5 left-1.5 w-2 h-2 bg-slate-400/40 rounded-full"></div>
                                    <div class="absolute bottom-1 right-1 w-1.5 h-1.5 bg-blue-300/30 rounded-full"></div>
                                    
                                    <!-- Night Loris -->
                                    <img src="https://devloris.com/images/loris.png" 
                                         alt="Night Loris" 
                                         class="w-5.5 h-5.5 filter brightness-95 contrast-110 drop-shadow-sm">
                                </div>
                            </div>
                        </div>
                        
                        <!-- Loading Spinner -->
                        <div id="darkModeLoading" class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300">
                            <div class="w-6 h-6 border-2 border-loris-400 border-t-transparent rounded-full animate-spin"></div>
                        </div>
                    </button>
                </div>
                

                <!-- Mobile menu button -->
                <button @click="isOpen = !isOpen" 
                        class="md:hidden inline-flex items-center justify-center p-2.5 rounded-xl text-gray-700 dark:text-gray-200 hover:text-loris-600 dark:hover:text-loris-400 hover:bg-loris-50/50 dark:hover:bg-loris-900/20 focus:outline-none transition-all duration-300">
                    <svg class="w-6 h-6" :class="{'hidden': isOpen, 'block': !isOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                    <svg class="w-6 h-6" :class="{'block': isOpen, 'hidden': !isOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Mobile Navigation Menu -->
        <div x-show="isOpen" 
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 transform scale-95"
             x-transition:enter-end="opacity-100 transform scale-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 transform scale-100"
             x-transition:leave-end="opacity-0 transform scale-95"
             class="md:hidden absolute top-full left-0 right-0 bg-white/95 dark:bg-gray-900/95 backdrop-blur-md shadow-xl border-t border-gray-200/50 dark:border-gray-700/50">
            
            <div class="px-4 py-6 space-y-3">
                <a href="#why-devloris" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('why-devloris')" class="block px-4 py-3 rounded-xl text-gray-700 dark:text-gray-200 hover:text-loris-600 dark:hover:text-loris-400 hover:bg-loris-50/50 dark:hover:bg-loris-900/20 font-semibold transition-all duration-300 cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    Why Loris?
                </a>
                
                <a href="#expertise" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('expertise')" class="block px-4 py-3 rounded-xl text-gray-700 dark:text-gray-200 hover:text-loris-600 dark:hover:text-loris-400 hover:bg-loris-50/50 dark:hover:bg-loris-900/20 font-semibold transition-all duration-300 cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    Services
                </a>
                
                <a href="#references" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('references')" class="block px-4 py-3 rounded-xl text-gray-700 dark:text-gray-200 hover:text-loris-600 dark:hover:text-loris-400 hover:bg-loris-50/50 dark:hover:bg-loris-900/20 font-semibold transition-all duration-300 cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    References
                </a>
                
                <a href="#how-we-work" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('how-we-work')" class="block px-4 py-3 rounded-xl text-gray-700 dark:text-gray-200 hover:text-loris-600 dark:hover:text-loris-400 hover:bg-loris-50/50 dark:hover:bg-loris-900/20 font-semibold transition-all duration-300 cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    Process
                </a>
                
                <a href="#transformation" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('transformation')" class="block px-4 py-3 rounded-xl text-gray-700 dark:text-gray-200 hover:text-loris-600 dark:hover:text-loris-400 hover:bg-loris-50/50 dark:hover:bg-loris-900/20 font-semibold transition-all duration-300 cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                    Contact
                </a>
                
                <!-- Mobile Language Switcher & Dark Mode -->
                <div class="pt-4 border-t border-gray-200/50 dark:border-gray-700/50">
                    <div class="flex justify-center items-center space-x-4 mb-4">
                        <!-- Minimal Language Switcher with Real Flag Images -->
<div wire:snapshot="{&quot;data&quot;:[],&quot;memo&quot;:{&quot;id&quot;:&quot;vLyF3l47pFWzqWHrF7s9&quot;,&quot;name&quot;:&quot;language-switcher&quot;,&quot;path&quot;:&quot;en&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;},&quot;checksum&quot;:&quot;228f5c94aa7c33497b5858ad895ff76ec54c4167367e808c50b9252bd765de85&quot;}" wire:effects="[]" wire:id="vLyF3l47pFWzqWHrF7s9" class="relative">
    <!-- Clean Toggle-Style Language Switcher -->
    <div class="flex items-center bg-white/10 backdrop-blur-md rounded-full p-1 border border-gray-200/30 shadow-sm">
        <!--[if BLOCK]><![endif]-->            <a href="https://devloris.com/en?source=alakoy" 
               class="relative flex items-center space-x-2 px-3 py-2 rounded-full transition-all duration-300 group
                      bg-gradient-to-r from-loris-500 to-loris-600 text-white shadow-lg shadow-loris-500/25 scale-105">
                
                <!-- Language Flag -->
                                <div class="w-5 h-5 rounded-full overflow-hidden shadow-sm group-hover:scale-110 transition-transform duration-300">
                <!--[if BLOCK]><![endif]-->                    <img src="https://devloris.com/images/united-kingdom.png"
                         alt="English"
                         class="w-full h-full object-cover">
                <!--[if ENDBLOCK]><![endif]-->
                </div>
                
                <!-- Language Code -->
                <span class="text-sm font-semibold uppercase tracking-wide">
                    en
                </span>
            </a>
                    <a href="https://devloris.com/tr?source=alakoy" 
               class="relative flex items-center space-x-2 px-3 py-2 rounded-full transition-all duration-300 group
                      text-gray-600 hover:text-gray-900 hover:bg-white/20">
                
                <!-- Language Flag -->
                                <div class="w-5 h-5 rounded-full overflow-hidden shadow-sm group-hover:scale-110 transition-transform duration-300">
                <!--[if BLOCK]><![endif]-->                    <img src="https://devloris.com/images/turkey.png"
                         alt="Turkish"
                         class="w-full h-full object-cover">
                <!--[if ENDBLOCK]><![endif]-->
                </div>
                
                <!-- Language Code -->
                <span class="text-sm font-semibold uppercase tracking-wide">
                    tr
                </span>
            </a>
        <!--[if ENDBLOCK]><![endif]-->
    </div>
</div>
                        
                        <!-- Mobile Dark Mode Toggle -->
                        <button id="darkModeToggleMobile" 
                                class="group w-12 h-12 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-slate-800 dark:to-slate-900 rounded-xl border-2 border-amber-200/60 dark:border-slate-600/60 shadow-md hover:shadow-lg hover:scale-105 transition-all duration-300 flex items-center justify-center overflow-hidden">
                            <!-- Light Mode Icon -->
                            <div class="dark:hidden flex items-center justify-center">
                                <div class="w-8 h-8 bg-gradient-to-br from-amber-300 to-orange-400 rounded-full flex items-center justify-center border-2 border-amber-200">
                                    <img src="https://devloris.com/images/loris-coffee.png" 
                                         alt="Day Loris" 
                                         class="w-5.5 h-5.5 filter brightness-110">
                                </div>
                            </div>
                            <!-- Dark Mode Icon -->
                            <div class="hidden dark:flex items-center justify-center">
                                <div class="w-8 h-8 bg-gradient-to-br from-slate-300 to-blue-200 rounded-full flex items-center justify-center border-2 border-slate-400/50">
                                    <img src="https://devloris.com/images/loris.png" 
                                         alt="Night Loris" 
                                         class="w-5 h-5 filter brightness-95">
                                </div>
                            </div>
                        </button>
                    </div>
                </div>
                

            </div>
        </div>
    </div>
</nav>


        <!-- Main Content -->
        <main class="min-h-screen">
            <div wire:snapshot="{&quot;data&quot;:[],&quot;memo&quot;:{&quot;id&quot;:&quot;nDpSjRdhMKhShIhFlKMl&quot;,&quot;name&quot;:&quot;home-page&quot;,&quot;path&quot;:&quot;en&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;},&quot;checksum&quot;:&quot;5aa7f7060b7a335a3347159d9d4a90205c8177a777d91770078d37a07bc87f7a&quot;}" wire:effects="[]" wire:id="nDpSjRdhMKhShIhFlKMl" class="pt-20">
    <!-- Hero Section -->
    <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 via-white to-gray-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <!-- Background Pattern -->
        <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
        
        <!-- Animated Background Blobs -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
            <div class="absolute top-20 left-10 w-72 h-72 bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-full blur-3xl animate-pulse"></div>
            <div class="absolute bottom-20 right-10 w-96 h-96 bg-gradient-to-r from-purple-600/20 to-cyan-600/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-to-r from-indigo-600/10 via-blue-600/10 to-purple-600/10 rounded-full blur-3xl animate-pulse delay-2000"></div>
        </div>
        
        <!-- Floating Code Elements -->
        <div class="absolute inset-0 pointer-events-none hidden lg:block">
            <!-- Terminal Window -->
            <div class="absolute top-32 right-20 bg-gray-900/95 backdrop-blur-md rounded-xl shadow-2xl border border-gray-700 float-animation">
                <div class="flex items-center px-4 py-3 bg-gray-800 rounded-t-xl border-b border-gray-700">
                    <div class="flex space-x-2">
                        <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                        <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                    </div>
                    <div class="ml-4 text-gray-400 text-sm font-mono">terminal</div>
                </div>
                <div class="p-4 font-mono text-sm">
                    <div class="text-green-400">$ npm run success</div>
                    <div class="text-gray-400 mt-1">✓ Building Devloris...</div>
                    <div class="text-blue-400 mt-1">✓ Quality: Premium</div>
                    <div class="text-purple-400 mt-1 animate-pulse">█</div>
                </div>
            </div>
            
            <!-- Browser Window -->
            <div class="absolute bottom-32 left-20 bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 float-animation delay-1000">
                <div class="flex items-center px-4 py-3 bg-gray-100 dark:bg-gray-800 rounded-t-xl border-b border-gray-200 dark:border-gray-700">
                    <div class="flex space-x-2">
                        <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                        <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                    </div>
                    <div class="ml-4 text-gray-500 text-sm">devloris.dev</div>
                </div>
                <div class="p-4">
                    <div class="text-sm text-gray-600 dark:text-gray-300">
                        &lt;<span class="text-blue-600">Excellence</span>&gt;
                    </div>
                    <div class="ml-2 text-sm text-gray-900 dark:text-white font-semibold">
                        Delivered
                    </div>
                    <div class="text-sm text-gray-600 dark:text-gray-300">
                        &lt;/<span class="text-blue-600">Excellence</span>&gt;
                    </div>
                </div>
            </div>
            
            <!-- Stats Cards -->
            <div class="absolute top-1/2 right-32 space-y-4 float-animation delay-500">
                <div class="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-lg p-3 shadow-lg border border-gray-200/50 dark:border-gray-700/50">
                    <div class="text-2xl font-bold text-green-600">99.9%</div>
                    <div class="text-xs text-gray-600 dark:text-gray-400">Uptime</div>
                </div>
                <div class="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-lg p-3 shadow-lg border border-gray-200/50 dark:border-gray-700/50">
                    <div class="text-2xl font-bold text-blue-600">&lt;1s</div>
                    <div class="text-xs text-gray-600 dark:text-gray-400">Load Time</div>
                </div>
            </div>
        </div>
        
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-12 items-center min-h-screen">
                <!-- Left Content -->
                <div class="text-left space-y-3" data-animate>
                    <!-- Brand Badge -->
                    <div class="inline-flex items-center px-4 py-2 bg-blue-100 dark:bg-blue-900/30 rounded-full text-blue-800 dark:text-blue-200 text-sm font-medium">
                        <div class="w-2 h-2 bg-blue-600 rounded-full mr-2 animate-pulse"></div>
                        Professional Solutions
                    </div>
                    
                    <!-- Main Heading -->
                    <div class="space-y-6">
                                            <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold leading-tight">
                        <span class="text-gray-900 dark:text-white">Customer Focused</span>
                        <br>
                        <span class="bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 bg-clip-text text-transparent">
                            Software Solutions
                        </span>
                    </h1>
                    
                    <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl">
                        As an Istanbul-based software team with 15+ years of experience, we have been analyzing customer needs, solving problems, and supporting business growth since 2020.
                    </p>
                    </div>
                    
                    <!-- CTA Buttons -->
                    <div class="flex flex-col sm:flex-row gap-4 pt-4">
                        <button onclick="if (!window.__cfRLUnblockHandlers) return false; openContactModal('transformation', this)" class="group inline-flex items-center px-8 py-4 bg-gradient-to-r from-loris-600 to-loris-800 text-white font-semibold rounded-xl hover:shadow-2xl hover:shadow-loris-500/25 hover:scale-105 transition-all duration-300" data-cf-modified-63af1a45ceaed83f990291b1-="">
                            Start Your Project
                            <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                            </svg>
                        </button>
                        
                        <button onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('references')" class="group inline-flex items-center px-8 py-4 border-2 border-loris-300 dark:border-loris-400 text-loris-700 dark:text-loris-300 font-semibold rounded-xl hover:border-loris-600 hover:text-loris-600 dark:hover:text-loris-400 hover:bg-loris-50 dark:hover:bg-loris-900/10 transition-all duration-300" data-cf-modified-63af1a45ceaed83f990291b1-="">
                            View Our Work
                            <svg class="w-5 h-5 ml-2 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                        </button>
                    </div>
                    
                    <!-- Dynamic Code Counter -->
                    <div class="pt-4">
                        <div class="text-center bg-gradient-to-r from-gray-50/80 via-white/80 to-gray-50/80 dark:from-gray-800/30 dark:via-gray-900/30 dark:to-gray-800/30 backdrop-blur-sm border border-gray-200/30 dark:border-gray-700/30 rounded-xl p-6 shadow-md">
                            <div class="space-y-3">
                                <div class="flex items-center justify-center space-x-3">
                                    <div class="w-2.5 h-2.5 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full animate-pulse"></div>
                                    <span class="text-xs font-medium text-gray-600 dark:text-gray-400 uppercase tracking-wider">Live Code Counter</span>
                                    <div class="w-2.5 h-2.5 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full animate-pulse delay-500"></div>
                        </div>
                                
                                <div class="relative">
                                    <div class="text-3xl md:text-5xl lg:text-6xl font-mono font-bold bg-gradient-to-r from-loris-600 via-blue-600 via-purple-600 to-cyan-600 bg-clip-text text-transparent" id="codeCounter">
                                        1,200,000
                        </div>
                                    <div class="absolute -inset-2 bg-gradient-to-r from-loris-500/5 via-blue-500/5 to-purple-500/5 rounded-lg blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        </div>
                                
                                <div class="space-y-1">
                                    <div class="text-base md:text-lg font-semibold text-gray-800 dark:text-gray-200">
                                        Lines of Code Written
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 max-w-sm mx-auto leading-relaxed">
                                        Our growing code archive with each project is proof of our experience and expertise
                                    </div>
                                </div>
                                
                                <!-- Code Animation Dots -->
                                <div class="flex justify-center space-x-1 pt-1">
                                    <div class="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></div>
                                    <div class="w-1.5 h-1.5 bg-blue-400 rounded-full animate-pulse delay-200"></div>
                                    <div class="w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse delay-400"></div>
                                    <div class="w-1.5 h-1.5 bg-pink-400 rounded-full animate-pulse delay-600"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Right Content - Character Showcase -->
                <div class="flex items-center justify-center" data-animate>
                    <div class="relative">
                        <!-- Main Loris Character -->
                        <div class="relative z-10 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-full shadow-2xl p-16 border border-blue-200/50 dark:border-blue-700/50">
                            <picture>
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/webp/loris.webp" type="image/webp">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/optimized/loris.png" type="image/png">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <img src="https://devloris.com/images/webp/loris.webp" 
         alt="Main Loris Character" 
         class="loris-clickable w-32 h-32 md:w-40 md:h-40 mx-auto hover:scale-110 hover:rotate-6 transition-all duration-500"
                                    loading="eager"
         decoding="async">
</picture>                         </div>
                        
                        <!-- Floating Specialized Loris Characters -->
                        <!-- Development Loris -->
                        <div class="absolute -top-6 -right-6 bg-gradient-to-r from-blue-100 to-indigo-100 dark:from-blue-900/30 dark:to-indigo-900/30 rounded-2xl p-3 shadow-lg float-animation" title="Development Specialist">
                            <picture>
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/webp/loris-develop.webp" type="image/webp">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/optimized/loris-develop.png" type="image/png">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <img src="https://devloris.com/images/webp/loris-develop.webp" 
         alt="Development Loris" 
         class="loris-clickable w-8 h-8 hover:rotate-12 hover:scale-110 transition-transform duration-300"
                                    loading="lazy"
         decoding="async">
</picture>                         </div>
                        
                        <!-- Mobile Loris -->
                        <div class="absolute -bottom-4 -left-4 bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-2xl p-3 shadow-lg float-animation delay-1000" title="Mobile App Expert">
                            <picture>
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/webp/loris-mobile.webp" type="image/webp">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/optimized/loris-mobile.png" type="image/png">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <img src="https://devloris.com/images/webp/loris-mobile.webp" 
         alt="Mobile Loris" 
         class="loris-clickable w-6 h-6 hover:-rotate-12 hover:scale-110 transition-transform duration-300"
                                    loading="lazy"
         decoding="async">
</picture>                         </div>
                        
                        <!-- E-commerce Loris -->
                        <div class="absolute top-1/2 -left-8 bg-gradient-to-r from-green-100 to-emerald-100 dark:from-green-900/30 dark:to-emerald-900/30 rounded-2xl p-3 shadow-lg float-animation delay-500" title="E-commerce Solutions">
                            <picture>
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/webp/loris-ecommerce.webp" type="image/webp">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/optimized/loris-ecommerce.png" type="image/png">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <img src="https://devloris.com/images/webp/loris-ecommerce.webp" 
         alt="E-commerce Loris" 
         class="loris-clickable w-7 h-7 hover:rotate-45 hover:scale-110 transition-transform duration-300"
                                    loading="lazy"
         decoding="async">
</picture>                         </div>
                        
                        <!-- Write/Design Loris -->
                        <div class="absolute -bottom-8 -right-2 bg-gradient-to-r from-amber-100 to-orange-100 dark:from-amber-900/30 dark:to-orange-900/30 rounded-2xl p-3 shadow-lg float-animation delay-750" title="UI/UX & Design">
                            <picture>
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/webp/loris-write.webp" type="image/webp">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/optimized/loris-write.png" type="image/png">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <img src="https://devloris.com/images/webp/loris-write.webp" 
         alt="Design Loris" 
         class="loris-clickable w-6 h-6 hover:rotate-12 hover:scale-110 transition-transform duration-300"
                                    loading="lazy"
         decoding="async">
</picture>                         </div>
                        
                        <!-- Animated Rings -->
                        <div class="absolute inset-0 rounded-full border-2 border-blue-300/30 dark:border-blue-600/30 animate-pulse scale-125"></div>
                        <div class="absolute inset-0 rounded-full border border-purple-300/20 dark:border-purple-600/20 animate-pulse scale-150 delay-1000"></div>
                        
                        <!-- Glow Effect -->
                        <div class="absolute inset-0 bg-gradient-to-r from-blue-400/10 to-purple-400/10 rounded-full blur-3xl scale-150 animate-pulse"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Minimal Glass Scroll Indicator - Hidden on Mobile, Visible on Tablet+ -->
        <div class="hidden md:block absolute bottom-20 left-1/2 transform -translate-x-1/2 z-50">
            <div class="group flex flex-col items-center space-y-2 bg-white/20 dark:bg-gray-900/20 backdrop-blur-xl px-4 py-3 rounded-full border border-white/30 dark:border-gray-700/30 shadow-lg hover:bg-white/30 dark:hover:bg-gray-900/30 transition-all duration-300 cursor-pointer animate-bounce" onclick="if (!window.__cfRLUnblockHandlers) return false; scrollToSection('why-devloris')" data-cf-modified-63af1a45ceaed83f990291b1-="">
                <!-- Minimal Text -->
                <div class="text-xs text-gray-600 dark:text-gray-400 font-medium group-hover:text-loris-600 dark:group-hover:text-loris-400 transition-colors duration-300">
                    Scroll Down
                </div>
                
                <!-- Simple Arrow -->
                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-loris-500 dark:group-hover:text-loris-400 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
                </svg>
            </div>
        </div>
    </section>

    <!-- Why Devloris Section -->
    <section id="why-devloris" class="relative py-16 bg-gradient-to-br from-indigo-50/60 via-purple-50/40 to-loris-50/60 dark:from-indigo-950/40 dark:via-purple-950/60 dark:to-loris-950/40 overflow-hidden">
        <!-- Elegant Diagonal Pattern -->
        <div class="absolute inset-0 opacity-5 dark:opacity-8">
            <div class="absolute inset-0" style="background-image: repeating-linear-gradient(45deg, rgba(147, 127, 105, 0.1) 0px, rgba(147, 127, 105, 0.1) 1px, transparent 1px, transparent 15px), repeating-linear-gradient(-45deg, rgba(99, 102, 241, 0.05) 0px, rgba(99, 102, 241, 0.05) 1px, transparent 1px, transparent 25px);"></div>
        </div>
        
        <!-- Enhanced Floating Elements -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
            <!-- Main gradient orbs -->
            <div class="absolute top-16 right-16 w-80 h-80 bg-gradient-to-r from-purple-300/20 via-indigo-300/15 to-loris-300/20 rounded-full blur-3xl animate-pulse"></div>
            <div class="absolute bottom-16 left-16 w-96 h-96 bg-gradient-to-r from-loris-300/15 via-purple-300/20 to-blue-300/15 rounded-full blur-3xl animate-pulse delay-1000"></div>
            
            <!-- Floating geometric accents -->
            <div class="absolute top-1/3 left-1/4 w-6 h-6 bg-purple-400/20 rounded-full animate-bounce delay-500"></div>
            <div class="absolute bottom-1/3 right-1/4 w-4 h-4 bg-loris-400/25 transform rotate-45 animate-pulse delay-1500"></div>
            <div class="absolute top-1/2 right-1/3 w-8 h-8 bg-indigo-400/15 rounded-full animate-ping delay-2000"></div>
        </div>
        
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Modern Header with Brand Evolution -->
            <div class="text-center mb-16" data-animate>
                <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-loris-100 to-blue-100 dark:from-loris-900/30 dark:to-blue-900/30 rounded-full text-loris-800 dark:text-loris-200 text-sm font-medium mb-8">
                    <span class="mr-2">🦥</span>
                    Why Us?
                </div>
                
                <!-- Brand Evolution Timeline -->
                <div class="max-w-4xl mx-auto mb-12">
                    <div class="flex items-center justify-center space-x-8 md:space-x-16">
                        <!-- Slow Loris -->
                        <div class="text-center group cursor-pointer" id="evolution-slow">
                            <div class="w-20 h-20 md:w-24 md:h-24 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/30 dark:to-indigo-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-all duration-500 shadow-lg">
                                <img src="https://devloris.com/images/loris.png" 
                                     alt="Slow Loris" 
                                     class="w-12 h-12 md:w-14 md:h-14 group-hover:rotate-12 transition-transform duration-300">
                            </div>
                            <h3 class="text-xl md:text-2xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent mb-2">
                                Slow Loris
                            </h3>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Patience in Nature</p>
                        </div>
                        
                        <!-- Evolution Arrow -->
                        <div class="flex items-center">
                            <div class="w-16 md:w-24 h-0.5 bg-gradient-to-r from-purple-400 to-loris-400 relative">
                                <div class="absolute right-0 top-1/2 transform -translate-y-1/2 w-0 h-0 border-l-4 border-t-2 border-b-2 border-transparent border-l-loris-400"></div>
                            </div>
                        </div>
                        
                        <!-- Devloris -->
                        <div class="text-center group cursor-pointer" id="evolution-dev">
                            <div class="w-20 h-20 md:w-24 md:h-24 bg-gradient-to-br from-loris-100 to-loris-200 dark:from-loris-800/30 dark:to-loris-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-all duration-500 shadow-lg">
                                <img src="https://devloris.com/images/loris-develop.png" 
                                     alt="Devloris" 
                                     class="w-12 h-12 md:w-14 md:h-14 group-hover:rotate-12 transition-transform duration-300">
                            </div>
                            <h3 class="text-xl md:text-2xl font-bold bg-gradient-to-r from-loris-600 to-loris-800 bg-clip-text text-transparent mb-2">
                                Devloris
                            </h3>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Excellence in Code</p>
                        </div>
                    </div>
                </div>
                
                <!-- Simple SlowLoris ↔ DevLoris Transition -->
                <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
                    <span class="text-gray-900 dark:text-white">Why </span>
                    <span class="relative inline-block">
                        <span id="simple-morph-container" class="relative inline-block">
                            <span id="slowloris-text" class="bg-gradient-to-r from-purple-600 via-purple-500 to-indigo-600 bg-clip-text text-transparent transition-all duration-700 ease-in-out">
                                Slowloris?
                            </span>
                            <span id="devloris-text" class="absolute top-0 left-0 bg-gradient-to-r from-loris-600 via-loris-500 to-loris-800 bg-clip-text text-transparent transition-all duration-700 ease-in-out opacity-0">
                                Devloris?
                            </span>
                        </span>
                    </span>
                </h2>
                
                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
                    Our transformation story from nature&#039;s most patient programmer to the software world&#039;s most careful team
                </p>
            </div>
            
            <!-- Transformation Story -->
            <div class="max-w-5xl mx-auto mb-12">
                <div class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-3xl p-8 md:p-12 shadow-xl">
                    <div class="grid md:grid-cols-2 gap-12 items-center">
                        <!-- Story Content -->
                        <div class="space-y-6">
                            <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
                                Journey from Nature to Technology
                            </h3>
                            <div class="space-y-4 text-gray-700 dark:text-gray-300 leading-relaxed">
                                <p>
                                    <strong class="text-purple-600 dark:text-purple-400">Slow Loris</strong>, 
                                    is nature&#039;s most patient and careful creature. It works silently at midnight, 
                                    every movement is calculated and with its large eyes, it doesn&#039;t miss even the smallest details.
                                </p>
                                <p>
                                    These unique features formed the foundation of our software philosophy. 
                                    <strong class="text-loris-600 dark:text-loris-400">Devloris</strong> olarak, 
                                    We brought this unique creature&#039;s patience, attention and pursuit of perfection 
                                    to the world of code.
                                </p>
                            </div>
                            
                            <!-- Philosophy Quote -->
                            <div class="bg-gradient-to-r from-loris-600 to-blue-600 text-white p-6 rounded-2xl mt-8">
                                <div class="text-4xl text-white/20 font-serif mb-2">"</div>
                                <blockquote class="text-lg font-medium leading-relaxed -mt-6">
                                    Fast runners get tired, we perfect with patience. 
                                    Each line of our code is calculated and effective like Loris&#039;s careful steps.
                                </blockquote>
                                <cite class="text-loris-100 text-sm font-semibold mt-4 block">
                                    — Devloris Team Philosophy
                                </cite>
                            </div>
                        </div>
                        
                        <!-- Interactive Showcase -->
                        <div class="relative">
                            <div class="bg-gradient-to-br from-loris-50/50 to-blue-50/50 dark:from-loris-900/20 dark:to-blue-900/20 rounded-3xl p-8 shadow-lg">
                                <!-- Central Character Display -->
                                <div class="text-center mb-8">
                                    <div class="relative inline-block">
                                        <div class="w-32 h-32 bg-gradient-to-br from-loris-100 to-loris-200 dark:from-loris-800/30 dark:to-loris-900/30 rounded-full flex items-center justify-center shadow-xl mx-auto">
                                            <picture>
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/webp/loris.webp" type="image/webp">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <!--[if BLOCK]><![endif]-->        <source srcset="https://devloris.com/images/optimized/loris.png" type="image/png">
    <!--[if ENDBLOCK]><![endif]-->
    
    
    <img src="https://devloris.com/images/webp/loris.webp" 
         alt="Main Loris" 
         class="loris-clickable w-20 h-20 hover:scale-110 hover:rotate-6 transition-all duration-500"
                                    loading="eager"
         decoding="async">
</picture>                                         </div>
                                        <!-- Pulse rings -->
                                        <div class="absolute inset-0 rounded-full border-2 border-loris-300/30 dark:border-loris-600/30 animate-pulse scale-125"></div>
                                        <div class="absolute inset-0 rounded-full border border-blue-300/20 dark:border-blue-600/20 animate-pulse scale-150 delay-1000"></div>
                                    </div>
                                </div>
                                
                                <!-- Specialized Team -->
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="bg-blue-100 dark:bg-blue-900/30 rounded-2xl p-4 text-center group cursor-pointer hover:scale-105 transition-transform duration-300">
                                        <img src="https://devloris.com/images/loris-develop.png" 
                                             alt="Development Specialist" 
                                             class="loris-clickable w-12 h-12 mx-auto mb-2 group-hover:rotate-12 transition-transform duration-300">
                                        <div class="text-sm font-medium text-blue-700 dark:text-blue-300">Development</div>
                                    </div>
                                    
                                    <div class="bg-green-100 dark:bg-green-900/30 rounded-2xl p-4 text-center group cursor-pointer hover:scale-105 transition-transform duration-300">
                                        <img src="https://devloris.com/images/loris-write.png" 
                                             alt="Design Specialist" 
                                             class="loris-clickable w-12 h-12 mx-auto mb-2 group-hover:rotate-12 transition-transform duration-300">
                                        <div class="text-sm font-medium text-green-700 dark:text-green-300">Design</div>
                                    </div>
                                    
                                    <div class="bg-purple-100 dark:bg-purple-900/30 rounded-2xl p-4 text-center group cursor-pointer hover:scale-105 transition-transform duration-300">
                                        <img src="https://devloris.com/images/loris-mobile.png" 
                                             alt="Mobile Specialist" 
                                             class="loris-clickable w-12 h-12 mx-auto mb-2 group-hover:rotate-12 transition-transform duration-300">
                                        <div class="text-sm font-medium text-purple-700 dark:text-purple-300">Mobile</div>
                                    </div>
                                    
                                    <div class="bg-orange-100 dark:bg-orange-900/30 rounded-2xl p-4 text-center group cursor-pointer hover:scale-105 transition-transform duration-300">
                                        <img src="https://devloris.com/images/loris-coffee.png" 
                                             alt="Energy Specialist" 
                                             class="loris-clickable w-12 h-12 mx-auto mb-2 group-hover:rotate-12 transition-transform duration-300">
                                        <div class="text-sm font-medium text-orange-700 dark:text-orange-300">Energy</div>
                                    </div>
                                </div>
                                
                                <!-- Easter Egg Hint -->
                                <div class="text-center mt-6">
                                    <div class="inline-flex items-center px-4 py-2 bg-loris-100 dark:bg-loris-900/30 rounded-full text-loris-700 dark:text-loris-300 text-sm">
                                        <span class="animate-pulse mr-2">✨</span>
                                        Click 3 times and discover the surprise!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Characteristics Grid -->
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8" data-animate>
                <!-- Big Eyes = Bug Detection -->
                <div class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-500">
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:rotate-12 transition-transform duration-300">
                            <span class="text-3xl">👁️</span>
                        </div>
                                            <h4 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Big Eyes</h4>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">Our detail-oriented approach that catches even the smallest bugs</p>
                        <div class="text-sm font-semibold text-blue-600 dark:text-blue-400">= Perfect Bug Detection</div>
                    </div>
                </div>
                
                <!-- Nocturnal = Night Coding -->
                <div class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-500">
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/30 dark:to-purple-800/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:rotate-12 transition-transform duration-300">
                            <span class="text-3xl">🌙</span>
                        </div>
                                            <h4 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Night Active</h4>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">We bring your projects to life by coding at midnight</p>
                        <div class="text-sm font-semibold text-purple-600 dark:text-purple-400">= Dedicated Night Coding</div>
                    </div>
                </div>
                
                <!-- Patient = Perfect Debugging -->
                <div class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-500">
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:rotate-12 transition-transform duration-300">
                            <span class="text-3xl">🔍</span>
                        </div>
                                            <h4 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Patient Approach</h4>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">Without rushing, we solve every problem from its roots</p>
                        <div class="text-sm font-semibold text-green-600 dark:text-green-400">= Perfect Debugging</div>
                    </div>
                </div>
                
                <!-- Careful = Code Quality -->
                <div class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-500">
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-orange-100 to-orange-200 dark:from-orange-900/30 dark:to-orange-800/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:rotate-12 transition-transform duration-300">
                            <span class="text-3xl">🎯</span>
                        </div>
                                            <h4 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Careful Movement</h4>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">Every line of code is written thoughtfully and calculated</p>
                        <div class="text-sm font-semibold text-orange-600 dark:text-orange-400">= Superior Code Quality</div>
                    </div>
                </div>
                
                <!-- Rare = Premium Service -->
                <div class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-500">
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900/30 dark:to-pink-800/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:rotate-12 transition-transform duration-300">
                            <span class="text-3xl">💎</span>
                        </div>
                                            <h4 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Rare &amp; Valuable</h4>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">Exclusive, premium service approach for our distinguished customers</p>
                        <div class="text-sm font-semibold text-pink-600 dark:text-pink-400">= Premium Boutique Service</div>
                    </div>
                </div>
                
                <!-- Effective = Small Team Big Impact -->
                <div class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-2xl p-8 shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-500">
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-cyan-100 to-cyan-200 dark:from-cyan-900/30 dark:to-cyan-800/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:rotate-12 transition-transform duration-300">
                            <span class="text-3xl">⚡</span>
                        </div>
                                            <h4 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Effective Results</h4>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">Small team, big impact - maximum efficiency</p>
                        <div class="text-sm font-semibold text-cyan-600 dark:text-cyan-400">= Small Team, Big Impact</div>
                    </div>
                </div>
            </div>
            

        </div>
    </section>

    <!-- Our Expertise Section - Modernized -->
    <section id="expertise" class="py-24 bg-gradient-to-br from-gray-50 via-white to-gray-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 relative overflow-hidden">
        
        <!-- Background Pattern -->
        <div class="absolute inset-0 opacity-30">
            <div class="absolute top-0 left-0 w-full h-full bg-grid-pattern"></div>
        </div>
        
        <!-- Floating Background Elements -->
        <div class="absolute top-20 left-10 w-72 h-72 bg-gradient-to-r from-loris-500/10 to-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-20 right-10 w-96 h-96 bg-gradient-to-r from-purple-500/10 to-indigo-500/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            
            <!-- Enhanced Header with Interactive Elements -->
            <div class="text-center mb-20" data-animate>
                <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-loris-500/20 via-blue-500/20 to-purple-500/20 backdrop-blur-md border border-gray-200/50 dark:border-white/20 rounded-full text-gray-700 dark:text-white text-sm font-medium mb-8">
                    <div class="w-3 h-3 bg-gradient-to-r from-loris-400 to-blue-400 rounded-full mr-3 animate-pulse"></div>
                                            What Do We Do?
                </div>
                
                <h2 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
                    <span class="inline-block hover:scale-110 hover:rotate-1 transition-all duration-500">Services</span>
                    <br>
                    <span class="bg-gradient-to-r from-loris-500 via-blue-500 to-purple-500 bg-clip-text text-transparent">
                        Our Fields
                    </span>
                </h2>
                
                <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-4xl mx-auto leading-relaxed">
                    Instead of one-size-fits-all solutions, we develop software that fits your business DNA.
                    <br>
                    <span class="text-loris-600 dark:text-loris-400 font-semibold">We are experienced in e-commerce, enterprise systems and mobile applications.</span>
                </p>
                
                <!-- Interactive Tech Stats -->
                <div class="flex flex-wrap justify-center gap-8 mt-12">
                    <div class="group text-center">
                        <div class="text-3xl font-bold text-loris-600 dark:text-loris-400 group-hover:scale-110 transition-transform duration-300">30+</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">Multi Technology</div>
                    </div>
                    <div class="group text-center">
                        <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 group-hover:scale-110 transition-transform duration-300">150+</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">Completed Projects</div>
                    </div>
                    <div class="group text-center">
                        <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 group-hover:scale-110 transition-transform duration-300">30+</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">Various Sectors</div>
                    </div>
                    <div class="group text-center">
                        <div class="text-3xl font-bold text-green-600 dark:text-green-400 group-hover:scale-110 transition-transform duration-300">15+</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">Years Experienced Team</div>
                    </div>
                </div>
            </div>
            
            <!-- Enhanced Interactive Service Cards -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
                
                <!-- Web & Mobile Development -->
                <div class="group relative col-span-1 lg:col-span-1" data-animate>
                    <div class="relative p-10 bg-white/70 dark:bg-gray-900/70 backdrop-blur-lg border border-gray-200/60 dark:border-gray-700/60 rounded-3xl hover:bg-white/90 dark:hover:bg-gray-900/90 hover:border-loris-400/60 dark:hover:border-loris-500/60 transition-all duration-700 hover:-translate-y-4 hover:shadow-2xl hover:shadow-loris-500/30 h-full overflow-hidden cursor-pointer service-card-glow" onclick="if (!window.__cfRLUnblockHandlers) return false; openServiceModal('development', this)" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        
                        <!-- Dual Mascot Header with Enhanced Hover Effects -->
                        <div class="flex items-center justify-center mb-8">
                            <div class="relative flex items-center gap-6">
                                <!-- Development Loris with Personality -->
                                <div class="relative group/dev-loris" title="💻 Development Loris: 'Koda aşığım!'">
                                    <div class="w-24 h-24 bg-gradient-to-br from-loris-100 to-loris-200 dark:from-loris-800/30 dark:to-loris-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-loris-500/20">
                                        <img src="https://devloris.com/images/loris-develop.png" 
                                             alt="Development Loris" 
                                             class="w-14 h-14 group-hover:rotate-12 group-hover:scale-110 transition-all duration-500 loris-hover-bounce">
                                    </div>
                                    <!-- Enhanced Glow Effect -->
                                    <div class="absolute inset-0 bg-gradient-to-br from-loris-400/20 to-loris-600/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                    <!-- Floating Code Symbols -->
                                    <div class="absolute -top-2 -right-1 text-xs opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-all duration-500 delay-200">
                                        <span class="text-loris-600">{'}'}</span>
                                    </div>
                                    <div class="absolute -bottom-1 -left-2 text-xs opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-all duration-500 delay-300">
                                        <span class="text-blue-600">{'</'}</span>
                                    </div>
                                </div>
                    
                                <!-- Mobile Loris with Personality -->
                                <div class="relative group/mobile-loris" title="📱 Mobile Loris: 'Her ekrana uyum sağlarım!'">
                                    <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-800/30 dark:to-blue-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:-rotate-3 transition-all duration-500 shadow-lg shadow-blue-500/20">
                                        <img src="https://devloris.com/images/loris-mobile.png" 
                                             alt="Mobile Loris" 
                                             class="w-12 h-12 group-hover:-rotate-12 group-hover:scale-110 transition-all duration-500 loris-hover-wiggle">
                                    </div>
                                    <!-- Enhanced Glow Effect -->
                                    <div class="absolute inset-0 bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                    <!-- Floating Mobile Icons -->
                                    <div class="absolute -top-1 -right-1 text-xs opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-all duration-500 delay-200">
                                        <span class="text-blue-600">📱</span>
                                    </div>
                                    <div class="absolute -bottom-1 -left-1 text-xs opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-all duration-500 delay-400">
                                        <span class="text-indigo-600">⚡</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="space-y-6 text-center">
                            <h3 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white group-hover:text-loris-700 dark:group-hover:text-loris-300 transition-colors duration-300">
                                Web &amp; Mobile Development
                        </h3>
                            <p class="text-gray-600 dark:text-gray-300 leading-relaxed text-lg">
                                Modern web applications, e-commerce solutions, and mobile apps that drive your business forward with cutting-edge technology.
                        </p>
                        
                        <!-- Tech Stack Tags -->
                            <div class="flex flex-wrap justify-center gap-2 pt-4">
                                <span class="px-4 py-2 text-sm font-medium bg-loris-100 dark:bg-loris-900/30 text-loris-700 dark:text-loris-300 rounded-full border border-loris-200/50 dark:border-loris-700/50 hover:bg-loris-200 dark:hover:bg-loris-800/30 transition-colors">
                                    E-commerce Platforms
                            </span>
                                <span class="px-4 py-2 text-sm font-medium bg-loris-100 dark:bg-loris-900/30 text-loris-700 dark:text-loris-300 rounded-full border border-loris-200/50 dark:border-loris-700/50 hover:bg-loris-200 dark:hover:bg-loris-800/30 transition-colors">
                                    Web Applications
                            </span>
                                <span class="px-4 py-2 text-sm font-medium bg-loris-100 dark:bg-loris-900/30 text-loris-700 dark:text-loris-300 rounded-full border border-loris-200/50 dark:border-loris-700/50 hover:bg-loris-200 dark:hover:bg-loris-800/30 transition-colors">
                                    Enterprise Software
                                </span>
                                <span class="px-4 py-2 text-sm font-medium bg-loris-100 dark:bg-loris-900/30 text-loris-700 dark:text-loris-300 rounded-full border border-loris-200/50 dark:border-loris-700/50 hover:bg-loris-200 dark:hover:bg-loris-800/30 transition-colors">
                                    Mobile Applications
                            </span>
                        </div>
                            
                            <!-- Service Action Button -->
                            <div class="mt-8 opacity-0 group-hover:opacity-100 transition-all duration-500 transform translate-y-4 group-hover:translate-y-0">
                                <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-loris-500 to-loris-600 text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-loris-500/30 transition-all duration-300">
                                    <span class="mr-2">View Details</span>
                                    <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                    </svg>
                                </div>
                        </div>
                    </div>
                    
                    <!-- Hover Border Effect -->
                        <div class="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-loris-400/40 dark:group-hover:border-loris-500/40 transition-all duration-700"></div>
                        
                        <!-- Floating Particles Effect -->
                        <div class="absolute inset-0 pointer-events-none">
                            <div class="absolute top-4 right-4 w-2 h-2 bg-loris-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-all duration-500"></div>
                            <div class="absolute bottom-6 left-6 w-1 h-1 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-all duration-700 delay-200"></div>
                        </div>
                    </div>
                </div>
                
                <!-- UI/UX & Design -->
                <div class="group relative col-span-1 lg:col-span-1" data-animate>
                    <div class="relative p-10 bg-white/70 dark:bg-gray-900/70 backdrop-blur-lg border border-gray-200/60 dark:border-gray-700/60 rounded-3xl hover:bg-white/90 dark:hover:bg-gray-900/90 hover:border-indigo-400/60 dark:hover:border-indigo-500/60 transition-all duration-700 hover:-translate-y-4 hover:shadow-2xl hover:shadow-indigo-500/30 h-full overflow-hidden cursor-pointer service-card-glow" onclick="if (!window.__cfRLUnblockHandlers) return false; openServiceModal('design', this)" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        
                        <!-- Design Mascot Header with Creative Personality -->
                        <div class="flex items-center justify-center mb-8">
                            <div class="relative group/design-loris" title="✨ Design Loris: 'Güzellik kodda da saklı!'">
                                <div class="w-24 h-24 bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-800/30 dark:to-indigo-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-indigo-500/20">
                                    <img src="https://devloris.com/images/loris-write.png" 
                                         alt="Designer Loris" 
                                         class="w-14 h-14 group-hover:-rotate-6 group-hover:scale-110 transition-all duration-500 loris-hover-float">
                                </div>
                                <!-- Enhanced Glow Effect -->
                                <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/20 to-indigo-600/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                
                                <!-- Enhanced Creative Sparkles -->
                                <div class="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-r from-pink-400 to-purple-400 rounded-full opacity-75 group-hover:scale-150 group-hover:rotate-180 transition-all duration-700">
                                    <div class="absolute inset-0 animate-ping bg-pink-400/50 rounded-full opacity-0 group-hover:opacity-100"></div>
                                </div>
                                <div class="absolute -bottom-2 -left-2 w-4 h-4 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full opacity-60 group-hover:scale-125 group-hover:-rotate-90 transition-all duration-500 delay-200">
                                    <div class="absolute inset-0 animate-pulse bg-yellow-400/50 rounded-full opacity-0 group-hover:opacity-100"></div>
                                </div>
                                
                                <!-- Floating Design Elements -->
                                <div class="absolute top-0 left-0 text-xs opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-all duration-500 delay-300">
                                    <span class="text-indigo-600">🎨</span>
                                </div>
                                <div class="absolute -bottom-1 right-0 text-xs opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-all duration-500 delay-500">
                                    <span class="text-purple-600">✨</span>
                                </div>
                            </div>
                        </div>
                    
                        <div class="space-y-6 text-center">
                            <h3 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white group-hover:text-indigo-700 dark:group-hover:text-indigo-300 transition-colors duration-300">
                                UI/UX &amp; Design
                        </h3>
                            <p class="text-gray-600 dark:text-gray-300 leading-relaxed text-lg">
                                Beautiful, user-centered designs that create exceptional digital experiences and strong brand identities for your business.
                            </p>
                            
                            <!-- Design Tags -->
                            <div class="flex flex-wrap justify-center gap-2 pt-4">
                                <span class="px-4 py-2 text-sm font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-full border border-indigo-200/50 dark:border-indigo-700/50 hover:bg-indigo-200 dark:hover:bg-indigo-800/30 transition-colors">
                                    Logo &amp; Corporate Identity
                            </span>
                                <span class="px-4 py-2 text-sm font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-full border border-indigo-200/50 dark:border-indigo-700/50 hover:bg-indigo-200 dark:hover:bg-indigo-800/30 transition-colors">
                                    UX Research
                            </span>
                                <span class="px-4 py-2 text-sm font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-full border border-indigo-200/50 dark:border-indigo-700/50 hover:bg-indigo-200 dark:hover:bg-indigo-800/30 transition-colors">
                                    Prototyping &amp; Wireframe
                                </span>
                                <span class="px-4 py-2 text-sm font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-full border border-indigo-200/50 dark:border-indigo-700/50 hover:bg-indigo-200 dark:hover:bg-indigo-800/30 transition-colors">
                                                                            Visual Communication
                            </span>
                        </div>
                            
                            <!-- Design Action Button -->
                            <div class="mt-8 opacity-0 group-hover:opacity-100 transition-all duration-500 transform translate-y-4 group-hover:translate-y-0">
                                <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-indigo-500 to-indigo-600 text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-indigo-500/30 transition-all duration-300">
                                    <span class="mr-2">View Details</span>
                                    <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                    </svg>
                                </div>
                        </div>
                    </div>
                    
                    <!-- Hover Border Effect -->
                        <div class="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-indigo-400/40 dark:group-hover:border-indigo-500/40 transition-all duration-700"></div>
                        
                        <!-- Floating Particles Effect -->
                        <div class="absolute inset-0 pointer-events-none">
                            <div class="absolute top-4 right-4 w-2 h-2 bg-indigo-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-all duration-500"></div>
                            <div class="absolute bottom-6 left-6 w-1 h-1 bg-purple-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-all duration-700 delay-200"></div>
                        </div>
                    </div>
                </div>
                
                <!-- Cloud & Consulting -->
                <div class="group relative col-span-1 lg:col-span-1" data-animate>
                    <div class="relative p-10 bg-white/70 dark:bg-gray-900/70 backdrop-blur-lg border border-gray-200/60 dark:border-gray-700/60 rounded-3xl hover:bg-white/90 dark:hover:bg-gray-900/90 hover:border-amber-400/60 dark:hover:border-amber-500/60 transition-all duration-700 hover:-translate-y-4 hover:shadow-2xl hover:shadow-amber-500/30 h-full overflow-hidden cursor-pointer service-card-glow" onclick="if (!window.__cfRLUnblockHandlers) return false; openServiceModal('consulting', this)" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        
                        <!-- Coffee Mascot Header with Energetic Personality -->
                        <div class="flex items-center justify-center mb-8">
                            <div class="relative group/coffee-loris" title="☕ Coffee Loris: 'Kahve bittiyse, gece uzar!'">
                                <div class="w-24 h-24 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-amber-800/30 dark:to-amber-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-amber-500/20">
                                    <img src="https://devloris.com/images/loris-coffee.png" 
                                         alt="Coffee Loris" 
                                         class="w-14 h-14 group-hover:rotate-6 group-hover:scale-110 transition-all duration-500 loris-coffee-energy">
                                </div>
                                <!-- Enhanced Glow Effect -->
                                <div class="absolute inset-0 bg-gradient-to-br from-amber-400/20 to-amber-600/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                
                                <!-- Enhanced Coffee Steam Animation -->
                                <div class="absolute -top-1 left-1/2 transform -translate-x-1/2">
                                    <div class="w-1 h-3 bg-gradient-to-t from-amber-400 to-transparent rounded-full opacity-0 group-hover:opacity-70 group-hover:animate-pulse transition-all duration-500">
                                        <div class="absolute inset-0 bg-amber-300 rounded-full animate-ping opacity-0 group-hover:opacity-30"></div>
                                    </div>
                                    <div class="w-1 h-2 bg-gradient-to-t from-amber-300 to-transparent rounded-full opacity-0 group-hover:opacity-50 group-hover:animate-pulse transition-all duration-500 delay-200 ml-1">
                                        <div class="absolute inset-0 bg-amber-200 rounded-full animate-pulse opacity-0 group-hover:opacity-40"></div>
                                    </div>
                                    <div class="w-1 h-1 bg-gradient-to-t from-amber-200 to-transparent rounded-full opacity-0 group-hover:opacity-30 group-hover:animate-bounce transition-all duration-500 delay-400 -ml-0.5">
                                    </div>
                                </div> 
                                
                                <!-- Coffee Energy Elements -->
                                <div class="absolute -top-2 -left-2 text-xs opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-all duration-500 delay-300">
                                    <span class="text-amber-600">☕</span>
                                </div>
                                <div class="absolute -bottom-1 -right-2 text-xs opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-all duration-500 delay-600">
                                    <span class="text-orange-600">⚡</span>
                                </div>
                                <div class="absolute top-1 right-1 text-xs opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-all duration-500 delay-800">
                                    <span class="text-yellow-600">💪</span>
                                </div>
                            </div>
                        </div>
                    
                        <div class="space-y-6 text-center">
                            <h3 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-300">
                                Cloud &amp; Consulting
                        </h3>
                            <p class="text-gray-600 dark:text-gray-300 leading-relaxed text-lg">
                                Enterprise-grade cloud infrastructure, ERP systems, CRM solutions, and strategic consulting for digital transformation.
                            </p>
                            
                            <!-- Consulting Tags -->
                            <div class="flex flex-wrap justify-center gap-2 pt-4">
                                <span class="px-4 py-2 text-sm font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full border border-amber-200/50 dark:border-amber-700/50 hover:bg-amber-200 dark:hover:bg-amber-800/30 transition-colors">
                                    Business Process Management
                            </span>
                                <span class="px-4 py-2 text-sm font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full border border-amber-200/50 dark:border-amber-700/50 hover:bg-amber-200 dark:hover:bg-amber-800/30 transition-colors">
                                    Customer Relations
                            </span>
                                <span class="px-4 py-2 text-sm font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full border border-amber-200/50 dark:border-amber-700/50 hover:bg-amber-200 dark:hover:bg-amber-800/30 transition-colors">
                                    Server &amp; Hosting
                                </span>
                                <span class="px-4 py-2 text-sm font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full border border-amber-200/50 dark:border-amber-700/50 hover:bg-amber-200 dark:hover:bg-amber-800/30 transition-colors">
                                    Digital Transformation Consulting
                            </span>
                        </div>
                            
                            <!-- Consulting Action Button -->
                            <div class="mt-8 opacity-0 group-hover:opacity-100 transition-all duration-500 transform translate-y-4 group-hover:translate-y-0">
                                <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-amber-500/30 transition-all duration-300">
                                    <span class="mr-2">View Details</span>
                                    <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                    </svg>
                                </div>
                        </div>
                    </div>
                    
                    <!-- Hover Border Effect -->
                        <div class="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-amber-400/40 dark:group-hover:border-amber-500/40 transition-all duration-700"></div>
                        
                        <!-- Floating Particles Effect -->
                        <div class="absolute inset-0 pointer-events-none">
                            <div class="absolute top-4 right-4 w-2 h-2 bg-amber-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-all duration-500"></div>
                            <div class="absolute bottom-6 left-6 w-1 h-1 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-all duration-700 delay-200"></div>
                        </div>
                    </div>
                </div>
                
                    </div>
                </div>
    </section>

    <!-- CTO & Product Teams Section -->
    <section class="py-24 bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 relative overflow-hidden">
        <!-- Background Effects -->
        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-indigo-600/10"></div>
        <div class="absolute top-0 left-0 w-full h-full">
            <div class="absolute top-20 left-10 w-96 h-96 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
            <div class="absolute bottom-20 right-10 w-80 h-80 bg-gradient-to-r from-purple-500/20 to-indigo-500/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
                    </div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            
            <!-- Main Content -->
            <div class="grid lg:grid-cols-2 gap-16 items-center">
                
                <!-- Left Content -->
                <div class="space-y-8" data-animate>
                    
                    <!-- Arrow & Main Message -->
                    <div class="flex items-start space-x-4 group">
                        <div class="flex-shrink-0 mt-2">
                            <div class="w-8 h-8 bg-gradient-to-r from-loris-400 to-loris-600 rounded-full flex items-center justify-center transform group-hover:scale-110 group-hover:rotate-12 transition-all duration-500">
                                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                            </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h2 class="text-4xl md:text-6xl font-bold text-white leading-tight mb-6">
                                <span class="inline-block hover:text-loris-300 transition-colors duration-300">We help CTOs</span>
                                <span class="text-gray-300"> and </span>
                                <span class="inline-block hover:text-blue-300 transition-colors duration-300">Product</span>
                                <br>
                                <span class="inline-block hover:text-purple-300 transition-colors duration-300">Teams</span>
                                <span class="text-gray-300">   </span>
                                <span class="bg-gradient-to-r from-loris-400 via-blue-400 to-purple-400 bg-clip-text text-transparent"> </span>
                            </h2>
                        </div>
                </div>
                
                    <!-- Value Propositions -->
                    <div class="space-y-6">
                        
                        <!-- Reliable Technology Partnership -->
                        <div class="group flex items-start space-x-4 p-6 bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl hover:bg-white/10 hover:border-loris-400/30 transition-all duration-500">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-gradient-to-br from-loris-500/20 to-loris-600/20 rounded-xl flex items-center justify-center border border-loris-400/20">
                                    <img src="https://devloris.com/images/loris-develop.png" 
                                         alt="Development Loris" 
                                         class="w-7 h-7 group-hover:scale-110 group-hover:rotate-6 transition-all duration-300">
                    </div>
                </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-loris-300 transition-colors duration-300">
                                    Reliable Technology Partnership
                                </h3>
                                <p class="text-gray-300 leading-relaxed">
                                    We take your business to a secure future with modern technologies and quality code writing.
                                </p>
            </div>
        </div>
                        
                        <!-- Business-Focused Solutions -->
                        <div class="group flex items-start space-x-4 p-6 bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl hover:bg-white/10 hover:border-blue-400/30 transition-all duration-500">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-xl flex items-center justify-center border border-blue-400/20">
                                    <img src="https://devloris.com/images/loris-write.png" 
                                         alt="Strategy Loris" 
                                         class="w-7 h-7 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-300">
                                </div>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors duration-300">
                                    Business-Focused Solutions
                                </h3>
                                <p class="text-gray-300 leading-relaxed">
                                    We develop customized software solutions by analyzing your business needs.
                                </p>
                            </div>
            </div>
            
                        <!-- Flexible Support Models -->
                        <div class="group flex items-start space-x-4 p-6 bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl hover:bg-white/10 hover:border-purple-400/30 transition-all duration-500">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-gradient-to-br from-purple-500/20 to-purple-600/20 rounded-xl flex items-center justify-center border border-purple-400/20">
                                    <img src="https://devloris.com/images/loris-coffee.png" 
                                         alt="Team Loris" 
                                         class="w-7 h-7 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300">
                                </div>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-purple-300 transition-colors duration-300">
                                                                            Flexible Support Models
                                </h3>
                                <p class="text-gray-300 leading-relaxed">
                                    We provide project-based or continuous support according to your needs with our experienced team.
                                </p>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
                
                <!-- Right Content - Interactive Stats -->
                <div class="space-y-8" data-animate>
                    
                    <!-- Stats Grid -->
                    <div class="grid grid-cols-2 gap-6">
                        
                        <!-- Industry Experience -->
                        <div class="group relative p-8 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-3xl hover:border-loris-400/50 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-loris-500/20">
                            <div class="absolute inset-0 bg-gradient-to-br from-loris-500/10 to-transparent rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <div class="relative z-10 text-center">
                                <div class="text-4xl font-bold text-loris-300 mb-2 group-hover:scale-110 transition-transform duration-300">30+</div>
                                <div class="text-sm text-gray-300 font-medium">Industry Experience</div>
                        </div>
                        </div>
                        
                        <!-- On-Time Delivery -->
                        <div class="group relative p-8 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-3xl hover:border-blue-400/50 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-blue-500/20">
                            <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <div class="relative z-10 text-center">
                                <div class="text-4xl font-bold text-blue-300 mb-2 group-hover:scale-110 transition-transform duration-300">✓</div>
                                <div class="text-sm text-gray-300 font-medium">On-Time Delivery</div>
                        </div>
                    </div>
                    
                        <!-- Long-term Partnerships -->
                        <div class="group relative p-8 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-3xl hover:border-purple-400/50 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/20">
                            <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <div class="relative z-10 text-center">
                                <div class="text-4xl font-bold text-purple-300 mb-2 group-hover:scale-110 transition-transform duration-300">5+</div>
                                <div class="text-sm text-gray-300 font-medium">Years of Partnerships</div>
                        </div>
                        </div>
                        
                        <!-- Customer-Focused Approach -->
                        <div class="group relative p-8 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-3xl hover:border-green-400/50 transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-green-500/20">
                            <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <div class="relative z-10 text-center">
                                <div class="text-4xl font-bold text-green-300 mb-2 group-hover:scale-110 transition-transform duration-300">💚</div>
                                <div class="text-sm text-gray-300 font-medium">Customer Focused</div>
                        </div>
                    </div>
                    
                    </div>
                    
                    <!-- Call to Action -->
                    <div class="relative p-8 bg-gradient-to-r from-loris-600/20 via-blue-600/20 to-purple-600/20 backdrop-blur-md border border-white/20 rounded-3xl">
                        <div class="text-center">
                            <h3 class="text-2xl font-bold text-white mb-4">
                                Let&#039;s Grow Together
                            </h3>
                            <p class="text-gray-300 mb-6 leading-relaxed">
                                Our team passionate about turning your ideas into reality is ready to discover your project&#039;s potential. Let&#039;s start with a free consultation!
                            </p>
                            <button onclick="if (!window.__cfRLUnblockHandlers) return false; openContactModal('consultation', this)" class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-loris-500 to-loris-700 text-white font-semibold rounded-xl hover:shadow-2xl hover:shadow-loris-500/30 hover:scale-105 transition-all duration-300" data-cf-modified-63af1a45ceaed83f990291b1-="">
                                Free Consultation
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                            </button>
                        </div>
                        
                        <!-- Floating Elements -->
                        <div class="absolute -top-2 -right-2 w-12 h-12 bg-loris-500/20 rounded-full blur-xl animate-pulse"></div>
                        <div class="absolute -bottom-2 -left-2 w-16 h-16 bg-blue-500/20 rounded-full blur-xl animate-pulse delay-1000"></div>
                        </div>
                    
                    </div>
                    
            </div>
            
        </div>
    </section>


    <!-- Excellence in Action Section -->
    <section class="py-24 bg-gradient-to-br from-gray-50 via-white to-blue-50/30 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 relative overflow-hidden">
        <!-- Background Pattern -->
        <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
        
        <!-- Floating Background Elements -->
        <div class="absolute top-20 left-10 w-72 h-72 bg-gradient-to-r from-loris-600/10 to-blue-600/10 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-20 right-10 w-96 h-96 bg-gradient-to-r from-purple-600/10 to-amber-600/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            
            <!-- Premium Header -->
            <div class="text-center mb-20" data-animate>
                <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-loris-100 to-blue-100 dark:from-loris-900/30 dark:to-blue-900/30 rounded-full text-loris-800 dark:text-loris-200 text-sm font-medium mb-6 border border-loris-200/50 dark:border-loris-700/50">
                            <img src="https://devloris.com/images/loris-coffee.png" 
                                 alt="Coffee Loris" 
                         class="w-5 h-5 mr-2 animate-pulse">
                    Professional Software from Istanbul to the World
                        </div>
                
                <h2 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
                    <span class="bg-gradient-to-r from-loris-600 via-blue-600 to-purple-600 bg-clip-text text-transparent">
                        Excellence
                    </span>
                    <br>
                    Lives in Our Code
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-4xl mx-auto leading-relaxed">
                    We don&#039;t just write code - we turn digital dreams into reality. Every line of our code is a work of art that takes your business one step further.
                </p>
                        </div>

            <!-- Main Content Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 lg:gap-8 items-start">
                
                <!-- Left Features -->
                <div class="lg:col-span-1 space-y-8" data-animate>
                    <!-- Istanbul Advantage -->
                    <div class="group relative p-6 bg-white/60 dark:bg-gray-900/60 backdrop-blur-md border border-gray-200/50 dark:border-gray-700/50 rounded-3xl hover:bg-white/80 dark:hover:bg-gray-900/80 hover:border-loris-300/50 dark:hover:border-loris-500/50 transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl hover:shadow-loris-500/20">
                        <div class="text-center">
                            <div class="w-16 h-16 bg-gradient-to-br from-loris-100 to-loris-200 dark:from-loris-800/30 dark:to-loris-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-loris-500/20">
                                <svg class="w-8 h-8 text-loris-600 dark:text-loris-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-loris-700 dark:group-hover:text-loris-300 transition-colors duration-300">
                                                                        Local Support
                            </h3>
                            <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                                We provide fast support to your projects through close communication with our Istanbul-based team.
                            </p>
                    </div>
                </div>
                
                    <!-- 24/7 Support -->
                    <div class="group relative p-6 bg-white/60 dark:bg-gray-900/60 backdrop-blur-md border border-gray-200/50 dark:border-gray-700/50 rounded-3xl hover:bg-white/80 dark:hover:bg-gray-900/80 hover:border-blue-300/50 dark:hover:border-blue-500/50 transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl hover:shadow-blue-500/20">
                        <div class="text-center">
                            <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-800/30 dark:to-blue-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-blue-500/20">
                                <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300">
                                                                    Continuous Support
                            </h3>
                            <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                                                                    We&#039;re with you at every stage of your project. You can get support whenever you need it.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Center Code Block -->
                <div class="lg:col-span-3 relative" data-animate>
                    <div class="code-editor bg-gray-900 rounded-3xl overflow-hidden shadow-2xl border border-gray-700 transform hover:scale-105 transition-all duration-700">
                        <!-- Editor Header -->
                        <div class="flex items-center justify-between px-6 py-4 bg-gray-800 border-b border-gray-700">
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                                <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                                <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                            </div>
                            <div class="text-gray-400 text-sm font-mono flex items-center">
                                <img src="https://devloris.com/images/loris-develop.png" 
                                     alt="Development Loris" 
                                     class="w-4 h-4 mr-2">
                                DevlorisExcellence.php
                            </div>
                            <div class="flex items-center space-x-2">
                                <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                                <span class="text-xs text-gray-400">Live</span>
                            </div>
                        </div>
                        
                        <!-- Editor Tabs -->
                        <div class="flex bg-gray-800 border-b border-gray-700">
                            <div class="px-4 py-2 bg-gray-900 text-loris-400 text-sm font-mono border-r border-gray-700 flex items-center">
                                <span class="w-2 h-2 bg-loris-400 rounded-full mr-2"></span>
                                Excellence.php
                            </div>
                            <div class="px-4 py-2 text-gray-500 text-sm font-mono">Success.js</div>
                            <div class="px-4 py-2 text-gray-500 text-sm font-mono">Premium.css</div>
                        </div>
                        
                                                 <!-- Code Content -->
                        <div class="p-6 bg-gray-900 font-mono text-sm leading-relaxed">
                             <div class="space-y-2 text-left">
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">1</span>
                                     <span class="text-purple-400">&lt;?php</span>
                                 </div>
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">2</span>
                                     <span></span>
                                 </div>
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">3</span>
                                    <span><span class="text-purple-400">class</span> <span class="text-yellow-300">DevlorisExcellence</span></span>
                                 </div>
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">4</span>
                                     <span class="text-gray-400">{</span>
                                 </div>
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">5</span>
                                    <span class="ml-4"><span class="text-purple-400">public function</span> <span class="text-blue-400">createMagic</span><span class="text-gray-400">()</span></span>
                                 </div>
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">6</span>
                                     <span class="ml-4 text-gray-400">{</span>
                                 </div>
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">7</span>
                                     <span class="ml-8"><span class="text-purple-400">return</span> <span class="text-gray-400">[</span></span>
                                 </div>
                                <div class="flex items-center" data-line="8">
                                     <span class="text-gray-600 mr-4 w-6 text-right">8</span>
                                    <span class="ml-12 code-content"></span>
                                 </div>
                                <div class="flex items-center" data-line="9">
                                     <span class="text-gray-600 mr-4 w-6 text-right">9</span>
                                    <span class="ml-12 code-content"></span>
                                 </div>
                                <div class="flex items-center" data-line="10">
                                     <span class="text-gray-600 mr-4 w-6 text-right">10</span>
                                    <span class="ml-12 code-content"></span>
                                 </div>
                                <div class="flex items-center" data-line="11">
                                     <span class="text-gray-600 mr-4 w-6 text-right">11</span>
                                    <span class="ml-12 code-content"></span>
                                 </div>
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">12</span>
                                     <span class="ml-8 text-gray-400">];</span>
                                 </div>
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">13</span>
                                     <span class="ml-4 text-gray-400">}</span>
                                 </div>
                                <div class="flex items-center">
                                     <span class="text-gray-600 mr-4 w-6 text-right">14</span>
                                     <span class="text-gray-400">}</span>
                                 </div>
                             </div>
                         </div>
                        
                        <!-- Editor Footer -->
                        <div class="flex items-center justify-between px-6 py-3 bg-gray-800 border-t border-gray-700 text-xs">
                            <div class="flex items-center space-x-4 text-gray-400">
                                <span class="flex items-center">
                                    <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
                                    PHP 8.4 
                                </span>
                                <span>Istanbul, Turkey</span>
                                <span>UTF-8</span>
                            </div>
                            <div class="text-loris-400 font-medium">
                                Excellence Mode: ON
                            </div>
                        </div>
                    </div>
                    
                    <!-- Floating Elements around Code -->
                    <div class="absolute -top-4 -left-4 w-20 h-20 bg-loris-500/10 rounded-full blur-xl animate-pulse"></div>
                    <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-blue-500/10 rounded-full blur-xl animate-pulse delay-1000"></div>
                </div>

                <!-- Right Features -->
                <div class="lg:col-span-1 space-y-8" data-animate>
                    <!-- Innovation -->
                    <div class="group relative p-6 bg-white/60 dark:bg-gray-900/60 backdrop-blur-md border border-gray-200/50 dark:border-gray-700/50 rounded-3xl hover:bg-white/80 dark:hover:bg-gray-900/80 hover:border-purple-300/50 dark:hover:border-purple-500/50 transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl hover:shadow-purple-500/20">
                        <div class="text-center">
                            <div class="w-16 h-16 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-800/30 dark:to-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-purple-500/20">
                                <svg class="w-8 h-8 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                </svg>
            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors duration-300">
                                                                    Continuous Innovation
                            </h3>
                            <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                                                                    We follow the latest technologies and offer tomorrow&#039;s solutions to today&#039;s needs.
                            </p>
                        </div>
                    </div>

                    <!-- Premium Experience -->
                    <div class="group relative p-6 bg-white/60 dark:bg-gray-900/60 backdrop-blur-md border border-gray-200/50 dark:border-gray-700/50 rounded-3xl hover:bg-white/80 dark:hover:bg-gray-900/80 hover:border-amber-300/50 dark:hover:border-amber-500/50 transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl hover:shadow-amber-500/20">
                        <div class="text-center">
                            <div class="w-16 h-16 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-amber-800/30 dark:to-amber-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-amber-500/20">
                                <img src="https://devloris.com/images/loris-write.png" 
                                     alt="Designer Loris" 
                                     class="w-9 h-9 group-hover:-rotate-6 group-hover:scale-110 transition-all duration-500">
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-300">
                                                                    Personal Approach
                            </h3>
                            <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                                Every project is special, every customer is valuable. We design customized solutions for you.
                            </p>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Bottom Stats -->
            <div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 text-center" data-animate>
                <div class="group">
                    <div class="text-4xl font-bold text-loris-600 dark:text-loris-400 mb-2 group-hover:scale-110 transition-transform duration-300">💚</div>
                                            <div class="text-sm text-gray-600 dark:text-gray-400">High Satisfaction</div>
                </div>
                <div class="group">
                    <div class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2 group-hover:scale-110 transition-transform duration-300">⚡</div>
                    <div class="text-sm text-gray-600 dark:text-gray-400">Quick Start</div>
                </div>
                <div class="group">
                    <div class="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-2 group-hover:scale-110 transition-transform duration-300">150+</div>
                                            <div class="text-sm text-gray-600 dark:text-gray-400">Successful Project</div>
                </div>
                <div class="group">
                    <div class="text-4xl font-bold text-amber-600 dark:text-amber-400 mb-2 group-hover:scale-110 transition-transform duration-300">☕</div>
                                            <div class="text-sm text-gray-600 dark:text-gray-400">Continuous Motivation</div>
                </div>
            </div>

        </div>
    </section>

    <!-- Trusted By Section -->
    <section id="references" class="py-16 bg-gray-50 dark:bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            <!-- Section Header -->
            <div class="text-center mb-12" data-animate>
                <div class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-900 rounded-full text-gray-600 dark:text-gray-400 text-sm font-medium mb-4 shadow-sm border border-gray-200 dark:border-gray-700">
                    <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
                                                            Trusted Partner
                </div>
                <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">
                    <span class="text-gray-600 dark:text-gray-400 font-normal">With 150+ Successful Collaborations</span>
                    <br>
                    Your Trusted Business Partner
            </h2>
                <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                    Your reliable partner in projects of all scales, from small businesses to large companies.
                </p>
            </div>

            <!-- Client Types Grid -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16" data-animate>
                
                <!-- Startups -->
                <div class="group text-center p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-loris-300 dark:hover:border-loris-500 hover:shadow-lg transition-all duration-300">
                    <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Startups</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">From idea to product</p>
                    <div class="text-2xl font-bold text-blue-600 dark:text-blue-400 mt-3">25+</div>
                </div>

                <!-- SMEs -->
                <div class="group text-center p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-loris-300 dark:hover:border-loris-500 hover:shadow-lg transition-all duration-300">
                    <div class="w-16 h-16 bg-gradient-to-br from-loris-100 to-loris-200 dark:from-loris-900/30 dark:to-loris-800/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-loris-600 dark:text-loris-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">SMEs</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Digital transformation solutions</p>
                    <div class="text-2xl font-bold text-loris-600 dark:text-loris-400 mt-3">85+</div>
                </div>

                <!-- Enterprises -->
                <div class="group text-center p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-loris-300 dark:hover:border-loris-500 hover:shadow-lg transition-all duration-300">
                    <div class="w-16 h-16 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/30 dark:to-purple-800/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0H8m8 0v2a2 2 0 002 2M8 6v2a2 2 0 002 2m0 0h4m-4 0a2 2 0 00-2 2v4a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Corporate</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Large-scale projects</p>
                    <div class="text-2xl font-bold text-purple-600 dark:text-purple-400 mt-3">30+</div>
                </div>

                <!-- Agencies -->
                <div class="group text-center p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-loris-300 dark:hover:border-loris-500 hover:shadow-lg transition-all duration-300">
                    <div class="w-16 h-16 bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Agencies</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Technical partnerships</p>
                    <div class="text-2xl font-bold text-green-600 dark:text-green-400 mt-3">15+</div>
                </div>

            </div>

            <!-- Interactive Network Visualization -->
            <div class="mt-20 mb-16" data-animate>
                <div class="text-center mb-12">
                    <div class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-loris-100 to-loris-200 dark:from-loris-900/30 dark:to-loris-800/30 rounded-full text-loris-700 dark:text-loris-300 text-sm font-medium mb-4 shadow-sm border border-loris-200 dark:border-loris-700">
                        <div class="w-2 h-2 bg-loris-500 rounded-full mr-2 animate-pulse"></div>
                        Teknoloji Altyapımız
                    </div>
                    <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3">
                        Modern Teknolojilerle Güçlü Çözümler
                    </h3>
                    <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto text-sm">
                        Premium projelerimizde kullandığımız güncel teknoloji yığını
                    </p>
                </div>
                
                <!-- Technical Specifications Grid -->
                <div class="max-w-6xl mx-auto">
                    <!-- Main Tech Categories -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                        <!-- Backend -->
                        <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-200/50 dark:border-gray-700/50 shadow-lg hover:shadow-xl transition-all duration-300 group">
                            <div class="flex items-center mb-4">
                                <div class="w-10 h-10 bg-gradient-to-br from-red-500 to-orange-500 rounded-xl flex items-center justify-center mr-3 group-hover:scale-110 transition-transform duration-300">
                                    <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 2L2 7v10c0 5.55 3.84 9.95 9 11 5.16-1.05 9-5.45 9-11V7l-10-5z"/>
                                </svg>
                            </div>
                                <h4 class="text-lg font-bold text-gray-900 dark:text-white">Backend Architecture</h4>
                            </div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Laravel 12 + Livewire 3</span>
                                    <span class="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-xs rounded-full font-medium">PHP</span>
                        </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Django 5 + DRF</span>
                                    <span class="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 text-xs rounded-full font-medium">Python</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Node.js 20 + Express</span>
                                    <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 text-xs rounded-full font-medium">JavaScript</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Go + Gin Framework</span>
                                    <span class="px-2 py-1 bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400 text-xs rounded-full font-medium">Performance</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">.NET Core 8 + ASP.NET</span>
                                    <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-xs rounded-full font-medium">Enterprise</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">GraphQL + REST APIs</span>
                                    <span class="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 text-xs rounded-full font-medium">API Design</span>
                                </div>
                    </div>
                </div>
                
                        <!-- Frontend -->
                        <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-200/50 dark:border-gray-700/50 shadow-lg hover:shadow-xl transition-all duration-300 group">
                            <div class="flex items-center mb-4">
                                <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mr-3 group-hover:scale-110 transition-transform duration-300">
                                    <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                    </svg>
                                </div>
                                <h4 class="text-lg font-bold text-gray-900 dark:text-white">Frontend Technologies</h4>
                            </div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">React 18 + Next.js 14</span>
                                    <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-xs rounded-full font-medium">Modern</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Vue.js 3 + Nuxt.js</span>
                                    <span class="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 text-xs rounded-full font-medium">Progressive</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Angular 17 + TypeScript</span>
                                    <span class="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-xs rounded-full font-medium">Enterprise</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Svelte + SvelteKit</span>
                                    <span class="px-2 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 text-xs rounded-full font-medium">Lightweight</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Alpine.js + Livewire</span>
                                    <span class="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 text-xs rounded-full font-medium">Reactive</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Tailwind CSS + SCSS</span>
                                    <span class="px-2 py-1 bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 text-xs rounded-full font-medium">Design</span>
                                </div>
                            </div>
                        </div>

                        <!-- DevOps & Cloud Infrastructure -->
                        <div class="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-200/50 dark:border-gray-700/50 shadow-lg hover:shadow-xl transition-all duration-300 group">
                            <div class="flex items-center mb-4">
                                <div class="w-10 h-10 bg-gradient-to-br from-gray-700 to-gray-900 rounded-xl flex items-center justify-center mr-3 group-hover:scale-110 transition-transform duration-300">
                                    <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                    </svg>
                                </div>
                                <h4 class="text-lg font-bold text-gray-900 dark:text-white">DevOps &amp; Cloud</h4>
                            </div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">AWS + Azure + GCP</span>
                                    <span class="px-2 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 text-xs rounded-full font-medium">Multi-Cloud</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Docker + Kubernetes</span>
                                    <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-xs rounded-full font-medium">Orchestration</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Terraform + Ansible</span>
                                    <span class="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 text-xs rounded-full font-medium">IaC</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">GitHub Actions + Jenkins</span>
                                    <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900/30 text-gray-600 dark:text-gray-400 text-xs rounded-full font-medium">CI/CD</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Nginx + CloudFlare</span>
                                    <span class="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 text-xs rounded-full font-medium">CDN</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Grafana + Prometheus</span>
                                    <span class="px-2 py-1 bg-pink-100 dark:bg-pink-900/30 text-pink-600 dark:text-pink-400 text-xs rounded-full font-medium">Monitoring</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Database, Cache & Mobile -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                        <div class="bg-gradient-to-br from-white/60 to-white/40 dark:from-gray-800/60 dark:to-gray-800/40 backdrop-blur-sm rounded-2xl p-6 border border-gray-200/50 dark:border-gray-700/50 shadow-lg">
                            <h5 class="text-base font-bold text-gray-900 dark:text-white mb-4 flex items-center">
                                <div class="w-8 h-8 bg-gradient-to-br from-blue-600 to-blue-800 rounded-lg flex items-center justify-center mr-3">
                                    <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 3C7.58 3 4 4.79 4 7v10c0 2.21 3.58 4 8 4s8-1.79 8-4V7c0-2.21-3.58-4-8-4z"/>
                                    </svg>
                                </div>
                                Database Solutions
                            </h5>
                            <div class="grid grid-cols-1 gap-3">
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">MySQL 8.0</span>
                                    <span class="text-xs text-blue-600 dark:text-blue-400">Relational</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">PostgreSQL 16</span>
                                    <span class="text-xs text-blue-600 dark:text-blue-400">Advanced SQL</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">MongoDB 7</span>
                                    <span class="text-xs text-green-600 dark:text-green-400">Document</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">InfluxDB</span>
                                    <span class="text-xs text-purple-600 dark:text-purple-400">Time Series</span>
                                </div>
                            </div>
                        </div>

                        <div class="bg-gradient-to-br from-white/60 to-white/40 dark:from-gray-800/60 dark:to-gray-800/40 backdrop-blur-sm rounded-2xl p-6 border border-gray-200/50 dark:border-gray-700/50 shadow-lg">
                            <h5 class="text-base font-bold text-gray-900 dark:text-white mb-4 flex items-center">
                                <div class="w-8 h-8 bg-gradient-to-br from-red-600 to-red-800 rounded-lg flex items-center justify-center mr-3">
                                    <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                    </svg>
                                </div>
                                Cache &amp; Performance
                            </h5>
                            <div class="grid grid-cols-1 gap-3">
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Redis 7</span>
                                    <span class="text-xs text-red-600 dark:text-red-400">In-Memory</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Memcached</span>
                                    <span class="text-xs text-orange-600 dark:text-orange-400">Distributed</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Elasticsearch</span>
                                    <span class="text-xs text-yellow-600 dark:text-yellow-400">Search</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Varnish Cache</span>
                                    <span class="text-xs text-purple-600 dark:text-purple-400">HTTP Cache</span>
                                </div>
                            </div>
                        </div>

                        <div class="bg-gradient-to-br from-white/60 to-white/40 dark:from-gray-800/60 dark:to-gray-800/40 backdrop-blur-sm rounded-2xl p-6 border border-gray-200/50 dark:border-gray-700/50 shadow-lg">
                            <h5 class="text-base font-bold text-gray-900 dark:text-white mb-4 flex items-center">
                                <div class="w-8 h-8 bg-gradient-to-br from-green-600 to-green-800 rounded-lg flex items-center justify-center mr-3">
                                    <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M17 4h-10c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 2h10v1H7V2zM7 21h10v1H7v-1z"/>
                                    </svg>
                                </div>
                                Mobile &amp; Cross-Platform
                            </h5>
                            <div class="grid grid-cols-1 gap-3">
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">React Native</span>
                                    <span class="text-xs text-blue-600 dark:text-blue-400">Cross-Platform</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Flutter</span>
                                    <span class="text-xs text-cyan-600 dark:text-cyan-400">Native Performance</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Swift + Kotlin</span>
                                    <span class="text-xs text-purple-600 dark:text-purple-400">Native</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-700/50 rounded-lg">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Expo + Cordova</span>
                                    <span class="text-xs text-green-600 dark:text-green-400">Hybrid</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Tech Stats -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mt-8 max-w-3xl mx-auto">
                    <div class="text-center group">
                        <div class="text-xl md:text-2xl font-bold text-loris-600 dark:text-loris-400 group-hover:scale-110 transition-transform duration-300">175+</div>
                        <div class="text-xs md:text-sm text-gray-600 dark:text-gray-400">Active Connections</div>
                    </div>
                    <div class="text-center group">
                        <div class="text-xl md:text-2xl font-bold text-blue-600 dark:text-blue-400 group-hover:scale-110 transition-transform duration-300">30+</div>
                        <div class="text-xs md:text-sm text-gray-600 dark:text-gray-400">Technology Partners</div>
                    </div>
                    <div class="text-center group">
                        <div class="text-xl md:text-2xl font-bold text-green-600 dark:text-green-400 group-hover:scale-110 transition-transform duration-300">15+</div>
                        <div class="text-xs md:text-sm text-gray-600 dark:text-gray-400">Industry Experience</div>
                    </div>
                    <div class="text-center group">
                        <div class="text-xl md:text-2xl font-bold text-purple-600 dark:text-purple-400 group-hover:scale-110 transition-transform duration-300">5+</div>
                        <div class="text-xs md:text-sm text-gray-600 dark:text-gray-400">Years in Istanbul</div>
                    </div>
                </div>
                
                <!-- Mobile Interaction Hint -->
                <div class="mt-6 text-center md:hidden">
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        Visit on desktop for interactive network experience
                    </p>
                </div>
            </div>

            <!-- Featured References Section -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-16" data-animate>
                <div class="text-center mb-12">
                    <div class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-loris-100 to-blue-100 dark:from-loris-900/30 dark:to-blue-900/30 rounded-full text-loris-700 dark:text-loris-300 text-sm font-medium mb-4 shadow-sm border border-loris-200/50 dark:border-loris-700/50">
                        <div class="w-2 h-2 bg-loris-500 rounded-full mr-2 animate-pulse"></div>
                        Featured References
                    </div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">
                        Selected examples from our collaborations
                    </h2>
                    <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                        Successful projects with trusted brands from various sectors
                    </p>
                </div>

                <!-- Featured Logos Compact Grid -->
                <div class="mb-16">
                    <!-- Compact 2-Row Grid (2 logos per row on mobile, 6 on desktop) -->
                    <div class="grid grid-cols-2 md:grid-cols-6 gap-4 md:gap-6 max-w-6xl mx-auto">
                        
                        <!-- Row 1: Gastronomi & Yaşam + Turizm -->
                        <!-- Pixi (Gastronomi) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-orange">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/pixi.png" 
                                     alt="Pixi" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>
                        
                        <!-- Yialos (Gastronomi) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-orange">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/yialos.png" 
                                     alt="Yialos" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>
                        
                       
                        <!-- Alaköy Pastanesi (Gastronomi) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-orange">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/alakoy-pastanesi.png" 
                                     alt="Alaköy Pastanesi" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>

                         <!-- Villa Secret Horizon (Turizm) -->
                         <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-blue">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/villa-secret-horizon.png" 
                                     alt="Villa Secret Horizon" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>
                        
                        
                        <!-- Kaipo (Turizm) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-blue">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/kaipo.png" 
                                     alt="Kaipo" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>

                        <!-- Neuron Clinic (Sağlık) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-teal">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/neuron-clinic.png" 
                                     alt="Neuron Clinic" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>
                        
                        <!-- Row 2: Sağlık + Mimari + E-ticaret -->
                        <!-- Makula (Sağlık) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-teal">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/makula.png" 
                                     alt="Makula" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>
                        
                        <!-- Peyzaj Planlama (Mimari) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-emerald">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/peyzaj-planlama.png" 
                                     alt="Peyzaj Planlama" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>
                        
                        <!-- Ediz Botanik (Mimari) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-emerald">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/ediz-botanik.png" 
                                     alt="Ediz Botanik" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>
                        
                        <!-- Utrailstore (E-ticaret) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-purple">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/utrailstore.png" 
                                     alt="Utrailstore" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>

                        <!-- Tiny Miny (E-ticaret) -->
                        <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-purple">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/tiny-miny.png" 
                                     alt="Tiny Miny" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>

                          <!-- Aydınlatma Online (E-ticaret) -->
                          <div class="group logo-container flex items-center justify-center p-6 rounded-2xl border-2 border-gray-300 dark:border-gray-600 hover:shadow-xl transition-all duration-300 min-h-[100px] logo-breathe-purple">
                            <div class="w-full h-12 flex items-center justify-center">
                                <img src="https://devloris.com/images/clients/aydinlatma-online.png" 
                                     alt="Aydınlatma Online" 
                                     class="client-logo max-w-full max-h-full object-contain transition-all duration-500"
                                     style="max-width: 120px; max-height: 48px;">
                            </div>
                        </div>
                    </div>
                    
                    
                </div>

                <!-- Load More Button -->
                <div class="text-center mb-12">
                    <button id="load-more-references" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleAllReferences()" class="group inline-flex items-center px-8 py-4 bg-gradient-to-r from-loris-500 to-blue-500 text-white font-semibold rounded-2xl hover:shadow-2xl hover:shadow-loris-500/30 hover:scale-105 transition-all duration-500 relative overflow-hidden" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        <!-- Button Background Animation -->
                        <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        
                        <!-- Button Content -->
                        <div class="relative z-10 flex items-center">
                            <span class="text-lg" id="load-more-text" 
                                  data-loading="Loading..."
                                  data-more="See More References"
                                  data-less="Show Less">See More References</span>
                            <span class="text-sm ml-2 opacity-80" id="load-more-count">(+63 marka daha)</span>
                            <div class="ml-3 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center group-hover:rotate-180 transition-transform duration-500" id="load-more-icon">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </div>
                        </div>
                    </button>
                </div>

                <!-- All References (Hidden by default) -->
                <div id="all-references" class="hidden">
                    <div class="border-t border-gray-200 dark:border-gray-700 pt-12 mb-12">
                        <div class="text-center mb-8">
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                                Our Reference Portfolio
                            </h3>
                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">
                                75+ successful collaborations from various sectors
                            </p>
                        </div>
                        
                        <!-- Mixed Logo Grid -->
                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 items-center">
                            <!-- All logos will be populated by JavaScript -->
                        </div>
                        
                        <!-- Category Legend -->
                        <div class="flex flex-wrap justify-center gap-4 mt-12">
                            <div class="inline-flex items-center px-3 py-1 bg-orange-100 dark:bg-orange-900/30 rounded-full text-orange-700 dark:text-orange-300 text-xs font-medium">
                                <div class="w-2 h-2 bg-orange-500 rounded-full mr-2"></div>
                                <span>🍽️ Gastronomy &amp; Lifestyle</span>
                            </div>
                            <div class="inline-flex items-center px-3 py-1 bg-blue-100 dark:bg-blue-900/30 rounded-full text-blue-700 dark:text-blue-300 text-xs font-medium">
                                <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                                <span>🏖️ Turizm &amp; Konaklama</span>
                            </div>
                            <div class="inline-flex items-center px-3 py-1 bg-teal-100 dark:bg-teal-900/30 rounded-full text-teal-700 dark:text-teal-300 text-xs font-medium">
                                <div class="w-2 h-2 bg-teal-500 rounded-full mr-2"></div>
                                <span>🏥 Sağlık &amp; Wellness</span>
                            </div>
                            <div class="inline-flex items-center px-3 py-1 bg-emerald-100 dark:bg-emerald-900/30 rounded-full text-emerald-700 dark:text-emerald-300 text-xs font-medium">
                                <div class="w-2 h-2 bg-emerald-500 rounded-full mr-2"></div>
                                <span>🏗️ Mimari &amp; İnşaat</span>
                            </div>
                            <div class="inline-flex items-center px-3 py-1 bg-purple-100 dark:bg-purple-900/30 rounded-full text-purple-700 dark:text-purple-300 text-xs font-medium">
                                <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
                                <span>🛒 E-commerce</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Trust Message -->
                    <div class="text-center mt-12">
                        <p class="text-sm text-gray-600 dark:text-gray-400">
                            <span class="font-medium text-loris-600 dark:text-loris-400">175+</span> projects delivered, 
                            <span class="font-medium text-blue-600 dark:text-blue-400">high</span> customer satisfaction achieved
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- How We Work Process Section -->
    <section id="how-we-work" class="py-20 bg-gradient-to-br from-purple-50/60 via-loris-50/40 to-blue-50/60 dark:from-purple-950/30 dark:via-loris-950/25 dark:to-blue-950/30 border-t border-gray-200 dark:border-gray-700" data-animate>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <div class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-purple-100 to-loris-100 dark:from-purple-900/30 dark:to-loris-900/30 rounded-full text-purple-700 dark:text-purple-300 text-sm font-medium mb-4 shadow-sm border border-purple-200/50 dark:border-purple-700/50">
                        <div class="w-2 h-2 bg-purple-500 rounded-full mr-2 animate-pulse"></div>
                        Our Working Process
                    </div>
                    <h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3">
                        How Do We Work?
                    </h2>
                    <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                        Loris felsefemiz: Yavaş ve emin adımlarla analiz, sonra yoğun çalışma temposuyla mükemmel uygulama!
                    </p>
                </div>

                                <!-- Premium Neural Process Timeline -->
                <div class="relative max-w-6xl mx-auto mb-8">
                    <!-- Animated Background Pattern -->
                    <div class="absolute inset-0 opacity-5 dark:opacity-10">
                        <div class="absolute top-0 left-1/4 w-32 h-32 bg-purple-500 rounded-full blur-3xl animate-pulse"></div>
                        <div class="absolute top-0 right-1/4 w-24 h-24 bg-blue-500 rounded-full blur-2xl animate-pulse delay-1000"></div>
                        <div class="absolute bottom-0 left-1/3 w-28 h-28 bg-loris-500 rounded-full blur-3xl animate-pulse delay-500"></div>
                    </div>
                    
                    <!-- Neural Network Style Connections -->
                    <div class="hidden md:block absolute top-16 left-0 right-0 h-24">
                        <!-- Main Timeline Spine -->
                        <div class="absolute top-12 left-8 right-8 h-1 bg-gradient-to-r from-purple-200 via-loris-300 via-blue-300 to-green-200 dark:from-purple-800/50 dark:via-loris-700/50 dark:via-blue-700/50 dark:to-green-800/50 rounded-full shadow-lg"></div>
                        
                        <!-- Neural Connections -->
                        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 1000 100" preserveAspectRatio="none">
                            <!-- Connection Lines -->
                            <path d="M50,50 Q200,20 350,50 T650,50 T950,50" stroke="url(#connectionGradient)" stroke-width="2" fill="none" opacity="0.6" stroke-dasharray="5,5" class="animate-pulse">
                                <animate attributeName="stroke-dashoffset" values="0;10" dur="2s" repeatCount="indefinite"/>
                            </path>
                            <path d="M50,50 Q150,80 300,50 Q450,20 600,50 Q750,80 950,50" stroke="url(#connectionGradient2)" stroke-width="1.5" fill="none" opacity="0.4" stroke-dasharray="3,3" class="animate-pulse delay-500">
                                <animate attributeName="stroke-dashoffset" values="10;0" dur="3s" repeatCount="indefinite"/>
                            </path>
                            
                            <!-- Gradient Definitions -->
                            <defs>
                                <linearGradient id="connectionGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" style="stop-color:rgb(147,127,105);stop-opacity:0.8"/>
                                    <stop offset="50%" style="stop-color:rgb(59,130,246);stop-opacity:0.6"/>
                                    <stop offset="100%" style="stop-color:rgb(16,185,129);stop-opacity:0.8"/>
                                </linearGradient>
                                <linearGradient id="connectionGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" style="stop-color:rgb(168,85,247);stop-opacity:0.6"/>
                                    <stop offset="100%" style="stop-color:rgb(34,197,94);stop-opacity:0.6"/>
                                </linearGradient>
                            </defs>
                        </svg>
                    </div>
                    
                    <!-- Premium Process Nodes -->
                    <div class="hidden md:flex absolute top-8 left-0 right-0 justify-between items-center px-8">
                        <!-- Node 1: Analysis -->
                        <div class="group relative">
                            <div class="absolute inset-0 bg-purple-500/20 rounded-full blur-xl animate-pulse"></div>
                            <div class="relative w-16 h-16 bg-gradient-to-br from-purple-500 via-purple-600 to-purple-700 rounded-full border-4 border-white/90 dark:border-gray-900/90 shadow-2xl flex items-center justify-center text-white font-black text-lg hover:scale-110 transition-all duration-500 group-hover:rotate-6">
                                <span class="relative z-10">01</span>
                                <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-purple-800 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-spin-slow"></div>
                            </div>
                            <!-- Floating Particles -->
                            <div class="absolute -top-2 -right-2 w-3 h-3 bg-purple-400 rounded-full animate-bounce"></div>
                            <div class="absolute -bottom-1 -left-1 w-2 h-2 bg-purple-300 rounded-full animate-bounce delay-300"></div>
                        </div>
                        
                        <!-- Node 2: Strategy -->
                        <div class="group relative">
                            <div class="absolute inset-0 bg-loris-500/20 rounded-full blur-xl animate-pulse delay-200"></div>
                            <div class="relative w-16 h-16 bg-gradient-to-br from-loris-500 via-loris-600 to-loris-700 rounded-full border-4 border-white/90 dark:border-gray-900/90 shadow-2xl flex items-center justify-center text-white font-black text-lg hover:scale-110 transition-all duration-500 group-hover:rotate-6">
                                <span class="relative z-10">02</span>
                                <div class="absolute inset-0 bg-gradient-to-br from-loris-400 to-loris-800 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-spin-slow"></div>
                            </div>
                            <!-- Floating Particles -->
                            <div class="absolute -top-1 -right-3 w-2 h-2 bg-loris-400 rounded-full animate-bounce delay-100"></div>
                            <div class="absolute -bottom-2 -left-2 w-3 h-3 bg-loris-300 rounded-full animate-bounce delay-500"></div>
                        </div>
                        
                        <!-- Node 3: Development -->
                        <div class="group relative">
                            <div class="absolute inset-0 bg-blue-500/20 rounded-full blur-xl animate-pulse delay-400"></div>
                            <div class="relative w-16 h-16 bg-gradient-to-br from-blue-500 via-blue-600 to-blue-700 rounded-full border-4 border-white/90 dark:border-gray-900/90 shadow-2xl flex items-center justify-center text-white font-black text-lg hover:scale-110 transition-all duration-500 group-hover:rotate-6">
                                <span class="relative z-10">03</span>
                                <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-800 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-spin-slow"></div>
                            </div>
                            <!-- Floating Particles -->
                            <div class="absolute -top-3 -right-1 w-2 h-2 bg-blue-400 rounded-full animate-bounce delay-200"></div>
                            <div class="absolute -bottom-1 -left-3 w-3 h-3 bg-blue-300 rounded-full animate-bounce delay-700"></div>
                        </div>
                        
                        <!-- Node 4: Launch -->
                        <div class="group relative">
                            <div class="absolute inset-0 bg-green-500/20 rounded-full blur-xl animate-pulse delay-600"></div>
                            <div class="relative w-16 h-16 bg-gradient-to-br from-green-500 via-green-600 to-green-700 rounded-full border-4 border-white/90 dark:border-gray-900/90 shadow-2xl flex items-center justify-center text-white font-black text-lg hover:scale-110 transition-all duration-500 group-hover:rotate-6">
                                <span class="relative z-10">04</span>
                                <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-green-800 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-spin-slow"></div>
                            </div>
                            <!-- Floating Particles -->
                            <div class="absolute -top-2 -right-2 w-3 h-3 bg-green-400 rounded-full animate-bounce delay-400"></div>
                            <div class="absolute -bottom-3 -left-1 w-2 h-2 bg-green-300 rounded-full animate-bounce delay-800"></div>
                        </div>
                    </div>
                    
                    <!-- Process Steps -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 pt-28">
                        
                        <!-- Step 1: Observation & Analysis -->
                        <div class="relative group">
                            
                            <!-- Content Card -->
                            <div class="bg-white dark:bg-gray-900 rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-600 hover:-translate-y-1">
                                <!-- Header -->
                                <div class="flex items-center justify-end mb-3">
                                    <div class="w-10 h-10 bg-white dark:bg-gray-800 rounded-full border-2 border-purple-300 dark:border-purple-600 flex items-center justify-center hover:scale-110 transition-transform duration-300">
                                        <img src="https://devloris.com/images/loris-develop.png" alt="Analysis Loris" class="w-6 h-6">
                                    </div>
                                </div>
                                
                                <!-- Title -->
                                <h3 class="text-base font-bold text-gray-900 dark:text-white mb-2">Observation &amp; Analysis</h3>
                                
                                <!-- Description -->
                                <p class="text-gray-600 dark:text-gray-400 text-xs leading-relaxed mb-3">
                                    With big eyes, we see every detail. We deeply analyze your needs.
                                </p>
                                
                                <!-- Tags -->
                                <div class="flex gap-1">
                                    <span class="px-2 py-0.5 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium">Research</span>
                                    <span class="px-2 py-0.5 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium">Analysis</span>
                                </div>
                            </div>
                        </div>

                        <!-- Step 2: Strategy & Design -->
                        <div class="relative group">
                            <!-- Content Card -->
                            <div class="bg-white dark:bg-gray-900 rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700 hover:border-loris-300 dark:hover:border-loris-600 hover:-translate-y-1">
                                <!-- Header -->
                                <div class="flex items-center justify-end mb-3">
                                    <div class="w-10 h-10 bg-white dark:bg-gray-800 rounded-full border-2 border-loris-300 dark:border-loris-600 flex items-center justify-center hover:scale-110 transition-transform duration-300">
                                        <img src="https://devloris.com/images/loris-write.png" alt="Design Loris" class="w-6 h-6">
                                    </div>
                                </div>
                                
                                <!-- Title -->
                                <h3 class="text-base font-bold text-gray-900 dark:text-white mb-2">Strategy &amp; Design</h3>
                                
                                <!-- Description -->
                                <p class="text-gray-600 dark:text-gray-400 text-xs leading-relaxed mb-3">
                                    We plan with slow but sure steps. We meticulously determine UI/UX and system architecture.
                                </p>
                                
                                <!-- Tags -->
                                <div class="flex gap-1">
                                    <span class="px-2 py-0.5 bg-loris-100 dark:bg-loris-900/30 text-loris-700 dark:text-loris-300 rounded-full text-xs font-medium">UI/UX</span>
                                    <span class="px-2 py-0.5 bg-loris-100 dark:bg-loris-900/30 text-loris-700 dark:text-loris-300 rounded-full text-xs font-medium">Architecture</span>
                                </div>
                            </div>
                        </div>

                        <!-- Step 3: Development & Implementation -->
                        <div class="relative group">
                            <!-- Content Card -->
                            <div class="bg-white dark:bg-gray-900 rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-600 hover:-translate-y-1">
                                <!-- Header -->
                                <div class="flex items-center justify-end mb-3">
                                    <div class="w-10 h-10 bg-white dark:bg-gray-800 rounded-full border-2 border-blue-300 dark:border-blue-600 flex items-center justify-center hover:scale-110 transition-transform duration-300">
                                        <img src="https://devloris.com/images/loris-develop.png" alt="Development Loris" class="w-6 h-6">
                                    </div>
                                </div>
                                
                                <!-- Title -->
                                <h3 class="text-base font-bold text-gray-900 dark:text-white mb-2">Development &amp; Implementation</h3>
                                
                                <!-- Description -->
                                <p class="text-gray-600 dark:text-gray-400 text-xs leading-relaxed mb-3">
                                    We code with intensive work pace! We bring your projects to life with modern technologies.
                                </p>
                                
                                <!-- Tags -->
                                <div class="flex gap-1">
                                    <span class="px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium">Coding</span>
                                    <span class="px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium">Testing</span>
                                </div>
                            </div>
                        </div>

                        <!-- Step 4: Launch & Optimization -->
                        <div class="relative group">
                            <!-- Content Card -->
                            <div class="bg-white dark:bg-gray-900 rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-600 hover:-translate-y-1">
                                <!-- Header -->
                                <div class="flex items-center justify-end mb-3">
                                    <div class="w-10 h-10 bg-white dark:bg-gray-800 rounded-full border-2 border-green-300 dark:border-green-600 flex items-center justify-center hover:scale-110 transition-transform duration-300">
                                        <img src="https://devloris.com/images/loris-coffee.png" alt="Launch Loris" class="w-6 h-6">
                                    </div>
                                </div>
                                
                                <!-- Title -->
                                <h3 class="text-base font-bold text-gray-900 dark:text-white mb-2">Delivery &amp; Optimization</h3>
                                
                                <!-- Description -->
                                <p class="text-gray-600 dark:text-gray-400 text-xs leading-relaxed mb-3">
                                    Continuous improvement after successful launch! We grow with performance monitoring and optimizations.
                                </p>
                                
                                <!-- Tags -->
                                <div class="flex gap-1">
                                    <span class="px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-xs font-medium">Launch</span>
                                    <span class="px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-xs font-medium">Monitoring</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Process Summary -->
                <div class="text-center mt-8 mb-8">
                    <div class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-purple-50 to-green-50 dark:from-purple-900/20 dark:to-green-900/20 rounded-xl border border-purple-200/50 dark:border-purple-700/50">
                        <img src="https://devloris.com/images/loris-coffee.png" alt="Coffee Loris" class="w-6 h-6 mr-2">
                        <span class="text-gray-700 dark:text-gray-300 text-sm font-medium">
                            ☕ With coffee, patient quality, then perfect execution!
                        </span>
                    </div>
                </div>
            </div>
            

    <!-- Contact/CTA Modal -->
    <div id="contactModal" class="fixed inset-0 bg-black/95 backdrop-blur-lg z-[10001] opacity-0 invisible transition-all duration-500">
        <div class="flex items-center justify-center min-h-screen p-4 w-full">
            <div class="bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl border border-white/20 dark:border-gray-700/50 rounded-3xl max-w-4xl w-full max-h-[92vh] overflow-hidden transform scale-95 transition-all duration-500 mx-4 shadow-2xl shadow-loris-500/20" id="contactModalContent">
                
                <!-- Minimal Modal Header -->
                <div class="relative bg-gradient-to-br from-loris-500 via-blue-500 to-purple-500 p-6 rounded-t-3xl overflow-hidden">
                    <!-- Background Pattern -->
                    <div class="absolute inset-0 opacity-10">
                        <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent"></div>
                        <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
                    </div>
                    
                    <div class="relative z-10 flex items-center justify-between">
                        <div class="flex items-center space-x-3 min-w-0 flex-1">
                            <div class="w-12 h-12 md:w-14 md:h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center flex-shrink-0">
                                <img src="https://devloris.com/images/loris-coffee.png" 
                                     alt="Devloris Contact" 
                                     class="w-7 h-7 md:w-8 md:h-8 animate-pulse">
                            </div>
                            <div class="min-w-0 flex-1">
                                <h3 class="text-lg md:text-2xl font-bold text-white truncate" id="contactModalTitle">
                                    Get in Touch
                                </h3>
                                <p class="text-white/80 text-xs md:text-sm line-clamp-2" id="contactModalSubtitle">
                                    Let&#039;s discuss your project and develop custom solutions for you.
                                </p>
                            </div>
                        </div>
                        <button onclick="if (!window.__cfRLUnblockHandlers) return false; closeContactModal()" class="w-10 h-10 md:w-12 md:h-12 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-90 flex-shrink-0 ml-2" data-cf-modified-63af1a45ceaed83f990291b1-="">
                            <svg class="w-5 h-5 md:w-6 md:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>
                
                <!-- Contact Form -->
                <div class="p-8 h-full overflow-y-auto">
                    <form id="contactForm" class="space-y-6">
                        
                        <!-- Essential Info Row -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="group relative">
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                    Adınız Soyadınız <span class="text-red-500">*</span>
                                </label>
                                <input type="text" name="name" required
                                       placeholder="Tam adınızı girin"
                                       class="w-full px-5 py-4 border-2 border-gray-200 dark:border-gray-600 rounded-2xl bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-loris-500 focus:border-loris-500 hover:border-loris-300 transition-all duration-300 shadow-sm hover:shadow-md focus:shadow-lg">
                            </div>
                            <div class="group relative">
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                    E-posta Adresi <span class="text-red-500">*</span>
                                </label>
                                <input type="email" name="email" required
                                       placeholder="ornek@email.com"
                                       class="w-full px-5 py-4 border-2 border-gray-200 dark:border-gray-600 rounded-2xl bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-loris-500 focus:border-loris-500 hover:border-loris-300 transition-all duration-300 shadow-sm hover:shadow-md focus:shadow-lg">
                            </div>
                        </div>
                        
                        <!-- Optional Info Row -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="group relative">
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                    </svg>
                                    Telefon <span class="text-gray-400 text-xs">(opsiyonel)</span>
                                </label>
                                <input type="tel" name="phone"
                                       placeholder="0532 123 45 67"
                                       class="w-full px-5 py-4 border-2 border-gray-200 dark:border-gray-600 rounded-2xl bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-loris-500 focus:border-loris-500 hover:border-loris-300 transition-all duration-300 shadow-sm hover:shadow-md focus:shadow-lg">
                            </div>
                            
                            <div class="group relative">
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                    </svg>
                                    Hizmet Alanı
                                </label>
                                <select name="service" id="serviceSelect"
                                        class="w-full px-5 py-4 border-2 border-gray-200 dark:border-gray-600 rounded-2xl bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm text-gray-900 dark:text-white focus:ring-2 focus:ring-loris-500 focus:border-loris-500 hover:border-loris-300 transition-all duration-300 shadow-sm hover:shadow-md focus:shadow-lg cursor-pointer">
                                    <option value="">Hangi alanda çalışmak istiyorsunuz?</option>
                                    <option value="web-development">🌐 Web Development</option>
                                    <option value="mobile-development">📱 Mobile Application</option>
                                    <option value="ui-ux-design">🎨 UI/UX Design</option>
                                    <option value="cloud-consulting">☁️ Cloud &amp; Consulting</option>
                                    <option value="digital-transformation">🚀 Digital Transformation</option>
                                    <option value="other">💡 Diğer / Özel Proje</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- Project Details -->
                        <div class="group relative">
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                                Proje Detayları <span class="text-red-500">*</span>
                            </label>
                            <textarea name="message" rows="5" required
                                      placeholder="Projeniz hakkında detayları paylaşın:
• Ne yapmak istiyorsunuz?
• Hangi teknolojileri tercih ediyorsunuz?  
• Zaman çerçeveniz nedir?
• Bütçe aralığınız var mı?"
                                      class="w-full px-5 py-4 border-2 border-gray-200 dark:border-gray-600 rounded-2xl bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-loris-500 focus:border-loris-500 hover:border-loris-300 transition-all duration-300 shadow-sm hover:shadow-md focus:shadow-lg resize-none"></textarea>
                        </div>
                        
                        <!-- Anti-Spam Protection -->
                        <!-- Honeypot Field (görünmez, botlar doldurur) -->
                        <div style="position: absolute; left: -9999px; opacity: 0; pointer-events: none;" aria-hidden="true">
                            <input type="text" name="website" tabindex="-1" autocomplete="off">
                        </div>
                        
                        <!-- Enhanced Security Section - Mobile Optimized -->
                        <div class="bg-gradient-to-r from-loris-50 to-blue-50 dark:from-gray-800/50 dark:to-gray-700/50 backdrop-blur-sm border-2 border-loris-200/50 dark:border-gray-600/50 rounded-2xl p-4 md:p-6">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 space-y-2 sm:space-y-0">
                                <h4 class="text-base md:text-lg font-semibold text-gray-800 dark:text-white flex items-center">
                                    <svg class="w-4 h-4 md:w-5 md:h-5 mr-2 text-loris-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                    </svg>
                                    <span class="truncate">Güvenlik Doğrulaması</span>
                                </h4>
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400">
                                    <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                    </svg>
                                    SSL Korumalı
                                </span>
                            </div>
                            
                            <!-- Mobile Layout -->
                            <div class="flex flex-col space-y-4 md:hidden">
                                <div class="flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-4">
                                    <div class="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2">
                                        <span class="text-gray-700 dark:text-gray-300 font-medium text-sm">Basit matematik:</span>
                                        <div class="bg-white dark:bg-gray-800 rounded-xl px-3 py-2 border border-gray-300 dark:border-gray-600">
                                            <span class="font-mono font-bold text-base text-loris-600 dark:text-loris-400" id="mathQuestion">2 + 3 = ?</span>
                                        </div>
                                    </div>
                                    <input type="number" name="math_answer" required
                                           class="w-full sm:w-20 px-4 py-2 text-center border-2 border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-semibold text-base focus:ring-2 focus:ring-loris-500 focus:border-loris-500 transition-all duration-300"
                                           placeholder="?">
                                    <input type="hidden" name="math_solution" id="mathSolution" value="5">
                                </div>
                                <div class="text-left">
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Spam koruması aktif</p>
                                    <p class="text-xs text-green-600 dark:text-green-400 flex items-center">
                                        <svg class="w-3 h-3 mr-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
                                        </svg>
                                        <span class="truncate">Güvenli bağlantı</span>
                                    </p>
                                </div>
                            </div>
                            
                            <!-- Desktop Layout - Clean & Elegant -->
                            <div class="hidden md:flex items-center justify-between">
                                <div class="flex items-center space-x-4">
                                    <div class="flex items-center space-x-3">
                                        <span class="text-gray-700 dark:text-gray-300 font-medium">Basit matematik:</span>
                                        <div class="bg-white dark:bg-gray-800 rounded-xl px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm">
                                            <span class="font-mono font-bold text-lg text-loris-600 dark:text-loris-400" id="mathQuestionDesktop">2 + 3 = ?</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <span class="text-gray-500 dark:text-gray-400">=</span>
                                        <input type="number" name="math_answer" required
                                               class="w-20 px-4 py-2 text-center border-2 border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-semibold text-lg focus:ring-2 focus:ring-loris-500 focus:border-loris-500 transition-all duration-300 shadow-sm"
                                               placeholder="?">
                                    </div>
                                    <input type="hidden" name="math_solution" id="mathSolution" value="5">
                                </div>
                                <div class="text-right">
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Spam koruması aktif</p>
                                    <p class="text-xs text-green-600 dark:text-green-400 flex items-center justify-end">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Güvenli bağlantı
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Premium Action Buttons - Mobile Optimized -->
                        <div class="flex flex-col sm:flex-row gap-4 pt-4">
                            <button type="submit"
                                    class="modal-button flex-1 group relative inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-loris-500 via-blue-500 to-purple-500 text-white font-bold rounded-2xl hover:shadow-2xl hover:shadow-loris-500/40 hover:scale-[1.02] transition-all duration-500 overflow-hidden touch-feedback haptic-medium">
                                <!-- Button Background Animation -->
                                <div class="absolute inset-0 bg-gradient-to-r from-loris-400 via-blue-400 to-purple-400 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="10" cy="10" r="1"/%3E%3C/g%3E%3C/svg%3E')] opacity-20"></div>
                                
                                <!-- Button Content -->
                                <div class="relative z-10 flex items-center">
                                    <svg class="w-5 h-5 mr-3 group-hover:rotate-12 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                                    </svg>
                                    <span class="text-base md:text-lg">Projeyi Başlat</span>
                                    <div class="ml-3 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center group-hover:translate-x-1 group-hover:scale-110 transition-all duration-300">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                        </svg>
                                    </div>
                                </div>
                            </button>
                            
                            <button type="button" onclick="if (!window.__cfRLUnblockHandlers) return false; closeContactModal()" class="modal-close-button group inline-flex items-center justify-center px-6 sm:px-8 py-4 border-2 border-gray-300 dark:border-gray-600 hover:border-loris-400 text-gray-700 dark:text-gray-300 hover:text-loris-600 font-semibold rounded-2xl hover:bg-gray-50 dark:hover:bg-gray-800/50 backdrop-blur-sm transition-all duration-300 touch-feedback whitespace-nowrap" data-cf-modified-63af1a45ceaed83f990291b1-="">
                                <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 group-hover:scale-110 transition-transform duration-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                                <span class="text-sm sm:text-base md:text-lg">Cancel</span>
                            </button>
                        </div>
                        
                    </form>
                </div>
                
            </div>
        </div>
    </div>

    </section>

    <!-- Digital Transformation CTA Section -->
    <section id="transformation" class="relative py-32 overflow-hidden">
        <!-- Animated Background -->
        <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900">
            <!-- Transformation Pattern Background -->
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-0 left-0 w-full h-full">
                    <!-- Geometric Transformation Patterns -->
                    <div class="absolute top-20 left-10 w-32 h-32 border-2 border-loris-400 rounded-lg transform rotate-45 animate-pulse"></div>
                    <div class="absolute top-40 right-20 w-24 h-24 border-2 border-blue-400 rounded-full animate-bounce"></div>
                    <div class="absolute bottom-32 left-20 w-28 h-28 border-2 border-purple-400 transform rotate-12 animate-pulse delay-1000"></div>
                    <div class="absolute bottom-20 right-32 w-20 h-20 border-2 border-green-400 rounded-lg transform -rotate-45 animate-bounce delay-500"></div>
                    
                    <!-- Connecting Lines -->
                    <svg class="absolute inset-0 w-full h-full" viewBox="0 0 1200 800">
                        <defs>
                            <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" style="stop-color:#937F69;stop-opacity:0.3" />
                                <stop offset="50%" style="stop-color:#3B82F6;stop-opacity:0.3" />
                                <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:0.3" />
                            </linearGradient>
                        </defs>
                        <path d="M100 200 Q400 100 700 300 T1100 400" stroke="url(#lineGradient)" stroke-width="2" fill="none" class="animate-pulse"/>
                        <path d="M200 600 Q500 400 800 500 T1000 200" stroke="url(#lineGradient)" stroke-width="2" fill="none" class="animate-pulse delay-1000"/>
                    </svg>
                </div>
            </div>
            
            <!-- Floating Gradient Orbs -->
            <div class="absolute top-10 left-10 w-96 h-96 bg-gradient-to-r from-loris-500/20 via-blue-500/20 to-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
            <div class="absolute bottom-10 right-10 w-80 h-80 bg-gradient-to-r from-purple-500/20 via-pink-500/20 to-orange-500/20 rounded-full blur-3xl animate-pulse delay-2000"></div>
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-loris-500/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
        </div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            <!-- Main Content -->
            <div class="text-center space-y-12" data-animate>
                
                <!-- Transformation Badge -->
                <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-loris-500/20 via-blue-500/20 to-purple-500/20 backdrop-blur-md border border-white/20 rounded-full text-white text-sm font-medium mb-8">
                    <div class="w-3 h-3 bg-gradient-to-r from-loris-400 to-blue-400 rounded-full mr-3 animate-pulse"></div>
                    Let&#039;s Grow Together
                </div>

                <!-- Main Heading with Transform Effect -->
                <div class="space-y-6">
                    <h2 class="text-5xl md:text-7xl font-bold text-white leading-tight">
                        <span class="inline-block transform hover:scale-110 hover:rotate-1 transition-all duration-500">Your Business</span>
                        <br>
                        <span class="bg-gradient-to-r from-loris-400 via-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent animate-pulse">
                            To Grow
                        </span>
                        <br>
                        <span class="inline-block transform hover:scale-110 hover:-rotate-1 transition-all duration-500">Are You Ready?</span>
                    </h2>
                    
                    <p class="text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto leading-relaxed">
                        We increase your efficiency by digitalizing your existing business processes.
                        <span class="text-loris-300 font-semibold">We enable you to reach your growth goals with solutions tailored to your needs.</span>
                    </p>
                </div>

                <!-- Transformation Process Visualization -->
                <div class="flex flex-col lg:flex-row items-center justify-center space-y-12 lg:space-y-0 lg:space-x-12 my-16">
                    
                    <!-- Before State -->
                    <div class="group text-center">
                        <div class="w-32 h-32 bg-gradient-to-br from-gray-600 to-gray-800 rounded-2xl flex items-center justify-center border-2 border-gray-500 group-hover:scale-110 transition-all duration-500 mx-auto mb-4">
                            <div class="text-center">
                                <div class="w-8 h-8 bg-gray-400 rounded-lg mx-auto mb-2"></div>
                                <span class="text-xs text-gray-300 font-medium">Old System</span>
                            </div>
                        </div>
                        <div class="text-sm text-gray-400 font-medium">Current State</div>
                    </div>

                    <!-- Transformation Arrow -->
                    <div class="text-center">
                        <div class="flex flex-col lg:flex-row items-center justify-center space-y-2 lg:space-y-0 lg:space-x-2 mb-4">
                            <div class="w-1 h-16 lg:w-16 lg:h-1 bg-gradient-to-b lg:bg-gradient-to-r from-loris-400 via-blue-400 to-purple-400 rounded-full animate-pulse"></div>
                            <div class="w-8 h-8 bg-gradient-to-r from-loris-500 to-purple-500 rounded-full flex items-center justify-center animate-bounce">
                                <svg class="w-4 h-4 text-white transform rotate-90 lg:rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
            </div>
                            <div class="w-1 h-16 lg:w-16 lg:h-1 bg-gradient-to-b lg:bg-gradient-to-r from-purple-400 via-pink-400 to-orange-400 rounded-full animate-pulse delay-500"></div>
                        </div>
                        <div class="text-sm text-loris-300 font-medium">Devloris Process</div>
                    </div>

                    <!-- After State -->
                    <div class="group text-center">
                        <div class="w-32 h-32 bg-gradient-to-br from-loris-500 via-blue-500 to-purple-500 rounded-2xl flex items-center justify-center border-2 border-loris-400 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-2xl shadow-loris-500/30 mx-auto mb-4">
                            <div class="text-center">
                                <img src="https://devloris.com/images/loris.png" 
                                     alt="Transformed" 
                                     class="w-8 h-8 mx-auto mb-2 group-hover:rotate-12 transition-transform duration-300">
                                <span class="text-xs text-white font-medium">Modern Solution</span>
                            </div>
                        </div>
                        <div class="text-sm text-loris-300 font-medium">Target State</div>
                    </div>

                </div>

                <!-- Enhanced CTA Buttons with Modal Triggers -->
                <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
                    
                    <!-- Primary CTA - Start Transformation -->
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; openContactModal('transformation', this)" class="group relative inline-flex items-center px-10 py-5 bg-gradient-to-r from-loris-500 via-loris-600 to-loris-700 text-white font-bold rounded-2xl hover:shadow-2xl hover:shadow-loris-500/40 hover:scale-105 transition-all duration-500 overflow-hidden" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        <!-- Button Background Animation -->
                        <div class="absolute inset-0 bg-gradient-to-r from-loris-400 via-blue-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        
                        <!-- Button Content -->
                        <div class="relative z-10 flex items-center">
                            <span class="text-lg">Start Growing</span>
                            <div class="ml-3 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center group-hover:rotate-90 group-hover:scale-110 transition-all duration-500">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                </svg>
                            </div>
                        </div>
                    </button>

                    <!-- Secondary CTA - Free Consultation -->
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; openContactModal('consultation', this)" class="group inline-flex items-center px-10 py-5 border-2 border-white/30 text-white font-semibold rounded-2xl hover:border-loris-400 hover:bg-white/10 backdrop-blur-sm transition-all duration-500" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        <svg class="w-5 h-5 mr-3 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                        </svg>
                        <span class="text-lg">Free Consultation</span>
                    </button>

                </div>
                
                <!-- Additional CTA Options -->
                <div class="flex flex-wrap justify-center gap-4 mt-8">
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; openContactModal('project', this)" class="group inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-sm border border-white/20 text-white font-medium rounded-xl hover:bg-white/20 hover:border-white/40 transition-all duration-300" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        <svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                        </svg>
                        <span>Start Your Project</span>
                    </button>
                    
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; openContactModal('quote', this)" class="group inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-sm border border-white/20 text-white font-medium rounded-xl hover:bg-white/20 hover:border-white/40 transition-all duration-300" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        <svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                        <span>Get a Quote</span>
                    </button>
                </div>

                <!-- Trust Indicators -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16 pt-16 border-t border-white/10">
                    
                    <div class="group text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-loris-500/20 to-blue-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-8 h-8 text-loris-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">Quick Start</h3>
                        <p class="text-gray-300 text-sm">Rapid prototyping and effective solutions</p>
                    </div>

                    <div class="group text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">Quality Results</h3>
                        <p class="text-gray-300 text-sm">High customer satisfaction and on-time delivery</p>
                    </div>

                    <div class="group text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                            <img src="https://devloris.com/images/loris-coffee.png" 
                                 alt="Always Available" 
                                 class="w-8 h-8 group-hover:rotate-12 transition-transform duration-300">
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">Continuous Support</h3>
                        <p class="text-gray-300 text-sm">We&#039;re with you 24/7 with our coffee energy</p>
                    </div>

                </div>

            </div>

        </div>
    </section>
    <!-- Digital Transformation CTA Section -->
    

    <!-- Service Detail Modal -->
    <div id="serviceModal" class="fixed inset-0 bg-black/90 backdrop-blur-lg z-[10000] opacity-0 invisible transition-all duration-500">
        <div class="flex items-center justify-center min-h-screen p-4 w-full">
            <div class="bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl border border-white/20 dark:border-gray-700/50 rounded-3xl max-w-5xl w-full min-h-[70vh] max-h-[85vh] overflow-hidden transform scale-95 transition-all duration-500 mx-4 shadow-2xl shadow-loris-500/20" id="serviceModalContent">
                
                <!-- Modal Header -->
                <div class="relative bg-gradient-to-br from-loris-500 via-loris-600 to-loris-700 px-6 py-4 md:px-8 md:py-6 rounded-t-3xl overflow-hidden">
                    <!-- Background Pattern -->
                    <div class="absolute inset-0 opacity-10">
                        <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent"></div>
                        <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
                    </div>
                    
                    <div class="relative z-10 flex items-center justify-between gap-4">
                        <div class="flex items-center space-x-3 md:space-x-4 min-w-0 flex-1">
                            <div class="w-12 h-12 md:w-16 md:h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center flex-shrink-0">
                                <div class="w-8 h-8 md:w-10 md:h-10 bg-white rounded-xl flex items-center justify-center" id="serviceModalIcon">
                                    <!-- Dynamic icon will be loaded here -->
                                </div>
                            </div>
                            <div class="min-w-0 flex-1">
                                <h3 class="text-lg md:text-2xl lg:text-3xl font-bold text-white mb-1 truncate" id="serviceModalTitle">
                                    Service Details
                                </h3>
                                <p class="text-white/80 text-sm md:text-base lg:text-lg line-clamp-2" id="serviceModalSubtitle">
                                    Premium çözümler, elit hizmet
                                </p>
                            </div>
                        </div>
                        <button onclick="if (!window.__cfRLUnblockHandlers) return false; closeServiceModal()" class="w-10 h-10 md:w-12 md:h-12 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-90 flex-shrink-0" data-cf-modified-63af1a45ceaed83f990291b1-="">
                            <svg class="w-5 h-5 md:w-6 md:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>
                
                <!-- Modal Body -->
                <div class="flex-1 overflow-y-auto" id="serviceModalBody">
                    <div class="p-8">
                    <!-- Dynamic content will be loaded here -->
                    </div>
                </div>
                
            </div>
        </div>
    </div>
        </main>

        <!-- Minimal Modern Footer -->
<footer wire:snapshot="{&quot;data&quot;:[],&quot;memo&quot;:{&quot;id&quot;:&quot;qcwSkRKpW0nflGZ0B15n&quot;,&quot;name&quot;:&quot;footer&quot;,&quot;path&quot;:&quot;en&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;},&quot;checksum&quot;:&quot;d2872d6dc35b973d7efd541386a333b72976435a6487f93604a1521558301f95&quot;}" wire:effects="[]" wire:id="qcwSkRKpW0nflGZ0B15n" class="relative bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
    <!-- Subtle background pattern -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-50/50 to-white dark:from-gray-800/50 dark:to-gray-900"></div>
    
    <!-- Main Footer Content -->
    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="text-center">
            
            <!-- Logo & Brand -->
            <div class="flex items-center justify-center mb-6">
                            <img src="https://devloris.com/images/logo.png"
                 alt="Devloris Logo"
                 class="h-12 animate-pulse">
            </div>
            
            <!-- Brand Statement -->
            <h3 class="text-2xl md:text-3xl font-bold mb-4 bg-gradient-to-r from-loris-600 via-blue-600 to-purple-600 bg-clip-text text-transparent">
                Professional Software from Istanbul to the World
            </h3>
            
            <p class="text-gray-600 dark:text-gray-300 mb-8 leading-relaxed max-w-2xl mx-auto">
                We offer quality software solutions by combining customer-focused approach with Loris philosophy.
                We carefully design each project and develop solutions that add value to your business.
            </p>
            
            <!-- Contact Info -->
            <div class="flex flex-wrap justify-center gap-8 mb-8 text-gray-600 dark:text-gray-300">
                <div class="flex items-center space-x-2">
                    <div class="w-5 h-5 text-loris-500">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                  d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                  d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                    </div>
                    <span class="font-medium">Istanbul, Turkey</span>
                </div>
                
                <div class="flex items-center space-x-2">
                    <div class="w-5 h-5 text-loris-500">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                  d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                    </div>
                                        <a href="/cdn-cgi/l/email-protection#ea878f98828b888baa8e8f9c8685988399c4898587" class="font-medium hover:text-loris-600 transition-colors duration-300">
                        <span class="__cf_email__" data-cfemail="19747c6b71787b78597d7c6f75766b706a377a7674">[email&#160;protected]</span>
                    </a>
                </div>
            </div>
            
            <!-- Social Media Links -->
            <div class="flex items-center justify-center space-x-4 mb-6">
                <!-- X (Twitter) -->
                <a href="https://x.com/devloriscom" 
                   target="_blank"
                   class="group w-12 h-12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl flex items-center justify-center hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:border-blue-200 dark:hover:border-blue-700 hover:scale-110 transition-all duration-300">
                    <svg class="w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                    </svg>
                </a>
                
                <!-- GitHub -->
                <a href="https://github.com/devloriscom" 
                   target="_blank"
                   class="group w-12 h-12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:scale-110 transition-all duration-300">
                    <svg class="w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                </a>
                
                <!-- LinkedIn -->
                <a href="https://linkedin.com/company/devloris" 
                   target="_blank"
                   class="group w-12 h-12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl flex items-center justify-center hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:border-blue-200 dark:hover:border-blue-700 hover:scale-110 transition-all duration-300">
                    <svg class="w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                    </svg>
                </a>
                
                <!-- Instagram -->
                <a href="https://instagram.com/devloriscom" 
                   target="_blank"
                   class="group w-12 h-12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl flex items-center justify-center hover:bg-pink-50 dark:hover:bg-pink-900/30 hover:border-pink-200 dark:hover:border-pink-700 hover:scale-110 transition-all duration-300">
                    <svg class="w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-pink-600 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>
    
    <!-- Technical Stats Section - Hidden on Mobile -->
    <div class="hidden md:block relative border-t border-gray-100 dark:border-gray-800 bg-gradient-to-r from-gray-50/50 via-loris-50/30 to-gray-50/50 dark:from-gray-800/50 dark:via-loris-900/20 dark:to-gray-800/50">
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="text-center">
                <!-- Streamlined Technical Stats -->
                <div class="inline-flex items-center px-6 py-3 bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg rounded-2xl border border-gray-200/50 dark:border-gray-700/50 shadow-lg hover:shadow-xl transition-all duration-300">
                    <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-700 dark:text-gray-300">
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-gradient-to-r from-loris-500 to-blue-500 rounded-full animate-pulse"></div>
                            <span class="font-mono font-semibold">~17.6K satır kod</span>
                        </div>
                        <div class="w-px h-4 bg-gray-300 dark:bg-gray-600"></div>
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
                            <span class="font-mono font-semibold">257MB proje boyutu</span>
                        </div>
                        <div class="w-px h-4 bg-gray-300 dark:bg-gray-600"></div>
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
                            <span class="font-mono font-semibold">84 dosya</span>
                        </div>
                        <div class="w-px h-4 bg-gray-300 dark:bg-gray-600"></div>
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-gradient-to-r from-pink-500 to-green-500 rounded-full animate-pulse" style="animation-delay: 0.6s"></div>
                            <span class="font-mono font-semibold">Laravel + Livewire + AI Hybrid</span>
                        </div>
                        <div class="w-px h-4 bg-gray-300 dark:bg-gray-600"></div>
                        <div class="flex items-center space-x-2">
                            <div class="w-3 h-3 bg-gradient-to-r from-green-500 to-loris-500 rounded-full animate-pulse" style="animation-delay: 0.8s"></div>
                            <span class="font-mono font-semibold">~4.2s build time</span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>

    <!-- Bottom Section -->
    <div class="relative border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
        <div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0">
                <!-- Left: Copyright -->
                <div class="text-loris-700 dark:text-loris-300 text-xs font-light order-2 lg:order-1 pointer-events-auto cursor-text select-text">
                    <span>© 2020 - 2025  Devloris® Software and Consulting Services Trade Ltd. Co.</span>
                </div>
                
                <!-- Center: Crafted in Istanbul -->
                <div class="flex items-center space-x-2 text-loris-600 dark:text-loris-400 text-xs font-light order-1 lg:order-2 pointer-events-auto">
                    <span class="hidden md:inline">Crafted</span>
                    <img src="https://devloris.com/images/loris-develop.png"
                         alt="Devloris"
                         class="loris-clickable w-5 h-5 animate-pulse">
                    <span class="text-loris-600 dark:text-loris-400">in Istanbul</span>
                </div>
                
                <!-- Right: Legal Links -->
                <div class="flex flex-wrap items-center justify-center lg:justify-end gap-x-2 gap-y-1 text-xs order-3 lg:order-3 pointer-events-auto">
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; openLegalModal('privacy')" class="text-loris-600 dark:text-loris-400 hover:text-loris-800 dark:hover:text-loris-200 transition-colors duration-300 font-normal cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        Privacy Policy
                    </button>
                    
                    <span class="text-loris-400 dark:text-loris-500 opacity-60">|</span>
                    
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; openLegalModal('kvkk')" class="text-loris-600 dark:text-loris-400 hover:text-loris-800 dark:hover:text-loris-200 transition-colors duration-300 font-normal cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        Data Protection
                    </button>
                    
                    <span class="text-loris-400 dark:text-loris-500 opacity-60">|</span>
                    
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; openLegalModal('terms')" class="text-loris-600 dark:text-loris-400 hover:text-loris-800 dark:hover:text-loris-200 transition-colors duration-300 font-normal cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        Terms of Use
                    </button>
                    
                    <span class="text-loris-400 dark:text-loris-500 opacity-60">|</span>
                    
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; openLegalModal('cookies')" class="text-loris-600 dark:text-loris-400 hover:text-loris-800 dark:hover:text-loris-200 transition-colors duration-300 font-normal cursor-pointer" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        Cookie Policy
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Legal Information Modals (Inside Footer but with higher z-index) -->
    
    <!-- Privacy Policy Modal -->
<div id="privacyModal" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/70 backdrop-blur-lg p-4">
        <div class="bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl border border-white/20 dark:border-gray-700/50 rounded-3xl shadow-2xl shadow-loris-500/20 max-w-5xl max-h-[85vh] overflow-hidden transform transition-all duration-500 scale-95 opacity-0 flex flex-col" id="privacyModalContent">
            <!-- Premium Header with Gradient -->
            <div class="relative bg-gradient-to-br from-loris-500 via-purple-500 to-blue-500 p-8 rounded-t-3xl overflow-hidden">
                <!-- Background Pattern -->
                <div class="absolute inset-0 opacity-10">
                    <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent"></div>
                    <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
                </div>
                
                <div class="relative flex justify-between items-center">
                    <div class="flex items-center space-x-4">
                        <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                            <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
                                <svg class="w-6 h-6 text-loris-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <h3 class="text-3xl font-bold text-white mb-1">Privacy Policy</h3>
                            <p class="text-white/80 text-lg">Verilerinizi nasıl koruduğumuz</p>
                        </div>
                    </div>
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; closeLegalModal('privacy')" class="w-12 h-12 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-90" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Modal Body -->
            <div class="flex-1 overflow-y-auto max-h-[calc(85vh-140px)]">
                <div class="p-8 text-gray-700 dark:text-gray-300">
                    <div class="prose dark:prose-invert max-w-none prose-lg prose-headings:text-loris-600 dark:prose-headings:text-loris-400 prose-a:text-loris-600 dark:prose-a:text-loris-400" id="privacyContent">
                        <!-- Content will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<!-- KVKK Modal -->
<div id="kvkkModal" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/70 backdrop-blur-lg p-4">
        <div class="bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl border border-white/20 dark:border-gray-700/50 rounded-3xl shadow-2xl shadow-blue-500/20 max-w-5xl max-h-[85vh] overflow-hidden transform transition-all duration-500 scale-95 opacity-0 flex flex-col" id="kvkkModalContent">
            <!-- Premium Header with Gradient -->
            <div class="relative bg-gradient-to-br from-blue-500 via-indigo-500 to-purple-500 p-8 rounded-t-3xl overflow-hidden">
                <!-- Background Pattern -->
                <div class="absolute inset-0 opacity-10">
                    <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent"></div>
                    <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
                </div>
                
                <div class="relative flex justify-between items-center">
                    <div class="flex items-center space-x-4">
                        <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                            <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
                                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <h3 class="text-3xl font-bold text-white mb-1">Data Protection Notice</h3>
                            <p class="text-white/80 text-lg">Kişisel verilerinizin korunması</p>
                        </div>
                    </div>
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; closeLegalModal('kvkk')" class="w-12 h-12 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-90" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Modal Body -->
            <div class="flex-1 overflow-y-auto max-h-[calc(85vh-140px)]">
                <div class="p-8 text-gray-700 dark:text-gray-300">
                    <div class="prose dark:prose-invert max-w-none prose-lg prose-headings:text-blue-600 dark:prose-headings:text-blue-400 prose-a:text-blue-600 dark:prose-a:text-blue-400" id="kvkkContent">
                        <!-- Content will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<!-- Terms of Service Modal -->
<div id="termsModal" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/70 backdrop-blur-lg p-4">
        <div class="bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl border border-white/20 dark:border-gray-700/50 rounded-3xl shadow-2xl shadow-green-500/20 max-w-5xl max-h-[85vh] overflow-hidden transform transition-all duration-500 scale-95 opacity-0 flex flex-col" id="termsModalContent">
            <!-- Premium Header with Gradient -->
            <div class="relative bg-gradient-to-br from-green-500 via-emerald-500 to-teal-500 p-8 rounded-t-3xl overflow-hidden">
                <!-- Background Pattern -->
                <div class="absolute inset-0 opacity-10">
                    <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent"></div>
                    <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
                </div>
                
                <div class="relative flex justify-between items-center">
                    <div class="flex items-center space-x-4">
                        <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                            <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
                                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <h3 class="text-3xl font-bold text-white mb-1">Terms of Use</h3>
                            <p class="text-white/80 text-lg">Hizmet kullanım koşulları</p>
                        </div>
                    </div>
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; closeLegalModal('terms')" class="w-12 h-12 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-90" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Modal Body -->
            <div class="flex-1 overflow-y-auto max-h-[calc(85vh-140px)]">
                <div class="p-8 text-gray-700 dark:text-gray-300">
                    <div class="prose dark:prose-invert max-w-none prose-lg prose-headings:text-green-600 dark:prose-headings:text-green-400 prose-a:text-green-600 dark:prose-a:text-green-400" id="termsContent">
                        <!-- Content will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<!-- Cookie Policy Modal -->
<div id="cookiesModal" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/70 backdrop-blur-lg p-4">
        <div class="bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl border border-white/20 dark:border-gray-700/50 rounded-3xl shadow-2xl shadow-orange-500/20 max-w-5xl max-h-[85vh] overflow-hidden transform transition-all duration-500 scale-95 opacity-0 flex flex-col" id="cookiesModalContent">
            <!-- Premium Header with Gradient -->
            <div class="relative bg-gradient-to-br from-orange-500 via-amber-500 to-yellow-500 p-8 rounded-t-3xl overflow-hidden">
                <!-- Background Pattern -->
                <div class="absolute inset-0 opacity-10">
                    <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent"></div>
                    <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
                </div>
                
                <div class="relative flex justify-between items-center">
                    <div class="flex items-center space-x-4">
                        <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                            <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
                                <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </div>
                        </div>
                        <div>
                            <h3 class="text-3xl font-bold text-white mb-1">Cookie Policy</h3>
                            <p class="text-white/80 text-lg">Çerez kullanım politikamız</p>
                        </div>
                    </div>
                    <button onclick="if (!window.__cfRLUnblockHandlers) return false; closeLegalModal('cookies')" class="w-12 h-12 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-90" data-cf-modified-63af1a45ceaed83f990291b1-="">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Modal Body -->
            <div class="flex-1 overflow-y-auto max-h-[calc(85vh-140px)]">
                <div class="p-8 text-gray-700 dark:text-gray-300">
                    <div class="prose dark:prose-invert max-w-none prose-lg prose-headings:text-orange-600 dark:prose-headings:text-orange-400 prose-a:text-orange-600 dark:prose-a:text-orange-400" id="cookiesContent">
                        <!-- Content will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

    </div>

    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="/livewire/livewire.min.js?id=df3a17f2" data-csrf="dz6p1iZaP1IhcdIcW8qQAkQZRVn6V80S6D9y1MKJ" data-update-uri="/livewire/update" data-navigate-once="true" type="63af1a45ceaed83f990291b1-text/javascript"></script>
    
 
    <!-- Custom JavaScript -->
    <script type="63af1a45ceaed83f990291b1-text/javascript">
        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Add scroll effect to navbar and back-to-top button
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('nav');
            const backToTop = document.getElementById('backToTop');
            
            if (navbar) {
                if (window.scrollY > 50) {
                    // Dark mode destekli navbar scroll effect
                    navbar.classList.add('bg-white/95', 'dark:bg-gray-900/95', 'backdrop-blur-md', 'shadow-lg', 'border-b', 'border-gray-200/50', 'dark:border-gray-700/50');
                } else {
                    navbar.classList.remove('bg-white/95', 'dark:bg-gray-900/95', 'backdrop-blur-md', 'shadow-lg', 'border-b', 'border-gray-200/50', 'dark:border-gray-700/50');
                }
            }
            
            // Back to top button visibility
            if (backToTop) {
                if (window.scrollY > 300) {
                    backToTop.classList.remove('opacity-0', 'invisible');
                    backToTop.classList.add('opacity-100', 'visible');
                } else {
                    backToTop.classList.add('opacity-0', 'invisible');
                    backToTop.classList.remove('opacity-100', 'visible');
                }
            }
        });
        
        // Smooth scroll to top function
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
        
        // Intersection Observer for animations
        const observerCallback = (entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in');
                }
            });
        };
        
        const observer = new IntersectionObserver(observerCallback, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });
        
        // Observe elements with animation classes
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('[data-animate]').forEach(el => {
                observer.observe(el);
            });
        });
    </script>
    
    <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="63af1a45ceaed83f990291b1-|49" defer></script></body>
</html>

<!--
    ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
    ░░                                                                                ░░
    ░░    🎉 DEVLORIS SAYFASININ SONUNA GELDİN! 🎉                                   ░░
    ░░                                                                                ░░
    ░░                    ☕                    ☕                    ☕              ░░
    ░░                  ☕☕☕                ☕☕☕                ☕☕☕            ░░
    ░░                ☕☕☕☕☕            ☕☕☕☕☕            ☕☕☕☕☕          ░░
    ░░                ☕☕☕☕☕            ☕☕☕☕☕            ☕☕☕☕☕          ░░
    ░░                  ☕☕☕                ☕☕☕                ☕☕☕            ░░
    ░░                    ☕                    ☕                    ☕              ░░
    ░░                                                                                ░░
    ░░    🦥 "Loris hızında" kodladık, ama kalite hiç düşmedi!                       ░░
    ░░                                                                                ░░
    ░░    🚀 Bu sayfayı beğendiysen:                                                 ░░
    ░░       • Bize bir proje teklif et: merhaba@devloris.com                         ░░
    ░░       • LinkedIn'de takip et: /company/devloris                              ░░
    ░░       • Loris AI asistanla konuş (sağ alt köşe)                             ░░
    ░░                                                                                ░░
    ░░    💻 Junior Developer misin?                                                 ░░
    ░░       Bu kodu inceleyerek çok şey öğrenebilirsin!                            ░░
    ░░       Laravel + Livewire + AI combo çok güçlü 💪                            ░░
    ░░                                                                                ░░
    ░░    🎯 İstatistikler (Gerçek Zamanlı):                                        ░░
    ░░       • Build Süresi: 4.2s        ░░
    ░░       • Son Build: 28.06.2025 14:18 ░░
    ░░       • Build Durumu: ✅ Başarılı ░░
    ░░                                                                                ░░
    ░░    🎨 Easter Egg Buldun mu?                                                   ░░
    ░░       Loris karakterlerine 3 kez tıkla ve sürprizleri keşfet!               ░░
    ░░       (Konami kodu da var: ↑↑↓↓←→←→BA)                                      ░░
    ░░                                                                                ░░
    ░░    ⚡ Performance Tips:                                                       ░░
    ░░       • Vite build: Super hızlı hot reload                                   ░░
    ░░       • Tailwind CSS: Utility-first, optimized                              ░░
    ░░       • Livewire: SPA deneyimi, PHP basitliği                               ░░
    ░░       • AI Integration: Groq + Gemini hybrid sistem                         ░░
    ░░                                                                                ░░
    ░░    🏆 Devloris Ekibi:                                                        ░░
    ░░       Kahve içerek, sabırla, İstanbul'dan dünyaya kod yazıyoruz!            ░░
    ░░       Her satır kod, bir fincan kahve ile yazıldı ☕                        ░░
    ░░                                                                                ░░
    ░░    💝 Teşekkürler:                                                           ░░
    ░░       Bu sayfayı ziyaret ettiğin için teşekkürler!                          ░░
    ░░       Umarım Loris karakterimizi sevmişsindir 🦥❤️                          ░░
    ░░                                                                                ░░
    ░░    📱 Mobil Uyumlu:                                                          ░░
    ░░       Bu sayfa tüm cihazlarda mükemmel çalışır!                             ░░
    ░░       Responsive design + Dark mode desteği                                  ░░
    ░░                                                                                ░░
    ░░    🔮 Gelecek Planları:                                                      ░░
    ░░       • Daha fazla AI özelliği                                              ░░
    ░░       • Loris karakterleri animasyonları                                    ░░
    ░░       • Daha fazla easter egg                                               ░░
    ░░       • PWA desteği                                                          ░░
    ░░                                                                                ░░
    ░░    🎪 Fun Fact:                                                              ░░
    ░░       Loris'ler gerçekten çok yavaş hayvanlar, ama biz kod yazarken         ░░
    ░░       onlar kadar sabırlıyız, ama delivery'de çok hızlıyız! 🚀              ░░
    ░░                                                                                ░░
    ░░    Son söz: "Kod yazmak sanat, debug yapmak ise kahramanlık!" ☕🦥          ░░
    ░░                                                                                ░░
    ░░    Made with ❤️ & ☕ in Istanbul, Turkey                                     ░░
    ░░    © 2025 Devloris - Loris gibi sabırlı, çıta gibi hızlı!       ░░
    ░░                                                                                ░░
    ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
-->