/* =============================================
   Mavi Analiz — Kurumsal v3
   ============================================= */

:root {
  --navy:       #0b1f4a;
  --navy-mid:   #132761;
  --navy-light: #1e3a8a;
  --blue:       #1a56db;
  --blue-mid:   #2563eb;
  --blue-light: #eff6ff;
  --accent:     #06b6d4;
  --purple:     #7c3aed;
  --gold:       #f59e0b;
  --white:      #ffffff;
  --g50:        #f8fafc;
  --g100:       #f1f5f9;
  --g200:       #e2e8f0;
  --g300:       #cbd5e1;
  --g400:       #94a3b8;
  --g500:       #64748b;
  --g700:       #334155;
  --g900:       #0f172a;
  --font:       'Inter', sans-serif;
  --r:          14px;
  --sh:         0 4px 24px rgba(0,0,0,.08);
  --sh-md:      0 10px 40px rgba(0,0,0,.12);
  --sh-lg:      0 24px 80px rgba(0,0,0,.18);
  --sh-blue:    0 8px 32px rgba(26,86,219,.30);
}

/* ── BASE ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font-family: var(--font); background: var(--white); color: var(--g900); overflow-x: hidden; line-height: 1.6 }
img { display: block; max-width: 100% }
a { text-decoration: none; color: inherit }
ul { list-style: none }

/* ── LAYOUT ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px }

/* ── SECTION HEADERS ── */
.section-header { text-align: center; margin-bottom: 64px }
.section-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; background: rgba(26,86,219,.09); border: 1px solid rgba(26,86,219,.18);
  border-radius: 50px; font-size: .72rem; font-weight: 700; color: var(--blue);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px
}
.section-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.18;
  letter-spacing: -.028em; color: var(--g900); margin-bottom: 14px
}
.section-desc { font-size: .95rem; color: var(--g500); line-height: 1.85; max-width: 800px; margin: 0 auto; text-align: justify }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: linear-gradient(135deg, var(--blue), var(--accent)); color: var(--white);
  border-radius: 50px; font-weight: 700; font-size: .9rem;
  border: none; cursor: pointer; font-family: var(--font);
  box-shadow: 0 8px 32px rgba(6,182,212,.35); transition: all .25s ease
}
.btn-primary:hover { background: linear-gradient(135deg, var(--navy-mid), var(--blue)); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(6,182,212,.45) }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: rgba(255,255,255,.1); color: var(--white);
  border-radius: 50px; font-weight: 600; font-size: .9rem;
  border: 1.5px solid rgba(255,255,255,.3); cursor: pointer;
  font-family: var(--font); transition: all .25s ease
}
.btn-ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.7); transform: translateY(-2px) }
.btn-large { padding: 16px 36px; font-size: 1rem }
.btn-full { width: 100%; justify-content: center }

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 20px 0; transition: all .35s ease
}
.navbar.scrolled {
  background: rgba(255,255,255,.97); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--g200); padding: 12px 0;
  box-shadow: 0 2px 20px rgba(0,0,0,.07)
}
.nav-container { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 28px }

.nav-logo {
  display: flex; align-items: center;
  position: relative; overflow: hidden
}

/* Shimmer sweep — logo üzerinden geçen parlak çizgi (cyan → light blue) */
.nav-logo::after {
  content: '';
  position: absolute;
  top: -20%; left: -70%;
  width: 42%; height: 140%;
  background: linear-gradient(105deg, transparent 0%, rgba(6,182,212,.45) 50%, transparent 100%);
  transform: skewX(-12deg);
  animation:
    logoShimmer 7s ease-in-out 1.8s infinite,
    shimmerColor 7s ease-in-out 1.8s infinite;
  pointer-events: none; z-index: 10
}
@keyframes logoShimmer {
  0%         { left: -70%; opacity: 0 }
  3%         { opacity: 1 }
  32%, 100%  { left: 130%; opacity: 0 }
}
@keyframes shimmerColor {
  0%, 100%   { filter: hue-rotate(0deg) brightness(1) }
  50%        { filter: hue-rotate(25deg) brightness(1.1) }
}

.nav-logo img {
  height: 62px; width: auto;
  filter: brightness(0) invert(1);
  transition: filter .4s, height .35s, transform .35s;
  animation:
    logoEntry   .8s cubic-bezier(.22,.68,0,1.2) both,
    logoGlow    4s  ease-in-out 2s   infinite
}

/* Giriş */
@keyframes logoEntry {
  from { opacity: 0; transform: translateX(-22px) }
  to   { opacity: 1; transform: translateX(0) }
}

/* Glow nefes */
@keyframes logoGlow {
  0%, 100% {
    filter: brightness(0) invert(1) drop-shadow(0 0 0px rgba(6,182,212,0))
  }
  50% {
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(6,182,212,.55))
  }
}

/* Hover: scale + tilt + güçlü glow */
.nav-logo img:hover {
  transform: scale(1.1) rotate(-1.5deg);
  filter: brightness(0) invert(1)
          drop-shadow(0 0 18px rgba(6,182,212,.9))
          drop-shadow(0 0 4px rgba(6,182,212,.4))
}

/* Scrolled: animasyonlar durur, renkli logo */
.navbar.scrolled .nav-logo::after { display: none }
.navbar.scrolled .nav-logo img {
  filter: none; height: 52px;
  animation: none
}
.navbar.scrolled .nav-logo img:hover {
  filter: drop-shadow(0 0 8px rgba(26,86,219,.4));
  transform: scale(1.07) rotate(-1deg)
}

