/* ============================================================
   home.css — YALNIZCA anasayfada yüklenir (base.ejs extraHead).
   Ortak header/footer/nav/buton stilleri main.css'tedir; burada
   sadece anasayfaya özel bölümler ve main.css'in anasayfa için
   geçersiz kılınması gereken kuralları yer alır.
   ============================================================ */

/* main.css'teki dekoratif .hero::before blob'unu nötrle */
.hero::before { content: none; display: none; }

/* === Hero — NAMA tarzı geçişli slideshow === */
.hero {
  position: relative;
  margin-top: 0;
  min-height: 100vh; /* fallback */
  min-height: 100svh;
  overflow: hidden;
  background: #0a0e0c;
  padding: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 104px 20px 96px;
  background-color: #0a0e0c;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease;
  z-index: 0;
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Scroll zoom/fade için ayrı medya katmanı (background-image scale almaz) */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0a0e0c;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.05);
  will-change: transform, opacity;
  pointer-events: none;
}

/* Karartma + vinyet (her slayt için) — medyanın üstünde, kartın altında */
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(125% 115% at 50% 45%, transparent 30%, rgba(8, 11, 10, 0.85) 100%),
    linear-gradient(180deg,
      #0a0e0c 0%,
      rgba(10, 14, 12, 0.55) 14%,
      rgba(10, 14, 12, 0.15) 34%,
      rgba(10, 14, 12, 0.15) 60%,
      rgba(10, 14, 12, 0.6) 82%,
      #0a0e0c 100%);
  pointer-events: none;
}

/* Slayt 3: tekne görseli ayrı katman, kenarlar maske ile siyaha erir */
.slide-tekne {
  background-color: #0a0e0c;
}

.slide-tekne .hero-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  /* GSAP xPercent/yPercent ile aynı merkezleme; scale scrub buraya biner */
  transform: translate(-50%, -50%);
  width: min(1280px, 92%);
  aspect-ratio: 16 / 9;
  z-index: 0;
  background: url('/teknemiz.webp') center / cover no-repeat;
  will-change: transform, opacity;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-composite: intersect;
}

.hero-slide.slide-tekne::before {
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10, 14, 12, 0.82) 0%,
      rgba(10, 14, 12, 0.34) 17%,
      rgba(10, 14, 12, 0.34) 60%,
      rgba(10, 14, 12, 0.55) 85%,
      #0a0e0c 100%);
}

.hero-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  text-align: center;
  min-height: 380px;
  /* Slayt pointer-events:none; CTA/dots için kart tıklanabilir olmalı */
  pointer-events: auto;
  /* auto margin ile "safe" dikey ortalama: içerik kısa viewport'ta
     taşarsa negatif boşluk auto margin'e 0 olarak çözülür, kart
     padding-top'un (header payı) üzerine asla çıkmaz. */
  margin-top: auto;
  margin-bottom: auto;
}

/* Slayt göstergeleri (noktalar) — Sabit CSS konumlama, slide içeriğinden
   tamamen bağımsız. Dot'lar her slide'da aynı dikey konumda kalır (Tekne
   slide'ının referans konumuna göre sabitleme). */
.hero-dots {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 5;
}

.hero-dots .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hero-dots .dot:hover { background: var(--text-muted); }

.hero-dots .dot.active {
  background: #fff;
  transform: scale(1.25);
}

.hero-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-glow);
  margin-bottom: 18px;
}

.hero-card h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 22px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.hero-card h1 .text-brand { color: var(--brand-glow); }

.hero-card p {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.75;
  color: var(--text-high);
  max-width: 600px;
  margin: 0 auto 34px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.hero-card-btn {
  font-size: 15px;
  padding: 14px 40px;
}

.hero-card-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 40px;
  margin-bottom: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--glass-stat);
  min-height: 120px;
}

.hero-card-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-card-stats .stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  color: #fff;
}

.hero-card-stats .stat-icon svg {
  width: 100%;
  height: 100%;
}

.hero-card-stats .num {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--text-high);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  display: inline-block;
}

