/* ============ Zerenin Dünyası ============ */
:root {
  --bg: #eef6fc;
  --bg-tint: #dfeefa;
  --ice: #cfe6f6;
  --baby: #a9d3ef;
  --sky: #6fb0dc;
  --deep: #3f7cae;
  --ink: #2a4660;
  --night: #16304a;
  --honey: #f4c25b;
  --honey-deep: #e0a23a;
  --red: #d9534f;
  --white: #ffffff;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(63, 124, 174, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Nunito", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; height: 100vh; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- giriş ---------- */
#login {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 20px;
  background: linear-gradient(180deg, #d6ebfa 0%, #eef6fc 60%, #fdfaf0 100%);
  transition: opacity .9s ease, transform .9s ease;
}
#login.leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }
.login-clouds span {
  position: absolute; background: #fff; border-radius: 100px; opacity: .85;
  animation: drift 40s linear infinite;
}
.login-clouds span:nth-child(1) { width: 140px; height: 44px; top: 12%; left: -160px; }
.login-clouds span:nth-child(2) { width: 200px; height: 58px; top: 30%; left: -220px; animation-duration: 60s; animation-delay: -20s; }
.login-clouds span:nth-child(3) { width: 110px; height: 36px; top: 70%; left: -130px; animation-duration: 50s; animation-delay: -35s; }
@keyframes drift { to { transform: translateX(calc(100vw + 400px)); } }

.login-card {
  position: relative; width: min(380px, 100%);
  background: rgba(255, 255, 255, .92);
  border-radius: 26px; padding: 70px 28px 28px;
  box-shadow: var(--shadow); text-align: center;
}
.login-card.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.login-pooh { position: absolute; top: -46px; left: 50%; transform: translateX(-50%); width: 96px; }
.login-card h1 { font-family: "Playfair Display", serif; font-weight: 900; font-size: 2rem; color: var(--deep); }
.login-sub { font-family: "Caveat", cursive; font-size: 1.35rem; margin-bottom: 18px; }
.login-card label { display: block; text-align: left; margin-bottom: 14px; }
.login-card label span { display: block; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--sky); margin-bottom: 4px; }
.login-card input {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  border: 2px solid var(--ice); border-radius: 14px; background: #fff; outline: none;
  transition: border-color .2s;
}
.login-card input:focus { border-color: var(--sky); }
.login-card button[type=submit] {
  width: 100%; margin-top: 6px; padding: 14px; border: 0; border-radius: 14px;
  background: var(--deep); color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .04em;
  transition: transform .15s, background .2s;
}
.login-card button[type=submit]:hover { background: var(--sky); }
.login-card button[type=submit]:active { transform: scale(.97); }
.login-err { min-height: 1.6em; margin-top: 12px; color: var(--deep); font-family: "Caveat", cursive; font-size: 1.3rem; }

/* ---------- kapak ---------- */
.cover {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 70px 20px 90px;
  background:
    radial-gradient(circle at 20% 15%, #ffffff 0, transparent 40%),
    linear-gradient(180deg, #cfe6f6, #eef6fc);
  overflow: hidden;
}
.cover-kicker { font-family: "Caveat", cursive; font-size: 1.8rem; color: var(--sky); }
.cover-title {
  font-family: "Playfair Display", serif; font-weight: 900; line-height: .95;
  font-size: clamp(3.2rem, 15vw, 7.5rem); color: var(--deep);
  text-shadow: 3px 3px 0 #fff;
}
.cover-pooh { width: clamp(110px, 30vw, 170px); margin: 14px 0 6px; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(2deg); } }
.cover-head { font-family: "Playfair Display", serif; font-style: italic; font-size: 1.5rem; color: var(--ink); }
.cover-sub { font-family: "Caveat", cursive; font-size: 1.6rem; color: var(--deep); }
.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; color: var(--sky);
}
.scroll-hint span { display: block; font-size: 1.4rem; animation: nudge 1.5s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(7px); } }

/* ---------- bölüm başlıkları ---------- */
.block { padding: 90px 20px; }
.block-tint { background: var(--bg-tint); }
.block-title {
  max-width: 720px; margin: 0 auto 50px; text-align: center;
  font-family: "Playfair Display", serif; font-weight: 900; font-size: clamp(2rem, 8vw, 3.2rem); color: var(--deep);
}
.block-title small {
  display: block; font-family: "Nunito", sans-serif; font-weight: 800; font-size: .75rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--sky); margin-bottom: 6px;
}

