/* Kalp ve Animasyonlar */
    .kalp {
        position: absolute;
        font-size: 4em;
        color: #ff6b6b; 
        animation: float 4s ease-in forwards;
        opacity: 0;
    }

    @keyframes bounceIn {
        0% { transform: scale(0.5); opacity: 0; }
        95% { transform: scale(1); opacity: 1; }
    }
    @keyframes float {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(-500px) rotate(30deg); opacity: 0; }
    }
</style>

<div id="soru">Benimle date'e çikarmısın👉👈?</div>

<div id="butonlar" style="position: relative; width: 80vw; height: 100px; display: flex; justify-content: center; align-items: center;">
    <button id="evetBtn" class="cevap-butonu" onclick="evetCevabi()">EVET</button>
    <button id="hayirBtn" class="cevap-butonu" onclick="hayirCevabi()">HAYIR</button>
</div>

<div id="mesaj-alani">
    <div id="sonMesaj"></div>
</div>

<script>
    const hayirBtn = document.getElementById('hayirBtn');
    const evetBtn = document.getElementById('evetBtn');
    const mesajAlani = document.getElementById('mesaj-alani');
    const sonMesajDiv = document.getElementById('sonMesaj');
    const body = document.body;
    const butonlarDiv = document.getElementById('butonlar');

    // "Hayır" butonuna tıklandığında çalışan fonksiyon
    function hayirCevabi() {
        // Butonun bulunduğu 'butonlar' div'inin boyutlarını al
        const containerRect = butonlarDiv.getBoundingClientRect();
        const btnRect = hayirBtn.getBoundingClientRect();

        // Yeni rastgele x ve y pozisyonları hesapla
        // Yeni konum, butonlar div'inin sınırları içinde kalmalı
        const maxX = containerRect.width - btnRect.width;
        const maxY = containerRect.height - btnRect.height;
        
        // Rastgele pozisyonları hesapla (0'dan maxX/maxY'a kadar)
        const newX = Math.random() * maxX; 
        const newY = Math.random() * maxY;
        
        // Butonu yeni konuma taşı (css transform kullanmak daha akıcıdır)
        // Butonun yer değiştirme animasyonu kısa ve hızlı görünecektir.
        hayirBtn.style.transform = `translate(${newX}px, ${newY}px)`;
    }

    // Kalp animasyonu oluşturan fonksiyon
    function kalpOlustur(sayi) {
        for (let i = 0; i < sayi; i++) {
            const kalp = document.createElement('div');
            kalp.textContent = '🫶';
            kalp.className = 'kalp';
            
            // Kalp başlangıç pozisyonunu rastgele ayarla
            kalp.style.left = Math.random() * 100 + 'vw';
            kalp.style.bottom = '-50px'; // Ekranın altından başlasın
            kalp.style.animationDelay = Math.random() * 1 + 's'; // Rastgele gecikme

            mesajAlani.appendChild(kalp);
        }
    }

    // "Evet" butonuna basıldığında çalışan fonksiyon
    function evetCevabi() {
        // Butonları ve soruyu gizle
        evetBtn.style.display = 'none';
        hayirBtn.style.display = 'none';
        document.getElementById('soru').style.display = 'none';

        // Mesaj alanını göster
        mesajAlani.style.display = 'flex';

        // Kalp animasyonunu başlat
        kalpOlustur(20); 

        // Cevap mesajını göster
        sonMesajDiv.innerHTML = 'ufak bir şaka yapmak istedim gül diye🌹! 🥰<br><br> (Anlayışın için teşekkür ederim) 😉';

        // Animasyon bittikten sonra kalpleri temizle
        setTimeout(() => {
            // Kalpleri silmek yerine sadece ana mesajı tutabiliriz
            // Amaç mesajın ve kalplerin görünmesiydi.
        }, Int32Array);
    }

</script>