/* ---------- temel ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #eaf6ff;
  background: linear-gradient(180deg, #0b3954 0%, #087e8b 18%, #0b5e7a 38%, #123a63 65%, #0a1e3f 100%);
  overflow-x: hidden;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- su altı sahnesi ---------- */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; }

.sun {
  position: absolute; top: 6vh; left: 8vw;
  width: clamp(70px, 12vw, 130px); height: clamp(70px, 12vw, 130px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c9 0%, #ffd97a 45%, rgba(255, 200, 90, .25) 70%, transparent 75%);
  filter: blur(1px);
  animation: floaty 9s ease-in-out infinite;
}
.moon {
  position: absolute; top: 9vh; right: 9vw;
  width: clamp(50px, 9vw, 95px); height: clamp(50px, 9vw, 95px);
  border-radius: 50%;
  background: transparent;
  box-shadow: inset -14px -8px 0 2px #e8f1ff, 0 0 34px 6px rgba(200, 220, 255, .35);
  transform: rotate(20deg);
  animation: floaty 11s ease-in-out infinite reverse;
}
@keyframes floaty { 50% { transform: translateY(10px); } }

.rays { position: absolute; inset: 0; }
.rays i {
  position: absolute; top: -12vh; width: 12vw; height: 75vh;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 80%);
  transform: skewX(-14deg);
  animation: ray 8s ease-in-out infinite;
}
.rays i:nth-child(1) { left: 12vw; }
.rays i:nth-child(2) { left: 34vw; width: 7vw;  animation-delay: -2.5s; }
.rays i:nth-child(3) { left: 58vw; width: 15vw; animation-delay: -5s; }
.rays i:nth-child(4) { left: 82vw; width: 6vw;  animation-delay: -1.2s; }
@keyframes ray { 50% { opacity: .35; transform: skewX(-10deg); } }

.bubbles i {
  position: absolute; bottom: -30px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,.06));
  animation: rise linear infinite;
}
.bubbles i:nth-child(1)  { left: 5%;  animation-duration: 11s; }
.bubbles i:nth-child(2)  { left: 14%; width: 7px;  height: 7px;  animation-duration: 14s; animation-delay: -4s; }
.bubbles i:nth-child(3)  { left: 23%; animation-duration: 9s;  animation-delay: -2s; }
.bubbles i:nth-child(4)  { left: 31%; width: 18px; height: 18px; animation-duration: 16s; animation-delay: -8s; }
.bubbles i:nth-child(5)  { left: 42%; animation-duration: 12s; animation-delay: -5s; }
.bubbles i:nth-child(6)  { left: 50%; width: 6px;  height: 6px;  animation-duration: 10s; animation-delay: -1s; }
.bubbles i:nth-child(7)  { left: 58%; animation-duration: 15s; animation-delay: -7s; }
.bubbles i:nth-child(8)  { left: 66%; width: 9px;  height: 9px;  animation-duration: 11s; animation-delay: -3s; }
.bubbles i:nth-child(9)  { left: 74%; animation-duration: 13s; animation-delay: -9s; }
.bubbles i:nth-child(10) { left: 82%; width: 16px; height: 16px; animation-duration: 17s; animation-delay: -6s; }
.bubbles i:nth-child(11) { left: 90%; animation-duration: 10s; animation-delay: -2.5s; }
.bubbles i:nth-child(12) { left: 96%; width: 8px;  height: 8px;  animation-duration: 12s; animation-delay: -10s; }
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: .9; }
  100% { transform: translateY(-110vh) translateX(3vw); opacity: 0; }
}

.seafloor {
  position: absolute; bottom: 0; left: 0; right: 0; height: 14vh;
  background:
    radial-gradient(60% 130% at 20% 100%, rgba(6, 25, 46, .9), transparent 70%),
    radial-gradient(50% 120% at 75% 100%, rgba(6, 25, 46, .85), transparent 70%);
}

/* ---------- başlık ---------- */
.hero { text-align: center; padding: max(5vh, 34px) 20px 8px; }
.hero h1 {
  font-size: clamp(30px, 6vw, 52px);
  letter-spacing: .04em;
  text-shadow: 0 2px 18px rgba(120, 220, 255, .45);
}
.hero p { opacity: .85; margin-top: 8px; font-size: clamp(14px, 2.2vw, 17px); }
.hero .hint { max-width: 520px; margin: 14px auto 0; opacity: .68; font-size: 14px; line-height: 1.5; }

