<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @stack('head')
    <title>@yield('title', ($settings->site_adi ?? 'BetNow') . ' - Türkiye\'nin En Güvenilir Online Casino Platformu')</title>
    
    <!-- Favicon -->
    @php
        $settings = \App\Models\Ayarlar::getSettings();
        $faviconPath = $settings && $settings->favicon ? $settings->favicon : 'favicon.ico';
    @endphp
    <link rel="icon" type="image/x-icon" href="{{ asset($faviconPath) }}">
    <link rel="shortcut icon" type="image/x-icon" href="{{ asset($faviconPath) }}">
    <link rel="apple-touch-icon" href="{{ asset($faviconPath) }}">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    
    <!-- Custom CSS -->
    <style>
        .casino-gradient {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .winner-animation {
            animation: winner-glow 2s ease-in-out infinite alternate;
        }
        
        @keyframes winner-glow {
            from { box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); }
            to { box-shadow: 0 0 30px rgba(251, 191, 36, 0.6); }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .game-card {
            transition: all 0.3s ease;
        }
        
        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(251, 191, 36, 0.3);
        }

        /* LiveChat Widget Gizleme - Tüm durumlar için */
        #chat-widget-container,
        [data-testid="chat-widget"],
        .lc-chat-widget,
        iframe[src*="livechatinc.com"],
        div[id*="livechat"],
        div[class*="livechat"],
        div[data-testid*="chat"],
        .livechat-widget,
        #livechat-widget,
        [id*="LiveChatWidget"],
        [class*="LiveChatWidget"],
        div[style*="position: fixed"][style*="bottom"],
        div[style*="position: fixed"][style*="right"] {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transform: translateX(1000px) !important;
        }

        /* LiveChat Widget Gösterme - Sadece açık durumda */
        .show-livechat #chat-widget-container,
        .show-livechat [data-testid="chat-widget"],
        .show-livechat .lc-chat-widget,
        .show-livechat iframe[src*="livechatinc.com"],
        .show-livechat div[id*="livechat"],
        .show-livechat div[class*="livechat"],
        .show-livechat div[data-testid*="chat"],
        .show-livechat .livechat-widget,
        .show-livechat #livechat-widget,
        .show-livechat [id*="LiveChatWidget"],
        .show-livechat [class*="LiveChatWidget"] {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            transform: translateX(0) !important;
        }

        /* LiveChat minimize durumunda gizleme */
        .show-livechat div[style*="position: fixed"][style*="bottom"]:not([style*="height: 100%"]),
        .show-livechat div[style*="position: fixed"][style*="right"]:not([style*="height: 100%"]) {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

        /* Yatay kaydırma scrollbar gizleme */
        .scrollbar-hide {
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
            scrollbar-width: none;  /* Firefox */
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;  /* Safari and Chrome */
        }

        /* Yatay kaydırma için ek stiller */
        .horizontal-scroll {
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }

        /* Oyun kartları için hover efektleri */
        .oyun-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
        }

        /* Payment scroll için özel stiller */
        .payment-scroll {
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }

        .payment-scroll::-webkit-scrollbar {
            display: none;
        }

        /* Temaya uygun custom scrollbar */
        .custom-scrollbar {
            scrollbar-width: thin;
            scrollbar-color: #222 #111;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            background: #111;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #222;
            border-radius: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #444;
        }

        /* Sol menü için zarif efektler */
        .sidebar-menu-item {
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .sidebar-menu-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: left 0.4s ease;
        }

        .sidebar-menu-item:hover::before {
            left: 100%;
        }

        .sidebar-menu-item:hover {
            transform: translateX(2px);
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .sidebar-icon-container {
            position: relative;
            transition: all 0.3s ease;
        }

        .sidebar-menu-item:hover .sidebar-icon-container {
            transform: scale(1.05);
        }

        /* Status indicator - daha zarif */
        .status-indicator {
            position: relative;
            animation: subtle-pulse 3s ease-in-out infinite;
        }

        @keyframes subtle-pulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        /* Floating animasyonu - daha hafif */
        .floating-menu {
            animation: gentle-float 8s ease-in-out infinite;
        }

        @keyframes gentle-float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-2px); }
        }

        /* Zarif glass effect */
        .glass-enhanced {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        /* Smooth text transition */
        .text-glow {
            transition: all 0.3s ease;
        }

        .sidebar-menu-item:hover .text-glow {
            color: rgba(255, 255, 255, 0.9);
        }

        /* Zarif ripple effect */
        .ripple-effect {
            position: relative;
            overflow: hidden;
        }

        .ripple-effect::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            transform: translate(-50%, -50%);
            transition: width 0.4s, height 0.4s;
        }

        .ripple-effect:hover::before {
            width: 200px;
            height: 200px;
        }


        /* ParadoxBet mobile soft light theme */
        @media (max-width: 767px) {
            :root {
                --pbx-bg: #071426;
                --pbx-surface: #0c2038;
                --pbx-card: #112b47;
                --pbx-border: #244867;
                --pbx-text: #f5f8ff;
                --pbx-muted: #a9b8cb;
                --pbx-navy: #061534;
                --pbx-orange: #ff7a00;
                --pbx-purple: #5147e8;
                --pbx-lime: #dfff00;
            }
            html, body {
                background: var(--pbx-bg) !important;
                color: var(--pbx-text) !important;
            }
            body > .fixed.inset-0 {
                display: none !important;
            }
            body > .flex.min-h-screen {
                background: var(--pbx-bg) !important;
                padding-bottom: 76px !important;
            }
            main, .min-h-screen {
                background: var(--pbx-bg) !important;
            }
            nav.fixed.top-0 {
                background: var(--pbx-navy) !important;
                border-color: rgba(255,122,0,.18) !important;
                box-shadow: 0 8px 24px rgba(6,21,52,.20) !important;
            }
            nav.fixed.top-0 a[href="/"] img {
                max-width: 116px !important;
                padding: 6px !important;
            }
            nav.fixed.top-0 a[href*="login"],
            nav.fixed.top-0 a[href*="giris"],
            nav.fixed.top-0 a[href*="register"] {
                border-radius: 10px !important;
                font-size: 12px !important;
                font-weight: 800 !important;
                padding: 9px 11px !important;
                line-height: 1.1 !important;
                box-shadow: 0 7px 14px rgba(0,0,0,.18) !important;
            }
            nav.fixed.top-0 a[href*="login"], nav.fixed.top-0 a[href*="giris"] {
                background: var(--pbx-orange) !important;
                color: #fff !important;
            }
            nav.fixed.top-0 a[href*="register"] {
                background: var(--pbx-purple) !important;
                color: #fff !important;
            }
            section {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }
            .swiper.home-slider {
                background: var(--pbx-card) !important;
                border: 1px solid var(--pbx-border) !important;
                border-radius: 14px !important;
                overflow: hidden !important;
                box-shadow: 0 10px 24px rgba(6,21,52,.10) !important;
            }
            .swiper.home-slider img {
                min-height: 122px !important;
                object-fit: cover !important;
                border-radius: 14px !important;
            }
            .swiper-button-next, .swiper-button-prev {
                width: 34px !important;
                height: 34px !important;
                border-radius: 12px !important;
                background: rgba(6,21,52,.76) !important;
                color: #fff !important;
            }
            .swiper-button-next:after, .swiper-button-prev:after {
                font-size: 14px !important;
            }
            .swiper-pagination-bullet {
                background: var(--pbx-orange) !important;
                opacity: .35 !important;
            }
            .swiper-pagination-bullet-active {
                opacity: 1 !important;
            }
            .bg-gradient-to-br, .bg-gradient-to-r {
                background-image: none !important;
            }
            .border-zinc-800\/50, .border-zinc-800\/60, .border-zinc-700\/50,
            .border-zinc-800, .border-zinc-700 {
                border-color: var(--pbx-border) !important;
            }
            .from-zinc-900\/50, .via-zinc-900\/30, .to-transparent,
            .from-zinc-900\/80, .via-zinc-900\/60, .to-zinc-900\/40,
            .from-zinc-900\/20, .via-zinc-900\/10, .to-zinc-900\/20,
            .from-zinc-900\/10, .via-zinc-900\/5, .to-zinc-900\/10 {
                background: transparent !important;
            }
            .rounded-xl, .rounded-lg {
                border-radius: 12px !important;
            }
            .game-card, .winner-card, .match-card,
            [class*="winner-card"], [class*="match-card"], [class*="game-card"] {
                background: var(--pbx-card) !important;
                color: var(--pbx-text) !important;
                border: 1px solid var(--pbx-border) !important;
                box-shadow: 0 8px 18px rgba(6,21,52,.075) !important;
            }
            h1, h2, h3, h4, .text-white, .text-zinc-300 {
                color: var(--pbx-text) !important;
            }
            .text-zinc-400, .text-zinc-500, p {
                color: var(--pbx-muted) !important;
            }
            [style*="#ebff00"] {
                color: var(--pbx-orange) !important;
            }
            .casino-gradient {
                background: linear-gradient(135deg,#ffb000,#ff7a00) !important;
            }
            footer, .footer, [class*="footer"] {
                background: #08182b !important;
                color: var(--pbx-text) !important;
            }
            footer *, .footer *, [class*="footer"] * {
                color: var(--pbx-text) !important;
            }
            footer img, .footer img, [class*="footer"] img {
                filter: none !important;
                opacity: .92 !important;
            }
            footer .bg-black, footer .bg-zinc-900, footer .bg-zinc-800,
            .footer .bg-black, .footer .bg-zinc-900, .footer .bg-zinc-800,
            [class*="footer"] .bg-black, [class*="footer"] .bg-zinc-900, [class*="footer"] .bg-zinc-800 {
                background: #0e243d !important;
                border-color: var(--pbx-border) !important;
            }
            [class*="social"] a, [class*="payment"] a, [class*="provider"] a {
                background: #122c48 !important;
                border: 1px solid var(--pbx-border) !important;
                box-shadow: 0 7px 16px rgba(6,21,52,.06) !important;
                color: var(--pbx-navy) !important;
            }
            .fixed.bottom-0, nav.fixed.bottom-0, .mobile-bottom-nav, [class*="bottom-nav"] {
                background: rgba(12,18,32,.96) !important;
                backdrop-filter: blur(14px) !important;
                border-top: 1px solid rgba(255,255,255,.08) !important;
                box-shadow: 0 -10px 24px rgba(6,21,52,.20) !important;
            }
            .fixed.bottom-0 *, nav.fixed.bottom-0 *, .mobile-bottom-nav *, [class*="bottom-nav"] * {
                color: #8b93a7 !important;
            }
            .fixed.bottom-0 .text-red-400, nav.fixed.bottom-0 .text-red-400,
            .mobile-bottom-nav .text-red-400, [class*="bottom-nav"] .text-red-400,
            .fixed.bottom-0 .text-red-500, nav.fixed.bottom-0 .text-red-500 {
                color: #ff4a61 !important;
            }
            .pbx-support-widget {
                left: 16px !important;
                right: auto !important;
                bottom: 92px !important;
                z-index: 44 !important;
            }
            .pbx-support-panel {
                left: 0 !important;
                right: auto !important;
                bottom: 60px !important;
                max-width: calc(100vw - 32px) !important;
            }
            .pbx-support-fab {
                width: 52px !important;
                height: 52px !important;
                border-radius: 18px !important;
                background: var(--pbx-lime) !important;
                color: var(--pbx-navy) !important;
                box-shadow: 0 10px 24px rgba(170,200,0,.24) !important;
            }
            .pbx-support-fab svg, .pbx-support-fab i {
                color: var(--pbx-text) !important;
            }
            .custom-scrollbar {
                scrollbar-color: #315573 var(--pbx-bg) !important;
            }
        }



        /* ParadoxBet mobile banner visibility fix */
        @media (max-width: 767px) {
            .swiper.home-slider,
            .swiper.home-slider .swiper-slide,
            .swiper.home-slider .swiper-wrapper {
                background: #071735 !important;
            }
            .swiper.home-slider {
                border: 2px solid rgba(7,23,53,.88) !important;
                box-shadow: 0 10px 22px rgba(7,23,53,.22), inset 0 0 0 1px rgba(255,255,255,.18) !important;
            }
            .swiper.home-slider img {
                filter: saturate(1.08) contrast(1.06) !important;
            }
            .swiper.home-slider .swiper-slide::after {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 12px;
                pointer-events: none;
                box-shadow: inset 0 0 0 1px rgba(7,23,53,.35), inset 0 -30px 55px rgba(7,23,53,.10);
            }
            section img[alt="Alt Banner Altı"],
            section a[href] img[alt="Alt Banner Altı"] {
                background: #071735 !important;
                border: 2px solid rgba(7,23,53,.72) !important;
                border-radius: 12px !important;
                box-shadow: 0 8px 18px rgba(7,23,53,.18) !important;
                filter: saturate(1.12) contrast(1.08) brightness(.96) !important;
            }
            section:has(img[alt="Alt Banner Altı"]) {
                background: transparent !important;
            }
            section:has(img[alt="Alt Banner Altı"]) .grid,
            section:has(img[alt="Alt Banner Altı"]) .flex {
                gap: 8px !important;
            }
            .swiper.home-slider + section .max-w-7xl,
            section:has(img[alt="Alt Banner Altı"]) .max-w-7xl {
                background: rgba(7,23,53,.04) !important;
                border-radius: 14px !important;
                padding: 2px !important;
            }
        }



        /* ParadoxBet mobile single bottom banner visibility */
        @media (max-width: 767px) {
            img[alt="Alt Banner"] {
                display: block !important;
                background: #071735 !important;
                border: 2px solid rgba(7,23,53,.82) !important;
                border-radius: 12px !important;
                box-shadow: 0 10px 22px rgba(7,23,53,.22), inset 0 0 0 1px rgba(255,255,255,.16) !important;
                filter: saturate(1.12) contrast(1.16) brightness(.82) !important;
            }
            a:has(img[alt="Alt Banner"]),
            div:has(> img[alt="Alt Banner"]) {
                display: block !important;
                background: #071735 !important;
                border-radius: 14px !important;
                padding: 4px !important;
                box-shadow: 0 10px 24px rgba(7,23,53,.16) !important;
            }
            a:has(img[alt="Alt Banner"])::after,
            div:has(> img[alt="Alt Banner"])::after {
                content: '';
                position: absolute;
                inset: 4px;
                border-radius: 12px;
                pointer-events: none;
                box-shadow: inset 0 0 0 1px rgba(7,23,53,.28), inset 0 -26px 46px rgba(7,23,53,.18);
            }
        }

        /* VIP card - clean, no effects */
    </style>
</head>
<body class="bg-black text-white">
    <!-- Background Effect -->
    <div class="fixed inset-0 bg-[url('/assets/hero-pattern/background-effect.webp')] opacity-30 pointer-events-none"></div>
    
    <div class="flex min-h-screen flex-col relative bg-black/60 overflow-x-hidden">
        <!-- Header -->
        <nav class="fixed top-0 w-full z-[60] bg-black/80 backdrop-blur-sm border-b" style="border-color: rgba(235, 255, 0, 0.2);">
            <div class="mx-auto px-2 sm:px-4">
                <div class="flex items-center justify-between h-12 sm:h-14">
                    <a class="text-2xl font-bold inline-block relative z-30 w-fit" href="/" style="color: #ebff00;">
                        @php
                            $settings = \App\Models\Ayarlar::getSettings();
                            $logoPath = $settings->logo ?? 'assets/logo/betnow.png';
                        @endphp
                        <img alt="Betnow" loading="lazy" width="200" height="200" decoding="async" 
                             style="width: {{ $settings->logo_size ?? 120 }}px; height: auto;"
                             class="h-auto p-2" src="{{ asset($logoPath) }}"/>
                    </a>
                    <div class="flex items-center gap-1.5 sm:gap-4">
                        <!-- User Menu -->
                        @auth('admin')
                        <div class="flex items-center space-x-3">
                            <div class="relative group">
                                <button type="button" class="px-3 py-1 rounded-lg font-bold text-sm flex items-center casino-gradient text-black shadow focus:outline-none">
                                    {{ Auth::guard('admin')->user()->parabirimi }}{{ number_format(Auth::guard('admin')->user()->bakiye, 2) }}
                                </button>
                                <div class="absolute left-1/2 -translate-x-1/2 mt-2 min-w-max bg-zinc-900 text-white text-xs rounded-lg px-3 py-2 shadow-lg border border-zinc-800 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto transition-all z-50">
                                    Çevrim Miktarı: <span class="font-bold">{{ Auth::guard('admin')->user()->cevrim ?? 0 }}</span>
                                </div>
                            </div>
                            <div class="relative group">
                                <button class="flex items-center space-x-2 px-3 py-1 bg-zinc-800/60 hover:bg-zinc-700/60 rounded-lg transition-colors">
                                    <div class="w-7 h-7 bg-red-500/20 rounded-full flex items-center justify-center">
                                        <span class="text-xs font-medium text-red-400">{{ substr(Auth::guard('admin')->user()->username, 0, 1) }}</span>
                                    </div>
                                    <span class="text-white font-medium text-sm">{{ Auth::guard('admin')->user()->username }}</span>
                                    <svg class="w-4 h-4 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <div class="absolute right-0 mt-2 w-56 bg-zinc-900 border border-zinc-800 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                                    <div class="py-2">
                                        @php
                                            $adminUser = Auth::guard('admin')->user();
                                            $last30Deposit = 0;
                                            if ($adminUser) {
                                                $last30Deposit = \DB::table('parayatir')
                                                    ->where('uye', $adminUser->id)
                                                    ->where('durum', 1)
                                                    ->whereBetween('tarih', [now()->subDays(30), now()])
                                                    ->sum('miktar');
                                            }
                                            $vipLevels = [
                                                ['key'=>'kraliyet','name'=>'Kraliyet','min'=>120000,'gradient'=>'from-yellow-500 to-red-500'],
                                                ['key'=>'titan','name'=>'Titan','min'=>85000,'gradient'=>'from-red-500 to-rose-600'],
                                                ['key'=>'zumrut','name'=>'Zümrüt','min'=>60000,'gradient'=>'from-emerald-500 to-emerald-600'],
                                                ['key'=>'yakut','name'=>'Yakut','min'=>40000,'gradient'=>'from-rose-500 to-rose-600'],
                                                ['key'=>'elmas','name'=>'Elmas','min'=>25000,'gradient'=>'from-cyan-400 to-blue-500'],
                                                ['key'=>'platin','name'=>'Platin','min'=>15000,'gradient'=>'from-zinc-300 to-zinc-500'],
                                                ['key'=>'altin','name'=>'Altın','min'=>10000,'gradient'=>'from-amber-400 to-amber-500'],
                                                ['key'=>'gumus','name'=>'Gümüş','min'=>5000,'gradient'=>'from-slate-300 to-slate-400'],
                                                ['key'=>'bronz','name'=>'Bronz','min'=>0,'gradient'=>'from-amber-700 to-amber-800'],
                                            ];
                                            $currentVip = $vipLevels[count($vipLevels)-1];
                                            foreach ($vipLevels as $lvl) {
                                                if ($last30Deposit >= $lvl['min']) { $currentVip = $lvl; break; }
                                            }
                                        @endphp
                                        <div class="px-3 pb-2">
                                            @php
                                                $levels = $vipLevels;
                                                $currentIndex = 0;
                                                foreach ($levels as $i => $lvl) { if ($last30Deposit >= $lvl['min']) { $currentIndex = $i; break; } }
                                                $nextIndex = $currentIndex + 1;
                                                $currentMin = $levels[$currentIndex]['min'];
                                                $nextVip = $levels[$nextIndex] ?? null;
                                                $nextMin = $nextVip['min'] ?? null;
                                                if ($nextVip) {
                                                    $progress = ($last30Deposit - $currentMin) / max(1, ($nextMin - $currentMin));
                                                    $progress = max(0, min(1, $progress));
                                                    $remaining = max(0, $nextMin - $last30Deposit);
                                                } else {
                                                    $progress = 1; $remaining = 0;
                                                }
                                                $progressPercent = round($progress * 100);
                                            @endphp
                                            <div class="p-3 rounded-lg border border-zinc-800 bg-zinc-900/70">
                                                <div class="flex items-center gap-3">
                                                    <div class="relative">
                                                        <div class="relative w-10 h-10 rounded-md bg-gradient-to-br {{ ''.$currentVip['gradient'] }} flex items-center justify-center text-black font-extrabold text-[10px] ring-1 ring-white/10">
                                                            <svg viewBox="0 0 24 24" class="w-4.5 h-4.5" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M7 11l2-5 3 3 3-4 2 6 2-1v9H5v-9l2 1z"/></svg>
                                                        </div>
                                                    </div>
                                                    <div class="flex-1">
                                                        <div class="flex items-center justify-between">
                                                            <div class="text-sm text-white font-semibold tracking-wide">{{ $currentVip['name'] }}</div>
                                                            <div class="text-[10px] text-zinc-300 bg-zinc-800/60 border border-zinc-700/60 rounded px-1.5 py-0.5">₺{{ number_format($last30Deposit, 0) }}</div>
                                                        </div>
                                                        <div class="mt-2 h-2 rounded-full border border-zinc-700/60 bg-zinc-800 overflow-hidden">
                                                            <div class="h-full bg-red-500/80" style="width: {{ $progressPercent }}%"></div>
                                                        </div>
                                                        <div class="mt-1.5 flex items-center justify-between text-[10px]">
                                                            @if($nextVip)
                                                                <span class="text-zinc-300">Sonraki: <span class="text-white font-medium">{{ $nextVip['name'] }}</span> (₺{{ number_format($nextMin,0) }})</span>
                                                                <span class="text-zinc-300">Kalan: <span class="text-white font-medium">₺{{ number_format($remaining,0) }}</span></span>
                                                            @else
                                                                <span class="text-white">En üst seviye! 🎉</span>
                                                                <span class="text-zinc-300">Tebrikler</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="{{ route('hesabim') }}" class="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors">
                                            Hesabım
                                        </a>
                                        <a href="{{ route('para-yatir') }}" class="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors">
                                            Para Yatır
                                        </a>
                                        <a href="{{ route('para-cek') }}" class="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors">
                                            Para Çek
                                        </a>
                                        <hr class="border-zinc-800 my-1">
                                        <a href="{{ route('hesap-hareketleri') }}" class="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors">
                                            Hesap Hareketleri
                                        </a>
                                        <a href="{{ route('bahis-gecmisi') }}" class="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors">
                                            Bahis Geçmişi
                                        </a>
                                        <a href="{{ route('casino-gecmisi') }}" class="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors">
                                            Casino Geçmişi
                                        </a>
                                        <a href="{{ route('aktif-bonuslarim') }}" class="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-white transition-colors">
                                            Aktif Bonuslarım
                                        </a>
                                        <hr class="border-zinc-800 my-1">
                                        <form method="POST" action="{{ route('logout') }}" class="block">
                                            @csrf
                                            <button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-zinc-800 hover:text-red-300 transition-colors">
                                                Çıkış Yap
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="flex items-center space-x-4">
                            <a href="{{ route('login') }}" onclick="console.log('Giriş Yap butonuna tıklandı');" class="px-4 py-2 text-zinc-300 hover:text-white transition-colors">Giriş Yap</a>
                            <a href="{{ route('register') }}" onclick="console.log('Kayıt Ol butonuna tıklandı');" class="px-4 py-2 rounded-lg transition-colors" style="position: relative; z-index: 1000; background-color: #ebff00; color: #000;">Kayıt Ol</a>
                        </div>
                        @endauth
                    </div>
                </div>
            </div>
        </nav>

        <!-- Left Sidebar -->
        <div class="hidden md:block fixed top-14 left-0 bottom-0 z-50 shadow-2xl bg-gradient-to-br from-zinc-900/50 via-zinc-900/30 to-transparent backdrop-blur-xl border-r border-zinc-800/50 w-64 overflow-y-auto scrollbar-hide custom-scrollbar">
            <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-70"></div>
            <div class="absolute inset-0 bg-gradient-to-r from-black/10 via-black/5 to-transparent"></div>
            <div class="py-6 px-4 flex-1 h-full overflow-y-auto">
                <!-- Casino Section -->
                <div class="mb-3 floating-menu">
                    <div class="space-y-3">
                        <a class="sidebar-menu-item ripple-effect group flex items-center gap-2 px-3 py-2 rounded-lg" href="/casino">
                            <div class="sidebar-icon-container w-7 h-7 rounded-lg flex items-center justify-center bg-zinc-700/50">
                                <img src="/images/sloticon2.png" alt="Casino" class="w-6 h-6 object-contain">
                            </div>
                            <div class="flex-1">
                                <span class="text-glow text-xs font-medium text-zinc-300">Casino</span>
                            </div>
                            <div class="status-indicator w-1.5 h-1.5 rounded-full bg-green-500/60 shadow-sm"></div>
                        </a>
                        <a class="sidebar-menu-item ripple-effect glow-effect group flex items-center gap-2 px-3 py-2 rounded-lg glass-enhanced border border-zinc-600/30" href="{{ route('live-casino') }}">
                            <div class="sidebar-icon-container w-7 h-7 rounded-lg flex items-center justify-center bg-gradient-to-br from-zinc-600 to-zinc-800 shadow-md">
                                <img src="/images/canlicasino.png" alt="Canlı Casino" class="w-6 h-6 object-contain">
                            </div>
                            <div class="flex-1">
                                <span class="text-glow text-xs font-medium text-white">Canlı Casino</span>
                            </div>
                            <div class="status-indicator w-1.5 h-1.5 rounded-full shadow-sm" style="background-color: #ebff00;"></div>
                        </a>
                    </div>
                </div>

                <!-- Sports Section -->
                <div class="mb-3 floating-menu">
                    <div class="space-y-3">
                        <a class="sidebar-menu-item ripple-effect group flex items-center gap-2 px-3 py-2 rounded-lg" href="{{ route('sports') }}">
                            <div class="sidebar-icon-container w-7 h-7 rounded-lg flex items-center justify-center bg-zinc-700/50">
                                <img src="/images/futbolicon2.png" alt="Spor Bahisleri" class="w-6 h-6 object-contain">
                            </div>
                            <div class="flex-1">
                                <span class="text-glow text-xs font-medium text-zinc-300">Spor Bahisleri</span>
                            </div>
                            <div class="status-indicator w-1.5 h-1.5 rounded-full bg-green-500/60 shadow-sm"></div>
                        </a>
                        <!-- Live betting removed -->
                    </div>
                </div>

                <!-- Bonus Section -->
                <div class="mb-3 floating-menu">
                    <div class="space-y-3">
                        <a class="sidebar-menu-item ripple-effect group flex items-center gap-2 px-3 py-2 rounded-lg" href="{{ route('bonus') }}">
                            <div class="sidebar-icon-container w-7 h-7 rounded-lg flex items-center justify-center bg-zinc-700/50">
                                <img src="/images/bonuslaricon.png" alt="Bonuslar" class="w-6 h-6 object-contain">
                            </div>
                            <div class="flex-1">
                                <span class="text-glow text-xs font-medium text-zinc-300">Bonuslar</span>
                            </div>
                            <div class="status-indicator w-1.5 h-1.5 rounded-full bg-yellow-500/60 shadow-sm"></div>
                        </a>
                        
                        <!-- Promosyon Kodu (Desktop) -->
                        <div class="px-1 py-1 floating-menu">
                            <div class="relative rounded-xl overflow-hidden shadow-md border border-zinc-700/60 bg-black/30 group">
                                <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(to top right, rgba(235, 255, 0, 0.1), transparent, transparent);"></div>
                                <div class="relative z-10 p-2 space-y-2">
                                    <div class="flex items-center justify-between">
                                        <span class="text-[10px] tracking-wider uppercase text-zinc-400">Promosyon Kodu</span>
                                        <span class="text-[10px] px-1.5 py-0.5 rounded" style="color: rgba(235, 255, 0, 0.9); background-color: rgba(235, 255, 0, 0.1); border: 1px solid rgba(235, 255, 0, 0.2);">Hediye</span>
                                    </div>
                                    <form id="promoCodeForm" class="space-y-2">
                                        @csrf
                                        <div class="relative">
                                            <span class="absolute inset-y-0 left-2 flex items-center pointer-events-none">
                                                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="color: rgba(235, 255, 0, 0.8);">
                                                    <rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" stroke-width="1.3"/>
                                                    <path d="M8 6v12M16 6v12" stroke="currentColor" stroke-width="1.3"/>
                                                    <circle cx="12" cy="12" r="1.3" fill="currentColor"/>
                                                </svg>
                                            </span>
                                            <input type="text" name="code" placeholder="Bonus kodu gir" maxlength="20"
                                                   class="w-full bg-white/5 text-white text-xs pl-8 pr-2 py-1.5 rounded-lg border border-white/10 focus:outline-none placeholder-zinc-400/80 transition-all duration-200" style="focus:ring: 2px solid rgba(235, 255, 0, 0.4); focus:border: rgba(235, 255, 0, 0.4);"/>
                                        </div>
                                        <button type="submit" class="ripple-effect w-full text-white font-medium text-[11px] px-2 py-1.5 rounded-lg transition-all duration-200 flex items-center justify-center gap-1.5" style="background-color: rgba(235, 255, 0, 0.8); border: 1px solid rgba(235, 255, 0, 0.4); color: #000;">
                                            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                                <path d="M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                            Kullan
                                        </button>
                                    </form>
                                    <div id="promoCodeMessage" class="mt-1 text-[11px] hidden text-center"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Canlı Destek ve Social Media Links -->
                <div class="mt-auto space-y-4">
                    <!-- Canlı Destek -->
                    <div class="px-2 floating-menu">
                        <div onclick="openLiveChat()" class="w-full flex items-center justify-center cursor-pointer hover:scale-110 transition-transform duration-300">
                            <img src="/images/canlidestek.png" alt="Canlı Destek" class="object-contain" style="width: auto; height: auto;">
                        </div>
                    </div>
                    
                    <!-- Social Media Links -->
                    @php
                        $settings = \App\Models\Ayarlar::getSettings();
                    @endphp
                    <div class="flex justify-center space-x-3 px-2">
                        @if($settings && $settings->telegram)
                            <a href="{{ $settings->telegram }}" target="_blank" class="w-10 h-10 rounded-lg bg-zinc-800/70 hover:bg-zinc-700/70 border border-zinc-700/60 flex items-center justify-center transition-all duration-300 transform hover:scale-110 shadow-md" style="hover:shadow: rgba(235, 255, 0, 0.2);" title="Telegram">
                                <img src="{{ asset('images/telegram.png') }}" alt="Telegram" class="w-6 h-6 object-contain">
                            </a>
                        @endif
                        @if($settings && $settings->whatsapp)
                            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $settings->whatsapp) }}" target="_blank" class="w-10 h-10 rounded-lg bg-zinc-800/70 hover:bg-zinc-700/70 border border-zinc-700/60 flex items-center justify-center transition-all duration-300 transform hover:scale-110 shadow-md" style="hover:shadow: rgba(235, 255, 0, 0.2);" title="WhatsApp">
                                <img src="{{ asset('images/wp.png') }}" alt="WhatsApp" class="w-6 h-6 object-contain">
                            </a>
                        @endif
                        @if($settings && $settings->instagram)
                            <a href="{{ $settings->instagram }}" target="_blank" class="w-10 h-10 rounded-lg bg-zinc-800/70 hover:bg-zinc-700/70 border border-zinc-700/60 flex items-center justify-center transition-all duration-300 transform hover:scale-110 shadow-md" style="hover:shadow: rgba(235, 255, 0, 0.2);" title="Instagram">
                                <img src="{{ asset('images/insta.png') }}" alt="Instagram" class="w-6 h-6 object-contain">
                            </a>
                        @endif
                        @if($settings && $settings->twitter)
                            <a href="{{ $settings->twitter }}" target="_blank" class="w-10 h-10 rounded-lg bg-zinc-800/70 hover:bg-zinc-700/70 border border-zinc-700/60 flex items-center justify-center transition-all duration-300 transform hover:scale-110 shadow-md" style="hover:shadow: rgba(235, 255, 0, 0.2);" title="X (Twitter)">
                                <img src="{{ asset('images/x.png') }}" alt="X (Twitter)" class="w-6 h-6 object-contain">
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Mobile Sidebar -->
        <div id="mobileSidebar" class="md:hidden fixed top-14 left-0 bottom-0 z-50 shadow-2xl bg-gradient-to-br from-zinc-900/50 via-zinc-900/30 to-transparent backdrop-blur-xl border-r border-zinc-800/50 w-64 transform -translate-x-full transition-transform duration-300">
            <div class="absolute inset-0 bg-[url('{{ asset('assets/noise.png') }}')] opacity-70"></div>
            <div class="absolute inset-0 bg-gradient-to-r from-black/10 via-black/5 to-transparent"></div>
            <div class="py-6 px-4 flex-1 h-full overflow-y-auto">
                <!-- Casino Section -->
                <div class="mb-3">
                    <div class="space-y-3">
                        <a class="sidebar-menu-item ripple-effect group flex items-center gap-2 px-3 py-2 rounded-lg" href="/casino">
                            <div class="sidebar-icon-container w-6 h-6 rounded-lg flex items-center justify-center bg-zinc-700/50">
                                <img src="/images/sloticon2.png" alt="Casino" class="w-5 h-5 object-contain">
                            </div>
                            <div class="flex-1">
                                <span class="text-glow text-xs font-medium text-zinc-300">Casino</span>
                            </div>
                            <div class="status-indicator w-1.5 h-1.5 rounded-full bg-green-500/60 shadow-sm"></div>
                        </a>
                        <a class="sidebar-menu-item ripple-effect group flex items-center gap-2 px-3 py-2 rounded-lg" href="{{ route('live-casino') }}">
                            <div class="sidebar-icon-container w-6 h-6 rounded-lg flex items-center justify-center bg-zinc-700/50">
                                <img src="/images/canlicasino.png" alt="Canlı Casino" class="w-5 h-5 object-contain">
                            </div>
                            <div class="flex-1">
                                <span class="text-glow text-xs font-medium text-white">Canlı Casino</span>
                            </div>
                            <div class="status-indicator w-1.5 h-1.5 rounded-full shadow-sm" style="background-color: #ebff00;"></div>
                        </a>
                    </div>
                </div>

                <!-- Sports Section -->
                <div class="mb-3">
                    <div class="space-y-3">
                        <a class="sidebar-menu-item ripple-effect group flex items-center gap-2 px-3 py-2 rounded-lg" href="{{ route('sports') }}">
                            <div class="sidebar-icon-container w-6 h-6 rounded-lg flex items-center justify-center bg-zinc-700/50">
                                <img src="/images/futbolicon2.png" alt="Spor Bahisleri" class="w-5 h-5 object-contain">
                            </div>
                            <div class="flex-1">
                                <span class="text-glow text-xs font-medium text-zinc-300">Spor Bahisleri</span>
                            </div>
                            <div class="status-indicator w-1.5 h-1.5 rounded-full bg-green-500/60 shadow-sm"></div>
                        </a>
                        <!-- Live betting removed -->
                    </div>
                </div>

                <!-- Bonus Section -->
                <div class="mb-3">
                    <div class="space-y-3">
                        <a class="sidebar-menu-item ripple-effect group flex items-center gap-2 px-3 py-2 rounded-lg" href="{{ route('bonus') }}">
                            <div class="sidebar-icon-container w-6 h-6 rounded-lg flex items-center justify-center bg-zinc-700/50">
                                <img src="/images/bonuslaricon.png" alt="Bonuslar" class="w-5 h-5 object-contain">
                            </div>
                            <div class="flex-1">
                                <span class="text-glow text-xs font-medium text-zinc-300">Bonuslar</span>
                            </div>
                            <div class="status-indicator w-1.5 h-1.5 rounded-full bg-yellow-500/60 shadow-sm"></div>
                        </a>
                        
                        <!-- Promosyon Kodu (Mobile) -->
                        <div class="px-1 py-1 floating-menu">
                            <div class="relative rounded-xl overflow-hidden shadow-md border border-zinc-700/60 bg-black/30 group">
                                <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(to top right, rgba(235, 255, 0, 0.1), transparent, transparent);"></div>
                                <div class="relative z-10 p-2 space-y-2">
                                    <div class="flex items-center justify-between">
                                        <span class="text-[10px] tracking-wider uppercase text-zinc-400">Promosyon</span>
                                        <span class="text-[10px] px-1.5 py-0.5 rounded" style="color: rgba(235, 255, 0, 0.9); background-color: rgba(235, 255, 0, 0.1); border: 1px solid rgba(235, 255, 0, 0.2);">Hediye</span>
                                    </div>
                                    <form id="promoCodeFormMobile" class="space-y-2">
                                        @csrf
                                        <div class="relative">
                                            <span class="absolute inset-y-0 left-2 flex items-center pointer-events-none">
                                                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="color: rgba(235, 255, 0, 0.8);">
                                                    <rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" stroke-width="1.3"/>
                                                    <path d="M8 6v12M16 6v12" stroke="currentColor" stroke-width="1.3"/>
                                                    <circle cx="12" cy="12" r="1.3" fill="currentColor"/>
                                                </svg>
                                            </span>
                                            <input type="text" name="code" placeholder="Bonus kodu gir" maxlength="20" 
                                                   class="w-full bg-white/5 text-white text-xs pl-8 pr-2 py-1.5 rounded-lg border border-white/10 focus:outline-none placeholder-zinc-400/80 transition-all duration-200" style="focus:ring: 2px solid rgba(235, 255, 0, 0.4); focus:border: rgba(235, 255, 0, 0.4);"/>
                                        </div>
                                        <button type="submit" class="ripple-effect w-full text-white font-medium text-[11px] px-2 py-1.5 rounded-lg transition-all duration-200 flex items-center justify-center gap-1.5" style="background-color: rgba(235, 255, 0, 0.8); border: 1px solid rgba(235, 255, 0, 0.4); color: #000;">
                                            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                                <path d="M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                            Kullan
                                        </button>
                                    </form>
                                    <div id="promoCodeMessageMobile" class="mt-1 text-[11px] hidden text-center"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Canlı Destek ve Social Media Links -->
                <div class="mt-auto space-y-4">
                    <!-- Canlı Destek -->
                    <div class="px-2">
                        <div onclick="openLiveChat()" class="w-full flex items-center justify-center cursor-pointer hover:scale-110 transition-transform duration-300">
                            <img src="/images/canlidestek.png" alt="Canlı Destek" class="object-contain" style="width: auto; height: auto;">
                        </div>
                    </div>
                    
                    <!-- Social Media Links -->
                    @php
                        $settings = \App\Models\Ayarlar::getSettings();
                    @endphp
                    <div class="flex justify-center space-x-3 px-2">
                        @if($settings && $settings->telegram)
                            <a href="{{ $settings->telegram }}" target="_blank" class="w-8 h-8 rounded-lg bg-zinc-800/70 hover:bg-zinc-700/70 border border-zinc-700/60 flex items-center justify-center transition-all duration-300 transform hover:scale-110 shadow-md" style="hover:shadow: rgba(235, 255, 0, 0.2);" title="Telegram">
                                <img src="{{ asset('images/telegram.png') }}" alt="Telegram" class="w-4 h-4 object-contain">
                            </a>
                        @endif
                        @if($settings && $settings->whatsapp)
                            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $settings->whatsapp) }}" target="_blank" class="w-8 h-8 rounded-lg bg-zinc-800/70 hover:bg-zinc-700/70 border border-zinc-700/60 flex items-center justify-center transition-all duration-300 transform hover:scale-110 shadow-md" style="hover:shadow: rgba(235, 255, 0, 0.2);" title="WhatsApp">
                                <img src="{{ asset('images/wp.png') }}" alt="WhatsApp" class="w-4 h-4 object-contain">
                            </a>
                        @endif
                        @if($settings && $settings->instagram)
                            <a href="{{ $settings->instagram }}" target="_blank" class="w-8 h-8 rounded-lg bg-zinc-800/70 hover:bg-zinc-700/70 border border-zinc-700/60 flex items-center justify-center transition-all duration-300 transform hover:scale-110 shadow-md" style="hover:shadow: rgba(235, 255, 0, 0.2);" title="Instagram">
                                <img src="{{ asset('images/insta.png') }}" alt="Instagram" class="w-4 h-4 object-contain">
                            </a>
                        @endif
                        @if($settings && $settings->twitter)
                            <a href="{{ $settings->twitter }}" target="_blank" class="w-8 h-8 rounded-lg bg-zinc-800/70 hover:bg-zinc-700/70 border border-zinc-700/60 flex items-center justify-center transition-all duration-300 transform hover:scale-110 shadow-md" style="hover:shadow: rgba(235, 255, 0, 0.2);" title="X (Twitter)">
                                <img src="{{ asset('images/x.png') }}" alt="X (Twitter)" class="w-4 h-4 object-contain">
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Mobile Sidebar Overlay -->
        <div id="mobileSidebarOverlay" class="md:hidden fixed inset-0 bg-black/50 z-30 opacity-0 pointer-events-none transition-opacity duration-300" onclick="toggleSidebar()"></div>

        <!-- Right Sidebar - Removed for iframe sports -->

        <!-- Main Content -->
        <div class="flex-1 md:ml-64">
            <main class="pt-14 min-h-screen">
                @yield('content')
            </main>
            
            <!-- Footer -->
            @php
                $payments = \App\Models\Payment::getActivePayments();
            @endphp
            @include('layouts.footer', ['payments' => $payments])
        </div>

        <!-- Mobile Bottom Navigation -->
        <div class="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-sm border-t border-zinc-800">
            <div class="grid grid-cols-5 gap-0">
                <a href="{{ route('home') }}" class="flex flex-col items-center justify-center py-1 {{ request()->routeIs('home') ? 'text-red-500' : 'text-zinc-400' }} hover:text-white transition-colors">
                    <svg class="w-5 h-5 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 10l9-7 9 7v8a2 2 0 01-2 2h-4a2 2 0 01-2-2v-3H9v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-8z"/>
                    </svg>
                    <span class="text-[10px] leading-none">Ana Sayfa</span>
                </a>
                <a href="{{ route('casino') }}" class="flex flex-col items-center justify-center py-1 {{ request()->routeIs('casino') ? 'text-red-500' : 'text-zinc-400' }} hover:text-white transition-colors">
                    <svg class="w-5 h-5 mb-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <rect x="3" y="6" width="18" height="10" rx="2" stroke-width="1.6"/>
                        <line x1="9" y1="6" x2="9" y2="16" stroke-width="1"/>
                        <line x1="15" y1="6" x2="15" y2="16" stroke-width="1"/>
                        <text x="6" y="13" font-size="6" font-weight="700" fill="currentColor">7</text>
                        <text x="10" y="13" font-size="6" font-weight="700" fill="currentColor">7</text>
                        <text x="14" y="13" font-size="6" font-weight="700" fill="currentColor">7</text>
                    </svg>
                    <span class="text-[10px] leading-none">Casino</span>
                </a>
                <a href="{{ route('live-casino') }}" class="flex flex-col items-center justify-center py-1 {{ request()->routeIs('live-casino') ? 'text-red-500' : 'text-zinc-400' }} hover:text-white transition-colors">
                    <svg class="w-5 h-5 mb-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <circle cx="12" cy="12" r="8" stroke-width="1.6"/>
                        <path d="M10 9l6 3-6 3V9z" fill="currentColor"/>
                    </svg>
                    <span class="text-[10px] leading-none">Canlı</span>
                </a>
                <a href="{{ route('bonus') }}" class="flex flex-col items-center justify-center py-1 {{ request()->routeIs('bonus') ? 'text-red-500' : 'text-zinc-400' }} hover:text-white transition-colors">
                    <svg class="w-5 h-5 mb-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <rect x="4" y="8" width="16" height="10" rx="2" stroke-width="1.6"/>
                        <line x1="12" y1="8" x2="12" y2="18" stroke-width="1.2"/>
                        <line x1="4" y1="13" x2="20" y2="13" stroke-width="1.2"/>
                    </svg>
                    <span class="text-[10px] leading-none">Bonus</span>
                </a>
                <button onclick="toggleSidebar()" class="flex flex-col items-center justify-center py-1 text-zinc-400 hover:text-white transition-colors">
                    <svg class="w-5 h-5 mb-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M4 7h16M4 12h16M4 17h16" stroke-width="1.8" stroke-linecap="round"/>
                    </svg>
                    <span class="text-[10px] leading-none">Menü</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Canlı Destek Kodu (Ayarlar tablosundan) -->
    @php
        $settings = \App\Models\Ayarlar::getSettings();
        $liveChatCode = '';
        if($settings && $settings->canlidestek) {
            $licenseNumber = trim($settings->canlidestek);
            
            // Sadece rakam kontrolü
            if(preg_match('/^[0-9]+$/', $licenseNumber)) {
                // LiveChat kodunu otomatik oluştur
                $liveChatCode = '
<script>
    window.__lc = window.__lc || {};
    window.__lc.license = ' . $licenseNumber . ';
    window.__lc.integration_name = "manual_onboarding";
    window.__lc.product_name = "livechat";
    ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can\'t use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))
</script>
<noscript><a href="https://www.livechat.com/chat-with/' . $licenseNumber . '/" rel="nofollow">Chat with us</a>, powered by <a href="https://www.livechat.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a></noscript>';
            }
        }
    @endphp
    @if($liveChatCode)
        {!! $liveChatCode !!}
    @endif
    <!-- Canlı Destek Kodu Sonu -->

    <!-- JavaScript -->
    <script>
        function toggleSidebar() {
            const sidebar = document.getElementById('mobileSidebar');
            const overlay = document.getElementById('mobileSidebarOverlay');
            
            if (sidebar.classList.contains('-translate-x-full')) {
                // Open sidebar
                sidebar.classList.remove('-translate-x-full');
                overlay.classList.remove('opacity-0', 'pointer-events-none');
            } else {
                // Close sidebar
                sidebar.classList.add('-translate-x-full');
                overlay.classList.add('opacity-0', 'pointer-events-none');
            }
        }

        // Close sidebar when clicking on a link
        document.addEventListener('DOMContentLoaded', function() {
            const sidebarLinks = document.querySelectorAll('#mobileSidebar a');
            sidebarLinks.forEach(link => {
                link.addEventListener('click', function() {
                    toggleSidebar();
                });
            });
        });
    </script>

    <script>
        // LiveChat widget'ını tamamen gizle
        document.addEventListener('DOMContentLoaded', function() {
            // CSS ile widget'ı gizle
            document.body.classList.remove('show-livechat');
            
            // Widget kapatıldığında dinle
            if (window.LiveChatWidget) {
                window.LiveChatWidget.on('visibility_changed', function(data) {
                    if (data.visibility === 'minimized' || data.visibility === 'hidden') {
                        document.body.classList.remove('show-livechat');
                    }
                });
            }
        });

        function openLiveChat() {
            // CSS ile widget'ı göster ve maksimize et
            document.body.classList.add('show-livechat');
            
            // Widget'ı maksimize et
            setTimeout(function() {
                if (window.LiveChatWidget) {
                    window.LiveChatWidget.call('maximize');
                }
            }, 100);
        }

        // Yatay kaydırma için mouse wheel desteği
        document.addEventListener('DOMContentLoaded', function() {
            const horizontalScrolls = document.querySelectorAll('.horizontal-scroll');
            const paymentScrolls = document.querySelectorAll('.payment-scroll');
            
            // Ana sayfa yatay kaydırma
            horizontalScrolls.forEach(function(scrollContainer) {
                scrollContainer.addEventListener('wheel', function(e) {
                    e.preventDefault();
                    scrollContainer.scrollLeft += e.deltaY;
                });
            });
            
            // Footer payments yatay kaydırma
            paymentScrolls.forEach(function(scrollContainer) {
                scrollContainer.addEventListener('wheel', function(e) {
                    e.preventDefault();
                    scrollContainer.scrollLeft += e.deltaY;
                });
            });
            
            // Promosyon kodu formları
            const promoCodeForm = document.getElementById('promoCodeForm');
            const promoCodeFormMobile = document.getElementById('promoCodeFormMobile');
            
            if (promoCodeForm) {
                promoCodeForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    handlePromoCodeSubmit(this, 'promoCodeMessage');
                });
            }
            
            if (promoCodeFormMobile) {
                promoCodeFormMobile.addEventListener('submit', function(e) {
                    e.preventDefault();
                    handlePromoCodeSubmit(this, 'promoCodeMessageMobile');
                });
            }
        });
        
        // Zarif hover effects
        function enhanceSidebarEffects() {
            const menuItems = document.querySelectorAll('.sidebar-menu-item');
            
            menuItems.forEach(item => {
                item.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateX(2px)';
                    this.style.background = 'rgba(255, 255, 255, 0.08)';
                });
                
                item.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateX(0)';
                    this.style.background = 'rgba(255, 255, 255, 0.03)';
                });
            });
        }
        
        // Initialize effects when DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            enhanceSidebarEffects();
        });
        
        function handlePromoCodeSubmit(form, messageId) {
            const formData = new FormData(form);
            const messageDiv = document.getElementById(messageId);
            const submitButton = form.querySelector('button[type="submit"]');
            // Try to find input with name 'promo_code' or 'code'
            let input = form.querySelector('input[name="promo_code"]');
            if (!input) {
                input = form.querySelector('input[name="code"]');
            }
            
            // Debug: Form verilerini kontrol et
            console.log('Form data:', formData.get('code'));
            console.log('Input value:', input ? input.value : 'Input not found');
            
            // Button'u devre dışı bırak
            submitButton.disabled = true;
            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            
            // Mesaj alanını temizle
            messageDiv.innerHTML = '';
            messageDiv.className = 'mt-2 text-xs hidden';
            
            fetch('/api/promo/use', {
                method: 'POST',
                body: formData,
                credentials: 'same-origin',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => {
                        throw new Error('Network response was not ok: ' + response.status);
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    messageDiv.innerHTML = data.message;
                    messageDiv.className = 'mt-2 text-xs text-green-400';
                    if(input) {
                        input.value = '';
                    }
                    
                    // Başarı mesajını 3 saniye sonra gizle
                    setTimeout(() => {
                        messageDiv.className = 'mt-2 text-xs hidden';
                    }, 3000);
                } else {
                    messageDiv.innerHTML = data.message;
                    messageDiv.className = 'mt-2 text-xs text-red-400';
                    
                    // Hata mesajını 5 saniye sonra gizle
                    setTimeout(() => {
                        messageDiv.className = 'mt-2 text-xs hidden';
                    }, 5000);
                }
            })
            .catch(error => {
                console.error('Promo code error:', error);
                messageDiv.innerHTML = 'Bir hata oluştu. Lütfen tekrar deneyin.';
                messageDiv.className = 'mt-2 text-xs text-red-400';
                
                setTimeout(() => {
                    messageDiv.className = 'mt-2 text-xs hidden';
                }, 5000);
            })
            .finally(() => {
                // Button'u tekrar aktif et
                submitButton.disabled = false;
                submitButton.innerHTML = '<i class="fas fa-ticket"></i>';
            });
        }
    </script>
    