.nav-links { display: flex; align-items: center; gap: 32px }
.nav-links a {
  font-size: .87rem; font-weight: 500;
  color: rgba(255,255,255,.82); transition: color .2s
}
.nav-links a:hover, .nav-links a.active { color: var(--white) }
.navbar.scrolled .nav-links a { color: var(--g700) }
.navbar.scrolled .nav-links a:hover, .navbar.scrolled .nav-links a.active { color: var(--blue) }

.nav-cta {
  display: inline-flex; align-items: center;
  padding: 9px 22px; background: var(--white);
  border-radius: 50px; font-weight: 700; font-size: .85rem;
  color: var(--navy); box-shadow: 0 2px 12px rgba(0,0,0,.15);
  transition: all .25s
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.2) }
.navbar.scrolled .nav-cta { background: var(--blue); color: var(--white); box-shadow: var(--sh-blue) }
.navbar.scrolled .nav-cta:hover { background: var(--navy-mid) }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px; z-index: 1001
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px; transition: all .3s
}
.navbar.scrolled .nav-toggle span { background: var(--g700) }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px) }
.nav-toggle.active span:nth-child(2) { opacity: 0 }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px) }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 90% 70% at 80% 10%, rgba(6,182,212,.16), transparent 60%),
    radial-gradient(ellipse 80% 60% at 10% 90%, rgba(26,86,219,.28), transparent 60%),
    linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 55%, #1e3a8a 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding: 140px 0 100px
}

/* Animated layered background */
.hero-bg { position: absolute; inset: 0; overflow: hidden }

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridShift 24s linear infinite
}
@keyframes gridShift { 0% { background-position: 0 0 } 100% { background-position: 64px 64px } }

.hero-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(90px)
}
.orb-1 {
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(26,86,219,.5), transparent 70%);
  top: -220px; right: -120px;
  animation: orbPulse 7s ease-in-out infinite
}
.orb-2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(6,182,212,.32), transparent 70%);
  bottom: -80px; left: -80px;
  animation: orbPulse 9s ease-in-out infinite 2s
}
@keyframes orbPulse { 0%,100% { opacity:.6; transform:scale(1) } 50% { opacity:1; transform:scale(1.12) } }

.hero-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none; animation: rotateSlow linear infinite
}
.ring-1 { width: 500px; height: 500px; top: 8%; right: 2%; animation-duration: 28s }
.ring-2 { width: 280px; height: 280px; top: 55%; right: 18%; animation-duration: 18s; border-color: rgba(6,182,212,.12); animation-direction: reverse }
@keyframes rotateSlow { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }

.hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, black, transparent)
}

/* Hero content */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center
}
.hero-left { display: flex; flex-direction: column; align-items: flex-start }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px; font-size: .78rem; font-weight: 600;
  color: rgba(255,255,255,.9); margin-bottom: 28px;
  backdrop-filter: blur(10px)
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(6,182,212,.25);
  animation: dotPulse 2s ease-in-out infinite
}
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(6,182,212,.25) } 50% { box-shadow: 0 0 0 6px rgba(6,182,212,.1) } }

.hero-title {
  font-size: clamp(2rem, 3.2vw, 3.2rem); font-weight: 900;
  line-height: 1.12; letter-spacing: -.035em;
  color: var(--white); margin-bottom: 22px; text-align: left;
  animation: fadeUp .9s ease both
}
.hero-title-accent {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #38bdf8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text
}
@keyframes fadeUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }

.hero-desc {
  font-size: .97rem; color: rgba(255,255,255,.65); line-height: 1.85;
  margin-bottom: 36px;
  animation: fadeUp .9s ease .15s both; text-align: justify
}

.hero-actions {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 14px; flex-wrap: wrap;
  animation: fadeUp .9s ease .3s both
}

/* Hero stats row */
.hero-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 28px 32px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; backdrop-filter: blur(12px);
  animation: fadeUp .9s ease .45s both; flex-wrap: wrap
}
.hero-stat {
  text-align: center; padding: 0 32px; position: relative
}
.stat-val {
  display: block; font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900; color: var(--white); letter-spacing: -.04em; line-height: 1
}
.stat-plus { font-size: 1.4rem; font-weight: 900; color: var(--accent); vertical-align: super; margin-left: 2px }
.stat-label { display: block; font-size: .72rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .07em; margin-top: 6px }
.hero-stat-divider { width: 1px; height: 48px; background: rgba(255,255,255,.15); flex-shrink: 0 }

/* Scroll hint */
.hero-scroll-hint {
  position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 10;
  transition: opacity .4s ease, visibility .4s ease
}
.hero-scroll-hint.hidden {
  opacity: 0; visibility: hidden
}
.hero-scroll-hint span {
  font-size: .68rem; font-weight: 500; color: rgba(255,255,255,.45); letter-spacing: .12em; text-transform: uppercase
}
.scroll-arrow {
  width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.3); border-radius: 11px;
  display: flex; justify-content: center; padding-top: 6px
}
.scroll-dot {
  width: 3px; height: 6px; background: rgba(255,255,255,.5); border-radius: 2px;
  animation: scrollDot 1.9s ease-in-out infinite
}
@keyframes scrollDot { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(14px);opacity:0} }

/* ══════════════════════════════════════
   SECTORS STRIP
══════════════════════════════════════ */
.sectors-strip {
  background: var(--g50); border-top: 1px solid var(--g200); border-bottom: 1px solid var(--g200);
  padding: 22px 0; overflow: hidden; position: relative
}
.sectors-strip::before,
.sectors-strip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none
}
.sectors-strip::before { left: 0; background: linear-gradient(90deg, var(--g50), transparent) }
.sectors-strip::after { right: 0; background: linear-gradient(-90deg, var(--g50), transparent) }

