/* ============================================================================
   BREADCRUMB / SAYFA BAŞLIĞI VARYANTLARI  (Görünüm → Sayfa Başlığı)
   - Tüm renkler Renk Konsepti'ne köprülü tema değişkenlerinden gelir
     (--ink=primary, --orange=accent, --ivory/--cream=bg, --gold, --gray-*).
     Hardcoded renk YOK → konsept değişince tüm breadcrumb'lar güncellenir.
   - Her varyant .bc + .bc-<isim> kök class'ıyla stillenir. Ortak taban .bc'de.
   - Erişilebilir, responsive, CLS'siz (sabit yükseklik zorlaması yok), JS opsiyonel.
   ============================================================================ */

/* ---- Ortak token katmanı (varyantlar override eder) ---- */
.bc {
  --bc-ink:     var(--ink, #0d1220);
  --bc-accent:  var(--orange, #f15a24);
  --bc-accent2: var(--orange-dk, #c2410c);
  --bc-gold:    var(--gold, #b8945f);
  --bc-bg:      var(--ivory, #f5f0e6);
  --bc-bg2:     var(--cream, #ece4d3);
  --bc-surface: var(--surface, #ffffff);
  --bc-muted:   var(--gray-600, #64748b);
  --bc-line:    var(--line, rgba(13, 18, 32, .10));
  --bc-on-dark: #ffffff;
  --bc-pad-y: clamp(2.5rem, 6vw, 5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bc-bg);
  color: var(--bc-ink);
  border-bottom: 1px solid var(--bc-line);
}
.bc > .container { position: relative; z-index: 3; }

/* Başlık tipografisi */
.bc__title {
  color: var(--bc-ink);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}
.bc__lead {
  color: var(--bc-muted);
  max-width: 60ch;
  margin: .9rem 0 0;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
}
.bc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bc-accent);
}
.bc__eyebrow i { font-size: 1em; }

/* Meta pill satırı (blog tarih/yazar, referans yıl/konum) */
.bc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.bc__meta li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--bc-muted);
}
.bc__meta i { color: var(--bc-accent); font-size: .95em; }

/* ---- Ortak breadcrumb izi (.bc-trail) — ayırıcı CSS ::before ---- */
.bc-nav { margin: 0 0 1.15rem; }
.bc-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
}
.bc-trail__item {
  display: inline-flex;
  align-items: center;
  color: var(--bc-muted);
}
.bc-trail__item + .bc-trail__item::before {
  content: '/';
  margin: 0 .55rem;
  color: var(--bc-line);
  font-weight: 400;
}
.bc-trail__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--bc-muted);
  text-decoration: none;
  padding: .15rem .1rem;
  border-radius: 6px;
  transition: color .18s ease;
}
.bc-trail__link:hover,
.bc-trail__link:focus-visible { color: var(--bc-accent); }
.bc-trail__link:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; }
.bc-trail__home { font-size: .82em; color: var(--bc-accent); }
.bc-trail__item.is-current { color: var(--bc-ink); font-weight: 600; }
.bc-trail__cur { display: inline-flex; align-items: center; gap: .35rem; }

/* Layout-shift'siz giriş animasyonu (reduce-motion'a saygılı) */
@media (prefers-reduced-motion: no-preference) {
  .bc__anim { opacity: 0; transform: translateY(10px); animation: bcIn .6s cubic-bezier(.22,.61,.36,1) forwards; }
  .bc__anim--2 { animation-delay: .08s; }
  .bc__anim--3 { animation-delay: .16s; }
  .bc__anim--4 { animation-delay: .24s; }
  @keyframes bcIn { to { opacity: 1; transform: none; } }
}

/* ===========================================================================
   01 · Modern Kurumsal (.bc-corporate) — sol aksan çubuğu + dekoratif köşe
   =========================================================================== */
.bc-corporate {
  padding: calc(var(--bc-pad-y) + .5rem) 0 var(--bc-pad-y);
  background: linear-gradient(135deg, var(--bc-bg) 0%, var(--bc-bg2) 62%, var(--bc-surface) 100%);
}
.bc-corporate::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 4px;
  background: linear-gradient(180deg, transparent, var(--bc-accent) 28%, var(--bc-accent2) 72%, transparent);
  z-index: 2;
}
.bc-corporate::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(38rem 38rem at 92% 8%, color-mix(in srgb, var(--bc-accent) 9%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, transparent, transparent 78px, color-mix(in srgb, var(--bc-ink) 3%, transparent) 78px, color-mix(in srgb, var(--bc-ink) 3%, transparent) 79px);
  z-index: 1; pointer-events: none;
}
.bc-corporate .bc__title { font-size: clamp(2.3rem, 5vw, 3.8rem); }

/* ===========================================================================
   02 · Minimal (.bc-minimal) — sade, ince alt çizgi, düşük yükseklik
   =========================================================================== */
.bc-minimal {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  background: var(--bc-surface);
  border-bottom: 1px solid var(--bc-line);
}
.bc-minimal .bc-nav { margin-bottom: .7rem; }
.bc-minimal .bc__title {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  display: inline-block;
  padding-bottom: .5rem;
  position: relative;
}
.bc-minimal .bc__title::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 44px; height: 3px; border-radius: 3px;
  background: var(--bc-accent);
}
.bc-minimal .bc__eyebrow { display: none; }

/* ===========================================================================
   03 · Ortalanmış (.bc-centered) — simetrik merkez hizası, üstte rozet, ortada iz
   =========================================================================== */
.bc-centered {
  padding: calc(var(--bc-pad-y) + .75rem) 0 calc(var(--bc-pad-y) + .25rem);
  background:
    radial-gradient(50rem 26rem at 50% -10%, color-mix(in srgb, var(--bc-accent) 8%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bc-surface), var(--bc-bg) 100%);
  text-align: center;
}
.bc-centered::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 120px; height: 4px;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, transparent, var(--bc-accent), var(--bc-accent2), transparent);
  z-index: 2;
}
.bc-centered__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  max-width: 62rem;
  margin: 0 auto;
}
.bc-centered .bc__eyebrow {
  padding: .4rem .95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bc-accent) 12%, var(--bc-surface));
  border: 1px solid color-mix(in srgb, var(--bc-accent) 26%, transparent);
  margin-bottom: .4rem;
}
.bc-centered .bc__title {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  max-width: 20ch;
  overflow-wrap: anywhere;
}
.bc-centered .bc__lead {
  margin-inline: auto;
  text-align: center;
}
.bc-centered .bc-nav { margin: 1.35rem 0 0; }
.bc-centered .bc-trail { justify-content: center; }
.bc-centered .bc__meta { justify-content: center; }

