@extends('layouts.site', ['header' => 'partials.header-web-development', 'footer' => 'partials.footer'])

@php
    $pageHero = $pageHero ?? \App\Support\PageTemplateHero::resolveForPage($page ?? null, 'services.web-development');
@endphp

@push('head')
@if($pageHero)
    @if(!empty($pageHero['from_upload']))
    <link rel="preload" as="image" href="{{ $pageHero['image'] }}" fetchpriority="high">
    @elseif(!empty($pageHero['webp']))
    <link rel="preload" as="image" href="{{ asset($pageHero['webp']) }}" type="image/webp" fetchpriority="high">
    @endif
@endif
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@graph": [
    {
      "@@type": "ProfessionalService",
      "@@id": "{{ url()->current() }}#organization",
      "name": "Trunçgil Teknoloji",
      "image": "{{ asset('assets/img/logo.png') }}",
      "url": "{{ url('/') }}",
      "telephone": "+902244431620",
      "priceRange": "$$$",
      "address": {
        "@@type": "PostalAddress",
        "streetAddress": "Ulutek Teknoloji Geliştirme Bölgesi, Görükle Kampüsü, No: 104",
        "addressLocality": "Nilüfer",
        "addressRegion": "Bursa",
        "postalCode": "16059",
        "addressCountry": "TR"
      },
      "geo": {
        "@@type": "GeoCoordinates",
        "latitude": 40.2201925,
        "longitude": 28.8711467
      },
      "openingHoursSpecification": {
        "@@type": "OpeningHoursSpecification",
        "dayOfWeek": [
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday"
        ],
        "opens": "09:00",
        "closes": "18:00"
      },
      "sameAs": [
        "https://www.facebook.com/truncgil",
        "https://www.instagram.com/truncgil",
        "https://www.linkedin.com/company/truncgil-technology"
      ]
    },
    {
      "@@type": "Service",
      "@@id": "{{ url()->current() }}#service",
      "serviceType": "Web Application Development",
      "provider": {
        "@@id": "{{ url()->current() }}#organization"
      },
      "name": {!! json_encode(t('Web Uygulamaları Geliştirme Hizmeti')) !!},
      "description": {!! json_encode(t('Trunçgil Teknoloji olarak; Go, Rust, .NET, Swift, Android, Kotlin, Flutter, Three.js, React ve Vue gibi tüm modern teknolojilerle ölçeklenebilir ve güvenli web ve mobil çözümler geliştiriyoruz.')) !!},
      "areaServed": [
        {
          "@@type": "AdministrativeArea",
          "name": "Bursa"
        },
        {
          "@@type": "AdministrativeArea",
          "name": "Türkiye"
        },
        {
          "@@type": "AdministrativeArea",
          "name": "Global"
        }
      ],
      "hasOfferCatalog": {
        "@@type": "OfferCatalog",
        "name": "Web Development Offer Catalog",
        "itemListElement": [
          {
            "@@type": "Offer",
            "itemOffered": {
              "@@type": "Service",
              "name": "Single Page Application (SPA)"
            }
          },
          {
            "@@type": "Offer",
            "itemOffered": {
              "@@type": "Service",
              "name": "Progressive Web App (PWA)"
            }
          },
          {
            "@@type": "Offer",
            "itemOffered": {
              "@@type": "Service",
              "name": "API & Web Service Integration"
            }
          },
          {
            "@@type": "Offer",
            "itemOffered": {
              "@@type": "Service",
              "name": "3D Web Development (Three.js)"
            }
          }
        ]
      }
    }
  ]
}
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
    .web-dev-section .material-symbols-outlined {
        font-family: 'Material Symbols Outlined' !important;
        font-weight: normal !important;
        font-style: normal !important;
        line-height: 1 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .web-dev-section .accordion-wrapper .card-header button.collapsed {
        color: #343f52 !important;
    }
    .web-dev-section .accordion-wrapper .card-header button:hover,
    .web-dev-section .accordion-wrapper .card-header button {
        color: #747ed1 !important;
    }

    /* Technology Card Micro-animations */
    .tech-card {
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    }
    .tech-card:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 1.25rem 2.5rem rgba(116, 126, 209, 0.12) !important;
    }
    .tech-card img {
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .tech-card:hover img {
        transform: rotate(10deg) scale(1.1);
    }

    /* Floating Doodle Animations */
    @keyframes float-gentle {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-10px) rotate(3deg); }
    }
    .floating-doodle {
        animation: float-gentle 6s ease-in-out infinite;
    }

    /* Grid layout adjustments */
    .web-dev-features-start {
        padding-top: 3rem !important;
    }
    @media (min-width: 992px) {
        .web-dev-features-start {
            padding-top: 4rem !important;
        }
    }

    /* Header adjustments to overlay the gradient */
    body:has(.web-dev-hero) > header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1030;
        background: transparent !important;
    }
    body:has(.web-dev-hero) > header .navbar.transparent:not(.fixed):not(.navbar-clone) {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Hero adjustments */
    .web-dev-hero .web-dev-hero-text {
        position: relative;
        z-index: 2;
    }
    .web-dev-hero .web-dev-hero-image {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 38rem;
        margin-left: auto;
        margin-right: auto;
    }
    .web-dev-hero .web-dev-hero-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .web-dev-hero > .container {
        padding-bottom: 0 !important;
    }
    .web-dev-hero .divider {
        margin-bottom: -2.5rem;
    }
    @media (min-width: 992px) {
        .web-dev-hero .divider {
            margin-bottom: -3.5rem;
        }
    }

    .web-dev-illustration {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .web-dev-illustration--process {
        max-width: 28rem;
    }
    @media (min-width: 992px) {
        .web-dev-illustration--process {
            max-width: 22rem;
        }
    }
    .web-dev-illustration--platforms {
        max-width: 36rem;
    }
    .tech-tabs-grid {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 1.5rem !important;
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    @media (min-width: 768px) {
        .tech-tabs-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
    @media (min-width: 1200px) {
        .tech-tabs-grid {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }
    .tech-tabs-grid .nav-item {
        margin-bottom: 0 !important;
        display: flex !important;
    }
    .tech-tabs-grid .nav-link {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0.8rem !important;
        background: #ffffff !important;
        box-shadow: 0 0.25rem 1.75rem rgba(30, 34, 40, 0.05) !important;
        border: 1px solid rgba(116, 126, 209, 0.08) !important;
        padding: 1.25rem !important;
        transition: all 0.3s ease !important;
    }
    .tech-tabs-grid .nav-link:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 0.5rem 2rem rgba(116, 126, 209, 0.12) !important;
    }
    .tech-tabs-grid .nav-link.active {
        background: #f0f2fd !important;
        border-color: #747ed1 !important;
        box-shadow: 0 0.5rem 2rem rgba(116, 126, 209, 0.15) !important;
    }
    .tech-tabs-grid .nav-link h4 {
        color: #343f52 !important;
        transition: color 0.3s ease !important;
    }
    .tech-tabs-grid .nav-link p {
        color: #60697b !important;
        transition: color 0.3s ease !important;
    }
    .tech-tabs-grid .nav-link:hover h4,
    .tech-tabs-grid .nav-link.active h4 {
        color: #747ed1 !important;
    }
    .tech-tabs-grid .nav-link:hover p,
    .tech-tabs-grid .nav-link.active p {
        color: #60697b !important;
    }
</style>
@endpush

@section('content')

@php
    $featureBgColors = [
        '#f0f2fd', '#fbf1f4', '#fdf3e7', '#edf9f6',
        '#f6effa', '#fef4f2', '#edf2fc', '#edf8f5',
    ];

    $techCategories = [
        'frontend' => [
            'title' => 'Frontend & Arayüz',
            'cat_logo' => 'reactjs.svg',
            'desc' => 'Kullanıcı dostu, hızlı ve etkileyici kullanıcı deneyimleri (UX/UI).',
            'items' => ['HTML5', 'CSS3', 'JavaScript', 'TypeScript', 'React.js', 'Vue.js', 'Angular.js', 'Next.js', 'Nuxt.js', 'Svelte.js', 'Three.js (3D)', 'Tailwind CSS', 'Bootstrap', 'Sass', 'Astro', 'WebAssembly']
        ],
        'backend' => [
            'title' => 'Backend & Bulut Altyapısı',
            'cat_logo' => 'go.svg',
            'desc' => 'Güvenli sunucu sistemleri, konteynerleştirme ve DevOps süreçleri.',
            'items' => ['Node.js', 'PHP', 'Laravel', 'Symfony', 'Python', 'Django', 'FastAPI', 'Go', 'Rust', '.NET', 'Ruby on Rails', 'Java', 'Spring', 'NestJS', 'Docker', 'Kubernetes', 'AWS', 'Google Cloud', 'Azure', 'Firebase', 'Supabase', 'PostgreSQL', 'MySQL', 'MongoDB', 'Redis', 'Git', 'GitHub', 'GitLab', 'Terraform', 'Cloudflare']
        ],
        'mobile' => [
            'title' => 'Mobil & Hibrit',
            'cat_logo' => 'flutter.svg',
            'desc' => 'Tüm mobil cihazlar ve işletim sistemleri için uyumlu yerel çözümler.',
            'items' => ['Android', 'Kotlin', 'Swift', 'Flutter', 'Electron', 'Ionic', 'PWA']
        ],
        'ai_integrations' => [
            'title' => 'Yapay Zeka Entegrasyonları',
            'cat_logo' => 'chatgpt.svg',
            'desc' => 'API tabanlı akıllı asistanlar ve doğal dil işleme sistemleri.',
            'items' => ['ChatGPT', 'Claude AI', 'DeepSeek', 'OpenAI']
        ],
        'design_tools' => [
            'title' => 'UI/UX & Tasarım Araçları',
            'cat_logo' => 'figma.svg',
            'desc' => 'Kullanıcı odaklı modern arayüz tasarımları ve görsel varlıklar.',
            'items' => ['Figma', 'Canva', 'Adobe Photoshop']
        ],
        'ai_models' => [
            'title' => 'Generative AI & Deep Learning',
            'cat_logo' => 'tensorflow.svg',
            'desc' => 'Özel yapay zeka modelleri, makine öğrenmesi ve veri analitiği.',
            'items' => ['TensorFlow', 'PyTorch']
        ]
    ];

    $technologies = [
        [
            'name' => 'HTML5',
            'icon' => 'html5.svg',
            'desc' => 'Modern, anlamsal ve standart web yapısı.',
            'bg' => '#E34F2612'
        ],
        [
            'name' => 'CSS3',
            'icon' => 'css3.svg',
            'desc' => 'Görsel stil, responsive düzenler ve animasyonlar.',
            'bg' => '#1572B612'
        ],
        [
            'name' => 'JavaScript',
            'icon' => 'javascript.svg',
            'desc' => 'Dinamik, hızlı ve etkileşimli istemci tarafı mantığı.',
            'bg' => '#F7DF1E12'
        ],
        [
            'name' => 'TypeScript',
            'icon' => 'typescript.svg',
            'desc' => 'Güvenli, statik tipli ve ölçeklenebilir JavaScript.',
            'bg' => '#3178C612'
        ],
        [
            'name' => 'React.js',
            'icon' => 'reactjs.svg',
            'desc' => 'Bileşen tabanlı yüksek performanslı arayüz kütüphanesi.',
            'bg' => '#61DAFB12'
        ],
        [
            'name' => 'Vue.js',
            'icon' => 'vuejs.svg',
            'desc' => 'Esnek, hızlı ve öğrenmesi kolay modern frontend çatısı.',
            'bg' => '#4FC08D12'
        ],
        [
            'name' => 'Angular.js',
            'icon' => 'angular.svg',
            'desc' => 'Kurumsal seviyede, modüler ve güçlü uygulama iskeleti.',
            'bg' => '#DD003112'
        ],
        [
            'name' => 'Next.js',
            'icon' => 'nextjs.svg',
            'desc' => 'SEO dostu ve Server-Side Rendering (SSR) destekli React çatısı.',
            'bg' => '#00000012'
        ],
        [
            'name' => 'Nuxt.js',
            'icon' => 'nuxtjs.svg',
            'desc' => 'Vue tabanlı, SSR ve statik site oluşturma iskeleti.',
            'bg' => '#00C58E12'
        ],
        [
            'name' => 'Svelte.js',
            'icon' => 'sveltejs.svg',
            'desc' => 'Derleme zamanı optimizasyonlarıyla ultra hafif ve hızlı arayüzler.',
            'bg' => '#FF3E0012'
        ],
        [
            'name' => 'Three.js (3D)',
            'icon' => 'threejs.svg',
            'desc' => 'Tarayıcı tabanlı etkileyici 3D WebGL dünyaları.',
            'bg' => '#00000012'
        ],
        [
            'name' => 'Tailwind CSS',
            'icon' => 'tailwindcss.svg',
            'desc' => 'Hızlı ve esnek tasarım için modern CSS kurgusu.',
            'bg' => '#06B6D412'
        ],
        [
            'name' => 'Bootstrap',
            'icon' => 'bootstrap5.svg',
            'desc' => 'Zengin hazır bileşen kütüphanesi ve responsive ızgara yapısı.',
            'bg' => '#7952B312'
        ],
        [
            'name' => 'Sass',
            'icon' => 'sass.svg',
            'desc' => 'Güçlü değişkenler ve fonksiyonlar içeren CSS ön işlemcisi.',
            'bg' => '#CC669912'
        ],
        [
            'name' => 'Astro',
            'icon' => 'astro.svg',
            'desc' => 'Ultra hızlı statik ve dinamik içerik odaklı web çatısı.',
            'bg' => '#BC52EE12'
        ],
        [
            'name' => 'WebAssembly',
            'icon' => 'webassembly.svg',
            'desc' => 'Tarayıcıda yerel performansta kod çalıştırma teknolojisi.',
            'bg' => '#654FF012'
        ],
        [
            'name' => 'Node.js',
            'icon' => 'nodejs.svg',
            'desc' => 'Hızlı ve olay tabanlı JavaScript backend motoru.',
            'bg' => '#33993312'
        ],
        [
            'name' => 'PHP',
            'icon' => 'php.svg',
            'desc' => 'Geniş uyumluluk ve dinamik web siteleri için sunucu dili.',
            'bg' => '#777BB412'
        ],
        [
            'name' => 'Laravel',
            'icon' => 'laravel.svg',
            'desc' => "PHP'nin en popüler, temiz ve kurumsal backend çatısı.",
            'bg' => '#FF2D2012'
        ],
        [
            'name' => 'Symfony',
            'icon' => 'symfony-dark.svg',
            'desc' => 'Modüler, güvenli ve esnek PHP framework mimarisi.',
            'bg' => '#00000012'
        ],
        [
            'name' => 'Python',
            'icon' => 'python.svg',
            'desc' => 'Veri odaklı, okunabilir ve güçlü genel amaçlı yazılım dili.',
            'bg' => '#3776AB12'
        ],
        [
            'name' => 'Django',
            'icon' => 'django.svg',
            'desc' => 'Python tabanlı ultra güvenli ve hızlı backend iskeleti.',
            'bg' => '#092E2012'
        ],
        [
            'name' => 'FastAPI',
            'icon' => 'fast-api.svg',
            'desc' => 'Modern, yüksek performanslı ve otomatik API dökümantasyonlu çatı.',
            'bg' => '#00968812'
        ],
        [
            'name' => 'Go',
            'icon' => 'go.svg',
            'desc' => 'Yüksek eşzamanlılık (concurrency) ve performans odaklı sistem dili.',
            'bg' => '#00ADD812'
        ],
        [
            'name' => 'Rust',
            'icon' => 'rust.svg',
            'desc' => 'Bellek güvenliği ve sıfır maliyetli soyutlama sunan yeni nesil dil.',
            'bg' => '#00000012'
        ],
        [
            'name' => '.NET',
            'icon' => 'dotnet.svg',
            'desc' => 'Kurumsal seviyede yüksek performanslı Microsoft backend çatısı.',
            'bg' => '#512BD412'
        ],
        [
            'name' => 'Ruby on Rails',
            'icon' => 'rails.svg',
            'desc' => "Hızlı prototipleme ve temiz kod odaklı backend framework'ü.",
            'bg' => '#CC000012'
        ],
        [
            'name' => 'Java',
            'icon' => 'java.svg',
            'desc' => 'Güvenli, platform bağımsız ve kurumsal dev sistemlerin dili.',
            'bg' => '#00739612'
        ],
        [
            'name' => 'Spring',
            'icon' => 'spring.svg',
            'desc' => 'Java tabanlı ölçeklenebilir ve modüler kurumsal çatı.',
            'bg' => '#6DB33F12'
        ],
        [
            'name' => 'NestJS',
            'icon' => 'nestjs.svg',
            'desc' => 'TypeScript ile yazılmış, mimari standartları yüksek Node.js çatısı.',
            'bg' => '#E0234E12'
        ],
        [
            'name' => 'Android',
            'icon' => 'android.svg',
            'desc' => 'Dünyanın en popüler açık kaynaklı mobil işletim sistemi.',
            'bg' => '#3DDC8412'
        ],
        [
            'name' => 'Kotlin',
            'icon' => 'kotlin.svg',
            'desc' => 'Modern, güvenli ve Android platformu için Google onaylı öncelikli yazılım dili.',
            'bg' => '#7F52FF12'
        ],
        [
            'name' => 'Swift',
            'icon' => 'swift.svg',
            'desc' => 'Apple ekosistemi için performanslı ve modern native dil.',
            'bg' => '#F0513812'
        ],
        [
            'name' => 'Flutter',
            'icon' => 'flutter.svg',
            'desc' => 'Tek kod tabanından yerel performansta çoklu platform arayüzleri.',
            'bg' => '#02569B12'
        ],
        [
            'name' => 'Electron',
            'icon' => 'electron.svg',
            'desc' => 'Web teknolojileriyle masaüstü uygulamaları geliştirme altyapısı.',
            'bg' => '#47848F12'
        ],
        [
            'name' => 'Ionic',
            'icon' => 'ionic.svg',
            'desc' => 'Web standartlarıyla hibrit mobil uygulamalar üretme çatısı.',
            'bg' => '#3880FF12'
        ],
        [
            'name' => 'PWA',
            'icon' => 'pwa.svg',
            'desc' => 'Web sitemizi mobil uygulama gibi çevrimdışı çalışabilen yapılara taşıma.',
            'bg' => '#5A0FC812'
        ],
        [
            'name' => 'Docker',
            'icon' => 'docker.svg',
            'desc' => 'Konteyner teknolojisiyle her ortamda tutarlı çalışma sistemi.',
            'bg' => '#2496ED12'
        ],
        [
            'name' => 'Kubernetes',
            'icon' => 'kubernetes.svg',
            'desc' => 'Konteyner orkestrasyonu ve bulut tabanlı otomatik ölçekleme.',
            'bg' => '#326CE512'
        ],
        [
            'name' => 'AWS',
            'icon' => 'aws.svg',
            'desc' => 'Dünyanın en kapsamlı ve yaygın bulut altyapı hizmetleri sağlayıcısı.',
            'bg' => '#FF990012'
        ],
        [
            'name' => 'Google Cloud',
            'icon' => 'google-cloud.svg',
            'desc' => "Google'ın gelişmiş veri ve analiz odaklı bulut altyapısı.",
            'bg' => '#4285F412'
        ],
        [
            'name' => 'Azure',
            'icon' => 'azure.svg',
            'desc' => "Microsoft'un kurumsal entegrasyon gücü yüksek bulut sistemi.",
            'bg' => '#0078D412'
        ],
        [
            'name' => 'Firebase',
            'icon' => 'firebase.svg',
            'desc' => 'Mobil ve web için gerçek zamanlı veritabanı ve sunucusuz servisler.',
            'bg' => '#FFCA2812'
        ],
        [
            'name' => 'Supabase',
            'icon' => 'supabase.svg',
            'desc' => 'PostgreSQL tabanlı modern ve açık kaynaklı Firebase alternatifi.',
            'bg' => '#3ECF8E12'
        ],
        [
            'name' => 'PostgreSQL',
            'icon' => 'postgresql.svg',
            'desc' => 'İleri seviye ilişkisel veri yönetimi sunan güvenilir veritabanı.',
            'bg' => '#4169E112'
        ],
        [
            'name' => 'MySQL',
            'icon' => 'mysql.svg',
            'desc' => 'Dünyanın en popüler ve hızlı açık kaynaklı ilişkisel veritabanı.',
            'bg' => '#4479A112'
        ],
        [
            'name' => 'MongoDB',
            'icon' => 'mongodb.svg',
            'desc' => 'Esnek şemalı, büyük veri odaklı popüler NoSQL veritabanı.',
            'bg' => '#47A24812'
        ],
        [
            'name' => 'Redis',
            'icon' => 'redis.svg',
            'desc' => 'Bellek içi (in-memory) ultra hızlı veri yapısı deposu ve önbellek.',
            'bg' => '#DC382D12'
        ],
        [
            'name' => 'Git',
            'icon' => 'git.svg',
            'desc' => 'Modern yazılım projelerinin standart versiyon kontrol sistemi.',
            'bg' => '#F0503212'
        ],
        [
            'name' => 'GitHub',
            'icon' => 'github-dark.svg',
            'desc' => 'Yazılım geliştirme, sürüm kontrol ve CI/CD iş birliği platformu.',
            'bg' => '#18171712'
        ],
        [
            'name' => 'GitLab',
            'icon' => 'gitlab.svg',
            'desc' => 'Uçtan uca otomatik test ve kesintisiz canlıya alım platformu.',
            'bg' => '#FC6D2612'
        ],
        [
            'name' => 'Terraform',
            'icon' => 'terraform.svg',
            'desc' => 'Kod olarak altyapı (IaC) yönetimi sunan bulut aracı.',
            'bg' => '#7B42BC12'
        ],
        [
            'name' => 'Cloudflare',
            'icon' => 'cloudflare.svg',
            'desc' => 'Güvenli, hızlı içerik dağıtım ağı (CDN) ve DNS servisleri.',
            'bg' => '#F3802012'
        ],
        [
            'name' => 'ChatGPT',
            'icon' => 'chatgpt.svg',
            'desc' => 'Yapay zeka tabanlı doğal dil işleme ve asistanlık çözümleri.',
            'bg' => '#10A37F12'
        ],
        [
            'name' => 'Claude AI',
            'icon' => 'claude-ai.svg',
            'desc' => 'Akıl yürütme yetenekleri yüksek gelişmiş yapay zeka modeli.',
            'bg' => '#D9770612'
        ],
        [
            'name' => 'DeepSeek',
            'icon' => 'deepseek.svg',
            'desc' => 'Yüksek performanslı ve yeni nesil popüler yapay zeka motoru.',
            'bg' => '#4F46E512'
        ],
        [
            'name' => 'OpenAI',
            'icon' => 'openai.svg',
            'desc' => 'Yapay zeka modelleri ve yenilikçi API servisleri sağlayıcısı.',
            'bg' => '#00000012'
        ],
        [
            'name' => 'TensorFlow',
            'icon' => 'tensorflow.svg',
            'desc' => 'Derin öğrenme ve yapay zeka modelleri geliştirme kütüphanesi.',
            'bg' => '#FF6F0012'
        ],
        [
            'name' => 'PyTorch',
            'icon' => 'pytorch.svg',
            'desc' => 'Araştırma ve üretim odaklı esnek makine öğrenmesi çatısı.',
            'bg' => '#EE4C2C12'
        ],
        [
            'name' => 'Figma',
            'icon' => 'figma.svg',
            'desc' => 'Gerçek zamanlı ve bulut tabanlı modern UI/UX tasarım aracı.',
            'bg' => '#F24E1E12'
        ],
        [
            'name' => 'Canva',
            'icon' => 'canva.svg',
            'desc' => 'Hızlı, kolay ve etkileyici görsel içerik oluşturma platformu.',
            'bg' => '#00C4CC12'
        ],
        [
            'name' => 'Adobe Photoshop',
            'icon' => 'photoshop.svg',
            'desc' => 'Profesyonel düzeyde piksel tabanlı görsel düzenleme aracı.',
            'bg' => '#31A8FF12'
        ]
    ];

    $capabilities = [
        [
            'icon' => 'monitor',
            'title' => 'Web Siteleri ve Web Uygulamaları',
            'description' => 'Göz alıcı kurumsal web sitelerinden karmaşık, dinamik portal ve yönetim sistemlerine kadar her boyuttaki ihtiyacınızı çözüyoruz.'
        ],
        [
            'icon' => 'install_mobile',
            'title' => 'PWA (Progressive Web Apps)',
            'description' => 'Web sitelerinizi, mobil cihazlarda yerleşik bir uygulama gibi çevrimdışı çalışabilen, hızlı ve bildirim gönderebilen uygulamalara dönüştürüyoruz.'
        ],
        [
            'icon' => 'api',
            'title' => 'Web Servisleri ve API Entegrasyonu',
            'description' => 'Uygulamalarınızın diğer sistemlerle pürüzsüz haberleşmesini sağlayan, yüksek performanslı RESTful ve GraphQL API altyapıları kuruyoruz.'
        ],
        [
            'icon' => 'sync',
            'title' => 'Socket Servisleri (Real-time)',
            'description' => 'Anlık mesajlaşma, canlı veri akışları ve çok oyunculu yapılar için WebSocket ve anlık iletişim ağları inşa ediyoruz.'
        ],
        [
            'icon' => 'view_in_ar',
            'title' => 'Three.js ve 3D Web',
            'description' => 'Tarayıcı tabanlı 3D ürün konfigüratörleri, zengin görselleştirme projeleri ve WebGL teknolojili büyüleyici dijital deneyimler geliştiriyoruz.'
        ],
        [
            'icon' => 'rocket_launch',
            'title' => 'Docker, Kubernetes ve CI/CD',
            'description' => 'Uygulamalarınızı modern konteyner mimarilerine taşıyor; Docker, Kubernetes ve otomatik CI/CD süreçleriyle kesintisiz canlıya alım altyapısı kuruyoruz.'
        ]
    ];

    $processSteps = [
        [
            'title' => 'Strateji ve Mimari Planlama',
            'description' => 'Kullanıcı taleplerini, iş yükünü ve kullanılacak teknolojileri (Go, Rust, .NET, Three.js, Django, Node.js veya React) belirleyerek ölçeklenebilir ve güvenli sistem mimarisini tasarlarız.'
        ],
        [
            'title' => 'Kusursuz Arayüz ve Kodlama',
            'description' => 'Modern UI/UX prensiplerine sadık kalarak, tüm tarayıcılarda hızlı çalışan, temiz ve optimize edilmiş frontend ve backend kodlamasını gerçekleştiririz.'
        ],
        [
            'title' => 'Dockerize ve Bulut Entegrasyonu',
            'description' => 'Geliştirilen uygulamaları Docker konteynerlerine alır, test süreçlerini otomatikleştirir ve Kubernetes kümenizde yüksek erişilebilirlikle orkestre edilmeye hazır hale getiririz.'
        ],
        [
            'title' => 'Yayın, CI/CD ve İzleme',
            'description' => 'Sürekli entegrasyon (CI/CD) hatlarını kurarız; böylece her güncellemeniz sıfır kesintiyle yayına alınır. Loglama ve anlık izleme araçlarıyla sistemi sürekli kontrol altında tutarız.'
        ]
    ];

    $whyChoose = [
        [
            'icon' => 'code',
            'bg' => '#e9eaf8',
            'title' => 'Uçtan Uca Modern Teknoloji Yığınları',
            'description' => 'React, Vue, Node.js, Django, Go, Rust ve .NET gibi teknolojilerdeki geniş yetkinliğimizle, projenizin ihtiyacına en uygun araçları seçer, performans darboğazlarını engelleriz.'
        ],
        [
            'icon' => 'hub',
            'bg' => '#e1f6f0',
            'title' => 'Mikroservisler ve Konteyner Gücü',
            'description' => 'Docker ve Kubernetes konusundaki derin mühendislik bilgimiz sayesinde projelerinizi yüksek trafik altında dahi kusursuz ölçeklenecek şekilde yapılandırırız.'
        ],
        [
            'icon' => 'bolt',
            'bg' => '#fef3e4',
            'title' => 'Üstün Performans ve SEO Dostu Arayüzler',
            'description' => 'Geliştirdiğimiz web uygulamaları hızlı sayfa yükleme sürelerine ve arama motorları için optimize edilmiş, premium kod kalitesine sahiptir.'
        ],
        [
            'icon' => 'gpp_good',
            'bg' => '#e0e9fa',
            'title' => 'OWASP Standardında Güvenlik',
            'description' => 'XSS, SQL Injection ve CSRF gibi web güvenlik tehditlerine karşı geliştirme aşamasından itibaren sıkı denetimler ve koruma katmanları uygularız.'
        ],
    ];

    $faqs = [
        [
            'question' => 'Neden Single Page App (SPA) veya Server-Side Rendering (SSR) tercih etmeliyiz?',
            'answer' => 'React veya Vue ile geliştirilen SPA projeleri, sayfa yenilenmeden çalışarak kullanıcıya akıcı bir mobil uygulama deneyimi sunar. Next.js gibi SSR çözümleri ise hem bu akıcılığı korur hem de arama motoru optimizasyonu (SEO) için mükemmel sonuçlar verir.'
        ],
        [
            'question' => 'Progressive Web App (PWA) ne gibi avantajlar sunar?',
            'answer' => 'PWA, web sitenizin kullanıcı cihazında (Android, iOS, Masaüstü) bağımsız bir uygulama gibi çalışmasını sağlar. Çevrimdışı çalışabilme, ana ekrana kısayol ekleme ve push bildirim desteğiyle uygulama mağazası süreçleri olmadan yüksek dönüşüm elde edersiniz.'
        ],
        [
            'question' => 'Django veya Node.js backend mimarilerinin farkları nelerdir?',
            'answer' => 'Node.js, yüksek miktardaki eşzamanlı istekleri ve real-time socket işlemlerini mükemmel yönetir. Django ise Python ekosisteminin veri analitiği, güvenlik standartları ve hızlı geliştirme (hazır admin panel) imkanlarını projelerinize kazandırır.'
        ],
        [
            'question' => 'CI/CD süreçleri projelerimize nasıl katkı sağlıyor?',
            'answer' => 'Sürekli Entegrasyon ve Sürekli Dağıtım (CI/CD) hatları, yazdığımız her yeni kodun otomatik testlerden geçmesini ve sıfır kesintiyle (zero-downtime) doğrudan yayına alınmasını sağlar. Manuel yükleme hatalarını tamamen ortadan kaldırır.'
        ],
        [
            'question' => 'Three.js ve 3D Web projeleri tüm tarayıcılarda çalışır mı?',
            'answer' => 'Evet, modern web tarayıcılarının tamamı WebGL teknolojisini yerleşik olarak destekler. Three.js ile tasarladığımız 3D deneyimler ek bir eklentiye gerek kalmadan masaüstü ve mobil tarayıcılarda yüksek performansla çalışır.'
        ],
        [
            'question' => 'Mevcut web sitemizi modern teknolojilerle yeniden inşa edebilir misiniz?',
            'answer' => 'Kesinlikle. Eski veya yavaşlayan web altyapılarınızı modern backend (Django, Node.js, Laravel) ve frontend (React, Vue) teknolojilerine taşır, veritabanı kayıpları yaşamadan geçişi sağlarız.'
        ],
        [
            'question' => 'Mobil uygulamalarda neden Flutter, Kotlin veya Swift tercih ediyorsunuz?',
            'answer' => 'Hızlı geliştirme ve çoklu platform desteği için Flutter ile yüksek performanslı cross-platform uygulamalar üretirken, platforma özel yüksek performans ve derin entegrasyon gerektiren projelerde native Kotlin (Android) ve Swift (iOS) teknolojilerini kullanıyoruz.'
        ],
        [
            'question' => 'Go, Rust ve .NET teknolojilerini hangi projelerde kullanıyorsunuz?',
            'answer' => 'Go ve Rust teknolojilerini ultra yüksek performans, düşük bellek tüketimi ve yüksek eşzamanlılık gerektiren mikroservisler ile arka plan sistemlerinde; .NET mimarisini ise büyük ölçekli kurumsal altyapılar ve güvenli web servisleri geliştirmek için tercih ediyoruz.'
        ]
    ];

    $testimonials = [
        [
            'quote' => 'Three.js tabanlı interaktif 3D ürün konfigüratörümüzü mükemmel seviyede kodladılar. Tarayıcıda bu kadar akıcı çalışacağına inanmıyorduk.',
            'name' => 'Alperen Şen',
            'role' => 'Ürün Yöneticisi, Tasarım Mobilya',
            'bg' => '#f0f2fd',
        ],
        [
            'quote' => 'Yüksek anlık trafik çeken socket tabanlı veri takip sistemimizi Node.js ve Kubernetes orkestrasyonuyla sıfır kesintiyle çalıştırıyorlar. Müthiş altyapı.',
            'name' => 'Okan Yurtsever',
            'role' => 'Yazılım Direktörü, Enerji Şirketi',
            'bg' => '#fbf1f4',
        ],
        [
            'quote' => 'Django backend ve React frontend ile geliştirilen kurumsal yönetim panelimiz harika çalışıyor. CI/CD süreçleri sayesinde güncellemeler anında yayında.',
            'name' => 'Merve Karaca',
            'role' => 'Operasyon Müdürü, Lojistik Holding',
            'bg' => '#fdf3e7',
        ],
        [
            'quote' => 'Mevcut portalımızı PWA standartlarına taşıdıklarında kullanıcı dönüşümlerimiz iki katına çıktı. Bildirimler ve hız gerçekten mobil uygulama gibi.',
            'name' => 'Bora Akıncı',
            'role' => 'Kurucu Ortak, Finans Startup\'ı',
            'bg' => '#edf9f6',
        ],
    ];

    $contactUrl = route('page.show', ['slug' => 'iletisim']);
@endphp

{{-- Hero Section --}}
<section class="wrapper bg-gradient-purple web-dev-hero relative overflow-hidden">
    <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-[4.5rem] xl:pb-32 lg:pb-32 md:pb-32">
        <div class="flex flex-wrap mx-[-15px] !text-center">
            <div class="xl:w-10/12 lg:w-10/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto web-dev-hero-text" data-cues="zoomIn" data-group="welcome" data-interval="-200">
                <img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block floating-doodle" style="top: -12%; left: 4%" alt="" loading="lazy">
                <img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block floating-doodle" style="bottom: 0; right: -8%" alt="" loading="lazy">
                <h1 class="xl:!text-[2.6rem] !text-[calc(1.375rem_+_1.5vw)] !leading-[1.15] font-bold !mb-4">
                    {!! t('Geleceğin Web Teknolojileriyle') !!} <span class="text-gradient gradient-7">{!! t('İşinizi Güçlendirin') !!}</span>
                </h1>
                <p class="lead !text-[1.2rem] leading-normal md:!px-5 xl:!px-20 xxl:!px-10 !mb-7">
                    {!! t('Trunçgil Teknoloji olarak; Go, Rust, .NET, Swift, Android, Kotlin, Flutter, React, Vue, Node.js ve Three.js gibi modern teknolojilerin yanı sıra PWA, WebSocket ve Kubernetes bulut mimarileriyle ölçeklenebilir çözümler geliştiriyoruz.') !!}
                </p>
            </div>
        </div>
        <div class="flex justify-center" data-cues="slideInDown" data-group="join" data-delay="900">
            <span><a href="#neler-yapiyoruz" class="btn btn-lg btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] mx-1">{!! t('Çözümlerimiz') !!}</a></span>
            <span><a href="{{ $contactUrl }}" class="btn btn-lg btn-outline-purple !text-[#747ed1] bg-transparent border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] focus:shadow-[rgba(116,126,209,1)] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:!text-[#747ed1] disabled:bg-transparent disabled:border-[#747ed1] !rounded-[50rem] !border-[#747ed1] hover:!bg-[#747ed1] hover:!text-white mx-1">{!! t('Bize Ulaşın') !!}</a></span>
        </div>
        <div class="flex flex-wrap mx-[-15px] !mt-[3.5rem]" data-cue="fadeIn" data-delay="1600">
            <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                <figure class="m-0 p-0">
                    <x-front.page-hero-image
                        :hero="$pageHero"
                        :alt="t('Trunçgil Teknoloji web uygulama geliştirme')"
                    />
                </figure>
            </div>
        </div>
    </div>
    <div class="overflow-hidden" style="z-index:1;">
        <div class="divider !text-[#fefefe] mx-[-0.5rem]">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
                <g fill="currentColor">
                    <polygon points="1440 100 0 100 0 85 1440 0 1440 100" />
                </g>
            </svg>
        </div>
    </div>
</section>

{{-- Technology Showcase Section --}}
<section class="wrapper !bg-[#ffffff] web-dev-section">
    <div class="container pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
        <div class="flex flex-wrap mx-[-15px] !text-center">
            <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
                <img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block floating-doodle" style="top: -45%; left: 23%" alt="" loading="lazy">
                <img src="{{ asset('assets/img/svg/doodle4.svg') }}" class="h-8 absolute hidden xl:block lg:block floating-doodle" style="top: 6%; right: 2%" alt="" loading="lazy">
                <h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Teknoloji Ekosistemimiz') !!}</h2>
                <h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] !mb-12 lg:!px-5 xl:!px-0 xxl:!px-6">
                    {!! t('En yeni, modern ve performanslı') !!} <span class="text-gradient gradient-7">{!! t('yazılım yığınlarını') !!}</span> {!! t('kullanıyoruz.') !!}
                </h3>
            </div>
        </div>

        <div class="flex flex-wrap mx-[-15px] !mb-28">
            <div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                <ul class="nav nav-tabs tech-tabs-grid" role="tablist">
                    @foreach($techCategories as $key => $category)
                    <li class="nav-item !mb-[20px]" role="presentation">
                        <a class="nav-link !flex flex-row items-center {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" href="#tab-tech-{{ $key }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}" role="tab" {!! !$loop->first ? 'tabindex="-1"' : '' !!}>
                            <div>
                                <img src="{{ asset('assets/img/tech-logos/' . $category['cat_logo']) }}" class="!w-[2.6rem] !h-[2.6rem] !mr-4 object-contain" alt="{{ $category['title'] }}" loading="lazy" decoding="async">
                            </div>
                            <div class="text-start">
                                <h4 class="!mb-1">{!! t($category['title']) !!}</h4>
                                <p class="!text-[0.75rem] !mb-0 text-muted">{!! t($category['desc']) !!}</p>
                            </div>
                        </a>
                    </li>
                    @endforeach
                </ul>

                <div class="tab-content mt-8">
                    @foreach($techCategories as $key => $category)
                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab-tech-{{ $key }}">
                        <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] justify-center">
                            @foreach($technologies as $tech)
                                @if(in_array($tech['name'], $category['items']))
                                <div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
                                    <div class="card tech-card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.05)] border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden">
                                        <div class="card-body !p-8 md:!p-10 flex flex-col items-center text-center">
                                            <div class="w-16 h-16 flex items-center justify-center !rounded-[100%] !mb-5" style="background-color: {{ $tech['bg'] }};">
                                                <img src="{{ asset('assets/img/tech-logos/' . $tech['icon']) }}" class="w-8 h-8 object-contain" alt="{{ $tech['name'] }}" loading="lazy" decoding="async">
                                            </div>
                                            <h4 class="!text-[1.15rem] !font-bold !mb-2">{{ $tech['name'] }}</h4>
                                            <p class="!text-[0.85rem] !mb-0 text-muted">{!! t($tech['desc']) !!}</p>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Capabilities Section --}}
        <div id="neler-yapiyoruz" class="flex flex-wrap mx-[-15px] !text-center !mt-12">
            <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
                <h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Neler Yapıyoruz?') !!}</h2>
                <h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] !mb-12 lg:!px-5 xl:!px-0 xxl:!px-6">
                    {!! t('İhtiyaçlarınıza özel, yüksek performanslı') !!} <span class="text-gradient gradient-7">{!! t('dijital çözümler') !!}</span>
                </h3>
            </div>
        </div>

        <div class="flex flex-wrap mx-[-15px] !mb-28">
            @foreach($capabilities as $index => $cap)
            <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-6 max-w-full">
                <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.06)] border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden">
                    <div class="card-body !p-8 md:!p-10 flex-[1_1_auto] flex flex-col">
                        <div class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]">
                            <span class="material-symbols-outlined !text-[1.8rem]" style="text-transform: none !important;">{{ $cap['icon'] }}</span>
                        </div>
                        <h4 class="!text-[1.15rem] !font-bold !mb-2">{!! t($cap['title']) !!}</h4>
                        <p class="!text-[0.85rem] !mb-0 text-muted flex-1">{!! t($cap['description']) !!}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- How It Works --}}
        <div class="flex flex-wrap mx-[-15px] !text-center">
            <div class="md:w-10/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
                <img src="{{ asset('assets/img/svg/doodle5.svg') }}" class="!w-[5rem] absolute hidden xl:block lg:block floating-doodle" style="bottom: -60%; right: 10%" alt="" loading="lazy">
                <img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block floating-doodle" style="top: -40%; left: -5%" alt="" loading="lazy">
                <h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3 !leading-[1.35]">{!! t('Geliştirme Sürecimiz') !!}</h2>
                <h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-8 xl:!px-6">
                    {!! t('Uygulamanızı baştan sona') !!} <span class="text-gradient gradient-7">{!! t('adım adım') !!}</span> {!! t('inşa ediyoruz.') !!}
                </h3>
            </div>
        </div>

        <div class="flex flex-wrap mx-[-15px] lg:!mb-20 xl:!mb-[10rem]">
            <div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                <div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !text-center items-center">
                    <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[-2.5rem] lg:!mb-0 xl:!mb-0 !mt-[50px] xl:!mt-0 lg:!mt-0">
                        <figure class="mx-auto">
                            <picture>
                                <source srcset="{{ asset('assets/img/illustrations/i9.png') }}" type="image/webp">
                                <img class="web-dev-illustration web-dev-illustration--process" src="{{ asset('assets/img/illustrations/i9.png') }}" alt="{!! t('Trunçgil Teknoloji web geliştirme süreci') !!}" width="800" height="800" loading="lazy" decoding="async">
                            </picture>
                        </figure>
                    </div>
                    <div class="w-full xl:!hidden lg:!hidden !px-[15px] !mt-[50px]"></div>
                    <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full lg:!-order-1 xl:!-order-1 !mt-[50px] xl:!mt-0 lg:!mt-0">
                        @foreach(array_slice($processSteps, 0, 2) as $index => $step)
                        <div class="{{ $index === 0 ? '!mb-8' : '' }}">
                            <span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                            <h4 class="!text-[1rem] !font-bold">{!! t($step['title']) !!}</h4>
                            <p class="!mb-0 xl:!px-7 !text-[0.85rem] text-muted">{!! t($step['description']) !!}</p>
                        </div>
                        @endforeach
                    </div>
                    <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px] xl:!mt-0 lg:!mt-0">
                        @foreach(array_slice($processSteps, 2, 2) as $index => $step)
                        <div class="{{ $index === 0 ? '!mb-8' : '' }}">
                            <span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 3, 2, '0', STR_PAD_LEFT) }}</span>
                            <h4 class="!text-[1rem] !font-bold">{!! t($step['title']) !!}</h4>
                            <p class="!mb-0 xl:!px-7 !text-[0.85rem] text-muted">{!! t($step['description']) !!}</p>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Accented FAQ Section --}}
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)] web-dev-section" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg23.webp') }}');">
    <div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem] !relative" style="z-index: 2;">
        <div class="flex flex-wrap mx-[-15px]">
            <div class="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                <div class="!relative !mb-12">
                    <img src="{{ asset('assets/img/svg/doodle7.svg') }}" class="h-7 absolute hidden xl:block lg:block floating-doodle" style="top: -90%; right: -3%" alt="" loading="lazy">
                    <img src="{{ asset('assets/img/svg/doodle8.svg') }}" class="!h-[4.5rem] absolute hidden xl:block lg:block floating-doodle" style="top: -20%; left: -12%" alt="" loading="lazy">
                    <h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{!! t('Sık Sorulan Sorular') !!}</h2>
                    <h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-0 lg:!px-8 xl:!px-12 !text-center">
                        {!! t('Web çözümlerimiz hakkında') !!} <span class="text-gradient gradient-7">{!! t('merak ettikleriniz') !!}</span>
                    </h3>
                </div>
                <div class="flex flex-wrap mx-[-15px]">
                    <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-0">
                        <div id="accordion-web-dev-1" class="accordion-wrapper">
                            @foreach(array_slice($faqs, 0, 3) as $index => $faq)
                            <div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="accordion-heading-wd-1-{{ $index }}">
                                    <button class="!text-[#343f52] !text-[0.9rem] hover:!text-[#747ed1] before:!text-[#747ed1] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-wd-1-{{ $index }}" aria-expanded="false" aria-controls="accordion-collapse-wd-1-{{ $index }}">
                                        {!! t($faq['question']) !!}
                                    </button>
                                </div>
                                <div id="accordion-collapse-wd-1-{{ $index }}" class="collapse" aria-labelledby="accordion-heading-wd-1-{{ $index }}" data-bs-target="#accordion-web-dev-1">
                                    <div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem] !text-[0.85rem] text-muted">
                                        <p>{!! t($faq['answer']) !!}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                        <div id="accordion-web-dev-2" class="accordion-wrapper">
                            @foreach(array_slice($faqs, 3, 3) as $index => $faq)
                            <div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="accordion-heading-wd-2-{{ $index }}">
                                    <button class="!text-[#343f52] !text-[0.9rem] hover:!text-[#747ed1] before:!text-[#747ed1] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-wd-2-{{ $index }}" aria-expanded="false" aria-controls="accordion-collapse-wd-2-{{ $index }}">
                                        {!! t($faq['question']) !!}
                                    </button>
                                </div>
                                <div id="accordion-collapse-wd-2-{{ $index }}" class="collapse" aria-labelledby="accordion-heading-wd-2-{{ $index }}" data-bs-target="#accordion-web-dev-2">
                                    <div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem] !text-[0.85rem] text-muted">
                                        <p>{!! t($faq['answer']) !!}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Why Choose Section --}}
