/* =========================================================================
   BEY ÇİLİNGİR — tema skin'i  ·  yön: dark-metal
   =========================================================================
   Tohum:  "beycilingir" → ASCII toplamı 1169
     yön_index  = 1169 % 12 = 5 (warm-craft) → kullanıcı "siyah" dediği için EZİLDİ
     font_index = (1169/7) % 3 = 2  → Geist + Inter
     hue_kayma  = (1169 % 31) - 15 = +7  → ana hue 200+7 = 207, yüzey hue 240+2 = 242

   İmza efektleri (bu temayı diğerlerinden ayıran şey):
     1. mono teknik etiketler        →  [ 7/24 · HAT AÇIK ]
     2. kart köşelerinde ölçü işareti →  .ticks
     3. metalik gradient kenar        →  .metal (üstü parlak, altı sönük)
     4. ince tarama çizgisi dokusu    →  body::after
     5. amber = tek aksiyon rengi     →  yalnızca acil arama ve canlı durum
   ========================================================================= */

/* ------------------------------------------------------------ 1. TOKENLAR */

:root {
  color-scheme: dark;

  /* yüzeyler — neredeyse siyah, hafif çelik kayması */
  --bg:        oklch(13% 0.006 242);
  --bg-elev:   oklch(17% 0.009 242);
  --bg-sunken: oklch(9.5% 0.005 242);
  --bg-metal:  linear-gradient(180deg, oklch(19% 0.010 242), oklch(14.5% 0.007 242));

  --fg:        oklch(96% 0.004 242);
  --fg-muted:  oklch(74% 0.012 242);
  --fg-subtle: oklch(56% 0.014 242);

  /* marka — çelik mavi (hue 207) */
  --brand:        oklch(72% 0.14 207);
  --brand-strong: oklch(62% 0.15 207);
  --brand-soft:   oklch(72% 0.14 207 / 0.14);
  --brand-fg:     oklch(12% 0.02 207);

  /* aksan — amber uyarı. SADECE acil aksiyon ve canlı durum için. */
  --accent:      oklch(80% 0.16 85);
  --accent-dim:  oklch(80% 0.16 85 / 0.18);
  --accent-fg:   oklch(17% 0.04 85);

  --line:        oklch(100% 0 0 / 0.085);
  --line-strong: oklch(100% 0 0 / 0.20);
  --ring:        var(--accent);

  --ok: oklch(76% 0.15 150);

  /* tipografi */
  --font-display: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Geist Mono', Menlo, monospace;

  --weight-display: 640;
  --leading-display: 1.05;
  --tracking-display: -0.032em;

  /* geometri — dark-metal: düşük yarıçap */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* gölge — üstte iç ışık, altta derin siyah */
  --shadow-sm: 0 1px 0 oklch(100% 0 0 / 0.05) inset, 0 2px 6px -2px oklch(0% 0 0 / 0.7);
  --shadow-md: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 20px 40px -24px oklch(0% 0 0 / 0.95);
  --shadow-lg: 0 1px 0 oklch(100% 0 0 / 0.07) inset, 0 40px 80px -40px oklch(0% 0 0 / 1);

  --header-h: 4.25rem;
  --dock-h: 5rem;          /* çubuğun ölçülen yüksekliği (78px) + pay */
  --container: 1180px;
}

/* --------------------------------------------------------- 2. SAYFA DOKUSU */

body {
  background:
    radial-gradient(120% 70% at 50% -10%, oklch(20% 0.03 207 / 0.55), transparent 60%),
    var(--bg);
  /* yapışık aksiyon çubuğu içeriği örtmesin */
  padding-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  /* İçerik ekrandan kısaysa (404, iletişim) footer boşlukta asılı kalmasın:
     main esner, footer her zaman en altta oturur. */
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.ftr { flex-shrink: 0; }

/* ince tarama çizgisi — ekranın tamamına, çok düşük yoğunlukta */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.016) 0 1px, transparent 1px 3px);
}