/* ---------- zaman çizgisi ---------- */
main { padding: 4vh 16px 8vh; }
.timeline {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start;
  max-width: 1080px; margin: 0 auto; padding: 30px 8px;
}
.timeline::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 51px;
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(150, 230, 255, .75), rgba(150, 230, 255, .25));
  box-shadow: 0 0 12px rgba(140, 220, 255, .5);
}
.stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 64px; }
.stop .dot {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  border: 2px solid rgba(180, 235, 255, .8);
  background: rgba(10, 40, 70, .85);
  transition: transform .2s, box-shadow .2s;
}
.stop .lbl { font-size: 13px; opacity: .9; white-space: nowrap; }
.stop.locked { opacity: .45; }
.stop.locked .dot { border-color: rgba(255,255,255,.25); }
.stop.open .dot {
  border-color: #ffe08a;
  box-shadow: 0 0 16px rgba(255, 220, 130, .8);
  animation: pulse 2.2s ease-in-out infinite;
}
.stop.done .dot { background: #0f7d5c; border-color: #7ef2c2; }
.stop.gift .dot { font-size: 20px; }
.stop.gift.open .dot { box-shadow: 0 0 22px rgba(255, 170, 200, .9); border-color: #ffb3d1; }
.stop:not(.locked) .dot:hover { transform: scale(1.15); }
@keyframes pulse { 50% { box-shadow: 0 0 26px rgba(255, 220, 130, .95); } }

.progress { text-align: center; opacity: .7; font-size: 14px; margin-top: 6px; }

/* mobil + tablet: dikey tünel (13 durak dar yatayda sığmıyor) */
@media (max-width: 900px) {
  .timeline { flex-direction: column; align-items: flex-start; gap: 22px; padding: 10px 0 10px 34px; max-width: 340px; }
  .timeline::before { left: 54px; right: auto; top: 20px; bottom: 20px; width: 4px; height: auto;
    background: linear-gradient(180deg, rgba(150, 230, 255, .75), rgba(150, 230, 255, .25)); }
  .stop { flex-direction: row; width: auto; gap: 16px; }
  .stop .lbl { font-size: 16px; }
  .stop .dot { width: 44px; height: 44px; }
}

/* ---------- overlay / kart ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: rgba(4, 16, 32, .72);
  backdrop-filter: blur(6px);
  padding: 18px;
}
.card {
  position: relative;
  width: min(680px, 100%); max-height: 88dvh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(16, 52, 86, .97), rgba(9, 30, 56, .97));
  border: 1px solid rgba(150, 220, 255, .3);
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  animation: cardIn .25s ease-out;
}
@keyframes cardIn { from { transform: translateY(14px); opacity: 0; } }
.card h2 { font-size: 30px; }
.year-subtitle { opacity: .75; margin-top: 4px; min-height: 1em; }
.close {
  position: absolute; top: 10px; right: 14px;
  font-size: 30px; line-height: 1; opacity: .7; padding: 6px;
}
.close:hover { opacity: 1; }

.gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin: 18px 0;
}
.gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  cursor: zoom-in; transition: transform .15s;
}
.gallery img:hover { transform: scale(1.03); }
.gallery-state { grid-column: 1 / -1; text-align: center; opacity: .65; padding: 26px 8px; font-size: 15px; }

.note-label { display: block; font-size: 13px; opacity: .7; margin: 6px 0 6px 2px; }
textarea {
  width: 100%; resize: vertical;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(150, 220, 255, .25);
  border-radius: 10px; padding: 12px;
  color: inherit; font: inherit; line-height: 1.5;
}
textarea:focus { outline: 2px solid rgba(150, 220, 255, .5); }

.complete {
  display: block; width: 100%; margin-top: 16px;
  padding: 14px; border-radius: 12px;
  font-size: 16px; font-weight: 600; color: #06283d;
  background: linear-gradient(90deg, #9ff0d0, #7cd8f5);
  transition: filter .15s, transform .1s;
}
.complete:hover { filter: brightness(1.07); }
.complete:active { transform: scale(.98); }
.complete[disabled] { background: rgba(255,255,255,.15); color: #cfe8db; cursor: default; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(2, 10, 22, .92);
  cursor: zoom-out; padding: 12px;
}
.lightbox img { max-width: 100%; max-height: 94dvh; border-radius: 8px; }

/* ---------- hediye ---------- */
.gift-card { text-align: center; }
.gift-stage { padding: 20px 0 8px; }
.gift-box {
  font-size: clamp(90px, 22vw, 150px);
  line-height: 1; display: inline-block;
  filter: drop-shadow(0 8px 24px rgba(255, 170, 200, .35));
  transition: transform .12s;
}
.gift-box:active { transform: scale(.95); }
.gift-box.shake-1 { animation: shake .5s ease-in-out; }
.gift-box.shake-2 { animation: shake .4s ease-in-out 2; }
.gift-box.shake-3 { animation: shake .3s ease-in-out 3; }
.gift-box.opening { animation: burst .7s ease-in forwards; }
@keyframes shake {
  20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); } 80% { transform: rotate(5deg); }
}
@keyframes burst {
  40% { transform: scale(1.25) rotate(4deg); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
.gift-hint { margin-top: 14px; opacity: .75; }
.gift-reveal { animation: cardIn .5s ease-out; }
.gift-message { font-size: 20px; margin: 12px 0 8px; text-shadow: 0 1px 12px rgba(150, 220, 255, .5); }

/* ---------- editör blokları (yıl penceresinde çizilen içerik) ---------- */
.blocks-view { display: block; }
.blocks-view > * { margin: 16px 0; }
.blocks-view .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.b-cap { font-size: 13px; opacity: .75; margin-top: 6px; text-align: center; }
.b-fig, .b-single { margin: 0; }
.b-single img { width: 100%; aspect-ratio: auto; max-height: 60dvh; object-fit: contain; background: rgba(0,0,0,.2); }

.b-chat { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); max-width: 420px; margin-inline: auto; }
.b-chat img { width: 100%; aspect-ratio: auto; border: none; border-radius: 0; display: block; }
.b-chat-bar { padding: 9px 13px; font-size: 14px; font-weight: 600; }
.b-wa .b-chat-bar { background: #075e54; color: #fff; }
.b-fb .b-chat-bar { background: #1877f2; color: #fff; }
.b-chat .b-cap { padding: 8px 12px; margin: 0; }

.b-story h3 { margin-bottom: 8px; font-size: 20px; text-shadow: 0 1px 10px rgba(120, 220, 255, .4); }
.b-story p { line-height: 1.65; opacity: .92; margin-bottom: 10px; }

.b-quote { border-left: 3px solid #7cd8f5; padding: 6px 16px; font-style: italic; }
.b-quote p { font-size: 17px; line-height: 1.6; }
.b-quote cite { display: block; margin-top: 8px; font-size: 13.5px; opacity: .7; font-style: normal; }

.b-video iframe, .b-video video { width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: 12px; background: #000; }
.b-spotify { width: 100%; height: 152px; border: none; border-radius: 12px; }

.b-letter {
  background: #fdf6e3; color: #4a3f2a;
  border-radius: 4px 14px 4px 14px;
  padding: 26px 24px;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.b-letter p { line-height: 1.7; margin-bottom: 12px; }
.b-letter-from { text-align: right; font-style: italic; margin-top: 14px; }

.b-divider { text-align: center; font-size: 20px; opacity: .7; letter-spacing: 8px; padding: 4px 0; }
.b-divider-cizgi { border-top: 1px solid rgba(255,255,255,.25); height: 0; padding: 0; margin-block: 24px !important; }

.b-game { background: rgba(255,255,255,.06); border: 1px solid rgba(150,220,255,.25); border-radius: 14px; padding: 16px; }
.b-game-q { font-weight: 600; margin-bottom: 12px; }
.b-game-opts { display: grid; gap: 8px; }
.b-game-opt {
  text-align: left; padding: 11px 14px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  transition: background .15s;
}
.b-game-opt:hover { background: rgba(255,255,255,.14); }
.b-game-opt.right { background: #0f7d5c; border-color: #7ef2c2; }
.b-game-opt.wrong { background: rgba(212, 76, 71, .4); border-color: #d44c47; animation: gameShake .3s; }
.b-game-opt[disabled] { cursor: default; }
.b-game-msg { margin-top: 10px; min-height: 1.2em; font-weight: 600; }
@keyframes gameShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.b-reveal-cover {
  width: 100%; padding: 26px 16px; border-radius: 14px;
  background: rgba(150, 220, 255, .12);
  border: 1px dashed rgba(150, 220, 255, .5);
  font-size: 16px; color: inherit;
}
.b-reveal-cover:hover { background: rgba(150, 220, 255, .2); }
.b-reveal-inner { animation: cardIn .45s ease-out; }
.b-reveal-inner img { width: 100%; border-radius: 12px; margin-bottom: 10px; }
.b-reveal-inner p { line-height: 1.6; }

.b-html { overflow-x: auto; }

/* hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .sun, .moon, .rays i, .bubbles i, .stop.open .dot { animation: none; }
}