/* ===== Ana sayfa scroll hikayesi ===== */
:root{
  --st-ink: #0b1311;
  --st-gold: #d8ad67;
  --st-gold-soft: rgba(216,173,103,.55);
  --st-cream: #f4efe4;
  --st-serif: "Cormorant Garamond", "Times New Roman", serif;
  --st-sans: "Manrope", "Segoe UI", sans-serif;
}

html.story-loading, html.story-loading body{ overflow: hidden !important; }

/* ---------- Yükleme ekranı ---------- */
.story-loader{
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  background: var(--st-ink);
  color: var(--st-cream);
  transition: transform 1.1s cubic-bezier(.77,0,.18,1), opacity .4s ease 0.9s;
}
.story-loader.is-done{ transform: translateY(-100%); opacity: 0; pointer-events: none; }
.loader-inner{ display: grid; justify-items: center; gap: 22px; text-align: center; }
.loader-wm{
  font-family: var(--st-serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(44px, 8vw, 104px); letter-spacing: .22em; margin-right: -.22em; line-height: 1;
}
#storyLoader.is-run .loader-wm .l{ opacity: 1; transform: none; }
.loader-line{
  font-family: var(--st-sans); font-size: 10px; letter-spacing: .5em; text-transform: uppercase; color: var(--st-gold);
  opacity: 0; transition: opacity 1.2s ease .9s;
}
.story-loader.is-run .loader-line{ opacity: 1; }
.loader-bar{ width: min(260px, 60vw); height: 1px; background: rgba(244,239,228,.15); overflow: hidden; margin-top: 18px; }
.loader-bar i{ display: block; height: 100%; background: var(--st-gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.loader-pct{ font-family: var(--st-sans); font-size: 11px; letter-spacing: .3em; color: rgba(244,239,228,.55); }
@keyframes st-float{ 50%{ transform: translateY(-6px); } }

.st-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 0;
  font-family: var(--st-sans); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  background: transparent; color: var(--st-cream); border: 1px solid var(--st-gold);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .5s cubic-bezier(.16,1,.3,1), border-color .5s ease;
}
.st-btn::before{
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--st-gold);
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.st-btn:hover{ color: #14201b; }
.st-btn:hover::before{ transform: scaleY(1); }
.st-btn.ghost{ border-color: rgba(244,239,228,.35); }
.st-btn.ghost::before{ background: var(--st-cream); }

/* ---------- Hikaye alanı ---------- */
.story{
  position: relative;
  height: calc(var(--story-units, 11) * 100vh);
  background: var(--st-ink);
}
.story-sticky{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.story-canvas, .story-particles{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.story-particles{ pointer-events: none; z-index: 2; }
/* Sinematik şeritler: girişten sonra üstten ve alttan kapanır */
.story-sticky::before, .story-sticky::after{
  content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 0;
  background: #050807; pointer-events: none;
  transition: height 1.4s cubic-bezier(.16,1,.3,1);
}
.story-sticky::before{ top: 0; }
.story-sticky::after{ bottom: 0; }
.story.is-past-intro .story-sticky::before,
.story.is-past-intro .story-sticky::after{ height: 6vh; }
.story-shade{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,10,9,.55) 0%, rgba(5,10,9,0) 45%),
    linear-gradient(0deg, rgba(5,10,9,.55) 0%, rgba(5,10,9,0) 35%);
}

/* Giriş başlığı */
.story-intro{
  --q: 0;
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; text-align: center;
  padding: 0 16px;
  color: #fff; pointer-events: none;
}
.story-intro-kicker, .story-intro-sub{
  opacity: calc(1 - var(--q) * 2.2);
  transform: translateY(calc(var(--q) * -40px));
}
.story-intro-kicker{
  font-family: var(--st-sans); font-size: 12px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--st-gold); margin: 0 0 18px;
}
.story-intro-title{
  font-family: var(--st-serif); font-weight: 300;
  font-size: clamp(52px, 9.5vw, 150px); line-height: .96; letter-spacing: -.015em;
  margin: 0; max-width: 14ch;
  text-shadow: 0 20px 60px rgba(0,0,0,.35);
}
#story [data-split] em{ font-style: italic; color: #ecd6ad; }
.story-intro-sub{
  font-family: var(--st-sans); font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255,255,255,.82); max-width: 46ch; margin: 22px 0 0;
}

/* Harf harf açılan başlıklar */
/* Harfler bir maskenin altından yukarı süzülür */
#story [data-split] .w, #storyLoader [data-split] .w{
  display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top;
  padding: 0 .05em .14em; margin: 0 -.05em -.14em;
}
#story [data-split] .l, #storyLoader [data-split] .l{
  display: inline-block;
  opacity: 0; transform: translateY(110%);
  transition: transform 1.3s cubic-bezier(.16,1,.3,1), opacity .6s ease;
  transition-delay: calc(var(--i) * 22ms);
}
.story-ready #story .story-intro [data-split] .l,
#story .chapter.is-active [data-split] .l,
#story .story-end.is-active [data-split] .l{
  opacity: 1; transform: none;
}
#story .chapter:not(.is-active) [data-split] .l{ transition-delay: 0ms; transition-duration: .5s; }

