/* =========================================================
   Özür Sayfası — stiller
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink: #ff4d7d;
  --pink-2: #ff7aa2;
  --pink-3: #ffb3c8;
  --pink-4: #ffe1ea;
  --rose: #e8366b;
  --lav: #b77ce0;
  --gold: #ffcf6b;
  --cream: #fffaf5;
  --ink: #5b2340;
  --ink-soft: #8d5570;
  --card: rgba(255, 255, 255, .72);
  --shadow: 0 20px 45px -22px rgba(200, 40, 100, .55);
  --f-body: 'Quicksand', system-ui, -apple-system, sans-serif;
  --f-script: 'Dancing Script', cursive;
  --f-title: 'Pacifico', cursive;
  color-scheme: light;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }

body {
  font-family: var(--f-body);
  color: var(--ink);
  background: #ffe4ec;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, #fff3f7 0, transparent 38%),
    radial-gradient(circle at 88% 28%, #ffcfe0 0, transparent 42%),
    radial-gradient(circle at 20% 80%, #f7d0f0 0, transparent 45%),
    radial-gradient(circle at 90% 95%, #ffc4d6 0, transparent 40%),
    linear-gradient(170deg, #ffeef3 0%, #ffd9e5 50%, #fbd3ea 100%);
}
body.locked, body.celebrating { overflow: hidden; }

button { font: inherit; color: inherit; }

#bg-canvas, #fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#bg-canvas { z-index: 1; }
#fx-canvas { z-index: 110; }

main { position: relative; z-index: 2; overflow-x: hidden; overflow-x: clip; }

/* ---------- Üst ilerleme çubuğu ---------- */
.progress {
  position: fixed; top: env(safe-area-inset-top); left: 0; right: 0;
  height: 4px; z-index: 50;
  background: rgba(255, 255, 255, .45);
}
.progress span {
  position: relative; display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--pink-2), var(--pink), var(--lav));
  box-shadow: 0 0 12px var(--pink);
  border-radius: 0 4px 4px 0;
}
.progress span::after {
  content: "💗";
  position: absolute; right: -8px; top: 50%;
  transform: translateY(-45%);
  font-size: 13px;
}

/* ---------- Müzik butonu ---------- */
.music-btn {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 60;
  width: 52px; height: 52px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  font-size: 22px;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .6s, transform .25s;
}
body.started .music-btn { opacity: 1; pointer-events: auto; }
.music-btn:active { transform: scale(.9); }
.music-btn.playing { animation: spin 5s linear infinite; }
.music-btn:not(.playing)::after {
  content: "";
  position: absolute;
  width: 62%; height: 2.5px;
  background: var(--rose);
  border-radius: 2px;
  transform: rotate(-45deg);
}

/* =========================================================
   GİRİŞ (ZARF)
   ========================================================= */
#intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  text-align: center; color: #fff;
  background: radial-gradient(circle at 50% 35%, #ff9dbb 0%, #e64d7f 45%, #8e1f50 100%);
  transition: opacity .9s ease, visibility .9s;
}
#intro.hide { opacity: 0; visibility: hidden; }
.intro-top {
  font-family: var(--f-script);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  margin-bottom: clamp(120px, 17vh, 160px);
  text-shadow: 0 3px 14px rgba(0, 0, 0, .2);
  animation: floatY 3s ease-in-out infinite;
}
.intro-hint {
  margin-top: 44px;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  animation: blink 1.6s ease-in-out infinite;
}

