/* ============================================================
   KARTEPE VETERİNER KLİNİĞİ — main.css
   Tema: Modern, güvenilir, sağlık odaklı veteriner kliniği
   Mimari: BEM + CSS custom properties (design tokens)
   Responsive: mobile-first (375 → 768 → 1024 → 1440)
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Renk paleti — Sağlık / Veteriner teması */
  --primary: #0D9488;           /* tıbbi turkuaz-yeşil */
  --primary-dark: #0A7A70;
  --primary-darker: #065F56;
  --primary-light: #5EEAD4;
  --primary-50: #F0FDFA;

  --accent: #F59E0B;            /* sıcak amber / güneş */
  --accent-dark: #D97706;
  --accent-light: #FCD34D;

  --blue: #3B82F6;              /* bilgi / link */
  --blue-dark: #2563EB;

  --red: #EF4444;               /* acil durum */
  --red-dark: #DC2626;

  --green: #22C55E;             /* başarı / sağlıklı */
  --green-dark: #16A34A;

  --cream: #FAFBFC;             /* arka plan */
  --cream-warm: #F8FAF9;
  --white: #FFFFFF;

  --ink: #1E293B;               /* ana metin */
  --ink-soft: #334155;
  --muted: #64748B;
  --muted-light: #94A3B8;
  --line: #E2E8F0;
  --line-light: #F1F5F9;

  /* Yüzey & gradient */
  --surface: var(--white);
  --surface-alt: var(--cream-warm);
  --hero-gradient: linear-gradient(135deg, rgba(13,148,136,0.92) 0%, rgba(6,95,86,0.88) 50%, rgba(15,23,42,0.95) 100%);
  --hero-gradient-alt: linear-gradient(160deg, #0D9488 0%, #065F56 40%, #0F172A 100%);
  --green-gradient: linear-gradient(135deg, #0D9488 0%, #14B8A6 50%, #0D9488 100%);
  --warm-gradient: linear-gradient(135deg, #F59E0B 0%, #FBBF24 50%, #F59E0B 100%);

  /* Tipografi */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --fs-hero: clamp(2.5rem, 5.5vw, 4.5rem);
  --fs-hero-sub: clamp(1rem, 2vw, 1.25rem);
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Boşluk (8px tabanlı) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Yarıçap & gölge */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 40px rgba(13,148,136,0.15);

  /* Geçiş */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;

  /* Katmanlar */
  --z-nav: 100;
  --z-drop: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-hero: 1;
}

/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

img, svg, picture, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--ink);
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

p { max-width: 65ch; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--primary); color: #fff; }

/* ---------- 3. Utility ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow {
  max-width: 900px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  min-height: 48px;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.btn--primary {
  background: var(--green-gradient);
  color: #fff;
  box-shadow: 0 4px 16px rgba(13,148,136,0.35);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(13,148,136,0.45);
}

.btn--accent {
  background: var(--warm-gradient);
  color: #78350F;
  box-shadow: 0 4px 16px rgba(245,158,11,0.3);
}
.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(245,158,11,0.4);
}

.btn--outline {
  border: 2px solid var(--white);
  color: var(--white);
  background: transparent;
}
.btn--outline:hover {
  background: var(--white);
  color: var(--primary);
  transform: translateY(-2px);
}

.btn--outline-dark {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
}
.btn--outline-dark:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--primary);
  padding: 0.6rem 1.2rem;
}
.btn--ghost:hover {
  background: var(--primary-50);
}

.btn--sm {
  padding: 0.55rem 1.2rem;
  font-size: var(--fs-sm);
  min-height: 36px;
}

.btn--lg {
  padding: 1rem 2.5rem;
  font-size: var(--fs-lg);
  min-height: 56px;
}

.btn--danger {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 16px rgba(239,68,68,0.3);
}
.btn--danger:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
}

/* ---------- 5. Header / Navbar ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(226,232,240,0.5);
  transition: all var(--dur-slow) var(--ease);
}

.header--scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: var(--shadow-sm);
}

.header--hero {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
}

.header--hero .nav__link,
.header--hero .logo__text {
  color: rgba(255,255,255,0.9);
}
.header--hero .logo__text:hover,
.header--hero .nav__link:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.header--hero .nav__link.is-active {
  color: #fff;
}
.header--hero .btn--primary {
  background: var(--warm-gradient);
  color: #78350F;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-8);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.logo__icon {
  width: 44px;
  height: 44px;
}

.logo__text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--ink);
  line-height: 1.2;
  transition: color var(--dur) var(--ease);
}

.logo__text small {
  display: block;
  font-size: 0.65em;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  transition: all var(--dur) var(--ease);
  position: relative;
}

.nav__link:hover {
  color: var(--primary);
  background: var(--primary-50);
}

.nav__link.is-active {
  color: var(--primary);
  font-weight: 600;
}

.nav__link.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Acil durum badge */
.nav__emergency {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  animation: emergencyPulse 2s ease-in-out infinite;
}

.nav__emergency svg {
  width: 14px; height: 14px;
}

@keyframes emergencyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* Mobile toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 4px 0;
}

.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
}

.header--hero .nav__toggle span {
  background: #fff;
}

/* ---------- 6. Hero Section ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--hero-gradient-alt);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}

/* Floating shapes */
.hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero__shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
  background: var(--primary-light);
}

.hero__shape--1 {
  width: 600px; height: 600px;
  top: -200px; right: -150px;
  animation: floatShape 20s ease-in-out infinite;
}

.hero__shape--2 {
  width: 400px; height: 400px;
  bottom: -100px; left: -100px;
  animation: floatShape 15s ease-in-out infinite reverse;
}

.hero__shape--3 {
  width: 200px; height: 200px;
  top: 30%; left: 10%;
  animation: floatShape 12s ease-in-out infinite 2s;
}

@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* Particle canvas */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-5) var(--space-16);
}

.hero__text {
  color: var(--white);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1.2rem;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary-light);
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.8s var(--ease) both;
}

.hero__badge svg {
  width: 18px; height: 18px;
  color: var(--accent);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.8s var(--ease) 0.15s both;
}

.hero__title span {
  background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__desc {
  font-size: var(--fs-hero-sub);
  color: rgba(255,255,255,0.8);
  line-height: var(--lh-body);
  margin-bottom: var(--space-8);
  max-width: 500px;
  animation: fadeInUp 0.8s var(--ease) 0.3s both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  animation: fadeInUp 0.8s var(--ease) 0.45s both;
}

/* Hero sağ taraftaki kart / görsel */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeInRight 1s var(--ease) 0.3s both;
}

.hero__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  color: var(--white);
}

.hero__card-icon {
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.hero__card-icon svg {
  width: 40px; height: 40px;
  color: var(--primary-light);
}

.hero__card h3 {
  color: #fff;
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
}

.hero__card p {
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-6);
}

.hero__card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.hero__stat {
  text-align: center;
}

.hero__stat-num {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--accent-light);
  line-height: 1;
}

.hero__stat-label {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-1);
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.6);
  font-size: var(--fs-xs);
  font-weight: 500;
  animation: fadeInUp 1s var(--ease) 1s both;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.3; transform: scaleY(0.5); }
}

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

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

/* ---------- 7. Sections ---------- */
.section {
  padding: var(--space-20) 0;
}

.section--alt {
  background: var(--surface-alt);
}

.section--dark {
  background: var(--ink);
  color: var(--white);
}

.section--primary {
  background: var(--primary);
  color: var(--white);
}

/* Section header */
.section-head {
  margin-bottom: var(--space-12);
}

.section-head--center {
  text-align: center;
}

.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.section--dark .section-head__eyebrow,
.section--primary .section-head__eyebrow {
  color: var(--primary-light);
}

