.hero,
.hero__inner,
.hero__content,
.hero__media {
  min-width: 0;
}

.hero__media {
  position: relative;
  width: 100%;
  padding-left: 0;
  overflow: visible;
  background: radial-gradient(circle at 62% 48%, rgba(40, 82, 104, 0.16) 0%, rgba(22, 53, 70, 0.07) 34%, transparent 67%);
}

/* Referanstaki ince turuncu rota izi ve konum pini. R8 sahnesinin altında kalır. */
.hero__media::before {
  content: "";
  position: absolute;
  left: 9%;
  top: 3%;
  z-index: 0;
  width: 33%;
  aspect-ratio: 1;
  border: 2px dashed rgba(255, 98, 0, 0.76);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-18deg);
  pointer-events: none;
  opacity: 0.9;
}

.hero__media::after {
  content: "";
  position: absolute;
  left: 17%;
  top: 10%;
  z-index: 0;
  width: 14px;
  height: 14px;
  background: var(--color-bg);
  border: 4px solid var(--color-orange);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 0 3px rgba(255, 98, 0, 0.10);
  pointer-events: none;
}

.hero-animated {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  background: transparent;
}

.hero-animated__canvas,
.hero-r8__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/*
 * Sahne bütünüyle imlece doğru hafifçe eğilir; katmanların kendi derinlik
 * kaymasıyla birleşince derinlik hissi çıkar. Perspektif sahnede tanımlanır,
 * eğim ise doğrudan tuvale uygulanır.
 */
.hero-r8.is-parallax { perspective: 1400px; }
.hero-r8.is-parallax .hero-r8__canvas {
  transform: rotateY(calc(var(--mx, 0) * 1.5deg)) rotateX(calc(var(--my, 0) * -1.1deg));
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

/*
 * R8 katmanlarının her biri 1536x1024 tam şeffaf tuvaldir.
 * Nihai koordinatlar PNG'nin kendi alfa tuvalinde bulunur. Bu nedenle hiçbir
 * breakpointte left/top/width ile obje bazlı yeniden yerleşim yapılmaz.
 */
.hero-r8__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  transition-property: opacity, transform;
  transition-duration: var(--hero-duration, 500ms);
  transition-delay: var(--hero-delay, 0ms);
  transition-timing-function: var(--hero-ease, cubic-bezier(.22, 1, .36, 1));
  will-change: transform, opacity;
  backface-visibility: hidden;
  filter: none !important;
}

/*
 * Başlangıç durumu geçişsiz uygulanır. Aksi hâlde is-loading eklendiğinde
 * katman kendi --hero-delay değeri kadar gecikmeyle başlangıç durumuna
 * geçiyor; en geç katmanda bu 1470 ms sürdüğü için o süre boyunca zaten
 * yerinde duruyor ve giriş sırası tamamen kayboluyordu. Gecikme yalnız
 * çıkışta, yani is-ready ile bitiş durumuna giderken çalışmalı.
 */
.hero-r8.is-loading .hero-r8__layer {
  opacity: 0;
  transform: translate3d(var(--hero-x, 0), var(--hero-y, 0), 0) scale(var(--hero-scale, .98));
  transition: none;
}

.hero-r8.is-ready .hero-r8__layer.is-loaded {
  opacity: 1;
  transform: translate3d(
    calc(var(--mx, 0) * var(--depth, 0) * 1px),
    calc(var(--my, 0) * var(--depth, 0) * .6px),
    0) scale(1);
}

/*
 * Giriş bittikten sonra imleci takip eden paralaks açılır. Giriş süreleri
 * 900 ms'ye kadar çıktığı için o değerlerle takip ağır kalır; bu durumda
 * süre kısalır ve katman gecikmeleri sıfırlanır.
 */
.hero-r8.is-parallax .hero-r8__layer {
  transition-duration: 420ms;
  transition-delay: 0ms;
}