.envelope {
  position: relative;
  width: min(78vw, 320px);
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  cursor: pointer;
  outline: none;
  filter: drop-shadow(0 25px 30px rgba(80, 0, 30, .4));
  animation: wiggle 2.8s ease-in-out infinite;
}
.envelope.open { animation: none; }
.env-back { position: absolute; inset: 0; background: #c9245a; border-radius: 12px; }
.env-letter {
  position: absolute;
  left: 7%; right: 7%; top: 6%; height: 88%;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--cream);
  border-radius: 8px;
  color: var(--rose);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1) .45s;
}
.env-letter span { font-size: 2.2rem; animation: heartbeat 1.2s ease-in-out infinite; }
.env-letter p { font-family: var(--f-script); font-weight: 700; font-size: 1.35rem; }
.env-front {
  position: absolute; inset: 0; z-index: 3;
  border-radius: 12px;
  background: linear-gradient(160deg, #ff6f98, #ec3f73);
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}
.env-flap {
  position: absolute; left: 0; right: 0; top: 0;
  height: 62%;
  z-index: 4;
  background: linear-gradient(180deg, #ff8fb0, #f5578a);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: perspective(700px) rotateX(0deg);
  transition: transform .7s ease, z-index 0s linear .35s;
}
.envelope.open .env-flap { transform: perspective(700px) rotateX(180deg); z-index: 1; }
.envelope.open .env-letter { transform: translateY(-58%); }
.env-seal {
  position: absolute; left: 50%; top: 62%;
  z-index: 5;
  width: 66px; height: 66px;
  margin: -33px 0 0 -33px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px;
  background: radial-gradient(circle at 35% 30%, #ff9ab7, #d91e5b);
  box-shadow: 0 6px 16px rgba(120, 0, 40, .45), inset 0 -3px 6px rgba(0, 0, 0, .2);
  animation: pulse 1.4s ease-in-out infinite;
  transition: opacity .3s, scale .3s;
}
.envelope.open .env-seal { opacity: 0; scale: .3; animation: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(64px + env(safe-area-inset-top)) 16px 100px;
  text-align: center;
  overflow: hidden;
}
.enter { opacity: 0; }
body.started .enter {
  animation: rise 1s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--d, 0) * .2s + .3s);
}
.hero-heart { position: relative; display: grid; place-items: center; }
.hero-heart::before, .hero-heart::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 200px; height: 200px; margin: -100px 0 0 -100px;
  border-radius: 50%;
  border: 2px solid var(--pink-2);
  opacity: 0;
  animation: ring 2.6s ease-out infinite;
}
.hero-heart::after { animation-delay: 1.3s; }
.hero-chibi { position: relative; width: 150px; filter: drop-shadow(0 14px 18px rgba(200, 40, 100, .35)); }
.hero-pre {
  margin-top: 10px;
  font-family: var(--f-script);
  font-weight: 700;
  font-size: clamp(1.7rem, 6.5vw, 2.6rem);
  color: var(--rose);
}
.hero-title {
  font-family: var(--f-title);
  font-weight: 400;
  font-size: clamp(2.8rem, 12.5vw, 7rem);
  line-height: 1.25;
  margin: 4px 0 16px;
  padding: 0 .12em;
}
.shimmer {
  background: linear-gradient(90deg, #ff3d77, #ff8fb1, #b77ce0, #ff3d77, #ff8fb1);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
  filter: drop-shadow(0 4px 0 rgba(255, 255, 255, .9));
}
.hero-sub {
  max-width: 560px;
  font-size: clamp(1rem, 3.9vw, 1.2rem);
  font-weight: 600;
  line-height: 1.65;
  color: var(--ink-soft);
}
.float-word {
  position: absolute;
  font-family: var(--f-script);
  font-weight: 700;
  font-size: clamp(.95rem, 3vw, 1.45rem);
  color: var(--pink);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  animation: floatY var(--dur, 6s) ease-in-out infinite;
  transition: opacity 1.5s ease;
}
body.started .float-word { opacity: .38; }
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 1s 2.2s;
}
body.started .scroll-down { opacity: 1; }
.scroll-down span {
  position: relative;
  width: 22px; height: 36px;
  border: 2px solid var(--pink);
  border-radius: 12px;
}
.scroll-down span::after {
  content: "";
  position: absolute; top: 6px; left: 50%;
  width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px;
  background: var(--pink);
  animation: scrollDot 1.6s ease-in-out infinite;
}

/* ---------- Kayan şerit ---------- */
.ribbon-wrap { position: relative; z-index: 3; margin-top: 70px; transform: rotate(-2.5deg); }
.runner {
  position: absolute; left: 0; bottom: calc(100% - 7px);
  z-index: 2;
  width: 62px;
  animation: runAcross 10s linear infinite;
}
.rp { position: absolute; left: 70%; bottom: 22px; font-size: 14px; opacity: 0; animation: runPuff 1.2s ease-out infinite; }
.rp.r2 { animation-delay: .4s; }
.rp.r3 { animation-delay: .8s; }
.ribbon {
  position: relative;
  width: 110%;
  left: -5%;
  padding: 13px 0;
  overflow: hidden;
  background: linear-gradient(90deg, var(--pink), var(--rose) 50%, var(--lav));
  color: #fff;
  box-shadow: var(--shadow);
}
.ribbon-track {
  display: flex;
  width: max-content;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  animation: marquee 28s linear infinite;
}
.ribbon-track span { padding: 0 18px; white-space: nowrap; }

/* =========================================================
   GENEL BÖLÜMLER
   ========================================================= */
