/* 1+1=1 — gece boyu süren bir mektup */

:root {
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --metin: #eae7e0;
  --soluk: rgba(234, 231, 224, 0.55);
  --cok-soluk: rgba(234, 231, 224, 0.3);
  --vurgu: #f2ede3;
}
body[data-faz="bolum1"] { --vurgu: #e08a4e; }
body[data-faz="bolum2"] { --vurgu: #b4c5da; }
body[data-faz="bolum3"] { --vurgu: #d98f84; }
body[data-faz="final"]  { --vurgu: #ffffff; }

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

html, body {
  height: 100%;
  background: #04060d;
  color: var(--metin);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* Cormorant'ın eski stil rakamları "1"i "I" gibi gösteriyor —
     şiirin matematiği için rakamlar her yerde çizgi hizasında olmalı */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* ---------- Gökyüzü ---------- */

#gok { position: fixed; inset: 0; z-index: 0; }
.gok-katman {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 3.5s ease;
}
.gok-katman.aktif { opacity: 1; }

.gok-katman[data-faz="acilis"] {
  background: linear-gradient(180deg, #04070f 0%, #070c1c 55%, #0b1226 100%);
}
.gok-katman[data-faz="bolum1"] {
  background: linear-gradient(180deg, #101b3a 0%, #3a2b52 42%, #7e4638 70%, #c96f3a 92%, #d9834a 100%);
}
.gok-katman[data-faz="bolum2"] {
  background: linear-gradient(180deg, #03050e 0%, #071021 45%, #0c1b38 75%, #112544 100%);
}
.gok-katman[data-faz="bolum3"] {
  background: linear-gradient(180deg, #262231 0%, #3c3450 40%, #6b5a6e 70%, #a58a8e 88%, #cfb2a0 100%);
}
.gok-katman[data-faz="final"] { background: #000; }

/* ---------- Ekranlar ---------- */

.ekran {
  position: fixed; inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s ease, visibility 1.4s;
  overflow-y: auto;
}
#ekran-oynatici { z-index: 2; }
#ekran-final { z-index: 3; }

.gizli {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.4s ease, visibility 1.4s;
}

/* ---------- Açılış ---------- */

.acilis-metin { font-family: var(--serif); }
.acilis-satir {
  font-size: clamp(1.3rem, 5.5vw, 1.8rem);
  font-style: italic;
  color: var(--soluk);
  opacity: 0;
  animation: belir 2.2s ease forwards;
}
.acilis-satir:last-child { animation-delay: 2.6s; }
.acilis-denklem {
  font-size: clamp(2.6rem, 13vw, 4.2rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: 0.35em 0;
  opacity: 0;
  animation: belir 2.6s ease 1.2s forwards;
}
#acilis-ad {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  color: var(--soluk);
  opacity: 0;
  animation: belir 2.2s ease 3.8s forwards;
}
@keyframes belir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Düğmeler ---------- */

.geri {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 16px;
  background: none;
  border: none;
  color: var(--cok-soluk);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 8px;
  z-index: 5;
}

/* ---------- Gece / pencereler ---------- */

.pencereler {
  display: flex;
  gap: 12px;
  width: min(92vw, 400px);
}
.pencere {
  position: relative;
  flex: 1;
  aspect-ratio: 9 / 15;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  background: #04060c;
  padding: 0;
  cursor: default;
  transition: transform 1s ease;
}
.pencere-sahne {
  position: absolute; inset: 0;
  opacity: 0.12;
  transition: opacity 2.4s ease;
}
.sahne-mini-1 { background: linear-gradient(180deg, #1b2547, #59324a 45%, #c06a36); }
.sahne-mini-2 { background: linear-gradient(180deg, #050a18, #0c1a38 60%, #14294e); }
.sahne-mini-3 { background: linear-gradient(180deg, #2a2637, #5d4f66 55%, #c7a795); }

.pencere-no {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.16);
  transition: opacity 1.6s ease;
}
.pencere-ad {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.pencere-ortu {
  position: absolute; inset: 0;
  background: rgba(3, 4, 9, 0.8);
  transition: opacity 2.6s ease;
}

/* pencere durumları */
.pencere.kapali .pencere-ortu { opacity: 0.9; }

.pencere.siradaki .pencere-sahne { opacity: 0.4; }
.pencere.siradaki .pencere-ortu { opacity: 0.45; }
.pencere.siradaki .pencere-no { opacity: 0.6; }

.pencere.hazir { cursor: pointer; }
.pencere.hazir .pencere-sahne { opacity: 0.9; }
.pencere.hazir .pencere-ortu { opacity: 0; }
.pencere.hazir .pencere-no { opacity: 0; }
.pencere.hazir .pencere-ad { opacity: 1; }
.pencere.hazir { animation: nefes 4.5s ease-in-out infinite; }

.pencere.acik { cursor: pointer; }
.pencere.acik .pencere-sahne { opacity: 1; }
.pencere.acik .pencere-ortu { opacity: 0; }
.pencere.acik .pencere-no { opacity: 0; }
.pencere.acik .pencere-ad { opacity: 1; }

@keyframes nefes {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* bekleme kaplaması — bölümün loş sahnesi üstünde tek cümle + sayaç */
#bekleme-kaplama {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 24px;
  text-align: center;
  background: rgba(2, 3, 8, 0.6);
  transition: opacity 2.6s ease, visibility 2.6s;
}
#bekleme-gecmis {
  margin-top: 1.6rem;
  display: flex;
  gap: 1.4rem;
}
#bekleme-gecmis button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(234, 231, 224, 0.45);
}
#bekleme-saat {
  font-family: var(--serif);
  font-size: 2.4rem;
  letter-spacing: 0.08em;
  color: var(--metin);
}
#bekleme-cumle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
  color: var(--soluk);
  max-width: 30ch;
  line-height: 1.8;
}
#sayac {
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  color: var(--vurgu);
}

/* doğum gününün ilk dakikası — gece yarısı satırı */
#bekleme-dogum {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  color: var(--metin);
  opacity: 0;
  transition: opacity 2.8s ease;
}
#bekleme-dogum.gorunur { opacity: 1; }

/* gece yarısı kayan yıldızı */
#kayan-yildiz {
  position: fixed;
  top: 18vh; left: 0; right: 0;
  height: 0;
  transform: rotate(-10deg);
  z-index: 7;
  pointer-events: none;
}
#kayan-yildiz::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: min(24vw, 170px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), transparent);
  box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.3);
  opacity: 0;
  animation: yildiz-kay 2.3s cubic-bezier(0.25, 0.6, 0.35, 1) forwards;
}
@keyframes yildiz-kay {
  0%   { transform: translateX(94vw); opacity: 0; }
  10%  { opacity: 0.9; }
  75%  { opacity: 0.85; }
  100% { transform: translateX(4vw); opacity: 0; }
}

.final-tekrar {
  background: none;
  border: none;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--soluk);
  cursor: pointer;
  padding: 10px;
  margin-top: 0.4rem;
}

/* ---------- Oynatıcı ---------- */

#ekran-oynatici { padding: 0; justify-content: flex-end; }

#medya, #sahne { position: absolute; inset: 0; overflow: hidden; }
#medya video {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* yapay zekâ videosu yoksa yedek sahneler */
#sahne { opacity: 0; transition: opacity 2s ease; }
#sahne.gorunur { opacity: 1; }

#sahne.sahne-1 { background: linear-gradient(180deg, #101b3a 0%, #3a2b52 40%, #7e4638 68%, #c96f3a 100%); }
#sahne.sahne-1::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 18%;
  width: 34vmin; height: 34vmin;
  margin-left: -17vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 120, 0.55), rgba(255, 160, 90, 0.12) 55%, transparent 70%);
  animation: gunes-bat 70s linear forwards;
}
@keyframes gunes-bat {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(24vmin); opacity: 0.35; }
}

#sahne.sahne-2 { background: linear-gradient(180deg, #03050e 0%, #071021 40%, #0c1b38 68%, #112544 100%); }
#sahne.sahne-2::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 38%;
  background: repeating-linear-gradient(
    180deg,
    rgba(170, 195, 225, 0.07) 0px, transparent 3px, transparent 9px
  );
  animation: su 9s linear infinite;
}
#sahne.sahne-2::after {
  content: "";
  position: absolute;
  top: 30%; right: 18%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #e8dfc8;
  box-shadow: 0 0 18px 6px rgba(232, 223, 200, 0.5);
  animation: fener 5s ease-in-out infinite;
}
@keyframes su { from { background-position-y: 0; } to { background-position-y: 12px; } }
@keyframes fener { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

#sahne.sahne-3 { background: linear-gradient(180deg, #262231 0%, #3c3450 38%, #6b5a6e 66%, #a58a8e 86%, #cfb2a0 100%); }
#sahne.sahne-3::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(255, 226, 200, 0.35) 100%);
  opacity: 0;
  animation: safak 70s ease forwards;
}
@keyframes safak { to { opacity: 1; } }

