/* Karsilama sahnesi (asansor kapisi parallax)
   Tek kaynak degisken: --door  (0 = kapali, 1 = tamamen acik)
   Bu deger ya scroll-driven animation ya da rAF dongusu ile yazilir.
   Tum hareket transform/opacity uzerinden yurutulur; layout tetiklenmez. */

.hero-track {
  --door: 0;
  --door-ease: 0;      /* yumusatilmis ilerleme, JS tarafindan yazilir */
  position: relative;
  height: 220vh;
  background: var(--brand-950);
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #04121f;
  isolation: isolate;
}

/* Kapi ardindaki sahne */

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Parallax derinligi: sahne kapidan yavas hareket eder ve hafifce acilir */
  transform: scale(calc(1.14 - 0.14 * var(--door-ease)));
  transform-origin: 50% 46%;
  will-change: transform;
}

.hero-scene__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 58% at 50% 34%, rgba(0, 149, 215, 0.30) 0%, transparent 68%),
    radial-gradient(120% 90% at 50% 108%, rgba(3, 99, 173, 0.34) 0%, transparent 62%),
    linear-gradient(178deg, #0a2f4c 0%, #062940 42%, #03151f 100%);
}

/* Kabin perspektifi: yan duvarlar ve tavan bandi */
.hero-scene__cab {
  position: absolute;
  inset: 0;
  background:
    /* tavan aydinlatma bandi */
    linear-gradient(to bottom, rgba(190, 226, 248, 0.16) 0, rgba(190, 226, 248, 0.04) 8%, transparent 14%),
    /* zemin yansimasi */
    linear-gradient(to top, rgba(120, 180, 220, 0.13) 0, transparent 22%),
    /* yan duvar panelleri */
    repeating-linear-gradient(90deg,
      transparent 0 calc(50% - 320px),
      rgba(255, 255, 255, 0.035) calc(50% - 320px) calc(50% - 319px),
      transparent calc(50% - 319px) calc(50% - 200px),
      rgba(255, 255, 255, 0.028) calc(50% - 200px) calc(50% - 199px),
      transparent calc(50% - 199px) 100%);
  opacity: calc(0.35 + 0.65 * var(--door-ease));
}

/* Kapi araligindan sizan isik: acildikca kuvvetlenir */
.hero-scene__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(320px, 46vw, 760px);
  height: 120vh;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(120, 200, 255, 0.28), transparent 76%);
  opacity: calc(0.25 + 0.75 * var(--door-ease));
  filter: blur(18px);
  pointer-events: none;
}

/* Icerik */

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  pointer-events: none;
  /* Kapi yariya gelmeden gorunmez; sonra netlesip yukari suzulur */
  opacity: clamp(0, calc((var(--door-ease) - 0.34) * 2.6), 1);
  transform: translate3d(0, calc((1 - var(--door-ease)) * 34px), 0);
  will-change: opacity, transform;
}

.hero-content .wrap { width: 100%; }
.hero-content a { pointer-events: auto; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: var(--sp-5);
  padding: 0.45rem 1.1rem 0.45rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
}

.hero-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(53, 179, 232, 0.22);
}

.hero-title {
  max-width: 17ch;
  color: #fff;
  font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem);
  font-weight: 750;
  letter-spacing: -0.038em;
  line-height: 1.03;
  text-shadow: 0 2px 40px rgba(2, 18, 32, 0.5);
}

.hero-lead {
  max-width: 54ch;
  margin-top: var(--sp-5);
  font-size: var(--step-1);
  line-height: 1.6;
  color: rgba(230, 241, 250, 0.84);
}

.hero-actions { margin-top: var(--sp-7); }

/* Kapilar */

.hero-doors {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.4%;   /* hafif bindirme: acilmadan once ortada bosluk gorunmesin */
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
}

/* Ana hareket: kanatlar zit yonlerde kayar */
.door--left {
  left: 0;
  transform: translate3d(calc(var(--door) * -101%), 0, 0);
  box-shadow: 14px 0 40px -10px rgba(0, 0, 0, 0.55);
}