/* --------------------------------------------------- 3. TEKRAR EDEN PARÇALAR */

/* metalik gradient kenar: üstte parlak, altta sönük */
.metal {
  position: relative;
  background: var(--bg-metal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.metal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, oklch(100% 0 0 / 0.18), oklch(100% 0 0 / 0.035) 42%, oklch(100% 0 0 / 0.02));
  -webkit-mask: linear-gradient(oklch(0% 0 0) 0 0) content-box, linear-gradient(oklch(0% 0 0) 0 0);
          mask: linear-gradient(oklch(0% 0 0) 0 0) content-box, linear-gradient(oklch(0% 0 0) 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* köşe ölçü işaretleri */
.ticks::after {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  opacity: 0.45;
  background:
    linear-gradient(var(--accent), var(--accent)) left  top    / 9px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left  top    / 1px 9px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top    / 9px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top    / 1px 9px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left  bottom / 9px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left  bottom / 1px 9px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 9px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 1px 9px no-repeat;
}

/* mono teknik etiket */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.tag--accent { color: var(--accent); }
.tag--brand  { color: var(--brand); }
.tag::before { content: "["; opacity: 0.5; }
.tag::after  { content: "]"; opacity: 0.5; }

/* canlı durum noktası */
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 oklch(76% 0.15 150 / 0.65);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 oklch(76% 0.15 150 / 0.6); }
  70%  { box-shadow: 0 0 0 9px oklch(76% 0.15 150 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(76% 0.15 150 / 0); }
}

/* bölüm başlığı bloğu */
.sec-head { max-width: 62ch; margin-block-end: var(--space-xl); }
.sec-head h2 { font-size: var(--step-4); margin-block: 0.5rem 0.75rem; }
.sec-head p  { color: var(--fg-muted); }

/* ince yatay ayraç */
.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent 70%);
}

/* ------------------------------------------------------------- 4. BUTONLAR */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.35em;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--accent {
  background: linear-gradient(180deg, oklch(84% 0.16 85), oklch(76% 0.16 85));
  color: var(--accent-fg);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.35) inset, 0 14px 30px -16px oklch(80% 0.16 85 / 0.85);
}
.btn--accent:hover { background: linear-gradient(180deg, oklch(88% 0.16 85), oklch(80% 0.16 85)); }

.btn--metal {
  background: var(--bg-metal);
  color: var(--fg);
  border: 1px solid var(--line-strong);
}
.btn--metal:hover { border-color: var(--brand); color: var(--brand); }

.btn--ghost {
  color: var(--fg-muted);
  border: 1px solid var(--line);
}
.btn--ghost:hover { color: var(--fg); border-color: var(--line-strong); }

.btn--lg { padding: 1.05em 1.7em; font-size: var(--step-0); }
.btn--block { width: 100%; }

/* --------------------------------------------------------------- 5. HEADER */