/* kıta */
#kita-kaplama {
  position: relative;
  width: 100%;
  padding: 18vh 22px max(9vh, env(safe-area-inset-bottom) + 6vh);
  background: linear-gradient(180deg, transparent, rgba(2, 3, 8, 0.62) 45%);
}
#kita {
  position: relative;
  max-width: 34ch;
  min-height: 7.5em;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  line-height: 2;
  text-align: center;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
/* mısralar aynı noktada belirip kaybolur — ekran yazıyla dolmaz */
#kita p {
  position: absolute;
  left: 0; right: 0; top: 50%;
  opacity: 0;
  transform: translateY(calc(-50% + 10px));
  transition: opacity 1.6s ease, transform 1.6s ease;
}
#kita p.gorunur { opacity: 1; transform: translateY(-50%); }

/* çarpan göstergesi */
#carpan {
  position: absolute;
  right: 22px;
  bottom: 34%;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--vurgu);
  transition: opacity 1.2s ease;
  z-index: 4;
}
#carpan .c-sayi {
  display: inline-block;
  font-style: normal;
  transition: opacity 0.4s ease;
}
#carpan .c-sayi.degis { opacity: 0; }

/* köprü */
#kopru {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  color: var(--metin);
  background: rgba(2, 3, 8, 0.55);
  transition: opacity 1.6s ease;
  z-index: 4;
}

