@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,500&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  --wine: #7a1024;
  --wine-light: #b3183a;
  --cream: #f6ead9;
  --gold: #d9b25f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  background: #150406;
}

body {
  min-height: 100vh;
}

a { color: inherit; }

/* ---------- Şiir sayfası ---------- */

.poem-page {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 6vw;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.poem-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,2,4,.5) 0%, rgba(10,2,4,.68) 55%, rgba(10,2,4,.85) 100%);
  z-index: 0;
}

.poem-box {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
  animation: riseIn 1.6s ease both;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.poem-box .eyebrow {
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--gold);
}

.poem-box h1 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  margin: .5rem 0 2.2rem;
  text-shadow: 0 4px 24px rgba(0,0,0,.6);
}

.poem-box .poem {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 2;
  white-space: pre-line;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}

/* ---------- Gezinme (önceki / sonraki) ---------- */

.counter {
  position: fixed;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 3;
  font-size: .85rem;
  letter-spacing: .15em;
  color: var(--cream);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  padding: .5rem 1rem;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}

.music-toggle {
  position: fixed;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--cream);
  padding: .5rem 1.1rem;
  border-radius: 100px;
  font-family: 'Cormorant Garamond', serif;
  font-size: .95rem;
  letter-spacing: .05em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .3s;
}
.music-toggle:hover { background: rgba(0,0,0,.6); }
.music-toggle .icon { font-size: 1.1rem; }

.prev-link, .next-link {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--cream);
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.2);
  padding: .8rem 1.1rem;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  transition: background .3s, transform .3s;
  font-size: .95rem;
  letter-spacing: .05em;
}
.prev-link:hover, .next-link:hover { background: rgba(179,24,58,.45); }

.prev-link { left: 1.6rem; }
.next-link { right: 1.6rem; }

.prev-arrow, .next-arrow { font-size: 1.3rem; color: var(--gold); }

.prev-label, .next-label { display: none; }

@media (min-width: 780px) {
  .prev-label, .next-label { display: inline; }
}

.photo-credit {
  position: fixed;
  bottom: 1rem;
  right: 1.2rem;
  z-index: 2;
  font-size: .72rem;
  color: rgba(255,255,255,.55);
}
.photo-credit a { color: rgba(255,255,255,.75); text-decoration: underline; }

@media (max-width: 600px) {
  .counter, .music-toggle { padding: .4rem .8rem; font-size: .75rem; }
  .prev-link, .next-link {
    top: auto;
    bottom: 1.4rem;
    transform: none;
    padding: .7rem .9rem;
  }
  .prev-link { left: 1rem; }
  .next-link { right: 1rem; }
  .photo-credit { display: none; }
}