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

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

    $socialLinks = setting('social_links');
    $sameAs = [];
    if ($socialLinks) {
        $links = is_string($socialLinks) ? json_decode($socialLinks, true) : $socialLinks;
        if (is_array($links)) {
            foreach ($links as $platform => $url) {
                if (!empty($url)) {
                    $sameAs[] = $url;
                }
            }
        }
    }
    if (empty($sameAs)) {
        $sameAs = [
            "https://www.facebook.com/truncgil",
            "https://www.instagram.com/truncgil",
            "https://www.linkedin.com/company/truncgil-technology"
        ];
    }
@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": "{{ setting('site_name', 'Trunçgil Teknoloji') }}",
      "image": "{{ setting('site_logo') ? (str_starts_with(setting('site_logo'), 'http') ? setting('site_logo') : asset('storage/' . ltrim(setting('site_logo'), '/'))) : asset('assets/img/logo.png') }}",
      "url": "{{ url('/') }}",
      "telephone": "{{ setting('contact_phone', '+902244431620') }}",
      "priceRange": "$$$",
      "address": {
        "@@type": "PostalAddress",
        "streetAddress": "{{ setting('contact_address', 'Ulutek Teknoloji Geliştirme Bölgesi, Görükle Kampüsü, No: 104') }}"
      },
      "sameAs": {!! json_encode($sameAs, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    },
    {
      "@@type": "Service",
      "@@id": "{{ url()->current() }}#service",
      "serviceType": "Artificial Intelligence Development",
      "provider": {
        "@@id": "{{ url()->current() }}#organization"
      },
      "name": {!! json_encode(t('Yapay Zeka ve Derin Öğrenme Geliştirme Hizmeti')) !!},
      "description": {!! json_encode(t('PyTorch ve TensorFlow ile veri modellemeden Edge AI yayınına kadar tam teşekküllü yapay zeka, LoRA fine-tuning ve makine öğrenmesi sistemleri geliştiriyoruz.')) !!},
      "areaServed": [
        {
          "@@type": "AdministrativeArea",
          "name": "Bursa"
        },
        {
          "@@type": "AdministrativeArea",
          "name": "Türkiye"
        },
        {
          "@@type": "AdministrativeArea",
          "name": "Global"
        }
      ],
      "hasOfferCatalog": {
        "@@type": "OfferCatalog",
        "name": "Yapay Zeka Hizmetleri",
        "itemListElement": [
          {
            "@@type": "Offer",
            "itemOffered": {
              "@@type": "Service",
              "name": "LLM Fine-Tuning (LoRA/QLoRA)"
            }
          },
          {
            "@@type": "Offer",
            "itemOffered": {
              "@@type": "Service",
              "name": "Computer Vision & Edge AI"
            }
          },
          {
            "@@type": "Offer",
            "itemOffered": {
              "@@type": "Service",
              "name": "Data Pipeline Optimization"
            }
          }
        ]
      }
    }
  ]
}
</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>
    .ai-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;
    }

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

    /* Technology Card Micro-animations */
    .ai-card {
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    }
    .ai-card:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 1.25rem 2.5rem rgba(227, 30, 36, 0.12) !important;
    }

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

    .bg-gradient-ai {
        background: linear-gradient(180deg, #f3f0ff 0%, rgba(255, 255, 255, 0) 100%) !important;
    }
    .btn-soft-ai {
        background-color: #f3f0ff !important;
        color: #6a1b9a !important;
    }

    .matrix-table {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 0.25rem 1.75rem rgba(30, 34, 40, 0.05);
        border: 1px solid rgba(0,0,0,0.05);
    }
    .matrix-table th {
        background-color: #f8f9fa;
        color: #343f52;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.85rem;
    }
    .matrix-table td, .matrix-table th {
        padding: 1.25rem;
        vertical-align: middle;
    }
    .matrix-table tbody tr:not(:last-child) {
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .matrix-table tbody tr:hover {
        background-color: #fcfcfc;
    }
</style>
@endpush

@section('content')

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

{{-- Hero Section --}}
<section class="wrapper !bg-[#ffffff]">
    <div class="container-card">
        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 !mt-2 !mb-5 [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,.5)] xxl:!rounded-[.8rem] rounded-0" data-image-src="{{ asset('assets/img/photos/bg22.png') }}" style="background-image: url('{{ asset('assets/img/photos/bg22.png') }}');">
            <div class="card-body py-[4.5rem] px-0">
                <div class="container">
                    <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center text-center lg:text-left xl:text-left">
                        <div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px] max-w-full" data-cues="slideInDown" data-group="page-title" data-delay="900" data-disabled="true">
                            <h1 class="xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] font-semibold !leading-[1.2] !tracking-[normal] !mb-4 xl:!mr-5 xxl:!mr-0" data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 900ms; animation-direction: normal; animation-fill-mode: both;">{!! t('Yapay Zeka ve Derin Öğrenme ile') !!} <span class="text-gradient gradient-1">{!! t('Geleceği Şekillendirin') !!}</span></h1>
                            <p class="lead !text-[1.15rem] !leading-[1.5] font-medium !mb-7 xxl:!pr-20" data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 1200ms; animation-direction: normal; animation-fill-mode: both;">{!! t('Karmaşık verilerinizi saniyeler içinde anlamlı kararlara ve akıllı otomasyon sistemlerine dönüştürüyoruz. PyTorch ve TensorFlow motorları ile işletmenize özel Yapay Zeka çözümleri sunuyoruz.') !!}</p>
                            <div data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 1500ms; animation-direction: normal; animation-fill-mode: both;"><a href="#detaylar" class="btn btn-lg btn-gradient gradient-1 rounded">{!! t('Teknolojileri İnceleyin') !!}</a></div>
                        </div>
                        <!--/column -->
                        <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px] max-w-full">
                            <img class="max-w-full h-auto !mb-[-8rem]" src="{{ asset('assets/img/illustrations/3d6.png') }}" data-cue="fadeIn" data-delay="300" alt="image" data-show="true" style="animation-name: fadeIn; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 300ms; animation-direction: normal; animation-fill-mode: both;">
                        </div>
                        <!--/column -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container -->
            </div>
            <!--/.card-body -->
        </div>
        <!--/.card -->
    </div>
    <!-- /.container-card -->