/* ---------- mesajlar ---------- */
.msg-list { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.msg {
  position: relative; background: #fff; padding: 22px 24px; border-radius: var(--radius);
  box-shadow: var(--shadow); font-size: 1.15rem; border-left: 6px solid var(--baby);
}
.msg:nth-child(even) { align-self: flex-end; border-left: 0; border-right: 6px solid var(--honey); }
.msg::after { content: "🍯"; position: absolute; right: 12px; bottom: -14px; font-size: 1.2rem; opacity: 0; transition: opacity .6s .8s; }
.msg.in::after { opacity: 1; }
.msg:nth-child(even)::after { content: "🎈"; }

/* ---------- çiçekler ---------- */
.flower-row { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px 20px; }
.flower { text-align: center; }
.flower svg { width: 100%; max-width: 150px; height: auto; overflow: visible; }
.flower .stem { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease; }
.flower .leaf { transform: scale(0); transform-origin: 50px 130px; transition: transform .8s 1s cubic-bezier(.3, 1.6, .5, 1); }
.flower .head { transform: scale(0) rotate(-90deg); transform-origin: 50px 50px; transition: transform 1.2s 1.1s cubic-bezier(.3, 1.5, .5, 1); }
.flower.in .stem { stroke-dashoffset: 0; }
.flower.in .leaf { transform: scale(1); }
.flower.in .head { transform: scale(1) rotate(0); }
.flower.in svg { animation: sway 5s ease-in-out 2.4s infinite; transform-origin: 50% 100%; }
@keyframes sway { 50% { transform: rotate(3deg); } }
.flower p { font-family: "Caveat", cursive; font-size: 1.3rem; line-height: 1.25; margin-top: 8px; }

/* ---------- polaroid ---------- */
.polaroids { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 44px 28px; }
.polaroid {
  background: #fff; padding: 14px 14px 18px; border-radius: 6px; box-shadow: var(--shadow);
  transform: rotate(var(--r, -2deg)); transition: transform .35s, opacity .9s ease;
}
.polaroid:nth-child(even) { --r: 2.4deg; }
.polaroid:nth-child(3n) { --r: -1deg; }
.polaroid.reveal { transform: translateY(26px) rotate(var(--r)); }
.polaroid.reveal.in { transform: rotate(var(--r)); }
.polaroid:hover { transform: rotate(0) scale(1.04); }
.polaroid figcaption { padding-top: 12px; text-align: center; }
.polaroid .date { font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--sky); }
.polaroid .cap { font-family: "Caveat", cursive; font-size: 1.35rem; line-height: 1.25; }

