@extends('layouts.app')

@section('title', $settings->site_adi ?? 'Mariobet - Türkiye\'nin En Güvenilir Online Casino Platformu')

@section('content')
<div class="min-h-screen">
    @foreach($homeSections as $section)
        @switch($section->name)
            @case('slider')
                <!-- Slider Section -->
                @if($sliders->count() > 0)
                <section class="relative overflow-hidden max-w-[1400px] mx-auto px-4">
                    <div class="swiper home-slider">
                        <div class="swiper-wrapper">
                            @foreach($sliders as $slider)
                            <div class="swiper-slide">
                                @if($slider->url)
                                <a href="{{ $slider->url }}" class="block">
                                @endif
                                <div class="relative w-full overflow-hidden">
                                    <img src="{{ asset($slider->gorsel) }}" alt="Slider" class="block w-full h-auto object-contain" loading="eager">
                                </div>
                                @if($slider->baslik)
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 md:p-6">
                                    <h2 class="text-white text-lg md:text-xl lg:text-2xl font-bold">{{ $slider->baslik }}</h2>
                                    @if($slider->aciklama)
                                    <p class="text-gray-200 text-sm md:text-base mt-2">{{ $slider->aciklama }}</p>
                                    @endif
                                </div>
                                @endif
                                @if($slider->url)
                                </a>
                                @endif
                            </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </section>

                <div class="mario-promo-strip" aria-label="Promosyonlar">
                    <a href="{{ route('bonus') }}">
                        <img src="{{ asset('mario-assets/images/bonus1.jpg') }}" alt="Mariobet promosyonu" loading="lazy">
                    </a>
                    <a href="{{ route('bonus') }}">
                        <img src="{{ asset('mario-assets/images/bonus2.jpg') }}" alt="Mariobet casino promosyonu" loading="lazy">
                    </a>
                    <a href="{{ route('bonus') }}">
                        <img src="{{ asset('mario-assets/images/bonus3.jpg') }}" alt="Mariobet yatırım promosyonu" loading="lazy">
                    </a>
                </div>

                @if(($settings->bottom_banner_active ?? 0) == 1 && !empty($settings->bottom_banner_image))
                <section class="px-4 mt-3">
                    <div class="max-w-7xl mx-auto">
                        <div class="relative w-full rounded-xl overflow-hidden border border-zinc-800/60 shadow-sm">
                            @if(!empty($settings->bottom_banner_url))
                                <a href="{{ $settings->bottom_banner_url }}" target="_blank" rel="noopener" class="block">
                                    <img src="{{ asset($settings->bottom_banner_image) }}" alt="Alt Banner" class="w-full h-auto object-cover">
                                </a>
                            @else
                                <img src="{{ asset($settings->bottom_banner_image) }}" alt="Alt Banner" class="w-full h-auto object-cover">
                            @endif
                        </div>
                        @if(isset($bottomBannerBelowImages) && $bottomBannerBelowImages->count() > 0)
                        <div class="mt-3">
                            @if(($settings->bottom_below_mobile_grid ?? 0) == 1)
                                <div class="grid gap-2" style="grid-template-columns: repeat({{ $bottomBannerBelowImages->count() }}, minmax(0, 1fr));">
                                    @foreach($bottomBannerBelowImages as $bb)
                                        @if($bb->url)
                                            <a href="{{ $bb->url }}" target="_blank" rel="noopener" class="block">
                                                <img src="{{ asset($bb->gorsel) }}" alt="Alt Banner Altı" class="w-full h-auto rounded-lg border border-zinc-800/60" loading="lazy">
                                            </a>
                                        @else
                                            <img src="{{ asset($bb->gorsel) }}" alt="Alt Banner Altı" class="block w-full h-auto rounded-lg border border-zinc-800/60" loading="lazy">
                                        @endif
                                    @endforeach
                                </div>
                                <style>
                                    @media (max-width: 640px) {
                                        .grid[style*="grid-template-columns"] {
                                            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                                        }
                                    }
                                </style>
                            @else
                                <div class="flex gap-2">
                                    @php $__bbCount = max(1, $bottomBannerBelowImages->count()); $__gap = 8; @endphp
                                    @foreach($bottomBannerBelowImages as $bb)
                                        @php $__width = 'calc((100% - ' . ($__bbCount - 1) * $__gap . 'px)/' . $__bbCount . ')'; @endphp
                                        @if($bb->url)
                                            <a href="{{ $bb->url }}" target="_blank" rel="noopener" class="block" style="width: {{ $__width }};">
                                                <img src="{{ asset($bb->gorsel) }}" alt="Alt Banner Altı" class="w-full h-auto rounded-lg border border-zinc-800/60" loading="lazy">
                                            </a>
                                        @else
                                            <img src="{{ asset($bb->gorsel) }}" alt="Alt Banner Altı" class="block w-full h-auto rounded-lg border border-zinc-800/60" style="width: {{ $__width }};" loading="lazy">
                                        @endif
                                    @endforeach
                                </div>
                            @endif
                        </div>
                        @endif
                    </div>
                </section>
                @endif
                @endif
                @break

            @case('son_kazananlar')
                <!-- Son Kazananlar Section -->
                @if($recentWinners->count() > 0)
                <section class="py-2 px-4 bg-gradient-to-r from-zinc-900/20 via-zinc-900/10 to-zinc-900/20">
                    <div class="max-w-7xl mx-auto">
                        <!-- Başlık -->
                        <div class="mb-4">
                            <div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-zinc-900/50 via-zinc-900/30 to-transparent border border-zinc-800/50 p-3 sm:p-4">
                                <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-70"></div>
                                <div class="absolute inset-0" style="background: linear-gradient(to right, rgba(235, 255, 0, 0.05), transparent, transparent);"></div>
                                <div class="relative flex items-center gap-3">
                                    <div class="relative">
                                        <div class="absolute inset-0 blur-xl rounded-full" style="background-color: rgba(235, 255, 0, 0.1);"></div>
                                        <div class="relative p-1.5 sm:p-2 rounded-lg" style="background: linear-gradient(to bottom right, rgba(235, 255, 0, 0.3), rgba(235, 255, 0, 0.1)); border: 1px solid rgba(235, 255, 0, 0.2);">
                                            @if($section->icon)
                                                {!! $section->icon !!}
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #ebff00;" class="sm:w-5 sm:h-5">
                                                    <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
                                                    <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
                                                    <path d="M4 22h16"></path>
                                                    <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path>
                                                    <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path>
                                                    <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path>
                                                </svg>
                                            @endif
                                        </div>
                                    </div>
                                    <div>
                                        <h2 class="text-base sm:text-xl font-bold bg-clip-text text-transparent" style="background: linear-gradient(to right, #ebff00, #ebff00, #ebff00); -webkit-background-clip: text; background-clip: text; color: transparent;">{{ $section->title }}</h2>
                                        <p class="text-zinc-400 text-sm">Büyük kazançlar yaşanıyor!</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Kazananlar Scroll Container -->
                        <div class="relative overflow-hidden">
                            <div class="recent-winners-scroll flex gap-2 md:gap-3 animate-scroll-winners">
                                @foreach($recentWinners as $winner)
                                <!-- Winner Card -->
                                <div class="winner-card group flex-shrink-0 bg-gradient-to-br from-zinc-900/90 via-zinc-800/80 to-zinc-900/70 rounded-lg border border-zinc-700/50 px-1 py-0.5 w-auto hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-red-500/20 backdrop-blur-sm">
                                    <div class="flex items-center gap-1.5">
                                        <a href="/GameLaunch/{{ $winner->gameid }}" target="_blank" class="block">
                                            <div class="w-12 h-12 md:w-16 md:h-16 rounded-md overflow-hidden border border-zinc-600/30 bg-zinc-900/60 flex items-center justify-center relative">
                                                @if($winner->cover)
                                                    <img src="{{ asset($winner->cover) }}" alt="Kazanan oyun" class="w-full h-full object-contain">
                                                @else
                                                    <div class="w-full h-full flex items-center justify-center text-zinc-500">
                                                        <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
                                                            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
                                                            <path d="M9 9h.01"></path>
                                                            <path d="M15 9h.01"></path>
                                                            <path d="M12 15h.01"></path>
                                                        </svg>
                                                    </div>
                                                @endif
                                                <!-- Transparent Play Icon Overlay -->
                                                <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                                                    <div class="w-7 h-7 md:w-9 md:h-9 rounded-full bg-black/40 flex items-center justify-center">
                                                        <svg viewBox="0 0 24 24" class="w-4 h-4 md:w-5 md:h-5" fill="currentColor">
                                                            <path d="M8 5v14l11-7z"></path>
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <div class="min-w-0 flex flex-col">
                                            <span class="text-white text-xs font-medium truncate">{{ $winner->masked_username }}</span>
                                            <span class="text-yellow-400 font-bold text-[11px] md:text-xs whitespace-nowrap">{{ number_format($winner->amount, 0) }}₺</span>
                                            <span class="text-zinc-500 text-[10px] md:text-xs whitespace-nowrap">{{ $winner->created_at->diffForHumans() }}</span>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </section>
                @endif
                @break

            @case('yaklasan_maclar')
                <!-- Spor Bahisleri Section -->
                @if($upcomingMatches->count() > 0)
                <section class="py-3 px-4 bg-gradient-to-r from-zinc-900/10 via-zinc-900/5 to-zinc-900/10">
                    <div class="max-w-7xl mx-auto">
                        <!-- Başlık -->
                        <div class="mb-3">
                            <div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-zinc-900/50 via-zinc-900/30 to-transparent border border-zinc-800/50 p-3">
                                <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-70"></div>
                                <div class="absolute inset-0" style="background: linear-gradient(to right, rgba(235, 255, 0, 0.05), transparent, transparent);"></div>
                                <div class="relative flex items-center gap-3">
                                    <div class="relative">
                                        <div class="absolute inset-0 blur-xl rounded-full" style="background-color: rgba(235, 255, 0, 0.1);"></div>
                                        <div class="relative p-1.5 sm:p-2 rounded-lg" style="background: linear-gradient(to bottom right, rgba(235, 255, 0, 0.3), rgba(235, 255, 0, 0.1)); border: 1px solid rgba(235, 255, 0, 0.2);">
                                            @if($section->icon)
                                                {!! $section->icon !!}
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #ebff00;" class="sm:w-4 sm:h-4">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <path d="m9 12 2 2 4-4"></path>
                                                </svg>
                                            @endif
                                        </div>
                                    </div>
                                    <div>
                                        <h2 class="text-base sm:text-lg font-bold bg-clip-text text-transparent" style="background: linear-gradient(to right, #ebff00, #ebff00, #ebff00); -webkit-background-clip: text; background-clip: text; color: transparent;">{{ $section->title }}</h2>
                                        <p class="text-zinc-400 text-xs">En yüksek oranlar burada!</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Maçlar Grid -->
                        <div class="grid grid-cols-2 gap-2">
                            @foreach($upcomingMatches as $match)
                            <div class="match-card bg-gradient-to-br from-zinc-900/80 via-zinc-900/60 to-zinc-900/40 rounded-lg border border-zinc-800/50 p-2 hover:scale-102 transition-all duration-300 shadow-lg hover:shadow-red-500/10">
                                <!-- Match Header -->
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center gap-1">
                                        <div class="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse"></div>
                                        <span class="text-zinc-400 text-xs truncate">{{ Str::limit($match->lig_isim, 12) }}</span>
                                    </div>
                                    <span class="text-zinc-500 text-xs">{{ Str::limit($match->ulke_isim, 8) }}</span>
                                </div>

                                <!-- Teams -->
                                <div class="mb-2">
                                    <div class="flex items-center justify-center gap-1 mb-1">
                                        <h3 class="text-white font-medium text-xs truncate flex-1 text-center">{{ Str::limit($match->evsahibi_isim, 12) }}</h3>
                                        <span class="text-zinc-400 text-xs">vs</span>
                                        <h3 class="text-white font-medium text-xs truncate flex-1 text-center">{{ Str::limit($match->misafir_isim, 12) }}</h3>
                                    </div>
                                    
                                    <!-- Match Time -->
                                    <div class="text-center">
                                        <p class="text-red-400 font-medium text-xs">
                                            {{ \Carbon\Carbon::parse($match->baslangic)->format('d.m H:i') }}
                                        </p>
                                        <p class="text-zinc-500 text-xs">
                                            {{ \Carbon\Carbon::parse($match->baslangic)->diffForHumans() }}
                                        </p>
                                    </div>
                                </div>

                                <!-- Odds -->
                                <div class="grid grid-cols-3 gap-0.5">
                                    <!-- Home Win -->
                                    <a href="/sports" class="bg-zinc-800/50 rounded-sm p-1.5 text-center hover:bg-zinc-700/50 transition-colors cursor-pointer border border-zinc-700/30 hover:border-red-500/30 block">
                                        <p class="text-zinc-400 text-xs mb-0.5">1</p>
                                        <p class="text-white font-semibold text-xs">{{ number_format($match->oran1, 2) }}</p>
                                    </a>
                                    
                                    <!-- Draw -->
                                    <a href="/sports" class="bg-zinc-800/50 rounded-sm p-1.5 text-center hover:bg-zinc-700/50 transition-colors cursor-pointer border border-zinc-700/30 hover:border-red-500/30 block">
                                        <p class="text-zinc-400 text-xs mb-0.5">X</p>
                                        <p class="text-white font-semibold text-xs">{{ number_format($match->oran0, 2) }}</p>
                                    </a>
                                    
                                    <!-- Away Win -->
                                    <a href="/sports" class="bg-zinc-800/50 rounded-sm p-1.5 text-center hover:bg-zinc-700/50 transition-colors cursor-pointer border border-zinc-700/30 hover:border-red-500/30 block">
                                        <p class="text-zinc-400 text-xs mb-0.5">2</p>
                                        <p class="text-white font-semibold text-xs">{{ number_format($match->oran2, 2) }}</p>
                                    </a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </section>
                @endif
                @break

            @case('oyunlar')
                <!-- Games Section -->
                <section class="py-2 px-4">
                    <div class="max-w-7xl mx-auto">
                        <!-- Başlık - Oyunlar -->
                        <div class="mb-3">
                            <div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-zinc-900/50 via-zinc-900/30 to-transparent border border-zinc-800/50 p-3 sm:p-4">
                                <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-70"></div>
                                <div class="absolute inset-0" style="background: linear-gradient(to right, rgba(235, 255, 0, 0.05), transparent, transparent);"></div>
                                <div class="relative flex items-center gap-3">
                                    <div class="relative">
                                        <div class="absolute inset-0 blur-xl rounded-full" style="background-color: rgba(235, 255, 0, 0.1);"></div>
                                        <div class="relative p-1.5 sm:p-2 rounded-lg" style="background: linear-gradient(to bottom right, rgba(235, 255, 0, 0.3), rgba(235, 255, 0, 0.1)); border: 1px solid rgba(235, 255, 0, 0.2);">
                                            @if($section->icon)
                                                {!! $section->icon !!}
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #ebff00;" class="sm:w-5 sm:h-5">
                                                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
                                                    <path d="M9 9h.01"></path>
                                                    <path d="M15 9h.01"></path>
                                                    <path d="M12 15h.01"></path>
                                                </svg>
                                            @endif
                                        </div>
                                    </div>
                                    <div>
                                        <h2 class="text-base sm:text-xl font-bold bg-clip-text text-transparent" style="background: linear-gradient(to right, #ebff00, #ebff00, #ebff00); -webkit-background-clip: text; background-clip: text; color: transparent;">{{ $section->title }}</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="horizontal-scroll flex overflow-x-auto gap-2 pb-4 scrollbar-hide" style="scrollbar-width: none; -ms-overflow-style: none;">
                            @foreach($oyunlar as $oyun)
                                <div class="oyun-card bg-zinc-900/90 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 border border-zinc-800 flex-shrink-0 relative">
                                    <a href="{{ $oyun->url ?? '#' }}" target="_blank" class="block">
                                        <div class="w-[140px] h-[250px] overflow-hidden rounded-2xl relative">
                                            <!-- Loading Skeleton with Shimmer Effect -->
                                            <div class="image-skeleton w-full h-full bg-gradient-to-br from-zinc-700 to-zinc-800 relative overflow-hidden">
                                                <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-30"></div>
                                                
                                                <!-- Shimmer Animation -->
                                                <div class="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
                                                
                                                <!-- Loading Spinner -->
                                                <div class="absolute inset-0 flex items-center justify-center">
                                                    <div class="relative">
                                                        <div class="w-8 h-8 border-2 rounded-full animate-spin" style="border-color: rgba(235, 255, 0, 0.3); border-top-color: #ebff00;"></div>
                                                        <div class="absolute inset-0 w-8 h-8 border-2 rounded-full animate-spin" style="border-color: rgba(235, 255, 0, 0.1); border-top-color: rgba(235, 255, 0, 0.5); animation-delay: -0.5s;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Actual Image (hidden initially) -->
                                            <img src="{{ asset($oyun->gorsel) }}" alt="oyun" class="w-full h-full object-cover opacity-0 transition-opacity duration-500 absolute inset-0" 
                                                 onload="this.style.opacity='1'; this.previousElementSibling.style.display='none';">
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
                @break

            @case('casino_oyunlari')
                <!-- Casino Oyunları Section -->
                <section class="py-2 px-4">
                    <div class="max-w-7xl mx-auto">
                        <!-- Başlık - Casino Oyunları -->
                        <div class="mb-3">
                            <div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-zinc-900/50 via-zinc-900/30 to-transparent border border-zinc-800/50 p-3 sm:p-4">
                                <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-70"></div>
                                <div class="absolute inset-0" style="background: linear-gradient(to right, rgba(235, 255, 0, 0.05), transparent, transparent);"></div>
                                <div class="relative flex items-center gap-3">
                                    <div class="relative">
                                        <div class="absolute inset-0 blur-xl rounded-full" style="background-color: rgba(235, 255, 0, 0.1);"></div>
                                        <div class="relative p-1.5 sm:p-2 rounded-lg" style="background: linear-gradient(to bottom right, rgba(235, 255, 0, 0.3), rgba(235, 255, 0, 0.1)); border: 1px solid rgba(235, 255, 0, 0.2);">
                                            @if($section->icon)
                                                {!! $section->icon !!}
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #ebff00;" class="sm:w-5 sm:h-5">
                                                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
                                                    <path d="M9 9h.01"></path>
                                                    <path d="M15 9h.01"></path>
                                                    <path d="M12 15h.01"></path>
                                                </svg>
                                            @endif
                                        </div>
                                    </div>
                                    <div>
                                        <h2 class="text-base sm:text-xl font-bold bg-clip-text text-transparent" style="background: linear-gradient(to right, #ebff00, #ebff00, #ebff00); -webkit-background-clip: text; background-clip: text; color: transparent;">{{ $section->title }}</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="horizontal-scroll flex overflow-x-auto gap-2 pb-4 scrollbar-hide" style="scrollbar-width: none; -ms-overflow-style: none;">
                            @foreach($casinoOyunlari as $oyun)
                                <div class="oyun-card bg-zinc-900/90 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 border border-zinc-800 flex-shrink-0 relative">
                                    <a href="{{ $oyun->url ?? '#' }}" target="_blank" class="block">
                                        <div class="w-[140px] h-[250px] overflow-hidden rounded-2xl relative">
                                            <!-- Loading Skeleton with Shimmer Effect -->
                                            <div class="image-skeleton w-full h-full bg-gradient-to-br from-zinc-700 to-zinc-800 relative overflow-hidden">
                                                <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-30"></div>
                                                
                                                <!-- Shimmer Animation -->
                                                <div class="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
                                                
                                                <!-- Loading Spinner -->
                                                <div class="absolute inset-0 flex items-center justify-center">
                                                    <div class="relative">
                                                        <div class="w-8 h-8 border-2 rounded-full animate-spin" style="border-color: rgba(235, 255, 0, 0.3); border-top-color: #ebff00;"></div>
                                                        <div class="absolute inset-0 w-8 h-8 border-2 rounded-full animate-spin" style="border-color: rgba(235, 255, 0, 0.1); border-top-color: rgba(235, 255, 0, 0.5); animation-delay: -0.5s;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Actual Image (hidden initially) -->
                                            <img src="{{ asset($oyun->gorsel) }}" alt="casino oyun" class="w-full h-full object-cover opacity-0 transition-opacity duration-500 absolute inset-0" 
                                                 onload="this.style.opacity='1'; this.previousElementSibling.style.display='none';">
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
                @break

            @case('canli_casinolar')
                <!-- Canlı Casinolar Section -->
                <section class="py-2 px-4">
                    <div class="max-w-7xl mx-auto">
                        <!-- Başlık - Canlı Casinolar -->
                        <div class="mb-3">
                            <div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-zinc-900/50 via-zinc-900/30 to-transparent border border-zinc-800/50 p-3 sm:p-4">
                                <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-70"></div>
                                <div class="absolute inset-0" style="background: linear-gradient(to right, rgba(235, 255, 0, 0.05), transparent, transparent);"></div>
                                <div class="relative flex items-center gap-3">
                                    <div class="relative">
                                        <div class="absolute inset-0 blur-xl rounded-full" style="background-color: rgba(235, 255, 0, 0.1);"></div>
                                        <div class="relative p-1.5 sm:p-2 rounded-lg" style="background: linear-gradient(to bottom right, rgba(235, 255, 0, 0.3), rgba(235, 255, 0, 0.1)); border: 1px solid rgba(235, 255, 0, 0.2);">
                                            @if($section->icon)
                                                {!! $section->icon !!}
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #ebff00;" class="sm:w-5 sm:h-5">
                                                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
                                                    <path d="M9 9h.01"></path>
                                                    <path d="M15 9h.01"></path>
                                                    <path d="M12 15h.01"></path>
                                                </svg>
                                            @endif
                                        </div>
                                    </div>
                                    <div>
                                        <h2 class="text-base sm:text-xl font-bold bg-clip-text text-transparent" style="background: linear-gradient(to right, #ebff00, #ebff00, #ebff00); -webkit-background-clip: text; background-clip: text; color: transparent;">{{ $section->title }}</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="horizontal-scroll flex overflow-x-auto gap-2 pb-4 scrollbar-hide" style="scrollbar-width: none; -ms-overflow-style: none;">
                            @foreach($canliCasino as $oyun)
                                <div class="oyun-card bg-zinc-900/90 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 border border-zinc-800 flex-shrink-0 relative">
                                    <a href="{{ $oyun->url ?? '#' }}" target="_blank" class="block">
                                        <div class="w-[140px] h-[250px] overflow-hidden rounded-2xl relative">
                                            <!-- Loading Skeleton with Shimmer Effect -->
                                            <div class="image-skeleton w-full h-full bg-gradient-to-br from-zinc-700 to-zinc-800 relative overflow-hidden">
                                                <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-30"></div>
                                                
                                                <!-- Shimmer Animation -->
                                                <div class="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
                                                
                                                <!-- Loading Spinner -->
                                                <div class="absolute inset-0 flex items-center justify-center">
                                                    <div class="relative">
                                                        <div class="w-8 h-8 border-2 rounded-full animate-spin" style="border-color: rgba(235, 255, 0, 0.3); border-top-color: #ebff00;"></div>
                                                        <div class="absolute inset-0 w-8 h-8 border-2 rounded-full animate-spin" style="border-color: rgba(235, 255, 0, 0.1); border-top-color: rgba(235, 255, 0, 0.5); animation-delay: -0.5s;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Actual Image (hidden initially) -->
                                            <img src="{{ asset($oyun->gorsel) }}" alt="canlı casino" class="w-full h-full object-cover opacity-0 transition-opacity duration-500 absolute inset-0" 
                                                 onload="this.style.opacity='1'; this.previousElementSibling.style.display='none';">
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
                @break

        @endswitch
    @endforeach


    @php $activeHomeNames = $homeSections->pluck('name')->toArray(); @endphp

    @if(in_array('mobil_betewin_tema', $activeHomeNames))
    <section class="pbx-mobile-lite" aria-label="Mobil vitrin">
        <div class="pbx-lite-topbar">
            <img src="{{ asset($settings->logo ?? 'mario-assets/images/logo.png') }}" alt="Mariobet">
            <div class="pbx-lite-actions">
                @guest
                    <a href="/login" class="login">Giriş Yap</a>
                    <a href="/register" class="join">Kayıt Ol</a>
                @else
                    <a href="/hesabim" class="join">Hesabım</a>
                @endguest
                <button type="button" class="menu"><i class="fa-solid fa-bars"></i></button>
            </div>
        </div>
        <div class="pbx-lite-tabs">
            <a href="/sports">Canlı Bahis</a><a href="/casino">Tüm Oyunlar</a><a href="/live-casino">Canlı Casino</a><a href="/slots">Slot</a>
        </div>
        <div class="pbx-lite-hero">
            <div><span>Yeni Oyun</span><b>EXTREME<br>PAW</b><small>Mariobet'e özel eğlence</small></div>
        </div>
        <div class="pbx-lite-cats">
            <a href="/sports"><i class="fa-solid fa-futbol"></i><b>Spor Bahisleri</b></a>
            <a href="/live-casino"><i class="fa-solid fa-user-tie"></i><b>Canlı Bahisler</b></a>
            <a href="/casino"><i class="fa-solid fa-dice"></i><b>Casino</b></a>
        </div>
        <div class="pbx-lite-card">
            <div class="pbx-lite-card-head"><b>Yüksek Kazançlar</b><div><span class="active">Slot</span><span>Canlı Casino</span></div></div>
            <div class="pbx-lite-win"><img src="{{ asset('images/games/sweet-bonanza.webp') }}" onerror="this.src='{{ asset('images/bonuses/hosgeldin-bonusu.png') }}'" alt="Sweet Bonanza"><div><b>Sweet Bonanza</b><small>Mariobet</small></div><strong>₺757,585.00</strong></div>
        </div>
        <div class="pbx-lite-card">
            <div class="pbx-lite-card-head"><b>Mariobet Originals</b></div>
            <div class="pbx-lite-originals"><a href="/casino"><span>EXCLUSIVE</span><b>CHICKEN</b><small>23 Oyuncu</small></a><a href="/casino"><span>HOT</span><b>YÜKSEK RTP</b><small>37 Oyuncu</small></a></div>
        </div>
        <div class="pbx-lite-card">
            <div class="pbx-lite-card-head"><b>Editörün Seçimi</b></div>
            <div class="pbx-lite-picks"><a href="/casino"><img src="{{ asset('images/games/sweet-bonanza.webp') }}" onerror="this.src='{{ asset('images/bonuses/hosgeldin-bonusu.png') }}'" alt="Sweet Bonanza"><span>Sweet Bonanza</span></a><a href="/casino"><img src="{{ asset('images/games/gates-of-olympus.webp') }}" onerror="this.src='{{ asset('mario-assets/images/banner-slot.png') }}'" alt="Gates"><span>Gates of Olympus</span></a></div>
        </div>
        <div class="pbx-lite-card pbx-lite-sports-skeleton"><div class="pbx-lite-card-head"><b>Spor Bahisleri</b><a href="/sports">Tümünü Gör</a></div><div></div><i></i></div>
        <div class="pbx-lite-app"><div><b>Uygulamayı İndir</b><a>Google Play</a></div><span></span></div>
        <div class="pbx-lite-aff"><b>Haftalık Kazanç Programı</b><p>Her hafta, kesintisiz affiliate kazanç sistemi ile hemen kazanmaya başlayın!</p><a href="/affiliate">Ortağımız Ol!</a></div>
        <div class="pbx-lite-card"><div class="pbx-lite-card-head"><b>Promosyonlar</b><a href="/bonus">Tümünü Gör</a></div><img class="pbx-lite-promo" src="{{ asset('images/bonuses/hosgeldin-bonusu.png') }}" alt="Promosyon"></div>
        <div class="pbx-lite-card"><div class="pbx-lite-card-head"><b>Sağlayıcılar</b></div><div class="pbx-lite-providers"><span>PP</span><span>EGT</span><span>PG</span><span>EV</span></div></div>
    </section>
    @endif

    @if(in_array('canli_blackjack_vitrin', $activeHomeNames) || in_array('spor_vitrin', $activeHomeNames))
    <section class="px-4 py-3 pbx-home-showcase">
        <div class="max-w-7xl mx-auto space-y-4">
            @if(in_array('canli_blackjack_vitrin', $activeHomeNames))
            <div class="pbx-showcase-head">
                <div>
                    <span class="pbx-kicker">Canlı Casino</span>
                    <h2>Canlı Blackjack</h2>
                </div>
                <a href="/live-casino" class="pbx-section-link">Tüm Blackjack Oyunları <i class="fa-solid fa-chevron-right"></i></a>
            </div>
            <div class="pbx-blackjack-row">
                @php
                    $blackjackCards = [
                        ['Blackjack Lobby', 'Evolution', 'https://intobet442.com/api/file-service/v1/files/018c3f3c-44e2-7970-8e5d-ace7b0de0cd5?width=200'],
                        ['Always 6 Blackjack Lobby', 'Evolution', 'https://intobet442.com/api/file-service/v1/files/019d2e5e-ffce-72b4-a1b6-c334d2cf6c04?width=200'],
                        ['Blackjack VIP', 'Pragmatic', 'https://intobet442.com/api/file-service/v1/files/cadce354-82c7-49c6-a72e-33b1a20a454b?width=200'],
                        ['Infinite Blackjack', 'Evolution', 'https://intobet442.com/api/file-service/v1/files/0196edda-cacb-7c54-b8d3-4daeda258440?width=200'],
                    ];
                @endphp
                @foreach($blackjackCards as $card)
                    <a href="/live-casino" class="pbx-live-card">
                        <div class="pbx-live-image"><img src="{{ $card[2] }}" alt="{{ $card[0] }}" loading="lazy"><span class="pbx-provider">{{ $card[1] }}</span></div>
                        <div class="pbx-live-title">{{ $card[0] }}</div>
                    </a>
                @endforeach
            </div>
            @endif

            @if(in_array('spor_vitrin', $activeHomeNames))
            <div class="pbx-sports-demo">
                <aside class="pbx-sports-menu">
                    <div class="pbx-menu-clock"><i class="fa-regular fa-clock"></i> Yaklaşan</div>
                    <div class="pbx-time-tabs"><span>Hepsi</span><span>1s</span><span>8s</span><span>Bugün</span></div>
                    <p>Popüler</p><a href="/sports"><i class="fa-solid fa-fire"></i> Dünya Kupası Özel</a><a href="/sports"><i class="fa-solid fa-futbol"></i> Futbol</a><a href="/sports"><i class="fa-solid fa-basketball"></i> Basketbol</a><a href="/sports"><i class="fa-solid fa-table-tennis-paddle-ball"></i> Tenis</a>
                </aside>
                <main class="pbx-sports-board">
                    <div class="pbx-sports-tabs"><span class="active"><i class="fa-solid fa-futbol"></i> Bahis</span><span><i class="fa-regular fa-circle-play"></i> Canlı</span></div>
                    <div class="pbx-sports-hero"><div><b>Mariobet VIP</b><small>Özel oranlar ve hızlı kupon</small></div></div>
                    <div class="pbx-sports-filter"><span>HEPSİ</span><span>Ekstra Oran</span><span>Hazır Bahisler</span></div>
                    <div class="pbx-odds-grid">
                        @foreach([['Brezilya','Norveç','3.24'],['İspanya','Fransa','2.18'],['Arjantin','Portekiz','2.70']] as $match)
                        <a href="/sports" class="pbx-odd-card"><small>05 Tem 23:00 · FIFA Dünya Kupası</small><strong>{{ $match[0] }} VS {{ $match[1] }}</strong><div><span>Oyuncu gol atar</span><b>{{ $match[2] }}</b></div></a>
                        @endforeach
                    </div>
                </main>
                <aside class="pbx-coupon-box"><strong>Bahis Kuponu (0)</strong><div><i class="fa-regular fa-rectangle-list"></i><p>Bahis kuponunuz boş. Bir karşılaşma seçip orana tıklayın.</p></div></aside>
            </div>
            @endif
        </div>
    </section>
    @endif

    <style>
        .pbx-home-showcase{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.28));}.pbx-showcase-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#fff}.pbx-showcase-head h2{font-size:22px;font-weight:800;line-height:1}.pbx-kicker{font-size:12px;color:#ebff00;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.pbx-section-link{font-size:13px;color:#ebff00;font-weight:700;white-space:nowrap}.pbx-blackjack-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}.pbx-blackjack-row::-webkit-scrollbar{display:none}.pbx-live-card{min-width:220px;background:#081f1a;border:1px solid rgba(235,255,0,.12);border-radius:8px;overflow:hidden;transition:.2s;box-shadow:0 12px 30px rgba(0,0,0,.22)}.pbx-live-card:hover{transform:translateY(-3px);border-color:rgba(235,255,0,.45)}.pbx-live-image{height:118px;position:relative;background:#050807;overflow:hidden}.pbx-live-image img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s}.pbx-live-card:hover .pbx-live-image img{transform:scale(1.04)}.pbx-live-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.18))}.pbx-provider{position:absolute;right:8px;top:6px;background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:800;padding:3px 7px;border-radius:3px;text-transform:uppercase;z-index:2}.pbx-live-title{height:34px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;background:#004b3d}.pbx-sports-demo{display:grid;grid-template-columns:230px minmax(0,1fr)300px;gap:0;background:#151519;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;color:#fff}.pbx-sports-menu{background:#39383f;padding:14px}.pbx-menu-clock{font-weight:800;font-size:13px}.pbx-time-tabs{display:flex;gap:17px;font-size:10px;color:#e1e1e1;margin:12px 0 18px}.pbx-sports-menu p{color:#cfcfcf;margin:10px 0;font-size:15px}.pbx-sports-menu a{display:flex;align-items:center;gap:9px;color:#fff;padding:10px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,.06)}.pbx-sports-board{background:#111215}.pbx-sports-tabs{display:grid;grid-template-columns:1fr 1fr;background:#333239;margin:20px;border-radius:999px;overflow:hidden}.pbx-sports-tabs span{padding:12px;text-align:center;font-weight:800;color:#ddd}.pbx-sports-tabs .active{background:#43a174;color:#fff}.pbx-sports-hero{display:grid;grid-template-columns:1fr;gap:0;margin:0 20px}.pbx-sports-hero>div{min-height:145px;padding:24px;background:linear-gradient(135deg,#0d3b2c,#47b47e);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.pbx-sports-hero b{font-size:26px;line-height:1.05}.pbx-sports-hero small{font-size:13px;color:#eaffea}.pbx-sports-filter{display:flex;gap:22px;background:#43a174;padding:12px 18px;font-weight:800;font-size:13px}.pbx-odds-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px}.pbx-odd-card{background:#474b56;border:1px solid rgba(55,255,165,.45);border-radius:6px;padding:10px;color:#fff}.pbx-odd-card small{color:#e5e5e5;font-size:10px}.pbx-odd-card strong{display:block;font-size:13px;margin:5px 0 20px}.pbx-odd-card div{display:flex;justify-content:space-between;align-items:center;gap:8px}.pbx-odd-card span{color:#ddd;font-size:12px}.pbx-odd-card b{background:#252832;color:#39ff8f;padding:10px 18px;border-radius:2px}.pbx-coupon-box{background:#161619;border-left:1px solid rgba(255,255,255,.08);padding:14px}.pbx-coupon-box strong{display:block;color:#39ff8f;border-bottom:2px solid #39ff8f;padding-bottom:10px;font-size:13px}.pbx-coupon-box div{height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#cfcfcf;font-size:12px;gap:12px}.pbx-coupon-box i{font-size:36px;color:#555}@media(max-width:1100px){.pbx-sports-demo{grid-template-columns:190px minmax(0,1fr)}.pbx-coupon-box{display:none}}@media(max-width:760px){.pbx-home-showcase{display:none}.pbx-mobile-lite{display:block}.pbx-showcase-head{align-items:flex-start}.pbx-sports-demo{grid-template-columns:1fr}.pbx-sports-menu{display:none}.pbx-sports-hero{grid-template-columns:1fr}.pbx-odds-grid{grid-template-columns:1fr}.pbx-live-card{min-width:190px}.pbx-live-image{height:105px}}@media(min-width:761px){.pbx-mobile-lite{display:none!important}}
        .pbx-mobile-lite{background:#f0eff7;color:#071431;padding:0 12px 74px}.pbx-lite-topbar{height:54px;background:#06163a;display:flex;align-items:center;justify-content:space-between;margin:0 -12px;padding:0 12px;position:sticky;top:0;z-index:30}.pbx-lite-topbar img{max-width:112px;max-height:32px;object-fit:contain}.pbx-lite-actions{display:flex;align-items:center;gap:6px}.pbx-lite-actions a,.pbx-lite-actions button{border:0;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:900;color:#fff}.pbx-lite-actions .login{background:#ff7a00}.pbx-lite-actions .join{background:#6555ff}.pbx-lite-actions .menu{background:#14234d}.pbx-lite-tabs{display:flex;gap:0;overflow:auto;background:#06163a;margin:0 -12px;padding:0 10px 8px}.pbx-lite-tabs a{min-width:max-content;color:#fff;padding:8px 14px;border-left:1px solid rgba(255,255,255,.08);font-size:12px}.pbx-lite-hero{height:168px;border-radius:0;background:linear-gradient(110deg,#06215a,#071434 58%,#ff8a00);margin:0 -12px 12px;padding:20px;display:flex;align-items:center;overflow:hidden;position:relative}.pbx-lite-hero:after{content:"";position:absolute;right:16px;bottom:-8px;width:120px;height:140px;background:radial-gradient(circle,#f3c09b 0 18%,transparent 19%),linear-gradient(145deg,#a96d43,#2a160d);clip-path:polygon(38% 0,72% 8%,88% 38%,78% 100%,18% 100%,8% 36%);opacity:.95}.pbx-lite-hero span{background:#ff8a00;color:#071431;border-radius:4px;padding:3px 6px;font-size:10px;font-weight:900}.pbx-lite-hero b{display:block;color:#fff;font-size:30px;line-height:.95;margin:8px 0}.pbx-lite-hero small{color:#ffb23e;font-size:10px;font-weight:700}.pbx-lite-cats{display:flex;gap:8px;overflow:auto;margin-bottom:10px}.pbx-lite-cats a{min-width:108px;height:88px;border-radius:8px;background:linear-gradient(135deg,#0b255c,#0d1738);color:#fff;padding:12px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 20px rgba(5,20,60,.16)}.pbx-lite-cats i{font-size:18px;color:#ff8a00}.pbx-lite-cats b{font-size:12px;line-height:1.1}.pbx-lite-card{background:#fff;border-radius:8px;padding:10px;margin:9px 0;box-shadow:0 6px 16px rgba(0,0,0,.05)}.pbx-lite-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.pbx-lite-card-head b{font-size:13px}.pbx-lite-card-head a{font-size:11px;background:#f3f3f8;padding:6px 8px;border-radius:6px}.pbx-lite-card-head div{display:flex;gap:5px;overflow:hidden}.pbx-lite-card-head span{background:#20232e;color:#fff;border-radius:6px;padding:7px 10px;font-size:10px}.pbx-lite-card-head span.active{background:#ff7a00}.pbx-lite-win{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:8px;border:1px solid #eee;border-radius:8px;padding:8px}.pbx-lite-win img{width:54px;height:44px;border-radius:7px;object-fit:cover}.pbx-lite-win b{font-size:12px}.pbx-lite-win small{display:block;color:#697085;font-size:10px}.pbx-lite-win strong{font-size:11px;color:#071431}.pbx-lite-originals,.pbx-lite-picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pbx-lite-originals a{height:104px;border-radius:8px;padding:9px;background:linear-gradient(135deg,#674cff,#8d67ff);color:#fff;display:flex;flex-direction:column;justify-content:space-between}.pbx-lite-originals a:nth-child(2){background:linear-gradient(135deg,#2b245b,#6c4bd9)}.pbx-lite-originals span{font-size:9px;background:#ff3f90;width:max-content;padding:2px 5px;border-radius:4px}.pbx-lite-originals b{font-size:17px}.pbx-lite-originals small{font-size:10px;background:#111827;width:max-content;padding:2px 6px;border-radius:99px}.pbx-lite-picks a{position:relative;overflow:hidden;border-radius:8px;background:#111;color:#fff}.pbx-lite-picks img{width:100%;height:108px;object-fit:cover;display:block}.pbx-lite-picks span{position:absolute;left:7px;bottom:7px;font-weight:800;font-size:12px;text-shadow:0 1px 4px #000}.pbx-lite-sports-skeleton>div:last-child{height:176px;border-radius:8px;background:#d3d1dc}.pbx-lite-sports-skeleton i{display:block;float:right;width:34px;height:176px;background:#d3d1dc;border-radius:8px;margin-top:-176px}.pbx-lite-app,.pbx-lite-aff{border-radius:8px;background:#06163a;color:#fff;margin:10px 0;padding:14px;min-height:132px;position:relative;overflow:hidden}.pbx-lite-app a,.pbx-lite-aff a{display:inline-block;background:#fff;color:#071431;border-radius:6px;padding:9px 12px;font-weight:900;font-size:12px;margin-top:16px}.pbx-lite-app span{position:absolute;right:14px;bottom:-8px;width:86px;height:118px;border-radius:18px;background:linear-gradient(#1d2c59,#071431);border:4px solid #313b56}.pbx-lite-aff{background:radial-gradient(circle at 86% 50%,rgba(255,122,0,.4),transparent 28%),#06163a}.pbx-lite-aff p{font-size:12px;max-width:220px;margin-top:12px}.pbx-lite-promo{width:100%;height:auto;border-radius:8px}.pbx-lite-providers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pbx-lite-providers span{height:50px;border-radius:7px;background:#efedf7;color:#ff7a00;font-weight:900;display:flex;align-items:center;justify-content:center}
    </style>

</div>

<!-- Duyuru Modal -->
@if($duyurular->count() > 0)
<div id="duyuruModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 hidden">
    <div class="relative max-w-md w-full mx-4">
        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-zinc-900/50 via-zinc-900/30 to-transparent border border-zinc-800/50 shadow-2xl">
            <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-70"></div>
            <div class="absolute inset-0" style="background: linear-gradient(to right, rgba(235, 255, 0, 0.05), transparent, transparent);"></div>
            
            <div class="relative p-6">
                <!-- Close Button -->
                <button onclick="closeDuyuruModal()" class="absolute top-4 right-4 text-zinc-400 hover:text-white transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
                
                <!-- Duyuru Content -->
                <div class="text-center mb-6">
                    
                    @foreach($duyurular as $duyuru)
                    <div class="duyuru-content" data-duyuru-id="{{ $duyuru->id }}">
                        @if($duyuru->resim)
                        <div class="mb-4">
                            <img src="{{ asset($duyuru->resim) }}" alt="Duyuru" class="w-full max-h-64 object-contain rounded-lg bg-zinc-800/30">
                        </div>
                        @endif
                        
                        <h3 class="text-xl font-bold bg-gradient-to-r from-red-500 via-red-400 to-red-500 bg-clip-text text-transparent mb-3">{{ $duyuru->konu }}</h3>
                        
                        @if($duyuru->aciklama)
                        <div class="text-zinc-300 text-sm leading-relaxed mb-6">
                            {!! nl2br(e($duyuru->aciklama)) !!}
                        </div>
                        @endif
                        
                        @if($duyuru->url)
                        <a href="{{ $duyuru->url }}" class="inline-block mb-4 px-4 py-2 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-400 hover:to-red-500 text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 text-sm">
                            Detayları Gör
                        </a>
                        @endif
                    </div>
                    @endforeach
                </div>
                
                <!-- Action Buttons -->
                <div class="flex gap-3">
                    <button onclick="dontShowAgain()" class="flex-1 px-3 py-2 bg-zinc-800/50 hover:bg-zinc-700/50 text-zinc-300 hover:text-white rounded-lg transition-all duration-300 border border-zinc-700/50 text-sm">
                        <svg class="w-3 h-3 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path>
                        </svg>
                        Bir Daha Gösterme
                    </button>
                    <button onclick="closeDuyuruModal()" class="flex-1 px-3 py-2 bg-gradient-to-br from-red-500/20 via-red-500/10 to-transparent border border-red-500/30 hover:border-red-500/50 text-white rounded-lg transition-all duration-300 text-sm">
                        Kapat
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
// Initialize Swiper
document.addEventListener('DOMContentLoaded', function() {
    const swiperContainer = document.querySelector('.home-slider');
    if (swiperContainer && swiperContainer.querySelectorAll('.swiper-slide').length > 1) {
        // Scroll pozisyonunu korumak için global değişken
        let savedScrollPosition = 0;
        let isScrolling = false;

        const swiper = new Swiper('.home-slider', {
            loop: false, // Loop'u devre dışı bırak
            autoplay: {
                delay: 4000, // 4 saniye
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
                stopOnLastSlide: true // Son slide'da dur
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            effect: 'slide',
            speed: 600,
            // Slider'ın sayfa kaydırılırken üstte kalmasını engelle
            observer: true,
            observeParents: true,
            // Slider'ın container'ının pozisyonunu kontrol et
            watchOverflow: true,
            // Slider'ın otomatik değişiminde sayfayı en üste atmasını engelle
            preventInteractionOnTransition: false,
            // Slider'ın pozisyonunu sabitle
            allowTouchMove: true,
            // Slider'ın responsive davranışını iyileştir
            breakpoints: {
                320: {
                    slidesPerView: 1,
                    spaceBetween: 0
                },
                768: {
                    slidesPerView: 1,
                    spaceBetween: 0
                },
                1024: {
                    slidesPerView: 1,
                    spaceBetween: 0
                }
            }
        });



        // Basit scroll pozisyonu koruma sistemi
        let currentScrollPos = 0;

        // Scroll pozisyonunu kaydet
        function saveScrollPos() {
            currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;
        }

        // Scroll pozisyonunu geri yükle
        function restoreScrollPos() {
            if (currentScrollPos > 0) {
                window.scrollTo(0, currentScrollPos);
            }
        }

        // Slider değişiminde pozisyonu koru
        swiper.on('slideChange', function() {
            saveScrollPos();
            setTimeout(restoreScrollPos, 100);
        });

        // Manuel loop geçişinde pozisyonu koru
        swiper.on('slideChangeTransitionEnd', function() {
            setTimeout(restoreScrollPos, 50);
        });

        // Autoplay başladığında pozisyonu kaydet
        swiper.on('autoplayStart', function() {
            saveScrollPos();
        });

        // Autoplay durduğunda pozisyonu geri yükle
        swiper.on('autoplayStop', function() {
            setTimeout(restoreScrollPos, 100);
        });


    }


    
    // Initialize duyuru check
    checkDuyuru();
});

// Global Duyuru Modal Functions
function showDuyuruModal() {
    const modal = document.getElementById('duyuruModal');
    if (modal) {
        modal.classList.remove('hidden');
        modal.classList.add('animate-fade-in');
    }
}

function closeDuyuruModal() {
    const modal = document.getElementById('duyuruModal');
    if (modal) {
        modal.classList.add('hidden');
        // Set session storage to not show again this session
        sessionStorage.setItem('duyuruClosed', 'true');
    }
}

function dontShowAgain() {
    const modal = document.getElementById('duyuruModal');
    if (modal) {
        modal.classList.add('hidden');
        // Set localStorage to never show again
        localStorage.setItem('duyuruDontShow', 'true');
    }
}

// Check if duyuru should be shown
function checkDuyuru() {
    const dontShow = localStorage.getItem('duyuruDontShow');
    const sessionClosed = sessionStorage.getItem('duyuruClosed');
    
    if (!dontShow && !sessionClosed) {
        // Show duyuru after 2 seconds
        setTimeout(() => {
            showDuyuruModal();
        }, 2000);
    }
}
</script>

<style>
.swiper-container,
.home-slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100%;
    overflow: hidden;
}

.swiper-button-next,
.swiper-button-prev {
    color: #ef4444;
}

.swiper-pagination-bullet {
    background: #ef4444;
}

.swiper-pagination-bullet-active {
    background: #ef4444;
}

.horizontal-scroll::-webkit-scrollbar {
    display: none;
}
.horizontal-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.betting-card {
    box-shadow: 0 2px 12px 0 #000a, 0 1.5px 4px 0 #2228;
    border-radius: 18px;
    border: 1.5px solid #232323;
    background: linear-gradient(135deg, #18181b 80%, #232323 100%);
    transition: box-shadow 0.2s, transform 0.2s;
}
.betting-card:hover {
    box-shadow: 0 4px 24px 0 #ef4444cc, 0 2px 8px 0 #222a;
    border-color: #ef4444;
}
.aspect-w-16.aspect-h-9 {
    aspect-ratio: 16/9;
}
.oyun-card {
    min-width: 140px;
    max-width: 140px;
    height: 250px;
    border-radius: 22px;
    box-shadow: 0 2px 12px 0 #000a, 0 1.5px 4px 0 #2228;
    border: 1.5px solid #232323;
    background: linear-gradient(135deg, #18181b 80%, #232323 100%);
    transition: box-shadow 0.2s, transform 0.2s;
}
.oyun-card:hover {
    box-shadow: 0 4px 24px 0 #ef4444cc, 0 2px 8px 0 #222a;
    border-color: #ef4444;
}

/* Shimmer Animation */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Swiper Styles */
.home-slider .swiper-wrapper {
    display: flex;
}

.home-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.swiper-pagination-bullet {
    background: #ef4444 !important;
}

.swiper-pagination-bullet-active {
    background: #ef4444 !important;
}
@media (max-width: 640px) {
    .oyun-card {
        min-width: 90px;
        max-width: 90px;
        height: 160px;
    }
    .oyun-card > a > div {
        width: 90px !important;
        height: 160px !important;
    }
}

/* Son Kazananlar Scroll Animation */
@keyframes scroll-winners {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll-winners {
    animation: scroll-winners 45s linear infinite;
    animation-play-state: running;
}

.animate-scroll-winners:hover {
    animation-play-state: paused;
}

/* Recent Winners Container */
.recent-winners-scroll {
    width: max-content;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Home slider initializing...');
    console.log('Slider element:', document.querySelector('.home-slider'));
    
    // Swiper initialization for home slider (casino style)
    const homeSlider = new Swiper('.home-slider', {
        loop: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
            waitForTransition: true
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        effect: 'slide',
        speed: 600,
        observer: true,
        observeParents: true,
        watchOverflow: true,
        preventInteractionOnTransition: false,
        allowTouchMove: true,
        breakpoints: {
            320: {
                slidesPerView: 1,
                spaceBetween: 0
            },
            768: {
                slidesPerView: 1,
                spaceBetween: 0
            },
            1024: {
                slidesPerView: 1,
                spaceBetween: 0
            }
        }
    });

    console.log('Home slider initialized:', homeSlider);
    console.log('Slider slides count:', homeSlider.slides.length);

    // Manual test için 3 saniye sonra bir sonraki slide'a geç
    setTimeout(() => {
        console.log('Testing slide change...');
        homeSlider.slideNext();
    }, 3000);

    // Scroll pozisyonunu sürekli takip et (casino style)
    let lastScrollPosition = 0;
    let scrollInterval;

    function saveScrollPosition() {
        lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    }

    function restoreScrollPosition() {
        if (lastScrollPosition > 0) {
            window.scrollTo({
                top: lastScrollPosition,
                behavior: 'instant'
            });
        }
    }

    // Her 100ms'de scroll pozisyonunu kaydet
    scrollInterval = setInterval(saveScrollPosition, 100);

    // Slider'ın otomatik değişiminde sayfayı en üste atmasını engelle
    homeSlider.on('slideChange', function() {
        saveScrollPosition();
        setTimeout(restoreScrollPosition, 10);
    });

    // Tüm transition event'lerini yakala
    homeSlider.on('slideChangeTransitionStart', function() {
        saveScrollPosition();
        setTimeout(restoreScrollPosition, 50);
    });

    homeSlider.on('slideChangeTransitionEnd', function() {
        saveScrollPosition();
        setTimeout(restoreScrollPosition, 50);
    });

    // Sayfa kapanmadan önce interval'i temizle
    window.addEventListener('beforeunload', function() {
        if (scrollInterval) {
            clearInterval(scrollInterval);
        }
    });
});
</script>



<!-- Codex mobile overlap/banner fix 20260711 -->
<style>
@media (max-width:767px){
 html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;background:#20242d!important;}
 body>nav.fixed.top-0,.mario-main-nav{width:100vw!important;max-width:100vw!important;left:0!important;right:0!important;}
 body>nav.fixed.top-0{height:58px!important;min-height:58px!important;}
 .mario-main-nav{top:58px!important;height:52px!important;overflow-x:auto!important;overflow-y:hidden!important;z-index:55!important;background:#252934!important;border-top:2px solid #f5a000!important;border-bottom:2px solid #f5a000!important;}
 main,.main-content,.content-wrapper,.container,.max-w-7xl,.mx-auto,section,.pbx-mobile-lite,.pbx-mobile-lite *{max-width:100vw!important;box-sizing:border-box!important;}
 main{padding-top:110px!important;overflow-x:hidden!important;background:#20242d!important;}
 .pbx-lite-topbar,.pbx-lite-tabs,.pbx-lite-topbar *,.pbx-lite-tabs *{display:none!important;height:0!important;min-height:0!important;max-height:0!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important;margin:0!important;padding:0!important;}
 .pbx-mobile-lite{display:block!important;background:transparent!important;padding:0 12px 86px!important;margin:0 auto!important;overflow-x:hidden!important;}
 .home-slider,.casino-slider,.hero-slider{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;height:auto!important;min-height:0!important;margin:12px auto 10px!important;border-radius:12px!important;background:#171b24!important;overflow:hidden!important;border:1px solid rgba(245,160,0,.22)!important;box-shadow:none!important;}
 .home-slider img,.casino-slider img,.hero-slider img,img[alt="Slider"]{width:100%!important;max-width:100%!important;height:auto!important;max-height:158px!important;object-fit:contain!important;object-position:center center!important;display:block!important;background:#10131a!important;border-radius:10px!important;filter:none!important;transform:none!important;}
 .mario-promo-strip,.promo-strip,.category-banners,.quick-banners{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;margin:10px auto!important;padding:0!important;gap:8px!important;background:transparent!important;overflow:hidden!important;}
 .mario-promo-strip img,.promo-strip img,.category-banners img,.quick-banners img,img[alt="Alt Banner"]{width:100%!important;height:auto!important;max-height:82px!important;object-fit:contain!important;object-position:center!important;background:#171b24!important;border-radius:9px!important;filter:none!important;}
 .pbx-lite-hero{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;min-height:118px!important;height:118px!important;margin:10px auto!important;overflow:hidden!important;border-radius:12px!important;background:linear-gradient(115deg,#071b45 0%,#0b214d 58%,#f59b00 100%)!important;}
 .pbx-lite-hero h1,.pbx-lite-hero .title,.pbx-lite-hero strong{font-size:26px!important;line-height:1!important;word-break:keep-all!important;}
 .pbx-lite-card,.pbx-lite-section,.mario-section-card,.section-card{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;margin-left:auto!important;margin-right:auto!important;background:#20242d!important;color:#f5f6fb!important;border-color:rgba(255,255,255,.14)!important;overflow:hidden!important;}
 .game-grid,.casino-games-grid,.games-grid{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;margin-left:auto!important;margin-right:auto!important;overflow:hidden!important;}
 .support-widget,.live-chat-button,[class*="support"]{z-index:58!important;}
 .bottom-nav,.mobile-bottom-nav,nav.fixed.bottom-0{z-index:60!important;}
}
</style>

@endsection