.hero-card-stats .lbl {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hero Donutlab zoom-in — YALNIZ gsap-ready varken gizle.
   no-JS / PRM'de gsap-ready yok → içerik görünür kalır (FOUC koruması).
   Gerçek selector'lar: .hero-kicker, h1, p, .hero-card-btn, .hero-card-stats
   (tokens.css hero LCP istisnasını geçersiz kılar: opacity:0 şart). */
html.gsap-ready .hero-slide .hero-kicker,
html.gsap-ready .hero-slide h1,
html.gsap-ready .hero-slide p,
html.gsap-ready .hero-slide .hero-card-btn,
html.gsap-ready .hero-slide .hero-card-stats,
html.gsap-ready .hero-slide [data-reveal] {
  opacity: 0;
}

/* Animasyon bitince settle() → .is-revealed; clearProps sonrası CSS görünür tutar */
html.gsap-ready .hero-slide .hero-kicker.is-revealed,
html.gsap-ready .hero-slide h1.is-revealed,
html.gsap-ready .hero-slide p.is-revealed,
html.gsap-ready .hero-slide .hero-card-btn.is-revealed,
html.gsap-ready .hero-slide .hero-card-stats.is-revealed,
html.gsap-ready .hero-slide [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (max-width: 768px) {
  .hero-slide { padding: 92px 16px 72px; }
  .hero-card { padding: 0 4px; }
  /* Dar/kısa viewport'ta kart zaten dikey alanı zorluyor (safe-centering
     taşmayı üstte kırpar, kart alta doğru büyür) — masaüstündeki ek
     margin-bottom burada görünmez kalır (kart tepeden sabitlenmiş) ve
     stat bloğu zaten dot navigasyonuna çok yakın kalıyordu. Bu yüzden
     mobilde alt boşluk yerine üst boşluk (margin/padding-top) kısılarak
     kart toplam yüksekliği küçültülür — asıl kazanım buradan gelir. */
  .hero-card-stats { gap: 28px; flex-wrap: wrap; margin-top: 16px; margin-bottom: 0; padding-top: 20px; }
  .hero-card-stats .stat-icon { width: 28px; height: 28px; margin-bottom: 8px; }
  /* Mobilde dot'ları stat bloğunun yanına daha yakın taşı — ekstra 45px boşluk */
  .hero-dots { bottom: 16px; }
}

/* Kısa viewport'ta (yükseklik ≤700px — kısa laptop veya yatay mobil) kart
   dikey alanı taşırıyor, stat bloğu dot navigasyonuna yapışıyor. Stat
   bloğunun kendi boşluğuna dokunmak yerine (trailing margin, taşan/kırpılan
   kartta etkisiz kalıyor — bkz. önceki faz) iki bağımsız kaldıraç kullanılır:
   dot'lar kendi konumundan aşağı itilir, kart ise hero-slide'ın üst
   padding'i kısılarak yukarı çekilir (kartın kendi taşan yüksekliği azalır). */
@media (max-height: 700px) {
  .hero-slide { padding-top: 64px; }
}

/* === Solutions bölümü: anasayfada AÇIK zemin (main.css'te koyu) === */
/* Padding kaynağı: main.css `section { padding: 100px 20px }` → burada tokenize.
   Üst: sm (başlık+kartlar tek viewport); alt: md (ritim). */
#solutions {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid var(--ink-a08);
  padding-top: var(--section-pad-sm);
  padding-bottom: var(--section-pad-md);
}
/* main.css #solutions başlık/metni beyaz yapıyor → açık zeminde okunmaz, geri al */
#solutions .section-subtitle {
  margin-bottom: 0.5rem; /* eski: 12px (.section-subtitle global) */
}
#solutions h2,
#solutions section h2 {
  color: #0A1929;
  margin-bottom: 0.75rem; /* eski: 16px (section h2 global); font-size 48px KORUNDU */
}
#solutions .section-description {
  color: var(--ink-a75);
  margin-bottom: 1rem; /* eski: 1.5rem (K.8a) / 48px (main.css) */
}
/* Çift boşluk olmasın: main.css .bento-grid { margin-top: 48px } burada sıfırlanır */
#solutions .bento-grid {
  margin-top: 0;
}