.hdr {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid transparent;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.hdr.is-scrolled {
  background: oklch(11% 0.006 242 / 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-block-end-color: var(--line);
}
.hdr__bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.65rem; margin-inline-end: auto; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-sm);
  background: var(--bg-metal);
  border: 1px solid var(--line-strong);
  color: var(--accent);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 660;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.brand__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.nav { display: none; gap: var(--space-md); }
.nav a {
  font-size: var(--step--1);
  color: var(--fg-muted);
  /* dokunma/tıklama hedefi 40px'in altına düşmesin */
  padding-block: 0.55rem;
  border-block-end: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav a:hover { color: var(--fg); border-block-end-color: var(--accent); }

.hdr__cta { display: none; }

.burger {
  display: grid;
  place-items: center;
  /* dokunma hedefi 44px'in altına düşmemeli */
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  color: var(--fg);
}
.burger .icon-close, .burger.is-active .icon-menu { display: none; }
.burger.is-active .icon-close { display: block; }

@media (min-width: 62rem) {
  .nav { display: flex; }
  .hdr__cta { display: inline-flex; }
  .burger { display: none; }
}

/* mobil menü */
.menu {
  display: none;
  border-block-start: 1px solid var(--line);
  background: oklch(11% 0.006 242 / 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.menu.is-open { display: block; }
.menu ul { display: grid; gap: 0.15rem; padding-block: var(--space-sm); }
.menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.25rem;
  border-block-end: 1px solid var(--line);
  color: var(--fg-muted);
}
.menu a:hover { color: var(--accent); }

/* ----------------------------------------------------------------- 6. HERO */

.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 7vw, 6.5rem) clamp(2.5rem, 1rem + 5vw, 4.5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 0%, oklch(72% 0.14 207 / 0.16), transparent 65%),
    radial-gradient(45% 45% at 92% 18%, oklch(80% 0.16 85 / 0.10), transparent 70%);
}
/* teknik ızgara zemin */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.028) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 20%, oklch(0% 0 0), transparent 75%);
          mask-image: radial-gradient(80% 70% at 50% 20%, oklch(0% 0 0), transparent 75%);
}
.hero > * { position: relative; z-index: 1; }

.hero__title {
  font-size: var(--step-6);
  max-width: 18ch;
  margin-block: var(--space-md) var(--space-md);
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
}
.hero__lead { max-width: 56ch; color: var(--fg-muted); font-size: var(--step-1); line-height: 1.55; }
.hero__actions { margin-block-start: var(--space-lg); gap: var(--space-sm); }

/* hero altındaki teknik veri şeridi */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin-block-start: var(--space-xl);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: oklch(100% 0 0 / 0.015);
}
.readout__cell { padding: 0.9rem 1.1rem; border-inline-end: 1px solid var(--line); }
.readout__cell:last-child { border-inline-end: 0; }
.readout__k {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--fg-subtle);
}
.readout__v {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: var(--step-1);
  margin-block-start: 0.2rem;
  letter-spacing: -0.02em;
}

/* güven şeridi — kayan */
.trust {
  border-block: 1px solid var(--line);
  background: var(--bg-sunken);
  padding-block: 0.85rem;
}
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  color: var(--fg-muted);
  white-space: nowrap;
}
.trust__item svg { color: var(--brand); }

/* ------------------------------------------------------------- 7. SAYAÇLAR */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stats__cell { background: var(--bg); padding: var(--space-lg) var(--space-md); }
.stats__v {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 640;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.stats__l { font-size: var(--step--1); color: var(--fg-subtle); margin-block-start: 0.35rem; }

/* --------------------------------------------------- 8. DİKEY ZAMAN ÇİZELGESİ */

.flow { display: grid; gap: 0; }
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
}
.flow__step::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 1.55rem;
  width: 1px;
  background: var(--line);
}
.flow__step:first-child::before { inset-block-start: 50%; }
.flow__step:last-child::before  { inset-block-end: 50%; }
.flow__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-metal);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent);
  align-self: start;
}
.flow__body h3 { font-size: var(--step-1); margin-block-end: 0.35rem; }
.flow__body p  { color: var(--fg-muted); font-size: var(--step--1); max-width: 60ch; }

/* --------------------------------------------------------- 9. KART / BENTO */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease);
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--space-lg);
}
.card:hover { transform: translateY(-3px); }
.card__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  background: oklch(72% 0.14 207 / 0.10);
  border: 1px solid oklch(72% 0.14 207 / 0.22);
  color: var(--brand);
  margin-block-end: 0.4rem;
}
.card h3 { font-size: var(--step-1); }
.card p  { color: var(--fg-muted); font-size: var(--step--1); }
.card--wide .card__icon { color: var(--accent); background: var(--accent-dim); border-color: oklch(80% 0.16 85 / 0.3); }
/* bento hücresi olarak kullanıldığında kart hücreyi doldurur;
   ilk kart iki sütun kaplayarak ızgarayı asimetrik kırar. */
