/* ============================================================
   KATMAN SCROLL ANİMASYONU — Saraylı Künefe
   ------------------------------------------------------------
   Sayfa kaydırıldıkça tatlı katmanlarına ayrılır.
   Bağımlılık yok. Katman sayısından bağımsız çalışır —
   katman/etiket sayısı DOM'dan okunur (bkz. katman-scroll.js).

   Renkler ve fontlar css/style.css'teki site değişkenlerinden
   gelir (--renk-koyu, --renk-altin, --renk-krem, --font-baslik,
   --font-govde). Bu dosya yalnızca katman sahnesini biçimlendirir.
   ============================================================ */

.katman-section {
  --ks-bg:     var(--renk-koyu, #1A0A00);
  --ks-cream:  var(--renk-krem, #FAF3E0);
  --ks-gold:   var(--renk-altin, #C8860A);
  --ks-gold-2: var(--renk-karamel, #F5A623);

  position: relative;
  height: 560vh;
  height: 560svh;
  background: var(--ks-bg);
}

.ks-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(10, 4, 0, 0) 52%, rgba(10, 4, 0, 0.55) 100%),
    radial-gradient(ellipse 58% 68% at 50% 50%, rgba(200, 134, 10, 0.18), rgba(26, 10, 0, 0) 72%),
    var(--ks-bg);
}

/* Sahnenin arkasındaki sıcak ışık halesi */
.ks-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vmin;
  height: 84vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(245, 166, 35, 0.34),
    rgba(200, 134, 10, 0.18) 48%,
    rgba(26, 10, 0, 0) 76%);
  opacity: var(--ks-glow, 1);
  animation: ks-glow-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ks-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.08); }
}

/* ── Katmanlar ─────────────────────────────────────────────
   Görseller siyah zeminli çekildiği için mix-blend-mode:screen
   ile arka planları görünmez olur (koyu zemin şart). */

.ks-layers {
  position: absolute;
  inset: 0;
}

.ks-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 82vh, 700px);
  width: min(74vw, 82svh, 700px);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ks-layer img {
  display: block;
  width: 100%;
  height: auto;
  animation: ks-bob 5.5s ease-in-out infinite;
}

@keyframes ks-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.2vh); }
}

/* ── Giriş başlığı ───────────────────────────────────────── */

/* Sahne tam ekrandır (navbar'ın arkasından başlar), ama başlık
   navbar'ın altında kalmasın diye onun yüksekliği kadar iner. */
.ks-intro {
  position: absolute;
  top: calc(var(--navbar-h, 84px) + 2vh);
  left: 0;
  right: 0;
  z-index: 10;
  text-align: center;
  padding: 0 1rem;
  will-change: transform, opacity;
}

.ks-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin: 0 0 1.2em;
  font-family: var(--font-govde, 'Nunito', sans-serif);
  font-size: clamp(0.62rem, 1.1vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--ks-gold-2);
}

.ks-eyebrow::before,
.ks-eyebrow::after {
  content: "";
  width: clamp(26px, 4vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, rgba(200, 134, 10, 0), rgba(200, 134, 10, 0.65));
}

.ks-eyebrow::after {
  background: linear-gradient(270deg, rgba(200, 134, 10, 0), rgba(200, 134, 10, 0.65));
}

