/* =========================================================
   Küçükali Yapı İnşaat - Premium Tasarım Sistemi v2
   ========================================================= */

/* -------- 1. Tasarım Tokenları -------- */
:root {
  /* Renkler - daha rafine palet */
  --c-ink:            #0A0F1C;   /* en koyu metin, neredeyse siyah */
  --c-ink-2:          #1E293B;   /* başlık */
  --c-text:           #334155;   /* gövde */
  --c-muted:          #64748B;   /* ikincil */
  --c-subtle:         #94A3B8;   /* tertiery */
  --c-line:           #E2E8F0;   /* ayraç */
  --c-line-2:         #F1F5F9;   /* çok hafif ayraç */
  --c-bg:             #FFFFFF;
  --c-bg-2:           #FAFBFC;   /* bölüm vurgu */
  --c-bg-3:           #F5F7FA;
  --c-bg-dark:        #0A0F1C;   /* footer için */

  /* Marka */
  --c-brand:          #1D4ED8;   /* mavi, biraz daha canlı */
  --c-brand-2:        #1E40AF;
  --c-brand-deep:     #172554;
  --c-brand-light:    #3B82F6;
  --c-brand-glow:     #60A5FA;
  --c-cyan:           #22D3EE;
  --c-gold:           #F59E0B;   /* vurgu için sıcak ton (sadece çok küçük yerlerde) */

  /* Tipografi */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-display: "Manrope", "Inter", sans-serif;

  /* Tipografi ölçeği — daha cesur */
  --t-xs:   .75rem;     /* 12 */
  --t-sm:   .875rem;    /* 14 */
  --t-base: 1rem;       /* 16 */
  --t-md:   1.125rem;   /* 18 */
  --t-lg:   1.375rem;   /* 22 */
  --t-xl:   1.75rem;    /* 28 */
  --t-2xl:  2.25rem;    /* 36 */
  --t-3xl:  3rem;       /* 48 */
  --t-4xl:  3.75rem;    /* 60 */
  --t-5xl:  4.5rem;     /* 72 */

  /* Spacing */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
  --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem;

  /* Layout */
  --w-container: 1240px;
  --w-narrow:    900px;
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 9999px;

  /* Gölgeler — daha rafine */
  --sh-xs: 0 1px 2px rgba(10,15,28,.04);
  --sh-sm: 0 2px 4px rgba(10,15,28,.06), 0 1px 2px rgba(10,15,28,.04);
  --sh:    0 4px 12px rgba(10,15,28,.08), 0 2px 4px rgba(10,15,28,.04);
  --sh-md: 0 12px 32px rgba(10,15,28,.10), 0 4px 8px rgba(10,15,28,.05);
  --sh-lg: 0 24px 48px rgba(10,15,28,.14), 0 8px 16px rgba(10,15,28,.06);
  --sh-glow: 0 0 40px rgba(59,130,246,.35);

  /* Animation */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 150ms;
  --t-base-dur: 250ms;
  --t-slow: 450ms;
}