/* Solutions kartları: açık zemin üzerinde koyu kart */
.bento-card {
  background: linear-gradient(135deg, #0a1929 0%, #0f2e3a 100%);
  border: 1px solid var(--green-a25);
  backdrop-filter: none;
}
.bento-card:hover {
  transform: translateY(-8px);
  border-color: var(--green-a60);
  background: linear-gradient(135deg, #0a1929 0%, #0f2e3a 100%);
  box-shadow: var(--shadow-bento-light);
}

/* === About bölümü: anasayfada KOYU zemin (main.css'te beyaz) === */
/* Padding kaynağı: main.css `section` → burada tokenize */
#about {
  background: linear-gradient(135deg, #0a1929 0%, #0f2e3a 100%);
  border-top: 1px solid var(--green-a20);
  padding-block: var(--section-pad-sm);
}

/* About — Kompakt tanıtım bloğu */
.about-intro {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.about-intro .section-subtitle {
  color: var(--brand-glow);
  margin-bottom: 16px;
}

.about-intro p {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: var(--text-body);
  margin: 0 0 24px;
}

.about-intro .btn-primary {
  font-size: 15px;
  padding: 14px 32px;
}

/* Stat band stilleri → public/css/stats-band.css (ortak bileşen) */


/* === Contact bölümü: anasayfaya özel füme degrade === */
/* Padding kaynağı: main.css `section` → burada tokenize */
#contact {
  background-image: linear-gradient(235deg, #3e4c5f 45%, #161a1e 87%);
  border-top: 1px solid var(--green-a20);
  padding-block: var(--section-pad-md);
}

/* Process — padding kaynağı: main.css `section` → burada tokenize */
#process {
  padding-block: var(--section-pad-lg);
}

/* Sistem Anatomisi — padding kaynağı: sistem-anatomisi.css sahne clamp'i
   → Section Spacing Contract: dikey ritmi token'a bağla (yatay sahne pad korunur) */
#sistem-anatomisi {
  padding-block: var(--section-pad-lg);
}

/* === Solutions: geniş verim paneli + sağda alt alta iki kart + alt bar === */
#solutions .bento-card {
  padding: 24px; /* 36 → 24 (~%33) */
}
#solutions .bento-card--feature .card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  font-size: 20px;
}
#solutions .bento-card--feature .card-icon svg {
  width: 22px;
  height: 22px;
}
#solutions .bento-card--feature h3 {
  font-size: 20px; /* bir kademe: görsel ağırlık ↓ (padding/grafik sıkıştırmasıyla) */
  margin-bottom: 8px;
}
#solutions .bento-card--feature p {
  font-size: 14px;
  line-height: 1.5;
}
#solutions .solutions-aside .card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  font-size: 20px;
}
#solutions .solutions-aside .card-icon svg {
  width: 20px;
  height: 20px;
}
#solutions .solutions-aside .bento-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
#solutions .solutions-aside .bento-card p {
  font-size: 14px;
  line-height: 1.5;
}

.solutions-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.solutions-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.solutions-aside .bento-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tekne Tasarımı & Üretimi — tam genişlik bar */
/* #solutions .bento-card padding'ini ezmemek için ID spesifikliği gerekir */
#solutions .bento-card--boat-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
}
#solutions .bento-card--boat-bar .card-icon {
  flex-shrink: 0;
  margin-bottom: 0;
  width: 40px;
  height: 40px;
}
#solutions .bento-card--boat-bar .card-icon svg {
  width: 22px;
  height: 22px;
}
.boat-bar__text {
  min-width: 0;
}
#solutions .bento-card--boat-bar h3 {
  font-size: 18px;
  margin-bottom: 4px;
}
#solutions .bento-card--boat-bar p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  #solutions .bento-card--boat-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
@media (max-width: 900px) {
  .solutions-feature { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #solutions .bento-card--boat-bar {
    padding: 24px;
  }
}