/* dokunuş ritüeli */
#dokun {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 3, 8, 0.35);
  border: none;
  color: var(--metin);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  z-index: 5;
  transition: opacity 1.2s ease;
}
#dokun span { animation: nabiz 3.2s ease-in-out infinite; }
@keyframes nabiz { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ---------- Final ---------- */

#ekran-final { background: #000; gap: 0; }

#final-kita {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 5.2vw, 1.7rem);
  line-height: 2.1;
  transition: opacity 2.4s ease;
}
#final-kita p {
  opacity: 0;
  transition: opacity 2.4s ease;
}
#final-kita p.gorunur { opacity: 1; }
#final-kita p.kita-bosluk { margin-top: 1.6em; }

#final-degerler {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
}
#final-degerler span {
  opacity: 0;
  transition: opacity 1.8s ease, transform 1.8s ease;
}
#final-degerler span.gorunur { opacity: 1; }
#final-degerler span.birles {
  opacity: 0;
  transform: translateX(var(--dx, 0)) scale(0.7);
}

#final-denklem {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 17vw, 5.5rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  transition: opacity 2.4s ease;
}
#final-denklem span { transition: opacity 3s ease; }

#final-mesaj {
  margin-top: 2.4rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  font-style: italic;
  line-height: 2;
  color: var(--metin);
  max-width: 36ch;
  transition: opacity 2.6s ease;
}

/* ---------- Hareket azaltma ---------- */

@media (prefers-reduced-motion: reduce) {
  .pencere.hazir { animation: none; }
  #kayan-yildiz { display: none; }
  #dokun span { animation: none; opacity: 0.85; }
  #sahne.sahne-1::before,
  #sahne.sahne-2::before,
  #sahne.sahne-2::after,
  #sahne.sahne-3::before { animation: none; }
  #kita p { transform: translateY(-50%); }
  .acilis-satir, .acilis-denklem, #acilis-ad {
    animation-duration: 0.6s;
  }
  #final-degerler span.birles { transform: none; }
}

/* geniş ekranlar: her şey ortalanmış dar bir sütunda kalsın */
@media (min-width: 700px) {
  .pencereler { width: 420px; }
}