.door--right {
  right: 0;
  transform: translate3d(calc(var(--door) * 101%), 0, 0);
  box-shadow: -14px 0 40px -10px rgba(0, 0, 0, 0.55);
}

/* Fircalanmis paslanmaz celik yuzey */
.door__skin {
  position: absolute;
  inset: 0;
  background:
    /* ince dikey tanecik */
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.055) 0 1px,
      rgba(0, 0, 0, 0.045) 1px 2px,
      transparent 2px 3px),
    /* genis panel bolumleri */
    repeating-linear-gradient(90deg,
      transparent 0 118px,
      rgba(0, 0, 0, 0.14) 118px 119px,
      rgba(255, 255, 255, 0.05) 119px 120px,
      transparent 120px 238px),
    /* dikey ton gecisi */
    linear-gradient(to bottom,
      #4c5763 0%,
      #79848f 14%,
      #5d6874 34%,
      #7f8a95 54%,
      #545f6b 78%,
      #363f49 100%),
    /* yanal metal parlaklik */
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 22%,
      rgba(255, 255, 255, 0.09) 46%,
      transparent 66%,
      rgba(255, 255, 255, 0.06) 100%);
  background-blend-mode: overlay, normal, normal, screen;
}

.door--left .door__skin { background-position: right center; }

/* Kapanan kenardaki koyu kenar profili */
.door--left .door__skin::after,
.door--right .door__skin::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.42));
}

.door--left .door__skin::after { right: 0; }
.door--right .door__skin::after {
  left: 0;
  right: auto;
  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.42));
}

/* Kayarken kanat uzerinden gecen isik huzmesi */
.door__sheen {
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(255, 255, 255, 0.16) 47%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.16) 53%,
    transparent 62%);
  transform: translate3d(calc(-30% + var(--door-ease) * 120%), 0, 0);
  opacity: calc(0.35 + 0.5 * (1 - var(--door-ease)));
  pointer-events: none;
}

/* Kanat uzerine kazinmis marka */
.door__etch {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  opacity: calc(0.5 * (1 - var(--door-ease) * 1.6));
  transition: opacity 120ms linear;
}

/* Iki kanat da yatay marka tasidigi icin kanat ortasina hizalanir */
.door--left .door__etch,
.door--right .door__etch {
  left: 50%;
  translate: -50% -50%;
}

/* Sol kanatta Vita Elevator, sagda GiantKONE; iki marka ayni genislikte durur.
   Ust sinir GiantKONE dosyasinin 199px genisligine gore secildi. */
.door__etch img {
  display: block;
  width: clamp(150px, 17vw, 260px);
  height: auto;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.4));
  opacity: 0.55;
}

/* Kapilarin birlesme yeri: koyu ince yuva */
.door-seam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  translate: -50% 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5));
  opacity: calc(1 - var(--door) * 5);
}

/* Kasa */

.hero-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Yan sove: kapi acilinca kanatlarin gizlendigi koyu boslugu kapatir */
.hero-frame__jamb {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(18px, 2.4vw, 44px);
  background: linear-gradient(to right, #171e26 0%, #2c343d 42%, #3c454f 72%, #10161d 100%);
}

.hero-frame__jamb--l { left: 0; }
.hero-frame__jamb--r { right: 0; transform: scaleX(-1); }

.hero-frame__lintel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--header-h) + 26px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  background: linear-gradient(to bottom, #131a22 0%, #232b34 58%, #10161d 100%);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
}

/* Kat gostergesi paneli */
.indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.9rem;
  border-radius: 5px;
  background: #060a0e;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.9);
}

.indicator__arrow {
  display: grid;
  place-items: center;
  color: #3ddc84;
  filter: drop-shadow(0 0 6px rgba(61, 220, 132, 0.6));
  animation: indicator-pulse 1.6s var(--ease) infinite;
}

.indicator__arrow svg { width: 15px; height: 15px; stroke-width: 2.6; }

@keyframes indicator-pulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50%      { opacity: 0.45; transform: translateY(-2px); }
}

