/* === Gavia Works 2026 — Brand CSS === */

@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');

/* gavia-footer-dark.webp = orijinal beyaz wordmark'in beyaz pixelleri navy'e
   çevrilmiş halı (Python/PIL ile üretildi), mint dot orijinal pozisyonunda
   korundu. Brand intro section'da normal <img> olarak kullanılır, mask hilesine
   gerek kalmadı. Yasin Bey nihai logo verirse bu asset replace edilir. */

/* === Queulat — eski gaviaworks.com markasından miras ===
   Tüm weight'leri mount et: Medium (500), Bold (700, range 600-700), Black (900, range 800-900).
   Sayfalar font-weight: 500/600/700/800 hangisini isterse Queulat dosyalarından karşılansın —
   yoksa tarayıcı uygun match bulamayıp Manrope fallback'e düşüyor. */
@font-face {
  font-family: 'Queulat';
  src: url('../fonts/Queulat-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Queulat';
  src: url('../fonts/Queulat-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Queulat';
  src: url('../fonts/Queulat-Bold.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Queulat';
  src: url('../fonts/Queulat-BoldItalic.otf') format('opentype');
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Queulat';
  src: url('../fonts/Queulat-Black.otf') format('opentype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'QueulatAlt';
  src: url('../fonts/QueulatAlt-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --gavia-deep: #020837;
  --gavia-night: #141533;
  --gavia-dark: #0A0E27;
  --gavia-mint: #3FD5AD;
  --gavia-mint-bright: #4FE5BD;
  --gavia-mint-glow: rgba(63, 213, 173, 0.12);
  --gavia-light: #E9EEF1;
  --gavia-muted: #6B7280;
  --gavia-border: #1F2740;
}

.gradient-text-mint {
  background: linear-gradient(135deg, var(--gavia-mint) 0%, #7FE5C5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dot-pattern {
  background-image: radial-gradient(rgba(63, 213, 173, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

.card-glow {
  transition: all 0.3s ease-out;
}
.card-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(63, 213, 173, 0.15);
  border-color: var(--gavia-mint);
}

.nav-blur {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--gavia-deep);
}
.nav-blur::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63, 213, 173, 0.18), transparent);
  pointer-events: none;
}

.badge-mint {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--gavia-mint-glow);
  color: var(--gavia-mint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-mint-dark {
  background: rgba(2, 8, 55, 0.06);
  color: var(--gavia-deep);
}

.badge-soon {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(63, 213, 173, 0.15);
  color: var(--gavia-mint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(63, 213, 173, 0.3);
}

.chip-sector {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gavia-border);
  color: #D1D5DB;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease-out;
}
.chip-sector:hover {
  border-color: var(--gavia-mint);
  color: var(--gavia-mint);
  background: var(--gavia-mint-glow);
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--gavia-mint);
  color: var(--gavia-deep);
}

body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
}

/* === Mega Menu === */
/* === Hero scroll-over reveal (Thoughtworks signature pattern) ===
   Hero `position: fixed` ile viewport'a yapışık kalır (asla hareket etmez).
   .hero-zone wrapper 100vh height ile body akışında SPACER rolü görür
   (hero fixed olduğu için kendi alanını kaplamaz).
   Sonraki opaque section'lar (z-index 2) yukarı scroll'da hero'nun üstüne kayar. */
.hero-zone {
  position: relative !important;
  height: 100vh;
  min-height: 640px;
  z-index: 1;
}
.hero-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  min-height: 640px;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-zone ~ section,
.hero-zone ~ footer,
.hero-zone ~ main,
.hero-zone ~ div {
  position: relative;
  z-index: 2;
}
/* Reduced motion: efekti devre dışı bırak */
@media (prefers-reduced-motion: reduce) {
  .hero-zone { height: auto; }
  .hero-sticky { position: relative !important; height: auto; left: auto; right: auto; }
}
/* Mobile + tablet: hero-sticky pattern güvenilmez (iOS 100vh, scroll glitch,
   footer arkadan görünmüyor). Normal flow'a düşür → hero normal section gibi. */
@media (max-width: 1023px) {
  .hero-zone { height: auto !important; min-height: 0 !important; }
  .hero-sticky {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }
}

/* === Footer reveal (B kategori — iletişim üstte, footer arkada bekler) ===
   Footer fixed bottom:0 z-0; arkada hep bekler. CTA section opak gavia-deep
   z-2 (hero rule), normal scroll ile yukarı kayınca alttan footer açığa çıkar.
   Hero rule'unun ~div { z-index:2 } kuralını override etmek için !important. */
.footer-fixed-bottom {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0 !important;
}
/* M8 — anasayfaya özel buz footer. Diğer 32 sayfa navy kalır. */
.footer-light { background: var(--gavia-light); color: rgba(2, 8, 55, 0.65); }
.footer-light a { color: rgba(2, 8, 55, 0.75); }
.footer-light a:hover { color: var(--gavia-mint); }
.footer-reveal-spacer {
  position: relative !important;
  /* Footer'ın gerçek yüksekliği kadar — iletişim'in alt kenarı footer'ın
     üst kenarına (divider'a) tam değsin, kopmasın. JS ile dinamik set edilir. */
  height: 480px;
  z-index: 0 !important;
  background: transparent;
  pointer-events: none;
}
/* JS toggle: reveal zone viewport'a girince hero gizlensin (z-conflict ile top'ta
   görünür kalır, scroll'da örtmesin diye) */
.hero-sticky.is-hidden { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .footer-fixed-bottom { position: relative !important; bottom: auto; left: auto; right: auto; }
  .footer-reveal-spacer { display: none; }
}

.mega-trigger { position: relative; }
.mega-panel {
  position: fixed;
  left: 0;
  right: 0;
  /* Itransition pattern: header ALTINDAN açılır — header opak/blur kalır üstte */
  top: 80px;
  width: 100vw;
  max-width: 100vw;
  background: var(--gavia-deep);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(63, 213, 173, 0.18);
  border-bottom: 1px solid rgba(63, 213, 173, 0.10);
  border-radius: 0;
  padding: 24px 0 28px;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
  transform: translateY(-8px);
  /* Panel z header'dan yüksek — invisible hover bridge header üstüne taşıp
     cursor button→panel geçişinde hover-loss yaşatmasın. Panel y=80+ olduğu
     için header (y=0-80) ile fizik overlap yok; z farkı sadece bridge için. */
  z-index: 60;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.mega-panel > .mega-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; gap: 24px !important; }
.mega-panel .grid.md\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, max-content)) !important;
  column-gap: 32px !important;
  row-gap: 4px !important;
}
/* Link grid'ini hizala (showcase solda olduğu için ekstra margin kaldırıldı) */
.mega-link { padding: 10px 12px; gap: 12px; }
/* Invisible hover bridge — trigger button bottom (~y=55) ile panel top (y=80)
   arasındaki 25px gap'i kapat. Button overlap'i olmasın diye top: -25px. */