<div id="pbx-live-support" class="pbx-support-widget" aria-live="polite">
    <button type="button" class="pbx-support-fab" onclick="pbxToggleSupport()">
        <i class="fa-solid fa-headset"></i>
        <span>Canlı Destek</span>
    </button>
    <div class="pbx-support-panel" id="pbxSupportPanel">
        <div class="pbx-support-head">
            <div><strong>ParadoxBet Destek</strong><small id="pbxSupportStatus">Bilgilerinizi yazın, temsilciye bağlanın</small></div>
            <button type="button" onclick="pbxToggleSupport()"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form class="pbx-support-start" id="pbxSupportStart" onsubmit="pbxStartSupport(event)">
            <label>İsim Soyisim</label>
            <input id="pbxSupportName" type="text" placeholder="Adınız Soyadınız" required maxlength="120">
            <label>Kullanıcı Adı</label>
            <input id="pbxSupportUsername" type="text" placeholder="Kullanıcı adınız" maxlength="120">
            <label>Mesajınız</label>
            <textarea id="pbxSupportFirstMessage" placeholder="Kısaca ne konuda yardım istiyorsunuz?" maxlength="1000"></textarea>
            <button type="submit">Temsilciye Bağlan</button>
        </form>
        <div class="pbx-support-chat hidden" id="pbxSupportChat">
            <div class="pbx-support-body" id="pbxSupportMessages"></div>
            <form class="pbx-support-form" onsubmit="pbxSendSupport(event)">
                <input id="pbxSupportInput" type="text" placeholder="Mesajınızı yazın..." autocomplete="off">
                <button type="submit"><i class="fa-solid fa-paper-plane"></i></button>
            </form>
        </div>
    </div>