/* Hedef kata varildi: ok sabitlenip soner, rakam vurgulanir */
.indicator.is-arrived .indicator__arrow {
  animation: none;
  opacity: 0.28;
  filter: none;
}

.indicator.is-arrived .indicator__digits {
  color: #3ddc84;
  text-shadow: 0 0 12px rgba(61, 220, 132, 0.6);
}

.indicator__digits {
  font-family: var(--font-num);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: #ff8b3d;
  text-shadow: 0 0 10px rgba(255, 139, 61, 0.55);
}

/* Cagri butonu paneli */
.call-panel {
  position: absolute;
  right: clamp(0.9rem, 3.2vw, 3.4rem);
  top: 50%;
  translate: 0 -50%;
  display: grid;
  gap: 0.55rem;
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  background: linear-gradient(160deg, #2b333c, #1a2027);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.9);
  opacity: calc(1 - var(--door-ease) * 1.5);
}

.call-panel__btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #10161d;
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.32);
}

.call-panel__btn svg { width: 13px; height: 13px; stroke-width: 2.6; }

.call-panel__btn.is-lit {
  color: #ffb066;
  border-color: rgba(255, 176, 102, 0.45);
  box-shadow: 0 0 12px rgba(255, 160, 80, 0.35), inset 0 0 8px rgba(255, 160, 80, 0.18);
}

@media (max-width: 720px) { .call-panel { display: none; } }

/* Kaydir ipucu */

.hero-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 3vh, 2.75rem);
  z-index: 5;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  opacity: calc(1 - var(--door-ease) * 3);
  transition: opacity 200ms linear;
}

.hero-hint__rail {
  position: relative;
  display: block;
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.hero-hint__rail i {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  translate: -50% 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  animation: hint-drop 1.9s var(--ease) infinite;
}

@keyframes hint-drop {
  0%   { transform: translateY(0); opacity: 0; }
  22%  { opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* Ilerleme degiskeni */

/* --door ve --door-ease, elevator-hero.js icindeki tek bir rAF dongusunden
   yazilir. @property kaydi degerlerin sayi olarak yorumlanmasini ve GPU'da
   enterpolasyona uygun kalmasini saglar. */

@property --door {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --door-ease {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Mobil */

@media (max-width: 860px) {
  .hero-track { height: 170vh; }
  /* Kasa basligini uzat: kat gostergesi ust baslikla cakismasin */
  .hero-frame__lintel { height: calc(var(--header-h) + 46px); }
  .hero-title { max-width: 14ch; }
  .hero-lead { font-size: var(--step-0); max-width: 46ch; }
  .hero-actions { margin-top: var(--sp-6); }
  .hero-actions .btn { flex: 1 1 100%; }
  .door__etch img { width: min(70%, 180px); }
  .hero-scene { transform: scale(calc(1.08 - 0.08 * var(--door-ease))); }
}

@media (max-width: 560px) {
  .hero-track { height: 155vh; }
  .door__etch img { opacity: 0.4; }
  .hero-hint span { display: none; }
}

/* Alcak ekranlar: yatay telefon / kucuk dizustu */
@media (max-height: 620px) {
  .hero-title { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
  .hero-lead { display: none; }
  .hero-hint { display: none; }
}

/* Hareket tercihi kapali */

@media (prefers-reduced-motion: reduce) {
  .hero-track {
    height: auto;
    --door: 1;
    --door-ease: 1;
  }

  .hero-stage {
    position: relative;
    height: auto;
    min-height: 78vh;
    padding-block: calc(var(--header-h) + 3rem) 4rem;
    display: flex;
    align-items: center;
  }

  .hero-content { position: relative; inset: auto; opacity: 1; transform: none; }
  .hero-doors,
  .hero-hint,
  .hero-scene__glow { display: none; }
  .hero-frame__lintel,
  .hero-frame__jamb { display: none; }
  .indicator__arrow { animation: none; }
}

/* JS calismiyorsa kapiyi acik goster: icerik her kosulda okunabilir kalir */
html:not(.js) .hero-track { --door: 1; --door-ease: 1; }
html:not(.js) .hero-doors,
html:not(.js) .hero-hint { display: none; }