@media (max-width: 768px) {
  .bc-centered .bc__title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
}

/* ===========================================================================
   04 · Banner (.bc-banner) — koyu primary tam-en bant, iri beyaz başlık, ince accent çizgi
   =========================================================================== */
.bc-banner {
  padding: calc(var(--bc-pad-y) + 1rem) 0 calc(var(--bc-pad-y) + 1rem);
  background:
    radial-gradient(46rem 30rem at 88% -20%, color-mix(in srgb, var(--bc-accent) 22%, transparent), transparent 60%),
    linear-gradient(120deg, var(--bc-ink), color-mix(in srgb, var(--bc-ink) 82%, #000) 100%);
  border-bottom: none;
}
.bc-banner::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bc-accent), var(--bc-accent2) 55%, var(--bc-gold));
  z-index: 2;
}
.bc-banner .bc__title {
  color: var(--bc-on-dark);
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  overflow-wrap: anywhere;
}
.bc-banner .bc__title::after {
  content: '';
  display: block;
  width: 72px; height: 3px;
  margin-top: 1.1rem;
  border-radius: 3px;
  background: var(--bc-accent);
}
.bc-banner .bc__lead { color: color-mix(in srgb, var(--bc-on-dark) 78%, transparent); }
.bc-banner .bc__eyebrow { color: color-mix(in srgb, var(--bc-accent) 70%, var(--bc-on-dark)); }
.bc-banner .bc__meta li { color: color-mix(in srgb, var(--bc-on-dark) 72%, transparent); }
.bc-banner .bc__meta i { color: var(--bc-accent); }

/* koyu zemin — breadcrumb izi beyaza açılır */
.bc-banner .bc-trail__item { color: rgba(255,255,255,.72); }
.bc-banner .bc-trail__link { color: rgba(255,255,255,.72); }
.bc-banner .bc-trail__link:hover,
.bc-banner .bc-trail__link:focus-visible { color: var(--bc-on-dark); }
.bc-banner .bc-trail__home { color: var(--bc-accent); }
.bc-banner .bc-trail__item.is-current { color: var(--bc-on-dark); }
.bc-banner .bc-trail__item + .bc-trail__item::before { color: rgba(255,255,255,.32); }

@media (max-width: 768px) {
  .bc-banner .bc__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
}

/* ===========================================================================
   05 · Hero Görsel (.bc-heroimg) — token-gradient + desen "görsel" izlenimi + koyu bindirme, sinematik
   =========================================================================== */
.bc-heroimg {
  padding: calc(var(--bc-pad-y) + 1.75rem) 0 calc(var(--bc-pad-y) + 1.75rem);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bc-ink) 88%, #000) 0%, color-mix(in srgb, var(--bc-ink) 55%, transparent) 62%, transparent 100%),
    radial-gradient(30rem 30rem at 78% 30%, color-mix(in srgb, var(--bc-accent) 42%, transparent), transparent 62%),
    conic-gradient(from 210deg at 70% 0%, color-mix(in srgb, var(--bc-accent2) 40%, var(--bc-ink)), var(--bc-ink) 55%, color-mix(in srgb, var(--bc-gold) 34%, var(--bc-ink)) 100%);
  border-bottom: none;
}
.bc-heroimg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 22px, rgba(255,255,255,.035) 22px, rgba(255,255,255,.035) 23px),
    radial-gradient(1.5px 1.5px at 20px 20px, rgba(255,255,255,.10), transparent);
  background-size: auto, 40px 40px;
  z-index: 1;
  pointer-events: none;
}
.bc-heroimg .bc__title {
  color: var(--bc-on-dark);
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
  overflow-wrap: anywhere;
}
.bc-heroimg .bc__lead {
  color: color-mix(in srgb, var(--bc-on-dark) 82%, transparent);
  text-shadow: 0 1px 10px rgba(0,0,0,.25);
}
.bc-heroimg .bc__eyebrow {
  color: var(--bc-on-dark);
  padding: .35rem .85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bc-accent) 55%, transparent);
  backdrop-filter: blur(4px);
}
.bc-heroimg .bc__meta li { color: color-mix(in srgb, var(--bc-on-dark) 78%, transparent); }
.bc-heroimg .bc__meta i { color: var(--bc-on-dark); }

/* koyu zemin — breadcrumb izi beyaza açılır */
.bc-heroimg .bc-trail__item { color: rgba(255,255,255,.74); }
.bc-heroimg .bc-trail__link { color: rgba(255,255,255,.74); }
.bc-heroimg .bc-trail__link:hover,
.bc-heroimg .bc-trail__link:focus-visible { color: var(--bc-on-dark); }
.bc-heroimg .bc-trail__home { color: var(--bc-on-dark); }
.bc-heroimg .bc-trail__item.is-current { color: var(--bc-on-dark); }
.bc-heroimg .bc-trail__item + .bc-trail__item::before { color: rgba(255,255,255,.34); }

@media (max-width: 768px) {
  .bc-heroimg { padding: calc(var(--bc-pad-y) + .5rem) 0; }
  .bc-heroimg .bc__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
}

/* ===========================================================================
   06 · Degrade (.bc-gradient) — canlı çok-duraklı degrade (accent→primary→gold), beyaz metin
   =========================================================================== */
.bc-gradient {
  padding: calc(var(--bc-pad-y) + 1rem) 0 calc(var(--bc-pad-y) + 1rem);
  background:
    linear-gradient(115deg,
      var(--bc-accent) 0%,
      color-mix(in srgb, var(--bc-accent2) 70%, var(--bc-ink)) 34%,
      var(--bc-ink) 64%,
      color-mix(in srgb, var(--bc-ink) 60%, var(--bc-gold)) 100%);
  border-bottom: none;
}
.bc-gradient::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(24rem 24rem at 8% 12%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(28rem 28rem at 96% 96%, color-mix(in srgb, var(--bc-gold) 30%, transparent), transparent 62%);
  z-index: 1;
  pointer-events: none;
}
.bc-gradient .bc__title {
  color: var(--bc-on-dark);
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  overflow-wrap: anywhere;
}
.bc-gradient .bc__lead { color: color-mix(in srgb, var(--bc-on-dark) 86%, transparent); }
.bc-gradient .bc__eyebrow {
  color: var(--bc-on-dark);
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
}
.bc-gradient .bc__meta li { color: color-mix(in srgb, var(--bc-on-dark) 82%, transparent); }
.bc-gradient .bc__meta i { color: var(--bc-on-dark); }

