/* 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>