:root {
  --pembe-acik: #fff0f3;
  --pembe: #ffb3c6;
  --pembe-koyu: #ff8fab;
  --kirmizi: #ff4d6d;
  --bordo: #c9184a;
  --yazi: #8a1538;
  --baslik-font: 'Dancing Script', cursive;
  --govde-font: 'Quicksand', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  font-family: var(--govde-font);
  color: var(--yazi);
  background: radial-gradient(circle at 50% 30%, #fff5f7 0%, var(--pembe-acik) 40%, #ffd6e0 100%);
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Uçuşan kalpler ---------- */
.kalpler { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.kalp {
  position: absolute;
  bottom: -10vh;
  left: var(--x);
  font-size: var(--boyut);
  color: var(--renk);
  opacity: 0;
  animation: uc var(--sure) linear var(--gecikme) infinite;
  will-change: transform, opacity;
}

@keyframes uc {
  0%   { transform: translate(0, 0) rotate(-10deg); opacity: 0; }
  10%  { opacity: var(--opak); }
  90%  { opacity: var(--opak); }
  100% { transform: translate(var(--savrulma), -120vh) rotate(20deg); opacity: 0; }
}

/* ---------- Soru ekranı ---------- */
.ekran {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  transition: opacity .4s ease;
}

.ekran.cikis { opacity: 0; }

.soru {
  font-family: var(--baslik-font);
  font-weight: 700;
  font-size: clamp(2.4rem, 11vw, 4.5rem);
  line-height: 1.15;
  max-width: 14ch;
  text-shadow: 0 2px 12px rgba(255, 77, 109, .25);
}

.soru.sallan { animation: sallan .5s ease; }

@keyframes sallan {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.butonlar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.25rem;
}

.btn {
  font-family: var(--govde-font);
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: font-size .4s ease, padding .4s ease, transform .15s ease, opacity .3s ease;
}

.btn:active { transform: scale(.96); }

.evet {
  font-size: 1.3rem;
  padding: .85em 1.9em;
  color: #fff;
  background: linear-gradient(135deg, var(--kirmizi), var(--bordo));
  box-shadow: 0 10px 25px rgba(201, 24, 74, .35);
  animation: nabiz 1.8s ease-in-out infinite;
}

.hayir {
  font-size: 1.05rem;
  padding: .75em 1.6em;
  color: var(--yazi);
  background: rgba(255, 255, 255, .75);
  box-shadow: inset 0 0 0 2px var(--pembe-koyu);
}

@keyframes nabiz {
  0%, 100% { box-shadow: 0 10px 25px rgba(201, 24, 74, .35); }
  50%      { box-shadow: 0 10px 35px rgba(201, 24, 74, .6), 0 0 0 8px rgba(255, 77, 109, .12); }
}

/* Her "Hayır"da Evet büyür, Hayır küçülür */
body[data-asama="1"] .evet  { font-size: 1.75rem; }
body[data-asama="1"] .hayir { font-size: .9rem; }
body[data-asama="2"] .evet  { font-size: 2.3rem; }
body[data-asama="2"] .hayir { font-size: .75rem; opacity: .8; }
body[data-asama="3"] .evet  { font-size: clamp(3.5rem, 20vw, 8rem); padding: .5em 1.1em; }
body[data-asama="3"] .hayir { display: none; }

@media (hover: hover) {
  .evet:hover { filter: brightness(1.08); }
}

/* ---------- Evet sonrası ekran ---------- */
.mutlu {
  position: fixed;
  inset: 0;
  z-index: 5;
  justify-content: flex-start;
  padding-top: max(14vh, env(safe-area-inset-top));
  background: linear-gradient(160deg, #ff8fab, #c9184a);
  overflow: hidden;
}

.ekran[hidden] { display: none; }

.foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  transform-origin: 50% 65%;
  opacity: 0;
  transition: opacity 2.5s ease;
}

.foto.goster {
  opacity: 1;
  animation: kenburns 22s ease-out forwards;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

/* Üstte yazı okunsun diye koyu-pembe, ortada yüzler belirgin kalsın diye açık */
.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(60, 0, 25, .70) 0%,
    rgba(140, 20, 70, .35) 30%,
    rgba(0, 0, 0, 0) 55%,
    rgba(80, 0, 35, .25) 100%);
}

.mutlu-icerik {
  position: relative;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.2s ease .3s, transform 1.2s ease .3s;
}

.mutlu.aktif .mutlu-icerik { opacity: 1; transform: none; }

.mutlu-baslik {
  font-family: var(--baslik-font);
  font-size: clamp(2.6rem, 12vw, 5rem);
  line-height: 1.1;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .45);
}

.mutlu-mesaj {
  margin-top: 1rem;
  font-size: clamp(1.1rem, 4.8vw, 1.5rem);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* ---------- Ses butonu ---------- */
.ses-btn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 60;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .4);
  cursor: pointer;
  touch-action: manipulation;
}

.ses-btn[hidden] { display: none; }

/* ---------- Gizli YouTube ---------- */
.yt-kutu {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .kalp, .evet, .foto.goster { animation: none; }
}