.ks-intro h1,
.ks-intro h2 {
  margin: 0;
  font-family: var(--font-baslik, 'Playfair Display', Georgia, serif);
  font-size: clamp(2rem, 5.6vw, 3.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #FAF3E0 0%, #F5A623 52%, #C8860A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 22px rgba(200, 134, 10, 0.35));
}

.ks-intro p {
  margin: 0.7em auto 0;
  max-width: 34rem;
  font-family: var(--font-govde, 'Nunito', sans-serif);
  font-size: clamp(0.92rem, 1.9vw, 1.08rem);
  line-height: 1.55;
  color: rgba(250, 243, 224, 0.72);
}

/* ── Kaydırma ipucu ──────────────────────────────────────────
   --ks-alt-bosluk: mobilde sabit CTA çubuğu (.mobil-cta, ~60px)
   sahnenin altını kapatıyor; ipucu ve noktalar onun üstünde kalır.
   768px ve üzerinde çubuk gizlendiği için boşluk sıfırlanır
   (bkz. dosya sonundaki medya sorgusu). */

.ks-cue {
  position: absolute;
  left: 50%;
  bottom: calc(5vh + var(--ks-alt-bosluk, 60px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
  z-index: 11;
  opacity: var(--ks-cue, 1);
  pointer-events: none;
}

.ks-cue span {
  font-family: var(--font-govde, 'Nunito', sans-serif);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: rgba(250, 243, 224, 0.55);
}

.ks-cue i {
  position: relative;
  width: 1px;
  height: 44px;
  background: rgba(250, 243, 224, 0.16);
  overflow: hidden;
}

.ks-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -45%;
  width: 100%;
  height: 45%;
  background: linear-gradient(180deg, rgba(200, 134, 10, 0), var(--ks-gold-2));
  animation: ks-cue-drop 2s ease-in-out infinite;
}

@keyframes ks-cue-drop {
  0%        { top: -45%; }
  70%, 100% { top: 105%; }
}

/* ── İlerleme noktaları ──────────────────────────────────── */

.ks-progress {
  position: absolute;
  left: 50%;
  bottom: calc(5.5vh + var(--ks-alt-bosluk, 60px));
  transform: translateX(-50%);
  display: flex;
  gap: 13px;
  z-index: 11;
  opacity: calc(1 - var(--ks-cue, 1));
  pointer-events: none;
}

.ks-progress i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(250, 243, 224, 0.22);
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.ks-progress i.is-on {
  background: var(--ks-gold-2);
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.8);
  transform: scale(1.3);
}

/* ── Katman etiketleri ───────────────────────────────────── */

.ks-label {
  position: absolute;
  z-index: 9;
  max-width: min(34vw, 340px);
  font-family: var(--font-govde, 'Nunito', sans-serif);
  color: var(--ks-cream);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.ks-label__num {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: 0.7em;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--ks-gold-2);
}

.ks-label__num::after {
  content: "";
  flex: none;
  width: clamp(30px, 4.5vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.6), rgba(245, 166, 35, 0));
}

