<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .cark-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            width: 100%;
            padding: 10px 5px;
            text-align: center;
            position: relative;
            min-height: 600px;
        }

        .subtitle {
            color: #888;
            margin-bottom: 30px;
            font-size: 0.9rem;
        }

        /* Çark Container */
        .wheel-container {
            position: relative;
            width: min(90vw, 450px);
            height: min(90vw, 450px);
            max-width: 450px;
            max-height: 450px;
            margin: 0 auto 20px;
        }

        /* Çark SVG */
        .wheel {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .wheel.spinning {
            transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
            transform: rotate(var(--rotation));
        }

        /* Ok İşareti */
        .arrow {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-top: 40px solid #F54927;
            filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
            z-index: 10;
        }

        /* Merkez Buton */
        .center-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 110px;
            height: 110px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            border: 5px solid white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: white;
            transition: all 0.3s ease;
            z-index: 5;
        }

        .center-button:hover:not(:disabled) {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .center-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* Çevir Butonu */
        .spin-button {
            width: 100%;
            padding: 18px 35px;
            font-size: 1.4rem;
            font-weight: bold;
            color: white;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
            margin-bottom: 20px;
        }

        .spin-button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6);
        }

        .spin-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .spin-button.free {
            background: linear-gradient(135deg, #F54927 0%, #ff6b6b 100%);
            box-shadow: 0 5px 15px rgba(245, 73, 39, 0.4);
        }

        .spin-button.free:hover:not(:disabled) {
            box-shadow: 0 8px 20px rgba(245, 73, 39, 0.6);
        }

        /* İstatistikler */
        .stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 30px;
        }

        .stat-card {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.9rem;
            color: #666;
        }

        /* Sayaç - BAŞTA GİZLİ (inline style'da tüm özellikleri var) */
        .countdown {
            display: none !important; /* Sadece başta gizlemek için - diğer stiller inline'da */
        }
        
        .countdown.show-countdown {
            display: block !important; /* JavaScript bu class'ı ekleyecek */
        }

        .countdown-label {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 5px;
            display: block;
            width: 100%;
            text-align: center;
        }

        .countdown-timer {
            font-size: 1.5rem;
            font-weight: bold;
            color: #F54927;
            display: block;
            width: 100%;
            text-align: center;
        }

        /* Sonuç Modal */
        .result-overlay {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .result-overlay.show {
            display: flex;
        }

        .result-modal {
            background: white;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            animation: modalPop 0.5s ease;
        }

        @keyframes modalPop {
            0% {
                transform: scale(0.5);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .result-icon {
            font-size: 4rem;
            margin-bottom: 20px;
        }

        .result-title {
            font-size: 1.5rem;
            color: #667eea;
            margin-bottom: 10px;
        }

        .result-prize {
            font-size: 2.5rem;
            font-weight: bold;
            color: #F54927;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .result-close {
            width: 100%;
            padding: 15px;
            font-size: 1.1rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .result-close:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        /* Konfeti */
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #f0f;
            position: absolute;
            animation: confetti-fall 3s ease-out forwards;
        }

        @keyframes confetti-fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        /* Responsive */
        @media (max-width: 480px) {
            .container {
                padding: 20px;
            }

            h1 {
                font-size: 1.5rem;
            }

            .wheel-container {
                width: min(85vw, 360px);
                height: min(85vw, 360px);
                max-width: 360px;
                max-height: 360px;
            }

            .spin-button {
                font-size: 1rem;
                padding: 12px 25px;
            }

            .stat-value {
                font-size: 1.5rem;
            }
        }
    </style>
    <div class="cark-container">
        <div class="alert alert-info" style="margin-bottom: 20px; padding: 15px; background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: none; border-radius: 15px; box-shadow: 0 3px 10px rgba(33, 150, 243, 0.2);">
            <div style="display: flex; align-items: center; gap: 10px;">
                <i class="fas fa-info-circle" style="font-size: 1.5rem; color: #1976d2;"></i>
                <div style="flex: 1;">
                    <p style="margin: 0; font-size: 0.9rem; color: #424242; line-height: 1.5;">
                        Jetonlarınız bittiğinde 24 saatte bir <strong>ücretsiz</strong> çevirebilirsiniz. Çarkı çevirin, <strong>jeton kazanın!</strong>
                    </p>
                </div>
            </div>
        </div>

        <!-- Sayaç -->
        <div class="countdown" id="cark-countdown" style="min-width: 300px; width: 100%; max-width: 500px; min-height: 70px; height: auto; padding: 15px; background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); border-radius: 15px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(253, 203, 110, 0.3); box-sizing: border-box; position: relative; z-index: 10;">
            <div class="countdown-label" style="display: block; width: 100%; text-align: center; font-size: 0.9rem; color: #666; margin-bottom: 5px;">Sonraki çark için kalan süre:</div>
            <div class="countdown-timer" id="cark-timer" style="display: block; width: 100%; text-align: center; font-size: 1.5rem; font-weight: bold; color: #F54927;">00:00:00</div>
        </div>

        <!-- Çark -->
        <div class="wheel-container">
            <div class="arrow"></div>
            <svg class="wheel" id="wheel" viewBox="0 0 100 100">
                <!-- 6 dilim çark -->
                <g id="wheelSlices"></g>
            </svg>
            <div class="center-button" id="centerButton">
                <i class="fas fa-play"></i>
            </div>
        </div>

        <!-- Çevir Butonu -->
        <button class="spin-button free" id="spinButton">
            <i class="fas fa-gift"></i> ÜCRETSİZ ÇEVİR!
        </button>

        <!-- İstatistikler kaldırıldı -->
    </div>

    <!-- Sonuç Modal -->
    <div class="result-overlay" id="resultOverlay">
        <div class="result-modal">
            <div class="result-icon">🎉</div>
            <div class="result-title">Tebrikler!</div>
            <div class="result-prize" id="resultPrize">50 Jeton</div>
            <p style="color: #888; margin-bottom: 20px;">kazandınız!</p>
            <button class="result-close" onclick="closeResult()">Harika!</button>
        </div>
    </div>

    <script>
        // Ödüller ve şansları (KARIŞIK sıralama - daha heyecanlı!)
        // Büyük ödüller görünüyor ama ASLA çıkmıyor (%0)
        const prizes = [
            { type: 'jeton', amount: 1000, label: '1000 Jeton', chance: 0, color: '#DFE6E9', icon: '💎' },
            { type: 'jeton', amount: 10, label: '10 Jeton', chance: 30, color: '#4ECDC4', icon: '💎' },
            { type: 'arama', amount: 1, label: 'Arama Paketi', chance: 0, color: '#A29BFE', icon: '📞' },
            { type: 'jeton', amount: 100, label: '100 Jeton', chance: 0, color: '#96CEB4', icon: '💎' },
            { type: 'jeton', amount: 5, label: '5 Jeton', chance: 50, color: '#FF6B6B', icon: '💎' },
            { type: 'jeton', amount: 500, label: '500 Jeton', chance: 0, color: '#FFEAA7', icon: '💎' },
            { type: 'onay', amount: 1, label: 'Onay Paketi', chance: 0, color: '#FD79A8', icon: '✅' },
            { type: 'jeton', amount: 15, label: '15 Jeton', chance: 20, color: '#45B7D1', icon: '💎' }
        ];

        let isSpinning = false;
        let canSpinFree = false;
        let nextFreeTime = null;
        let resultShown = false;
        let carkCountdownTimer = null; // Global timer değişkeni (çakışmayı önlemek için)

        // Çarkı çiz
        function drawWheel() {
            const wheelSlices = document.getElementById('wheelSlices');
            const sliceAngle = 360 / prizes.length;
            
            prizes.forEach((prize, index) => {
                const startAngle = index * sliceAngle;
                const endAngle = (index + 1) * sliceAngle;
                
                // Dilim yolu hesapla
                const startRad = (startAngle - 90) * Math.PI / 180;
                const endRad = (endAngle - 90) * Math.PI / 180;
                
                const x1 = 50 + 48 * Math.cos(startRad);
                const y1 = 50 + 48 * Math.sin(startRad);
                const x2 = 50 + 48 * Math.cos(endRad);
                const y2 = 50 + 48 * Math.sin(endRad);
                
                const largeArc = sliceAngle > 180 ? 1 : 0;
                
                const path = `M 50 50 L ${x1} ${y1} A 48 48 0 ${largeArc} 1 ${x2} ${y2} Z`;
                
                // Dilim oluştur
                const slice = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                slice.setAttribute('d', path);
                slice.setAttribute('fill', prize.color);
                slice.setAttribute('stroke', 'white');
                slice.setAttribute('stroke-width', '0.5');
                
                wheelSlices.appendChild(slice);
                
                // Text ekle
                const textAngle = startAngle + sliceAngle / 2;
                const textRad = (textAngle - 90) * Math.PI / 180;
                const textX = 50 + 30 * Math.cos(textRad);
                const textY = 50 + 30 * Math.sin(textRad);
                
                // İkon ekle
                const icon = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                icon.setAttribute('x', textX);
                icon.setAttribute('y', textY - 4);
                icon.setAttribute('text-anchor', 'middle');
                icon.setAttribute('dominant-baseline', 'middle');
                icon.setAttribute('font-size', '6');
                icon.setAttribute('transform', `rotate(${textAngle}, ${textX}, ${textY})`);
                icon.textContent = prize.icon;
                wheelSlices.appendChild(icon);
                
                // Text ekle - İlk satır (sayı veya isim)
                const text1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                text1.setAttribute('x', textX);
                text1.setAttribute('y', textY + 1);
                text1.setAttribute('text-anchor', 'middle');
                text1.setAttribute('dominant-baseline', 'middle');
                text1.setAttribute('fill', 'white');
                text1.setAttribute('font-weight', 'bold');
                text1.setAttribute('font-size', prize.type === 'jeton' ? '5' : '3.5');
                text1.setAttribute('transform', `rotate(${textAngle}, ${textX}, ${textY})`);
                
                if (prize.type === 'jeton') {
                    text1.textContent = prize.amount; // Sadece sayı
                } else if (prize.type === 'arama') {
                    text1.textContent = 'Arama';
                } else if (prize.type === 'onay') {
                    text1.textContent = 'Onay';
                }
                
                wheelSlices.appendChild(text1);
                
                // Text ekle - İkinci satır (Jeton kelimesi veya Paketi kelimesi)
                const text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                text2.setAttribute('x', textX);
                text2.setAttribute('y', textY + 5);
                text2.setAttribute('text-anchor', 'middle');
                text2.setAttribute('dominant-baseline', 'middle');
                text2.setAttribute('fill', 'white');
                text2.setAttribute('font-weight', 'bold');
                text2.setAttribute('font-size', '3.5');
                text2.setAttribute('transform', `rotate(${textAngle}, ${textX}, ${textY})`);
                
                if (prize.type === 'jeton') {
                    text2.textContent = 'Jeton';
                } else {
                    text2.textContent = 'Paketi';
                }
                
                wheelSlices.appendChild(text2);
            });
        }

        // Backend'den durum kontrol et
        function checkSpinStatus() {
            fetch('assets/cark_api.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: 'action=check_status'
            })
            .then(response => response.json())
            .then(data => {
                console.log('🎡 Çark Durumu:', data); // DEBUG
                
                if (data.success) {
                    canSpinFree = data.canSpin;
                    nextFreeTime = data.nextSpinTime;
                    
                    console.log('✅ Status:', data.status);
                    console.log('⏰ remainingTime:', data.remainingTime, 'saniye');
                    console.log('🎯 nextSpinTime:', data.nextSpinTime, 'timestamp');
                    
                    // Duruma göre buton ve görünümü güncelle (timer'ı da başlatır)
                    updateButton(data.status, data.message, data.remainingTime);
                }
            })
            .catch(error => console.error('Durum kontrolü hatası:', error));
        }

        // Çarkı çevir (Backend'den ödül al)
        function spinWheel() {
            if (isSpinning || !canSpinFree || resultShown) return;
            
            isSpinning = true;
            document.getElementById('spinButton').disabled = true;
            document.getElementById('centerButton').disabled = true;
            
            // Backend'den ödül al
            fetch('assets/cark_api.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: 'action=spin'
            })
            .then(response => response.json())
            .then(data => {
                if (!data.success) {
                    alert(data.message || 'Bir hata oluştu');
                    isSpinning = false;
                    document.getElementById('spinButton').disabled = false;
                    document.getElementById('centerButton').disabled = false;
                    return;
                }
                
                // Backend'den gelen ödülü bul
                const selectedPrize = prizes.find(p => p.type === data.prize.type && p.amount === data.prize.amount);
                const prizeIndex = prizes.indexOf(selectedPrize);
                
                const wheel = document.getElementById('wheel');
                
                // Ödülün açısını hesapla
                const sliceAngle = 360 / prizes.length;
                const prizeAngle = prizeIndex * sliceAngle + sliceAngle / 2;
                
                // Toplam dönüş (5 tam tur + ödül açısı)
                const totalRotation = 360 * 5 + (360 - prizeAngle);
                
                wheel.style.setProperty('--rotation', `${totalRotation}deg`);
                wheel.classList.add('spinning');
                
                // 4 saniye sonra sonuç göster
                setTimeout(() => {
                    const finalRotation = totalRotation % 360;
                    
                    wheel.classList.remove('spinning');
                    wheel.style.transform = `rotate(${finalRotation}deg)`;
                    wheel.style.setProperty('--rotation', `${finalRotation}deg`);
                    
                    showResult(selectedPrize);
                    
                    isSpinning = false;
                    
                    // Durumu tekrar kontrol et (jeton güncellendi, süre başladı)
                    setTimeout(() => {
                        checkSpinStatus();
                    }, 500);
                }, 4000);
            })
            .catch(error => {
                console.error('Çevirme hatası:', error);
                alert('Bir hata oluştu');
                isSpinning = false;
                document.getElementById('spinButton').disabled = false;
                document.getElementById('centerButton').disabled = false;
            });
        }

        // Sonuç göster
        function showResult(prize) {
            // Eğer modal zaten açıksa tekrar açma
            if (resultShown) return;
            resultShown = true;
            
            let prizeText = '';
            let iconText = '';
            
            if (prize.type === 'jeton') {
                prizeText = `${prize.amount} Jeton`;
                iconText = '💎';
            } else if (prize.type === 'arama') {
                prizeText = 'Arama Paketi';
                iconText = '📞';
            } else if (prize.type === 'onay') {
                prizeText = 'Onay Paketi';
                iconText = '✓';
            }
            
            document.getElementById('resultPrize').textContent = prizeText;
            document.querySelector('.result-icon').textContent = iconText;
            document.getElementById('resultOverlay').classList.add('show');
            createConfetti();
        }

        // Sonuç kapat
        function closeResult() {
            document.getElementById('resultOverlay').classList.remove('show');
            resultShown = false;
            
            // Çarkın rotation'ını sabitle
            const wheel = document.getElementById('wheel');
            const currentRotation = wheel.style.getPropertyValue('--rotation');
            wheel.style.transform = `rotate(${currentRotation})`;
            wheel.style.setProperty('--rotation', currentRotation);
            
            // Sayfayı yenile (jeton güncellendi)
            setTimeout(() => {
                location.reload();
            }, 300);
        }

        // Konfeti oluştur
        function createConfetti() {
            const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DFE6E9'];
            
            for (let i = 0; i < 50; i++) {
                setTimeout(() => {
                    const confetti = document.createElement('div');
                    confetti.className = 'confetti';
                    confetti.style.left = Math.random() * 100 + '%';
                    confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
                    confetti.style.animationDelay = Math.random() + 's';
                    document.body.appendChild(confetti);
                    
                    setTimeout(() => confetti.remove(), 3000);
                }, i * 30);
            }
        }


        // Geri sayım başlat (nextFreeTime ile)
        function startCountdown(forceStart = false) {
            // Modal açık değilse ve forceStart yoksa başlatma
            if (!isModalOpen && !forceStart) {
                console.log('⚠️ Modal açık değil ve forceStart false, timer başlatılmadı (startCountdown)');
                return;
            }
            
            // Önceki timer'ı temizle
            if (carkCountdownTimer) {
                clearInterval(carkCountdownTimer);
                carkCountdownTimer = null;
            }
            
            if (!nextFreeTime || canSpinFree) {
                const cd = document.getElementById('cark-countdown');
                if (cd) cd.style.display = 'none';
                return;
            }
            
            const countdownDiv = document.getElementById('cark-countdown');
            if (countdownDiv) countdownDiv.style.display = 'block';
            
            carkCountdownTimer = setInterval(() => {
                const now = Math.floor(Date.now() / 1000); // Saniye cinsinden
                const distance = nextFreeTime - now;
                
                if (distance <= 0) {
                    clearInterval(carkCountdownTimer);
                    carkCountdownTimer = null;
                    canSpinFree = true;
                    checkSpinStatus(); // Backend'den tekrar kontrol et (durum güncellenecek)
                    return;
                }
                
                const hours = Math.floor(distance / 3600);
                const minutes = Math.floor((distance % 3600) / 60);
                const seconds = distance % 60;
                
                const timerEl = document.getElementById('cark-timer');
                if (timerEl) {
                    timerEl.textContent = 
                    `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
                }
            }, 1000);
        }

        // Geri sayım başlat (remainingTime saniye ile - backend'den gelen)
        function startCountdownWithTime(remainingSeconds, forceStart = false) {
            console.log('⏱️ startCountdownWithTime çağrıldı, saniye:', remainingSeconds, 'forceStart:', forceStart);
            
            // Modal açık değilse ve forceStart yoksa başlatma
            if (!isModalOpen && !forceStart) {
                console.log('⚠️ Modal açık değil ve forceStart false, timer başlatılmadı');
                return;
            }
            
            // ÖNEMLİ: Önceki timer'ı temizle (çakışmayı önle)
            if (carkCountdownTimer) {
                console.log('🧹 Önceki timer temizleniyor...');
                clearInterval(carkCountdownTimer);
                carkCountdownTimer = null;
            }
            
            if (remainingSeconds <= 0 || canSpinFree) {
                console.log('❌ Geri sayım başlatılamadı, remainingSeconds:', remainingSeconds, 'canSpinFree:', canSpinFree);
                const cd = document.getElementById('cark-countdown');
                if (cd) cd.style.display = 'none';
                return;
            }
            
            const countdownDiv = document.getElementById('cark-countdown');
            if (!countdownDiv) {
                console.error('❌ countdown div bulunamadı!');
                return;
            }
            
            countdownDiv.style.display = 'block';
            countdownDiv.style.visibility = 'visible';
            countdownDiv.style.opacity = '1';
            
            // Debug: Element gerçekten görünür mü?
            const computedStyle = window.getComputedStyle(countdownDiv);
            console.log('✅ Countdown div görünür yapıldı');
            console.log('📊 Display:', computedStyle.display);
            console.log('📊 Visibility:', computedStyle.visibility);
            console.log('📊 Opacity:', computedStyle.opacity);
            console.log('📊 Position:', countdownDiv.offsetTop, countdownDiv.offsetLeft);
            console.log('📊 Size:', countdownDiv.offsetWidth, 'x', countdownDiv.offsetHeight);
            
            // İlk gösterimi hemen yap
            let remainingTime = remainingSeconds;
            updateTimerDisplay(remainingTime);
            console.log('🎬 Timer başladı, her saniyede güncelleme yapılacak');
            
            carkCountdownTimer = setInterval(() => {
                remainingTime--;
                // Sadece modal açıksa log at (performans için)
                if (isModalOpen && remainingTime % 10 === 0) {
                    console.log('⏳ Kalan süre:', remainingTime, 'saniye');
                }
                
                if (remainingTime <= 0) {
                    clearInterval(carkCountdownTimer);
                    carkCountdownTimer = null;
                    canSpinFree = true;
                    console.log('⏰ Süre doldu! Durumu kontrol ediliyor...');
                    checkSpinStatus(); // Backend'den tekrar kontrol et
                    return;
                }
                
                updateTimerDisplay(remainingTime);
            }, 1000);
        }

        // Timer gösterimini güncelle
        function updateTimerDisplay(seconds) {
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const secs = seconds % 60;
            
            const timerElement = document.getElementById('cark-timer');
            const countdownElement = document.getElementById('cark-countdown');
            
            if (timerElement) {
                timerElement.textContent = 
                    `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
                
                // DEBUG: Element gerçekten görünür mü? (Sadece modal açıksa)
                if (isModalOpen && seconds % 30 === 0) { // Her 30 saniyede bir kontrol
                    const computedStyle = window.getComputedStyle(countdownElement);
                    console.log('🔍 Countdown Element:', countdownElement.offsetWidth + 'x' + countdownElement.offsetHeight);
                }
            }
        }

        // Buton güncelle (duruma göre)
        function updateButton(status = null, message = null, remainingTime = null) {
            const button = document.getElementById('spinButton');
            const centerBtn = document.getElementById('centerButton');
            const countdownDiv = document.getElementById('cark-countdown');
            const countdownLabel = document.querySelector('.countdown-label');
            
            // Eğer status yoksa eski mantıkla çalış
            if (!status) {
            if (canSpinFree) {
                    button.innerHTML = '<i class="fas fa-gift"></i> ÜCRETSİZ ÇEVİR!';
                    button.classList.add('free');
                    button.disabled = false;
                    centerBtn.disabled = false;
                    countdownDiv.style.display = 'none';
                } else {
                    button.innerHTML = '<i class="fas fa-clock"></i> Sonraki Çark İçin Bekle';
                    button.classList.remove('free');
                    button.disabled = true;
                    centerBtn.disabled = true;
                    countdownDiv.style.display = 'block';
                }
                return;
            }
            
            // Countdown'ı gizle (duruma göre gösterilecek)
            countdownDiv.style.display = 'none';
            
            if (status === 'cevirebilir') {
                // Çevirebilir
                button.innerHTML = '<i class="fas fa-gift"></i> ÜCRETSİZ ÇEVİR!';
                button.classList.add('free');
                button.disabled = false;
                centerBtn.disabled = false;
                countdownDiv.classList.remove('show-countdown');
                
            } else if (status === 'jeton_var') {
                // Jetonu var, çeviremez (süre gösterme - ASLA!)
                button.innerHTML = '<i class="fas fa-coins"></i> Jetonunuz Bitince Çevirebilirsiniz';
                button.classList.remove('free');
                button.disabled = true;
                centerBtn.disabled = true;
                countdownDiv.classList.remove('show-countdown');
                console.log('🚫 Jetonu var, countdown GİZLENDİ');
                
            } else if (status === 'ilk_cevirme_bekle') {
                // İlk çevirme için bekliyor
                button.innerHTML = '<i class="fas fa-hourglass-half"></i> İlk Çevirme İçin Bekleyin';
                button.classList.remove('free');
                button.disabled = true;
                centerBtn.disabled = true;
                countdownLabel.textContent = 'İlk çevirme için kalan süre:';
                // Countdown'ı GÖRÜNÜR yap (class ekle - CSS'te display: block !important)
                countdownDiv.classList.add('show-countdown');
                console.log('✅ Countdown görünür yapıldı (ilk_cevirme_bekle)');
                // Timer'ı başlat (sadece modal açıksa)
                console.log('🔄 Timer başlatılıyor (ilk_cevirme_bekle), remainingTime:', remainingTime);
                if (remainingTime && remainingTime > 0) {
                    console.log('✅ startCountdownWithTime çağrılıyor:', remainingTime, 'saniye');
                    startCountdownWithTime(remainingTime, false); // forceStart = false
            } else {
                    console.log('⚠️ startCountdown çağrılıyor');
                    startCountdown(false); // forceStart = false
                }
                
            } else if (status === 'zaman_bekle') {
                // Sonraki çevirme için bekliyor
                button.innerHTML = '<i class="fas fa-clock"></i> Sonraki Çark İçin Bekleyin';
                button.classList.remove('free');
                button.disabled = true;
                centerBtn.disabled = true;
                countdownLabel.textContent = 'Sonraki çark için kalan süre:';
                // Countdown'ı GÖRÜNÜR yap (class ekle - CSS'te display: block !important)
                countdownDiv.classList.add('show-countdown');
                console.log('✅ Countdown görünür yapıldı (zaman_bekle)');
                // Timer'ı başlat (sadece modal açıksa)
                console.log('🔄 Timer başlatılıyor (zaman_bekle), remainingTime:', remainingTime);
                if (remainingTime && remainingTime > 0) {
                    console.log('✅ startCountdownWithTime çağrılıyor:', remainingTime, 'saniye');
                    startCountdownWithTime(remainingTime, false); // forceStart = false
                } else {
                    console.log('⚠️ startCountdown çağrılıyor');
                    startCountdown(false); // forceStart = false
                }
            }
        }

        // Sayfa yüklendiğinde
        window.onload = function() {
            console.log('🎡 Çark yüklendi');
            drawWheel();
            // Durumu kontrol et AMA timer başlatma (modal açıldığında başlayacak)
            // checkSpinStatus(); // Yoruma aldık, modal açıldığında çağrılacak
        };

        // Modal açıldığında durumu kontrol et
        let isModalOpen = false;
        
        function startStatusCheck() {
            console.log('📱 Modal açıldı, durum kontrol ediliyor...');
            isModalOpen = true;
            checkSpinStatus(); // Timer'ı da başlatacak
        }
        
        function stopStatusCheck() {
            console.log('🚪 Modal kapandı');
            isModalOpen = false;
            // Timer'ı durdur
            if (carkCountdownTimer) {
                clearInterval(carkCountdownTimer);
                carkCountdownTimer = null;
                console.log('⏹️ Timer durduruldu');
            }
        }
        
        // Modal kontrolü - Çark görünür olduğunda timer başlat
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🔍 Çark container kontrolü başlatılıyor...');
            
            const container = document.querySelector('.cark-container');
            if (!container) {
                console.error('❌ .cark-container bulunamadı!');
                return;
            }
            
            // Görünürlük kontrolü fonksiyonu
            function checkVisibility() {
                const rect = container.getBoundingClientRect();
                const isVisible = (
                    rect.top >= 0 &&
                    rect.left >= 0 &&
                    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
                    rect.width > 0 &&
                    rect.height > 0
                );
                
                if (isVisible && !isModalOpen) {
                    console.log('✅ Çark görünür, modal açık sayılıyor');
                    startStatusCheck();
                } else if (!isVisible && isModalOpen) {
                    console.log('❌ Çark görünmez, modal kapalı sayılıyor');
                    stopStatusCheck();
                }
                
                return isVisible;
            }
            
            // İlk kontrol (sayfa yüklendiğinde modal zaten açık olabilir)
            setTimeout(() => {
                console.log('🔎 İlk görünürlük kontrolü yapılıyor...');
                checkVisibility();
            }, 500);
            
            // IntersectionObserver ile sürekli izle
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    console.log('👁️ IntersectionObserver:', entry.isIntersecting, 'ratio:', entry.intersectionRatio);
                    if (entry.isIntersecting && entry.intersectionRatio > 0.3) {
                        if (!isModalOpen) {
                            console.log('✅ Çark görünür oldu (IntersectionObserver)');
                            startStatusCheck();
                        }
                    } else {
                        if (isModalOpen) {
                            console.log('❌ Çark görünmez oldu (IntersectionObserver)');
                            stopStatusCheck();
                        }
                    }
                });
            }, { threshold: [0, 0.3, 0.5, 1] });
            
            observer.observe(container);
            
            // Parent document'taki modal event'lerini de dinle (varsa)
            try {
                const modal = window.parent?.document?.getElementById('carkModal');
                if (modal) {
                    console.log('✅ Modal parent document\'ta bulundu, event listener eklendi');
                    modal.addEventListener('shown.bs.modal', function() {
                        console.log('📱 shown.bs.modal tetiklendi');
                        if (!isModalOpen) startStatusCheck();
                    });
                    modal.addEventListener('hidden.bs.modal', function() {
                        console.log('🚪 hidden.bs.modal tetiklendi');
                        if (isModalOpen) stopStatusCheck();
                    });
                }
            } catch(e) {
                console.log('⚠️ Parent modal event listener eklenemedi:', e.message);
            }
        });

        // Event listeners
        document.getElementById('spinButton').addEventListener('click', spinWheel);
        document.getElementById('centerButton').addEventListener('click', spinWheel);
    </script>