.section {
  max-width: 520px;
  margin: 0 auto;
  padding: 72px 16px;
}
.section-title {
  font-family: var(--f-script);
  font-weight: 700;
  font-size: clamp(2.1rem, 7.5vw, 3.4rem);
  line-height: 1.2;
  text-align: center;
  color: var(--rose);
  text-shadow: 0 2px 0 #fff;
  margin-bottom: 30px;
}
.section-sub {
  text-align: center;
  font-weight: 600;
  color: var(--ink-soft);
  margin: -18px 0 34px;
}
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(.97);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Mektup ---------- */
.letter {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  min-height: 320px;
  padding: clamp(34px, 6vw, 58px) clamp(22px, 6vw, 60px) clamp(24px, 5vw, 40px) clamp(30px, 7vw, 72px);
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 100% 0, rgba(255, 179, 200, .35), transparent 40%),
    radial-gradient(circle at 0 100%, rgba(183, 124, 224, .12), transparent 45%);
  border-radius: 6px;
  box-shadow: 0 30px 60px -25px rgba(150, 20, 70, .5), 0 0 0 1px rgba(232, 54, 107, .08);
  font-family: var(--f-script);
  font-size: clamp(1.3rem, 4.6vw, 1.65rem);
  line-height: 1.7;
  color: #6b2446;
}
.letter.visible { transform: rotate(-.6deg); }
.letter::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: clamp(16px, 4vw, 40px);
  width: 2px;
  background: rgba(255, 77, 125, .28);
}
.letter-tape {
  position: absolute;
  top: -14px; left: 50%;
  width: 120px; height: 30px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 179, 200, .8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.letter-text p { margin-bottom: .85em; }
.letter-text p.greet { font-weight: 700; font-size: 1.12em; }
.letter-text p.sign { text-align: right; font-weight: 700; margin-top: 1.1em; }
.caret {
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -.12em;
  background: var(--rose);
  animation: caret .8s step-end infinite;
}
.link-btn {
  display: block;
  margin: 8px auto 0;
  border: none; background: none;
  font-family: var(--f-body);
  font-size: .9rem; font-weight: 700;
  color: var(--rose);
  cursor: pointer;
  opacity: .85;
}
.link-btn.hidden { display: none; }

/* ---------- Üzgünlük ölçer ---------- */
.meter-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 34px 24px;
  text-align: center;
  background: var(--card);
  border: 2px solid #fff;
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.duo { display: flex; justify-content: center; align-items: flex-end; gap: 2px; margin: 26px 0 18px; }
.duo-item { position: relative; width: 122px; }
.bubble {
  position: absolute; top: -24px; left: 0; right: 0; z-index: 2;
  width: max-content; margin: 0 auto;
  padding: 5px 11px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 14px -6px rgba(150, 20, 70, .45);
  font-size: .8rem; font-weight: 700;
  color: var(--rose);
  animation: floatY 2.6s ease-in-out infinite;
}
.bubble::after {
  content: "";
  position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
  border: 6px solid transparent; border-bottom: 0; border-top-color: #fff;
}
.duo-heart { align-self: center; font-size: 1.9rem; transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.8, .5, 1); }
.meter-card.overflow .duo-heart { transform: scale(1); }
.meter {
  position: relative;
  height: 26px;
  border-radius: 99px;
  background: #fff;
  box-shadow: inset 0 2px 6px rgba(150, 20, 70, .18);
  overflow: hidden;
}
.meter-fill {
  height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffb3c8, #ff4d7d, #c2185b, #ff4d7d);
  background-size: 200% 100%;
  animation: shine 2s linear infinite;
  transition: width .6s cubic-bezier(.3, 1.6, .5, 1);
}
.meter-card.overflow .meter { overflow: visible; animation: shake .45s ease-in-out 4; }
.meter-card.overflow .meter-fill { box-shadow: 0 0 20px var(--pink); }
.meter-value {
  margin-top: 14px;
  font-family: var(--f-title);
  font-size: clamp(2.5rem, 11vw, 3.8rem);
  color: var(--pink);
  line-height: 1.3;
}
.meter-caption { font-weight: 600; color: var(--ink-soft); line-height: 1.5; min-height: 3em; }