.mega-panel::before {
  content: '';
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  height: 25px;
  background: transparent;
  pointer-events: auto;
}
.mega-trigger:hover .mega-panel,
.mega-trigger:focus-within .mega-panel {
  transform: translateY(0);
}
.mega-panel-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gavia-mint);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(63, 213, 173, 0.12);
}
.mega-panel-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gavia-border) 20%, var(--gavia-border) 80%, transparent);
}
.mega-footer-bar {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gavia-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.mega-trigger:hover .mega-panel,
.mega-trigger:focus-within .mega-panel,
.mega-panel:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.2s ease-out;
  position: relative;
}
.mega-link:hover {
  background: transparent;
  border-color: transparent;
}
.mega-link:hover .block.font-semibold { color: var(--gavia-mint); }
.mega-link .mega-link-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--gavia-mint);
  font-size: 14px;
  margin-top: 2px;
  transition: color 0.15s ease-out;
}
.mega-link:hover .mega-link-icon { color: var(--gavia-mint); }
.mega-featured {
  background: linear-gradient(155deg, rgba(63, 213, 173, 0.15) 0%, rgba(63, 213, 173, 0.04) 50%, rgba(20, 21, 51, 0.6) 100%);
  border: 1px solid rgba(63, 213, 173, 0.25);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.mega-featured::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(63, 213, 173, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.mega-showcase {
  display: block;
  background: rgba(20, 21, 51, 0.6);
  border: 1px solid var(--gavia-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease-out;
}
.mega-showcase:hover {
  border-color: var(--gavia-mint);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(63, 213, 173, 0.12);
}
.mega-showcase-media {
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: var(--gavia-dark);
}
.mega-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}
.mega-showcase:hover .mega-showcase-media img { transform: scale(1.05); }
.mega-showcase-body { padding: 16px 18px 18px; }

/* === Billboard variant (option-hover'da görsel swap'li büyük showcase) ===
   Kart hissi YOK — panel'in sağ/üst/alt kenarlarına yapışan flat görsel. */
.mega-showcase-billboard,
.mega-showcase-billboard:hover {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.mega-showcase-billboard {
  position: relative;
  display: block;
  min-height: 280px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  /* Mega-panel y=80'de başlar (header altı), padding-top:24px.
     Billboard üst kenarı viewport y=0'a dayansın → margin-top: -104px (80 header + 24 padding).
     Header bg'i sol tarafta TRANSPARAN olduğu için (gradient), görsel header'ın arkasından görünür. */
  .mega-showcase-billboard {
    min-height: 380px;
    margin-top: -104px;
    margin-bottom: -28px;
    margin-right: -32px;
  }
  /* Showcase LEFT variant — görsel sol viewport kenarına yapışır */
  .mega-showcase-billboard.mega-showcase-left {
    margin-right: 0;
    margin-left: -32px;
  }
}
/* Geniş ekran (>1280): showcase sağ kenarı viewport sağ kenarına yapışsın
   mega-inner mx-auto max-w-1280 + padding 32 → showcase'in sağı şu an vp-center+608'de.
   Hedef vp-center+50vw. Margin-right = 608 - 50vw (negative on wide viewports). */
@media (min-width: 1280px) {
  .mega-showcase-billboard {
    margin-right: calc(608px - 50vw);
  }
  /* LEFT variant — sol kenarı viewport sol kenarına dayansın */
  .mega-showcase-billboard.mega-showcase-left {
    margin-right: 0;
    margin-left: calc(608px - 50vw);
  }
}

/* Dropdown açıkken header bandı: SOL %25 transparan (showcase görseli y=0'a kadar
   uzandığı için header arkasından görünür), kalan kısım SOLID navy (menü+lang
   okunaklı kalsın). Smooth gradient geçiş ile birleşik görünür. */
body:has(.mega-trigger:hover) header[data-header],
body:has(.mega-trigger:focus-within) header[data-header],
body:has(.mega-panel:hover) header[data-header] {
  background: linear-gradient(to right,
    transparent 0%,
    transparent 22%,
    var(--gavia-deep) 32%,
    var(--gavia-deep) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Header logosu (img içeren ilk anchor) showcase görselinin ÜSTÜNDE kalmalı.
   Panel z=60, header z=50; logo'ya z=70 → görselin üstünde, dropdown açıkken
   "gavia" wordmark'i showcase görselinin sol-üst köşesinde overlay görünür. */
header[data-header] a:has(> img) {
  position: relative;
  z-index: 70;
}

/* Itransition pattern: hover edilen ana menü item'ında animated underline.
   Mevcut nav item'lar (mega-trigger button + direkt link'ler) için ortak. */
header[data-header] nav.hidden.lg\:flex > a,
header[data-header] nav.hidden.lg\:flex > .mega-trigger > button[data-mega-toggle] {
  position: relative;
}
header[data-header] nav.hidden.lg\:flex > a::after,
header[data-header] nav.hidden.lg\:flex > .mega-trigger > button[data-mega-toggle]::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: var(--gavia-mint);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
header[data-header] nav.hidden.lg\:flex > a:hover::after,
header[data-header] nav.hidden.lg\:flex > .mega-trigger:hover > button[data-mega-toggle]::after,
header[data-header] nav.hidden.lg\:flex > .mega-trigger:focus-within > button[data-mega-toggle]::after {
  transform: scaleX(1);
}
.mega-showcase-billboard .mega-showcase-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  background: var(--gavia-dark);
}
.mega-showcase-billboard .mega-showcase-media img {
  transition: opacity 0.32s ease-out, transform 0.6s ease-out;
}
.mega-showcase-billboard .mega-showcase-media img.is-swapping { opacity: 0; }
/* Üst gradient — billboard görseli navbar arkasından y=0'a kadar uzandığı için
   Gavia logo'su (sol-üst) parlak görsel piksellerine denk gelince okunmuyor.
   Hafif navy fade (alttaki 0.96 body gradient'inden çok daha az koyu) ile
   logo okunsun ama görsel netliği kaybolmasın. Sadece üst 130px etkilenir. */
.mega-showcase-billboard .mega-showcase-media::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  background: linear-gradient(to bottom,
    rgba(2, 8, 55, 0.55) 0%,
    rgba(2, 8, 55, 0.25) 55%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}
.mega-showcase-billboard:hover .mega-showcase-media img { transform: scale(1.04); }
.mega-showcase-billboard .mega-showcase-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 24px 22px;
  background: linear-gradient(to top,
    rgba(8, 8, 40, 0.96) 0%,
    rgba(8, 8, 40, 0.82) 55%,
    rgba(8, 8, 40, 0.22) 92%,
    transparent 100%);
}
.mega-showcase-billboard .mega-showcase-body [data-mega-title],
.mega-showcase-billboard .mega-showcase-body [data-mega-desc] {
  transition: opacity 0.25s ease-out;
}
.mega-showcase-billboard .mega-showcase-body.is-swapping [data-mega-title],
.mega-showcase-billboard .mega-showcase-body.is-swapping [data-mega-desc] {
  opacity: 0;
}

/* Horizontal compact showcase (alt bant — link listesi altında) */
.mega-showcase-h {
  display: flex;
  gap: 14px;
  align-items: stretch;
  background: rgba(20, 21, 51, 0.6);
  border: 1px solid var(--gavia-border);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
  margin-top: 14px;
  transition: all 0.25s ease-out;
}
.mega-showcase-h:hover {
  border-color: var(--gavia-mint);
  background: rgba(63, 213, 173, 0.05);
}
.mega-showcase-h-thumb {
  flex-shrink: 0;
  width: 120px;
  aspect-ratio: 16 / 11;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gavia-dark);
}
.mega-showcase-h-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease-out;
}
.mega-showcase-h:hover .mega-showcase-h-thumb img { transform: scale(1.05); }
.mega-showcase-h-body { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }

/* === Image Card === */
.image-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gavia-border);
  background: var(--gavia-night);
  transition: all 0.3s ease-out;
  display: flex;
  flex-direction: column;
}
.image-card:hover {
  transform: translateY(-4px);
  border-color: var(--gavia-mint);
  box-shadow: 0 8px 32px rgba(63, 213, 173, 0.15);
}
.image-card-media {
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  background-color: var(--gavia-dark);
}

