/* =========================================================================
   Uraz — koyu / sinematik yön
   Gece yolu paleti: neredeyse siyah sıcak zemin + tepe lambası amberi.
   İmza: hero'da tam genişlik fotoğraf + ışık sızıntısı + grain; cam yüzeyler,
   geniş boşluk, yumuşak derinlik. Mobil önce kurgulandı.
   ========================================================================= */

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

:root {
  color-scheme: dark;

  /* yüzeyler — sıcak siyah, mavi değil */
  --bg:        oklch(14% 0.012 62);
  --bg-elev:   oklch(19% 0.014 62);
  --bg-raise:  oklch(23% 0.016 62);
  --bg-sunken: oklch(10% 0.010 62);

  /* metin */
  --fg:        oklch(97% 0.006 62);
  --fg-muted:  oklch(78% 0.012 62);
  --fg-subtle: oklch(62% 0.014 62);

  /* marka — çekici tepe lambası amberi */
  --brand:        oklch(80% 0.155 68);
  --brand-strong: oklch(70% 0.170 62);
  --brand-soft:   oklch(80% 0.155 68 / 0.16);
  --brand-fg:     oklch(17% 0.030 68);

  /* aksan — gece mavisi, yalnızca ikincil vurguda */
  --accent:    oklch(74% 0.110 232);
  --accent-fg: oklch(16% 0.020 232);

  --line:        oklch(100% 0 0 / 0.10);
  --line-strong: oklch(100% 0 0 / 0.20);
  --ring:        var(--brand);

  /* tipografi */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-display: 800;
  --leading-display: 1.03;
  --tracking-display: -0.033em;

  /* geometri — üç yarıçap */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --border-w: 1px;

  /* gölge dili: yumuşak derinlik + marka ışıması */
  --shadow-sm: 0 2px 8px oklch(0% 0 0 / 0.35);
  --shadow-md: 0 16px 40px -20px oklch(0% 0 0 / 0.75);
  --shadow-lg: 0 40px 90px -40px oklch(0% 0 0 / 0.85);
  --shadow-glow: 0 24px 70px -30px oklch(80% 0.155 68 / 0.45);

  /* geniş nefes */
  --section-y: clamp(4rem, 2.5rem + 8vw, 9rem);
  --header-h: 4.5rem;
}

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

body {
  font-weight: 400;
  background:
    radial-gradient(58% 42% at 12% -8%, oklch(80% 0.155 68 / 0.10), transparent 62%),
    radial-gradient(50% 40% at 92% 4%, oklch(74% 0.110 232 / 0.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* İnce film grain — düz koyu zemine derinlik katar */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  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");
}
main, .site-header, .site-footer, .action-bar { position: relative; z-index: 1; }

/* Vurgu kelimesi — blok değil, amber alt çizgi */
.mark {
  color: var(--brand);
  background-image: linear-gradient(var(--brand-soft), var(--brand-soft));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.32em;
}

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

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.site-header.is-scrolled {
  border-block-end-color: var(--line);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.6rem; margin-inline-end: auto; }
.brand__mark {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--brand), var(--brand-strong));
  color: var(--brand-fg);
  box-shadow: 0 6px 18px -8px oklch(80% 0.155 68 / 0.7);
}
.brand__mark svg { inline-size: 60%; block-size: auto; }
.brand__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-inline-size: 13ch;
}

.site-nav__list { display: flex; align-items: center; gap: var(--space-md); margin: 0; }
.site-nav a {
  position: relative;
  display: block;
  white-space: nowrap;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-muted);
  padding-block: 0.4rem;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.site-nav a:hover { color: var(--fg); }
.site-nav a:hover::after,
.site-nav a.is-current::after { transform: scaleX(1); }
.site-nav a.is-current { color: var(--fg); }

.site-header__cta { display: flex; align-items: center; gap: var(--space-2xs); }

.nav-toggle {
  display: none;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
  color: var(--fg);
}

