@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; Three.js\'den Django\'ya, Node.js\'den React ve Vue\'ye kadar tüm modern teknolojilerle ölçeklenebilir ve güvenli web uygulamaları 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@24,400,0,0&icon_names=monitor,install_mobile,api,sync,view_in_ar,rocket_launch,code,hub,bolt,gpp_good,translate" />
<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;
    }
    .web-dev-illustration--cta {
        max-width: 32rem;
    }
</style>
@endpush

@section('content')

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

    $technologies = [
        [
            'name' => 'HTML5',
            'icon' => 'html5.svg',
            'desc' => 'Arttırılmış anlamsal yapı ve tarayıcı yerleşik standartları.',
            'bg' => '#E34F2612'
        ],
        [
            'name' => 'CSS3',
            'icon' => 'css3.svg',
            'desc' => 'Gelişmiş tasarım yetenekleri, animasyonlar ve responsive yapılar.',
            'bg' => '#1572B612'
        ],
        [
            'name' => 'JavaScript',
            'icon' => 'javascript.svg',
            'desc' => 'Modern, hızlı ve dinamik etkileşim kurguları.',
            'bg' => '#F7DF1E12'
        ],
        [
            'name' => 'React.js',
            'icon' => 'reactjs.svg',
            'desc' => 'Zengin arayüzler ve yüksek performanslı tek sayfa uygulamaları.',
            'bg' => '#61DAFB12'
        ],
        [
            'name' => 'Vue.js',
            'icon' => 'vuejs.svg',
            'desc' => 'Hızlı, dinamik ve esnek kullanıcı deneyimi odaklı modern frontend.',
            'bg' => '#4FC08D12'
        ],
        [
            'name' => 'Angular.js',
            'icon' => 'angular.svg',
            'desc' => 'Geniş ölçekli, modüler ve güvenli kurumsal seviye uygulamalar.',
            'bg' => '#DD003112'
        ],
        [
            'name' => 'Next.js',
            'icon' => 'nextjs.svg',
            'desc' => 'SEO dostu, Server-Side Rendered (SSR) modern arayüz mimarileri.',
            'bg' => '#00000012'
        ],
        [
            'name' => 'Svelte.js',
            'icon' => 'sveltejs.svg',
            'desc' => 'Derleme zamanı optimizasyonlarıyla ultra hafif ve hızlı frontend.',
            'bg' => '#FF3E0012'
        ],
        [
            'name' => 'Node.js',
            'icon' => 'nodejs.svg',
            'desc' => 'Hızlı, olay tabanlı ve ölçeklenebilir arka plan (backend) motorları.',
            'bg' => '#33993312'
        ],
        [
            'name' => 'Django',
            'icon' => 'django.svg',
            'desc' => 'Python\'ın gücüyle ultra güvenli, hızlı ve veri analitiği odaklı yapılar.',
            'bg' => '#092E2012'
        ],
        [
            'name' => 'Laravel',
            'icon' => 'laravel.svg',
            'desc' => 'PHP\'nin en popüler ve temiz kod standartlı kurumsal backend çatısı.',
            'bg' => '#FF2D2012'
        ],
        [
            'name' => 'Three.js (3D)',
            'icon' => 'threejs.svg',
            'desc' => 'Tarayıcıda sınırları zorlayan, etkileşimli 3D WebGL dünyaları.',
            'bg' => '#00000012'
        ],
        [
            'name' => 'PWA',
            'icon' => 'pwa.svg',
            'desc' => 'Çevrimdışı çalışabilen, masaüstü/mobil yerleşik uygulama deneyimleri.',
            'bg' => '#5A0FC812'
        ],
        [
            'name' => 'WebRTC',
            'icon' => 'webrtc.svg',
            'desc' => 'Tarayıcılar arası gerçek zamanlı, gecikmesiz ses ve görüntü iletişimi.',
            'bg' => '#32ABDF12'
        ],
        [
            'name' => 'Docker',
            'icon' => 'docker.svg',
            'desc' => 'Her ortamda tutarlı ve sorunsuz çalışan konteyner sistemleri.',
            'bg' => '#2496ED12'
        ],
        [
            'name' => 'Kubernetes',
            'icon' => 'kubernetes.svg',
            'desc' => 'Büyük ölçekli uygulamalarınız için otomatik orkestrasyon ve bulut gücü.',
            'bg' => '#326CE512'
        ]
    ];

    $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 (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 ve Django gibi teknolojilerdeki 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.'
        ]
    ];

    $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; Three.js\'den Django\'ya, Node.js\'den React ve Vue\'ye kadar tüm modern teknolojiler, PWA, WebSocket ve Kubernetes bulut mimarileriyle ölçeklenebilir web uygulamaları 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">
                <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] justify-center">
                    @foreach($technologies as $tech)
                    <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>
                    @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