/* === Sector Tile === */
.sector-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: block;
  background-color: var(--gavia-night);
}
.sector-tile-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease-out;
}
.sector-tile:hover .sector-tile-img { transform: scale(1.05); }
.sector-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(2, 8, 55, 0.88) 100%);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  transition: background 0.3s ease-out;
}
.sector-tile:hover .sector-tile-overlay {
  background: linear-gradient(180deg, rgba(63, 213, 173, 0.18) 0%, rgba(2, 8, 55, 0.92) 100%);
}
.sector-tile-label {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* === Stats Band (legacy mint band — kept for fallback) === */
.stats-band {
  background: linear-gradient(90deg, var(--gavia-mint) 0%, #4FE5BD 100%);
}

/* === Focus Chips (Itransition hero focus pills) === */
.focus-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gavia-border);
  color: white;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease-out;
}
.focus-chip i { color: var(--gavia-mint); }
.focus-chip:hover {
  border-color: var(--gavia-mint);
  background: rgba(63, 213, 173, 0.08);
  transform: translateY(-2px);
}
/* Light-context override: CTA chips inside light sections need dark-on-light styling */
.bg-gavia-light .focus-chip,
.bg-white .focus-chip {
  background: #ffffff;
  border: 1px solid rgba(2, 8, 55, 0.12);
  color: var(--gavia-deep);
  box-shadow: 0 1px 2px rgba(2, 8, 55, 0.04);
}
.bg-gavia-light .focus-chip i,
.bg-white .focus-chip i { color: var(--gavia-mint); }
.bg-gavia-light .focus-chip:hover,
.bg-white .focus-chip:hover {
  border-color: var(--gavia-mint);
  background: rgba(63, 213, 173, 0.06);
  color: var(--gavia-deep);
}

