/* ============================================================
   tokens.css — MARLAB tasarım belirteçleri (design tokens)
   main.css'TEN ÖNCE yüklenir (base.ejs). Sabit hex değerleri
   tek merkezde toplar; fütüristik/lüks paletin kaynağıdır.
   Mevcut CSS sınıfları değişmeden bu değişkenlere geçirilebilir.
   ============================================================ */

:root {
  /* — Marka yeşilleri — */
  --brand-green: #1e825c;     /* ana buton/accent */
  --brand-glow: #2fb583;      /* hover/highlight */
  --brand-teal: #12808c;      /* birincil CTA gradyanının teal ucu (beyaz metinle AA kontrastı için koyultulmuş) */
  --eco: #5fe3ac;             /* telemetri "eco" bölgesi */

  /* — Birincil CTA gradyanı (yeşil→teal, tek marka hareketi) — */
  --btn-gradient: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-teal) 100%);

  /* — Mavi accent — */
  --accent-blue: #0066ff;
  --accent-blue-soft: #4d94ff;

  /* — Koyu / derin zeminler — */
  --bg-deep: #060e1c;
  --bg-navy: #0a1628;
  --bg-section: #0e1c30;      /* --bg-navy'den bir tık aydınlık — boğucu düz zemin yerine */
  --bg-hero: #0a0e0c;         /* hero slaytların gerçek zemini (.hero, .hero-slide) */
  --ink: #0a1929;             /* açık zeminde metin */
  --bg-slate: #5e758a;        /* Donutlab ilhamlı mavi-gri zemin (about-journey) */

  /* — Telemetri / durum bölgeleri — */
  --zone-eco: var(--eco);
  --zone-normal: #f4b740;
  --zone-perf: #ef5a5a;

  /* — Cam (glassmorphism) — */
  --glass-header-bg: rgba(10, 18, 28, 0.55);   /* scrolled header arka plan */
  --glass-subtle: rgba(255, 255, 255, 0.04);   /* nav dropdown link bg, footer gradient */
  --glass-card: rgba(255, 255, 255, 0.05);     /* bento-card bg (koyu zemin) */
  --glass-line: rgba(255, 255, 255, 0.06);     /* ince bölücü border */
  --glass-footer: rgba(255, 255, 255, 0.07);   /* footer-bottom border, grafik grid */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-stat: rgba(255, 255, 255, 0.12);     /* hero stats ayırıcı */
  --glass-outline: rgba(255, 255, 255, 0.14);  /* about bento border */
  --glass-blur: 16px;

  /* — Bölüm zemini derinlik efektleri (radyal glow + blueprint doku) — */
  --section-glow: rgba(255, 255, 255, 0.03);   /* radyal merkez aydınlatma */
  --section-grid: rgba(255, 255, 255, 0.035);  /* soluk blueprint grid çizgisi */
  /* "Ürün Ailesi" bandındaki (urunler.css .featured-band) su-içi ışık diliyle
     tutarlı: eco/teal tonunun çok soluk hâli, üstten süzülen geniş aydınlanma. */
  --light-shaft: rgba(95, 227, 172, 0.10);

  /* — Yarıçap — */
  --radius-sm: 8px;
  --radius-card: 12px;
  --radius-md: 14px;
  --radius-pill: 50px;

  /* — Gölge / elevation — */
  --shadow-green: 0 8px 24px rgba(30, 130, 92, 0.25);
  --shadow-nav: 0 24px 50px rgba(0, 0, 0, 0.4);
  --shadow-bento: 0 20px 60px rgba(30, 130, 92, 0.15);
  --shadow-bento-light: 0 20px 60px rgba(10, 25, 41, 0.25);
  --shadow-soft: 0 20px 50px rgba(10, 25, 41, 0.12);
  --shadow-glow: 0 0 32px rgba(47, 181, 131, 0.35);
  --shadow-journey-card: 0 24px 60px rgba(0, 0, 0, 0.22);

  /* — Marka yeşil alfa (--brand-green = #1e825c = 30,130,92) — */
  --green-a05: rgba(30, 130, 92, 0.05);
  --green-a08: rgba(30, 130, 92, 0.08);
  --green-a10: rgba(30, 130, 92, 0.10);
  --green-a15: rgba(30, 130, 92, 0.15);
  --green-a20: rgba(30, 130, 92, 0.20);
  --green-a25: rgba(30, 130, 92, 0.25);
  --green-a30: rgba(30, 130, 92, 0.30);
  --green-a50: rgba(30, 130, 92, 0.50);
  --green-a60: rgba(30, 130, 92, 0.60);

  /* — Parlak yeşil + eco alfa (--brand-glow = #2fb583 = 47,181,131) — */
  --glow-a22: rgba(47, 181, 131, 0.22);
  --glow-a50: rgba(47, 181, 131, 0.50);
  --eco-a70: rgba(95, 227, 172, 0.70);

  /* — Teal alfa (--brand-teal = #12808c = 18,128,140) — hakkımızda "Yolculuğumuz"
     timeline'ında aktif yıl noktası halkası için (Faz K.3) — */
  --teal-a15: rgba(18, 128, 140, 0.15);
  --teal-a30: rgba(18, 128, 140, 0.30);

  /* — Koyu metin alfa (--ink = #0a1929 = 10,25,41) — */
  --ink-a08: rgba(10, 25, 41, 0.08);
  --ink-a25: rgba(10, 25, 41, 0.25);
  --ink-a70: rgba(10, 25, 41, 0.70);
  --ink-a75: rgba(10, 25, 41, 0.75);

  /* — Koyu zemin metin (text-on-dark, beyaz alfa) — */
  --text-ghost: rgba(255, 255, 255, 0.50);
  --text-dim: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.60);
  --text-nav: rgba(255, 255, 255, 0.72);
  --text-body: rgba(255, 255, 255, 0.75);
  --text-strong: rgba(255, 255, 255, 0.85);
  --text-caption: rgba(255, 255, 255, 0.90);
  --text-high: rgba(255, 255, 255, 0.92);

  /* — Hareket (motion) — */
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.35s;
  --dur-slow: 0.6s;

  /* — "Yolculuğumuz" timeline geçişleri (Faz K.3b — anasayfa) — */
  --timeline-dur-img: 450ms;   /* orta görsel clip-path silme/belirme */
  --timeline-dur-text: 350ms;  /* başlık + metin blokları dikey fade */
  --timeline-stagger: 70ms;    /* başlık → hikaye → aside gecikme adımı */
  --timeline-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* — /hakkimizda Yolculuğumuz slider (Faz K.3 yeniden) — */
  --journey-dur-media: 750ms;
  --journey-dur-text: 600ms;
  --journey-stagger: 90ms;
  --journey-ease: var(--ease-lux);

  /* — Tipografi — */
  --font-display: 'Archivo Black', var(--font-heading), sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-section: 'Epilogue', var(--font-heading), system-ui, sans-serif;

  /* — Düzen — */
  --container: 1400px;

  /* === Section Spacing Contract === */
  /* Her section YALNIZ kendi padding'ini bu token'larla tanımlar.
     Komşu section'ın spacing'ine ASLA margin ile müdahale etmez.
     Header offset YALNIZ scroll-margin-top ile, TEK YERDE çözülür. */
  --section-pad-sm: clamp(3rem, 6vw, 5rem);
  --section-pad-md: clamp(4.5rem, 8vw, 7rem);
  --section-pad-lg: clamp(6rem, 10vw, 9rem);
  --header-height: 72px;
}