<section class="wrapper !bg-[#ffffff] web-dev-section">
    <div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
        <div class="flex flex-wrap mx-[-15px] !text-center">
            <div class="md:w-11/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
                <img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block floating-doodle" style="top: -20%; right: -12%" alt="" loading="lazy">
                <img src="{{ asset('assets/img/svg/doodle9.svg') }}" class="!h-[7rem] absolute hidden xl:block lg:block floating-doodle" style="bottom: 5%; left: -17%" alt="" loading="lazy">
                <h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{!! t('Neden Trunçgil Teknoloji?') !!}</h2>
                <h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-14 !text-center">
                    {!! t('Web projenizin başarısı için') !!} <span class="text-gradient gradient-7">{!! t('4 güçlü neden') !!}</span>
                </h3>
            </div>
        </div>

        <div class="flex-wrap mx-[-15px] flex items-start !mb-32">
            <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!sticky lg:!sticky" style="top: 8rem;">
                <figure class="m-0 p-0">
                    <picture>
                        <source srcset="{{ asset('assets/img/illustrations/i17.png') }}" type="image/webp">
                        <img class="web-dev-illustration web-dev-illustration--platforms w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/i17.png') }}" alt="{!! t('Trunçgil Teknoloji web uygulamalar') !!}" width="1024" height="1024" loading="lazy" decoding="async">
                    </picture>
                </figure>
            </div>
            <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto">
                @foreach($whyChoose as $item)
                <div class="flex flex-row !mb-8">
                    <div>
                        <div class="svg-bg svg-bg-lg !rounded-[0.8rem] !mr-5 flex items-center justify-center" style="background-color: {{ $item['bg'] }};">
                            <span class="material-symbols-outlined !text-[2.2rem] text-[#343f52]" style="text-transform: none !important;" aria-hidden="true">{{ $item['icon'] }}</span>
                        </div>
                    </div>
                    <div>
                        <h4 class="!text-[1.15rem] !font-bold">{!! t($item['title']) !!}</h4>
                        <p class="!text-[0.85rem] text-muted">{!! t($item['description']) !!}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Testimonials --}}
        <div class="flex flex-wrap mx-[-15px]">
            <div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative">
                <img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block floating-doodle" style="top: 2%; left: 9%" alt="" loading="lazy">
                <img src="{{ asset('assets/img/svg/doodle10.svg') }}" class="h-7 absolute hidden xl:block lg:block floating-doodle" style="top: -45%; left: -17%" alt="" loading="lazy">
                <img src="{{ asset('assets/img/svg/doodle11.svg') }}" class="!h-[4rem] absolute hidden xl:block lg:block floating-doodle" style="top: -40%; right: -15%" alt="" loading="lazy">
                <h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3 !leading-[1.35]">{!! t('Mutlu Müşteriler') !!}</h2>
                <h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-12 xl:!px-10 xxl:!px-16">
                    {!! t('Müşterilerimizin Trunçgil Teknoloji hakkındaki') !!} <span class="text-gradient gradient-7">{!! t('görüşleri') !!}</span>
                </h3>
            </div>
        </div>

        <div class="itemgrid !mb-10">
            <div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
                @foreach($testimonials as $testimonial)
                <div class="item md:w-6/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
                    <div class="card !shadow-none !rounded-[1.2rem] overflow-hidden" style="background-color: {{ $testimonial['bg'] }};">
                        <div class="card-body flex-[1_1_auto] !p-8 md:!p-10">
                            <blockquote class="!text-[0.875rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                                <p class="!mb-4">{!! t($testimonial['quote']) !!}</p>
                                <div class="flex items-center text-left">
                                    <div class="info !pl-0">
                                        <p class="!mb-1 text-[.9rem] !leading-[1.5] !font-semibold">{!! e($testimonial['name']) !!}</p>
                                        <p class="!mb-0 text-[.8rem] text-muted">{!! t($testimonial['role']) !!}</p>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