</div>
<style>
    .pbx-support-widget{position:fixed;left:18px;bottom:18px;z-index:80;font-family:inherit}.pbx-support-fab{height:54px;border:0;border-radius:999px;background:linear-gradient(135deg,#ebff00,#b7d600);color:#050505;font-weight:900;padding:0 18px;display:flex;align-items:center;gap:10px;box-shadow:0 14px 40px rgba(0,0,0,.42);cursor:pointer}.pbx-support-fab i{font-size:18px}.pbx-support-panel{display:none;position:absolute;left:0;bottom:66px;width:350px;max-width:calc(100vw - 28px);background:#101114;color:#fff;border:1px solid rgba(235,255,0,.22);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55)}.pbx-support-widget.open .pbx-support-panel{display:block}.pbx-support-head{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#1b1c1f,#101114);padding:14px;border-bottom:1px solid rgba(255,255,255,.08)}.pbx-support-head strong{display:block;color:#ebff00}.pbx-support-head small{display:block;color:#b9b9b9;font-size:11px}.pbx-support-head button{background:#24262c;border:1px solid rgba(255,255,255,.08);color:#fff;width:32px;height:32px;border-radius:8px}.pbx-support-start{padding:13px;background:#0d0e10}.pbx-support-start label{display:block;font-size:12px;color:#ebff00;font-weight:800;margin:8px 0 5px}.pbx-support-start input,.pbx-support-start textarea{width:100%;background:#17191d;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#fff;padding:10px 12px;outline:none}.pbx-support-start textarea{height:82px;resize:none}.pbx-support-start input:focus,.pbx-support-start textarea:focus{border-color:#ebff00}.pbx-support-start button{width:100%;margin-top:12px;border:0;border-radius:10px;background:#ebff00;color:#050505;font-weight:900;padding:11px}.pbx-support-body{height:270px;overflow:auto;padding:12px;background:radial-gradient(circle at top right,rgba(235,255,0,.08),transparent 32%),#0d0e10}.pbx-msg{max-width:86%;padding:9px 11px;border-radius:12px;margin:8px 0;font-size:13px;line-height:1.35;white-space:pre-wrap}.pbx-msg.bot,.pbx-msg.system{background:#202229;color:#f5f5f5;border-bottom-left-radius:4px}.pbx-msg.admin{background:#263c2f;color:#fff;border:1px solid rgba(57,255,143,.22);border-bottom-left-radius:4px}.pbx-msg.user{background:#ebff00;color:#050505;margin-left:auto;border-bottom-right-radius:4px;font-weight:700}.pbx-support-form{display:flex;gap:8px;padding:10px;background:#17191d;border-top:1px solid rgba(255,255,255,.08)}.pbx-support-form input{flex:1;background:#0d0e10;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;padding:10px 12px;outline:none}.pbx-support-form input:focus{border-color:#ebff00}.pbx-support-form button{width:42px;border:0;border-radius:10px;background:#ebff00;color:#050505}.hidden{display:none!important}@media(max-width:640px){.pbx-support-widget{left:16px;right:auto;bottom:92px;z-index:44}.pbx-support-fab span{display:none}.pbx-support-fab{width:52px;height:52px;padding:0;justify-content:center;border-radius:18px}.pbx-support-panel{left:0;right:auto;width:320px;bottom:60px;max-width:calc(100vw - 32px);max-height:calc(100vh - 154px)}.pbx-support-body{height:230px}}
</style>
<script>
    let pbxChatId = localStorage.getItem('pbx_support_chat_id') || '';
    let pbxPollTimer = null;
    function pbxCsrf(){return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';}
    function pbxToggleSupport(){document.getElementById('pbx-live-support')?.classList.toggle('open'); if(pbxChatId){pbxShowChat(); pbxLoadMessages();}}
    function pbxAppendSupport(text,type){const box=document.getElementById('pbxSupportMessages');if(!box)return;const el=document.createElement('div');el.className='pbx-msg '+type;el.textContent=text;box.appendChild(el);box.scrollTop=box.scrollHeight;}
    function pbxRenderMessages(messages){const box=document.getElementById('pbxSupportMessages');if(!box)return;box.innerHTML='';messages.forEach(m=>pbxAppendSupport(m.message, m.sender === 'admin' ? 'admin' : (m.sender === 'user' ? 'user' : 'system')));}
    function pbxShowChat(){document.getElementById('pbxSupportStart')?.classList.add('hidden');document.getElementById('pbxSupportChat')?.classList.remove('hidden');document.getElementById('pbxSupportStatus').textContent='Sıraya alındınız, temsilci bağlanıyor'; if(!pbxPollTimer){pbxPollTimer=setInterval(pbxLoadMessages,4000);}}
    function pbxStartSupport(e){e.preventDefault();const name=document.getElementById('pbxSupportName').value.trim();const username=document.getElementById('pbxSupportUsername').value.trim();const message=document.getElementById('pbxSupportFirstMessage').value.trim();fetch('/support-chat/start',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':pbxCsrf(),'Accept':'application/json'},body:JSON.stringify({full_name:name,username:username,message:message})}).then(r=>r.json()).then(d=>{if(d.success){pbxChatId=d.chat_id;localStorage.setItem('pbx_support_chat_id',pbxChatId);pbxShowChat();pbxLoadMessages();}}).catch(()=>alert('Canlı destek başlatılamadı. Lütfen tekrar deneyin.'));}
    function pbxLoadMessages(){if(!pbxChatId)return;fetch('/support-chat/'+pbxChatId+'/messages',{headers:{'Accept':'application/json'}}).then(r=>r.json()).then(d=>{if(d.success){pbxRenderMessages(d.messages); const hasAdmin=(d.messages||[]).some(m=>m.sender==='admin'); if(hasAdmin){document.getElementById('pbxSupportStatus').textContent='Temsilci görüşmeye katıldı';}}});}
    function pbxSendSupport(e){e.preventDefault();const input=document.getElementById('pbxSupportInput');const text=(input?.value||'').trim();if(!text||!pbxChatId)return;input.value='';fetch('/support-chat/'+pbxChatId+'/message',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':pbxCsrf(),'Accept':'application/json'},body:JSON.stringify({message:text})}).then(()=>pbxLoadMessages());}
    document.addEventListener('DOMContentLoaded',()=>{if(pbxChatId){pbxShowChat();}});
</script>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</body>
</html>