/* -------- 2. Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
body {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
button { font: inherit; cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }

/* -------- 3. Tipografi -------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  color: var(--c-ink);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
}
h1 { font-size: clamp(2.25rem, 5.5vw, var(--t-5xl)); }
h2 { font-size: clamp(1.875rem, 4vw, var(--t-3xl)); letter-spacing: -0.02em; }
h3 { font-size: var(--t-xl); letter-spacing: -0.01em; font-weight: 700; }
h4 { font-size: var(--t-md); font-weight: 700; }
p  { color: var(--c-text); }

.display-text {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 7vw, var(--t-5xl));
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--c-ink);
}

.lead {
  font-size: clamp(var(--t-md), 2vw, var(--t-lg));
  line-height: 1.55;
  color: var(--c-muted);
  font-weight: 400;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-brand);
  padding: .4rem .8rem;
  background: rgba(29, 78, 216, .08);
  border-radius: var(--r-full);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--c-brand);
  border-radius: 50%;
}

/* -------- 4. Layout -------- */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.section { padding: var(--s-20) 0; }
.section-lg { padding: var(--s-24) 0; }
.section-alt { background: var(--c-bg-2); }
.section-dark {
  background: var(--c-bg-dark);
  color: #cbd5e1;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .eyebrow { background: rgba(255,255,255,.08); color: var(--c-brand-glow); }

.section-head { max-width: 720px; margin-bottom: var(--s-12); }
.section-head.center { margin-inline: auto; text-align: center; }

/* -------- 5. Butonlar -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 1.75rem;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: var(--t-sm);
  border: 1.5px solid transparent;
  transition: all var(--t-base-dur) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  font-family: var(--f-sans);
}
.btn-lg { padding: 1.15rem 2.25rem; font-size: var(--t-base); }
.btn-primary {
  background: var(--c-ink);
  color: #fff;
  box-shadow: var(--sh);
}
.btn-primary:hover {
  background: var(--c-brand);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  color: #fff;
}
.btn-brand {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(29,78,216,.35);
}
.btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(29,78,216,.45);
  color: #fff;
}
.btn-ghost {
  background: #fff;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn-ghost:hover { border-color: var(--c-ink); transform: translateY(-2px); }
.btn-whatsapp {
  background: #25D366; color: #fff;
  box-shadow: 0 4px 14px rgba(37,211,102,.35);
}
.btn-whatsapp:hover { background: #1da851; color: #fff; transform: translateY(-2px); }
.btn .arrow {
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }

/* -------- 6. Header -------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-line-2);
  transition: box-shadow var(--t-base-dur) var(--ease);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) 0;
  gap: var(--s-6);
}
.nav__brand {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--c-ink);
  font-size: var(--t-md);
  letter-spacing: -0.015em;
}
.nav__brand img { width: 40px; height: 40px; border-radius: 8px; }
.nav__brand small {
  display: block;
  font-size: .65rem; font-weight: 500;
  letter-spacing: .14em; color: var(--c-muted);
  text-transform: uppercase;
  margin-top: 2px;
}
.nav__menu { display: none; gap: var(--s-2); align-items: center; }
.nav__menu a {
  font-size: var(--t-sm); font-weight: 500;
  color: var(--c-text);
  padding: .6rem .9rem;
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease);
}
.nav__menu a:hover, .nav__menu a[aria-current="page"] {
  color: var(--c-ink);
  background: var(--c-bg-3);
}
.nav__cta { display: none; }

.nav__toggle {
  width: 44px; height: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; display: block;
  width: 18px; height: 2px; background: var(--c-ink);
  border-radius: 1px; position: relative;
  transition: transform var(--t-fast) var(--ease);
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after  { position: absolute; top:  6px; }

.mobile-menu { display: none; border-top: 1px solid var(--c-line-2); padding: var(--s-4) 0 var(--s-6); }
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: var(--s-3) 0;
  color: var(--c-text); font-weight: 500;
  border-bottom: 1px solid var(--c-line-2);
}
.mobile-menu a:last-of-type { border-bottom: 0; }

/* -------- 7. HERO — Sinematik fotoğraf-arkaplan versiyon -------- */
.hero {
  position: relative;
  min-height: 92vh;
  padding: var(--s-20) 0 var(--s-16);
  background-color: var(--c-ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
/* Arka plan fotoğrafı katmanı */
.hero__bg {
  position: absolute; inset: 0;
  z-index: -3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05);
  animation: heroZoom 18s var(--ease-out) forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.15); }
  to   { transform: scale(1.02); }
}
/* Karartma + renk overlay'i */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background:
    linear-gradient(135deg, rgba(10,15,28,.92) 0%, rgba(23,37,84,.78) 45%, rgba(10,15,28,.5) 100%);
}
/* Renkli ışık efektleri */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 15% 100%, rgba(59,130,246,.35), transparent 50%),
    radial-gradient(ellipse at 85% 0%, rgba(34,211,238,.20), transparent 50%);
  pointer-events: none;
}
/* Hero metni beyaz */
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero .eyebrow {
  background: rgba(255,255,255,.12);
  color: #E0F2FE;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
}
.hero .eyebrow::before { background: var(--c-cyan); }
.hero__lead { color: rgba(255,255,255,.85); }
.hero__trust-item { color: rgba(255,255,255,.7); }
.hero__trust-item svg { color: var(--c-cyan); }
.hero__trust { border-top-color: rgba(255,255,255,.12); }

.hero__grid {
  display: grid;
  gap: var(--s-12);
  align-items: center;
}
.hero__content > * + * { margin-top: var(--s-6); }
.hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 6.5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--c-ink);
  font-weight: 800;
}
.hero__title .text-gradient {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 50%, var(--c-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__lead {
  font-size: clamp(var(--t-md), 1.9vw, var(--t-lg));
  color: var(--c-muted);
  line-height: 1.55;
  max-width: 56ch;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
}
.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
  padding-top: var(--s-6);
  margin-top: var(--s-8);
  border-top: 1px solid var(--c-line-2);
}
.hero__trust-item {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--t-sm); color: var(--c-muted);
}
.hero__trust-item svg { width: 18px; height: 18px; color: var(--c-brand); flex-shrink: 0; }

/* Hero glassmorphism kart - sağ alt köşede */
.hero__card {
  position: relative;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.hero__card h3 {
  font-size: var(--t-md);
  color: #fff;
  margin-bottom: var(--s-4);
  font-weight: 700;
}
.hero__card-list { display: grid; gap: var(--s-4); }
.hero__card-item {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  transition: all var(--t-base-dur) var(--ease);
}
.hero__card-item:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(34,211,238,.4);
  transform: translateX(4px);
}
.hero__card-item-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-cyan) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hero__card-item-icon svg { width: 22px; height: 22px; }
.hero__card-item strong { display: block; color: #fff; font-size: var(--t-sm); font-weight: 600; font-family: var(--f-display); }
.hero__card-item span { display: block; color: rgba(255,255,255,.7); font-size: var(--t-xs); margin-top: 2px; }

/* Floating badge - cam efekti */
.hero__badge {
  position: absolute;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
  z-index: 3;
  display: flex; align-items: center; gap: .65rem;
  animation: gentle-float 4s ease-in-out infinite;
}
.hero__badge svg { width: 32px; height: 32px; flex-shrink: 0; color: var(--c-cyan); }
.hero__badge strong { display: block; font-size: var(--t-sm); color: #fff; font-family: var(--f-display); }
.hero__badge span { display: block; font-size: var(--t-xs); color: rgba(255,255,255,.7); }
.hero__badge--1 { top: -10px; left: -10px; }
.hero__badge--2 { bottom: -10px; right: -10px; animation-delay: 2s; }
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Aşağı scroll indicator */
.hero__scroll {
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.6);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 500;
  z-index: 5;
}
.hero__scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
  animation: scrollLine 2s ease-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* -------- Hero altı showcase strip -------- */
.showcase {
  padding: var(--s-12) 0;
  background: var(--c-bg);
  position: relative;
}
.showcase__strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.showcase__tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ink);
  isolation: isolate;
  transition: transform var(--t-base-dur) var(--ease);
}
.showcase__tile:hover { transform: translateY(-6px); }
.showcase__tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,15,28,.85) 100%);
  z-index: 1;
}
.showcase__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--t-slow) var(--ease-out);
}
.showcase__tile:hover .showcase__img { transform: scale(1.08); }
.showcase__caption {
  position: absolute; inset: 0;
  z-index: 2;
  padding: var(--s-5);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}
.showcase__caption span {
  display: inline-block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-cyan);
  margin-bottom: var(--s-1);
}
.showcase__caption strong {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 700;
}

/* -------- 8. Trust Bar -------- */
.trust-bar {
  padding: var(--s-8) 0;
  border-top: 1px solid var(--c-line-2);
  border-bottom: 1px solid var(--c-line-2);
  background: var(--c-bg);
}
.trust-bar__label {
  text-align: center;
  font-size: var(--t-xs);
  color: var(--c-subtle);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  margin-bottom: var(--s-5);
}
.trust-bar__items {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-8) var(--s-10);
}
.trust-bar__item {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-subtle);
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
  opacity: .8;
  transition: opacity var(--t-fast) var(--ease);
}
.trust-bar__item:hover { opacity: 1; color: var(--c-ink); }
.trust-bar__item svg { width: 24px; height: 24px; }

/* -------- 9. Hizmetler — Bento Grid -------- */
.bento {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
.bento__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  overflow: hidden;
  transition: all var(--t-base-dur) var(--ease);
  isolation: isolate;
}
.bento__card::before {
  content: "";
  position: absolute;
  top: -50%; right: -30%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(59,130,246,.08), transparent 60%);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}
.bento__card:hover {
  border-color: var(--c-ink);
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.bento__card:hover::before { opacity: 1; }

.bento__icon {
  width: 56px; height: 56px;
  background: var(--c-bg-3);
  color: var(--c-brand);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-5);
  transition: all var(--t-base-dur) var(--ease);
}
.bento__icon svg { width: 28px; height: 28px; }
.bento__card:hover .bento__icon {
  background: var(--c-ink);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}

.bento__card h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-2);
  font-weight: 700;
}
.bento__card p {
  color: var(--c-muted);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin-bottom: var(--s-5);
}
.bento__link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--c-ink);
  font-weight: 600;
  font-size: var(--t-sm);
}
.bento__link::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.bento__card:hover .bento__link::after { transform: translateX(4px); }

/* Bento featured (büyük kart) — Fotoğraf arkaplanlı */
.bento__card--featured {
  background-color: var(--c-ink);
  background-size: cover;
  background-position: center;
  color: #fff;
  border-color: var(--c-ink);
  min-height: 380px;
  isolation: isolate;
  position: relative;
}
.bento__card--featured::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(10,15,28,.95) 0%, rgba(23,37,84,.75) 45%, rgba(29,78,216,.35) 100%);
  z-index: 0;
  transition: opacity var(--t-base-dur) var(--ease);
  border-radius: inherit;
}
.bento__card--featured::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(34,211,238,.18), transparent 60%);
  z-index: 0;
  border-radius: inherit;
}
.bento__card--featured > * { position: relative; z-index: 1; }
.bento__card--featured:hover::before {
  background:
    linear-gradient(135deg, rgba(10,15,28,.92) 0%, rgba(23,37,84,.65) 45%, rgba(29,78,216,.25) 100%);
}
.bento__card--featured h3, .bento__card--featured .bento__link { color: #fff; }
.bento__card--featured p { color: rgba(255,255,255,.85); }
.bento__card--featured .bento__icon {
  background: rgba(255,255,255,.15);
  color: #fff;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
}
.bento__card--featured:hover .bento__icon {
  background: var(--c-cyan);
  color: var(--c-ink);
  border-color: var(--c-cyan);
}

/* -------- 10. Süreç Timeline -------- */
.process { position: relative; }
.process__steps {
  display: grid; gap: var(--s-8);
  grid-template-columns: 1fr;
  position: relative;
}
.process__step {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  position: relative;
}
.process__num {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-line);
  color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-lg);
  transition: all var(--t-base-dur) var(--ease);
  z-index: 2;
}
.process__step:hover .process__num {
  border-color: var(--c-brand);
  color: #fff;
  background: var(--c-brand);
  transform: scale(1.05);
}
.process__body h3 {
  font-size: var(--t-md);
  margin-bottom: var(--s-1);
}
.process__body p {
  color: var(--c-muted);
  font-size: var(--t-sm);
}

/* -------- 11. Stat Banner — büyük rakamlar -------- */
.stat-banner {
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-16) var(--s-8);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.stat-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59,130,246,.25), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(34,211,238,.18), transparent 50%);
  z-index: -1;
}
.stat-banner__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
}
.stat-banner h2 { color: #fff; }
.stat-banner p { color: rgba(255,255,255,.7); }
.stat-banner__numbers {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}
.stat-banner__num strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw, var(--t-4xl));
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, var(--c-brand-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-banner__num span {
  display: block; margin-top: .25rem;
  color: rgba(255,255,255,.7);
  font-size: var(--t-sm);
}

/* -------- 12. Quote / Vurgu -------- */
.quote {
  font-family: var(--f-display);
  font-size: clamp(var(--t-lg), 2.5vw, var(--t-2xl));
  line-height: 1.3;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  font-weight: 700;
  max-width: 30ch;
}
.quote__author {
  margin-top: var(--s-5);
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  color: var(--c-muted);
  font-weight: 500;
}

/* -------- 13. FAQ -------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--c-line);
  padding: var(--s-5) 0;
  transition: padding var(--t-fast) var(--ease);
}
.faq details[open] { padding-bottom: var(--s-6); }
.faq summary {
  font-family: var(--f-display);
  font-weight: 700; font-size: var(--t-md);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--c-ink);
  transition: color var(--t-fast) var(--ease);
}
.faq summary:hover { color: var(--c-brand); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-weight: 300; font-size: 1.75rem; color: var(--c-brand);
  transition: transform var(--t-base-dur) var(--ease);
  line-height: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin-top: var(--s-4);
  color: var(--c-muted);
  line-height: 1.7;
}

/* -------- 14. Final CTA -------- */
.final-cta {
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-16) var(--s-8);
  position: relative;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.final-cta::before, .final-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -1;
}
.final-cta::before {
  width: 400px; height: 400px;
  background: var(--c-brand);
  opacity: .5;
  top: -30%; left: -10%;
}
.final-cta::after {
  width: 350px; height: 350px;
  background: var(--c-cyan);
  opacity: .25;
  bottom: -30%; right: -10%;
}
.final-cta h2 {
  color: #fff;
  font-size: clamp(var(--t-2xl), 5vw, var(--t-4xl));
  margin-bottom: var(--s-4);
}
.final-cta p {
  color: rgba(255,255,255,.7);
  max-width: 50ch;
  margin: 0 auto var(--s-8);
  font-size: var(--t-md);
}
.final-cta .btn-ghost {
  background: rgba(255,255,255,.1);
  color: #fff; border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
}
.final-cta .btn-ghost:hover {
  background: rgba(255,255,255,.18);
}
.final-cta .btn-primary {
  background: #fff; color: var(--c-ink);
}
.final-cta .btn-primary:hover { background: var(--c-bg-2); color: var(--c-ink); }

/* -------- 15. Footer -------- */
.site-footer {
  background: var(--c-bg-dark);
  color: #94A3B8;
  padding: var(--s-16) 0 var(--s-6);
}
.site-footer h4 { color: #fff; font-size: var(--t-sm); margin-bottom: var(--s-4); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.site-footer a { color: #CBD5E1; }
.site-footer a:hover { color: #fff; }
.footer__grid {
  display: grid; gap: var(--s-10);
  margin-bottom: var(--s-10);
}
.footer__brand p { color: #94A3B8; font-size: var(--t-sm); max-width: 38ch; line-height: 1.65; }
.footer__brand .nav__brand { color: #fff; }
.footer__brand .nav__brand small { color: #94A3B8; }
.footer__list li { margin-bottom: .55rem; font-size: var(--t-sm); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: space-between;
  padding-top: var(--s-8);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: var(--t-xs); color: #64748B;
}

/* -------- 16. Breadcrumb -------- */
.breadcrumb {
  font-size: var(--t-xs);
  color: var(--c-muted);
  padding: var(--s-4) 0;
}
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-brand); }
.breadcrumb span[aria-current] { color: var(--c-ink); font-weight: 500; }

/* -------- 17. WhatsApp Float -------- */
.wa-float {
  position: fixed; bottom: 24px; right: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  z-index: 90;
  transition: all var(--t-base-dur) var(--ease);
}
.wa-float::before {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: rgba(37,211,102,.4);
  z-index: -1;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.wa-float:hover { transform: scale(1.1); color: #fff; }
.wa-float svg { width: 30px; height: 30px; }

/* -------- 18. Form (iletişim) -------- */
.form { display: grid; gap: var(--s-4); }
.form input, .form textarea, .form select {
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r);
  font: inherit;
  transition: all var(--t-fast) var(--ease);
  background: #fff;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 4px rgba(10,15,28,.06);
}
.form label {
  font-size: var(--t-sm); font-weight: 600;
  color: var(--c-ink);
  display: block;
  margin-bottom: var(--s-1);
}

/* -------- 19. Scroll Reveal Animation -------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------- 20. Responsive -------- */
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .stat-banner__numbers { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .nav__menu { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .mobile-menu { display: none !important; }
  .hero__grid { grid-template-columns: 1.15fr 1fr; gap: var(--s-12); }
  .showcase__strip { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 2.2fr 1fr 1fr 1.2fr; }
  .stat-banner__grid { grid-template-columns: 1fr 1.4fr; align-items: center; }
}

@media (min-width: 1100px) {
  /* Asimetrik (featured kartlı) bento — sadece featured kart varsa devreye girer */
  .bento:has(> .bento__card--featured) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "feat feat svc1"
      "feat feat svc2"
      "svc3 svc4 svc5";
  }
  .bento:has(> .bento__card--featured) .bento__card--featured { grid-area: feat; }
  .bento:has(> .bento__card--featured) > .bento__card:nth-child(2) { grid-area: svc1; }
  .bento:has(> .bento__card--featured) > .bento__card:nth-child(3) { grid-area: svc2; }
  .bento:has(> .bento__card--featured) > .bento__card:nth-child(4) { grid-area: svc3; }
  .bento:has(> .bento__card--featured) > .bento__card:nth-child(5) { grid-area: svc4; }
  .bento:has(> .bento__card--featured) > .bento__card:nth-child(6) { grid-area: svc5; }

  /* Featured kart YOKSA → düzgün 3 eşit sütun (hakkımızda, hizmet vb. sayfalar) */
  .bento:not(:has(> .bento__card--featured)) {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Eski tarayıcı yedek: .bento--equal sınıfı garanti eşit grid */
  .bento.bento--equal {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-areas: none !important;
  }
  .bento.bento--equal > .bento__card { grid-area: auto !important; }

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

/* -------- 21. Erişilebilirlik -------- */
:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: 4px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* -------- WHY US — split image+features -------- */
.why {
  display: grid;
  gap: var(--s-10);
  align-items: center;
  grid-template-columns: 1fr;
}
.why__image {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.why__image-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s var(--ease-out);
}
.why:hover .why__image-bg { transform: scale(1.05); }
.why__image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,15,28,.55) 100%);
}
.why__image-tag {
  position: absolute; left: 20px; bottom: 20px;
  z-index: 2;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
}
.why__features { display: grid; gap: var(--s-5); }
.why__feature {
  display: flex; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition: all var(--t-base-dur) var(--ease);
}
.why__feature:hover {
  border-color: var(--c-ink);
  transform: translateX(6px);
  box-shadow: var(--sh-sm);
}
.why__feature-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.why__feature-icon svg { width: 22px; height: 22px; }
.why__feature h3 {
  font-size: var(--t-md);
  margin-bottom: 4px;
}
.why__feature p {
  font-size: var(--t-sm);
  color: var(--c-muted);
  line-height: 1.55;
}

@media (min-width: 900px) {
  .why { grid-template-columns: 1fr 1.2fr; gap: var(--s-16); }
}

/* -------- Sayfa türü varyasyonları -------- */
/* Hero kısa (alt sayfalar için) */
.hero--compact {
  min-height: 60vh;
  padding: var(--s-16) 0 var(--s-12);
}
.hero--compact .hero__title { font-size: clamp(2rem, 5vw, 3.5rem); }
.hero--compact .hero__grid { grid-template-columns: 1fr !important; max-width: 820px; }

/* Modern Section Header */
.section-head__pretitle {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-brand);
  margin-bottom: var(--s-3);
}

/* Modern Card v2 - bento ile uyumlu */
.card-v2 {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: all var(--t-base-dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.card-v2:hover {
  border-color: var(--c-ink);
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.card-v2__icon {
  width: 52px; height: 52px;
  background: var(--c-bg-3);
  color: var(--c-brand);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
  transition: all var(--t-base-dur) var(--ease);
}
.card-v2__icon svg { width: 26px; height: 26px; }
.card-v2:hover .card-v2__icon { background: var(--c-ink); color: #fff; }
.card-v2 h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.card-v2 p { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.6; }

/* Process v2 - numaralı timeline kartlar */
.timeline {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
.timeline__item {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: var(--s-6);
  position: relative;
  transition: all var(--t-base-dur) var(--ease);
}
.timeline__item:hover {
  border-color: var(--c-brand);
  transform: translateY(-3px);
  box-shadow: var(--sh-sm);
}
.timeline__num {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  font-weight: 800;
  color: var(--c-bg-3);
  line-height: 1;
  letter-spacing: -0.04em;
}
.timeline__item:hover .timeline__num { color: var(--c-brand-light); }
.timeline__item h3 { font-size: var(--t-md); margin-bottom: var(--s-2); padding-right: 60px; }
.timeline__item p { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.55; }

@media (min-width: 700px) {
  .timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(3, 1fr); }
}

/* Highlight rows (Listeli bölümler) */
.highlight-rows {
  display: grid;
  gap: var(--s-4);
}
.highlight-row {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition: all var(--t-base-dur) var(--ease);
}
.highlight-row:hover {
  border-color: var(--c-brand);
  transform: translateX(4px);
}
.highlight-row__check {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-cyan) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.highlight-row__check svg { width: 16px; height: 16px; }
.highlight-row p { color: var(--c-text); font-size: var(--t-sm); margin: 0; }

/* Modern Article Body (blog yazıları için) */
.article-body { font-size: var(--t-md); line-height: 1.8; color: var(--c-text); }
.article-body h2 {
  font-size: clamp(var(--t-xl), 3vw, var(--t-2xl));
  margin-top: var(--s-10);
  margin-bottom: var(--s-4);
}
.article-body h3 {
  font-size: var(--t-lg);
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
}
.article-body p { margin-bottom: var(--s-5); }
.article-body strong { color: var(--c-ink); font-weight: 700; }
.article-body a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover { color: var(--c-brand-deep); }

/* Eski sınıf yedekleri (diğer sayfalar bozulmasın) */
.section-head p { color: var(--c-muted); font-size: var(--t-md); }
.cards { display: grid; gap: var(--s-5); }
.card {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r); padding: var(--s-6);
  transition: all var(--t-base-dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--c-brand); }
.card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
  color: #fff; border-radius: 10px; margin-bottom: var(--s-4);
  font-size: 1.3rem; font-weight: 700;
}
.card h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.card p  { color: var(--c-muted); font-size: var(--t-sm); margin-bottom: var(--s-4); }
.card__link { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-sm); font-weight: 600; color: var(--c-ink); }
.card__link::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
.card__link:hover::after { transform: translateX(3px); }
.projects { display: grid; gap: var(--s-5); }
.text-center { text-align: center; }
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}