/* =========================================================
   Alara – Çıkma Teklifi Sitesi
   Gün batımı paleti · 16:9 projeksiyon için yüksek kontrast
   ========================================================= */

:root {
  /* gün batımı gökyüzü */
  --sky-1: #1a0f33;   /* tepe: koyu lacivert-mor */
  --sky-2: #3d1f5c;
  --sky-3: #7b3f6e;
  --sky-4: #c75a4a;
  --sky-5: #e8734a;
  --sky-6: #f7a05c;
  --sky-7: #ffc98a;   /* ufuk: şeftali */

  --cream:  #fff3dd;
  --plum:   #3b1a4f;
  --plum-d: #2a1039;
  --orange: #e8734a;
  --gold:   #ffd98a;

  /* Pankart rengi: krem zemin + koyu mor yazı.
     Projeksiyonda en net okunan kombinasyon.
     Ters çevirmek istersen bu iki değeri takas et. */
  --banner-bg:  var(--cream);
  --banner-ink: var(--plum);

  --flight-duration: 15s;   /* bir geçiş süresi */
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* kaydırma çubuğu yok */
  background: var(--sky-1);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

/* kalp imleç */
body {
  cursor: url("assets/heart-cursor.svg") 16 16, auto;
}

/* =========================================================
   1 · GÖKYÜZÜ + GÜNEŞ
   ========================================================= */

.sky {
  position: fixed;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--sky-1)  0%,
    var(--sky-2) 18%,
    var(--sky-3) 38%,
    var(--sky-4) 56%,
    var(--sky-5) 70%,
    var(--sky-6) 82%,
    var(--sky-7) 100%
  );
  overflow: hidden;
}

/* --- yıldızlar --- */
.stars { position: absolute; inset: 0 0 55% 0; z-index: 1; }

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--cream);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cream);
  animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.8); }
  50%      { opacity: .9;  transform: scale(1.3); }
}

/* --- batan güneş --- */
.sun {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: clamp(180px, 22vw, 360px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff6d8 0%, var(--gold) 45%, #ff9a4d 100%);
  box-shadow: 0 0 90px 30px rgba(255, 154, 77, .55);
  z-index: 2;
}

.sun-glow {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: clamp(420px, 55vw, 900px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,170,90,.38) 0%, rgba(255,140,90,.12) 45%, transparent 70%);
  z-index: 2;
  animation: glow-pulse 7s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

/* =========================================================
   2 · BULUT KATMANLARI
   ========================================================= */

.cloud-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200vw;          /* iki kopya yan yana → kusursuz döngü */
  height: 100%;
  animation-name: drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* = -100vw */
}

.layer-back  { z-index: 3; animation-duration: 150s; opacity: .55; }
.layer-mid   { z-index: 4; animation-duration:  95s; opacity: .8;  }
.layer-front { z-index: 5; animation-duration:  55s; opacity: 1;   }

/* tek bir bulut: ana gövde + iki tümsek */
.cloud {
  position: absolute;
  border-radius: 100px;
  background: linear-gradient(to bottom, #ffe9d2 0%, #ffc9a8 55%, #f2946f 100%);
  filter: drop-shadow(0 6px 14px rgba(58, 20, 60, .28));
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffeedb 0%, #ffcfae 70%, #f6a17c 100%);
}

.cloud::before {
  width: 58%;
  height: 175%;
  left: 12%;
  bottom: 18%;
}

.cloud::after {
  width: 42%;
  height: 135%;
  right: 12%;
  bottom: 14%;
}

/* =========================================================
   3 · UÇAK + PANKART
   ========================================================= */

.flight {
  position: absolute;
  top: 26%;
  left: 0;
  z-index: 7;                      /* bulutların üstünde: yazı hep okunur */
  transform: translateX(100vw);    /* uçuş yokken ekranın sağ dışında bekler */
  will-change: transform;
}

.flight.flying {
  animation: fly var(--flight-duration) linear forwards;
}

@keyframes fly {
  from { transform: translateX(100vw); }   /* sağ dışarıdan girer */
  to   { transform: translateX(-100%); }   /* sol dışarıya tamamen çıkar */
}

/* uçak + ip + pankart tek sıra; hafif salınım burada */
.rig {
  display: flex;
  align-items: center;
  gap: clamp(4px, .8vw, 14px);
  animation: bob 3.4s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0)     rotate(-1deg); }
  50%      { transform: translateY(-18px) rotate(1.2deg); }
}

