@extends('layouts.site')

@section('title', $product->translate('title') ?? 'Trunçgil Finance')

@php
    $landingData = $product->landing_page_data ?? [];
    $hero = $landingData['hero'] ?? [];
    $currentLang = app()->getLocale();
@endphp

@push('styles')
<style>
    /* Premium visual helpers matching theme */
    .typer-custom, .typer, .cursor {
        color: #009846 !important;
    }
    .hero-btn-primary {
        background-color: #009846 !important;
        color: #ffffff !important;
        border: 1px solid #009846 !important;
        transition: all 0.3s ease !important;
        display: inline-block !important;
        padding: 12px 28px !important;
        font-weight: 600 !important;
    }
    .hero-btn-primary:hover {
        background-color: #007f3a !important;
        color: #ffffff !important;
        border-color: #007f3a !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 152, 70, 0.3) !important;
    }
    .hero-btn-secondary {
        background-color: transparent !important;
        color: #ffffff !important;
        border: 1px solid #ffffff !important;
        transition: all 0.3s ease !important;
        display: inline-block !important;
        padding: 12px 28px !important;
        font-weight: 600 !important;
    }
    .hero-btn-secondary:hover {
        background-color: #ffffff !important;
        color: #262b32 !important;
        border-color: #ffffff !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15) !important;
    }
</style>
@endpush

