/* Giriş: kaydırdıkça kavrulan çekirdek (index.php .kv, assets/kavrulma.js).
   Bölüm uzun, sahne yapışkan; kaydırma çekirdeğin karelerini ilerletir, kareler bitince sayfa normal akar.
   Yazı renkleri JS tarafından o anki karenin parlaklığına göre --kv-* değişkenlerine yazılır. */
.kv {
  --hh: 73px; /* üst menünün yüksekliği */
  --kv-ink: #2b1712; --kv-muted: #6f5d50; --kv-accent: #a8612a; --kv-bg: #f6f0e6; --kv-line: rgba(43, 23, 18, 0.28);
  position: relative; background: #1d1310;
}
.js .kv { height: 340vh; }
.js .kv.kv--static { height: auto; }
.kv__stage {
  position: sticky; top: var(--hh); overflow: hidden; background: #cbbd9f;
  height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); min-height: 520px;
}
.kv__canvas, .kv__poster img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kv__poster img { object-fit: cover; object-position: 70% 50%; transition: opacity 0.3s linear; }
.kv.is-ready .kv__poster img { opacity: 0; }

.kv__text { max-width: min(560px, 44%); }
.kv__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.kv .display { margin-top: 22px; font-size: clamp(40px, 5.4vw, 78px); max-width: 12ch; }
.kv__sub { color: var(--kv-muted); }
.kv .eyebrow { color: var(--kv-accent); }
.kv .display { color: var(--kv-ink); }
.kv .display em { color: var(--kv-accent); }
.kv .eyebrow, .kv .display, .kv .display em, .kv__sub { transition: color 0.35s linear; }
.kv__sub { margin-top: 26px; max-width: 42ch; font-size: 18px; }
.kv .actions { margin-top: 36px; }
/* Butonlar zemine göre renk alır; hover'da yalnızca renk değişir. */
.kv .btn { background: var(--crema); color: #fff; }
.kv .btn:hover { background: var(--kv-ink); color: var(--kv-bg); }
.kv .btn .ok { background: var(--kv-bg); color: var(--crema); }
.kv .btn--ghost { background: transparent; color: var(--kv-ink); border-color: var(--kv-line); }
.kv .btn--ghost:hover { background: var(--kv-ink); color: var(--kv-bg); border-color: var(--kv-ink); }
.kv__hint {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; margin-left: -60px; width: 120px; text-align: center;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kv-muted); pointer-events: none;
}
.kv__hint::after { content: ''; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: currentColor; opacity: 0.6; }
.kv--static .kv__hint { display: none; }

.hero--after { padding-top: 0; }
.hero--after .claims { margin-top: 0; border-top: 0; }

/* Dikey ekran: çekirdek üstte, yazı altta (JS alt kısmı karenin zemin rengiyle doldurur). */
@media (max-aspect-ratio: 1/1) {
  .js .kv { height: 300vh; }
  .kv__stage { min-height: 0; }
  .kv__poster img { object-position: 50% 30%; }
  .kv__inner { justify-content: flex-end; padding-bottom: max(20px, 3svh); }
  .kv__text { max-width: none; }
  .kv .display { margin-top: 12px; font-size: clamp(28px, min(9vw, 6.4svh), 52px); max-width: 14ch; }
  .kv__sub { margin-top: 12px; font-size: 15px; line-height: 1.55; }
  .kv .actions { margin-top: 20px; gap: 8px; flex-wrap: nowrap; }
  .kv .btn { height: 48px; padding: 0 18px; font-size: 14px; }
  .kv .btn:has(.ok) { padding-right: 6px; }
  .kv .ok { width: 36px; height: 36px; }
  .kv__hint { display: none; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .kv__sub { display: none; }
}

/* Video bitmeden alttaki bölüm sahnenin üzerine yukarı doğru kayar. Bölüm, sahne yüksekliği kadar yukarı çekilir
   (kavrulma.js margin-top'u ölçüp yazar); sahne, bölüm onu tamamen örtene kadar yerinde sabit kalır, son kareler arkada oynar.
   Bu ek kaydırma payı için bölüm 100vh uzatıldı. */
.js .kv:not(.kv--static) { height: 440vh; }
.js .kv:not(.kv--static) + .intro {
  z-index: 3; background: var(--bg);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  box-shadow: 0 -24px 60px rgba(29, 19, 16, 0.28);
}
/* Bölüm yukarı çekildiği için arkasından gelenler de sahnenin üstünde kalmalı. */
.js .kv:not(.kv--static) ~ section { position: relative; z-index: 3; }
@media (max-aspect-ratio: 1/1) { .js .kv:not(.kv--static) { height: 400vh; } }