.plane {
  width: clamp(130px, 14vw, 260px);
  height: auto;
  flex: none;
  filter: drop-shadow(0 10px 18px rgba(30, 10, 40, .45));
}

/* pervane dönüşü: yandan bakışta kanadın incelip kalınlaşması */
.prop-blade {
  transform-origin: 26px 66px;
  animation: prop .42s linear infinite;
}

@keyframes prop {
  0%   { transform: scaleX(1);   opacity: 1;  }
  50%  { transform: scaleX(.12); opacity: .45; }
  100% { transform: scaleX(1);   opacity: 1;  }
}

.rope {
  width: clamp(40px, 5vw, 90px);
  height: auto;
  flex: none;
  filter: drop-shadow(0 3px 5px rgba(30, 10, 40, .4));
}

/* --- pankart --- */
.banner {
  flex: none;
  position: relative;
  padding: clamp(14px, 1.9vh, 30px) clamp(26px, 3vw, 60px);
  background: var(--banner-bg);
  border: 5px solid var(--plum);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(30, 10, 40, .5);
  animation: banner-wave 3.4s ease-in-out infinite;
}

@keyframes banner-wave {
  0%, 100% { transform: rotate(-1.4deg) skewY(.9deg); }
  50%      { transform: rotate(1.4deg)  skewY(-.9deg); }
}

/* NOT: yazı boyutu ve uçak genişliği, pankartın tamamının 16:9 ekranda
   aynı anda görünebilmesi için ayarlandı. Büyütürsen pankart ekrana
   sığmaz ve yazı sadece kayarken okunur. */
.banner-text {
  white-space: nowrap;
  font-size: clamp(1.5rem, 2.7vw, 3.4rem);
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--banner-ink);
}

/* harf harf dalgalanma */
.banner-text .ltr {
  display: inline-block;
  animation: letter-wave 2.2s ease-in-out infinite;
}

.banner-text .ltr.space { width: .32em; }

@keyframes letter-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* =========================================================
   4 · TEPELER
   ========================================================= */

.hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(130px, 22vh, 300px);
  z-index: 6;
}

.hill-far  { fill: #5c2a56; opacity: .85; }
.hill-near { fill: #32143f; }

/* =========================================================
   5 · SÜZÜLEN KALPLER
   ========================================================= */

.ambient-hearts {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.a-heart {
  position: absolute;
  bottom: -60px;
  font-size: 22px;
  opacity: 0;
  animation: rise linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 120, 150, .5));
}

@keyframes rise {
  0%   { transform: translateY(0)      scale(.6)  rotate(-8deg); opacity: 0;   }
  12%  {                                                         opacity: .75; }
  85%  {                                                         opacity: .5;  }
  100% { transform: translateY(-105vh) scale(1.1) rotate(10deg); opacity: 0;   }
}

/* =========================================================
   6 · AÇILIŞ YAZISI
   ========================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5vw;
  text-align: center;
  line-height: 1.25;
  /* Uzun cümle dar 16:9 ekranlarda taşmasın diye ölçülü tutuldu. */
  font-size: clamp(1.8rem, 4.6vw, 5rem);
  font-weight: 800;
  color: var(--cream);
  text-shadow: 0 6px 26px rgba(20, 5, 30, .85), 0 0 60px rgba(255, 180, 120, .5);
  background: rgba(20, 8, 34, .55);
  opacity: 0;
  pointer-events: none;
  animation: intro-seq 4.2s ease-in-out forwards;
}

