/* ==========================================================
   Bozankaya — Yazı Tipi (Geist)
   Sitedeki HER metin (hero başlık, section başlığı, alt başlık, kart
   başlığı, gövde metni, küçük açıklamalar, buton, menü, sayılar/
   istatistikler...) bu aileyi kullanır — body üzerinden
   tüm sayfaya miras kalır. Variable font tek dosyada 100-900 arası
   TÜM ağırlıkları içerir, bu yüzden statik ağırlık dosyalarına gerek yok.
   ========================================================== */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist/Geist-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================
   Bozankaya — Design Tokens
   ========================================================== */
:root {
  --color-blue: #2f7dff;
  --color-white: #ffffff;
  --color-gray-50: #f6f8fa;
  --color-text: #16202c;
  --color-text-muted: #5b6672;

  --radius-full: 999px;
  /* Header kaldırıldı. Eski yerleşim hesapları bu nötr değer üzerinden
     üst boşluk üretmeden çalışmaya devam eder. */
  --header-height: 0px;

  --shadow-card: 0 10px 30px rgba(15, 27, 45, 0.08);

  --transition-fast: 180ms ease;

  --font-family-base: "Geist", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Ağırlık ölçeği — kategoriye göre kullanım:
     regular   -> gövde metni, küçük açıklamalar
     medium    -> menü, ok/link etiketleri
     semibold  -> buton, alt başlık
     bold      -> kart başlığı, section başlığı, header
     extrabold -> hero başlığı, sayılar/istatistikler */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  background-color: var(--color-gray-50);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
}

/* ==========================================================
   Hero — arka plan görseli + üzerine bindirilen 3 kart katmanı
   ========================================================== */
.hero {
  position: relative;
  max-width: 1672px;
  margin: 0 auto;
}

.hero__image {
  width: 100%;
  height: auto;
}

.hero__hit-layer {
  position: absolute;
  inset: 0;
}

/* Sahnenin ortasındaki marka bloğu (logo + çizgi + etiket) — kartların (bkz.
   .hero__hit-area top:31.35%) hemen üstündeki boş alanda, referans görseldeki
   konumla aynı. Logo dosyası zaten bizim mavimizle (--color-blue) geliyor,
   ayrıca bir renk filtresi gerekmiyor. */
.hero__brand {
  position: absolute;
  left: 50%;
  top: 8.2%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  /* Genişlik burada, kartlarla (.hero__hit-area) AYNI mantıkla .hero'nun
     yüzdesi olarak tanımlanır — çocuklardaki % değerleri (örn. logo
     width:100%) bu genişliğe göre hesaplanır. Bu satır olmadan absolute+flex
     kutunun genişliği "içeriğe göre" belirsiz kalıyor, içindeki %'ler de
     yanlış (çok küçük) bir değere oturuyordu. */
  width: 13%;
  max-width: 210px;
}

.hero__brand-logo {
  width: 100%;
  height: auto;
  display: block;
}

.hero__brand-line {
  width: 44px;
  height: 2px;
  margin-top: 12px;
  background: var(--color-blue);
}

.hero__brand-tagline {
  margin-top: 10px;
  font-size: clamp(0.62rem, 0.85vw, 0.82rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hero__hit-area {
  position: absolute;
  top: 31.35%;
  height: 52.07%;
  width: 19.74%;
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 0;
  margin: 0;
  z-index: 1;
  transition: z-index var(--transition-fast);
}

.hero__hit-area--projects {
  left: 19.44%;
}

.hero__hit-area--key-figures {
  left: 40.07%;
}

.hero__hit-area--facility {
  left: 60.71%;
}

.hero__hit-area:hover,
.hero__hit-area.is-selected {
  z-index: 2;
}

/* Ok tuşlarıyla programatik odak taşındığında tarayıcının kart kutusunu
   çevreleyen dikdörtgen focus çerçevesi görünmesin. .is-selected zaten
   slide-up + glow ile hangi kartın seçili olduğunu açıkça gösterir. */
.hero__hit-area:focus-visible {
  z-index: 2;
  outline: none;
}

/* Kartın kendi görseli — SADECE imleç üzerindeyken (hover) veya klavyenin sağ/sol
   oklarıyla seçiliyken (is-selected) öne çıkar ve etrafında mavi hüzme belirir.
   Bu iki durumun DIŞINDA (hover yok, seçili değil) tamamen düz ve hüzmesiz kalır. */
.hero__card-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px;
  pointer-events: none;
  transform: translateY(0) scale(1);
  filter: brightness(0.76) contrast(1.16) saturate(0.8) hue-rotate(-4deg) drop-shadow(0 0 0 rgba(47, 125, 255, 0)) drop-shadow(0 0 0 rgba(15, 23, 42, 0));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Key Figures'a özel alt katman — yıldızlı zemin (en altta, tüm kartı
   kaplar) ve alt köşe/üçgen paneli (en üstte, metnin arkasında). Diğer iki
   kart tek düz fotoğraf kullandığı için bunlara ihtiyaç duymuyor. */
/* Küre gibi hover'da/is-selected'da kalkıp hüzmelenir — küreden BAĞIMSIZ,
   diğer iki karttaki (tek düz fotoğraf) SLIDE UP + GLOW UP ile aynı dilde,
   böylece küre + zemin + alt panel TEK bir kart gibi birlikte kalkar. */
.hero__card-bg,
.hero__card-triangle {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(0) scale(1);
  filter: brightness(0.76) contrast(1.16) saturate(0.8) hue-rotate(-4deg) drop-shadow(0 0 0 rgba(47, 125, 255, 0)) drop-shadow(0 0 0 rgba(15, 23, 42, 0));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__card-bg {
  inset: 0;
  height: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover;
  pointer-events: none;
}

.hero__card-triangle {
  bottom: 0;
  height: auto;
  display: block;
  pointer-events: none;
}

/* Hover VEYA klavye ok tuşlarıyla seçili (is-selected) — ikisi de aynı
   kalkma/hüzme efektini tetikler (bkz. script.js highlightCard/stepSection). */
.hero__hit-area:hover .hero__card-visual,
.hero__hit-area.is-selected .hero__card-visual,
.hero__hit-area:hover .hero__card-bg,
.hero__hit-area.is-selected .hero__card-bg,
.hero__hit-area:hover .hero__card-triangle,
.hero__hit-area.is-selected .hero__card-triangle {
  transform: translateY(-14px) scale(1.035);
  filter: brightness(0.84) contrast(1.14) saturate(0.9) hue-rotate(-4deg) drop-shadow(0 0 28px rgba(47, 125, 255, 0.65)) drop-shadow(0 16px 22px rgba(15, 23, 42, 0.28));
}

/* Key Figures kartındaki küre — sayfa yüklenirken bir giriş animasyonu YOK
   (iptal edildi); küre her zaman sabit/dinlenme halinde görünür. Karta hover
   VEYA klavyeyle seçilince standart kalkma/hüzme efektine EK olarak çok
   hafif bir saat yönü dönüş yapıp öyle kalır (bkz. referans görseldeki
   yeşil ok). */
/* Küre diğer kartlardaki fotoğraftan biraz daha büyük dursun diye
   dinlenme halinde de hafif scale — hover/is-selected'daki kalkma ölçeğine
   (1.035) bu taban çarpılarak eklendi (1.08*1.035≈1.12) ki lift hissi aynı
   ORANDA kalsın. */
.hero__hit-area--key-figures .hero__card-visual {
  transform: scale(1.08);
}

.hero__hit-area--key-figures:hover .hero__card-visual,
.hero__hit-area--key-figures.is-selected .hero__card-visual {
  transform: translateY(-14px) scale(1.12) rotate(5deg);
}

/* Kürenin üzerine bindirilen zaman çizelgesi çizgisi (bkz. index.html
   .hero__kf-line) — varsayılanda TAMAMEN çizili/sabit durur ("sabit çizili").
   Karta hover geldiğinde sıfırlanıp baştan çizilir; hover biterse (veya
   yarıda kesilirse) aşağıdaki temel kural devreye girip yine tam-çizili
   hale döner. */
.hero__kf-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.hero__kf-line-path {
  fill: none;
  stroke: var(--color-blue);
  /* curved_arrow.png referans alındı ama o kalın bir doluydu — burada ince
     tutuluyor. */
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  opacity: 0.9;
  /* Çok hafif neon parıltı — iki katman: dar/keskin bir çekirdek + biraz
     daha geniş/soluk bir dış hâle. Abartılı olmasın diye yarıçap/opaklık
     düşük tutuldu. */
  filter: drop-shadow(0 0 1.5px rgba(47, 125, 255, 0.9)) drop-shadow(0 0 4px rgba(47, 125, 255, 0.45));
}

.hero__hit-area--key-figures:hover .hero__kf-line-path,
.hero__hit-area--key-figures.is-selected .hero__kf-line-path {
  animation: kfLineDraw 900ms cubic-bezier(0.45, 0, 0.2, 1);
}

/* "from" açıkça 100 (tam gizli) veriliyor — aksi halde tarayıcı başlangıç
   değerini temel kuraldaki 0'dan (tam çizili) alır ve görünür bir çizim
   hareketi OLMAZ. Bu sayede hover'a her girişte gerçekten "sıfırlanıp
   baştan çizilir". */
@keyframes kfLineDraw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.hero__kf-dot {
  fill: var(--color-blue);
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 1.5px rgba(47, 125, 255, 0.9)) drop-shadow(0 0 4px rgba(47, 125, 255, 0.45));
}

/* Her nokta, hover'da çizginin o noktaya ULAŞTIĞI ana denk gelen gecikmeyle
   yeniden "pop" eder (900ms'lik çizim süresinin ~%18/%36/%54/%72/%90'ı). */
.hero__hit-area--key-figures:hover .hero__kf-dot,
.hero__hit-area--key-figures.is-selected .hero__kf-dot {
  animation: kfDotPop 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero__hit-area--key-figures:hover .hero__kf-dot--1,
.hero__hit-area--key-figures.is-selected .hero__kf-dot--1 {
  animation-delay: 162ms;
}
.hero__hit-area--key-figures:hover .hero__kf-dot--2,
.hero__hit-area--key-figures.is-selected .hero__kf-dot--2 {
  animation-delay: 324ms;
}
.hero__hit-area--key-figures:hover .hero__kf-dot--3,
.hero__hit-area--key-figures.is-selected .hero__kf-dot--3 {
  animation-delay: 486ms;
}
.hero__hit-area--key-figures:hover .hero__kf-dot--4,
.hero__hit-area--key-figures.is-selected .hero__kf-dot--4 {
  animation-delay: 648ms;
}
.hero__hit-area--key-figures:hover .hero__kf-dot--5,
.hero__hit-area--key-figures.is-selected .hero__kf-dot--5 {
  animation-delay: 810ms;
}

@keyframes kfDotPop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.hero__kf-arrow {
  fill: var(--color-blue);
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 1.5px rgba(47, 125, 255, 0.9)) drop-shadow(0 0 4px rgba(47, 125, 255, 0.45));
}

/* Çizgi tam bittiği an (hover/seçim başlangıcından 900ms sonra) yeniden "pop" eder. */
.hero__hit-area--key-figures:hover .hero__kf-arrow,
.hero__hit-area--key-figures.is-selected .hero__kf-arrow {
  animation: kfDotPop 320ms 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Kartın altındaki beyaz alanda gerçek (görsele gömülü olmayan) başlık +
   açıklama — görsel hover'da yukarı kayınca (translateY) bu da AYNI şekilde
   kaysın diye aynı transition/transform uygulanıyor. Zemin düz/açık renk
   olduğu için (fotoğraf değil) ayrıca bir metin gölgesine gerek yok. */
.hero__card-text {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 72%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__hit-area:hover .hero__card-text,
.hero__hit-area.is-selected .hero__card-text {
  transform: translateY(-7px) scale(1.025);
}

.hero__card-title {
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-bold);
  color: #102238;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hero__card-desc {
  margin-top: 8px;
  font-size: clamp(0.66rem, 0.85vw, 0.78rem);
  line-height: 1.45;
  color: #3a4c61;
  max-width: 24ch;
}

/* Key Figures kartının alt üçgeni koyu olduğu için bu kartta açık metin kullanılır. */
.hero__hit-area--key-figures .hero__card-title {
  color: #f7fbff;
  text-shadow: 0 1px 3px rgba(2, 8, 18, 0.72);
}

.hero__hit-area--key-figures .hero__card-desc {
  color: rgba(235, 244, 255, 0.88);
  text-shadow: 0 1px 3px rgba(2, 8, 18, 0.78);
}

/* Kartın alt kısmındaki yönlendirme oku — önceden tamamen şeffaftı (görselde
   de bir ok çizili değildi, yani hiç görünmüyordu). Artık .hero__nav'daki ile
   AYNI dilde (beyaz daire + mavi kenarlık + mavi ok) gerçek bir CSS ikonu. */
.hero__card-arrow {
  position: absolute;
  top: 77.36%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(224, 238, 255, 0.88));
  border: 1px solid rgba(47, 125, 255, 0.72);
  color: var(--color-blue);
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(15, 32, 52, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 4px rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(12px);
  transition: box-shadow 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease, color 240ms ease, border-color 240ms ease;
}

.hero__card-arrow > span {
  width: 11px;
  height: 11px;
  font-size: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__card-arrow--projects {
  left: 29.31%;
}

.hero__card-arrow--key-figures {
  left: 49.94%;
}

.hero__card-arrow--facility {
  left: 70.57%;
}

.hero__card-arrow:hover,
.hero__card-arrow:focus-visible {
  background: linear-gradient(145deg, #3f8cff, #176ee8);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(47, 125, 255, 0.18), 0 0 28px rgba(47, 125, 255, 0.58), 0 16px 30px rgba(15, 32, 52, 0.26);
  transform: translate(-50%, -50%) scale(1.08);
  outline: none;
}

.hero__hit-layer:has(.hero__hit-area--projects:hover) .hero__card-arrow--projects,
.hero__hit-layer:has(.hero__hit-area--projects.is-selected) .hero__card-arrow--projects,
.hero__hit-layer:has(.hero__hit-area--key-figures:hover) .hero__card-arrow--key-figures,
.hero__hit-layer:has(.hero__hit-area--key-figures.is-selected) .hero__card-arrow--key-figures,
.hero__hit-layer:has(.hero__hit-area--facility:hover) .hero__card-arrow--facility,
.hero__hit-layer:has(.hero__hit-area--facility.is-selected) .hero__card-arrow--facility {
  background: linear-gradient(145deg, #3f8cff, #176ee8);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(47, 125, 255, 0.16), 0 0 26px rgba(47, 125, 255, 0.52), 0 14px 28px rgba(15, 32, 52, 0.24);
  transform: translate(-50%, -50%) scale(1.06);
}

.hero__hit-layer:has(.hero__hit-area--projects:hover) .hero__card-arrow--projects > span,
.hero__hit-layer:has(.hero__hit-area--projects.is-selected) .hero__card-arrow--projects > span,
.hero__hit-layer:has(.hero__hit-area--key-figures:hover) .hero__card-arrow--key-figures > span,
.hero__hit-layer:has(.hero__hit-area--key-figures.is-selected) .hero__card-arrow--key-figures > span,
.hero__hit-layer:has(.hero__hit-area--facility:hover) .hero__card-arrow--facility > span,
.hero__hit-layer:has(.hero__hit-area--facility.is-selected) .hero__card-arrow--facility > span {
  transform: translateX(4px) rotate(45deg);
}

@media (max-width: 600px) {
  .hero__card-arrow {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .hero__card-desc {
    display: none;
  }
}

/* Hero üzerinde her zaman görünen sağ/sol navigasyon okları */
.hero__nav {
  --nav-base-transform: translateY(-50%);
  position: absolute;
  top: 57.4%;
  transform: var(--nav-base-transform);
  z-index: 2;
  isolation: isolate;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(47, 125, 255, 0.72);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 238, 255, 0.82));
  color: var(--color-blue);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: 0 14px 34px rgba(15, 32, 52, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 5px rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(12px);
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__nav::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(47, 125, 255, 0.24);
}

.hero__nav > span {
  display: block;
  width: 12px;
  height: 12px;
  font-size: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__nav--prev > span {
  transform: rotate(-135deg) translate(-1px, 1px);
}

.hero__nav--next > span {
  transform: rotate(45deg) translate(-1px, 1px);
}

.hero__nav:hover,
.hero__nav:focus-visible {
  background: linear-gradient(145deg, #3f8cff, #176ee8);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(47, 125, 255, 0.18), 0 0 32px rgba(47, 125, 255, 0.6), 0 18px 34px rgba(15, 32, 52, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: var(--nav-base-transform) scale(1.08);
}

.hero__nav:focus-visible {
  outline: none;
}

.hero__nav--prev {
  left: 6%;
}

.hero__nav--next {
  right: 6%;
}

@media (max-width: 600px) {
  main {
    min-height: 100svh;
  }

  .hero {
    top: 50svh;
    transform: translateY(-50%);
  }

  .hero__nav {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .hero__nav--prev {
    left: 2%;
  }

  .hero__nav--next {
    right: 2%;
  }

  /* Dar ekranda hero'nun kendisi çok kısa (sabit en-boy oranı yüzünden) —
     logo+çizgi+etiketin tümü kartların üstüne sığmıyor. Sadece küçük bir
     logo işareti bırakılır, çizgi/etiket gizlenir. */
  .hero__brand {
    top: 4%;
  }

  .hero__brand-logo {
    width: 60px;
    max-width: none;
  }

  .hero__brand-line,
  .hero__brand-tagline {
    display: none;
  }
}

/* ==========================================================
   Sub Panel — script.js tarafından doldurulan tam ekran içerik katmanı
   ========================================================== */
/* Panel artık sayfanın devamı değil, TAM EKRAN bir "sonraki sayfa" katmanı —
   önceden sadece aşağı kaydırılan bir bölümdü; bu yüzden karta tıklayınca
   hero hâlâ görünür kalıp "iki sayfa arasında" kalmış gibi bir izlenim
   oluşuyordu. Artık position:fixed + tüm ekranı kaplayan bir katman olduğu için
   hero anında tamamen gizleniyor, gerçek bir sayfa geçişi hissi veriyor. */
/* overflow:hidden (auto DEĞİL) — panel her zaman ekrana TAM oturur, aşağı/yukarı
   kaydırma hiç gerekmez (arka plan görseli aşağıda object-fit:cover ile ekranın
   gerçek en-boy oranına göre kırpılıp tam dolduruyor, taşma olmuyor). */
.subpanel {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 50;
  overflow: hidden;
  background: var(--color-gray-50);
}

/* Projects artık ana sayfadır. Eski giriş/header sahnesi DOM'da yalnızca
   eski kod bağlantılarının güvenli kalması için tutulur ve hiçbir koşulda
   yer kaplamaz; tam ekran içerik y=0 noktasından başlar. */
.hero,
.hero[hidden] {
  display: none !important;
}

.subpanel[hidden] {
  display: none;
}

/* Kart dolgusu/kenar boşluğu YOK — arka plan görseli açılan sayfaya tam
   otursun diye .subpanel__inner artık sade bir kapsayıcı, kendi görseli
   (.subpanel__screen img) doğrudan panelin üst-sol köşesinden başlıyor. */
.subpanel__inner {
  position: relative;
  height: 100%;
}

/* Sağ/sol navigasyonda yön farkındalıklı geçiş animasyonu */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Bir karta tıklayıp YENİ bir sayfaya geçerken: sayfa altan hafifçe büyük başlayıp
   (transform-origin: bottom) küçülerek/yerine oturarak gelir — "scale down from bottom". */
@keyframes scaleDownFromBottom {
  from {
    opacity: 0;
    transform: scale(1.08) translateY(26px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.subpanel__inner.anim-next {
  animation: slideInFromRight 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.subpanel__inner.anim-prev {
  animation: slideInFromLeft 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.subpanel__inner.anim-scale-down {
  transform-origin: bottom center;
  animation: scaleDownFromBottom 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Tüm alt ekranlarda sol üstte küçük sayfa yolu. Büyük "Geri" butonunun
   yerini alır; ara seviyeler doğrudan tıklanabilir. */
.subpanel__breadcrumb {
  position: absolute;
  top: calc(var(--header-height) + 12px);
  left: clamp(20px, 2.4vw, 40px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #304155;
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.96), 0 0 5px rgba(255, 255, 255, 0.88);
}

.subpanel__breadcrumb-link {
  appearance: none;
  border: 0;
  padding: 3px 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.subpanel__breadcrumb-link:hover,
.subpanel__breadcrumb-link:focus-visible {
  color: var(--color-blue);
  transform: translateY(-1px);
  outline: none;
}

.subpanel__breadcrumb-home {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
}

.subpanel__breadcrumb-home svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.subpanel__breadcrumb-separator {
  color: rgba(48, 65, 85, 0.62);
}

.subpanel__breadcrumb-current {
  color: var(--color-blue);
  font-weight: var(--fw-semibold);
}

.subpanel:focus-visible {
  outline: none;
}

/* Tasarlanmış gerçek ekran görseli (örn. Projects) için — panelin tamamını
   (100vw x 100vh) kaplar. object-fit:cover ile görsel, ekranın gerçek en-boy
   oranı ne olursa olsun bozulmadan (gerilmeden) ekranı tam doldurur, taşıp
   kaydırmaya yol açmaz. Hotspot'lar (left/top/width/height %) bu kapsayıcıya
   göre konumlanır. */
.subpanel__screen {
  position: absolute;
  inset: 0;
}

/* SADECE doğrudan çocuk (arka plan görseli) — > kombinatörü olmadan bu kural
   içerideki hotspot butonlarına gömülü .screen-card-visual
   görsellerini de (yanlışlıkla, daha yüksek özgüllükle) eziyor, height:auto gibi
   kendi kurallarını geçersiz kılıp oranlarını bozuyordu. */
.subpanel__screen > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Header'dan ayrılmış katman (örn. tramvay) — arka plan hiç değişmeden kalır,
   bu katman rayların üzerinden sayfanın ÜSTÜNE doğru ayrı bir animasyonla gelir. */
@keyframes headerLayerArrive {
  0% {
    opacity: 0;
    transform: translateX(90px) scale(0.85);
    filter: blur(3px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

.subpanel__screen img.screen-header-layer {
  position: absolute;
  width: auto;
  height: auto;
  z-index: 2;
  border-radius: 0;
  pointer-events: none;
  transform-origin: right center;
  animation: headerLayerArrive 900ms 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ==========================================================
   Key Figures "yörünge sistemi" — dönen küre + mavi halka + istatistik
   rozetleri, ekranın tam ortasına gelen KARE bir koordinat alanı içinde
   (aspect-ratio:1) konumlanır. Tüm iç öğeler bu karenin yüzdesiyle
   hizalandığı için viewport oranı ne olursa olsun simetri bozulmaz.
   ========================================================== */
.keyfigure-orbit-system {
  position: absolute;
  /* Başlangıçta ortada (%50) — ilk rozete tıklanana kadar. bkz. .is-revealed
     ve subpanelInner click listener (ilk tıklamada bu sınıf eklenir). */
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  /* vmin yerine vw/vh ayrı ayrı sınırlanır: genişlik her zaman sağdaki
     pencereye asla taşmayacak şekilde viewport GENİŞLİĞİNE bağlı kalır
     (dar viewport'larda vmin tek başına bunu garanti edemiyordu). */
  width: clamp(320px, min(46vw, 64vh), 740px);
  aspect-ratio: 1 / 1;
  transition: left 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.keyfigure-orbit-system.is-revealed {
  left: 29%;
}

.keyfigure-orbit-system .earth-globe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  transform: translate(-50%, -50%);
  /* Key Figures ekranına her girişte (bkz. applyState -> subpanelInner
     yeniden yazılır) küre kendi merkezinden küçük başlayıp dönüş yapmadan
     yavaşça doğal boyutuna oturur. Sürekli harita dönüşü ve sürükleme bundan
     bağımsız olarak .earth-globe__map üzerinde JS ile devam eder. Rozete
     tıklanınca yalnızca class eklenir (yeniden render olmaz), bu yüzden giriş
     animasyonu rozet tıklamalarında TEKRARLAMAZ. */
  animation: globeInflate 1450ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes globeInflate {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Küre etrafındaki mavi yörünge halkası — bkz. script.js ORBIT_RING_DIAMETER
   (62) ile aynı çapta olmalı, aksi hâlde bağlantı çizgileri halkadan değil
   boşluktan başlıyormuş gibi görünür. */
.keyfigure-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--color-blue);
  opacity: 0.65;
  pointer-events: none;
}

/* Halkadan her rozete uzanan kısa bağlantı çizgisi + halka üzerindeki nokta —
   masaüstündeki referans key figures görselindeki gibi: ince açık-mavi çizgi
   + çizginin halkayla kesiştiği yerde belirgin, parlak mavi bir nokta.
   left/top/width/transform script.js tarafından hesaplanıp inline yazılır
   (bkz. renderOrbitSystem) — sabit uzunluk burada tanımlanamaz çünkü açıya
   göre değişir. */
.keyfigure-connector {
  position: absolute;
  height: 1.5px;
  background: var(--color-blue);
  opacity: 0.65;
  transform-origin: 0 50%;
  pointer-events: none;
}

.keyfigure-connector__dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-blue);
  box-shadow: 0 0 0 4px rgba(47, 125, 255, 0.18);
  transform: translate(-50%, -50%);
}

/* İmleç/dokunmatikle sınırsız döndürülebilir (bkz. script.js initGlobeRotation)
   — bu yüzden artık pointer-events:auto ve bir "grab" imleci var. Dönüş
   (otomatik VE sürüklemeyle) artık CSS @keyframes ile değil, doğrudan
   .earth-globe__map'e yazılan inline transform ile bir requestAnimationFrame
   döngüsünden sürülüyor (aksi hâlde JS sürüklemeyi CSS animasyonuyla
   uyumlu şekilde ele geçiremezdi). */
.earth-globe {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  z-index: 1;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #eef1f5 45%, #d4dce4 100%);
  box-shadow:
    inset -18px -18px 50px rgba(15, 23, 42, 0.18),
    inset 12px 12px 26px rgba(255, 255, 255, 0.7),
    0 18px 36px rgba(15, 23, 42, 0.14);
}

.earth-globe.is-dragging {
  cursor: grabbing;
}

.earth-globe__map {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  background-image: url("../assets/images/key-figures/earth-real-dot-map.png?v=3");
  /* SVG'nin tek tekrar periyodu küre çapına eşlenir. Böylece katman fiziksel
     olarak kenardan çıkmaz; yalnızca dokusu sonsuz biçimde kayar. */
  background-size: 225% 112%;
  background-repeat: repeat-x;
  background-position: 18% center;
  opacity: 0.78;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Küreye hacim veren sabit (dönmeyen) ışık/gölge katmanı — harita katmanının
   ÜZERİNDE, kürenin cam/parlak yüzey hissini korur. */
.earth-globe__shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 68% 78%, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0) 56%);
}

/* Key Figures istatistik rozetleri (ikon + rakam + etiket) — bkz. section.stats
   / script.js renderOrbitSystem. left/top, rozetin MERKEZ noktasıdır (kare
   yörünge sisteminde eşit açıyla hesaplanır); --badge-size ile yatayda,
   translateY(-50%) ile dikeyde rozetin kendisi bu noktaya ortalanır, metin
   ise badge'in sağından devam eder (referans tasarımdaki gibi). */
.keyfigure-stat {
  position: absolute;
  z-index: 2;
  --badge-size: clamp(46px, 4.6vw, 68px);
  transform: translate(
    calc(-1 * var(--badge-size) / 2 + var(--nudge-x, 0px)),
    calc(-50% + var(--nudge-y, 0px))
  );
  display: flex;
  align-items: center;
  gap: 0.7em;
  max-width: clamp(130px, 15vw, 190px);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.keyfigure-stat__badge {
  flex-shrink: 0;
  width: var(--badge-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.25);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms ease;
}

.keyfigure-stat:hover .keyfigure-stat__badge {
  transform: scale(1.08);
}

.keyfigure-stat.is-active .keyfigure-stat__badge {
  transform: scale(1.22);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.32), 0 0 0 3px rgba(47, 125, 255, 0.35);
}

.keyfigure-stat:focus-visible .keyfigure-stat__badge {
  outline: none;
  animation: keyfigureBadgeFocusPop 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.32), 0 0 0 3px rgba(47, 125, 255, 0.35), 0 0 24px rgba(47, 125, 255, 0.38);
}

.keyfigure-stat:focus-visible {
  outline: none;
}

@keyframes keyfigureBadgeFocusPop {
  0% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.08);
  }
}

.keyfigure-stat__badge img {
  width: 52%;
  height: 52%;
  object-fit: contain;
  /* İkon dosyaları siyah çizgi/transparan — rozetin koyu zemini üzerinde
     görünür olması için beyaza çevrilir. */
  filter: invert(1) brightness(2);
}

.keyfigure-stat__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.keyfigure-stat__value {
  font-weight: var(--fw-extrabold);
  font-size: clamp(0.95rem, 1.5vw, 1.4rem);
  line-height: 1.2;
  color: var(--color-text);
  /* pre: nowrap gibi davranır (metin normalde SARMAZ, "100,000 m²" gibi
     kısa değerler hep tek satır kalır) ama içerikte bilerek konan \n
     (bkz. data.js "Europe's\nLargest") yine satır sonu olarak uygulanır —
     pre-line'ın aksine, konteyner dar olduğunda OTOMATİK sarmaya izin
     vermez (employees'de olmayan istenmeyen 2 satıra bölünme burada olmasın). */
  white-space: pre;
}

.keyfigure-stat__label {
  font-weight: var(--fw-medium);
  font-size: clamp(0.6rem, 0.85vw, 0.75rem);
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  /* Dar kutuda tarayıcı kelimeleri rastgele/kelime-kelime bölüyordu — bilinçli
     konan \n (bkz. data.js) satır sonu olarak uygulanır, ayrıca hâlâ çok uzun
     kalan tek bir "kelime" olmadığı sürece ek otomatik sarma da olabilir. */
  white-space: pre-line;
}

/* Küreye tam yatayda bakan rozetlerde (ör. R&D Engineers) metin sağa değil,
   ikonun ALTINA alınır — böylece halkayla yatay çakışma olmaz. Bütün
   rozet, badge'in merkezi hedef noktaya gelecek şekilde tam ortalanır. */
.keyfigure-stat--stack-bottom {
  flex-direction: column;
  gap: 0.35em;
  /* -50% yerine -badge-size/2: rozet (ilk sırada, kutunun EN ÜSTÜNDE) tam
     hedef noktaya (bağlantı çizgisinin bittiği yere) otursun — bütün yığını
     (ikon+metin) ortalarsak ikon noktadan yukarı kayıp çizgi boşlukta
     kalıyordu. */
  transform: translate(
    calc(-50% + var(--nudge-x, 0px)),
    calc(-1 * var(--badge-size) / 2 + var(--nudge-y, 0px))
  );
  max-width: 62px;
  text-align: center;
}

.keyfigure-stat--stack-bottom .keyfigure-stat__text {
  align-items: center;
}

/* Sol yarıdaki diyagonal rozetlerin metni, varsayılan sağ yön yerine dışa
   (sola) akar. Rozetin merkezi bağlantı çizgisinin ucunda sabit kalır; yalnızca
   metin küre ve çemberden uzaklaşır. */
.keyfigure-stat--text-left {
  flex-direction: row-reverse;
  transform: translate(
    calc(-100% + var(--badge-size) / 2 + var(--nudge-x, 0px)),
    calc(-50% + var(--nudge-y, 0px))
  );
  text-align: right;
}

.keyfigure-stat--text-left .keyfigure-stat__text {
  align-items: flex-end;
}

/* ==========================================================
   Sağdaki diyagonal fotoğraf penceresi — sol taraftaki rozetlerden aktif
   olanın fotoğrafı + rakamı + açıklamasını gösterir (bkz. script.js
   renderOrbitSystem / updateKeyfigurePhoto). Sol kenar, sitenin diğer
   yerlerinde de kullanılan eğik dikiş diliyle kesilir (bkz. Projects hub
   kartlarındaki clip-path yaklaşımı).
   ========================================================== */
.keyfigure-photo-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 32%;
  height: 100%;
  clip-path: polygon(13% 0%, 100% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(160deg, #1c2733 0%, var(--color-text) 100%);
  overflow: hidden;
  /* Başlangıçta ekranın dışında (sağda) — ilk rozete tıklanınca küreyle
     birlikte (bkz. .keyfigure-orbit-system.is-revealed) sola doğru kayarak
     yerine oturur. */
  transform: translateX(100%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.keyfigure-photo-panel.is-revealed {
  transform: translateX(0);
}

.keyfigure-photo-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bir rozette 2 fotoğraf varsa (bkz. data.js stat.photos), ikisi de aynı
   yerde üst üste durur ve bu animasyonla sırayla belirip kaybolur — negatif
   animation-delay (bkz. :nth-of-type(2)) ikinci görseli yarım periyot
   kaydırarak kesintisiz bir çapraz geçiş (crossfade) oluşturur. */
@keyframes keyfigurePhotoCrossfade {
  0%,
  42% {
    opacity: 1;
  }
  50%,
  92% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.keyfigure-photo-panel__img--crossfade {
  animation: keyfigurePhotoCrossfade 9s ease-in-out infinite;
}

.keyfigure-photo-panel__img--crossfade:nth-of-type(2) {
  animation-delay: -4.5s;
}

.keyfigure-photo-panel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 14, 20, 0.88) 0%, rgba(10, 14, 20, 0.15) 45%, rgba(10, 14, 20, 0) 70%);
}

/* Görsel katmanının kendisi (img'lerin absolute konumlandığı kapsayıcı) —
   panelin tamamını doldurur, aşağıdaki geçiş animasyonu için transform/opacity
   uygulanabilsin diye kendi position:absolute'ü var (bkz. script.js
   updateKeyfigurePhoto: is-anim-out / is-anim-in-start). */
.keyfigure-photo-panel__media {
  position: absolute;
  inset: 0;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}

/* Dikey yığın: ikon+rakam+etiket üstte, açıklama paragrafı ALTTA ve panelin
   TAM genişliğinde — önceki yatay (flex row) düzende paragraf, sabit
   genişlikteki ikon bloğundan artan dar bir sütuna sıkışıp kelime kelime
   bölünüyordu, okunaklı bir paragraf olamıyordu. */
.keyfigure-photo-panel__info {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}

/* Rozet değiştiğinde: eski görsel + yazı, panelin kendi köşegen kesimine
   (bkz. .keyfigure-photo-panel clip-path: sol kenar yukarı doğru SAĞA yatık)
   PARALEL bir açıyla, yukarı-sağa doğru kayıp silinerek gider — düz yatay
   kayma yerine sayfadaki eğik/paralel dilin diliyle eşleşsin diye. */
.keyfigure-photo-panel__media.is-anim-out,
.keyfigure-photo-panel__info.is-anim-out {
  transform: translate(36px, -14px);
  opacity: 0;
}

/* ...içerik değiştikten sonra yenisi SOL-ALTTA (transition kapalı, anlık)
   belirir, bu sınıf kaldırılınca AYNI köşegenin zıt ucundan (aşağı-soldan)
   kayarak yerine oturur. */
.keyfigure-photo-panel__media.is-anim-in-start,
.keyfigure-photo-panel__info.is-anim-in-start {
  transition: none;
  transform: translate(-36px, 14px);
  opacity: 0;
}

.keyfigure-photo-panel__stat {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.keyfigure-photo-panel__icon {
  flex-shrink: 0;
  width: clamp(40px, 3.6vw, 54px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.keyfigure-photo-panel__icon img {
  width: 52%;
  height: 52%;
  object-fit: contain;
  filter: invert(1) brightness(2);
}

.keyfigure-photo-panel__figure {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.keyfigure-photo-panel__value {
  font-weight: var(--fw-extrabold);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  color: var(--color-white);
  white-space: nowrap;
}

.keyfigure-photo-panel__label {
  font-weight: var(--fw-medium);
  font-size: clamp(0.62rem, 0.85vw, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
}

.keyfigure-photo-panel__divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.keyfigure-photo-panel__desc {
  margin: 0;
  width: 100%;
  max-width: 46ch;
  font-size: clamp(0.72rem, 0.95vw, 0.85rem);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

/* Ekran görseli üzerindeki tıklanabilir alt-kart alanları (image-map) */
.screen-hotspot {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  z-index: 1;
}

/* Yalnızca Projects girişindeki üç ürün kartı: diğer .screen-hotspot
   bileşenleri (ör. Facility fotoğraf kartı) kendi kesintisiz çerçevesini
   korur. */
.screen-hotspot[data-hotspot-id="tram"],
.screen-hotspot[data-hotspot-id="metro"],
.screen-hotspot[data-hotspot-id="hrs"] {
  /* Kartlar viewport'un üst kenarına doğrudan oturur; üstteki eski beyaz
     geçiş/şeffaflaşma maskesi kullanılmaz. */
  -webkit-mask-image: none;
  mask-image: none;
}

.screen-hotspot:hover,
.screen-hotspot.is-selected {
  z-index: 2;
}

.screen-hotspot:focus-visible {
  z-index: 2;
  outline: none;
}

/* Hotspot'un kendi kart görseli (PNG'nin kendi alfa kanalı zaten paralel/eğik
   çizgiye göre şeffaf) — SADECE hover veya klavyeyle (sağ/sol) seçiliyken slide up +
   mavi hüzme ile öne çıkar. Aksi hâlde tamamen düz ve hüzmesiz kalır.

   ÖNEMLİ: burada SCALE kullanılmıyor. Kart komşusuyla eğik/paralel bir kenarı
   paylaştığı için scale, o kenarı komşu kartın (sabit duran) kenarından ayırıp
   dikişte boşluk/kayma yaratır. Bunun yerine sadece translate kullanılıyor ve
   yatay bileşeni (--lift-dx, data.js'ten) tam o eğik kenarın eğimine PARALEL
   olacak şekilde ayarlanıyor — böylece kart kayarken kenar, komşusunun sabit
   kenarıyla aynı çizgi üzerinde kalmaya devam eder, dikiş hiç ayrılmaz. */
.screen-card-visual {
  --lift-dx: 0px;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* Kutu oranı görselin kendi oranıyla birebir eşleşmediğinde gerilme olmasın diye
     object-fit:cover kullanılır; object-position:bottom ile kırpma SADECE üstten
     yapılır (asıl konu — tramvay/istasyon vb. — alt kısımda olduğu için hep tam
     görünür kalır, fazlalık üstteki boş gökyüzü/sis alanından gider). */
  object-fit: cover;
  object-position: bottom;
  transform: translate(0, 0);
  filter: drop-shadow(0 0 0 rgba(47, 125, 255, 0)) drop-shadow(0 0 0 rgba(15, 23, 42, 0));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.screen-hotspot:hover .screen-card-visual,
.screen-hotspot.is-selected .screen-card-visual,
.screen-hotspot:focus-visible .screen-card-visual {
  transform: translate(var(--lift-dx), -14px);
  filter: drop-shadow(0 0 28px rgba(47, 125, 255, 0.65)) drop-shadow(0 16px 22px rgba(15, 23, 42, 0.28));
}

/* Tram kartı: arka plan görseli yerine ray ve araç için tek, normalize SVG sahnesi. */
.screen-card-copy {
  position: absolute;
  left: 11%;
  top: 10%;
  right: 24%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  pointer-events: none;
  transform: translate(0, 0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.screen-hotspot:hover .screen-card-copy,
.screen-hotspot.is-selected .screen-card-copy,
.screen-hotspot:focus-visible .screen-card-copy {
  transform: translate(var(--lift-dx), -14px);
}

.screen-card-copy__title {
  margin-top: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: var(--fw-bold);
  color: #070b11;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.screen-card-copy__accent {
  margin-top: 8px;
  width: 30px;
  height: 3px;
  background: var(--color-blue);
  border-radius: var(--radius-full);
}

.screen-card-copy__desc {
  margin: 10px 0 0;
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: #26384d;
  max-width: 28ch;
  text-align: left;
}

.screen-hotspot[data-hotspot-id="metro"] .screen-card-copy {
  left: 16%;
  right: 10%;
}

.screen-hotspot[data-hotspot-id="hrs"] .screen-card-copy {
  left: 17%;
}

/* LRT'nin portre kaynak görseli geniş karta cover ile yerleşirken araç üst
   bölgeye fazla yaklaşıyordu. Kırpma penceresini hafif aşağı kaydırarak metin
   alanıyla araç arasında nefes payı bırak. */
.screen-hotspot[data-hotspot-id="hrs"] .screen-card-visual {
  object-position: center 78%;
}

.screen-hotspot[data-hotspot-id="metro"] .screen-card-copy__title {
  color: #f7f9fc;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.62);
}

.screen-hotspot[data-hotspot-id="metro"] .screen-card-copy__desc {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.72);
  max-width: 42ch;
  white-space: pre-line;
}

/* ==========================================================
   Şehir Karuseli (örn. Tram Projects) — bkz. script.js renderCityCarousel
   ========================================================== */
/* Aktif şehir değiştiğinde (ok/kart tıklaması) .subpanel__screen tamamen
   yeniden oluşturuluyor — yeni şehir fotoğrafı bu yumuşak açılışla gelir
   (nötr temel zemin her şehirde aynı kaldığı için ona uygulanmıyor). */
@keyframes cityBgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.city-carousel-screen {
  isolation: isolate;
  background: #dbe4ec;
}

/* HRS Projects'teki ile aynı: tek katman, tam ekranı kaplayan sade bir
   fotoğraf (bkz. .subpanel__screen > img -> cover). Görsellerin kendi
   kenarlarında zaten yumuşak bir beyaz geçiş olduğu için ayrıca bir
   blur/vinyet katmanına gerek yok. */
.city-carousel__photo {
  animation: cityBgFadeIn 460ms ease both;
  /* Ray hattını ilk kart sırasının hemen üstüne indirir. Ölçek payı, fotoğraf
     aşağı taşındığında ekranın üst/alt kenarlarında boşluk oluşmasını önler. */
  object-position: center center;
  transform: translateY(4vh) scale(1.18);
  transform-origin: center center;
}

/* Bir şehir kartının kendi detay sayfası (bkz. script.js renderCityDetail) —
   "cities_front" fotoğrafı tam ekran, altta koyu bir scrim üzerinde şehir adı
   + ülke bayrağı. HRS/Bursa kartı da (tek "location") aynı ekranı kullanır. */
.city-detail-screen {
  isolation: isolate;
  background: #0b1522;
  /* Araçlar alt bilgi şeridinin üstündeki ortak hizayı korurken kompozisyonda
     biraz daha nefes bırakmak için hafifçe yukarı alınır. */
  --detail-photo-scale: 1.17;
  --detail-photo-shift-y: -1.5vh;
  --detail-photo-origin: top center;
}

.city-detail__photo {
  animation: cityBgFadeIn 460ms ease both;
  transform: translateY(var(--detail-photo-shift-y)) scale(var(--detail-photo-scale));
  transform-origin: var(--detail-photo-origin);
}

/* Kaynak kompozisyonlardaki araç tabanları aynı yükseklikte üretilmedi.
   Bu küçük düzeltmeler hepsini yaklaşık %84.5 ekran yüksekliğindeki ortak
   alt sınıra getirir ve teknik bilgi satırının üzerine taşmasını engeller. */
.city-detail-screen--antalya,
.city-detail-screen--belgrad,
.city-detail-screen--iasi {
  --detail-photo-scale: 1.18;
}

.city-detail-screen--kayseri {
  --detail-photo-scale: 1.15;
}

.city-detail-screen--group-tram.city-detail-screen--kocaeli,
.city-detail-screen--napoli,
.city-detail-screen--samsun,
.city-detail-screen--timisoara {
  --detail-photo-scale: 1.17;
}

.city-detail-screen--group-metro.city-detail-screen--istanbul,
.city-detail-screen--group-metro.city-detail-screen--kocaeli,
.city-detail-screen--bangkok-2018 {
  --detail-photo-scale: 1.16;
}

.city-detail-screen--bursa {
  /* Bursa'da Kocaeli ile aynı 2560x1440 keskin kaynak kullanılır. Araç
     büyütülmeden aşağı alınır; başlık ve istatistikler arasında kalır. */
  --detail-photo-scale: 1;
  --detail-photo-shift-y: 5vh;
  --detail-photo-origin: center center;
  background: #0b1522 url("../assets/images/projects/vehicle-details/cities-front/bursa-hrs-front.jpg") center / cover no-repeat;
}

.city-detail-screen--bursa .city-detail__photo {
  /* Aşağı kaydırılan ön katmanın üst kenarı, aynı yüksek çözünürlüklü sabit
     arka planla yalnızca gökyüzü bölgesinde yumuşakça birleşir. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 4%, #000 14%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 4%, #000 14%, #000 100%);
}

.city-detail-screen--group-metro .city-detail__intro {
  top: calc(var(--header-height) + clamp(8px, 1.5vh, 16px));
}

.city-detail-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(2, 8, 20, 0.32) 100%),
    linear-gradient(to bottom, rgba(240, 245, 250, 0.82) 0%, rgba(240, 245, 250, 0.3) 18%, rgba(240, 245, 250, 0) 36%),
    linear-gradient(to top, rgba(2, 8, 20, 0.82) 0%, rgba(2, 8, 20, 0.28) 26%, rgba(2, 8, 20, 0) 48%);
  pointer-events: none;
}

/* Üstte ortalanmış başlık bloğu — şehir adı ile ülke/bayrak bilgisi. */
.city-detail__intro {
  position: absolute;
  left: 50%;
  top: calc(var(--header-height) + clamp(8px, 1.5vh, 16px));
  transform: translateX(-50%);
  z-index: 2;
  width: min(640px, 84vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.96), 0 0 5px rgba(255, 255, 255, 0.88), 0 2px 12px rgba(255, 255, 255, 0.72);
}

.city-detail__intro h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.8rem);
  font-weight: var(--fw-extrabold);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: #0d1724;
}

.city-detail__country {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #304155;
}

.city-detail__flag {
  width: 22px;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.city-detail__desc {
  margin: 0;
  /* width:100% + min-width:0 — flex item'lar varsayılan olarak içeriğin
     kırılmadan sığdığı genişliği ister (min-width:auto), bu da metnin
     ekranın dışına taşmasına yol açıyordu; width:100% + max-width birlikte
     .city-detail__intro'nun genişliğine göre gerçekten sarmasını sağlar. */
  width: 100%;
  min-width: 0;
  max-width: 46ch;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  line-height: 1.45;
  color: #304155;
}

.city-detail__variant-switch {
  position: absolute;
  left: clamp(16px, 2.4vw, 38px);
  top: 54%;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(5, 16, 31, 0.58);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
}

.city-detail__variant-switch::before {
  content: "MODULE";
  padding: 5px 9px 2px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.56rem;
  font-weight: 750;
  letter-spacing: 0.14em;
}

.city-detail__variant-button {
  min-width: 92px;
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.035em;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.city-detail__variant-button:hover,
.city-detail__variant-button:focus-visible {
  color: var(--color-white);
}

.city-detail__variant-button:focus-visible {
  outline: 2px solid #2f92ff;
  outline-offset: 2px;
}

.city-detail__variant-button.is-active {
  color: var(--color-white);
  background: #1879e8;
  box-shadow: 0 4px 12px rgba(24, 121, 232, 0.38);
}

/* Altta ortalanmış araç istatistik şeridi (bkz. data.js city.stats — Vehicles /
   Passenger Capacity / Eco Friendly / Speed vb.). facility-stat ile aynı
   ikon+değer+etiket dili, ama koyu fotoğraf üzerinde okunsun diye beyaz metin
   ve beyaza çevrilmiş (siyah çizgi) ikonlar kullanılır. */
.city-detail__stats {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vh, 30px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  /* Küçültülmüş boyutlarla masaüstünde hepsi tek satıra sığar; sadece dar
     ekranlarda (bkz. media query) sarmaya izin verilir. */
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 94vw;
}

.city-detail__stats.is-variant-updated {
  animation: cityDetailStatsVariantIn 260ms ease both;
}

@keyframes cityDetailStatsVariantIn {
  from { opacity: 0.45; transform: translateX(-50%) translateY(5px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.city-detail-stat {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 0 clamp(10px, 1.6vw, 20px);
}

.city-detail-stat + .city-detail-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.city-detail-stat__icon {
  flex-shrink: 0;
  width: clamp(17px, 1.5vw, 21px);
  height: clamp(17px, 1.5vw, 21px);
  object-fit: contain;
  margin-top: 2px;
  /* İkonlar siyah çizgi + şeffaf zemin geliyor — koyu fotoğrafta görünsün diye beyaza çevrilir. */
  filter: brightness(0) invert(1);
}

.city-detail-stat__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.city-detail-stat__value {
  font-size: clamp(0.76rem, 1vw, 0.92rem);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  white-space: pre-line;
}

.city-detail-stat__label {
  font-size: clamp(0.52rem, 0.64vw, 0.6rem);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
  max-width: 14ch;
}

/* Araç detayındaki kısa istatistiklere ek olarak açılan teknik tablo.
   Kaynak föyler görsel olarak gömülmez; keskin, seçilebilir ve erişilebilir
   gerçek HTML tabloları kullanılır. */
.city-detail__technical-specs {
  position: absolute;
  right: clamp(24px, 3.5vw, 58px);
  bottom: clamp(104px, 13vh, 148px);
  z-index: 8;
}

.technical-specs__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  list-style: none;
  min-width: 132px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(7, 20, 36, 0.82);
  box-shadow: 0 10px 28px rgba(3, 10, 20, 0.3);
  color: var(--color-white);
  font-family: inherit;
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.technical-specs__trigger::-webkit-details-marker {
  display: none;
}

.technical-specs__trigger::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: clamp(14px, 1.1vw, 24px);
  transform: translateY(-50%);
  line-height: 1;
  color: #55a0ff;
}

.technical-specs__trigger:hover,
.technical-specs__trigger:focus-visible {
  border-color: #55a0ff;
  background: rgba(12, 42, 74, 0.94);
  outline: none;
  transform: translateY(-2px);
}

.city-detail__technical-specs[open] > .technical-specs__trigger {
  visibility: hidden;
}

.technical-specs__overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: calc(var(--header-height) + clamp(10px, 1.8vh, 24px)) clamp(20px, 4vw, 72px) clamp(14px, 2.5vh, 32px);
  background: rgba(5, 14, 26, 0);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 980ms ease;
}

.technical-specs__surface {
  position: relative;
  width: min(92vw, 2300px);
  max-height: calc(100vh - var(--header-height) - clamp(26px, 5vh, 64px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: clamp(16px, 1.4vw, 24px);
  background: rgba(243, 246, 249, 0.91);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  color: #122033;
  opacity: 0;
  transform: translateY(58px) scale(0.9);
  transform-origin: center center;
  clip-path: inset(9% 11% round clamp(24px, 2.2vw, 42px));
  transition:
    opacity 760ms ease 120ms,
    transform 1120ms cubic-bezier(0.16, 1, 0.3, 1) 80ms,
    clip-path 1040ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
  will-change: opacity, transform, clip-path;
}

.city-detail__technical-specs.is-specs-visible .technical-specs__overlay {
  background: rgba(5, 14, 26, 0.76);
  opacity: 1;
  pointer-events: auto;
}

.city-detail__technical-specs.is-specs-visible .technical-specs__surface {
  opacity: 1;
  transform: translateY(0) scale(1);
  clip-path: inset(0 round clamp(16px, 1.4vw, 24px));
}

.technical-specs__header {
  position: relative;
  flex: 0 0 auto;
  padding: clamp(15px, 1.7vw, 28px) clamp(24px, 2.8vw, 48px) clamp(12px, 1.3vw, 22px);
  border-bottom: 1px solid rgba(180, 190, 202, 0.72);
  background: rgba(255, 255, 255, 0.86);
}

.technical-specs__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--color-blue);
  font-size: clamp(0.68rem, 0.78vw, 0.82rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.technical-specs__header h2 {
  margin: 0;
  color: #101a29;
  font-size: clamp(1.4rem, 2vw, 2.3rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: uppercase;
}

.technical-specs__header p {
  margin: 8px 0 0;
  color: #536174;
  font-size: clamp(0.7rem, 0.78vw, 0.82rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.technical-specs__close {
  position: absolute;
  top: clamp(14px, 1.5vw, 24px);
  right: clamp(18px, 2vw, 34px);
  width: clamp(36px, 2.5vw, 44px);
  height: clamp(36px, 2.5vw, 44px);
  border: 1px solid #c8d1dc;
  border-radius: 50%;
  background: #eef2f6;
  color: #17263a;
  font-family: inherit;
  font-size: clamp(1.3rem, 1.7vw, 1.8rem);
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.technical-specs__close:hover,
.technical-specs__close:focus-visible {
  border-color: var(--color-blue);
  background: #e3edfb;
  color: var(--color-blue);
  outline: none;
}

.technical-specs__tables {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 34px);
  padding: clamp(12px, 1.5vw, 24px) clamp(24px, 2.8vw, 48px) clamp(16px, 1.8vw, 28px);
}

.technical-specs__table {
  width: 100%;
  align-self: start;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(0.68rem, 0.72vw, 0.82rem);
}

.technical-specs__table caption {
  padding: 0 0 7px;
  color: #17263a;
  font-size: clamp(0.86rem, 1vw, 1.05rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.technical-specs__table thead th {
  padding: 6px 10px;
  background: #17283d;
  color: #ffffff;
  font-size: 0.74em;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.technical-specs__table thead th:first-child,
.technical-specs__table tbody th {
  width: 56%;
}

.technical-specs__table tbody th,
.technical-specs__table tbody td {
  padding: 4px 10px;
  border-bottom: 1px solid rgba(197, 205, 214, 0.72);
  vertical-align: top;
  line-height: 1.18;
}

.technical-specs__table tbody th {
  color: #1b2a3c;
  font-weight: var(--fw-semibold);
  text-align: left;
}

.technical-specs__table tbody td {
  color: #4c5b6d;
  font-weight: var(--fw-medium);
}

@media (prefers-reduced-motion: reduce) {
  .technical-specs__overlay,
  .technical-specs__surface {
    transition: none;
  }
}

/* ==========================================================
   5000 × 2000 LED — comprehensive interface scale
   5:2 sahnede yalnızca arka plan değil; metin, logo, kart, ikon ve tüm
   etkileşim hedefleri fiziksel ekranla birlikte büyür. Değerler 5000 px
   genişlik / 2000 px yükseklik referansına göre vw-vh tabanlıdır.
   ========================================================== */
@media (min-width: 3000px) and (min-aspect-ratio: 2 / 1) and (max-aspect-ratio: 13 / 5) {
  html {
    /* 3840×1536'da ~24.6 px, 5000×2000'de 32 px. Tüm rem tabanlı yazılar
       ve iç boşluklar aynı oranda büyür. */
    font-size: clamp(24px, 0.64vw, 32px);
  }

  .subpanel--projects {
    --projects-content-shift-y: clamp(20px, 1.5vh, 30px);
  }

  /* Home — logo, üç ana kart ve navigasyon */
  .hero__brand {
    top: 4.5vh;
    width: 8vw;
  }

  .hero__brand-line {
    width: 1.5vw;
    height: 0.22vh;
    margin-top: 1vh;
  }

  .hero__brand-tagline {
    margin-top: 0.8vh;
    font-size: 0.78rem;
  }

  .hero__hit-area {
    top: 23vh;
    width: 18.5vw;
    height: 70vh;
    border-radius: 1.5vh;
  }

  .hero__hit-area--projects {
    left: 19.25%;
  }

  .hero__hit-area--key-figures {
    left: 40.75%;
  }

  .hero__hit-area--facility {
    left: 62.25%;
  }

  .hero__card-visual,
  .hero__card-bg {
    border-radius: 1.5vh;
  }

  .hero__card-title {
    font-size: 1.45rem;
  }

  .hero__card-desc {
    margin-top: 0.8vh;
    font-size: 0.9rem;
    line-height: 1.42;
  }

  .hero__card-arrow {
    top: 82vh;
    width: 5.5vh;
    height: 5.5vh;
  }

  .hero__card-arrow--projects {
    left: 28.5%;
  }

  .hero__card-arrow--key-figures {
    left: 50%;
  }

  .hero__card-arrow--facility {
    left: 71.5%;
  }

  .hero__nav {
    width: 6vh;
    height: 6vh;
  }

  .hero__card-arrow > span,
  .hero__nav > span {
    width: 0.9vh;
    height: 0.9vh;
    border-top-width: 0.16vh;
    border-right-width: 0.16vh;
  }

  /* Tüm alt sayfalardaki sol üst yol menüsü */
  .subpanel__breadcrumb {
    top: 1.2vh;
    left: 2.4vw;
    gap: 0.65vw;
    font-size: 0.9rem;
  }

  .subpanel__breadcrumb-link {
    min-height: 4.5vh;
    padding-inline: 0.35vw;
  }

  .subpanel__breadcrumb-home {
    width: 3.5vh;
    height: 3.5vh;
  }

  .subpanel__breadcrumb-home svg {
    width: 2.1vh;
    height: 2.1vh;
  }

  /* Projects ana seçim ekranı */
  .screen-card-copy {
    top: 11%;
  }

  .screen-card-copy__title {
    margin-top: 1vh;
    font-size: 2.15rem;
  }

  .screen-card-copy__accent {
    width: 1vw;
    height: 0.2vh;
    margin-top: 0.7vh;
  }

  .screen-card-copy__desc {
    margin-top: 0.9vh;
    max-width: 32ch;
    font-size: 1rem;
  }

  /* Key Figures — yörünge rozetleri ve sağ görsel paneli */
  .keyfigure-orbit-system {
    top: 53.5%;
    width: min(45vw, 82vh);
  }

  .keyfigure-stat {
    --badge-size: 9vh;
    gap: 0.9em;
    max-width: 14vw;
  }

  .keyfigure-stat--stack-bottom {
    max-width: 8vw;
  }

  .keyfigure-stat__value {
    font-size: 1.45rem;
  }

  .keyfigure-stat__label {
    font-size: 0.72rem;
  }

  .keyfigure-photo-panel {
    width: 43%;
  }

  .keyfigure-photo-panel__info {
    gap: 1.2vh;
  }

  .keyfigure-photo-panel__stat {
    gap: 1.2vh;
  }

  .keyfigure-photo-panel__icon {
    width: 4.5vh;
  }

  .keyfigure-photo-panel__value {
    font-size: 1.65rem;
  }

  .keyfigure-photo-panel__label,
  .keyfigure-photo-panel__desc {
    font-size: 0.72rem;
  }

  /* Tram / Metro şehir kartları ve slider kontrolleri */
  .city-carousel {
    bottom: 3.5vh;
    gap: 1vw;
  }

  .city-carousel__track {
    gap: 1vw;
  }

  .city-card {
    width: 12vw;
    height: 38vh;
    border-radius: 1.4vh;
  }

  .city-card__header {
    padding: 1.25vh 3.4vh 0 1.25vh;
    gap: 0.5vh;
  }

  .city-card__title {
    font-size: 1rem;
  }

  .city-card__country {
    gap: 0.5vh;
    font-size: 0.62rem;
  }

  .city-card__flag {
    width: 1.6vh;
  }

  .city-card__arrow {
    top: 1.1vh;
    right: 1.2vh;
    font-size: 2rem;
  }

  .city-card__stats {
    left: 1vh;
    right: 1vh;
    bottom: 1vh;
    min-height: 5.2vh;
  }

  .city-card__stat {
    gap: 0.6vh;
    padding-inline: 0.8vh;
  }

  .city-card__stat-icon {
    width: 2.4vh;
    height: 2.4vh;
  }

  .city-card__stat-value {
    font-size: 0.78rem;
  }

  .city-card__stat-label {
    font-size: 0.52rem;
  }

  .city-carousel__nav {
    width: 5.5vh;
    height: 5.5vh;
  }

  .city-carousel__nav > span {
    width: 1.1vh;
    height: 1.1vh;
    border-top-width: 0.17vh;
    border-right-width: 0.17vh;
  }

  /* Araç detayları — şehir/ülke, dört özellik ve View More */
  .city-detail__intro,
  .city-detail-screen--group-metro .city-detail__intro {
    left: 3.5vw;
    width: 27vw;
  }

  .city-detail__intro h1 {
    font-size: 5rem;
  }

  .city-detail__country {
    gap: 0.55vh;
    font-size: 0.8rem;
  }

  .city-detail__flag {
    width: 2.3vh;
  }

  .city-detail__desc {
    font-size: 0.72rem;
  }

  .city-detail__stats {
    bottom: 3.5vh;
    max-width: 92vw;
  }

  .city-detail-stat {
    gap: 0.75vh;
    padding-inline: 1.8vw;
  }

  .city-detail-stat__icon {
    width: 3vh;
    height: 3vh;
  }

  .city-detail-stat__value {
    font-size: 0.85rem;
  }

  .city-detail-stat__label {
    font-size: 0.52rem;
  }

  .city-detail__technical-specs {
    right: 3.5vw;
    width: 27vw;
  }

  .technical-specs__trigger {
    min-width: 12vw;
    min-height: 5.5vh;
    padding: 1.1vh 2vw;
    font-size: 0.78rem;
  }

  .technical-specs__trigger::after {
    right: 1.2vw;
    font-size: 1.1rem;
  }

  /* Teknik özellik penceresi — tüm tablo kaydırma gerektirmeden okunur. */
  .technical-specs__overlay {
    padding: 3vh 3vw;
  }

  .technical-specs__surface {
    width: min(88vw, 4400px);
    max-height: 94vh;
    border-radius: 1.4vh;
  }

  .technical-specs__header {
    padding: 1.5vh 2.4vw 1.2vh;
  }

  .technical-specs__eyebrow,
  .technical-specs__header p {
    font-size: 0.62rem;
  }

  .technical-specs__header h2 {
    font-size: 1.65rem;
  }

  .technical-specs__close {
    top: 1.2vh;
    right: 1.2vw;
    width: 4.5vh;
    height: 4.5vh;
    font-size: 1.7rem;
  }

  .technical-specs__tables {
    gap: 1.6vw;
    padding: 1.2vh 2.4vw 1.5vh;
  }

  .technical-specs__table {
    font-size: 0.62rem;
  }

  .technical-specs__table caption {
    padding-bottom: 0.6vh;
    font-size: 0.8rem;
  }

  .technical-specs__table thead th {
    padding: 0.45vh 0.7vw;
  }

  .technical-specs__table tbody th,
  .technical-specs__table tbody td {
    padding: 0.32vh 0.7vw;
    line-height: 1.2;
  }

  /* Our Facility ve Main Plant */
  .facility-intro__header {
    left: 2.4vw;
    top: 6.5vh;
    width: 24vw;
    gap: 1.4vh;
  }

  .facility-intro__title-block h1 {
    font-size: 4rem;
  }

  .facility-detail__content h1 {
    font-size: 5.25rem;
  }

  .facility-intro__tagline {
    font-size: 0.78rem;
  }

  .facility-intro__accent {
    width: 1.5vw;
    height: 0.2vh;
  }

  .facility-detail__accent {
    width: 2.2vw;
    height: 0.24vh;
    margin: 1.2vh 0 1.5vh;
  }

  .facility-intro__desc {
    font-size: 0.72rem;
    line-height: 1.55;
  }

  .facility-detail__paragraph {
    max-width: 40vw;
    margin-bottom: 1.25vh;
    font-size: 1.05rem;
    line-height: 1.58;
  }

  .facility-intro__photo-btn {
    left: 26vw;
    right: 2.4vw;
    top: 16%;
    bottom: 6%;
    border-radius: 1.5vh;
  }

  .facility-intro__card-content {
    left: 2.2vw;
    max-width: 16vw;
    gap: 0.9vh;
  }

  .facility-intro__card-icon {
    width: 4.5vh;
    height: 4.5vh;
  }

  .facility-intro__card-title {
    font-size: 1.6rem;
  }

  .facility-intro__card-desc,
  .facility-intro__card-cta {
    font-size: 0.7rem;
  }

  .facility-detail__content {
    left: 2.8vw;
    top: 8.5vh;
    width: 44%;
    max-width: none;
  }

  .facility-detail__eyebrow {
    margin-top: 1.2vh;
    font-size: 0.95rem;
  }

  .facility-detail__stats-row {
    max-width: 40vw;
    gap: 1.25vw;
    margin-top: 2.4vh;
    padding-top: 2.1vh;
  }

  .facility-detail__stats-row + .facility-detail__stats-row {
    margin-top: 1.5vh;
  }

  .facility-stat {
    gap: 1vh;
    padding-right: 1.25vw;
  }

  .facility-stat + .facility-stat {
    padding-left: 1.25vw;
  }

  .facility-stat__icon {
    width: 4.8vh;
    height: 4.8vh;
  }

  .facility-stat__value {
    font-size: 1.12rem;
  }

  .facility-stat__label {
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .facility-photo-frame {
    width: 48%;
  }

  /* LRV kartı kullanıldığı çözünürlüklerde */
  .hrs-intro-screen .facility-intro__header {
    left: 2.4vw;
    top: 7.5vh;
    width: 22vw;
  }

  .hrs-card {
    left: 26vw;
    right: 2.4vw;
    bottom: 6%;
    height: 66%;
    border-radius: 1.5vh;
  }

  .hrs-card__header {
    left: 2vw;
    top: 2.2vh;
    gap: 0.6vh;
  }

  .hrs-card__title {
    font-size: 1.6rem;
  }

  .hrs-card__country {
    gap: 0.5vh;
    font-size: 0.7rem;
  }

  .hrs-card__flag {
    width: 1.8vh;
  }

  .hrs-card__stats {
    left: 2vw;
    right: 2vw;
    bottom: 2vh;
    gap: 2vw;
  }

  .hrs-card__stat {
    gap: 0.7vh;
    padding-left: 2vw;
  }

  .hrs-card__stat-icon {
    width: 2.6vh;
    height: 2.6vh;
  }

  .hrs-card__stat-value {
    font-size: 0.82rem;
  }

  .hrs-card__stat-label {
    font-size: 0.52rem;
  }

  /* Dokunmatik LED ekran işaretçisi */
  .touch-cursor {
    width: 4.5vh;
    height: 4.5vh;
    margin: -2.25vh 0 0 -2.25vh;
    border-width: 0.12vh;
  }
}

@media (max-width: 720px) {
  .city-detail__stats {
    flex-wrap: wrap;
  }

  .city-detail__variant-switch {
    left: 10px;
    top: 56%;
    bottom: auto;
  }

  .city-detail__technical-specs {
    right: 14px;
    bottom: 118px;
  }

  .technical-specs__overlay {
    padding: calc(var(--header-height) + 16px) 12px 12px;
  }

  .technical-specs__surface {
    width: 100%;
    max-height: calc(100vh - var(--header-height) - 28px);
  }

  .technical-specs__tables {
    grid-template-columns: 1fr;
    padding: 18px;
    overflow: auto;
  }
}

@keyframes projectIntroCardSlideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.project-intro-card.is-entering {
  animation: projectIntroCardSlideIn 620ms 90ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.city-carousel__intro {
  position: absolute;
  left: clamp(28px, 4.7vw, 78px);
  /* Şehir silüetini kapatmaması için üst yapı bandından rayların bittiği
     açık zemin bölgesine indirilir. */
  top: calc(var(--header-height) + clamp(120px, 15vh, 180px));
  z-index: 4;
  width: min(34vw, 490px);
  color: #0d1724;
  /* Şehir fotoğrafının parlak kısımları (gökyüzü, bina, kule vb.) harflerin
     TAM ARDINDAN geçtiğinde tek başına yumuşak bir parlaklık yetersiz
     kalıyordu (örn. Belgrad'da kilise kulesi "TRAM" yazısını bölüyordu).
     Aynı sıkı gölgeyi üst üste katmanlamak, büyük/dikkat çekici bir arka
     plan şekli oluşturmadan harflerin etrafında daha "solid" bir kontur
     hissi veriyor. */
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 5px rgba(255, 255, 255, 0.9),
    0 0 5px rgba(255, 255, 255, 0.9),
    0 2px 12px rgba(255, 255, 255, 0.7);
}

.city-carousel__intro h1 {
  margin: 0;
  font-size: clamp(2.25rem, 4.1vw, 4.4rem);
  font-weight: var(--fw-extrabold);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: #0d1724;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.68),
    0 0 3px rgba(255, 255, 255, 0.48),
    0 3px 9px rgba(9, 20, 34, 0.2);
}

.city-carousel__intro-line {
  display: block;
  width: 52px;
  height: 3px;
  margin: 24px 0 18px;
  background: var(--color-blue);
}

.city-carousel__intro p {
  max-width: 390px;
  margin: 0;
  font-size: clamp(0.85rem, 1.12vw, 1.1rem);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  color: #223449;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 2px rgba(255, 255, 255, 0.42),
    0 2px 7px rgba(9, 20, 34, 0.2);
}

/* METRO PROJECTS, dar ortak başlık kutusunda iki satıra düşerek çizgi ve
   açıklamayı Tram/LRT'den aşağı itiyordu. Metro'ya daha geniş tek satırlık
   bir alan verilir; sol ve üst başlangıç ortak hizayla aynı kalır. */
.city-carousel-screen--metro .city-carousel__intro {
  width: min(60vw, 720px);
}

.city-carousel-screen--metro .city-carousel__intro h1 {
  white-space: nowrap;
}

.city-carousel {
  position: absolute;
  left: 50%;
  /* Referanstaki gibi kartlar ekranın alt bandında durur; ray sahnesi üstte
     geniş ve açık kalır. */
  bottom: min(5vh, 48px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  max-width: 92%;
}

.city-carousel__track {
  display: flex;
  align-items: flex-end;
  gap: clamp(18px, 2.4vw, 32px);
}

/* Tram'ın 1–4 / 5–8 kart grupları tek parça halinde değişir. Ara kartları
   kaydıran bir track hareketi yoktur; yeni grup yumuşakça belirip yerine oturur. */
.city-carousel__track.is-page-entering {
  animation: cityCardPageEnter 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cityCardPageEnter {
  from {
    opacity: 0;
    transform: scale(0.965);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Tek şehir kartı — düz fotoğraf (alfa kanalı yok), köşeler CSS ile yuvarlatılıyor.
   box-shadow, referans karttaki (trams_card/referance_card.png) koyu arka plan
   üzerinde yüzen kart hissini verecek şekilde belirgin/koyu tutuluyor. */
.city-card {
  position: relative;
  flex-shrink: 0;
  /* Referans oranı: yaklaşık 190×240. Dört kart ve ray sahnesi aynı anda
     rahatça görünür kalır. */
  width: min(190px, 18.5vw);
  height: min(240px, 23.4vw);
  background: #0b1522;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(4, 10, 18, 0.52), 0 4px 12px rgba(4, 10, 18, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(0) scale(1);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.city-card__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Referans kart kadrajı: burun sol-alt tarafta, gövde sağa doğru perspektifte
     uzanıyor. Tüm Tram/Metro küçük kartlarında aynı üç çeyrek açıyı görünür
     tutarken geniş boş zemini kadraj dışına alır. */
  object-position: 69% 42%;
  filter: brightness(0.86) contrast(1.12) saturate(0.96);
  /* Aracı kartın alt yarısına yaklaştır; uzun, boş zemin/yansıma bölümü
     kartın altından kırpılsın. */
  transform: translateY(15%) scale(1.38);
  transform-origin: 68% 52%;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.city-card__vignette {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}

.city-card__vignette--top {
  top: 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(5, 12, 22, 0.74) 0%, rgba(5, 12, 22, 0.34) 48%, rgba(5, 12, 22, 0) 100%);
}

.city-card__vignette--bottom {
  bottom: 0;
  height: 32%;
  background: linear-gradient(to top, rgba(4, 10, 18, 0.86) 0%, rgba(4, 10, 18, 0.48) 48%, rgba(4, 10, 18, 0) 100%);
}

/* Şehir adı + bayrak/ülke — referans karttaki üst köşe yerleşimiyle aynı */
.city-card__header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 10px 34px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  z-index: 3;
}

.city-card__title {
  color: var(--color-white);
  font-size: clamp(11px, 1.3vw, 15px);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-transform: uppercase;
}

.city-card__country {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(7px, 0.75vw, 9px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.city-card__flag {
  width: clamp(14px, 1.6vw, 20px);
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* Referans karttaki sağ üst yön oku. */
.city-card__arrow {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 3;
  color: var(--color-blue);
  font-size: 23px;
  font-weight: var(--fw-regular);
  line-height: 1;
}

/* Her proje kartının ilk iki teknik bilgisi: araç adedi ve kapasite. */
.city-card__stats {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  min-height: 38px;
  color: var(--color-white);
}

.city-card__stat {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
}

.city-card__stat + .city-card__stat {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.city-card__stat-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.city-card__stat-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  text-align: left;
}

.city-card__stat-value {
  font-size: clamp(9px, 0.86vw, 12px);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.city-card__stat-label {
  font-size: clamp(5.5px, 0.55vw, 7px);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: normal;
}

/* Slide up + glow up — homepage'deki .hero__hit-area:hover ile AYNI görsel dil
   (mavi hüzme), sadece kartın kendi ölçeğine göre daha ölçülü. */
.city-card:hover,
.city-card.is-active,
.city-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(82, 153, 255, 0.9);
  box-shadow:
    0 0 0 2px rgba(47, 125, 255, 0.34),
    0 0 30px rgba(47, 125, 255, 0.5),
    0 24px 42px rgba(15, 23, 42, 0.46);
}

.city-card:hover .city-card__img,
.city-card.is-active .city-card__img,
.city-card:focus-visible .city-card__img {
  filter: brightness(0.96) contrast(1.08) saturate(1.04);
  transform: translateY(15%) scale(1.46);
}

.city-card.is-active {
  transform: translateY(-8px) scale(1.06);
}

/* Ok tuşları/klavye ile gezinme .focus() çağırıyor — bu, tarayıcının kendi
   mavi odak halkasını tetikliyordu. .is-active zaten kartın seçili olduğunu
   (kalkma/büyüme ile) gösteriyor, o yüzden ayrıca bir çerçeveye gerek yok. */
.city-card:focus-visible {
  outline: none;
}

.city-card__arrow {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease;
}

.city-card:hover .city-card__arrow,
.city-card.is-active .city-card__arrow,
.city-card:focus-visible .city-card__arrow {
  transform: translateX(5px);
  filter: drop-shadow(0 0 7px rgba(47, 125, 255, 0.85));
}

/* Sağ/sol gezinme okları — hero__nav ile aynı tasarım dili */
.city-carousel__nav {
  --nav-base-transform: translate(0, 0);
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(47, 125, 255, 0.72);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 238, 255, 0.82));
  color: var(--color-blue);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: 0 12px 28px rgba(15, 32, 52, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 4px rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(12px);
  transform: var(--nav-base-transform);
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

.city-carousel__nav::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(47, 125, 255, 0.24);
  transition: border-color 240ms ease, background 240ms ease;
}

.city-carousel__nav > span {
  display: block;
  width: 11px;
  height: 11px;
  font-size: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.city-carousel__nav--prev > span {
  transform: rotate(-135deg) translate(-1px, 1px);
}

.city-carousel__nav--next > span {
  transform: rotate(45deg) translate(-1px, 1px);
}

.city-carousel__nav:hover,
.city-carousel__nav:focus-visible {
  background: linear-gradient(145deg, #3f8cff, #176ee8);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(47, 125, 255, 0.18), 0 0 28px rgba(47, 125, 255, 0.58), 0 16px 30px rgba(15, 32, 52, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: var(--nav-base-transform) scale(1.08);
}

.city-carousel__nav:focus-visible {
  outline: none;
}

/* Karusel başa/sona ulaştığında ok soluklaşır (artık o yöne kaydırılamaz). */
.city-carousel__nav.is-boundary {
  opacity: 0.35;
}

.city-carousel__nav.is-boundary:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 238, 255, 0.82));
  color: var(--color-blue);
  border-color: rgba(47, 125, 255, 0.72);
  box-shadow: 0 12px 28px rgba(15, 32, 52, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 4px rgba(255, 255, 255, 0.34);
  transform: var(--nav-base-transform);
}

/* Sınırdayken tıklanınca "daha ileri gidilemez" geri bildirimi — kısa bir sarsılma. */
@keyframes navShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Fiziksel klavye okuyla gezinildiğinde ekrandaki aynı yön oku da kısa bir
   itme hareketi yapar; böylece klavye ve görsel navigasyon aynı olayı anlatır. */
.hero__nav--next.is-key-activated,
.city-carousel__nav--next.is-key-activated {
  animation: navKeyPressNext 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__nav--prev.is-key-activated,
.city-carousel__nav--prev.is-key-activated {
  animation: navKeyPressPrev 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes navKeyPressNext {
  0%,
  100% {
    transform: var(--nav-base-transform);
  }
  45% {
    transform: var(--nav-base-transform) translateX(8px) scale(0.94);
  }
  72% {
    transform: var(--nav-base-transform) translateX(-2px) scale(1.06);
  }
}

@keyframes navKeyPressPrev {
  0%,
  100% {
    transform: var(--nav-base-transform);
  }
  45% {
    transform: var(--nav-base-transform) translateX(-8px) scale(0.94);
  }
  72% {
    transform: var(--nav-base-transform) translateX(2px) scale(1.06);
  }
}

.city-carousel__nav.is-shake {
  animation: navShake 320ms ease;
}

@media (max-width: 600px) {
  .city-carousel__intro {
    left: 20px;
    top: calc(var(--header-height) + 70px);
    width: min(72vw, 280px);
  }

  .city-carousel__intro h1 {
    font-size: 1.75rem;
  }

  .city-carousel__intro-line {
    width: 38px;
    height: 2px;
    margin: 13px 0 10px;
  }

  .city-carousel__intro p {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .keyfigure-orbit-system {
    top: 50%;
    width: 220px;
  }

  .keyfigure-orbit-system.is-revealed {
    left: 50%;
    top: 31%;
    width: 190px;
  }

  .keyfigure-stat {
    --badge-size: 38px;
    gap: 0.35em;
    max-width: 72px;
  }

  .keyfigure-stat__text {
    transform: none !important;
  }

  .keyfigure-stat__value {
    font-size: 0.68rem;
  }

  .keyfigure-stat__label {
    display: none;
  }

  .keyfigure-stat--stack-bottom {
    max-width: 48px;
  }

  .keyfigure-photo-panel {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 48%;
    clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
    transform: translateY(100%);
  }

  .keyfigure-photo-panel.is-revealed {
    transform: translateY(0);
  }

  .keyfigure-photo-panel__info {
    left: 6%;
    right: 6%;
    bottom: 7%;
    gap: 10px;
  }

  .keyfigure-photo-panel__stat {
    gap: 8px;
  }

  .keyfigure-photo-panel__icon {
    width: 36px;
  }

  .keyfigure-photo-panel__value {
    font-size: 1rem;
  }

  .keyfigure-photo-panel__label,
  .keyfigure-photo-panel__desc {
    font-size: 0.62rem;
  }

  .city-carousel {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    padding: 0 8px;
    transform: none;
    gap: 8px;
  }

  .city-carousel__track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 8px 4px;
    gap: 8px;
  }

  .city-card {
    width: calc((100vw - 124px) / 2);
    height: min(480px, 62vh);
  }

  .city-carousel__nav {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}

/* Dar ekranlarda da dört kartlık sayfanın tamamı görünür kalır. Kartlar tek
   sıra içinde saklanmak yerine 2×2 dizilir; sayfa değişimi yine 4 kartı birden
   yeniler. Metro'nun mevcut tek sıra davranışı etkilenmez. */
@media (max-width: 720px) {
  .city-carousel-screen--tram .city-carousel__track {
    width: min(72vw, 600px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    overflow: visible;
    padding: 4px;
    gap: 8px;
  }

  .city-carousel-screen--tram .city-card {
    width: 100%;
    height: min(240px, 27vh);
  }
}

/* ==========================================================
   Our Facility — giriş ekranı (bkz. script.js renderFacilityIntro). Eski
   statik mockup'la (facility-screen.png) aynı dizilim: sol üstte başlık
   bloğu + sağında (dikey çizgiyle ayrılmış) tanıtım paragrafı, altında tam
   genişlikte tıklanabilir fabrika fotoğrafı (Main Plant'a götürür).
   ========================================================== */
.facility-intro__header {
  position: absolute;
  left: clamp(28px, 4.7vw, 78px);
  right: clamp(28px, 4.7vw, 78px);
  top: calc(var(--header-height) + clamp(64px, 6vh, 96px));
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 56px);
  /* Facility'de düz/nötr bir zemin üzerinde olduğu için görünmez kalır, ama
     HRS'te aynı sınıf artık bir FOTOĞRAF arka planında kullanılıyor — orada
     harflerin arkasından gökyüzü/cami gibi değişken parlaklıkta öğeler
     geçebiliyor. Aynı sıkı/katmanlı kontur (bkz. .city-carousel__intro). */
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 5px rgba(255, 255, 255, 0.9),
    0 2px 12px rgba(255, 255, 255, 0.6);
}

.facility-intro__title-block {
  flex-shrink: 0;
}

.facility-intro__title-block h1 {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text);
}

.facility-intro__tagline {
  margin: 10px 0 0;
  font-size: clamp(0.72rem, 0.95vw, 0.9rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}

.facility-intro__accent {
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 16px;
  background: var(--color-blue);
}

.facility-intro__divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  background: rgba(15, 32, 44, 0.15);
}

.facility-intro__desc {
  margin: 4px 0 0;
  max-width: 44ch;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* LRT: açıklamayı başlığın yanından alıp mavi çizginin altına yerleştir. */
.hrs-intro-screen .facility-intro__header {
  right: auto;
  top: calc(var(--header-height) + clamp(120px, 15vh, 180px));
  width: min(34vw, 430px);
  flex-direction: column;
  gap: 0;
}

.hrs-intro-screen .facility-intro__divider {
  display: none;
}

.hrs-intro-screen .facility-intro__desc {
  margin-top: clamp(18px, 2.4vh, 26px);
  max-width: 38ch;
  font-weight: var(--fw-medium);
  color: #223449;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 2px rgba(255, 255, 255, 0.42),
    0 2px 7px rgba(9, 20, 34, 0.2);
}

.hrs-intro-screen .facility-intro__title-block h1 {
  color: #0d1724;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.68),
    0 0 3px rgba(255, 255, 255, 0.48),
    0 3px 9px rgba(9, 20, 34, 0.2);
}

.facility-intro__photo-btn {
  position: absolute;
  left: clamp(28px, 4.7vw, 78px);
  right: clamp(28px, 4.7vw, 78px);
  bottom: clamp(28px, 5vh, 64px);
  top: 46%;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 50px rgba(10, 20, 35, 0.28);
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms ease, box-shadow 320ms ease;
}

.facility-intro__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.facility-intro__photo-btn:hover,
.facility-intro__photo-btn.is-selected,
.facility-intro__photo-btn:focus-visible {
  transform: translateY(-10px);
  border-color: rgba(82, 153, 255, 0.88);
  box-shadow: 0 0 0 2px rgba(47, 125, 255, 0.28), 0 0 34px rgba(47, 125, 255, 0.5), 0 32px 58px rgba(10, 20, 35, 0.4);
  outline: none;
}

.facility-intro__photo-btn:hover .facility-intro__photo,
.facility-intro__photo-btn.is-selected .facility-intro__photo,
.facility-intro__photo-btn:focus-visible .facility-intro__photo {
  transform: scale(1.045);
}

.facility-intro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 15, 26, 0.92) 0%, rgba(7, 15, 26, 0.72) 32%, rgba(7, 15, 26, 0.22) 58%, rgba(7, 15, 26, 0) 80%);
}

.facility-intro__card-content {
  position: absolute;
  left: clamp(22px, 3.5vw, 52px);
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: min(46%, 460px);
  transform: translateY(-50%);
}

.facility-intro__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 4vw, 52px);
  height: clamp(40px, 4vw, 52px);
  margin-bottom: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(47, 125, 255, 0.18), 0 0 20px rgba(47, 125, 255, 0.45);
}

.facility-intro__card-icon img {
  width: 46%;
  height: 46%;
  filter: brightness(0) invert(1);
}

.facility-intro__card-title {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-white);
}

.facility-intro__card-accent {
  width: 40px;
  height: 3px;
  background: var(--color-blue);
}

.facility-intro__card-desc {
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.facility-intro__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.facility-intro__card-cta-arrow {
  transition: transform var(--transition-fast);
}

.facility-intro__photo-btn:hover .facility-intro__card-cta-arrow,
.facility-intro__photo-btn.is-selected .facility-intro__card-cta-arrow,
.facility-intro__photo-btn:focus-visible .facility-intro__card-cta-arrow {
  transform: translateX(5px);
  filter: drop-shadow(0 0 7px rgba(47, 125, 255, 0.78));
}

/* ==========================================================
   Main Plant — detay ekranı (bkz. script.js renderFacilityDetail). Solda
   başlık + 2 paragraf + 5 istatistik, sağda Key Figures'taki ile aynı
   eğik-kesim çerçevede otomatik çapraz geçişle kayan fotoğraflar.
   ========================================================== */
.facility-detail__content {
  position: absolute;
  left: clamp(28px, 4.7vw, 78px);
  top: calc(var(--header-height) + clamp(64px, 5vh, 96px));
  z-index: 2;
  width: min(46%, 620px);
}

.facility-detail__eyebrow {
  display: block;
  margin-top: 14px;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: var(--fw-bold);
  color: var(--color-blue);
}

.facility-detail__content h1 {
  margin: 0;
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text);
}

.facility-detail__accent {
  display: block;
  width: 40px;
  height: 3px;
  margin: 16px 0 20px;
  background: var(--color-blue);
}

.facility-detail__paragraph {
  margin: 0 0 16px;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.facility-detail__stats-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(15, 32, 44, 0.12);
}

.facility-detail__stats-row + .facility-detail__stats-row {
  border-top: none;
  margin-top: 18px;
  padding-top: 0;
}

.facility-stat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-right: clamp(16px, 2.4vw, 32px);
}

.facility-stat + .facility-stat {
  border-left: 1px solid rgba(15, 32, 44, 0.12);
  padding-left: clamp(16px, 2.4vw, 32px);
}

.facility-stat__icon {
  flex-shrink: 0;
  width: clamp(26px, 2.4vw, 34px);
  height: clamp(26px, 2.4vw, 34px);
  object-fit: contain;
  margin-top: 2px;
}

.facility-stat__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.facility-stat__value {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

.facility-stat__label {
  font-size: clamp(0.62rem, 0.8vw, 0.72rem);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  max-width: 14ch;
}

/* Main Plant detay ekranındaki fotoğraf paneli. */
.facility-photo-frame {
  position: absolute;
  right: 0;
  top: 0;
  width: 42%;
  height: 100%;
  clip-path: polygon(13% 0%, 100% 0%, 100% 100%, 0% 100%);
  background: var(--color-text);
  overflow: hidden;
}

/* ==========================================================
   HRS Projects — giriş ekranı (bkz. script.js renderHrsIntro). Üst başlık
   bloğu facility-intro ile aynı; altındaki TEK foto kartı ise Metro/Tram'ın
   dikey şehir kartlarından farklı olarak geniş/uzun ve tıklanmaz (gidilecek
   bir alt sayfa yok) — üstte şehir adı+bayrak, altta bir istatistik satırı.
   ========================================================== */
.hrs-card {
  /* <button> UA-varsayılanlarını sıfırla — önceden bir <div> idi, artık
     tıklanabilir olduğu için buton oldu (bkz. script.js renderHrsIntro). */
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  position: absolute;
  left: 50%;
  width: min(90.2vw, 1508px);
  /* 44vh/400px kartın kendi İÇİNDEKİ ray görünürlüğünü artırmıştı, ama kart
     büyüyünce ARKA PLANDAKİ (header ile kart arasındaki boşlukta görünen)
     ray çizgisini kapatmaya başladı. Kart tekrar küçültüldü — iç kırpma
     noktası (object-position:75%) aynı kaldığı için kartın kendi içindeki
     ray görünürlüğü büyük ölçüde korunuyor. */
  height: min(30vh, 280px);
  max-width: calc(100% - 48px);
  bottom: 2%;
  z-index: 3;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(10, 20, 35, 0.28);
  /* Tram/Metro'daki .city-card ile AYNI hover animasyonu — tüm Projects
     sayfalarındaki kartlar aynı tıklanabilir hissi versin. */
  cursor: pointer;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms ease, box-shadow 320ms ease;
}

/* Slide up + glow up — Tram/Metro'daki .city-card:hover ile AYNI dil, tüm
   Projects kartları aynı tıklanabilir hissi versin. */
.hrs-card:hover,
.hrs-card.is-selected,
.hrs-card:focus-visible {
  transform: translate(-50%, -10px);
  border-color: rgba(82, 153, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(47, 125, 255, 0.34), 0 0 34px rgba(47, 125, 255, 0.5), 0 32px 58px rgba(10, 20, 35, 0.42);
  outline: none;
}

.hrs-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Çok geniş LRT kartında kaynak görsel düşeyden yoğun biçimde kırpılır.
     Bursa aracı kaynak görselin üst-orta bandında olduğu için kırpma penceresi
     yukarı alınır; tavan, gövde ve ray hattı birlikte görünür. */
  object-position: 68% 28%;
  filter: brightness(0.78) contrast(1.12) saturate(0.9);
  transform: translateY(4%) scale(1.12);
  transform-origin: 68% 42%;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 360ms ease;
}

.hrs-card:hover .hrs-card__photo,
.hrs-card.is-selected .hrs-card__photo,
.hrs-card:focus-visible .hrs-card__photo {
  transform: translateY(4%) scale(1.18);
  filter: brightness(0.88) contrast(1.08) saturate(1);
}

.hrs-intro-screen > img:first-child {
  /* Bursa sahnesini de Tram/Metro ile aynı düşey ritme getirir: raylar kartın
     hemen üstünde kalır, arada küçük bir nefes payı bırakılır. */
  object-position: center center;
  transform: translateY(clamp(42px, 7vh, 72px)) scale(1.22);
  transform-origin: center center;
}

/* Bursa HRS aracı, arka plan raylarının sol-alt -> sağ-üst kaçış doğrultusunda
   küçüklükten gerçek ölçeğine yaklaşır. Kart z-index:3 olduğu için araç rayın
   kartın arkasında kalan bölümünde doğal olarak örtülür. */
.hrs-card__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(5, 12, 22, 0.75) 0%, rgba(5, 12, 22, 0.45) 20%, rgba(5, 12, 22, 0) 40%),
    linear-gradient(to top, rgba(5, 12, 22, 0.82) 0%, rgba(5, 12, 22, 0.48) 18%, rgba(5, 12, 22, 0) 36%);
}

.hrs-card__header {
  position: absolute;
  left: clamp(20px, 3vw, 40px);
  top: clamp(18px, 3vh, 32px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hrs-card__title {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-white);
}

.hrs-card__country {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

.hrs-card__flag {
  width: 22px;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.hrs-card__stats {
  position: absolute;
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(16px, 3vh, 28px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
}

.hrs-card__stat {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.8vw, 11px);
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.hrs-card__stat-icon {
  flex: 0 0 auto;
  width: clamp(22px, 2vw, 30px);
  height: clamp(22px, 2vw, 30px);
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.hrs-card__stat-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hrs-card__stat:first-child {
  padding-left: 0;
  border-left: none;
}

.hrs-card__stat-value {
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  white-space: nowrap;
}

.hrs-card__stat-label {
  font-size: clamp(0.62rem, 0.8vw, 0.72rem);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .facility-intro__header {
    flex-direction: column;
    gap: 18px;
  }

  .hrs-intro-screen .facility-intro__header {
    right: clamp(28px, 4.7vw, 78px);
    width: auto;
  }

  .facility-intro__divider {
    display: none;
  }

  .facility-detail__content {
    width: min(90%, 620px);
  }

  .facility-photo-frame {
    display: none;
  }

  .facility-intro__photo-btn {
    top: 40%;
  }

  .facility-intro__card-content {
    max-width: min(72%, 380px);
  }

  .hrs-card {
    max-width: calc(100% - 48px);
    height: min(320px, 42vh);
  }

  .hrs-card__stats {
    gap: 14px;
  }

  .hrs-card__stat {
    padding-left: 14px;
  }
}

/* ==========================================================
   5:2 Ultrawide — 3840 × 1536 exhibition display
   Keeps the existing layouts unchanged at standard desktop and mobile sizes.
   ========================================================== */
@media (min-width: 3000px) and (min-aspect-ratio: 2 / 1) and (max-aspect-ratio: 13 / 5) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  /* Home: the scenic background fills the panel; the portrait cards retain
     their proportions and use the display height as their shared scale. */
  .hero {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    overflow: hidden;
    background: #e8edf3;
  }

  .hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 35%;
  }

  .hero__brand {
    top: 5.8vh;
    width: 16vh;
    max-width: none;
  }

  .hero__brand-line {
    width: 58px;
    height: 3px;
    margin-top: 15px;
  }

  .hero__brand-tagline {
    margin-top: 12px;
    font-size: 0.86rem;
  }

  .hero__hit-area {
    top: 24vh;
    width: 44vh;
    height: 69vh;
    border-radius: 22px;
  }

  .hero__hit-area--projects {
    left: calc(50% - 74vh);
  }

  .hero__hit-area--key-figures {
    left: calc(50% - 22vh);
  }

  .hero__hit-area--facility {
    left: calc(50% + 30vh);
  }

  .hero__card-visual,
  .hero__card-bg {
    border-radius: 22px;
  }

  .hero__card-title {
    font-size: 1.45rem;
  }

  .hero__card-desc {
    margin-top: 12px;
    max-width: 28ch;
    font-size: 0.93rem;
  }

  .hero__card-arrow {
    top: 82.5vh;
    width: 62px;
    height: 62px;
  }

  .hero__card-arrow--projects {
    left: calc(50% - 52vh);
  }

  .hero__card-arrow--key-figures {
    left: 50%;
  }

  .hero__card-arrow--facility {
    left: calc(50% + 52vh);
  }

  .hero__nav {
    top: 58%;
    width: 72px;
    height: 72px;
  }

  .hero__nav--prev {
    left: 5%;
  }

  .hero__nav--next {
    right: 5%;
  }

  /* Shared full-screen panels */
  .subpanel__breadcrumb {
    top: calc(var(--header-height) + 18px);
    left: 72px;
    gap: 14px;
    font-size: 0.9rem;
  }

  .subpanel__breadcrumb-home {
    width: 20px;
    height: 20px;
  }

  /* Projects hub: keep the three diagonal slices, but use more of the upper
     band and give their labels a display-appropriate scale. */
  .screen-hotspot[data-hotspot-id="tram"],
  .screen-hotspot[data-hotspot-id="metro"],
  .screen-hotspot[data-hotspot-id="hrs"] {
    top: 0 !important;
    height: 100% !important;
  }

  .screen-card-copy {
    top: 12%;
  }

  .screen-card-copy__title {
    margin-top: 16px;
    font-size: 2.15rem;
  }

  .screen-card-copy__desc {
    margin-top: 14px;
    max-width: 31ch;
    font-size: 1.05rem;
  }

  /* Key figures: expand the orbit and reserve a wider image story panel. */
  .keyfigure-orbit-system {
    top: 54%;
    width: min(43vw, 78vh);
    max-width: none;
  }

  .keyfigure-orbit-system.is-revealed {
    left: 29%;
  }

  .keyfigure-stat {
    --badge-size: 82px;
    gap: 0.85em;
    max-width: 240px;
  }

  .keyfigure-stat__value {
    font-size: 1.55rem;
  }

  .keyfigure-stat__label {
    font-size: 0.82rem;
  }

  .keyfigure-photo-panel {
    width: 42%;
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  .keyfigure-photo-panel__info {
    left: 11%;
    right: 7%;
    bottom: 7%;
    gap: 18px;
  }

  .keyfigure-photo-panel__icon {
    width: 64px;
  }

  .keyfigure-photo-panel__value {
    font-size: 1.8rem;
  }

  .keyfigure-photo-panel__label,
  .keyfigure-photo-panel__desc {
    font-size: 0.9rem;
  }

  /* Tram / Metro carousel: intro occupies the left stage while four larger
     cards spread across the right two-thirds of the display. */
  .city-carousel__photo {
    transform: none;
    object-position: center 35%;
  }

  .city-carousel__intro {
    left: 120px;
    top: calc(var(--header-height) + 150px);
    width: 650px;
  }

  .city-carousel-screen--metro .city-carousel__intro {
    width: 760px;
  }

  .city-carousel__intro h1 {
    font-size: 4.4rem;
  }

  .city-carousel__intro-line {
    width: 64px;
    margin: 28px 0 22px;
  }

  .city-carousel__intro p {
    max-width: 540px;
    font-size: 1.12rem;
  }

  .city-carousel {
    /* Dış wrapper viewport merkezine bağlıdır; içteki track kart/slider
       hareketini bağımsız sürdürür. 5000 px genişlikte merkez x=2500 olur. */
    left: 50%;
    bottom: 5vh;
    width: max-content;
    gap: 36px;
    max-width: none;
    transform: translateX(-50%);
  }

  .city-carousel__track {
    gap: 44px;
  }

  .city-card {
    width: 410px;
    height: 518px;
    border-radius: 20px;
  }

  .city-card__header {
    padding: 18px 54px 0 18px;
    gap: 7px;
  }

  .city-card__title {
    font-size: 1.25rem;
  }

  .city-card__country {
    gap: 8px;
    font-size: 0.78rem;
  }

  .city-card__flag {
    width: 24px;
  }

  .city-card__arrow {
    top: 16px;
    right: 18px;
    font-size: 30px;
  }

  .city-card__stats {
    left: 14px;
    right: 14px;
    bottom: 14px;
    min-height: 58px;
  }

  .city-card__stat {
    gap: 9px;
    padding: 0 12px;
  }

  .city-card__stat-icon {
    width: 25px;
    height: 29px;
  }

  .city-card__stat-value {
    font-size: 0.95rem;
  }

  .city-card__stat-label {
    font-size: 0.66rem;
  }

  .city-carousel__nav {
    width: 62px;
    height: 62px;
  }

  /* Vehicle detail: remove the additional zoom used by 16:9 displays so the
     already-wide viewport keeps as much of each source image as possible. */
  .city-detail-screen,
  .city-detail-screen--antalya,
  .city-detail-screen--belgrad,
  .city-detail-screen--iasi,
  .city-detail-screen--kayseri,
  .city-detail-screen--group-tram.city-detail-screen--kocaeli,
  .city-detail-screen--napoli,
  .city-detail-screen--samsun,
  .city-detail-screen--timisoara,
  .city-detail-screen--group-metro.city-detail-screen--istanbul,
  .city-detail-screen--group-metro.city-detail-screen--kocaeli,
  .city-detail-screen--bangkok-2018,
  .city-detail-screen--bursa {
    --detail-photo-scale: 1;
    --detail-photo-shift-y: 0;
    --detail-photo-origin: center center;
  }

  .city-detail__intro,
  .city-detail-screen--group-metro .city-detail__intro {
    top: calc(var(--header-height) + 18px);
    width: 820px;
  }

  .city-detail__intro h1 {
    font-size: 4rem;
  }

  .city-detail__desc {
    max-width: 58ch;
    font-size: 1.08rem;
  }

  .city-detail__variant-switch {
    left: 72px;
  }

  .city-detail__stats {
    bottom: 38px;
    max-width: 90vw;
  }

  .city-detail-stat {
    gap: 12px;
    padding: 0 34px;
  }

  .city-detail-stat__icon {
    width: 38px;
    height: 38px;
  }

  .city-detail-stat__value {
    font-size: 1.25rem;
  }

  .city-detail-stat__label {
    font-size: 0.78rem;
  }

  /* Facility hub: copy on the left, a broad cinematic plant card on the right. */
  .facility-intro__header {
    left: 120px;
    right: auto;
    top: calc(var(--header-height) + 130px);
    width: 760px;
    flex-direction: column;
    gap: 22px;
  }

  .facility-intro__divider {
    width: 72px;
    height: 1px;
    align-self: auto;
  }

  .facility-intro__title-block h1 {
    font-size: 4rem;
  }

  .facility-intro__tagline {
    font-size: 1rem;
  }

  .facility-intro__desc {
    max-width: 58ch;
    font-size: 1.08rem;
  }

  .facility-intro__photo-btn {
    left: 980px;
    right: 120px;
    top: 18%;
    bottom: 7%;
    border-radius: 24px;
  }

  .facility-intro__card-content {
    left: 70px;
    max-width: 600px;
    gap: 14px;
  }

  .facility-intro__card-title {
    font-size: 2.35rem;
  }

  .facility-intro__card-desc {
    font-size: 1rem;
  }

  /* Facility detail uses the full horizontal split instead of retaining a
     narrow 620px copy column. */
  .facility-detail__content {
    left: 120px;
    top: calc(var(--header-height) + 105px);
    width: 42%;
    max-width: none;
  }

  .facility-detail__content h1 {
    font-size: 4rem;
  }

  .facility-detail__paragraph {
    max-width: 1000px;
    font-size: 1rem;
  }

  .facility-detail__stats-row {
    gap: 36px;
    margin-top: 28px;
    padding-top: 28px;
  }

  .facility-stat {
    gap: 14px;
    padding-right: 36px;
  }

  .facility-stat + .facility-stat {
    padding-left: 36px;
  }

  .facility-stat__icon {
    width: 40px;
    height: 40px;
  }

  .facility-stat__value {
    font-size: 1.18rem;
  }

  .facility-stat__label {
    font-size: 0.75rem;
  }

  .facility-photo-frame {
    width: 46%;
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  /* LRV hub: the text remains on the left and the card becomes the primary
     right-side feature instead of a capped strip at the bottom. */
  .hrs-intro-screen .facility-intro__header {
    left: 120px;
    top: calc(var(--header-height) + 150px);
    width: 720px;
  }

  .hrs-card {
    left: 980px;
    right: 120px;
    bottom: 7%;
    width: auto;
    height: 64%;
    max-width: none;
    transform: none;
    border-radius: 24px;
  }

  .hrs-card:hover,
  .hrs-card.is-selected,
  .hrs-card:focus-visible {
    transform: translateY(-10px);
  }

  .hrs-card__header {
    left: 54px;
    top: 42px;
  }

  .hrs-card__title {
    font-size: 2.35rem;
  }

  .hrs-card__country {
    font-size: 0.9rem;
  }

  .hrs-card__stats {
    left: 54px;
    right: 54px;
    bottom: 38px;
    gap: 52px;
  }

  .hrs-card__stat {
    gap: 12px;
    padding-left: 52px;
  }

  .hrs-card__stat-icon {
    width: 34px;
    height: 34px;
  }

  .hrs-card__stat-value {
    font-size: 1.25rem;
  }

  .hrs-card__stat-label {
    font-size: 0.76rem;
  }
}

/* 5:2 LED ekranlarda %100 tarayıcı yakınlaştırması referans alınır.
   Arka plan görseli viewport'u y=0 noktasından itibaren doldurur; ek kaydırma,
   scale veya üst kenar dolgusu uygulanmaz. */
@media (min-width: 1200px) and (min-aspect-ratio: 12 / 5) and (max-aspect-ratio: 13 / 5) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  html {
    /* Tarayıcının %100 ölçeğindeki standart 16 px kök boyutunu 5:2 sahnenin
       tipografi ve clamp hesapları için açık referans haline getirir. */
    font-size: 16px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  .hero {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    overflow: hidden;
  }

  .hero__image,
  .subpanel__screen > img:first-child {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: none !important;
    /* Tüm 2560x1440 kaynaklarda aynı 5:2 kırpım penceresi kullanılır. Böylece
       ray/araç perspektifi bozulmadan alt sahne ortak seviyede kalır; yalnızca
       üst ve alt boşluğun kadraja giren miktarı eşitlenir. */
    object-position: center 35% !important;
  }

  /* Bursa detayında aynı fotoğraf maske altında ikinci kez arka plan olarak
     kullanılıyor. İki katmanı aynı odakta tutarak üst geçişte kaymayı önle. */
  .city-detail-screen--bursa {
    background-position: center 35%;
  }

  .hero__brand {
    top: 5.8vh;
    width: 6.4vw;
    max-width: none;
  }

  .hero__hit-area {
    top: 24vh;
    width: 17.6vw;
    height: 69vh;
  }

  .hero__hit-area--projects {
    left: 20.4%;
  }

  .hero__hit-area--key-figures {
    left: 41.2%;
  }

  .hero__hit-area--facility {
    left: 62%;
  }

  .hero__card-arrow {
    top: 82.5vh;
  }

  .hero__card-arrow--projects {
    left: 29.2%;
  }

  .hero__card-arrow--key-figures {
    left: 50%;
  }

  .hero__card-arrow--facility {
    left: 70.8%;
  }
}

/* Projects ailesindeki ana içerik gruplarını aynı ölçüde hafifçe aşağı alır.
   Arka plan ve sol üst ana menü yerinde kalır. Bireysel translate özelliği,
   bileşenlerin mevcut hover/geçiş transformlarını bozmadan çalışır. */
.subpanel--projects {
  --projects-content-shift-y: clamp(10px, 1.5vh, 20px);
}

.subpanel--projects .subpanel__breadcrumb,
.subpanel--projects .city-carousel,
.subpanel--projects .city-detail__intro,
.subpanel--projects .city-detail__variant-switch,
.subpanel--projects .city-detail__stats,
.subpanel--projects .hrs-intro-screen .facility-intro__header,
.subpanel--projects .hrs-card {
  translate: 0 var(--projects-content-shift-y);
}

/* 5000×2000 LED etkileşim ölçeği
   --------------------------------
   Büyük tıklama hedefleri (hero kartları, Projects hotspot'ları, Facility ve
   LRV kartları) zaten yüzde/vh tabanlıdır. Sabit px kullanan kontroller ise
   3840 -> 5000 aralığında küçülmüş görünmesin diye viewport ile birlikte
   büyür. Kart wrapper'ı ve hareket eden track ayrı kalır; slider geometrisine
   veya JavaScript durumuna müdahale edilmez. */
@media (min-width: 3000px) and (min-aspect-ratio: 2 / 1) and (max-aspect-ratio: 13 / 5) {
  html {
    /* 3840×1536'da yaklaşık 16 px, 5000×2000'de 20 px. */
    font-size: clamp(16px, 0.4vw, 20px);
  }

  .hero__card-arrow {
    width: clamp(62px, 1.62vw, 81px);
    height: clamp(62px, 1.62vw, 81px);
  }

  .hero__nav {
    width: clamp(72px, 1.88vw, 94px);
    height: clamp(72px, 1.88vw, 94px);
  }

  .hero__card-arrow > span,
  .hero__nav > span {
    width: clamp(12px, 0.32vw, 16px);
    height: clamp(12px, 0.32vw, 16px);
    border-top-width: clamp(2px, 0.06vw, 3px);
    border-right-width: clamp(2px, 0.06vw, 3px);
  }

  .subpanel__breadcrumb {
    top: calc(var(--header-height) + clamp(18px, 1.17vh, 24px));
    left: clamp(72px, 1.88vw, 94px);
    gap: clamp(14px, 0.38vw, 19px);
    font-size: clamp(0.9rem, 0.4vw, 1rem);
  }

  .subpanel__breadcrumb-link {
    min-height: clamp(44px, 2.5vh, 50px);
    padding: 0 clamp(8px, 0.24vw, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .subpanel__breadcrumb-home {
    width: clamp(44px, 2.5vh, 50px);
    height: clamp(44px, 2.5vh, 50px);
  }

  .subpanel__breadcrumb-home svg {
    width: clamp(24px, 1.5vh, 30px);
    height: clamp(24px, 1.5vh, 30px);
  }

  .keyfigure-stat {
    --badge-size: clamp(92px, 6vh, 120px);
    max-width: clamp(260px, 16vh, 320px);
  }

  .city-carousel {
    gap: clamp(36px, 0.94vw, 47px);
  }

  .city-carousel__track {
    gap: clamp(44px, 1.14vw, 57px);
  }

  .city-card {
    width: clamp(410px, 10.8vw, 540px);
    height: clamp(518px, 34.1vh, 682px);
    border-radius: clamp(20px, 1.3vh, 26px);
  }

  .city-card__header {
    padding: clamp(18px, 1.17vh, 24px) clamp(54px, 3.52vh, 70px) 0 clamp(18px, 1.17vh, 24px);
    gap: clamp(7px, 0.46vh, 9px);
  }

  .city-card__flag {
    width: clamp(24px, 1.56vh, 31px);
  }

  .city-card__arrow {
    top: clamp(16px, 1.04vh, 21px);
    right: clamp(18px, 1.17vh, 24px);
    font-size: clamp(30px, 1.95vh, 39px);
  }

  .city-card__stats {
    left: clamp(14px, 0.91vh, 18px);
    right: clamp(14px, 0.91vh, 18px);
    bottom: clamp(14px, 0.91vh, 18px);
    min-height: clamp(58px, 3.77vh, 75px);
  }

  .city-card__stat {
    gap: clamp(9px, 0.59vh, 12px);
    padding: 0 clamp(12px, 0.78vh, 16px);
  }

  .city-card__stat-icon {
    width: clamp(25px, 1.63vh, 33px);
    height: clamp(29px, 1.89vh, 38px);
  }

  .city-carousel__nav {
    width: clamp(72px, 4.5vh, 90px);
    height: clamp(72px, 4.5vh, 90px);
  }

  .city-carousel__nav > span {
    width: clamp(14px, 1vh, 20px);
    height: clamp(14px, 1vh, 20px);
    border-top-width: clamp(2px, 0.15vh, 3px);
    border-right-width: clamp(2px, 0.15vh, 3px);
  }

  .city-detail__variant-switch {
    left: clamp(72px, 1.88vw, 94px);
    gap: clamp(3px, 0.25vh, 5px);
    padding: clamp(5px, 0.4vh, 8px);
  }

  .city-detail__variant-switch::before {
    padding: clamp(7px, 0.5vh, 10px) clamp(12px, 0.8vh, 16px) clamp(4px, 0.3vh, 6px);
    font-size: 0.7rem;
  }

  .city-detail__variant-button {
    min-width: clamp(132px, 8vh, 160px);
    min-height: clamp(56px, 3.5vh, 70px);
    padding: clamp(10px, 0.65vh, 13px) clamp(20px, 1.3vh, 26px);
    font-size: 0.9rem;
  }

  .technical-specs__trigger {
    min-width: clamp(180px, 4.8vw, 240px);
    min-height: clamp(56px, 3.5vh, 70px);
    padding: clamp(14px, 0.9vh, 18px) clamp(26px, 1.6vh, 32px);
    font-size: 0.9rem;
  }

  .technical-specs__close {
    width: clamp(56px, 3.5vh, 70px);
    height: clamp(56px, 3.5vh, 70px);
    font-size: clamp(1.6rem, 1.8vw, 2.25rem);
  }

}

/* ==========================================================
   Araç detay bilgi düzeni — tüm çözünürlükler
   Şehir/ülke sol orta hatta, View More aynı hatta sağda; dört kısa özellik
   aracın altında, ekranın alt merkezinde tek bir bilgi şeridi olarak durur.
   ========================================================== */
@media (min-width: 721px) {
  .city-detail__intro,
  .city-detail-screen--group-metro .city-detail__intro {
    left: clamp(24px, 3.5vw, 175px);
    top: 50%;
    width: min(27vw, 760px);
    transform: translateY(-50%);
    align-items: center;
    text-align: center;
  }

  .city-detail__intro h1 {
    font-size: clamp(2.4rem, 4.2vw, 5.25rem);
  }

  .city-detail__country {
    font-size: clamp(0.76rem, 0.9vw, 1rem);
  }

  .city-detail__flag {
    width: clamp(22px, 0.64vw, 32px);
  }

  .city-detail__desc {
    max-width: 42ch;
    text-align: center;
  }

  .city-detail__variant-switch {
    left: clamp(24px, 3.5vw, 175px);
    top: calc(50% + clamp(98px, 9vh, 180px));
  }

  .city-detail__stats {
    left: 50%;
    bottom: clamp(22px, 3.5vh, 70px);
    width: auto;
    max-width: 92vw;
    flex-wrap: nowrap;
    transform: translateX(-50%);
  }

  .city-detail-stat {
    padding-inline: clamp(14px, 1.8vw, 36px);
  }

  .city-detail__technical-specs {
    position: absolute;
    left: auto;
    right: clamp(24px, 3.5vw, 175px);
    top: calc(50% - clamp(22px, 1.75vh, 35px) + var(--projects-content-shift-y, 0px));
    bottom: auto;
    width: min(27vw, 760px);
    display: flex;
    justify-content: center;
    transform: none;
    z-index: 8;
  }

  .technical-specs__trigger {
    min-width: clamp(160px, 12vw, 260px);
    min-height: clamp(44px, 3.5vh, 70px);
  }
}

@media (max-width: 720px) {
  .city-detail__intro,
  .city-detail-screen--group-metro .city-detail__intro {
    left: 10px;
    top: 44%;
    width: 42vw;
    transform: translateY(-50%);
    align-items: center;
    text-align: center;
  }

  .city-detail__intro h1 {
    font-size: clamp(1.35rem, 7vw, 2.1rem);
  }

  .city-detail__country {
    gap: 5px;
    font-size: clamp(0.54rem, 2.2vw, 0.7rem);
  }

  .city-detail__flag {
    width: clamp(16px, 4.5vw, 20px);
  }

  .city-detail__desc {
    max-width: 100%;
    font-size: clamp(0.52rem, 2vw, 0.68rem);
    line-height: 1.3;
    text-align: center;
  }

  .city-detail__variant-switch {
    left: 10px;
    top: 58%;
  }

  .city-detail__stats {
    left: 8px;
    bottom: calc(10px + var(--projects-content-shift-y, 0px));
    width: calc(100% - 16px);
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    transform: none;
  }

  .city-detail-stat {
    min-width: 0;
    padding: 0 5px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
  }

  .city-detail-stat__icon {
    width: clamp(16px, 5vw, 22px);
    height: clamp(16px, 5vw, 22px);
    margin-top: 0;
  }

  .city-detail-stat__text {
    align-items: center;
  }

  .city-detail-stat__value {
    font-size: clamp(0.62rem, 3vw, 0.78rem);
  }

  .city-detail-stat__label {
    max-width: 12ch;
    font-size: clamp(0.4rem, 1.7vw, 0.52rem);
  }

  .city-detail__technical-specs {
    position: absolute;
    left: auto;
    right: 10px;
    top: calc(44% - 19px + var(--projects-content-shift-y, 0px));
    bottom: auto;
    width: 42vw;
    display: flex;
    justify-content: center;
    transform: none;
    z-index: 8;
  }

  .technical-specs__trigger {
    min-width: min(118px, 100%);
    min-height: 38px;
    padding: 10px 15px;
    font-size: 0.58rem;
  }
}

/* ==========================================================
   Dokunmatik imleç — fare imleci olmayan dokunmatik ekranlarda (kiosk/tablet)
   parmağın/işaretçinin konumunu görünür kılan özel bir gösterge (bkz. js/script.js
   pointermove/pointerdown/pointerup dinleyicileri, #touchCursor'ı taşıyıp
   ölçeklendiriyor). Tıklamaları hiç engellememesi için pointer-events:none.
   ========================================================== */
.touch-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(47, 125, 255, 0.85);
  background: rgba(47, 125, 255, 0.16);
  box-shadow: 0 2px 10px rgba(10, 20, 35, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translate(-100px, -100px) scale(1);
  transition: transform 90ms ease-out, opacity 150ms ease-out;
  will-change: transform;
}

.touch-cursor.is-visible {
  opacity: 1;
}

.touch-cursor.is-pressed {
  transform-origin: center;
  transition: transform 90ms ease-out, opacity 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  /* Fare + hassas işaretçi olan cihazlarda (masaüstü) zaten bir imleç var —
     ekstra dokunmatik gösterge burada gereksiz/rahatsız edici olur. */
  .touch-cursor {
    display: none;
  }
}

/* ==========================================================
   Accessibility — prefers-reduced-motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  /* Sürekli tekrarlayan crossfade döngüsü 0.01ms'e sıkıştırılırsa titremeye
     dönüşür — bunun yerine tamamen durdurup ilk görselde sabit bırakılır. */
  .keyfigure-photo-panel__img--crossfade {
    animation: none !important;
    opacity: 1;
  }

  .keyfigure-photo-panel__img--crossfade:nth-of-type(2) {
    opacity: 0;
  }

}
/* ==========================================================
   5000 × 2000 LED — comprehensive interface scale
   5:2 sahnede yalnızca arka plan değil; metin, logo, kart, ikon ve tüm
   etkileşim hedefleri fiziksel ekranla birlikte büyür. Değerler 5000 px
   genişlik / 2000 px yükseklik referansına göre vw-vh tabanlıdır.
   ========================================================== */
@media (min-width: 3000px) and (min-aspect-ratio: 2 / 1) and (max-aspect-ratio: 13 / 5) {
  html {
    /* 3840×1536'da ~24.6 px, 5000×2000'de 32 px. Tüm rem tabanlı yazılar
       ve iç boşluklar aynı oranda büyür. */
    font-size: clamp(24px, 0.64vw, 32px);
  }

  .subpanel--projects {
    --projects-content-shift-y: clamp(20px, 1.5vh, 30px);
  }

  /* Home — logo, üç ana kart ve navigasyon */
  .hero__brand {
    top: 4.5vh;
    width: 8vw;
  }

  .hero__brand-line {
    width: 1.5vw;
    height: 0.22vh;
    margin-top: 1vh;
  }

  .hero__brand-tagline {
    margin-top: 0.8vh;
    font-size: 0.78rem;
  }

  .hero__hit-area {
    top: 23vh;
    width: 18.5vw;
    height: 70vh;
    border-radius: 1.5vh;
  }

  .hero__hit-area--projects {
    left: 19.25%;
  }

  .hero__hit-area--key-figures {
    left: 40.75%;
  }

  .hero__hit-area--facility {
    left: 62.25%;
  }

  .hero__card-visual,
  .hero__card-bg {
    border-radius: 1.5vh;
  }

  .hero__card-title {
    font-size: 1.45rem;
  }

  .hero__card-desc {
    margin-top: 0.8vh;
    font-size: 0.9rem;
    line-height: 1.42;
  }

  .hero__card-arrow {
    top: 82vh;
    width: 5.5vh;
    height: 5.5vh;
  }

  .hero__card-arrow--projects {
    left: 28.5%;
  }

  .hero__card-arrow--key-figures {
    left: 50%;
  }

  .hero__card-arrow--facility {
    left: 71.5%;
  }

  .hero__nav {
    width: 6vh;
    height: 6vh;
  }

  .hero__card-arrow > span,
  .hero__nav > span {
    width: 0.9vh;
    height: 0.9vh;
    border-top-width: 0.16vh;
    border-right-width: 0.16vh;
  }

  /* Tüm alt sayfalardaki sol üst yol menüsü */
  .subpanel__breadcrumb {
    top: 1.2vh;
    left: 2.4vw;
    gap: 0.65vw;
    font-size: 0.9rem;
  }

  .subpanel__breadcrumb-link {
    min-height: 4.5vh;
    padding-inline: 0.35vw;
  }

  .subpanel__breadcrumb-home {
    width: 3.5vh;
    height: 3.5vh;
  }

  .subpanel__breadcrumb-home svg {
    width: 2.1vh;
    height: 2.1vh;
  }

  /* Projects ana seçim ekranı */
  .screen-card-copy {
    top: 11%;
  }

  .screen-card-copy__title {
    margin-top: 1vh;
    font-size: 2.15rem;
  }

  .screen-card-copy__accent {
    width: 1vw;
    height: 0.2vh;
    margin-top: 0.7vh;
  }

  .screen-card-copy__desc {
    margin-top: 0.9vh;
    max-width: 32ch;
    font-size: 1rem;
  }

  /* Key Figures — yörünge rozetleri ve sağ görsel paneli */
  .keyfigure-orbit-system {
    top: 53.5%;
    width: min(45vw, 82vh);
  }

  .keyfigure-stat {
    --badge-size: 9vh;
    gap: 0.9em;
    max-width: 14vw;
  }

  .keyfigure-stat--stack-bottom {
    max-width: 8vw;
  }

  .keyfigure-stat__value {
    font-size: 1.45rem;
  }

  .keyfigure-stat__label {
    font-size: 0.72rem;
  }

  .keyfigure-photo-panel {
    width: 43%;
  }

  .keyfigure-photo-panel__info {
    gap: 1.2vh;
  }

  .keyfigure-photo-panel__stat {
    gap: 1.2vh;
  }

  .keyfigure-photo-panel__icon {
    width: 4.5vh;
  }

  .keyfigure-photo-panel__value {
    font-size: 1.65rem;
  }

  .keyfigure-photo-panel__label,
  .keyfigure-photo-panel__desc {
    font-size: 0.72rem;
  }

  /* Tram / Metro şehir kartları ve slider kontrolleri */
  .city-carousel {
    bottom: 3.5vh;
    gap: 1vw;
  }

  .city-carousel__track {
    gap: 1vw;
  }

  .city-card {
    width: 12vw;
    height: 38vh;
    border-radius: 1.4vh;
  }

  .city-card__header {
    padding: 1.25vh 3.4vh 0 1.25vh;
    gap: 0.5vh;
  }

  .city-card__title {
    font-size: 1rem;
  }

  .city-card__country {
    gap: 0.5vh;
    font-size: 0.62rem;
  }

  .city-card__flag {
    width: 1.6vh;
  }

  .city-card__arrow {
    top: 1.1vh;
    right: 1.2vh;
    font-size: 2rem;
  }

  .city-card__stats {
    left: 1vh;
    right: 1vh;
    bottom: 1vh;
    min-height: 5.2vh;
  }

  .city-card__stat {
    gap: 0.6vh;
    padding-inline: 0.8vh;
  }

  .city-card__stat-icon {
    width: 2.4vh;
    height: 2.4vh;
  }

  .city-card__stat-value {
    font-size: 0.78rem;
  }

  .city-card__stat-label {
    font-size: 0.52rem;
  }

  .city-carousel__nav {
    width: 5.5vh;
    height: 5.5vh;
  }

  .city-carousel__nav > span {
    width: 1.1vh;
    height: 1.1vh;
    border-top-width: 0.17vh;
    border-right-width: 0.17vh;
  }

  /* Araç detayları — şehir/ülke, dört özellik ve View More */
  .city-detail__intro,
  .city-detail-screen--group-metro .city-detail__intro {
    left: 3.5vw;
    width: 27vw;
  }

  .city-detail__intro h1 {
    font-size: 5rem;
  }

  .city-detail__country {
    gap: 0.55vh;
    font-size: 0.8rem;
  }

  .city-detail__flag {
    width: 2.3vh;
  }

  .city-detail__desc {
    font-size: 0.72rem;
  }

  .city-detail__stats {
    bottom: 3.5vh;
    max-width: 92vw;
  }

  .city-detail-stat {
    gap: 0.75vh;
    padding-inline: 1.8vw;
  }

  .city-detail-stat__icon {
    width: 3vh;
    height: 3vh;
  }

  .city-detail-stat__value {
    font-size: 0.85rem;
  }

  .city-detail-stat__label {
    font-size: 0.52rem;
  }

  .city-detail__technical-specs {
    right: 3.5vw;
    width: 27vw;
  }

  .technical-specs__trigger {
    min-width: 12vw;
    min-height: 5.5vh;
    padding: 1.1vh 2vw;
    font-size: 0.78rem;
  }

  .technical-specs__trigger::after {
    right: 1.2vw;
    font-size: 1.1rem;
  }

  /* Teknik özellik penceresi — tüm tablo kaydırma gerektirmeden okunur. */
  .technical-specs__overlay {
    padding: 3vh 3vw;
  }

  .technical-specs__surface {
    width: min(88vw, 4400px);
    max-height: 94vh;
    border-radius: 1.4vh;
  }

  .technical-specs__header {
    padding: 1.5vh 2.4vw 1.2vh;
  }

  .technical-specs__eyebrow,
  .technical-specs__header p {
    font-size: 0.62rem;
  }

  .technical-specs__header h2 {
    font-size: 1.65rem;
  }

  .technical-specs__close {
    top: 1.2vh;
    right: 1.2vw;
    width: 4.5vh;
    height: 4.5vh;
    font-size: 1.7rem;
  }

  .technical-specs__tables {
    gap: 1.6vw;
    padding: 1.2vh 2.4vw 1.5vh;
  }

  .technical-specs__table {
    font-size: 0.62rem;
  }

  .technical-specs__table caption {
    padding-bottom: 0.6vh;
    font-size: 0.8rem;
  }

  .technical-specs__table thead th {
    padding: 0.45vh 0.7vw;
  }

  .technical-specs__table tbody th,
  .technical-specs__table tbody td {
    padding: 0.32vh 0.7vw;
    line-height: 1.2;
  }

  /* Our Facility ve Main Plant */
  .facility-intro__header {
    left: 2.4vw;
    top: 6.5vh;
    width: 24vw;
    gap: 1.4vh;
  }

  .facility-intro__title-block h1 {
    font-size: 4rem;
  }

  .facility-detail__content h1 {
    font-size: 5.25rem;
  }

  .facility-intro__tagline {
    font-size: 0.78rem;
  }

  .facility-intro__accent {
    width: 1.5vw;
    height: 0.2vh;
  }

  .facility-detail__accent {
    width: 2.2vw;
    height: 0.24vh;
    margin: 1.2vh 0 1.5vh;
  }

  .facility-intro__desc {
    font-size: 0.72rem;
    line-height: 1.55;
  }

  .facility-detail__paragraph {
    max-width: 40vw;
    margin-bottom: 1.25vh;
    font-size: 1.05rem;
    line-height: 1.58;
  }

  .facility-intro__photo-btn {
    left: 26vw;
    right: 2.4vw;
    top: 16%;
    bottom: 6%;
    border-radius: 1.5vh;
  }

  .facility-intro__card-content {
    left: 2.2vw;
    max-width: 16vw;
    gap: 0.9vh;
  }

  .facility-intro__card-icon {
    width: 4.5vh;
    height: 4.5vh;
  }

  .facility-intro__card-title {
    font-size: 1.6rem;
  }

  .facility-intro__card-desc,
  .facility-intro__card-cta {
    font-size: 0.7rem;
  }

  .facility-detail__content {
    left: 2.8vw;
    top: 8.5vh;
    width: 44%;
    max-width: none;
  }

  .facility-detail__eyebrow {
    margin-top: 1.2vh;
    font-size: 0.95rem;
  }

  .facility-detail__stats-row {
    max-width: 40vw;
    gap: 1.25vw;
    margin-top: 2.4vh;
    padding-top: 2.1vh;
  }

  .facility-detail__stats-row + .facility-detail__stats-row {
    margin-top: 1.5vh;
  }

  .facility-stat {
    gap: 1vh;
    padding-right: 1.25vw;
  }

  .facility-stat + .facility-stat {
    padding-left: 1.25vw;
  }

  .facility-stat__icon {
    width: 4.8vh;
    height: 4.8vh;
  }

  .facility-stat__value {
    font-size: 1.12rem;
  }

  .facility-stat__label {
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .facility-photo-frame {
    width: 48%;
  }

  /* LRV kartı kullanıldığı çözünürlüklerde */
  .hrs-intro-screen .facility-intro__header {
    left: 2.4vw;
    top: 7.5vh;
    width: 22vw;
  }

  .hrs-card {
    left: 26vw;
    right: 2.4vw;
    bottom: 6%;
    height: 66%;
    border-radius: 1.5vh;
  }

  .hrs-card__header {
    left: 2vw;
    top: 2.2vh;
    gap: 0.6vh;
  }

  .hrs-card__title {
    font-size: 1.6rem;
  }

  .hrs-card__country {
    gap: 0.5vh;
    font-size: 0.7rem;
  }

  .hrs-card__flag {
    width: 1.8vh;
  }

  .hrs-card__stats {
    left: 2vw;
    right: 2vw;
    bottom: 2vh;
    gap: 2vw;
  }

  .hrs-card__stat {
    gap: 0.7vh;
    padding-left: 2vw;
  }

  .hrs-card__stat-icon {
    width: 2.6vh;
    height: 2.6vh;
  }

  .hrs-card__stat-value {
    font-size: 0.82rem;
  }

  .hrs-card__stat-label {
    font-size: 0.52rem;
  }

  /* Dokunmatik LED ekran işaretçisi */
  .touch-cursor {
    width: 4.5vh;
    height: 4.5vh;
    margin: -2.25vh 0 0 -2.25vh;
    border-width: 0.12vh;
  }
}

/* ==========================================================
   Araç detayları — ortak alt bilgi yerleşimi
   Şehir/ülke sol altta; dört kısa özellik aynı yatay ikon+metin dilinde
   sağ altta; View More bu özellik grubunun hemen altında yer alır.
   ========================================================== */
.city-detail__intro {
  text-shadow: 0 2px 5px rgba(2, 8, 20, 0.82), 0 0 14px rgba(2, 8, 20, 0.48);
}

.city-detail__intro h1,
.city-detail__country,
.city-detail__desc {
  color: var(--color-white);
}

@media (min-width: 721px) {
  .city-detail__intro,
  .city-detail-screen--group-metro .city-detail__intro {
    left: clamp(24px, 3.5vw, 175px);
    right: auto;
    top: auto;
    bottom: clamp(28px, 4.5vh, 90px);
    width: min(31vw, 900px);
    transform: none;
    align-items: flex-start;
    text-align: left;
  }

  .city-detail__desc {
    text-align: left;
  }

  .city-detail__stats {
    left: auto;
    right: clamp(24px, 3.5vw, 175px);
    bottom: calc(clamp(28px, 3.2vh, 64px) + max(clamp(44px, 3.5vh, 70px), 5.5vh) + clamp(12px, 1.6vh, 32px));
    width: auto;
    max-width: 64vw;
    flex-wrap: nowrap;
    justify-content: flex-end;
    transform: none;
  }

  .city-detail-stat {
    min-width: 0;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .city-detail-stat__text {
    align-items: flex-start;
  }

  .city-detail__technical-specs {
    left: auto;
    right: clamp(24px, 3.5vw, 175px);
    top: auto;
    bottom: clamp(28px, 3.2vh, 64px);
    width: auto;
    display: flex;
    justify-content: flex-end;
    transform: none;
  }

  .subpanel--projects .city-detail__intro,
  .subpanel--projects .city-detail__stats {
    translate: none;
  }
}

/* 5000 × 2000 LED — araç detay alt bant ölçeği ve kolon hizası */
@media (min-width: 3000px) and (min-aspect-ratio: 2 / 1) and (max-aspect-ratio: 13 / 5) {
  .city-detail__intro,
  .city-detail-screen--group-metro .city-detail__intro {
    bottom: 3.2vh;
    width: 31vw;
  }

  .city-detail__intro h1 {
    font-size: 5.6rem;
  }

  .city-detail__country {
    gap: 0.7vh;
    font-size: 1rem;
  }

  .city-detail__flag {
    width: 2.8vh;
  }

  .city-detail__stats {
    right: 3.5vw;
    bottom: 11.4vh;
    width: 43vw;
    max-width: none;
    justify-content: flex-end;
  }

  .city-detail-stat {
    gap: 1vh;
    padding-inline: 1.5vw;
  }

  .city-detail-stat__icon {
    width: 3.8vh;
    height: 3.8vh;
  }

  .city-detail-stat__value {
    font-size: 1.1rem;
  }

  .city-detail-stat__label {
    font-size: 0.68rem;
  }

  .city-detail__technical-specs {
    right: 3.5vw;
    bottom: 3.2vh;
    width: 43vw;
    justify-content: flex-end;
  }

  .technical-specs__trigger {
    min-width: 14vw;
    min-height: 6.2vh;
    padding: 1.25vh 2.2vw;
    font-size: 1rem;
  }

  .technical-specs__trigger::after {
    right: 1.35vw;
    font-size: 1.25rem;
  }
}

@media (max-width: 720px) {
  .city-detail__intro,
  .city-detail-screen--group-metro .city-detail__intro {
    left: 10px;
    right: auto;
    top: auto;
    bottom: 12px;
    width: 40vw;
    transform: none;
    align-items: flex-start;
    text-align: left;
  }

  .city-detail__desc {
    text-align: left;
  }

  .city-detail__stats {
    left: auto;
    right: 10px;
    bottom: 56px;
    width: 52vw;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    transform: none;
  }

  .city-detail-stat {
    width: auto;
    min-width: 0;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    text-align: left;
  }

  .city-detail-stat + .city-detail-stat {
    border-left: 0;
  }

  .city-detail-stat__text {
    align-items: flex-start;
  }

  .city-detail__technical-specs {
    left: auto;
    right: 10px;
    top: auto;
    bottom: 10px;
    width: 52vw;
    display: flex;
    justify-content: flex-end;
    transform: none;
  }

  .subpanel--projects .city-detail__intro,
  .subpanel--projects .city-detail__stats {
    translate: none;
  }
}