/* 4 ── BUTONLAR ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.72rem 1.15rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: -0.01em;
  border-radius: var(--radius-full);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
  color: var(--fg);
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(160deg, var(--brand), var(--brand-strong));
  color: var(--brand-fg);
  border-color: transparent;
  box-shadow: 0 10px 26px -12px oklch(80% 0.155 68 / 0.75);
}
.btn--primary:hover { box-shadow: 0 16px 34px -12px oklch(80% 0.155 68 / 0.9); }
.btn--ghost { background: transparent; }
.btn--ink { background: var(--bg-sunken); }

.btn--lg { padding: 0.95rem 1.6rem; font-size: var(--step-0); }
.btn--block { display: flex; inline-size: 100%; }

/* 5 ── ETİKET ────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.tag--live {
  border-color: var(--brand-soft);
  color: var(--brand);
  background: color-mix(in oklab, var(--bg-sunken) 62%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.tag--ink  { background: var(--bg-sunken); }
.tag__dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* 6 ── EKMEK KIRINTISI ───────────────────────────────────────────────── */

.crumbs { border-block-end: 1px solid var(--line); }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding-block: 0.85rem;
  font-size: var(--step--2);
  color: var(--fg-subtle);
}
.crumbs__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.crumbs a { color: var(--fg-muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs__sep { display: inline-flex; opacity: 0.5; }

/* 7 ── HERO — tam genişlik fotoğraf + ışık sızıntısı ─────────────────── */

.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, oklch(10% 0.01 62 / 0.55) 0%, oklch(10% 0.01 62 / 0.80) 45%, var(--bg) 100%),
    linear-gradient(90deg, oklch(10% 0.01 62 / 0.92) 8%, oklch(10% 0.01 62 / 0.35) 62%, transparent 100%);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  /* stretch olsaydı inline-flex rozet tam genişliğe yayılırdı */
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: clamp(3.5rem, 2rem + 9vw, 8rem);
  max-inline-size: 46rem;
}
.hero__title { font-size: var(--step-6); margin-block: 0.2em 0; }
.hero__lead {
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-muted);
  max-inline-size: 40ch;
}
.hero__actions { gap: var(--space-sm); margin-block-start: var(--space-2xs); }
.hero--flat { background: var(--bg-sunken); border-block-end: 1px solid var(--line); }
.hero--flat::before { display: none; }

/* Künye şeridi — hero'nun altına oturan cam kutular */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--line);
  border: var(--border-w) solid var(--line);
  margin-block-start: var(--space-lg);
}
.facts__item {
  padding: 1rem 1.15rem;
  background: var(--bg-elev);
}
.facts__k {
  display: block;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.facts__v {
  display: block;
  margin-block-start: 0.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--fg);
}

/* 8 ── KAYAN ŞERİT ───────────────────────────────────────────────────── */

.band { border-block: 1px solid var(--line); padding-block: 0.9rem; background: var(--bg-sunken); }
.band__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--fg-subtle);
}
.band__sep { color: var(--brand); }

/* 9 ── BÖLÜM BAŞLIĞI ─────────────────────────────────────────────────── */

.section__head { max-inline-size: 60ch; margin-block-end: var(--space-xl); }
.section__title { font-size: var(--step-4); margin-block-start: 0.6rem; }
.section--sunken { background: var(--bg-sunken); border-block: 1px solid var(--line); }

/* Vurgulu bölüm — üstten amber ışık sızıntısı alan çukur alan */
.section--ink {
  position: relative;
  isolation: isolate;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 50% 0%, var(--brand-soft), transparent 62%),
    var(--bg-sunken);
}

/* 10 ── KARTLAR ──────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-soft);
  box-shadow: var(--shadow-md);
}
.card__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  border: var(--border-w) solid var(--brand-soft);
  color: var(--brand);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.card__text { color: var(--fg-muted); font-size: var(--step--1); line-height: 1.65; }
.section--ink .card { background: var(--bg-elev); }
.card--flat { background: transparent; border-color: transparent; padding-inline: 0; }
.card--flat:hover { transform: none; box-shadow: none; border-color: transparent; }

/* 11 ── SÜREÇ ────────────────────────────────────────────────────────── */