/* fotoğraf kutusu (dosya yoksa şirin boş çerçeve) */
.photo {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px;
  background: repeating-linear-gradient(45deg, var(--ice), var(--ice) 12px, #dcedf9 12px, #dcedf9 24px);
  display: grid; place-items: center;
}
.photo::before { content: "📷 " attr(data-label); color: var(--deep); font-weight: 800; font-size: .9rem; text-align: center; padding: 10px; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- postlar ---------- */
.post-list { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.post { background: #fff; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.avatar {
  width: 38px; height: 38px; flex: none; aspect-ratio: 1; border-radius: 50%; padding: 2px;
  background: linear-gradient(135deg, var(--honey), var(--sky));
}
.avatar span { position: relative; overflow: hidden; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; font-size: 1.1rem; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.post-head b { display: block; font-size: .95rem; line-height: 1.2; }
.post-head small { color: var(--deep); }
.post .photo { border-radius: 0; aspect-ratio: 4 / 5; }
.post-actions { display: flex; gap: 14px; padding: 10px 14px 0; font-size: 1.5rem; }
.like { background: none; border: 0; line-height: 1; color: var(--ink); transition: transform .2s; }
.like.on { color: var(--red); animation: pop .4s; }
@keyframes pop { 40% { transform: scale(1.5); } }
.post-likes { padding: 4px 14px 0; font-weight: 800; font-size: .9rem; }
.post-cap { padding: 4px 14px 16px; font-size: .98rem; }
.post-cap b { margin-right: 6px; }

/* ---------- şiirler ---------- */
.poem-list { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 70px; text-align: center; }
.poem h3 { font-family: "Caveat", cursive; font-size: 2rem; color: var(--sky); margin-bottom: 12px; }
.poem .line { font-family: "Playfair Display", serif; font-style: italic; font-size: 1.25rem; line-height: 1.9; }
.poem .gap { height: 1.2rem; }

/* ---------- final ---------- */
.final {
  position: relative; min-height: 100vh; padding: 120px 20px 150px; overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0, #8fbfe3 8%, #35648c 30%, var(--night) 60%);
  color: #eaf4fb; text-align: center;
}
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .5; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .1; } }
.final-inner { position: relative; max-width: 560px; margin: 0 auto; padding-top: 120px; }
.final-kicker { font-family: "Caveat", cursive; font-size: 1.6rem; color: var(--ice); }
.final-title { font-family: "Playfair Display", serif; font-weight: 900; font-size: clamp(2.2rem, 9vw, 3.4rem); margin-bottom: 36px; }
.final-poem .line {
  font-family: "Playfair Display", serif; font-style: italic; font-size: 1.3rem; line-height: 2;
  opacity: 0; transform: translateY(14px); transition: opacity 1.4s ease, transform 1.4s ease;
  transition-delay: var(--d, 0s);
}
.final-poem .line.in { opacity: 1; transform: none; }
.final-poem .gap { height: 1.4rem; }
.final-sign { margin-top: 40px; font-family: "Caveat", cursive; font-size: 2rem; color: var(--honey); }
.final-pooh { width: 110px; margin: 40px auto 0; }

/* ---------- Pooh süsleri ---------- */
.bee { position: fixed; z-index: 20; top: 28vh; left: -50px; width: 44px; pointer-events: none; animation: fly 26s linear infinite; }
@keyframes fly {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(30vw, -30px) rotate(6deg); }
  50%  { transform: translate(60vw, 40px) rotate(-6deg); }
  75%  { transform: translate(85vw, -20px) rotate(4deg); }
  100% { transform: translate(115vw, 10px); }
}
.honey {
  position: fixed; z-index: 20; right: 14px; bottom: 14px; width: 54px; height: 54px;
  background: none; border: 0; transition: transform .2s;
}
.honey:hover { transform: rotate(-8deg) scale(1.1); }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 90px; transform: translate(-50%, 20px);
  max-width: min(90vw, 360px); padding: 12px 20px; border-radius: 40px;
  background: var(--night); color: #fff; font-family: "Caveat", cursive; font-size: 1.35rem; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- müzik ---------- */
.player {
  position: fixed; z-index: 30; left: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-radius: 40px; box-shadow: var(--shadow); max-width: calc(100vw - 90px);
}
.player button {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%;
  background: var(--deep); color: #fff; font-size: .9rem;
}
.player-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.player-label { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.player-title { font-size: .85rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.eq i { width: 3px; height: 4px; background: var(--sky); border-radius: 2px; }
.player.playing .eq i { animation: eq .9s ease-in-out infinite; }
.player.playing .eq i:nth-child(2) { animation-delay: -.3s; }
.player.playing .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 50% { height: 16px; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01s !important; }
}

/* ---------- laleler (postların arasında) ---------- */
.post-list { gap: 0; }
.post { margin-bottom: 8px; }
.tulips { display: flex; justify-content: center; align-items: flex-end; gap: 4px; padding: 18px 0 22px; }
.tulip { width: 54px; height: auto; overflow: visible; transform-origin: 50% 100%; }
.tulip:nth-child(even) { width: 46px; margin-bottom: -4px; }
.tulip .t-stem { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease; transition-delay: calc(var(--i) * .12s); }
.tulip .t-leaf { transform: scale(0); transform-origin: 30px 118px; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.7s + var(--i) * .12s); }
.tulip .t-head { transform: scale(0); transform-origin: 30px 56px; transition: transform .9s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.9s + var(--i) * .12s); }
.tulips.in .t-stem { stroke-dashoffset: 0; }
.tulips.in .t-leaf, .tulips.in .t-head { transform: scale(1); }
.tulips.in .tulip { animation: sway 5s ease-in-out calc(2s + var(--i) * .3s) infinite; }

/* ---------- çiçek bölümünde papatya + lale ---------- */
.fl-art { width: 100%; max-width: 150px; margin: 0 auto; aspect-ratio: 100 / 160; display: flex; align-items: flex-end; justify-content: center; }
.fl-art .tulip { width: auto; max-width: none; height: 86%; margin: 0; }
.flower.in .t-stem { stroke-dashoffset: 0; }
.flower.in .t-leaf, .flower.in .t-head { transform: scale(1); }
.flower .tulip .t-stem { transition-delay: 0s; }
.flower .tulip .t-leaf { transition-delay: 1s; }
.flower .tulip .t-head { transition-delay: 1.2s; }

