.page__hero {
  position: sticky;
  min-height: 70svh;
  top: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-image: url("");
  background-color: var(--kf-bg-dark);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  will-change: background-position;
  z-index: 0;
}

.page__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kf-black-4);
  z-index: 1;
  pointer-events: none;
  will-change: background;
  transition: background var(--kf-dt-slow) linear;
}

.page__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      var(--kf-black-10) 0%,
      var(--kf-black-7) 14%,
      var(--kf-black-2) 30%,
      transparent 48%
    ),
    linear-gradient(to right, var(--kf-black-6) 0%, transparent 45%);
  z-index: 2;
}

.page__hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
  pointer-events: none;
}

.page__hero-blur {
  position: absolute;
  z-index: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 3;
  pointer-events: none;
  will-change: backdrop-filter;
}

.page__hero-container {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 0 8rem clamp(5.6rem, 7vw, 96rem);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page__hero-title {
  color: var(--kf-white-10);
  font-size: var(--kf-fs-2xl);
  font-weight: var(--kf-fw-bold);
  letter-spacing: var(--kf-ls-xl);
  text-transform: var(--kf-tu);

  clip-path: inset(0 0 100% 0);
  transform: translateY(1.2rem);
  opacity: 0;
  transition:
    clip-path var(--kf-dt-slow) var(--kf-ease),
    transform var(--kf-dt-slow) var(--kf-ease),
    opacity var(--kf-dt-base) var(--kf-ease);
}

.page__hero-title.is-visible {
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
  opacity: 1;
}

.page__hero-title.word--accent {
  display: block;
  color: var(--kf-white-10);
}

.page__hero-title.word--main {
  display: block;
  -webkit-text-stroke: 1.5px solid var(--kf-white-2);
  color: transparent;
  transition:
    color var(--kf-dt-focus) var(--kf-ease),
    -webkit-text-stroke var(--kf-dt-focus) var(--kf-ease);
}

.page__hero-title:hover .word--main {
  color: var(--kf-white-1);
  -webkit-text-stroke: 1.5px var(--kf-white-4);
}

.page__hero-container::before {
  content: "";
  position: absolute;
  left: 8rem;
  bottom: clamp(5.6rem, 7vw, 9.6rem);
  width: 1px;
  height: 5.6rem;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--kf-white-2) 40%,
    var(--kf-accent-4) 100%
  );
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--kf-dt-fast) var(--kf-ease);
}

.page__hero-container.is-visible::before {
  transform: scaleY(1);
}

.page__hero-container::after {
  content: "SCROLL";
  position: absolute;
  right: 8rem;
  bottom: clamp(5.6rem, 7vw, 9.6rem);
  font-size: var(--kf-fs-md);
  font-weight: var(--kf-fw-semibold);
  color: var(--kf-white-3);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0;
  transform: translateY(0.8rem);
  transition:
    opacity var(--kf-dt-focus) var(--kf-ease),
    transform var(--kf-dt-focus) var(--kf-ease);
}

.page__hero-container.is-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.page__hero + * {
  margin-top: -2px;
}

/* İçerik blokları hero’nun üzerinde kaymalı. Bölüm dosyaları çoğu sayfada hero’dan
   hemen sonra <link>/<script> enjekte ettiği için `.page__hero + *` yalnızca linke
   denk geliyor; asıl section’lar bu yüzden z-index almıyordu. */
.page__hero ~ section,
.page__hero ~ main {
  position: relative;
  z-index: 1;
}

@media (max-width: 1280px) {
  .page__hero-container {
    padding: 0 5.2rem clamp(4.8rem, 7vw, 9.6rem);
  }

  .page__hero-container::before {
    left: 5.2rem;
    bottom: clamp(4.8rem, 7vw, 9.6rem);
  }

  .page__hero-container::after {
    right: 5.2rem;
    bottom: clamp(4.8rem, 7vw, 9.6rem);
  }
}

@media (max-width: 1024px) {
  .page__hero {
    min-height: 65svh;
  }

  .page__hero-container {
    padding: 0 3.2rem clamp(4rem, 7vw, 8rem);
  }

  .page__hero-container::before {
    left: 3.2rem;
    bottom: clamp(4rem, 7vw, 8rem);
    height: 4.8rem;
  }

  .page__hero-container::after {
    right: 3.2rem;
    bottom: clamp(4rem, 7vw, 8rem);
  }
}

@media (max-width: 768px) {
  .page__hero {
    min-height: 60svh;
  }

  .page__hero-container {
    padding: 0 2.4rem clamp(3.6rem, 7vw, 7.2rem);
  }

  .page__hero-container::before {
    left: 2.4rem;
    bottom: clamp(3.6rem, 7vw, 7.2rem);
    height: 4rem;
  }

  .page__hero-container::after {
    right: 2.4rem;
    bottom: clamp(3.6rem, 7vw, 7.2rem);
  }

  .page__hero-title {
    font-size: calc(var(--kf-fs-2xl) * 0.8);
  }

  .page__hero-title.word--main {
    -webkit-text-stroke: 1.2px solid var(--kf-white-2);
  }
}

@media (max-width: 480px) {
  .page__hero {
    min-height: 55svh;
  }

  .page__hero-container {
    padding: 0 2rem clamp(3.2rem, 7vw, 6.4rem);
  }

  .page__hero-container::before {
    left: 2rem;
    bottom: clamp(3.2rem, 7vw, 6.4rem);
    height: 3.2rem;
  }

  .page__hero-container::after {
    display: none;
  }

  .page__hero-title {
    font-size: calc(var(--kf-fs-2xl) * 0.7);
  }

  .page__hero-title.word--main {
    -webkit-text-stroke: 1px solid var(--kf-white-2);
  }
}