.section-head__title {
  font-size: var(--fs-4xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.section-head__desc {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 600px;
  margin-inline: auto;
}

.section--dark .section-head__desc,
.section--primary .section-head__desc {
  color: rgba(255,255,255,0.7);
}

/* ---------- 8. Stats Bar ---------- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding: var(--space-12) var(--space-5);
  max-width: 1200px;
  margin: -60px auto 0;
  position: relative;
  z-index: 10;
}

.stats-bar__item {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}

.stats-bar__item:hover {
  transform: translateY(-4px);
}

.stats-bar__icon {
  width: 48px; height: 48px;
  background: var(--primary-50);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
}

.stats-bar__icon svg {
  width: 24px; height: 24px;
  color: var(--primary);
}

.stats-bar__num {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.stats-bar__label {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--space-1);
}

/* ---------- 9. Grid System ---------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 10. Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-slow) var(--ease);
  border: 1px solid var(--line-light);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.3rem 0.8rem;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.card__body {
  padding: var(--space-6);
}

.card__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--ink);
}

.card__desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.card__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.card__meta svg {
  width: 16px; height: 16px;
  color: var(--primary);
}

.card__action {
  margin-top: auto;
}

/* ---------- 11. Service Cards ---------- */
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--line-light);
  transition: all var(--dur-slow) var(--ease);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--green-gradient);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.service-card:hover::before {
  opacity: 1;
}

.service-card__icon {
  width: 64px; height: 64px;
  background: var(--primary-50);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  transition: all var(--dur) var(--ease);
}

.service-card:hover .service-card__icon {
  background: var(--primary);
}

.service-card__icon svg {
  width: 32px; height: 32px;
  color: var(--primary);
  transition: color var(--dur) var(--ease);
}

.service-card:hover .service-card__icon svg {
  color: #fff;
}

.service-card__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.service-card__desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-body);
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
  transition: gap var(--dur) var(--ease);
}

.service-card__link:hover {
  gap: var(--space-3);
}

.service-card__link svg {
  width: 16px; height: 16px;
}

/* ---------- 12. Team Cards ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.team-card{
  background:var(--kv-navy-card,#1a2035);
  border:1px solid var(--kv-glass-border,rgba(255,255,255,0.06));
  border-radius:var(--kv-radius,16px);
  overflow:hidden;
  transition:var(--kv-transition,all 0.3s ease);
  text-decoration:none;
  display:block;
  text-align:center;
}
.team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,0,0,0.1);
}
.team-card__img{width:100%;aspect-ratio:1/1;overflow:hidden;}
.team-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.5s ease;
}
.team-card:hover .team-card__img img{transform:scale(1.05);}
.team-card__body{padding:20px 16px;}
.team-card__name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1rem;font-weight:700;color:var(--kv-text);margin-bottom:4px;
}
.team-card__role{
  color:var(--kv-teal-light,#14b8a6);font-weight:600;
  font-size:0.82rem;margin-bottom:8px;
}
.team-card__bio{
  color:var(--kv-text-muted);font-size:0.85rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.team-card__tags{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px;
}
.team-card__tag{
  padding:3px 10px;border-radius:100px;font-size:0.7rem;font-weight:600;
  border:1px solid rgba(13,148,136,0.2);background:rgba(13,148,136,0.08);
  color:var(--kv-teal-light,#14b8a6);
}
.team-card__tag--amber{
  border-color:rgba(245,158,11,0.2);background:rgba(245,158,11,0.08);color:#f59e0b;
}
@media(max-width:1024px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.team-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto;}}

/* ---------- 13. Device Cards ---------- */
.device-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-slow) var(--ease);
  border: 1px solid var(--line-light);
  display: flex;
  flex-direction: column;
}

.device-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.device-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.device-card__image-placeholder {
  padding: var(--space-8);
  text-align: center;
}

.device-card__image-placeholder svg {
  width: 64px; height: 64px;
  color: var(--primary);
  opacity: 0.4;
}

.device-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.device-card__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  background: var(--primary-50);
  color: var(--primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.device-card__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.device-card__desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-body);
  flex: 1;
}

.device-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.device-card__feature {
  padding: 0.25rem 0.6rem;
  background: var(--line-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-weight: 500;
}

/* ---------- 14. Health Guide ---------- */
.guide-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-slow) var(--ease);
  border: 1px solid var(--line-light);
}

.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.guide-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.guide-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.guide-card:hover .guide-card__image img {
  transform: scale(1.05);
}

.guide-card__body {
  padding: var(--space-6);
}

.guide-card__category {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  background: var(--primary-50);
  color: var(--primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.guide-card__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.guide-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
}

.guide-card__date {
  font-size: var(--fs-xs);
  color: var(--muted-light);
}

/* ---------- 15. CTA Band ---------- */
.cta-band {
  position: relative;
  padding: var(--space-16) 0;
  overflow: hidden;
  background: var(--primary-darker);
  color: var(--white);
}

.cta-band__bg {
  position: absolute;
  inset: 0;
}

.cta-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.cta-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,148,136,0.85), rgba(6,95,86,0.9));
}

.cta-band__content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.cta-band__title {
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-4);
}

.cta-band__desc {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-8);
  max-width: 600px;
  margin-inline: auto;
}

.cta-band__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- 16. Contact Section ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.contact-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-light);
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  background: var(--cream);
  transition: all var(--dur) var(--ease);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
  background: var(--white);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-info__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.contact-info__icon {
  width: 48px; height: 48px;
  background: var(--primary-50);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info__icon svg {
  width: 24px; height: 24px;
  color: var(--primary);
}

.contact-info__label {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.contact-info__value {
  font-weight: 600;
  color: var(--ink);
}

.contact-info__value a {
  color: var(--primary);
}

.contact-info__value a:hover {
  text-decoration: underline;
}

/* Map */
.contact-map {
  margin-top: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line-light);
}

.contact-map iframe {
  width: 100%;
  height: 400px;
  border: none;
}

/* ---------- 17. Footer ---------- */
.footer {
  background: var(--ink);
  color: rgba(255,255,255,0.7);
  padding: var(--space-16) 0 0;
}

.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__brand p {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-width: 320px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer__logo svg {
  width: 40px; height: 40px;
}

.footer__logo span {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: #fff;
}

.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: all var(--dur) var(--ease);
}

.footer__social a:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

.footer__social svg {
  width: 18px; height: 18px;
}

.footer__col h4 {
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: var(--space-5);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__col a {
  font-size: var(--fs-sm);
  transition: color var(--dur) var(--ease);
}

.footer__col a:hover {
  color: var(--primary-light);
}

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.footer__contact svg {
  width: 18px; height: 18px;
  color: var(--primary);
  margin-top: 2px;
  flex-shrink: 0;
}

.footer__contact a {
  color: rgba(255,255,255,0.7);
}

.footer__contact a:hover {
  color: var(--primary-light);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) 0;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.4);
}

/* ---------- 18. Page Hero ---------- */
/* See bottom of file for consolidated .page-hero styles */

/* ---------- 19. About Page ---------- */
.about-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.about-feature {
  text-align: center;
  padding: var(--space-8);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-light);
  transition: all var(--dur-slow) var(--ease);
}

.about-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.about-feature__icon {
  width: 72px; height: 72px;
  background: var(--primary-50);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
}

.about-feature__icon svg {
  width: 36px; height: 36px;
  color: var(--primary);
}

.about-feature__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.about-feature__desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-body);
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: var(--space-10);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-8);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-10) + 10px);
  top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--primary-50);
}

.timeline__year {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-2);
}

.timeline__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.timeline__desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-body);
}

/* ---------- 20. Scroll Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur-slower) var(--ease), transform var(--dur-slower) var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 21. WhatsApp Widget ---------- */
.wa-widget {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
}

.wa-toggle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: all var(--dur) var(--ease);
}

.wa-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.5);
}

.wa-toggle svg {
  width: 30px; height: 30px;
}

.wa-popup {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 320px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  animation: fadeInUp 0.3s var(--ease);
}

.wa-popup.is-open { display: block; }

.wa-popup-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: #075E54;
  color: #fff;
}

.wa-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.wa-title { font-weight: 700; font-size: var(--fs-sm); }
.wa-subtitle { font-size: var(--fs-xs); opacity: 0.8; }

.wa-popup-body {
  padding: var(--space-4);
  background: #ECE5DD;
  min-height: 80px;
}

.wa-message {
  background: #fff;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-xs);
}

.wa-time {
  font-size: 10px;
  color: var(--muted-light);
  text-align: right;
  margin-top: var(--space-1);
}

.wa-popup-footer {
  padding: var(--space-3);
}

.wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: #25D366;
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease);
}

.wa-btn:hover {
  background: #128C7E;
}

