/* ==========================================================================
   DESİL — Bileşen & Layout Stilleri
   tokens.css'e bağımlıdır. Kanonik shell: header / footer / nav + bölüm deseni.
   ========================================================================== */

/* --- Reset & taban ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--brand-tint); color: var(--brand-700); }

/* Erişilebilirlik: atlama linki */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand); color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) 0;
  z-index: calc(var(--z-overlay) + 10);
  font-weight: var(--fw-semi);
}
.skip-link:focus { left: 0; }

/* --- Layout yardımcıları ------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
/* R2 madde 1 — bölüm geçişleri KESKİN (Yasin Bey): beyaz/mavi alternans
   düz zeminlerle, kenarlar net; yumuşatma şeridi yok. */
.section--white { background: var(--surface); }
.section--tint,
.section--soft { background: var(--surface-blue); }

/* Koyu bölüm — arka planda loop video + lacivert overlay (açık/koyu ritmi) */
.section--dark {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff; background: var(--brand-deep);
}
.section-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.section-bg video, .section-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.section-bg::after { /* okunurluk overlay'i */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(155deg,
    rgba(10, 36, 80, 0.93) 0%, rgba(13, 44, 105, 0.86) 52%, rgba(9, 30, 66, 0.92) 100%);
}
.section--dark .section-title { color: #fff; }
.section--dark .section-lead { color: rgba(255, 255, 255, 0.82); }

.measure { max-width: var(--measure); }

/* Bölüm deseni: (eyebrow + başlık | sağ-üst CTA) → lead */
.section-head { margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; max-width: 62ch; }
/* Başlık satırı: solda eyebrow+H2, sağda hizalı "Tümünü Gör" butonu */
.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.section-head-titles { max-width: min(100%, 900px); } /* R1 madde 5: başlık tek satıra sığabilsin */
.section-cta { flex: none; }
/* Sağ-üst araç kümesi: "Tümünü Gör" + carousel okları yan yana */
.section-head-tools { display: flex; align-items: center; gap: var(--space-3); flex: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-4);
}
/* Sinyatür motif: veri noktası (node) — markanın veri/etki temasını kodlar */
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint),
              0 0 10px 1px rgba(42, 212, 255, 0.55);
  flex: none;
}
.eyebrow--on-dark { color: #8FE4FF; }
.eyebrow--on-dark::before {
  background: var(--ai-cyan);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08),
              0 0 12px 2px rgba(42, 212, 255, 0.7);
}

