/* ==========================================================================
   Ahmet Can Kuru — premium.css
   Tek kahraman: şiir. Eski film projeksiyonu havası + okuyucuyu izleyen ışık.
   ========================================================================== */

:root {
  --night:  #0e0b0a;
  --ash:    #1d1817;
  --smoke:  #2b2624;
  --bone:   #ebe2d2;
  --bone-2: rgba(235, 226, 210, .82);
  --ember:  #c9a46a;

  --serif: "Bellefair", Georgia, "Times New Roman", serif;

  --poem-size: clamp(1.32rem, 1.08rem + 1vw, 1.78rem);
  --gutter: max(1.6rem, env(safe-area-inset-left), env(safe-area-inset-right));
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--night);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--smoke) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--serif);
  color: var(--bone);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201, 164, 106, .09), transparent 60%),
    linear-gradient(100deg, var(--night) 0%, var(--night) 34%, var(--ash) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(201, 164, 106, .32); color: #fff; }

/* ---------- Sahne ---------------------------------------------------- */

.stage {
  --measure: calc(var(--fs, 1.6rem) * 28);   /* sütun genişliği yazı boyutuyla ölçeklenir */
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding:
    max(clamp(1.5rem, 6vh, 4rem), env(safe-area-inset-top))
    var(--gutter)
    max(clamp(1.25rem, 5vh, 3.5rem), env(safe-area-inset-bottom));
}

.poem {
  width: 100%;
  max-width: var(--measure);
  margin: 0;
  font-size: var(--poem-size);
  font-style: normal;                /* Bellefair'in italiği yok */
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .008em;
  text-align: left;
  hanging-punctuation: first;
}

.stanza {
  margin: 0 0 2em;
}

.stanza:last-child { margin-bottom: 0; }

.line {
  display: block;
  padding-left: 1.3em;      /* kırılan dizeler içeri girer: şiir dizilişi */
  text-indent: -1.3em;
  color: var(--bone-2);
  text-shadow: 0 0 28px rgba(201, 164, 106, .16);
  text-wrap: pretty;
  transition: color .7s ease;
}

@media (hover: hover) {
  .line:hover { color: #fff7e6; }
}

/* Düzyazı (404) varyantı: asılı girinti yok */
.poem--prose .line {
  padding-left: 0;
  text-indent: 0;
}

/* ---------- İmza ---------------------------------------------------- */

.signature {
  width: 100%;
  max-width: var(--measure);
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.1rem;
  font-size: 1.05rem;
  font-style: normal;
  color: rgba(201, 164, 106, .8);
  letter-spacing: .04em;
}

.signature::before {
  content: "";
  width: 3.2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--ember), transparent);
  opacity: .7;
}

.signature a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 164, 106, .35);
  padding-bottom: 1px;
  transition: color .4s ease, border-color .4s ease;
}

.signature a:hover,
.signature a:focus-visible {
  color: #f3dfb8;
  border-color: #f3dfb8;
}

a:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 5px;
  border-radius: 2px;
}

/* ---------- Dokunmatik cihazlarda seçme ve kopyalama kapalı ------------ */

@media (hover: none) and (pointer: coarse) {
  html, body, .stage, .poem, .signature {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;      /* iOS: basılı tutma menüsü */
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---------- Efekt katmanları --------------------------------------- */

.glow,
.scratch,
.grain,
.vignette,
.curtain,
.progress {
  position: fixed;
  pointer-events: none;
}

/* Mum ışığı: imleci (ya da dokunuşu) yavaşça izler, boştayken süzülür */
.glow {
  --gs: max(78vmin, 520px);
  left: 0;
  top: 0;
  z-index: 1;
  width: var(--gs);
  height: var(--gs);
  margin: calc(var(--gs) / -2) 0 0 calc(var(--gs) / -2);
  transform: translate3d(50vw, 32vh, 0);
  background: radial-gradient(circle,
    rgba(214, 176, 112, .17) 0%,
    rgba(214, 176, 112, .07) 36%,
    transparent 68%);
  will-change: transform;
  animation: projector 9s steps(1, end) infinite;
}

/* Film çiziği: nadiren belirir */
.scratch {
  top: 0;
  bottom: 0;
  z-index: 1;
  left: 62%;
  width: 1px;
  opacity: 0;
  background: linear-gradient(to bottom,
    transparent, rgba(255, 244, 222, .5) 18%, rgba(255, 244, 222, .5) 82%, transparent);
  animation: scratch 11s linear infinite;
}

/* Gren: 200px'lik döşeme, GPU'da kaydırılır */
.grain {
  z-index: 3;
  inset: -25%;
  opacity: .075;
  background-image: var(--grain, none);
  background-size: 200px 200px;
  animation: grain 1.1s steps(1, end) infinite;
}

.vignette {
  z-index: 3;
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 46%,
    transparent 38%, rgba(0, 0, 0, .55) 74%, rgba(0, 0, 0, .92) 100%);
  animation: breathe 7s ease-in-out infinite;
}

/* Açılış perdesi */
.curtain {
  inset: 0;
  z-index: 10;
  background: #000;
  animation: curtain 2.4s cubic-bezier(.4, 0, .2, 1) .15s both;
}

/* Okuma ilerlemesi: sayfa kaydırılabiliyorsa görünür */
.progress {
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 1px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--ember));
  opacity: .8;
}