/* ---------- 22. Responsive ---------- */
@media (max-width: 1024px) {
  .hero__content {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: calc(72px + var(--space-12));
  }

  .hero__desc { margin-inline: auto; }
  .hero__actions { justify-content: center; }

  .hero__visual {
    display: none;
  }

  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .about-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) { .nav__menu {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: var(--white);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 1rem;
    overflow-y: auto;
    gap: 0.2rem;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease);
    z-index: var(--z-modal);
  }

  .nav__menu.is-open {
    transform: translateX(0);
  }

  .nav__menu .nav__link {
    font-size: 1rem;
    color: var(--ink);
    padding: 0.3rem 0.9rem;
  }

  .nav__menu li.mobile-only-nav {
    margin-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
  }
  
  .nav__menu li.mobile-only-nav img {
    height: 40px !important;
  }
  
  .nav__menu li.mobile-only-nav .btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
  }

  .nav__toggle { display: flex; }

  .nav__toggle.is-open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav__toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .nav__toggle.is-open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .nav__cta { display: none; }

  .hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -40px;
    padding: var(--space-8) var(--space-4);
  }

  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .section-head__title {
    font-size: var(--fs-3xl);
  }

  .page-hero__title {
    font-size: var(--fs-4xl);
  }
}

@media (max-width: 480px) {
  .stats-bar {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .stats-bar__item {
    padding: var(--space-4);
  }

  .stats-bar__num {
    font-size: var(--fs-2xl);
  }

  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- 23. Scroll Hint ---------- */
.scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.5);
  font-size: var(--fs-xs);
  transition: color var(--dur) var(--ease);
  animation: fadeInUp 1s var(--ease) 1s both;
}

.scroll-hint:hover { color: rgba(255,255,255,0.8); }

.scroll-hint svg {
  width: 20px; height: 20px;
  animation: bounceDown 2s ease-in-out infinite;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- 24. Animations ---------- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---------- 25. Articles / Rich Content ---------- */
.article-content {
  font-size: var(--fs-lg);
  line-height: 1.8;
  color: var(--ink-soft);
}

.article-content h2 {
  font-size: var(--fs-3xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.article-content h3 {
  font-size: var(--fs-2xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.article-content p {
  margin-bottom: var(--space-4);
}

.article-content ul, .article-content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.article-content li {
  margin-bottom: var(--space-2);
  list-style: disc;
}

.article-content ol li {
  list-style: decimal;
}

.article-content strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- 26. Empty State ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-5);
}

.empty-state svg {
  width: 80px; height: 80px;
  color: var(--muted-light);
  margin-bottom: var(--space-6);
}

.empty-state h3 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-3);
}

.empty-state p {
  color: var(--muted);
  margin-inline: auto;
}

/* ============================================================
   KARTEPE VETERİNER KLİNİĞİ — Ortak Sayfa Bileşenleri
   kv-* sınıfları (index.php, hakkimizda.php, vb. ortak kullanım)
   ============================================================ */

/* ---- KV Design Tokens ---- */
:root {
    --kv-navy: #FAFBFC;
    --kv-navy-light: #F1F5F9;
    --kv-navy-card: #FFFFFF;
    --kv-navy-border: #E2E8F0;
    --kv-teal: #0D9488;
    --kv-teal-light: #14B8A6;
    --kv-teal-glow: rgba(13,148,136,0.15);
    --kv-amber: #F59E0B;
    --kv-red: #EF4444;
    --kv-green: #22C55E;
    --kv-text: #1E293B;
    --kv-text-muted: #64748B;
    --kv-text-dim: #94A3B8;
    --kv-glass: rgba(255,255,255,0.8);
    --kv-glass-border: #E2E8F0;
    --kv-radius: 20px;
    --kv-radius-lg: 28px;
    --kv-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- KV Section Common ---- */
.kv-section {
    background: var(--kv-navy);
    padding: 100px 0;
    position: relative;
}
.kv-section--alt {
    background: var(--kv-navy-light);
}
.kv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* KV Section Header */
.kv-section-header {
    text-align: center;
    margin-bottom: 64px;
}
.kv-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(13,148,136,0.1);
    border: 1px solid rgba(13,148,136,0.2);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--kv-teal-light);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}
.kv-badge svg {
    width: 16px;
    height: 16px;
}
.kv-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--kv-text);
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.kv-section-title span {
    background: linear-gradient(135deg, var(--kv-teal), var(--kv-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.kv-section-desc {
    font-size: 1.05rem;
    color: var(--kv-text-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ---- KV About Section ---- */
.kv-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.kv-about-visual {
    position: relative;
}
.kv-about-img-wrap {
    position: relative;
    border-radius: var(--kv-radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}
.kv-about-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.kv-about-img-wrap:hover img {
    transform: scale(1.05);
}
.kv-about-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10,15,26,0.6) 100%);
    pointer-events: none;
}
.kv-about-badge-float {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--kv-teal);
    color: #fff;
    padding: 24px 28px;
    border-radius: var(--kv-radius);
    text-align: center;
    box-shadow: 0 15px 40px rgba(13,148,136,0.4);
    z-index: 5;
}
.kv-about-badge-float .num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    display: block;
}
.kv-about-badge-float .txt {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}
.kv-about-dots {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(circle, rgba(13,148,136,0.3) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    opacity: 0.6;
    z-index: -1;
}
.kv-about-content .kv-badge { margin-bottom: 24px; }
.kv-about-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: var(--kv-text);
    line-height: 1.15;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}
.kv-about-title span {
    color: var(--kv-teal);
}
.kv-about-text {
    font-size: 1rem;
    color: var(--kv-text-muted);
    line-height: 1.8;
    margin-bottom: 32px;
}
.kv-about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 40px;
}
.kv-about-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--kv-glass);
    border: 1px solid var(--kv-glass-border);
    border-radius: 14px;
    transition: var(--kv-transition);
}
.kv-about-feature:hover {
    background: rgba(13,148,136,0.08);
    border-color: rgba(13,148,136,0.2);
    transform: translateY(-2px);
}
.kv-about-feature svg {
    width: 22px;
    height: 22px;
    color: var(--kv-teal-light);
    flex-shrink: 0;
}
.kv-about-feature span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kv-text);
}

/* KV Buttons */
.kv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--kv-transition);
    border: none;
    cursor: pointer;
}
.kv-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
}
.kv-btn:hover svg {
    transform: translateX(4px);
}
.kv-btn--teal {
    background: linear-gradient(135deg, var(--kv-teal), var(--kv-teal-light));
    color: #fff;
    box-shadow: 0 8px 30px rgba(13,148,136,0.35);
}
.kv-btn--teal:hover {
    box-shadow: 0 12px 40px rgba(13,148,136,0.5);
    transform: translateY(-3px);
}
.kv-btn--outline {
    background: transparent;
    border: 2px solid rgba(30,41,59,0.15);
    color: var(--kv-text);
}
.kv-btn--outline:hover {
    border-color: var(--kv-teal);
    color: var(--kv-teal);
    transform: translateY(-3px);
}
/* CTA içindeki outline buton — beyaz */
.kv-cta .kv-btn--outline {
    border: 2px solid rgba(255,255,255,0.4);
    color: #fff;
}
.kv-cta .kv-btn--outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    color: #fff;
    transform: translateY(-3px);
}
.kv-btn--white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: #fff;
    color: var(--kv-teal);
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--kv-transition);
    width: fit-content;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.kv-btn--white svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
}
.kv-btn--white:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.25);
}
.kv-btn--white:hover svg {
    transform: translateX(4px);
}

/* ---- KV Stats Bar ---- */
.kv-stats-bar {
    background: var(--kv-navy);
    padding: 0 0 80px;
}
.kv-stats-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--kv-navy-card);
    border: 1px solid var(--kv-glass-border);
    border-radius: var(--kv-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    position: relative;
    z-index: 10;
}
.kv-stat-item {
    padding: 40px 30px;
    text-align: center;
    position: relative;
    transition: var(--kv-transition);
}
.kv-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--kv-glass-border), transparent);
}
.kv-stat-item:hover {
    background: rgba(13,148,136,0.05);
}
.kv-stat-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: rgba(13,148,136,0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--kv-transition);
}
.kv-stat-item:hover .kv-stat-icon {
    background: rgba(13,148,136,0.2);
    transform: translateY(-3px);
}
.kv-stat-icon svg {
    width: 26px;
    height: 26px;
    color: var(--kv-teal-light);
}
.kv-stat-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--kv-text);
    line-height: 1;
    margin-bottom: 6px;
}
.kv-stat-label {
    font-size: 0.85rem;
    color: var(--kv-text-muted);
    font-weight: 500;
}

/* ---- KV Services ---- */
.kv-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.kv-service-card {
    background: var(--kv-navy-card);
    border: 1px solid var(--kv-glass-border);
    border-radius: var(--kv-radius);
    overflow: hidden;
    transition: var(--kv-transition);
    position: relative;
}
.kv-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kv-teal), var(--kv-teal-light));
    opacity: 0;
    transition: opacity 0.4s;
}
.kv-service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(13,148,136,0.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.kv-service-card:hover::before {
    opacity: 1;
}
.kv-service-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.kv-service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.kv-service-card:hover .kv-service-img img {
    transform: scale(1.08);
}
.kv-service-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10,15,26,0.5) 100%);
    pointer-events: none;
}
.kv-service-number {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    background: rgba(13,148,136,0.9);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    color: #fff;
    z-index: 2;
}
.kv-service-body {
    padding: 28px;
}
.kv-service-icon {
    width: 48px;
    height: 48px;
    background: rgba(13,148,136,0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: var(--kv-transition);
}
.kv-service-card:hover .kv-service-icon {
    background: var(--kv-teal);
}
.kv-service-icon svg {
    width: 24px;
    height: 24px;
    color: var(--kv-teal-light);
    transition: color 0.4s;
}
.kv-service-card:hover .kv-service-icon svg {
    color: #fff;
}
.kv-service-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kv-text);
    margin-bottom: 10px;
}
.kv-service-desc {
    font-size: 0.88rem;
    color: var(--kv-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}
.kv-service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--kv-teal-light);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--kv-transition);
}
.kv-service-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s;
}
.kv-service-link:hover {
    color: var(--kv-teal);
}
.kv-service-link:hover svg {
    transform: translateX(5px);
}

/* ---- KV Banner ---- */
.kv-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--kv-radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    min-height: 420px;
}
.kv-banner-content {
    background: linear-gradient(135deg, var(--kv-teal), #065f56);
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.kv-banner-content::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.kv-banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.15);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    width: fit-content;
}
.kv-banner-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 16px;
}
.kv-banner-text {
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 90%;
}
.kv-banner-visual {
    position: relative;
    overflow: hidden;
}
.kv-banner-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.kv-banner-visual:hover img {
    transform: scale(1.05);
}

/* ---- KV Blog ---- */
.kv-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.kv-blog-card {
    background: var(--kv-navy-card);
    border: 1px solid var(--kv-glass-border);
    border-radius: var(--kv-radius);
    overflow: hidden;
    transition: var(--kv-transition);
}
.kv-blog-card:hover {
    transform: translateY(-8px);
    border-color: rgba(13,148,136,0.15);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.kv-blog-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}
.kv-blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.kv-blog-card:hover .kv-blog-img img {
    transform: scale(1.08);
}
.kv-blog-date {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--kv-teal);
    color: #fff;
    padding: 8px 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    z-index: 2;
}
.kv-blog-category {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}
.kv-blog-body {
    padding: 28px;
}
.kv-blog-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kv-text);
    line-height: 1.4;
    margin-bottom: 12px;
    transition: color 0.3s;
}
.kv-blog-card:hover .kv-blog-title {
    color: var(--kv-teal);
}
.kv-blog-excerpt {
    font-size: 0.88rem;
    color: var(--kv-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}
.kv-blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kv-blog-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--kv-teal-light);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--kv-transition);
}
.kv-blog-read svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s;
}
.kv-blog-read:hover svg {
    transform: translateX(4px);
}

/* ---- KV Reviews ---- */
.kv-reviews {
    background: linear-gradient(180deg, var(--kv-navy-light) 0%, var(--kv-navy) 100%);
    overflow: hidden;
    position: relative;
}
.kv-reviews::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(13,148,136,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.kv-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
}
.kv-review-card {
    background: var(--kv-navy-card);
    border: 1px solid var(--kv-glass-border);
    border-radius: var(--kv-radius);
    padding: 32px;
    transition: var(--kv-transition);
    position: relative;
}
.kv-review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(13,148,136,0.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.kv-review-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.kv-review-stars svg {
    width: 18px;
    height: 18px;
    color: var(--kv-amber);
    fill: var(--kv-amber);
}
.kv-review-text {
    font-size: 0.95rem;
    color: var(--kv-text);
    line-height: 1.7;
    margin-bottom: 24px;
    font-style: italic;
    opacity: 0.9;
}
.kv-review-author {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--kv-glass-border);
    padding-top: 20px;
}
.kv-review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kv-teal), var(--kv-teal-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}
.kv-review-info {
    flex: 1;
}
.kv-review-name {
    font-weight: 700;
    color: var(--kv-text);
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.kv-review-meta {
    font-size: 0.8rem;
    color: var(--kv-text-dim);
}
.kv-review-google {
    position: absolute;
    top: 24px;
    right: 24px;
    opacity: 0.15;
}
.kv-review-google svg {
    width: 24px;
    height: 24px;
}

/* ---- KV Team (DEPRECATED - see section 12) ---- */

/* ---- KV CTA ---- */
.kv-cta {
    background: linear-gradient(135deg, var(--kv-teal), #065f56);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.kv-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.kv-cta::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.kv-cta-content {
    position: relative;
    z-index: 2;
}
.kv-cta-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 16px;
}
.kv-cta-text {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 36px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
.kv-cta-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---- KV Values Grid (Hakkımızda) ---- */
.kv-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.kv-value-card {
    background: var(--kv-navy-card);
    border: 1px solid var(--kv-glass-border);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.kv-value-card:hover {
    transform: translateY(-8px);
    border-color: rgba(13,148,136,0.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.kv-value-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(13,148,136,0.1);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kv-value-icon svg {
    width: 28px;
    height: 28px;
    color: var(--kv-teal-light);
}
.kv-value-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kv-text);
    margin-bottom: 10px;
}
.kv-value-card p {
    font-size: 0.9rem;
    color: var(--kv-text-muted);
    line-height: 1.7;
}

/* ---- KV Why Grid (Hakkımızda) ---- */
.kv-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.kv-why-card {
    background: var(--kv-navy-card);
    border: 1px solid var(--kv-glass-border);
    border-radius: 20px;
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.kv-why-card:hover {
    transform: translateY(-5px);
    border-color: rgba(13,148,136,0.2);
}
.kv-why-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 4rem;
    font-weight: 800;
    color: rgba(13,148,136,0.08);
    position: absolute;
    top: -10px;
    right: 16px;
    line-height: 1;
}
.kv-why-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kv-text);
    margin-bottom: 12px;
    position: relative;
}
.kv-why-card p {
    font-size: 0.9rem;
    color: var(--kv-text-muted);
    line-height: 1.7;
    position: relative;
}

/* ---- KV Mission Grid (Hakkımızda) ---- */
.kv-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.kv-mission-card {
    background: var(--kv-navy-card);
    border: 1px solid var(--kv-glass-border);
    border-radius: 20px;
    padding: 48px 40px;
    text-align: center;
}
.kv-mission-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    background: rgba(13,148,136,0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kv-mission-icon svg {
    width: 32px;
    height: 32px;
    color: var(--kv-teal-light);
}
.kv-mission-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kv-text);
    margin-bottom: 16px;
}
.kv-mission-card p {
    font-size: 0.95rem;
    color: var(--kv-text-muted);
    line-height: 1.8;
}

