/* ============================================================================
   NASTEC — anasayfanın yeni bölümleri

   Referans anasayfanın akışı: hero → güven şeridi → değişim anlatısı → süreç
   özeti → dünya küresi → sektörler → koşul göstergesi → kapanış.

   Renkler tokens.css'ten; yön duyarlı ölçüler mantıksal özelliklerle yazıldı
   (inset-inline-start, margin-inline) — Arapça'da dir="rtl" olunca düzen
   kendini çevirir.
   ========================================================================== */

.hsec { position: relative; z-index: 10; padding: clamp(4rem, 8vw, 7rem) var(--gutter); }
.hsec__inner { max-width: var(--maxw); margin-inline: auto; }
.hsec__eyebrow {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 0.9rem;
}
.hsec__title {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -0.028em;
  font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.08; text-wrap: balance;
  margin-bottom: 1rem;
}
.hsec__lead {
  font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.7;
  color: var(--muted); max-width: 60ch;
}
.hsec--center { text-align: center; }
.hsec--center .hsec__lead { margin-inline: auto; }

/* ── Bilgi kartı kaydırıcısı ──────────────────────────────────────────────
   Kaydırma yerli (overflow-x + scroll-snap): dokunmatikte parmakla sürüklenir,
   masaüstünde oklarla, klavyede yön tuşlarıyla gezilir. Kasa karuselindeki
   transform'lu yaklaşım burada kullanılmadı — o sürüklemeyi desteklemiyor. */
.hsec--hub { padding-block: clamp(3rem, 6vw, 5rem); }
.hub { position: relative; }
.hub__track {
  display: flex; gap: 1.4rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline-start: 4px;
  /* Kartların odak halkası ve gölgesi kırpılmasın diye pay; negatif margin
     onu geri alır, böylece kartlar hâlâ kolon hizasında başlar. */
  padding: 6px 6px 20px; margin-inline: -6px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hub__track::-webkit-scrollbar { display: none; }
.hub__track:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 22px; }
/* Sürükleme yalnızca kayacak yer varken duyurulur (sınıfı js ekler). */
.hub__track.is-draggable { cursor: grab; }
.hub__track.is-dragging {
  cursor: grabbing;
  /* "mandatory" yapışma açıkken scrollLeft'e her yazışta tarayıcı karta geri
     çekiyor, şerit el altında zıplıyordu. Sürükleme ve ivme boyunca kapalı. */
  scroll-snap-type: none;
  user-select: none; -webkit-user-select: none;
}
.hub__track.is-dragging .hub-card { pointer-events: none; }

/* Zemin lekesi: kartlar önce sitenin cam reçetesini kullanıyordu
   (rgb(var(--c-panel)/.65) + backdrop-filter: blur(16px) saturate(180%)).
   backdrop-filter, kaydırma kabı (.hub__track, overflow-x:auto) içinde
   kullanılınca o kap "backdrop root" olup kendi katmanına terfi ediyor;
   Chrome katmanın altındaki düz rengi filtre boru hattından geçirdiği için
   ŞERİDİN TAMAMI ton değiştiriyordu — sayfada kartların değil, tam olarak
   track kutusunun sınırlarında duran bir dikdörtgen leke görünüyordu.

   Kart zaten opak düz bir zeminin (#1d4f8f) üstünde duruyor: bulanıklaştıracak
   bir şey yok, filtre yalnızca rengi kaydırıyordu. Aynı rengi katı olarak
   basıyoruz — canvas 2D ile aynı boru hattından hesaplandı, cam reçetesiyle
   piksel piksel aynı: #1b5bb2. Böylece üstteki .value-card / .how-step
   kartlarıyla da aynı tonu koruyor. */
.hub-card {
  /* Dar ekranda kart, şerit genişliğinden 2,9rem eksik: kalan pay boşluk artı
     bir sonraki kartın görünen dilimi olur (kaydırılabildiği oradan anlaşılır). */
  flex: 0 0 min(calc(100% - 2.9rem), clamp(290px, 33vw, 430px));
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border-radius: 20px;
  background: #1b5bb2;
  border: 1px solid rgb(var(--c-line) / 0.25);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 16px 40px rgb(var(--c-shadow) / 0.5);
}
.hub-card__eyebrow {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 0.9rem;
}
.hub-card__title {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -0.022em;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.22; text-wrap: balance;
  margin-bottom: 0.9rem;
}
.hub-card__title--sm { font-size: clamp(1.05rem, 1.5vw, 1.24rem); line-height: 1.34; }
.hub-card__body { font-size: 0.88rem; line-height: 1.62; color: var(--muted); margin-bottom: 0.8rem; }
/* Kartın öne çıkan rakamı. Site genelindeki başlık yazı tipi bir sans; ölçü
   yazıdan değil veriden geliyor, o yüzden rakam veri rengi giymez — beyaz
   kalır, renk yalnızca aşağıdaki işaretlerde. */