{{-- Bottom CTA --}}
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg23.webp') }}');">
    <div class="overflow-hidden" style="z-index:1;">
        <div class="divider divider-alt !text-[#fefefe] mx-[-0.5rem]">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
                <g fill="currentColor">
                    <polygon points="1440 100 0 15 0 0 1440 0 1440 100" />
                </g>
            </svg>
        </div>
    </div>
    <div class="container pt-10 xl:pt-10 lg:pt-10 md:pt-16 pb-8 xl:pb-12 lg:pb-12 md:pb-12 text-center xl:text-left lg:text-left">
        <div class="flex flex-wrap mx-0 !mt-[-50px] items-center">
            <div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]">
                <img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block floating-doodle" style="bottom: 36%; right: -25%" alt="" loading="lazy">
                <img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[4.5rem] !absolute hidden xl:block lg:block floating-doodle" style="top: -20%; left: -25%" alt="" loading="lazy">
                <h2 class="!text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] xl:!text-[2rem] !mb-4">
                    {!! t('Hayalinizdeki web uygulamasını') !!} <span class="text-gradient gradient-7">{!! t('birlikte tasarlayalım.') !!}</span>
                </h2>
                <p class="lead !text-[1.15rem] !leading-[1.5] !font-normal !mb-7">
                    {!! t('Yüksek performanslı Three.js sahnelerinden bulut Kubernetes sistemlerine kadar; ölçeklenebilir ve güvenli dijital geleceğinizi kurmak için hazırız.') !!}
                </p>
                <div class="flex flex-wrap justify-center xl:!justify-start lg:!justify-start gap-3 items-center">
                    <a href="{{ $contactUrl }}" class="btn btn-gradient gradient-7 !rounded-[0.8rem] !px-6 !text-white">{!! t('Projenizi Konuşalım') !!}</a>
                </div>
            </div>
            <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]">
                <figure class="m-0 p-0">
                    <picture>
                        <source srcset="{{ asset('assets/img/illustrations/i12.png') }}" type="image/webp">
                        <img class="web-dev-illustration web-dev-illustration--cta w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/i12.png') }}" alt="{!! t('Trunçgil Teknoloji web geliştirme') !!}" width="1024" height="1024" loading="lazy" decoding="async">
                    </picture>
                </figure>
            </div>
        </div>
    </div>
</section>

@endsection