.section-title { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.section-lead {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Bölüm sonu çıkış linki */
.section-foot { margin-top: var(--space-7); }
.link-more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-semi); color: var(--brand);
  font-size: var(--fs-sm);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-more svg { transition: transform var(--dur) var(--ease); }
.link-more:hover { gap: var(--space-3); color: var(--brand-700); }
.link-more:hover svg { transform: translateX(3px); }

/* --- Butonlar ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand); color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background: var(--brand-700); }

.btn--ghost {
  background: transparent; color: var(--brand);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-wash); }

.btn--light {
  background: rgba(255,255,255,0.10); color: #fff;
  border-color: rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
}
.btn--light:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.55); }

.btn--white { background: #fff; color: var(--brand-deep); }
.btn--white:hover { background: var(--brand-soft); }

.btn--sm { padding: 0.6rem 1.05rem; font-size: 0.85rem; }

/* ==========================================================================
   TOPBAR — üst bilgi barı (R1 madde 1: telefon · e-posta · sosyal · dil)
   Normal akışta durur, scroll'la yukarı gider; header onu izleyip sabitlenir.
   ========================================================================== */
.topbar {
  /* Akışta sayfa tepesinde durur; perde (curtain) halinde .hero-sticky fixed
     z:0 viewport üstünü de kapladığından topbar onun üstünde kalmalı (z:3). */
  position: relative; z-index: 3;
  background: var(--brand-deep);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-label);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--topbar-h);
}
.topbar-contact { display: flex; align-items: center; gap: var(--space-5); }
.topbar-contact a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--dur) var(--ease);
}
.topbar-contact a:hover { color: var(--ai-cyan); }
.topbar-contact svg { width: 14px; height: 14px; flex: none; color: #8FE4FF; }
.topbar-right { display: flex; align-items: center; gap: var(--space-5); }
.topbar-social { display: flex; gap: var(--space-2); }
.topbar-social a {
  width: 26px; height: 26px; border-radius: var(--radius-xs);
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topbar-social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.topbar-social svg { width: 13px; height: 13px; }
/* Dil seçimi: TR aktif, EN pasif placeholder (Beyar kararı — EN sayfa yok) */
.topbar-lang {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-semi); letter-spacing: var(--tracking-label);
}
.topbar-lang .lang-active { color: #fff; }
.topbar-lang .lang-sep { color: rgba(255, 255, 255, 0.25); }
.topbar-lang .lang-passive { color: rgba(255, 255, 255, 0.38); cursor: default; }

/* ==========================================================================
   HEADER / NAV
   R1: topbar akışta kaldığı için header 'absolute top: topbar' başlar;
   scroll topbar'ı geçince JS is-stuck ile 'fixed top: 0'a alır (dikişsiz).
   ========================================================================== */
.site-header {
  position: absolute; top: var(--topbar-h); left: 0; right: 0; z-index: var(--z-header);
  background: transparent;
  transition: background-color var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
  border-bottom: 1px solid transparent;
}
/* Hero üstünde nav okunurluğunu garanti eden ince üst scrim (sticky olunca kaybolur) */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 30, 66, 0.55) 0%, rgba(9, 30, 66, 0) 100%);
  opacity: 1; transition: opacity var(--dur-slow) var(--ease);
}
.site-header.is-stuck::before { opacity: 0; }
.site-header.is-stuck {
  position: fixed; top: 0;
  background: rgba(247, 249, 252, 0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  min-height: 76px;
}
/* Sabit kutu: iki logo varyantı farklı oranda (beyaz 1592×582, lacivert 1610×552);
   genişlik en geniş varyanta (lacivert, 46px yükseklikte ~134.2px) göre sabitlenir ki
   is-stuck swap'ında nav elemanları kaymasın. */
.brand { display: inline-flex; align-items: center; flex: none; width: 135px; height: 46px; }
.brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; } /* R1 madde 2: logo belirgin */
/* Logo, hero üstünde beyaz; sticky (açık zemin) olunca lacivert */
.brand .logo-dark { display: none; }
.site-header.is-stuck .brand .logo-white { display: none; }
.site-header.is-stuck .brand .logo-dark { display: block; }

.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav-list { display: flex; align-items: center; gap: clamp(2px, 0.4vw, 10px); }
.nav-list a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap; /* R1 madde 5: menü öğesi asla iki satıra kırılmaz */
  color: rgba(255, 255, 255, 0.82);   /* hero üstü: açık */
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-list a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.site-header.is-stuck .nav-list a { color: var(--ink-soft); }
.site-header.is-stuck .nav-list a:hover { color: var(--brand); background: var(--brand-wash); }

.header-cta { display: flex; align-items: center; gap: var(--space-3); }
/* Header CTA: hero üstünde cam-buton, sticky olunca primer */
.site-header:not(.is-stuck) .header-cta .btn--primary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.30);
  color: #fff;
  box-shadow: none;
}
.site-header:not(.is-stuck) .header-cta .btn--primary:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.10);
  padding: 0; position: relative;
}
.site-header.is-stuck .nav-toggle,
body.nav-open .nav-toggle {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.6);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 2px; background: #fff;
  border-radius: 2px; transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.site-header.is-stuck .nav-toggle span,