/* === Stats Grid (Itransition "At a Glance") === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(5, 1fr); }
}
.stat-item {
  text-align: center;
  padding: 28px 16px;
  border-right: 1px solid var(--gavia-border);
  border-bottom: 1px solid var(--gavia-border);
}
.stat-item:nth-child(2n) { border-right: none; }
@media (min-width: 640px) {
  .stat-item { border-right: 1px solid var(--gavia-border); }
  .stat-item:nth-child(2n) { border-right: 1px solid var(--gavia-border); }
  .stat-item:nth-child(3n) { border-right: none; }
}
@media (min-width: 1024px) {
  .stat-item { border-bottom: none; }
  .stat-item:nth-child(3n) { border-right: 1px solid var(--gavia-border); }
  .stat-item:last-child { border-right: none; }
}
.stat-number {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: var(--gavia-mint);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 12px;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* === Animated Hero Background (AI-feel branded loop) === */
.hero-anim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 20% 30%, rgba(63, 213, 173, 0.20) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(63, 213, 173, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 50%, rgba(20, 21, 51, 0.6) 0%, transparent 70%),
              linear-gradient(135deg, #020837 0%, #0A0E27 50%, #141533 100%);
  background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%;
  animation: gavia-mesh-shift 18s ease-in-out infinite;
}
@keyframes gavia-mesh-shift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0, 0 0; }
  50% { background-position: 100% 50%, 0% 50%, 0 0, 0 0; }
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.hero-orb-1 {
  width: 500px; height: 500px;
  top: 10%; left: 5%;
  background: radial-gradient(circle, rgba(63, 213, 173, 0.35) 0%, transparent 70%);
  animation: gavia-orb-float-1 14s ease-in-out infinite;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  bottom: 15%; right: 10%;
  background: radial-gradient(circle, rgba(79, 229, 189, 0.30) 0%, transparent 70%);
  animation: gavia-orb-float-2 11s ease-in-out infinite;
}
.hero-orb-3 {
  width: 350px; height: 350px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(63, 213, 173, 0.18) 0%, transparent 70%);
  animation: gavia-orb-pulse 6s ease-in-out infinite;
}
@keyframes gavia-orb-float-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(80px, 60px); }
}
@keyframes gavia-orb-float-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-60px, -40px); }
}
@keyframes gavia-orb-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* Particles (small dots floating) */
.hero-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(63, 213, 173, 0.4), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(63, 213, 173, 0.5), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(2px 2px at 90% 50%, rgba(63, 213, 173, 0.3), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(255, 255, 255, 0.4), transparent);
  background-repeat: repeat;
  background-size: 600px 600px;
  animation: gavia-particles-drift 25s linear infinite;
  pointer-events: none;
}
@keyframes gavia-particles-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 600px 600px, -600px 400px, 400px -600px, -400px 600px, 600px -400px, -600px -600px; }
}