/* === Solutions kartı içi: verim grafiği + motor görseli === */
.bento-perf {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.bento-chart {
  flex: 1;
  min-width: 0;
  max-height: 260px;
  background: rgba(8, 14, 22, 0.4);
  border: 1px solid var(--glass-bg);
  border-radius: 12px;
  padding: 10px 12px 6px;
  overflow: hidden;
}
.bento-motor {
  flex: 0 0 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.bento-motor-img {
  width: auto;
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.42));
  animation: bentoFloat 3.6s ease-in-out infinite;
  will-change: transform;
}
@keyframes bentoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-motor-img { animation: none; }
}
@media (max-width: 640px) {
  .bento-perf { flex-direction: column; }
  .bento-motor { flex: 0 0 auto; }
  .bento-motor-img { max-height: 180px; }
  .bento-chart { max-height: none; }
}
.bento-chart__title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}
.bento-chart svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 220px; /* viewBox 520×298 oranı korunur; etiketler kırpılmaz */
}
.eff-grid line { stroke: var(--glass-footer); stroke-width: 1; }
.eff-axislabel text { fill: var(--text-ghost); font-size: 11px; font-family: 'Inter', system-ui, sans-serif; }
.eff-axistitle { fill: rgba(255, 255, 255, 0.38); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; font-family: 'Inter', system-ui, sans-serif; text-transform: uppercase; }
.eff-area { fill: url(#effAreaGrad); stroke: none; }
.eff-line { fill: none; stroke: var(--brand-glow); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--glow-a50)); }
.eff-dots circle { fill: var(--brand-glow); stroke: #0a0e14; stroke-width: 1.5; }
.eff-peak-halo { fill: var(--glow-a22); }
.eff-peak { fill: var(--eco); stroke: #0a0e14; stroke-width: 1.5; filter: drop-shadow(0 0 6px var(--eco-a70)); }

/* Masaüstü: özellik kartı ile yardımcı kartlar tek bir hizalı panel oluşturur. */
@media (min-width: 901px) {
  .solutions-feature {
    align-items: stretch;
  }
  .solutions-feature > .bento-card--feature,
  .solutions-aside {
    align-self: stretch;
    min-height: 0;
  }
  .solutions-aside .bento-card {
    flex: 1 1 0;
    min-height: 0;
  }

  .bento-chart {
    min-height: 340px;
    max-height: none;
    padding: 6px 8px 4px;
    display: flex;
    flex-direction: column;
  }
  .bento-chart svg {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
  }

  .bento-motor {
    flex-basis: 150px;
  }
  .bento-motor-img {
    max-height: 270px;
  }
}

/* === Görsel Showcase: Sahada MARLAB === */
.showcase-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding-block: var(--section-pad-md);
  padding-inline: 20px;
}
.showcase-title {
  font-family: var(--font-section);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -1px;
  color: #181818;
  margin: 0 0 48px;
}
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 240px;
  gap: 20px;
}
.showcase-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--ink-a08);
}
.showcase-item--lg { grid-row: span 2; }
.showcase-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.showcase-item:hover img { transform: scale(1.06); }
.showcase-item--product {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
}
.showcase-item--product img {
  object-fit: contain;
  padding: 32px 28px 56px;
}
.showcase-item--product:hover img { transform: scale(1.04); }
.showcase-item--product figcaption {
  color: #0A1929;
  background: linear-gradient(180deg, transparent 0%, var(--text-caption) 70%);
}
.showcase-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 22px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 14, 28, 0.85) 100%);
}
@media (max-width: 768px) {
  /* padding: token clamp mobilde de yeterli — hardcoded 64px kaldırıldı */
  .showcase-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .showcase-item--lg { grid-row: span 1; }
  .showcase-item--product { grid-row: span 2; }
  .showcase-item--product img { padding: 24px 24px 48px; }
}