</section>

{{-- Technical Process / Features Section --}}
<section id="detaylar" class="wrapper !bg-[#ffffff] ai-dev-section">
    <div class="container pt-[8rem] pb-[4.5rem] xl:pt-36 xl:pb-24 lg:pt-36 lg:pb-24 md:pt-36 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" data-cues="slideInUp" data-group="tech-header" data-duration="400">
                <h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Teknik Süreçler') !!}</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('Karmaşık Teknolojiler,') !!} <span class="text-gradient gradient-1">{!! t('Sade ve Güçlü Çözümler') !!}</span>
                </h3>
                <p class="mb-10 text-muted !text-[1.1rem] leading-normal">{!! t('Yapay zeka modellerinin arkasındaki karmaşık matematiksel ve teknik süreçleri, işletmenize doğrudan değer katacak şekilde kusursuz veri hatlarıyla yönetiyoruz.') !!}</p>
            </div>
        </div>

        <div class="flex flex-wrap mx-[-15px] mt-10">
            {{-- Data Pipeline --}}
            <div class="md:w-6/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full mb-8" data-cue="slideInUp">
                <div class="card h-full !border-[#e2e8f0] border-solid border shadow-sm !rounded-[1.2rem] p-8 bg-white ai-card">
                    <div class="flex items-center mb-4">
                        <div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none mr-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-[#e31e24]">schema</span>
                        </div>
                        <h4 class="!text-[1.25rem] font-bold mb-0">{!! t('1. Akıllı Veri Otobanı (Darboğazsız Akış)') !!}</h4>
                    </div>
                    <p class="text-muted !text-[0.95rem] mb-0">{!! t('Yapay zekanın öğrenebilmesi için verilerinizi tıpkı hızlı akan bir otoban gibi kesintisiz hale getiriyoruz. Gelişmiş veri asenkronizasyon altyapılarıyla saniyede milyonlarca satır veriyi bekleme süresi olmadan doğrudan yapay zeka işlemcilerine besliyoruz.') !!}</p>
                </div>
            </div>

            {{-- Model Architecture --}}
            <div class="md:w-6/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full mb-8" data-cue="slideInUp">
                <div class="card h-full !border-[#e2e8f0] border-solid border shadow-sm !rounded-[1.2rem] p-8 bg-white ai-card">
                    <div class="flex items-center mb-4">
                        <div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none mr-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-[#6a1b9a]">architecture</span>
                        </div>
                        <h4 class="!text-[1.25rem] font-bold mb-0">{!! t('2. Özel Yapay Sinir Ağları (Akıllı Beyin Tasarımı)') !!}</h4>
                    </div>
                    <p class="text-muted !text-[0.95rem] mb-0">{!! t('İşletmenizin kendine has ihtiyaçlarına en uygun yapay zeka beynini sıfırdan çiziyoruz. Katman katman örülen esnek sinir ağı mimarileri sayesinde, verilerinizi en yüksek doğrulukla analiz edip geleceğe yönelik tahminlerde bulunacak sistemi kuruyoruz.') !!}</p>
                </div>
            </div>

            {{-- Training & Gradients --}}
            <div class="md:w-6/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full mb-8" data-cue="slideInUp">
                <div class="card h-full !border-[#e2e8f0] border-solid border shadow-sm !rounded-[1.2rem] p-8 bg-white ai-card">
                    <div class="flex items-center mb-4">
                        <div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none mr-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-[#2563eb]">model_training</span>
                        </div>
                        <h4 class="!text-[1.25rem] font-bold mb-0">{!! t('3. Süper Bilgisayarlar ile Hızlı Öğrenme') !!}</h4>
                    </div>
                    <p class="text-muted !text-[0.95rem] mb-0">{!! t('Modellerimizi güçlü grafik işlemci (GPU/TPU) sunucularında paralel eğitim teknolojileriyle hızla eğitiyoruz. Milyonlarca farklı senaryoyu saniyeler içinde simüle ediyor, yapay zekanın en yüksek doğrulukla kararlar almasını en kısa sürede sağlıyoruz.') !!}</p>
                </div>
            </div>

            {{-- Fine-Tuning & PEFT --}}
            <div class="md:w-6/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full mb-8" data-cue="slideInUp">
                <div class="card h-full !border-[#e2e8f0] border-solid border shadow-sm !rounded-[1.2rem] p-8 bg-white ai-card">
                    <div class="flex items-center mb-4">
                        <div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none mr-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-[#059669]">tune</span>
                        </div>
                        <h4 class="!text-[1.25rem] font-bold mb-0">{!! t('4. Bütçe Dostu Kişiselleştirme (İnce Ayar)') !!}</h4>
                    </div>
                    <p class="text-muted !text-[0.95rem] mb-0">{!! t('Milyon dolarlık yapay zeka modellerini sıfırdan kurmak yerine, Llama ve Mistral gibi dünyanın en güçlü açık kaynaklı dil modellerini LoRA ve QLoRA sıkıştırma teknolojileriyle şirketinizin kendi özel bilgi tabanına uyarlıyoruz. Altyapı maliyetlerini %99 oranında düşürüyoruz.') !!}</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Why Choose Us (Value Showcase replacing table) --}}
<section class="wrapper !bg-[#ffffff]">
    <div class="container pb-[4.5rem] xl:pb-32 lg:pb-32 md:pb-32">
        <div class="flex flex-wrap mx-[-7.5px] items-center">
            <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]">
                <figure class="m-0 p-0">
                    <img class="w-auto" src="{{ asset('assets/img/illustrations/3d2.png') }}" alt="{{ t('Kusursuz Kontrol ve Güvenlik') }}">
                </figure>
            </div>
            <!--/column -->
            <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]">
                <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Kusursuz Entegrasyon') !!}</h2>
                <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-4">
                    {!! t('Maksimum Performans, Sıfır Veri Sızıntısı') !!}
                </h3>
                <p class="!mb-6 text-muted !text-[0.95rem] leading-normal">
                    {!! t('Yapay zeka modellerinizin kesintisiz, düşük gecikmeli (low latency) ve son derece ölçeklenebilir olarak hizmet sunması için bulut ve lokal (on-premise) çıkarım altyapılarını eksiksiz kuruyoruz. Verilerinizin %100 şirketinizde güvende kalmasını garanti ediyoruz.') !!}
                </p>
                <div class="flex flex-wrap mx-[-15px] !mt-[-15px]">
                    <div class="w-full flex-[0_0_auto] !mt-[15px] !px-[15px] max-w-full">
                        <ul class="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
                            <li class="relative !pl-7">
                                <span><i class="uil uil-check w-5 h-5 text-[0.85rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.15rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span>
                                <span class="font-semibold text-[#343f52]">{!! t('%100 Veri Gizliliği (On-Premise)') !!}</span>
                                <p class="text-muted !text-[0.85rem] !mt-1">{!! t('Verileriniz asla dış servislerle paylaşılmaz, kendi lokal sunucularınızda barındırılarak korunur.') !!}</p>
                            </li>
                            <li class="relative !pl-7 !mt-4">
                                <span><i class="uil uil-check w-5 h-5 text-[0.85rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.15rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span>
                                <span class="font-semibold text-[#343f52]">{!! t('Milisaniyelik Anlık Yanıt Hızları (Inference)') !!}</span>
                                <p class="text-muted !text-[0.85rem] !mt-1">{!! t('NVIDIA Triton ve TorchServe entegrasyonuyla yapay zeka yanıtlarını milisaniyeler düzeyinde alırsınız.') !!}</p>
                            </li>
                            <li class="relative !pl-7 !mt-4">
                                <span><i class="uil uil-check w-5 h-5 text-[0.85rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.15rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span>
                                <span class="font-semibold text-[#343f52]">{!! t('İnternetsiz Mobil AI (Edge AI)') !!}</span>
                                <p class="text-muted !text-[0.85rem] !mt-1">{!! t('LiteRT ve ExecuTorch teknolojileri sayesinde yapay zekayı internet olmayan ortamlarda, mobil cihazlarda bile çalıştırıyoruz.') !!}</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--/column -->
        </div>
        <!--/.row -->
    </div>