.hub-card__num {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(2.3rem, 3.6vw, 3rem); line-height: 1; color: var(--white);
  margin: 0.6rem 0 0.4rem;
}
.hub-card__num small {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0; color: var(--accent-ink);
  margin-inline-start: 0.35rem;
}
.hub-card__cap { font-size: 0.8rem; line-height: 1.55; color: var(--faint); }
/* Kaynak satırı her zaman kartın dibine yapışır ki kartlar farklı uzunlukta
   olsa da alt kenarları aynı hizada okunsun. */
.hub-card__src {
  margin-top: auto; padding-top: 1.2rem;
  font-size: 0.72rem; line-height: 1.55; color: var(--faint);
}
.hub-card__stats { margin-top: 0.4rem; gap: 1.1rem 1rem; }
/* Kart kolonu ~200px; bölümün kendi 2,7rem'lik rakam boyu burada "%20–80"i
   iki satıra kırıyordu. */
.hub-card__stats .gp__stat-num { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.hub-card__stats .gp__stat-cap { font-size: 0.76rem; line-height: 1.45; }

/* ── Ölçek çubuğu (Falkenmark eşikleri) ───────────────────────────────────
   Alan 0–2.050 m³'e göre ölçeklendi: 1.000 → %48,8, 1.700 → %82,9.
   Üç bant tek hue'lu sıralı mavi rampa; koyu zeminde yön tersine çevrildi
   (daha çok su = daha parlak). Bantları ayıran şey çizgi değil 2px boşluk. */
.hub-scale { --p1: 48.8%; --p2: 82.9%; --proj: 58.5%; --now: 64%; margin-top: 1.4rem; }
.hub-scale__marks { position: relative; height: 2.5rem; font-size: 0.7rem; }
.hub-scale__mark { position: absolute; bottom: 0; display: flex; flex-direction: column; line-height: 1.3; }
.hub-scale__mark b { font-weight: 700; color: var(--white); }
.hub-scale__mark i { font-style: normal; color: var(--faint); }
/* İki işaret ölçekte yalnızca %5,5 aralıkta; etiketleri üst üste binmesin diye
   biri iğnesinin soluna, diğeri sağına yaslanıyor. */
.hub-scale__mark--proj { inset-inline-end: calc(100% - var(--proj)); padding-inline-end: 0.5rem; text-align: end; align-items: flex-end; }
.hub-scale__mark--now  { inset-inline-start: var(--now); padding-inline-start: 0.5rem; }

.hub-scale__bar { position: relative; display: flex; gap: 2px; height: 10px; }
.hub-scale__band { border-radius: 2px; }
.hub-scale__band--1 { flex: 0 0 calc(var(--p1) - 2px); background: #7ab8fb; }
.hub-scale__band--2 { flex: 0 0 calc(var(--p2) - var(--p1) - 2px); background: #aed3fd; }
.hub-scale__band--3 { flex: 1 1 auto; background: #e3f1ff; }
/* Ölçülen değer ve projeksiyon: bantların üstünde dikey iğne. Zemin renginde
   2px halka (burada dış kenarlık) iğneyi hangi bandın üstüne düşerse düşsün
   okunur tutar. */
/* Ince dikey iğne denendi ve bırakıldı: 3px'lik çubuk bandın kendi 2px'lik
   boşluklarından ayırt edilemiyordu, çubuk kırılmış gibi duruyordu. Nokta
   işaretçi hem daha büyük hem de halkası sayesinde her bandın üstünde okunur.
   Ortalama translateX ile değil negatif margin ile yapılıyor — RTL'de
   inset-inline-start sağa bağlanınca transform ters yöne itiyordu. */
.hub-scale__pin {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  margin-top: -5.5px; margin-inline-start: -5.5px;
  box-shadow: 0 0 0 2px #1b5bb2;   /* kart zemini — iğneyi her bandın üstünde ayırır */
}
.hub-scale__pin--proj {
  inset-inline-start: var(--proj);
  background: #1b5bb2; border: 2px solid rgb(var(--c-text) / 0.7);
}
.hub-scale__pin--now { inset-inline-start: var(--now); background: var(--white); }

.hub-scale__ticks { position: relative; height: 1.1rem; margin-top: 0.5rem; font-size: 0.68rem; color: var(--faint); }
.hub-scale__ticks span { position: absolute; top: 0; }
.hub-scale__ticks span:nth-child(1) { inset-inline-start: 0; }
.hub-scale__ticks span:nth-child(2) { inset-inline-start: var(--p1); transform: translateX(-50%); }
.hub-scale__ticks span:nth-child(3) { inset-inline-start: var(--p2); transform: translateX(-50%); }

.hub-scale__zones { display: flex; gap: 2px; font-size: 0.66rem; letter-spacing: 0.02em; }
.hub-scale__zones i { font-style: normal; text-align: center; color: var(--faint); }
.hub-scale__zones i:nth-child(1) { flex: 0 0 calc(var(--p1) - 2px); }
.hub-scale__zones i:nth-child(2) { flex: 0 0 calc(var(--p2) - var(--p1) - 2px); }
.hub-scale__zones i:nth-child(3) { flex: 1 1 auto; }

/* ── Pay çubuğu (PET şişe / damacana) ─────────────────────────────────────
   İki kategori; ayırıcı 2px zemin boşluğu. Kimlik rengi etiketin yanındaki
   noktada durur — yazının kendisi metin rengini korur. */
.hub-split { --a: 51%; margin-top: 1.3rem; }
.hub-split__bar { display: flex; gap: 2px; height: 10px; }
.hub-split__seg { border-radius: 2px; }
.hub-split__seg--a { flex: 0 0 calc(var(--a) - 2px); background: #34d3e8; }
.hub-split__seg--b { flex: 1 1 auto; background: #f0a94e; }
.hub-split__legend { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; }
.hub-split__key { display: flex; flex-direction: column; font-size: 0.76rem; line-height: 1.4; }
.hub-split__key b { font-weight: 700; color: var(--white); display: flex; align-items: center; gap: 0.4rem; }
.hub-split__key b::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.hub-split__key--a b::before { background: #34d3e8; }
.hub-split__key--b b::before { background: #f0a94e; }
.hub-split__key i { font-style: normal; color: var(--faint); }
.hub-split__key--b { text-align: end; }
.hub-split__key--b b { flex-direction: row-reverse; }

.hub__nav {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 1.4rem; justify-content: flex-end; flex-wrap: wrap;
}
/* Nerede olduğunu gösteren ince şerit — dokunmatikte ok yerine asıl geri
   bildirim bu; genişliği görünen payı, konumu kaydırma oranını izler. */
.hub__bar {
  flex: 0 1 200px; position: relative; height: 3px; border-radius: 2px;
  background: rgb(var(--c-line) / 0.18); overflow: hidden;
}
.hub__bar span {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 30%;
  border-radius: 2px; background: var(--cyan);
  transition: inset-inline-start 0.2s var(--ease), width 0.2s var(--ease);
}

.gp__stats { list-style: none; display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; }
.gp__stat-num {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1;
  background: linear-gradient(100deg, var(--accent-ink), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gp__stat-cap { margin-top: 0.35rem; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }

/* ── Duyarlılık ──────────────────────────────────────────────────────────── */
/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .hsec--hub { padding-block: clamp(2.4rem, 8vw, 3.4rem); }
  .hub__track { gap: 1rem; padding-bottom: 16px; }
  .hub-card { padding: 1.35rem 1.25rem; border-radius: 18px; }
  .hub-card__title { font-size: 1.22rem; }
  .hub-card__title--sm { font-size: 1.04rem; }
  .hub-card__body { font-size: 0.85rem; }
  .hub-card__num { font-size: 2.15rem; }
  /* Uzun birim ("parçacık / litre") rakamla aynı satıra sığmıyordu; yalnızca o
     alt satıra iner — "m³" gibi kısa birimler rakamın yanında kalır. */
  .hub-card__num--wide small { display: block; margin-inline-start: 0; margin-top: 0.3rem; }
  .hub-card__src { padding-top: 1rem; font-size: 0.68rem; }
  /* 320px'te kart kolonu ~88px; 1,3rem'de "10–30 °C" ikiye kırılıp satırı
     kaydırıyordu. */
  .hub-card__stats .gp__stat-num { font-size: 1.1rem; }
  .hub-scale__marks { font-size: 0.66rem; height: 2.3rem; }
  .hub-scale__ticks, .hub-scale__zones { font-size: 0.62rem; }
  /* Oklar sağ köşede küçük hedeflerdi; dokunmatikte ortada ve şeridin altında
     dursunlar, ilerleme çubuğu kendi satırına geçsin. */
  .hub__nav { justify-content: center; gap: 0.8rem; margin-top: 1.1rem; }
  .hub__bar { order: -1; flex: 1 0 100%; }
}

@media (max-width: 560px) {
  /* Kart içindeki 2x2 rakam ızgarası dar kartta tek sütuna inmez — kart zaten
     dar, tek sütun kartı gereksiz uzatırdı. Yalnız bölümün dışındaki
     kullanımlar için kural duruyor. */
  .hsec:not(.hsec--hub) .gp__stats { grid-template-columns: 1fr; }
  .hub-split__legend { gap: 0.6rem; }
}

/* Sertifika şeridi: ikonlar kum aksanına döndü — mavi metin bloğunun içinde
   sıcak bir nokta, ana sayfadaki adım numaralarıyla aynı dil. */
/* lucide <i> etiketini <svg> ile degistiriyor; iki secici de gerekli. */
.marquee__item i, .marquee__item svg { color: var(--sand-ink); }
.marquee__item { transition: color 0.3s var(--ease); }
.marquee__item:hover { color: var(--white); }