.ks-label--right .ks-label__num {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.ks-label--right .ks-label__num::after {
  background: linear-gradient(270deg, rgba(245, 166, 35, 0.6), rgba(245, 166, 35, 0));
}

.ks-label strong {
  display: block;
  font-family: var(--font-baslik, 'Playfair Display', Georgia, serif);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
}

.ks-label__text {
  display: block;
  margin-top: 0.5em;
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  line-height: 1.55;
  color: rgba(250, 243, 224, 0.62);
}

.ks-label--left  { left: 6%;  text-align: left; }
.ks-label--right { right: 6%; text-align: right; }

/* Masaüstünde mobil CTA çubuğu gizlenir (style.css, min-width:768px),
   bu yüzden alttaki güvenlik boşluğu da kalkar. */
@media (min-width: 768px) {
  .katman-section { --ks-alt-bosluk: 0px; }
}

/* ── Mobil ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .ks-layer { width: min(94vw, 68vh); }

  .ks-label { max-width: 46vw; }
  .ks-label--left  { left: 4%; }
  .ks-label--right { right: 4%; }

  .ks-label__num { font-size: 0.6rem; gap: 0.6em; margin-bottom: 0.45em; }
  .ks-label__num::after { width: 22px; }
  .ks-label strong { font-size: 1.02rem; }
  .ks-label__text  { font-size: 0.72rem; line-height: 1.45; }

  .ks-eyebrow { letter-spacing: 0.2em; text-indent: 0.2em; }
}


  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) { height: auto; }
  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-stage { position: relative; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); padding: 2rem 1rem 3rem; overflow: hidden; }
  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-intro { position: relative; inset: auto; grid-row: 1; margin-bottom: 1rem; opacity: 1 !important; transform: none !important; }
  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-layers { display: contents; }
  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-layer { position: relative; inset: auto !important; grid-row: var(--ks-row); justify-self: center; width: min(85vw, 480px); transform: none !important; opacity: 1 !important; will-change: auto; }
  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-label { position: relative; inset: auto !important; grid-row: var(--ks-row); justify-self: center; max-width: 38rem; margin: 0 0 2rem; text-align: center; opacity: 1 !important; transform: none !important; will-change: auto; }
  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-label__num { justify-content: center; flex-direction: row; }
  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-label__text { display: block; font-size: 0.95rem; }
  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-layer img, :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-stage::before { animation: none; }
  :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-cue, :is(.no-js .katman-section, .katman-section:not(.ks-ready), .katman-section.ks-static) .ks-progress { display: none; }

@media (prefers-reduced-motion: reduce) {

  .katman-section { height: auto; }
  .katman-section .ks-stage { position: relative; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); padding: 2rem 1rem 3rem; overflow: hidden; }
  .katman-section .ks-intro { position: relative; inset: auto; grid-row: 1; margin-bottom: 1rem; opacity: 1 !important; transform: none !important; }
  .katman-section .ks-layers { display: contents; }
  .katman-section .ks-layer { position: relative; inset: auto !important; grid-row: var(--ks-row); justify-self: center; width: min(85vw, 480px); transform: none !important; opacity: 1 !important; will-change: auto; }
  .katman-section .ks-label { position: relative; inset: auto !important; grid-row: var(--ks-row); justify-self: center; max-width: 38rem; margin: 0 0 2rem; text-align: center; opacity: 1 !important; transform: none !important; will-change: auto; }
  .katman-section .ks-label__num { justify-content: center; flex-direction: row; }
  .katman-section .ks-label__text { display: block; font-size: 0.95rem; }
  .katman-section .ks-layer img, .katman-section .ks-stage::before { animation: none; }
  .katman-section .ks-cue, .katman-section .ks-progress { display: none; }
}
/* ── Tatlı seçim şeridi (sahnenin ÜSTÜNDE) ───────────────── */

.ks-secim {
  background: var(--renk-kum, #F2EAD3);
  padding: 2.2rem 0;
  border-top: 1px solid rgba(26, 10, 0, 0.08);
}

/* Sayfanın ilk bloğu olduğu için sabit navbar'ın altından başlar. */
.ks-secim--ust {
  margin-top: var(--navbar-h, 84px);
  border-top: 0;
  border-bottom: 1px solid rgba(26, 10, 0, 0.08);
  padding: 1.8rem 0;
}

.ks-secim__baslik {
  font-family: var(--font-govde, 'Nunito', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(26, 10, 0, 0.5);
  text-align: center;
  margin-bottom: 1.2rem;
}

.ks-secim__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.ks-secim__liste a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.62rem 1.15rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(26, 10, 0, 0.1);
  font-family: var(--font-govde, 'Nunito', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--renk-koyu, #1A0A00);
  text-decoration: none;
  transition: var(--gecis, all 0.3s ease);
}

.ks-secim__liste a:hover {
  border-color: var(--renk-altin, #C8860A);
  color: var(--renk-altin, #C8860A);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(26, 10, 0, 0.1);
}

.ks-secim__liste a.is-aktif {
  background: linear-gradient(135deg, var(--renk-altin, #C8860A), var(--renk-karamel, #F5A623));
  border-color: transparent;
  color: var(--renk-koyu, #1A0A00);
  box-shadow: 0 8px 22px rgba(200, 134, 10, 0.3);
}

/* ── Sahnenin altındaki kapanış çağrısı ──────────────────── */

.ks-kapanis {
  background: var(--renk-kum, #F2EAD3);
  padding: 2.4rem 0;
  border-top: 1px solid rgba(26, 10, 0, 0.08);
}

/* Dar ekranda görsellerin altındaki kısa etiketler; açıklamalar sahneden sonra. */
@media (max-width: 640px) {
  .ks-layer { width: min(94vw, 68svh); }
  .katman-section.ks-ready:not(.ks-static) .ks-label { left: 5%; right: 5%; max-width: none; text-align: center; }
  .katman-section.ks-ready:not(.ks-static) .ks-label__num { display: none; }
  .katman-section.ks-ready:not(.ks-static) .ks-label__text { display: none; }
  .ks-metin-listesi { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; white-space: normal !important; overflow: visible !important; margin: 2rem auto !important; }
}
.ks-offscreen .ks-layer img, .ks-offscreen .ks-stage::before, .ks-offscreen .ks-cue i::after { animation-play-state: paused; }
.ks-metin-listesi { padding: 1.5rem; }
.ks-metin-listesi h2 { font-size: 1.3rem; }
.ks-metin-listesi li { margin-block: 0.75rem; }
.ks-komsu { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.ks-komsu a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; color: var(--renk-koyu); }
.ks-komsu a:focus-visible { outline: 3px solid var(--renk-altin); outline-offset: 2px; }
@media (min-width: 641px) {
  .ks-metin-listesi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
}