.steps { display: grid; gap: var(--space-md); }
.steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
}
.steps__no {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--brand);
  opacity: 0.85;
}
.steps__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.2; }
.steps__text { color: var(--fg-muted); font-size: var(--step--1); line-height: 1.65; margin-block-start: 0.35rem; }

/* 12 ── SAYILAR ──────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stats__item { padding: var(--space-md); background: var(--bg-elev); }
.stats__v {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand);
}
.stats__l {
  display: block;
  margin-block-start: 0.6rem;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

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

.faq { display: grid; gap: var(--space-2xs); }
.faq__item {
  border-radius: var(--radius-md);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
  transition: border-color var(--dur-fast) var(--ease);
}
.faq__item[open] { border-color: var(--brand-soft); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  min-block-size: 3.25rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.4;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand); }
.faq__sign { flex: none; margin-block-start: 0.2rem; color: var(--brand); transition: transform var(--dur-base) var(--ease); }
.faq__item[open] .faq__sign { transform: rotate(45deg); }
.faq__a {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--fg-muted);
  font-size: var(--step--1);
  line-height: 1.7;
  max-inline-size: 72ch;
}

/* 14 ── PANEL / ÇAĞRI ────────────────────────────────────────────────── */

.panel {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
}
.panel--brand {
  border-color: var(--brand-soft);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--brand-soft), transparent 62%),
    var(--bg-elev);
  box-shadow: var(--shadow-glow);
}
.panel--ink { background: var(--bg-sunken); }
.panel__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1.12;
  margin-block: 0.6rem;
}
.panel__text { color: var(--fg-muted); font-size: var(--step--1); line-height: 1.65; }
.panel__text p + p { margin-block-start: 0.75em; }
.panel__text strong { color: var(--brand); font-weight: 650; }

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block-start: 1px solid var(--line);
  padding-block: var(--section-y);
  background:
    radial-gradient(60% 120% at 20% 0%, var(--brand-soft), transparent 60%),
    radial-gradient(50% 100% at 88% 100%, oklch(74% 0.110 232 / 0.10), transparent 60%),
    var(--bg-sunken);
}
.cta-band__title { font-size: var(--step-5); }
.cta-band__text { max-inline-size: 52ch; font-size: var(--step-1); color: var(--fg-muted); }

/* 15 ── ÇİP ──────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.chips a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease-spring);
}
.chips a:hover { color: var(--brand); border-color: var(--brand-soft); transform: translateY(-2px); }

/* 16 ── GÖRSEL ───────────────────────────────────────────────────────── */

.figure {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
}
.figure img { inline-size: 100%; }
.figure__cap {
  padding: 0.75rem 1rem;
  font-size: var(--step--2);
  color: var(--fg-subtle);
  border-block-start: 1px solid var(--line);
}

/* 17 ── REFERANS ─────────────────────────────────────────────────────── */

.quote {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
}
.quote__stars { display: flex; gap: 2px; color: var(--brand); }
.quote__text { font-size: var(--step--1); line-height: 1.7; color: var(--fg-muted); }
.quote__who { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); }
.quote__where { color: var(--fg-subtle); font-weight: 400; }

/* 18 ── LİSTE ────────────────────────────────────────────────────────── */

.linklist { columns: 2; column-gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.linklist li { break-inside: avoid; }
.linklist a {
  display: block;
  padding: 0.5rem 0;
  font-size: var(--step--1);
  color: var(--fg-muted);
  border-block-end: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), padding-inline-start var(--dur-fast) var(--ease);
}
.linklist a:hover { color: var(--brand); padding-inline-start: 0.4rem; }

/* 19 ── BLOG ─────────────────────────────────────────────────────────── */

.post-card { padding: 0; gap: 0; overflow: hidden; }
.post-card__body { display: flex; flex-direction: column; gap: 0.55rem; padding: var(--space-md); }
.post-card__date {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
}
.post-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.25; }
.post-body { max-inline-size: 68ch; }
.post-body h2 { font-size: var(--step-2); margin-block: 1.7em 0.6em; }
.post-body p + p { margin-block-start: 1em; }
.post-body ul { padding-inline-start: 1.3em; margin-block-start: 0.9em; }
.post-body li + li { margin-block-start: 0.4em; }
.post-body strong { color: var(--fg); font-weight: 650; }

