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

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

    $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": "EducationalOrganization",
      "@@id": "{{ url()->current() }}#organization",
      "name": "Trunçgil Akademi",
      "image": "https://akademi.truncgil.com.tr/logo.svg",
      "url": "{{ url('/') }}",
      "telephone": "{{ setting('contact_phone', '+902244431620') }}",
      "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": "Technology & Coding Training",
      "provider": {
        "@@id": "{{ url()->current() }}#organization"
      },
      "name": {!! json_encode(t('Trunçgil Akademi Teknolojik Uzmanlık Eğitimleri')) !!},
      "description": {!! json_encode(t('Trunçgil Akademi bünyesinde Vibe Coding, Yapay Zeka, Web Uygulama Geliştirme ve Müzik Prodüksiyonu alanlarında uzman seviye eğitimler sunuyoruz.')) !!}
    }
  ]
}
</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>
    .akademi-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;
    }

    .akademi-section .accordion-wrapper .card-header button.collapsed {
        color: #343f52 !important;
    }
    .akademi-section .accordion-wrapper .card-header button:hover,
    .akademi-section .accordion-wrapper .card-header button {
        color: #1D8595 !important;
    }

    /* Academy Card Micro-animations */
    .akademi-card {
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    }
    .akademi-card:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 1.25rem 2.5rem rgba(29, 133, 149, 0.15) !important;
    }

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

    .akademi-hero {
        padding-top: 80px !important;
    }
    @media (min-width: 992px) {
        .akademi-hero {
            padding-top: 140px !important;
        }
    }

    .bg-gradient-teal-light {
        background: linear-gradient(180deg, #e8f4f6 0%, rgba(255, 255, 255, 0) 100%) !important;
    }
    .btn-soft-teal {
        background-color: #e8f4f6 !important;
        color: #1D8595 !important;
    }
    .btn-teal {
        background-color: #1D8595 !important;
        border-color: #1D8595 !important;
        color: #ffffff !important;
    }
    .btn-teal:hover {
        background-color: #23636E !important;
        border-color: #23636E !important;
        color: #ffffff !important;
    }

    /* Floating tech logo lists inside cards */
    .tech-logo-strip {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    .tech-logo-strip img {
        width: 1.5rem;
        height: 1.5rem;
        opacity: 0.85;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .akademi-card:hover .tech-logo-strip img {
        transform: scale(1.15);
        opacity: 1;
    }
</style>
@endpush

@section('content')

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

{{-- Hero Section (inspired by demo1.html layout) --}}
<section class="wrapper bg-gradient-teal-light akademi-hero">
    <div class="container pt-10 xl:pt-[6.5rem] lg:pt-[6.5rem] md:pt-[6.5rem] pb-8 !text-center">
        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
            <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full" data-cue="slideInLeft" data-duration="800">
                <figure class="m-0 p-0">
                    <img class="w-auto mx-auto" src="{{ asset('assets/img/illustrations/i2.png') }}" alt="Trunçgil Akademi Hero">
                </figure>
            </div>
            <!-- /column -->
            <div class="md:w-10/12 lg:w-5/12 xl:w-5/12 md:!ml-[8.33333333%] lg:!ml-0 xl:!ml-0 flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
                <h1 class="!text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.5rem] !mb-5 md:mx-[-1.25rem] lg:mx-0">
                    {!! t('Trunçgil Akademi ile') !!} <br><span class="text-gradient" style="background-image: linear-gradient(135deg, #1D8595 0%, #23636E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{!! t('Geleceği Şekillendirin') !!}</span>
                </h1>
                <p class="lead !text-[1.1rem] !leading-[1.55] !mb-7">
                    {!! t('Vibe Coding, Yapay Zeka, Web ve Uygulama Geliştirme, Müzik Prodüksiyonu gibi günümüzün en popüler alanlarında uzman kadromuzdan profesyonel ve uygulamalı eğitimler alın.') !!}
                </p>
                <span>
                    <a href="#egitimler" class="btn btn-teal !text-white !bg-[#1D8595] border-[#1D8595] hover:text-white hover:bg-[#23636E] hover:!border-[#23636E] !text-[.85rem] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(29,133,149,0.25)]">
                        {!! t('Eğitimleri Keşfedin') !!}
                    </a>
                </span>
            </div>
            <!-- /column -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

{{-- Services/Expertise Areas (What We Do - inspired by demo1.html 4-card grid) --}}
<section id="egitimler" class="wrapper !bg-[#ffffff] akademi-section">
    <div class="container pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 pb-24">
        <div class="flex flex-wrap mx-[-15px] !text-center">
            <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%]" data-cue="slideInUp" data-duration="600">
                <h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">{!! t('Uzmanlık Alanlarımız') !!}</h2>
                <h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-10 xl:!px-10">
                    {!! t('Geleceğin popüler teknoloji ve sanat trendlerini yakalayan profesyonel müfredat.') !!}
                </h3>
            </div>
        </div>

        <div class="!relative">
            <div class="shape !rounded-[50%] !bg-[#e8f4f6] rellax !w-[6rem] !h-[6rem] !absolute z-[1]" data-rellax-speed="1" style="bottom: -0.5rem; right: -2.2rem; z-index: 0;"></div>
            <div class="shape bg-dot primary rellax !w-[6rem] !h-[7rem] absolute opacity-50 bg-[radial-gradient(#1D8595_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -0.5rem; left: -2.5rem; z-index: 0;"></div>

            <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !text-center" data-cues="slideInUp" data-group="akademi-cards" data-interval="-100" data-duration="500">
                
                {{-- Vibe Coding --}}
                <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
                    <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] akademi-card">
                        <div class="card-body flex-[1_1_auto] p-[40px] flex flex-col justify-between">
                            <div>
                                <div class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#e8f4f6] text-[#1D8595]">
                                    <span class="material-symbols-outlined !text-[1.6rem]">bolt</span>
                                </div>
                                <h4 class="!text-[1.1rem] !font-bold !mb-2 text-[#343f52]">{!! t('Vibe Coding') !!}</h4>
                                <p class="!mb-4 text-muted !text-[0.85rem]">{!! t('Yapay zekayı kodlama ortağı (copilot) olarak kullanarak, sadece doğal dil komutlarıyla sıfırdan komple projeler geliştirmeyi öğrenin.') !!}</p>
                            </div>
                            <div class="tech-logo-strip">
                                <img src="{{ asset('assets/img/tech-logos/chatgpt.svg') }}" alt="ChatGPT" title="ChatGPT">
                                <img src="{{ asset('assets/img/tech-logos/claude-ai.svg') }}" alt="Claude AI" title="Claude AI">
                                <img src="{{ asset('assets/img/tech-logos/deepseek.svg') }}" alt="DeepSeek" title="DeepSeek">
                                <img src="{{ asset('assets/img/tech-logos/github-copilot.svg') }}" alt="GitHub Copilot" title="GitHub Copilot">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- AI & Deep Learning --}}
                <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
                    <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] akademi-card">
                        <div class="card-body flex-[1_1_auto] p-[40px] flex flex-col justify-between">
                            <div>
                                <div class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#e8f4f6] text-[#1D8595]">
                                    <span class="material-symbols-outlined !text-[1.6rem]">psychology</span>
                                </div>
                                <h4 class="!text-[1.1rem] !font-bold !mb-2 text-[#343f52]">{!! t('Yapay Zeka & ML') !!}</h4>
                                <p class="!mb-4 text-muted !text-[0.85rem]">{!! t('PyTorch ve TensorFlow ile yapay sinir ağları tasarlamayı, veri işlemeyi ve makine öğrenmesi algoritmalarını üretim ortamına taşımayı keşfedin.') !!}</p>
                            </div>
                            <div class="tech-logo-strip">
                                <img src="{{ asset('assets/img/tech-logos/pytorch.svg') }}" alt="PyTorch" title="PyTorch">
                                <img src="{{ asset('assets/img/tech-logos/tensorflow.svg') }}" alt="TensorFlow" title="TensorFlow">
                                <img src="{{ asset('assets/img/tech-logos/python.svg') }}" alt="Python" title="Python">
                                <img src="{{ asset('assets/img/tech-logos/hugging-face.svg') }}" alt="Hugging Face" title="Hugging Face">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Web Applications --}}
                <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
                    <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] akademi-card">
                        <div class="card-body flex-[1_1_auto] p-[40px] flex flex-col justify-between">
                            <div>
                                <div class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#e8f4f6] text-[#1D8595]">
                                    <span class="material-symbols-outlined !text-[1.6rem]">language</span>
                                </div>
                                <h4 class="!text-[1.1rem] !font-bold !mb-2 text-[#343f52]">{!! t('Web Uygulamaları') !!}</h4>
                                <p class="!mb-4 text-muted !text-[0.85rem]">{!! t('Modern web mimarilerini, React, Vue, Next.js, HTML5, CSS3/Tailwind ve TypeScript tabanlı güçlü frontend-backend geliştirmeyi öğrenin.') !!}</p>
                            </div>
                            <div class="tech-logo-strip">
                                <img src="{{ asset('assets/img/tech-logos/reactjs.svg') }}" alt="React" title="React">
                                <img src="{{ asset('assets/img/tech-logos/vuejs.svg') }}" alt="Vue" title="Vue">
                                <img src="{{ asset('assets/img/tech-logos/nextjs.svg') }}" alt="Next.js" title="Next.js">
                                <img src="{{ asset('assets/img/tech-logos/tailwindcss.svg') }}" alt="Tailwind CSS" title="Tailwind CSS">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Music Production --}}
                <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
                    <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] akademi-card">
                        <div class="card-body flex-[1_1_auto] p-[40px] flex flex-col justify-between">
                            <div>
                                <div class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#e8f4f6] text-[#1D8595]">
                                    <span class="material-symbols-outlined !text-[1.6rem]">music_note</span>
                                </div>
                                <h4 class="!text-[1.1rem] !font-bold !mb-2 text-[#343f52]">{!! t('Müzik Prodüksiyonu') !!}</h4>
                                <p class="!mb-4 text-muted !text-[0.85rem]">{!! t('Yapay zeka destekli stem ayrıştırma, spektrogram analizi, dijital ses işleme, WebAssembly ve profesyonel ses mühendisliği teknikleri.') !!}</p>
                            </div>
                            <div class="tech-logo-strip">
                                <img src="{{ asset('assets/img/tech-logos/python.svg') }}" alt="Python" title="Python (Spectral/Stem analysis)">
                                <img src="{{ asset('assets/img/tech-logos/webassembly.svg') }}" alt="WebAssembly" title="WebAssembly (Web Audio)">
                            </div>
                        </div>
                    </div>
                </div>

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