/* === Orbital Sistem Şeması (Solutions bölümü altında) === */
.orbital-system {
  padding: 48px 40px;
  /* Tek gerçek fon: koyu zemin üzerinde daha küçük çaplı camgöbeği-yeşil parlama.
     Sağ taraf siyah tonda kalır (mavi ışıltı kaldırıldı).
     Tüm iç elementler (küre hariç düğümler) saydam → bu fon her yerde görünür. */
  background-color: #04100d;
  background-image:
    radial-gradient(44% 64% at 30% 44%, rgba(38, 190, 158, 0.52) 0%, rgba(20, 120, 100, 0.20) 40%, transparent 70%),
    radial-gradient(85% 85% at 88% 92%, #030d0b 0%, transparent 62%),
    linear-gradient(135deg, #05130f 0%, #0a2b23 50%, #04100d 100%);
  border: 1px solid var(--green-a25);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Verim (bento) kartıyla aynı yumuşak "dokunma" geçişi */
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Üzerine gelince bento kartları gibi hafifçe yükselir, kenar parlar,
   altına derinlik gölgesi düşer.
   Not: transform burada GSAP kapalıyken (is-revealed sınıfı hiç eklenmez)
   çalışan fallback'tir. */
.orbital-system:hover {
  transform: translateY(-8px);
  border-color: var(--green-a60);
  box-shadow: var(--shadow-bento-light);
}

/* GSAP açıkken reveal sonrası tokens.css'teki
   html.gsap-ready [data-reveal].is-revealed { transform: none } (özgüllük 0,3,1)
   düz .orbital-system:hover'ın (0,2,0) yükselmesini eziyordu (kart doğrudan
   data-reveal). Transformu daha yüksek özgüllükle (0,4,1) geri kazanıyoruz. */
html.gsap-ready .orbital-system.is-revealed:hover {
  transform: translateY(-8px);
}

/* PRM: yükselme hareketini kapat, yalnız kenar/gölge kalır */
@media (prefers-reduced-motion: reduce) {
  .orbital-system {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .orbital-system:hover,
  html.gsap-ready .orbital-system.is-revealed:hover {
    transform: none;
  }
}

.orbital-header {
  text-align: center;
  margin-bottom: 36px;
}

.orbital-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-glow);
  margin-bottom: 12px;
}

.orbital-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin: 0;
}

/* Orbital container: rotasyon alanı */
.orbital-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Merkez çekirdek: MARLAB logosu (referanstaki gibi küçük, sade daire) */
.orbital-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Merkez küre: referanstaki parlak mavi-camgöbeği gradient orb.
   Sol-üstte açık highlight, gövde mavi→lacivert; hafif iç gölge ile hacim. */
.orbital-sphere {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #a5f3fc 0%,
    #38bdf8 30%,
    #3b82f6 62%,
    #1e3a8a 100%
  );
  box-shadow:
    0 0 32px rgba(56, 189, 248, 0.45),
    inset -4px -6px 14px rgba(4, 12, 32, 0.45),
    inset 3px 4px 10px rgba(255, 255, 255, 0.35);
}

/* Yörünge çemberleri */
.orbital-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  /* Koyu zeminde hafif görünür soluk çember (referanstaki gibi düz çizgi) */
  border-color: rgba(255, 255, 255, 0.12);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbital-ring--outer {
  width: 300px;
  height: 300px;
  border-width: 1px;
}

/* Uyduları taşıyan rotasyon konteyneri. --orbit-radius: uydunun merkezden
   uzaklığı; her yörünge kendi yarıçapını verir → düğümler halka çizgisinin
   tam üstünde oturur. */
.satellites-container {
  position: absolute;
  --orbit-radius: 150px;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbital-rotate 75s linear infinite;
}

/* Tek yörünge: dış halka (300px) ile hizalı, 5 düğüm eşit açılı */
.satellites-container--outer {
  --orbit-radius: 150px;
  width: 300px;
  height: 300px;
}

@keyframes orbital-rotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Uydu: yörüngede konumlanan kutu. Statik açı çifti (rotate a → translateX →
   rotate -a) net yönelimi sıfırlar, yalnız konumu belirler. */
.satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  /* translate(-50%,-50%) → kutu merkezi konteyner merkezine oturur; dönüş
     tam merkez etrafında olur → ikon halka çizgisinin tam üstünde durur. */
  transform:
    translate(-50%, -50%)
    rotate(var(--satellite-angle))
    translateX(var(--orbit-radius))
    rotate(calc(-1 * var(--satellite-angle)));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* İç sarmalayıcı: konteynerin canlı dönüşünü ters yönde iptal eder →
   ikon+etiket her zaman dik ve okunur kalır. İki animasyon da 75s linear,
   birlikte başlar; tam senkron. */
.satellite-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: orbital-counter-rotate 75s linear infinite;
}

@keyframes orbital-counter-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.satellite-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* Düğümlerin kendi fonu YOK → tamamen saydam; arkadaki tek gerçek mesh fon
     her düğümün içinden görünür. Yalnız ince kenar düğümü ayırır. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

.satellite-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