/* ---- KV Responsive ---- */
@media (max-width: 1024px) {
    .kv-about { grid-template-columns: 1fr; gap: 50px; }
    .kv-about-visual { max-width: 500px; margin: 0 auto; }
    .kv-services-grid { grid-template-columns: repeat(2, 1fr); }
    .kv-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .kv-reviews-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
    .kv-stats-inner { grid-template-columns: repeat(2, 1fr); }
    .kv-banner { grid-template-columns: 1fr; }
    .kv-banner-visual { min-height: 300px; }
    .kv-values-grid { grid-template-columns: repeat(2, 1fr); }
    .kv-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .kv-section { padding: 70px 0; }
    .kv-services-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .kv-blog-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .kv-about-features { grid-template-columns: 1fr; }
    .kv-stats-inner { grid-template-columns: 1fr 1fr; }
    .kv-banner-content { padding: 40px 28px; }
    .kv-cta { padding: 70px 0; }
    .kv-values-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .kv-why-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
    .kv-mission-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .kv-stats-inner { grid-template-columns: 1fr; }
    .kv-stat-item { padding: 24px 20px; }
    .kv-about-badge-float { bottom: -10px; right: 10px; padding: 16px 20px; }
    .kv-about-badge-float .num { font-size: 1.8rem; }
}

/* ============================================================
   PAGE HERO — Gradient + Pattern hero (hizmetlerimiz tarzı)
   ============================================================ */