.sectors-track {
  display: flex; align-items: center; gap: 0;
  animation: marquee 28s linear infinite; width: max-content
}
.sector-item {
  display: flex; align-items: center; gap: 8px;
  padding: 0 36px; font-size: .78rem; font-weight: 700;
  color: var(--g400); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; border-right: 1px solid var(--g200); height: 28px
}
.sector-item i { color: var(--g300); font-size: .85rem }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
.about { padding: 120px 0; background: var(--white) }
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start }

/* Left card — dark navy decorative card */
.about-card {
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 60%, var(--navy-light) 100%);
  border-radius: 24px; padding: 52px 44px; position: relative; overflow: hidden;
  min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end
}
.about-card::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px
}
.about-card-badge {
  position: absolute; top: 32px; left: 44px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px; font-size: .7rem; font-weight: 700;
  color: rgba(255,255,255,.7); letter-spacing: .08em; text-transform: uppercase;
  z-index: 2
}
.about-card-title {
  font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 900; line-height: 1.1;
  letter-spacing: -.04em; color: var(--white); position: relative; z-index: 2; margin-bottom: 8px
}
.about-card-sub {
  font-size: .8rem; color: rgba(255,255,255,.45); position: relative; z-index: 2;
  text-transform: uppercase; letter-spacing: .08em
}

/* Floating badges on dark card */
.about-floating-badge {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 40px; font-size: .78rem; font-weight: 700;
  backdrop-filter: blur(12px); white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.3)
}
.badge-a {
  top: 28%; right: -16px;
  background: rgba(26,86,219,.85); color: var(--white); border: 1px solid rgba(255,255,255,.2)
}
.badge-b {
  top: 50%; left: -14px;
  background: rgba(124,58,237,.85); color: var(--white); border: 1px solid rgba(255,255,255,.2)
}
.badge-c {
  bottom: 26%; right: -10px;
  background: rgba(6,182,212,.85); color: var(--white); border: 1px solid rgba(255,255,255,.2)
}

/* ══════════════════════════════════════
   ABOUT VISUAL PANEL — v2
══════════════════════════════════════ */
.about-visual {
  position: sticky; top: 110px;
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 55%, #1e3a8a 100%);
  border-radius: 28px; padding: 32px 28px;
  overflow: hidden; display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 32px 80px rgba(11,31,74,.45);
  border: 1px solid rgba(255,255,255,.07);
  transition: transform .6s cubic-bezier(.22,.68,0,1), box-shadow .6s ease;
  will-change: transform
}
.about-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px; pointer-events: none; z-index: 0
}

/* Orb efektleri */
.av-bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none; z-index: 0
}
.av-orb-a {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(26,86,219,.35), transparent 70%);
  top: -60px; right: -60px;
  animation: orbPulse 7s ease-in-out infinite
}
.av-orb-b {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(6,182,212,.25), transparent 70%);
  bottom: 20px; left: -40px;
  animation: orbPulse 9s ease-in-out infinite 2.5s
}

/* Üst durum çubuğu */
.av-topbar {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 2
}
.av-status {
  display: flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 700; color: #4ade80;
  letter-spacing: .06em; text-transform: uppercase
}
.av-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; flex-shrink: 0;
  animation: avPulse 2.2s ease-in-out infinite
}
@keyframes avPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.55) }
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0) }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0) }
}
.av-topbar-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 50px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
  font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.5);
  letter-spacing: .07em; text-transform: uppercase
}
.av-topbar-badge i { font-size: .58rem; color: var(--accent) }

/* Merkez: AI Hub */
.av-center {
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2; height: 160px; flex-shrink: 0
}
.av-ring {
  position: absolute; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.1);
  animation: avRingPulse linear infinite; pointer-events: none
}
.av-ring-1 {
  width: 120px; height: 120px;
  animation-duration: 14s;
  border-color: rgba(6,182,212,.2)
}
.av-ring-2 {
  width: 168px; height: 168px;
  animation-duration: 20s;
  animation-direction: reverse;
  border-color: rgba(26,86,219,.15)
}
@keyframes avRingPulse {
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}

/* Merkez ikon */
.av-icon-core {
  width: 68px; height: 68px; border-radius: 20px; z-index: 2;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: var(--white);
  box-shadow: 0 0 0 6px rgba(26,86,219,.18), 0 12px 40px rgba(26,86,219,.5);
  animation: avIconFloat 4s ease-in-out infinite; position: relative
}
@keyframes avIconFloat {
  0%,100% { transform: translateY(0px) }
  50%     { transform: translateY(-6px) }
}

/* Uydu ikonlar */
.av-sat {
  position: absolute; width: 36px; height: 36px; border-radius: 11px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: rgba(255,255,255,.75); z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .3s, background .3s
}
.av-sat:hover { transform: scale(1.15) !important; background: rgba(255,255,255,.18) }

.av-sat-top    { top: 0;   left: 50%; transform: translateX(-50%) }
.av-sat-right  { right: 8px; top: 50%; transform: translateY(-50%) }
.av-sat-bottom { bottom: 0; left: 50%; transform: translateX(-50%) }
.av-sat-left   { left: 8px;  top: 50%; transform: translateY(-50%) }

.av-sat-purple { background: rgba(124,58,237,.25); border-color: rgba(124,58,237,.3); color: #c4b5fd }
.av-sat-cyan   { background: rgba(6,182,212,.2);   border-color: rgba(6,182,212,.25); color: #67e8f9 }
.av-sat-green  { background: rgba(5,150,105,.2);   border-color: rgba(5,150,105,.25); color: #6ee7b7 }

/* Bağlantı çizgileri: ring ile simüle ediliyor, ayrıca merkez→uydu gradient */
.av-center::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle 1px at 50% 9%,  rgba(255,255,255,.25) 0%, transparent 100%),
    radial-gradient(circle 1px at 91% 50%, rgba(124,58,237,.4) 0%, transparent 100%),
    radial-gradient(circle 1px at 50% 91%, rgba(6,182,212,.4) 0%, transparent 100%),
    radial-gradient(circle 1px at 9%  50%, rgba(5,150,105,.4) 0%, transparent 100%)
}

/* Özellik listesi */
.av-features {
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 2
}
.av-feat {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  opacity: 0; transform: translateX(-20px);
  transition: opacity .5s ease, transform .5s ease, background .3s, border-color .3s
}
.av-feat:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.15)
}

/* Scroll aktif olunca göster */
.av-active .av-feat-1 { opacity: 1; transform: translateX(0); transition-delay: .1s }
.av-active .av-feat-2 { opacity: 1; transform: translateX(0); transition-delay: .22s }
.av-active .av-feat-3 { opacity: 1; transform: translateX(0); transition-delay: .34s }
.av-active .av-feat-4 { opacity: 1; transform: translateX(0); transition-delay: .46s }

.av-feat-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: rgba(26,86,219,.3); color: #93c5fd;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; transition: transform .3s
}
.av-feat:hover .av-feat-icon { transform: scale(1.1) }
.av-feat-icon-purple { background: rgba(124,58,237,.3); color: #c4b5fd }
.av-feat-icon-cyan   { background: rgba(6,182,212,.25);  color: #67e8f9 }
.av-feat-icon-green  { background: rgba(5,150,105,.25);  color: #6ee7b7 }

.av-feat-text { display: flex; flex-direction: column; gap: 2px }
.av-feat-text strong {
  font-size: .84rem; font-weight: 700; color: var(--white); line-height: 1.2
}
.av-feat-text span {
  font-size: .72rem; color: rgba(255,255,255,.4); line-height: 1.4
}

/* Teknoloji Stack */
.av-stack {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; padding: 14px 16px;
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px
}
.av-stack-label {
  font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.28);
  text-transform: uppercase; letter-spacing: .1em
}
.av-stack-pills { display: flex; flex-wrap: wrap; gap: 6px }
.av-pill {
  padding: 4px 11px; border-radius: 50px;
  font-size: .67rem; font-weight: 700; letter-spacing: .04em;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.65);
  transition: background .2s, color .2s, border-color .2s; cursor: default
}
.av-pill:hover {
  background: rgba(255,255,255,.14); color: var(--white); border-color: rgba(255,255,255,.25)
}
.av-pill-cyan   { background: rgba(6,182,212,.15);  border-color: rgba(6,182,212,.25);  color: #67e8f9 }
.av-pill-purple { background: rgba(124,58,237,.18); border-color: rgba(124,58,237,.28); color: #c4b5fd }
.av-pill-green  { background: rgba(5,150,105,.15);  border-color: rgba(5,150,105,.25);  color: #6ee7b7 }

/* Right content */
.about-content .section-tag { margin-bottom: 12px }
.about-desc { font-size: .95rem; color: var(--g500); line-height: 1.88; margin-bottom: 32px; text-align: justify }
.about-bullets { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px }
.about-bullets li { display: flex; align-items: flex-start; gap: 14px }
.bullet-icon {
  width: 30px; height: 30px; background: var(--blue-light); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); font-size: .78rem; flex-shrink: 0; margin-top: 2px
}
.about-bullets li strong { font-size: .9rem; font-weight: 700; color: var(--g900); display: block; margin-bottom: 3px }
.about-bullets li p { font-size: .84rem; color: var(--g500); line-height: 1.65; text-align: justify }

/* ══════════════════════════════════════
   SERVICES
══════════════════════════════════════ */
.services { padding: 120px 0; background: var(--g50) }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }

.service-card {
  background: var(--white); border: 1px solid var(--g200);
  border-radius: 16px; padding: 30px 28px 26px; position: relative; overflow: hidden;
  transition: all .35s ease; cursor: default
}
.service-card:hover {
  transform: translateY(-7px); box-shadow: var(--sh-lg); border-color: transparent
}

.service-color-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--bar-color, var(--blue));
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease
}
.service-card:hover .service-color-bar { transform: scaleX(1) }

.service-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--icon-bg, var(--blue-light));
  color: var(--icon-color, var(--blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 18px;
  transition: transform .35s
}
.service-card:hover .service-icon { transform: scale(1.1) }
.service-card h3 { font-size: 1rem; font-weight: 700; color: var(--g900); margin-bottom: 10px }
.service-card > p { font-size: .84rem; color: var(--g500); line-height: 1.78; margin-bottom: 18px; text-align: justify }
.service-features { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px }
.service-features li {
  font-size: .78rem; color: var(--g500); padding-left: 14px; position: relative
}
.service-features li::before {
  content: '—'; position: absolute; left: 0; color: var(--g300); font-size: .7rem
}
.service-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; color: var(--blue);
  transition: gap .2s
}
.service-card:hover .service-link { gap: 10px }

/* ══════════════════════════════════════
   STATS
══════════════════════════════════════ */
.stats-section {
  padding: 80px 0; background: var(--navy); position: relative; overflow: hidden
}
.stats-section::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 52px 52px
}
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); position: relative; z-index: 1 }
.stat-block {
  text-align: center; padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,.08)
}
.stat-block:last-child { border-right: none }
.stat-number {
  font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 900;
  color: var(--white); letter-spacing: -.05em; line-height: 1; margin-bottom: 8px
}
.stat-number span { font-size: .6em; color: var(--accent) }
.stat-block .stat-label { font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.8); margin-bottom: 4px }
.stat-block .stat-sub { font-size: .72rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .06em }

/* ══════════════════════════════════════
   PROCESS
══════════════════════════════════════ */
.process { padding: 120px 0; background: var(--g50) }

/* Two-column layout */
.process-layout {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start
}

/* ── Left intro column ── */
.process-intro {
  position: sticky; top: 110px
}
.process-intro-title {
  font-size: clamp(1.9rem, 2.8vw, 2.8rem); font-weight: 900;
  line-height: 1.13; letter-spacing: -.032em; color: var(--g900);
  margin-bottom: 20px; margin-top: 14px
}
.process-intro-lead {
  font-size: .97rem; font-weight: 600; color: var(--blue);
  line-height: 1.65; margin-bottom: 16px; text-align: left
}
.process-intro-desc {
  font-size: .9rem; color: var(--g500); line-height: 1.88;
  margin-bottom: 32px; text-align: justify
}
.process-intro-stats {
  display: flex; align-items: center; gap: 0;
  padding: 20px 24px; background: var(--white);
  border: 1px solid var(--g200); border-radius: 16px;
  margin-bottom: 32px; box-shadow: var(--sh)
}
.pi-stat { text-align: center; flex: 1 }
.pi-stat-val {
  display: block; font-size: 1.5rem; font-weight: 900;
  color: var(--g900); letter-spacing: -.03em; line-height: 1
}
.pi-stat-label { font-size: .7rem; color: var(--g400); margin-top: 4px; display: block }
.pi-stat-div { width: 1px; height: 36px; background: var(--g200); flex-shrink: 0 }

/* ── Right flow column ── */
.process-flow {
  display: flex; flex-direction: column
}

.pf-step {
  display: flex; gap: 20px; align-items: flex-start
}

/* Number + connector line */
.pf-left {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0
}
.pf-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  flex-shrink: 0; z-index: 1; position: relative;
  box-shadow: 0 4px 16px rgba(26,86,219,.35)
}
.pf-num-last {
  background: linear-gradient(135deg, var(--gold), #f97316)
}
.pf-line {
  width: 2px; flex: 1; min-height: 40px;
  background: linear-gradient(180deg, rgba(26,86,219,.25), rgba(26,86,219,.06));
  margin: 6px 0
}

/* Step card */
.pf-card {
  flex: 1; background: var(--white);
  border: 1px solid var(--g200); border-radius: 18px;
  padding: 24px 26px; margin-bottom: 16px;
  transition: all .35s ease; cursor: default
}
.pf-card:hover {
  transform: translateX(6px);
  box-shadow: var(--sh-md); border-color: transparent
}
.pf-card-last { margin-bottom: 0 }

.pf-card-last:hover {
  border-color: rgba(245,158,11,.2);
  box-shadow: 0 10px 40px rgba(245,158,11,.12)
}

/* Icon */
.pf-icon-wrap {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: 14px;
  transition: transform .3s
}
.pf-card:hover .pf-icon-wrap { transform: scale(1.1) }
.pf-icon-purple { background: #f5f3ff; color: var(--purple) }
.pf-icon-cyan    { background: #ecfeff; color: #0891b2 }
.pf-icon-gold    { background: #fffbeb; color: var(--gold) }

/* Tag pill */
.pf-tag {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 50px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 8px;
  background: rgba(26,86,219,.08); color: var(--blue)
}
.pf-tag-purple { background: rgba(124,58,237,.08); color: var(--purple) }
.pf-tag-cyan   { background: rgba(8,145,178,.08);  color: #0891b2 }
.pf-tag-gold   { background: rgba(245,158,11,.1);  color: #b45309 }

/* Body text */
.pf-body h3 {
  font-size: 1rem; font-weight: 800; color: var(--g900);
  margin-bottom: 8px; letter-spacing: -.015em; text-align: left
}
.pf-body p {
  font-size: .84rem; color: var(--g500); line-height: 1.8;
  margin-bottom: 14px; text-align: justify
}

/* Chip list */
.pf-chips {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none
}
.pf-chips li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 600; color: var(--g500);
  background: var(--g50); border: 1px solid var(--g200);
  border-radius: 50px; padding: 3px 10px; text-align: left
}
.pf-chips li i { font-size: .45rem; color: var(--blue) }

/* ══════════════════════════════════════
   PROJELER
══════════════════════════════════════ */
.projects { padding: 120px 0; background: var(--g50) }

.projects-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px
}

.project-card {
  background: var(--white); border: 1px solid var(--g200);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}
.project-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg); border-color: transparent
}

/* Üst kapak alanı */
.project-cover {
  height: 140px;
  background: linear-gradient(145deg, var(--cover-color, #0b1f4a), var(--cover-accent, #1a56db));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden
}
.project-cover::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px
}
.project-logo {
  height: 48px; width: auto; max-width: 140px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  position: relative; z-index: 1;
  transition: transform .35s ease
}
.project-card:hover .project-logo { transform: scale(1.06) }

/* Kart içeriği */
.project-body {
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; flex: 1
}
.project-tag {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 50px;
  font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(26,86,219,.08); color: var(--blue);
  margin-bottom: 10px; align-self: flex-start
}
.project-tag-cyan { background: rgba(6,182,212,.1); color: #0891b2 }
.project-tag-gold { background: rgba(245,158,11,.1); color: #b45309 }

.project-body h3 {
  font-size: 1.02rem; font-weight: 800; color: var(--g900);
  margin-bottom: 10px; letter-spacing: -.015em
}
.project-body p {
  font-size: .82rem; color: var(--g500); line-height: 1.78;
  text-align: justify; flex: 1; margin-bottom: 18px
}

.project-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; color: var(--blue);
  transition: gap .2s, color .2s; align-self: flex-start
}
.project-link i { font-size: .72rem; transition: transform .2s }
.project-card:hover .project-link { gap: 10px; color: var(--navy) }
.project-card:hover .project-link i { transform: translateX(3px) }

@media (max-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px) {
  .projects-grid { grid-template-columns: 1fr }
  .projects { padding: 72px 0 }
}

/* ══════════════════════════════════════
   CTA BAND
══════════════════════════════════════ */
.cta-band { padding: 48px 0; background: var(--white) }
.cta-band-inner {
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 50%, var(--navy-light) 100%);
  border-radius: 24px; padding: 64px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  position: relative; overflow: hidden
}
.cta-band-inner::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px
}
.cta-band-text { position: relative; z-index: 1 }
.cta-band-text h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 800; color: var(--white);
  letter-spacing: -.025em; margin-bottom: 8px
}
.cta-band-text p { font-size: .95rem; color: rgba(255,255,255,.6) }
.cta-band .btn-primary {
  position: relative; z-index: 1; flex-shrink: 0;
  background: var(--white); color: var(--navy); box-shadow: none
}
.cta-band .btn-primary:hover { background: var(--g100); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2) }

/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
.contact { padding: 120px 0; background: var(--g50) }
.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start }

.contact-info .section-tag { margin-bottom: 12px }
.contact-desc { font-size: .92rem; color: var(--g500); line-height: 1.85; margin-bottom: 36px }
.contact-items { display: flex; flex-direction: column }
.contact-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--g100)
}
.contact-item:last-of-type { border-bottom: none }
.contact-icon {
  width: 40px; height: 40px; background: var(--blue-light); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); font-size: .9rem; flex-shrink: 0
}
.contact-item strong { display: block; font-size: .72rem; font-weight: 700; color: var(--g400); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px }
.contact-item p, .contact-item a { font-size: .88rem; color: var(--g700); font-weight: 500; transition: color .2s }
.contact-item a:hover { color: var(--blue) }

.contact-socials { display: flex; gap: 10px; margin-top: 24px }
.contact-socials a {
  width: 38px; height: 38px; background: var(--white); border: 1px solid var(--g200);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--g500); font-size: .88rem; transition: all .2s
}
.contact-socials a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); transform: translateY(-2px) }

.contact-form-wrap {
  background: var(--white); border: 1px solid var(--g200);
  border-radius: 20px; padding: 36px; box-shadow: var(--sh)
}
.contact-form { display: flex; flex-direction: column; gap: 16px }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.form-group { display: flex; flex-direction: column; gap: 6px }
.form-group label { font-size: .78rem; font-weight: 700; color: var(--g700); letter-spacing: .02em }
.form-group input, .form-group select, .form-group textarea {
  background: var(--g50); border: 1.5px solid var(--g200);
  border-radius: var(--r); padding: 11px 14px;
  color: var(--g900); font-family: var(--font); font-size: .88rem;
  outline: none; transition: border-color .2s, box-shadow .2s; width: 100%; resize: vertical
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 3px rgba(26,86,219,.08)
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--g300) }
.form-group select option { background: var(--white) }
.form-note { font-size: .73rem; color: var(--g400); text-align: center; margin-top: 4px }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer { background: var(--g900); padding: 72px 0 32px }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 48px; margin-bottom: 52px }
.footer-brand .footer-logo { height: 42px; filter: brightness(0) invert(1); margin-bottom: 18px }
.footer-tagline { font-size: .84rem; color: var(--g400); line-height: 1.8; margin-bottom: 24px; max-width: 280px }
.footer-socials { display: flex; gap: 8px }
.footer-socials a {
  width: 34px; height: 34px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--g400); font-size: .84rem; transition: all .2s
}
.footer-socials a:hover { background: var(--blue); border-color: var(--blue); color: var(--white) }
.footer-col h4 {
  font-size: .8rem; font-weight: 700; color: var(--white);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px }
.footer-col a { font-size: .84rem; color: var(--g400); transition: color .2s }
.footer-col a:hover { color: var(--white) }
.footer-col address { font-style: normal; display: flex; flex-direction: column; gap: 11px }
.footer-col address p { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--g400); line-height: 1.6 }
.footer-col address i { color: var(--g500); font-size: .88rem; margin-top: 3px; flex-shrink: 0 }
.footer-col address a { font-size: .82rem; color: var(--g400); }
.footer-col address a:hover { color: var(--white) }

.footer-bottom {
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px
}
.footer-bottom p { font-size: .78rem; color: var(--g500) }

/* ══════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
══════════════════════════════════════ */
.reveal-up, .reveal-left, .reveal-right {
  opacity: 0; transition: opacity .75s ease, transform .75s ease
}
.reveal-up { transform: translateY(36px) }
.reveal-left { transform: translateX(-36px) }
.reveal-right { transform: translateX(36px) }
.reveal-up.revealed, .reveal-left.revealed, .reveal-right.revealed {
  opacity: 1; transform: none
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px }
  .about-visual { position: relative; top: auto; transform: none !important }
  .services-grid { grid-template-columns: repeat(2,1fr) }
  .stats-grid { grid-template-columns: repeat(2,1fr) }
  .stat-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding: 28px 0 }
  .stat-block:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08) }
  .stat-block:last-child { border-bottom: none }
  .process-layout { grid-template-columns: 1fr; gap: 48px }
  .process-intro { position: relative; top: auto }
  .testimonials-grid { grid-template-columns: 1fr }
  .testimonial-featured { transform: none }
  .contact-grid { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px }
  .cta-band-inner { flex-direction: column; text-align: center; padding: 52px 36px }
}

@media (max-width: 768px) {
  .about { padding: 72px 0 }
  .services { padding: 72px 0 }
  .process { padding: 72px 0 }
  .testimonials { padding: 72px 0 }
  .contact { padding: 72px 0 }

  .nav-links {
    display: none; flex-direction: column; position: fixed; inset: 0;
    background: rgba(11,31,74,.97); backdrop-filter: blur(20px);
    align-items: center; justify-content: center; gap: 32px; z-index: 999
  }
  .nav-links.open { display: flex }
  .nav-links.open a { font-size: 1.2rem; color: var(--white) !important }
  .nav-toggle { display: flex }
  .nav-cta { display: none }

  .hero-stats { gap: 0; padding: 20px 16px }
  .hero-stat { padding: 0 18px }
  .hero-stat-divider { height: 36px }

  .services-grid { grid-template-columns: 1fr }
  .stats-grid { grid-template-columns: 1fr }
  .stat-block { border-right: none !important }
  .pf-card { padding: 18px 18px }
  .form-row { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr; gap: 28px }
  .footer-bottom { flex-direction: column; align-items: flex-start }
  .cta-band-inner { margin: 0 16px; padding: 40px 24px }
  .hero-actions { flex-direction: column; align-items: stretch }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; justify-content: center }
  .about-floating-badge { display: none }
  .hero-stats { flex-wrap: wrap }
  .hero-stat-divider { display: none }
  .hero-stat { width: 50%; border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px 0 }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.3rem }
  .contact-form-wrap { padding: 22px 16px }
  .section-header { margin-bottom: 44px }
  .process-intro-stats { padding: 16px 12px }
  .pi-stat-val { font-size: 1.2rem }
  .pf-chips { gap: 4px }
}


/* ══════════════════════════════════════
   AI DİJİTAL DÖNÜŞÜM
══════════════════════════════════════ */
.ai-transform {
  padding: 120px 0; background: var(--navy);
  position: relative; overflow: hidden
}

/* Animated bg layers */
.ai-transform-bg { position: absolute; inset: 0; overflow: hidden }
.ai-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: gridShift 22s linear infinite
}
.ai-bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); pointer-events: none
}
.ai-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(124,58,237,.3), transparent 70%);
  top: -150px; left: -80px;
  animation: orbPulse 8s ease-in-out infinite
}
.ai-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(6,182,212,.22), transparent 70%);
  bottom: -100px; right: -60px;
  animation: orbPulse 10s ease-in-out infinite 3s
}

/* Section tag + title light variants */
.section-tag-light {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.85)
}
.section-title-light { color: var(--white) }
.section-desc-light { color: rgba(255,255,255,.6); max-width: 800px; margin: 0 auto; text-align: justify }

/* Top header */
.ai-transform-top {
  text-align: center; margin-bottom: 64px; position: relative; z-index: 2
}
.ai-transform-top .section-desc-light { margin: 0 auto }

/* ── Process Flow Diyagramı ── */
.ai-process-flow {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
  padding: 20px 28px; margin-bottom: 52px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px; position: relative; z-index: 2
}
.apf-step {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 20px;
  border-radius: 14px;
  transition: background .25s
}
.apf-step:hover { background: rgba(255,255,255,.07) }
.apf-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800; color: rgba(255,255,255,.6);
  letter-spacing: .04em; transition: all .25s
}
.apf-step:hover .apf-num {
  background: rgba(6,182,212,.25); border-color: rgba(6,182,212,.4);
  color: var(--accent)
}
.apf-step-active .apf-num {
  background: linear-gradient(135deg, var(--blue), var(--accent));
  border-color: transparent; color: var(--white);
  box-shadow: 0 4px 16px rgba(6,182,212,.4)
}
.apf-label {
  font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.55);
  white-space: nowrap; letter-spacing: .02em; transition: color .25s
}
.apf-step:hover .apf-label { color: rgba(255,255,255,.9) }
.apf-step-active .apf-label { color: var(--accent) }
.apf-desc {
  font-size: .63rem; color: rgba(255,255,255,.28);
  text-align: center; line-height: 1.4; max-width: 100px;
  transition: color .25s
}
.apf-step:hover .apf-desc { color: rgba(255,255,255,.5) }
.apf-step-active .apf-desc { color: rgba(6,182,212,.6) }
.apf-arrow {
  color: rgba(255,255,255,.18); font-size: .7rem; padding: 0 2px; flex-shrink: 0
}

@media (max-width: 768px) {
  .ai-process-flow { gap: 4px; padding: 16px 12px }
  .apf-step { padding: 8px 10px }
  .apf-label { font-size: .65rem }
}
@media (max-width: 480px) {
  .apf-step:nth-child(n+7) { display: none }
  .ai-process-flow { justify-content: flex-start }
}

/* Capability cards grid */
.ai-caps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; position: relative; z-index: 2; margin-bottom: 60px
}

.ai-cap-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 30px 26px;
  position: relative; overflow: hidden;
  transition: all .35s ease; cursor: default
}
.ai-cap-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease
}
.ai-cap-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,.3)
}
.ai-cap-card:hover::before { transform: scaleX(1) }

.ai-cap-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--accent);
  margin-bottom: 20px;
  transition: all .35s ease
}
.ai-cap-card:hover .ai-cap-icon {
  background: rgba(6,182,212,.2);
  border-color: rgba(6,182,212,.3);
  transform: scale(1.08)
}

.ai-cap-card h3 {
  font-size: 1rem; font-weight: 700;
  color: var(--white); margin-bottom: 10px
}
.ai-cap-card p {
  font-size: .84rem; color: rgba(255,255,255,.58);
  line-height: 1.78; margin-bottom: 18px; text-align: justify
}

.ai-cap-tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  background: rgba(6,182,212,.15); border: 1px solid rgba(6,182,212,.25);
  border-radius: 50px; font-size: .7rem; font-weight: 700;
  color: var(--accent); letter-spacing: .05em; text-transform: uppercase
}

/* Bottom CTA row */
.ai-transform-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding: 36px 40px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; position: relative; z-index: 2
}
.ai-cta-label {
  display: block; font-size: .72rem; font-weight: 700;
  color: var(--accent); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 6px
}
.ai-cta-text p {
  font-size: .95rem; color: rgba(255,255,255,.75); font-weight: 500
}
.btn-white-hero {
  background: var(--white) !important;
  color: var(--navy) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
  flex-shrink: 0
}
.btn-white-hero:hover {
  background: var(--g100) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.25) !important
}

/* Responsive */
@media (max-width: 1024px) {
  .ai-caps-grid { grid-template-columns: repeat(2, 1fr) }
  .ai-transform-cta { flex-direction: column; text-align: center; padding: 28px 24px }
}
@media (max-width: 768px) {
  .ai-transform { padding: 72px 0 }
  .ai-caps-grid { grid-template-columns: 1fr }
  .ai-transform-cta { padding: 24px 18px }
}

/* service-icon-dual — Web/Mobil kart ikonları */
.service-icon-dual {
  display: flex; gap: 8px; margin-bottom: 18px
}
.service-icon-dual .service-icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0; font-size: 1rem
}

/* AI Dijital Dönüşüm kartı vurgusu */
.service-card-ai {
  background: linear-gradient(145deg, #faf5ff 0%, #f0f9ff 100%);
  border-color: rgba(124,58,237,.15)
}
.service-card-ai:hover { border-color: transparent }


/* ══════════════════════════════════════
   HERO — FLOATING TECH CARDS
══════════════════════════════════════ */

/* Typewriter tag */
.hero-type-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px; font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,.85); margin-bottom: 22px;
  backdrop-filter: blur(10px);
  animation: fadeUp .7s ease both; align-self: flex-start
}
.hero-type-tag i { color: var(--accent); font-size: .65rem }
#hero-type-text { min-width: 120px; text-align: left }
.type-cursor {
  color: var(--accent); font-weight: 300; font-size: 1rem;
  animation: cursorBlink .8s step-end infinite
}
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Hero right column — stacked cards */
.hero-right {
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 2;
  min-width: 0; width: max-content
}

/* Base card */
.hf-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 90px 16px 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  opacity: 0;
  transition: background .3s, border-color .3s, transform .3s;
  animation: cardEntrance .6s ease forwards
}
.hf-card:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  transform: translateX(6px)
}

.hf-card-1 { animation: cardEntrance .6s .5s ease forwards }
.hf-card-2 { animation: cardEntrance .6s .65s ease forwards }
.hf-card-3 { animation: cardEntrance .6s .8s ease forwards }
.hf-card-4 { animation: cardEntrance .6s .95s ease forwards }
.hf-card-5 { animation: cardEntrance .6s 1.1s ease forwards }

@keyframes cardEntrance {
  from { opacity:0; transform: translateX(30px) }
  to   { opacity:1; transform: translateX(0) }
}

.hf-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(26,86,219,.35); color: #93c5fd;
  display: flex; align-items: center; justify-content: center; font-size: .95rem
}
.hf-icon-green  { background: rgba(5,150,105,.35);  color: #6ee7b7 }
.hf-icon-purple { background: rgba(124,58,237,.35); color: #c4b5fd }
.hf-icon-cyan   { background: rgba(6,182,212,.3);   color: #67e8f9 }
.hf-icon-gold   { background: rgba(245,158,11,.25); color: #fcd34d }

.hf-label {
  display: block; font-size: .8rem; font-weight: 700; color: var(--white); line-height: 1.2
}
.hf-sub {
  display: block; font-size: .7rem; color: rgba(255,255,255,.45); margin-top: 2px
}

/* Progress mini-bar */
.hf-bar {
  height: 4px; width: 90px; background: rgba(255,255,255,.12);
  border-radius: 2px; margin-top: 6px; overflow: hidden
}
.hf-bar-fill {
  height: 100%; border-radius: 2px; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  animation: barFill 1.4s 1.5s ease forwards
}
.hf-bar-cyan { background: linear-gradient(90deg, var(--accent), #a78bfa) }
@keyframes barFill { to { width: var(--w) } }

/* Pulse dot on card 1 */
.hf-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(6,182,212,.5);
  animation: pulseDot 2s ease-in-out infinite
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(6,182,212,.5) }
  70%  { box-shadow: 0 0 0 8px rgba(6,182,212,0) }
  100% { box-shadow: 0 0 0 0 rgba(6,182,212,0) }
}

/* Responsive hero split */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px }
  .hero-right { flex-direction: row; flex-wrap: wrap; gap: 12px }
  .hf-card { flex: 1 1 calc(50% - 6px) }
  .hf-card-5 { display: none }
  .hero-title { font-size: clamp(1.8rem, 4vw, 2.8rem) }
}
@media (max-width: 640px) {
  .hero-right { display: none }
  .hero-title { text-align: center }
  .hero-desc  { text-align: center; max-width: 100% }
  .hero-actions { justify-content: center }
  .hero-type-tag { align-self: center }
}