.satellite-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /* Koyu zeminde sakin, parlamayan etiket */
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.2;
}

/* PRM: animasyonları durdur */
@media (prefers-reduced-motion: reduce) {
  .satellites-container,
  .satellite-inner {
    animation: none;
  }
}

/* Mobile: orbital düzeni kapanır, merkez + uyduları liste hal */
@media (max-width: 768px) {
  .orbital-system {
    padding: 40px 24px;
  }

  .orbital-header {
    margin-bottom: 36px;
  }

  .orbital-title {
    font-size: clamp(20px, 2.5vw, 26px);
  }

  .orbital-container {
    max-width: 100%;
    aspect-ratio: auto;
    flex-direction: column;
    gap: 32px;
  }

  .orbital-core {
    position: static;
    transform: none;
    width: 100px;
    height: 100px;
  }

  .orbital-ring {
    display: none;
  }

  .satellites-container {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    animation: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
    padding: 0;
  }

  .satellite {
    position: static;
    width: auto;
    height: auto;
    transform: none;
  }

  .satellite-inner {
    animation: none;
  }

  .satellite-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
  }

  .satellite-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* === Neden MARLAB bölümü === */
#neden-marlab {
  position: relative;
  background: var(--bg-section);
  border-bottom: 1px solid var(--green-a15);
  padding-block: var(--section-pad-md);
  padding-inline: 0;
  overflow: hidden;
}

/* Su altı ışık dokusu — tek parça SVG (blur SVG'nin içinde pişmiş, runtime filter yok).
   Hareket yalnız transform üzerinde; opacity/filter anime edilmez. */
#neden-marlab::before {
  content: "";
  position: absolute;
  inset: -10% 0 0 0;
  background: url(/images/nm-rays.svg) top center / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.5) 50%, transparent 85%);
  mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.5) 50%, transparent 85%);
  animation: nm-rays-sway 60s ease-in-out infinite alternate;
}

@keyframes nm-rays-sway {
  from { transform: translateX(-1.5%); }
  to { transform: translateX(1.5%); }
}

@media (prefers-reduced-motion: reduce) {
  #neden-marlab::before { animation: none; }
}

/* Hero'nun koyuluğundan bölüm zeminine yumuşak geçiş — sert kesim kalksın.
   z-index ışık/grid katmanının (0) ÜSTÜNDE tutulur ki geçiş altındaki dokuyu örtsün. */
.nm-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, var(--bg-hero), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Üstten süzülen geniş ışık (en üst katman, grid/glow'un altında ezilmesin)
   + radyal derinlik (merkez bir tık aydınlık) + soluk blueprint grid dokusu.
   Tümü üstte görünmez başlayıp geçiş bitiminde belirginleşir (mask). */
#neden-marlab::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(160% 80% at 50% -14%, var(--light-shaft) 0%, transparent 58%),
    radial-gradient(ellipse 1100px 620px at 50% 38%, var(--section-glow), transparent 70%),
    repeating-linear-gradient(0deg, var(--section-grid) 0, var(--section-grid) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(90deg, var(--section-grid) 0, var(--section-grid) 1px, transparent 1px, transparent 80px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 230px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 230px);
  pointer-events: none;
  z-index: 0;
}

/* Merkez-net / kenar-blur "spotlight" katmanı (deneysel).
   ::after'daki grid/glow arka planını aynen tekrar çizer ve blur'lar;
   radial mask merkezi (kartların olduğu alan) şeffaf bırakır — orada
   blur görünmez, altındaki keskin ::after görünür. Kenarlarda mask
   opaklaşır, blur görünür olur. Kartlar/başlık .container'da (bu
   katmandan sonra DOM'da, aynı z-index) her zaman üstte ve nettir. */
.nm-focus-blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(160% 80% at 50% -14%, var(--light-shaft) 0%, transparent 58%),
    radial-gradient(ellipse 1100px 620px at 50% 38%, var(--section-glow), transparent 70%),
    repeating-linear-gradient(0deg, var(--section-grid) 0, var(--section-grid) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(90deg, var(--section-grid) 0, var(--section-grid) 1px, transparent 1px, transparent 80px);
  filter: blur(8px);
  /* Merkez geniş bir elipsle NET (transparent = blur maskelenir); yalnız
     kenarlar ve köşeler (kullanıcının işaretlediği baloncuk alanları) blur.
     Net elips bilinçli olarak büyük: kartlar + başlık + alt CTA hepsi net
     kalır, blur yalnız dış çeperde görünür. */
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 180px),
    radial-gradient(ellipse 74% 72% at 50% 50%, transparent 58%, black 96%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 180px),
    radial-gradient(ellipse 74% 72% at 50% 50%, transparent 58%, black 96%);
  -webkit-mask-composite: source-in;
}