.page-hero{position:relative;min-height:420px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,#0a1a2a 0%,#0f2940 40%,#0D9488 100%);padding:80px 0 60px;}
.page-hero::before{content:'';position:absolute;inset:0;}
.page-hero__bg{position:absolute;inset:0;opacity:.15;background-size:cover;background-position:center;}
.page-hero .container{position:relative;z-index:2;max-width:800px;text-align:center;}
.page-hero__badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:100px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);color:#5eead4;font-size:.78rem;font-weight:600;margin-bottom:20px;letter-spacing:.3px;}
.page-hero__badge svg{width:16px;height:16px;}
.page-hero__title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2rem,5vw,3rem);font-weight:800;color:#fff;margin-bottom:16px;line-height:1.15;}
.page-hero__title span{background:linear-gradient(135deg,#5eead4,#2dd4bf);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.page-hero__desc{font-size:1.05rem;color:rgba(255,255,255,.75);line-height:1.7;max-width:600px;margin:0 auto 28px;}
.page-hero__breadcrumb{margin-top:8px;}
.page-hero__breadcrumb a,.page-hero__breadcrumb span{color:rgba(255,255,255,.5);font-size:.82rem;text-decoration:none;}
.page-hero__breadcrumb a:hover{color:#5eead4;}
.page-hero__breadcrumb .sep{margin:0 8px;opacity:.4;}
@media(max-width:768px){.page-hero{min-height:360px;padding:60px 0 40px;}.page-hero__title{font-size:1.8rem;}}

/* ============================================================
   HERO STYLES (Ana sayfa slider + HUD)
   ============================================================ */
:root {
    --wn-cyan: #06b6d4;
    --wn-cyan-glow: rgba(6, 182, 212, 0.5);
    --wn-btn-green: #059669;
    --font-main: 'Outfit', sans-serif;
    --glass-bg: rgba(15, 23, 42, 0.35);
    --glass-border: rgba(255, 255, 255, 0.1);
}
.wn-hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #020617;
    color: #fff;
    font-family: var(--font-main);
    box-sizing: border-box;
    margin-top: -100px;
    padding-top: 100px;
}
.wn-hero * { box-sizing: border-box; }
.wn-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.wn-slides { position: absolute; inset: 0; }
.wn-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
    display: flex; align-items: center; padding: 0 5%;
}
.wn-slide.active { opacity: 1; visibility: visible; z-index: 2; }
.wn-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.wn-slide-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; }
.wn-slide-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(2,6,23,0.98) 0%, rgba(2,6,23,0.85) 50%, rgba(2,6,23,0.6) 100%);
}
.wn-grid-overlay {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background-size: 80px 80px;
    background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    z-index: 1; pointer-events: none;
}
.wn-content { position: relative; z-index: 10; max-width: 1400px; margin: 0 auto; width: 100%; }
.wn-left { max-width: 650px; }
.wn-title {
    font-size: clamp(3.5rem, 5vw, 5rem); font-weight: 800; line-height: 1.1;
    margin-bottom: 20px; letter-spacing: -1.5px;
    background: linear-gradient(135deg, #fff 40%, #94a3b8 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.wn-subtitle { font-size: 1.25rem; color: #cbd5e1; margin-bottom: 40px; font-weight: 300; }
.wn-actions { display: flex; gap: 15px; margin-bottom: 60px; }
.wn-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px; border-radius: 50px; font-weight: 600; font-size: 15px;
    text-decoration: none; transition: all 0.4s;
}
.wn-btn-primary { background: var(--wn-btn-green); border: 1px solid rgba(16, 185, 129, 0.4); color: #fff; }
.wn-btn-outline { background: var(--glass-bg); border: 1px solid var(--glass-border); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wn-stats { display: flex; gap: 40px; }
.wn-stat-box { position: relative; }
.wn-stat-num { font-size: 40px; font-weight: 700; color: var(--wn-cyan); margin-bottom: 5px; line-height: 1; }
.wn-stat-label { font-size: 14px; color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
.hud-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.hud-card {
    position: absolute; background: var(--glass-bg);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); padding: 16px 24px;
    border-radius: 16px; display: flex; flex-direction: column; gap: 8px;
}
.hud-card::after {
    content: ''; position: absolute; width: 100px; height: 1px;
    background: linear-gradient(90deg, var(--glass-border), transparent);
}
.hud-1::after { right: -100px; top: 50%; }
.hud-2::after { right: -80px; bottom: 0; transform: rotate(30deg); transform-origin: left; }
.hud-3::after { left: -100px; top: 50%; background: linear-gradient(-90deg, var(--glass-border), transparent); }
.hud-4::after { left: -80px; top: 0; transform: rotate(-30deg); transform-origin: right; background: linear-gradient(-90deg, var(--glass-border), transparent); }
.hud-1 { top: 55%; left: 45%; }
.hud-2 { top: 85%; left: 35%; }
.hud-3 { top: 60%; right: 10%; }
.hud-4 { top: 85%; right: 15%; }
.hud-label { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }
.hud-value-row { display: flex; align-items: center; gap: 12px; }
.hud-value { font-size: 20px; font-weight: 700; color: #fff; }
.ekg-line { width: 40px; height: 15px; }
.ekg-line path {
    stroke: var(--wn-cyan); stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: drawEkg 2.5s infinite linear;
}
@keyframes drawEkg { 0% { stroke-dashoffset: 100; } 40% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.status-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: blink 1s infinite alternate; }
@keyframes blink { from { opacity: 1; } to { opacity: 1; } }
.wn-bottom {
    position: absolute; bottom: 40px; left: 0; width: 100%; z-index: 30;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.wn-scroll { text-align: center; font-size: 11px; letter-spacing: 3px; color: #94a3b8; text-transform: uppercase; font-weight: 500; text-decoration: none; display: block; cursor: pointer; }
.wn-mouse { width: 22px; height: 36px; border: 2px solid rgba(255,255,255,0.3); border-radius: 12px; margin: 10px auto 0; position: relative; }
.wn-wheel { width: 4px; height: 6px; background: var(--wn-cyan); border-radius: 2px; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); animation: wnScroll 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes wnScroll { 0% { top: 5px; opacity: 1; transform: translateX(-50%) scaleY(1); } 50% { top: 15px; opacity: 1; transform: translateX(-50%) scaleY(1.5); } 100% { top: 20px; opacity: 0; transform: translateX(-50%) scaleY(1); } }
.wn-controls { display: flex; align-items: center; gap: 24px; }
.wn-ctrl-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-border); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(5px); }
.wn-dots { display: flex; gap: 12px; }
.wn-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.5s ease; }
.wn-dot.active { width: 32px; border-radius: 4px; background: var(--wn-btn-green); }

@media (max-width: 768px) {
    .wn-hero { height: auto; min-height: 100vh; padding-top: 80px; }
    .wn-slide { padding: 0 20px; flex-direction: column; justify-content: center; }
    .wn-title { font-size: 2.2rem; }
    .wn-stats { flex-direction: column; gap: 16px; }
    .wn-actions { flex-direction: column; }
    .hud-layer { display: none; }
}

/* ============================================================
   DETAIL PAGE (Ekip Üyesi Detayı)
   ============================================================ */
.detail-hero{
  position:relative;min-height:380px;display:flex;align-items:flex-end;
  padding-bottom:48px;overflow:hidden;
  background:url('https://images.unsplash.com/photo-1628009368231-7bb7cfcb0def?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
  background-color:#0a1628;
}
.detail-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0.75) 0%,rgba(2,6,23,0.92) 100%);z-index:1;}
.detail-hero .container{position:relative;z-index:2;}
.detail-grid{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:start;padding:60px 0 80px;}
.detail-card{
  background:var(--kv-navy-card,#FFFFFF);border:1px solid var(--kv-navy-border,#E2E8F0);
  border-radius:24px;overflow:hidden;position:sticky;top:100px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.detail-card__photo{aspect-ratio:1;background:#0f172a;overflow:hidden;}
.detail-card__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);}
.detail-card:hover .detail-card__photo img{transform:scale(1.05);}
.detail-card__photo-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--kv-teal),var(--kv-teal-light));display:flex;align-items:center;justify-content:center;}
.detail-card__info{padding:32px;}
.detail-card__name{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.5rem;font-weight:700;color:var(--kv-text);margin-bottom:4px;}
.detail-card__role{color:var(--kv-teal-light,#14b8a6);font-weight:600;margin-bottom:20px;}
.detail-card__meta{display:flex;flex-direction:column;gap:14px;margin-bottom:20px;}
.detail-meta{display:flex;align-items:center;gap:12px;}
.detail-meta__icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.detail-meta__icon--teal{background:rgba(13,148,136,0.1);}
.detail-meta__icon--amber{background:rgba(245,158,11,0.1);}
.detail-meta__icon--indigo{background:rgba(99,102,241,0.1);}
.detail-meta__label{font-size:0.72rem;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.detail-meta__value{color:var(--kv-text);font-weight:500;font-size:0.95rem;}
.detail-social{display:flex;gap:10px;padding-top:20px;border-top:1px solid var(--kv-navy-border,#E2E8F0);}
.detail-social a{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:18px;transition:all 0.3s;
  border:1px solid var(--kv-navy-border,#E2E8F0);background:rgba(255,255,255,0.8);
}
.detail-social a:hover{transform:translateY(-3px);border-color:transparent;background:rgba(13,148,136,0.08);}
.detail-social i{font-size:18px;}
.detail-content h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.6rem;font-weight:700;color:var(--kv-text);margin-bottom:8px;}
.detail-content__line{width:50px;height:3px;background:var(--kv-teal-light,#14b8a6);border-radius:2px;margin-bottom:28px;}
.detail-content p{color:var(--kv-text-muted);line-height:1.85;margin-bottom:18px;font-size:1.02rem;}
.detail-services{margin-top:40px;}
.detail-services h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.2rem;font-weight:700;color:var(--kv-text);margin-bottom:20px;}
.detail-svc{
  display:flex;align-items:center;gap:16px;padding:20px;
  background:var(--kv-navy-card,#FFFFFF);border:1px solid var(--kv-navy-border,#E2E8F0);
  border-radius:16px;transition:all 0.3s;margin-bottom:12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.detail-svc:hover{border-color:rgba(13,148,136,0.2);background:rgba(13,148,136,0.03);}
.detail-svc__icon{width:44px;height:44px;background:rgba(13,148,136,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.detail-svc__icon svg{width:20px;height:20px;color:var(--kv-teal-light);}
.detail-svc__name{font-weight:600;color:var(--kv-text);margin-bottom:2px;}
.detail-svc__desc{color:var(--kv-text-muted);font-size:0.88rem;line-height:1.5;}

/* Team Slider */
.team-slider-wrap{position:relative;overflow:hidden;padding:0 0 20px;}
.team-slider{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 4px 20px;
}
.team-slider::-webkit-scrollbar{display:none;}
.team-slider .team-card{min-width:260px;max-width:300px;scroll-snap-align:start;flex-shrink:0;}
.team-slider .team-card__img{aspect-ratio:3/2;}
.slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border-radius:50%;background:var(--kv-navy-card,#FFFFFF);
  border:1px solid var(--kv-navy-border,#E2E8F0);color:var(--kv-text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:5;transition:all 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.slider-btn:hover{background:var(--kv-teal);border-color:var(--kv-teal);}
.slider-btn--prev{left:0;}
.slider-btn--next{right:0;}

@media(max-width:1024px){.detail-grid{grid-template-columns:320px 1fr;gap:32px;}}
@media(max-width:768px){
  .detail-hero{min-height:320px;padding-bottom:40px;}
  .detail-grid{grid-template-columns:1fr;gap:32px;padding:40px 0 60px;}
  .detail-card{position:static;}
  .detail-card__photo{aspect-ratio:1/1;}
  .team-slider .team-card{min-width:260px;}
}

/* ---------- Services Page ---------- */
.page-hero--image{
  background-size:cover;background-position:center;
  position:relative;min-height:420px;
  display:flex;align-items:center;justify-content:center;
}
.page-hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(10,15,26,0.88),rgba(10,15,26,0.72));
}
.page-hero--image .container{position:relative;z-index:2;}

/* ============================================================
   KV TEAM CARDS (Ana Sayfa & Hakkımızda)
   ============================================================ */
.kv-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.kv-team-card{
  background:var(--kv-navy-card,#FFFFFF);
  border:1px solid var(--kv-navy-border,#E2E8F0);
  border-radius:20px;
  overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  text-decoration:none;
  display:block;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.kv-team-card:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 40px rgba(0,0,0,0.1);
  border-color:rgba(13,148,136,0.2);
}
.kv-team-img{position:relative;aspect-ratio:1/1;overflow:hidden;}
.kv-team-img img{width:100%;height:100%;object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.kv-team-card:hover .kv-team-img img{transform:scale(1.08);}
.kv-team-social{
  position:absolute;bottom:12px;right:12px;
  display:flex;gap:8px;opacity:0;
  transform:translateY(10px);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.kv-team-card:hover .kv-team-social{
  opacity:1;transform:translateY(0);
}
.kv-team-social span{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:transform 0.3s;
}
.kv-team-social span:hover{transform:scale(1.1);}
.kv-team-social span svg{width:16px;height:16px;}
.kv-team-body{padding:20px;text-align:center;}
.kv-team-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.05rem;font-weight:700;
  color:var(--kv-text,#1E293B);
  margin-bottom:4px;
}
.kv-team-role{
  font-size:0.82rem;font-weight:600;
  color:var(--kv-teal,#0D9488);
  margin-bottom:8px;
}
.kv-team-bio{
  font-size:0.85rem;color:var(--kv-text-muted,#64748B);
  line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:1024px){.kv-team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.kv-team-grid{grid-template-columns:1fr;max-width:360px;margin:0 auto;}}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.service-card{
  background:var(--kv-navy-card,#FFFFFF);
  border:1px solid var(--kv-navy-border,#E2E8F0);
  border-radius:20px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  text-decoration:none;
  position:relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.service-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--kv-teal,#0D9488),var(--kv-teal-light,#14b8a6));
  opacity:0;transition:opacity 0.3s;z-index:1;
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 40px rgba(0,0,0,0.1),0 0 0 1px rgba(13,148,136,0.1);
  border-color:rgba(13,148,136,0.2);
}
.service-card:hover::before{opacity:1;}

.service-card__image{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;
  background:linear-gradient(135deg,rgba(13,148,136,0.08),rgba(13,148,136,0.02));
}
.service-card__image img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.service-card:hover .service-card__image img{transform:scale(1.06);}
.service-card__image::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(10,15,26,0.4) 100%);
  pointer-events:none;
}
.service-card__icon-placeholder{
  font-size:56px;color:var(--kv-teal-light,#14b8a6);opacity:0.3;
  transition:all 0.4s;
}
.service-card:hover .service-card__icon-placeholder{
  opacity:0.6;transform:scale(1.1);
}
.service-card__body{
  padding:24px;flex:1;display:flex;flex-direction:column;
}
.service-card__badge{
  display:inline-flex;align-self:flex-start;
  padding:4px 12px;border-radius:100px;font-size:0.7rem;font-weight:600;
  background:rgba(13,148,136,0.1);color:var(--kv-teal-light,#14b8a6);
  margin-bottom:12px;letter-spacing:0.3px;
}
.service-card__name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.1rem;font-weight:700;color:var(--kv-text);
  margin-bottom:8px;line-height:1.3;
  transition:color 0.2s;
}
.service-card:hover .service-card__name{color:var(--kv-teal);}
.service-card__desc{
  color:var(--kv-text-muted);font-size:0.88rem;line-height:1.7;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.service-card__features{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;
}
.service-card__feature{
  padding:4px 10px;border-radius:8px;
  background:rgba(13,148,136,0.04);border:1px solid rgba(13,148,136,0.08);
  font-size:0.72rem;color:var(--kv-text-muted);font-weight:500;
  transition:all 0.2s;
}
.service-card:hover .service-card__feature{
  background:rgba(13,148,136,0.08);border-color:rgba(13,148,136,0.15);color:var(--kv-text);
}
.service-card__link{
  display:inline-flex;align-self:flex-start;align-items:center;gap:6px;
  margin-top:16px;padding:8px 16px;border-radius:100px;
  background:rgba(13,148,136,0.08);border:1px solid rgba(13,148,136,0.15);
  color:var(--kv-teal-light,#14b8a6);
  font-size:0.82rem;font-weight:600;text-decoration:none;
  transition:all 0.3s;
}
.service-card__link svg{
  width:14px;height:14px;transition:transform 0.3s;
}
.service-card:hover .service-card__link{
  background:var(--kv-teal,#0D9488);border-color:var(--kv-teal);color:#fff;
  box-shadow:0 4px 15px rgba(13,148,136,0.3);
}
.service-card:hover .service-card__link svg{transform:translateX(3px);}

@media(max-width:1024px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.services-grid{grid-template-columns:1fr;}}

/* ---------- Service Detail ---------- */
.service-detail{display:grid;grid-template-columns:1fr 340px;gap:40px;}
.service-detail__main{min-width:0;}
.service-detail__image{
  border-radius:var(--kv-radius,16px);overflow:hidden;margin-bottom:32px;
  aspect-ratio:16/9;border:1px solid var(--kv-navy-border,#E2E8F0);
}
.service-detail__image img{width:100%;height:100%;object-fit:cover;}
.service-detail__content{margin-bottom:40px;}
.service-detail__content h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.6rem;font-weight:800;color:var(--kv-text);margin-bottom:16px;
}
.service-detail__content p{
  color:var(--kv-text-muted);font-size:1.05rem;line-height:1.9;margin-bottom:16px;
}

.service-detail__section{margin-bottom:40px;}
.service-detail__section h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.6rem;font-weight:800;color:var(--kv-text);margin-bottom:16px;
}
.service-detail__section h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.25rem;font-weight:700;color:var(--kv-text);margin-bottom:16px;
}
.service-detail__section p{
  color:var(--kv-text-muted);font-size:1.05rem;line-height:1.9;margin-bottom:16px;
}

/* Rich Text Content */
.service-detail__content h1 {
  font-size: 1.8rem; /* Smaller font size for H1 */
  line-height: 1.3;
}
.service-detail__content h1,.service-detail__content h2,.service-detail__content h3,.service-detail__content h4{
  font-family:'Plus Jakarta Sans',sans-serif;color:var(--kv-text);margin-top:24px;margin-bottom:12px;
}
.service-detail__content ul,.service-detail__content ol{color:var(--kv-text-muted);padding-left:24px;margin-bottom:16px;}
.service-detail__content li{margin-bottom:8px;line-height:1.7;color:var(--kv-text-muted);}
.service-detail__content img{border-radius:12px;max-width:100%;margin:16px 0;}
.service-detail__content a{color:var(--kv-teal);font-weight:600;}
.service-detail__content strong{color:var(--kv-text);}

/* Feature List */
.service-detail__feature-list{list-style:none;padding:0;margin:0;}
.service-detail__feature-list li{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:10px;margin-bottom:4px;
  background:rgba(13,148,136,0.04);
  color:var(--kv-text);font-size:0.95rem;font-weight:500;
  border:1px solid rgba(13,148,136,0.08);
  transition:all 0.2s;
}
.service-detail__feature-list li:hover{
  background:rgba(13,148,136,0.08);border-color:rgba(13,148,136,0.15);
}
.service-detail__feature-list li svg{color:var(--kv-teal);flex-shrink:0;}

/* Doctors */
.service-doctors{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:768px){.service-doctors{grid-template-columns:repeat(2,1fr);}}
.service-doctor{
  display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:14px;
  background:var(--kv-navy-card,#FFFFFF);
  border:1px solid var(--kv-navy-border,#E2E8F0);
  text-decoration:none;transition:all 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.service-doctor:hover{
  border-color:rgba(13,148,136,0.25);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.service-doctor__img{
  width:60px;height:60px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:2px solid var(--kv-teal,#0D9488);
}
.service-doctor__img img{width:100%;height:100%;object-fit:cover;}
.service-doctor__info{min-width:0;}
.service-doctor__info h4{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:0.95rem;font-weight:700;color:var(--kv-text);margin-bottom:2px;
}
.service-doctor__role{
  display:block;color:var(--kv-teal-light,#14b8a6);font-size:0.82rem;font-weight:600;
}
.service-doctor__exp{
  display:inline-block;margin-top:4px;padding:2px 10px;border-radius:8px;
  background:rgba(245,158,11,0.12);color:#fbbf24;font-size:0.72rem;font-weight:600;
}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:10px;}
.faq-item{
  border:1px solid var(--kv-navy-border,#E2E8F0);border-radius:14px;
  background:var(--kv-navy-card,#FFFFFF);overflow:hidden;
  transition:all 0.3s;
}
.faq-item[open]{border-color:rgba(13,148,136,0.25);box-shadow:0 4px 20px rgba(0,0,0,0.06);}
.faq-item__question{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;cursor:pointer;list-style:none;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:0.95rem;font-weight:600;color:var(--kv-text);
  transition:all 0.2s;
}
.faq-item__question::-webkit-details-marker{display:none;}
.faq-item__question:hover{color:var(--kv-teal);background:rgba(13,148,136,0.03);}
.faq-item__icon{
  flex-shrink:0;transition:transform 0.3s;color:var(--kv-text-dim);
}
.faq-item[open] .faq-item__icon{transform:rotate(180deg);color:var(--kv-teal);}
.faq-item__answer{
  padding:0 20px 18px;color:var(--kv-text-muted);font-size:0.92rem;line-height:1.8;
}
.faq-item__answer p{margin:0;}

/* Sidebar */
.service-detail__sidebar{display:flex;flex-direction:column;gap:20px;}
.service-sidebar-card{
  background:var(--kv-navy-card,#FFFFFF);
  border:1px solid var(--kv-navy-border,#E2E8F0);
  border-radius:var(--kv-radius,16px);
  padding:24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.service-sidebar-card--accent{
  border-color:rgba(13,148,136,0.25);
  background:linear-gradient(135deg,rgba(13,148,136,0.12),rgba(13,148,136,0.04));
}
.service-sidebar-card__icon{
  width:48px;height:48px;margin-bottom:16px;
  background:rgba(13,148,136,0.15);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--kv-teal-light,#14b8a6);
}
.service-sidebar-card h4{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1rem;font-weight:700;color:var(--kv-text);margin-bottom:8px;
}
.service-sidebar-card p{
  color:var(--kv-text-muted);font-size:0.88rem;line-height:1.6;margin-bottom:16px;
}
.service-sidebar-links{list-style:none;padding:0;margin:0;}
.service-sidebar-links li{margin:0;}
.service-sidebar-links a{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--kv-navy-border,#E2E8F0);
  color:var(--kv-text);text-decoration:none;font-size:0.9rem;font-weight:500;
  transition:all 0.2s;
}
.service-sidebar-links a:hover{color:var(--kv-teal);padding-left:4px;}
.service-sidebar-links a i{
  width:20px;text-align:center;color:var(--kv-teal);font-size:0.85rem;
}
.kv-btn--sm{padding:8px 20px;font-size:0.85rem;}

@media(max-width:1024px){.service-detail{grid-template-columns:1fr;}}

/* ============================================================
   BLOG GRID & CARDS (Sağlık Rehberi)
   ============================================================ */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.blog-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line-light);
  text-decoration:none;
  display:flex;flex-direction:column;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,0,0,0.1);
  border-color:transparent;
}
.blog-card__image{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;
}
.blog-card__image img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.blog-card:hover .blog-card__image img{transform:scale(1.08);}
.blog-card__category{
  position:absolute;top:14px;left:14px;
  padding:5px 14px;border-radius:100px;
  background:var(--primary);color:#fff;
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:0.3px;
}
.blog-card__body{
  padding:24px;flex:1;display:flex;flex-direction:column;
}
.blog-card__title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.1rem;font-weight:700;
  color:var(--ink);margin-bottom:8px;line-height:1.35;
  transition:color 0.2s;
}
.blog-card:hover .blog-card__title{color:var(--primary);}
.blog-card__excerpt{
  font-size:var(--fs-sm);color:var(--muted);
  line-height:1.65;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:16px;
}
.blog-card__meta{
  display:flex;align-items:center;gap:16px;
  margin-bottom:14px;
}
.blog-card__date,.blog-card__read{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);color:var(--muted-light);font-weight:500;
}
.blog-card__date svg,.blog-card__read svg{color:var(--primary);opacity:0.6;}
.blog-card__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-sm);font-weight:600;color:var(--primary);
  text-transform:uppercase;letter-spacing:0.3px;
  transition:gap 0.3s;
}
.blog-card:hover .blog-card__link{gap:10px;}
.blog-card__link svg{transition:transform 0.3s;}
.blog-card:hover .blog-card__link svg{transform:translateX(3px);}

@media(max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;}}

/* ============================================================
   BLOG DETAY İÇERİK
   ============================================================ */
.page-hero__badge{
  display:inline-block;padding:6px 16px;border-radius:100px;
  background:var(--primary);color:#fff;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:0.3px;
  margin-bottom:16px;
}
.page-hero__meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:var(--fs-sm);color:rgba(255,255,255,0.8);
}
.blog-content{
  font-size:1.05rem;line-height:1.9;color:var(--ink-soft);
}
.blog-content h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.4rem;font-weight:700;color:var(--ink);
  margin:36px 0 16px;
}
.blog-content p{margin-bottom:16px;}
.blog-content ul,.blog-content ol{padding-left:24px;margin-bottom:16px;}
.blog-content li{margin-bottom:8px;line-height:1.7;}
.blog-content strong{color:var(--ink);}

.blog-featured-img{
  margin-bottom:40px;border-radius:20px;overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
}
.blog-featured-img img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/9;object-fit:cover;
}

.blog-others{margin-top:64px;padding-top:48px;border-top:1px solid var(--line);}
.blog-others__title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.4rem;font-weight:700;color:var(--ink);margin-bottom:28px;
}
.blog-grid--3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:1024px){.blog-grid--3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.blog-grid--3{grid-template-columns:1fr;}}

/* --- Added for Hizmet Detay Hero Fix --- */
.detail-hero__title { font-size: 3rem; font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.detail-hero__desc { font-size: 1.15rem; color: rgba(255,255,255,0.9); max-width: 800px; line-height: 1.6; margin-bottom: 24px; }
.detail-hero__icon { font-size: 2rem; color: var(--kv-teal, #0D9488); margin-bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 16px; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); }
.detail-hero .breadcrumb, .detail-hero .breadcrumb a, .detail-hero .breadcrumb span { color: rgba(255,255,255,0.6); }
.detail-hero .breadcrumb a:hover { color: #ffffff; }

/* --- Mobile Fixes --- */
@media (max-width: 991px) {
  .nav__toggle { display: flex !important; }
  .nav__menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--white, #fff); flex-direction: column; justify-content: center; align-items: center; gap: 2rem; transform: translateX(100%); transition: transform 0.4s ease; z-index: 999; display: flex !important; }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__cta { display: none !important; }
  .detail-hero__title { font-size: clamp(2rem, 6vw, 3rem) !important; }
  .detail-hero__desc { font-size: 1rem !important; }
}

/* Mobile Only Nav Elements */
.mobile-only-nav { display: none !important; }
@media (max-width: 991px) {
  .mobile-only-nav { display: flex !important; }
}

@media(max-width:768px) {
  .breadcrumb-hide-mobile { display: none !important; }
  .page-hero__title { font-size: 1.6rem !important; line-height: 1.3 !important; text-wrap: balance; }
}
.page-hero__title { text-wrap: balance; }


/* =========================================
   COMPREHENSIVE MOBILE OPTIMIZATION
   ========================================= */
@media (max-width: 768px) {
    /* Hero Section */
    .wn-hero { min-height: 100svh; }
    .wn-slide { padding-top: 80px; }
    .wn-title { font-size: 2.2rem !important; text-wrap: balance; text-align: center; line-height: 1.25 !important; }
    .wn-subtitle { font-size: 1.1rem !important; text-align: center; margin-bottom: 25px !important; }
    .wn-actions { flex-direction: column; width: 100%; gap: 12px !important; margin-bottom: 30px !important; }
    .wn-btn { width: 100%; justify-content: center; }
    .wn-stats { flex-direction: row !important; flex-wrap: nowrap; justify-content: space-between; gap: 10px !important; margin-bottom: 60px; }
    .wn-stat-box { text-align: center; flex: 1 1 33%; }
    .wn-stat-num { font-size: 1.5rem !important; }
    .wn-stat-label { font-size: 0.75rem !important; }
    .wn-bottom { bottom: 15px !important; z-index: 50; }
    .wn-scroll { display: none !important; }
    
    /* Sections & Typography */
    .kv-section { padding: 60px 20px !important; }
    .kv-section-header { text-align: center; margin-bottom: 30px !important; }
    .kv-section-title { font-size: 2rem !important; text-wrap: balance; line-height: 1.2 !important; }
    .kv-section-desc { font-size: 1rem !important; text-align: center; margin: 0 auto !important; }
    
    /* Grids to Single Column */
    .kv-services-grid, .kv-team-grid, .blog-grid, .services-grid { 
        grid-template-columns: 1fr !important; 
        max-width: 400px; 
        margin: 0 auto; 
        gap: 20px !important; 
    }
    
    /* Stats Bar */
    .kv-stats-bar { padding: 40px 20px !important; }
    .kv-stats-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
    @media (max-width: 480px) {
        .kv-stats-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
        .kv-stat-num { font-size: 1.8rem !important; }
        .kv-stat-label { font-size: 0.8rem !important; }
    }
    
    /* About Section */
    .kv-about-features { grid-template-columns: 1fr !important; gap: 15px !important; }
    .kv-about-title { font-size: 2rem !important; text-align: center; text-wrap: balance; }
    .kv-about-text { text-align: center; }
    .kv-about-content .kv-badge { margin: 0 auto 15px auto !important; display: table; }
    .kv-about-content .kv-btn { width: 100%; justify-content: center; margin-top: 10px; }
    .kv-about-visual { margin-bottom: 30px; }
}

/* Erişilebilirlik: "İçeriğe atla" bağlantısı yalnızca klavye odağında görünür */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:10000;}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 16px;background:#0D9488;color:#fff;border-radius:8px;font-weight:600;}

/* Mobil hero düzeltmesi: içerik uzun olduğunda başlığın menünün altına taşmasını önler */
@media (max-width: 768px) {
    .wn-hero { height: auto !important; min-height: 100svh; padding-top: 0 !important; }
    .wn-scene { position: relative !important; inset: auto; height: auto !important; min-height: inherit; }
    .wn-slides { position: relative !important; inset: auto; display: grid; min-height: inherit; }
    .wn-slide { position: relative !important; inset: auto; grid-area: 1 / 1; min-height: inherit;
                justify-content: center; padding: 190px 20px 115px !important; }
    .wn-content { width: 100%; }
    .wn-left { margin: 0 auto; }
    .wn-stats { margin-bottom: 0 !important; }
    .wn-bottom { bottom: 24px !important; }
    /* Görsele gömülü yazıları menü bölgesinde örten üst gölge */
    .wn-slide-bg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 290px; z-index: 1; pointer-events: none;
        background: linear-gradient(to bottom, rgba(2,6,23,0.97) 0%, rgba(2,6,23,0.95) 55%, rgba(2,6,23,0) 100%); }
}
@media (max-width: 400px) {
    .wn-title { font-size: 2rem !important; }
    .wn-stat-label { font-size: 0.66rem !important; letter-spacing: 0.5px !important; white-space: nowrap; }
}