@section('content')
<div class="grow shrink-0">
    
    {{-- Section 1: Hero --}}
    <section class="wrapper bg-[#262b32] opacity-100 angled lower-start relative border-0 
                    before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-[#262b32] before:border-0 before:border-solid before:right-0 
                    after:bottom-[-4rem] after:content-[''] after:block after:absolute after:z-0 after:border-l-[100vw] after:border-r-transparent after:border-b-[4rem] after:border-y-transparent after:border-[#262b32] after:border-0 after:border-solid after:right-0">
        <div class="container pt-7 xl:pt-12 lg:pt-12 md:pt-12 pb-8 relative z-10">
            
            {{-- Main Row: Single Column Layout --}}
            <div class="flex flex-wrap mx-0 !mt-[-30px]">
                
                {{-- Column: Live Rates Cards & Descriptions --}}
                <div class="w-full flex-[0_0_auto] max-w-full px-0 !mt-[30px]">
                    <h1 class="!text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.3rem] !text-white !mb-4">
                        <span class="inline-flex items-center gap-2 mb-2">
                            <img src="{{ asset('assets/img/finance-logo.svg') }}" alt="Trunçgil Finance" class="h-20 w-auto inline-block" >
                            <span class="text-white">{!! t('ile') !!}</span>
                        </span>
                        <br>
                        <span class="typer !text-[#009846] whitespace-nowrap" data-delay="100" data-words="{{ t('anlık döviz kurlarına,canlı altın fiyatlarına,kripto para verilerine') }}"></span>
                        <span class="cursor !text-[#009846]" data-owner="typer"></span>
                    </h1>
                    <p class="lead !text-[1.1rem] !leading-[1.5] !text-white !mb-7">
                        {!! t('Gecikmesiz, anlık ve yüksek frekanslı tüm finansal piyasa verilerini tek bir JSON/RESTful API uç noktasından saniyeler içinde sistemlerinize entegre edin.') !!}
                    </p>

                    {{-- Live Rates Widget (Dynamic Premium Cards matching the image design) --}}
                    <div class="w-full !mb-7 pt-4">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="w-2 h-2 rounded-full bg-[#00e676] animate-pulse"></span>
                            <span class="text-[#cacaca] text-[0.75rem] font-bold tracking-wider uppercase">{!! t('Canlı Piyasalar') !!}</span>
                        </div>
                        <div style="display: flex; flex-wrap: wrap; gap: 16px;">
                            
                            {{-- USD Card --}}
                            <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
                                <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
                                    <div class="flex items-center justify-between !mb-2">
                                        <span class="text-[0.8rem] font-bold text-gray-500 uppercase">USD</span>
                                        <div class="flex items-center gap-1" id="usd-change-container" style="color: #009846;">
                                            <span class="text-[0.75rem] font-bold" id="usd-pct">0.42%</span>
                                            <svg id="usd-arrow-svg" width="16" height="16" fill="#009846" style="position: relative; top: -1px; transform: rotate(180deg);" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M384 576q0-26 19-45t45-19h896q26 0 45 19t19 45-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="text-[1.4rem] font-bold text-[#1e2229] font-mono leading-none my-1.5" id="usd-rate-container">
                                        <span id="usd-try">45.9</span> <span class="text-[1rem] font-normal font-sans">₺</span>
                                    </div>
                                    <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden mt-1">
                                        <div class="bg-[#009846] h-1.5 rounded-full" style="width: 45%;" id="usd-bar"></div>
                                    </div>
                                </div>
                            </div>

                            {{-- EUR Card --}}
                            <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
                                <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
                                    <div class="flex items-center justify-between !mb-2">
                                        <span class="text-[0.8rem] font-bold text-gray-500 uppercase">EUR</span>
                                        <div class="flex items-center gap-1" id="eur-change-container" style="color: #B9101E;">
                                            <span class="text-[0.75rem] font-bold" id="eur-pct">-0.15%</span>
                                            <svg id="eur-arrow-svg" width="16" height="16" fill="#B9101E" style="position: relative; top: -1px;" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M384 576q0-26 19-45t45-19h896q26 0 45 19t19 45-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="text-[1.4rem] font-bold text-[#1e2229] font-mono leading-none my-1.5" id="eur-rate-container">
                                        <span id="eur-try">53.4061</span> <span class="text-[1rem] font-normal font-sans">₺</span>
                                    </div>
                                    <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden mt-1">
                                        <div class="bg-[#B9101E] h-1.5 rounded-full" style="width: 35%;" id="eur-bar"></div>
                                    </div>
                                </div>
                            </div>

                            {{-- GBP Card --}}
                            <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
                                <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
                                    <div class="flex items-center justify-between !mb-2">
                                        <span class="text-[0.8rem] font-bold text-gray-500 uppercase">GBP</span>
                                        <div class="flex items-center gap-1" id="gbp-change-container" style="color: #B9101E;">
                                            <span class="text-[0.75rem] font-bold" id="gbp-pct">-0.42%</span>
                                            <svg id="gbp-arrow-svg" width="16" height="16" fill="#B9101E" style="position: relative; top: -1px;" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M384 576q0-26 19-45t45-19h896q26 0 45 19t19 45-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="text-[1.4rem] font-bold text-[#1e2229] font-mono leading-none my-1.5" id="gbp-rate-container">
                                        <span id="gbp-try">61.7723</span> <span class="text-[1rem] font-normal font-sans">₺</span>
                                    </div>
                                    <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden mt-1">
                                        <div class="bg-[#B9101E] h-1.5 rounded-full" style="width: 40%;" id="gbp-bar"></div>
                                    </div>
                                </div>
                            </div>

                            {{-- GRA Card --}}
                            <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
                                <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
                                    <div class="flex items-center justify-between !mb-2">
                                        <span class="text-[0.8rem] font-bold text-gray-500 uppercase">GRA</span>
                                        <div class="flex items-center gap-1" id="gra-change-container" style="color: #B9101E;">
                                            <span class="text-[0.75rem] font-bold" id="gra-pct">-1%</span>
                                            <svg id="gra-arrow-svg" width="16" height="16" fill="#B9101E" style="position: relative; top: -1px;" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M384 576q0-26 19-45t45-19h896q26 0 45 19t19 45-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="text-[1.4rem] font-bold text-[#1e2229] font-mono leading-none my-1.5" id="gra-rate-container">
                                        <span id="gold-try">6650.24</span> <span class="text-[1rem] font-normal font-sans">₺</span>
                                    </div>
                                    <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden mt-1">
                                        <div class="bg-[#B9101E] h-1.5 rounded-full" style="width: 30%;" id="gra-bar"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    
                    <div>
                        <a href="https://finance.truncgil.com/docs" target="_blank" class="btn hero-btn-primary rounded mr-3">
                            {!! t('Dokümantasyon') !!}
                        </a>
                        <a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn hero-btn-secondary rounded">
                            {!! t('Teklif Alın') !!}
                        </a>
                    </div>
                </div>

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

    {{-- Section 2: What We Do? --}}
    <section class="wrapper !bg-[#ffffff]">
        <div class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] pb-24 xl:pb-32 lg:pb-32 md:pb-32">
            <div class="flex flex-wrap mx-[-15px]">
                <div class="lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                    <h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#009846] !text-[#009846] !mb-3">
                        {!! t('Ne Yapıyoruz?') !!}
                    </h2>
                    <h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-9">
                        {!! t('İhtiyaçlarınıza özel olarak tasarlanmış yüksek hızlı finansal veri çözümleri.') !!}
                    </h3>
                </div>
            </div>
            
            <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
                <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="icon btn btn-block btn-lg btn-soft-green pointer-events-none !mb-6 !bg-[#e6f5ec] !text-[#009846]"> 
                        <i class="uil uil-wind-moon"></i> 
                    </div>
                    <h4 class="!text-[1rem] !leading-[1.45]">{!! t('7/24 Kesintisiz Destek') !!}</h4>
                    <p class="!mb-3">{!! t('Canlı veri hatlarımız ve uzman teknik ekibimiz, sistemlerinizin kesintisiz çalışması için her an hazır durumdadır.') !!}</p>
                    <a href="https://finance.truncgil.com/docs" target="_blank" class="more hover !text-[#009846] focus:!text-[#009846] hover:!text-[#009846]">{!! t('Detaylar') !!}</a>
                </div>
                <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="icon btn btn-block btn-lg btn-soft-green pointer-events-none !mb-6 !bg-[#e6f5ec] !text-[#009846]"> 
                        <i class="uil uil-shield-exclamation before:content-['\ecb3']"></i> 
                    </div>
                    <h4 class="!text-[1rem] !leading-[1.45]">{!! t('Güvenli Entegrasyon') !!}</h4>
                    <p class="!mb-3">{!! t('SSL/TLS korumalı, son derece güvenli RESTful API uç noktalarımız ile verilerinizi projelerinize güvenle çekin.') !!}</p>
                    <a href="https://finance.truncgil.com/docs" target="_blank" class="more hover !text-[#009846] focus:!text-[#009846] hover:!text-[#009846]">{!! t('Detaylar') !!}</a>
                </div>
                <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="icon btn btn-block btn-lg btn-soft-green pointer-events-none !mb-6 !bg-[#e6f5ec] !text-[#009846]"> 
                        <i class="uil uil-laptop-cloud before:content-['\ebb2']"></i> 
                    </div>
                    <h4 class="!text-[1rem] !leading-[1.45]">{!! t('Anlık Güncellemeler') !!}</h4>
                    <p class="!mb-3">{!! t('Altın fiyatları, serbest piyasa döviz kurları ve kripto paralar milisaniyeler bazında sürekli güncellenir.') !!}</p>
                    <a href="https://finance.truncgil.com/docs" target="_blank" class="more hover !text-[#009846] focus:!text-[#009846] hover:!text-[#009846]">{!! t('Detaylar') !!}</a>
                </div>
                <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="icon btn btn-block btn-lg btn-soft-green pointer-events-none !mb-6 !bg-[#e6f5ec] !text-[#009846]"> 
                        <i class="uil uil-phone-volume before:content-['\ec50']"></i> 
                    </div>
                    <h4 class="!text-[1rem] !leading-[1.45]">{!! t('Piyasa Analizleri') !!}</h4>
                    <p class="!mb-3">{!! t('Gelişmiş geçmiş veri havuzumuzla piyasa trendlerini kolayca analiz edin, raporlayın ve tahminler üretin.') !!}</p>
                    <a href="https://finance.truncgil.com/docs" target="_blank" class="more hover !text-[#009846] focus:!text-[#009846] hover:!text-[#009846]">{!! t('Detaylar') !!}</a>
                </div>
            </div>

            {{-- Section 3: How It Works? --}}
            <div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] !mb-24 md:!mb-[8rem] items-center">
                <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !relative !mt-[80px]">
                    <div class="shape bg-dot rellax !w-[7rem] !h-[12.5rem] absolute z-[1] opacity-50 !bg-[radial-gradient(#009846_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
                    <div class="shape !rounded-[.4rem] !bg-[#edfbf2] rellax xl:block lg:block md:block !absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%;"></div>
                    <figure class="!rounded-[.4rem] relative z-[2]">
                        <img class="!rounded-[.4rem]" src="{{ asset('assets/img/photos/about7.jpg') }}" alt="How Trunçgil Finance Works">
                    </figure>
                </div>
                
                <div class="lg:w-5/12 xl:w-4/12 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !mt-[80px]">
                    <h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#009846] !text-[#009846] !mb-3">
                        {!! t('Nasıl Çalışır?') !!}
                    </h2>
                    <h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-7">
                        {!! t('3 Kolay Adımda Entegrasyon Başarısı') !!}
                    </h3>
                    <div class="flex flex-row !mb-6">
                        <div>
                            <span class="icon btn btn-block btn-soft-green pointer-events-none !mr-5 !bg-[#e6f5ec] !text-[#009846]"><span class="number !text-[0.9rem]">1</span></span>
                        </div>
                        <div>
                            <h4 class="!mb-1 !text-[1rem] !leading-[1.45]">{!! t('Uç Noktayı Seçin') !!}</h4>
                            <p class="!mb-0">{!! t('Projenizin ihtiyaç duyduğu veriyi (Döviz, Altın veya Kripto) sağlayan JSON uç noktasını seçin.') !!}</p>
                        </div>
                    </div>
                    <div class="flex flex-row !mb-6">
                        <div>
                            <span class="icon btn btn-block btn-soft-green pointer-events-none !mr-5 !bg-[#e6f5ec] !text-[#009846]"><span class="number !text-[0.9rem]">2</span></span>
                        </div>
                        <div>
                            <h4 class="!mb-1 !text-[1rem] !leading-[1.45]">{!! t('Kodunuza Ekleyin') !!}</h4>
                            <p class="!mb-0">{!! t('No-Auth özelliğimiz sayesinde herhangi bir key yönetimi gerekmeden doğrudan API çağrısını başlatın.') !!}</p>
                        </div>
                    </div>
                    <div class="flex flex-row">
                        <div>
                            <span class="icon btn btn-block btn-soft-green pointer-events-none !mr-5 !bg-[#e6f5ec] !text-[#009846]"><span class="number !text-[0.9rem]">3</span></span>
                        </div>
                        <div>
                            <h4 class="!mb-1 !text-[1rem] !leading-[1.45]">{!! t('Canlı Veriyi İşleyin') !!}</h4>
                            <p class="!mb-0">{!! t('Milisaniyeler içinde gelen temiz ve yapılandırılmış çıktıyı uygulamanızda hemen kullanın.') !!}</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Section 4: Why Choose Us? --}}
            <div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center">
                <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] sm:!mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:!order-2 !relative">
                    <div class="shape !rounded-[50%] bg-line green rellax !w-[8rem] !h-[8rem] !absolute z-[1] opacity-50 bg-[radial-gradient(#009846_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"></div>
                    <div class="shape rounded !bg-[#edfbf2] rellax xl:block lg:block md:block absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; left: -1.5rem; width: 85%; height: 90%;"></div>
                    <figure class="rounded-[0.4rem] relative z-[2]">
                        <img class="rounded-[.4rem]" src="{{ asset('assets/img/photos/about9.jpg') }}" alt="Why Choose Trunçgil Finance">
                    </figure>
                </div>
                
                <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] sm:!mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] max-w-full">
                    <h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#009846] !text-[#009846] !mb-3">
                        {!! t('Neden Biz?') !!}
                    </h2>
                    <h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-7">
                        {!! t('Değerli geliştiricilerimizin bizi tercih etmesinin birkaç önemli nedeni.') !!}
                    </h3>
                    <div class="accordion accordion-wrapper" id="accordionExample">
                        <div class="card plain accordion-item">
                            <div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingOne">
                                <button class="before:!text-[#009846] hover:!text-[#009846] !p-[0_0_0_1.1rem] !text-[.9rem] accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    {!! t('Sıfır Kurulum Maliyeti (No-Auth)') !!}
                                </button>
                            </div>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
                                    <p>{!! t('API anahtarları almakla, üyelik adımlarıyla uğraşmayın. Doğrudan açık API endpointlerimize bağlanıp saniyeler içinde geliştirme yapmaya başlayın.') !!}</p>
                                </div>
                            </div>
                        </div>
                        <div class="card plain accordion-item">
                            <div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingTwo">
                                <button class="before:!text-[#009846] hover:!text-[#009846] !p-[0_0_0_1.1rem] !text-[.9rem] collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    {!! t('Milisaniyeler Hızında JSON Yanıtları') !!}
                                </button>
                            </div>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                <div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
                                    <p>{!! t('Ultra hızlı sunucu altyapımız ve optimize edilmiş önbellek katmanlarımız sayesinde isteklerinize anında ve sıfır gecikmeyle cevap alın.') !!}</p>
                                </div>
                            </div>
                        </div>
                        <div class="card plain accordion-item">
                            <div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingThree">
                                <button class="before:!text-[#009846] hover:!text-[#009846] !p-[0_0_0_1.1rem] !text-[.9rem] collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    {!! t('Dockerize Bağımsız Altyapı İmkanı') !!}
                                </button>
                            </div>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                <div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
                                    <p>{!! t('Kurumsal işletmeler için geliştirdiğimiz özel Docker paketiyle, sistemi kendi iç ağınıza kurup bağımsız olarak anlık veri çekebilirsiniz.') !!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Section 5: Join Our Community Banner --}}
    <section class="wrapper image-wrapper bg-image bg-overlay !bg-fixed bg-no-repeat bg-[center_center] bg-cover 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(30,34,40,.5)]" style="background-image: url('{{ asset('assets/img/photos/bg1.jpg') }}');">
        <div class="container py-[8rem]">
            <div class="flex flex-wrap mx-[-15px]">
                <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative z-[2]">
                    <h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#ffffff] !text-white !mb-3">
                        {!! t('Topluluğumuza Katılın') !!}
                    </h2>
                    <h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-6 !text-white xxl:!pr-32">
                        {!! t("5000'den fazla aktif geliştirici ve kurum tarafından tercih ediliyoruz. Siz de projenizi hemen güçlendirin.") !!}
                    </h3>
                    <a href="https://finance.truncgil.com/" target="_blank" class="btn btn-white !rounded-[.4rem] !text-[.85rem] !mb-0 whitespace-nowrap">{!! t('Şimdi Başlayın') !!}</a>
                </div>
            </div>
        </div>
    </section>

    {{-- Section 6: Case Studies (Kullanım Alanları) --}}
    <section class="wrapper !bg-[#ffffff] angled upper-end relative border-0
                    before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-y-transparent before:border-[#fefefe] before:border-0 before:border-solid before:right-0 after:content-[''] after:block after:absolute after:z-0 after:border-y-transparent after:border-[#fefefe] after:border-0 after:border-solid after:right-0">
        <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
            <div class="flex flex-wrap mx-[-15px]">
                <div class="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                    <h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#009846] !text-[#009846] !mb-3">
                        {!! t('Uygulama Alanları') !!}
                    </h2>
                    <h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-9">
                        {!! t('Piyasa verilerimizle zenginleştirilmiş bazı mükemmel kullanım senaryoları.') !!}
                    </h3>
                </div>
            </div>
            
            <div class="swiper-container blog grid-view !mb-10 relative z-10" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <article>
                                <figure class="overlay overlay-1 hover-scale rounded !mb-6 group">
                                    <a href="#">
                                        <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ asset('assets/img/photos/b4.jpg') }}" alt="Use Case 1">
                                    </a>
                                </figure>
                                <div class="post-header">
                                    <h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#009846]' href='#'>{!! t('E-Ticaret & Otomatik Döviz Dönüşümleri') !!}</a></h2>
                                </div>
                                <div class="post-footer">
                                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
                                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>{!! t('Canlı Kur') !!}</span></li>
                                    </ul>
                                </div>
                            </article>
                        </div>
                        <div class="swiper-slide">
                            <article>
                                <figure class="overlay overlay-1 hover-scale rounded !mb-6 group">
                                    <a href="#">
                                        <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ asset('assets/img/photos/b5.jpg') }}" alt="Use Case 2">
                                    </a>
                                </figure>
                                <div class="post-header">
                                    <h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#009846]' href='#'>{!! t('ERP & Otomatik Şirket İçi Kur Değerlemeleri') !!}</a></h2>
                                </div>
                                <div class="post-footer">
                                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
                                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>{!! t('Kurumsal ERP') !!}</span></li>
                                    </ul>
                                </div>
                            </article>
                        </div>
                        <div class="swiper-slide">
                            <article>
                                <figure class="overlay overlay-1 hover-scale rounded !mb-6 group">
                                    <a href="#">
                                        <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ asset('assets/img/photos/b6.jpg') }}" alt="Use Case 3">
                                    </a>
                                </figure>
                                <div class="post-header">
                                    <h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#009846]' href='#'>{!! t('Mobil Finans & Canlı Altın Takip Portalları') !!}</a></h2>
                                </div>
                                <div class="post-footer">
                                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
                                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>{!! t('Mobil Entegrasyon') !!}</span></li>
                                    </ul>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Section 7: Company Facts (Counters) --}}
    <section class="wrapper !bg-[#edfbf2]">
        <div class="container py-[4.5rem] xl:pt-28 lg:pt-28 md:pt-28 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem]">
            <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !mb-2 items-end">
                <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">
                    <h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#009846] !text-[#009846] !mb-3">
                        {!! t('Şirket Rakamlarımız') !!}
                    </h2>
                    <h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-0 xxl:!pr-20">
                        {!! t('Altyapımızın gücünü gösteren bazı önemli rakamlar.') !!}
                    </h3>
                </div>
                <div class="lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full xl:!mt-2 lg:!mt-2">
                    <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">
                            <h3 class="counter counter-lg !text-[calc(1.35rem_+_1.2vw)] !tracking-[normal] !leading-none !mb-[.5rem] xl:!text-[2.25rem]">10M+</h3>
                            <p class="font-medium !mb-0">{!! t('Günlük API İstek Hacmi') !!}</p>
                        </div>
                        <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">
                            <h3 class="counter counter-lg !text-[calc(1.35rem_+_1.2vw)] !tracking-[normal] !leading-none !mb-[.5rem] xl:!text-[2.25rem]">5000+</h3>
                            <p class="font-medium !mb-0">{!! t('Aktif Geliştirici ve Kurum') !!}</p>
                        </div>
                        <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">
                            <h3 class="counter counter-lg !text-[calc(1.35rem_+_1.2vw)] !tracking-[normal] !leading-none !mb-[.5rem] xl:!text-[2.25rem]">%99.99</h3>
                            <p class="font-medium !mb-0">{!! t('Sunucu Uptime Garantisi') !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Section 8: Testimonial & Pricing Plan Integration --}}
    <section class="wrapper !bg-[#ffffff] angled upper-end lower-start relative border-0
                    before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-y-transparent before:border-[#fefefe] before:border-0 before:border-solid before:right-0 after:bottom-[-4rem] after:content-[''] after:block after:absolute after:z-0 after:border-l-[100vw] after:border-r-transparent after:border-b-[4rem] after:border-y-transparent after:border-[#fefefe] after:border-0 after:border-solid after:right-0">
        <div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] !relative">
            
            {{-- Testimonial Slider --}}
            <div class="relative !mt-[-8rem] xl:!mt-[-17.5rem] lg:!mt-[-17.5rem] md:!mt-[-17.5rem] !mb-24 xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
                <div class="shape !rounded-[50%] bg-line green rellax !w-[8rem] !h-[8rem] absolute opacity-50 bg-[radial-gradient(#009846_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -2rem; right: -2.7rem; z-index:0;"></div>
                <div class="shape !rounded-[50%] !bg-[#edfbf2] rellax !w-[8rem] !h-[8rem] absolute" data-rellax-speed="1" style="bottom: -1rem; left: -3rem; z-index:0;"></div>
                <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                    <div class="flex flex-wrap mx-0">
                        <div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full rounded-t-[0.4rem] xl:rounded-tl-[0.4rem] xl:rounded-tr-none xl:rounded-br-none xl:rounded-bl-[0.4rem] lg:rounded-tl-[0.4rem] lg:rounded-tr-none lg:rounded-br-none lg:rounded-bl-[0.4rem] bg-[#f8f9fa] flex items-center justify-center p-8 md:min-h-[25rem] max-md:min-h-[20rem]">
                            <img src="{{ asset('assets/img/finance-logo.svg') }}" alt="Trunçgil Finance Logo" style="max-width: 260px; width: 75%; height: auto; filter: invert(1) hue-rotate(180deg);">
                        </div>
                        <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
                            <div class="!p-10 xl:!p-[4rem] lg:!p-[4rem] md:!p-12">
                                <div class="swiper-container dots-closer !mb-4 relative z-10" data-margin="30" data-dots="true">
                                    <div class="swiper">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <blockquote class="icon icon-top !text-[1.05rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
                                                    <p>“{!! t('Trunçgil Finance API altyapısını mobil cüzdan projemizde kullanıyoruz. Aylardır bir kere bile kesinti yaşamadık, performansı gerçekten harika!') !!}”</p>
                                                    <div class="flex items-center justify-center !text-center">
                                                        <div class="info !pl-0">
                                                            <h5 class="!mb-1 !text-[.95rem] !leading-[1.5]">{!! t('Can Özkan') !!}</h5>
                                                            <p class="!mb-0 !text-[.85rem]">{!! t('Kıdemli Mobil Geliştirici') !!}</p>
                                                        </div>
                                                    </div>
                                                </blockquote>
                                            </div>
                                            <div class="swiper-slide">
                                                <blockquote class="icon icon-top !text-[1.05rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
                                                    <p>“{!! t('Sıfır kurulum (No-Auth) olması sayesinde entegrasyonu tam 5 dakikada tamamladık. Hız ve kullanım kolaylığı mükemmel.') !!}”</p>
                                                    <div class="flex items-center justify-center !text-center">
                                                        <div class="info !pl-0">
                                                            <h5 class="!mb-1 !text-[.95rem] !leading-[1.5]">{!! t('Elif Yılmaz') !!}</h5>
                                                            <p class="!mb-0 !text-[.85rem]">{!! t('Fullstack Yazılım Uzmanı') !!}</p>
                                                        </div>
                                                    </div>
                                                </blockquote>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Pricing and Plans --}}
            <div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-24 xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
                <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                    <h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#009846] !text-[#009846] lg:!mt-32 xl:!mt-32 !mb-3">
                        {!! t('Fiyatlandırma') !!}
                    </h2>
                    <h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-3">
                        {!! t('Geliştirici dostu ve son derece adil planlar.') !!}
                    </h3>
                    <p>{!! t('Hemen ücretsiz deneme planıyla başlayın ve API gücünü kendiniz deneyimleyin. Kredi kartı gerekmez!') !!}</p>
                    <a href="https://finance.truncgil.com/" target="_blank" class="btn btn-green !text-white !bg-[#009846] border-[#009846] hover:text-white hover:bg-[#007f3a] hover:!border-[#007f3a] focus:shadow-[rgba(0,152,70,0.5)] focus:text-white active:text-white active:bg-[#007f3a] active:border-[#007f3a] disabled:bg-[#009846] disabled:border-[#009846] !text-[.85rem] rounded !mt-2">
                        {!! t('Tüm Planları Gör') !!}
                    </a>
                </div>
                
                <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] pricing-wrapper !mt-[30px]">
                    <div class="flex flex-wrap items-center switcher xl:!justify-end lg:!justify-end">
                        <p class="!mb-0 !pr-[.75rem]">{!! t('Aylık') !!}</p>
                        <div class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent">
                            <div class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white"></div>
                            <div class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase"></div>
                            <div class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[#009846] opacity-100 switcher-button"></div>
                        </div>
                        <p class="!mb-0 !pl-3 !relative">{!! t('Yıllık') !!} <span class="!text-[#e2626b]">({!! t('%30 Tasarruf') !!})</span></p>
                    </div>
                    
                    <div class="flex flex-wrap mx-[-15px] !mt-[25px] !relative">
                        <div class="shape bg-dot green rellax !w-[6rem] !h-[8rem] absolute z-[1] opacity-50 bg-[radial-gradient(#009846_2px,transparent_2.5px)]" data-rellax-speed="1" style="bottom: -0.5rem; right: -1.6rem;"></div>
                        <div class="shape !rounded-[50%] !bg-[#edfbf2] rellax !w-[8rem] !h-[8rem] absolute z-[1]" data-rellax-speed="1" style="top: -1rem; left: -2rem;"></div>
                        
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
                            <div class="pricing card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                                <div class="card-body pb-14">
                                    <div class="prices !text-[#343f52]">
                                        <div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">0</span> <span class="price-duration">/{!! t('ay') !!}</span></div>
                                        <div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">0</span> <span class="price-duration">/{!! t('yıl') !!}</span></div>
                                    </div>
                                    <h4 class="card-title !mt-2 text-[1rem] !leading-[1.45]">{!! t('Geliştirici Planı') !!}</h4>
                                    <ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
                                        <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-[#e6f5ec] !text-[#009846] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> {!! t('API İstek / Ay') !!}</span></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-[#e6f5ec] !text-[#009846] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>{!! t('Kimlik Doğrulama Gerekmez (No-Auth)') !!}</span></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-[#e6f5ec] !text-[#009846] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>{!! t('Standart HTTP Önbellekleme') !!}</span></li>
                                        <li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span>{!! t('Özel Docker Kurulum Desteği') !!}</span></li>
                                    </ul>
                                    <a href="https://finance.truncgil.com/" target="_blank" class="btn btn-green !text-white !bg-[#009846] border-[#009846] hover:text-white hover:bg-[#007f3a] hover:!border-[#007f3a] focus:shadow-[rgba(0,152,70,0.5)] focus:text-white active:text-white active:bg-[#007f3a] active:border-[#007f3a] disabled:bg-[#009846] disabled:border-[#009846] !rounded-[.4rem] !text-[.85rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">{!! t('Ücretsiz Başla') !!}</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full popular !mt-[30px]">
                            <div class="pricing card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                                <div class="card-body pb-14">
                                    <div class="prices !text-[#343f52]">
                                        <div class="price price-show !justify-start"><span class="price-value">{!! t('Özel') !!}</span></div>
                                    </div>
                                    <h4 class="card-title !mt-2 text-[1rem] !leading-[1.45]">{!! t('Kurumsal Plan') !!}</h4>
                                    <ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
                                        <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-[#e6f5ec] !text-[#009846] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>{!! t('Sınırsız') !!}</strong> {!! t('API İstek Hacmi') !!}</span></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-[#e6f5ec] !text-[#009846] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>{!! t('Özel Sunucu & Docker') !!}</strong> {!! t('Kurulumları') !!}</span></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-[#e6f5ec] !text-[#009846] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>{!! t('Yüksek Öncelikli Özel Destek Hattı') !!}</span></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-[#e6f5ec] !text-[#009846] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>{!! t('Milisaniyelik Ultra Düşük Gecikme') !!}</span></li>
                                    </ul>
                                    <a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn btn-green !text-white !bg-[#009846] border-[#009846] hover:text-white hover:bg-[#007f3a] hover:!border-[#007f3a] focus:shadow-[rgba(0,152,70,0.5)] focus:text-white active:text-white active:bg-[#007f3a] active:border-[#007f3a] disabled:bg-[#009846] disabled:border-[#009846] !rounded-[.4rem] !text-[.85rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">{!! t('Bizimle İletişime Geçin') !!}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Section 9: Get In Touch (Contact Info) --}}
            <div class="flex flex-wrap mx-[-15px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center">
                <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !relative">
                    <div class="shape bg-dot primary rellax !w-[7rem] !h-[12.5rem] absolute z-[1] opacity-50 bg-[radial-gradient(#e31e24_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
                    <div class="shape !rounded-[.4rem] !bg-[#edfbf2] rellax xl:block lg:block md:block !absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%;"></div>
                    <figure class="rounded-[0.4rem] relative z-[2]">
                        <img class="rounded-[.4rem]" src="{{ asset('assets/img/photos/about14.jpg') }}" alt="Contact Trunçgil Finance">
                    </figure>
                </div>
                
                <div class="lg:w-5/12 xl:w-4/12 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full">
                    <h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#009846] !text-[#009846] !mb-3">
                        {!! t('Bize Ulaşın') !!}
                    </h2>
                    <h2 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-8">
                        {!! t('Hala ikna olmadınız mı? Gelin birlikte harika bir entegrasyon yapalım.') !!}
                    </h2>
                    <div class="flex flex-row">
                        <div>
                            <div class="icon !text-[#009846] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]"> 
                                <i class="uil uil-location-pin-alt before:content-['\ebd8']"></i> 
                            </div>
                        </div>
                        <div>
                            <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">{!! t('Adres') !!}</h5>
                            <address class="not-italic !leading-[inherit] !mb-4">{{ setting('contact_address') }}</address>
                        </div>
                    </div>
                    <div class="flex flex-row">
                        <div>
                            <div class="icon !text-[#009846] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]"> 
                                <i class="uil uil-phone-volume before:content-['\ec50']"></i> 
                            </div>
                        </div>
                        <div>
                            <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">{!! t('Telefon') !!}</h5>
                            <p>{{ setting('contact_phone') }}</p>
                        </div>
                    </div>
                    <div class="flex flex-row">
                        <div>
                            <div class="icon !text-[#009846] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]"> 
                                <i class="uil uil-envelope before:content-['\eac8']"></i> 
                            </div>
                        </div>
                        <div>
                            <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">{!! t('E-posta') !!}</h5>
                            <p class="!mb-0"><a href="mailto:{{ setting('contact_email') }}" class="!text-[#60697b]">{{ setting('contact_email') }}</a></p>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Switcher logic for Pricing Table
        const switcherWrapper = document.querySelector('.pricing-switchers');
        if (switcherWrapper) {
            switcherWrapper.addEventListener('click', function() {
                const button = this.querySelector('.switcher-button');
                const pricesShow = document.querySelectorAll('.price-show');
                const pricesHide = document.querySelectorAll('.price-hide');
                
                if (button.style.left === '16px') {
                    button.style.left = '0px';
                    pricesShow.forEach(el => el.classList.remove('price-hidden'));
                    pricesHide.forEach(el => el.classList.add('price-hidden'));
                } else {
                    button.style.left = '16px';
                    pricesShow.forEach(el => el.classList.add('price-hidden'));
                    pricesHide.forEach(el => el.classList.remove('price-hidden'));
                }
            });
        }

        // Live rates dynamic simulator
        function startRateDynamics() {
            const usdTryEl = document.getElementById('usd-try');
            const eurTryEl = document.getElementById('eur-try');
            const gbpTryEl = document.getElementById('gbp-try');
            const goldTryEl = document.getElementById('gold-try');

            function updateCard(id, currentVal, oscRange, precision, barId, pctId, svgId, containerId) {
                const osc = (Math.random() - 0.5) * oscRange;
                const nextVal = Math.max(0.1, currentVal + osc);
                
                const pctChange = (osc / currentVal) * 100;
                const sign = pctChange >= 0 ? '+' : '';
                
                const rateEl = document.getElementById(id);
                if (rateEl) {
                    rateEl.innerText = nextVal.toFixed(precision);
                }

                const pctEl = document.getElementById(pctId);
                const svgEl = document.getElementById(svgId);
                const containerEl = document.getElementById(containerId);
                const barEl = document.getElementById(barId);

                if (pctEl && containerEl) {
                    pctEl.innerText = sign + pctChange.toFixed(2) + '%';
                    const greenColor = '#009846';
                    const redColor = '#B9101E';
                    
                    if (pctChange >= 0) {
                        containerEl.style.color = greenColor;
                        if (svgEl) {
                            svgEl.setAttribute('fill', greenColor);
                            svgEl.style.transform = 'rotate(180deg)';
                        }
                        if (barEl) {
                            barEl.style.backgroundColor = greenColor;
                            barEl.style.width = Math.min(100, Math.max(10, (barEl.style.width ? parseFloat(barEl.style.width) : 50) + 2)) + '%';
                        }
                    } else {
                        containerEl.style.color = redColor;
                        if (svgEl) {
                            svgEl.setAttribute('fill', redColor);
                            svgEl.style.transform = 'rotate(0deg)';
                        }
                        if (barEl) {
                            barEl.style.backgroundColor = redColor;
                            barEl.style.width = Math.min(100, Math.max(10, (barEl.style.width ? parseFloat(barEl.style.width) : 50) - 2)) + '%';
                        }
                    }
                }
                return nextVal;
            }

            let usdVal = parseFloat(usdTryEl?.innerText || '45.9');
            let eurVal = parseFloat(eurTryEl?.innerText || '53.4061');
            let gbpVal = parseFloat(gbpTryEl?.innerText || '61.7723');
            let goldVal = parseFloat(goldTryEl?.innerText || '6650.24');

            setInterval(() => {
                if (usdTryEl) usdVal = updateCard('usd-try', usdVal, 0.05, 1, 'usd-bar', 'usd-pct', 'usd-arrow-svg', 'usd-change-container');
                if (eurTryEl) eurVal = updateCard('eur-try', eurVal, 0.06, 4, 'eur-bar', 'eur-pct', 'eur-arrow-svg', 'eur-change-container');
                if (gbpTryEl) gbpVal = updateCard('gbp-try', gbpVal, 0.07, 4, 'gbp-bar', 'gbp-pct', 'gbp-arrow-svg', 'gbp-change-container');
                if (goldTryEl) goldVal = updateCard('gold-try', goldVal, 5.0, 2, 'gra-bar', 'gra-pct', 'gra-arrow-svg', 'gra-change-container');
            }, 2000);
        }
        
        startRateDynamics();
    });
</script>
@endpush