@keyframes intro-seq {
  0%   { opacity: 0; transform: scale(.94); }
  22%  { opacity: 1; transform: scale(1);   }
  72%  { opacity: 1; transform: scale(1);   }
  100% { opacity: 0; transform: scale(1.06); visibility: hidden; }
}

.sparkle {
  display: inline-block;
  animation: twinkle 2.2s ease-in-out infinite;
}

/* =========================================================
   7 · EVET / HAYIR BUTONLARI
   ========================================================= */

/* NOT: burada transform KULLANILMIYOR. Transform'lu bir ata, içindeki
   position:fixed çocuğu viewport yerine kendine göre konumlandırır ve
   Hayır butonunun kaçma koordinatları bozulur. */
.choices {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 7vh;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 70px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}

.choices.visible { opacity: 1; }
.choices.visible .btn { pointer-events: auto; }

.choices.gone {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.btn {
  font-family: inherit;
  font-size: clamp(1.1rem, 1.9vw, 2.2rem);
  font-weight: 800;
  padding: clamp(12px, 1.6vh, 22px) clamp(28px, 3.2vw, 58px);
  border: 4px solid var(--plum);
  border-radius: 999px;
  cursor: inherit;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(25, 8, 35, .5);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, background .22s ease;
}

.btn-yes {
  background: linear-gradient(to bottom, #ffe9a8, var(--gold));
  color: var(--plum);
  transform: scale(var(--yes-scale, 1));
  transform-origin: center;
}

.btn-yes:hover {
  background: linear-gradient(to bottom, #fff3c4, #ffd066);
  box-shadow: 0 14px 34px rgba(255, 190, 90, .6);
}

.btn-no {
  background: linear-gradient(to bottom, #f0d7e6, #d3a8c4);
  color: var(--plum);
}

/* Hayır butonu kaçmaya başlayınca sabit konuma geçer */
.btn-no.escaping {
  position: fixed;
  margin: 0;
  transition: left .28s cubic-bezier(.34, 1.3, .64, 1),
              top  .28s cubic-bezier(.34, 1.3, .64, 1),
              transform .28s ease;
}

/* =========================================================
   8 · KUTLAMA
   ========================================================= */

.finale {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 26px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  /* Yazı parlak bulutların üstüne denk gelebiliyor.
     Bu yumuşak koyu hale, projeksiyonda kontrastı garantiler. */
  background: radial-gradient(ellipse at center,
              rgba(24, 8, 38, .72) 0%,
              rgba(24, 8, 38, .46) 34%,
              rgba(24, 8, 38, 0)   68%);
}

.finale.show { opacity: 1; }

.finale-main {
  font-size: clamp(2.4rem, 7vw, 7.5rem);
  font-weight: 800;
  color: var(--cream);
  text-shadow: 0 8px 30px rgba(20, 5, 30, .9), 0 0 70px rgba(255, 150, 110, .6);
  animation: pop-beat 2.4s ease-in-out infinite;
}

@keyframes pop-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* =========================================================
   9 · KONFETİ / KALP YAĞMURU
   ========================================================= */

.fx {
  position: fixed;
  inset: 0;
  z-index: 27;
  pointer-events: none;
  overflow: hidden;
}

.confetti {
  position: absolute;
  top: -40px;
  width: 14px;
  height: 22px;
  border-radius: 3px;
  animation: fall linear forwards;
}

.rain-heart {
  position: absolute;
  top: -60px;
  font-size: 34px;
  animation: fall linear forwards;
  filter: drop-shadow(0 0 8px rgba(255, 110, 140, .6));
}

@keyframes fall {
  0%   { transform: translateY(0)     translateX(0)            rotate(0deg);   opacity: 1;  }
  100% { transform: translateY(112vh) translateX(var(--drift, 0px)) rotate(760deg); opacity: .9; }
}