/* ---------- açılış notu (tour) ---------- */
.tour-btn {
  position: fixed; z-index: 35; top: 12px; left: 12px;
  display: flex; align-items: center; gap: 4px; padding: 8px 14px;
  border: 0; border-radius: 40px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  box-shadow: var(--shadow); color: var(--deep); font-weight: 800; font-size: .9rem;
  transition: transform .2s;
}
.tour-btn:hover { transform: scale(1.06); }

.tour {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px;
  background: rgba(22, 48, 74, .38); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tour-card {
  position: relative; width: min(320px, 100%); padding: 54px 24px 20px; text-align: center;
  background: #fff; border-radius: 24px; box-shadow: 0 18px 50px rgba(22, 48, 74, .35);
}
.tour-card.pop { animation: tourPop .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes tourPop { from { opacity: 0; transform: scale(.85) translateY(14px); } }
.tour-pooh { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 80px; }
.tour-card h3 { font-family: "Caveat", cursive; font-size: 2.1rem; color: var(--deep); line-height: 1.1; }
.tour-card p { font-size: 1.05rem; margin: 6px 0 12px; }
.tour-card small { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }

.tour-arrow { position: fixed; width: 64px; animation: arrowBob 1.1s ease-in-out infinite; pointer-events: none; }
.tour[data-target="player"] .tour-arrow { left: 34px; bottom: 76px; }
.tour[data-target="honey"] .tour-arrow { right: 26px; bottom: 82px; }
.tour[data-target="honey"] .tour-arrow svg { transform: scaleX(-1); }
@keyframes arrowBob { 50% { transform: translateY(10px); } }

/* hedef elemanı perdenin üstüne çıkar ve nabız gibi parlat */
.tour-spot { z-index: 45 !important; pointer-events: none; animation: spot 1.2s ease-in-out infinite; }
.player.tour-spot { border-radius: 40px; }
.honey.tour-spot { border-radius: 50%; background: rgba(255, 255, 255, .85); }
@keyframes spot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 194, 91, .9); }
  50% { box-shadow: 0 0 0 14px rgba(244, 194, 91, 0); }
}

/* bal küpü arada bir kendiliğinden sallanır */
.honey.wiggle { animation: wiggle 1.1s ease; }
@keyframes wiggle {
  15% { transform: rotate(-14deg) scale(1.12); }
  30% { transform: rotate(12deg) scale(1.12); }
  45% { transform: rotate(-10deg); }
  60% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
}

/* ---------- sincap ---------- */
.squirrel {
  position: fixed; z-index: 25; width: 76px; padding: 0; border: 0; background: none;
  transition: transform .6s cubic-bezier(.3, 1.4, .5, 1);
  -webkit-tap-highlight-color: transparent;
}
.squirrel.left { left: 0; transform: translateX(-100%); }
.squirrel.left.show { transform: translateX(-8%); }
.squirrel.right { right: 0; transform: translateX(100%); }
.squirrel.right.show { transform: translateX(8%); }
.squirrel .sq-flip { display: block; }
.squirrel.right .sq-flip { transform: scaleX(-1); }
.squirrel svg { display: block; width: 100%; overflow: visible; }
.squirrel.show svg { animation: sqHop 1.2s ease-in-out infinite; }
.sq-tail { transform-origin: 38px 58px; animation: tailWag 1s ease-in-out infinite; }
@keyframes sqHop { 50% { transform: translateY(-6px); } }
@keyframes tailWag { 50% { transform: rotate(-9deg); } }

.burst { position: fixed; z-index: 55; width: 0; height: 0; pointer-events: none; }
.burst i {
  position: absolute; left: 0; top: 0; font-style: normal; font-size: 1.4rem;
  animation: burstUp 1.2s ease-out forwards; animation-delay: calc(var(--n, 0) * .05s);
}
.burst i:nth-child(1) { --dx: -50px; --n: 0; }
.burst i:nth-child(2) { --dx: -20px; --n: 1; }
.burst i:nth-child(3) { --dx: 6px;   --n: 2; }
.burst i:nth-child(4) { --dx: 30px;  --n: 3; }
.burst i:nth-child(5) { --dx: 56px;  --n: 4; }
@keyframes burstUp {
  from { opacity: 1; transform: translate(0, 0) scale(.6); }
  to   { opacity: 0; transform: translate(var(--dx), -90px) scale(1.2); }
}