/* koyu/canlı zemin — breadcrumb izi beyaza açılır */
.bc-gradient .bc-trail__item { color: rgba(255,255,255,.78); }
.bc-gradient .bc-trail__link { color: rgba(255,255,255,.78); }
.bc-gradient .bc-trail__link:hover,
.bc-gradient .bc-trail__link:focus-visible { color: var(--bc-on-dark); }
.bc-gradient .bc-trail__link:focus-visible { outline-color: var(--bc-on-dark); }
.bc-gradient .bc-trail__home { color: var(--bc-on-dark); }
.bc-gradient .bc-trail__item.is-current { color: var(--bc-on-dark); }
.bc-gradient .bc-trail__item + .bc-trail__item::before { color: rgba(255,255,255,.4); }

@media (max-width: 768px) {
  .bc-gradient .bc__title { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
}

/* ===========================================================================
   07 · Glassmorphism (.bc-glass) — yumuşak degrade zemin + blur'lu yarı-saydam kart
   =========================================================================== */
.bc-glass {
  padding: calc(var(--bc-pad-y) + .3rem) 0;
  overflow: hidden;
  background:
    radial-gradient(28rem 28rem at 10% 12%, color-mix(in srgb, var(--bc-accent) 30%, transparent), transparent 60%),
    radial-gradient(32rem 32rem at 90% 108%, color-mix(in srgb, var(--bc-ink) 22%, transparent), transparent 62%),
    linear-gradient(135deg, var(--bc-bg2), var(--bc-bg));
}
/* Tam genişlik frosted (buzlu cam) bant — iç içe kart YOK, header'a entegre. */
.bc-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  background: color-mix(in srgb, var(--bc-surface) 24%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--bc-surface) 42%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--bc-ink) 8%, transparent);
  pointer-events: none;
}
.bc-glass > .container { position: relative; z-index: 1; }
.bc-glass__card { position: relative; padding: 0; } /* nesting kaldırıldı — düz içerik */
.bc-glass .bc-nav { margin-bottom: 1rem; }
.bc-glass .bc__title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  overflow-wrap: anywhere;
}
.bc-glass .bc__eyebrow {
  padding: .32rem .85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bc-surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc-surface) 60%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  .bc-glass .bc__title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
}

/* ===========================================================================
   08 · Koyu Tema (.bc-dark) — koyu primary zemin, aydınlık metin, accent vurgu, ince üst hairline
   =========================================================================== */
.bc-dark {
  padding: calc(var(--bc-pad-y) + .5rem) 0 var(--bc-pad-y);
  background:
    radial-gradient(40rem 22rem at 100% 0%, color-mix(in srgb, var(--bc-accent) 14%, transparent), transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, var(--bc-ink) 92%, #000), color-mix(in srgb, var(--bc-ink) 78%, #000));
  border-bottom: 1px solid color-mix(in srgb, var(--bc-on-dark) 8%, transparent);
}
.bc-dark::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bc-accent) 70%, transparent) 40%, color-mix(in srgb, var(--bc-gold) 60%, transparent) 70%, transparent);
  z-index: 2;
}
.bc-dark::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 118px, rgba(255,255,255,.025) 118px, rgba(255,255,255,.025) 119px);
  z-index: 1;
  pointer-events: none;
}
.bc-dark .bc__title {
  color: var(--bc-on-dark);
  font-size: clamp(2.1rem, 4.7vw, 3.5rem);
  overflow-wrap: anywhere;
}
.bc-dark .bc__title::after {
  content: '';
  display: block;
  width: 56px; height: 3px;
  margin-top: 1rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bc-accent), var(--bc-accent2));
}
.bc-dark .bc__lead { color: color-mix(in srgb, var(--bc-on-dark) 70%, transparent); }
.bc-dark .bc__eyebrow { color: color-mix(in srgb, var(--bc-accent) 78%, var(--bc-on-dark)); }
.bc-dark .bc__meta li { color: color-mix(in srgb, var(--bc-on-dark) 66%, transparent); }
.bc-dark .bc__meta i { color: var(--bc-accent); }

/* koyu zemin — breadcrumb izi beyaza açılır */
.bc-dark .bc-trail__item { color: rgba(255,255,255,.66); }
.bc-dark .bc-trail__link { color: rgba(255,255,255,.66); }
.bc-dark .bc-trail__link:hover,
.bc-dark .bc-trail__link:focus-visible { color: var(--bc-on-dark); }
.bc-dark .bc-trail__home { color: var(--bc-accent); }
.bc-dark .bc-trail__item.is-current { color: var(--bc-on-dark); }
.bc-dark .bc-trail__item + .bc-trail__item::before { color: rgba(255,255,255,.28); }

@media (max-width: 768px) {
  .bc-dark .bc__title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
}

/* ===========================================================================
   09 · Açık Tema (.bc-light) — bol beyaz alan, ferah, çok hafif zemin, ince accent nokta/etiket
   =========================================================================== */
.bc-light {
  padding: calc(var(--bc-pad-y) + 1.25rem) 0 calc(var(--bc-pad-y) + 1.25rem);
  background: var(--bc-surface);
  border-bottom: 1px solid var(--bc-line);
}
.bc-light .bc-nav { margin-bottom: 1.5rem; }
.bc-light .bc__eyebrow {
  gap: .55rem;
}
.bc-light .bc__eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bc-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent) 16%, transparent);
}
.bc-light .bc__title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 750;
  letter-spacing: -.025em;
  margin-top: .85rem;
  overflow-wrap: anywhere;
}
.bc-light .bc__lead {
  margin-top: 1.1rem;
  max-width: 56ch;
}
.bc-light .bc__meta {
  margin-top: 1.5rem;
  gap: .6rem 1.4rem;
}
.bc-light .bc__meta li {
  padding-left: .85rem;
  position: relative;
}
.bc-light .bc__meta li::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bc-accent) 60%, var(--bc-line));
}

@media (max-width: 768px) {
  .bc-light { padding: calc(var(--bc-pad-y) + .25rem) 0; }
  .bc-light .bc__title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
}

/* ===========================================================================
   10 · Kart (.bc-card) — üstte renkli şerit + şeride binen yüzen beyaz kart
   =========================================================================== */
.bc-card {
  padding: 0 0 var(--bc-pad-y);
  background: var(--bc-bg);
}
.bc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(96px, 15vw, 168px);
  background: linear-gradient(120deg, var(--bc-accent), var(--bc-accent2) 78%);
  z-index: 0;
}
.bc-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(96px, 15vw, 168px);
  background: radial-gradient(30rem 20rem at 85% -20%, color-mix(in srgb, #fff 18%, transparent), transparent 60%);
  z-index: 1;
  pointer-events: none;
}
.bc-card > .container {
  padding-top: clamp(52px, 9vw, 92px);
}
.bc-card__panel {
  position: relative;
  z-index: 3;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: 18px;
  padding: clamp(1.5rem, 3.4vw, 2.8rem) clamp(1.4rem, 3.4vw, 3rem);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--bc-ink) 6%, transparent),
    0 24px 48px -20px color-mix(in srgb, var(--bc-ink) 26%, transparent);
}
.bc-card__panel::before {
  content: '';
  position: absolute;
  left: clamp(1.4rem, 3.4vw, 3rem);
  top: -1px;
  width: clamp(44px, 8vw, 72px);
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--bc-accent);
}
.bc-card .bc__title { font-size: clamp(1.9rem, 4vw, 3rem); }
@media (max-width: 768px) {
  .bc-card__panel { border-radius: 14px; }
}

/* ===========================================================================
   11 · Bölünmüş (.bc-split) — sol büyük başlık, sağ dikey ortalı breadcrumb izi
   =========================================================================== */
.bc-split {
  padding: var(--bc-pad-y) 0;
  background: linear-gradient(120deg, var(--bc-surface), var(--bc-bg) 100%);
}
.bc-split::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(34rem 34rem at 100% 50%, color-mix(in srgb, var(--bc-accent) 8%, transparent), transparent 62%);
  z-index: 1; pointer-events: none;
}
.bc-split__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.bc-split__main { flex: 1 1 auto; min-width: 0; }
.bc-split__aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--bc-line);
}
.bc-split__aside .bc-nav { margin: 0; }
.bc-split .bc-trail { justify-content: flex-end; }
@media (max-width: 768px) {
  .bc-split__row { flex-direction: column; align-items: flex-start; gap: 1.3rem; }
  .bc-split__aside {
    padding-left: 0; padding-top: 1.2rem;
    border-left: 0; border-top: 1px solid var(--bc-line);
    width: 100%;
  }
  .bc-split .bc-trail { justify-content: flex-start; }
}

/* ===========================================================================
   12 · Yan Panel (.bc-sidebar) — sol dikey accent panel (ikon), sağ içerik
   =========================================================================== */
.bc-sidebar {
  padding: var(--bc-pad-y) 0;
  background: linear-gradient(135deg, var(--bc-bg), var(--bc-bg2) 100%);
}
.bc-sidebar__grid {
  display: grid;
  grid-template-columns: clamp(72px, 10vw, 108px) 1fr;
  align-items: stretch;
  gap: clamp(1.2rem, 3vw, 2.2rem);
}
.bc-sidebar__rail {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--bc-accent), var(--bc-accent2));
  color: var(--bc-on-dark);
  box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--bc-accent) 60%, transparent);
}
.bc-sidebar__rail i { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.bc-sidebar__body { min-width: 0; align-self: center; }
.bc-sidebar .bc__title { font-size: clamp(1.9rem, 4vw, 3.1rem); }
@media (max-width: 768px) {
  .bc-sidebar__grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .bc-sidebar__rail {
    width: clamp(56px, 16vw, 72px);
    aspect-ratio: 1 / 1;
    border-radius: 14px;
  }
}

/* ===========================================================================
   13 · Büyük Başlık (.bc-large) — devasa tipografi, sıkı satır aralığı, cesur
   =========================================================================== */
.bc-large {
  padding: calc(var(--bc-pad-y) + 1rem) 0 calc(var(--bc-pad-y) + .5rem);
  background: var(--bc-surface);
}
.bc-large::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--bc-accent), var(--bc-accent2) 40%, transparent 82%);
  z-index: 2;
}
.bc-large .bc-nav { margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.bc-large .bc__eyebrow { margin-bottom: .6rem; }
.bc-large .bc__title {
  font-size: clamp(2.8rem, 8.5vw, 6rem);
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 850;
  overflow-wrap: anywhere;
  max-width: 16ch;
}
.bc-large .bc__lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 56ch; }
@media (max-width: 768px) {
  .bc-large .bc__title { font-size: clamp(2.4rem, 12vw, 3.6rem); max-width: none; }
}

/* ===========================================================================
   14 · Kompakt (.bc-compact) — ince tek satır bar; iz solda, başlık küçük
   =========================================================================== */
.bc-compact {
  padding: clamp(.9rem, 2vw, 1.35rem) 0;
  background: var(--bc-surface);
}
.bc-compact::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--bc-accent), var(--bc-accent2));
  z-index: 2;
}
.bc-compact__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1rem;
}
.bc-compact .bc-nav { margin: 0; }
.bc-compact__bar .bc__title {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  position: relative;
  padding-left: 1rem;
}
.bc-compact__bar .bc__title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 1.1em;
  transform: translateY(-50%);
  background: var(--bc-line);
}
.bc-compact .bc__meta { margin: 0 0 0 auto; }
.bc-compact .bc__eyebrow,
.bc-compact .bc__lead { display: none; }
@media (max-width: 768px) {
  .bc-compact__bar { row-gap: .35rem; }
  .bc-compact__bar .bc__title {
    padding-left: 0; width: 100%;
  }
  .bc-compact__bar .bc__title::before { display: none; }
  .bc-compact .bc__meta { margin-left: 0; }
}

/* ===========================================================================
   15 · Desenli (.bc-pattern) — nokta-ızgara desenli açık zemin, üstte içerik
   =========================================================================== */
.bc-pattern {
  padding: calc(var(--bc-pad-y) + .25rem) 0 var(--bc-pad-y);
  background: linear-gradient(180deg, var(--bc-surface), var(--bc-bg) 100%);
}
.bc-pattern::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--bc-ink) 16%, transparent) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(60% 120% at 12% 0%, #000, transparent 78%);
          mask-image: radial-gradient(60% 120% at 12% 0%, #000, transparent 78%);
  opacity: .5;
  z-index: 1; pointer-events: none;
}
.bc-pattern::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(34rem 30rem at 96% 4%, color-mix(in srgb, var(--bc-accent) 12%, transparent), transparent 60%);
  z-index: 1; pointer-events: none;
}
.bc-pattern .bc__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
@media (max-width: 768px) {
  .bc-pattern::before { background-size: 18px 18px; }
}

/* ===========================================================================
   16 · İllüstrasyon (.bc-illus) — solda içerik, sağda soyut dekoratif SVG
   =========================================================================== */
.bc-illus {
  padding: var(--bc-pad-y) 0;
  background: linear-gradient(120deg, var(--bc-bg), var(--bc-surface) 100%);
  color: var(--bc-ink);
}
.bc-illus__row {
  display: grid;
  grid-template-columns: 1fr clamp(180px, 26vw, 300px);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.bc-illus__body { min-width: 0; }
.bc-illus .bc__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.bc-illus__art {
  display: block;
  color: var(--bc-ink);
}
.bc-illus__art svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .bc-illus__row { grid-template-columns: 1fr; gap: 1.4rem; }
  .bc-illus__art {
    max-width: 180px;
    order: -1;
    margin-inline-start: auto;
  }
}

/* ===========================================================================
   17 · Animasyonlu (.bc-animated) — sıralı giriş + büyüyen aksan çizgi
   =========================================================================== */
.bc-animated {
  padding: calc(var(--bc-pad-y) + .35rem) 0 var(--bc-pad-y);
  background: linear-gradient(135deg, var(--bc-surface) 0%, var(--bc-bg) 60%, var(--bc-bg2) 100%);
}
.bc-animated::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(34rem 34rem at 88% 0%, color-mix(in srgb, var(--bc-accent) 8%, transparent), transparent 62%);
}
.bc-animated .bc__eyebrow { margin-bottom: .55rem; }
.bc-animated .bc__title { font-size: clamp(2.1rem, 4.8vw, 3.6rem); }
.bc-animated__rule {
  display: block;
  width: clamp(48px, 12vw, 108px); height: 4px; border-radius: 4px;
  margin: 1.05rem 0 0;
  background: linear-gradient(90deg, var(--bc-accent), var(--bc-accent2));
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .bc-animated__el { opacity: 0; transform: translateY(14px); animation: bcAnimIn .62s cubic-bezier(.22,.61,.36,1) forwards; }
  .bc-animated__el--1 { animation-delay: .05s; }
  .bc-animated__el--2 { animation-delay: .14s; }
  .bc-animated__el--3 { animation-delay: .23s; }
  .bc-animated__el--4 { animation-delay: .40s; }
  .bc-animated__el--5 { animation-delay: .48s; }
  .bc-animated__rule { transform: scaleX(0); animation: bcAnimRule .7s cubic-bezier(.22,.61,.36,1) .32s forwards; }
  @keyframes bcAnimIn { to { opacity: 1; transform: none; } }
  @keyframes bcAnimRule { to { transform: scaleX(1); } }
}

@media (max-width: 768px) {
  .bc-animated__rule { width: 64px; }
}

/* ===========================================================================
   18 · Yüzen (.bc-floating) — breadcrumb izi başlığın üstünde yüzen pill-bar
   =========================================================================== */
.bc-floating {
  padding: calc(var(--bc-pad-y) + .25rem) 0 var(--bc-pad-y);
  background: linear-gradient(180deg, var(--bc-bg) 0%, var(--bc-surface) 100%);
}
.bc-floating::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(30rem 24rem at 12% -10%, color-mix(in srgb, var(--bc-accent) 7%, transparent), transparent 60%);
}
/* İz -> yüzen pill bar */
.bc-floating .bc-nav {
  display: inline-block;
  margin: 0 0 1.35rem;
  padding: .5rem 1rem;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--bc-ink) 42%, transparent),
              0 2px 6px -2px color-mix(in srgb, var(--bc-ink) 20%, transparent);
}
.bc-floating .bc-trail__item + .bc-trail__item::before { color: var(--bc-line); }
.bc-floating__body { max-width: 72ch; }
.bc-floating .bc__eyebrow { margin-bottom: .5rem; }
.bc-floating .bc__title { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }

@media (max-width: 768px) {
  .bc-floating .bc-nav {
    display: flex;
    padding: .5rem .85rem;
    box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--bc-ink) 40%, transparent);
  }
}

/* ===========================================================================
   19 · Parallax (.bc-parallax) — sabitlenmiş katman + blur leke, koyu zemin
   =========================================================================== */
.bc-parallax {
  padding: calc(var(--bc-pad-y) + 1rem) 0 calc(var(--bc-pad-y) + .5rem);
  background-color: var(--bc-ink);
  background-image:
    radial-gradient(40rem 40rem at 82% 12%, color-mix(in srgb, var(--bc-accent) 30%, transparent), transparent 58%),
    radial-gradient(46rem 46rem at 8% 108%, color-mix(in srgb, var(--bc-accent2) 26%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--bc-ink) 88%, #000) 0%, var(--bc-ink) 55%, color-mix(in srgb, var(--bc-ink) 78%, var(--bc-accent2)) 100%);
  background-attachment: fixed, fixed, fixed;
}
.bc-parallax__glow {
  position: absolute; z-index: 1; pointer-events: none;
  top: -20%; right: -6%;
  width: 30rem; height: 30rem; border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--bc-accent) 42%, transparent), transparent 68%);
  filter: blur(56px);
  background-attachment: fixed;
}
.bc-parallax .bc__title { color: var(--bc-on-dark); font-size: clamp(2.2rem, 5vw, 3.7rem); }
.bc-parallax .bc__lead { color: color-mix(in srgb, var(--bc-on-dark) 82%, transparent); }
.bc-parallax .bc__eyebrow { color: color-mix(in srgb, var(--bc-on-dark) 92%, var(--bc-accent)); }
.bc-parallax .bc__meta li { color: color-mix(in srgb, var(--bc-on-dark) 74%, transparent); }
.bc-parallax .bc__meta i { color: var(--bc-accent); }
/* Koyu zemin iz override */
.bc-parallax .bc-trail__item { color: color-mix(in srgb, var(--bc-on-dark) 72%, transparent); }
.bc-parallax .bc-trail__link { color: color-mix(in srgb, var(--bc-on-dark) 72%, transparent); }
.bc-parallax .bc-trail__link:hover,
.bc-parallax .bc-trail__link:focus-visible { color: var(--bc-on-dark); }
.bc-parallax .bc-trail__item + .bc-trail__item::before { color: color-mix(in srgb, var(--bc-on-dark) 34%, transparent); }
.bc-parallax .bc-trail__home { color: var(--bc-accent); }
.bc-parallax .bc-trail__item.is-current { color: var(--bc-on-dark); }

@media (max-width: 768px) {
  /* Mobilde fixed parallax jank/o-taşma yapar → normal akışa düş */
  .bc-parallax { background-attachment: scroll, scroll, scroll; }
  .bc-parallax__glow { background-attachment: scroll; }
}

/* ===========================================================================
   20 · Dalga (.bc-wave) — altta SVG dalga ayırıcı, renkli koyu zemin
   =========================================================================== */
.bc-wave {
  padding: calc(var(--bc-pad-y) + .5rem) 0 calc(var(--bc-pad-y) + 3.5rem);
  background: linear-gradient(120deg, var(--bc-ink) 0%, color-mix(in srgb, var(--bc-ink) 62%, var(--bc-accent2)) 62%, var(--bc-accent2) 100%);
  border-bottom: 0;
}
.bc-wave::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(32rem 32rem at 90% 6%, color-mix(in srgb, var(--bc-accent) 26%, transparent), transparent 60%);
}
.bc-wave__svg {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  width: 100%; height: clamp(48px, 7vw, 96px);
  display: block;
}
.bc-wave__fill { fill: var(--bc-surface); }
.bc-wave .bc__title { color: var(--bc-on-dark); font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.bc-wave .bc__lead { color: color-mix(in srgb, var(--bc-on-dark) 84%, transparent); }
.bc-wave .bc__eyebrow { color: color-mix(in srgb, var(--bc-on-dark) 90%, var(--bc-accent)); }
.bc-wave .bc__meta li { color: color-mix(in srgb, var(--bc-on-dark) 76%, transparent); }
.bc-wave .bc__meta i { color: color-mix(in srgb, var(--bc-on-dark) 80%, var(--bc-accent)); }
/* Koyu zemin iz override */
.bc-wave .bc-trail__item { color: color-mix(in srgb, var(--bc-on-dark) 72%, transparent); }
.bc-wave .bc-trail__link { color: color-mix(in srgb, var(--bc-on-dark) 72%, transparent); }
.bc-wave .bc-trail__link:hover,
.bc-wave .bc-trail__link:focus-visible { color: var(--bc-on-dark); }
.bc-wave .bc-trail__item + .bc-trail__item::before { color: color-mix(in srgb, var(--bc-on-dark) 34%, transparent); }
.bc-wave .bc-trail__home { color: color-mix(in srgb, var(--bc-on-dark) 90%, var(--bc-accent)); }
.bc-wave .bc-trail__item.is-current { color: var(--bc-on-dark); }

@media (max-width: 768px) {
  .bc-wave { padding-bottom: calc(var(--bc-pad-y) + 2.25rem); }
}

/* ===========================================================================
   21 · Geometrik (.bc-geo) — köşe geometrik şekiller, dengeli kompozisyon
   =========================================================================== */
.bc-geo {
  padding: calc(var(--bc-pad-y) + .35rem) 0 var(--bc-pad-y);
  background: linear-gradient(135deg, var(--bc-surface) 0%, var(--bc-bg) 100%);
}
.bc-geo__shape { position: absolute; z-index: 1; pointer-events: none; }
/* Sağ üst — conic-gradient halka */
.bc-geo__shape--ring {
  top: -5rem; right: -5rem;
  width: clamp(14rem, 26vw, 22rem); height: clamp(14rem, 26vw, 22rem);
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    color-mix(in srgb, var(--bc-accent) 22%, transparent),
    color-mix(in srgb, var(--bc-accent2) 16%, transparent),
    transparent 62%);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
          mask: radial-gradient(circle, transparent 54%, #000 55%);
}
/* Sağ alt — clip-path üçgen */
.bc-geo__shape--tri {
  bottom: -1px; right: 8%;
  width: clamp(6rem, 14vw, 11rem); height: clamp(6rem, 14vw, 11rem);
  background: linear-gradient(160deg, color-mix(in srgb, var(--bc-accent) 16%, transparent), color-mix(in srgb, var(--bc-ink) 5%, transparent));
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
/* Sol alt — nokta */
.bc-geo__shape--dot {
  bottom: 1.4rem; left: 3%;
  width: clamp(3rem, 7vw, 5rem); height: clamp(3rem, 7vw, 5rem);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--bc-gold) 34%, transparent), transparent 70%);
}
.bc-geo .bc__title { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }

@media (max-width: 768px) {
  .bc-geo__shape--ring { top: -6rem; right: -7rem; opacity: .8; }
  .bc-geo__shape--tri { opacity: .55; }
  .bc-geo__shape--dot { display: none; }
}

/* ===========================================================================
   22 · Blur Zemin (.bc-blur) — yumuşak renk lekeleri, açık zeminde net içerik
   =========================================================================== */
.bc-blur {
  padding: calc(var(--bc-pad-y) + .4rem) 0 var(--bc-pad-y);
  background: var(--bc-bg);
}
.bc-blur__blob {
  position: absolute; z-index: 1; pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .7;
}
.bc-blur__blob--a {
  top: -6rem; left: -4rem;
  width: clamp(16rem, 32vw, 26rem); height: clamp(16rem, 32vw, 26rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--bc-accent) 34%, transparent), transparent 66%);
}
.bc-blur__blob--b {
  top: -3rem; right: 6%;
  width: clamp(13rem, 26vw, 21rem); height: clamp(13rem, 26vw, 21rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--bc-gold) 30%, transparent), transparent 66%);
}
.bc-blur__blob--c {
  bottom: -8rem; right: -3rem;
  width: clamp(15rem, 30vw, 24rem); height: clamp(15rem, 30vw, 24rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--bc-accent2) 26%, transparent), transparent 68%);
}
.bc-blur .bc__title { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }

@media (max-width: 768px) {
  .bc-blur__blob { filter: blur(44px); opacity: .6; }
  .bc-blur__blob--b { display: none; }
}

/* ===========================================================================
   23 · Premium SaaS (.bc-saas) — temiz açık zemin + ince grid + rozet eyebrow
   =========================================================================== */
.bc-saas {
  padding: calc(var(--bc-pad-y) + .4rem) 0 var(--bc-pad-y);
  background: var(--bc-surface);
}
/* İnce grid çizgileri + üstte yumuşak fade */
.bc-saas::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--bc-ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--bc-ink) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 88%);
          mask: linear-gradient(180deg, #000 0%, transparent 88%);
}
.bc-saas::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(30rem 22rem at 50% -20%, color-mix(in srgb, var(--bc-accent) 8%, transparent), transparent 62%);
}
/* Eyebrow → rozet (pill) */
.bc-saas .bc__eyebrow {
  padding: .4rem .85rem;
  margin-bottom: .95rem;
  background: color-mix(in srgb, var(--bc-accent) 10%, var(--bc-surface));
  border: 1px solid color-mix(in srgb, var(--bc-accent) 28%, transparent);
  border-radius: 999px;
  letter-spacing: .1em;
  color: var(--bc-accent2);
}
.bc-saas .bc__title {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  letter-spacing: -.025em;
}
.bc-saas .bc__lead { max-width: 62ch; }

@media (max-width: 768px) {
  .bc-saas::before { background-size: 40px 40px; }
}

/* ===========================================================================
   24 · Üretim / Sanayi (.bc-mfg) — endüstriyel hazard çizgileri + teknik mono etiket
   =========================================================================== */
.bc-mfg {
  padding: var(--bc-pad-y) 0;
  background:
    linear-gradient(180deg, var(--bc-surface), var(--bc-bg));
}
/* Üst hazard bandı (ince çapraz uyarı şeritleri) */
.bc-mfg::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--bc-accent) 0, var(--bc-accent) 12px,
    color-mix(in srgb, var(--bc-ink) 88%, transparent) 12px,
    color-mix(in srgb, var(--bc-ink) 88%, transparent) 24px
  );
  opacity: .9;
  z-index: 2;
}
/* Teknik ızgara + köşe leke */
.bc-mfg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--bc-ink) 5%, transparent) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, color-mix(in srgb, var(--bc-ink) 5%, transparent) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(30rem 30rem at 96% 0%, color-mix(in srgb, var(--bc-accent) 10%, transparent), transparent 62%);
  z-index: 1;
  pointer-events: none;
}
/* Mono teknik etiket */
.bc-mfg .bc__eyebrow {
  font-family: "SFMono-Regular", ui-monospace, "Menlo", monospace;
  letter-spacing: .18em;
  padding: .3rem .6rem;
  border: 1px solid color-mix(in srgb, var(--bc-ink) 22%, transparent);
  border-left: 3px solid var(--bc-accent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--bc-surface) 70%, transparent);
}
.bc-mfg .bc__title {
  margin-top: 1rem;
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
}
.bc-mfg .bc__lead { max-width: 62ch; }
@media (max-width: 768px) {
  .bc-mfg .bc__title { text-transform: none; }
}

/* ===========================================================================
   25 · İnşaat (.bc-construct) — diyagonal koyu aksan bloğu + hazard kenar, blok tipografi
   =========================================================================== */
.bc-construct {
  padding: calc(var(--bc-pad-y) + .25rem) 0 var(--bc-pad-y);
  background: linear-gradient(180deg, var(--bc-bg), var(--bc-bg2));
}
/* Sağ diyagonal koyu blok — hazard kenarlı mühendislik aksanı */
.bc-construct__wedge {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(46%, 30rem);
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--bc-ink) 94%, transparent),
      color-mix(in srgb, var(--bc-ink) 82%, transparent));
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
/* Hazard şerit (blok kenarında ince accent-ink çizgi) */
.bc-construct__wedge::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 14px;
  transform: skewX(-24deg);
  transform-origin: top;
  background: repeating-linear-gradient(
    45deg,
    var(--bc-accent) 0, var(--bc-accent) 10px,
    color-mix(in srgb, var(--bc-ink) 90%, transparent) 10px,
    color-mix(in srgb, var(--bc-ink) 90%, transparent) 20px
  );
}
.bc-construct .bc__eyebrow {
  font-weight: 800;
  letter-spacing: .16em;
}
.bc-construct .bc__title {
  margin-top: .85rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .98;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  max-width: 16ch;
}
.bc-construct .bc__lead { max-width: 52ch; }
@media (max-width: 768px) {
  /* Koyu blok yerine üst hazard şeridi → metin daima açık zeminde (kontrast garanti) */
  .bc-construct__wedge {
    width: auto; left: 0; right: 0; bottom: auto; height: 8px;
    clip-path: none;
    background: repeating-linear-gradient(
      -45deg,
      var(--bc-accent) 0, var(--bc-accent) 11px,
      color-mix(in srgb, var(--bc-ink) 90%, transparent) 11px,
      color-mix(in srgb, var(--bc-ink) 90%, transparent) 22px
    );
  }
  .bc-construct__wedge::before { display: none; }
  .bc-construct .bc__title { text-transform: none; max-width: none; }
}

/* ===========================================================================
   26 · Medikal (.bc-medical) — sakin açık zemin, çok yuvarlak köşeler, yumuşak accent
   =========================================================================== */
.bc-medical {
  padding: var(--bc-pad-y) 0;
  background:
    radial-gradient(34rem 26rem at 88% 12%, color-mix(in srgb, var(--bc-accent) 8%, transparent), transparent 60%),
    radial-gradient(30rem 24rem at 4% 96%, color-mix(in srgb, var(--bc-accent) 6%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bc-surface), color-mix(in srgb, var(--bc-bg) 60%, var(--bc-surface)));
}
/* Yumuşak dekoratif artı işareti (sağ üst) */
.bc-medical__deco {
  position: absolute;
  top: clamp(-1rem, 2vw, 1.2rem);
  right: clamp(-1.5rem, 3vw, 2rem);
  width: clamp(7rem, 16vw, 13rem);
  height: auto;
  fill: color-mix(in srgb, var(--bc-accent) 12%, transparent);
  z-index: 1;
  pointer-events: none;
}
.bc-medical .bc__eyebrow {
  background: color-mix(in srgb, var(--bc-accent) 12%, var(--bc-surface));
  color: var(--bc-accent2);
  padding: .4rem .9rem;
  border-radius: 999px;
  letter-spacing: .1em;
}
.bc-medical .bc__title {
  margin-top: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--bc-ink);
}
.bc-medical .bc__lead { color: color-mix(in srgb, var(--bc-ink) 62%, var(--bc-muted)); }
.bc-medical .bc__meta li {
  background: var(--bc-surface);
  border: 1px solid color-mix(in srgb, var(--bc-accent) 16%, var(--bc-line));
  padding: .35rem .8rem;
  border-radius: 999px;
}
.bc-medical .bc-nav { margin-bottom: 1rem; }
@media (max-width: 768px) {
  .bc-medical__deco { opacity: .7; }
}

/* ===========================================================================
   27 · Eğitim (.bc-edu) — dostane, sıcak, yuvarlak accent rozetler, davetkar
   =========================================================================== */
.bc-edu {
  padding: var(--bc-pad-y) 0;
  background:
    radial-gradient(1.5px 1.5px at 20px 20px, color-mix(in srgb, var(--bc-accent) 22%, transparent) 1px, transparent 1.5px) 0 0 / 46px 46px,
    linear-gradient(180deg, var(--bc-bg2), var(--bc-surface));
}
.bc-edu::after {
  content: '';
  position: absolute;
  right: -4rem; top: -4rem;
  width: 20rem; height: 20rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--bc-accent) 16%, transparent), transparent 68%);
  z-index: 1;
  pointer-events: none;
}
.bc-edu .bc__eyebrow {
  background: color-mix(in srgb, var(--bc-accent) 16%, var(--bc-surface));
  color: var(--bc-accent2);
  padding: .42rem 1rem;
  border-radius: 999px;
  letter-spacing: .08em;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--bc-accent) 14%, transparent);
}
.bc-edu .bc__title {
  margin-top: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.bc-edu .bc__lead { max-width: 56ch; }
.bc-edu .bc__meta li {
  background: color-mix(in srgb, var(--bc-accent) 8%, var(--bc-surface));
  border: 1px solid color-mix(in srgb, var(--bc-accent) 20%, var(--bc-line));
  color: color-mix(in srgb, var(--bc-ink) 70%, var(--bc-muted));
  padding: .4rem .85rem;
  border-radius: 999px;
}
.bc-edu .bc-trail__item.is-current { color: var(--bc-accent2); }
@media (max-width: 768px) {
  .bc-edu::after { width: 12rem; height: 12rem; opacity: .7; }
}

/* ===========================================================================
   28 · Emlak (.bc-estate) — zarif serif başlık, altın ince çizgi, prestijli
   =========================================================================== */
.bc-estate {
  padding: calc(var(--bc-pad-y) + .5rem) 0 calc(var(--bc-pad-y) + .25rem);
  background:
    radial-gradient(40rem 30rem at 50% -10%, color-mix(in srgb, var(--bc-gold) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bc-surface), var(--bc-bg));
}
/* İnce altın üst hairline */
.bc-estate::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bc-gold) 20%, var(--bc-gold) 80%, transparent);
  opacity: .8;
  z-index: 2;
}
.bc-estate .bc__eyebrow {
  color: var(--bc-gold);
  letter-spacing: .22em;
  font-weight: 600;
}
.bc-estate .bc__title {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.1;
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  margin-top: 1rem;
  padding-bottom: 1.1rem;
  position: relative;
}
/* Başlık altı altın ince çizgi */
.bc-estate .bc__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 72px; height: 2px;
  background: linear-gradient(90deg, var(--bc-gold), color-mix(in srgb, var(--bc-gold) 20%, transparent));
}
.bc-estate .bc__lead {
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  max-width: 58ch;
}
.bc-estate .bc__meta i { color: var(--bc-gold); }
.bc-estate .bc-trail__home,
.bc-estate .bc-trail__link:hover { color: var(--bc-gold); }
@media (max-width: 768px) {
  .bc-estate .bc__title { padding-bottom: .9rem; }
}

/* ===========================================================================
   29 · Toolbar (.bc-sticky) — ince backdrop-blur bar, iz + küçük başlık tek satır
   (position:sticky YOK → CLS/z-index riski yok; yalnız görsel toolbar estetiği)
   =========================================================================== */
.bc-sticky {
  padding: clamp(.9rem, 2vw, 1.4rem) 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bc-bg) 70%, var(--bc-surface)), var(--bc-surface));
}
.bc-sticky__bar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.1rem;
  padding: .7rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--bc-ink) 10%, var(--bc-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--bc-surface) 62%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--bc-ink) 7%, transparent);
}
/* İnce sol accent işareti */
.bc-sticky__bar::before {
  content: '';
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--bc-accent), var(--bc-accent2));
  flex: 0 0 auto;
}
.bc-sticky .bc-nav { margin: 0; }
.bc-sticky .bc-trail { font-size: .8rem; }
.bc-sticky .bc__title {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-left: auto;
  padding-left: 1rem;
  border-left: 1px solid color-mix(in srgb, var(--bc-ink) 10%, var(--bc-line));
}
/* Toolbar estetiği: eyebrow + lead gizli, tek satır kalır */
.bc-sticky .bc__eyebrow,
.bc-sticky .bc__lead { display: none; }
.bc-sticky .bc__meta { margin: 0; }
.bc-sticky .bc__meta li { font-size: .78rem; }
@media (max-width: 768px) {
  .bc-sticky__bar { align-items: flex-start; }
  .bc-sticky .bc__title {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    flex-basis: 100%;
  }
}

/* ===========================================================================
   30 · Hareketli Degrade (.bc-motion) — kayan çok-duraklı degrade, beyaz metin
   (statik fallback + reduce-motion guard ile animasyon)
   =========================================================================== */
.bc-motion {
  padding: calc(var(--bc-pad-y) + .25rem) 0;
  color: var(--bc-on-dark);
  /* Statik fallback (animasyon yoksa daima dolu görünür) */
  background:
    linear-gradient(120deg,
      var(--bc-accent2) 0%,
      var(--bc-ink) 34%,
      var(--bc-accent) 60%,
      color-mix(in srgb, var(--bc-gold) 70%, var(--bc-ink)) 80%,
      var(--bc-ink) 100%);
  background-size: 300% 300%;
  background-position: 0% 50%;
}
/* Yumuşak ışık lekesi (derinlik) */
.bc-motion::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(46rem 34rem at 82% 0%, color-mix(in srgb, #ffffff 12%, transparent), transparent 60%);
  z-index: 1;
  pointer-events: none;
}
/* Koyu zemin metin override'ları */
.bc-motion .bc__title { color: var(--bc-on-dark); }
.bc-motion .bc__eyebrow { color: color-mix(in srgb, var(--bc-on-dark) 92%, var(--bc-accent)); }
.bc-motion .bc__lead { color: color-mix(in srgb, var(--bc-on-dark) 82%, transparent); }
.bc-motion .bc__meta li { color: color-mix(in srgb, var(--bc-on-dark) 80%, transparent); }
.bc-motion .bc__meta i { color: var(--bc-on-dark); }
.bc-motion .bc-trail__item { color: color-mix(in srgb, var(--bc-on-dark) 72%, transparent); }
.bc-motion .bc-trail__link { color: color-mix(in srgb, var(--bc-on-dark) 72%, transparent); }
.bc-motion .bc-trail__link:hover,
.bc-motion .bc-trail__link:focus-visible { color: var(--bc-on-dark); }
.bc-motion .bc-trail__home { color: var(--bc-on-dark); }
.bc-motion .bc-trail__item.is-current { color: var(--bc-on-dark); }
.bc-motion .bc-trail__item + .bc-trail__item::before { color: color-mix(in srgb, var(--bc-on-dark) 40%, transparent); }
.bc-motion .bc-trail__link:focus-visible { outline-color: var(--bc-on-dark); }

@media (prefers-reduced-motion: no-preference) {
  .bc-motion { animation: bcMotionShift 18s ease-in-out infinite; }
  @keyframes bcMotionShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
}