.site-header.is-stuck .nav-toggle span::before,
.site-header.is-stuck .nav-toggle span::after,
body.nav-open .nav-toggle span::before,
body.nav-open .nav-toggle span::after { background: var(--navy); }
.nav-toggle span::before { transform: translate(-50%, -7px); }
.nav-toggle span::after  { transform: translate(-50%, 5px); }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translate(-50%, -50%) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ==========================================================================
   HERO — full-bleed video + lacivert overlay + açık metin
   (Sayfanın geri kalanı açık zeminli; yalnız hero koyu-üstü-açık-metin.)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--brand-deep);
  color: #fff;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero-bg::after { /* WCAG okunurluk overlay'i (sol taraf daha koyu) */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--grad-hero-overlay);
}
.hero-canvas { /* video üstü ince veri-noktası dokusu (sinyatür — R1: daha sakin) */
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; display: block;
  opacity: 0.35; pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(82vh, 720px);
  padding-block: clamp(4rem, 3rem + 6vw, 7rem);
}
/* R1 madde 3: metin ortalanmış, sade kurumsal */
.hero-copy { max-width: 46rem; margin-inline: auto; text-align: center; }
.hero-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-3);
  color: #fff;
  text-wrap: balance;
}
.hero-title .accent { /* R1: sade kurumsal — ortalanmış metne simetrik, iki uca soluklaşan tek çizgi */
  color: #fff; position: relative;
}
.hero-title .accent::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -0.14em; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    rgba(42, 212, 255, 0) 0%, var(--ai-cyan) 50%, rgba(42, 212, 255, 0) 100%);
}
.hero-lead {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 52ch;
  margin-inline: auto;
}
.hero-actions {
  margin-top: var(--space-7);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
}
/* Reduced-motion: video duraklatılır, poster kalır */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas { opacity: 0.4; }
}

/* --------------------------------------------------------------------------
   HERO PERDE (curtain) — yalnız ≥1024px + motion açık (footer-reveal'in tepe-
   aynası, aynı fixed + z-index + spacer ailesi). hero-zone akışta 100vh şeffaf
   spacer yer tutar; hero viewport'a çakılı sabit kalır; sonraki opak bölümler
   scroll'da hero'nun üstüne perde gibi biner. Katman (page-main stacking
   context'i içinde): hero-sticky z:0 < hero-zone z:1 < sonraki section z:2 <
   header z:100. Mobil/kısa/reduced-motion: hiçbiri uygulanmaz → hero normal
   akışta kalır (page-main'de transform yok, fixed viewport'a göre çözülür). */
.hero-zone { position: relative; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero-zone { z-index: 1; height: 100vh; min-height: 640px; overflow-x: clip; }
  .hero.hero-sticky {
    position: fixed; inset: 0 0 auto 0;
    height: 100vh; min-height: 640px; z-index: 0; overflow-x: clip;
  }
  .hero.hero-sticky .hero-inner { min-height: 100vh; }
  .hero-zone ~ section { position: relative; z-index: 2; }
  /* Perde tam örttüğünde (JS) sabit hero'yu görselden düşür — boşuna paint yok */
  .hero-sticky.is-hidden { visibility: hidden; }
}

/* ==========================================================================
   MARKA TANITIMI (split: metin + görsel)
   ========================================================================== */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.intro-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--brand-soft) center/cover no-repeat;
  box-shadow: var(--shadow-lg);
  position: relative; isolation: isolate;
}
.intro-figure video, .intro-figure .intro-media {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.intro-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(10,36,80,0) 50%, rgba(10,36,80,0.42) 100%);
}
.intro-quote {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.intro-quote p { font-size: var(--fs-lead); line-height: 1.55; color: var(--navy); font-weight: var(--fw-medium); }
.intro-quote .quote-label {
  display: block; margin-top: var(--space-3);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted); font-weight: var(--fw-semi);
}

/* ==========================================================================
   GRID + KARTLAR
   ========================================================================== */