/* ---------- Date: araba sahnesi ---------- */
.drive {
  position: relative;
  height: 262px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 28px;
  background: linear-gradient(180deg, #ff9fbd 0%, #ffc3b8 45%, #ffe2c6 72%);
  box-shadow: var(--shadow);
}
.sun {
  position: absolute; top: 24px; right: 30px;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d1 0 35%, #ffd27a 72%);
  box-shadow: 0 0 40px 10px rgba(255, 210, 122, .7);
  animation: sunPulse 4s ease-in-out infinite;
}
.loop-track { display: flex; width: max-content; animation: driveLeft var(--speed, 8s) linear infinite; }
.clouds { position: absolute; top: 12px; left: 0; font-size: 32px; opacity: .9; --speed: 30s; }
.clouds span { padding: 0 36px; }
.clouds span:nth-child(odd) { transform: translateY(26px) scale(.8); }
.hills {
  position: absolute; left: -10%; right: -10%; bottom: 62px; height: 92px;
  background:
    radial-gradient(ellipse 40% 100% at 22% 100%, #f38fb0 97%, transparent),
    radial-gradient(ellipse 45% 88% at 76% 100%, #f6a4c0 97%, transparent);
}
.scenery { position: absolute; bottom: 60px; left: 0; font-size: 36px; line-height: 1; --speed: 7s; }
.scenery span { padding: 0 20px; }
.road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(#7a5068, #5e3a50);
  border-top: 4px solid #c98aa8;
}
.road-lines {
  position: absolute; top: 50%; left: 0; right: 0;
  height: 5px; margin-top: -2px;
  background: repeating-linear-gradient(90deg, #fff 0 34px, transparent 34px 68px);
  animation: roadLines .45s linear infinite;
}
.car-wrap {
  position: absolute; bottom: 12px; left: 50%;
  width: 214px;
  transform: translateX(-50%);
  animation: carBump .35s ease-in-out infinite alternate;
}
.chibi-car { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 4px rgba(60, 20, 40, .3)); }
.puff { position: absolute; left: 0; bottom: 34px; font-size: 18px; opacity: 0; animation: puff 1.8s ease-out infinite; }
.p2 { animation-delay: .45s; }
.p3 { animation-delay: .9s; }
.p4 { animation-delay: 1.35s; }
.drive-label {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .85);
  font-size: .85rem; font-weight: 700;
  color: var(--rose);
}

/* ---------- Date: davetiye ---------- */
.invite {
  margin-top: 26px;
  overflow: hidden;
  background: var(--cream);
  border: 2px solid #fff;
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.invite-head {
  position: relative;
  padding: 22px 20px 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #ff7aa2, #e8366b 60%, #b77ce0);
}
.invite-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 12px;
  background: radial-gradient(circle at 10px 12px, var(--cream) 8px, transparent 9px) 0 0 / 20px 12px repeat-x;
}
.invite-icon { display: inline-block; font-size: 2.6rem; animation: floatY 3s ease-in-out infinite; }
.invite-head h3 { font-family: var(--f-title); font-weight: 400; font-size: 1.9rem; line-height: 1.4; }
.invite-head p { font-size: .92rem; font-weight: 600; opacity: .95; }
.invite-rows { list-style: none; padding: 12px 18px 16px; }
.invite-rows li { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 2px dashed var(--pink-4); }
.invite-rows li:last-child { border-bottom: none; }
.invite-rows li > span {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--pink-4);
  font-size: 1.4rem;
}
.invite-rows b { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.invite-rows em { font-style: normal; font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.invite-warn {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #fff4d6;
  border: 1.5px dashed #ffcf6b;
  font-size: .85rem; font-weight: 700; line-height: 1.35;
  color: #9a5b12;
  animation: warnWiggle 3s ease-in-out infinite;
}
.invite-note {
  margin: 0 18px 20px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--pink-4);
  text-align: center;
  font-family: var(--f-script);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.4;
  color: var(--rose);
}

/* ---------- Date: yol planı ---------- */
.route-title {
  margin: 46px 0 18px;
  text-align: center;
  font-family: var(--f-script);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--rose);
  text-shadow: 0 2px 0 #fff;
}
.route { position: relative; padding: 4px 0; }
.route-line { position: absolute; left: 24px; top: 24px; bottom: 24px; width: 8px; border-radius: 8px; background: #7a5068; }
.route-line::after {
  content: "";
  position: absolute; left: 50%; top: 6px; bottom: 6px;
  width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(to bottom, #fff 0 10px, transparent 10px 20px);
}
.route-car {
  position: absolute; left: 8px; top: 0; z-index: 3;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 34px;
  transform: rotate(-90deg);
  filter: drop-shadow(0 4px 3px rgba(60, 20, 40, .35));
}
.stops { list-style: none; display: grid; gap: 16px; }
.stops li {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin-left: 64px;
  padding: 14px 16px;
  background: var(--card);
  border: 2px solid #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: border-color .4s, box-shadow .4s;
}
.stops li::before {
  content: "";
  position: absolute; left: -44px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pink-3);
  transition: background .4s, box-shadow .4s;
}
.stops li > * { opacity: .45; transition: opacity .4s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.stops li.on > * { opacity: 1; }
.stops li.on .stop-icon { transform: scale(1.15); }
.stops li.on { border-color: var(--pink-3); }
.stops li.on::before { background: var(--pink); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 77, 125, .3); }
.stop-icon { flex: none; font-size: 1.7rem; }
.stops h4 { font-size: 1.02rem; font-weight: 700; }
.stops p { font-size: .9rem; font-weight: 500; color: var(--ink-soft); line-height: 1.4; }

/* ---------- Soru ---------- */
.question-section { min-height: 90vh; min-height: 90svh; display: grid; place-items: center; }
.question-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: clamp(34px, 6vw, 56px) clamp(20px, 5vw, 48px);
  text-align: center;
  background: rgba(255, 255, 255, .8);
  border: 2px solid #fff;
  border-radius: 32px;
  box-shadow: 0 30px 70px -25px rgba(200, 30, 90, .6);
}
.q-face { display: inline-block; font-size: clamp(4.2rem, 17vw, 6rem); line-height: 1; animation: floatY 3s ease-in-out infinite; }
.q-title {
  margin: 14px 0 6px;
  font-family: var(--f-title);
  font-weight: 400;
  font-size: clamp(2rem, 8.5vw, 3.2rem);
  line-height: 1.35;
  color: var(--pink);
}
.q-sub { min-height: 1.5em; margin-bottom: 30px; font-weight: 600; color: var(--ink-soft); }
.q-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 16px; min-height: 80px; }

