/* ============================================================
   Agency 360 — styles.css
   Figma variables → CSS custom properties (1:1 mapping)
   Source: Figma node 4:551
   ============================================================ */

/* ---------- 1. Tokens (Figma variables, birebir) ---------- */
:root {
  /* Colors — Figma variable adlarıyla birebir */
  --black-100: #000000;
  --black-60:  rgba(0, 0, 0, 0.6);

  --white-100: #FFFFFF;
  --white-90:  rgba(255, 255, 255, 0.9);
  --white-80:  rgba(255, 255, 255, 0.8);
  --white-60:  rgba(255, 255, 255, 0.6);
  --white-50:  rgba(255, 255, 255, 0.5);
  --white-40:  rgba(255, 255, 255, 0.4);
  --white-20:  rgba(255, 255, 255, 0.2);
  --white-10:  rgba(255, 255, 255, 0.1);
  --white-05:  rgba(255, 255, 255, 0.05);

  --blue-100: #155DFC;
  --blue-80:  rgba(21, 93, 252, 0.8);
  --blue-60:  rgba(21, 93, 252, 0.6);

  /* CTA banner blur orbs */
  --orb-blue:  #155DFC;
  --orb-cyan:  #00B7FF;

  /* State */
  --error:   #DC2626;
  --success: #16A34A;

  /* Radius */
  --r-pill:   32px;
  --r-card:   24px;
  --r-logo:   32px;
  --r-eyebrow: 24px;
  --r-input:  12px;
  --r-nav:    12px;
  --r-dot:    8px;

  /* Layout */
  --container-w:   1440px;
  --container-px:  80px;

  /* Transitions */
  --t-fast:  150ms ease;
  --t-base:  200ms ease;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black-100);
  color: var(--white-100);
  font-family: 'Geist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

/* ---------- 3. Typography utilities (Figma var names) ----------
   Hepsinde lineHeight: 1 (Figma "leading-[normal]" = 1).
   Letter-spacing 0.75 sadece text-xs/regular'da. */
.text-xs-regular  { font: 400 12px/1 'Geist', sans-serif; letter-spacing: 0.09px; }
.text-xs-medium   { font: 500 12px/1 'Geist', sans-serif; }
.text-xs-semibold { font: 600 12px/1 'Geist', sans-serif; }
.text-sm-regular  { font: 400 14px/1 'Geist', sans-serif; }
.text-sm-medium   { font: 500 14px/1 'Geist', sans-serif; }
.text-sm-semibold { font: 600 14px/1 'Geist', sans-serif; }
.text-base-regular  { font: 400 16px/1 'Geist', sans-serif; }
.text-base-medium   { font: 500 16px/1 'Geist', sans-serif; }
.text-base-semibold { font: 600 16px/1 'Geist', sans-serif; }
.text-lg-regular  { font: 400 18px/1 'Geist', sans-serif; }
.text-lg-semibold { font: 600 18px/1 'Geist', sans-serif; }
.text-2xl-semibold { font: 600 24px/1 'Geist', sans-serif; }
.text-3xl-regular  { font: 400 30px/1 'Geist', sans-serif; }
.text-3xl-semibold { font: 600 30px/1 'Geist', sans-serif; }
.text-4xl-semibold { font: 600 36px/1 'Geist', sans-serif; }
.text-5xl-semibold { font: 600 48px/1 'Geist', sans-serif; }
.text-6xl-semibold { font: 600 60px/1 'Geist', sans-serif; }
.text-xl-semibold-inter { font: 600 20px/1 'Inter', sans-serif; } /* Logo only */
.text-7xl-display { font: 600 120px/1 'Geist', sans-serif; } /* 404 */

/* Body text genelde line-height yardımı ister okunabilirlik için */
.lh-body { line-height: 1.5; }
.lh-tight { line-height: 1.2; }

/* Color helpers */
.c-white     { color: var(--white-100); }
.c-white-90  { color: var(--white-90); }
.c-white-60  { color: var(--white-60); }
.c-white-40  { color: var(--white-40); }
.c-white-20  { color: var(--white-20); }
.c-blue      { color: var(--blue-100); }
.c-black     { color: var(--black-100); }

/* ---------- 4. Layout container ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
}

/* ---------- 5. Section base ---------- */
section { position: relative; width: 100%; }

/* ---------- 6. Two-tone heading helper ----------
   Use: <h2 class="two-tone"><span>White</span> <span>White/60</span></h2>
   Already absorbed by section styles where present. */

/* ---------- 7. Buttons ---------- */
/* Primary (blue glass) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 4px 24px;
  border-radius: var(--r-pill);
  font: 500 16px/1 'Geist', sans-serif;
  white-space: nowrap;
  transition: opacity var(--t-base), background-color var(--t-base);
  border: 0;
  cursor: pointer;
  position: relative;
}
.btn:hover { opacity: 0.85; }

.btn--primary {
  background: var(--blue-80);
  color: var(--white-100);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn--inverted {
  background: var(--white-100);
  color: var(--black-100);
}
.btn--inverted-90 {
  background: var(--white-90);
  color: var(--black-100);
}
.btn--secondary {
  background: var(--white-10);
  color: var(--white-100);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  gap: 0;
}
.btn--secondary.btn--has-dot { gap: 10px; }

/* Dot indicator inside button */
.btn__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-dot);
  flex-shrink: 0;
}
.btn--primary .btn__dot   { background: var(--white-100); }
.btn--inverted .btn__dot,
.btn--inverted-90 .btn__dot { background: var(--black-100); }