.hero-r8.has-error .hero-r8__layer.is-loaded {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hero-r8.has-error .hero-r8__layer.is-missing {
  display: none;
}

/* Kesin Z sırası: P00 → L09 → T00 → L01 → L02 → L04 → L03 → L05 → L06 → L10 → L11 → L07 → L08 → L12 */
.hero-r8__layer--p00 { z-index: 1; }
.hero-r8__layer--l09 { z-index: 2; }
.hero-r8__layer--t00 { z-index: 3; }
.hero-r8__layer--l01 { z-index: 4; }
.hero-r8__layer--l02 { z-index: 5; }
.hero-r8__layer--l04 { z-index: 6; }
.hero-r8__layer--l03 { z-index: 7; }
.hero-r8__layer--l05 { z-index: 8; }
.hero-r8__layer--l06 { z-index: 9; }
.hero-r8__layer--l10 { z-index: 10; }
.hero-r8__layer--l11 { z-index: 11; }
.hero-r8__layer--l07 { z-index: 12; }
.hero-r8__layer--l08 { z-index: 13; }
.hero-r8__layer--l12 { z-index: 14; }

/* Kilitli masaüstü giriş animasyonları. */
.hero-r8__layer--p00 {
  /* zemin aşağıdan yükselerek oturur */
  --hero-x: 0%;
  --hero-y: 5%;
  --hero-scale: .93;
  --hero-delay: 0ms;
  --hero-duration: 700ms;
  --depth: 3;
}

.hero-r8__layer--t00 {
  /* kamyon soldan sürerek girer */
  --hero-x: -13%;
  --hero-y: 0%;
  --hero-scale: 1;
  --hero-delay: 120ms;
  --hero-duration: 900ms;
  --depth: 7;
}

.hero-r8__layer--l09 {
  /* arka grup soldan girer */
  --hero-x: -7%;
  --hero-y: 1%;
  --hero-scale: .97;
  --hero-delay: 300ms;
  --hero-duration: 700ms;
  --depth: 5;
}

.hero-r8__layer--l03 {
  /* aşağıdan yükselir */
  --hero-x: 0%;
  --hero-y: 7%;
  --hero-scale: .96;
  --hero-delay: 440ms;
  --hero-duration: 620ms;
  --depth: 13;
}

.hero-r8__layer--l02 {
  /* soldan girer */
  --hero-x: -6%;
  --hero-y: 2%;
  --hero-scale: .97;
  --hero-delay: 560ms;
  --hero-duration: 640ms;
  --depth: 11;
}

.hero-r8__layer--l01 {
  /* sağdan girer */
  --hero-x: 6%;
  --hero-y: 2%;
  --hero-scale: .97;
  --hero-delay: 680ms;
  --hero-duration: 640ms;
  --depth: 10;
}

.hero-r8__layer--l04 {
  /* yukarıdan iner */
  --hero-x: 0%;
  --hero-y: -7%;
  --hero-scale: .96;
  --hero-delay: 800ms;
  --hero-duration: 620ms;
  --depth: 12;
}

.hero-r8__layer--l05 {
  /* sağdan girer */
  --hero-x: 5%;
  --hero-y: 3%;
  --hero-scale: .95;
  --hero-delay: 920ms;
  --hero-duration: 600ms;
  --depth: 15;
}

.hero-r8__layer--l06 {
  /* yukarıdan iner */
  --hero-x: 2%;
  --hero-y: -9%;
  --hero-scale: .94;
  --hero-delay: 1030ms;
  --hero-duration: 700ms;
  --depth: 16;
}

.hero-r8__layer--l10 {
  /* aşağıdan girer */
  --hero-x: -2%;
  --hero-y: 6%;
  --hero-scale: .95;
  --hero-delay: 1140ms;
  --hero-duration: 560ms;
  --depth: 18;
}

.hero-r8__layer--l11 {
  /* sağdan girer */
  --hero-x: 5%;
  --hero-y: 2%;
  --hero-scale: .96;
  --hero-delay: 1230ms;
  --hero-duration: 560ms;
  --depth: 19;
}

.hero-r8__layer--l07 {
  /* aşağıdan girer */
  --hero-x: 0%;
  --hero-y: 6%;
  --hero-scale: .94;
  --hero-delay: 1310ms;
  --hero-duration: 560ms;
  --depth: 21;
}

.hero-r8__layer--l08 {
  /* büyüyerek belirir */
  --hero-x: 0%;
  --hero-y: 2%;
  --hero-scale: .88;
  --hero-delay: 1390ms;
  --hero-duration: 520ms;
  --depth: 23;
}

.hero-r8__layer--l12 {
  /* soldan girer */
  --hero-x: -5%;
  --hero-y: 3%;
  --hero-scale: .95;
  --hero-delay: 1470ms;
  --hero-duration: 560ms;
  --depth: 25;
}

/* Eski tek-parça hero görseli yerine yalnız R8 kullanılır. */
.hero__picture,
.hero__image {
  display: none !important;
}

/* Masaüstü referansında rozet platformun sağ ön kenarına yakın durur. */
@media (min-width: 992px) {
  .hero__badge {
    right: 1.5%;
    bottom: 1%;
  }
}

@media (max-width: 767px) {
  .hero__media {
    background: radial-gradient(circle at 56% 52%, rgba(40, 82, 104, 0.13) 0%, transparent 66%);
  }

  /* Tam 3:2 tuval korunur; yalnız tuvalin altındaki şeffaf güvenli alan layout'tan geri alınır. */
  .hero-animated {
    margin-bottom: -28px;
  }

  /* Gerçek carousel olmadığı için dekoratif slider noktaları mobilde gösterilmez. */
  .hero__dots {
    display: none !important;
  }

  .hero__media::before {
    left: 7%;
    top: 5%;
    width: 35%;
    border-width: 1.5px;
  }

  .hero__media::after {
    left: 16%;
    top: 11%;
    width: 11px;
    height: 11px;
    border-width: 3px;
  }

  /* Mobilde aynı kompozisyon daha hızlı ve akıcı tamamlanır. */
  .hero-r8__layer--p00 { --hero-delay: 0ms; --hero-duration: 360ms; }
  .hero-r8__layer--t00 { --hero-delay: 80ms; --hero-duration: 520ms; }
  .hero-r8__layer--l09 { --hero-delay: 200ms; --hero-duration: 440ms; }
  .hero-r8__layer--l03 { --hero-delay: 280ms; --hero-duration: 400ms; }
  .hero-r8__layer--l02 { --hero-delay: 360ms; --hero-duration: 430ms; }
  .hero-r8__layer--l01 { --hero-delay: 440ms; --hero-duration: 460ms; }
  .hero-r8__layer--l04 { --hero-delay: 520ms; --hero-duration: 400ms; }
  .hero-r8__layer--l05 { --hero-delay: 600ms; --hero-duration: 360ms; }
  .hero-r8__layer--l06 { --hero-delay: 660ms; --hero-duration: 360ms; }
  .hero-r8__layer--l10 { --hero-delay: 720ms; --hero-duration: 340ms; }
  .hero-r8__layer--l11 { --hero-delay: 780ms; --hero-duration: 340ms; }
  .hero-r8__layer--l07 { --hero-delay: 840ms; --hero-duration: 340ms; }
  .hero-r8__layer--l08 { --hero-delay: 900ms; --hero-duration: 320ms; }
  .hero-r8__layer--l12 { --hero-delay: 960ms; --hero-duration: 340ms; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-r8.is-parallax .hero-r8__canvas {
    transform: none !important;
    transition: none !important;
  }

  .hero-r8__layer {
    transform: none !important;
    transition: none !important;
  }

  .hero-r8.is-ready .hero-r8__layer.is-loaded {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-r8.is-loading .hero-r8__layer {
    opacity: 1 !important;
    transform: none !important;
  }
}