:root {
  /* JS şarkının ilerleyişine göre günceller */
  --gok-ust: #e9e5dc;
  --gok-alt: #f3eee4;
  --deniz: #cfd3cf;
  --yazi: #1d1f22;       /* gökyüzü üstündeki yazılar */
  --ufuk-yazi: #1d1f22;  /* ufka yakın yazılar (lyrics) */
  --alt-yazi: #1d1f22;   /* deniz üstündeki yazılar */
  --ufuk: 58%;           /* ufuk çizgisinin yukarıdan konumu */
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--gok-ust); color: var(--yazi); font-family: var(--sans); -webkit-font-smoothing: antialiased; }

.oynatici-kutu { position: fixed; left: -9999px; top: 0; width: 200px; height: 200px; opacity: 0; pointer-events: none; }

.sahne { position: fixed; inset: 0; overflow: hidden; }
.gok { position: absolute; inset: 0; background: linear-gradient(var(--gok-ust), var(--gok-alt) var(--ufuk)); }

.deniz {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--ufuk);
  background: var(--deniz);
  border-top: 1px solid color-mix(in srgb, var(--alt-yazi) 22%, transparent);
}
.ada {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  width: clamp(170px, 28vw, 340px); height: clamp(22px, 3.4vw, 42px);
  fill: color-mix(in srgb, var(--deniz) 45%, #0b0d12);
  transition: fill 2s;
}

/* ---------- Not ---------- */
.not {
  position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%);
  text-align: center;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); font-weight: 300; letter-spacing: -0.01em;
  opacity: 0; transition: opacity 1.4s ease;
  pointer-events: none;
}
.not.gorunur { opacity: 1; }

/* ---------- Kuş ---------- */
.kus {
  position: absolute; left: 72%; top: 26%;
  width: clamp(44px, 5vw, 64px);
  background: none; border: 0; padding: 14px; margin: -14px; box-sizing: content-box;
  color: var(--yazi); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 1.2s ease;
  animation: suzul 3.2s ease-in-out infinite;
}
.kus.gorunur { opacity: 1; pointer-events: auto; }
.kus.ucuyor { animation: none; pointer-events: none; }
.kus svg { display: block; width: 100%; overflow: visible; }
.kus path { fill: none; stroke: currentColor; stroke-width: .13; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: kanat .85s ease-in-out infinite; }
.kus.kondu path { animation: none; transform: scaleY(.55); }
.kus-ipucu {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 4px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; opacity: .55;
  transition: opacity .4s;
}
.kus.ucuyor .kus-ipucu { opacity: 0; }
@keyframes kanat { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.25) } }
@keyframes suzul { 0%,100% { translate: 0 0 } 50% { translate: 0 -10px } }

/* ---------- Cümle (en üst) ---------- */
.cumle {
  position: absolute; left: 16px; right: 16px; top: 13vh;
  text-align: center;
  font-size: clamp(1.9rem, 5vw, 4.2rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.035em;
  color: var(--yazi); transition: color .8s ease;
}
.cumle span { opacity: 0; transition: opacity 1.4s ease; }
.cumle span.acik { opacity: 1; }

/* ---------- Lyrics (adanın üstü) ---------- */
.lyric {
  position: absolute; left: 16px; right: 16px;
  bottom: calc(100% - var(--ufuk) + clamp(52px, 7vw, 84px));
  text-align: center;
  font-family: var(--mono); font-size: clamp(.95rem, 1.7vw, 1.25rem); letter-spacing: .02em; line-height: 1.45;
  color: var(--ufuk-yazi);
  transition: opacity .5s ease, color .8s ease;
}
.lyric.sondu { opacity: 0; }

/* ---------- Çalar ---------- */
.calar {
  position: absolute; left: 20px; bottom: 18px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: color-mix(in srgb, var(--alt-yazi) 70%, transparent);
  background: none; border: 0; cursor: pointer;
}

/* adadaki kuş ara ara kıpırdar */
.kus.kondu.kipir path { animation: kanat .45s ease-in-out 2; }
.kus.kondu.kipir svg { animation: zipla .9s ease-out; }
@keyframes zipla { 0%,100% { translate: 0 0 } 35% { translate: 0 -3px } }

/* ---------- Ortam: gelip geçen kuşlar ---------- */
.gecen-kus {
  position: absolute; left: 0; top: 0;
  color: var(--yazi); opacity: 0; pointer-events: none;
  transition: color .8s ease;
}
.gecen-kus svg { display: block; width: 100%; overflow: visible; }
.gecen-kus path { fill: none; stroke: currentColor; stroke-width: .14; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: kanat .9s ease-in-out infinite; }
.gecen-kus.suzuluyor path { animation-play-state: paused; transform: scaleY(.7); }

/* ---------- Ortam: tekneler ---------- */
.tekne {
  position: absolute; pointer-events: none;
  opacity: 0; transition: opacity 6s ease;
}
.tekne.gorunur { opacity: 1; }
.tekne svg { display: block; width: 100%; overflow: visible; animation: salla var(--sure, 6s) ease-in-out infinite; transform-origin: 50% 90%; }
.tekne .govde { fill: color-mix(in srgb, var(--deniz) 45%, #0b0d12); transition: fill 2s; }
.tekne .yelken { fill: color-mix(in srgb, var(--deniz) 30%, #f3eee4); transition: fill 2s; }
.tekne .isik { fill: #ffd9a0; opacity: var(--gece, 0); transition: opacity 2s; }
@keyframes salla {
  0%,100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(1.5px) rotate(1.2deg); }
}

/* ---------- Ortam: denizde ince parıltılar ---------- */
.parilti {
  position: absolute; height: 1px; pointer-events: none;
  background: color-mix(in srgb, var(--alt-yazi) 30%, transparent);
  opacity: 0; animation: parilti var(--sure, 9s) ease-in-out infinite;
  animation-delay: var(--gecikme, 0s);
}
@keyframes parilti {
  0%,100% { opacity: 0; transform: translateX(0); }
  50% { opacity: .55; transform: translateX(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .kus, .kus path, .gecen-kus path, .tekne svg, .parilti { animation: none; }
}