.btn {
  padding: 14px 30px;
  border: none;
  border-radius: 99px;
  font-family: var(--f-body);
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s, background .3s, filter .2s;
}
.btn-yes {
  position: relative;
  z-index: 1;
  color: #fff;
  background: linear-gradient(135deg, #ff7aa2, #ff3d77);
  font-size: calc(1.1rem * var(--s, 1));
  padding: calc(14px * var(--s, 1)) calc(30px * var(--s, 1));
  transition: font-size .4s cubic-bezier(.3, 1.6, .5, 1), padding .4s cubic-bezier(.3, 1.6, .5, 1), filter .2s;
  animation: glow 2s ease-in-out infinite;
}
.btn-yes:hover { filter: brightness(1.08); }
.btn-no {
  color: var(--ink-soft);
  background: #fff;
  border: 2px solid var(--pink-3);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .25);
}
.btn-no.runaway {
  position: fixed;
  z-index: 95;
  margin: 0;
  transition: left .4s cubic-bezier(.3, 1.4, .5, 1), top .4s cubic-bezier(.3, 1.4, .5, 1), transform .3s;
}
.btn-no.converted {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #b77ce0, #ff3d77);
  animation: glow 2s ease-in-out infinite;
}
.btn-ghost { color: #fff; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .6); }

#footer-text { white-space: pre-line; line-height: 1.35; }
.couple { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 10px; }
.couple > div { width: 88px; }
.couple > div + div { margin-left: -31px; }
.footer {
  padding: 30px 16px calc(110px + env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--f-script);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--rose);
}

/* =========================================================
   KUTLAMA
   ========================================================= */