/* ============================================================
   Reveal primitifi — GSAP scroll animasyonları için.
   Başlangıç durumu (gizli) YALNIZCA JS+GSAP+!PRM aktifken,
   yani <html class="gsap-ready"> eklenince uygulanır.
   Böylece no-JS / prefers-reduced-motion'da içerik görünür kalır
   (FOUC ve erişilebilirlik koruması — plandaki kesişen ilke).
   ============================================================ */
html.gsap-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* .reveal-item — bölüm bazlı staggered giriş (ör. #solutions Ürün Ailesi).
   Aynı gsap-ready kapısı: no-JS / PRM'de sınıf yok → öğeler baştan görünür. */
html.gsap-ready .reveal-item {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

@media (max-width: 768px) {
  html.gsap-ready .reveal-item:not(.is-revealed) {
    transform: translateY(20px);
  }
}

/* Hero zoom-in (Donutlab): opacity:0 + scale başlangıcı home.css'te.
   Eski LCP istisnası (opacity:1) zoom-in FOUC kapısıyla çeliştiği için kaldırıldı. */

/* Reveal tamamlanınca: GSAP inline transform'u temizlenir ve bu kural
   devralır → :hover transform'ları (ör. .bento-card) tekrar çalışır.
   (GSAP, animasyon bitince clearProps ile inline stili kaldırır.) */
html.gsap-ready [data-reveal].is-revealed,
html.gsap-ready .reveal-item.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Scroll ilerleme çubuğu (Faz 1)
   Track: koyu zemin (body #fff sızıntısını örter) · Bar: yeşil doluluk */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--bg-navy);
  z-index: 60;
  pointer-events: none;
}

.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-glow), var(--eco));
  box-shadow: var(--shadow-glow);
}

/* PRM: tüm reveal/parallax başlangıçlarını nötrle, içerik tam görünür */
@media (prefers-reduced-motion: reduce) {
  html.gsap-ready [data-reveal],
  html.gsap-ready .reveal-item {
    opacity: 1;
    transform: none;
  }
  .scroll-progress { display: none; }
}