/* =========================================================================
   Tan Craft — yön: warm-craft
   Tohum 1229 · yön 1229 % 12 = 5 · font (1229/7) % 3 = 1 · hue 45 + 5 = 50
   Palet: terrakota (50) + zeytin (155), kum yüzey (72). Açık tema.
   İmza: asimetrik organik yarıçap · grain dokusu · dalgalı el çizimi alt çizgi
   ========================================================================= */

/* 1 ── TOKENS ──────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* --- yüzeyler: kum. Nötr hue = 70 + kaymanın 1/3'ü ≈ 72 --- */
  --bg:        oklch(95.5% 0.020 72);
  --bg-elev:   oklch(98.5% 0.012 72);
  --bg-sunken: oklch(91.5% 0.026 72);

  /* --- metin: sıcak koyu kahve. fg/bg ΔL ≈ 71 → kontrast bol --- */
  --fg:        oklch(24% 0.028 50);
  --fg-muted:  oklch(45% 0.030 50);   /* ΔL 50 → ≥ 4.5:1 */
  --fg-subtle: oklch(58% 0.028 50);   /* ΔL 37 → ≥ 3:1, sadece meta */

  /* --- marka: terrakota. Açık zeminde L düşük tutulur (ΔL 44) --- */
  --brand:        oklch(51% 0.145 50);
  --brand-strong: oklch(42% 0.150 50);
  --brand-soft:   oklch(51% 0.145 50 / 0.10);
  --brand-wash:   oklch(51% 0.145 50 / 0.05);
  --brand-fg:     oklch(99% 0.004 72);

  /* --- aksan: zeytin. Ana hue'dan 105° uzak --- */
  --accent:      oklch(42% 0.090 155);
  --accent-soft: oklch(42% 0.090 155 / 0.12);
  --accent-fg:   oklch(98% 0.010 155);

  /* --- çizgi & odak --- */
  --line:        oklch(30% 0.035 50 / 0.16);
  --line-strong: oklch(30% 0.035 50 / 0.32);
  --ring:        var(--brand);

  /* --- tipografi --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Karla", system-ui, -apple-system, sans-serif;

  --weight-display:   600;
  --leading-display:  1.04;
  --tracking-display: -0.022em;

  /* --- geometri: üç yarıçap (12 / 24 / 40) + pill --- */
  --radius-xs: 12px;
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-full: 999px;
  /* yönün imzası: köşeler asla simetrik değil */
  --radius-organic:     40px 12px 40px 12px;
  --radius-organic-alt: 12px 40px 12px 40px;

  --border-w: 1px;

  /* --- gölge: tek dil, sıcak ve yumuşak --- */
  --shadow-sm: 0 2px 6px -2px oklch(40% 0.06 55 / 0.18);
  --shadow-md: 0 14px 30px -20px oklch(40% 0.08 55 / 0.40);
  --shadow-lg: 0 30px 64px -36px oklch(38% 0.09 55 / 0.48);

  --header-h: 4.75rem;
}

/* 2 ── GÖVDE / YÖN İMZASI ─────────────────────────────────────────────── */

body {
  background: var(--bg);
  font-weight: 400;
}

/* Sıcak ışık sızıntısı — iki köşeden, çok düşük yoğunlukta */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 38% at 92% -8%, oklch(58% 0.14 50 / 0.16), transparent 70%),
    radial-gradient(44% 32% at -8% 10%, oklch(45% 0.09 155 / 0.11), transparent 70%);
}

/* Grain — düz renkli zemine kâğıt dokusu verir (yönün imzası) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 { color: var(--fg); }

/* --leading-display (1.04) dev hero başlığı için doğru; küçük başlıklarda
   satırlar birbirine girer. Kademeye göre gevşetiliyor. */
.h2 { line-height: 1.14; }
.h3, .card__title, .service__title, .process__title, .faq__q,
.post-card__title, .panel__title, .quote__text, .cta__title { line-height: 1.25; letter-spacing: -0.012em; }

/* Dalgalı el çizimi alt çizgi — maske ile boyanır, renk token'dan gelir */
/* inline-block şart: satır içi (inline) bir elemanda mutlak konumlu ::after,
   satır kutusu parçalandığında yanlış satıra düşer. */
.u-wave {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.u-wave::after {
  content: "";
  position: absolute;
  inset-inline: -0.06em;
  inset-block-end: -0.2em;
  block-size: 0.3em;
  background: var(--brand);
  opacity: 0.72;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='8' viewBox='0 0 36 8'%3E%3Cpath d='M0 5c3-4.5 6-4.5 9 0s6 4.5 9 0 6-4.5 9 0 6 4.5 9 0' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='8' viewBox='0 0 36 8'%3E%3Cpath d='M0 5c3-4.5 6-4.5 9 0s6 4.5 9 0 6-4.5 9 0 6 4.5 9 0' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: 1.35em 0.3em;
          mask-size: 1.35em 0.3em;
}

.eyebrow { color: var(--brand); letter-spacing: 0.14em; }
.lead { color: var(--fg-muted); }

.section--sunken { background: var(--bg-sunken); }
.section__head { max-width: 58ch; }
.section__head .h2 { margin-block-start: var(--space-3xs); }

/* 3 ── BUTONLAR ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.8em 1.4em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-full);
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn--primary {
  background: var(--brand);
  color: var(--brand-fg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-strong); box-shadow: var(--shadow-md); }
.btn--ghost { border-color: var(--line-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }
.btn--olive { background: var(--accent); color: var(--accent-fg); }
.btn--olive:hover { filter: brightness(1.12); }
.btn--lg { padding: 1em 1.75em; font-size: var(--step-0); }
.btn--block { inline-size: 100%; }
.btn:active { transform: translateY(1px); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--step--1);
  color: var(--fg-muted);
  background: var(--bg-elev);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-full);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--brand); border-color: var(--brand); }
@media (max-width: 48rem) {
  /* Parmakla basılacak boyut: 44px */
  .chip { min-block-size: 2.75rem; padding-inline: var(--space-md); }
}

/* 4 ── BAŞLIK / NAVİGASYON ────────────────────────────────────────────── */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: var(--border-w) solid transparent;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.site-header.is-scrolled {
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end-color: var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-block-size: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.brand__mark {
  display: grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  color: var(--brand-fg);
  background: var(--brand);
  border-radius: var(--radius-organic);
}
.brand__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand__sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.site-nav { margin-inline-start: auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-md); font-size: var(--step--1); }
.site-nav__list a { color: var(--fg-muted); font-weight: 500; transition: color var(--dur-fast) var(--ease); }
.site-nav__list a:hover { color: var(--brand); }

.site-header__cta { display: flex; align-items: center; gap: var(--space-2xs); }
.nav-toggle { display: none; color: var(--fg); padding: var(--space-2xs); }

@media (max-width: 62rem) {
  /* Kapalı menü YUKARI KAYDIRILMAZ: paneli kendi yüksekliği kadar yukarı
     ötelemek onu tam olarak header'ın üstüne oturtur ve opak zemini logoyu
     da butonları da örter. Bunun yerine görünürlükten çıkarılır — bu aynı
     zamanda kapalı menüdeki linkleri sekme sırasından da düşürür. */
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--bg);
    padding: var(--space-lg) var(--gutter) var(--space-2xl);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition:
      opacity var(--dur-base) var(--ease),
      transform var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--space-2xs); font-size: var(--step-2); }
  /* Mobil menüde satırlar dokunma hedefi olur: 44px alt sınır + blok davranış,
     böylece parmak metnin yanına da bassa link çalışır. */
  .site-nav__list a {
    display: flex;
    align-items: center;
    min-block-size: 3rem;
    padding-block: var(--space-2xs);
    font-family: var(--font-display);
    color: var(--fg);
    border-block-end: var(--border-w) solid var(--line);
  }
  .site-header__cta .btn--ghost { display: none; }
  .nav-toggle { display: inline-flex; min-inline-size: 2.75rem; min-block-size: 2.75rem; }
  /* Sağa yaslamayı normalde .site-nav'ın margin-inline-start:auto'su yapıyor.
     Mobilde nav position:fixed olup akıştan çıkınca o kayboluyor ve hamburger
     logonun yanına yapışıp sağda boşluk bırakıyordu. */
  .site-header__cta { margin-inline-start: auto; }
}

@media (max-width: 48rem) {
  /* Telefon ve WhatsApp zaten alt sabit çubukta duruyor; header'da tekrar
     etmek dar ekranda logoyu sıkıştırıyordu. */
  .site-header__cta .btn { display: none; }
  .brand__mark { inline-size: 2.2rem; block-size: 2.2rem; }
  .brand__text { font-size: var(--step-0); }
}

/* 5 ── BREADCRUMB ─────────────────────────────────────────────────────── */

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  padding-block: var(--space-sm);
  font-size: var(--step--1);
  color: var(--fg-subtle);
}
.crumbs__item { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.crumbs a { color: var(--fg-muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs__sep { color: var(--line-strong); display: inline-flex; }

/* 6 ── HERO (iki sütun, sağda organik maskeli görsel) ─────────────────── */

.hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2.5rem, 1rem + 6vw, 6rem); }
.hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-2xl); }
}
.hero__title {
  font-size: var(--step-6);
  text-wrap: balance;
  margin-block: var(--space-sm) var(--space-md);
}
.hero__lead { font-size: var(--step-1); line-height: 1.55; color: var(--fg-muted); max-inline-size: 46ch; }
/* welcome_text/intro birden fazla <p> içerebilir; reset margin'i sıfırladığı
   için paragraf arasını burada geri veriyoruz. */
.hero__lead > * + * { margin-block-start: 0.7em; }
.hero__actions { margin-block-start: var(--space-lg); }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-w) solid var(--line);
  font-size: var(--step--1);
  color: var(--fg-muted);
}
.hero__trust li { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.hero__trust svg { color: var(--accent); }

/* Görsel bloğu: organik maske + arkada kaydırılmış zeytin çerçeve */
.hero__media { position: relative; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: var(--space-md) calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md);
  border: var(--border-w) solid var(--accent);
  border-radius: var(--radius-organic-alt);
  opacity: 0.35;
}
.hero__figure { position: relative; margin: 0; }
.hero__figure img {
  inline-size: 100%;
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* Görselin üstüne oturan istatistik rozetleri */
.hero__badges {
  position: absolute;
  inset-block-end: calc(var(--space-md) * -1);
  inset-inline-start: calc(var(--space-sm) * -1);
  display: grid;
  gap: var(--space-2xs);
}
.hero__badge {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--bg-elev);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}
.hero__badge dt {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.hero__badge dd { font-size: var(--step--2); color: var(--fg-muted); max-inline-size: 14ch; line-height: 1.3; }

@media (max-width: 48rem) {
  /* Mobilde hero, ekranın tamamını yiyen bir tipografi gösterisi olmamalı:
     başlık bir kademe iner, butonlar tam genişliğe geçer — böylece çağrı
     eylemleri ilk ekranda kalır. */
  .hero { padding-block: var(--space-lg) var(--space-xl); }
  .hero__title { font-size: var(--step-5); margin-block: var(--space-2xs) var(--space-sm); }
  .hero__lead { font-size: var(--step-0); }
  .hero__actions { margin-block-start: var(--space-md); }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__trust { gap: var(--space-2xs) var(--space-md); margin-block-start: var(--space-md); padding-block-start: var(--space-sm); }
  .cta__inner .btn { flex: 1 1 100%; }
}

@media (max-width: 47.99rem) {
  /* Mobilde rozetler görselin üstünden iner ve SARMALI ızgaraya döner.
     Yatay akışta bırakılırsa satır genişliği içeriğe göre büyür ve tüm
     sayfayı yana kaydırır. */
  .hero__badges {
    position: static;
    margin-block-start: var(--space-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero__badge { min-inline-size: 0; border-radius: var(--radius-lg); }
  .hero__badge dd { max-inline-size: none; }
  .hero__media::before { display: none; }
}

/* Izgara ve esnek kutuların çocukları varsayılan olarak min-content kadar
   küçülmez; uzun kelime veya sabit genişlikli bir çocuk tüm sayfayı yana
   kaydırabilir. Tek satırlık kalkan. */
.hero__grid > *, .split > *, .bento > *, .quotes > *, .gallery > * { min-inline-size: 0; }

/* 7 ── İSTATİSTİK ŞERİDİ ──────────────────────────────────────────────── */

.stats { background: var(--bg-sunken); border-block: var(--border-w) solid var(--line); }
.stats__grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.stats__item { border-inline-start: 2px solid var(--brand-soft); padding-inline-start: var(--space-sm); }
.stats__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.stats__label { font-size: var(--step--1); color: var(--fg-subtle); margin-block-start: var(--space-3xs); }

/* 8 ── ORGANİK KARTLAR (usp) ──────────────────────────────────────────── */

/* base.css'in bento'su vurgulu kartı 2 sütuna yayar; USP sayısı 3–4 arasında
   değiştiği için bu bazen 264px'lik sıkışık kartlar bırakıyordu. Vurgulu kart
   TÜM satırı alır, kalanlar kendi aralarında bölüşür: 3'te de 4'te de dengeli. */
.bento {
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  grid-auto-rows: auto;
}
@media (min-width: 48rem) {
  .bento__item--wide { grid-column: 1 / -1; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-lg);
  background: var(--bg-elev);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-organic);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Kartlar sırayla ters yarıçap alır — dizilim asla mekanik görünmez */
.card:nth-child(even) { border-radius: var(--radius-organic-alt); }
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.9rem;
  aspect-ratio: 1;
  margin-block-end: var(--space-sm);
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: var(--radius-organic-alt);
}
.card__title { font-size: var(--step-1); }
.card__text { color: var(--fg-muted); }

.card--featured {
  background:
    linear-gradient(155deg, var(--brand-soft), transparent 62%),
    var(--bg-elev);
  border-color: var(--brand-soft);
}
.card--featured .card__icon { background: var(--brand); color: var(--brand-fg); }
.card--featured .card__title { font-size: var(--step-2); }

/* 9 ── ANA METİN + KENAR ÇUBUĞU ───────────────────────────────────────── */

.prose > h2 { font-size: var(--step-3); }
.prose > h3 { font-size: var(--step-1); }

.panel {
  padding: var(--space-lg);
  background: var(--bg-elev);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-sm);
}
.panel--brand {
  background: linear-gradient(165deg, var(--brand-soft), var(--bg-elev) 70%);
  border-color: var(--brand-soft);
}
.panel__title { font-size: var(--step-1); margin-block-end: var(--space-2xs); }
.panel__text { color: var(--fg-muted); font-size: var(--step--1); }
.panel__text strong { color: var(--fg); }
.panel__text > * + * { margin-block-start: 0.7em; }
.panel .btn { margin-block-start: var(--space-md); }

.panel__list { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-sm); font-size: var(--step--1); }
.panel__list a { color: var(--fg-muted); display: inline-flex; align-items: center; gap: var(--space-3xs); }
.panel__list a:hover { color: var(--brand); }

/* 10 ── REFERANSLAR (kaydırılmış kart yığını) ─────────────────────────── */

.quotes { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  margin: 0;
  background: var(--bg-elev);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-sm);
}
/* Yığın hissi: ortadaki kart yukarı, sonuncusu aşağı kayar */
@media (min-width: 62rem) {
  .quote:nth-child(2) { transform: translateY(-1.75rem); }
  .quote:nth-child(3) { transform: translateY(0.9rem); border-radius: var(--radius-organic-alt); }
}
.quote__mark { color: var(--brand); opacity: 0.5; }
.quote__text { font-family: var(--font-display); font-size: var(--step-0); line-height: 1.5; color: var(--fg); }
.quote__by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-2xs); font-size: var(--step--1); color: var(--fg-subtle); margin-block-start: auto; }
.quote__name { font-weight: 700; color: var(--fg); }
.quote__stars { display: inline-flex; gap: 1px; color: var(--brand); }

/* 11 ── SÜREÇ (el çizimi adımlar) ─────────────────────────────────────── */

.process__list { display: grid; gap: var(--space-lg); counter-reset: adim; }
.process__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start; }
.process__num {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--brand);
  background: var(--bg-elev);
  border: var(--border-w) solid var(--brand-soft);
  border-radius: var(--radius-organic);
  font-variant-numeric: tabular-nums;
}
.process__step:not(:last-child) .process__num::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  margin-inline-start: -1px;
  inline-size: 2px;
  block-size: var(--space-lg);
  background: var(--line-strong);
}
.process__title { font-size: var(--step-1); margin-block-end: var(--space-3xs); }
.process__text { color: var(--fg-muted); }

@media (min-width: 62rem) {
  .process__list { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-xl); }
  .process__step { grid-template-columns: 1fr; }
  .process__step:not(:last-child) .process__num::after {
    inset: 50% auto auto 100%;
    inline-size: var(--space-xl);
    block-size: 2px;
  }
}

/* 12 ── HİZMETLER ─────────────────────────────────────────────────────── */

.service {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-md);
  padding-block: var(--space-md);
  border-block-end: var(--border-w) solid var(--line);
}
.service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.6rem;
  aspect-ratio: 1;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-organic-alt);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.service:hover .service__icon { background: var(--accent); color: var(--accent-fg); }
.service__body { min-inline-size: 0; }
.service__title { font-size: var(--step-1); margin-block-end: var(--space-3xs); }
.service__text { color: var(--fg-muted); font-size: var(--step--1); }

/* 13 ── SSS ───────────────────────────────────────────────────────────── */

.faq__list { max-inline-size: 72ch; }
.faq__item { border-block-end: var(--border-w) solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--fg);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--brand);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-full);
  transition: transform var(--dur-base) var(--ease), background var(--dur-fast) var(--ease);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--brand-soft); }
.faq__a { padding-block-end: var(--space-md); color: var(--fg-muted); max-inline-size: 68ch; }

/* 14 ── KONUM LİSTELERİ ───────────────────────────────────────────────── */

.places__list { columns: 2; column-gap: var(--space-lg); }
@media (min-width: 48rem) { .places__list { columns: 3; } }
@media (min-width: 72rem) { .places__list { columns: 4; } }
.places__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding-block: var(--space-3xs);
  font-size: var(--step--1);
  color: var(--fg-muted);
  break-inside: avoid;
  border-block-end: 1px solid transparent;
}
.places__link:hover { color: var(--brand); border-block-end-color: var(--line); }
.places__link svg { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.places__link:hover svg { opacity: 1; }
@media (max-width: 48rem) {
  .places__list { columns: 1; }
  .places__link { min-block-size: 2.75rem; }
}

.nearby { background: var(--bg-sunken); border-block: var(--border-w) solid var(--line); }
.nearby__title { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); margin-block-end: var(--space-md); }

/* Derin link kartları (ana sayfa) */
.deep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-elev);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-organic);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.deep:nth-child(even) { border-radius: var(--radius-organic-alt); }
.deep:hover { border-color: var(--brand); transform: translateY(-2px); }
.deep__name { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; }
.deep__meta { display: block; font-size: var(--step--2); color: var(--fg-subtle); letter-spacing: 0.06em; text-transform: uppercase; }
.deep svg { color: var(--brand); }

/* 15 ── MEDYA (foto + video) ──────────────────────────────────────────── */

.gallery { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.shot { margin: 0; position: relative; }
.shot img, .shot video {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-organic);
  background: var(--bg-sunken);
}
.shot:nth-child(even) img, .shot:nth-child(even) video { border-radius: var(--radius-organic-alt); }
.shot figcaption {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--fg-subtle);
}
.shot--video video { aspect-ratio: 9 / 14; }
.shot--video figcaption strong { display: block; color: var(--fg); font-weight: 700; }

/* 16 ── CTA (sıcak tam genişlik blok) ─────────────────────────────────── */

.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  color: var(--brand-fg);
  background: linear-gradient(140deg, var(--brand-strong), var(--brand));
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-lg);
}
.cta__title { color: var(--brand-fg); font-size: var(--step-3); max-inline-size: 22ch; }
.cta__text { color: var(--brand-fg); opacity: 0.85; margin-block-start: var(--space-2xs); font-size: var(--step--1); }
.cta__inner .btn--primary { background: var(--brand-fg); color: var(--brand-strong); }
.cta__inner .btn--primary:hover { background: var(--bg); }
.cta__inner .btn--ghost { border-color: var(--brand-fg); color: var(--brand-fg); }
.cta__inner .btn--ghost:hover { background: var(--brand-fg); color: var(--brand-strong); border-color: var(--brand-fg); }

/* 17 ── BLOG ──────────────────────────────────────────────────────────── */

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-elev);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-organic);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.post-card:nth-child(even) { border-radius: var(--radius-organic-alt); }
.post-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-lg); }
.post-card__date { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); }
.post-card__title { font-size: var(--step-1); }
.post-card__summary { color: var(--fg-muted); font-size: var(--step--1); }
.post-card__more { margin-block-start: var(--space-2xs); color: var(--brand); font-weight: 700; font-size: var(--step--1); display: inline-flex; align-items: center; gap: var(--space-3xs); }

.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--step--1); color: var(--fg-subtle); margin-block-end: var(--space-lg); }
.article__cover { inline-size: 100%; border-radius: var(--radius-organic); margin-block-end: var(--space-xl); object-fit: cover; aspect-ratio: 16 / 9; }

/* 18 ── 404 ───────────────────────────────────────────────────────────── */

.notfound { text-align: center; padding-block: clamp(4rem, 2rem + 10vw, 9rem); }
.notfound__code { font-family: var(--font-display); font-size: var(--step-7); line-height: 1; color: var(--brand-soft); }

/* 19 ── ALT BİLGİ ─────────────────────────────────────────────────────── */

.site-footer {
  background: var(--bg-sunken);
  border-block-start: var(--border-w) solid var(--line);
  padding-block: var(--space-2xl) var(--space-lg);
  margin-block-start: var(--space-2xl);
}
.footer__grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.footer__title { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); margin-block-end: var(--space-sm); }
.footer__list { display: grid; gap: var(--space-2xs); font-size: var(--step--1); }
.footer__list a, .footer__contact a { color: var(--fg-muted); display: inline-flex; align-items: center; gap: var(--space-3xs); }
.footer__list a:hover, .footer__contact a:hover { color: var(--brand); }
.footer__contact { display: grid; gap: var(--space-2xs); font-size: var(--step--1); color: var(--fg-muted); }
/* base.css svg'yi display:block yapar; ikonlu düz metin satırında bu alt
   satıra kaydırıyordu. */
.footer__contact > span { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.footer__contact svg { color: var(--brand); }
.footer__about { color: var(--fg-muted); font-size: var(--step--1); max-inline-size: 40ch; margin-block-start: var(--space-sm); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-w) solid var(--line);
  font-size: var(--step--2);
  color: var(--fg-subtle);
}

/* 20 ── MOBİL EYLEM ÇUBUĞU ────────────────────────────────────────────── */

.action-bar { display: none; }
@media (max-width: 48rem) {
  .action-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm) calc(var(--space-2xs) + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-start: var(--border-w) solid var(--line);
  }
  .action-bar .btn { padding-block: 0.9em; }
  body { padding-block-end: 4.75rem; }
}