.celebrate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
  text-align: center;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, rgba(130, 20, 75, .9), rgba(35, 4, 28, .97));
  opacity: 0; visibility: hidden;
  transition: opacity .6s, visibility .6s;
}
.celebrate.show { opacity: 1; visibility: visible; }
.celebrate-inner { max-width: 560px; transform: scale(.8); transition: transform .8s cubic-bezier(.3, 1.6, .5, 1); }
.celebrate.show .celebrate-inner { transform: scale(1); }
.merge { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-top: 44px; margin-bottom: 4px; }
.merge .m1, .merge .m2 { width: 112px; }
.merge .m2 { margin-left: -40px; }
.merge .m3 {
  position: absolute; top: 0; left: 50%;
  width: 60px; margin-left: -30px;
  font-size: 56px; line-height: 1;
  transform: scale(0);
  filter: drop-shadow(0 0 20px rgba(255, 90, 150, .9));
}
.celebrate.show .m1 { animation: slideInL 1s cubic-bezier(.2, .8, .3, 1) both; }
.celebrate.show .m2 { animation: slideInR 1s cubic-bezier(.2, .8, .3, 1) both; }
.celebrate.show .m3 { animation: mergePop .7s 1s cubic-bezier(.3, 1.8, .5, 1) forwards, heartbeat 1.2s 1.8s ease-in-out infinite; }
.celebrate-title {
  font-family: var(--f-title);
  font-weight: 400;
  font-size: clamp(2.8rem, 12vw, 4.8rem);
  line-height: 1.3;
}
.shimmer-light {
  background: linear-gradient(90deg, #fff, #ffb3c8, #ffcf6b, #fff, #ffb3c8);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}
.celebrate-text {
  margin: 12px 0 10px;
  font-family: var(--f-script);
  font-weight: 700;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  line-height: 1.5;
}
.celebrate-small { font-weight: 600; opacity: .85; }
.celebrate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* =========================================================
   ANİMASYONLAR
   ========================================================= */
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } 60% { transform: scale(1); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes blink { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 6px 16px rgba(120, 0, 40, .45), 0 0 0 0 rgba(255, 255, 255, .6); } 50% { box-shadow: 0 6px 16px rgba(120, 0, 40, .45), 0 0 0 14px rgba(255, 255, 255, 0); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-3deg); } 20% { transform: rotate(3deg); } 30% { transform: rotate(-2deg); } 40% { transform: rotate(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes shimmer { to { background-position: 300% 0; } }
@keyframes shine { to { background-position: 200% 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px) rotate(-1deg); } 75% { transform: translateX(6px) rotate(1deg); } }
@keyframes pop { 50% { transform: scale(1.18); } }
@keyframes glow { 0%, 100% { box-shadow: 0 12px 25px -8px rgba(255, 61, 119, .7), 0 0 0 0 rgba(255, 61, 119, .45); } 50% { box-shadow: 0 12px 25px -8px rgba(255, 61, 119, .7), 0 0 0 12px rgba(255, 61, 119, 0); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes warnWiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-2.5deg); } 94% { transform: rotate(2.5deg); } 97% { transform: rotate(-1.5deg); } }
@keyframes slideInL { from { transform: translateX(-170px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideInR { from { transform: translateX(170px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes driveLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes roadLines { to { background-position: -68px 0; } }
@keyframes runAcross { from { transform: translateX(calc(100vw + 10px)); } to { transform: translateX(-90px); } }
@keyframes runPuff { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(34px, -20px) scale(1.1); } }
@keyframes carBump { to { transform: translateX(-50%) translateY(-3px) rotate(-1deg); } }
@keyframes puff { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-60px, -55px) scale(1.3) rotate(-20deg); } }
@keyframes sunPulse { 50% { box-shadow: 0 0 55px 16px rgba(255, 210, 122, .85); } }
@keyframes mergePop { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }

/* =========================================================
   CHIBI
   ========================================================= */
.chibi { display: block; width: 100%; height: auto; overflow: visible; }
.chibi .tear { animation: tear 1.6s ease-in infinite; }
.chibi .t2 { animation-delay: .8s; }
.sob .chibi .tear { animation-duration: .7s; }
.chibi .sweat { animation: sweat 2.2s ease-in infinite; }
.chibi .anger { transform-origin: 98px 31px; animation: anger .9s ease-in-out infinite; }
.chibi .held-heart { transform-origin: 60px 113px; animation: heartbeat 1.3s ease-in-out infinite; }
.chibi.idle .chibi-body { transform-origin: 60px 162px; animation: breathe 2.8s ease-in-out infinite; }
.chibi.run .chibi-body { transform-origin: 60px 162px; animation: runBob .18s ease-in-out infinite alternate; }
.chibi.run .legL, .chibi.run .armR { animation: swing .36s ease-in-out infinite alternate; }
.chibi.run .legR, .chibi.run .armL { animation: swing .36s ease-in-out infinite alternate-reverse; }
.chibi-car .wheel { animation: spin .6s linear infinite; }
.chibi-car .wave-arm { animation: waveArm .6s ease-in-out infinite alternate; }

@keyframes tear { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes sweat { 0%, 60% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes anger { 50% { transform: scale(1.25); } }
@keyframes breathe { 50% { transform: scale(1.02, .985); } }
@keyframes runBob { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(-5deg) translateY(-4px); } }
@keyframes swing { from { transform: rotate(32deg); } to { transform: rotate(-32deg); } }
@keyframes waveArm { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }