Miraç'a Özel 🎂

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miraç'a Özel 🎂</title>

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Trebuchet MS', sans-serif;
  background: linear-gradient(135deg, #f8d9e8, #dcd6ff, #d5efff);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-x: hidden;
  color: #51415e;
}

.card {
  width: 100%;
  max-width: 430px;
  background: rgba(255,255,255,0.88);
  border-radius: 28px;
  padding: 30px 22px;
  text-align: center;
  box-shadow: 0 15px 45px #8c76a544;
  animation: appear .7s ease;
}

@keyframes appear {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}

h1 {
  color: #a65d91;
  font-size: 27px;
}

p {
  line-height: 1.7;
  font-size: 16px;
}

.emoji {
  font-size: 65px;
  margin: 15px;
}

button {
  border: none;
  padding: 14px 20px;
  margin: 8px 3px;
  width: 90%;
  border-radius: 18px;
  background: #dba9d0;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: .2s;
}

button:hover {
  transform: scale(1.04);
  background: #bd82b2;
}

.secondary {
  background: #b5a7e8;
}

.hidden {
  display: none;
}

#message {
  background: #fff1f8;
  padding: 18px;
  border-radius: 20px;
  margin-top: 15px;
}

.star {
  position: fixed;
  top: -20px;
  animation: fall 5s linear infinite;
  pointer-events: none;
}

@keyframes fall {
  to { transform: translateY(110vh) rotate(360deg); }
}

</style>
</head>

<body>

<div class="card">

<section id="start">
  <div class="emoji">🎁</div>
  <h1>Miraç'a Küçük Bir Sürpriz!</h1>
  <p>
    Bugün sıradan bir gün değil.<br>
    Çünkü bugün senin günün! ✨
  </p>
  <p>
    Senin için küçük bir oyun hazırladım.
    Bakalım sonunda seni nasıl bir sürpriz bekliyor?
  </p>
  <button onclick="next('q1')">Sürprizi Aç 💗</button>
</section>

<section id="q1" class="hidden">
  <div class="emoji">🌟</div>
  <h1>1. Soru</h1>
  <p>Sence bugün kimin günü?</p>
  <button onclick="answer(1,'Doğru! Bugün Miraç’ın günü! 🎂')">
    Miraç'ın!
  </button>
  <button onclick="answer(1,'Bir daha düşün bakalım. 😄')">
    Benim!
  </button>
  <button onclick="answer(1,'Tekrar dene! Bugün çok özel biri var. 💗')">
    Başka birinin!
  </button>
  <div id="feedback1"></div>
  <button class="secondary hidden" id="go1" onclick="next('q2')">
    Devam Et →
  </button>
</section>

<section id="q2" class="hidden">
  <div class="emoji">💫</div>
  <h1>2. Soru</h1>
  <p>Bir doğum gününde en güzel hediye sence nedir?</p>
  <button onclick="answer(2,'Güzel bir cevap! Ama asıl sürpriz daha büyük. 💕')">
    Güzel anılar
  </button>
  <button onclick="answer(2,'Kesinlikle! Mutluluk paylaştıkça güzelleşir. ✨')">
    Mutluluk
  </button>
  <button onclick="answer(2,'Güzel seçim! Ama bir şey daha var. 🎁')">
    Sürprizler
  </button>
  <div id="feedback2"></div>
  <button class="secondary hidden" id="go2" onclick="next('q3')">
    Devam Et →
  </button>
</section>

<section id="q3" class="hidden">
  <div class="emoji">🎂</div>
  <h1>Son Soru!</h1>
  <p>Şimdi bir dilek tutman gerekiyor. Hazır mısın?</p>
  <button onclick="answer(3,'Dileğin kalbinden geçtiyse gerisi güzel olsun! 🌠')">
    Dileğimi tuttum!
  </button>
  <button onclick="answer(3,'O zaman gözlerini kapat ve güzel şeyler düşün. 💜')">
    Biraz daha düşüneyim.
  </button>
  <div id="feedback3"></div>
  <button class="secondary hidden" id="go3" onclick="next('final')">
    Büyük Sürprizi Gör 🎁
  </button>
</section>

<section id="final" class="hidden">
  <div class="emoji">🎉🎂🎈</div>
  <h1>İyi ki Doğdun Miraç!</h1>

  <div id="message">
    <p>
      Miraç,<br><br>
      Bugün senin günün ve bu güzel günde
      sana kocaman bir mutluluk diliyorum.
      Yeni yaşın; güzel anılarla, kahkahalarla,
      başarılarla ve unutamayacağın güzelliklerle dolsun.<br><br>

      Hayatında her zaman yüzünü güldüren insanlar,
      gerçekleştirmek istediğin hayaller ve
      seni mutlu eden sebepler olsun.<br><br>

      Umarım bu yeni yaşın, şimdiye kadarki
      en güzel yaşlarından biri olur.<br><br>

      Kendin gibi güzel kal ve hiçbir zaman
      gülümsemeyi bırakma.<br><br>

      **İYİ Kİ DOĞDUN MİRAÇ!** 💗
    </p>
  </div>

  <div class="emoji">💐</div>
  <p>Bu küçük sürpriz tamamen senin için hazırlandı.</p>

  <button onclick="restart()">Tekrar Oyna 🔄</button>
</section>

</div>

<script>
function next(id) {
  document.querySelectorAll('.card section').forEach(s => {
    s.classList.add('hidden');
  });
  document.getElementById(id).classList.remove('hidden');
}

function answer(question, message) {
  document.getElementById('feedback'+question).innerHTML =
    '<p style="color:#a65d91;font-weight:bold;">'+message+'</p>';

  document.getElementById('go'+question).classList.remove('hidden');
}

function restart() {
  for(let i=1;i<=3;i++) {
    document.getElementById('feedback'+i).innerHTML='';
    document.getElementById('go'+i).classList.add('hidden');
  }
  next('start');
}

function createStar() {
  const star = document.createElement('div');
  star.className = 'star';
  star.innerHTML = ['✨','💗','⭐','🌸'][Math.floor(Math.random()*4)];
  star.style.left = Math.random()*100+'vw';
  star.style.fontSize = (12+Math.random()*18)+'px';
  star.style.animationDuration = (3+Math.random()*4)+'s';
  document.body.appendChild(star);
  setTimeout(()=>star.remove(),7000);
}

setInterval(createStar,500);
</script>

</body>
</html>