</section>

{{-- Statistics counter card section --}}
<section class="wrapper !bg-[#ffffff]">
    <div class="container-card">
        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 pb-20 [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,.5)] xxl:rounded-[.8rem] rounded-0" style="background-image: url('{{ asset('assets/img/photos/bg22.png') }}');">
            <div class="card-body py-[4.5rem] px-0">
                <div class="container">
                    <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 lg:!mt-0">
                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full text-center lg:text-left xl:text-left">
                            <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-3 xxl:!pr-20">{!! t('Rakamlarla Yapay Zeka Gücümüz') !!}</h3>
                            <p class="lead !text-[1.1rem] !leading-[1.55] font-medium !mb-0 xxl:!pr-10 text-muted">{!! t('Yapay zeka modellerimizle iş süreçlerinizdeki verimlilik artışını ölçülebilir sonuçlarla kanıtlıyoruz.') !!}</p>
                        </div>
                        <!-- /column -->
                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-2 lg:!mt-2 max-w-full">
                            <div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px] !text-center">
                                <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
                                    <div class="icon btn btn-circle pointer-events-none btn-soft-primary !mb-3 m-[0_auto] w-12 h-12 !inline-flex !items-center !justify-center bg-[#f3f0ff]">
                                        <span class="material-symbols-outlined text-[#e31e24] !text-[1.6rem]">target</span>
                                    </div>
                                    <h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">%99.4</h3>
                                    <p class="!mb-0 text-muted">{!! t('Doğruluk Oranı (Görsel AI)') !!}</p>
                                </div>
                                <!--/column -->
                                <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
                                    <div class="icon btn btn-circle pointer-events-none btn-soft-primary !mb-3 m-[0_auto] w-12 h-12 !inline-flex !items-center !justify-center bg-[#f3f0ff]">
                                        <span class="material-symbols-outlined text-[#e31e24] !text-[1.6rem]">bar_chart</span>
                                    </div>
                                    <h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">10 Kat</h3>
                                    <p class="!mb-0 text-muted">{!! t('Daha Hızlı Karar Alma') !!}</p>
                                </div>
                                <!--/column -->
                                <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
                                    <div class="icon btn btn-circle pointer-events-none btn-soft-primary !mb-3 m-[0_auto] w-12 h-12 !inline-flex !items-center !justify-center bg-[#f3f0ff]">
                                        <span class="material-symbols-outlined text-[#e31e24] !text-[1.6rem]">cloud</span>
                                    </div>
                                    <h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">%75</h3>
                                    <p class="!mb-0 text-muted">{!! t('Altyapı Maliyet Tasarrufu') !!}</p>
                                </div>
                                <!--/column -->
                            </div>
                            <!--/.row -->
                        </div>
                        <!-- /column -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container -->
            </div>
            <!--/.card-body -->
        </div>
        <!--/.card -->
    </div>
    <!-- /.container-card -->