/* Gavia logo subtle pulse in hero (decorative giant mark) */
.hero-mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(280px, 38vw, 580px);
  color: rgba(63, 213, 173, 0.04);
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
  animation: gavia-mark-breathe 8s ease-in-out infinite;
}
@keyframes gavia-mark-breathe {
  0%, 100% { opacity: 0.04; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.08; transform: translate(-50%, -50%) scale(1.05); }
}

/* === Logo Marquee === */
.logo-marquee {
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: gavia-marquee 40s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes gavia-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-card {
  flex-shrink: 0;
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 18px 24px;
  transition: all 0.25s ease-out;
}
@media (max-width: 640px) {
  .logo-card { width: 140px; height: 72px; padding: 12px 16px; }
}
.logo-card:hover {
  border-color: var(--gavia-mint);
  box-shadow: 0 8px 24px rgba(63, 213, 173, 0.15);
  transform: translateY(-2px);
}
.logo-card img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* === Glass CTA card === */
.glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
}

/* === Section fade transitions === */
/* z-index: 2 → footer-fixed-bottom (z:0) üstüne opak olarak otursun.
   Hero pattern olmayan sayfalarda (.hero-zone yok) sibling rule firelanmadığı için
   buraya taşındı — eskiden inline style="z-index:2" idi (yapay-zeka, surdurulebilirlik). */
.section-fade-top { position: relative; z-index: 2; }
.section-fade-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--gavia-deep), transparent);
  z-index: 5;
  pointer-events: none;
}
.section-fade-bottom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--gavia-deep), transparent);
  z-index: 5;
  pointer-events: none;
}

/* === Image Cover === */
.image-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.section-divider-light {
  background: var(--gavia-light);
}

/* === Product Glass Card === */
.product-card {
  background: rgba(20, 21, 51, 0.35);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-out;
}
.product-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -40%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(63, 213, 173, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(63, 213, 173, 0.4);
  background: rgba(20, 21, 51, 0.55);
  box-shadow: 0 12px 40px rgba(63, 213, 173, 0.22);
}

/* === Products scroll-lock (Thoughtworks-style sticky + IO) ===
   Sticky sol panel + scroll'la sırayla aktif olan kartlar. preventDefault YOK,
   normal scroll devam eder. Wrapper yüksekliği N kart * 100vh.
   Z-index: section relative z-2 (hero rule), iç katmanlar z-index 1-3.
   Hero (L06) ve footer reveal (L11) zincirini bozmamak için section'un
   kendi position:relative kuralı korunur. */
.products-scroll {
  position: relative;
}
.products-scroll-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.products-sticky-pane {
  position: sticky;
  top: 10vh;
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
.products-track {
  position: relative;
  z-index: 1;
}
.product-step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 2rem 0;
}
.product-step .product-card {
  width: 100%;
  opacity: 0.35;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out, border-color 0.3s ease-out;
}
.product-step.is-active .product-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: rgba(63, 213, 173, 0.45);
  box-shadow: 0 12px 40px rgba(63, 213, 173, 0.22);
}
.products-sticky-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  pointer-events: none;
}
.products-sticky-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.products-sticky-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  background: rgba(63, 213, 173, 0.12);
  color: var(--gavia-mint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}
.products-progress {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
}
.products-progress span {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}
.products-progress span.is-active {
  background: var(--gavia-mint);
}
@media (max-width: 767px) {
  .products-scroll-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .products-sticky-pane { display: none; }
  .product-step {
    min-height: 0;
    padding: 0;
  }
  .product-step .product-card {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .products-sticky-pane { position: relative; top: auto; height: auto; }
  .product-step { min-height: 0; padding: 1rem 0; }
  .product-step .product-card { opacity: 1; transform: none; transition: none; }
  .products-sticky-slide { position: relative; opacity: 1; transform: none; }
}

/* === Sector Tile v2 (Innova full-image) === */
.sector-tile-v2 {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.sector-tile-v2 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}
.sector-tile-v2:hover img { transform: scale(1.05); }
.sector-tile-v2-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 8, 55, 0.95) 0%, rgba(2, 8, 55, 0.4) 50%, transparent 100%);
}

/* === Mobile Mega Accordion === */
@media (max-width: 1023px) {
  .mega-panel {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 0;
    border: none;
    border-radius: 0;
    padding: 16px 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mega-trigger[aria-expanded="true"] .mega-panel { display: block; }
  .mega-trigger:hover .mega-panel { opacity: 1; visibility: visible; }
}

/* === Light page helper (no header swap) =================================
   Pages that want light theme body sections but want to keep the default
   index-style header (light text over dark hero). Section hero remains dark
   for header readability; below sections may be bg-gavia-light / bg-white.
   This class disables the dark `.section-fade-top::before` gradient which
   would otherwise bleed dark color into light siblings. */
body.gv-light-page .section-fade-top::before { display: none !important; }
body.gv-light-page { background-color: var(--gavia-light); color: var(--gavia-deep); }

/* === Mobile menu — opak overlay (fixes patron SS bug, 2026-05-16) =========
   Header transparent + .nav-blur sadece scrollY>50'de geliyordu; menü açıkken
   sayfa tepedeyse linkler hero video üzerinde sızıyordu. Mobile menü artık
   header altında absolute-positioned, kendi opak background'ı ile. */
header[data-header] [data-mobile-menu] {
  position: absolute;
  left: 0;
  right: 0;
  top: 80px; /* header h-20 */
  background: var(--gavia-deep);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  padding: 1rem 1.5rem 1.5rem;
  z-index: 49;
  -webkit-overflow-scrolling: touch;
}
header[data-header] [data-mobile-menu].hidden { display: none; }
/* Mobile menü nav'ın HTML'deki border-t/pt-4 — mobile overlay'de gereksiz çizgi yapıyor */
header[data-header] [data-mobile-menu] > nav {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile menü mega-accordion — JS desktop mega-trigger'lardan üretir */
header[data-header] [data-mobile-menu] details.mobile-mega {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
header[data-header] [data-mobile-menu] details.mobile-mega:first-child { border-top: 0; }
header[data-header] [data-mobile-menu] details.mobile-mega > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.875rem 1rem;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #e5e7eb;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
header[data-header] [data-mobile-menu] details.mobile-mega > summary::-webkit-details-marker { display: none; }
header[data-header] [data-mobile-menu] details.mobile-mega > summary::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  opacity: 0.6;
  margin-right: 0.25rem;
  margin-bottom: 0.15rem;
}
header[data-header] [data-mobile-menu] details.mobile-mega[open] > summary::after {
  transform: rotate(-135deg);
  margin-bottom: -0.1rem;
}
header[data-header] [data-mobile-menu] details.mobile-mega > a {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem 0.625rem 2rem;
  color: rgba(229, 231, 235, 0.7);
  font-size: 0.92rem;
  min-height: 44px;
  border-left: 2px solid transparent;
  margin-left: 0.5rem;
}
header[data-header] [data-mobile-menu] details.mobile-mega > a:hover,
header[data-header] [data-mobile-menu] details.mobile-mega > a:active {
  color: var(--gavia-mint);
  border-left-color: var(--gavia-mint);
}
@media (min-width: 1024px) {
  header[data-header] [data-mobile-menu] { display: none !important; }
}
/* Mega-panel mobile/tablet: JS intent zaten accordion (aria-expanded toggle),
   ama CSS hala position:fixed overlay'di — mobile menü açıkken altına geliyordu.
   Mobile/tablette inline accordion gibi açılsın. */
@media (max-width: 1023px) {
  header[data-header] .mega-panel {
    position: static !important;
    width: auto !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0.25rem 0 0.75rem 1rem !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none;
  }
  header[data-header] .mega-trigger[aria-expanded="true"] .mega-panel { display: block; }
  header[data-header] .mega-inner { gap: 0.5rem !important; grid-template-columns: 1fr !important; }
  header[data-header] .mega-inner > div { grid-template-columns: 1fr !important; }
  header[data-header] .mega-showcase-billboard { display: none !important; }
  header[data-header] .mega-link {
    padding: 0.625rem 0.5rem;
    border-radius: 0.5rem;
  }
}

/* Scrollbar gutter — defansif. JS ek olarak padding-right ile compense eder. */
html { scrollbar-gutter: stable; }

/* Body scroll lock — JS sets this; padding-right scrollbar width ile sync. */
body.is-mobile-menu-open { overflow: hidden; }
/* Menü açıkken header'ı da opak yap (nav-blur ile aynı görsel) */
body.is-mobile-menu-open header[data-header] {
  background: var(--gavia-deep);
}

/* === FAZ 2 cross-cutting responsive fixes (2026-05-16) ===================
   HTML pattern'larına dokunmadan tüm 20+ sayfaya yansıyacak generic kurallar */

/* WCAG 44px touch target — hamburger + mobile nav linkleri
   Sadece <lg breakpoint'te uygulanır; desktop'ta Tailwind lg:hidden'ı bozmaz */
@media (max-width: 1023px) {
  header[data-header] [data-mobile-menu-btn] {
    padding: 0.625rem;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  header[data-header] [data-mobile-menu] nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
  }
  header[data-header] [data-mobile-menu] nav a:hover { color: var(--gavia-mint); }
}

/* Breadcrumb — wrap on narrow viewports (ürün/servis sayfaları) */
nav[aria-label="Breadcrumb"],
nav.breadcrumb,
[data-breadcrumb] {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

/* Footer-fixed fallback for short screens + tüm mobile/tablet.
   Mobilde fixed pattern + hero-sticky toggle güvenilmez (iOS Safari 100vh
   tuzağı, GitHub Pages cache, IntersectionObserver mobil tetiklenme farkı).
   <1024px'de tamamen normal flow'a düşür — footer ortaya çıkmaya garanti. */
@media (max-width: 1023px), (max-height: 800px) {
  .footer-fixed-bottom {
    position: relative !important;
    bottom: auto;
    left: auto;
    right: auto;
  }
  .footer-reveal-spacer { display: none; }
  .hero-sticky.is-hidden { visibility: visible; }
}

/* Section padding daha sıkı mobile'da (audit 🟡 — scroll fatigue) */
@media (max-width: 639px) {
  .gv-section-tight { padding-block: 3rem; }
}

/* Overline/asterisk responsive shrink */
@media (max-width: 640px) {
  .gv-overline { font-size: 0.65rem !important; }
  .gv-asterisk {
    font-size: 1.2rem !important;
    letter-spacing: 0.6em !important;
  }
}

/* Mega-trigger focus visibility (a11y) */
header[data-header] [data-mega-toggle]:focus-visible,
header[data-header] [data-mobile-menu-btn]:focus-visible {
  outline: 2px solid var(--gavia-mint);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hero zone — decorative blob'lar viewport dışına taşmasın (index.html C1).
   Section level'da clip kullanmıyoruz çünkü sticky/scroll-snap pattern'larını
   bozar. Sadece hero ve dekorasyon kapsayıcılarına clip uygula. */
.hero-zone, .hero-sticky { overflow-x: clip; }


/* ========== Cookie consent banner (M10) ==========
   main.js initCookieBanner() tarafından dinamik inject edilir.
   data-no-cookie body attribute'lu sayfalarda skip edilir. */
.cookie-banner {
  position: fixed !important;
  left: 16px !important;
  right: 16px;
  bottom: 16px !important;
  z-index: 100 !important;
  background: #020837;
  border: 1px solid rgba(63,213,173,0.25);
  border-radius: 14px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.5);
  padding: 16px 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) {
  .cookie-banner {
    left: 24px !important;
    right: auto;
    bottom: 24px !important;
    max-width: 520px;
    padding: 18px 22px;
  }
}
.cookie-banner__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  .cookie-banner__body { flex-direction: row; align-items: center; gap: 16px; }
}
.cookie-banner__text {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(233,238,241,0.85);
  margin: 0;
  flex: 1;
}
.cookie-banner__text a {
  color: #3FD5AD;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__text a:hover { color: #4FE5BD; }
.cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-banner__btn {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.cookie-banner__btn--ghost {
  background: transparent;
  border-color: rgba(233,238,241,0.2);
  color: rgba(233,238,241,0.75);
}
.cookie-banner__btn--ghost:hover {
  border-color: rgba(233,238,241,0.4);
  color: #E9EEF1;
}
.cookie-banner__btn--primary {
  background: #3FD5AD;
  color: #020837;
}
.cookie-banner__btn--primary:hover { background: #4FE5BD; }

/* === M14 — Çalışmalar tab filter === */
.filter-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}
.filter-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(2,8,55,0.15);
  background: transparent;
  color: var(--gavia-deep);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.filter-tabs button:hover {
  border-color: rgba(63,213,173,0.55);
  color: var(--gavia-mint);
}
.filter-tabs button.active {
  background: var(--gavia-mint);
  color: var(--gavia-deep);
  border-color: transparent;
}
.work-tile { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .35s, opacity .3s; }
.work-tile.hidden-by-filter {
  opacity: 0;
  transform: scale(.95);
  pointer-events: none;
  display: none;
}

/* === M15 — Case meta services accordion === */
.meta-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: -2px;
}
.meta-services .meta-chip { display: inline-block; margin: 0; }
.meta-services:not(.expanded) .meta-chip:nth-of-type(n+3) { display: none; }
.meta-more-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(63,213,173,0.15);
  color: var(--gavia-mint);
  cursor: pointer;
  border: 1px solid rgba(63,213,173,0.18);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background .2s, color .2s;
}
.meta-services.expanded .meta-more-btn {
  padding: 4px 6px;
  font-size: 12px;
}
.meta-more-btn:hover {
  background: var(--gavia-mint);
  color: var(--gavia-deep);
}

/* === M16 — Case alt-row + live CTA + product mini-hero === */
.case-alt-row { padding: 60px 0; }
.case-alt-row .gv-overline { margin-bottom: 1rem; }
.case-product-mini {
  padding: 72px 0 60px;
}
.case-product-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.case-product-kpi {
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 14px;
  background: rgba(63,213,173,0.08);
  border: 1px solid rgba(63,213,173,0.20);
}
.case-product-kpi .v {
  font-family: 'Queulat','Manrope',system-ui,sans-serif;
  font-weight: 800;
  color: var(--gavia-mint);
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.case-product-kpi .l {
  font-size: .78rem;
  color: rgba(2,8,55,0.7);
  line-height: 1.35;
}
.case-live-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--gavia-mint);
  color: var(--gavia-deep);
  font-weight: 700;
  border-radius: 12px;
  letter-spacing: -.005em;
  transition: background .2s, transform .25s, box-shadow .3s;
}
.case-live-cta:hover {
  background: var(--gavia-mint-bright);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -18px rgba(63,213,173,0.45);
}

/* === M17 — Case gallery carousel === */
.case-gallery-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--gavia-night);
}
.gallery-track {
  display: flex;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.gallery-slide {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--gavia-night);
  user-select: none;
  -webkit-user-drag: none;
}
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
@media (max-width: 768px) {
  .gallery-slide { aspect-ratio: 4 / 3; }
}
.case-gallery-carousel .gallery-prev,
.case-gallery-carousel .gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  color: var(--gavia-deep);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(2,8,55,0.35);
  transition: background .2s, color .2s, transform .2s;
  z-index: 2;
}
.case-gallery-carousel .gallery-prev { left: 14px; }
.case-gallery-carousel .gallery-next { right: 14px; }
.case-gallery-carousel .gallery-prev:hover,
.case-gallery-carousel .gallery-next:hover {
  background: var(--gavia-mint);
  color: var(--gavia-deep);
}
.case-gallery-carousel .gallery-prev:focus-visible,
.case-gallery-carousel .gallery-next:focus-visible {
  outline: 2px solid var(--gavia-mint);
  outline-offset: 3px;
}
.gallery-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(2,8,55,0.45);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  z-index: 2;
}
.gallery-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width .25s, background .25s;
}
.gallery-dots button.active {
  width: 24px;
  border-radius: 999px;
  background: var(--gavia-mint);
}
.gallery-dots button:focus-visible {
  outline: 2px solid var(--gavia-mint);
  outline-offset: 2px;
}

/* === REV-2 — Soft mint frame (case section çerçevesi) === */
.case-mint-frame {
  border: 1px solid rgba(63,213,173,0.35);
  border-radius: 16px;
  padding: 32px 28px;
  background: rgba(255,255,255,0.6);
}
@media (min-width: 768px) {
  .case-mint-frame { padding: 40px 40px; }
}

/* === REV-3 — Mini gallery (yazı + kompakt carousel) + lightbox === */
.case-gallery-mini {
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1024px) {
  .case-gallery-mini { grid-template-columns: 1fr 1fr; gap: 56px; }
}

.case-gallery-mini-carousel {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--gavia-night);
  border: 1px solid rgba(63,213,173,0.18);
}
.case-gallery-mini-carousel .gallery-track {
  display: flex;
  height: 100%;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.case-gallery-mini-carousel .gallery-slide {
  flex: 0 0 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--gavia-night);
  cursor: zoom-in;
  display: block;
}
.case-gallery-mini-carousel .gallery-slide:focus-visible {
  outline: 2px solid var(--gavia-mint);
  outline-offset: -4px;
}
.case-gallery-mini-carousel .gallery-prev,
.case-gallery-mini-carousel .gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--gavia-deep);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(2,8,55,0.35);
  transition: background .2s, color .2s;
  z-index: 2;
}
.case-gallery-mini-carousel .gallery-prev { left: 10px; }
.case-gallery-mini-carousel .gallery-next { right: 10px; }
.case-gallery-mini-carousel .gallery-prev:hover,
.case-gallery-mini-carousel .gallery-next:hover {
  background: var(--gavia-mint);
}
.case-gallery-mini-carousel .gallery-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 5px;
  padding: 5px 8px;
  background: rgba(2,8,55,0.5);
  border-radius: 999px;
  z-index: 2;
}
.case-gallery-mini-carousel .gallery-dots button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width .25s, background .25s;
}
.case-gallery-mini-carousel .gallery-dots button.active {
  width: 18px;
  border-radius: 999px;
  background: var(--gavia-mint);
}

/* Lightbox */
.case-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.case-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.case-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.7);
  user-select: none;
}
.case-lightbox-close,
.case-lightbox-prev,
.case-lightbox-next {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.case-lightbox-close { top: 24px; right: 24px; }
.case-lightbox-prev  { top: 50%; left: 24px;  transform: translateY(-50%); }
.case-lightbox-next  { top: 50%; right: 24px; transform: translateY(-50%); }
.case-lightbox-close:hover,
.case-lightbox-prev:hover,
.case-lightbox-next:hover {
  background: var(--gavia-mint);
  color: var(--gavia-deep);
  border-color: var(--gavia-mint);
}
.case-lightbox-close:focus-visible,
.case-lightbox-prev:focus-visible,
.case-lightbox-next:focus-visible {
  outline: 2px solid var(--gavia-mint);
  outline-offset: 3px;
}
body.lightbox-open { overflow: hidden; }