@media (max-width: 768px) {
  .nm-focus-blur {
    display: none;
  }
}

#neden-marlab > .container {
  position: relative;
  z-index: 1;
}

#neden-marlab .section-subtitle {
  color: var(--brand-glow);
}

#neden-marlab h2 {
  color: var(--text-high);
  font-size: clamp(28px, 3.5vw, 48px);
  margin-bottom: 24px;
}

.nm-intro {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: var(--text-body);
  max-width: 680px;
  margin: 0;
}

.nm-header {
  margin-bottom: 64px;
}

.nm-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  overflow: visible;
  margin-bottom: 32px;
}

.nm-pillar {
  --nm-card-radius: 22px;
  padding: 44px 40px;
  /* --glass-subtle'ın yarısı: kart bölüm zemininden çok ayrışmasın (--glass-subtle paylaşımlı token, burada değiştirilmedi) */
  background: rgba(255, 255, 255, 0.02);
  /* Sert çizgi yerine soluk kenar + yumuşak zemin gölgesi: kart "çerçeveli" değil, hafif ayrışan bir panel gibi dursun */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--nm-card-radius);
  box-shadow: var(--shadow-soft);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow var(--dur-mid) var(--ease-lux);
}

/* Dönen çerçeve ışığı: kenarı takip eden tek dilimlik yeşil-teal parlama */
@property --nm-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.nm-pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--nm-angle),
    transparent 0%,
    var(--brand-green) 12%,
    var(--brand-teal) 22%,
    transparent 38%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* Varsayılanda soluk/nötr kenar — "ışıklı çerçeve" değil; glow yalnız hover'da belirginleşir (bkz. .is-hovered) */
  opacity: 0.18;
  pointer-events: none;
  animation: nm-border-spin 4s linear infinite;
  transition: opacity var(--dur-mid) var(--ease-lux);
}

@keyframes nm-border-spin {
  to { --nm-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-pillar::before {
    animation: none;
    opacity: 0.18;
    background: linear-gradient(135deg, var(--brand-green), var(--brand-teal));
  }
}

/* — Görsel kapsayıcı — */
.nm-pillar-img {
  position: relative;
  height: 170px;
  overflow: hidden;
  border-radius: calc(var(--nm-card-radius) - 1px) calc(var(--nm-card-radius) - 1px) 0 0;
  margin: -44px -40px 32px;
}

.nm-pillar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-lux);
}

/* Gradient overlay: görseli alt kart zeminine yumuşak bağlar */
.nm-pillar-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    var(--ink-a25) 65%,
    var(--bg-section) 100%
  );
  pointer-events: none;
}

/* — Hover: .is-hovered JS tarafından eklenir (motion guard + pointer:fine) — */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nm-pillar.is-hovered {
    box-shadow: 0 12px 32px var(--green-a20);
  }

  .nm-pillar.is-hovered::before {
    opacity: 1;
    animation-duration: 2.2s;
  }
}

.nm-pillar-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--brand-glow);
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}

.nm-pillar-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-high);
  margin: 0 0 12px;
  font-family: var(--font-heading);
  letter-spacing: -0.3px;
}

.nm-pillar-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}

.nm-result {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 40px;
  background: var(--green-a08);
  border: 1px solid var(--green-a20);
  border-radius: var(--radius-card);
}

.nm-result-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-high);
  font-weight: 500;
  margin: 0;
}

@media (max-width: 768px) {
  /* #neden-marlab padding: token clamp — hardcoded 64px kaldırıldı */

  .nm-pillars {
    grid-template-columns: 1fr;
  }

  .nm-pillar-img {
    margin: -44px -40px 28px;
  }

  .nm-result {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    padding: 28px 24px;
  }
}