/* ---------- Şiir belirişi ------------------------------------------ */

/* JS yoksa metin her zaman görünür; JS varsa dizeler tek tek belirir */
.js .line { opacity: 0; }

.js .stanza.is-visible .line {
  animation: surface 1.7s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--base, 0s) + var(--i, 0) * 150ms);
}

.js .stanza:first-child { --base: 1.7s; }

/* Son sözcük: kendinde kaybolur */
.dissolve { display: inline-block; text-indent: 0; transform-origin: 0 60%; }

.js .stanza.is-visible .dissolve {
  animation: dissolve 7s ease-in-out 4.5s infinite alternate;
}

/* ---------- Anahtar kareler ---------------------------------------- */

@keyframes surface {
  from { opacity: 0; transform: translateY(.55em); filter: blur(9px); }
  to   { opacity: 1; transform: none;              filter: none; }
}

/* Yalnızca opacity, filter ve transform: kelimenin kapladığı yer değişmez,
   böylece satır sonunda kelime alt satıra düşmez. */
@keyframes dissolve {
  0%, 35% { opacity: 1;   filter: blur(0);   transform: scale(1); }
  100%    { opacity: .28; filter: blur(3px); transform: scale(1.05); }
}

@keyframes curtain {
  0%   { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .78; }
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-7%, -9%); }
  25%  { transform: translate(6%, 4%); }
  37%  { transform: translate(-4%, 8%); }
  50%  { transform: translate(8%, -6%); }
  62%  { transform: translate(-9%, 3%); }
  75%  { transform: translate(3%, 9%); }
  87%  { transform: translate(-5%, -4%); }
  100% { transform: translate(0, 0); }
}

/* Projektör titremesi: düzensiz, çok hafif */
@keyframes projector {
  0%   { opacity: 1; }
  13%  { opacity: .86; }
  15%  { opacity: 1; }
  41%  { opacity: .93; }
  43%  { opacity: 1; }
  72%  { opacity: .82; }
  73%  { opacity: 1; }
  90%  { opacity: .94; }
  100% { opacity: 1; }
}

@keyframes scratch {
  0%, 84%  { opacity: 0; }
  85%      { opacity: .55; }
  86.5%    { opacity: 0; }
  88%      { opacity: .3; }
  89%, 100%{ opacity: 0; }
}

/* ---------- Küçük ekranlar: tek ekrana sığar ------------------------
   Yazı boyutunu premium.js ekran yüksekliğine göre otomatik ayarlar. */

@media (max-width: 600px) {
  :root {
    --gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  .stage {
    --measure: 100%;
    padding:
      max(1.5rem, env(safe-area-inset-top))
      var(--gutter)
      max(1.25rem, env(safe-area-inset-bottom));
  }
  .poem { line-height: 1.55; }
  .stanza { margin-bottom: 1.5em; }
  .signature { margin-top: 1.7rem; font-size: .95rem; }
  .grain { opacity: .09; }
}

html.is-fit,
html.is-fit body { overflow: hidden; height: 100%; }

/* Yatay telefon / çok alçak ekran */
@media (max-height: 460px) {
  .stage { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* ---------- Hareket azaltma tercihi -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .curtain,
  .scratch,
  .progress { display: none; }

  .glow,
  .grain,
  .vignette { animation: none; }

  .js .line { opacity: 1; }
  .js .stanza.is-visible .line,
  .js .stanza.is-visible .dissolve { animation: none; }
}