/* Icon-only button */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--white-10);
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  transition: background-color var(--t-base);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--white-20); }
.btn-icon img,
.btn-icon svg { width: 20px; height: 20px; }

/* Smaller pagination icon button (32×32, 16px icon) */
.btn-icon--sm {
  width: 32px;
  height: 32px;
  padding: 8px;
  background: var(--white-10);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--t-base);
}
.btn-icon--sm:hover { background: var(--white-20); }
.btn-icon--sm img,
.btn-icon--sm svg { width: 16px; height: 16px; }

/* ---------- 8. Eyebrow badge ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 36px;
  padding: 4px 16px;
  background: var(--white-10);
  border-radius: var(--r-eyebrow);
  white-space: nowrap;
}
.eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-dot);
  background: var(--white-100);
  flex-shrink: 0;
}

/* ---------- 9. Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  transition: background-color var(--t-base), backdrop-filter var(--t-base);
}
.header__inner {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Utility bar */
.utility {
  height: 48px;
  padding: 14px 80px 15px; /* asimetrik: pt-14 pb-15 — Figma'dan birebir */
  background: var(--black-60);
  display: flex;
  gap: 24px;
  align-items: flex-end;
  width: 100%;
  transition: transform var(--t-base), opacity var(--t-base);
}
.utility__brand {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.utility__brand-bold { color: var(--white-80); font-weight: 600; font-size: 12px; }
.utility__brand-light { color: var(--white-50); font-size: 12px; font-weight: 400; }

.utility__contact {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: center;
}
.utility__contact a { color: var(--white-60); font: 500 12px/1 'Geist', sans-serif; white-space: nowrap; transition: color var(--t-base); }
.utility__contact a:hover { color: var(--white-100); }

.utility__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--white-60);
}
.utility__lang img.flag { width: 24px; height: 18px; object-fit: cover; }
.utility__lang .lang-name { font: 400 12px/1 'Geist', sans-serif; letter-spacing: 0.09px; }
.utility__lang img.caret { width: 16px; height: 16px; }

/* Divider line under utility bar */
.header__divider {
  width: 100%;
  height: 1px;
  background: var(--white-10);
}

/* Main nav */
.nav {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 24px 80px;
  width: 100%;
  transition: padding var(--t-base), background-color var(--t-base);
}
.nav__logo {
  width: 240px;
  font: 600 20px/1 'Inter', sans-serif;
  color: var(--white-100);
}
.nav__list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.nav__item {
  height: 36px;
  padding: 8px 16px;
  border-radius: var(--r-nav);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 16px/1 'Geist', sans-serif;
  color: var(--white-60);
  transition: color var(--t-base), background-color var(--t-base);
}
.nav__item:hover { color: var(--white-100); background: var(--white-05); }
.nav__item.is-active { color: var(--white-100); }

.nav__cta {
  width: 240px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* Header scrolled state */
.header.is-scrolled .utility {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.header.is-scrolled .nav {
  padding-top: 16px;
  padding-bottom: 16px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Body padding to compensate for fixed header */
.body-spacer { height: 140px; } /* 48 utility + 92 nav */

/* ---------- 10. Aurora (Hero + alt sayfa üst section) ----------
   top: -140px → header'ın da arkasından geçer, header transparent görünür.
   Header utility (black/60) + nav (transparent) → aurora kompozisyonu üstte. */
.aurora {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 874px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.aurora__layer {
  position: absolute;
  pointer-events: none;
}
.aurora__ellipse-1 {
  left: calc(50% - 0.14px - 420.57px);
  top: -226.17px;
  width: 841.147px;
  height: 716.146px;
  opacity: 0.15;
  transform: scaleY(-1) rotate(180deg);
}
.aurora__el-1 {
  left: 177px;
  top: -360.5px;
  width: 531.427px;
  height: 1351.332px;
  opacity: 0.15;
  mix-blend-mode: plus-lighter;
  transform: scaleY(-1) rotate(180deg);
}
.aurora__el-2 {
  left: 731.29px;
  top: -360.5px;
  width: 531.427px;
  height: 1351.332px;
  opacity: 0.15;
  mix-blend-mode: plus-lighter;
}
.aurora__el-3 {
  left: 597.4px;
  top: 67.29px;
  width: 89.283px;
  height: 793.603px;
  opacity: 0.15;
  transform: scaleY(-1) rotate(180deg);
}
.aurora__el-4 {
  left: 753.03px;
  top: 67.29px;
  width: 89.283px;
  height: 793.603px;
  opacity: 0.15;
}
.aurora__el-5 {
  left: 256.4px;
  top: -33.73px;
  width: 409.055px;
  height: 696.76px;
  opacity: 0.15;
  transform: scaleY(-1) rotate(180deg);
}
.aurora__el-6 {
  left: 774.26px;
  top: -33.73px;
  width: 409.055px;
  height: 696.76px;
  opacity: 0.15;
}
.aurora__el-7 {
  left: calc(50% - 0.14px - 225.57px);
  top: 29.07px;
  width: 451.14px;
  height: 854.043px;
  opacity: 0.15;
  mix-blend-mode: screen;
  transform: scaleY(-1) rotate(180deg);
}
.aurora__ellipse-2 {
  left: calc(50% - 0.14px - 225.57px);
  top: -77.52px;
  width: 451.14px;
  height: 200.396px;
  opacity: 0.15;
  mix-blend-mode: plus-lighter;
  transform: scaleY(-1) rotate(180deg);
}
.aurora__ellipse-3 {
  left: calc(50% - 0.14px - 463.46px);
  top: -131.87px;
  width: 926.914px;
  height: 341.596px;
  opacity: 0.5;
  mix-blend-mode: plus-lighter;
  transform: rotate(180deg);
}
.aurora__ellipse-4 {
  left: calc(50% - 0.14px - 213.9px);
  top: -39.9px;
  width: 427.793px;
  height: 157.655px;
  opacity: 0.5;
  mix-blend-mode: plus-lighter;
  transform: rotate(180deg);
}

/* ---------- 11. Hero section ---------- */
.hero {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 64px;
  align-items: center;
  padding: 64px 80px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
}
.hero__left {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: flex-start;
}
.hero__title-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}
.hero__title {
  font: 600 60px/1.05 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.hero__title .dim { color: var(--white-60); }
.hero__lede {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
  width: 100%;
}
.hero__cta-row {
  display: flex;
  gap: 32px;
  align-items: center;
}
.hero__buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}
.hero__person {
  display: flex;
  gap: 12px;
  align-items: center;
}
.hero__person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.hero__person-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.hero__person-name { font: 600 14px/1 'Geist', sans-serif; color: var(--white-100); }
.hero__person-role { font: 400 12px/1 'Geist', sans-serif; color: var(--white-60); letter-spacing: 0.09px; }

.hero__right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 0 80px;
}
.hero__image {
  width: 420px;
  height: 360px;
  object-fit: contain;
}
.hero__caption {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  width: 420px;
}

/* ---------- 12. Logo bar ---------- */
.logo-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  padding: 32px 80px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
}
.logo-bar__item {
  flex: 1 0 0;
  min-width: 0;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  border-radius: var(--r-nav);
  overflow: hidden;
  transition: background-color var(--t-base);
}
.logo-bar__item:hover { background: var(--white-05); }
.logo-bar__item img {
  mix-blend-mode: luminosity;
  object-fit: contain;
  filter: brightness(2);
}

/* ---------- 13. Portfolio slider ---------- */
.portfolio {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  padding: 64px 0;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
}
.portfolio__track {
  display: flex;
  gap: 40px;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.portfolio__side {
  position: relative;
  width: 320px;
  height: 480px;
  overflow: hidden;
  border-radius: 40px;
}
.portfolio__side img {
  position: absolute;
  width: 640px;
  height: 480px;
  border-radius: 40px;
  object-fit: cover;
}
.portfolio__side--left img { right: 0; left: auto; top: 0; }
.portfolio__side--right img { left: 0; top: 0; }
.portfolio__side--left::after,
.portfolio__side--right::after {
  content: '';
  position: absolute;
  top: 0;
  width: 120px;
  height: 480px;
  pointer-events: none;
}
.portfolio__side--left::after  { left: 0; background: linear-gradient(to right, var(--black-100), transparent); }
.portfolio__side--right::after { right: 0; background: linear-gradient(to left, var(--black-100), transparent); }

.portfolio__center {
  width: 720px;
  height: 540px;
  border-radius: 40px;
  overflow: hidden;
}
.portfolio__center img { width: 100%; height: 100%; object-fit: cover; border-radius: 40px; }

.portfolio__bottom {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  padding: 0 400px;
  width: 100%;
}
.portfolio__caption {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  text-align: center;
  width: 100%;
}
.portfolio__nav {
  display: flex;
  gap: 12px;
  align-items: center;
}
.portfolio__pagination {
  background: var(--white-10);
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-radius: var(--r-pill);
}
.portfolio__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-dot);
  background: var(--white-20);
  transition: background-color var(--t-base), width var(--t-base);
  cursor: pointer;
  border: 0;
  padding: 0;
}
.portfolio__dot.is-active {
  background: var(--white-100);
  width: 32px;
  border-radius: var(--r-dot);
}

/* ---------- 14. Services ---------- */
.services {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.service {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 56px 80px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.service__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}
.service__image-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 80px;
  flex-shrink: 0;
}
.service__image {
  width: 420px;
  height: 360px;
  object-fit: contain;
}
.service__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.service__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}
.service__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}
.service__num   { font: 400 14px/1 'Geist', sans-serif; color: var(--white-60); }
.service__title { font: 600 36px/1.15 'Geist', sans-serif; color: var(--white-100); margin: 0; }
.service__body  { font: 400 16px/1.5 'Geist', sans-serif; color: var(--white-100); }
.service__tags  { font: 400 14px/1 'Geist', sans-serif; color: var(--white-60); }
.service__buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ---------- 15. Featured project ---------- */
.featured {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  padding: 96px 80px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.featured__left {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  height: 456px;
}
.featured__top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}
.featured__label {
  flex: 1 0 0;
  min-width: 0;
  font: 500 16px/1 'Geist', sans-serif;
  color: var(--white-60);
}
.featured__count {
  font: 600 16px/1 'Geist', sans-serif;
  color: var(--white-100);
}
.featured__divider {
  width: 100%;
  height: 1px;
  background: var(--white-10);
}
.featured__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}
.featured__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}
.featured__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}
.featured__title {
  font: 600 60px/1.05 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.featured__meta {
  font: 400 14px/1.4 'Geist', sans-serif;
  color: var(--white-60);
}
.featured__lede {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--white-100);
}
.featured__right {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.featured__card {
  position: relative;
  width: 100%;
  aspect-ratio: 624 / 468;
  border-radius: var(--r-card);
  overflow: hidden;
}
.featured__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-card);
  transition: filter var(--t-base);
}
.featured__card:hover img { filter: brightness(1.1); }

/* ---------- 16. Partners (Kurumsal İş Ortakları) ---------- */
.partners {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
  padding: 80px;
  width: 100%;
  overflow: hidden;
  z-index: 5;
}
.partners__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.partners__pattern {
  position: absolute;
  left: 660px;
  top: 50%;
  transform: translateY(-50%);
  width: 1069.183px;
  height: 1069.183px;
  z-index: 1;
  pointer-events: none;
}
.partners__cards {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.partners__card-wrap { display: flex; align-items: center; }
.partners__card-wrap--padded { padding: 24px 0; }
.partners__card {
  width: 120px;
  height: 120px;
  border-radius: var(--r-logo);
  overflow: hidden;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  position: relative;
}
.partners__card--white { background: var(--white-100); }
.partners__card--black { background: var(--black-100); }
.partners__card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partners__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 640px;
}
.partners__title-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  width: 100%;
}
.partners__title {
  font: 600 48px/1.15 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.partners__title .dim { color: var(--white-60); }
.partners__lede {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
}

/* ---------- 17. Team + Testimonial ---------- */
.team-testimonial {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.team {
  flex: 1 0 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 80px;
  background: linear-gradient(to bottom, transparent, var(--black-100));
  align-self: stretch;
  min-height: 478px;
}
.team__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.team__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--black-60));
  pointer-events: none;
}
.team__copy {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}
.team__title-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}
.team__eyebrow {
  display: flex;
  gap: 4px;
  align-items: center;
  font: 400 16px/1 'Geist', sans-serif;
}
.team__eyebrow .slash { color: var(--white-40); }
.team__eyebrow .label { color: var(--white-60); }
.team__title {
  font: 600 36px/1.15 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.team__title .dim { color: var(--white-40); }
.team__lede {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
}

.testimonial {
  flex: 1 0 0;
  min-width: 0;
  background: var(--black-100);
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
  padding-top: 88px;
}
.testimonial__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  padding: 0 48px;
  width: 100%;
}
.testimonial__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.testimonial__brand {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
.testimonial__nav {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
.testimonial__divider {
  width: 100%;
  height: 1px;
  background: var(--white-10);
}
.testimonial__quote {
  font: 400 18px/1.55 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
  width: 100%;
}
.testimonial__author {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}
.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial__author-text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.testimonial__name { font: 600 16px/1 'Geist', sans-serif; color: var(--white-100); }
.testimonial__role { font: 400 14px/1 'Geist', sans-serif; color: var(--white-60); }

.testimonial__progress {
  display: flex;
  width: 100%;
  align-items: stretch;
}
.testimonial__progress span {
  flex: 1 0 0;
  min-width: 0;
  height: 4px;
  background: var(--white-10);
  transition: background-color var(--t-base);
}
.testimonial__progress span.is-active { background: var(--white-100); }

/* ---------- 18. Tech stack ---------- */
.tech-stack {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  padding: 48px 80px;
  background: var(--white-10);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  width: 100%;
  position: relative;
  z-index: 5;
}
.tech-item {
  display: flex;
  gap: 12px;
  align-items: center;
}
.tech-item img { width: 32px; height: 32px; object-fit: contain; }
.tech-item span { font: 600 30px/1 'Geist', sans-serif; color: var(--white-100); white-space: nowrap; }
.tech-sep {
  font: 400 30px/1 'Geist', sans-serif;
  color: var(--white-20);
}

/* ---------- 19. FAQ ---------- */
.faq {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  padding: 96px 80px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.faq__title {
  font: 600 24px/1.15 'Geist', sans-serif;
  color: var(--white-60);
  width: 240px;
  flex-shrink: 0;
  margin: 0;
}
.faq__list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}
.faq__item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__row {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
.faq__q {
  flex: 1 0 0;
  min-width: 0;
  font: 600 18px/1.4 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.faq__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.faq__item.is-open .faq__icon { transform: rotate(180deg); }
.faq__a {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
  display: none;
}
.faq__item.is-open .faq__a { display: block; }
.faq__divider {
  width: 100%;
  height: 1px;
  background: var(--white-10);
}
.faq__cta { flex-shrink: 0; align-self: flex-start; }

/* ---------- 20. CTA banner ---------- */
.cta-banner {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 0 80px;
  width: 100%;
  background: linear-gradient(71.28deg, var(--blue-80) 0%, var(--blue-60) 100%);
  overflow: hidden;
  z-index: 5;
  min-height: 488px;
}
.cta-banner__patterns {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.cta-banner__patterns img {
  width: 620px;
  height: 488px;
  flex-shrink: 0;
}
.cta-banner__orb {
  position: absolute;
  top: 21px;
  width: 444px;
  height: 446px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.cta-banner__orb--blue { left: 21px; background: var(--orb-blue); }
.cta-banner__orb--cyan { left: 876px; background: var(--orb-cyan); }
.cta-banner__copy {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  padding: 80px 0;
}
.cta-banner__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}
.cta-banner__title-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}
.cta-banner__eyebrow {
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--white-60);
}
.cta-banner__title {
  font: 600 48px/1.15 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.cta-banner__title .dim { color: var(--white-60); }
.cta-banner__body {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.cta-banner__buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}
.cta-banner__image {
  width: 580px;
  height: 488px;
  padding: 64px 80px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.cta-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- 21. Blog ---------- */
.blog {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  padding: 80px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.blog__top {
  display: flex;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.blog__head {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.blog__heading {
  font: 600 30px/1 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.blog__lede {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
}
.blog__cards {
  display: flex;
  gap: 40px;
  align-items: stretch;
  width: 100%;
}
.blog__card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 400px;
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
}
.blog__thumb {
  width: 100%;
  aspect-ratio: 4 / 3; /* Dribbble shot — Home + Listing ortak oran */
  border-radius: var(--r-card);
  overflow: hidden;
}
.blog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--t-base);
}
.blog__card:hover .blog__thumb img { filter: brightness(1.1); }
.blog__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}
.blog__title { font: 600 18px/1.4 'Geist', sans-serif; color: var(--white-100); margin: 0; }
.blog__excerpt { font: 400 16px/1.5 'Geist', sans-serif; color: var(--white-60); margin: 0; }

/* ---------- 22. Footer ---------- */
.footer {
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: flex-start;
  padding: 24px 80px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.footer__top {
  display: flex;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.footer__brand {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.footer__logo {
  font: 600 24px/1 'Geist', sans-serif;
  color: var(--white-100);
}
.footer__tagline {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--white-60);
}
.footer__social {
  display: flex;
  gap: 16px;
  align-items: center;
}
.footer__social .btn-icon img { width: 24px; height: 24px; }

.footer__main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}
.footer__cols {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  width: 100%;
}
.footer__col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.footer__col-title {
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
}
.footer__col-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}
.footer__col-links a {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--white-100);
  transition: color var(--t-base);
}
.footer__col-links a:hover { color: var(--blue-80); }

.footer__divider {
  width: 100%;
  height: 1px;
  background: var(--white-10);
}
.footer__awards {
  display: flex;
  align-items: center;
  width: 100%;
}
.footer__awards a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--r-nav);
  transition: background-color var(--t-base);
}
.footer__awards a:hover { background: var(--white-05); }
.footer__awards img { height: 28px; width: auto; object-fit: contain; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  width: 100%;
}
.footer__copyright { font: 600 12px/1 'Geist', sans-serif; color: var(--white-60); }
.footer__legal {
  display: flex;
  gap: 24px;
  align-items: center;
}
.footer__legal a { font: 400 12px/1 'Geist', sans-serif; color: var(--white-60); letter-spacing: 0.09px; transition: color var(--t-base); }
.footer__legal a:hover { color: var(--white-100); }

/* ---------- 23. Background grid lines (subtle, decorative) ---------- */
.bg-grid {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.bg-grid::before,
.bg-grid::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--white-05);
}

/* ---------- 24. Page wrapper z-index management ---------- */
.page {
  position: relative;
  isolation: isolate;
  background: var(--black-100);
}

/* ============================================================
   PAGE-SPECIFIC SECTIONS
   Alt sayfa class'ları. BG sabit siyah, aurora yok.
   ============================================================ */

/* ---------- PAGE HERO (centered, üst section — about, faq, vb.) ---------- */
/* Page-hero default: sola yaslı (kalıcı kural — tüm sayfalarda sol).
   Eski centered varyant kalmadı; about/faq/blog otomatik sola yaslandı. */
.page-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  text-align: left;
  padding: 96px 80px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 400 16px/1 'Geist', sans-serif;
}
.page-hero__eyebrow .slash { color: var(--white-40); }
.page-hero__eyebrow .label { color: var(--white-60); }
.page-hero__title {
  font: 600 48px/1.15 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
  max-width: 880px;
}
.page-hero__title .dim { color: var(--white-60); }
.page-hero__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  max-width: 880px;
  margin-top: 16px;
}
.page-hero__body p {
  font: 400 16px/1.7 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
}

/* ---------- FILTER BAR (genel — FAQ, Referanslar, Blog'da kullanılır)
   Default: pill'ler centered. Modifier ile sol-pill + sağ-search düzeni. */
.filter-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 24px 80px 0;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
/* Split modifier: sol pill grubu + sağ search */
.filter-bar--split { justify-content: space-between; }
.filter-bar__pills {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--white-10);
  color: var(--white-100);
  font: 500 14px/1 'Geist', sans-serif;
  border: 0;
  cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
.filter-pill:hover {
  background: rgba(255, 255, 255, 0.18);
}
.filter-pill.is-active {
  background: var(--white-100);
  color: var(--black-100);
}
.filter-pill.is-active:hover {
  background: var(--white-100);
}

/* ---------- SEARCH INPUT (shared, pill formunda) ----------
   Filter-bar sağında, gelecek sayfalarda da yeniden kullanılır. */
.search-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  background: var(--white-10);
  border-radius: var(--r-pill);
  width: 280px;
  max-width: 100%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color var(--t-base);
}
.search-input:focus-within {
  background: rgba(255, 255, 255, 0.18);
}
.search-input__icon {
  width: 16px;
  height: 16px;
  color: var(--white-60);
  flex-shrink: 0;
}
.search-input input {
  flex: 1 0 0;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--white-100);
  font: 400 14px/1 'Geist', sans-serif;
  padding: 0;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.search-input input::placeholder { color: var(--white-40); }
.search-input input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- FAQ FULL — Sol başlıksız varyant (FAQ sayfası için) ---------- */
.faq--full {
  padding-top: 56px;
}
.faq--full .faq__list {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

/* ---------- ABOUT — Vizyon / Misyon (2-col split + vertical divider) ---------- */
.about-pillars {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  z-index: 5;
}
.about-pillar {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  padding: 64px 80px;
}
.about-pillar:first-child { padding-left: 0; }
.about-pillar:last-child { padding-right: 0; }
.about-pillars__divider {
  width: 1px;
  background: var(--white-10);
  align-self: stretch;
  flex-shrink: 0;
}
.about-pillar__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 400 16px/1 'Geist', sans-serif;
}
.about-pillar__eyebrow .slash { color: var(--white-40); }
.about-pillar__eyebrow .label { color: var(--white-60); }
.about-pillar__title {
  font: 600 36px/1.15 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.about-pillar__body {
  font: 400 16px/1.65 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
}

/* ---------- ABOUT — Rakamlar (4-col stat grid) ---------- */
.about-stats {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 96px 80px;
  gap: 0;
  position: relative;
  z-index: 5;
}
.about-stat {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 0 32px;
}
.about-stat:first-child { padding-left: 0; }
.about-stat:last-child { padding-right: 0; }
.about-stat__num {
  font: 600 60px/1 'Geist', sans-serif;
  color: var(--white-100);
}
.about-stat__num .accent { color: var(--blue-100); }
.about-stat__label {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--white-60);
}

/* ---------- ABOUT — Foto Galeri (2 row × 3 col) ---------- */
.about-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 64px 80px 96px;
  position: relative;
  z-index: 5;
}
.gallery-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  background: var(--white-05);
  overflow: hidden;
  transition: background-color var(--t-base);
}
.gallery-item:hover {
  background: var(--white-10);
}

/* ---------- FORM SYSTEM (DESIGN-SYSTEM Bölüm 6 — input/select/textarea) ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.form-row {
  display: flex;
  gap: 16px;
  width: 100%;
}
.form-row > .form-field { flex: 1 0 0; min-width: 0; }
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.form-label {
  font: 500 14px/1 'Geist', sans-serif;
  color: var(--white-60);
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: var(--white-05);
  border: 0;
  border-radius: var(--r-input);
  color: var(--white-100);
  font: 400 14px/1 'Geist', sans-serif;
  transition: background-color var(--t-base), box-shadow var(--t-base);
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.25);
}
.form-input.has-error,
.form-select.has-error,
.form-textarea.has-error {
  box-shadow: 0 0 0 2px var(--error);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--white-40); }
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.form-textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 16px;
  font-family: 'Geist', sans-serif;
  resize: vertical;
  line-height: 1.5;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  padding-right: 44px;
  cursor: pointer;
}
.form-select option { background: var(--black-100); color: var(--white-100); }

.form-helper {
  font: 400 13px/1.4 'Geist', sans-serif;
  color: var(--white-40);
  margin-top: -2px;
}

/* ---------- CONTACT SAYFA-SPESİFİK ---------- */

/* Üst hero — Home Hero ile aynı disiplin */
.contact-hero {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
  padding: 80px 80px 56px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.contact-hero__title-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  max-width: 880px;
}
.contact-hero__title {
  font: 600 60px/1.05 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.contact-hero__title .dim { color: var(--white-60); }
.contact-hero__lede {
  font: 400 16px/1.6 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
}
.contact-hero__person-row {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.contact-hero__person {
  display: flex;
  gap: 12px;
  align-items: center;
}
.contact-hero__person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.contact-hero__person-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.contact-hero__person-name { font: 600 14px/1 'Geist', sans-serif; color: var(--white-100); }
.contact-hero__person-role { font: 400 12px/1 'Geist', sans-serif; color: var(--white-60); letter-spacing: 0.09px; }

/* Split layout (legacy — yeni revize'de kullanılmıyor; mevcutluk için tutuldu) */
.contact-split {
  display: flex;
  gap: 64px;
  align-items: stretch;
  padding: 56px 80px 96px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.contact-info {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

/* 4 ikonlu glass kart grid — tek satırda 4 sütun */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}
.contact-info-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  background: var(--white-10);
  border-radius: var(--r-card);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color var(--t-base);
}
.contact-info-card:hover {
  background: rgba(255, 255, 255, 0.14);
}
.contact-info-card__icon {
  width: 32px;
  height: 32px;
  color: var(--white-100);
  flex-shrink: 0;
}
.contact-info-card__icon svg { width: 100%; height: 100%; display: block; }
.contact-info-card__label {
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--white-60);
}
.contact-info-card__value {
  font: 600 16px/1.3 'Geist', sans-serif;
  color: var(--white-100);
  transition: color var(--t-base);
  word-break: break-word;
}
a.contact-info-card__value:hover { color: var(--blue-80); }
.contact-info-card__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
}

/* Harita — full-bleed, glass badge overlay */
.contact-map {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 0;
  overflow: hidden;
  background: var(--white-05);
}
.contact-map__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--white-100);
  font: 500 14px/1 'Geist', sans-serif;
  z-index: 2;
  pointer-events: none;
}
.contact-map__badge svg {
  width: 16px;
  height: 16px;
  color: var(--white-100);
  flex-shrink: 0;
}

/* Form panel (eski .contact-form-wrap → .contact-form-band__form-side modeli) */
.contact-form-wrap {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  background: var(--white-05);
  border-radius: var(--r-card);
  padding: 32px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.contact-form-wrap__title {
  font: 600 24px/1.2 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.contact-form-wrap__lede {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  margin: -16px 0 0;
}
.contact-form-wrap .form { gap: 16px; }
.contact-form-wrap .btn { align-self: flex-start; margin-top: 8px; }

/* Süreç bandı — Tech-stack stilinde */
/* ---------- CONTACT v2 (revize) — split hero, 4-card row, form band, full map ---------- */

/* Hero split modifier — sol metin + sağ 1:1 görsel */
.contact-hero--split {
  flex-direction: row;
  align-items: center;
  gap: 64px;
  padding: 96px 80px 64px;
}
.contact-hero--split .contact-hero__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.contact-hero--split .contact-hero__title-block { max-width: 100%; }
.contact-hero__image {
  flex: 0 0 480px;
  width: 480px;
  height: 480px;
  border-radius: var(--r-card);
  background: var(--white-05);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.contact-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4 kart — kendi section'ında, container içi */
.contact-info-section {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 32px 80px 48px;
  position: relative;
  z-index: 5;
}

/* Brief form bandı — sol görsel + sağ form, full container */
.contact-form-band {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 48px 80px;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.contact-form-band__image {
  border-radius: var(--r-card);
  background: var(--white-05);
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-form-band__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Harita section — full-bleed (edge-to-edge, sağ-sol boşluk yok) */
.contact-map-section {
  width: 100%;
  padding: 24px 0 96px;
  position: relative;
  z-index: 5;
}

/* Reusable placeholder graphic — "Görsel" etiketli boş kutu */
.placeholder-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-40);
  font: 500 14px/1 'Geist', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.03) 0,
      rgba(255, 255, 255, 0.03) 12px,
      rgba(255, 255, 255, 0.06) 12px,
      rgba(255, 255, 255, 0.06) 24px);
}

/* ---------- BREADCRUMB (shared sub-page component) ----------
   Page-hero üst etiketinin alternatifi — alt sayfalarda hiyerarşi gösterir.
   Eyebrow yerine kullanılır (tek seçim, ikisi birlikte değil). */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 14px/1 'Geist', sans-serif;
  white-space: nowrap;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--white-60);
  transition: color var(--t-base);
}
.breadcrumb a:hover { color: var(--white-100); }
.breadcrumb__sep {
  color: var(--white-40);
  user-select: none;
}
.breadcrumb__current {
  color: var(--white-100);
  font-weight: 500;
}

/* ---------- BLOG LISTELEME (sayfa-spesifik) ---------- */

/* 3 sütun grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 32px 80px 24px;
  position: relative;
  z-index: 5;
}

/* Kategori + tarih meta satırı */
.blog__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.blog__meta-cat {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: var(--white-10);
  border-radius: var(--r-pill);
  font: 600 12px/1 'Geist', sans-serif;
  color: var(--white-100);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
.blog__meta-date {
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--white-60);
  white-space: nowrap;
}

/* Pagination ile sayfa dışındaki kartları gizle — JS yönetir */
.blog__card.is-hidden-by-page { display: none; }

/* Pagination — sayfa numarası tabanlı, alt sayfaların standart kontrolü */
.blog-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 32px 80px 96px;
  position: relative;
  z-index: 5;
}
.blog-pagination__nav {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white-10);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--t-base), opacity var(--t-base);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.blog-pagination__nav:hover { background: var(--white-20); }
.blog-pagination__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: var(--white-10);
}
.blog-pagination__nav img { width: 16px; height: 16px; }
.blog-pagination__page {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white-10);
  border-radius: var(--r-pill);
  font: 600 14px/1 'Geist', sans-serif;
  color: var(--white-100);
  cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.blog-pagination__page:hover { background: var(--white-20); }
.blog-pagination__page.is-active {
  background: var(--white-100);
  color: var(--black-100);
}

/* ---------- BLOG POST (Blog Detay sayfa-spesifik) ---------- */

/* Yazar meta strip — avatar + isim + tarih + okuma süresi */
.post-author {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}
.post-author__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.post-author__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.post-author__name {
  font: 600 14px/1 'Geist', sans-serif;
  color: var(--white-100);
}
.post-author__meta {
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--white-60);
}
.post-author__meta .sep {
  color: var(--white-40);
  margin: 0 8px;
  user-select: none;
}

/* Hero cover — full container width, 4:3 (Dribbble shot), r-24 */
.post-cover {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  z-index: 5;
}
.post-cover__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--white-05);
}
.post-cover__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article + TOC body — sol içerik (max 720) + sağ TOC sticky (280) */
.post-body {
  display: grid;
  grid-template-columns: minmax(0, 720px) 280px;
  gap: 64px;
  align-items: start;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 96px 80px 96px;
  position: relative;
  z-index: 5;
}

/* Article (sol kolon) — okuma odaklı tipografi */
.post-article {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
}
.post-article p {
  font: 400 16px/1.7 'Geist', sans-serif;
  color: var(--white-90);
  margin: 0;
}
.post-article h3 {
  font: 600 36px/1.2 'Geist', sans-serif;
  color: var(--white-100);
  margin: 32px 0 0;
  scroll-margin-top: 140px; /* sticky header offset */
}
.post-article h3:first-child { margin-top: 0; }
.post-article ul,
.post-article ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0;
  padding-left: 24px;
}
.post-article ul { list-style: disc; }
.post-article ol { list-style: decimal; }
.post-article li {
  font: 400 16px/1.7 'Geist', sans-serif;
  color: var(--white-90);
}
.post-article a {
  color: var(--blue-100);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--t-base);
}
.post-article a:hover { opacity: 0.7; }
.post-article strong {
  font-weight: 600;
  color: var(--white-100);
}
.post-article em { font-style: italic; }

/* Ara görsel — 4:3, r-24, full sol kolon genişliği */
.post-article__figure {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-article__figure-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--white-05);
}
.post-article__figure-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-article__figure-caption {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  text-align: left;
}

/* Blockquote — pseudo tırnak vurgusu (border yasağı uyumlu) */
.post-article blockquote {
  position: relative;
  margin: 32px 0;
  padding: 8px 0 8px 80px;
  font: 400 italic 22px/1.5 'Geist', sans-serif;
  color: var(--white-100);
}
.post-article blockquote::before {
  content: '\201C'; /* sol çift tırnak */
  position: absolute;
  left: 0;
  top: -8px;
  font: 600 80px/1 'Geist', sans-serif;
  font-style: normal;
  color: var(--blue-100);
  pointer-events: none;
}
.post-article blockquote cite {
  display: block;
  margin-top: 12px;
  font: 500 14px/1 'Geist', sans-serif;
  font-style: normal;
  color: var(--white-60);
}

/* TOC (sağ sticky panel) */
.post-toc {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  width: 280px;
}
.post-toc__label {
  font: 500 14px/1 'Geist', sans-serif;
  color: var(--white-40);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.post-toc__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 0; /* border yok kuralı */
}
.post-toc__item {
  position: relative;
  padding: 8px 12px 8px 16px;
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--white-40);
  cursor: pointer;
  transition: color var(--t-base);
  text-align: left;
  display: block;
}
.post-toc__item:hover { color: var(--white-60); }
.post-toc__item.is-active {
  color: var(--white-100);
  font-weight: 500;
}
.post-toc__item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: var(--white-100);
  border-radius: 1px;
}

/* Related posts heading */
.post-related {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 80px 64px;
  position: relative;
  z-index: 5;
}
.post-related__heading {
  font: 600 30px/1.2 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0 0 32px;
}
.post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
}

/* ---------- LEGAL (Yasal Belge Listesi sayfası) ----------
   3 sütun grid, her madde glass kart, arrow sağ üst köşede. */
.legal-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  z-index: 5;
}
.legal-list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  padding-right: 64px; /* arrow için sağ üstte yer ayır */
  background: var(--white-05);
  border-radius: var(--r-card);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: 220px;
  transition: background-color var(--t-base);
}
.legal-list__item:hover {
  background: var(--white-10);
}
.legal-list__item-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.legal-list__item-title {
  font: 600 20px/1.3 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.legal-list__item-body {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
}
.legal-list__item-arrow {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 24px;
  height: 24px;
  color: var(--white-60);
  transition: color var(--t-base);
}
.legal-list__item:hover .legal-list__item-arrow {
  color: var(--white-100);
}

/* Section wrapper for legal list (padding + z-index) */
.legal-section {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 32px 0 96px;
  position: relative;
  z-index: 5;
}

/* ---------- LEGAL DETAY (Yasal Detay sayfa-spesifik) ----------
   Layout post-body grid'ini (720+280) reuse eder; sağ panel post-toc reuse.
   Sade tipografi: H3 24px, body 16px (blog post'tan farklı). */

.legal-meta {
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--white-60);
  margin: 24px 0 0;
}
.legal-meta strong {
  color: var(--white-100);
  font-weight: 500;
}

.legal-article {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
}
.legal-article p {
  font: 400 16px/1.7 'Geist', sans-serif;
  color: var(--white-90);
  margin: 0;
}
.legal-article h3 {
  font: 600 24px/1.3 'Geist', sans-serif;
  color: var(--white-100);
  margin: 24px 0 0;
}
.legal-article h3:first-child { margin-top: 0; }
.legal-article ul,
.legal-article ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 24px;
}
.legal-article ul { list-style: disc; }
.legal-article ol { list-style: decimal; }
.legal-article li {
  font: 400 16px/1.7 'Geist', sans-serif;
  color: var(--white-90);
}
.legal-article a {
  color: var(--blue-100);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--t-base);
}
.legal-article a:hover { opacity: 0.7; }
.legal-article strong {
  font-weight: 600;
  color: var(--white-100);
}

/* ---------- CAREER (Kariyer sayfa-spesifik) ----------
   Why grid (3 sütun glass kart) + Açık pozisyonlar dikey listesi. */

/* Neden Biz — 3 sütun glass kart grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 32px 80px 64px;
  position: relative;
  z-index: 5;
}
.why-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  padding: 32px;
  background: var(--white-10);
  border-radius: var(--r-card);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-height: 220px;
  transition: background-color var(--t-base);
}
.why-card:hover {
  background: rgba(255, 255, 255, 0.14);
}
.why-card__icon {
  width: 32px;
  height: 32px;
  color: var(--white-100);
  flex-shrink: 0;
}
.why-card__icon svg { width: 100%; height: 100%; display: block; }
.why-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.why-card__title {
  font: 600 20px/1.3 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.why-card__body {
  font: 400 16px/1.5 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
}

/* Açık pozisyonlar — dikey liste */
.positions-section {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 32px 0 96px;
  position: relative;
  z-index: 5;
}
.positions-section__heading {
  font: 600 30px/1.2 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0 0 24px;
  padding: 0 80px;
}
.positions-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 80px;
}
.position-card {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 28px 24px;
  border-radius: var(--r-input);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-base);
}
.position-card:hover {
  background: var(--white-05);
}
.position-card__main {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.position-card__title {
  font: 600 20px/1.3 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
}
.position-card__dept {
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--white-60);
}
.position-card__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.position-card__pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: var(--white-10);
  border-radius: var(--r-pill);
  font: 600 12px/1 'Geist', sans-serif;
  color: var(--white-100);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
.position-card__arrow {
  width: 24px;
  height: 24px;
  color: var(--white-60);
  flex-shrink: 0;
  transition: color var(--t-base);
}
.position-card:hover .position-card__arrow {
  color: var(--white-100);
}
.positions-list__divider {
  height: 1px;
  background: var(--white-10);
  width: 100%;
}

/* ---------- ABOUT / GENERAL — Centered CTA section ---------- */
.section-cta {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
  padding: 96px 80px;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.section-cta__title {
  font: 600 36px/1.2 'Geist', sans-serif;
  color: var(--white-100);
  margin: 0;
  max-width: 800px;
}
.section-cta__title .dim { color: var(--white-60); }
.section-cta__body {
  font: 400 16px/1.6 'Geist', sans-serif;
  color: var(--white-60);
  margin: 0;
  max-width: 600px;
}
.section-cta__buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

/* ---------- 25. Print/utility resets ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}