/* ─────────────────────────────────────────────────────────────
   Landing hero — jeotermal animasyon katmanı

   Koordinat sistemi: artwork'ün gerçek boyutu 1672 × 941 px.
   .hero-art-stage bu oranda bir kutudur ve CSS'te object-fit:cover +
   object-position ile birebir aynı formülle boyutlanır/konumlanır.
   Görseller, SVG overlay ve hotspot katmanı stage'in içindedir; hepsi
   aynı ölçek, kırpma ve konumu paylaşır → hiçbir ekran genişliğinde
   kayma olmaz. Tüm geometri SVG viewBox (0 0 1672 941) içinde sabittir.
───────────────────────────────────────────────────────────── */

/* ─── Tema renkleri (tema geçişinde yumuşak değişsin diye @property) ─── */
@property --geo-hot          { syntax: '<color>'; inherits: true; initial-value: #f97316; }
@property --geo-hot-bright   { syntax: '<color>'; inherits: true; initial-value: #fbbf24; }
@property --geo-cold         { syntax: '<color>'; inherits: true; initial-value: #22d3ee; }
@property --geo-electric     { syntax: '<color>'; inherits: true; initial-value: #67e8f9; }
@property --geo-glow         { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --geo-label-bg     { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --geo-label-border { syntax: '<color>'; inherits: true; initial-value: #cbd5e1; }

:root,
[data-theme="light"] {
  --geo-hot:          #f97316;
  --geo-hot-bright:   #fbbf24;
  --geo-cold:         #0ea5e9;
  --geo-electric:     #22d3ee;
  --geo-glow:         #fff7ed;
  --geo-label-bg:     rgb(255 255 255 / .94);
  --geo-label-border: rgb(15 118 110 / .18);
  --geo-intensity:    .7;   /* light'ta glow ~%30 daha düşük */
}

[data-theme="dark"] {
  --geo-hot:          #fb923c;
  --geo-hot-bright:   #fde047;
  --geo-cold:         #22d3ee;
  --geo-electric:     #67e8f9;
  --geo-glow:         #ffffff;
  --geo-label-bg:     rgb(0 22 27 / .88);
  --geo-label-border: rgb(45 212 191 / .25);
  --geo-intensity:    1;
}

:root {
  --steam-slow: 1.35;   /* buhar tempo çarpanı */
  transition:
    --geo-hot .45s ease, --geo-hot-bright .45s ease, --geo-cold .45s ease,
    --geo-electric .45s ease, --geo-glow .45s ease,
    --geo-label-bg .45s ease, --geo-label-border .45s ease;
}

/* ─── Stage: artwork koordinat sistemi ─── */
.hero-artwork {
  container-type: size;
  overflow: hidden;   /* stage ve içindekiler birlikte kırpılır; yatay scroll oluşmaz */
  --art-w: 1672;
  --art-h: 941;
  --art-x: .92;   /* object-position x */
  --art-y: .72;   /* object-position y */
}

.hero-art-stage {
  /* cover: kutuyu tamamen kaplayan en küçük ölçek */
  --stage-w: max(100cqw, 100cqh * var(--art-w) / var(--art-h));
  --stage-h: calc(var(--stage-w) * var(--art-h) / var(--art-w));
  position: absolute;
  width: var(--stage-w);
  height: var(--stage-h);
  /* object-position: taşan kısım --art-x / --art-y oranında kırpılır */
  left: calc((100cqw - var(--stage-w)) * var(--art-x));
  top: calc((100cqh - var(--stage-h)) * var(--art-y));
}

/* Mobil kompozisyon: sadece stage'in kırpma noktası değişir, geometri aynı */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .hero-artwork { --art-x: .72; --art-y: .80; }
}

.hero-energy-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Kılavuz path'ler: sadece hareket rotası; normalde görünmez */
.geo-guide { fill: none; stroke: none; }
.geo-anchor { display: none; }

/* ─── Hizalama kontrolü: ?geo_debug=1 ─── */
.geo-debug .geo-guide {
  stroke: #ff00ff;
  stroke-width: 3;
  stroke-dasharray: 10 6;
  vector-effect: non-scaling-stroke;
}

.geo-debug { --geo-intensity: 2.5; }

.geo-debug .geo-anchor {
  display: inline;
  fill: #ff00ff;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Normal blend: screen modu artwork'ün zaten parlak bölgelerinde (lav, cyan havuz,
   metal türbin) görünür fark üretmiyordu. Efektler yarı saydam katman olarak çizilir. */
.hero-energy-overlay { mix-blend-mode: normal; }

/* Yoğunluk azaltma: koordinat değil eleman sayısı değişir.
   Yatay tablet ~%25 az; alt alta düzen (mobil + portre tablet) ~%50–60 az.
   geo-tablet-hide ⊂ geo-mobile-hide → mobilde ikisi birden gizlenir. */
@media (min-width: 1024px) and (max-width: 1279px),
       (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .geo-tablet-hide { display: none; }
}

@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .geo-mobile-hide { display: none; }
}

/* ─── Ortak keyframe'ler ─── */
@keyframes geo-dash-forward {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ═══ Aşama 2 — Rezervuar ═══ */
[data-theme="light"], :root { --res-lo: .35; --res-hi: .6; }
[data-theme="dark"]          { --res-lo: .4;  --res-hi: .7; }

/* Derin parıltı: nefes alır gibi */
.geo-res-glow {
  transform-box: fill-box;
  transform-origin: center;
  opacity: var(--res-lo);
  animation: geo-breathe 8s ease-in-out infinite;
}

@keyframes geo-breathe {
  0%, 100% { transform: scale(.95); opacity: var(--res-lo); }
  50%      { transform: scale(1.05); opacity: var(--res-hi); }
}

/* Çekirdek: ana parıltıdan biraz daha güçlü ve farklı fazda → lav "kaynıyor" hissi */
.geo-res-core {
  opacity: calc(var(--res-lo) * 1.2);
  animation: geo-breathe-core 5.5s ease-in-out -2s infinite;
}

@keyframes geo-breathe-core {
  0%, 100% { transform: scale(.96); opacity: calc(var(--res-lo) * 1.2); }
  50%      { transform: scale(1.05); opacity: calc(var(--res-hi) * 1.3); }
}

/* Kaynayan sıcak noktalar: lav yer yer parlayıp söner (çizgi yok) */
.geo-lava-spot {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: geo-lava-spot 7s ease-in-out infinite;
}

.geo-lava-spot--1 { animation-duration: 6s;   animation-delay: -1s; }
.geo-lava-spot--2 { animation-duration: 8s;   animation-delay: -3s; }
.geo-lava-spot--3 { animation-duration: 7s;   animation-delay: -5s; }
.geo-lava-spot--4 { animation-duration: 9s;   animation-delay: -2s; }
.geo-lava-spot--5 { animation-duration: 5.5s; animation-delay: -4s; }
.geo-lava-spot--6 { animation-duration: 6.5s; animation-delay: -2.5s; }
.geo-lava-spot--7 { animation-duration: 7.5s; animation-delay: -6s; }

@keyframes geo-lava-spot {
  0%, 100% { opacity: 0; transform: scale(.7); }
  50%      { opacity: calc(1.15 * var(--geo-intensity)); transform: scale(1.25); }
}

/* ═══ Aşama 3–4 — Akış parçacıkları ═══
   Hareket: SMIL animateMotion + mpath (viewBox ile ölçeklenir, JS yok).
   Fade in/out: SMIL opacity animate; tema rengi CSS değişkeninden. */
.geo-p--hot  .geo-p-halo { fill: url(#geoOrbHot);  opacity: calc(.62 * var(--geo-intensity)); }
.geo-p--hot  .geo-p-core { fill: var(--geo-hot-bright); }
.geo-p--cold .geo-p-halo { fill: url(#geoOrbCold); opacity: calc(.48 * var(--geo-intensity)); }
.geo-p--cold .geo-p-core { fill: var(--geo-glow); opacity: .9; }

/* Boru üzerinde çok hafif ilerleyen ışık (ikinci neon boru gibi görünmesin: ince + düşük opacity) */
.geo-flow-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 60 940;
  animation: geo-dash-forward 5.5s linear infinite;
}

.geo-flow-highlight--hot  { stroke: var(--geo-hot-bright); stroke-width: 5; opacity: calc(.2 * var(--geo-intensity)); }
.geo-flow-highlight--cold { stroke: var(--geo-cold); stroke-width: 4; opacity: calc(.15 * var(--geo-intensity)); animation-duration: 7s; }

/* Enjeksiyon noktası: havuz yüzeyinde yayılan perspektif halka, rezervuarı boyamadan */
.geo-ripple {
  fill: none;
  stroke: color-mix(in oklab, var(--geo-cold) 45%, #fff);   /* cyan havuz üstünde seçilsin */
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: geo-ripple 3.5s ease-out infinite;
}

.geo-ripple--late { animation-delay: -1.75s; }

@keyframes geo-ripple {
  0%   { transform: scale(.4); opacity: calc(1.3 * var(--geo-intensity)); }
  100% { transform: scale(3); opacity: 0; }
}

/* ═══ Aşama 5 — Santral (en sakin katman) ═══ */
[data-theme="light"], :root { --steam-max: .50; --geo-steam-core: #ffffff; --geo-steam-edge: #aebfcc; }
[data-theme="dark"]          { --steam-max: .46; --geo-steam-core: #eef5f8; --geo-steam-edge: #8fa6b5; }

/* Buhar ayrı SVG'de, normal blend */
.hero-energy-overlay--steam { mix-blend-mode: normal; }

/* Türbülanslı kenar: tek filtre, grup seviyesinde (form başına değil) */
.geo-steam { filter: url(#geoSteamWisp); }

@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .geo-steam { filter: none; }   /* en büyük mobil GPU kazancı: türbülans yok, gradient kenar yeter */
}

/* Buhar sütunu: her kuleden sık aralıklarla çıkan, üst üste binen küçük formlar.
   Her formun süresi, gecikmesi, rüzgâr sapması ve dönüşü inline değişkenlerle farklıdır.
   Davranış: ağızda yoğun → hızlı yükselir, yavaşlar → genişler, incelir → rüzgârla bükülür → dağılır */
.geo-steam-puff {
  fill: url(#geoSteamPuff);
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0;
  animation: geo-steam calc(var(--d, 8s) * var(--steam-slow)) linear calc(var(--delay, 0s) * var(--steam-slow)) infinite;
}

@keyframes geo-steam {
  0%   { opacity: 0;
         transform: translate(0, 0) rotate(0deg) scale(.45); }
  8%   { opacity: var(--steam-max);
         transform: translate(calc(var(--dx) * .04), -22px) rotate(calc(var(--rot) * .1)) scale(.6); }
  35%  { opacity: calc(var(--steam-max) * .8);
         transform: translate(calc(var(--dx) * .25), -78px) rotate(calc(var(--rot) * .4)) scale(1); }
  70%  { opacity: calc(var(--steam-max) * .35);
         transform: translate(calc(var(--dx) * .65), -130px) rotate(calc(var(--rot) * .8)) scale(1.5); }
  100% { opacity: 0;
         transform: translate(var(--dx), -168px) rotate(var(--rot)) scale(1.95); }
}

/* Türbin: çark elipsi üzerinde dolaşan kesikler + nabız */
.geo-turbine-ring {
  fill: none;
  stroke: url(#geoRingGrad);
  stroke-width: 4;
  stroke-dasharray: 60 40;   /* pathLength 1000 → 10 kesik */
  opacity: .1;
  animation:
    geo-dash-cycle 9s linear infinite,
    geo-ring-pulse 5.5s ease-in-out infinite;
}

/* İç elips: ters yönde, daha hızlı → kanat/göbek derinliği */
.geo-turbine-ring--inner {
  stroke-width: 2.5;
  stroke-dasharray: 30 45;
  animation:
    geo-dash-cycle 6s linear infinite reverse,
    geo-ring-pulse 5.5s ease-in-out -1.5s infinite;
}

/* Kesikler elips çevresinde bir tam tur */
@keyframes geo-dash-cycle { to { stroke-dashoffset: -1000; } }

@keyframes geo-ring-pulse {
  0%, 100% { opacity: calc(.4 * var(--geo-intensity)); }
  50%      { opacity: calc(.75 * var(--geo-intensity)); }
}

/* Merkez parıltı halkayla aynı ritimde nabız atar */
.geo-turbine-core {
  opacity: calc(.18 * var(--geo-intensity));
  animation: geo-core-pulse 5.5s ease-in-out infinite;
}

@keyframes geo-core-pulse {
  0%, 100% { opacity: calc(.25 * var(--geo-intensity)); }
  50%      { opacity: calc(.55 * var(--geo-intensity)); }
}

/* Jeneratör pulse: üretim parçacıklarının varış ritmi (5.5s / 3 = 1.833s) ile yaklaşık senkron */
.geo-gen-pulse {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: geo-gen-pulse 1.833s ease-out .37s infinite;
}

@keyframes geo-gen-pulse {
  0%, 30%  { opacity: 0; transform: scale(.7); }
  50%      { opacity: calc(.4 * var(--geo-intensity)); transform: scale(1.05); }
  100%     { opacity: 0; transform: scale(1.25); }
}

/* ═══ Aşama 6 — Şebeke (ikinci seviye) ═══ */
.geo-p--electric .geo-p-halo { fill: url(#geoOrbElectric); opacity: calc(.5 * var(--geo-intensity)); }
.geo-p--electric .geo-p-core { fill: var(--geo-glow); opacity: .9; }

.geo-flow-highlight--grid {
  stroke: var(--geo-electric);
  stroke-width: 3;
  stroke-dasharray: 80 920;
  opacity: calc(.16 * var(--geo-intensity));
  animation-duration: 8s;   /* "bazen" hissi: pulse'lardan yavaş */
}

/* Direk düğümleri: pulse geçişiyle yaklaşık senkron (4s / 2 = 2s) */
.geo-node {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: geo-node 2s ease-out infinite;
}

.geo-node--1 { animation-delay: .4s; }
.geo-node--2 { animation-delay: .12s; }

@keyframes geo-node {
  0%, 35% { opacity: 0; transform: scale(.6); }
  50%     { opacity: calc(.45 * var(--geo-intensity)); transform: scale(1); }
  100%    { opacity: 0; transform: scale(1.4); }
}

/* ═══ Aşama 7 — Hotspotlar ═══
   Anchor ve kart konumu artwork koordinatından stage yüzdesine çevrilir:
   left = x / 1672 · 100%, top = y / 941 · 100%. Kart boyutu CSS px (okunaklı kalır).
   Katmanlar: .hotspot-card (konum + parallax) › .hotspot-motion (giriş + süzülme)
              › .hotspot-body (görünüm + hover) — transform'lar birbirini ezmez. */
.hero-hotspots { margin: 0; padding: 0; list-style: none; }

.hotspot { position: absolute; inset: 0; pointer-events: none; }

.hotspot-card {
  position: absolute;
  left: calc(var(--cx) / var(--art-w) * 100%);
  top: calc(var(--cy) / var(--art-h) * 100%);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* Giriş: enerji akışı sırasıyla bir kez; sonra her kart kendi ritminde ±2px süzülür */
.hotspot-motion {
  animation:
    hs-in .6s cubic-bezier(.2, .7, .2, 1) calc(.5s + var(--i) * 130ms) both,
    hs-float calc(5s + var(--i) * .7s) ease-in-out calc(1.4s + var(--i) * .4s) infinite;
}

@keyframes hs-in {
  from { opacity: 0; translate: 0 5px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes hs-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -2px; }
}

.hotspot-body {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 8px 14px 8px 8px;
  border-radius: 12px;
  background: var(--geo-label-bg);
  border: 1px solid var(--geo-label-border);
  box-shadow: 0 8px 24px -12px rgb(15 23 42 / .35);
  color: var(--color-base-content);
  white-space: nowrap;
  cursor: default;
  transition: translate .2s ease, scale .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Hover yalnızca gerçek hover'ı olan cihazlarda */
@media (hover: hover) and (pointer: fine) {
  .hotspot-card:hover .hotspot-body {
    translate: 0 -2px;
    scale: 1.015;
    border-color: color-mix(in oklab, var(--landing-accent) 55%, transparent);
    box-shadow: 0 10px 28px -12px rgb(15 23 42 / .4), 0 0 0 3px color-mix(in oklab, var(--landing-accent) 12%, transparent);
  }
  .hotspot-card:hover .hotspot-icon {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--hs-tone) 18%, transparent);
  }
}

/* ─── İkon kutusu ─── */
.hotspot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: color-mix(in oklab, var(--landing-accent) 10%, var(--color-base-100));
  border: 1px solid color-mix(in oklab, var(--landing-accent) 20%, transparent);
  color: var(--hs-tone);
  transition: box-shadow .2s ease;
}

[data-theme="dark"] .hotspot-icon {
  background: rgb(0 30 35 / .55);
  border-color: rgb(45 212 191 / .35);
  box-shadow: 0 0 10px -2px rgb(45 212 191 / .25);
}

.hs-ico {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-tone--hot      { --hs-tone: #ea580c; }
.hs-tone--cold     { --hs-tone: #0284c7; }
.hs-tone--electric { --hs-tone: #0891b2; }
.hs-tone--accent   { --hs-tone: var(--landing-accent); }

[data-theme="dark"] .hs-tone--hot      { --hs-tone: #fb923c; }
[data-theme="dark"] .hs-tone--cold     { --hs-tone: #38bdf8; }
[data-theme="dark"] .hs-tone--electric { --hs-tone: #67e8f9; }

/* Akışkan: ısı yukarı — dalgalar hafifçe yükselip söner */
.hs-wave {
  transform-box: fill-box;
  animation: hs-heat 2.2s ease-in-out infinite;
}

.hs-wave--2 { animation-delay: .25s; }
.hs-wave--3 { animation-delay: .5s; }

@keyframes hs-heat {
  0%   { transform: translateY(2px);  opacity: .35; }
  50%  { opacity: 1; }
  100% { transform: translateY(-2px); opacity: .35; }
}

/* Türbin: rotor ~10s/tur (spinner değil), dış halkada hafif cyan nabız */
.hs-rotor {
  fill: currentColor;
  stroke: none;
  transform-origin: 12px 12px;
  animation: hs-spin 10s linear infinite;
}

@keyframes hs-spin { to { transform: rotate(360deg); } }

.hs-rotor-ring {
  stroke: #22d3ee;
  stroke-width: 1.2;
  opacity: .25;
  animation: hs-ring 4s ease-in-out infinite;
}

@keyframes hs-ring {
  0%, 100% { opacity: .2; }
  50%      { opacity: .55; }
}

/* Şebeke: 4s'de bir kısa parlama; artwork'teki pulse ilk direkten (~1.4s) geçerken */
.hs-bolt {
  transform-box: fill-box;
  transform-origin: center;
  fill: currentColor;
  fill-opacity: .4;
  opacity: .7;
  animation: hs-bolt 4s ease-out 1.16s infinite;
}

@keyframes hs-bolt {
  0%, 100% { opacity: .7; transform: scale(1); }
  6%       { opacity: 1;  transform: scale(1.12); }
  16%      { opacity: .7; transform: scale(1); }
}

/* Enjeksiyon: damla içinde yukarıdan aşağı süzülen ışık (reenjeksiyon yönü) */
.hs-drop { fill: currentColor; fill-opacity: .12; }

.hs-drop-flow {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  animation: hs-drop 2.8s ease-in-out infinite;
}

@keyframes hs-drop {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: .75; }
  80%  { opacity: .75; }
  100% { transform: translateY(13px); opacity: 0; }
}

/* Rezervuar: termometre sıcak nabız, rezervuar nefesiyle aynı 8s ritim */
.hs-thermo {
  transform-origin: 50% 70%;
  animation: hs-thermo 8s ease-in-out infinite;
}

.hs-thermo-bulb {
  fill: currentColor;
  stroke: none;
  animation: hs-bulb 8s ease-in-out infinite;
}

@keyframes hs-bulb {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

@keyframes hs-thermo {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.hotspot-text { display: flex; flex-direction: column; line-height: 1.2; }
.hotspot-title { font-size: .875rem; font-weight: 700; }

.hotspot-sub {
  margin-top: 2px;
  font-size: .75rem;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
}

/* ─── Connector + anchor ─── */
/* Çizgi: çok ince, düşük opacity (kablo ağı gibi görünmesin), girişte çizilerek belirir */
.hs-line {
  stroke: color-mix(in oklab, var(--color-base-content) 32%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  animation: hs-draw .7s ease-out calc(.4s + var(--i) * 130ms) both;
}

[data-theme="dark"] .hs-line { stroke: rgb(94 234 212 / .3); }

/* Mobil connector yalnızca alt alta düzende görünür */
.hs-line--m { display: none; }

@keyframes hs-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Anchor: HTML nokta (sabit 5px; mobilde de görünür), aynı artwork koordinatında */
.hotspot-anchor {
  position: absolute;
  left: calc(var(--ax) / var(--art-w) * 100%);
  top: calc(var(--ay) / var(--art-h) * 100%);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 9999px;
  background: var(--color-base-100);
  box-shadow: 0 0 0 1.5px var(--landing-accent);
  animation: hs-fade .4s ease-out calc(.4s + var(--i) * 130ms) both;
}

.hotspot-anchor::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid var(--landing-accent);
  opacity: 0;
  animation: hs-anchor-pulse 3s ease-out calc(1.5s + var(--i) * .3s) infinite;
}

@keyframes hs-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes hs-anchor-pulse {
  0%   { transform: scale(.6); opacity: .5; }
  100% { transform: scale(2);  opacity: 0; }
}

/* Tablet (yatay): soldaki kartlar metin sütununa yaklaşır → gizlenir, kartlar küçülür */
@media (min-width: 1024px) and (max-width: 1279px),
       (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .hs-hide-tablet { display: none; }
  .hotspot-body { padding: 6px 11px 6px 6px; gap: .45rem; }
  .hotspot-icon { width: 28px; height: 28px; border-radius: 8px; }
  .hs-ico { width: 17px; height: 17px; }
  .hotspot-title { font-size: .8125rem; }
}

/* Alt alta düzen (mobil + portre tablet): en fazla 3 kritik hotspot; kart kendi mobil
   koordinatında (mcx/mcy), kısa connector ile anchor'a bağlı. Gizli hotspotların kartı/anchor'ı/ikon animasyonu render edilmez. */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .hs-hide-mobile { display: none; }
  .hs-line { display: none; }
  .hs-line--m { display: inline; }
  .hotspot-card {
    left: calc(var(--mcx) / var(--art-w) * 100%);
    top: calc(var(--mcy) / var(--art-h) * 100%);
  }
  .hotspot-body { padding: 4px 9px 4px 4px; gap: .35rem; border-radius: 8px; }
  .hotspot-icon { width: 24px; height: 24px; border-radius: 6px; }
  .hs-ico { width: 15px; height: 15px; }
  .hotspot-title { font-size: .75rem; }
  .hotspot-sub { display: none; }
}

/* ═══ Aşama 8 — Parallax + ekran dışında duraklatma ═══
   Parallax yalnızca (hover:hover and pointer:fine) + reduce değilken JS ile açılır.
   Tüm katmanlar ORTAK stage transform'u ile birlikte hareket eder → hizalama bozulmaz.
   scale(1.012): ±5px kaymada kenarda boşluk açılmasın. Kartlar ek ±3px (anchor'lar sabit). */
.geo-parallax .hero-art-stage {
  transform: translate3d(var(--plx-x, 0px), var(--plx-y, 0px), 0) scale(1.012);
}

.geo-parallax .hotspot-card {
  translate: calc(var(--plx-x, 0px) * .6) calc(var(--plx-y, 0px) * .6);
}

/* Hero görünmüyorken / sekme gizliyken: tek ortak class.
   CSS animasyonları durur; SMIL parçacıkları boyanmaz (pauseAnimations() kullanılmaz —
   Chromium'da animateMotion ile sekme çökmesine yol açabiliyordu). */
.hero-animations-paused .hero-energy-overlay *,
.hero-animations-paused .hero-hotspots *,
.hero-animations-paused .hero-hotspots *::after { animation-play-state: paused !important; }
.hero-animations-paused .geo-particles { visibility: hidden; }

/* ─── Hareket azaltma ───
   Sonraki aşamalardaki hareketli katmanlar .geo-motion class'ı taşır;
   reduce'da tamamen kapanır. Statik glow ve hotspotlar kalır. */
@media (prefers-reduced-motion: reduce) {
  .geo-motion { display: none; }
  .hero-energy-overlay *,
  .hero-hotspots *,
  .hero-hotspots *::after { animation: none !important; transition: none !important; }
}