.grid { display: grid; gap: var(--space-5); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Odak alanı kartı */
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card-index {
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  color: var(--brand);
}
.card-icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  margin-bottom: var(--space-4);
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); font-weight: var(--fw-bold); }
.card p { font-size: var(--fs-sm); color: var(--ink-soft); }
/* Etki alanı kartı — görselli (div + background-image), koyu overlay + beyaz metin */
.focus-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 320px;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: #fff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.focus-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.focus-media {
  position: absolute; inset: 0; z-index: -2;
  background: var(--brand-soft) center/cover no-repeat;
  transition: transform var(--dur-slow) var(--ease);
}
.focus-card:hover .focus-media { transform: scale(1.06); }
.focus-card::after { /* okunurluk için lacivert gradient */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(10, 36, 80, 0.15) 0%, rgba(10, 36, 80, 0.55) 52%, rgba(8, 26, 60, 0.92) 100%);
}
.focus-card h3 { color: #fff; font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.focus-card p { color: rgba(255, 255, 255, 0.86); font-size: var(--fs-sm); }

/* Lab — R1 madde 5: dikey kart yerine tam-genişlik YATAY satırlar;
   başlık tek satır, açıklama sağda "uzunlamasına". Koyu-glass dil korunur. */
.lab-rows { display: flex; flex-direction: column; gap: var(--space-4); }
.lab-card {
  display: grid;
  grid-template-columns: 44px minmax(240px, 300px) 1fr;
  align-items: center;
  column-gap: var(--space-5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  backdrop-filter: blur(6px);
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.lab-card:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(42, 212, 255, 0.42);
}
.lab-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.10); color: #8FE4FF;
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
}
.lab-icon svg { width: 22px; height: 22px; }
.lab-icon::after { /* cyan veri-noktası aksanı */
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ai-cyan); box-shadow: 0 0 8px 1px rgba(42, 212, 255, 0.7);
  border: 2px solid var(--brand-deep);
}
.lab-card h3 {
  font-size: var(--fs-h3); font-weight: var(--fw-bold); color: #fff;
  margin: 0; white-space: nowrap; /* tek satır garantisi */
}
.lab-card p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.78); margin: 0; }

/* Proje kartı — case study hissi */
.project-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.project-media {
  aspect-ratio: 16 / 10;
  background: var(--brand-soft) center/cover no-repeat;
  position: relative;
}
.project-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,42,67,0) 55%, rgba(16,42,67,0.35) 100%);
}
.project-body { padding: var(--space-5) var(--space-5) var(--space-6); display: flex; flex-direction: column; flex: 1; }
.project-kicker {
  font-size: 0.72rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--brand); margin-bottom: var(--space-3);
}
/* min-height: başlıklar 1–2 satır arası değişse de açıklamalar aynı hattan başlar */
.project-card h3 { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.3; margin-bottom: var(--space-3); min-height: 2.6em; text-wrap: balance; }
.project-card p { font-size: var(--fs-sm); color: var(--ink-soft); }
.project-cta {
  margin-top: auto; padding-top: var(--space-5);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--brand);
  transition: gap var(--dur) var(--ease);
}
.project-card:hover .project-cta { gap: var(--space-3); }

/* ==========================================================================
   CAROUSEL — scroll-snap tabanlı, kütüphanesiz (R1 madde 6 + 8)
   [data-carousel] kökü içinde .carousel-track + .carousel-prev/next
   ========================================================================== */
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3); /* 3'lü görünüm */
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* hover kalkışı + gölge scroll kabında kırpılmasın */
  padding-block: var(--space-2) var(--space-6);
  margin-block: calc(-1 * var(--space-2)) calc(-1 * var(--space-6));
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-nav { display: flex; gap: var(--space-2); }
.carousel-btn {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--brand);
  display: grid; place-items: center;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-wash); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
/* Koyu bölümde ok butonları cam dile döner */
.section--dark .carousel-btn {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Haber / son içerik kartı */
.news-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.news-media { aspect-ratio: 16 / 9; background: var(--brand-soft) center/cover no-repeat; }
.news-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.news-date {
  font-size: 0.78rem; font-weight: var(--fw-semi); color: var(--ink-muted);
  letter-spacing: var(--tracking-label); margin-bottom: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.news-date::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.news-card h3 { font-size: 1.0rem; font-weight: var(--fw-semi); line-height: 1.4; color: var(--ink); }

/* ==========================================================================
   DESTEK CTA (koyu blok)
   ========================================================================== */
/* .support artık .section--dark + .section-bg (loop video) yapısını kullanır */
.support-inner { max-width: 720px; }
.support h2 { color: #fff; font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); }
.support p.support-lead { margin-top: var(--space-4); font-size: var(--fs-lead); color: rgba(255,255,255,0.86); }
.support-actions { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.support-kvkk {
  margin-top: var(--space-6);
  font-size: 0.82rem; color: rgba(255,255,255,0.62);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.support-kvkk svg { width: 15px; height: 15px; flex: none; opacity: 0.8; }

/* ==========================================================================
   PAYDAŞLAR — R1 madde 8: çoklu logo carousel'i (gerçek 1 + demo 5)
   ========================================================================== */
.partners-track { grid-auto-columns: calc((100% - 4 * var(--space-5)) / 5); } /* 5 logo görünür */
.partner-card {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 96px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.partner-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.partner-card img { max-height: 52px; width: auto; max-width: 100%; object-fit: contain; }

/* ==========================================================================
   FOOTER — R1 madde 7: gradient dil (kompozisyon gaviaworks, renkler DESİL)
   + perde (reveal): desktop'ta footer altta sabit bekler, içerik üstünden
   kalkınca açığa çıkar (DadaMutfak'ta kanıtlı teknik). Mobil: statik.
   ========================================================================== */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-footer); color: rgba(255,255,255,0.78);
  padding-block: var(--space-9) var(--space-6);
}
.site-footer::before { /* düşük opaklı cyan/lacivert haleler (mikro vurgu sınırında) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 60% at 85% 0%, rgba(42, 212, 255, 0.10) 0%, transparent 70%),
    radial-gradient(55% 70% at 8% 100%, rgba(27, 95, 158, 0.38) 0%, transparent 72%);
}
.site-footer::after { /* üst kenar: transparent → cyan → transparent hairline */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(42, 212, 255, 0.55) 50%, transparent 100%);
}
/* İçerik sarmalayıcı footer perdesinin üstünde opak durur */
.page-main { position: relative; z-index: 2; background: var(--ground); }
@media (min-width: 641px) {
  /* JS yalnızca footer viewport'a sığıyorsa body.has-reveal verir ve
     .page-main'e footer yüksekliği kadar margin-bottom açar */
  body.has-reveal .site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; }
}
/* R2 madde 2 — Milli Müdafaa deseni: tek merkezî dikey kolon
   (logo → tanım → yatay link satırı → yatay iletişim), her katman ortalı */
.footer-top {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-logo { height: 40px; width: auto; margin-bottom: var(--space-5); }
.footer-slogan {
  max-width: 52ch; font-size: var(--fs-sm); line-height: 1.6;
  color: rgba(255,255,255,0.72); margin-bottom: var(--space-6);
}
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: var(--space-5); row-gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.footer-links a {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: rgba(255,255,255,0.88);
  transition: color var(--dur) var(--ease);
}
.footer-links a:hover { color: var(--ai-cyan); }
.footer-contact {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: var(--space-6); row-gap: var(--space-3);
  font-size: var(--fs-sm);
}
.footer-contact a, .footer-contact span { font-size: var(--fs-sm); color: rgba(255,255,255,0.74); transition: color var(--dur) var(--ease); }
.footer-contact li { display: flex; align-items: center; gap: var(--space-2); }
.footer-contact svg { width: 16px; height: 16px; flex: none; color: #8FE4FF; }
.footer-contact a:hover { color: var(--ai-cyan); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-4);
  padding-top: var(--space-6);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-legal a { font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.footer-legal a:hover { color: #fff; }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
  width: 38px; height: 38px; border-radius: var(--radius-xs);
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.8);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.footer-social svg { width: 17px; height: 17px; }
.footer-copy { font-size: 0.8rem; color: rgba(255,255,255,0.5); }

/* ==========================================================================
   SCROLL-REVEAL (hafif)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   MOBİL STICKY "BAĞIŞ YAP"
   ========================================================================== */
.sticky-donate {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
  display: none;
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(247, 249, 252, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px -12px rgba(16,42,67,0.3);
}
.sticky-donate .btn { width: 100%; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { min-height: min(78vh, 640px); }
  .carousel-track { grid-auto-columns: calc((100% - var(--space-5)) / 2); }   /* 2'li görünüm */
  .partners-track { grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3); }
  .lab-card { grid-template-columns: 44px minmax(200px, 260px) 1fr; }
}

/* Başlık satırı mobilde: başlık üstte, "Tümünü Gör" altında sola hizalı */
@media (max-width: 640px) {
  .section-head-row { align-items: flex-start; gap: var(--space-4); }
  .section-head-titles { max-width: 100%; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-block; }
  .header-cta .btn--primary { display: none; } /* mobilde sticky bar devralır */

  /* Topbar mobil: sosyal ikonlar gizli (footer'da mevcut), sıkı tek satır */
  .topbar { font-size: 0.75rem; }
  .topbar-social { display: none; }
  .topbar-contact { gap: var(--space-4); }
  .topbar-right { gap: var(--space-3); }

  /* Açılır mobil menü — header topbar altından başlarken panel de onu izler */
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; inset: calc(var(--topbar-h) + 76px) 0 auto 0;
    background: var(--ground);
    padding: var(--space-5) var(--gutter) var(--space-7);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    gap: var(--space-2);
    max-height: calc(100dvh - var(--topbar-h) - 76px);
    overflow-y: auto;
  }
  .site-header.is-stuck .nav.is-open {
    inset: 76px 0 auto 0;
    max-height: calc(100dvh - 76px);
  }
  .nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .nav.is-open .nav-list a { padding: var(--space-4) var(--space-4); font-size: 1.05rem; border-radius: var(--radius-sm); color: var(--ink); }
  .nav.is-open .nav-list a:hover { color: var(--brand); background: var(--brand-wash); }

  .intro-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .intro-figure { order: -1; aspect-ratio: 16 / 10; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .sticky-donate { display: block; }
  body { padding-bottom: 76px; }
}

@media (max-width: 620px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 auto; }
  /* Ortalanmış footer hiyerarşisi mobilde de merkezde kalır */
  .footer-bottom { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .brand { width: 117px; height: 40px; } /* 40px yükseklikte en geniş varyant ~116.7px */
  /* Carousel mobil: 1 kart + sonrakinin kenarı görünür (kaydırma ipucu) */
  .carousel-track { grid-auto-columns: 86%; }
  .partners-track { grid-auto-columns: calc((100% - var(--space-5)) / 2.2); }
  /* Lab satırı mobilde: ikon + başlık üstte, açıklama altta tam genişlik */
  .lab-card {
    grid-template-columns: 44px 1fr;
    row-gap: var(--space-3);
    padding: var(--space-5);
  }
  .lab-card h3 { white-space: normal; }
  .lab-card p { grid-column: 1 / -1; }
}

/* === reCAPTCHA v3 ROZETİ ================================================
   Google'ın enjekte ettiği `.grecaptcha-badge` sarmalayıcısı BODY'nin doğrudan
   çocuğu ve kendi z-index'i YOK (`z-index: auto`). Bu sayfada `.page-main`
   (footer perdesi düzeni, ~L731) `position: relative; z-index: 2` ile bir
   yığın bağlamı açtığından rozet SİTE İÇERİĞİNİN ALTINDA kalıyordu — DOM'da
   var, `visibility: visible`, ama `elementFromPoint()` rozetin merkezinde
   `DIV.container` döndürüyordu (kanıtlı ölçüm, canlı tarayıcı).
   Google'ın kullanım şartları rozetin görünür olmasını (ya da yerine metin
   bildirimi konmasını) şart koştuğundan rozet perdenin üstüne alınır.
   Seçilen değer 3: `.page-main` (2) ve sabit footer'ın (1) ÜSTÜNDE, ama
   `--z-header` (100, mobil "Bağış Yap" çubuğu) ve consent bandının (200)
   ALTINDA — rozet hiçbir zaman bir aksiyon öğesinin önüne geçmez. */
.grecaptcha-badge { z-index: 3; }

@media (max-width: 900px) {
  /* Mobilde sabit "Bağış Yap" çubuğu (76px, bkz. body padding-bottom) rozetin
     tam üstüne oturuyor; rozeti çubuğun üzerine kaldır — üst üste binmesin. */
  .grecaptcha-badge { bottom: 88px !important; }
}
/* Consent bandı açıkken rozet bandın da üstüne alınır: Google, rozetin
   görünür kalmasını (ya da yerine metin bildirimi konmasını) şart koşuyor —
   bandın arkasında kalması kabul edilemez. Ofsetler yukarıdaki iki değerin
   (masaüstü 14px / mobil 88px) bant yüksekliği kadar ötelenmişi; bant
   kapanınca `has-consent` düşer ve rozet kendi yerine döner.
   Google'ın kendi kuralı `!important` olduğundan burada da şart. */
body.has-consent .grecaptcha-badge { bottom: calc(14px + var(--consent-h, 0px)) !important; }
@media (max-width: 900px) {
  body.has-consent .grecaptcha-badge { bottom: calc(88px + var(--consent-h, 0px)) !important; }
}

/* === CONSENT BANNER — KVKK bilgilendirme bandı (R4 m.14) ================
   Shell öğesi CSS'i — main.js tüm sayfalara (index dahil) enjekte ediyor;
   index.html components.css yüklemediği için bu blok main.css'te durur
   (QA cross-page bulgusu, Lead onaylı taşıma — components.md §25). */
.consent-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -10px 30px rgba(10, 36, 80, 0.12);
  padding: var(--space-4) 0;
}
.consent-inner { display: flex; align-items: center; gap: var(--space-5); }
.consent-text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-body); }
.consent-text a { color: var(--brand); font-weight: var(--fw-semi); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: var(--space-2); flex: none; }
/* Bant açıkken (`body.has-consent`) pencerenin altına yapışan DİĞER sabit
   öğeler bandın yüksekliği (`--consent-h`, main.js yayınlar) kadar yukarı
   alınır — bant hiçbir şeyi örtmez:
   · Footer perdesi (`body.has-reveal .site-footer`, ~L735) `bottom:0` sabit
     durduğundan alt dolgusu büyütülür; footer'ın legal linkleri (Aydınlatma
     Metni/Çerezler — kullanıcının onaydan ÖNCE okuması gereken metinler) ve
     sosyal ikonlar bandın üstünde görünür ve tıklanabilir kalır.
   · Mobil "Bağış Yap" çubuğu bandın üstüne oturur (ikisi için ayrılan yer
     body padding-bottom'unda zaten toplanıyor, bkz. main.js). */
body.has-reveal.has-consent .site-footer { padding-bottom: calc(var(--space-6) + var(--consent-h, 0px)); }
body.has-consent .sticky-donate { bottom: var(--consent-h, 0px); }
@media (max-width: 720px) {
  .consent-banner { padding: var(--space-3) 0; }
  .consent-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}