{{-- Training Methodology (Our Strategy - inspired by demo1.html process) --}}
<section class="wrapper !bg-[#ffffff] angled upper-start lower-start relative border-0 before:border-[#e8f4f6] after:border-[#e8f4f6] before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-[100vw] before:border-r-transparent before:border-t-[4rem] before:border-y-transparent 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-solid after:right-0">
    <div class="container py-[4.5rem] xl:pt-28 lg:pt-28 md:pt-28 xl:pb-20 lg:pb-20 md:pb-20">
        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] items-center">
            
            <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[50px]" data-cue="fadeIn" data-duration="700">
                <div class="card xl:!mr-6 lg:!mr-6 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                    <div class="card-body p-6">
                        <div class="flex flex-row">
                            <div>
                                <span class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
                                    <span class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">01</span>
                                </span>
                            </div>
                            <div>
                                <h4 class="!mb-1 text-[1rem] font-bold text-[#343f52]">{!! t('Temel Altyapı & Konsept') !!}</h4>
                                <p class="!mb-0 text-muted !text-[0.85rem]">{!! t('Teorik temelleri sağlam atarak mantığı kavrar, yapay zekayı asistanımız yaparız.') !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card !mt-6 xl:!ml-16 lg:!ml-16 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                    <div class="card-body p-6">
                        <div class="flex flex-row">
                            <div>
                                <span class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
                                    <span class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">02</span>
                                </span>
                            </div>
                            <div>
                                <h4 class="!mb-1 text-[1rem] font-bold text-[#343f52]">{!! t('Canlı & Gerçekçi Projeler') !!}</h4>
                                <p class="!mb-0 text-muted !text-[0.85rem]">{!! t('Teoriyle kalmaz; canlı production ortamına uygun, çalışan web ve yapay zeka projeleri üretiriz.') !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card !mt-6 xl:mx-6 lg:mx-6 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                    <div class="card-body p-6">
                        <div class="flex flex-row">
                            <div>
                                <span class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
                                    <span class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">03</span>
                                </span>
                            </div>
                            <div>
                                <h4 class="!mb-1 text-[1rem] font-bold text-[#343f52]">{!! t('Portfolyo & Mentorluk') !!}</h4>
                                <p class="!mb-0 text-muted !text-[0.85rem]">{!! t('Eğitim sonrasında projelerinizi GitHub\'a yükler, güçlü bir portfolyo ile sektöre adım atarsınız.') !!}</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 xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[50px]" data-cue="slideInRight" data-duration="700">
                <h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">{!! t('Eğitim Metodolojimiz') !!}</h2>
                <h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-5">
                    {!! t('Trunçgil Akademi\'de eğitim, ezberden uzak ve tamamen proje odaklıdır.') !!}
                </h3>
                <p class="!mb-6">
                    {!! t('Sektörün ihtiyaç duyduğu modern teknolojileri en efektif öğrenme metotlarıyla birleştiriyoruz. Eğitmenlerimiz sadece teorik bilgi aktarmaz; güncel endüstri projelerinde yer alan deneyimli profesyonellerdir.') !!}
                </p>
                <a href="{{ $contactUrl }}" class="btn btn-teal !text-white !bg-[#1D8595] border-[#1D8595] hover:text-white hover:bg-[#23636E] hover:!border-[#23636E] !text-[.85rem] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(29,133,149,0.25)]">
                    {!! t('Akademiye Başvurun') !!}
                </a>
            </div>
        </div>

        {{-- Interactive FAQ & Why Choose Us (inspired by demo1.html accordion layout) --}}
        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
            <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full" data-cue="slideInLeft" data-duration="700">
                <figure class="m-0 p-0">
                    <img class="w-auto mx-auto" src="{{ asset('assets/img/illustrations/i6.png') }}" alt="Why Trunçgil Academy">
                </figure>
            </div>
            
            <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full" data-cue="slideInUp" data-duration="700">
                <h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">{!! t('Neden Trunçgil Akademi?') !!}</h2>
                <h3 class="!text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-bold xl:!text-[1.9rem] !mb-7">
                    {!! t('Sektördeki açığı kapatan, kariyer odaklı eğitim felsefesi.') !!}
                </h3>
                
                <div class="accordion accordion-wrapper" id="accordionAcademy">
                    <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="accordion-button !text-[0.9rem] before:!text-[#1D8595] hover:!text-[#1D8595]" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                {!! t('Vibe Coding Nedir ve Neden Öğretiliyor?') !!}
                            </button>
                        </div>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionAcademy">
                            <div class="card-body !p-[0_0_0_1.1rem]">
                                <p>{!! t('Vibe Coding, geliştiricilerin kod yazım hızını ve problem çözme kapasitesini yapay zeka araçlarıyla (Claude, GPT, DeepSeek vb.) maksimize ettiği yeni nesil bir çalışma tarzıdır. Sektördeki en popüler yaklaşımdır ve öğrencilerimize büyük zaman avantajı sağlar.') !!}</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="collapsed !text-[0.9rem] before:!text-[#1D8595] hover:!text-[#1D8595]" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                {!! t('Eğitim Sonunda Sertifika Veriliyor mu?') !!}
                            </button>
                        </div>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionAcademy">
                            <div class="card-body !p-[0_0_0_1.1rem]">
                                <p>{!! t('Evet, başarıyla tamamlanan projelerin ve portfolyo sunumlarının ardından, Trunçgil Teknoloji referanslı başarı sertifikası ve küresel geçerliliği olan dijital katılım rozeti takdim edilir.') !!}</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="collapsed !text-[0.9rem] before:!text-[#1D8595] hover:!text-[#1D8595]" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                {!! t('Eğitimler Online mı Yoksa Yüz Yüze mi?') !!}
                            </button>
                        </div>
                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionAcademy">
                            <div class="card-body !p-[0_0_0_1.1rem]">
                                <p>{!! t('Eğitimlerimizin tamamı tamamen online (çevrim içi) olarak yürütülmektedir. Canlı ve interaktif dersler, mentor destekli çalışma süreçleri, dijital atölyeler ve uzaktan erişilebilen zengin kaynaklar sayesinde Türkiye\'nin ve dünyanın her yerinden katılım sağlayabilirsiniz.') !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

{{-- Footer Call to Action (inspired by demo1.html CTA layout) --}}
<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-cue="slideInUp" data-duration="600">
                            <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient !mb-3" style="background-image: linear-gradient(135deg, #1D8595 0%, #23636E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{!! t('Geleceğinizi Bugün Planlayın') !!}</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('Teknolojik dönüşümde yerinizi almak ve Trunçgil Akademi eğitimlerine katılmak için hazır mısınız?') !!}
                            </h3>
                        </div>
                    </div>
                    <div class="flex justify-center" data-cue="slideInUp" data-delay="300" data-duration="600">
                        <a href="{{ $contactUrl }}" class="btn btn-lg btn-teal rounded-full shadow-lg font-semibold !text-white !bg-[#1D8595] border-[#1D8595] hover:bg-[#23636E] hover:border-[#23636E]">{!! t('Başvuru Formunu Doldurun') !!}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection