@extends('layouts.site')

@section('title', 'Lika Yazılım | Türkiye\'nin Dijital Geleceğini İnşa Ediyoruz')

@section('content')
<main class="relative overflow-x-hidden pt-20">

    <!-- HERO SECTION -->
    <section class="relative min-h-[90vh] flex items-center justify-center py-20 px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-[#030712] transition-colors duration-300">
        <!-- Interactive Canvas Background -->
        <canvas id="hero-canvas" class="absolute inset-0 w-full h-full pointer-events-auto z-10 opacity-70"></canvas>
        
        <!-- Subtle Glow Overlays -->
        <div class="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-brand-blue/10 dark:bg-brand-blue/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
        <div class="absolute bottom-10 right-10 w-[300px] h-[300px] bg-brand-cyan/15 dark:bg-brand-cyan/5 rounded-full blur-[100px] pointer-events-none z-0"></div>

        <div class="relative z-20 mx-auto max-w-7xl w-full grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
            
            <!-- Left Text Content -->
            <div class="lg:col-span-7 flex flex-col items-start text-left">
                <!-- Eyebrow tag -->
                <span class="hero-fade-in inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-brand-blue/10 dark:bg-brand-blue/20 text-brand-blue dark:text-brand-cyan mb-6">
                    <span class="w-1.5 h-1.5 rounded-full bg-brand-cyan animate-pulse"></span>
                    Dijital Dönüşümün Yeni Merkezi
                </span>
                
                <!-- Main Heading -->
                <h1 class="hero-fade-in font-display font-extrabold text-4xl sm:text-5xl lg:text-6xl tracking-tight text-brand-dark dark:text-white leading-[1.1] mb-6">
                    Türkiye'nin Dijital <br>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-blue via-brand-cyan to-brand-purple">Geleceğini İnşa Ediyoruz</span>
                </h1>
                
                <!-- Subtitle Description -->
                <p class="hero-fade-in text-base sm:text-lg text-slate-600 dark:text-slate-400 font-medium leading-relaxed max-w-xl mb-10">
                    İşletmeler, şehirler ve kurumlar için geliştirdiğimiz yenilikçi yazılımlar ile veriyi bilgiye, bilgiyi değere dönüştürüyoruz. ERP'den şehir teknolojilerine kadar geleceği tasarlıyoruz.
                </p>
                
                <!-- Call-to-action buttons -->
                <div class="hero-fade-in flex flex-wrap gap-4 items-center w-full sm:w-auto">
                    <a href="#urunler" class="w-full sm:w-auto text-center bg-brand-blue hover:bg-brand-blue/90 text-white font-semibold px-8 py-4 rounded-xl shadow-lg shadow-brand-blue/15 hover:shadow-brand-blue/25 hover:-translate-y-0.5 transition-all">
                        Ürünleri Keşfet
                    </a>
                    <button type="button" data-demo-open class="w-full sm:w-auto text-center bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-200 border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/80 font-semibold px-8 py-4 rounded-xl hover:-translate-y-0.5 transition-all">
                        Canlı Demo İzle
                    </button>
                </div>
            </div>

            <!-- Right interactive 3D Operasyon Paneli -->
            <div class="lg:col-span-5 flex justify-center hero-3d-container cursor-pointer perspective-1000 z-30">
                <div class="hero-3d-card transform-style-3d relative w-full max-w-[440px] aspect-[4/5] rounded-[32px] p-6 glass-effect shadow-2xl border border-white/40 dark:border-slate-800/60 overflow-hidden flex flex-col justify-between">
                    
                    <!-- Top Window bar -->
                    <div class="flex items-center justify-between border-b border-slate-200/40 dark:border-slate-800/50 pb-4">
                        <div class="flex items-center gap-1.5">
                            <span class="w-3 h-3 rounded-full bg-rose-500/80"></span>
                            <span class="w-3 h-3 rounded-full bg-amber-500/80"></span>
                            <span class="w-3 h-3 rounded-full bg-emerald-500/80"></span>
                        </div>
                        <span class="text-[11px] font-mono tracking-wider text-slate-500 dark:text-slate-400">OPERASYON MERKEZI v2.5</span>
                    </div>

                    <!-- Inner metrics display -->
                    <div class="space-y-4 my-6 transform-style-3d">
                        <!-- Stat Box 1 (Floating element) -->
                        <div class="bg-white/90 dark:bg-slate-950/80 rounded-2xl p-4 shadow-md border border-slate-100 dark:border-slate-900/50 transform translate-z-[40px] animate-float">
                            <span class="text-slate-500 dark:text-slate-400 text-xs font-semibold block mb-1">Veri Akışı / Saniye</span>
                            <div class="flex items-baseline gap-2">
                                <span class="font-display font-extrabold text-2xl text-brand-blue dark:text-brand-cyan">1,248</span>
                                <span class="text-[10px] font-bold text-emerald-500 dark:text-emerald-400 font-mono">+12.4%</span>
                            </div>
                        </div>

                        <!-- Stat Box 2 -->
                        <div class="bg-white/90 dark:bg-slate-950/80 rounded-2xl p-4 shadow-md border border-slate-100 dark:border-slate-900/50 transform translate-z-[20px] animate-float-delayed">
                            <span class="text-slate-500 dark:text-slate-400 text-xs font-semibold block mb-2">Entegre Şehir Ağları</span>
                            <div class="flex items-center gap-3">
                                <div class="flex -space-x-2">
                                    <span class="w-7 h-7 rounded-full bg-brand-blue flex items-center justify-center text-[10px] text-white font-bold border border-white dark:border-slate-950">A</span>
                                    <span class="w-7 h-7 rounded-full bg-brand-cyan flex items-center justify-center text-[10px] text-white font-bold border border-white dark:border-slate-950">B</span>
                                    <span class="w-7 h-7 rounded-full bg-brand-purple flex items-center justify-center text-[10px] text-white font-bold border border-white dark:border-slate-950">C</span>
                                </div>
                                <span class="text-xs font-bold text-slate-700 dark:text-slate-300">12 Aktif Merkez</span>
                            </div>
                        </div>

                        <!-- Stat Box 3 (Graphic) -->
                        <div class="bg-white/90 dark:bg-slate-950/80 rounded-2xl p-4 shadow-md border border-slate-100 dark:border-slate-900/50 transform translate-z-[60px] animate-float-slow">
                            <div class="flex justify-between items-center mb-3">
                                <span class="text-slate-500 dark:text-slate-400 text-xs font-semibold">Performans Endeksi</span>
                                <span class="text-xs font-bold text-slate-800 dark:text-white font-mono">99.8%</span>
                            </div>
                            <div class="w-full bg-slate-100 dark:bg-slate-900 h-2.5 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-brand-blue via-brand-cyan to-brand-purple w-[94.5%] rounded-full"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Bottom Branding details -->
                    <div class="border-t border-slate-200/40 dark:border-slate-800/50 pt-4 flex items-center justify-between text-xs text-slate-400">
                        <span>Lika LIKA-SYSTEM v3.0</span>
                        <div class="flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping"></span>
                            <span class="font-semibold text-slate-600 dark:text-slate-300">BULUT AKTIF</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- PRODUCTS SECTION -->
    <section id="urunler" class="py-24 px-4 sm:px-6 lg:px-8 bg-white dark:bg-dark-bg scroll-mt-20">
        <div class="mx-auto max-w-7xl">
            <!-- Section Title -->
            <div class="text-center max-w-3xl mx-auto mb-12 scroll-reveal">
                <span class="text-xs font-bold uppercase tracking-widest text-brand-blue dark:text-brand-cyan mb-3 block">Ürünlerimiz</span>
                <h2 class="font-display font-bold text-3xl sm:text-4xl text-brand-dark dark:text-white tracking-tight">
                    Profesyonel Çözüm Ekosistemi
                </h2>
                <p class="text-slate-600 dark:text-slate-400 mt-4 leading-relaxed">
                    İşletmelerin büyümesi ve şehirlerin dijitalleşmesi için tasarlanmış, entegre ve yüksek performanslı ürün ailemiz.
                </p>
            </div>

            <!-- Products Grid (5 Cards) -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 scroll-reveal-grid">
                @php
                    $aktifUrunler = \App\Models\Urun::with('kapakMedya')->where('durum', 'aktif')->orderBy('sira')->get();
                @endphp
                @foreach ($aktifUrunler as $urun)
                    @php
                        $slug = $urun->slug;
                        
                        $gridClass = '';
                        if ($loop->index === 0) {
                            $gridClass = 'lg:col-span-2 md:col-span-1';
                        } elseif ($loop->index === 1) {
                            $gridClass = 'lg:col-span-1 md:col-span-1';
                        } elseif ($loop->index === 2) {
                            $gridClass = 'lg:col-span-1 md:col-span-1';
                        } elseif ($loop->index === 3) {
                            $gridClass = 'lg:col-span-2 md:col-span-1';
                        } else {
                            $gridClass = 'lg:col-span-1 md:col-span-1';
                        }
                        
                        $gradientFrom = 'from-brand-blue/5';
                        $iconBgText = 'bg-brand-blue/10 text-brand-blue';
                        if ($slug === 'firsat-haritasi' || $slug === 'sehir-atlasi' || $slug === 'firsat') {
                            $gradientFrom = 'from-brand-cyan/5';
                            $iconBgText = 'bg-brand-cyan/10 text-brand-cyan';
                        } elseif ($slug === 'sehir-hafizasi') {
                            $gradientFrom = 'from-brand-purple/5';
                            $iconBgText = 'bg-brand-purple/10 text-brand-purple';
                        }
                        
                        $tags = array_filter(array_map('trim', explode(',', $urun->etiketler ?? '')));
                        $isWide = ($loop->index === 0 || $loop->index === 3);
                        
                        $colorPrimary = 'brand-blue';
                        $colorSecondary = 'brand-purple';
                        $colorTertiary = 'brand-cyan';
                    @endphp
                    
                    <div class="{{ $gridClass }}">
                        <article id="{{ $slug === 'firsat-haritasi' ? 'firsat' : $slug }}" class="group relative rounded-3xl p-8 bg-slate-50 dark:bg-dark-surface border border-slate-100 dark:border-slate-800/80 hover:-translate-y-2 hover:shadow-2xl transition-[transform,box-shadow] duration-300 flex {{ $isWide ? 'flex-col lg:flex-row gap-6 lg:gap-8 justify-between lg:items-stretch' : 'flex-col justify-between' }} overflow-hidden h-full">
                            <div class="absolute inset-0 bg-gradient-to-br {{ $gradientFrom }} to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                            
                            @if($isWide)
                                <!-- Left side: Text Details & Actions -->
                                <div class="flex-1 flex flex-col justify-between z-10 relative">
                                    <div>
                                        <!-- Icon -->
                                        <div class="w-12 h-12 rounded-2xl {{ $iconBgText }} flex items-center justify-center mb-8">
                                            @if($urun->ikon)
                                                {!! $urun->ikon !!}
                                            @else
                                                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
                                            @endif
                                        </div>
                                        <h3 class="font-display font-bold text-xl text-brand-dark dark:text-white mb-3">{{ $urun->ad }}</h3>
                                        <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6">
                                            {{ $urun->kisa_aciklama }}
                                        </p>
                                        <!-- Badge lists -->
                                        @if(count($tags) > 0)
                                            <div class="flex flex-wrap gap-2 mb-8">
                                                @foreach($tags as $tag)
                                                    @php
                                                        $tagClass = "bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800";
                                                        if ($tag === '360° Dijital Tur') {
                                                            $tagClass = "bg-brand-cyan/10 border border-brand-cyan/20 text-brand-cyan";
                                                        }
                                                    @endphp
                                                    <span class="text-[11px] font-semibold {{ $tagClass }} px-2.5 py-1 rounded-lg">{{ $tag }}</span>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                    
                                    <!-- Button Actions -->
                                    <div class="mt-auto">
                                        @if ($urun->hedef_link)
                                            <a href="{{ url($urun->hedef_link) }}" {{ str_starts_with($urun->hedef_link, 'http') ? 'target="_blank" rel="noopener noreferrer"' : '' }} class="flex items-center gap-2 text-sm font-bold text-brand-blue dark:text-brand-cyan group-hover:translate-x-1 transition-transform">
                                                Ürünü İncele
                                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
                                            </a>
                                        @elseif ($slug === 'firsat-haritasi' || $slug === 'firsat')
                                            <a href="{{ url('/uye-ol') }}" class="flex items-center gap-2 text-sm font-bold text-brand-blue dark:text-brand-cyan group-hover:translate-x-1 transition-transform">
                                                Ürünü İncele
                                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
                                            </a>
                                        @else
                                            <div class="flex flex-wrap items-center gap-3 mt-6">
                                                @if ($urun->demo_istenebilir)
                                                    <button type="button" data-demo-open="{{ $slug }}" class="flex items-center gap-1.5 text-xs font-bold bg-brand-blue/10 hover:bg-brand-blue/20 text-brand-blue dark:text-brand-cyan dark:bg-brand-cyan/10 dark:hover:bg-brand-cyan/20 px-3 py-1.5 rounded-xl transition-all cursor-pointer">
                                                        Demo İste
                                                    </button>
                                                @endif
                                                @if ($urun->teklif_istenebilir)
                                                    <button type="button" data-teklif-open="{{ $slug }}" class="flex items-center gap-1.5 text-xs font-bold bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 px-3 py-1.5 rounded-xl transition-all cursor-pointer">
                                                        Teklif Al
                                                    </button>
                                                @endif
                                                @if ($slug === 'sehir-atlasi')
                                                    <button type="button" data-tour-open class="flex items-center gap-1.5 text-xs font-bold bg-brand-cyan/10 hover:bg-brand-cyan/20 text-brand-cyan px-3 py-1.5 rounded-xl transition-colors cursor-pointer">
                                                        <span class="w-1.5 h-1.5 rounded-full bg-brand-cyan animate-pulse"></span>
                                                        360° Dijital Tur
                                                    </button>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                
                                <!-- Right side: Graphic (Image or Fallback SVG) -->
                                <div class="w-full lg:w-[45%] flex items-center justify-center z-10 relative mt-6 lg:mt-0 max-h-60 lg:max-h-none overflow-hidden rounded-2xl">
                                    @if($urun->kapakMedya)
                                        <img src="{{ $urun->kapakMedya->url() }}" alt="{{ $urun->ad }}" class="w-full h-full object-cover rounded-2xl shadow-lg border border-slate-200/50 dark:border-slate-800/60 group-hover:scale-105 transition-transform duration-500">
                                    @else
                                        <!-- Fallback Graphic -->
                                        @if($slug === 'likaone')
                                            <!-- SVG for LikaONE ERP Dashboard -->
                                            <svg viewBox="0 0 500 320" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto select-none drop-shadow-2xl">
                                                <rect x="10" y="10" width="480" height="300" rx="16" class="fill-slate-900/10 dark:fill-slate-950/60 stroke-slate-200/60 dark:stroke-slate-800/60" stroke-width="2"/>
                                                <circle cx="36" cy="30" r="6" class="fill-red-500/80"/>
                                                <circle cx="56" cy="30" r="6" class="fill-amber-500/80"/>
                                                <circle cx="76" cy="30" r="6" class="fill-green-500/80"/>
                                                <rect x="25" y="55" width="90" height="240" rx="8" class="fill-slate-700/5 dark:fill-slate-900/30"/>
                                                <rect x="35" y="70" width="70" height="12" rx="4" class="fill-{{ $colorPrimary }}/20 dark:fill-{{ $colorTertiary }}/20"/>
                                                <rect x="35" y="95" width="70" height="10" rx="3" class="fill-slate-400/20"/>
                                                <rect x="35" y="115" width="70" height="10" rx="3" class="fill-slate-400/20"/>
                                                <rect x="35" y="135" width="70" height="10" rx="3" class="fill-slate-400/20"/>
                                                <rect x="35" y="155" width="70" height="10" rx="3" class="fill-slate-400/20"/>
                                                <rect x="130" y="55" width="100" height="60" rx="10" class="fill-slate-700/5 dark:fill-slate-900/20 stroke-slate-200/20 dark:stroke-slate-800/40" stroke-width="1"/>
                                                <rect x="142" y="68" width="50" height="8" rx="2" class="fill-slate-400/40"/>
                                                <rect x="142" y="82" width="76" height="16" rx="4" class="fill-{{ $colorPrimary }}/20 dark:fill-{{ $colorPrimary }}/40"/>
                                                <circle cx="205" cy="85" r="10" class="fill-{{ $colorPrimary }}/10 stroke-{{ $colorPrimary }}/30" stroke-width="1"/>
                                                <rect x="245" y="55" width="100" height="60" rx="10" class="fill-slate-700/5 dark:fill-slate-900/20 stroke-slate-200/20 dark:stroke-slate-800/40" stroke-width="1"/>
                                                <rect x="257" y="68" width="50" height="8" rx="2" class="fill-slate-400/40"/>
                                                <rect x="257" y="82" width="76" height="16" rx="4" class="fill-{{ $colorSecondary }}/20 dark:fill-{{ $colorSecondary }}/40"/>
                                                <rect x="360" y="55" width="115" height="60" rx="10" class="fill-slate-700/5 dark:fill-slate-900/20 stroke-slate-200/20 dark:stroke-slate-800/40" stroke-width="1"/>
                                                <rect x="372" y="68" width="50" height="8" rx="2" class="fill-slate-400/40"/>
                                                <rect x="372" y="82" width="90" height="16" rx="4" class="fill-{{ $colorTertiary }}/20 dark:fill-{{ $colorTertiary }}/40"/>
                                                <rect x="130" y="130" width="215" height="165" rx="12" class="fill-slate-700/5 dark:fill-slate-900/20 stroke-slate-200/20 dark:stroke-slate-800/40" stroke-width="1"/>
                                                <rect x="145" y="145" width="80" height="10" rx="3" class="fill-slate-400/40"/>
                                                <line x1="145" y1="180" x2="320" y2="180" class="stroke-slate-200/20 dark:stroke-slate-800/60" stroke-dasharray="3 3"/>
                                                <line x1="145" y1="215" x2="320" y2="215" class="stroke-slate-200/20 dark:stroke-slate-800/60" stroke-dasharray="3 3"/>
                                                <line x1="145" y1="250" x2="320" y2="250" class="stroke-slate-200/20 dark:stroke-slate-800/60" stroke-dasharray="3 3"/>
                                                <path d="M 145,240 Q 180,190 215,220 T 285,160 T 320,185" fill="none" class="stroke-{{ $colorPrimary }}" stroke-width="3" stroke-linecap="round"/>
                                                <path d="M 145,255 Q 180,210 215,235 T 285,190 T 320,205" fill="none" class="stroke-{{ $colorTertiary }}/60" stroke-width="2" stroke-linecap="round"/>
                                                <circle cx="285" cy="160" r="4" class="fill-{{ $colorPrimary }}"/>
                                                <circle cx="285" cy="160" r="8" class="stroke-{{ $colorPrimary }}/30 fill-none" stroke-width="2"/>
                                                <rect x="360" y="130" width="115" height="165" rx="12" class="fill-slate-700/5 dark:fill-slate-900/20 stroke-slate-200/20 dark:stroke-slate-800/40" stroke-width="1"/>
                                                <circle cx="417" cy="200" r="40" class="stroke-slate-200/10 dark:stroke-slate-800/50 fill-none" stroke-width="10"/>
                                                <circle cx="417" cy="200" r="40" class="stroke-{{ $colorTertiary }} fill-none" stroke-width="10" stroke-dasharray="251" stroke-dashoffset="80" stroke-linecap="round" transform="rotate(-90 417 200)"/>
                                                <circle cx="417" cy="200" r="40" class="stroke-{{ $colorSecondary }} fill-none" stroke-width="10" stroke-dasharray="251" stroke-dashoffset="200" stroke-linecap="round" transform="rotate(45 417 200)"/>
                                                <text x="417" y="205" text-anchor="middle" class="fill-slate-800 dark:fill-white font-semibold text-xs font-sans">82%</text>
                                                <rect x="380" y="260" width="74" height="10" rx="3" class="fill-slate-400/30"/>
                                            </svg>
                                        @elseif($slug === 'ekulliye')
                                            <!-- SVG for eKülliye Education Portal -->
                                            <svg viewBox="0 0 500 320" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto select-none drop-shadow-2xl">
                                                <rect x="10" y="10" width="480" height="300" rx="16" class="fill-slate-900/10 dark:fill-slate-950/60 stroke-slate-200/60 dark:stroke-slate-800/60" stroke-width="2"/>
                                                <circle cx="36" cy="30" r="6" class="fill-red-500/80"/>
                                                <circle cx="56" cy="30" r="6" class="fill-amber-500/80"/>
                                                <circle cx="76" cy="30" r="6" class="fill-green-500/80"/>
                                                <rect x="25" y="55" width="450" height="50" rx="10" class="fill-{{ $colorSecondary }}/10 dark:fill-{{ $colorSecondary }}/20 stroke-{{ $colorSecondary }}/20 dark:stroke-{{ $colorSecondary }}/30" stroke-width="1"/>
                                                <circle cx="55" cy="80" r="16" class="fill-{{ $colorSecondary }}/20"/>
                                                <path d="M55 72 L63 76 L55 80 L47 76 Z" class="fill-{{ $colorSecondary }}"/>
                                                <path d="M51 78.5 L51 83 Q55 86 59 83 L59 78.5" class="fill-{{ $colorSecondary }}"/>
                                                <rect x="85" y="70" width="120" height="10" rx="3" class="fill-slate-400/40"/>
                                                <rect x="85" y="85" width="220" height="6" rx="2" class="fill-slate-400/20"/>
                                                <rect x="25" y="120" width="215" height="175" rx="12" class="fill-slate-700/5 dark:fill-slate-900/20 stroke-slate-200/20 dark:stroke-slate-800/40" stroke-width="1"/>
                                                <rect x="40" y="135" width="80" height="10" rx="3" class="fill-slate-400/40"/>
                                                <rect x="40" y="160" width="30" height="30" rx="6" class="fill-{{ $colorSecondary }}/25 dark:fill-{{ $colorSecondary }}/40"/>
                                                <rect x="45" y="166" width="20" height="4" rx="1" class="fill-white/80"/>
                                                <rect x="80" y="160" width="30" height="30" rx="6" class="fill-slate-700/10 dark:fill-slate-800/50"/>
                                                <rect x="120" y="160" width="30" height="30" rx="6" class="fill-slate-700/10 dark:fill-slate-800/50"/>
                                                <rect x="160" y="160" width="30" height="30" rx="6" class="fill-slate-700/10 dark:fill-slate-800/50"/>
                                                <rect x="200" y="160" width="30" height="30" rx="6" class="fill-slate-700/10 dark:fill-slate-800/50"/>
                                                <rect x="40" y="205" width="190" height="1" class="fill-slate-200/20 dark:fill-slate-800/60"/>
                                                <rect x="40" y="220" width="190" height="24" rx="6" class="fill-slate-700/5 dark:fill-slate-800/30"/>
                                                <circle cx="55" cy="232" r="5" class="fill-{{ $colorSecondary }}"/>
                                                <rect x="70" y="227" width="100" height="8" rx="2" class="fill-slate-400/40"/>
                                                <rect x="40" y="255" width="190" height="24" rx="6" class="fill-slate-700/5 dark:fill-slate-800/30"/>
                                                <circle cx="55" cy="267" r="5" class="fill-{{ $colorTertiary }}"/>
                                                <rect x="70" y="262" width="120" height="8" rx="2" class="fill-slate-400/40"/>
                                                <rect x="260" y="120" width="215" height="175" rx="12" class="fill-slate-700/5 dark:fill-slate-900/20 stroke-slate-200/20 dark:stroke-slate-800/40" stroke-width="1"/>
                                                <rect x="275" y="135" width="100" height="10" rx="3" class="fill-slate-400/40"/>
                                                <rect x="285" y="170" width="16" height="80" rx="4" class="fill-slate-700/10 dark:fill-slate-800/50"/>
                                                <rect x="285" y="210" width="16" height="40" rx="4" class="fill-{{ $colorSecondary }}/70"/>
                                                <rect x="320" y="170" width="16" height="80" rx="4" class="fill-slate-700/10 dark:fill-slate-800/50"/>
                                                <rect x="320" y="190" width="16" height="60" rx="4" class="fill-{{ $colorTertiary }}/70"/>
                                                <rect x="355" y="170" width="16" height="80" rx="4" class="fill-slate-700/10 dark:fill-slate-800/50"/>
                                                <rect x="355" y="180" width="16" height="70" rx="4" class="fill-{{ $colorSecondary }}/70"/>
                                                <rect x="390" y="170" width="16" height="80" rx="4" class="fill-slate-700/10 dark:fill-slate-800/50"/>
                                                <rect x="390" y="225" width="16" height="55" rx="4" class="fill-{{ $colorTertiary }}/70"/>
                                                <rect x="425" y="170" width="16" height="80" rx="4" class="fill-slate-700/10 dark:fill-slate-800/50"/>
                                                <rect x="425" y="200" width="16" height="50" rx="4" class="fill-{{ $colorSecondary }}/70"/>
                                            </svg>
                                        @else
                                            <!-- General Map / City Navigation illustration fallback (for Şehir Gezgini or others) -->
                                            <svg viewBox="0 0 500 320" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto select-none drop-shadow-2xl">
                                                <rect x="10" y="10" width="480" height="300" rx="16" class="fill-slate-900/10 dark:fill-slate-950/60 stroke-slate-200/60 dark:stroke-slate-800/60" stroke-width="2"/>
                                                <circle cx="36" cy="30" r="6" class="fill-red-500/80"/>
                                                <circle cx="56" cy="30" r="6" class="fill-amber-500/80"/>
                                                <circle cx="76" cy="30" r="6" class="fill-green-500/80"/>
                                                <rect x="25" y="55" width="450" height="240" rx="12" class="fill-slate-700/5 dark:fill-slate-900/20 stroke-slate-200/20 dark:stroke-slate-800/40" stroke-width="1"/>
                                                <path d="M 25,120 L 475,120 M 25,190 L 475,190 M 130,55 L 130,295 M 290,55 L 290,295" class="stroke-slate-200/10 dark:stroke-slate-800/40" stroke-width="1.5"/>
                                                <path d="M 25,55 L 475,295 M 475,55 L 25,295" class="stroke-slate-200/5 dark:stroke-slate-800/20" stroke-width="1" stroke-dasharray="4 4"/>
                                                <path d="M 60,80 Q 150,150 200,100 T 350,220 T 430,140" fill="none" class="stroke-{{ $colorTertiary }}/60" stroke-width="4" stroke-linecap="round" stroke-dasharray="6 6"/>
                                                <path d="M 60,80 Q 150,150 200,100 T 350,220 T 430,140" fill="none" class="stroke-{{ $colorTertiary }}" stroke-width="4" stroke-linecap="round"/>
                                                <circle cx="60" cy="80" r="8" class="fill-{{ $colorSecondary }}"/>
                                                <circle cx="60" cy="80" r="14" class="stroke-{{ $colorSecondary }}/30 fill-none" stroke-width="2"/>
                                                <circle cx="200" cy="100" r="8" class="fill-{{ $colorPrimary }}"/>
                                                <circle cx="200" cy="100" r="14" class="stroke-{{ $colorPrimary }}/30 fill-none" stroke-width="2"/>
                                                <circle cx="350" cy="220" r="8" class="fill-{{ $colorSecondary }}"/>
                                                <circle cx="350" cy="220" r="14" class="stroke-{{ $colorSecondary }}/30 fill-none" stroke-width="2"/>
                                                <circle cx="430" cy="140" r="8" class="fill-{{ $colorTertiary }}"/>
                                                <circle cx="430" cy="140" r="14" class="stroke-{{ $colorTertiary }}/30 fill-none" stroke-width="2"/>
                                                <rect x="270" y="70" width="170" height="50" rx="8" class="fill-slate-900/90 stroke-slate-700/50" stroke-width="1"/>
                                                <circle cx="295" cy="95" r="12" class="fill-{{ $colorTertiary }}/20 flex items-center justify-center"/>
                                                <path d="M295 91 L299 95 L295 99 L291 95 Z" class="fill-{{ $colorTertiary }}"/>
                                                <rect x="315" y="85" width="100" height="8" rx="2" class="fill-white"/>
                                                <rect x="315" y="98" width="70" height="6" rx="1.5" class="fill-slate-400"/>
                                            </svg>
                                        @endif
                                    @endif
                                </div>
                            @else
                                <!-- Standard Single Card -->
                                <div>
                                    <!-- Icon -->
                                    <div class="w-12 h-12 rounded-2xl {{ $iconBgText }} flex items-center justify-center mb-8">
                                        @if($urun->ikon)
                                            {!! $urun->ikon !!}
                                        @else
                                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
                                        @endif
                                    </div>
                                    <h3 class="font-display font-bold text-xl text-brand-dark dark:text-white mb-3">{{ $urun->ad }}</h3>
                                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6">
                                        {{ $urun->kisa_aciklama }}
                                    </p>
                                    <!-- Badge lists -->
                                    @if(count($tags) > 0)
                                        <div class="flex flex-wrap gap-2 mb-8">
                                            @foreach($tags as $tag)
                                                @php
                                                    $tagClass = "bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800";
                                                    if ($tag === '360° Dijital Tur') {
                                                        $tagClass = "bg-brand-cyan/10 border border-brand-cyan/20 text-brand-cyan";
                                                    }
                                                @endphp
                                                <span class="text-[11px] font-semibold {{ $tagClass }} px-2.5 py-1 rounded-lg">{{ $tag }}</span>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                                
                                <!-- Button Actions -->
                                @if ($urun->hedef_link)
                                    <a href="{{ url($urun->hedef_link) }}" {{ str_starts_with($urun->hedef_link, 'http') ? 'target="_blank" rel="noopener noreferrer"' : '' }} class="flex items-center gap-2 text-sm font-bold text-brand-blue dark:text-brand-cyan group-hover:translate-x-1 transition-transform">
                                        Ürünü İncele
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
                                    </a>
                                @elseif ($slug === 'firsat-haritasi' || $slug === 'firsat')
                                    <a href="{{ url('/uye-ol') }}" class="flex items-center gap-2 text-sm font-bold text-brand-blue dark:text-brand-cyan group-hover:translate-x-1 transition-transform">
                                        Ürünü İncele
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
                                    </a>
                                @else
                                    <div class="flex flex-wrap items-center gap-3 mt-6">
                                        @if ($urun->demo_istenebilir)
                                            <button type="button" data-demo-open="{{ $slug }}" class="flex items-center gap-1.5 text-xs font-bold bg-brand-blue/10 hover:bg-brand-blue/20 text-brand-blue dark:text-brand-cyan dark:bg-brand-cyan/10 dark:hover:bg-brand-cyan/20 px-3 py-1.5 rounded-xl transition-all cursor-pointer">
                                                Demo İste
                                            </button>
                                        @endif
                                        @if ($urun->teklif_istenebilir)
                                            <button type="button" data-teklif-open="{{ $slug }}" class="flex items-center gap-1.5 text-xs font-bold bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 px-3 py-1.5 rounded-xl transition-all cursor-pointer">
                                                Teklif Al
                                            </button>
                                        @endif
                                        @if ($slug === 'sehir-atlasi')
                                            <button type="button" data-tour-open class="flex items-center gap-1.5 text-xs font-bold bg-brand-cyan/10 hover:bg-brand-cyan/20 text-brand-cyan px-3 py-1.5 rounded-xl transition-colors cursor-pointer">
                                                <span class="w-1.5 h-1.5 rounded-full bg-brand-cyan animate-pulse"></span>
                                                360° Dijital Tur
                                            </button>
                                        @endif
                                    </div>
                                @endif
                            @endif
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- INTERACTIVE ECOSYSTEM SECTION -->
    <section id="ekosistem" class="py-24 px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-[#060913] transition-colors duration-300 overflow-hidden">
        <div class="mx-auto max-w-7xl">
            <div class="text-center max-w-2xl mx-auto mb-16 scroll-reveal">
                <span class="text-xs font-bold uppercase tracking-widest text-brand-cyan mb-3 block">Bütünsel Yapı</span>
                <h2 class="font-display font-bold text-3xl sm:text-4xl text-brand-dark dark:text-white tracking-tight">Etkileşimli Ürün Ekosistemi</h2>
                <p class="text-slate-600 dark:text-slate-400 mt-4 text-sm leading-relaxed">
                    Lika Yazılım ürünleri bağımsız çalışabildiği gibi birbirleriyle kesintisiz entegre olabilir. Farenizi kartların üzerine getirerek entegrasyon kanallarını keşfedin.
                </p>
            </div>

            <!-- Ecosystem Visualizer Area -->
            <div id="ikaweb-ecosystem" class="relative max-w-4xl mx-auto flex flex-col md:block h-[420px] md:h-[500px] items-center justify-between gap-6">
                <!-- SVG Connections (Desktop only) -->
                <svg class="absolute inset-0 w-full h-full hidden md:block z-0 pointer-events-none" viewBox="0 0 800 500" fill="none">
                    <!-- Path connections from outer nodes to center node (400, 250) -->
                    <!-- LikaONE connection -->
                    <path d="M 160, 100 Q 300, 150 400, 250" class="stroke-slate-200 dark:stroke-slate-800 transition-all duration-300" stroke-width="1.5" data-connection-path="likaone" />
                    <!-- Fırsat Haritası connection -->
                    <path d="M 640, 100 Q 500, 150 400, 250" class="stroke-slate-200 dark:stroke-slate-800 transition-all duration-300" stroke-width="1.5" data-connection-path="firsat" />
                    <!-- Şehir Hafızası connection -->
                    <path d="M 120, 380 Q 250, 320 400, 250" class="stroke-slate-200 dark:stroke-slate-800 transition-all duration-300" stroke-width="1.5" data-connection-path="hafiza" />
                    <!-- eKülliye connection -->
                    <path d="M 680, 380 Q 550, 320 400, 250" class="stroke-slate-200 dark:stroke-slate-800 transition-all duration-300" stroke-width="1.5" data-connection-path="kulliye" />
                    <!-- Şehir Atlası connection -->
                    <path d="M 400, 100 L 400, 250" class="stroke-slate-200 dark:stroke-slate-800 transition-all duration-300" stroke-width="1.5" data-connection-path="atlas" />
                    
                    <!-- Glowing animated overlay streams -->
                    <path d="M 160, 100 Q 300, 150 400, 250" class="stroke-brand-blue/30 glowing-path" stroke-width="2" />
                    <path d="M 640, 100 Q 500, 150 400, 250" class="stroke-brand-cyan/30 glowing-path-reverse" stroke-width="2" />
                    <path d="M 120, 380 Q 250, 320 400, 250" class="stroke-brand-purple/30 glowing-path" stroke-width="2" />
                    <path d="M 680, 380 Q 550, 320 400, 250" class="stroke-brand-blue/30 glowing-path-reverse" stroke-width="2" />
                    <path d="M 400, 100 L 400, 250" class="stroke-brand-cyan/30 glowing-path" stroke-width="2" />
                </svg>

                <!-- Center Node (Lika Logo) -->
                <div class="relative md:absolute md:top-[205px] md:left-[355px] w-24 h-24 rounded-3xl bg-gradient-to-tr from-brand-blue via-brand-cyan to-brand-purple p-0.5 shadow-xl shadow-brand-blue/20 z-20 flex items-center justify-center animate-float">
                    <div class="w-full h-full rounded-[22px] bg-slate-900 flex items-center justify-center font-display font-black text-4xl text-white">L</div>
                </div>

                <!-- Outer Node Cards -->
                <!-- Node 1: LikaONE (Top Left) -->
                <div data-product-node="likaone" class="relative md:absolute md:top-[40px] md:left-[60px] w-48 py-3.5 px-4 rounded-2xl glass-effect border border-slate-200/50 dark:border-slate-800/40 text-center font-semibold text-sm cursor-pointer shadow-md select-none z-10 transition-all">
                    LikaONE (ERP)
                </div>

                <!-- Node 2: Fırsat Haritası (Top Right) -->
                <div data-product-node="firsat" class="relative md:absolute md:top-[40px] md:right-[60px] w-48 py-3.5 px-4 rounded-2xl glass-effect border border-slate-200/50 dark:border-slate-800/40 text-center font-semibold text-sm cursor-pointer shadow-md select-none z-10 transition-all">
                    Fırsat Haritası
                </div>

                <!-- Node 3: Şehir Atlası (Top Center) -->
                <div data-product-node="atlas" class="relative md:absolute md:top-[20px] md:left-[306px] w-48 py-3.5 px-4 rounded-2xl glass-effect border border-slate-200/50 dark:border-slate-800/40 text-center font-semibold text-sm cursor-pointer shadow-md select-none z-10 transition-all">
                    Şehir Atlası
                </div>

                <!-- Node 4: Şehir Hafızası (Bottom Left) -->
                <div data-product-node="hafiza" class="relative md:absolute md:bottom-[40px] md:left-[40px] w-48 py-3.5 px-4 rounded-2xl glass-effect border border-slate-200/50 dark:border-slate-800/40 text-center font-semibold text-sm cursor-pointer shadow-md select-none z-10 transition-all">
                    Şehir Hafızası
                </div>

                <!-- Node 5: eKülliye (Bottom Right) -->
                <div data-product-node="kulliye" class="relative md:absolute md:bottom-[40px] md:right-[40px] w-48 py-3.5 px-4 rounded-2xl glass-effect border border-slate-200/50 dark:border-slate-800/40 text-center font-semibold text-sm cursor-pointer shadow-md select-none z-10 transition-all">
                    eKülliye (Eğitim)
                </div>
            </div>
        </div>
    </section>

    <!-- WHY LIKA SECTION (Bento Grid) -->
    <section id="neden-lika" class="py-24 px-4 sm:px-6 lg:px-8 bg-white dark:bg-dark-bg scroll-mt-20">
        <div class="mx-auto max-w-7xl">
            <div class="text-center max-w-2xl mx-auto mb-20 scroll-reveal">
                <span class="text-xs font-bold uppercase tracking-widest text-brand-purple mb-3 block">Farkımız</span>
                <h2 class="font-display font-bold text-3xl sm:text-4xl text-brand-dark dark:text-white tracking-tight">Neden Lika Yazılım?</h2>
                <p class="text-slate-600 dark:text-slate-400 mt-4 leading-relaxed">
                    Güvenli mimari, yerli know-how ve sürdürülebilir teknoloji üretimiyle dijitalleşme sürecinizi garanti altına alıyoruz.
                </p>
            </div>

            <!-- Bento Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 auto-rows-[220px] scroll-reveal-grid">
                
                <!-- Bento Card 1: Yerli Teknoloji (Col-span-2) -->
                <div class="md:col-span-2 bg-slate-50 dark:bg-dark-surface border border-slate-100 dark:border-slate-800 rounded-3xl p-8 flex flex-col justify-between group overflow-hidden relative">
                    <div class="absolute inset-0 bg-gradient-to-r from-brand-blue/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <div class="w-10 h-10 rounded-xl bg-brand-blue/10 flex items-center justify-center text-brand-blue mb-4">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 002 2h2m0 0l1.583-.792a2 2 0 001.07-1.788V5.118a2 2 0 00-.764-1.578L18 2.25" /></svg>
                    </div>
                    <div>
                        <h3 class="font-display font-bold text-lg dark:text-white mb-2">Yerli Teknoloji ve Mühendislik</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed max-w-xl">
                            Uluslararası standartlarda, kendi öz kaynaklarımızla geliştirdiğimiz %100 yerli yazılım altyapısı ve ülke ihtiyaçlarına tam uyum.
                        </p>
                    </div>
                </div>

                <!-- Bento Card 2: Modern Mimari -->
                <div class="bg-slate-50 dark:bg-dark-surface border border-slate-100 dark:border-slate-800 rounded-3xl p-8 flex flex-col justify-between group overflow-hidden relative">
                    <div class="absolute inset-0 bg-gradient-to-r from-brand-purple/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <div class="w-10 h-10 rounded-xl bg-brand-purple/10 flex items-center justify-center text-brand-purple mb-4">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4zM14 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2v-4z" /></svg>
                    </div>
                    <div>
                        <h3 class="font-display font-bold text-lg dark:text-white mb-2">Modern Modüler Mimari</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
                            Laravel ve modern JS teknolojileriyle, ölçeklenebilir ve temiz kod standartlarında yazılım çekirdeği.
                        </p>
                    </div>
                </div>

                <!-- Bento Card 3: Yüksek Güvenlik -->
                <div class="bg-slate-50 dark:bg-dark-surface border border-slate-100 dark:border-slate-800 rounded-3xl p-8 flex flex-col justify-between group overflow-hidden relative">
                    <div class="absolute inset-0 bg-gradient-to-r from-brand-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <div class="w-10 h-10 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-4">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
                    </div>
                    <div>
                        <h3 class="font-display font-bold text-lg dark:text-white mb-2">Yüksek Güvenlik & KVKK</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
                            Güvenlik duvarları, veri şifreleme ve KVKK yönergeleriyle tam uyumlu izole veritabanı altyapıları.
                        </p>
                    </div>
                </div>

                <!-- Bento Card 4: Sürekli Gelişim (Col-span-2) -->
                <div class="md:col-span-2 bg-slate-50 dark:bg-dark-surface border border-slate-100 dark:border-slate-800 rounded-3xl p-8 flex flex-col justify-between group overflow-hidden relative">
                    <div class="absolute inset-0 bg-gradient-to-r from-brand-blue/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <div class="w-10 h-10 rounded-xl bg-brand-blue/10 flex items-center justify-center text-brand-blue mb-4">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                    </div>
                    <div>
                        <h3 class="font-display font-bold text-lg dark:text-white mb-2">Sürekli Gelişim & Destek</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed max-w-xl">
                            Her ay yayınlanan güncellemeler, sürekli iyileştirmeler ve teknik sorularınıza anında yanıt veren profesyonel destek ekibimiz.
                        </p>
                    </div>
                </div>

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

    <!-- STATISTICS SECTION -->
    <section class="stats-trigger py-20 px-4 bg-brand-dark dark:bg-[#03050a] text-white transition-colors duration-300 relative overflow-hidden">
        <!-- Background light glows -->
        <div class="absolute top-1/2 left-1/4 -translate-y-1/2 w-96 h-96 bg-brand-blue/10 rounded-full blur-[100px] pointer-events-none"></div>
        
        <div class="relative z-10 mx-auto max-w-7xl grid grid-cols-2 lg:grid-cols-4 gap-12 text-center">
            
            <div class="flex flex-col items-center">
                <span class="font-display font-black text-5xl tracking-tight text-brand-cyan mb-2" data-count-to="5" data-suffix="+">0</span>
                <span class="text-xs uppercase tracking-widest text-slate-400 font-bold">Profesyonel Ürün</span>
            </div>

            <div class="flex flex-col items-center">
                <span class="font-display font-black text-5xl tracking-tight text-brand-purple mb-2" data-count-to="100" data-suffix="+">0</span>
                <span class="text-xs uppercase tracking-widest text-slate-400 font-bold">Yazılım Modülü</span>
            </div>

            <div class="flex flex-col items-center">
                <span class="font-display font-black text-5xl tracking-tight text-brand-cyan mb-2" data-count-to="1000" data-suffix="+">0</span>
                <span class="text-xs uppercase tracking-widest text-slate-400 font-bold">Aktif Kullanıcı</span>
            </div>

            <div class="flex flex-col items-center">
                <span class="font-display font-black text-5xl tracking-tight text-brand-purple mb-2" data-count-to="10" data-suffix="+">0</span>
                <span class="text-xs uppercase tracking-widest text-slate-400 font-bold">Farklı Sektör</span>
            </div>

        </div>
    </section>

    <!-- CINEMATIC SECTION (Cities & Organizations) -->
    <section class="relative py-32 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white overflow-hidden">
        <!-- City silhouette SVG overlay -->
        <div class="absolute bottom-0 left-0 right-0 h-48 opacity-25 pointer-events-none z-0">
            <svg class="w-full h-full" viewBox="0 0 1440 200" fill="none" preserveAspectRatio="none">
                <path d="M0,200 L120,200 L120,120 L180,120 L180,90 L240,90 L240,160 L320,160 L320,110 L380,110 L380,140 L440,140 L440,70 L520,70 L520,130 L600,130 L600,100 L660,100 L660,170 L740,170 L740,120 L800,120 L800,80 L880,80 L880,140 L960,140 L960,100 L1020,100 L1020,130 L1100,130 L1100,60 L1200,60 L1200,120 L1280,120 L1280,160 L1440,160 L1440,200 Z" fill="#2563EB" />
            </svg>
        </div>
        
        <!-- Glowing dynamic digital grids -->
        <div class="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none z-0"></div>

        <div class="relative z-10 mx-auto max-w-4xl text-center scroll-reveal">
            <span class="text-xs font-bold uppercase tracking-widest text-brand-cyan mb-4 block">Akıllı Şehirlerden İşletmelere</span>
            <h2 class="font-display font-extrabold text-3xl sm:text-5xl tracking-tight leading-tight mb-8">
                Şehirlerden İşletmelere, <br>
                Geleceği Birlikte Tasarlıyoruz
            </h2>
            <p class="text-slate-300 text-base sm:text-lg leading-relaxed max-w-2xl mx-auto mb-10">
                Coğrafi Bilgi Sistemleri (CBS), şehir atlası entegrasyonu ve dijital arşiv çözümleriyle modern kentsel yaşamı kolaylaştırıyor, işletmelerinize kurumsal zeka kazandırıyoruz.
            </p>
            <button type="button" data-demo-open class="bg-brand-cyan hover:bg-brand-cyan/90 text-slate-950 font-bold px-8 py-4 rounded-xl shadow-lg shadow-brand-cyan/20 hover:shadow-brand-cyan/40 hover:-translate-y-0.5 transition-all">
                Geleceği Keşfedin
            </button>
        </div>
    </section>

    <!-- BLOG SECTION -->
    <section id="blog" class="py-24 px-4 sm:px-6 lg:px-8 bg-white dark:bg-dark-bg scroll-mt-20">
        <div class="mx-auto max-w-7xl">
            
            <div class="flex flex-col md:flex-row md:items-end justify-between mb-16 scroll-reveal">
                <div>
                    <span class="text-xs font-bold uppercase tracking-widest text-brand-blue dark:text-brand-cyan mb-3 block">Güncel Bilgi</span>
                    <h2 class="font-display font-bold text-3xl sm:text-4xl text-brand-dark dark:text-white tracking-tight">Teknoloji ve Dönüşüm Günlüğü</h2>
                </div>
                <p class="text-slate-500 dark:text-slate-400 max-w-md mt-4 md:mt-0 text-sm leading-relaxed">
                    Yapay zeka, ERP teknolojileri ve şehir mimarilerindeki en yeni dijital dönüşüm trendlerini okuyun.
                </p>
            </div>

            <!-- Blog Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 scroll-reveal-grid">
                
                <!-- Blog Card 1 -->
                <article class="group bg-slate-50 dark:bg-dark-surface border border-slate-100 dark:border-slate-800 rounded-3xl overflow-hidden hover:-translate-y-1.5 transition-transform duration-300">
                    <div class="aspect-[16/10] bg-slate-200 dark:bg-slate-800 overflow-hidden relative">
                        <!-- Simulated AI product layout graphic representation -->
                        <div class="absolute inset-0 bg-gradient-to-tr from-brand-blue/30 via-brand-purple/20 to-transparent flex items-center justify-center font-display font-extrabold text-sm text-white tracking-wider">YAPAY ZEKA & ERP</div>
                    </div>
                    <div class="p-6">
                        <span class="text-[11px] font-bold text-brand-blue dark:text-brand-cyan uppercase tracking-widest block mb-2">Yapay Zeka</span>
                        <h3 class="font-display font-bold text-lg text-slate-900 dark:text-white mb-3 group-hover:text-brand-blue dark:group-hover:text-brand-cyan transition-colors">
                            ERP Sistemlerinde Yapay Zeka Destekli Karar Alma
                        </h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed mb-6">
                            Geleceğin ERP mimarilerinde veri analizi yapay zeka ile otomatikleşiyor ve raporlama akıllı veri modellerine dönüşüyor.
                        </p>
                        <a href="{{ url('/#blog') }}" class="text-xs font-bold text-slate-800 dark:text-slate-300 hover:text-brand-blue dark:hover:text-brand-cyan transition-colors">Yazıyı Oku &rarr;</a>
                    </div>
                </article>

                <!-- Blog Card 2 -->
                <article class="group bg-slate-50 dark:bg-dark-surface border border-slate-100 dark:border-slate-800 rounded-3xl overflow-hidden hover:-translate-y-1.5 transition-transform duration-300">
                    <div class="aspect-[16/10] bg-slate-200 dark:bg-slate-800 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-tr from-brand-cyan/30 via-brand-blue/20 to-transparent flex items-center justify-center font-display font-extrabold text-sm text-white tracking-wider">AKILLI SEHIRLER</div>
                    </div>
                    <div class="p-6">
                        <span class="text-[11px] font-bold text-brand-cyan uppercase tracking-widest block mb-2">Şehir Teknolojileri</span>
                        <h3 class="font-display font-bold text-lg text-slate-900 dark:text-white mb-3 group-hover:text-brand-blue dark:group-hover:text-brand-cyan transition-colors">
                            Coğrafi Bilgi Sistemleri (CBS) ve Akıllı Kentler
                        </h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed mb-6">
                            Şehir verilerinin toplanması ve dijital atlas sistemleri üzerinden yönetilmesi, kentsel sürdürülebilirliğin anahtarıdır.
                        </p>
                        <a href="{{ url('/#blog') }}" class="text-xs font-bold text-slate-800 dark:text-slate-300 hover:text-brand-blue dark:hover:text-brand-cyan transition-colors">Yazıyı Oku &rarr;</a>
                    </div>
                </article>

                <!-- Blog Card 3 -->
                <article class="group bg-slate-50 dark:bg-dark-surface border border-slate-100 dark:border-slate-800 rounded-3xl overflow-hidden hover:-translate-y-1.5 transition-transform duration-300">
                    <div class="aspect-[16/10] bg-slate-200 dark:bg-slate-800 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-tr from-brand-purple/30 via-brand-cyan/20 to-transparent flex items-center justify-center font-display font-extrabold text-sm text-white tracking-wider">DIJITAL ARSIV</div>
                    </div>
                    <div class="p-6">
                        <span class="text-[11px] font-bold text-brand-purple uppercase tracking-widest block mb-2">Dijital Dönüşüm</span>
                        <h3 class="font-display font-bold text-lg text-slate-900 dark:text-white mb-3 group-hover:text-brand-blue dark:group-hover:text-brand-cyan transition-colors">
                            Şehir Arşivleri ve Tarihsel Belleğin Dijitalleşmesi
                        </h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed mb-6">
                            Fiziksel belgelerin taranması, indekslenmesi ve akıllı etiketler ile güvenli biçimde dijital korumaya alınması süreçleri.
                        </p>
                        <a href="{{ url('/#blog') }}" class="text-xs font-bold text-slate-800 dark:text-slate-300 hover:text-brand-blue dark:hover:text-brand-cyan transition-colors">Yazıyı Oku &rarr;</a>
                    </div>
                </article>

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

    <!-- REFERENCES SECTION -->
    <section id="referanslar" class="py-24 px-4 bg-slate-50 dark:bg-[#060913] transition-colors duration-300 scroll-mt-20 overflow-hidden">
        <div class="mx-auto max-w-7xl">
            
            <div class="text-center max-w-2xl mx-auto mb-16 scroll-reveal">
                <span class="text-xs font-bold uppercase tracking-widest text-brand-blue dark:text-brand-cyan mb-3 block">Referanslarımız</span>
                <h2 class="font-display font-bold text-3xl sm:text-4xl text-brand-dark dark:text-white tracking-tight">Bize Güvenen Kuruluşlar</h2>
            </div>

            <!-- Infinite scrolling marquee for logos (CSS Animation) -->
            <div class="relative w-full flex items-center overflow-hidden py-4 border-y border-slate-200/50 dark:border-slate-800/40">
                <!-- Inner loop container -->
                <div class="flex gap-20 items-center justify-around whitespace-nowrap animate-[marquee_25s_linear_infinite] min-w-full">
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">LIKA GROUP</span>
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">MARKET KURDU</span>
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">FIRSAT HARITASI</span>
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">KENT ATLASI</span>
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">SEHIR GELECEGI</span>
                </div>
                <!-- Duplicate for seamless scroll -->
                <div class="absolute top-4 flex gap-20 items-center justify-around whitespace-nowrap aria-hidden:true animate-[marquee_25s_linear_infinite] min-w-full translate-x-full">
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">LIKA GROUP</span>
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">MARKET KURDU</span>
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">FIRSAT HARITASI</span>
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">KENT ATLASI</span>
                    <span class="text-lg font-display font-bold tracking-widest text-slate-400 dark:text-slate-600">SEHIR GELECEGI</span>
                </div>
            </div>

            <!-- Testimonial Carousel -->
            <div class="mt-20 max-w-3xl mx-auto bg-white dark:bg-dark-surface rounded-3xl p-8 sm:p-12 shadow-lg border border-slate-100 dark:border-slate-800/80 scroll-reveal">
                <div class="text-center">
                    <p class="font-medium text-slate-700 dark:text-slate-300 text-base sm:text-lg italic leading-relaxed mb-8">
                        "Lika Yazılım ile kentsel veri yönetimimizi dijitalleştirdik. Şehir Atlası ve eKülliye sistemleri, kurum içi operasyonel verimliliğimizi %40 oranında artırdı."
                    </p>
                    <div class="flex flex-col items-center">
                        <strong class="text-slate-900 dark:text-white font-display text-sm tracking-wide">Ahmet Yılmaz</strong>
                        <span class="text-slate-400 dark:text-slate-500 text-xs font-semibold uppercase tracking-wider mt-1">Bilgi İşlem Daire Başkanı</span>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- CTA SECTION -->
    <section id="iletisim" class="relative py-28 px-4 sm:px-6 lg:px-8 bg-brand-dark dark:bg-[#03050a] text-white overflow-hidden scroll-mt-20">
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(37,99,235,0.15),transparent_60%)] pointer-events-none"></div>

        <div class="relative z-10 mx-auto max-w-4xl text-center scroll-reveal">
            <h2 class="font-display font-extrabold text-3xl sm:text-5xl tracking-tight mb-6">
                Yazılımın Gücünü İşinize Taşıyın
            </h2>
            <p class="text-slate-400 text-base sm:text-lg leading-relaxed max-w-2xl mx-auto mb-12">
                İşletmeniz veya kurumunuz için en uygun çözümü birlikte oluşturalım. Süreçlerinizi hızlandıracak, dijital geleceğinizi kuracak özel demo talebinde bulunun.
            </p>
            
            <div class="flex flex-wrap gap-4 justify-center items-center">
                <button type="button" data-demo-open class="w-full sm:w-auto bg-brand-blue hover:bg-brand-blue/90 text-white font-bold px-8 py-4 rounded-xl shadow-lg shadow-brand-blue/15 hover:shadow-brand-blue/25 hover:-translate-y-0.5 transition-all">
                    Ücretsiz Demo Al
                </button>
                <button type="button" data-teklif-open class="w-full sm:w-auto bg-white/10 hover:bg-white/20 text-white font-bold px-8 py-4 rounded-xl hover:-translate-y-0.5 transition-all border border-white/10">
                    Teklif Talep Et
                </button>
            </div>
        </div>
    </section>

</main>

<!-- FOOTER -->
<footer class="bg-slate-50 dark:bg-dark-bg border-t border-slate-200/50 dark:border-slate-900/60 pt-20 pb-12 px-4 sm:px-6 lg:px-8 transition-colors duration-300">
    <div class="mx-auto max-w-7xl">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 pb-16">
            <!-- Brand block -->
            <div class="lg:col-span-2">
                <a class="flex items-center gap-3.5 group mb-6" href="{{ url('/') }}" aria-label="Lika Yazılım ana sayfa">
                    <span class="w-10 h-10 rounded-xl bg-gradient-to-tr from-brand-blue to-brand-cyan flex items-center justify-center text-white font-display font-bold text-xl shadow-md">L</span>
                    <span class="font-display font-bold text-lg text-slate-950 dark:text-white">Lika Yazılım</span>
                </a>
                <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed max-w-xs mb-8">
                    Türkiye'nin dijital geleceğini inşa ediyoruz. Şehir teknolojilerinden kurumsal ERP altyapılarına yenilikçi mühendislik çözümleri.
                </p>
                <span class="text-[10px] text-slate-400 font-bold block uppercase tracking-wider mb-2">İLETİŞİM BİLGİLERİ</span>
                <a href="mailto:info@likayazilim.com" class="text-slate-600 dark:text-slate-300 hover:text-brand-blue dark:hover:text-brand-cyan text-sm block mb-1 font-medium transition-colors">info@likayazilim.com</a>
                <a href="tel:+900000000000" class="text-slate-600 dark:text-slate-300 hover:text-brand-blue dark:hover:text-brand-cyan text-sm block font-medium transition-colors">+90 000 000 00 00</a>
            </div>

            <!-- Col 2: Ürünler -->
            <div>
                <strong class="font-display text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider block mb-6">Ürünlerimiz</strong>
                <ul class="space-y-4 text-sm font-medium text-slate-500 dark:text-slate-400">
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="{{ url('/#urunler') }}">LikaONE (ERP)</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="{{ url('/uye-ol') }}">Fırsat Haritası</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="{{ url('/#urunler') }}">Şehir Hafızası</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="{{ url('/#urunler') }}">eKülliye</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="{{ url('/#urunler') }}">Şehir Atlası</a></li>
                </ul>
            </div>

            <!-- Col 3: Destek & Kurumsal -->
            <div>
                <strong class="font-display text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider block mb-6">Destek & Kurumsal</strong>
                <ul class="space-y-4 text-sm font-medium text-slate-500 dark:text-slate-400">
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="{{ url('/admin/login') }}">Yönetim Paneli Giriş</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="{{ url('/#neden-lika') }}">Neden Lika?</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="{{ url('/#referanslar') }}">Referanslar</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="{{ url('/#iletisim') }}">Bize Ulaşın</a></li>
                </ul>
            </div>

            <!-- Col 4: Sosyal Medya -->
            <div>
                <strong class="font-display text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider block mb-6">Sosyal Medya</strong>
                <ul class="space-y-4 text-sm font-medium text-slate-500 dark:text-slate-400">
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="#">LinkedIn</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="#">Twitter (X)</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="#">GitHub</a></li>
                    <li><a class="hover:text-brand-blue dark:hover:text-brand-cyan transition-colors" href="#">Instagram</a></li>
                </ul>
            </div>
        </div>

        <!-- Footer bottom bar -->
        <div class="border-t border-slate-200/50 dark:border-slate-900/60 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-slate-400 dark:text-slate-500 text-xs">
            <span>&copy; {{ date('Y') }} Lika Yazılım. Tüm hakları saklıdır.</span>
            <div class="flex gap-6">
                <a class="hover:underline" href="{{ url('/kvkk-aydinlatma-metni') }}">KVKK Aydınlatma Metni</a>
                <a class="hover:underline" href="{{ url('/kullanim-kosullari') }}">Kullanım Koşulları</a>
            </div>
        </div>
    </div>
</footer>

    <!-- 360° Digital Tour Modal -->
    <div class="fixed inset-0 z-50 invisible opacity-0 transition-all duration-300 flex items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="tourModalTitle" data-tour-modal>
        <!-- Backdrop -->
        <div class="absolute inset-0 bg-slate-950/90 backdrop-blur-md" data-tour-close></div>

        <!-- Modal Container -->
        <section class="relative w-full max-w-5xl bg-slate-900 border border-slate-800 rounded-[32px] overflow-hidden shadow-2xl flex flex-col justify-between h-[80vh]">
            
            <!-- Modal Header -->
            <div class="p-6 border-b border-slate-800 flex items-center justify-between z-10 bg-slate-900/80 backdrop-blur-md">
                <div>
                    <h2 id="tourModalTitle" class="font-display font-bold text-xl text-white">Şehir Atlası - 360° Dijital Tur</h2>
                    <p class="text-xs text-slate-400 mt-1">Görünümü mouse ile sürükleyerek veya butonlarla hareket ettirerek akıllı şehir katmanlarını inceleyin.</p>
                </div>
                <button class="w-8 h-8 rounded-xl bg-slate-800 text-slate-400 hover:text-white flex items-center justify-center transition-colors" type="button" aria-label="Turu kapat" data-tour-close>&times;</button>
            </div>

            <!-- Panoramic Viewer Area -->
            <div class="relative flex-1 bg-[#030712] overflow-hidden cursor-grab active:cursor-grabbing select-none" data-pan-container>
                
                <!-- Panorama Content (Long scrolling strip) -->
                <div class="absolute top-0 bottom-0 left-0 w-[2400px] flex items-center justify-around transition-transform duration-300 ease-out" data-pan-strip style="transform: translateX(-400px);">
                    
                    <!-- Futuristic Cityscape SVG Panorama Background -->
                    <svg class="absolute inset-0 w-full h-full opacity-35" viewBox="0 0 2400 600" fill="none" preserveAspectRatio="none">
                        <!-- Grid lines -->
                        <path d="M0,500 L2400,500 M0,400 L2400,400 M0,300 L2400,300 M0,200 L2400,200" stroke="rgba(255,255,255,0.03)" stroke-width="1" />
                        <!-- Building vectors -->
                        <rect x="100" y="250" width="120" height="250" fill="rgba(37, 99, 235, 0.15)" stroke="rgba(37, 99, 235, 0.3)" stroke-width="1.5" />
                        <rect x="250" y="180" width="160" height="320" fill="rgba(6, 182, 212, 0.1)" stroke="rgba(6, 182, 212, 0.2)" stroke-width="1.5" />
                        <rect x="450" y="320" width="100" height="180" fill="rgba(139, 92, 246, 0.1)" stroke="rgba(139, 92, 246, 0.2)" stroke-width="1.5" />
                        
                        <rect x="700" y="120" width="180" height="380" fill="rgba(6, 182, 212, 0.15)" stroke="rgba(6, 182, 212, 0.3)" stroke-width="1.5" />
                        <rect x="920" y="280" width="140" height="220" fill="rgba(37, 99, 235, 0.1)" stroke="rgba(37, 99, 235, 0.2)" stroke-width="1.5" />
                        
                        <rect x="1200" y="200" width="150" height="300" fill="rgba(139, 92, 246, 0.15)" stroke="rgba(139, 92, 246, 0.3)" stroke-width="1.5" />
                        <rect x="1400" y="150" width="160" height="350" fill="rgba(37, 99, 235, 0.1)" stroke="rgba(37, 99, 235, 0.2)" stroke-width="1.5" />
                        
                        <rect x="1700" y="220" width="130" height="280" fill="rgba(6, 182, 212, 0.1)" stroke="rgba(6, 182, 212, 0.2)" stroke-width="1.5" />
                        <rect x="1900" y="100" width="200" height="400" fill="rgba(139, 92, 246, 0.15)" stroke="rgba(139, 92, 246, 0.3)" stroke-width="1.5" />
                        
                        <rect x="2150" y="300" width="120" height="200" fill="rgba(37, 99, 235, 0.1)" stroke="rgba(37, 99, 235, 0.2)" stroke-width="1.5" />
                    </svg>

                    <!-- Interactive hotspots -->
                    <!-- Hotspot 1 -->
                    <div class="absolute left-[330px] top-[260px] group/hotspot">
                        <button class="relative w-8 h-8 rounded-full flex items-center justify-center focus:outline-none cursor-pointer" type="button" data-hotspot="1">
                            <span class="absolute inset-0 rounded-full bg-brand-cyan/20 animate-ping"></span>
                            <span class="absolute inset-1.5 rounded-full bg-brand-cyan shadow-lg shadow-brand-cyan/50"></span>
                        </button>
                        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 w-48 bg-slate-950/90 border border-slate-800 p-3.5 rounded-xl opacity-0 invisible group-hover/hotspot:opacity-100 group-hover/hotspot:visible transition-all duration-200 shadow-xl z-20 text-xs text-left">
                            <strong class="text-brand-cyan block mb-1">Akıllı Ulaşım</strong>
                            <p class="text-slate-400 leading-normal">Kavşak yoğunlukları ve toplu taşıma araçları yapay zeka ile optimize edilir.</p>
                        </div>
                    </div>

                    <!-- Hotspot 2 -->
                    <div class="absolute left-[790px] top-[200px] group/hotspot">
                        <button class="relative w-8 h-8 rounded-full flex items-center justify-center focus:outline-none cursor-pointer" type="button" data-hotspot="2">
                            <span class="absolute inset-0 rounded-full bg-brand-purple/20 animate-ping"></span>
                            <span class="absolute inset-1.5 rounded-full bg-brand-purple shadow-lg shadow-brand-purple/50"></span>
                        </button>
                        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 w-48 bg-slate-950/90 border border-slate-800 p-3.5 rounded-xl opacity-0 invisible group-hover/hotspot:opacity-100 group-hover/hotspot:visible transition-all duration-200 shadow-xl z-20 text-xs text-left">
                            <strong class="text-brand-purple block mb-1">Akıllı Enerji</strong>
                            <p class="text-slate-400 leading-normal">Sokak aydınlatmaları ve solar şebeke tüketimleri anlık analiz edilir.</p>
                        </div>
                    </div>

                    <!-- Hotspot 3 -->
                    <div class="absolute left-[1480px] top-[240px] group/hotspot">
                        <button class="relative w-8 h-8 rounded-full flex items-center justify-center focus:outline-none cursor-pointer" type="button" data-hotspot="3">
                            <span class="absolute inset-0 rounded-full bg-brand-blue/20 animate-ping"></span>
                            <span class="absolute inset-1.5 rounded-full bg-brand-blue shadow-lg shadow-brand-blue/50"></span>
                        </button>
                        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 w-48 bg-slate-950/90 border border-slate-800 p-3.5 rounded-xl opacity-0 invisible group-hover/hotspot:opacity-100 group-hover/hotspot:visible transition-all duration-200 shadow-xl z-20 text-xs text-left">
                            <strong class="text-brand-blue block mb-1">Altyapı İzleme</strong>
                            <p class="text-slate-400 leading-normal">Su şebekesi ve atık su hatlarındaki sensörler CBS üzerine işlenir.</p>
                        </div>
                    </div>

                    <!-- Hotspot 4 -->
                    <div class="absolute left-[2000px] top-[180px] group/hotspot">
                        <button class="relative w-8 h-8 rounded-full flex items-center justify-center focus:outline-none cursor-pointer" type="button" data-hotspot="4">
                            <span class="absolute inset-0 rounded-full bg-brand-cyan/20 animate-ping"></span>
                            <span class="absolute inset-1.5 rounded-full bg-brand-cyan shadow-lg shadow-brand-cyan/50"></span>
                        </button>
                        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 w-48 bg-slate-950/90 border border-slate-800 p-3.5 rounded-xl opacity-0 invisible group-hover/hotspot:opacity-100 group-hover/hotspot:visible transition-all duration-200 shadow-xl z-20 text-xs text-left">
                            <strong class="text-brand-cyan block mb-1">Afet Yönetimi</strong>
                            <p class="text-slate-400 leading-normal">Acil toplanma alanları ve afet risk bölgeleri haritada simüle edilir.</p>
                        </div>
                    </div>

                </div>

                <!-- Navigation Panning Buttons -->
                <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 bg-slate-900/95 border border-slate-800 px-5 py-3 rounded-2xl z-10 shadow-lg">
                    <button class="w-10 h-10 rounded-xl bg-slate-800 hover:bg-slate-700 hover:text-white text-slate-300 flex items-center justify-center transition-colors cursor-pointer" type="button" aria-label="Sola kaydır" data-pan-left>
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
                    </button>
                    <span class="text-slate-400 text-xs font-semibold px-3 uppercase tracking-wider">Görünümü Kaydır</span>
                    <button class="w-10 h-10 rounded-xl bg-slate-800 hover:bg-slate-700 hover:text-white text-slate-300 flex items-center justify-center transition-colors cursor-pointer" type="button" aria-label="Sağa kaydır" data-pan-right>
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
                    </button>
                </div>

                <!-- Drag Helper Guide overlay -->
                <div class="absolute top-6 left-6 bg-slate-950/60 border border-slate-800/80 px-3.5 py-1.5 rounded-xl pointer-events-none text-[10px] text-slate-400 font-bold uppercase tracking-wider flex items-center gap-2">
                    <svg class="w-3.5 h-3.5 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /></svg>
                    Sürükleyip Keşfedin
                </div>
            </div>

            <!-- Modal Footer details -->
            <div class="p-6 border-t border-slate-800 text-xs text-slate-500 bg-slate-900/80 flex items-center justify-between">
                <span>Lika Şehir Atlası v4.0 - Virtual Tour</span>
                <span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-brand-cyan animate-ping"></span>3D HOLOGRAFİK SIMÜLASYON</span>
            </div>

        </section>
    </div>

<style>
/* CSS Marquee animation for reference logos */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}
</style>
@endsection