/* 20 ── ALT BİLGİ ────────────────────────────────────────────────────── */

.site-footer {
  background: var(--bg-sunken);
  border-block-start: 1px solid var(--line);
  padding-block: var(--space-2xl) var(--space-lg);
}
.site-footer a { color: var(--fg-muted); transition: color var(--dur-fast) var(--ease); }
.site-footer a:hover { color: var(--brand); }
.footer__grid { display: grid; gap: var(--space-xl); }
.footer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  margin-block-end: 0.9rem;
}
.footer__list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; font-size: var(--step--1); color: var(--fg-muted); }
.footer__bottom {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  font-size: var(--step--2);
  color: var(--fg-subtle);
}

/* 21 ── MOBİL ALT ÇUBUK ──────────────────────────────────────────────── */

.action-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 70;
  display: none;
  gap: 0.6rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-block-start: 1px solid var(--line);
}
.action-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 3rem;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
}
.action-bar__call {
  background: linear-gradient(160deg, var(--brand), var(--brand-strong));
  color: var(--brand-fg);
  box-shadow: 0 8px 22px -10px oklch(80% 0.155 68 / 0.8);
}
.action-bar__wa { background: var(--bg-elev); border: var(--border-w) solid var(--line); color: var(--fg); }

/* 22 ── 404 ──────────────────────────────────────────────────────────── */

.notfound { padding-block: var(--space-3xl); }
.notfound__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-7);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand);
}

/* 23 ── DUYARLILIK ───────────────────────────────────────────────────── */

@media (min-width: 60rem) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .linklist { columns: 4; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
}

@media (min-width: 48rem) and (max-width: 59.99rem) {
  .linklist { columns: 3; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 68rem) {
  .site-header__cta .btn--ghost span { display: none; }
  .site-header__cta .btn--ghost { padding-inline: 0.75rem; }
}

@media (max-width: 60rem) {
  .nav-toggle { display: block; }
  .site-header__inner { position: relative; }
  .site-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.5rem);
    display: none;
    padding: var(--space-2xs);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--bg-elev) 92%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: var(--border-w) solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: 0.85rem 0.9rem; border-radius: var(--radius-sm); }
  .site-nav a::after { display: none; }
  .site-nav a:hover, .site-nav a.is-current { background: var(--brand-soft); color: var(--brand); }
}

@media (max-width: 48rem) {
  /* Yolda kalan ziyaretçi tek elle giriyor: alt çubuk her zaman açık. */
  .action-bar { display: flex; }
  body { padding-block-end: 4.75rem; }

  /* Masaüstü scrim'i soldan sert karartıyor; dar ekranda fotoğrafı öldürüyordu.
     Mobilde yalnızca dikey karartma kalsın, araç görünsün. */
  .hero::before {
    background: linear-gradient(180deg,
      oklch(10% 0.01 62 / 0.28) 0%,
      oklch(10% 0.01 62 / 0.58) 24%,
      oklch(10% 0.01 62 / 0.88) 50%,
      var(--bg) 94%);
  }
  .hero__inner { padding-block-start: clamp(7rem, 3rem + 22vw, 11rem); }

  /* Mobilde içeriği başta GİZLEME — JS gecikirse sayfa boş görünmesin. */
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }

  .hero__inner { padding-block: clamp(2.75rem, 1.5rem + 8vw, 4.5rem); }
  .hero__actions .btn { flex: 1 1 auto; }
  .panel { padding: var(--space-md); }
  .linklist { columns: 2; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 30rem) {
  .brand__text { font-size: 0.82rem; max-inline-size: 9ch; }
  .site-header__cta .btn span { display: none; }
  .site-header__cta .btn { padding-inline: 0.75rem; }
  .linklist { columns: 1; }
  .facts, .stats { grid-template-columns: 1fr; }
}