/* Izgara birimi hesabı: kartlar geniş hücre 2 birim sayılacak şekilde
   4'e ve 2'ye tam bölünecek biçimde üretiliyor (konum 3+4=8, hizmetler 10+2=12).
   auto-fit serbest bırakılırsa arada 3 sütunlu bir aşama oluşuyor ve son satırda
   boşluk kalıyor; bu yüzden sütun sayısı 4 ↔ 2 ↔ 1 olarak sabitlendi. */
.bento {
  grid-auto-flow: dense;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 36rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* tek sütunda geniş hücre zaten tam genişlik — span'i sıfırla */
@media (max-width: 35.99rem) {
  .bento__item--wide { grid-column: auto; }
}
.bento .card { height: 100%; }
.bento .card--wide h3 { font-size: var(--step-2); }


/* ============================================================ 9b. FOTOĞRAFLAR
   Üretilen fotoğraflar temanın paletiyle (çelik mavi + amber, near-black) uyumlu
   çekildi; buradaki katmanlar onları arayüze BAĞLAR: metnin altındaki alan her
   zaman okunur kalacak kadar karartılır, fotoğraf hiçbir yerde metni ezmez.
   ========================================================================== */

/* hero arka planı — masaüstünde sağda durur, sola doğru tamamen karanlığa iner */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  filter: saturate(0.92);
}
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--bg) 0%,
      oklch(13% 0.006 242 / 0.95) 28%,
      oklch(13% 0.006 242 / 0.62) 58%,
      oklch(13% 0.006 242 / 0.22) 100%),
    linear-gradient(0deg, var(--bg) 1%, transparent 42%);
}
/* mobilde metin fotoğrafın ÜSTÜNDE durur → dikey karartma */
@media (max-width: 62rem) {
  .hero__photo img { object-position: 66% 38%; }
  .hero__photo::after {
    background: linear-gradient(180deg,
      oklch(13% 0.006 242 / 0.62) 0%,
      oklch(13% 0.006 242 / 0.90) 42%,
      var(--bg) 86%);
  }
}

/* fotoğraflı kart */
.card--photo .card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.card--photo .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card--photo:hover .card__media img { transform: scale(1.045); }
.card--photo .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, oklch(13% 0.006 242 / 0.72) 80%, oklch(15% 0.008 242) 100%);
}
/* ikon fotoğrafın alt kenarına oturur, kartı imzalar */
.card--photo .card__icon {
  position: absolute;
  inset-block-start: -3.3rem;
  inset-inline-start: 0;
  margin-block-end: 0;
  background: oklch(13% 0.006 242 / 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card--photo .card__body { position: relative; }

/* geniş bento hücresinde 3:2 kadraj kartı orantısız uzatıyor — daha yatay bir oran.
   Seçici .card--photo .card__media'dan sonra ve ondan daha spesifik olmalı. */
.bento__item--wide.card--photo .card__media { aspect-ratio: 2 / 1; }

/* alt çağrı bloğunda ekip fotoğrafı */
.terminal--photo { overflow: hidden; }
.terminal__photo {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 48%;
  z-index: 0;
}
.terminal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.terminal__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    oklch(17% 0.010 242) 0%,
    oklch(17% 0.010 242 / 0.82) 38%,
    oklch(17% 0.010 242 / 0.30) 100%);
}
.terminal--photo > *:not(.terminal__photo) { position: relative; z-index: 1; }
@media (max-width: 54rem) { .terminal__photo { display: none; } }

/* --------------------------------------------------------------- 10. PROSE */

.panel {
  padding: clamp(1.25rem, 0.6rem + 2.4vw, 2.25rem);
}
.aside-card { padding: var(--space-lg); position: relative; }
.aside-card + .aside-card { margin-block-start: var(--space-md); }
.aside-card h3 { font-size: var(--step-0); margin-block-end: 0.75rem; }
.aside-list { display: grid; gap: 0.55rem; }
.aside-list a, .aside-list span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--fg-muted);
  padding-block: 0.15rem;
}
.aside-list a:hover { color: var(--accent); }
.aside-list svg { color: var(--fg-subtle); flex: none; }

/* ------------------------------------------------------------------ 11. SSS */

.faq { display: grid; gap: 0.6rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: oklch(100% 0 0 / 0.014);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease);
}
.faq details[open] { border-color: var(--line-strong); background: oklch(100% 0 0 / 0.03); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--fg-subtle); flex: none; transition: transform var(--dur-base) var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); color: var(--accent); }
.faq__a { padding: 0 1.25rem 1.25rem; color: var(--fg-muted); font-size: var(--step--1); max-width: 78ch; }

/* -------------------------------------------------------------- 12. ÇİPLER */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* mahalle/komşu bölge linkleri mobilde sık tıklanır: hedef 44px'in altına düşmesin */
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  color: var(--fg-muted);
  background: oklch(100% 0 0 / 0.015);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--accent); border-color: oklch(80% 0.16 85 / 0.45); }
.chip__n { font-family: var(--font-mono); font-size: 0.68rem; color: var(--fg-subtle); }

/* ------------------------------------------------------------ 13. YORUMLAR */

.review { padding: var(--space-lg); position: relative; }
.review__stars { display: flex; gap: 0.15rem; color: var(--accent); margin-block-end: 0.75rem; }
.review p { color: var(--fg-muted); font-size: var(--step--1); }
.review__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--line);
  font-size: var(--step--1);
}
.review__who b { font-weight: 600; }
.review__who span { color: var(--fg-subtle); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ------------------------------------------------------- 14. TERMİNAL CTA */

.terminal {
  position: relative;
  padding: clamp(1.5rem, 0.8rem + 3vw, 3rem);
  background:
    radial-gradient(70% 120% at 15% 0%, oklch(80% 0.16 85 / 0.10), transparent 60%),
    var(--bg-metal);
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block-end: var(--space-md);
  margin-block-end: var(--space-lg);
  border-block-end: 1px solid var(--line);
}
.terminal h2 { font-size: var(--step-4); max-width: 20ch; }
.terminal p { color: var(--fg-muted); max-width: 58ch; margin-block-start: var(--space-sm); }
.terminal__actions { margin-block-start: var(--space-lg); gap: var(--space-sm); }
.terminal__phone {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  color: var(--accent);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;   /* telefon linki dokunma hedefi */
}

/* ------------------------------------------------------ 15. BREADCRUMB */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-block: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--fg-muted); }
/* Uzun blog başlıkları dar ekranda site yolunu iki-üç satıra çıkarıyordu.
   Son halka tek satırda kesilir; tam başlık zaten H1'de ve JSON-LD'de duruyor. */
@media (max-width: 48rem) {
  .crumbs { flex-wrap: nowrap; overflow: hidden; }
  .crumbs > * { flex: none; }
  .crumbs [aria-current] {
    flex: 1 1 auto;
    min-width: 0;              /* flex item'ın kısalabilmesi için gerekli */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.crumbs__sep { opacity: 0.4; }

/* ------------------------------------------------------------- 16. BÖLGELER */

.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-md); }
.region {
  position: relative;
  display: block;
  padding: var(--space-md) var(--space-lg);
  transition: transform var(--dur-base) var(--ease-out);
}
.region:hover { transform: translateY(-3px); }
.region__name { display: block; font-family: var(--font-display); font-weight: 620; font-size: var(--step-1); padding-inline-end: 1.5rem; }
.region__meta { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); margin-block-start: 0.35rem; }
.region__go { position: absolute; inset-block-start: var(--space-md); inset-inline-end: var(--space-md); color: var(--fg-subtle); transition: color var(--dur-fast) var(--ease); }
.region:hover .region__go { color: var(--accent); }

/* ----------------------------------------------------------------- 17. BLOG */

.post-card { position: relative; padding: var(--space-lg); display: flex; flex-direction: column; gap: 0.6rem; height: 100%; transition: transform var(--dur-base) var(--ease-out); }
.post-card:hover { transform: translateY(-3px); }
.post-card time { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); }
.post-card h2, .post-card h3 { font-size: var(--step-1); }
.post-card p { color: var(--fg-muted); font-size: var(--step--1); }
.post-body { max-width: 72ch; }
.post-body h2 { font-size: var(--step-2); margin-block-start: 2em; }
.post-body ol, .post-body ul { padding-inline-start: 1.3em; }
.post-body li::marker { color: var(--accent); }

/* ------------------------------------------------------------------ 18. 404 */

.err { text-align: center; padding-block: clamp(3rem, 2rem + 6vw, 7rem); }
.err__code { font-family: var(--font-mono); font-size: var(--step-7); color: var(--accent); letter-spacing: -0.04em; line-height: 1; }

/* --------------------------------------------------------------- 19. FOOTER */

.ftr { border-block-start: 1px solid var(--line); background: var(--bg-sunken); padding-block: var(--space-2xl) var(--space-lg); }
.ftr__grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.ftr h3 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); margin-block-end: var(--space-sm); }
/* base.css yalnızca ul[class] için list-style sıfırlar; footer listeleri class'sız. */
.ftr ul { display: grid; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.ftr li { display: flex; }
.ftr li a, .ftr li span { display: inline-flex; align-items: center; gap: 0.45rem; }
.menu ul { list-style: none; padding: 0; margin: 0; }
.ftr a { color: var(--fg-muted); font-size: var(--step--1); }
.ftr a:hover { color: var(--accent); }
.ftr__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);
}

/* ============================================================ 20. AKSİYON ÇUBUĞU
   Ekranın altına yapışık, HER sayfada görünen acil aksiyon çubuğu.
   Mobilde tam genişlik, masaüstünde ortada duran metal kapsül.
   ============================================================================ */

.dock {
  position: fixed;
  z-index: 70;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: oklch(10% 0.006 242 / 0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-block-start: 1px solid var(--line-strong);
}
/* üst kenarda amber ışık hattı */
.dock::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(80% 0.16 85 / 0.75), transparent);
}
/* Sabit adres yoksa yol tarifi butonu basılmaz; kalan iki buton genişler. */
.dock__inner--iki { grid-template-columns: 1.25fr 1fr; max-width: 27rem; }
.dock__inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 0.4rem;
  max-width: 34rem;
  margin-inline: auto;
}
.dock .btn {
  padding: 0.8rem 0.5rem;
  font-size: var(--step--2);
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  flex-direction: column;
  gap: 0.3rem;
}
.dock .btn svg { flex: none; }
.dock__label { font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* birincil arama butonunda sürekli hafif nabız */
.dock__call { position: relative; overflow: hidden; }
.dock__call::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.28), transparent);
  transform: translateX(-100%);
  animation: dock-sheen 4.5s var(--ease) infinite;
}
@keyframes dock-sheen {
  0%, 55% { transform: translateX(-100%); }
  85%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}

@media (min-width: 62rem) {
  .dock {
    inset-inline: auto;
    inset-inline-start: 50%;
    inset-block-end: 1.1rem;
    transform: translateX(-50%);
    padding: 0.45rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }
  .dock::before { inset-block-start: 0; border-radius: var(--radius-xl); }
  .dock__inner { grid-template-columns: auto auto auto; gap: 0.35rem; }
  .dock__inner--iki { grid-template-columns: auto auto; }
  .dock .btn { flex-direction: row; padding: 0.75rem 1.15rem; font-size: var(--step--1); }
}

@media (prefers-reduced-motion: reduce) {
  .dock__call::after, .pulse { animation: none; }
}