/* ============================================================================
   NASTEC — sektörler hub'ı ve segment detay sayfaları

   Hub: solda satır listesi, sağda seçili satıra göre değişen fotoğraf.
   Segment: hero → zorluk (çipler) → neden NASTEC → uygulama alanları →
            görsel şeridi → kapanış.

   Renkler tokens.css'ten; yön duyarlı ölçüler mantıksal özelliklerle, böylece
   Arapça'da dir="rtl" olunca düzen kendini çevirir.
   ========================================================================== */

/* ── Hub: liste + senkron fotoğraf ───────────────────────────────────────── */
.ihub { padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(4rem, 8vw, 7rem); }
.ihub__inner { max-width: var(--maxw); margin-inline: auto; }
.ihub__split {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; margin-top: 2.6rem;
}

.ihub__list { display: grid; gap: 0; border-top: 1px solid var(--glass-border); }
.ihub__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 1.35rem 0.4rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--glass-border);
  transition: padding-inline-start 0.35s var(--ease), background 0.3s var(--ease);
}
.ihub__row:hover, .ihub__row.is-active { padding-inline-start: 1rem; background: rgb(var(--c-panel) / 0.34); }
.ihub__ikon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgb(var(--c-cyan) / 0.1); border: 1px solid rgb(var(--c-cyan) / 0.24);
  color: var(--cyan); flex: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.ihub__row.is-active .ihub__ikon { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.ihub__ad { font-family: var(--font-head); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.012em; }
.ihub__ozet { font-size: 0.86rem; color: var(--muted); margin-top: 0.15rem; }
.ihub__ok { color: var(--faint); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.ihub__row:hover .ihub__ok, .ihub__row.is-active .ihub__ok { color: var(--cyan); transform: translateX(3px); }
[dir="rtl"] .ihub__row:hover .ihub__ok, [dir="rtl"] .ihub__row.is-active .ihub__ok { transform: translateX(-3px); }

.ihub__photo {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--media-bg);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.ihub__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(1.04);
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease);
}
.ihub__slide.is-active { opacity: 1; transform: scale(1); }
.ihub__slide img { width: 100%; height: 100%; object-fit: cover; }

/* ── Segment detay ───────────────────────────────────────────────────────── */
.ih {
  padding: clamp(7rem, 13vh, 9.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  background: var(--body-gradient); background-color: var(--bg-deep);
}
.ih__inner {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
}
.ih__crumb {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.1rem;
  font-size: 0.8rem; color: var(--faint); text-decoration: none;
}
.ih__crumb:hover { color: var(--cyan); }
.ih__eyebrow {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 0.8rem;
}
.ih__title {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -0.032em;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.05; text-wrap: balance;
}
.ih__sub { margin-top: 1rem; font-size: 1.02rem; line-height: 1.7; color: var(--muted); max-width: 50ch; }
.ih__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }
.ih__media {
  border-radius: 22px; overflow: hidden; aspect-ratio: 4/3;
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); background: var(--media-bg);
}
.ih__media img { width: 100%; height: 100%; object-fit: cover; }

/* zorluk */
.ich { padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); }
.ich__inner { max-width: var(--maxw); margin-inline: auto; }
.ich__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.ich__chips li {
  font-size: 0.86rem; font-weight: 600; padding: 0.55rem 1rem; border-radius: 999px;
  background: rgb(var(--c-panel) / 0.5); border: 1px solid var(--glass-border);
  color: var(--muted);
}

/* uygulama alanları */
.iap { padding: 0 var(--gutter) clamp(3.5rem, 7vw, 6rem); }
.iap__inner { max-width: var(--maxw); margin-inline: auto; }
.iap__grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem; margin-top: 2rem;
}
.iap__grid li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 1rem 1.1rem; border-radius: 13px;
  background: rgb(var(--c-panel) / 0.42); border: 1px solid var(--glass-border);
  font-size: 0.92rem; line-height: 1.55;
}
.iap__grid li::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); margin-top: 0.55rem;
}

@media (max-width: 900px) {
  .ihub__split { grid-template-columns: 1fr; }
  .ihub__photo { order: -1; }
  .ih__inner { grid-template-columns: 1fr; }
  .ih__media { order: -1; }
  .iap__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .iap__grid { grid-template-columns: 1fr; }
  .ihub__row { grid-template-columns: auto 1fr; }
  .ihub__ok { display: none; }
}

/* ============================================================================
   Sektör listesi — etkileşim güçlendirmesi
   Satırlar artık solda gökyüzü renginde bir vurgu çubuğu açar, ikon dolar ve
   sağdaki foto paneli yavaşça yakınlaşır (Ken Burns). Hareket azaltma isteyen
   kullanıcıda yalnızca renk değişir.
   ========================================================================== */
.ihub__row {
  position: relative;
  transition: padding-inline-start 0.35s var(--ease), background 0.35s var(--ease);
}
/* Sol vurgu çubuğu — gökyüzü degradesi, yukarıdan aşağı açılır */
.ihub__row::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sky), var(--cyan));
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.ihub__row:hover::before, .ihub__row.is-active::before { transform: scaleY(1); }

.ihub__ikon {
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              color 0.35s var(--ease), transform 0.35s var(--ease);
}
.ihub__row:hover .ihub__ikon {
  background: rgb(var(--c-blue) / 0.14);
  border-color: rgb(var(--c-blue) / 0.42);
  color: var(--accent-ink);
  transform: translateY(-1px);
}
.ihub__ad { transition: color 0.3s var(--ease); }
.ihub__row:hover .ihub__ad, .ihub__row.is-active .ihub__ad { color: var(--accent-ink); }

/* Foto paneli — aktif kare yavaşça yakınlaşır, üstüne gökyüzü tonunda perde */
.ihub__slide.is-active img { animation: ihub-drift 14s ease-out forwards; }
@keyframes ihub-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
.ihub__photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg,
              rgb(var(--c-blue) / 0.18) 0%, transparent 45%,
              rgb(var(--c-shadow) / 0.22) 100%);
}
.ihub__photo { transition: box-shadow 0.45s var(--ease), border-color 0.45s var(--ease); }
.ihub__split:hover .ihub__photo {
  border-color: rgb(var(--c-blue) / 0.34);
  box-shadow: 0 26px 64px rgb(var(--c-shadow) / 0.22),
              0 8px 34px rgb(var(--c-blue) / 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .ihub__row::before { transition: none; }
  .ihub__slide.is-active img { animation: none; }
  .ihub__row:hover .ihub__ikon { transform: none; }
}