@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;
    }

    /* Hero AI Illustration Custom Styling */
    .hero-ai-illustration {
        height: auto !important;
        transition: all 0.3s ease-in-out;
    }
    @media (min-width: 1400px) {
        .hero-ai-illustration {
            min-width: 1000px !important;
            max-width: 1000px !important;
            margin-left: -200px !important;
        }
    }
    @media (min-width: 1200px) and (max-width: 1399.98px) {
        .hero-ai-illustration {
            min-width: 900px !important;
            max-width: 900px !important;
            margin-left: -150px !important;
        }
    }
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .hero-ai-illustration {
            min-width: 800px !important;
            max-width: 800px !important;
            margin-left: -100px !important;
        }
    }
</style>
@endpush

@section('content')

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

{{-- Hero Section --}}
<section class="wrapper !bg-[#ffffff]">
    <div class="">
        <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">
                            <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">{!! 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">{!! 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><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] hero-ai-illustration" src="{{ asset('assets/img/illustrations/yapay-zeka-truncgil.png') }}" data-cue="fadeIn" data-delay="300" alt="image">
                        </div>
                        <!--/column -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container -->
            </div>
            <!--/.card-body -->
        </div>
        <!--/.card -->
    </div>
    <!-- /.container-card -->
</section>

{{-- Premium AI Showcase & Process Sections --}}
<section id="detaylar" class="wrapper !bg-[#ffffff] ai-dev-section">
  <div class="container pt-[4.5rem] xl:pt-28 lg:pt-28 md:pt-28 pb-[4.5rem] xl:pb-32 lg:pb-32 md:pb-32">
    
    {{-- Part 1: AI/ML Technology Grid --}}
    <div class="flex flex-wrap mx-[-15px] !text-center" data-cues="slideInUp" data-group="tech-header" data-duration="400">
      <div class="md:w-10/12 xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[8.33333333%]">
        <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Yapay Zeka Teknolojilerimiz ve Süreçlerimiz') !!}</h2>
        <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-9 xl:!px-12">{!! t('Yapay zeka modellerinin arkasındaki karmaşık süreçleri, en güçlü teknolojilerle harmanlayarak işletmenize özel anahtar teslim çözümlere dönüştürüyoruz.') !!}</h3>
      </div>
    </div>

    <div class="flex flex-wrap mx-[-15px] !mt-[-40px] !mb-[7rem]" data-cues="slideInUp" data-group="tech-cards" data-interval="-150" data-duration="400">
      {{-- Item 1: TensorFlow --}}
      <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-[40px]">
        <div class="flex flex-row">
          <div>
            <img src="{{ asset('assets/img/tech-logos/tensorflow.svg') }}" class="!w-[2.2rem] !h-[2.2rem] !mr-4" alt="TensorFlow">
          </div>
          <div>
            <h3 class="!text-[1.1rem] !mb-1 font-bold text-[#343f52]">{!! t('TensorFlow & Dağıtık Eğitim') !!}</h3>
            <p class="!mb-0 text-muted !text-[0.9rem]">{!! t('`tf.data` asenkron veri hatları ve MirroredStrategy ile büyük veriyi GPU/TPU sunucularında paralel olarak hızlandırılmış biçimde eğitiyoruz.') !!}</p>
          </div>
        </div>
      </div>

      {{-- Item 2: PyTorch --}}
      <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-[40px]">
        <div class="flex flex-row">
          <div>
            <img src="{{ asset('assets/img/tech-logos/pytorch.svg') }}" class="!w-[2.2rem] !h-[2.2rem] !mr-4" alt="PyTorch">
          </div>
          <div>
            <h3 class="!text-[1.1rem] !mb-1 font-bold text-[#343f52]">{!! t('PyTorch & Derin Öğrenme') !!}</h3>
            <p class="!mb-0 text-muted !text-[0.9rem]">{!! t('Dinamik hesaplama grafiği (autograd) ve DDP ile esnek yapay sinir ağları tasarlıyor, karmaşık modellerin eğitim döngüsünü sıfırdan yönetiyoruz.') !!}</p>
          </div>
        </div>
      </div>

      {{-- Item 3: Hugging Face (LoRA) --}}
      <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-[40px]">
        <div class="flex flex-row">
          <div>
            <img src="{{ asset('assets/img/tech-logos/hugging-face.svg') }}" class="!w-[2.2rem] !h-[2.2rem] !mr-4" alt="Hugging Face">
          </div>
          <div>
            <h3 class="!text-[1.1rem] !mb-1 font-bold text-[#343f52]">{!! t('LoRA & QLoRA İnce Ayar') !!}</h3>
            <p class="!mb-0 text-muted !text-[0.9rem]">{!! t('PEFT teknikleriyle milyarlarca parametreli açık kaynaklı LLM\'leri (Llama, Mistral) firmanızın özel verileriyle bütçe dostu biçimde eğitiyoruz.') !!}</p>
          </div>
        </div>
      </div>

      {{-- Item 4: Triton Serving (Kubernetes) --}}
      <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-[40px]">
        <div class="flex flex-row">
          <div>
            <img src="{{ asset('assets/img/tech-logos/kubernetes.svg') }}" class="!w-[2.2rem] !h-[2.2rem] !mr-4" alt="Kubernetes">
          </div>
          <div>
            <h3 class="!text-[1.1rem] !mb-1 font-bold text-[#343f52]">{!! t('Triton & Yüksek Hızlı Sunum') !!}</h3>
            <p class="!mb-0 text-muted !text-[0.9rem]">{!! t('NVIDIA Triton ve TorchServe entegrasyonuyla modellerinizi Kubernetes üzerinde, dinamik gruplama (batching) ve düşük gecikmeyle yayına alıyoruz.') !!}</p>
          </div>
        </div>
      </div>

      {{-- Item 5: OpenCV / YOLO --}}
      <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-[40px]">
        <div class="flex flex-row">
          <div>
            <img src="{{ asset('assets/img/tech-logos/python.svg') }}" class="!w-[2.2rem] !h-[2.2rem] !mr-4" alt="Python & Vision">
          </div>
          <div>
            <h3 class="!text-[1.1rem] !mb-1 font-bold text-[#343f52]">{!! t('Bilgisayarlı Görü (Vision)') !!}</h3>
            <p class="!mb-0 text-muted !text-[0.9rem]">{!! t('Fabrikalarda otonom kalite kontrol, nesne takibi ve YOLO mimarileri ile anlık görsel analiz gerçekleştiren akıllı gözler tasarlıyoruz.') !!}</p>
          </div>
        </div>
      </div>

      {{-- Item 6: DeepSeek & Hybrid LLM --}}
      <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-[40px]">
        <div class="flex flex-row">
          <div>
            <img src="{{ asset('assets/img/tech-logos/deepseek.svg') }}" class="!w-[2.2rem] !h-[2.2rem] !mr-4" alt="DeepSeek">
          </div>
          <div>
            <h3 class="!text-[1.1rem] !mb-1 font-bold text-[#343f52]">{!! t('Hibrit LLM & RAG Çözümleri') !!}</h3>
            <p class="!mb-0 text-muted !text-[0.9rem]">{!! t('Şirket içi belgelerinizi akıllı arama (Vector DB) ile birleştirerek, en son LLM teknolojileriyle entegre özel bilgi asistanları geliştiriyoruz.') !!}</p>
          </div>
        </div>
      </div>
    </div>

    {{-- Part 2: Have Perfect Control (Training Cycle Loop) --}}
    <div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] items-center">
      <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]" data-cue="slideInLeft" data-duration="400">
        <figure class="m-0 p-0">
          <img class="w-auto" src="{{ asset('assets/img/illustrations/3d2.png') }}" alt="AI Control Model illustration">
        </figure>
      </div>
      
      <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]" data-cues="slideInUp" data-group="training-content" data-delay="300" data-duration="400">
        <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Eğitim Sürecinde Tam Kontrol') !!}</h2>
        <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-4">{!! t('Yapay zekanın eğitim döngüsünü adım adım izliyor, her aşamayı optimize ediyoruz.') !!}</h3>
        <p class="!mb-6 text-muted !text-[0.95rem]">{!! t('Model eğitimi sadece kod yazmaktan ibaret değildir. Eğitim esnasında gradient patlamalarını, aşırı öğrenmeyi (overfitting) ve kaynak tüketimini anlık olarak izliyoruz. Şeffaf ve kontrol edilebilir yapay zeka modelleri geliştiriyoruz.') !!}</p>
        
        <div class="flex flex-wrap mx-[-15px] !mt-[-15px]">
          <div class="xl:w-6/12 w-full flex-[0_0_auto] !mt-[15px] xl:!px-[20px] !px-[15px] max-w-full">
            <ul class="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
              <li class="relative !pl-6">
                <span><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span>
                <strong class="text-[#343f52]">{!! t('TensorBoard ile Görselleştirme') !!}</strong>
                <p class="!mb-0 !text-[0.85rem] text-muted">{!! t('Kayıp (loss) ve doğruluk (accuracy) grafiklerini anlık takip ediyoruz.') !!}</p>
              </li>
              <li class="relative !pl-6 !mt-4">
                <span><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span>
                <strong class="text-[#343f52]">{!! t('Hiperparametre Optimizasyonu') !!}</strong>
                <p class="!mb-0 !text-[0.85rem] text-muted">{!! t('Optuna ve Ray Tune kullanarak en doğru öğrenme oranını (learning rate) buluyoruz.') !!}</p>
              </li>
            </ul>
          </div>
          
          <div class="xl:w-6/12 w-full flex-[0_0_auto] !mt-[15px] xl:!px-[20px] !px-[15px] max-w-full">
            <ul class="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
              <li class="relative !pl-6">
                <span><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span>
                <strong class="text-[#343f52]">{!! t('Erken Durdurma (Early Stopping)') !!}</strong>
                <p class="!mb-0 !text-[0.85rem] text-muted">{!! t('Model aşırı öğrenmeye başladığı anda eğitimi otomatik kesip en iyi ağırlıkları koruyoruz.') !!}</p>
              </li>
              <li class="relative !pl-6 !mt-4">
                <span><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span>
                <strong class="text-[#343f52]">{!! t('Ağılık Kaydetme (Checkpointing)') !!}</strong>
                <p class="!mb-0 !text-[0.85rem] text-muted">{!! t('Eğitim aşamalarını düzenli kaydederek kesinti durumunda kaldığımız yerden devam ettiriyoruz.') !!}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    {{-- Part 3: What Makes Us Different? (Floating Stats Cards) --}}
    <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] items-center">
      <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:!order-2 lg:!order-2 !relative !mt-[50px]" data-cues="fadeIn" data-group="why-visuals" data-duration="400">
        <figure class="rounded-[0.4rem]">
          <img class="max-w-full h-auto rounded-[0.4rem]" src="{{ asset('assets/img/photos/about27.jpg') }}" alt="AI Engine analysis dashboard">
        </figure>
        
        <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !absolute xl:block lg:block md:block max-sm:!hidden" style="top: 15%; left: -7%">
          <div class="card-body py-4 px-5">
            <div class="flex flex-row items-center">
              <div class="icon-svg mr-3">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 234.66" class="!w-[2.2rem] !h-[2.2rem] solid-duo text-gradient gradient-1">
                  <circle class="fill-secondary" cx="128" cy="149.33" r="21.33"></circle>
                  <path class="fill-secondary" d="M162.67 234.66H93.34a8 8 0 01-8-8v-16a29.36 29.36 0 0129.33-29.33h26.67a29.35 29.35 0 0129.33 29.33v16a8 8 0 01-8 8zm32-64h-14.19a55.46 55.46 0 0116.85 40v2.67H216a8.06 8.06 0 008-8V200a29.32 29.32 0 00-29.33-29.34zm-133.34 0A29.31 29.31 0 0032 200v5.35a8.06 8.06 0 008 8h18.67v-2.67a55.46 55.46 0 0116.85-40z"></path>
                  <circle class="fill-secondary" cx="74.67" cy="138.66" r="21.33"></circle>
                  <circle class="fill-secondary" cx="181.33" cy="138.66" r="21.33"></circle>
                  <path class="fill-primary" d="M27.2 162.94a52.21 52.21 0 018.8-6.56A42.48 42.48 0 01107.73 112a41 41 0 0140.54 0A42.48 42.48 0 01220 156.38a55.09 55.09 0 015.83 4 64.4 64.4 0 00-26.65-118.49A81.31 81.31 0 00128 0C90.19 0 57.39 26.3 49.1 62.18 21.54 65.07 0 88.22 0 116.26c0 19.93 11 37.21 27.2 46.68z"></path>
                </svg>
              </div>
              <div>
                <h3 class="!text-[1.25rem] counter !leading-[1.4] !mb-0 whitespace-nowrap" style="visibility: visible;">{!! t('50+') !!}</h3>
                <p class="!text-[0.8rem] leading-normal !mb-0 whitespace-nowrap text-muted">{!! t('Başarıyla Tamamlanan Projeler') !!}</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !absolute !text-center xl:block lg:block md:block max-sm:!hidden" style="bottom: 10%; left: -10%;">
          <div class="card-body p-6">
            <div class="progressbar semi-circle fuchsia !relative !mb-3 !m-[0_auto_1rem] !w-[8.5rem] !h-[4.25rem]" data-value="99"></div>
            <h4 class="!mb-0">{!! t('Maliyet Azaltma') !!}</h4>
            <p class="!text-[0.75rem] text-muted !mb-0">{!! t('LoRA ve Sıkıştırma ile') !!}</p>
          </div>
        </div>
      </div>
      
      <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]" data-cues="slideInUp" data-group="why-content" data-duration="400">
        <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Neden Trunçgil Yapay Zeka Çözümleri?') !!}</h2>
        <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-4 xl:mr-[-1.25rem] lg:mr-[-1.25rem]">{!! t('Verilerinizin gücünü açığa çıkarıyor, işinizi geleceğe taşıyoruz.') !!}</h3>
        <p class="!mb-6 text-muted !text-[0.95rem]">{!! t('Yapay zeka çözümlerimizi tamamen işletmenizin özel ihtiyaçlarına, bütçesine ve altyapısına uyarlıyoruz. Dışa bağımlılık olmadan, yüksek performanslı ve güvenli bir dijital dönüşüm sunuyoruz.') !!}</p>
        <ul class="pl-0 list-none bullet-bg bullet-soft-primary">
          <li class="relative !pl-6 !mt-[0.35rem]">
            <i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>
            <strong>{!! t('Sıfır Dış Bağımlılık & Yerel Kurulum') !!}</strong>
          </li>
          <li class="relative !pl-6 !mt-[0.35rem]">
            <i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>
            <strong>{!! t('Düşük Gecikmeli Çıkarım Mimarisi') !!}</strong>
          </li>
          <li class="relative !pl-6 !mt-[0.35rem]">
            <i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e2e2f3] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>
            <strong>{!! t('Uç Cihazlara Taşınabilirlik (Edge AI)') !!}</strong>
          </li>
        </ul>
      </div>
    </div>
    
  </div>
</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" data-cues="slideInUp" data-group="cta-text" data-duration="400">
                            <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" data-cue="slideInUp" data-delay="300" data-duration="400">
                        <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