.story-cue{
  position: absolute; left: 50%; bottom: 28px; z-index: 3; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px;
  color: rgba(255,255,255,.75);
  font-family: var(--st-sans); font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  pointer-events: none;
}
.story-cue i{
  width: 1px; height: 46px; background: linear-gradient(var(--st-gold), transparent);
  animation: st-cue 2s ease-in-out infinite; transform-origin: top;
}
@keyframes st-cue{ 0%{ transform: scaleY(0); } 50%{ transform: scaleY(1); } 100%{ transform: scaleY(1); opacity: 0; } }

/* Bölümler */
.chapter{
  position: absolute; z-index: 3;
  left: clamp(20px, 7vw, 120px); bottom: clamp(70px, 14vh, 150px);
  max-width: min(560px, 86vw);
  color: #fff; pointer-events: none;
}
.chapter.right{ left: auto; right: clamp(20px, 7vw, 120px); text-align: right; }
.chapter-no{
  display: flex; align-items: center; gap: 16px;
  font-family: var(--st-sans); font-size: 10px; font-weight: 600; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(255,255,255,.75); margin-bottom: 22px;
}
.chapter-no span{ font-family: var(--st-serif); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: 0; color: var(--st-gold); }
.chapter.right .chapter-no{ justify-content: flex-end; }
.chapter-no i{ display: block; width: 0; height: 1px; background: var(--st-gold); transition: width 1.1s cubic-bezier(.16,1,.3,1) .2s; }
.chapter.is-active .chapter-no i{ width: 56px; }
.chapter-title{
  font-family: var(--st-serif); font-weight: 300;
  font-size: clamp(44px, 6.6vw, 104px); line-height: .96; letter-spacing: -.01em; margin: 0;
  text-shadow: 0 16px 50px rgba(0,0,0,.4);
}
.chapter-text{
  font-family: var(--st-sans); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.6;
  color: rgba(255,255,255,.85); margin: 18px 0 0;
}
.chapter-no, .chapter-text{
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s ease .25s, transform .9s cubic-bezier(.2,.8,.2,1) .25s;
}
.chapter.is-active .chapter-no, .chapter.is-active .chapter-text{ opacity: 1; transform: none; }

/* Sağdaki sahne rayı */
.story-rail{
  position: absolute; z-index: 4; right: clamp(14px, 2.4vw, 34px); top: 50%;
  transform: translateY(-50%);
  display: grid; gap: 14px;
  opacity: 0; transition: opacity .6s ease;
}
.story.is-past-intro .story-rail{ opacity: 1; }
.story-rail-track{
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 1px;
  background: rgba(255,255,255,.2);
}
.story-rail-fill{
  position: absolute; inset: 0; background: var(--st-gold);
  transform: scaleY(0); transform-origin: top;
}
.story-rail button{
  position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.6);
  font-family: var(--st-sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
}
.story-rail button span{ opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
.story-rail button:hover span, .story-rail button.is-active span{ opacity: 1; transform: none; }
.story-rail button::after{
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55); background: var(--st-ink);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.story-rail button.is-active{ color: #fff; }
.story-rail button.is-active::after{ background: var(--st-gold); border-color: var(--st-gold); transform: scale(1.25); }

/* Final çağrısı */
.story-end{
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; text-align: center;
  padding: 0 16px; color: #fff;
  pointer-events: none;
}
.story-end.is-active{ pointer-events: auto; }
.story-end-kicker{
  font-family: var(--st-sans); font-size: 12px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--st-gold); margin: 0 0 18px;
}
.story-end-title{
  font-family: var(--st-serif); font-weight: 300;
  font-size: clamp(44px, 7.5vw, 120px); line-height: 1; margin: 0; max-width: 14ch;
}
.story-end-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.story-end-kicker, .story-end-actions, .story-end-meta{
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s ease .35s, transform .9s cubic-bezier(.2,.8,.2,1) .35s;
}
.story-end.is-active .story-end-kicker,
.story-end.is-active .story-end-actions,
.story-end.is-active .story-end-meta{ opacity: 1; transform: none; }
.story-end-meta{
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 28px;
  font-family: var(--st-sans); font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.7);
}
.story-end-meta b{ color: var(--st-gold); font-weight: 700; }


/* ---------- Mobil ---------- */
@media (max-width: 900px){
  .story.is-past-intro .story-sticky::before,
  .story.is-past-intro .story-sticky::after{ height: 3.5vh; }
  .story-shade{
    background: linear-gradient(0deg, rgba(5,10,9,.75) 0%, rgba(5,10,9,.1) 50%, rgba(5,10,9,.25) 100%);
  }
  .chapter, .chapter.right{
    left: 16px; right: 44px; text-align: left;
    bottom: 64px; max-width: none;
  }
  .chapter.right .chapter-no{ justify-content: flex-start; }
  .story-rail{ right: 10px; gap: 10px; }
  .story-rail button span{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  #story [data-split] .l, #storyLoader [data-split] .l{ transition: opacity .3s ease; filter: none; transform: none; }
  .story-loader{ transition: opacity .4s ease; }
  .story-loader.is-done{ transform: none; }
}

/* Hikayeyi atlama bağlantısı */
.story-skip{
  position: absolute; right: clamp(16px, 2.6vw, 36px); bottom: calc(6vh + 18px); z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border: 1px solid rgba(244,239,228,.35);
  font-family: var(--st-sans); font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--st-cream); text-decoration: none; background: rgba(5,10,9,.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.story-skip:hover{ background: var(--st-cream); color: #111a16; border-color: var(--st-cream); }
@media (max-width: 900px){ .story-skip{ bottom: calc(3.5vh + 14px); } }