:root {
  --fg: #f3ecf7;
  --fg2: rgba(243, 236, 247, .72);
  --line: rgba(243, 236, 247, .22);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: #0d1330; }
body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hide { opacity: 0 !important; filter: blur(10px); pointer-events: none !important; }

.ui {
  position: fixed; left: 0; right: 0; top: max(26px, env(safe-area-inset-top));
  text-align: center; padding: 0 22px; pointer-events: none;
  transition: opacity .8s ease, filter .8s ease;
}
.swap { transition: opacity .35s ease, filter .35s ease, transform .35s ease; }
.swap.out { opacity: 0; filter: blur(8px); transform: translateY(-6px); }
.k { font: 600 italic 13px/1 'Cormorant Garamond', serif; letter-spacing: .2em; color: var(--fg2); }
.ui h2 { font: 500 italic clamp(29px, 7.6vw, 46px)/1.1 'Cormorant Garamond', serif; margin: 10px 0 6px; }
.ui p { font: 500 italic clamp(17px, 4.6vw, 22px)/1.3 'Cormorant Garamond', serif; color: var(--fg2); }
.bar {
  width: 168px; height: 3px; margin: 14px auto 0; border-radius: 2px; overflow: hidden;
  background: var(--line); opacity: 0; transition: opacity .4s ease;
}
.bar.on { opacity: 1; }
.bar i { display: block; height: 100%; width: 0; background: var(--fg); }

.intro {
  position: fixed; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  background: rgba(9, 12, 32, .34);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity 1s ease, filter 1s ease;
}
.intro-in { animation: rise 1.6s ease both; }
@keyframes rise { from { opacity: 0; filter: blur(12px); transform: translateY(10px); } }
.intro .name { font-family: 'Pinyon Script', cursive; font-size: clamp(60px, 17vw, 120px); line-height: 1.15; color: #f8eef4; }
.intro p { font: 500 italic clamp(19px, 5vw, 25px)/1.42 'Cormorant Garamond', serif; max-width: 25em; margin: 8px auto 0; color: rgba(248, 238, 244, .86); }
.intro button {
  margin-top: 32px; padding: 13px 34px; cursor: pointer;
  font: 600 italic 21px 'Cormorant Garamond', serif; color: #f8eef4;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(248, 238, 244, .55); border-radius: 10px;
  transition: background .25s ease, transform .2s ease;
  touch-action: manipulation;
}
.intro button:hover { background: rgba(255, 255, 255, .13); }
.intro button:active { transform: scale(.97); }
.intro small { display: block; margin-top: 16px; font: 500 italic 15px 'Cormorant Garamond', serif; color: rgba(248, 238, 244, .6); }

.final {
  position: fixed; left: 0; right: 0; top: 40%; text-align: center; padding: 0 22px; pointer-events: none;
  color: #3a2440; transition: opacity 1.4s ease, filter 1.4s ease;
}
.final h3 { font: 500 italic clamp(23px, 6vw, 36px)/1.25 'Cormorant Garamond', serif; }
.final p { margin-top: 8px; font: 500 italic clamp(15px, 4vw, 18px) 'Cormorant Garamond', serif; color: rgba(58, 36, 64, .7); transition: opacity 1.2s ease, filter 1.2s ease; }

.snd {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  color: var(--fg); background: rgba(10, 14, 35, .18); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .8s ease, filter .8s ease; touch-action: manipulation;
}
.snd.off #sndWave { opacity: .2; }

/* şiir kartı */
.poem {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  background: rgba(40, 18, 40, .14);
  transition: opacity 1.2s ease, filter 1.2s ease;
}
.poem-card { position: relative; width: min(100%, 540px); max-height: 100%; display: flex; }
.poem-scroll {
  width: 100%; max-height: calc(100svh - 36px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: rgba(252, 246, 238, .88); border: 1px solid rgba(58, 36, 64, .1); border-radius: 14px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -20px rgba(40, 18, 40, .35);
  padding: 40px clamp(22px, 7vw, 46px) 30px; color: #3a2440;
}
.poem-scroll::-webkit-scrollbar { display: none; }
.st { margin: 0 0 1.15em; }
.poem-in span, .sig, .back {
  opacity: 0; filter: blur(8px); transform: translateY(6px);
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}
.poem-in .on { opacity: 1; filter: none; transform: none; }
.poem-in span { display: block; font: 500 italic clamp(18px, 4.9vw, 23px)/1.5 'Cormorant Garamond', serif; }
.sig { text-align: right; font: 600 italic 15px 'Cormorant Garamond', serif; letter-spacing: .14em; color: rgba(58, 36, 64, .6); }
.back {
  display: block; margin: 26px auto 0; padding: 10px 26px; cursor: pointer;
  font: 600 italic 19px 'Cormorant Garamond', serif; color: #3a2440;
  background: transparent; border: 1px solid rgba(58, 36, 64, .35); border-radius: 10px; touch-action: manipulation;
}
.poem-x {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center;
  color: #3a2440; background: transparent; border: 0; border-radius: 8px; cursor: pointer; opacity: .65;
}
.poem-open {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 42px; padding: 0 16px;
  font: 600 italic 18px 'Cormorant Garamond', serif; color: var(--fg); cursor: pointer;
  background: rgba(255, 255, 255, .18); border: 1px solid var(--line); border-radius: 10px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .8s ease, filter .8s ease; touch-action: manipulation;
}

.open-letter {
  position: fixed; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 4;
  transform: translateX(-50%); padding: 13px 34px; cursor: pointer; white-space: nowrap;
  font: 600 italic 21px 'Cormorant Garamond', serif; color: #3a2440;
  background: rgba(252, 246, 238, .78); border: 1px solid rgba(58, 36, 64, .4); border-radius: 10px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity 1s ease, filter 1s ease; touch-action: manipulation;
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.04); } }