</section>

{{-- Capabilities Section --}}
<section class="wrapper !bg-[#ffffff] ai-dev-section">
    <div class="container pt-24 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" data-cues="slideInUp" data-group="cap-header" data-duration="400">
                <h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Yetkinliklerimiz') !!}</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('Trunçgil Teknoloji') !!} <br/><span class="text-gradient gradient-1">{!! t('Yapay Zeka Yetkinlikleri') !!}</span>
                </h3>
            </div>
        </div>

        <div class="flex flex-wrap mx-[-15px]" data-cues="slideInUp" data-group="cap-cards" data-interval="-150" data-duration="400">
            {{-- LLM Card --}}
            <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-sm border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden bg-white p-8 ai-card">
                    <div class="card-body p-0 flex-[1_1_auto] flex flex-col text-center items-center">
                        <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 !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-gradient gradient-1">smart_toy</span>
                        </div>
                        <h4 class="!text-[1.15rem] !font-bold !mb-2 text-[#343f52]">{!! t('Kurumsal Özel LLM (Dil Modeli)') !!}</h4>
                        <p class="!text-[0.9rem] !mb-0 text-muted flex-1">{!! t('Şirketinizin tüm belgelerini okuyup analiz edebilen, çalışanlarınıza veya müşterilerinize güvenli ve özel asistanlık sunan kapalı devre Büyük Dil Modelleri geliştiriyoruz.') !!}</p>
                    </div>
                </div>
            </div>
            
            {{-- Vision Card --}}
            <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-sm border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden bg-white p-8 ai-card">
                    <div class="card-body p-0 flex-[1_1_auto] flex flex-col text-center items-center">
                        <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 !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-gradient gradient-1">visibility</span>
                        </div>
                        <h4 class="!text-[1.15rem] !font-bold !mb-2 text-[#343f52]">{!! t('Görsel Analiz ve Kalite Kontrol') !!}</h4>
                        <p class="!text-[0.9rem] !mb-0 text-muted flex-1">{!! t('Fabrika üretim bantlarında otonom hatalı ürün tespiti, plaka ve yüz tanıma, nesne takibi ve kamera tabanlı iş güvenliği ihlal denetimi yapan akıllı yapılar kuruyoruz.') !!}</p>
                    </div>
                </div>
            </div>

            {{-- Edge AI Card --}}
            <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-sm border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden bg-white p-8 ai-card">
                    <div class="card-body p-0 flex-[1_1_auto] flex flex-col text-center items-center">
                        <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 !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-gradient gradient-1">router</span>
                        </div>
                        <h4 class="!text-[1.15rem] !font-bold !mb-2 text-[#343f52]">{!! t('Cihaz Üstü Yapay Zeka (Edge AI)') !!}</h4>
                        <p class="!text-[0.9rem] !mb-0 text-muted flex-1">{!! t('Modellerimizi küçülterek doğrudan mobil telefonlar, tabletler veya IoT kartları üzerinde çalışacak hale getiriyoruz. İnternet olmasa bile anlık yapay zeka işlem gücü sunuyoruz.') !!}</p>
                    </div>
                </div>
            </div>
            
            {{-- Data Pipeline Card --}}
            <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-sm border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden bg-white p-8 ai-card">
                    <div class="card-body p-0 flex-[1_1_auto] flex flex-col text-center items-center">
                        <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 !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-gradient gradient-1">hub</span>
                        </div>
                        <h4 class="!text-[1.15rem] !font-bold !mb-2 text-[#343f52]">{!! t('Akıllı Veri Analitiği ve Tahminleme') !!}</h4>
                        <p class="!text-[0.9rem] !mb-0 text-muted flex-1">{!! t('Büyük verileri işleyen otomatik yapılar kurarak, gelecek dönem satışlarınızı, stok ihtiyaçlarınızı ve finansal risk senaryolarınızı yapay zekayla önceden tahmin ediyoruz.') !!}</p>
                    </div>
                </div>
            </div>

            {{-- Recommendation Card --}}
            <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-sm border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden bg-white p-8 ai-card">
                    <div class="card-body p-0 flex-[1_1_auto] flex flex-col text-center items-center">
                        <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 !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-gradient gradient-1">recommend</span>
                        </div>
                        <h4 class="!text-[1.15rem] !font-bold !mb-2 text-[#343f52]">{!! t('Kişiselleştirilmiş Öneri Motorları') !!}</h4>
                        <p class="!text-[0.9rem] !mb-0 text-muted flex-1">{!! t('Kullanıcıların geçmiş davranışlarını ve tercihlerini derin öğrenme yöntemleriyle analiz ederek, e-ticaret ve medya platformlarınızda satış dönüşümlerini katlayan akıllı öneri motorları tasarlıyoruz.') !!}</p>
                    </div>
                </div>
            </div>

            {{-- Deployment Card --}}
            <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-sm border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden bg-white p-8 ai-card">
                    <div class="card-body p-0 flex-[1_1_auto] flex flex-col text-center items-center">
                        <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 !rounded-full bg-[#f3f0ff]">
                            <span class="material-symbols-outlined !text-[1.6rem] text-gradient gradient-1">storage</span>
                        </div>
                        <h4 class="!text-[1.15rem] !font-bold !mb-2 text-[#343f52]">{!! t('Kusursuz Dağıtım Mimarisi') !!}</h4>
                        <p class="!text-[0.9rem] !mb-0 text-muted flex-1">{!! t('Yapay zeka modellerini NVIDIA Triton veya TorchServe altyapısı ile Kubernetes üzerinde, sıfır duraksama ve otomatik ölçekleme ile yüksek yüklere uygun şekilde devreye alıyoruz.') !!}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- FAQ Section --}}
<section class="wrapper !bg-[#ffffff] ai-dev-section">
    <div class="container pb-24">
        <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 text-center" data-cues="slideInUp" data-group="faq-header" data-duration="400">
                    <h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !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">
                        {!! t('Yapay Zeka Projeleri Hakkında') !!} <br/><span class="text-gradient gradient-1">{!! t('Sıkça Sorulanlar') !!}</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" data-cues="slideInUp" data-group="faq-list-1" data-interval="-150" data-duration="400">
                        <div id="accordion-ai-1" class="accordion-wrapper">
                            
                            <div class="card accordion-item !mb-5 !shadow-sm">
                                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="heading-ai-1">
                                    <button class="!text-[#343f52] !text-[0.9rem] font-semibold hover:!text-[#e31e24] before:!text-[#e31e24] collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-ai-1" aria-expanded="false" aria-controls="collapse-ai-1">
                                        {!! t('Özel yapay zeka (LLM) eğitimi maliyetli midir?') !!}
                                    </button>
                                </div>
                                <div id="collapse-ai-1" class="collapse" aria-labelledby="heading-ai-1" data-bs-target="#accordion-ai-1">
                                    <div class="card-body p-[0_1.25rem_.25rem_2.35rem] !text-[0.85rem] text-muted">
                                        <p>{!! t('Eskiden devasa bütçeler gerektiren bu süreçler, modern LoRA ve QLoRA sıkıştırma yöntemlerimiz sayesinde dramatik olarak ucuzlamıştır. Tüm modeli sıfırdan eğitmek yerine, mevcut güçlü açık kaynaklı modelleri şirketinizin verileriyle özelleştirerek maliyetleri %99 oranında düşürüyoruz.') !!}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card accordion-item !mb-5 !shadow-sm">
                                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="heading-ai-2">
                                    <button class="!text-[#343f52] !text-[0.9rem] font-semibold hover:!text-[#e31e24] before:!text-[#e31e24] collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-ai-2" aria-expanded="false" aria-controls="collapse-ai-2">
                                        {!! t('Şirket verilerimizin gizliliğini nasıl sağlıyorsunuz?') !!}
                                    </button>
                                </div>
                                <div id="collapse-ai-2" class="collapse" aria-labelledby="heading-ai-2" data-bs-target="#accordion-ai-1">
                                    <div class="card-body p-[0_1.25rem_.25rem_2.35rem] !text-[0.85rem] text-muted">
                                        <p>{!! t('Kurumsal verilerinizin gizliliği bizim birinci önceliğimizdir. Yapay zeka çözümlerimizi harici bulut API\'larına (OpenAI vb.) bağlamak yerine, tamamen şirketinizin kendi yerel sunucularında (On-Premise) barındırarak %100 veri gizliliği sağlıyoruz.') !!}</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full" data-cues="slideInUp" data-group="faq-list-2" data-interval="-150" data-delay="300" data-duration="400">
                        <div id="accordion-ai-2" class="accordion-wrapper">
                            
                            <div class="card accordion-item !mb-5 !shadow-sm">
                                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="heading-ai-3">
                                    <button class="!text-[#343f52] !text-[0.9rem] font-semibold hover:!text-[#e31e24] before:!text-[#e31e24] collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-ai-3" aria-expanded="false" aria-controls="collapse-ai-3">
                                        {!! t('Cihaz üstü (Edge AI) yapay zeka ne gibi faydalar sağlar?') !!}
                                    </button>
                                </div>
                                <div id="collapse-ai-3" class="collapse" aria-labelledby="heading-ai-3" data-bs-target="#accordion-ai-2">
                                    <div class="card-body p-[0_1.25rem_.25rem_2.35rem] !text-[0.85rem] text-muted">
                                        <p>{!! t('Edge AI, yapay zekanın bulut sunuculara gitmeden doğrudan çalıştırılmasıdır. İnternet bağlantısının olmadığı fabrikalarda (anlık kalite kontrol), mobil uygulamalarda beklemesiz veri işleme ve tam veri mahremiyeti gerektiren hassas sistemlerde sıklıkla tercih edilir.') !!}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="card accordion-item !mb-5 !shadow-sm">
                                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="heading-ai-4">
                                    <button class="!text-[#343f52] !text-[0.9rem] font-semibold hover:!text-[#e31e24] before:!text-[#e31e24] collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-ai-4" aria-expanded="false" aria-controls="collapse-ai-4">
                                        {!! t('PyTorch mu yoksa TensorFlow mu tercih etmeliyiz?') !!}
                                    </button>
                                </div>
                                <div id="collapse-ai-4" class="collapse" aria-labelledby="heading-ai-4" data-bs-target="#accordion-ai-2">
                                    <div class="card-body p-[0_1.25rem_.25rem_2.35rem] !text-[0.85rem] text-muted">
                                        <p>{!! t('Her iki altyapı da derin öğrenme dünyasının en güçlü motorlarıdır. Ar-Ge, hızlı model üretimi ve dil modelleri (LLM) geliştirmede genelde PyTorch; devasa veri akış optimizasyonları ve mobil entegrasyonlarda TensorFlow tercih edilir. Projenizin yapısına en uygun seçimi sizin için analiz edip birlikte gerçekleştiriyoruz.') !!}</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Footer Call to Action --}}
<section class="wrapper !bg-[#ffffff] !mb-[-4.5rem]">
    <div class="container-card">
        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 [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,.5)] xxl:!rounded-[.8rem] rounded-0" style="background-image: url('{{ asset('assets/img/photos/bg22.png') }}');">
            <div class="card-body py-[4.5rem] px-0">
                <div class="container">
                    <div class="flex flex-wrap mx-[-15px] !text-center">
                        <div class="xl:w-11/12 xxl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                            <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Geleceği Birlikte İnşa Edelim') !!}</h2>
                            <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-bold !leading-[1.25] !mb-7 lg:!px-[7rem] xl:!px-[7rem]">
                                {!! t('Yapay Zeka ekosistemiyle işinizi bir adım öne taşımaya hazır mısınız?') !!}
                            </h3>
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <a href="{{ $contactUrl }}" class="btn btn-lg btn-gradient gradient-1 rounded-full shadow-lg font-semibold">{!! t('Projeyi Başlatın') !!}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection