/* ============================================================
   Flanöz Collective — Design Tokens (2026)
   Tek kaynak. style.css'in EN BAŞINA bu blok kopyalanır.
   Tüm CSS değerleri var(--...) ile referanslanır.
   Hardcoded HEX/px yazımı yasaktır.

   Çelişki hiyerarşisi: BRIEF.md > DESIGN_SYSTEM.md > TOKENS.css
   Dark mode YOK. Gradient YOK. Border-radius minimum.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. COLOR — Logodan ölçülmüş, WCAG kontrastları hesaplanmış
     ---------------------------------------------------------- */
  --c-primary:       #007858;   /* logo wordmark; button-default, başlık-vurgu, koyu blok */
  --c-primary-dark:  #005A42;   /* button-hover, koyu zemin üstüne hover, focus shadow */
  --c-accent:        #70C040;   /* ginkgo; SADECE dekoratif — metin/icon-button rengi DEĞİL */
  --c-bg:            #F7F6F2;   /* cream; tüm site zemini */
  --c-surface:       #FFFFFF;   /* form input, modal */
  --c-ink:           #1E1E1C;   /* gövde metni; saf #000 ASLA */
  --c-ink-soft:      #5A5A55;   /* ikincil metin, eyebrow, caption */
  --c-line:          #E4E2DA;   /* hairline ayraç, input border-bottom rest */

  /* Yardımcı semantik takma adlar (kod okunurluğu için) */
  --c-text:          var(--c-ink);
  --c-text-muted:    var(--c-ink-soft);
  --c-link:          var(--c-primary);
  --c-link-hover:    var(--c-primary-dark);
  --c-border:        var(--c-line);
  --c-focus-ring:    var(--c-primary);

  /* ----------------------------------------------------------
     2. TYPOGRAPHY — font aileleri + fallback
     ---------------------------------------------------------- */
  --ff-serif: "Fraunces", "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --ff-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --ff-mono:  ui-monospace, "SF Mono", "Cascadia Mono", "Menlo", "Consolas", monospace;

  /* Type scale — mobile-first clamp() */
  --fs-display:   clamp(2.5rem, 4.2vw + 1rem, 5.5rem);     /* 40px → 88px */
  --fs-h1:        clamp(2rem, 3vw + 1rem, 3.75rem);        /* 32px → 60px */
  --fs-h2:        clamp(1.5rem, 1.6vw + 1rem, 2.5rem);     /* 24px → 40px */
  --fs-h3:        clamp(1.25rem, 0.8vw + 1rem, 1.625rem);  /* 20px → 26px */
  --fs-h4:        clamp(1.125rem, 0.4vw + 1rem, 1.25rem);  /* 18px → 20px */
  --fs-h5:        1rem;                                    /* 16px */
  --fs-body-lg:   clamp(1.0625rem, 0.3vw + 1rem, 1.25rem); /* 17px → 20px */
  --fs-body:      1rem;                                    /* 16px */
  --fs-small:     0.875rem;                                /* 14px */
  --fs-eyebrow:   0.75rem;                                 /* 12px */

  /* Line-height */
  --lh-tight:    1.05;
  --lh-heading:  1.15;
  --lh-snug:     1.3;
  --lh-body:     1.65;

  /* Letter-spacing */
  --ls-display:  -0.02em;
  --ls-heading:  -0.015em;
  --ls-h3:       -0.005em;
  --ls-body:     0;
  --ls-button:   0.02em;
  --ls-eyebrow:  0.08em;

  /* Font weight */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* OpenType feature presets */
  --otf-body:     "liga" 1, "calt" 1, "kern" 1;
  --otf-display:  "liga" 1, "dlig" 1, "kern" 1, "opsz" 96;
  --otf-heading:  "liga" 1, "kern" 1, "opsz" 48;
  --otf-tabular:  "tnum" 1, "lnum" 1;

  /* ----------------------------------------------------------
     3. SPACING — 12 adım, rem tabanlı
     ---------------------------------------------------------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;
  --space-11:  12rem;
  --space-12:  16rem;

  /* ----------------------------------------------------------
     4. LAYOUT
     ---------------------------------------------------------- */
  --container-max:       1240px;
  --container-pad-mob:   1.25rem;
  --container-pad-tab:   2rem;
  --container-pad-desk:  3rem;

  --grid-cols:           12;
  --grid-gap:            var(--space-5);

  --section-py-mob:   var(--space-8);
  --section-py-tab:   var(--space-9);
  --section-py-desk:  var(--space-10);
  --section-py-hero:  var(--space-11);

  --header-h:        4rem;

  /* ----------------------------------------------------------
     5. BORDER & RADIUS
     ---------------------------------------------------------- */
  --bw-hairline:   1px;
  --bw-focus:      2px;

  --radius-none:   0;
  --radius-pill:   999px;

  /* ----------------------------------------------------------
     6. MOTION
     ---------------------------------------------------------- */
  --dur-fast:    200ms;
  --dur-base:    400ms;
  --ease-out:    ease;

  --reveal-y:    16px;
  --reveal-dur:  600ms;
  --hover-dur:   200ms;

  /* ----------------------------------------------------------
     7. SHADOW
     ---------------------------------------------------------- */
  --shadow-none:   none;
  --shadow-focus:  0 0 0 var(--bw-focus) var(--c-focus-ring);

  /* ----------------------------------------------------------
     8. Z-INDEX
     ---------------------------------------------------------- */
  --z-base:        0;
  --z-sticky:      50;
  --z-overlay:     90;
  --z-modal:       100;
  --z-toast:       120;

  /* ----------------------------------------------------------
     9. MEASURE — okuma genişliği
     ---------------------------------------------------------- */
  --measure-narrow:  44ch;
  --measure:         56ch;
  --measure-wide:    72ch;
}

/* ============================================================
   Reduced motion: token'ları söndür
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:    0.01ms;
    --dur-base:    0.01ms;
    --reveal-dur:  0.01ms;
    --hover-dur:   0.01ms;
  }
}

/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: var(--otf-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--hover-dur) var(--ease-out);
}

a:hover,
a:focus-visible {
  color: var(--c-link-hover);
}

ul, ol {
  padding: 0;
  list-style: none;
}

hr {
  border: 0;
  border-top: var(--bw-hairline) solid var(--c-line);
  margin: 0;
}

::selection {
  background: var(--c-primary);
  color: var(--c-surface);
}

/* ============================================================
   FOCUS RING
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: var(--bw-focus) solid var(--c-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.btn:focus-visible {
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-serif);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--c-ink);
  text-wrap: balance;
}

.h-display,
h1.h-display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-feature-settings: var(--otf-display);
  font-style: italic;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-feature-settings: var(--otf-heading);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-feature-settings: var(--otf-heading);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-medium);
}

h4 {
  font-family: var(--ff-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}

h5 {
  font-family: var(--ff-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

.lede,
p.lede {
  font-size: var(--fs-body-lg);
  color: var(--c-ink);
  max-width: var(--measure-wide);
}

.muted { color: var(--c-text-muted); }
.center { text-align: center; }

.eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 var(--space-4);
  display: block;
}

blockquote.pullquote + h4,
.pullquote + h3,
.pullquote + p { margin-block-start: var(--space-3); }

.pullquote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  padding-block: var(--space-6);
  border-block: var(--bw-hairline) solid var(--c-line);
  max-width: var(--measure);
  margin-block: var(--space-7);
}

/* ============================================================
   LAYOUT — Container & Grid
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mob);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-pad-tab);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--container-pad-desk);
  }
}

section {
  padding-block: var(--section-py-mob);
}

@media (min-width: 768px) {
  section { padding-block: var(--section-py-tab); }
}

@media (min-width: 1024px) {
  section { padding-block: var(--section-py-desk); }
}

.section--hero {
  padding-block: var(--space-8) var(--space-9);
}

@media (min-width: 1024px) {
  .section--hero {
    padding-block: var(--section-py-hero) var(--space-10);
  }
}

.section--final {
  padding-block: var(--space-9);
}

@media (min-width: 1024px) {
  .section--final {
    padding-block: var(--space-11);
  }
}

.section--bordered {
  border-top: var(--bw-hairline) solid var(--c-line);
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--c-primary);
  color: var(--c-surface);
  text-decoration: none;
  font-weight: var(--fw-medium);
  z-index: var(--z-modal);
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
  color: var(--c-surface);
}

/* ============================================================
   HEADER & NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--c-bg);
  transition: border-color var(--hover-dur) var(--ease-out),
              background-color var(--hover-dur) var(--ease-out);
  border-bottom: var(--bw-hairline) solid transparent;
}

.site-header.is-scrolled {
  border-bottom-color: var(--c-line);
  background: color-mix(in srgb, var(--c-bg) 96%, var(--c-ink) 4%);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
  min-height: var(--header-h);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--c-primary);
  font-family: var(--ff-serif);
  font-size: 1.125rem;
  letter-spacing: -0.005em;
  line-height: 1;
  transition: color var(--hover-dur) var(--ease-out),
              opacity var(--hover-dur) var(--ease-out);
}

.nav__brand:hover,
.nav__brand:focus-visible {
  color: var(--c-primary-dark);
  opacity: 0.85;
}

.nav__brand-logo {
  display: block;
  height: 44px;
  width: auto;
  color: var(--c-primary);
  --logo-accent: var(--c-accent);
}

@media (min-width: 1024px) {
  .nav__brand-logo { height: 58px; }
}

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

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

.nav__link {
  font-family: var(--ff-sans);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  text-decoration: none;
  padding-block: var(--space-2);
  position: relative;
  transition: color var(--hover-dur) var(--ease-out);
}

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

.nav__link[aria-current="page"] {
  color: var(--c-primary);
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-primary);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-sans);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  text-decoration: none;
  padding: 0.625rem 1.25rem;
  background: var(--c-primary);
  color: var(--c-surface);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background-color var(--hover-dur) var(--ease-out);
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--c-primary-dark);
  color: var(--c-surface);
}

/* Hamburger toggle */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
}

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-ink);
  transition: transform var(--hover-dur) var(--ease-out),
              opacity var(--hover-dur) var(--ease-out);
}

.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before { position: absolute; top: -7px; left: 0; }
.nav__toggle-bars::after { position: absolute; top: 7px; left: 0; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars {
  background: transparent;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .nav__toggle {
    display: inline-flex;
  }

  .nav__menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-5);
    padding: var(--space-7) var(--container-pad-mob) var(--space-8);
    background: var(--c-bg);
    border-top: var(--bw-hairline) solid var(--c-line);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--hover-dur) var(--ease-out),
                visibility 0ms linear var(--hover-dur);
    overflow-y: auto;
  }

  .nav__menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--hover-dur) var(--ease-out),
                visibility 0ms linear 0ms;
  }

  .nav__link {
    font-size: 1.25rem;
    padding-block: var(--space-3);
    width: 100%;
  }

  .nav__cta {
    margin-top: var(--space-4);
    align-self: flex-start;
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: 0.9375rem;
  letter-spacing: var(--ls-button);
  line-height: 1;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color var(--hover-dur) var(--ease-out),
              color var(--hover-dur) var(--ease-out),
              border-color var(--hover-dur) var(--ease-out);
  cursor: pointer;
  min-height: 44px;
}

.btn--primary {
  background: var(--c-primary);
  color: var(--c-surface);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--c-primary-dark);
  color: var(--c-surface);
}

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--c-ink);
  color: var(--c-bg);
}

.btn--text {
  background: transparent;
  color: var(--c-ink);
  padding: 0.5rem 0;
  border-radius: 0;
}

.btn--text:hover,
.btn--text:focus-visible {
  color: var(--c-primary);
  background: transparent;
}

.btn__arrow {
  display: inline-block;
  transition: transform var(--hover-dur) var(--ease-out);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(2px);
}

/* ============================================================
   LINK STYLES
   ============================================================ */
.link-inline {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--hover-dur) var(--ease-out),
              text-decoration-color var(--hover-dur) var(--ease-out);
}

.link-inline:hover,
.link-inline:focus-visible {
  color: var(--c-primary-dark);
  text-decoration-color: var(--c-accent);
}

.link-read {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--ff-sans);
  font-size: 0.9375rem;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--space-2);
  transition: color var(--hover-dur) var(--ease-out),
              border-color var(--hover-dur) var(--ease-out);
}

.link-read:hover,
.link-read:focus-visible {
  color: var(--c-primary);
  border-bottom-color: var(--c-accent);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  display: grid;
  gap: var(--space-6);
  max-width: 56rem;
}

.hero__eyebrow {
  margin-bottom: 0;
}

.hero__title {
  margin-block: var(--space-2) 0;
}

.hero__lede {
  max-width: var(--measure-wide);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
}

/* ============================================================
   MANIFESTO / TWO-COL TEXT
   ============================================================ */
.two-col {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

.two-col__head { margin-bottom: var(--space-6); }
.two-col__head h2 { max-width: var(--measure-narrow); }

/* ============================================================
   SIDE-BY-SIDE BLOCK (image + text)
   ============================================================ */
.side-by-side {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 768px) {
  .side-by-side {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-8);
  }

  .side-by-side--reverse {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .side-by-side--reverse .side-by-side__media {
    order: 2;
  }
}

.side-by-side__media {
  position: relative;
}

.side-by-side__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.side-by-side__body > * + * { margin-top: var(--space-4); }
.side-by-side__body h2 { margin-bottom: var(--space-2); }

/* ============================================================
   SERVICES LIST (hairline-divided)
   ============================================================ */
.services-head {
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: var(--measure-wide);
  margin-inline: auto;
}

.services-head h2 { margin-inline: auto; }

.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--bw-hairline) solid var(--c-line);
}

.service-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  padding-block: var(--space-7);
  align-items: start;
  border-bottom: var(--bw-hairline) solid var(--c-line);
}

.service-item__num {
  font-family: var(--ff-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  color: var(--c-accent);
  line-height: 1;
  min-width: 3rem;
  font-variant-numeric: tabular-nums;
}

.service-item__body { min-width: 0; }

.service-item__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-3);
}

.service-item__desc {
  color: var(--c-ink-soft);
  max-width: var(--measure);
  margin: 0;
}

.service-item__link {
  align-self: center;
  color: var(--c-ink);
  text-decoration: none;
  font-family: var(--ff-sans);
  font-size: 0.9375rem;
  border-bottom: 1px solid currentColor;
  padding-block: var(--space-2);
  transition: color var(--hover-dur) var(--ease-out),
              border-color var(--hover-dur) var(--ease-out);
  white-space: nowrap;
}

.service-item__link:hover,
.service-item__link:focus-visible {
  color: var(--c-primary);
  border-bottom-color: var(--c-accent);
}

@media (max-width: 767px) {
  .service-item {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-block: var(--space-6);
  }
  .service-item__link {
    align-self: start;
    justify-self: start;
  }
  .service-item__num {
    font-size: var(--fs-h3);
  }
}

/* ============================================================
   BANNER (Primary background callout)
   ============================================================ */
.banner {
  background: var(--c-primary);
  color: var(--c-surface);
  padding-block: var(--space-9);
}

@media (min-width: 1024px) {
  .banner { padding-block: var(--space-10); }
}

.banner__inner {
  text-align: center;
}

.banner__quote {
  font-family: var(--ff-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--c-surface);
  max-width: 32ch;
  margin: 0 auto;
}

.banner h2 { color: var(--c-surface); }

/* ============================================================
   APPROACH LIST
   ============================================================ */
.approach {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .approach {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }
}

.approach__head h2 { max-width: 12ch; }

.approach__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--bw-hairline) solid var(--c-line);
}

.approach__list li {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  padding-block: var(--space-5);
  border-bottom: var(--bw-hairline) solid var(--c-line);
  color: var(--c-ink);
}

/* ============================================================
   FINAL MESSAGE
   ============================================================ */
.final-msg {
  text-align: center;
  max-width: var(--measure-wide);
  margin-inline: auto;
}

.final-msg h2 {
  font-size: clamp(1.75rem, 2.4vw + 1rem, 3rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-style: italic;
}

.final-msg__tagline {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--c-ink);
  margin-top: var(--space-5);
}

/* ============================================================
   CTA BLOCK
   ============================================================ */
.cta-block {
  display: grid;
  gap: var(--space-5);
  max-width: var(--measure-wide);
}

.cta-block--center {
  text-align: center;
  margin-inline: auto;
}

.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  align-items: center;
  margin-top: var(--space-3);
}

.cta-block--center .cta-block__actions {
  justify-content: center;
}

.cta-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}

.cta-block__meta a { color: var(--c-ink); }

/* ============================================================
   SERVICE DETAIL (Hizmetler page)
   ============================================================ */
.service-section {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .service-section {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-9);
    align-items: start;
  }

  .service-section__media {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}

.service-section__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.service-section__media picture {
  display: block;
}

.side-by-side__media picture {
  display: block;
}

.service-section__head h2 {
  margin-block: var(--space-2) var(--space-3);
}

.service-section__subtitle {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--c-ink-soft);
  margin-bottom: var(--space-5);
}

.service-section__lede {
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-6);
  max-width: var(--measure-wide);
}

.service-section__body > p + p { margin-top: var(--space-4); }

.service-section h3 {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-block: var(--space-6) var(--space-4);
  font-weight: var(--fw-medium);
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--bw-hairline) solid var(--c-line);
}

.service-list li {
  padding-block: var(--space-3);
  border-bottom: var(--bw-hairline) solid var(--c-line);
  font-size: var(--fs-body);
  color: var(--c-ink);
}

/* ============================================================
   PROCESS STEPS (Hakkımızda)
   ============================================================ */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--bw-hairline) solid var(--c-line);
  counter-reset: stepcounter;
}

.steps li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--bw-hairline) solid var(--c-line);
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  counter-increment: stepcounter;
}

.steps li::before {
  content: counter(stepcounter, decimal-leading-zero);
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-ink-soft);
  font-weight: var(--fw-medium);
  align-self: start;
  padding-top: 0.5em;
}

/* ============================================================
   FORM
   ============================================================ */
.contact-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-9);
    align-items: start;
  }
}

.contact-info {
  display: grid;
  gap: var(--space-5);
}

.contact-info__head h2 { margin-block: var(--space-2) var(--space-4); }
.contact-info__head > p + p { margin-top: var(--space-4); }

.contact-meta {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--bw-hairline) solid var(--c-line);
  display: grid;
  gap: var(--space-5);
}

.contact-meta__item {
  display: grid;
  gap: var(--space-1);
}

.contact-meta__label {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: var(--fw-medium);
}

.contact-meta__value {
  font-size: var(--fs-body-lg);
  color: var(--c-ink);
  margin: 0;
}

.contact-meta__value a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.contact-meta__value a:hover,
.contact-meta__value a:focus-visible {
  color: var(--c-primary);
}

.contact-note {
  margin-top: var(--space-7);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  text-align: center;
  max-width: 32ch;
  margin-inline: auto;
}

.contact-form {
  display: grid;
  gap: 0;
}

.contact-form__head { margin-bottom: var(--space-6); }
.contact-form__head h2 { margin-block: var(--space-2) var(--space-3); }
.contact-form__head p {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}

.field__label {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}

.field__required {
  color: var(--c-primary);
  margin-inline-start: 0.15em;
}

.field__input,
.field__textarea {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-bottom: var(--bw-hairline) solid var(--c-line);
  padding: 0.625rem 0;
  outline: none;
  transition: border-color var(--hover-dur) var(--ease-out);
  width: 100%;
  border-radius: 0;
  appearance: none;
}

.field__textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: var(--lh-body);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--c-ink-soft);
  opacity: 1;
}

.field__input:focus,
.field__textarea:focus {
  border-bottom-color: var(--c-primary);
  border-bottom-width: 2px;
  padding-bottom: calc(0.625rem - 1px);
}

/* Tam çevreleyen odak halkası — WCAG 2.4.11 (klavye odağı görünürlüğü) */
.field__input:focus-visible,
.field__textarea:focus-visible,
.leaf-modal__field input:focus-visible,
.leaf-modal__field textarea:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}

.field--error .field__input,
.field--error .field__textarea {
  border-bottom-color: var(--c-ink);
  border-bottom-width: 2px;
  padding-bottom: calc(0.625rem - 1px);
}

.field__error {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-ink);
  font-style: italic;
  margin-top: var(--space-2);
  display: none;
}

.field--error .field__error { display: block; }

.field__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--c-ink);
  background: transparent;
  margin: 0;
  flex-shrink: 0;
  margin-top: 0.15em;
  cursor: pointer;
  transition: background-color var(--hover-dur) var(--ease-out),
              border-color var(--hover-dur) var(--ease-out);
  position: relative;
  border-radius: 0;
}

.field__checkbox:checked {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.field__checkbox:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5l3 3 7-7' stroke='%23F7F6F2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
}

.field__checkbox:focus-visible {
  outline: var(--bw-focus) solid var(--c-focus-ring);
  outline-offset: 2px;
}

.field--checkbox .field__label {
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  cursor: pointer;
}

.form-error-banner {
  display: none;
  padding: var(--space-4);
  border: var(--bw-hairline) solid var(--c-ink);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-small);
  margin-bottom: var(--space-5);
}

.form-error-banner.is-visible { display: block; }

.form-success {
  display: none;
  padding: var(--space-6) var(--space-5);
  border-top: var(--bw-hairline) solid var(--c-line);
  border-bottom: var(--bw-hairline) solid var(--c-line);
}

.form-success.is-visible { display: block; }

.form-success h3 {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.form-success p { margin-bottom: var(--space-4); }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-actions {
  margin-top: var(--space-5);
}

/* noscript form fallback */
.noscript-note {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: var(--bw-hairline) solid var(--c-line);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}

/* ============================================================
   404
   ============================================================ */
.error-page {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: var(--space-9);
}

.error-page__inner {
  max-width: 36rem;
  display: grid;
  gap: var(--space-5);
  justify-items: center;
}

.error-page h1 {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem);
  font-style: italic;
  line-height: var(--lh-tight);
}

.error-page p {
  color: var(--c-ink-soft);
  max-width: 38ch;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-4);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-bg);
  border-top: var(--bw-hairline) solid var(--c-line);
  padding-block: var(--space-9) var(--space-7);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  margin-top: var(--space-8);
}

@media (min-width: 1024px) {
  .site-footer { padding-block: var(--space-10) var(--space-7); }
}

.footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: var(--space-6);
    align-items: start;
  }
}

.footer__brand {
  display: grid;
  gap: var(--space-3);
}

.footer__brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--ff-serif);
  font-size: var(--fs-h4);
  color: var(--c-primary);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: opacity var(--hover-dur) var(--ease-out),
              color var(--hover-dur) var(--ease-out);
}

.footer__brand-mark:hover,
.footer__brand-mark:focus-visible {
  color: var(--c-primary-dark);
  opacity: 0.85;
}

.footer__brand-logo {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
  color: var(--c-primary);
  --logo-accent: var(--c-accent);
}

@media (min-width: 768px) {
  .footer__brand-logo { height: 84px; }
}

@media (min-width: 1024px) {
  .footer__brand-logo { height: 100px; }
}

.footer__tagline {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--c-ink);
  max-width: 32ch;
}

.footer__col-title {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-4);
  font-weight: var(--fw-medium);
}

.footer__nav {
  display: grid;
  gap: var(--space-2);
}

.footer__nav a {
  color: var(--c-ink);
  text-decoration: none;
  padding-block: var(--space-1);
  display: inline-block;
}

.footer__nav a:hover,
.footer__nav a:focus-visible {
  color: var(--c-primary);
}

.footer__contact {
  display: grid;
  gap: var(--space-3);
}

.footer__contact a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.footer__contact a:hover,
.footer__contact a:focus-visible {
  color: var(--c-primary);
}

.footer__location {
  color: var(--c-ink-soft);
  margin: 0;
}

.footer__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--bw-hairline) solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: center;
}

.footer__copy { margin: 0; }
.footer__legal {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--c-ink);
  margin: 0;
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out);
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   FIGURE / IMAGE
   ============================================================ */
.figure {
  margin: 0;
}

.figure img {
  width: 100%;
  height: auto;
  display: block;
}

.figure__caption {
  margin-top: var(--space-3);
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  font-style: italic;
  line-height: 1.5;
  max-width: var(--measure);
}

/* ============================================================
   UTILITY
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-family: Georgia, serif;
    font-size: 11pt;
    line-height: 1.4;
  }

  .site-header,
  .site-footer,
  .nav__toggle,
  .nav__cta,
  .hero__actions,
  .cta-block__actions,
  .btn,
  .banner,
  .reveal { all: revert; }

  .site-header,
  .nav__toggle,
  .nav__cta,
  .hero__actions,
  .cta-block__actions,
  .btn,
  .banner,
  form,
  .skip-link { display: none !important; }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }

  h1, h2, h3, h4 { page-break-after: avoid; }
  p, li { page-break-inside: avoid; }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   HERO — split layout (text + image)
   ============================================================ */
.hero-split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-9);
  }

  .hero-split--reverse {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .hero-split--reverse .hero-split__media {
    order: 2;
  }
}

.hero-split__body {
  display: grid;
  gap: var(--space-6);
  max-width: 36rem;
}

.hero-split__title { margin-block: var(--space-2) 0; }
.hero-split__lede { max-width: var(--measure-wide); }

.hero-split__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-3);
}

.hero-split__media {
  position: relative;
  margin: 0;
}

.hero-split__media picture,
.hero-split__media img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-split__media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.92);
  transition: filter var(--hover-dur) var(--ease-out);
}

/* Decorative caption beneath hero image */
.hero-split__caption {
  margin-top: var(--space-3);
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* ============================================================
   GINKGO DECORATION — watermark + accent
   ============================================================ */
.ginkgo-watermark {
  position: absolute;
  inset: auto;
  pointer-events: none;
  user-select: none;
  color: var(--c-primary);
  opacity: 0.06;
  z-index: 0;
}

.ginkgo-watermark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.section--hero {
  position: relative;
  overflow: hidden;
}

.section--hero .container { position: relative; z-index: 1; }

.section--hero .ginkgo-watermark {
  top: -2rem;
  right: -3rem;
  width: 280px;
  height: 280px;
}

@media (min-width: 768px) {
  .section--hero .ginkgo-watermark {
    width: 380px;
    height: 380px;
    top: -3rem;
    right: -2rem;
  }
}

@media (min-width: 1024px) {
  .section--hero .ginkgo-watermark {
    width: 520px;
    height: 520px;
    top: -4rem;
    right: 2rem;
    opacity: 0.05;
  }
}

/* Eyebrow with hairline lead-in */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--c-accent);
  flex-shrink: 0;
}

/* Decorative ginkgo signature in section corners */
.ginkgo-signature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  opacity: 0.6;
  width: 28px;
  height: 28px;
}

.ginkgo-signature svg { width: 100%; height: 100%; }

/* ============================================================
   BANNER — ginkgo overlay
   ============================================================ */
.banner {
  position: relative;
  overflow: hidden;
}

.banner .container { position: relative; z-index: 1; }

.banner__ginkgo {
  position: absolute;
  pointer-events: none;
  user-select: none;
  color: var(--c-surface);
  opacity: 0.08;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
}

@media (min-width: 768px) {
  .banner__ginkgo {
    width: 480px;
    height: 480px;
  }
}

@media (min-width: 1024px) {
  .banner__ginkgo {
    width: 620px;
    height: 620px;
    opacity: 0.07;
  }
}

.banner__ginkgo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================================
   SERVICE GRID (cards with images) — index.html
   ============================================================ */
.service-grid {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
  border-top: var(--bw-hairline) solid var(--c-line);
  padding-top: var(--space-7);
}

@media (min-width: 600px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--c-ink);
  padding: 0;
  background: transparent;
  border: 0;
  position: relative;
  transition: transform var(--hover-dur) var(--ease-out);
}

.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-4px);
  color: var(--c-primary);
}

.service-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-line);
}

.service-card__media picture,
.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__media img {
  filter: saturate(0.85);
  transition: transform var(--hover-dur) var(--ease-out),
              filter var(--hover-dur) var(--ease-out);
}

.service-card:hover .service-card__media img,
.service-card:focus-visible .service-card__media img {
  transform: scale(1.03);
  filter: saturate(1);
}

.service-card__num {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  font-family: var(--ff-serif);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-surface);
  background: rgba(30, 30, 28, 0.6);
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-card__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  margin: 0;
  line-height: var(--lh-snug);
  transition: color var(--hover-dur) var(--ease-out);
}

.service-card__desc {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.5;
}

.service-card__arrow {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--hover-dur) var(--ease-out),
              gap var(--hover-dur) var(--ease-out);
}

.service-card:hover .service-card__arrow,
.service-card:focus-visible .service-card__arrow {
  color: var(--c-primary);
  gap: var(--space-3);
}

/* Hizmetler hero — watermark variant (background full panel) */
.section--services-hero {
  position: relative;
  overflow: hidden;
}

.section--services-hero .ginkgo-watermark {
  width: 460px;
  height: 460px;
  top: 50%;
  right: -8rem;
  transform: translateY(-50%);
  opacity: 0.05;
}

@media (min-width: 1024px) {
  .section--services-hero .ginkgo-watermark {
    width: 680px;
    height: 680px;
    right: -4rem;
  }
}

/* ============================================================
   IMAGE FILTER UTILITIES (soft monochrome / editorial)
   ============================================================ */
.img--soft-mono {
  filter: grayscale(0.6) saturate(0.55) contrast(0.98);
  transition: filter var(--hover-dur) var(--ease-out);
}

.img--soft-mono:hover {
  filter: grayscale(0.3) saturate(0.85) contrast(1);
}

/* Image hover desaturate-to-color reveal */
.img-reveal {
  filter: saturate(0.7);
  transition: filter var(--hover-dur) var(--ease-out);
}

.img-reveal:hover {
  filter: saturate(1);
}

/* ============================================================
   MICRO-INTERACTIONS — links + buttons
   ============================================================ */

/* Animated underline for inline links */
.link-anim {
  position: relative;
  text-decoration: none;
  color: var(--c-primary);
  padding-bottom: 2px;
  display: inline-block;
}

.link-anim::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hover-dur) var(--ease-out),
              background-color var(--hover-dur) var(--ease-out);
}

.link-anim:hover::after,
.link-anim:focus-visible::after {
  transform: scaleX(1);
  background: var(--c-accent);
}

/* Button lift on hover (subtle, respects reduced motion) */
.btn--primary {
  transition: background-color var(--hover-dur) var(--ease-out),
              color var(--hover-dur) var(--ease-out),
              border-color var(--hover-dur) var(--ease-out),
              transform var(--hover-dur) var(--ease-out),
              box-shadow var(--hover-dur) var(--ease-out);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -10px rgba(0, 120, 88, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover,
  .btn--primary:focus-visible {
    transform: none;
    box-shadow: none;
  }
  .service-card:hover,
  .service-card:focus-visible {
    transform: none;
  }
  .service-card:hover .service-card__media img,
  .service-card:focus-visible .service-card__media img {
    transform: none;
  }
}

/* ============================================================
   CONTACT page — ginkgo accent
   ============================================================ */
.section--contact-hero {
  position: relative;
  overflow: hidden;
}

.section--contact-hero .ginkgo-watermark {
  width: 320px;
  height: 320px;
  bottom: -3rem;
  right: -2rem;
  opacity: 0.06;
}

@media (min-width: 1024px) {
  .section--contact-hero .ginkgo-watermark {
    width: 520px;
    height: 520px;
    bottom: -6rem;
    right: 6rem;
    opacity: 0.05;
  }
}

/* ============================================================
   HERO SPLIT GRID — additional wrapper for split layout
   Override the older .hero-split (section) grid rule
   ============================================================ */
section.hero-split {
  display: block;
}

.hero-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-split__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-9);
  }
}

.hero-split__grid > .hero {
  max-width: 36rem;
}

.hero-split__media {
  position: relative;
  margin: 0;
  width: 100%;
}

.hero-split__media picture,
.hero-split__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
}

.hero-split__media img {
  aspect-ratio: 4 / 5;
  filter: saturate(0.9);
  transition: filter var(--hover-dur) var(--ease-out);
}

.hero-split__media:hover img {
  filter: saturate(1);
}

/* ============================================================
   HERO WITH GINKGO (hizmetler + iletişim)
   ============================================================ */
.hero-with-ginkgo {
  position: relative;
  overflow: hidden;
}

.hero-with-ginkgo .container { position: relative; z-index: 1; }

.hero__ginkgo {
  position: absolute;
  pointer-events: none;
  user-select: none;
  color: var(--c-primary);
  opacity: 0.07;
  z-index: 0;
  top: -2rem;
  right: -3rem;
  width: 280px;
  height: 280px;
}

@media (min-width: 768px) {
  .hero__ginkgo {
    width: 400px;
    height: 400px;
    top: -3rem;
    right: -2rem;
  }
}

@media (min-width: 1024px) {
  .hero__ginkgo {
    width: 560px;
    height: 560px;
    top: -4rem;
    right: 4rem;
    opacity: 0.06;
  }
}

.hero__ginkgo--small {
  width: 220px;
  height: 220px;
}

@media (min-width: 1024px) {
  .hero__ginkgo--small {
    width: 380px;
    height: 380px;
  }
}

/* ============================================================
   BANNER ENHANCEMENTS — eyebrow + tagline
   ============================================================ */
.banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}

.banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-surface);
  margin: 0;
}

.banner__eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--c-accent);
  flex-shrink: 0;
}

.banner__quote {
  color: var(--c-surface);
  font-family: var(--ff-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(1.75rem, 2vw + 1rem, 3rem);
  line-height: var(--lh-snug);
  max-width: 22ch;
  margin: 0;
}

.banner__tagline {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-surface);
  max-width: 42ch;
  margin: 0;
}

/* ============================================================
   SERVICES GRID (ol) — index.html visual service cards
   ============================================================ */
.services-grid {
  list-style: none;
  display: grid;
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  margin-top: var(--space-7);
  border-top: var(--bw-hairline) solid var(--c-line);
  padding-top: var(--space-7);
}

@media (min-width: 600px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.service-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--c-ink);
  transition: transform var(--hover-dur) var(--ease-out),
              color var(--hover-dur) var(--ease-out);
}

.service-card__link:hover,
.service-card__link:focus-visible {
  transform: translateY(-4px);
  color: var(--c-primary);
}

.service-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-line);
  margin: 0;
}

.service-card__media picture,
.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__media img {
  filter: saturate(0.82);
  transition: transform 500ms var(--ease-out),
              filter var(--hover-dur) var(--ease-out);
}

.service-card__link:hover .service-card__media img,
.service-card__link:focus-visible .service-card__media img {
  transform: scale(1.04);
  filter: saturate(1);
}

.service-card__num {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--c-surface);
  background: rgba(30, 30, 28, 0.55);
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  padding-top: var(--space-2);
}

.service-card__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  margin: 0;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h3);
}

.service-card__desc {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.5;
}

.service-card__more {
  margin-top: var(--space-2);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--hover-dur) var(--ease-out),
              gap var(--hover-dur) var(--ease-out);
}

.service-card__arrow {
  display: inline-block;
  transition: transform var(--hover-dur) var(--ease-out);
}

.service-card__link:hover .service-card__more,
.service-card__link:focus-visible .service-card__more {
  color: var(--c-primary);
  gap: var(--space-3);
}

.service-card__link:hover .service-card__arrow,
.service-card__link:focus-visible .service-card__arrow {
  transform: translateX(3px);
}

/* ============================================================
   GLOBAL MICRO-INTERACTIONS — links + images
   ============================================================ */

/* Inline article links: animated underline */
main p a,
.cta-block__meta a,
.footer__nav a,
.footer__contact a {
  position: relative;
  text-decoration: none;
  color: var(--c-primary);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: color var(--hover-dur) var(--ease-out),
              background-size var(--hover-dur) var(--ease-out);
}

main p a:hover,
main p a:focus-visible,
.cta-block__meta a:hover,
.cta-block__meta a:focus-visible,
.footer__nav a:hover,
.footer__nav a:focus-visible,
.footer__contact a:hover,
.footer__contact a:focus-visible {
  color: var(--c-primary-dark);
}

/* Side-by-side image hover: saturate to full */
.side-by-side__media img,
.service-section__media img {
  filter: saturate(0.9);
  transition: filter 500ms var(--ease-out);
}

.side-by-side:hover .side-by-side__media img,
.service-section:hover .service-section__media img {
  filter: saturate(1);
}

/* Logo hover */
.nav__brand,
.footer__brand-mark {
  transition: opacity var(--hover-dur) var(--ease-out);
}

.nav__brand:hover,
.nav__brand:focus-visible,
.footer__brand-mark:hover,
.footer__brand-mark:focus-visible {
  opacity: 0.78;
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .service-card__link:hover,
  .service-card__link:focus-visible,
  .service-card__link:hover .service-card__media img,
  .service-card__link:focus-visible .service-card__media img,
  .service-card__link:hover .service-card__arrow,
  .service-card__link:focus-visible .service-card__arrow {
    transform: none;
  }
}

/* ============================================================
   POLISH PASS — service-card num inside media, manifesto deco,
   enriched CTA, footer slogan band, contact hero meta
   ============================================================ */

/* Service card sayı sayacı — şimdi media içinde, daha güçlü tipografi */
.service-card__body { position: static; padding-top: 0; }

.service-card__media .service-card__num {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.125rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--c-surface);
  background: transparent;
  padding: 0;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.service-card__media .service-card__num::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--c-surface);
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.85;
}

/* Service title bigger now that num is moved */
.service-card__title {
  margin-top: var(--space-3);
}

/* Manifesto decorative letter background */
.manifesto-section {
  position: relative;
  overflow: hidden;
}

.manifesto-section .container { position: relative; z-index: 1; }

.manifesto-deco {
  position: absolute;
  inset: -2rem auto auto -1rem;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(14rem, 30vw, 30rem);
  line-height: 0.85;
  color: var(--c-primary);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

@media (min-width: 1024px) {
  .manifesto-deco {
    inset: -3rem auto auto -3rem;
    opacity: 0.04;
  }
}

/* Enriched CTA block: ginkgo + structured meta */
.cta-block--enriched {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-7);
}

.cta-block__ginkgo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 320px;
  height: 320px;
  color: var(--c-primary);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

@media (min-width: 1024px) {
  .cta-block__ginkgo {
    width: 460px;
    height: 460px;
    opacity: 0.05;
  }
}

.cta-block--enriched > * { position: relative; z-index: 1; }

.cta-block__lede {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--c-ink-soft);
  max-width: 40ch;
  margin-inline: auto;
  margin-block: var(--space-3) var(--space-6);
}

.cta-block__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.cta-block__email {
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--c-primary);
  padding-bottom: 2px;
  transition: color var(--hover-dur) var(--ease-out),
              border-color var(--hover-dur) var(--ease-out);
}

.cta-block__email:hover,
.cta-block__email:focus-visible {
  color: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
}

.cta-block__sep {
  color: var(--c-ink-soft);
  opacity: 0.5;
}

.cta-block__loc { color: var(--c-ink-soft); }

/* Contact hero meta — sade tek satır */
.contact-hero__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.contact-hero__email {
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--c-primary);
  padding-bottom: 2px;
  transition: color var(--hover-dur) var(--ease-out);
}

.contact-hero__email:hover,
.contact-hero__email:focus-visible {
  color: var(--c-primary-dark);
}

.contact-hero__sep { color: var(--c-ink-soft); opacity: 0.5; }
.contact-hero__loc { color: var(--c-ink-soft); }

/* Footer slogan band */
.footer__slogan-band {
  background: var(--c-primary);
  color: var(--c-surface);
  padding-block: clamp(3rem, 6vw, 6rem);
  position: relative;
  overflow: hidden;
}

.footer__slogan {
  font-family: var(--ff-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(2.25rem, 5vw + 1rem, 5.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0;
  text-align: left;
  max-width: 22ch;
}

.footer__slogan-italic {
  font-style: italic;
  color: var(--c-surface);
}

/* Side-by-side and service-section images get subtle inner border */
.side-by-side__media picture,
.service-section__media picture {
  position: relative;
  overflow: hidden;
}

.side-by-side__media picture::after,
.service-section__media picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(30, 30, 28, 0.05);
}

/* Eyebrow line color now matches primary on darker bg (cta-block) */
.cta-block--enriched .eyebrow {
  color: var(--c-ink-soft);
}

/* ============================================================
   FOOTER REDESIGN — slogan band + body + bottom (3 katmanlı)
   ============================================================ */

/* 1) Slogan bant — mevcut yapıyı koru, alt boşluk ekle */
.footer__slogan-band {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 7rem);
  margin-bottom: 0;
}

/* Dekoratif curve effect — bant alt köşeleri yumuşatılmış */
.footer__slogan-band::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: clamp(2rem, 4vw, 4rem);
  background: var(--c-bg);
  border-top-left-radius: clamp(2rem, 6vw, 5rem);
  border-top-right-radius: clamp(2rem, 6vw, 5rem);
  pointer-events: none;
}

/* 2) Footer body — cream zemin, dolu padding */
.footer__body {
  background: var(--c-bg);
  padding-block: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 4vw, 4rem);
  position: relative;
}

.footer__body::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: var(--c-line);
  opacity: 0;
}

/* 3) Footer grid — 3 kolon, brand kolonu geniş */
.site-footer .footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .site-footer .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6) var(--space-7);
  }
}

@media (min-width: 960px) {
  .site-footer .footer__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-8);
  }
}

/* Brand column */
.site-footer .footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 32rem;
}

.site-footer .footer__brand-mark {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
  background: none;
  border: 0;
}

.site-footer .footer__brand-mark:hover,
.site-footer .footer__brand-mark:focus-visible {
  opacity: 0.78;
}

.site-footer .footer__tagline {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink-soft);
  max-width: 36ch;
  margin: 0;
}

.site-footer .footer__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--c-primary);
  padding-block: var(--space-2);
  transition: color var(--hover-dur) var(--ease-out),
              border-color var(--hover-dur) var(--ease-out),
              gap var(--hover-dur) var(--ease-out);
}

.site-footer .footer__cta:hover,
.site-footer .footer__cta:focus-visible {
  color: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  gap: var(--space-4);
}

.footer__cta-arrow {
  display: inline-block;
  transition: transform var(--hover-dur) var(--ease-out);
}

.site-footer .footer__cta:hover .footer__cta-arrow,
.site-footer .footer__cta:focus-visible .footer__cta-arrow {
  transform: translateX(3px);
}

/* Nav + Contact columns */
.site-footer .footer__nav,
.site-footer .footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer .footer__col-title {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-line);
}

.site-footer .footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer .footer__list a {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  padding-bottom: 2px;
  transition: color var(--hover-dur) var(--ease-out),
              background-size var(--hover-dur) var(--ease-out);
}

.site-footer .footer__list a:hover,
.site-footer .footer__list a:focus-visible {
  color: var(--c-primary);
  background-size: 100% 1px;
}

.site-footer .footer__email { color: var(--c-primary) !important; }

.site-footer .footer__location,
.site-footer .footer__hours {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-ink-soft);
}

.site-footer .footer__hours { font-size: var(--fs-small); }

/* 4) Bottom strip — copy ↔ legal */
.site-footer .footer__bottom {
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  padding-block: var(--space-5);
}

.site-footer .footer__bottom-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

@media (min-width: 600px) {
  .site-footer .footer__bottom-inner {
    flex-direction: row;
    align-items: center;
  }
}

.site-footer .footer__copy,
.site-footer .footer__legal {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  margin: 0;
}

.site-footer .footer__legal em {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--c-ink-soft);
}

/* Mütevazı tasarımcı kredisi — sağ alt köşe */
.site-footer .footer__credit-sep {
  margin-inline: 0.5rem;
  color: var(--c-line);
}

.site-footer .footer__credit {
  color: var(--c-ink-soft);
}

.site-footer .footer__credit a {
  color: var(--c-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 1px;
  transition: color var(--hover-dur) var(--ease-out),
              border-color var(--hover-dur) var(--ease-out);
}

.site-footer .footer__credit a:hover,
.site-footer .footer__credit a:focus-visible {
  color: var(--c-primary);
  border-color: var(--c-primary);
}

/* ============================================================
   GINKGO DECORATIVE — TAM yaprak silüeti (gövde dahil)
   gingko1 (4).png'den flatten edildi. Renk varyantları:
   - primary: #007858 (cream zemin için)
   - white: koyu yeşil banner için
   ============================================================ */
.banner__ginkgo,
.hero__ginkgo,
.cta-block__ginkgo,
.ginkgo-watermark {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  display: block;
}

.banner__ginkgo {
  background-image: url("../images/logo/ginkgo-silhouette-white.png");
}

.hero__ginkgo,
.cta-block__ginkgo,
.ginkgo-watermark {
  background-image: url("../images/logo/ginkgo-silhouette-primary.png");
}

/* ============================================================
   IMAGE CORNERS — rounded photos everywhere
   ============================================================ */
:root {
  --radius-photo: 14px;
}

@media (min-width: 768px) {
  :root { --radius-photo: 18px; }
}

.side-by-side__media,
.side-by-side__media picture,
.side-by-side__media img,
.service-section__media,
.service-section__media picture,
.service-section__media img,
.service-card__media,
.service-card__media picture,
.service-card__media img,
.hero-split__media,
.hero-split__media picture,
.hero-split__media img,
.figure img {
  border-radius: var(--radius-photo);
  overflow: hidden;
}

/* The inner img hairline overlay rule needs the same rounded clip */
.side-by-side__media picture::after,
.service-section__media picture::after {
  border-radius: var(--radius-photo);
}

/* ============================================================
   GINKGO DECOR — sinematik 3-yaprak sistemi
   ------------------------------------------------------------
   Yaklaşım: (C) hero ginkgo + scroll evolve + (A) cinematic fall
   entrance + (B) pointer-driven sway.
   - 3 yaprak: hero (büyük lead), mid-page (orta), bottom (return motif)
   - Yapraklar inline SVG (mask değil) — file:// güvenli, currentColor.
   - Animasyon transform/opacity only; will-change yönetildi.
   ============================================================ */
.ginkgo-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  contain: layout paint;
}

main { position: relative; }
main > .container,
main > section,
main > div:not(.ginkgo-bg) { position: relative; z-index: 1; }

.ginkgo-bg__leaf {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: var(--leaf-opacity, 0.5);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform:
    translate3d(var(--leaf-mx, 0px), calc(var(--leaf-fall, 0px) + var(--leaf-my, 0px) + var(--leaf-sy, 0px)), 0)
    rotate(calc(var(--leaf-rot-base, 0deg) + var(--leaf-rot-scroll, 0deg) + var(--leaf-tilt, 0deg)));
  transition: transform 1600ms cubic-bezier(.16,.84,.34,1);
}

/* will-change yalnızca parallax'ın aktif olduğu masaüstünde — mobilde gereksiz GPU katmanı oluşturmaz */
@media (min-width: 768px) {
  .ginkgo-bg__leaf { will-change: transform; }
}

.ginkgo-bg__leaf svg { display: none; }

/* Reveal final state: transform fall-in clears (--leaf-fall -> 0)
   JS bu sınıfı staggered timeline ile ekler. */
.ginkgo-bg__leaf.is-revealed {
  --leaf-fall: 0px;
}

/* is-live: scroll/mouse güncellemeleri için hızlı transition */
.ginkgo-bg__leaf.is-live {
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   3 YAPRAK — DESKTOP CANONICAL LAYOUT (≥1024px)
   ============================================================ */

/* 01 — HERO LEAF: sayfa açılışının ana yıldızı. Hero'nun sağ üstünde
   büyük, scroll'da sola+aşağı kayar ve yavaşça döner. */
.ginkgo-bg__leaf--hero {
  top: -2vh;
  right: -6vw;
  width: clamp(280px, 40vw, 580px);
  aspect-ratio: 1029 / 980;
  background-image: url("../images/logo/leaf-hero.webp"), url("../images/logo/leaf-hero.png");
  --leaf-rot-base: 24deg;
  --leaf-opacity: 0.55;
}

/* 02 — MID LEAF: sayfanın ortasında, sol kenardan giriyor.
   Scroll ile yukarıdan iniyor ve karşı yöne dönüyor. */
.ginkgo-bg__leaf--mid {
  top: 46%;
  left: -6vw;
  width: clamp(200px, 26vw, 380px);
  aspect-ratio: 321 / 303;
  background-image: url("../images/logo/leaf-mid.webp"), url("../images/logo/leaf-mid.png");
  --leaf-rot-base: -18deg;
  --leaf-opacity: 0.55;
}

/* 03 — RETURN LEAF: footer'a yakın, küçük, sağdan kayar.
   Sayfa sonunda return motif olarak hero leaf'i çağrıştırır. */
.ginkgo-bg__leaf--return {
  bottom: 4%;
  right: -3vw;
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 558 / 646;
  background-image: url("../images/logo/leaf-return.webp"), url("../images/logo/leaf-return.png");
  --leaf-rot-base: 14deg;
  --leaf-opacity: 0.65;
}

/* ============================================================
   TABLET (768-1023) — 3 yaprak korunur, biraz küçülür
   ============================================================ */
@media (max-width: 1023px) {
  .ginkgo-bg__leaf--hero {
    width: clamp(220px, 36vw, 360px);
    right: -10vw;
    top: 0;
  }
  .ginkgo-bg__leaf--mid {
    width: clamp(160px, 28vw, 240px);
    top: 50%;
    left: -12vw;
  }
  .ginkgo-bg__leaf--return {
    width: clamp(140px, 22vw, 220px);
    right: -8vw;
  }
}

/* ============================================================
   MOBIL (≤767) — 2 yaprak, statik (no fall-in, no parallax)
   ============================================================ */
@media (max-width: 767px) {
  .ginkgo-bg__leaf {
    transition: none;
    transform: rotate(var(--leaf-rot-base, 0deg));
    --leaf-fall: 0px;
  }
  .ginkgo-bg__leaf--mid { display: none; }
  .ginkgo-bg__leaf--hero {
    width: 240px;
    right: -16vw;
    top: 2vh;
    --leaf-opacity: 0.40;
  }
  .ginkgo-bg__leaf--return {
    width: 200px;
    right: -14vw;
    bottom: 8%;
    --leaf-opacity: 0.55;
  }
}

/* ============================================================
   Tetikleyici click splash — 4-6 küçük yaprak yayar (sadece desktop)
   Klikleyince hero-leaf etrafında kısa bir "yaprak titremesi"
   yaratırız. Bu DOM'a JS tarafından enjekte edilir.
   ============================================================ */
.ginkgo-burst {
  position: absolute;
  pointer-events: none;
  width: 28px;
  height: 34px;
  color: var(--c-primary);
  opacity: 0;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0) rotate(0deg);
}
.ginkgo-burst svg { width: 100%; height: 100%; display: block; }
.ginkgo-burst.is-flying {
  animation: ginkgoBurst 1400ms cubic-bezier(.18,.7,.22,1) forwards;
}

@keyframes ginkgoBurst {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4); }
  18%  { opacity: 0.6;  }
  100% { opacity: 0;
         transform:
           translate3d(var(--burst-tx, 80px), var(--burst-ty, -120px), 0)
           rotate(var(--burst-rot, 220deg))
           scale(1); }
}

/* ============================================================
   Reduced motion: statik final pozisyon, transition kapalı
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ginkgo-bg__leaf {
    transition: none;
    transform: rotate(var(--leaf-rot-base, 0deg));
    --leaf-fall: 0px;
  }
  .ginkgo-bg__leaf.is-live { transition: none; }
  .ginkgo-burst,
  .ginkgo-burst.is-flying { animation: none; opacity: 0; }
}

/* ============================================================
   GAMIFICATION — yaprağı gölgeye sürükle → iletişim formu açılır
   ============================================================ */
.cta-block--game {
  position: relative;
}

.cta-game {
  --stage-h: 320px;
  --leaf-size: 180px;
  position: relative;
  margin: 0 auto var(--space-7);
  max-width: 720px;
  user-select: none;
  -webkit-user-select: none;
}

@media (min-width: 768px) {
  .cta-game {
    --stage-h: 380px;
    --leaf-size: 220px;
  }
}

.cta-game__stage {
  position: relative;
  width: 100%;
  height: var(--stage-h);
  touch-action: none;
}

/* Shadow — drop target. Sol-orta, soluk, ginkgo silueti. */
.cta-game__shadow {
  position: absolute;
  top: 50%;
  left: 22%;
  transform: translate(-50%, -50%);
  width: var(--leaf-size);
  height: var(--leaf-size);
  background-image: url("../images/logo/ginkgo-silhouette-primary.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.13;
  pointer-events: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.cta-game__shadow.is-target {
  opacity: 0.28;
  transform: translate(-50%, -50%) scale(1.05);
}

.cta-game__shadow.is-claimed {
  opacity: 0.45;
  transform: translate(-50%, -50%) scale(1.1);
  animation: shadow-pulse 600ms cubic-bezier(.2,.7,.2,1);
}

@keyframes shadow-pulse {
  0%   { transform: translate(-50%, -50%) scale(1.05); }
  40%  { transform: translate(-50%, -50%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(1.1); }
}

/* Leaf — draggable, sağda. Sonbahar sarısı. */
.cta-game__leaf {
  position: absolute;
  top: 50%;
  right: 12%;
  transform: translate(50%, -50%) rotate(8deg);
  width: var(--leaf-size);
  height: var(--leaf-size);
  background: url("../images/logo/leaf-return.webp") center / contain no-repeat;
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 8px 18px rgba(30, 30, 28, 0.18));
  transition:
    transform 320ms cubic-bezier(.2,.7,.2,1),
    filter 200ms var(--ease-out),
    opacity 200ms var(--ease-out);
  animation: leaf-idle 4s ease-in-out infinite;
}

.cta-game__leaf:hover {
  filter: drop-shadow(0 12px 24px rgba(30, 30, 28, 0.24));
}

.cta-game__leaf.is-dragging {
  cursor: grabbing;
  transition: none;
  animation: none;
  filter: drop-shadow(0 18px 32px rgba(30, 30, 28, 0.30));
  z-index: 2;
}

.cta-game__leaf.is-snapping {
  transition:
    transform 480ms cubic-bezier(.34,1.6,.6,1),
    opacity 480ms var(--ease-out);
}

.cta-game__leaf.is-returning {
  transition:
    transform 520ms cubic-bezier(.34,1.4,.5,1);
}

.cta-game__leaf.is-claimed {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.6);
  pointer-events: none;
}

.cta-game__leaf:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 6px;
  border-radius: 4px;
}

@keyframes leaf-idle {
  0%, 100% { transform: translate(50%, -50%) rotate(8deg); }
  50%      { transform: translate(50%, -54%) rotate(11deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-game__leaf { animation: none; }
}

/* Hint */
.cta-game__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) auto 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  opacity: 0.85;
  transition: opacity 320ms var(--ease-out);
  text-align: center;
}

.cta-game__hint-arrow {
  display: inline-block;
  animation: hint-bounce 1.6s ease-in-out infinite;
}

@keyframes hint-bounce {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-3px, -3px); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-game__hint-arrow { animation: none; }
}

.cta-game.is-claimed .cta-game__hint {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   LEAF MODAL — yaprak gölgeye düşünce açılan iletişim formu
   ============================================================ */
.leaf-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 100);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

@media (min-width: 768px) {
  .leaf-modal { align-items: center; }
}

.leaf-modal[aria-hidden="false"] {
  pointer-events: auto;
}

.leaf-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 28, 0.55);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  cursor: pointer;
}

.leaf-modal[aria-hidden="false"] .leaf-modal__backdrop {
  opacity: 1;
}

.leaf-modal__panel {
  position: relative;
  background: var(--c-bg);
  width: min(100%, 560px);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-top-left-radius: clamp(16px, 3vw, 28px);
  border-top-right-radius: clamp(16px, 3vw, 28px);
  transform: translateY(40px);
  opacity: 0;
  transition:
    transform 460ms cubic-bezier(.2,.85,.3,1),
    opacity 320ms var(--ease-out);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .leaf-modal__panel {
    border-radius: clamp(20px, 2vw, 28px);
    transform: translateY(20px) scale(0.98);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
  }
}

.leaf-modal[aria-hidden="false"] .leaf-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.leaf-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--c-ink-soft);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

.leaf-modal__close:hover,
.leaf-modal__close:focus-visible {
  background: var(--c-line);
  color: var(--c-ink);
}

.leaf-modal__eyebrow { margin-bottom: var(--space-3); }

.leaf-modal__title {
  font-family: var(--ff-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
}

.leaf-modal__lede {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-6);
  max-width: 42ch;
}

.leaf-modal__form { display: flex; flex-direction: column; gap: var(--space-4); }

.leaf-modal__field { display: flex; flex-direction: column; gap: var(--space-2); }

.leaf-modal__field label {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.leaf-modal__field input,
.leaf-modal__field textarea {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  padding: var(--space-3) 0;
  color: var(--c-ink);
  outline: none;
  transition: border-color 200ms var(--ease-out);
  resize: vertical;
}

.leaf-modal__field input:focus-visible,
.leaf-modal__field textarea:focus-visible {
  border-bottom-color: var(--c-primary);
}

.leaf-modal__actions { margin-top: var(--space-3); }

.leaf-modal__success {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(0, 120, 88, 0.08);
  border-left: 2px solid var(--c-primary);
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  color: var(--c-primary);
}

/* ============================================================
   TESTIMONIAL WRAP — kart etrafında saçılan mini ginkgo yaprakları
   ============================================================ */
.testimonial-wrap {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.testimonial-leaf {
  position: absolute;
  pointer-events: none;
  user-select: none;
  background-image: url("../images/logo/leaf-deco-1.webp"); /* default — per-leaf override altta */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 1 / 1;
  z-index: 3;
  opacity: 0;
  transform: scale(0.6) rotate(var(--rot, 0deg));
  will-change: transform, opacity;
  transition:
    opacity 900ms cubic-bezier(.18,.7,.22,1),
    transform 900ms cubic-bezier(.18,.7,.22,1);
}

/* 5 farklı yaprak tipinin 12 pozisyona organic dağılımı:
   deco-1 koyu zeytin duo · deco-2 detaylı yeşil · deco-3 sonbahar sarı (accent)
   deco-4 açık parlak · deco-5 3'lü watercolor */
.testimonial-leaf--01,
.testimonial-leaf--06,
.testimonial-leaf--11 { background-image: url("../images/logo/leaf-deco-1.webp"); }

.testimonial-leaf--04,
.testimonial-leaf--10 { background-image: url("../images/logo/leaf-deco-2.webp"); }

.testimonial-leaf--03,
.testimonial-leaf--07,
.testimonial-leaf--12 { background-image: url("../images/logo/leaf-deco-3.webp"); }

.testimonial-leaf--02,
.testimonial-leaf--08 { background-image: url("../images/logo/leaf-deco-4.webp"); }

.testimonial-leaf--05,
.testimonial-leaf--09 { background-image: url("../images/logo/leaf-deco-5.webp"); }

/* Kart viewport'a girdiğinde yapraklar fade-in + drift loop başlasın
   Belirgin görünüm için scale 1.4 + opacity 0.7 (custom değerleri override eder) */
.testimonial-wrap.is-visible .testimonial-leaf {
  opacity: 0.70;
  transform: scale(1.4) rotate(var(--rot, 0deg));
  animation: leaf-drift var(--drift-dur, 6s) ease-in-out var(--drift-delay, 0s) infinite;
}

/* Drift — yaprakların yavaşça nefes alması (scale 1.4 base'ten dalgalanma) */
@keyframes leaf-drift {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1.4); }
  50%      { transform: translate(var(--drift-x, 4px), var(--drift-y, -6px)) rotate(calc(var(--rot, 0deg) + var(--drift-rot, 5deg))) scale(1.46); }
}

/* 12 yaprak: kart kenarlarından DIŞARI taşar — kart kenarlarında saçılmış görünüm.
   Negatif top/right/bottom/left ile kart bbox'unun dışına yarısı taşar.
   Kart üstte (DOM sırasına göre), yaprağın yarısı kart altında saklı kalır
   ama yarısı dışarıda parıldar → "saçılan" hissi.
*/
.testimonial-leaf--01 {
  top: -28px; left: -22px;
  width: 42px; aspect-ratio: 1;
  --rot: -25deg; --target-opacity: 0.42;
  --drift-x: 4px; --drift-y: -6px; --drift-rot: 6deg;
  --drift-dur: 7s;  --drift-delay: 0s;
}
.testimonial-leaf--02 {
  top: -34px;  left: 26%;
  width: 30px;
  --rot: 14deg; --target-opacity: 0.36;
  --drift-x: -3px; --drift-y: -4px; --drift-rot: -4deg;
  --drift-dur: 5.5s; --drift-delay: 0.4s;
}
.testimonial-leaf--03 {
  top: -26px;   left: 58%;
  width: 34px;
  --rot: -8deg; --target-opacity: 0.32;
  --drift-x: 5px; --drift-y: -3px; --drift-rot: 4deg;
  --drift-dur: 6.2s; --drift-delay: 1.1s;
}
.testimonial-leaf--04 {
  top: -32px;  right: -18px;
  width: 46px;
  --rot: 28deg; --target-opacity: 0.42;
  --drift-x: -4px; --drift-y: -5px; --drift-rot: -5deg;
  --drift-dur: 8s;  --drift-delay: 0.2s;
}
.testimonial-leaf--05 {
  top: 30%;  right: -32px;
  width: 38px;
  --rot: -18deg; --target-opacity: 0.40;
  --drift-x: 4px; --drift-y: 4px; --drift-rot: 5deg;
  --drift-dur: 5.8s; --drift-delay: 0.7s;
}
.testimonial-leaf--06 {
  top: 70%;  right: -24px;
  width: 32px;
  --rot: 10deg; --target-opacity: 0.34;
  --drift-x: -3px; --drift-y: 5px; --drift-rot: -3deg;
  --drift-dur: 6.8s; --drift-delay: 1.4s;
}
.testimonial-leaf--07 {
  bottom: -28px; right: 10%;
  width: 42px;
  --rot: 32deg; --target-opacity: 0.40;
  --drift-x: 3px; --drift-y: 6px; --drift-rot: 4deg;
  --drift-dur: 7.5s; --drift-delay: 0.5s;
}
.testimonial-leaf--08 {
  bottom: -34px;  right: 42%;
  width: 28px;
  --rot: -20deg; --target-opacity: 0.32;
  --drift-x: -4px; --drift-y: 3px; --drift-rot: -4deg;
  --drift-dur: 5.2s; --drift-delay: 1.8s;
}
.testimonial-leaf--09 {
  bottom: -26px; left: 14%;
  width: 36px;
  --rot: 18deg; --target-opacity: 0.38;
  --drift-x: 4px; --drift-y: 5px; --drift-rot: 5deg;
  --drift-dur: 6.5s; --drift-delay: 0.9s;
}
.testimonial-leaf--10 {
  bottom: 28%; left: -28px;
  width: 44px;
  --rot: -28deg; --target-opacity: 0.42;
  --drift-x: 5px; --drift-y: 4px; --drift-rot: 4deg;
  --drift-dur: 7.2s; --drift-delay: 1.2s;
}
.testimonial-leaf--11 {
  top: 55%;  left: -34px;
  width: 30px;
  --rot: 22deg; --target-opacity: 0.34;
  --drift-x: -4px; --drift-y: -4px; --drift-rot: -5deg;
  --drift-dur: 5.6s; --drift-delay: 0.3s;
}
.testimonial-leaf--12 {
  top: 18%;  left: -24px;
  width: 34px;
  --rot: -12deg; --target-opacity: 0.36;
  --drift-x: 3px; --drift-y: -5px; --drift-rot: 5deg;
  --drift-dur: 6.4s; --drift-delay: 1.6s;
}

/* Mobile: tüm yapraklar görünür ama animasyon kapalı + biraz küçük */
@media (max-width: 767px) {
  .testimonial-leaf {
    animation: none;
  }
  /* Tüm yaprakların boyutunu mobilde %60'a çek (orijinal CSS width değerlerini koru) */
  .testimonial-wrap.is-visible .testimonial-leaf {
    transform: scale(0.95) rotate(var(--rot, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-leaf {
    animation: none;
    opacity: var(--target-opacity, 0.22);
    transform: rotate(var(--rot, 0deg));
  }
}

/* ============================================================
   TESTIMONIAL — Beyza quote card (güven katmanı)
   Ana sayfada ve Hakkımızda'da kullanılır. Kare portre + alıntı +
   hikâye + vurgu cümlesi + isim. Etkileyici çerçeveli kart.
   ============================================================ */
.testimonial {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  box-shadow: 0 12px 40px -28px rgba(0, 120, 88, 0.22);
  transition: box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
  overflow: hidden;
}

.testimonial:hover {
  box-shadow: 0 22px 60px -32px rgba(0, 120, 88, 0.32);
  transform: translateY(-2px);
}

.testimonial__inner {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 768px) {
  .testimonial__inner {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

@media (min-width: 1024px) {
  .testimonial__inner {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
  }
}

.testimonial__media {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-line);
}

.testimonial__media picture,
.testimonial__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(30, 30, 28, 0.08);
  pointer-events: none;
}

.testimonial__body {
  position: relative;
  padding-top: var(--space-5);
}

/* Dekoratif büyük tırnak */
.testimonial__mark {
  position: absolute;
  top: -0.45em;
  left: -0.15em;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(5.5rem, 8vw, 9rem);
  line-height: 0.8;
  color: var(--c-primary);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

.testimonial__quote {
  margin: 0 0 var(--space-5);
  padding: 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(1.375rem, 1.4vw + 0.8rem, 1.875rem);
  line-height: 1.35;
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  position: relative;
  z-index: 1;
}

.testimonial__quote p { margin: 0; }

.testimonial__story {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--c-ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 56ch;
}

.testimonial__story p { margin: 0; }

.testimonial__highlight {
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(1.125rem, 0.8vw + 0.7rem, 1.375rem);
  line-height: 1.4;
  color: var(--c-primary);
  border-left: 2px solid var(--c-accent);
  background: linear-gradient(to right, rgba(112, 192, 64, 0.06), transparent 60%);
}

.testimonial__closer {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  margin: 0 0 var(--space-5);
  max-width: 56ch;
}

.testimonial__cite {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
  margin: 0;
}

.testimonial__cite cite {
  font-family: var(--ff-serif);
  font-style: normal;
  font-weight: var(--fw-medium);
  font-size: 1.125rem;
  color: var(--c-ink);
}

.testimonial__cite > span {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial,
  .testimonial:hover {
    transform: none;
    transition: none;
  }
  /* Kart etrafındaki saçılan yapraklar reduced-motion'da reveal hareketi de yapmasın */
  .testimonial-leaf {
    transition: none;
  }
}

/* ============================================================
   FORCED COLORS (Windows High Contrast)
   ============================================================ */
@media (forced-colors: active) {
  .btn,
  .nav__cta {
    border: 1px solid CanvasText;
  }

  .nav__link[aria-current="page"]::after {
    background: CanvasText;
  }

  .service-item__link,
  .link-read {
    border-bottom-color: CanvasText;
  }

  :focus-visible {
    outline-color: CanvasText;
  }
}